@progress/kendo-angular-inputs 14.4.0-develop.8 → 15.0.0-develop.1

package/esm2020/shared-events.module.mjs

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 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 { SharedInputEventsDirective } from './shared/shared-events.directive';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class SharedEventsModule {
+}
+SharedEventsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedEventsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, declarations: [SharedInputEventsDirective], exports: [SharedInputEventsDirective] });
+SharedEventsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SharedInputEventsDirective],
+                    exports: [SharedInputEventsDirective],
+                }]
+        }] });

package/esm2020/textarea/models/adornments-orientation.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2020/textarea/textarea-prefix.component.mjs

@@ -0,0 +1,70 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Specifies the adornments in the prefix container ([see example]({% slug textarea_adornments %})).
+ * ```ts-no-run
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-textarea>
+ *    <kendo-textarea-prefix>
+ *        <button kendoButton look="clear" icon="image"></button>
+ *    </kendo-textarea-prefix>
+ *  </kendo-textarea>
+ * `
+ * })
+ * class AppComponent {}
+ * ```
+ */
+export class TextAreaPrefixComponent {
+    constructor() {
+        /**
+         * @hidden
+         */
+        this.flow = 'vertical';
+        /**
+         * @hidden
+         */
+        this.orientation = 'horizontal';
+        this.hostClass = true;
+    }
+    get verticalOrientation() {
+        return this.orientation === 'vertical';
+    }
+    get horizontalOrientation() {
+        return this.orientation === 'horizontal';
+    }
+    get alignItems() {
+        return this.flow === this.orientation;
+    }
+}
+TextAreaPrefixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextAreaPrefixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: { flow: "flow", orientation: "orientation" }, host: { properties: { "class.k-input-prefix": "this.hostClass", "class.k-input-prefix-vertical": "this.verticalOrientation", "class.k-input-prefix-horizontal": "this.horizontalOrientation", "class.!k-align-items-start": "this.alignItems" } }, exportAs: ["kendoTextAreaPrefix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaPrefixComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoTextAreaPrefix',
+                    selector: 'kendo-textarea-prefix',
+                    template: `<ng-content></ng-content>`
+                }]
+        }], propDecorators: { flow: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-input-prefix']
+            }], verticalOrientation: [{
+                type: HostBinding,
+                args: ['class.k-input-prefix-vertical']
+            }], horizontalOrientation: [{
+                type: HostBinding,
+                args: ['class.k-input-prefix-horizontal']
+            }], alignItems: [{
+                type: HostBinding,
+                args: ['class.!k-align-items-start']
+            }] } });

package/esm2020/textarea/textarea-suffix.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
@@ -22,11 +22,28 @@ import * as i0 from "@angular/core";
  */
 export class TextAreaSuffixComponent {
     constructor() {
+        /**
+         * @hidden
+         */
+        this.flow = 'vertical';
+        /**
+         * @hidden
+         */
+        this.orientation = 'horizontal';
         this.hostClass = true;
     }
+    get verticalOrientation() {
+        return this.orientation === 'vertical';
+    }
+    get horizontalOrientation() {
+        return this.orientation === 'horizontal';
+    }
+    get alignItems() {
+        return this.flow === this.orientation;
+    }
 }
 TextAreaSuffixComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextAreaSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", host: { properties: { "class.k-input-suffix": "this.hostClass" } }, exportAs: ["kendoTextAreaSuffix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
+TextAreaSuffixComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: { flow: "flow", orientation: "orientation" }, host: { properties: { "class.k-input-suffix": "this.hostClass", "class.k-input-suffix-vertical": "this.verticalOrientation", "class.k-input-suffix-horizontal": "this.horizontalOrientation", "class.!k-align-items-start": "this.alignItems" } }, exportAs: ["kendoTextAreaSuffix"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaSuffixComponent, decorators: [{
             type: Component,
             args: [{
@@ -34,7 +51,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     selector: 'kendo-textarea-suffix',
                     template: `<ng-content></ng-content>`
                 }]
-        }], propDecorators: { hostClass: [{
+        }], propDecorators: { flow: [{
+                type: Input
+            }], orientation: [{
+                type: Input
+            }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-input-suffix']
+            }], verticalOrientation: [{
+                type: HostBinding,
+                args: ['class.k-input-suffix-vertical']
+            }], horizontalOrientation: [{
+                type: HostBinding,
+                args: ['class.k-input-suffix-horizontal']
+            }], alignItems: [{
+                type: HostBinding,
+                args: ['class.!k-align-items-start']
             }] } });

package/esm2020/textarea/textarea.component.mjs

@@ -2,22 +2,25 @@
 * Copyright © 2024 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 { Component, HostBinding, Input, Output, ElementRef, EventEmitter, NgZone, Renderer2, ChangeDetectorRef, Injector, forwardRef, ContentChild } 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 { KendoInput, guid, isDocumentAvailable, hasObservers } 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 { TextAreaPrefixComponent } from './textarea-prefix.component';
+import { TextAreaSuffixComponent } from './textarea-suffix.component';
 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";
+import * as i2 from "../shared/input-separator.component";
+import * as i3 from "../shared/shared-events.directive";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-common";
 const resizeClasses = {
     'vertical': 'k-resize-y',
     'horizontal': 'k-resize-x',
@@ -46,15 +49,7 @@ export class TextAreaComponent extends TextFieldsBase {
          */
         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';
+        this._flow = 'vertical';
         /**
          * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -71,6 +66,20 @@ export class TextAreaComponent extends TextFieldsBase {
          *
          */
         this.resizable = 'vertical';
+        /**
+         * Specifies whether the prefix separator of the TextArea is rendered.
+         * If a prefix template is not declared, the separator will not be rendered, regardless of the parameter value.
+         *
+         * @default false
+         */
+        this.showPrefixSeparator = false;
+        /**
+         * Specifies whether the suffix separator of the TextArea is rendered.
+         * If a suffix template is not declared, the separator will not be rendered, regardless of the parameter value.
+         *
+         * @default false
+         */
+        this.showSuffixSeparator = false;
         /**
          * Fires each time the user focuses the TextArea component.
          *
@@ -122,6 +131,7 @@ export class TextAreaComponent extends TextFieldsBase {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this._adornmentsOrientation = 'horizontal';
         /**
          * @hidden
          */
@@ -140,12 +150,8 @@ export class TextAreaComponent extends TextFieldsBase {
                         setTimeout(() => { this.selectAll(); });
                     });
                 }
-                if (hasObservers(this.onFocus)) {
-                    if (!this.isFocused) {
-                        this.ngZone.run(() => {
-                            this.onFocus.emit();
-                        });
-                    }
+                if (!this.isFocused) {
+                    this.handleFocus();
                 }
                 if (hasObservers(this.inputFocus)) {
                     if (!this.focusChangedProgrammatically) {
@@ -154,9 +160,6 @@ export class TextAreaComponent extends TextFieldsBase {
                         });
                     }
                 }
-                this.ngZone.run(() => {
-                    this.isFocused = true;
-                });
             }
         };
         validatePackage(packageMetadata);
@@ -168,6 +171,46 @@ export class TextAreaComponent extends TextFieldsBase {
     get flowRow() {
         return this.flow === 'horizontal';
     }
+    /**
+     * 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.
+     */
+    set flow(flow) {
+        this._flow = flow;
+        if (this.prefix) {
+            this.prefix.flow = flow;
+        }
+        if (this.suffix) {
+            this.suffix.flow = flow;
+        }
+    }
+    get flow() {
+        return this._flow;
+    }
+    /**
+     * Specifies the orientation of the TextArea adornments. This property is used in order to specify
+     * the adornments' position relative to themselves.
+     *
+     * The possible values are:
+     * * `horizontal`(Default) —TextArea adornments are placed from left to right in `ltr`, and from right to left in `rtl` mode.
+     * * `vertical`—TextArea adornments are placed from top to bottom.
+     */
+    set adornmentsOrientation(orientation) {
+        this._adornmentsOrientation = orientation;
+        if (this.prefix) {
+            this.prefix.orientation = orientation;
+        }
+        if (this.suffix) {
+            this.suffix.orientation = orientation;
+        }
+    }
+    get adornmentsOrientation() {
+        return this._adornmentsOrientation;
+    }
     /**
      * @hidden
      */
@@ -232,50 +275,7 @@ export class TextAreaComponent extends TextFieldsBase {
         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'];
@@ -372,6 +372,33 @@ export class TextAreaComponent extends TextFieldsBase {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
+    /**
+     * @hidden
+     */
+    get separatorOrientation() {
+        return this.flow === 'horizontal' ? 'vertical' : 'horizontal';
+    }
+    /**
+     * @hidden
+     */
+    get isFocused() {
+        return this._isFocused;
+    }
+    /**
+     * @hidden
+     */
+    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;
+        }
+    }
     /**
      * Focuses the TextArea component.
      *
@@ -427,21 +454,20 @@ export class TextAreaComponent extends TextFieldsBase {
             }, 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);
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.ngZone.run(() => {
+            if (!this.focusChangedProgrammatically && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
             }
-            this._isFocused = value;
-        }
+            this.isFocused = true;
+        });
     }
+    /**
+     * @hidden
+     */
     handleBlur() {
         this.ngZone.run(() => {
             if (!this.focusChangedProgrammatically) {
@@ -472,17 +498,12 @@ export class TextAreaComponent extends TextFieldsBase {
     }
     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: [
+TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextAreaComponent, selector: "kendo-textarea", inputs: { focusableId: "focusableId", flow: "flow", adornmentsOrientation: "adornmentsOrientation", rows: "rows", cols: "cols", maxlength: "maxlength", tabindex: "tabindex", tabIndex: "tabIndex", resizable: "resizable", size: "size", rounded: "rounded", fillMode: "fillMode", showPrefixSeparator: "showPrefixSeparator", showSuffixSeparator: "showSuffixSeparator" }, 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' },
         {
@@ -491,32 +512,49 @@ TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             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 !k-overflow-auto"
-            [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}">
+    ], queries: [{ propertyName: "prefix", first: true, predicate: TextAreaPrefixComponent, descendants: true }, { propertyName: "suffix", first: true, predicate: TextAreaSuffixComponent, descendants: true }], exportAs: ["kendoTextArea"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <ng-content select="kendo-textarea-prefix"></ng-content>
+            <kendo-input-separator
+                *ngIf="prefix && showPrefixSeparator"
+                [orientation]="separatorOrientation"
+            ></kendo-input-separator>
+            <textarea
+                #input
+                [attr.aria-multiline]="true"
+                [attr.aria-disabled]="disabled ? true : undefined"
+                [attr.aria-readonly]="readonly ? true : undefined"
+                class="k-input-inner !k-overflow-auto"
+                [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>
+            <kendo-input-separator
+                *ngIf="suffix && showSuffixSeparator"
+                [orientation]="separatorOrientation"
+            ></kendo-input-separator>
             <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"] }] });
+        </ng-container>
+    `, isInline: true, components: [{ type: i2.InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: i3.SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{
@@ -533,30 +571,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     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 !k-overflow-auto"
-            [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}">
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <ng-content select="kendo-textarea-prefix"></ng-content>
+            <kendo-input-separator
+                *ngIf="prefix && showPrefixSeparator"
+                [orientation]="separatorOrientation"
+            ></kendo-input-separator>
+            <textarea
+                #input
+                [attr.aria-multiline]="true"
+                [attr.aria-disabled]="disabled ? true : undefined"
+                [attr.aria-readonly]="readonly ? true : undefined"
+                class="k-input-inner !k-overflow-auto"
+                [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>
+            <kendo-input-separator
+                *ngIf="suffix && showSuffixSeparator"
+                [orientation]="separatorOrientation"
+            ></kendo-input-separator>
             <ng-content select="kendo-textarea-suffix"></ng-content>
+        </ng-container>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
@@ -575,6 +630,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['class.\!k-flex-row']
             }], flow: [{
                 type: Input
+            }], adornmentsOrientation: [{
+                type: Input
             }], rows: [{
                 type: Input
             }], cols: [{
@@ -593,6 +650,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
+            }], showPrefixSeparator: [{
+                type: Input
+            }], showSuffixSeparator: [{
+                type: Input
             }], onFocus: [{
                 type: Output,
                 args: ['focus']
@@ -601,4 +662,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['blur']
             }], valueChange: [{
                 type: Output
+            }], prefix: [{
+                type: ContentChild,
+                args: [TextAreaPrefixComponent]
+            }], suffix: [{
+                type: ContentChild,
+                args: [TextAreaSuffixComponent]
             }] } });