1 | import { EventEmitter, Directive, ElementRef, Optional, Input, Output, HostListener, NgModule } from '@angular/core';
|
2 | import { NgModel, NgControl } from '@angular/forms';
|
3 | import { CommonModule } from '@angular/common';
|
4 |
|
5 | class InputTextarea {
|
6 | constructor(el, ngModel, control) {
|
7 | this.el = el;
|
8 | this.ngModel = ngModel;
|
9 | this.control = control;
|
10 | this.onResize = new EventEmitter();
|
11 | }
|
12 | ngOnInit() {
|
13 | if (this.ngModel) {
|
14 | this.ngModelSubscription = this.ngModel.valueChanges.subscribe(() => {
|
15 | this.updateState();
|
16 | });
|
17 | }
|
18 | if (this.control) {
|
19 | this.ngControlSubscription = this.control.valueChanges.subscribe(() => {
|
20 | this.updateState();
|
21 | });
|
22 | }
|
23 | }
|
24 | ngAfterViewInit() {
|
25 | if (this.autoResize)
|
26 | this.resize();
|
27 | }
|
28 | onInput(e) {
|
29 | this.updateState();
|
30 | }
|
31 | updateFilledState() {
|
32 | this.filled = (this.el.nativeElement.value && this.el.nativeElement.value.length) || (this.ngModel && this.ngModel.model);
|
33 | }
|
34 | onFocus(e) {
|
35 | if (this.autoResize) {
|
36 | this.resize(e);
|
37 | }
|
38 | }
|
39 | onBlur(e) {
|
40 | if (this.autoResize) {
|
41 | this.resize(e);
|
42 | }
|
43 | }
|
44 | resize(event) {
|
45 | this.el.nativeElement.style.height = 'auto';
|
46 | this.el.nativeElement.style.height = this.el.nativeElement.scrollHeight + 'px';
|
47 | if (parseFloat(this.el.nativeElement.style.height) >= parseFloat(this.el.nativeElement.style.maxHeight)) {
|
48 | this.el.nativeElement.style.overflowY = "scroll";
|
49 | this.el.nativeElement.style.height = this.el.nativeElement.style.maxHeight;
|
50 | }
|
51 | else {
|
52 | this.el.nativeElement.style.overflow = "hidden";
|
53 | }
|
54 | this.onResize.emit(event || {});
|
55 | }
|
56 | updateState() {
|
57 | this.updateFilledState();
|
58 | if (this.autoResize) {
|
59 | this.resize();
|
60 | }
|
61 | }
|
62 | ngOnDestroy() {
|
63 | if (this.ngModelSubscription) {
|
64 | this.ngModelSubscription.unsubscribe();
|
65 | }
|
66 | if (this.ngControlSubscription) {
|
67 | this.ngControlSubscription.unsubscribe();
|
68 | }
|
69 | }
|
70 | }
|
71 | InputTextarea.decorators = [
|
72 | { type: Directive, args: [{
|
73 | selector: '[pInputTextarea]',
|
74 | host: {
|
75 | '[class.p-inputtextarea]': 'true',
|
76 | '[class.p-inputtext]': 'true',
|
77 | '[class.p-component]': 'true',
|
78 | '[class.p-filled]': 'filled',
|
79 | '[class.p-inputtextarea-resizable]': 'autoResize'
|
80 | }
|
81 | },] }
|
82 | ];
|
83 | InputTextarea.ctorParameters = () => [
|
84 | { type: ElementRef },
|
85 | { type: NgModel, decorators: [{ type: Optional }] },
|
86 | { type: NgControl, decorators: [{ type: Optional }] }
|
87 | ];
|
88 | InputTextarea.propDecorators = {
|
89 | autoResize: [{ type: Input }],
|
90 | onResize: [{ type: Output }],
|
91 | onInput: [{ type: HostListener, args: ['input', ['$event'],] }],
|
92 | onFocus: [{ type: HostListener, args: ['focus', ['$event'],] }],
|
93 | onBlur: [{ type: HostListener, args: ['blur', ['$event'],] }]
|
94 | };
|
95 | class InputTextareaModule {
|
96 | }
|
97 | InputTextareaModule.decorators = [
|
98 | { type: NgModule, args: [{
|
99 | imports: [CommonModule],
|
100 | exports: [InputTextarea],
|
101 | declarations: [InputTextarea]
|
102 | },] }
|
103 | ];
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 | export { InputTextarea, InputTextareaModule };
|
110 |
|