@progress/kendo-angular-inputs 17.0.0-develop.9 → 17.0.1-develop.1

package/{esm2020 → esm2022}/textbox/textbox.component.mjs

@@ -28,197 +28,106 @@ 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 `type` attribute of the `input` element of the TextBox.
-         */
-        this.type = 'text';
-        /**
-         * 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
-         */
-        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:events_textbox)).
-         * 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 focused.');
-         *   }
-         * }
-         * ```
-         */
-        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';
-        this.parsedAttributes = {};
-        /**
-         * @hidden
-         */
-        this.handleInputFocus = () => {
-            if (!this.disabled) {
-                if (this.selectOnFocus && this.value) {
-                    this.ngZone.run(() => {
-                        setTimeout(() => { this.selectAll(); });
-                    });
-                }
-                if (!this.isFocused) {
-                    this.handleFocus();
-                }
-                if (hasObservers(this.inputFocus)) {
-                    if (!this.focusChangedProgrammatically || (this.focusChangedProgrammatically && this.clearButtonClicked)) {
-                        this.ngZone.run(() => {
-                            this.inputFocus.emit();
-                        });
-                    }
-                }
-            }
-        };
-        /**
-         * @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';
-    }
+    localizationService;
+    ngZone;
+    changeDetector;
+    renderer;
+    injector;
+    hostElement;
+    /**
+     * @hidden
+     */
+    focusableId = `k-${guid()}`;
+    /**
+     * Sets the `title` attribute of the `input` element of the TextBox.
+     */
+    title;
+    /**
+     * Sets the `type` attribute of the `input` element of the TextBox.
+     */
+    type = 'text';
+    /**
+     * 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
+     */
+    disabled = false;
+    /**
+     * Sets the read-only state of the component.
+     *
+     * @default false
+     */
+    readonly = false;
+    /**
+     * Specifies the `tabindex` of the TextBox.
+     *
+     * @default 0
+     */
+    tabindex = 0;
+    /**
+     * Provides a value for the TextBox.
+     */
+    value = null;
+    /**
+     * Determines whether the whole value will be selected when the TextBox is clicked. Defaults to `false`.
+     *
+     * @default false
+     */
+    selectOnFocus = false;
+    /**
+     * Specifies when the Success icon will be shown ([see example]({% slug validation_textbox %})).
+     *
+     * The possible values are:
+     *
+     * `boolean`&mdash;The Success icon is displayed, if the condition given by the developer is met.
+     *
+     * `initial`&mdash;The Success icon will be displayed when the component state is neither `invalid` nor `touched` or `dirty`.
+     *
+     * @default false
+     */
+    showSuccessIcon = false;
+    /**
+     * Specifies when the Error icon will be shown ([see example]({% slug validation_textbox %})).
+     *
+     * The possible values are:
+     *
+     * * `initial`&mdash;The Error icon will be displayed when the component state is
+     * `invalid` and `touched` or `dirty`.
+     * * `boolean`&mdash;The Error icon is displayed, if the condition given by the developer is met.
+     *
+     * @default false
+     */
+    showErrorIcon = false;
+    /**
+     * Specifies whether a Clear button will be rendered.
+     *
+     * @default false
+     */
+    clearButton = false;
+    /**
+     * Sets a custom icon that will be rendered instead of the default one for a valid user input.
+     */
+    successIcon;
+    /**
+     * Sets a custom SVG icon that will be rendered instead of the default one for a valid user input.
+     */
+    successSvgIcon;
+    /**
+     * Sets a custom icon that will be rendered instead of the default one for invalid user input.
+     */
+    errorIcon;
+    /**
+     * Sets a custom SVG icon that will be rendered instead of the default one for invalid user input.
+     */
+    errorSvgIcon;
+    /**
+     * Sets a custom icon that will be rendered instead of the default one.
+     */
+    clearButtonIcon;
+    /**
+     * Sets a custom SVG icon that will be rendered instead of the default one.
+     */
+    clearButtonSvgIcon;
     /**
      * The size property specifies the padding of the TextBox internal input element
      * ([see example]({% slug appearance_textbox %}#toc-size)).
@@ -283,6 +192,14 @@ export class TextBoxComponent {
     get tabIndex() {
         return this.tabindex;
     }
+    /**
+     * The hint, which is displayed when the component is empty.
+     */
+    placeholder;
+    /**
+     * Specifies the maximum length of the TextBox value.
+     */
+    maxlength;
     /**
      * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
      */
@@ -299,9 +216,115 @@ export class TextBoxComponent {
     get inputAttributes() {
         return this._inputAttributes;
     }
+    /**
+     * Fires each time the value is changed&mdash;
+     * when the component is blurred or the value is cleared through the **Clear** button
+     * ([see example](slug:events_textbox)).
+     * 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.
+     */
+    valueChange = new EventEmitter();
+    /**
+     * Fires each time the user focuses the `input` element.
+     */
+    inputFocus = new EventEmitter();
+    /**
+     * Fires each time the `input` element gets blurred.
+     */
+    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 focused.');
+     *   }
+     * }
+     * ```
+     */
+    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');
+     *   }
+     * }
+     * ```
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Represents the visible `input` element of the TextBox.
+     */
+    input;
+    /**
+     * @hidden
+     */
+    textBoxSuffixTemplate;
+    /**
+     * @hidden
+     */
+    textBoxPrefixTemplate;
+    /**
+     * @hidden
+     */
+    suffixTemplate;
+    /**
+     * @hidden
+     */
+    prefixTemplate;
     get disabledClass() {
         return this.disabled;
     }
+    hostClasses = true;
+    direction;
+    /**
+     * @hidden
+     */
+    showClearButton;
+    /**
+     * @hidden
+     */
+    clearButtonClicked;
+    /**
+     * @hidden
+     */
+    suffix;
+    /**
+     * @hidden
+     */
+    prefix;
+    control;
+    subscriptions;
+    _isFocused = false;
+    focusChangedProgrammatically = false;
+    _inputAttributes;
+    _size = 'medium';
+    _rounded = 'medium';
+    _fillMode = 'solid';
+    parsedAttributes = {};
     get defaultAttributes() {
         return {
             id: this.focusableId,
@@ -316,6 +339,16 @@ export class TextBoxComponent {
             required: this.isControlRequired ? '' : null
         };
     }
+    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;
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
     ngOnInit() {
         this.control = this.injector.get(NgControl, null);
         this.checkClearButton();
@@ -386,6 +419,53 @@ export class TextBoxComponent {
         this.isFocused = false;
         this.focusChangedProgrammatically = false;
     }
+    /**
+     * @hidden
+     */
+    handleInputFocus = () => {
+        if (!this.disabled) {
+            if (this.selectOnFocus && this.value) {
+                this.ngZone.run(() => {
+                    setTimeout(() => { this.selectAll(); });
+                });
+            }
+            if (!this.isFocused) {
+                this.handleFocus();
+            }
+            if (hasObservers(this.inputFocus)) {
+                if (!this.focusChangedProgrammatically || (this.focusChangedProgrammatically && this.clearButtonClicked)) {
+                    this.ngZone.run(() => {
+                        this.inputFocus.emit();
+                    });
+                }
+            }
+        }
+    };
+    /**
+     * @hidden
+     */
+    handleInputBlur = () => {
+        this.changeDetector.markForCheck();
+        if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
+            this.ngZone.run(() => {
+                this.ngTouched();
+                this.inputBlur.emit();
+            });
+        }
+    };
+    /**
+     * @hidden
+     */
+    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);
+        }
+    };
     /**
      * @hidden
      */
@@ -563,6 +643,8 @@ export class TextBoxComponent {
     get isControlRequired() {
         return isControlRequired(this.control?.control);
     }
+    ngChange = (_) => { };
+    ngTouched = () => { };
     setSelection(start, end) {
         if (this.isFocused) {
             invokeElementMethod(this.input, 'setSelectionRange', start, end);
@@ -623,18 +705,17 @@ export class TextBoxComponent {
     setInputAttributes() {
         setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.ngZone);
     }
-}
-TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: TextBoxComponent, isStandalone: true, 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", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "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: 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TextBoxComponent, isStandalone: true, 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", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", inputFocus: "inputFocus", inputBlur: "inputBlur", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-readonly": "this.readonly", "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: 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">
@@ -711,7 +792,8 @@ TextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
             </span>
         <ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTextBoxMessagesDirective, selector: "[kendoTextBoxLocalizedMessages]" }, { kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextBoxComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextBoxComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoTextBox',

package/{esm2020 → esm2022}/textbox/textbox.directive.mjs

@@ -17,33 +17,30 @@ import * as i0 from "@angular/core";
  * ```
  */
 export class TextBoxDirective {
-    constructor(renderer, inputElement, ngZone) {
-        this.renderer = renderer;
-        this.inputElement = inputElement;
-        this.ngZone = ngZone;
-        this.hostClasses = true;
-        /**
-         * @hidden
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.onValueChange = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.autoFillStart = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.autoFillEnd = new EventEmitter();
-        this.listeners = [];
-    }
+    renderer;
+    inputElement;
+    ngZone;
+    hostClasses = true;
+    /**
+     * @hidden
+     */
+    onFocus = new EventEmitter();
+    /**
+     * @hidden
+     */
+    onBlur = new EventEmitter();
+    /**
+     * @hidden
+     */
+    onValueChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    autoFillStart = new EventEmitter();
+    /**
+     * @hidden
+     */
+    autoFillEnd = new EventEmitter();
     /**
      * @hidden
      */
@@ -66,6 +63,12 @@ export class TextBoxDirective {
     set id(id) {
         this.renderer.setAttribute(this.inputElement.nativeElement, 'id', id);
     }
+    listeners = [];
+    constructor(renderer, inputElement, ngZone) {
+        this.renderer = renderer;
+        this.inputElement = inputElement;
+        this.ngZone = ngZone;
+    }
     ngAfterViewInit() {
         const input = this.inputElement.nativeElement;
         this.listeners = [
@@ -86,13 +89,13 @@ export class TextBoxDirective {
     ngOnDestroy() {
         this.listeners.forEach(listener => listener());
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextBoxDirective, isStandalone: true, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-input-md": "this.hostClasses", "class.k-rounded-md": "this.hostClasses", "class.k-input-solid": "this.hostClasses" } }, providers: [{
+                provide: KendoInput,
+                useExisting: forwardRef(() => TextBoxDirective)
+            }], ngImport: i0 });
 }
-TextBoxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextBoxDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-TextBoxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TextBoxDirective, isStandalone: true, selector: "input[kendoTextBox]", inputs: { value: "value" }, host: { properties: { "class.k-textbox": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-input-md": "this.hostClasses", "class.k-rounded-md": "this.hostClasses", "class.k-input-solid": "this.hostClasses" } }, providers: [{
-            provide: KendoInput,
-            useExisting: forwardRef(() => TextBoxDirective)
-        }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextBoxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextBoxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kendoTextBox]',