@progress/kendo-angular-inputs 14.4.0-develop.2 → 14.4.0-develop.21

package/fesm2015/progress-kendo-angular-inputs.mjs

@@ -1,30 +1,31 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { isDevMode, Directive, Optional, EventEmitter, ElementRef, Component, Input, Output, HostBinding, ViewChild, ContentChild, ViewChildren, forwardRef, Inject, Injectable, HostListener, NgModule, ViewContainerRef, ContentChildren, ChangeDetectionStrategy } from '@angular/core';
+import { isDevMode, Directive, Optional, EventEmitter, ElementRef, Component, Input, Output, HostBinding, ViewChild, ContentChild, ViewChildren, forwardRef, Inject, Injectable, HostListener, NgModule, ContentChildren, ViewContainerRef, ChangeDetectionStrategy } from '@angular/core';
 import { NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, RadioControlValueAccessor } from '@angular/forms';
 import { Subscription, fromEvent, interval, merge, BehaviorSubject, Subject } from 'rxjs';
 import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, throttleTime } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
-import * as i3 from '@progress/kendo-angular-common';
-import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
+import * as i4$1 from '@progress/kendo-angular-common';
+import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, isChanged, DraggableModule, EventsModule, ResizeSensorModule, AdornmentsModule, isSafari, PreventableEvent, findFocusableChild, parseCSSClassNames, closest as closest$1 } from '@progress/kendo-angular-common';
+export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, dropletSliderIcon, paletteIcon, dropletSlashIcon, caretAltExpandIcon, xCircleIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
-import * as i1$1 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { browser, mobileOS } from '@progress/kendo-common';
-import * as i1$2 from '@progress/kendo-angular-intl';
+import * as i1$1 from '@progress/kendo-angular-intl';
 import * as i2$1 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
-import * as i1$3 from '@progress/kendo-angular-popup';
+import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
-import * as i3$1 from '@progress/kendo-angular-dialog';
+import * as i3 from '@progress/kendo-angular-dialog';
 import { DialogsModule } from '@progress/kendo-angular-dialog';
 import { __awaiter } from 'tslib';
 import { SignaturePad } from '@progress/kendo-inputs-common';
@@ -537,8 +538,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1703164471,
-    version: '14.4.0-develop.2',
+    publishDate: 1706522827,
+    version: '14.4.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -638,7 +639,7 @@ class SliderBase {
          */
         this.largeStep = null;
         /**
-         * Determines whether the Slider is disabled ([see example]({% slug disabledstate_slider %})).
+         * Determines whether the Slider is disabled ([see example]({% slug disabledstate_slider %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_slider#toc-managing-the-slider-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -896,7 +897,7 @@ SliderTicksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
      <ng-template #defaultLabel let-value="value">
         {{ tickTitle(value) }}
      </ng-template>
-  `, isInline: true, directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderTicksComponent, decorators: [{
             type: Component,
             args: [{
@@ -1495,7 +1496,7 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [attr.aria-label]="currentValue"
         ></button>
         <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+  `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2198,7 +2199,7 @@ RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </div>
         </div>
         <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
+  `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RangeSliderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2358,7 +2359,7 @@ class SwitchComponent {
         this.changeDetector = changeDetector;
         this.ngZone = ngZone;
         /**
-         * Determines whether the Switch is disabled ([see example]({% slug disabled_switch %})).
+         * Determines whether the Switch is disabled ([see example]({% slug disabled_switch %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_switch#toc-managing-the-switch-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -3429,6 +3430,60 @@ var ArrowDirection;
     ArrowDirection[ArrowDirection["Up"] = 1] = "Up";
 })(ArrowDirection || (ArrowDirection = {}));
 
+/**
+ * Specifies a separator in the content of components like the TextArea and the TextBox. ([see examples]({% slug adornments_textbox %}#toc-separator)).
+ * @example
+ * ```ts-no-run
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-textbox>
+ *    <ng-template kendoTextBoxSuffixTemplate>
+ *        <kendo-input-separator></kendo-input-separator>
+ *        <button kendoButton look="clear" icon="image"></button>
+ *    </ng-template>
+ *  </kendo-textbox>
+ * `
+ * })
+ * class AppComponent {}
+ * ```
+ */
+class InputSeparatorComponent {
+    constructor() {
+        /**
+         * Specifies the orientation of the separator.
+         */
+        this.orientation = 'vertical';
+        this.hostClass = true;
+    }
+    get vertical() {
+        return this.orientation === 'vertical';
+    }
+    get horizontal() {
+        return this.orientation === 'horizontal';
+    }
+}
+InputSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: { orientation: "orientation" }, host: { properties: { "class.k-input-separator-vertical": "this.vertical", "class.k-input-separator-horizontal": "this.horizontal", "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InputSeparatorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-input-separator, kendo-textbox-separator',
+                    template: ``
+                }]
+        }], propDecorators: { orientation: [{
+                type: Input
+            }], vertical: [{
+                type: HostBinding,
+                args: ['class.k-input-separator-vertical']
+            }], horizontal: [{
+                type: HostBinding,
+                args: ['class.k-input-separator-horizontal']
+            }], hostClass: [{
+                type: HostBinding,
+                args: ['class.k-input-separator']
+            }] } });
+
 /**
  * @hidden
  */
@@ -3477,6 +3532,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/**
+ * @hidden
+ */
+class SharedInputEventsDirective {
+    constructor(ngZone, renderer, cdr) {
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.isFocusedChange = new EventEmitter();
+        this.onFocus = new EventEmitter();
+        this.handleBlur = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    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', () => {
+                this.cdr.detectChanges();
+                if (!this.isFocused) {
+                    this.ngZone.run(() => {
+                        this.onFocus.emit();
+                        this.isFocused = true;
+                        this.isFocusedChange.emit(this.isFocused);
+                    });
+                }
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (args) => {
+                if (!this.isFocused) {
+                    return;
+                }
+                if (tabbing) {
+                    const closestTextbox = closest(args.relatedTarget, (element) => element === hostElement);
+                    if (!closestTextbox) {
+                        this.handleBlur.emit();
+                    }
+                    tabbing = false;
+                }
+                else {
+                    if (!cursorInsideWrapper && !(this === null || this === void 0 ? void 0 : this.clearButtonClicked)) {
+                        this.handleBlur.emit();
+                    }
+                }
+            }));
+            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;
+                }
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+}
+SharedInputEventsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedInputEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SharedInputEventsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedInputEventsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoInputSharedEvents]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostElement: [{
+                type: Input
+            }], clearButtonClicked: [{
+                type: Input
+            }], isFocused: [{
+                type: Input
+            }], isFocusedChange: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], handleBlur: [{
+                type: Output
+            }] } });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const PARSABLE_OPTIONS = ['min', 'max', 'step', 'decimals'];
 const PARSABLE_DEFAULTS = {
@@ -3506,7 +3648,7 @@ class NumericTextBoxComponent {
          */
         this.focusableId = `k-${guid()}`;
         /**
-         * Determines whether the NumericTextBox is disabled ([see example]({% slug disabled_numerictextbox %})).
+         * Determines whether the NumericTextBox is disabled ([see example]({% slug disabled_numerictextbox %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_numerictextbox#toc-managing-the-numerictextbox-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -3568,13 +3710,21 @@ class NumericTextBoxComponent {
          */
         this.valueChange = new EventEmitter();
         /**
-         * Fires each time the user focuses the `input` element ([see example]({% slug overview_numerictextbox %}#toc-events)).
+         * Fires each time the user focuses the NumericTextBox element ([see example]({% slug overview_numerictextbox %}#toc-events)).
          */
         this.onFocus = new EventEmitter();
         /**
-         * Fires each time the `input` element gets blurred ([see example]({% slug overview_numerictextbox %}#toc-events)).
+         * Fires each time the NumericTextBox component gets blurred. ([see example]({% slug overview_numerictextbox %}#toc-events)).
          */
         this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the user focuses the `input` element.
+         */
+        this.inputFocus = new EventEmitter();
+        /**
+         * Fires each time the `input` element gets blurred.
+         */
+        this.inputBlur = new EventEmitter();
         /**
          * @hidden
          */
@@ -3689,7 +3839,7 @@ class NumericTextBoxComponent {
         /**
          * @hidden
          */
-        this.handleFocus = () => {
+        this.handleInputFocus = () => {
             if (!this.focused) {
                 this.focused = true;
                 if (!this.isDisabled) {
@@ -3705,11 +3855,16 @@ class NumericTextBoxComponent {
                         }, 0);
                     });
                 }
+                if (hasObservers(this.onFocus)) {
+                    this.ngZone.run(() => {
+                        this.onFocus.emit();
+                    });
+                }
             }
             this.mouseDown = false;
-            if (hasObservers(this.onFocus)) {
+            if (hasObservers(this.inputFocus)) {
                 this.ngZone.run(() => {
-                    this.onFocus.emit();
+                    this.inputFocus.emit();
                 });
             }
         };
@@ -3724,13 +3879,30 @@ class NumericTextBoxComponent {
                 this.handleInput();
             }
             this.setInputValue();
-            if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
+            if (hasObservers(this.onBlur)) {
                 this.ngZone.run(() => {
                     this.ngTouched();
                     this.onBlur.emit();
                 });
             }
         };
+        /**
+         * @hidden
+         */
+        this.handleInputBlur = () => {
+            this.changeDetector.markForCheck();
+            //blur is thrown before input when dragging the input text in IE
+            if (this.inputValue !== this.elementValue) {
+                this.handleInput();
+            }
+            this.setInputValue();
+            if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
+                this.ngZone.run(() => {
+                    this.ngTouched();
+                    this.inputBlur.emit();
+                });
+            }
+        };
         /**
          * @hidden
          */
@@ -3975,6 +4147,17 @@ class NumericTextBoxComponent {
     notifyValueChange() {
         this.setInputValue();
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.ngZone.run(() => {
+            if (!this.focused && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.focused = true;
+        });
+    }
     /**
      * @hidden
      */
@@ -3993,19 +4176,15 @@ class NumericTextBoxComponent {
     get isControlInvalid() {
         return this.control && this.control.touched && !this.control.valid;
     }
-    get decimalSeparator() {
-        const numberSymbols = this.intl.numberSymbols();
-        return numberSymbols.decimal;
-    }
-    get elementValue() {
-        return this.numericInput.nativeElement.value;
-    }
-    set elementValue(value) {
-        this.renderer.setProperty(this.numericInput.nativeElement, 'value', value);
-    }
+    /**
+     * @hidden
+     */
     get focused() {
         return this.isFocused;
     }
+    /**
+     * @hidden
+     */
     set focused(value) {
         if (this.isFocused !== value && this.hostElement) {
             const wrap = this.hostElement.nativeElement;
@@ -4018,6 +4197,16 @@ class NumericTextBoxComponent {
             this.isFocused = value;
         }
     }
+    get decimalSeparator() {
+        const numberSymbols = this.intl.numberSymbols();
+        return numberSymbols.decimal;
+    }
+    get elementValue() {
+        return this.numericInput.nativeElement.value;
+    }
+    set elementValue(value) {
+        this.renderer.setProperty(this.numericInput.nativeElement, 'value', value);
+    }
     get hasDecimals() {
         return this.decimals !== null && this.decimals >= 0;
     }
@@ -4030,8 +4219,8 @@ class NumericTextBoxComponent {
             return;
         }
         if (!mobileOS) {
-            this.focused = true;
             this.focus();
+            this.focused = true;
         }
         if (this.arrowDirection !== direction) {
             this.arrowDirection = direction;
@@ -4318,14 +4507,14 @@ class NumericTextBoxComponent {
         }
     }
 }
-NumericTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1$2.IntlService }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur" }, host: { properties: { "attr.dir": "this.direction", "class.k-disabled": "this.disableClass", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
+NumericTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, deps: [{ token: i1$1.IntlService }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", autoCorrect: "autoCorrect", format: "format", max: "max", min: "min", decimals: "decimals", placeholder: "placeholder", step: "step", spinners: "spinners", rangeValidation: "rangeValidation", tabindex: "tabindex", tabIndex: "tabIndex", changeValueOnScroll: "changeValueOnScroll", selectOnFocus: "selectOnFocus", value: "value", maxlength: "maxlength", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "attr.dir": "this.direction", "class.k-disabled": "this.disableClass", "class.k-input": "this.hostClasses", "class.k-numerictextbox": "this.hostClasses" } }, providers: [
         LocalizationService,
         { provide: L10N_PREFIX, useValue: 'kendo.numerictextbox' },
         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
         { provide: NG_VALIDATORS, useExisting: forwardRef(() => NumericTextBoxComponent), multi: true },
         { provide: KendoInput, useExisting: forwardRef(() => NumericTextBoxComponent) }
-    ], viewQueries: [{ propertyName: "numericInput", first: true, predicate: ["numericInput"], descendants: true, static: true }], exportAs: ["kendoNumericTextBox"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "numericInput", first: true, predicate: ["numericInput"], descendants: true, static: true }], exportAs: ["kendoNumericTextBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoNumericTextBoxLocalizedMessages
             i18n-increment="kendo.numerictextbox.increment|The title for the **Increment** button in the NumericTextBox"
             increment="Increase value"
@@ -4333,6 +4522,18 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             decrement="Decrease value"
         >
         </ng-container>
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="focused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
             <input
                 role="spinbutton"
                 class="k-input-inner"
@@ -4354,51 +4555,57 @@ NumericTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                     dragenter: handleDragEnter,
                     keydown: handleKeyDown,
                     input: handleInput,
-                    focus: handleFocus,
-                    blur: handleBlur,
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
                     paste: handlePaste
                 }"
                 #numericInput />
+            <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate?.showSeparator"></kendo-input-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
             <span
                 class="k-input-spinner k-spin-button" *ngIf="spinners"
                 [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
             >
-               <button
-                    type="button"
-                    [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
-                    [attr.aria-hidden]="true"
-                    [attr.aria-label]="incrementTitle"
-                    [title]="incrementTitle"
-                    class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
-                    [class.k-active]="arrowDirection === ArrowDirection.Up"
-                    tabindex="-1"
+            <button
+                type="button"
+                [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
+                [attr.aria-hidden]="true"
+                [attr.aria-label]="incrementTitle"
+                [title]="incrementTitle"
+                class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                [class.k-active]="arrowDirection === ArrowDirection.Up"
+                tabindex="-1"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-up"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="arrowUpIcon"
                 >
-                    <kendo-icon-wrapper
-                        name="caret-alt-up"
-                        innerCssClass="k-button-icon"
-                        [svgIcon]="arrowUpIcon"
-                    >
-                    </kendo-icon-wrapper>
-                </button>
-               <button
-                    type="button"
-                    [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
-                    [attr.aria-hidden]="true"
-                    [attr.aria-label]="decrementTitle"
-                    [title]="decrementTitle"
-                    [class.k-active]="arrowDirection === ArrowDirection.Down"
-                    class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
-                    tabindex="-1"
+                </kendo-icon-wrapper>
+            </button>
+            <button
+                type="button"
+                [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
+                [attr.aria-hidden]="true"
+                [attr.aria-label]="decrementTitle"
+                [title]="decrementTitle"
+                [class.k-active]="arrowDirection === ArrowDirection.Down"
+                class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                tabindex="-1"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-down"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="arrowDownIcon"
                 >
-                    <kendo-icon-wrapper
-                        name="caret-alt-down"
-                        innerCssClass="k-button-icon"
-                        [svgIcon]="arrowDownIcon"
-                    >
                     </kendo-icon-wrapper>
                 </button>
             </span>
-      `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        </ng-container>
+    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedNumericTextBoxMessagesDirective, selector: "[kendoNumericTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -4419,6 +4626,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             decrement="Decrease value"
         >
         </ng-container>
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="focused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
             <input
                 role="spinbutton"
                 class="k-input-inner"
@@ -4440,53 +4659,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     dragenter: handleDragEnter,
                     keydown: handleKeyDown,
                     input: handleInput,
-                    focus: handleFocus,
-                    blur: handleBlur,
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
                     paste: handlePaste
                 }"
                 #numericInput />
+            <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate?.showSeparator"></kendo-input-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
             <span
                 class="k-input-spinner k-spin-button" *ngIf="spinners"
                 [kendoEventsOutsideAngular]="{ mouseup: releaseArrow, mouseleave: releaseArrow }"
             >
-               <button
-                    type="button"
-                    [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
-                    [attr.aria-hidden]="true"
-                    [attr.aria-label]="incrementTitle"
-                    [title]="incrementTitle"
-                    class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
-                    [class.k-active]="arrowDirection === ArrowDirection.Up"
-                    tabindex="-1"
+            <button
+                type="button"
+                [kendoEventsOutsideAngular]="{ mousedown: increasePress }"
+                [attr.aria-hidden]="true"
+                [attr.aria-label]="incrementTitle"
+                [title]="incrementTitle"
+                class="k-spinner-increase k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                [class.k-active]="arrowDirection === ArrowDirection.Up"
+                tabindex="-1"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-up"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="arrowUpIcon"
                 >
-                    <kendo-icon-wrapper
-                        name="caret-alt-up"
-                        innerCssClass="k-button-icon"
-                        [svgIcon]="arrowUpIcon"
-                    >
-                    </kendo-icon-wrapper>
-                </button>
-               <button
-                    type="button"
-                    [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
-                    [attr.aria-hidden]="true"
-                    [attr.aria-label]="decrementTitle"
-                    [title]="decrementTitle"
-                    [class.k-active]="arrowDirection === ArrowDirection.Down"
-                    class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
-                    tabindex="-1"
+                </kendo-icon-wrapper>
+            </button>
+            <button
+                type="button"
+                [kendoEventsOutsideAngular]="{ mousedown: decreasePress }"
+                [attr.aria-hidden]="true"
+                [attr.aria-label]="decrementTitle"
+                [title]="decrementTitle"
+                [class.k-active]="arrowDirection === ArrowDirection.Down"
+                class="k-spinner-decrease k-button k-button-md k-icon-button k-button-solid k-button-solid-base"
+                tabindex="-1"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-down"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="arrowDownIcon"
                 >
-                    <kendo-icon-wrapper
-                        name="caret-alt-down"
-                        innerCssClass="k-button-icon"
-                        [svgIcon]="arrowDownIcon"
-                    >
                     </kendo-icon-wrapper>
                 </button>
             </span>
-      `
+        </ng-container>
+    `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$2.IntlService }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
+        }], ctorParameters: function () { return [{ type: i1$1.IntlService }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -4538,9 +4763,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], numericInput: [{
                 type: ViewChild,
                 args: ['numericInput', { static: true }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], direction: [{
                 type: HostBinding,
                 args: ['attr.dir']
@@ -5053,7 +5288,7 @@ class MaskedTextBoxComponent {
          */
         this.focusableId = `k-${guid()}`;
         /**
-         * Determines whether the MaskedTextBox is disabled ([see example]({% slug disabled_maskedtextbox %})).
+         * Determines whether the MaskedTextBox is disabled ([see example]({% slug disabled_maskedtextbox %})). To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_maskedtextbox#toc-managing-the-maskedtextbox-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -5090,7 +5325,7 @@ class MaskedTextBoxComponent {
          */
         this.tabindex = 0;
         /**
-         * Fires each time the user focuses the `input` element.
+         * Fires each time the user focuses the MaskedTextBox component.
          *
          * > To wire the event programmatically, use the `onFocus` property.
          *
@@ -5111,7 +5346,7 @@ class MaskedTextBoxComponent {
          */
         this.onFocus = new EventEmitter();
         /**
-         * Fires each time the `input` element gets blurred.
+         * Fires each time the MaskedTextBox component gets blurred.
          *
          * > To wire the event programmatically, use the `onBlur` property.
          *
@@ -5131,6 +5366,14 @@ class MaskedTextBoxComponent {
          * ```
          */
         this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the user focuses the `input` element.
+         */
+        this.inputFocus = new EventEmitter();
+        /**
+         * Fires each time the `input` element gets blurred.
+         */
+        this.inputBlur = new EventEmitter();
         /**
          * Fires each time the value changes.
          */
@@ -5157,16 +5400,27 @@ class MaskedTextBoxComponent {
          * @hidden
          */
         this.handleFocus = () => {
-            this.focused = true;
-            if (this.maskOnFocus && this.emptyMask) {
+            this.ngZone.run(() => {
+                if (!this.focused && hasObservers(this.onFocus)) {
+                    this.onFocus.emit();
+                }
+                this.focused = true;
+            });
+            if (this.maskOnFocus && this.emptyMask) {
                 this.updateInput(this.service.maskRaw(this.value));
                 this.ngZone.runOutsideAngular(() => {
                     setTimeout(() => { this.setSelection(0, 0); }, 0);
                 });
             }
-            if (hasObservers(this.onFocus)) {
+        };
+        /**
+         * @hidden
+         */
+        this.handleInputFocus = () => {
+            this.handleFocus();
+            if (hasObservers(this.inputFocus)) {
                 this.ngZone.run(() => {
-                    this.onFocus.emit();
+                    this.inputFocus.emit();
                 });
             }
         };
@@ -5192,13 +5446,25 @@ class MaskedTextBoxComponent {
             if (this.maskOnFocus && this.emptyMask) {
                 this.updateInput(this.maskedValue);
             }
-            if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
+            if (hasObservers(this.onBlur)) {
                 this.ngZone.run(() => {
                     this.onTouched();
                     this.onBlur.emit();
                 });
             }
         };
+        /**
+         * @hidden
+         */
+        this.handleInputBlur = () => {
+            this.changeDetector.markForCheck();
+            if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
+                this.ngZone.run(() => {
+                    this.onTouched();
+                    this.inputBlur.emit();
+                });
+            }
+        };
         this.onChange = (_) => { };
         this.onTouched = () => { };
         validatePackage(packageMetadata);
@@ -5324,6 +5590,7 @@ class MaskedTextBoxComponent {
             return;
         }
         this.input.nativeElement.focus();
+        this.focused = true;
         this.setFocusSelection();
     }
     /**
@@ -5334,6 +5601,7 @@ class MaskedTextBoxComponent {
             return;
         }
         this.input.nativeElement.blur();
+        this.focused = false;
     }
     /**
      * @hidden
@@ -5515,9 +5783,15 @@ class MaskedTextBoxComponent {
             this.setSelection();
         }
     }
+    /**
+     * @hidden
+     */
     get focused() {
         return this.isFocused;
     }
+    /**
+     * @hidden
+     */
     set focused(value) {
         if (this.isFocused !== value && this.hostElement) {
             const element = this.hostElement.nativeElement;
@@ -5552,7 +5826,7 @@ class MaskedTextBoxComponent {
     }
 }
 MaskedTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MaskedTextBoxComponent, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
+MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MaskedTextBoxComponent, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
         MaskingService,
         {
             multi: true,
@@ -5568,30 +5842,48 @@ MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: KendoInput,
             useExisting: forwardRef(() => MaskedTextBoxComponent)
         }
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
-        <input type="text"
-            #input
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            class="k-input-inner"
-            [id]="focusableId"
-            [tabindex]="tabIndex"
-            [attr.title]="title"
-            [attr.aria-placeholder]="mask"
-            [attr.aria-invalid]="isControlInvalid"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur,
-                click: handleClick,
-                dragstart: handleDragDrop,
-                drop: handleDragDrop
-            }"
-        />
-    `, isInline: true, directives: [{ type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+    ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="focused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
+            <input type="text"
+                #input
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                class="k-input-inner"
+                [id]="focusableId"
+                [tabindex]="tabIndex"
+                [attr.title]="title"
+                [attr.aria-placeholder]="mask"
+                [attr.aria-invalid]="isControlInvalid"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [kendoEventsOutsideAngular]="{
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
+                    click: handleClick,
+                    dragstart: handleDragDrop,
+                    drop: handleDragDrop
+                }"
+            />
+            <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-input-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5615,28 +5907,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     selector: 'kendo-maskedtextbox',
                     template: `
-        <input type="text"
-            #input
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            class="k-input-inner"
-            [id]="focusableId"
-            [tabindex]="tabIndex"
-            [attr.title]="title"
-            [attr.aria-placeholder]="mask"
-            [attr.aria-invalid]="isControlInvalid"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur,
-                click: handleClick,
-                dragstart: handleDragDrop,
-                drop: handleDragDrop
-            }"
-        />
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="focused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
+            <input type="text"
+                #input
+                autocomplete="off"
+                autocorrect="off"
+                autocapitalize="off"
+                spellcheck="false"
+                class="k-input-inner"
+                [id]="focusableId"
+                [tabindex]="tabIndex"
+                [attr.title]="title"
+                [attr.aria-placeholder]="mask"
+                [attr.aria-invalid]="isControlInvalid"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [kendoEventsOutsideAngular]="{
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
+                    click: handleClick,
+                    dragstart: handleDragDrop,
+                    drop: handleDragDrop
+                }"
+            />
+            <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-input-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
     `
                 }]
         }], ctorParameters: function () {
@@ -5686,6 +5996,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], valueChange: [{
                 type: Output
             }], direction: [{
@@ -5703,6 +6017,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], pasteHandler: [{
                 type: HostListener,
                 args: ['paste', ['$event']]
@@ -6020,6 +6340,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * @hidden
+ */
+const SHARED_DIRECTIVES = [
+    InputSeparatorComponent,
+    TextAreaDirective
+];
+/**
+ * @hidden
+ */
+class SharedModule {
+}
+SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, declarations: [InputSeparatorComponent,
+        TextAreaDirective], exports: [InputSeparatorComponent,
+        TextAreaDirective] });
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SHARED_DIRECTIVES],
+                    exports: [SHARED_DIRECTIVES]
+                }]
+        }] });
+
+/**
+ * @hidden
+ */
+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],
+                }]
+        }] });
+
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the NumericTextBox component.
@@ -6056,9 +6417,10 @@ class NumericTextBoxModule {
 NumericTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 NumericTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, declarations: [LocalizedNumericTextBoxMessagesDirective,
         NumericTextBoxComponent,
-        NumericTextBoxCustomMessagesComponent], imports: [CommonModule, EventsModule, IconsModule], exports: [NumericTextBoxComponent,
-        NumericTextBoxCustomMessagesComponent] });
-NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule, IconsModule]] });
+        NumericTextBoxCustomMessagesComponent], imports: [CommonModule, EventsModule, IconsModule, SharedModule, AdornmentsModule, SharedEventsModule], exports: [NumericTextBoxComponent,
+        NumericTextBoxCustomMessagesComponent,
+        AdornmentsModule] });
+NumericTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, imports: [[CommonModule, EventsModule, IconsModule, SharedModule, AdornmentsModule, SharedEventsModule], AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumericTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
@@ -6069,9 +6431,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     exports: [
                         NumericTextBoxComponent,
-                        NumericTextBoxCustomMessagesComponent
+                        NumericTextBoxCustomMessagesComponent,
+                        AdornmentsModule
                     ],
-                    imports: [CommonModule, EventsModule, IconsModule]
+                    imports: [CommonModule, EventsModule, IconsModule, SharedModule, AdornmentsModule, SharedEventsModule]
                 }]
         }] });
 
@@ -6109,14 +6472,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class MaskedTextBoxModule {
 }
 MaskedTextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MaskedTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, declarations: [MaskedTextBoxComponent], imports: [CommonModule, EventsModule], exports: [MaskedTextBoxComponent] });
-MaskedTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, imports: [[CommonModule, EventsModule]] });
+MaskedTextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, declarations: [MaskedTextBoxComponent], imports: [CommonModule,
+        EventsModule,
+        SharedModule,
+        AdornmentsModule,
+        SharedEventsModule], exports: [MaskedTextBoxComponent,
+        AdornmentsModule] });
+MaskedTextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, imports: [[
+            CommonModule,
+            EventsModule,
+            SharedModule,
+            AdornmentsModule,
+            SharedEventsModule
+        ], AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MaskedTextBoxComponent],
-                    exports: [MaskedTextBoxComponent],
-                    imports: [CommonModule, EventsModule]
+                    declarations: [
+                        MaskedTextBoxComponent
+                    ],
+                    exports: [
+                        MaskedTextBoxComponent,
+                        AdornmentsModule
+                    ],
+                    imports: [
+                        CommonModule,
+                        EventsModule,
+                        SharedModule,
+                        AdornmentsModule,
+                        SharedEventsModule
+                    ],
                 }]
         }] });
 
@@ -6149,10 +6534,22 @@ const isJapanese = (input) => {
 class TextBoxSuffixTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
+        this._showSeparator = false;
+    }
+    /**
+     * Sets the `showSeparator` attribute of the `kendoTextBoxSuffixTemplate`.
+     *
+     * @default false
+     */
+    set showSeparator(value) {
+        this._showSeparator = value;
+    }
+    get showSeparator() {
+        return this._showSeparator;
     }
 }
 TextBoxSuffixTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxSuffixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TextBoxSuffixTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", ngImport: i0 });
+TextBoxSuffixTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxSuffixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
@@ -6162,7 +6559,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         return [{ type: i0.TemplateRef, decorators: [{
                         type: Optional
                     }] }];
-    } });
+    }, propDecorators: { showSeparator: [{
+                type: Input
+            }] } });
 
 /**
  * Specifies the adornments in the prefix container ([see examples]({% slug adornments_textbox %}#toc-prefixadornments)).
@@ -6184,10 +6583,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class TextBoxPrefixTemplateDirective {
     constructor(templateRef) {
         this.templateRef = templateRef;
+        this._showSeparator = false;
+    }
+    /**
+     * Sets the `showSeparator` attribute of the `kendoTextBoxPrefixTemplate`.
+     *
+     * @default false
+     */
+    set showSeparator(value) {
+        this._showSeparator = value;
+    }
+    get showSeparator() {
+        return this._showSeparator;
     }
 }
 TextBoxPrefixTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxPrefixTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TextBoxPrefixTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", ngImport: i0 });
+TextBoxPrefixTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: { showSeparator: "showSeparator" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxPrefixTemplateDirective, decorators: [{
             type: Directive,
             args: [{
@@ -6197,7 +6608,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         return [{ type: i0.TemplateRef, decorators: [{
                         type: Optional
                     }] }];
-    } });
+    }, propDecorators: { showSeparator: [{
+                type: Input
+            }] } });
 
 /**
  * @hidden
@@ -6272,7 +6685,7 @@ class TextBoxComponent {
          */
         this.type = 'text';
         /**
-         * Sets the disabled state of the component.
+         * Sets the disabled state of the TextBox. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_textbox#toc-managing-the-textbox-disabled-state-in-reactive-forms).
          *
          * @default false
          */
@@ -6404,12 +6817,8 @@ class TextBoxComponent {
                         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 || (this.focusChangedProgrammatically && this.clearButtonClicked)) {
@@ -6418,9 +6827,6 @@ class TextBoxComponent {
                         });
                     }
                 }
-                this.ngZone.run(() => {
-                    this.isFocused = true;
-                });
             }
         };
         /**
@@ -6528,56 +6934,16 @@ class TextBoxComponent {
         });
     }
     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.clearButtonClicked) {
-                        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;
-                }
-            }));
-        });
         const stylingInputs = ['size', 'rounded', 'fillMode'];
         stylingInputs.forEach(input => {
             this.handleClasses(this[input], input);
         });
     }
+    ngAfterContentInit() {
+        this.configureAdornments();
+        this.subscriptions.add(this.textBoxPrefixTemplate.changes.subscribe(this.configureAdornments.bind(this)));
+        this.subscriptions.add(this.textBoxSuffixTemplate.changes.subscribe(this.configureAdornments.bind(this)));
+    }
     ngOnChanges(changes) {
         if (changes['disabled'] || changes['readonly'] || changes['value']) {
             this.checkClearButton();
@@ -6780,6 +7146,27 @@ class TextBoxComponent {
             ? this.showSuccessInitial()
             : this.showSuccessIcon;
     }
+    /**
+     * @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$1);
+            }
+            else {
+                this.renderer.removeClass(element, FOCUSED$1);
+            }
+            this._isFocused = value;
+        }
+    }
     setSelection(start, end) {
         if (this.isFocused) {
             invokeElementMethod(this.input, 'setSelectionRange', start, end);
@@ -6801,21 +7188,20 @@ class TextBoxComponent {
             });
         }
     }
-    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$1);
-            }
-            else {
-                this.renderer.removeClass(element, FOCUSED$1);
+    /**
+     * @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) {
@@ -6834,6 +7220,14 @@ class TextBoxComponent {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
+    configureAdornments() {
+        if (isPresent(this.textBoxPrefixTemplate.first)) {
+            this.prefixTemplate = this.textBoxPrefixTemplate.first;
+        }
+        if (isPresent(this.textBoxSuffixTemplate.first)) {
+            this.suffixTemplate = this.textBoxSuffixTemplate.first;
+        }
+    }
 }
 TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextBoxComponent, selector: "kendo-textbox", inputs: { focusableId: "focusableId", title: "title", type: "type", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", value: "value", selectOnFocus: "selectOnFocus", showSuccessIcon: "showSuccessIcon", showErrorIcon: "showErrorIcon", clearButton: "clearButton", successIcon: "successIcon", successSvgIcon: "successSvgIcon", errorIcon: "errorIcon", errorSvgIcon: "errorSvgIcon", clearButtonIcon: "clearButtonIcon", clearButtonSvgIcon: "clearButtonSvgIcon", size: "size", rounded: "rounded", fillMode: "fillMode", tabIndex: "tabIndex", placeholder: "placeholder", maxlength: "maxlength" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-disabled": "this.disabledClass", "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.direction" } }, providers: [
@@ -6845,78 +7239,85 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             multi: true
         },
         { provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) }
-    ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: TextBoxSuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: TextBoxPrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoTextBox"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }, { propertyName: "textBoxSuffixTemplate", predicate: TextBoxSuffixTemplateDirective }, { propertyName: "textBoxPrefixTemplate", predicate: TextBoxPrefixTemplateDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoTextBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTextBoxLocalizedMessages
             i18n-clear="kendo.textbox.clear|The title for the **Clear** button in the TextBox."
             clear="Clear">
         </ng-container>
-        <span class="k-input-prefix">
-            <ng-template
-                *ngIf="prefixTemplate"
-                [ngTemplateOutlet]="prefixTemplate?.templateRef">
-            </ng-template>
-        </span>
-        <input #input
-            class="k-input-inner"
-            [id]="focusableId"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [attr.tabindex]="disabled ? undefined : tabindex"
-            [value]="value"
-            [attr.type]="type"
-            [attr.placeholder]="placeholder"
-            [attr.title]="title"
-            [attr.maxlength]="maxlength"
-            [attr.aria-invalid]="isControlInvalid"
-            [kendoEventsOutsideAngular]="{
-                focus: handleInputFocus,
-                blur: handleInputBlur,
-                input: handleInput}"
-        />
-        <span
-            role="button"
-            class="k-clear-value"
-            *ngIf="showClearButton"
-            (click)="clearValue()"
-            (mousedown)="$event.preventDefault()"
-            [tabindex]="tabIndex"
-            [attr.aria-label]="clearTitle()"
-            [title]="clearTitle()"
-            (keydown.enter)="clearValue($event)"
-            (keydown.space)="clearValue($event)">
-                <kendo-icon-wrapper
-                    [name]="clearButtonClass"
-                    [customFontClass]="customClearButtonClasses"
-                    [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
-                >
-                </kendo-icon-wrapper>
-        </span>
-        <kendo-icon-wrapper
-            *ngIf="hasErrors"
-            innerCssClass="k-input-validation-icon"
-            [name]="errorIconClasses"
-            [customFontClass]="customIconClasses"
-            [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
-        >
-        </kendo-icon-wrapper>
-        <kendo-icon-wrapper
-            *ngIf="isSuccessful"
-            innerCssClass="k-input-validation-icon"
-            [name]="successIconClasses"
-            [customFontClass]="customSuccessIconClasses"
-            [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+            [clearButtonClicked]="clearButtonClicked"
         >
-        </kendo-icon-wrapper>
-        <span class="k-input-suffix">
-            <ng-template
-                *ngIf="suffixTemplate"
-                [ngTemplateOutlet]="suffixTemplate?.templateRef">
-            </ng-template>
-        </span>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
-            type: Component,
-            args: [{
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
+            <input #input
+                class="k-input-inner"
+                [id]="focusableId"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [attr.tabindex]="disabled ? undefined : tabindex"
+                [value]="value"
+                [attr.type]="type"
+                [attr.placeholder]="placeholder"
+                [attr.title]="title"
+                [attr.maxlength]="maxlength"
+                [attr.aria-invalid]="isControlInvalid"
+                [kendoEventsOutsideAngular]="{
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
+                    input: handleInput}"
+            />
+            <span
+                role="button"
+                class="k-clear-value"
+                *ngIf="showClearButton"
+                (click)="clearValue()"
+                (mousedown)="$event.preventDefault()"
+                [tabindex]="tabIndex"
+                [attr.aria-label]="clearTitle()"
+                [title]="clearTitle()"
+                (keydown.enter)="clearValue($event)"
+                (keydown.space)="clearValue($event)">
+                    <kendo-icon-wrapper
+                        [name]="clearButtonClass"
+                        [customFontClass]="customClearButtonClasses"
+                        [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
+                    >
+                    </kendo-icon-wrapper>
+            </span>
+            <kendo-icon-wrapper
+                *ngIf="hasErrors"
+                innerCssClass="k-input-validation-icon"
+                [name]="errorIconClasses"
+                [customFontClass]="customIconClasses"
+                [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
+            >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isSuccessful"
+                innerCssClass="k-input-validation-icon"
+                [name]="successIconClasses"
+                [customFontClass]="customSuccessIconClasses"
+                [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
+            >
+            </kendo-icon-wrapper>
+            <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-input-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        <ng-container>
+    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
+            type: Component,
+            args: [{
                     exportAs: 'kendoTextBox',
                     providers: [
                         LocalizationService,
@@ -6934,69 +7335,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             i18n-clear="kendo.textbox.clear|The title for the **Clear** button in the TextBox."
             clear="Clear">
         </ng-container>
-        <span class="k-input-prefix">
-            <ng-template
-                *ngIf="prefixTemplate"
-                [ngTemplateOutlet]="prefixTemplate?.templateRef">
-            </ng-template>
-        </span>
-        <input #input
-            class="k-input-inner"
-            [id]="focusableId"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [attr.tabindex]="disabled ? undefined : tabindex"
-            [value]="value"
-            [attr.type]="type"
-            [attr.placeholder]="placeholder"
-            [attr.title]="title"
-            [attr.maxlength]="maxlength"
-            [attr.aria-invalid]="isControlInvalid"
-            [kendoEventsOutsideAngular]="{
-                focus: handleInputFocus,
-                blur: handleInputBlur,
-                input: handleInput}"
-        />
-        <span
-            role="button"
-            class="k-clear-value"
-            *ngIf="showClearButton"
-            (click)="clearValue()"
-            (mousedown)="$event.preventDefault()"
-            [tabindex]="tabIndex"
-            [attr.aria-label]="clearTitle()"
-            [title]="clearTitle()"
-            (keydown.enter)="clearValue($event)"
-            (keydown.space)="clearValue($event)">
-                <kendo-icon-wrapper
-                    [name]="clearButtonClass"
-                    [customFontClass]="customClearButtonClasses"
-                    [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
-                >
-                </kendo-icon-wrapper>
-        </span>
-        <kendo-icon-wrapper
-            *ngIf="hasErrors"
-            innerCssClass="k-input-validation-icon"
-            [name]="errorIconClasses"
-            [customFontClass]="customIconClasses"
-            [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
+        <ng-container
+            kendoInputSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+            [clearButtonClicked]="clearButtonClicked"
         >
-        </kendo-icon-wrapper>
-        <kendo-icon-wrapper
-            *ngIf="isSuccessful"
-            innerCssClass="k-input-validation-icon"
-            [name]="successIconClasses"
-            [customFontClass]="customSuccessIconClasses"
-            [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
-        >
-        </kendo-icon-wrapper>
-        <span class="k-input-suffix">
-            <ng-template
-                *ngIf="suffixTemplate"
-                [ngTemplateOutlet]="suffixTemplate?.templateRef">
-            </ng-template>
-        </span>
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-input-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-input-separator>
+            <input #input
+                class="k-input-inner"
+                [id]="focusableId"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [attr.tabindex]="disabled ? undefined : tabindex"
+                [value]="value"
+                [attr.type]="type"
+                [attr.placeholder]="placeholder"
+                [attr.title]="title"
+                [attr.maxlength]="maxlength"
+                [attr.aria-invalid]="isControlInvalid"
+                [kendoEventsOutsideAngular]="{
+                    focus: handleInputFocus,
+                    blur: handleInputBlur,
+                    input: handleInput}"
+            />
+            <span
+                role="button"
+                class="k-clear-value"
+                *ngIf="showClearButton"
+                (click)="clearValue()"
+                (mousedown)="$event.preventDefault()"
+                [tabindex]="tabIndex"
+                [attr.aria-label]="clearTitle()"
+                [title]="clearTitle()"
+                (keydown.enter)="clearValue($event)"
+                (keydown.space)="clearValue($event)">
+                    <kendo-icon-wrapper
+                        [name]="clearButtonClass"
+                        [customFontClass]="customClearButtonClasses"
+                        [svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
+                    >
+                    </kendo-icon-wrapper>
+            </span>
+            <kendo-icon-wrapper
+                *ngIf="hasErrors"
+                innerCssClass="k-input-validation-icon"
+                [name]="errorIconClasses"
+                [customFontClass]="customIconClasses"
+                [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
+            >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="isSuccessful"
+                innerCssClass="k-input-validation-icon"
+                [name]="successIconClasses"
+                [customFontClass]="customSuccessIconClasses"
+                [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
+            >
+            </kendo-icon-wrapper>
+            <kendo-input-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-input-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        <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: [{
@@ -7060,12 +7468,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], input: [{
                 type: ViewChild,
                 args: ['input', { static: true }]
+            }], textBoxSuffixTemplate: [{
+                type: ContentChildren,
+                args: [TextBoxSuffixTemplateDirective, { descendants: false }]
+            }], textBoxPrefixTemplate: [{
+                type: ContentChildren,
+                args: [TextBoxPrefixTemplateDirective, { descendants: false }]
             }], suffixTemplate: [{
                 type: ContentChild,
-                args: [TextBoxSuffixTemplateDirective, { static: false }]
+                args: [SuffixTemplateDirective]
             }], prefixTemplate: [{
                 type: ContentChild,
-                args: [TextBoxPrefixTemplateDirective, { static: false }]
+                args: [PrefixTemplateDirective]
             }], disabledClass: [{
                 type: HostBinding,
                 args: ['class.k-disabled']
@@ -7113,67 +7527,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
-/**
- * Specifies a separator in the content of components like the TextArea and the TextBox. ([see examples]({% slug adornments_textbox %}#toc-separator)).
- * @example
- * ```ts-no-run
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-textbox>
- *    <ng-template kendoTextBoxSuffixTemplate>
- *        <kendo-input-separator></kendo-input-separator>
- *        <button kendoButton look="clear" icon="image"></button>
- *    </ng-template>
- *  </kendo-textbox>
- * `
- * })
- * class AppComponent {}
- * ```
- */
-class InputSeparatorComponent {
-    constructor() {
-        this.hostClass = true;
-    }
-}
-InputSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InputSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", host: { properties: { "class.k-input-separator": "this.hostClass" } }, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: InputSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-input-separator, kendo-textbox-separator',
-                    template: ``
-                }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-input-separator']
-            }] } });
-
-/**
- * @hidden
- */
-const SHARED_DIRECTIVES = [
-    InputSeparatorComponent,
-    TextAreaDirective
-];
-/**
- * @hidden
- */
-class SharedModule {
-}
-SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, declarations: [InputSeparatorComponent,
-        TextAreaDirective], exports: [InputSeparatorComponent,
-        TextAreaDirective] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SHARED_DIRECTIVES],
-                    exports: [SHARED_DIRECTIVES]
-                }]
-        }] });
-
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the TextBox directive.
@@ -7213,14 +7566,16 @@ TextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TextBoxSuffixTemplateDirective,
         TextBoxPrefixTemplateDirective,
         TextBoxCustomMessagesComponent,
-        LocalizedTextBoxMessagesDirective], imports: [CommonModule, EventsModule, SharedModule, IconsModule], exports: [TextBoxDirective,
+        LocalizedTextBoxMessagesDirective], imports: [CommonModule, EventsModule, SharedModule, IconsModule, AdornmentsModule, SharedEventsModule], exports: [TextBoxDirective,
         TextBoxComponent,
         TextBoxSuffixTemplateDirective,
         TextBoxPrefixTemplateDirective,
         EventsModule,
         TextBoxCustomMessagesComponent,
-        LocalizedTextBoxMessagesDirective, InputSeparatorComponent, TextAreaDirective] });
-TextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxModule, imports: [[CommonModule, EventsModule, SharedModule, IconsModule], EventsModule] });
+        LocalizedTextBoxMessagesDirective,
+        AdornmentsModule, InputSeparatorComponent, TextAreaDirective] });
+TextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxModule, imports: [[CommonModule, EventsModule, SharedModule, IconsModule, AdornmentsModule, SharedEventsModule], EventsModule,
+        AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxModule, decorators: [{
             type: NgModule,
             args: [{
@@ -7240,9 +7595,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         EventsModule,
                         TextBoxCustomMessagesComponent,
                         LocalizedTextBoxMessagesDirective,
+                        AdornmentsModule,
                         SHARED_DIRECTIVES
                     ],
-                    imports: [CommonModule, EventsModule, SharedModule, IconsModule]
+                    imports: [CommonModule, EventsModule, SharedModule, IconsModule, AdornmentsModule, SharedEventsModule]
                 }]
         }] });
 
@@ -7262,7 +7618,7 @@ class TextFieldsBase {
          */
         this.title = '';
         /**
-         * Sets the disabled state of the TextArea component.
+         * Sets the disabled state of the TextArea component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_textarea#toc-managing-the-textarea-disabled-state-in-reactive-forms).
          *
          * @default false
          */
@@ -7364,6 +7720,136 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['attr.dir']
             }] } });
 
+/**
+ * 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 {}
+ * ```
+ */
+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']
+            }] } });
+
+/**
+ * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
+ * ```ts-no-run
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-textarea>
+ *    <kendo-textarea-suffix>
+ *        <button kendoButton look="clear" icon="image"></button>
+ *    </kendo-textarea-suffix>
+ *  </kendo-textarea>
+ * `
+ * })
+ * class AppComponent {}
+ * ```
+ */
+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", 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: [{
+                    exportAs: 'kendoTextAreaSuffix',
+                    selector: 'kendo-textarea-suffix',
+                    template: `<ng-content></ng-content>`
+                }]
+        }], 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']
+            }] } });
+
 const resizeClasses = {
     'vertical': 'k-resize-y',
     'horizontal': 'k-resize-x',
@@ -7392,15 +7878,7 @@ 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) &mdash;TextArea sections are placed from top to bottom.
-         * * `horizontal`&mdash;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.
          */
@@ -7417,6 +7895,20 @@ 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.
          *
@@ -7468,6 +7960,7 @@ class TextAreaComponent extends TextFieldsBase {
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
+        this._adornmentsOrientation = 'horizontal';
         /**
          * @hidden
          */
@@ -7486,12 +7979,8 @@ 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) {
@@ -7500,9 +7989,6 @@ class TextAreaComponent extends TextFieldsBase {
                         });
                     }
                 }
-                this.ngZone.run(() => {
-                    this.isFocused = true;
-                });
             }
         };
         validatePackage(packageMetadata);
@@ -7514,6 +8000,46 @@ 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) &mdash;TextArea sections are placed from top to bottom.
+     * * `horizontal`&mdash;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) &mdash;TextArea adornments are placed from left to right in `ltr`, and from right to left in `rtl` mode.
+     * * `vertical`&mdash;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
      */
@@ -7578,50 +8104,7 @@ 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'];
@@ -7718,6 +8201,33 @@ 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.
      *
@@ -7773,21 +8283,20 @@ 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) {
@@ -7818,17 +8327,12 @@ 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' },
         {
@@ -7837,32 +8341,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: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+        </ng-container>
+    `, isInline: true, components: [{ type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }], directives: [{ type: 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: i4$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
             args: [{
@@ -7879,30 +8400,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: [{
@@ -7921,6 +8459,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: [{
@@ -7939,6 +8479,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']
@@ -7947,41 +8491,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['blur']
             }], valueChange: [{
                 type: Output
-            }] } });
-
-/**
- * Specifies the adornments in the suffix container ([see example]({% slug textarea_adornments %})).
- * ```ts-no-run
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-textarea>
- *    <kendo-textarea-suffix>
- *        <button kendoButton look="clear" icon="image"></button>
- *    </kendo-textarea-suffix>
- *  </kendo-textarea>
- * `
- * })
- * class AppComponent {}
- * ```
- */
-class TextAreaSuffixComponent {
-    constructor() {
-        this.hostClass = true;
-    }
-}
-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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaSuffixComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoTextAreaSuffix',
-                    selector: 'kendo-textarea-suffix',
-                    template: `<ng-content></ng-content>`
-                }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-input-suffix']
+            }], prefix: [{
+                type: ContentChild,
+                args: [TextAreaPrefixComponent]
+            }], suffix: [{
+                type: ContentChild,
+                args: [TextAreaSuffixComponent]
             }] } });
 
 /**
@@ -8019,24 +8534,31 @@ 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,
+        TextAreaPrefixComponent,
+        TextAreaSuffixComponent], imports: [CommonModule, EventsModule, SharedModule, AdornmentsModule, SharedEventsModule], exports: [TextAreaComponent,
         EventsModule,
-        TextAreaSuffixComponent, InputSeparatorComponent, TextAreaDirective] });
-TextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, imports: [[CommonModule, EventsModule, SharedModule], EventsModule] });
+        TextAreaPrefixComponent,
+        TextAreaSuffixComponent,
+        AdornmentsModule, InputSeparatorComponent, TextAreaDirective] });
+TextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, imports: [[CommonModule, EventsModule, SharedModule, AdornmentsModule, SharedEventsModule], EventsModule,
+        AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         TextAreaComponent,
+                        TextAreaPrefixComponent,
                         TextAreaSuffixComponent
                     ],
                     exports: [
                         TextAreaComponent,
                         EventsModule,
+                        TextAreaPrefixComponent,
                         TextAreaSuffixComponent,
+                        AdornmentsModule,
                         SHARED_DIRECTIVES
                     ],
-                    imports: [CommonModule, EventsModule, SharedModule]
+                    imports: [CommonModule, EventsModule, SharedModule, AdornmentsModule, SharedEventsModule]
                 }]
         }] });
 
@@ -8660,7 +9182,7 @@ FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 </span>
             </div>
         </div>
-    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -8862,7 +9384,7 @@ class ColorContrastSvgComponent {
 ColorContrastSvgComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 ColorContrastSvgComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
         <svg:path *ngFor="let path of paths" [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
-    `, isInline: true, directives: [{ type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
             type: Component,
             args: [{
@@ -9161,7 +9683,7 @@ ColorInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 <label [for]="alpha.focusableId" class="k-colorgradient-input-label">A</label>
             </div>
         </ng-container>
-    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
+    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: NumericLabelDirective, selector: "[kendoAdditionalNumericLabel]", inputs: ["kendoAdditionalNumericLabel", "localizationService"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -9356,7 +9878,7 @@ ContrastValidationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 <kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastValidationComponent, decorators: [{
             type: Component,
             args: [{
@@ -9434,7 +9956,7 @@ ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ContrastComponent, decorators: [{
             type: Component,
             args: [{
@@ -9596,7 +10118,7 @@ class ColorGradientComponent {
          */
         this.opacity = true;
         /**
-         * Sets the disabled state of the ColorGradient.
+         * Sets the disabled state of the ColorGradient. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorgradient#toc-managing-the-colorgradient-disabled-state-in-reactive-forms).
          *
          * @default false
          */
@@ -10290,7 +10812,7 @@ ColorGradientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             [value]="value"
             [ratio]="contrastTool">
         </div>
-    `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,
             args: [{
@@ -10683,7 +11205,7 @@ class ColorPaletteComponent {
          */
         this.format = 'hex';
         /**
-         * Sets the disabled state of the ColorPalette.
+         * Sets the disabled state of the ColorPalette. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpalette#toc-managing-the-colorpalette-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -11068,7 +11590,7 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 </tr>
             </tbody>
         </table>
-    `, isInline: true, directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPaletteComponent, decorators: [{
             type: Component,
             args: [{
@@ -11288,7 +11810,7 @@ class FlatColorPickerComponent {
          */
         this.readonly = false;
         /**
-         * Sets the disabled state of the FlatColorPicker.
+         * Sets the disabled state of the FlatColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_flatcolorpicker#toc-managing-the-flatcolorpicker-disabled-state-in-reactive-forms).
          *
          * @default false
          */
@@ -11847,7 +12369,7 @@ FlatColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             [ngClass]="'k-justify-content-' + actionsLayout"
             (actionButtonClick)="onAction($event)"
             (tabOut)="firstFocusable.focus()"></div>
-`, isInline: true, components: [{ type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+`, isInline: true, components: [{ type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["id", "opacity", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex"], outputs: ["actionButtonClick", "tabOut"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -12105,7 +12627,7 @@ class ColorPickerComponent {
          */
         this.readonly = false;
         /**
-         * Sets the disabled state of the ColorPicker.
+         * Sets the disabled state of the ColorPicker. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_colorpicker#toc-managing-the-colorpicker-disabled-state-in-reactive-forms).
          *
          * @default false
          */
@@ -12769,7 +13291,7 @@ class ColorPickerComponent {
         }
     }
 }
-ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
 ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColorPickerComponent, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid" } }, providers: [{
             multi: true,
             provide: NG_VALUE_ACCESSOR,
@@ -12887,7 +13409,7 @@ ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-flatcolorpicker>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "paletteSettings"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }], directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -13012,7 +13534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.PopupService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.PopupService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-colorpicker']
             }, {
@@ -13840,7 +14362,7 @@ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             <ng-content select="kendo-formhint" *ngIf="hasHints"></ng-content>
             <ng-content select="kendo-formerror" *ngIf="hasErrors"></ng-content>
         </div>
-    `, isInline: true, directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{
@@ -14075,7 +14597,7 @@ class SignatureComponent {
          */
         this.readonly = false;
         /**
-         * Sets the disabled state of the Signature.
+         * Sets the disabled state of the Signature. To disable the component in reactive forms, visit the following [article](slug:formssupport_signature#toc-managing-the-signature-disabled-state-in-reactive-forms)
          *
          * @default false
          */
@@ -14736,7 +15258,7 @@ SignatureComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [parentLocalization]="localization">
             </kendo-signature>
         </kendo-dialog>
-    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3$1.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i2.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: SignatureComponent, selector: "kendo-signature", inputs: ["focusableId", "readonly", "disabled", "width", "height", "value", "tabindex", "size", "rounded", "fillMode", "color", "backgroundColor", "strokeWidth", "smooth", "maximizable", "maximized", "popupScale", "exportScale", "parentLocalization", "hideLine"], outputs: ["valueChange", "open", "close", "focus", "blur", "minimize"], exportAs: ["kendoSignature"] }], directives: [{ type: LocalizedSignatureMessagesDirective, selector: "[kendoSignatureLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignatureComponent, decorators: [{
             type: Component,
             args: [{
@@ -15099,5 +15621,5 @@ class SwitchFocusEvent {
  * Generated bundle index. Do not edit.
  */
 
-export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };
+export { ActiveColorClickEvent, CheckBoxDirective, CheckBoxModule, ColorGradientComponent, ColorPaletteComponent, ColorPickerCancelEvent, ColorPickerCloseEvent, ColorPickerComponent, ColorPickerCustomMessagesComponent, ColorPickerModule, ColorPickerOpenEvent, ErrorComponent, FlatColorPickerComponent, FormFieldComponent, FormFieldModule, HintComponent, InputSeparatorComponent, InputsModule, LabelTemplateDirective, LocalizedColorPickerMessagesDirective, LocalizedNumericTextBoxMessagesDirective, LocalizedRangeSliderMessagesDirective, LocalizedSignatureMessagesDirective, LocalizedSliderMessagesDirective, LocalizedSwitchMessagesDirective, LocalizedTextBoxMessagesDirective, MaskedTextBoxComponent, MaskedTextBoxModule, MaskingService, NumericLabelDirective, NumericTextBoxComponent, NumericTextBoxCustomMessagesComponent, NumericTextBoxModule, RadioButtonDirective, RadioButtonModule, RangeSliderComponent, RangeSliderCustomMessagesComponent, RangeSliderModule, SharedModule, SignatureCloseEvent, SignatureComponent, SignatureCustomMessagesComponent, SignatureMessages, SignatureModule, SignatureOpenEvent, SliderComponent, SliderCustomMessagesComponent, SliderModule, SliderTicksComponent, SwitchBlurEvent, SwitchComponent, SwitchCustomMessagesComponent, SwitchFocusEvent, SwitchModule, TextAreaComponent, TextAreaDirective, TextAreaModule, TextAreaPrefixComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxCustomMessagesComponent, TextBoxDirective, TextBoxModule, TextBoxPrefixTemplateDirective, TextBoxSuffixTemplateDirective };