/**----------------------------------------------------------------------------------------- * Copyright © 2024 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the project root for more information *-------------------------------------------------------------------------------------------*/ import { Subscription } from 'rxjs'; import { ControlValueAccessor, NgControl } from '@angular/forms'; import { ElementRef, EventEmitter, NgZone, ChangeDetectorRef, Injector, Renderer2, SimpleChanges, QueryList } from '@angular/core'; import { IconShowOptions } from './models/icon-show-options'; import { SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common'; import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive'; import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive'; import { LocalizationService } from '@progress/kendo-angular-l10n'; import { SVGIcon } from '@progress/kendo-angular-icons'; import { InputSize, InputRounded, InputFillMode, InputType } from '../common/models'; import * as i0 from "@angular/core"; export declare class TextBoxComponent implements ControlValueAccessor { private localizationService; private ngZone; private changeDetector; protected renderer: Renderer2; private injector; hostElement: ElementRef; /** * @hidden */ focusableId: string; /** * Sets the `title` attribute of the `input` element of the TextBox. */ title: string; /** * Sets the `type` attribute of the `input` element of the TextBox. */ type: InputType; /** * 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: boolean; /** * Sets the read-only state of the component. * * @default false */ readonly: boolean; /** * Specifies the `tabindex` of the TextBox. * * @default 0 */ tabindex: number; /** * Provides a value for the TextBox. */ value: string; /** * Determines whether the whole value will be selected when the TextBox is clicked. Defaults to `false`. * * @default false */ selectOnFocus: boolean; /** * 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: IconShowOptions; /** * 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: IconShowOptions; /** * Specifies whether a Clear button will be rendered. * * @default false */ clearButton: boolean; /** * Sets a custom icon that will be rendered instead of the default one for a valid user input. */ successIcon: string; /** * Sets a custom SVG icon that will be rendered instead of the default one for a valid user input. */ successSvgIcon: SVGIcon; /** * Sets a custom icon that will be rendered instead of the default one for invalid user input. */ errorIcon: string; /** * Sets a custom SVG icon that will be rendered instead of the default one for invalid user input. */ errorSvgIcon: SVGIcon; /** * Sets a custom icon that will be rendered instead of the default one. */ clearButtonIcon: string; /** * Sets a custom SVG icon that will be rendered instead of the default one. */ clearButtonSvgIcon: SVGIcon; /** * 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: InputSize); get size(): InputSize; /** * 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: InputRounded); get rounded(): InputRounded; /** * 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: InputFillMode); get fillMode(): InputFillMode; /** * @hidden */ set tabIndex(tabIndex: number); get tabIndex(): number; /** * The hint, which is displayed when the component is empty. */ placeholder: string; /** * Specifies the maximum length of the TextBox value. */ maxlength: number; /** * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed. */ set inputAttributes(attributes: { [key: string]: string; }); get inputAttributes(): { [key: string]: string; }; /** * 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: EventEmitter; /** * Fires each time the user focuses the `input` element. */ inputFocus: EventEmitter; /** * Fires each time the `input` element gets blurred. */ inputBlur: 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: ` * * ` * }) * class AppComponent { * public handleFocus(): void { * console.log('Component is focused.'); * } * } * ``` */ onFocus: 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: ` * * ` * }) * class AppComponent { * public handleBlur(): void { * console.log('Component is blurred'); * } * } * ``` */ onBlur: EventEmitter; /** * Represents the visible `input` element of the TextBox. */ input: ElementRef; /** * @hidden */ textBoxSuffixTemplate: QueryList; /** * @hidden */ textBoxPrefixTemplate: QueryList; /** * @hidden */ suffixTemplate: SuffixTemplateDirective; /** * @hidden */ prefixTemplate: PrefixTemplateDirective; get disabledClass(): boolean; hostClasses: boolean; direction: string; /** * @hidden */ showClearButton: boolean; /** * @hidden */ clearButtonClicked: boolean; /** * @hidden */ suffix: TextBoxSuffixTemplateDirective | SuffixTemplateDirective; /** * @hidden */ prefix: TextBoxPrefixTemplateDirective | PrefixTemplateDirective; protected control: NgControl; protected subscriptions: Subscription; private _isFocused; private focusChangedProgrammatically; private _inputAttributes; private _size; private _rounded; private _fillMode; private parsedAttributes; private get defaultAttributes(); constructor(localizationService: LocalizationService, ngZone: NgZone, changeDetector: ChangeDetectorRef, renderer: Renderer2, injector: Injector, hostElement: ElementRef); ngOnInit(): void; ngAfterViewInit(): void; ngAfterContentInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** * @hidden */ svgIcon(name: string): SVGIcon; /** * Focuses the TextBox. * * @example * ```ts-no-run * _@Component({ * selector: 'my-app', * template: ` * * * ` * }) * class AppComponent { } * ``` */ focus(): void; /** * Blurs the TextBox. */ blur(): void; /** * @hidden */ handleInputFocus: () => void; /** * @hidden */ handleInputBlur: () => void; /** * @hidden */ handleInput: (ev: any) => void; /** * @hidden */ clearTitle(): string; /** * @hidden */ checkClearButton(): void; /** * @hidden */ clearValue(ev?: any): void; /** * @hidden */ writeValue(value: string): void; /** * @hidden */ registerOnChange(fn: () => any): void; /** * @hidden */ registerOnTouched(fn: () => any): void; /** * @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: boolean): void; /** * @hidden */ showErrorsInitial(): boolean; /** * @hidden */ private showSuccessInitial; /** * @hidden */ get isControlInvalid(): boolean; /** * @hidden */ get successIconClasses(): string; /** * @hidden */ get customSuccessIconClasses(): string; /** * @hidden */ get errorIconClasses(): string; /** * @hidden */ get customIconClasses(): string; /** * @hidden */ get customClearButtonClasses(): string; /** * @hidden */ get clearButtonClass(): string; /** * @hidden */ get hasErrors(): boolean; /** * @hidden */ get isSuccessful(): boolean; /** * @hidden */ get isFocused(): boolean; /** * @hidden */ set isFocused(value: boolean); /** * @hidden */ get isControlRequired(): boolean; private ngChange; private ngTouched; private setSelection; private selectAll; private updateValue; /** * @hidden */ handleFocus(): void; /** * @hidden */ handleBlur(): void; private handleClasses; private configureAdornments; private setInputAttributes; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; }