@progress/kendo-angular-inputs 21.4.1 → 22.0.0-develop.1

package/esm2022/textbox/textbox.component.mjs

@@ -1,933 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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 { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-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, isSafari, SuffixTemplateDirective, PrefixTemplateDirective, setHTMLAttributes, isControlRequired, isObjectPresent, removeHTMLAttributes, parseAttributes, EventsOutsideAngularDirective } 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 { IconWrapperComponent } from '@progress/kendo-angular-icons';
-import { checkIcon, exclamationCircleIcon, xIcon } from '@progress/kendo-svg-icons';
-import { InputSeparatorComponent } from '../shared/input-separator.component';
-import { NgTemplateOutlet } from '@angular/common';
-import { SharedInputEventsDirective } from '../shared/shared-events.directive';
-import { LocalizedTextBoxMessagesDirective } from './localization/localized-textbox-messages.directive';
-import * as i0 from "@angular/core";
-import * as i1 from "@progress/kendo-angular-l10n";
-const FOCUSED = 'k-focus';
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_ROUNDED = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
-const iconsMap = { checkIcon, exclamationCircleIcon, xIcon };
-/**
- * Represents the Kendo UI TextBox component for Angular.
- * Use this component to create styled and feature-rich text input fields.
- *
- * @example
- * ```html
- * <kendo-textbox placeholder="Enter text"></kendo-textbox>
- * ```
- *
- * @remarks
- * Supported children components are: {@link TextBoxCustomMessagesComponent}.
- */
-export class TextBoxComponent {
-    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.
-     * @default 'text'
-     */
-    type = 'text';
-    /**
-     * Sets the disabled state of the TextBox. To disable the component in reactive forms, see [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;
-    /**
-     * Highlights the whole value when you click the TextBox.
-     * @default false
-     */
-    selectOnFocus = false;
-    /**
-     * Specifies when to show the Success icon ([see example]({% slug validation_textbox %})).
-     *
-     * @default false
-     */
-    showSuccessIcon = false;
-    /**
-     * Specifies when to show the Error icon ([see example]({% slug validation_textbox %})).
-     *
-     * @default false
-     */
-    showErrorIcon = false;
-    /**
-     * Shows a **Clear** button in the TextBox.
-     * @default false
-     */
-    clearButton = false;
-    /**
-     * Sets a custom icon for valid user input.
-     */
-    successIcon;
-    /**
-     * Sets a custom SVG icon for valid user input.
-     */
-    successSvgIcon;
-    /**
-     * Sets a custom icon for invalid user input.
-     */
-    errorIcon;
-    /**
-     * Sets a custom SVG icon for invalid user input.
-     */
-    errorSvgIcon;
-    /**
-     * Sets a custom icon for the **Clear** button.
-     */
-    clearButtonIcon;
-    /**
-     * Sets a custom SVG icon for the **Clear** button.
-     */
-    clearButtonSvgIcon;
-    /**
-     * Sets the padding of the TextBox internal input element ([see example]({% slug appearance_textbox %}#toc-size)).
-     * @default 'medium'
-     */
-    set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
-    /**
-     * Sets the border radius of the TextBox ([see example](slug:appearance_textbox#toc-roundness)).
-     * @default 'medium'
-     */
-    set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
-    }
-    get rounded() {
-        return this._rounded;
-    }
-    /**
-     * Sets the background and border styles of the TextBox ([see example]({% slug appearance_textbox %}#toc-fill-mode)).
-     * @default 'solid'
-     */
-    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;
-    }
-    /**
-     * Sets the placeholder text displayed when the component is empty.
-     */
-    placeholder;
-    /**
-     * Sets the maximum length of the TextBox value.
-     */
-    maxlength;
-    /**
-     * Sets the HTML attributes of the inner focusable input element. You cannot change attributes that are essential for component functionality.
-     */
-    set inputAttributes(attributes) {
-        if (isObjectPresent(this.parsedAttributes)) {
-            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
-        }
-        this._inputAttributes = attributes;
-        this.parsedAttributes = this.inputAttributes ?
-            parseAttributes(this.inputAttributes, this.defaultAttributes) :
-            this.inputAttributes;
-        this.setInputAttributes();
-    }
-    get inputAttributes() {
-        return this._inputAttributes;
-    }
-    /**
-     * Fires when the value changes—when the component is blurred or the value is cleared through the **Clear** button ([see example](slug:events_textbox)).
-     * Does not fire when you change the value programmatically through `ngModel` or `formControl`.
-     */
-    valueChange = new EventEmitter();
-    /**
-     * Fires when the user focuses the `input` element.
-     */
-    inputFocus = new EventEmitter();
-    /**
-     * Fires when the `input` element is blurred.
-     */
-    inputBlur = new EventEmitter();
-    /**
-     * Fires when the user focuses the TextBox component.
-     *
-     */
-    onFocus = new EventEmitter();
-    /**
-     * Fires when the TextBox component is blurred.
-     *
-     */
-    onBlur = new EventEmitter();
-    /**
-     * Gets a reference to 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,
-            disabled: this.disabled ? '' : null,
-            readonly: this.readonly ? '' : null,
-            tabindex: this.disabled ? undefined : this.tabindex,
-            type: this.type,
-            placeholder: this.placeholder,
-            title: this.title,
-            maxlength: this.maxlength,
-            'aria-invalid': this.isControlInvalid,
-            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();
-        this.subscriptions = this.localizationService.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
-    ngAfterViewInit() {
-        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();
-        }
-    }
-    ngOnDestroy() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     */
-    svgIcon(name) {
-        return iconsMap[name];
-    }
-    /**
-     * Focuses the TextBox.
-     */
-    focus() {
-        if (!this.input) {
-            return;
-        }
-        this.focusChangedProgrammatically = true;
-        this.isFocused = true;
-        this.input.nativeElement.focus();
-        this.focusChangedProgrammatically = false;
-    }
-    /**
-     * Removes focus from the TextBox.
-     */
-    blur() {
-        this.focusChangedProgrammatically = true;
-        const isFocusedElement = this.hostElement.nativeElement.querySelector(':focus');
-        if (isFocusedElement) {
-            isFocusedElement.blur();
-        }
-        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
-     */
-    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();
-        this.changeDetector.markForCheck();
-    }
-    /**
-     * @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;
-    }
-    /**
-     * @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;
-        }
-    }
-    /**
-     * @hidden
-     */
-    get isControlRequired() {
-        return isControlRequired(this.control?.control);
-    }
-    ngChange = (_) => { };
-    ngTouched = () => { };
-    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();
-            });
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleFocus() {
-        this.ngZone.run(() => {
-            if (!this.focusChangedProgrammatically && hasObservers(this.onFocus)) {
-                this.onFocus.emit();
-            }
-            this.isFocused = true;
-        });
-    }
-    /**
-     * @hidden
-     */
-    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);
-        }
-    }
-    configureAdornments() {
-        this.prefix = this.textBoxPrefixTemplate.first || this.prefixTemplate;
-        this.suffix = this.textBoxSuffixTemplate.first || this.suffixTemplate;
-    }
-    setInputAttributes() {
-        setHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement, this.ngZone);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "17.0.0", version: "18.2.14", 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">
-        </ng-container>
-        <ng-container
-          kendoInputSharedEvents
-          [hostElement]="hostElement"
-          [(isFocused)]="isFocused"
-          (handleBlur)="handleBlur()"
-          (onFocus)="handleFocus()"
-          [clearButtonClicked]="clearButtonClicked"
-          >
-          @if (prefix) {
-            <span class="k-input-prefix k-input-prefix-horizontal">
-              <ng-template [ngTemplateOutlet]="prefix?.templateRef">
-              </ng-template>
-            </span>
-          }
-          @if (prefix && prefix.showSeparator) {
-            <kendo-input-separator></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"
-            [attr.required]="isControlRequired ? '' : null"
-                [kendoEventsOutsideAngular]="{
-                    focus: handleInputFocus,
-                    blur: handleInputBlur,
-                    input: handleInput}"
-            />
-          @if (showClearButton) {
-            <span
-              role="button"
-              class="k-clear-value"
-              (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>
-          }
-          @if (hasErrors) {
-            <kendo-icon-wrapper
-              innerCssClass="k-input-validation-icon"
-              [name]="errorIconClasses"
-              [customFontClass]="customIconClasses"
-              [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
-              >
-            </kendo-icon-wrapper>
-          }
-          @if (isSuccessful) {
-            <kendo-icon-wrapper
-              innerCssClass="k-input-validation-icon"
-              [name]="successIconClasses"
-              [customFontClass]="customSuccessIconClasses"
-              [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
-              >
-            </kendo-icon-wrapper>
-          }
-          @if (suffix && suffix.showSeparator) {
-            <kendo-input-separator></kendo-input-separator>
-          }
-          @if (suffix) {
-            <span class="k-input-suffix k-input-suffix-horizontal">
-              <ng-template [ngTemplateOutlet]="suffix?.templateRef">
-              </ng-template>
-            </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: 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: "18.2.14", 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>
-        <ng-container
-          kendoInputSharedEvents
-          [hostElement]="hostElement"
-          [(isFocused)]="isFocused"
-          (handleBlur)="handleBlur()"
-          (onFocus)="handleFocus()"
-          [clearButtonClicked]="clearButtonClicked"
-          >
-          @if (prefix) {
-            <span class="k-input-prefix k-input-prefix-horizontal">
-              <ng-template [ngTemplateOutlet]="prefix?.templateRef">
-              </ng-template>
-            </span>
-          }
-          @if (prefix && prefix.showSeparator) {
-            <kendo-input-separator></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"
-            [attr.required]="isControlRequired ? '' : null"
-                [kendoEventsOutsideAngular]="{
-                    focus: handleInputFocus,
-                    blur: handleInputBlur,
-                    input: handleInput}"
-            />
-          @if (showClearButton) {
-            <span
-              role="button"
-              class="k-clear-value"
-              (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>
-          }
-          @if (hasErrors) {
-            <kendo-icon-wrapper
-              innerCssClass="k-input-validation-icon"
-              [name]="errorIconClasses"
-              [customFontClass]="customIconClasses"
-              [svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
-              >
-            </kendo-icon-wrapper>
-          }
-          @if (isSuccessful) {
-            <kendo-icon-wrapper
-              innerCssClass="k-input-validation-icon"
-              [name]="successIconClasses"
-              [customFontClass]="customSuccessIconClasses"
-              [svgIcon]="successSvgIcon || svgIcon('checkIcon')"
-              >
-            </kendo-icon-wrapper>
-          }
-          @if (suffix && suffix.showSeparator) {
-            <kendo-input-separator></kendo-input-separator>
-          }
-          @if (suffix) {
-            <span class="k-input-suffix k-input-suffix-horizontal">
-              <ng-template [ngTemplateOutlet]="suffix?.templateRef">
-              </ng-template>
-            </span>
-          }
-          <ng-container>
-        `,
-                    standalone: true,
-                    imports: [LocalizedTextBoxMessagesDirective, SharedInputEventsDirective, NgTemplateOutlet, InputSeparatorComponent, EventsOutsideAngularDirective, IconWrapperComponent]
-                }]
-        }], ctorParameters: () => [{ 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
-            }], type: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], readonly: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
-            }], 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
-            }], inputAttributes: [{
-                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 }]
-            }], textBoxSuffixTemplate: [{
-                type: ContentChildren,
-                args: [TextBoxSuffixTemplateDirective, { descendants: false }]
-            }], textBoxPrefixTemplate: [{
-                type: ContentChildren,
-                args: [TextBoxPrefixTemplateDirective, { descendants: false }]
-            }], suffixTemplate: [{
-                type: ContentChild,
-                args: [SuffixTemplateDirective]
-            }], prefixTemplate: [{
-                type: ContentChild,
-                args: [PrefixTemplateDirective]
-            }], 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']
-            }] } });