@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/esm2020/textarea/textarea.component.mjs

@@ -0,0 +1,604 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input, Output, ElementRef, EventEmitter, NgZone, Renderer2, ChangeDetectorRef, Injector, forwardRef } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { KendoInput, guid, isDocumentAvailable, hasObservers, Keys } from '@progress/kendo-angular-common';
+import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { TextFieldsBase } from '../text-fields-common/text-fields-base';
+import { areSame, isPresent, getStylingClasses } from '../common/utils';
+import { invokeElementMethod } from '../common/dom-utils';
+import { closest } from './../common/dom-utils';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-common";
+const resizeClasses = {
+    'vertical': 'k-resize-y',
+    'horizontal': 'k-resize-x',
+    'both': 'k-resize',
+    'none': 'k-resize-none',
+    'auto': 'k-resize-none'
+};
+const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
+/**
+ * Represents the [Kendo UI TextArea component for Angular]({% slug overview_textarea %}).
+ */
+export class TextAreaComponent extends TextFieldsBase {
+    constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
+        super(localizationService, ngZone, changeDetector, renderer, injector, hostElement);
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        this.injector = injector;
+        this.hostElement = hostElement;
+        /**
+         * @hidden
+         */
+        this.focusableId = `k-${guid()}`;
+        this.hostClasses = true;
+        /**
+         * Specifies the flow direction of the TextArea sections. This property is useful when adornments are used, in order to specify
+         * their position in relation to the textarea element.
+         *
+         * The possible values are:
+         * * `vertical`(Default) —TextArea sections are placed from top to bottom.
+         * * `horizontal`—TextArea sections are placed from left to right in `ltr`, and from right to left in `rtl` mode.
+         */
+        this.flow = 'vertical';
+        /**
+         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         */
+        this.tabindex = 0;
+        /**
+         * Configures the resize behavior of the TextArea.
+         *
+         * The possible values are:
+         * * `vertical`(Default)—The TextArea component can be resized only vertically.
+         * * `horizontal`—The TextArea component can be resized only horizontally.
+         * * `both`—The TextArea component can be resized in both (horizontal and vertical) directions.
+         * * `auto`—Specifies whether the TextArea component will adjust its height automatically, based on the content.
+         * * `none`—The TextArea cannot be resized.
+         *
+         */
+        this.resizable = 'vertical';
+        /**
+         * Fires each time the user focuses the TextArea component.
+         *
+         * > To wire the event programmatically, use the `onFocus` property.
+         *
+         * @example
+         * ```ts
+         * _@Component({
+         * selector: 'my-app',
+         * template: `
+         *  <kendo-textarea (focus)="handleFocus()"></kendo-textarea>
+         * `
+         * })
+         * class AppComponent {
+         *   public handleFocus(): void {
+         *      console.log('Component is focused');
+         *   }
+         * }
+         * ```
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the TextArea component gets blurred.
+         *
+         * > To wire the event programmatically, use the `onBlur` property.
+         *
+         * @example
+         * ```ts
+         * _@Component({
+         * selector: 'my-app',
+         * template: `
+         *  <kendo-textarea (blur)="handleBlur()"></kendo-textarea>
+         * `
+         * })
+         * class AppComponent {
+         *   public handleBlur(): void {
+         *      console.log('Component is blurred');
+         *   }
+         * }
+         * ```
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the value is changed or the component is blurred
+         * ([see example]({% slug overview_textarea %}#toc-events)).
+         * When the component value is changed programmatically or via its form control binding, the valueChange event is not emitted.
+         */
+        this.valueChange = new EventEmitter();
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        /**
+         * @hidden
+         */
+        this.handleInput = (ev) => {
+            const incomingValue = ev.target.value;
+            this.updateValue(incomingValue);
+            this.resize();
+        };
+        /**
+         * @hidden
+         */
+        this.handleInputFocus = () => {
+            if (!this.disabled) {
+                if (this.selectOnFocus && this.value) {
+                    this.ngZone.run(() => {
+                        setTimeout(() => { this.selectAll(); });
+                    });
+                }
+                if (hasObservers(this.onFocus)) {
+                    if (!this.isFocused) {
+                        this.ngZone.run(() => {
+                            this.onFocus.emit();
+                        });
+                    }
+                }
+                if (hasObservers(this.inputFocus)) {
+                    if (!this.focusChangedProgrammatically) {
+                        this.ngZone.run(() => {
+                            this.inputFocus.emit();
+                        });
+                    }
+                }
+                this.ngZone.run(() => {
+                    this.isFocused = true;
+                });
+            }
+        };
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
+    get flowCol() {
+        return this.flow === 'vertical';
+    }
+    get flowRow() {
+        return this.flow === 'horizontal';
+    }
+    /**
+     * @hidden
+     */
+    set tabIndex(tabIndex) {
+        this.tabindex = tabIndex;
+    }
+    get tabIndex() {
+        return this.tabindex;
+    }
+    /**
+     * The size property specifies the padding of the internal textarea element
+     * ([see example]({% slug appearance_textarea %}#toc-size)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the TextArea
+     * ([see example]({% slug appearance_textarea %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the TextArea
+     * ([see example]({% slug appearance_textarea %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
+     */
+    set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    ngAfterViewInit() {
+        const hostElement = this.hostElement.nativeElement;
+        let cursorInsideWrapper = false;
+        let tabbing = false;
+        this.ngZone.runOutsideAngular(() => {
+            // focusIn and focusOut are relative to the host element
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
+                if (!this.isFocused) {
+                    this.ngZone.run(() => {
+                        this.onFocus.emit();
+                        this.isFocused = true;
+                    });
+                }
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (args) => {
+                if (!this.isFocused) {
+                    return;
+                }
+                if (tabbing) {
+                    const closestTextbox = closest(args.relatedTarget, (element) => element === this.hostElement.nativeElement);
+                    if (!closestTextbox) {
+                        this.handleBlur();
+                    }
+                    tabbing = false;
+                }
+                else {
+                    if (!cursorInsideWrapper) {
+                        this.handleBlur();
+                    }
+                }
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'mouseenter', () => {
+                cursorInsideWrapper = true;
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'mouseleave', () => {
+                cursorInsideWrapper = false;
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
+                if (args.keyCode === Keys.Tab) {
+                    tabbing = true;
+                }
+                else {
+                    tabbing = false;
+                }
+            }));
+            this.handleFlow();
+        });
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    ngOnInit() {
+        this.control = this.injector.get(NgControl, null);
+        if (isDocumentAvailable() && this.resizable === 'auto') {
+            this.resizeSubscription = fromEvent(window, 'resize')
+                .pipe((debounceTime(50)))
+                .subscribe(() => this.resize());
+        }
+        if (this.hostElement) {
+            this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        }
+        this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    ngOnChanges(changes) {
+        const hostElement = this.hostElement.nativeElement;
+        const element = this.input.nativeElement;
+        if (changes.flow) {
+            this.handleFlow();
+        }
+        if (changes.resizable) {
+            if (this.resizable === 'auto') {
+                this.renderer.removeClass(element, '\!k-overflow-y-auto');
+                this.initialHeight = element.offsetHeight;
+            }
+            else {
+                this.renderer.addClass(element, '\!k-overflow-y-auto');
+                element.style.height = `${this.initialHeight}px`;
+            }
+        }
+        if (changes.cols) {
+            if (isPresent(changes.cols.currentValue)) {
+                this.renderer.setStyle(hostElement, 'width', 'auto');
+            }
+            else {
+                this.renderer.removeStyle(hostElement, 'width');
+            }
+        }
+        if (changes.value) {
+            this.resize();
+        }
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.value = value;
+        this.resize();
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.ngChange = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.ngTouched = fn;
+    }
+    updateValue(value) {
+        if (!areSame(this.value, value)) {
+            this.ngZone.run(() => {
+                this.value = value;
+                this.ngChange(value);
+                this.valueChange.emit(value);
+                this.changeDetector.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this.resizeSubscription) {
+            this.resizeSubscription.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    get resizableClass() {
+        return resizeClasses[this.resizable];
+    }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
+    /**
+     * Focuses the TextArea component.
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     *  <button (click)="textarea.focus()">Focus the textarea</button>
+     *  <kendo-textarea #textarea></kendo-textarea>
+     * `
+     * })
+     * class AppComponent { }
+     * ```
+     */
+    focus() {
+        if (!this.input) {
+            return;
+        }
+        this.focusChangedProgrammatically = true;
+        this.isFocused = true;
+        this.input.nativeElement.focus();
+        this.focusChangedProgrammatically = false;
+    }
+    /**
+     * Blurs the TextArea component.
+     */
+    blur() {
+        this.focusChangedProgrammatically = true;
+        const isFocusedElement = this.hostElement.nativeElement.querySelector(':focus');
+        if (isFocusedElement) {
+            isFocusedElement.blur();
+        }
+        this.isFocused = false;
+        this.focusChangedProgrammatically = false;
+    }
+    resize() {
+        if (this.resizable !== 'auto') {
+            return;
+        }
+        // The logic of the resize method, does not depend on Angular and thus moving it outisde of it
+        // We need to ensure that the resizing logic runs after the value is updated thus the setTimout
+        this.ngZone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const hostElement = this.hostElement.nativeElement;
+                const element = this.input.nativeElement;
+                this.renderer.setStyle(element, 'height', `${this.initialHeight}px`);
+                const scrollHeight = element.scrollHeight;
+                this.renderer.setStyle(hostElement, 'min-height', `${scrollHeight}px`);
+                if (scrollHeight > this.initialHeight) {
+                    this.renderer.setStyle(element, 'height', `${scrollHeight}px`);
+                }
+            }, 0);
+        });
+    }
+    get isFocused() {
+        return this._isFocused;
+    }
+    set isFocused(value) {
+        if (this._isFocused !== value && this.hostElement) {
+            const element = this.hostElement.nativeElement;
+            if (value && !this.disabled) {
+                this.renderer.addClass(element, FOCUSED);
+            }
+            else {
+                this.renderer.removeClass(element, FOCUSED);
+            }
+            this._isFocused = value;
+        }
+    }
+    handleBlur() {
+        this.ngZone.run(() => {
+            if (!this.focusChangedProgrammatically) {
+                this.onBlur.emit();
+            }
+            this.isFocused = false;
+        });
+    }
+    setSelection(start, end) {
+        if (this.isFocused) {
+            invokeElementMethod(this.input, 'setSelectionRange', start, end);
+        }
+    }
+    selectAll() {
+        if (this.value) {
+            this.setSelection(0, this.value.length);
+        }
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('input', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    handleFlow() {
+        const isVertical = this.flow === 'vertical';
+        const hostElement = this.hostElement.nativeElement;
+        const element = this.input.nativeElement;
+        const suffix = hostElement.children[1];
+        this.renderer[isVertical ? 'addClass' : 'removeClass'](element, '\!k-flex-none');
+        if (suffix) {
+            this.renderer[isVertical ? 'removeClass' : 'addClass'](suffix, '\!k-align-items-start');
+        }
+    }
+}
+TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextAreaComponent, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", rows: "rows", cols: "cols", maxlength: "maxlength", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-textarea": "this.hostClasses", "class.k-input": "this.hostClasses", "class.!k-flex-col": "this.flowCol", "class.!k-flex-row": "this.flowRow" } }, providers: [
+        LocalizationService,
+        { provide: L10N_PREFIX, useValue: 'kendo.textarea' },
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TextAreaComponent),
+            multi: true
+        },
+        { provide: KendoInput, useExisting: forwardRef(() => TextAreaComponent) }
+    ], exportAs: ["kendoTextArea"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <textarea
+            #input
+            [attr.aria-multiline]="true"
+            [attr.aria-disabled]="disabled ? true : undefined"
+            [attr.aria-readonly]="readonly ? true : undefined"
+            class="k-input-inner"
+            [ngClass]="resizableClass"
+            [id]="focusableId"
+            [value]="value"
+            [attr.placeholder]="placeholder"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [attr.rows]="rows"
+            [attr.cols]="cols"
+            [attr.tabindex]="tabIndex"
+            [attr.title]="title"
+            [attr.maxlength]="maxlength"
+            [attr.aria-invalid]="isControlInvalid"
+            [kendoEventsOutsideAngular]="{
+                focus: handleInputFocus,
+                blur: handleInputBlur,
+                input: handleInput}">
+            </textarea>
+            <ng-content select="kendo-textarea-suffix"></ng-content>
+    `, isInline: true, directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoTextArea',
+                    providers: [
+                        LocalizationService,
+                        { provide: L10N_PREFIX, useValue: 'kendo.textarea' },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextAreaComponent),
+                            multi: true
+                        },
+                        { provide: KendoInput, useExisting: forwardRef(() => TextAreaComponent) }
+                    ],
+                    selector: 'kendo-textarea',
+                    template: `
+        <textarea
+            #input
+            [attr.aria-multiline]="true"
+            [attr.aria-disabled]="disabled ? true : undefined"
+            [attr.aria-readonly]="readonly ? true : undefined"
+            class="k-input-inner"
+            [ngClass]="resizableClass"
+            [id]="focusableId"
+            [value]="value"
+            [attr.placeholder]="placeholder"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [attr.rows]="rows"
+            [attr.cols]="cols"
+            [attr.tabindex]="tabIndex"
+            [attr.title]="title"
+            [attr.maxlength]="maxlength"
+            [attr.aria-invalid]="isControlInvalid"
+            [kendoEventsOutsideAngular]="{
+                focus: handleInputFocus,
+                blur: handleInputBlur,
+                input: handleInput}">
+            </textarea>
+            <ng-content select="kendo-textarea-suffix"></ng-content>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-textarea']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input']
+            }], flowCol: [{
+                type: HostBinding,
+                args: ['class.\!k-flex-col']
+            }], flowRow: [{
+                type: HostBinding,
+                args: ['class.\!k-flex-row']
+            }], flow: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], cols: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], valueChange: [{
+                type: Output
+            }] } });

package/esm2020/textarea.module.mjs

@@ -0,0 +1,68 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { TextAreaComponent } from "./textarea/textarea.component";
+import { EventsModule } from "@progress/kendo-angular-common";
+import { TextAreaSuffixComponent } from './textarea/textarea-suffix.component';
+import { SharedModule, SHARED_DIRECTIVES } from './shared.module';
+import * as i0 from "@angular/core";
+import * as i1 from "./shared/input-separator.component";
+import * as i2 from "./shared/textarea.directive";
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the TextArea component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the TextArea module
+ * import { TextAreaModule } from '@progress/kendo-angular-inputs';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, TextAreaModule], // import TextArea module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+export class TextAreaModule {
+}
+TextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, declarations: [TextAreaComponent,
+        TextAreaSuffixComponent], imports: [CommonModule, EventsModule, SharedModule], exports: [TextAreaComponent,
+        EventsModule,
+        TextAreaSuffixComponent, i1.InputSeparatorComponent, i2.TextAreaDirective] });
+TextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, imports: [[CommonModule, EventsModule, SharedModule], EventsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        TextAreaComponent,
+                        TextAreaSuffixComponent
+                    ],
+                    exports: [
+                        TextAreaComponent,
+                        EventsModule,
+                        TextAreaSuffixComponent,
+                        SHARED_DIRECTIVES
+                    ],
+                    imports: [CommonModule, EventsModule, SharedModule]
+                }]
+        }] });