@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
126 lines (125 loc) • 4.79 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Directive, ElementRef, EventEmitter, Input, HostBinding, Renderer2, forwardRef, NgZone } from '@angular/core';
import { KendoInput } from '@progress/kendo-angular-common';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI TextBox directive]({% slug overview_textbox %}) for the Inputs components for Angular.
* Used to style the textbox of any `input` element.
*
* @example
* ```ts-no-run
* <input kendoTextBox />
* <input kendoTextBox type="email" />
* <input kendoTextBox type="password" />
* ```
*/
export class TextBoxDirective {
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
*/
set value(text) {
if (!this.inputElement) {
return;
}
this.inputElement.nativeElement.value = (text === undefined || text === null) ? '' : text;
this.onValueChange.emit();
}
/**
* @hidden
*/
get value() {
return this.inputElement.nativeElement.value;
}
get id() {
return this.inputElement.nativeElement.id;
}
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 = [
this.renderer.listen(input, 'focus', () => this.onFocus.emit()),
this.renderer.listen(input, 'blur', () => this.onBlur.emit())
];
this.ngZone.runOutsideAngular(() => {
this.renderer.listen(input, 'animationstart', (e) => {
if (e.animationName === 'autoFillStart') {
this.autoFillStart.emit();
}
else if (e.animationName === 'autoFillEnd') {
this.autoFillEnd.emit();
}
});
});
}
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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextBoxDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[kendoTextBox]',
providers: [{
provide: KendoInput,
useExisting: forwardRef(() => TextBoxDirective)
}],
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
type: HostBinding,
args: ['class.k-textbox']
}, {
type: HostBinding,
args: ['class.k-input']
}, {
type: HostBinding,
args: ['class.k-input-md']
}, {
type: HostBinding,
args: ['class.k-rounded-md']
}, {
type: HostBinding,
args: ['class.k-input-solid']
}], value: [{
type: Input
}] } });