@progress/kendo-angular-inputs 14.4.0-develop.16 → 14.4.0-develop.18

package/esm2020/textarea.module.mjs

@@ -5,9 +5,11 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { TextAreaComponent } from "./textarea/textarea.component";
-import { EventsModule } from "@progress/kendo-angular-common";
+import { AdornmentsModule, EventsModule } from "@progress/kendo-angular-common";
+import { TextAreaPrefixComponent } from "./textarea/textarea-prefix.component";
 import { TextAreaSuffixComponent } from './textarea/textarea-suffix.component';
 import { SharedModule, SHARED_DIRECTIVES } from './shared.module';
+import { SharedEventsModule } from "./shared-events.module";
 import * as i0 from "@angular/core";
 import * as i1 from "./shared/input-separator.component";
 import * as i2 from "./shared/textarea.directive";
@@ -46,23 +48,30 @@ export class TextAreaModule {
 }
 TextAreaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 TextAreaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, declarations: [TextAreaComponent,
-        TextAreaSuffixComponent], imports: [CommonModule, EventsModule, SharedModule], exports: [TextAreaComponent,
+        TextAreaPrefixComponent,
+        TextAreaSuffixComponent], imports: [CommonModule, EventsModule, SharedModule, AdornmentsModule, SharedEventsModule], exports: [TextAreaComponent,
         EventsModule,
-        TextAreaSuffixComponent, i1.InputSeparatorComponent, i2.TextAreaDirective] });
-TextAreaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextAreaModule, imports: [[CommonModule, EventsModule, SharedModule], EventsModule] });
+        TextAreaPrefixComponent,
+        TextAreaSuffixComponent,
+        AdornmentsModule, i1.InputSeparatorComponent, i2.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]
                 }]
         }] });

package/esm2020/textbox/textbox-prefix.directive.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, Optional, TemplateRef } from '@angular/core';
+import { Directive, Input, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Specifies the adornments in the prefix container ([see examples]({% slug adornments_textbox %}#toc-prefixadornments)).
@@ -24,10 +24,22 @@ import * as i0 from "@angular/core";
 export 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: [{
@@ -35,4 +47,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }]; }, propDecorators: { showSeparator: [{
+                type: Input
+            }] } });

package/esm2020/textbox/textbox-suffix.directive.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, Optional, TemplateRef } from '@angular/core';
+import { Directive, Input, Optional, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
@@ -23,10 +23,22 @@ import * as i0 from "@angular/core";
 export 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: [{
@@ -34,4 +46,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
                     type: Optional
-                }] }]; } });
+                }] }]; }, propDecorators: { showSeparator: [{
+                type: Input
+            }] } });

package/esm2020/textbox/textbox.component.mjs

@@ -4,24 +4,25 @@
 *-------------------------------------------------------------------------------------------*/
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { isJapanese } from './../shared/utils';
-import { closest } from './../common/dom-utils';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { Component, ElementRef, forwardRef, Input, Output, EventEmitter, HostBinding, ViewChild, NgZone, ChangeDetectorRef, Injector, ContentChild, Renderer2 } from '@angular/core';
+import { Component, ElementRef, forwardRef, Input, Output, EventEmitter, HostBinding, ViewChild, NgZone, ChangeDetectorRef, Injector, ContentChild, Renderer2, ContentChildren, QueryList } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { invokeElementMethod } from '../common/dom-utils';
-import { areSame, requiresZoneOnBlur, getStylingClasses } from '../common/utils';
-import { guid, hasObservers, KendoInput, Keys, isSafari } from '@progress/kendo-angular-common';
+import { areSame, requiresZoneOnBlur, getStylingClasses, isPresent } from '../common/utils';
+import { guid, hasObservers, KendoInput, isSafari, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
 import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
 import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
-import * as i2 from "@progress/kendo-angular-icons";
-import * as i3 from "./localization/localized-textbox-messages.directive";
-import * as i4 from "@angular/common";
-import * as i5 from "@progress/kendo-angular-common";
+import * as i2 from "../shared/input-separator.component";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "./localization/localized-textbox-messages.directive";
+import * as i5 from "../shared/shared-events.directive";
+import * as i6 from "@angular/common";
+import * as i7 from "@progress/kendo-angular-common";
 const FOCUSED = 'k-focus';
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_ROUNDED = 'medium';
@@ -180,12 +181,8 @@ export 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)) {
@@ -194,9 +191,6 @@ export class TextBoxComponent {
                         });
                     }
                 }
-                this.ngZone.run(() => {
-                    this.isFocused = true;
-                });
             }
         };
         /**
@@ -304,56 +298,16 @@ export 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();
@@ -556,6 +510,27 @@ export 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);
+            }
+            else {
+                this.renderer.removeClass(element, FOCUSED);
+            }
+            this._isFocused = value;
+        }
+    }
     setSelection(start, end) {
         if (this.isFocused) {
             invokeElementMethod(this.input, 'setSelectionRange', start, end);
@@ -577,21 +552,20 @@ export 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);
-            }
-            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) {
@@ -610,6 +584,14 @@ export 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: [
@@ -621,75 +603,82 @@ 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')"
+        <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>
-    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+            <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: i2.InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { type: i5.SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -710,69 +699,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')"
-        >
-        </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>
+            <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: [{
@@ -836,12 +832,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']