@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
982 lines (981 loc) • 35.1 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { NgIf, 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 };
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.
*/
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`—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
*/
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
*/
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)).
*
* 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-roundness)).
*
* 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-fill-mode)).
*
* 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;
}
/**
* 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.
*/
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 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.
*/
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,
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.
*
* @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
*/
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();
}
/**
* @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: "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">
</ng-container>
<ng-container
kendoInputSharedEvents
[hostElement]="hostElement"
[(isFocused)]="isFocused"
(handleBlur)="handleBlur()"
(onFocus)="handleFocus()"
[clearButtonClicked]="clearButtonClicked"
>
<span *ngIf="prefix" class="k-input-prefix k-input-prefix-horizontal">
<ng-template [ngTemplateOutlet]="prefix?.templateRef">
</ng-template>
</span>
<kendo-input-separator *ngIf="prefix && prefix.showSeparator"></kendo-input-separator>
<input #input
class="k-input-inner"
[id]="focusableId"
[disabled]="disabled"
[readonly]="readonly"
[attr.tabindex]="disabled ? undefined : tabindex"
[value]="value"
[attr.type]="type"
[attr.placeholder]="placeholder"
[attr.title]="title"
[attr.maxlength]="maxlength"
[attr.aria-invalid]="isControlInvalid"
[attr.required]="isControlRequired ? '' : null"
[kendoEventsOutsideAngular]="{
focus: handleInputFocus,
blur: handleInputBlur,
input: handleInput}"
/>
<span
role="button"
class="k-clear-value"
*ngIf="showClearButton"
(click)="clearValue()"
(mousedown)="$event.preventDefault()"
[tabindex]="tabIndex"
[attr.aria-label]="clearTitle()"
[title]="clearTitle()"
(keydown.enter)="clearValue($event)"
(keydown.space)="clearValue($event)">
<kendo-icon-wrapper
[name]="clearButtonClass"
[customFontClass]="customClearButtonClasses"
[svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
>
</kendo-icon-wrapper>
</span>
<kendo-icon-wrapper
*ngIf="hasErrors"
innerCssClass="k-input-validation-icon"
[name]="errorIconClasses"
[customFontClass]="customIconClasses"
[svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
>
</kendo-icon-wrapper>
<kendo-icon-wrapper
*ngIf="isSuccessful"
innerCssClass="k-input-validation-icon"
[name]="successIconClasses"
[customFontClass]="customSuccessIconClasses"
[svgIcon]="successSvgIcon || svgIcon('checkIcon')"
>
</kendo-icon-wrapper>
<kendo-input-separator *ngIf="suffix && suffix.showSeparator"></kendo-input-separator>
<span *ngIf="suffix" 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: 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: "16.2.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>
<ng-container
kendoInputSharedEvents
[hostElement]="hostElement"
[(isFocused)]="isFocused"
(handleBlur)="handleBlur()"
(onFocus)="handleFocus()"
[clearButtonClicked]="clearButtonClicked"
>
<span *ngIf="prefix" class="k-input-prefix k-input-prefix-horizontal">
<ng-template [ngTemplateOutlet]="prefix?.templateRef">
</ng-template>
</span>
<kendo-input-separator *ngIf="prefix && prefix.showSeparator"></kendo-input-separator>
<input #input
class="k-input-inner"
[id]="focusableId"
[disabled]="disabled"
[readonly]="readonly"
[attr.tabindex]="disabled ? undefined : tabindex"
[value]="value"
[attr.type]="type"
[attr.placeholder]="placeholder"
[attr.title]="title"
[attr.maxlength]="maxlength"
[attr.aria-invalid]="isControlInvalid"
[attr.required]="isControlRequired ? '' : null"
[kendoEventsOutsideAngular]="{
focus: handleInputFocus,
blur: handleInputBlur,
input: handleInput}"
/>
<span
role="button"
class="k-clear-value"
*ngIf="showClearButton"
(click)="clearValue()"
(mousedown)="$event.preventDefault()"
[tabindex]="tabIndex"
[attr.aria-label]="clearTitle()"
[title]="clearTitle()"
(keydown.enter)="clearValue($event)"
(keydown.space)="clearValue($event)">
<kendo-icon-wrapper
[name]="clearButtonClass"
[customFontClass]="customClearButtonClasses"
[svgIcon]="clearButtonSvgIcon || svgIcon('xIcon')"
>
</kendo-icon-wrapper>
</span>
<kendo-icon-wrapper
*ngIf="hasErrors"
innerCssClass="k-input-validation-icon"
[name]="errorIconClasses"
[customFontClass]="customIconClasses"
[svgIcon]="errorSvgIcon || svgIcon('exclamationCircleIcon')"
>
</kendo-icon-wrapper>
<kendo-icon-wrapper
*ngIf="isSuccessful"
innerCssClass="k-input-validation-icon"
[name]="successIconClasses"
[customFontClass]="customSuccessIconClasses"
[svgIcon]="successSvgIcon || svgIcon('checkIcon')"
>
</kendo-icon-wrapper>
<kendo-input-separator *ngIf="suffix && suffix.showSeparator"></kendo-input-separator>
<span *ngIf="suffix" class="k-input-suffix k-input-suffix-horizontal">
<ng-template [ngTemplateOutlet]="suffix?.templateRef">
</ng-template>
</span>
<ng-container>
`,
standalone: true,
imports: [LocalizedTextBoxMessagesDirective, SharedInputEventsDirective, NgIf, NgTemplateOutlet, InputSeparatorComponent, EventsOutsideAngularDirective, IconWrapperComponent]
}]
}], 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
}], 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']
}] } });