smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
1,018 lines (1,008 loc) • 48.7 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.textbox';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, forwardRef, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TextBoxComponent),
multi: true
};
class TextBoxComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/**
* @description
* The registered callback function called when a change event occurs on the form elements.
*/
this._onChange = () => { };
/**
* @description
* The registered callback function called when a blur event occurs on the form elements.
*/
this._onTouched = () => { };
/** @description This event is triggered when the value of the Text Box is changed. This happens on blur and if 'Enter' is pressed.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value, type)
* oldValue - The previous value before it was changed.
* value - The new value.
* type - The type of the event.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered on each key up event of the TextBox, if the value is changed.
* @param event. The custom event. Custom event was created with: event.detail( oldValue, value)
* oldValue - The previous value before it was changed.
* value - The new value.
*/
this.onChanging = new EventEmitter();
this._initialChange = true;
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-text-box');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */
get animation() {
return this.nativeElement ? this.nativeElement.animation : undefined;
}
set animation(value) {
this.nativeElement ? this.nativeElement.animation = value : undefined;
}
/** @description Determines whether the text box will be focused on page load or not. */
get autoFocus() {
return this.nativeElement ? this.nativeElement.autoFocus : undefined;
}
set autoFocus(value) {
this.nativeElement ? this.nativeElement.autoFocus = value : undefined;
}
/** @description Determines the autocomplete mode. Auto complete modes filter the items from the dataSource and show only those that match the input. */
get autoComplete() {
return this.nativeElement ? this.nativeElement.autoComplete : undefined;
}
set autoComplete(value) {
this.nativeElement ? this.nativeElement.autoComplete = value : undefined;
}
/** @description Determines the delay before the drop down opens to show the matches from the auto complete operation. */
get autoCompleteDelay() {
return this.nativeElement ? this.nativeElement.autoCompleteDelay : undefined;
}
set autoCompleteDelay(value) {
this.nativeElement ? this.nativeElement.autoCompleteDelay = value : undefined;
}
/** @description Determines the data source that will be loaded to the ComboBox. The dataSource can be an array of strings, numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Enables or disables the element. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Determines whether an indicator will appear during filtering and remote item loading. */
get displayLoadingIndicator() {
return this.nativeElement ? this.nativeElement.displayLoadingIndicator : undefined;
}
set displayLoadingIndicator(value) {
this.nativeElement ? this.nativeElement.displayLoadingIndicator = value : undefined;
}
/** @description Sets or gets the displayMember. The displayMember specifies the name of a property to display. The name is contained in the collection specified by the 'dataSource' property. */
get displayMember() {
return this.nativeElement ? this.nativeElement.displayMember : undefined;
}
set displayMember(value) {
this.nativeElement ? this.nativeElement.displayMember = value : undefined;
}
/** @description Determines how the characters are displayed inside the input. */
get displayMode() {
return this.nativeElement ? this.nativeElement.displayMode : undefined;
}
set displayMode(value) {
this.nativeElement ? this.nativeElement.displayMode = value : undefined;
}
/** @description Determines the drop down parent. The drop down can be removed from the body of the element and continue to work in another container. This is usefull when one of the parents of the element doesn't allow overflowing, by settings this property to 'body' the drop down will be appended to the DOM and the drop down will open/close as usual. dropDownAppendTo can be a string representing the id of an HTML element on the page or a direct reference to that element. Reseting it back to null will take the drop down back to it's original place. */
get dropDownAppendTo() {
return this.nativeElement ? this.nativeElement.dropDownAppendTo : undefined;
}
set dropDownAppendTo(value) {
this.nativeElement ? this.nativeElement.dropDownAppendTo = value : undefined;
}
/** @description Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable. */
get dropDownHeight() {
return this.nativeElement ? this.nativeElement.dropDownHeight : undefined;
}
set dropDownHeight(value) {
this.nativeElement ? this.nativeElement.dropDownHeight = value : undefined;
}
/** @description Sets the maximum Height of the drop down. By default it's set to an empty string. In this case the maxHeight of the drop down is controlled by a CSS variable. */
get dropDownMaxHeight() {
return this.nativeElement ? this.nativeElement.dropDownMaxHeight : undefined;
}
set dropDownMaxHeight(value) {
this.nativeElement ? this.nativeElement.dropDownMaxHeight = value : undefined;
}
/** @description Sets the maximum Width of the drop down. By default it's set to an empty string. In this case the maxWidth of the drop down is controlled by a CSS variable. */
get dropDownMaxWidth() {
return this.nativeElement ? this.nativeElement.dropDownMaxWidth : undefined;
}
set dropDownMaxWidth(value) {
this.nativeElement ? this.nativeElement.dropDownMaxWidth = value : undefined;
}
/** @description Sets the minimum Height of the drop down. By default it's set to an empty string. In this case the minHeight of the drop down is controlled by a CSS variable. */
get dropDownMinHeight() {
return this.nativeElement ? this.nativeElement.dropDownMinHeight : undefined;
}
set dropDownMinHeight(value) {
this.nativeElement ? this.nativeElement.dropDownMinHeight = value : undefined;
}
/** @description Sets the minimum Width of the drop down. By default it's set to an empty string. In this case the minWidth of the drop down is controlled by a CSS variable. */
get dropDownMinWidth() {
return this.nativeElement ? this.nativeElement.dropDownMinWidth : undefined;
}
set dropDownMinWidth(value) {
this.nativeElement ? this.nativeElement.dropDownMinWidth = value : undefined;
}
/** @description Determines how the drop down is going to open. */
get dropDownOpenMode() {
return this.nativeElement ? this.nativeElement.dropDownOpenMode : undefined;
}
set dropDownOpenMode(value) {
this.nativeElement ? this.nativeElement.dropDownOpenMode = value : undefined;
}
/** @description If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document. The purpose of the overlay is to make sure that clicking anywhere outside the drop down will will target the overlay and not the DOM. */
get dropDownOverlay() {
return this.nativeElement ? this.nativeElement.dropDownOverlay : undefined;
}
set dropDownOverlay(value) {
this.nativeElement ? this.nativeElement.dropDownOverlay = value : undefined;
}
/** @description Determines the placeholder for the drop down, displayed when there are no items in it. */
get dropDownPlaceholder() {
return this.nativeElement ? this.nativeElement.dropDownPlaceholder : undefined;
}
set dropDownPlaceholder(value) {
this.nativeElement ? this.nativeElement.dropDownPlaceholder = value : undefined;
}
/** @description Determines the position of the drop down when opened. */
get dropDownPosition() {
return this.nativeElement ? this.nativeElement.dropDownPosition : undefined;
}
set dropDownPosition(value) {
this.nativeElement ? this.nativeElement.dropDownPosition = value : undefined;
}
/** @description Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable. */
get dropDownWidth() {
return this.nativeElement ? this.nativeElement.dropDownWidth : undefined;
}
set dropDownWidth(value) {
this.nativeElement ? this.nativeElement.dropDownWidth = value : undefined;
}
/** @description Determines the behavior of the element when Escape key is pressed. */
get escKeyMode() {
return this.nativeElement ? this.nativeElement.escKeyMode : undefined;
}
set escKeyMode(value) {
this.nativeElement ? this.nativeElement.escKeyMode = value : undefined;
}
/** @description Specifies the behavior of "Enter" key. */
get enterKeyBehavior() {
return this.nativeElement ? this.nativeElement.enterKeyBehavior : undefined;
}
set enterKeyBehavior(value) {
this.nativeElement ? this.nativeElement.enterKeyBehavior = value : undefined;
}
/** @description The form element that the element is associated with (its "form owner"). The value of the attribute must be the ID of a form element in the same document. */
get form() {
return this.nativeElement ? this.nativeElement.form : undefined;
}
set form(value) {
this.nativeElement ? this.nativeElement.form = value : undefined;
}
/** @description Sets additional helper text below the element. The hint is visible only when the element is focused. */
get hint() {
return this.nativeElement ? this.nativeElement.hint : undefined;
}
set hint(value) {
this.nativeElement ? this.nativeElement.hint = value : undefined;
}
/** @description Determines the visibility of the horizontal Scroll bar thats inside the drop down. */
get horizontalScrollBarVisibility() {
return this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility : undefined;
}
set horizontalScrollBarVisibility(value) {
this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility = value : undefined;
}
/** @description Represents the property name of a List item. Determines the value of the input when a ListItem is selected. Usefull in cases where the user wants to display for example the value of an item instead of it's label. By default the label is displayed in the input. */
get inputMember() {
return this.nativeElement ? this.nativeElement.inputMember : undefined;
}
set inputMember(value) {
this.nativeElement ? this.nativeElement.inputMember = value : undefined;
}
/** @description Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc. */
get inputPurpose() {
return this.nativeElement ? this.nativeElement.inputPurpose : undefined;
}
set inputPurpose(value) {
this.nativeElement ? this.nativeElement.inputPurpose = value : undefined;
}
/** @description Sets the height for all list items. Used only when virtualization is enabled. */
get itemHeight() {
return this.nativeElement ? this.nativeElement.itemHeight : undefined;
}
set itemHeight(value) {
this.nativeElement ? this.nativeElement.itemHeight = value : undefined;
}
/** @description Determines the item width measuring algorithm. */
get itemMeasureMode() {
return this.nativeElement ? this.nativeElement.itemMeasureMode : undefined;
}
set itemMeasureMode(value) {
this.nativeElement ? this.nativeElement.itemMeasureMode = value : undefined;
}
/** @description A getter that returns an array of all List items inside the drop down. */
get items() {
return this.nativeElement ? this.nativeElement.items : undefined;
}
set items(value) {
this.nativeElement ? this.nativeElement.items = value : undefined;
}
/** @description The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM. It's used to set a customize the content of the list items. */
get itemTemplate() {
return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
}
set itemTemplate(value) {
this.nativeElement ? this.nativeElement.itemTemplate = value : undefined;
}
/** @description Sets a little text label above the element. */
get label() {
return this.nativeElement ? this.nativeElement.label : undefined;
}
set label(value) {
this.nativeElement ? this.nativeElement.label = value : undefined;
}
/** @description Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom. */
get loadingIndicatorPlaceholder() {
return this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder : undefined;
}
set loadingIndicatorPlaceholder(value) {
this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder = value : undefined;
}
/** @description Determines the position of the loading indicator. */
get loadingIndicatorPosition() {
return this.nativeElement ? this.nativeElement.loadingIndicatorPosition : undefined;
}
set loadingIndicatorPosition(value) {
this.nativeElement ? this.nativeElement.loadingIndicatorPosition = value : undefined;
}
/** @description Sets or gets the license which unlocks the product. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets the maximum number of characters that the user can enter. */
get maxLength() {
return this.nativeElement ? this.nativeElement.maxLength : undefined;
}
set maxLength(value) {
this.nativeElement ? this.nativeElement.maxLength = value : undefined;
}
/** @description Sets or gets the minimum number of characters that the user have to enter to trigger the auto complete functionality. */
get minLength() {
return this.nativeElement ? this.nativeElement.minLength : undefined;
}
set minLength(value) {
this.nativeElement ? this.nativeElement.minLength = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the name attribute for the element. Name is used when submiting HTML forms. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Determines whether the drop down is opened or closed */
get opened() {
return this.nativeElement ? this.nativeElement.opened : undefined;
}
set opened(value) {
this.nativeElement ? this.nativeElement.opened = value : undefined;
}
/** @description Determines the input's placeholder. */
get placeholder() {
return this.nativeElement ? this.nativeElement.placeholder : undefined;
}
set placeholder(value) {
this.nativeElement ? this.nativeElement.placeholder = value : undefined;
}
/** @description Disables user interaction with the element. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies that the user must fill the input before submitting a form with the element. */
get required() {
return this.nativeElement ? this.nativeElement.required : undefined;
}
set required(value) {
this.nativeElement ? this.nativeElement.required = value : undefined;
}
/** @description Specifies the message that will appear if required is set and no value is provided in the input. */
get requiredMessage() {
return this.nativeElement ? this.nativeElement.requiredMessage : undefined;
}
set requiredMessage(value) {
this.nativeElement ? this.nativeElement.requiredMessage = value : undefined;
}
/** @description Determines whether the content of the input will be selected on focus or not. */
get selectAllOnFocus() {
return this.nativeElement ? this.nativeElement.selectAllOnFocus : undefined;
}
set selectAllOnFocus(value) {
this.nativeElement ? this.nativeElement.selectAllOnFocus = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description If is set to true, the element cannot be focused. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Sets or gets the value of the element. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Determines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items. */
get valueMember() {
return this.nativeElement ? this.nativeElement.valueMember : undefined;
}
set valueMember(value) {
this.nativeElement ? this.nativeElement.valueMember = value : undefined;
}
/** @description Determines the visibility of the vertical scroll bar that's inside the drop down. */
get verticalScrollBarVisibility() {
return this.nativeElement ? this.nativeElement.verticalScrollBarVisibility : undefined;
}
set verticalScrollBarVisibility(value) {
this.nativeElement ? this.nativeElement.verticalScrollBarVisibility = value : undefined;
}
/** @description Closes the drop down. The drop down is used only when auto complete is enabled.
*/
close() {
if (this.nativeElement.isRendered) {
this.nativeElement.close();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.close();
});
}
}
/** @description Opens the drop down. The drop down is used only when auto complete is enabled.
*/
open() {
if (this.nativeElement.isRendered) {
this.nativeElement.open();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.open();
});
}
}
/** @description The method is used to reset the input back to it's initial value.
*/
reset() {
if (this.nativeElement.isRendered) {
this.nativeElement.reset();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.reset();
});
}
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
get ngValue() {
if (!this.nativeElement) {
return null;
}
const value = this.nativeElement.value;
return value;
}
set ngValue(value) {
if (this.nativeElement) {
this.writeValue(value);
}
}
writeValue(value) {
const that = this;
const normalizedValue = value == null ? '' : value;
that.nativeElement.whenRendered(() => {
that.value = normalizedValue;
if (that._initialChange === false) {
that._onChange(that.value);
}
});
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
that.eventHandlers['changingHandler'] = (event) => { that.onChanging.emit(event); };
that.nativeElement.addEventListener('changing', that.eventHandlers['changingHandler']);
that.eventHandlers['changeModelHandler'] = (event) => {
that._initialChange = false;
that._onChange(that.nativeElement.value);
};
that.eventHandlers['blurModelHandler'] = (event) => {
that._onTouched();
};
that.nativeElement.whenRendered(() => {
if (that.nativeElement.querySelector('input')) {
that.eventHandlers['keyupModelHandler'] = (event) => {
setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50);
};
that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
});
that.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);
that.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['changeHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
}
if (that.eventHandlers['changingHandler']) {
that.nativeElement.removeEventListener('changing', that.eventHandlers['changingHandler']);
}
if (that.eventHandlers['changeModelHandler']) {
that.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']);
if (that.nativeElement.querySelector('input')) {
that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']);
}
}
if (that.eventHandlers['blurModelHandler']) {
that.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']);
}
}
}
TextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
TextBoxComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: TextBoxComponent, selector: "smart-text-box, [smart-text-box]", inputs: { animation: "animation", autoFocus: "autoFocus", autoComplete: "autoComplete", autoCompleteDelay: "autoCompleteDelay", dataSource: "dataSource", disabled: "disabled", displayLoadingIndicator: "displayLoadingIndicator", displayMember: "displayMember", displayMode: "displayMode", dropDownAppendTo: "dropDownAppendTo", dropDownHeight: "dropDownHeight", dropDownMaxHeight: "dropDownMaxHeight", dropDownMaxWidth: "dropDownMaxWidth", dropDownMinHeight: "dropDownMinHeight", dropDownMinWidth: "dropDownMinWidth", dropDownOpenMode: "dropDownOpenMode", dropDownOverlay: "dropDownOverlay", dropDownPlaceholder: "dropDownPlaceholder", dropDownPosition: "dropDownPosition", dropDownWidth: "dropDownWidth", escKeyMode: "escKeyMode", enterKeyBehavior: "enterKeyBehavior", form: "form", hint: "hint", horizontalScrollBarVisibility: "horizontalScrollBarVisibility", inputMember: "inputMember", inputPurpose: "inputPurpose", itemHeight: "itemHeight", itemMeasureMode: "itemMeasureMode", items: "items", itemTemplate: "itemTemplate", label: "label", loadingIndicatorPlaceholder: "loadingIndicatorPlaceholder", loadingIndicatorPosition: "loadingIndicatorPosition", license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", maxLength: "maxLength", minLength: "minLength", messages: "messages", name: "name", opened: "opened", placeholder: "placeholder", readonly: "readonly", rightToLeft: "rightToLeft", required: "required", requiredMessage: "requiredMessage", selectAllOnFocus: "selectAllOnFocus", theme: "theme", unfocusable: "unfocusable", value: "value", valueMember: "valueMember", verticalScrollBarVisibility: "verticalScrollBarVisibility" }, outputs: { onChange: "onChange", onChanging: "onChanging" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-text-box"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-text-box', selector: 'smart-text-box, [smart-text-box]',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { animation: [{
type: Input
}], autoFocus: [{
type: Input
}], autoComplete: [{
type: Input
}], autoCompleteDelay: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], displayLoadingIndicator: [{
type: Input
}], displayMember: [{
type: Input
}], displayMode: [{
type: Input
}], dropDownAppendTo: [{
type: Input
}], dropDownHeight: [{
type: Input
}], dropDownMaxHeight: [{
type: Input
}], dropDownMaxWidth: [{
type: Input
}], dropDownMinHeight: [{
type: Input
}], dropDownMinWidth: [{
type: Input
}], dropDownOpenMode: [{
type: Input
}], dropDownOverlay: [{
type: Input
}], dropDownPlaceholder: [{
type: Input
}], dropDownPosition: [{
type: Input
}], dropDownWidth: [{
type: Input
}], escKeyMode: [{
type: Input
}], enterKeyBehavior: [{
type: Input
}], form: [{
type: Input
}], hint: [{
type: Input
}], horizontalScrollBarVisibility: [{
type: Input
}], inputMember: [{
type: Input
}], inputPurpose: [{
type: Input
}], itemHeight: [{
type: Input
}], itemMeasureMode: [{
type: Input
}], items: [{
type: Input
}], itemTemplate: [{
type: Input
}], label: [{
type: Input
}], loadingIndicatorPlaceholder: [{
type: Input
}], loadingIndicatorPosition: [{
type: Input
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], maxLength: [{
type: Input
}], minLength: [{
type: Input
}], messages: [{
type: Input
}], name: [{
type: Input
}], opened: [{
type: Input
}], placeholder: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], required: [{
type: Input
}], requiredMessage: [{
type: Input
}], selectAllOnFocus: [{
type: Input
}], theme: [{
type: Input
}], unfocusable: [{
type: Input
}], value: [{
type: Input
}], valueMember: [{
type: Input
}], verticalScrollBarVisibility: [{
type: Input
}], onChange: [{
type: Output
}], onChanging: [{
type: Output
}] } });
class ListItemComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-list-item');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description */
get alternationIndex() {
return this.nativeElement ? this.nativeElement.alternationIndex : undefined;
}
set alternationIndex(value) {
this.nativeElement ? this.nativeElement.alternationIndex = value : undefined;
}
/** @description */
get color() {
return this.nativeElement ? this.nativeElement.color : undefined;
}
set color(value) {
this.nativeElement ? this.nativeElement.color = value : undefined;
}
/** @description */
get displayMode() {
return this.nativeElement ? this.nativeElement.displayMode : undefined;
}
set displayMode(value) {
this.nativeElement ? this.nativeElement.displayMode = value : undefined;
}
/** @description */
get grouped() {
return this.nativeElement ? this.nativeElement.grouped : undefined;
}
set grouped(value) {
this.nativeElement ? this.nativeElement.grouped = value : undefined;
}
/** @description */
get selected() {
return this.nativeElement ? this.nativeElement.selected : undefined;
}
set selected(value) {
this.nativeElement ? this.nativeElement.selected = value : undefined;
}
/** @description */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description */
get label() {
return this.nativeElement ? this.nativeElement.label : undefined;
}
set label(value) {
this.nativeElement ? this.nativeElement.label = value : undefined;
}
/** @description */
get details() {
return this.nativeElement ? this.nativeElement.details : undefined;
}
set details(value) {
this.nativeElement ? this.nativeElement.details = value : undefined;
}
/** @description */
get group() {
return this.nativeElement ? this.nativeElement.group : undefined;
}
set group(value) {
this.nativeElement ? this.nativeElement.group = value : undefined;
}
/** @description */
get hidden() {
return this.nativeElement ? this.nativeElement.hidden : undefined;
}
set hidden(value) {
this.nativeElement ? this.nativeElement.hidden = value : undefined;
}
/** @description */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
}
ngOnDestroy() { }
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
}
ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListItemComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ListItemComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ListItemComponent, selector: "smart-list-item, [smart-list-item]", inputs: { alternationIndex: "alternationIndex", color: "color", displayMode: "displayMode", grouped: "grouped", selected: "selected", value: "value", label: "label", details: "details", group: "group", hidden: "hidden", readonly: "readonly" }, exportAs: ["smart-list-item"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListItemComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-list-item', selector: 'smart-list-item, [smart-list-item]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { alternationIndex: [{
type: Input
}], color: [{
type: Input
}], displayMode: [{
type: Input
}], grouped: [{
type: Input
}], selected: [{
type: Input
}], value: [{
type: Input
}], label: [{
type: Input
}], details: [{
type: Input
}], group: [{
type: Input
}], hidden: [{
type: Input
}], readonly: [{
type: Input
}] } });
class ListItemsGroupComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-list-items-group');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description */
get label() {
return this.nativeElement ? this.nativeElement.label : undefined;
}
set label(value) {
this.nativeElement ? this.nativeElement.label = value : undefined;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
}
ngOnDestroy() { }
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
}
ListItemsGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListItemsGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ListItemsGroupComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ListItemsGroupComponent, selector: "smart-list-items-group, [smart-list-items-group]", inputs: { label: "label" }, exportAs: ["smart-list-items-group"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListItemsGroupComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-list-items-group', selector: 'smart-list-items-group, [smart-list-items-group]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
type: Input
}] } });
class TextBoxModule {
}
TextBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
TextBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxModule, declarations: [TextBoxComponent, ListItemComponent, ListItemsGroupComponent], exports: [TextBoxComponent, ListItemComponent, ListItemsGroupComponent] });
TextBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: TextBoxModule, decorators: [{
type: NgModule,
args: [{
declarations: [TextBoxComponent, ListItemComponent, ListItemsGroupComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [TextBoxComponent, ListItemComponent, ListItemsGroupComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ListItemComponent, ListItemsGroupComponent, Smart, TextBoxComponent, TextBoxModule };
//# sourceMappingURL=smart-webcomponents-angular-textbox.mjs.map