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

package/esm2020/textbox/textbox.component.mjs

@@ -0,0 +1,849 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* 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 { 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 { 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";
+const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
+const iconsMap = { checkIcon, exclamationCircleIcon, xIcon };
+export class TextBoxComponent {
+    constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
+        this.localizationService = localizationService;
+        this.ngZone = ngZone;
+        this.changeDetector = changeDetector;
+        this.renderer = renderer;
+        this.injector = injector;
+        this.hostElement = hostElement;
+        /**
+         * @hidden
+         */
+        this.focusableId = `k-${guid()}`;
+        /**
+         * Sets the `title` attribute of the `input` element of the TextBox.
+         */
+        this.title = '';
+        /**
+         * Sets the disabled state of the component.
+         *
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Sets the read-only state of the component.
+         *
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * Specifies the `tabindex` of the TextBox.
+         *
+         * @default 0
+         */
+        this.tabindex = 0;
+        /**
+         * Provides a value for the TextBox.
+         */
+        this.value = null;
+        /**
+         * Determines whether the whole value will be selected when the TextBox is clicked. Defaults to `false`.
+         *
+         * @default false
+         */
+        this.selectOnFocus = false;
+        /**
+         * Specifies when the Success icon will be shown ([see example]({% slug validation_textbox %})).
+         *
+         * The possible values are:
+         *
+         * `boolean`—The Success icon is displayed, if the condition given by the developer is met.
+         *
+         * `initial`—The Success icon will be displayed when the component state is neither `invalid` nor `touched` or `dirty`.
+         *
+         * @default false
+         */
+        this.showSuccessIcon = false;
+        /**
+         * Specifies when the Error icon will be shown ([see example]({% slug validation_textbox %})).
+         *
+         * The possible values are:
+         *
+         * * `initial`—The Error icon will be displayed when the component state is
+         * `invalid` and `touched` or `dirty`.
+         * * `boolean`—The Error icon is displayed, if the condition given by the developer is met.
+         *
+         * @default false
+         */
+        this.showErrorIcon = false;
+        /**
+         * Specifies whether a Clear button will be rendered.
+         *
+         * @default false
+         */
+        this.clearButton = false;
+        /**
+         * Fires each time the value is changed—
+         * when the component is blurred or the value is cleared through the **Clear** button
+         * ([see example]({% slug overview_textbox %}#toc-events)).
+         * When the value of the component is programmatically changed to `ngModel` or `formControl`
+         * through its API or form binding, the `valueChange` event is not triggered because it
+         * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
+         */
+        this.valueChange = 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 user focuses the TextBox component.
+         *
+         * > To wire the event programmatically, use the `onFocus` property.
+         *
+         * @example
+         * ```ts-no-run
+         * _@Component({
+         * selector: 'my-app',
+         * template: `
+         *  <kendo-textbox (focus)="handleFocus()"></kendo-textbox>
+         * `
+         * })
+         * class AppComponent {
+         *   public handleFocus(): void {
+         *      console.log('Component is isFocused');
+         *   }
+         * }
+         * ```
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the TextBox component gets blurred.
+         *
+         * > To wire the event programmatically, use the `onBlur` property.
+         *
+         * @example
+         * ```ts-no-run
+         * _@Component({
+         * selector: 'my-app',
+         * template: `
+         *  <kendo-textbox (blur)="handleBlur()"></kendo-textbox>
+         * `
+         * })
+         * class AppComponent {
+         *   public handleBlur(): void {
+         *      console.log('Component is blurred');
+         *   }
+         * }
+         * ```
+         */
+        this.onBlur = new EventEmitter();
+        this.hostClasses = true;
+        this._isFocused = false;
+        this.focusChangedProgrammatically = false;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        /**
+         * @hidden
+         */
+        this.handleInputFocus = () => {
+            if (!this.disabled) {
+                if (this.selectOnFocus && this.value) {
+                    this.ngZone.run(() => {
+                        setTimeout(() => { this.selectAll(); });
+                    });
+                }
+                if (hasObservers(this.onFocus)) {
+                    if (!this.isFocused) {
+                        this.ngZone.run(() => {
+                            this.onFocus.emit();
+                        });
+                    }
+                }
+                if (hasObservers(this.inputFocus)) {
+                    if (!this.focusChangedProgrammatically || (this.focusChangedProgrammatically && this.clearButtonClicked)) {
+                        this.ngZone.run(() => {
+                            this.inputFocus.emit();
+                        });
+                    }
+                }
+                this.ngZone.run(() => {
+                    this.isFocused = true;
+                });
+            }
+        };
+        /**
+         * @hidden
+         */
+        this.handleInputBlur = () => {
+            this.changeDetector.markForCheck();
+            if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
+                this.ngZone.run(() => {
+                    this.ngTouched();
+                    this.inputBlur.emit();
+                });
+            }
+        };
+        /**
+         * @hidden
+         */
+        this.handleInput = (ev) => {
+            const target = ev.target;
+            const isBrowserSafari = isSafari(navigator.userAgent);
+            const incomingValue = isBrowserSafari && isJapanese(target.value) ? ev.data : target.value;
+            const [caretStart, caretEnd] = [target.selectionStart, target.selectionEnd];
+            this.updateValue(incomingValue);
+            if (isBrowserSafari) {
+                target.setSelectionRange(caretStart, caretEnd);
+            }
+        };
+        this.ngChange = (_) => { };
+        this.ngTouched = () => { };
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
+    /**
+     * The size property specifies the padding of the TextBox internal input element
+     * ([see example]({% slug appearance_textbox %}#toc-size)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the TextBox
+     * ([see example]({% slug appearance_textbox %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
+     */
+    set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the TextBox
+     * ([see example]({% slug appearance_textbox %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
+     */
+    set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * @hidden
+     */
+    set tabIndex(tabIndex) {
+        this.tabindex = tabIndex;
+    }
+    get tabIndex() {
+        return this.tabindex;
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    ngOnInit() {
+        this.control = this.injector.get(NgControl, null);
+        this.checkClearButton();
+        this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        });
+    }
+    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);
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['disabled'] || changes['readonly'] || changes['value']) {
+            this.checkClearButton();
+        }
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    /**
+     * @hidden
+     */
+    svgIcon(name) {
+        return iconsMap[name];
+    }
+    /**
+     * Focuses the TextBox.
+     *
+     * @example
+     * ```ts-no-run
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     *  <button (click)="input.focus()">Focus the input</button>
+     *  <kendo-textbox #input></kendo-textbox>
+     * `
+     * })
+     * class AppComponent { }
+     * ```
+     */
+    focus() {
+        if (!this.input) {
+            return;
+        }
+        this.focusChangedProgrammatically = true;
+        this.isFocused = true;
+        this.input.nativeElement.focus();
+        this.focusChangedProgrammatically = false;
+    }
+    /**
+     * Blurs the TextBox.
+     */
+    blur() {
+        this.focusChangedProgrammatically = true;
+        const isFocusedElement = this.hostElement.nativeElement.querySelector(':focus');
+        if (isFocusedElement) {
+            isFocusedElement.blur();
+        }
+        this.isFocused = false;
+        this.focusChangedProgrammatically = false;
+    }
+    /**
+     * @hidden
+     */
+    clearTitle() {
+        return this.localizationService.get('clear');
+    }
+    /**
+     * @hidden
+     */
+    checkClearButton() {
+        this.showClearButton =
+            !this.disabled &&
+                !this.readonly &&
+                this.clearButton &&
+                !!this.value;
+    }
+    /**
+     * @hidden
+     */
+    clearValue(ev) {
+        if (ev) {
+            ev.preventDefault();
+        }
+        this.clearButtonClicked = true;
+        this.input.nativeElement.value = '';
+        this.input.nativeElement.focus();
+        this.updateValue('');
+        this.checkClearButton();
+        this.clearButtonClicked = false;
+    }
+    /**
+     * @hidden
+     */
+    writeValue(value) {
+        this.value = value;
+        this.checkClearButton();
+    }
+    /**
+     * @hidden
+     */
+    registerOnChange(fn) {
+        this.ngChange = fn;
+    }
+    /**
+     * @hidden
+     */
+    registerOnTouched(fn) {
+        this.ngTouched = fn;
+    }
+    /**
+     * @hidden
+     * Called when the status of the component changes to or from `disabled`.
+     * Depending on the value, it enables or disables the appropriate DOM element.
+     *
+     * @param isDisabled
+     */
+    setDisabledState(isDisabled) {
+        this.changeDetector.markForCheck();
+        this.disabled = isDisabled;
+    }
+    /**
+     * @hidden
+     */
+    showErrorsInitial() {
+        if (!this.control) {
+            return false;
+        }
+        const { invalid, dirty, touched } = this.control;
+        return invalid && (dirty || touched);
+    }
+    /**
+     * @hidden
+     */
+    showSuccessInitial() {
+        if (!this.control) {
+            return false;
+        }
+        const { valid, dirty, touched } = this.control;
+        return valid && (dirty || touched);
+    }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
+    /**
+     * @hidden
+     */
+    get successIconClasses() {
+        if (!this.successIcon) {
+            return `check`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customSuccessIconClasses() {
+        if (this.successIcon) {
+            return this.successIcon;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get errorIconClasses() {
+        if (!this.errorIcon) {
+            return `exclamation-circle`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customIconClasses() {
+        if (this.errorIcon) {
+            return this.errorIcon;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customClearButtonClasses() {
+        if (this.clearButtonIcon) {
+            return this.clearButtonIcon;
+        }
+    }
+    /**
+     * @hidden
+     */
+    get clearButtonClass() {
+        if (!this.clearButtonIcon) {
+            return 'x';
+        }
+    }
+    /**
+     * @hidden
+     */
+    get hasErrors() {
+        return this.showErrorIcon === 'initial'
+            ? this.showErrorsInitial()
+            : this.showErrorIcon;
+    }
+    /**
+     * @hidden
+     */
+    get isSuccessful() {
+        return this.showSuccessIcon === 'initial'
+            ? this.showSuccessInitial()
+            : this.showSuccessIcon;
+    }
+    setSelection(start, end) {
+        if (this.isFocused) {
+            invokeElementMethod(this.input, 'setSelectionRange', start, end);
+        }
+    }
+    selectAll() {
+        if (this.value) {
+            this.setSelection(0, this.value.length);
+        }
+    }
+    updateValue(value) {
+        if (!areSame(this.value, value)) {
+            this.ngZone.run(() => {
+                this.value = value;
+                this.ngChange(value);
+                this.valueChange.emit(value);
+                this.checkClearButton();
+                this.changeDetector.markForCheck();
+            });
+        }
+    }
+    get isFocused() {
+        return this._isFocused;
+    }
+    set isFocused(value) {
+        if (this._isFocused !== value && this.hostElement) {
+            const element = this.hostElement.nativeElement;
+            if (value && !this.disabled) {
+                this.renderer.addClass(element, FOCUSED);
+            }
+            else {
+                this.renderer.removeClass(element, FOCUSED);
+            }
+            this._isFocused = value;
+        }
+    }
+    handleBlur() {
+        this.ngZone.run(() => {
+            if (!this.focusChangedProgrammatically) {
+                this.onBlur.emit();
+            }
+            this.isFocused = false;
+        });
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('input', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+}
+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", 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: [
+        LocalizationService,
+        { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TextBoxComponent),
+            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: `
+        <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.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>
+        <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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoTextBox',
+                    providers: [
+                        LocalizationService,
+                        { provide: L10N_PREFIX, useValue: 'kendo.textbox' },
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TextBoxComponent),
+                            multi: true
+                        },
+                        { provide: KendoInput, useExisting: forwardRef(() => TextBoxComponent) }
+                    ],
+                    selector: 'kendo-textbox',
+                    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.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>
+        <span class="k-input-suffix">
+            <ng-template
+                *ngIf="suffixTemplate"
+                [ngTemplateOutlet]="suffixTemplate?.templateRef">
+            </ng-template>
+        </span>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selectOnFocus: [{
+                type: Input
+            }], showSuccessIcon: [{
+                type: Input
+            }], showErrorIcon: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], successIcon: [{
+                type: Input
+            }], successSvgIcon: [{
+                type: Input
+            }], errorIcon: [{
+                type: Input
+            }], errorSvgIcon: [{
+                type: Input
+            }], clearButtonIcon: [{
+                type: Input
+            }], clearButtonSvgIcon: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], input: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [TextBoxSuffixTemplateDirective, { static: false }]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [TextBoxPrefixTemplateDirective, { static: false }]
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-textbox']
+            }, {
+                type: HostBinding,
+                args: ['class.k-input']
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }] } });