smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
716 lines (708 loc) • 41.6 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.input';
import { __awaiter } from 'tslib';
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(() => InputComponent),
multi: true
};
class InputComponent 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 whenever the user changes the current selection, such as selecting different text, items, or options within the interface. It provides an opportunity to respond dynamically to user interactions involving selection changes.
* @param event. The custom event. Custom event was created with: event.detail( label, oldLabel, oldValue, value)
* label - The label of the new selected item.
* oldLabel - The label of the item that was previously selected before the event was triggered.
* oldValue - The value of the item that was previously selected before the event was triggered.
* value - The value of the new selected item.
*/
this.onChange = new EventEmitter();
/** @description This event is triggered whenever the user releases a key (keyup) while typing in the Input field, but only if the input’s value has actually changed since the last event.
* @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();
/** @description This event is triggered immediately when the popup component becomes visible to the user, signaling that the popup has been successfully opened and rendered in the DOM. It can be used to execute custom logic or initialize content whenever the popup appears.
* @param event. The custom event. */
this.onOpen = new EventEmitter();
/** @description This event is triggered immediately when the popup window is closed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to execute cleanup tasks, update application state, or respond to the closure of the popup.
* @param event. The custom event. */
this.onClose = new EventEmitter();
/** @description This event is triggered whenever a user selects (clicks on) an item within the popup list. It allows you to respond to user interactions by executing specific logic or actions when a particular popup list item is chosen.
* @param event. The custom event. Custom event was created with: event.detail( item, label, value)
* item - The item that was clicked.
* label - The label of the item that was clicked.
* value - The value of the item that was clicked.
*/
this.onItemClick = 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-input');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching suggestions after the user interacts with the autocomplete input. This delay helps control how quickly the dropdown appears, improving user experience by preventing it from opening too rapidly as users type. */
get autoCompleteDelay() {
return this.nativeElement ? this.nativeElement.autoCompleteDelay : undefined;
}
set autoCompleteDelay(value) {
this.nativeElement ? this.nativeElement.autoCompleteDelay = value : undefined;
}
/** @description Specifies the data source that will be used to populate the Input component. The dataSource property accepts multiple formats:- 'Array of Primitives:' An array of strings or numbers, where each element represents a single list item.- 'Array of Objects:' An array of objects, where each object defines the properties of a list item. The recognized fields for each item object include: - label (string): The display text for the item. - value (string | number): The underlying value associated with the item. - selected (boolean): Indicates whether the item is initially selected. - prefix (string): HTML content to display before the label. - suffix (string): HTML content to display after the label. - title (string): Additional descriptive text, typically used for tooltips.- 'Callback Function:' A function that returns an array of items in either of the formats described above, allowing for dynamic or asynchronous data loading.The prefix and suffix fields can contain HTML, which is rendered respectively before and after the item's label. This allows for additional icons, badges, or formatting as needed to enhance the list item's visual presentation. */
get dataSource() {
return this.nativeElement ? this.nativeElement.dataSource : undefined;
}
set dataSource(value) {
this.nativeElement ? this.nativeElement.dataSource = value : undefined;
}
/** @description Controls whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When disabled, the element cannot be interacted with or triggered by the user. */
get disabled() {
return this.nativeElement ? this.nativeElement.disabled : undefined;
}
set disabled(value) {
this.nativeElement ? this.nativeElement.disabled = value : undefined;
}
/** @description Allows you to specify extra CSS class names that will be applied to the Input dropdown element, enabling custom styling or theming beyond the default classes. */
get dropDownClassList() {
return this.nativeElement ? this.nativeElement.dropDownClassList : undefined;
}
set dropDownClassList(value) {
this.nativeElement ? this.nativeElement.dropDownClassList = value : undefined;
}
/** @description Specifies the placement of the dropdown button relative to its container or trigger element, such as positioning it above, below, to the left, or to the right. This affects where the dropdown appears on the user interface when activated. */
get dropDownButtonPosition() {
return this.nativeElement ? this.nativeElement.dropDownButtonPosition : undefined;
}
set dropDownButtonPosition(value) {
this.nativeElement ? this.nativeElement.dropDownButtonPosition = value : undefined;
}
/** @description Specifies the placement of the dropdown menu relative to its trigger element when opened, such as above, below, left, or right. */
get dropDownOpenPosition() {
return this.nativeElement ? this.nativeElement.dropDownOpenPosition : undefined;
}
set dropDownOpenPosition(value) {
this.nativeElement ? this.nativeElement.dropDownOpenPosition = value : undefined;
}
/** @description Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. To override the default behavior and set a custom height, assign a specific value (such as "200px" or "50%") to this property. If left unset, the component relies on the CSS variable to control its height. */
get dropDownHeight() {
return this.nativeElement ? this.nativeElement.dropDownHeight : undefined;
}
set dropDownHeight(value) {
this.nativeElement ? this.nativeElement.dropDownHeight = value : undefined;
}
/** @description Defines the width of the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's width is determined by a corresponding CSS variable, allowing you to control its sizing through your stylesheet. To specify a fixed width, provide a valid CSS width value (e.g., "200px", "100%"). If not specified, the component will fallback to the CSS variable for its width. */
get dropDownWidth() {
return this.nativeElement ? this.nativeElement.dropDownWidth : undefined;
}
set dropDownWidth(value) {
this.nativeElement ? this.nativeElement.dropDownWidth = value : undefined;
}
/** @description Specifies the purpose of the input field and instructs the browser on both the type of data expected and the level of permission granted to automatically assist the user in filling out the form element. This property directly maps to the standard HTML autocomplete attribute, which helps improve user experience by enabling browsers to suggest or autofill relevant data, such as a user’s name, organization, street address, and more. Common values include 'on' (enables autocomplete), 'off' (disables autocomplete), as well as context-specific tokens like 'name', 'email', 'organization', and 'street-address', among others. Using the appropriate value enhances form usability, accuracy, and accessibility. */
get inputPurpose() {
return this.nativeElement ? this.nativeElement.inputPurpose : undefined;
}
set inputPurpose(value) {
this.nativeElement ? this.nativeElement.inputPurpose = value : undefined;
}
/** @description Specifies the maximum number of matching items that will be displayed in the dropdown menu after a new auto-complete query is performed. By default, the dropdown will show up to 8 items. If the number of matched items exceeds this limit, only the first 8 results will be visible, and additional matches will not be shown unless this value is increased. */
get items() {
return this.nativeElement ? this.nativeElement.items : undefined;
}
set items(value) {
this.nativeElement ? this.nativeElement.items = value : undefined;
}
/** @description Retrieves or assigns the unlockKey value used to grant access to the product. The unlockKey serves as a security credential required to unlock and enable product functionality. */
get unlockKey() {
return this.nativeElement ? this.nativeElement.unlockKey : undefined;
}
set unlockKey(value) {
this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
}
/** @description Specifies or retrieves the current language setting, which determines the localization to be used for displaying content. This property works together with the messages property to select and present language-specific messages or text strings. Setting this property updates the language used throughout the interface, while getting the property returns the currently active language code (e.g., "en", "fr", "es"). */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify or structure localized messages before they are delivered to the application, such as adding context, adjusting placeholders, or applying additional formatting logic. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Defines or retrieves an object containing customizable text strings displayed by the widget, enabling localization for different languages and regions. This property works together with the locale property to allow the widget’s user interface labels, messages, and prompts to be easily translated and adapted for international audiences. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Specifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of matching items based on the user's input. */
get minLength() {
return this.nativeElement ? this.nativeElement.minLength : undefined;
}
set minLength(value) {
this.nativeElement ? this.nativeElement.minLength = value : undefined;
}
/** @description Sets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting data through an HTML form. It is used as the key for the form data sent to the server, allowing server-side scripts to access the corresponding value. */
get name() {
return this.nativeElement ? this.nativeElement.name : undefined;
}
set name(value) {
this.nativeElement ? this.nativeElement.name = value : undefined;
}
/** @description Indicates whether the dropdown menu is currently open (true) or closed (false). */
get opened() {
return this.nativeElement ? this.nativeElement.opened : undefined;
}
set opened(value) {
this.nativeElement ? this.nativeElement.opened = value : undefined;
}
/** @description Specifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about the expected input format or content. */
get placeholder() {
return this.nativeElement ? this.nativeElement.placeholder : undefined;
}
set placeholder(value) {
this.nativeElement ? this.nativeElement.placeholder = value : undefined;
}
/** @description Defines or retrieves the filter query used to determine which items are displayed. This query is utilized by the autoComplete operation to match and return relevant items from the data source. If the query is set to an empty string, no filtering is applied, and all available items from the data source are shown. */
get query() {
return this.nativeElement ? this.nativeElement.query : undefined;
}
set query(value) {
this.nativeElement ? this.nativeElement.query = value : undefined;
}
/** @description Specifies the autocomplete query mode, which defines how search suggestions are generated. This property controls the matching algorithm used during autocomplete operations, such as whether suggestions are based on prefix, infix, or exact matches within the input text. Adjusting this property allows you to tailor the autocomplete behavior to best suit your application's search experience. */
get queryMode() {
return this.nativeElement ? this.nativeElement.queryMode : undefined;
}
set queryMode(value) {
this.nativeElement ? this.nativeElement.queryMode = value : undefined;
}
/** @description Specifies whether the user can enter text directly into the input field. When dropDownButtonPosition is set to 'left' or 'right', the readonly property controls the behavior of the input when a dataSource is provided: If readonly is false, the element functions as a ComboBox, allowing users to either select an option from the dropdown or type their own input. If readonly is true, the element acts as a DropDownList, restricting user input to only the items available in the dataSource. */
get readonly() {
return this.nativeElement ? this.nativeElement.readonly : undefined;
}
set readonly(value) {
this.nativeElement ? this.nativeElement.readonly = value : undefined;
}
/** @description Specifies or retrieves whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content will display in a direction suitable for RTL locales, ensuring proper reading order and alignment for users of these languages. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Specifies whether the items should be arranged in alphabetical order. If enabled, the items will be sorted from A to Z based on their names; if disabled, the original order will be preserved. */
get sorted() {
return this.nativeElement ? this.nativeElement.sorted : undefined;
}
set sorted(value) {
this.nativeElement ? this.nativeElement.sorted = value : undefined;
}
/** @description Specifies the sorting order to use when sort is enabled. Accepts either asc for ascending order or desc for descending order. */
get sortDirection() {
return this.nativeElement ? this.nativeElement.sortDirection : undefined;
}
set sortDirection(value) {
this.nativeElement ? this.nativeElement.sortDirection = value : undefined;
}
/** @description Specifies the index of the currently selected item within a list or array. This value indicates which item is active or highlighted, typically starting from zero for the first item. */
get selectedIndex() {
return this.nativeElement ? this.nativeElement.selectedIndex : undefined;
}
set selectedIndex(value) {
this.nativeElement ? this.nativeElement.selectedIndex = value : undefined;
}
/** @description Specifies the currently selected value from the available options. This property indicates which option is active or chosen by the user within the component. */
get selectedValue() {
return this.nativeElement ? this.nativeElement.selectedValue : undefined;
}
set selectedValue(value) {
this.nativeElement ? this.nativeElement.selectedValue = value : undefined;
}
/** @description Specifies the visual theme applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, to ensure consistency with the application's design guidelines. */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
/** @description Specifies the type of input expected by the field. Setting the input type controls the kind of data users can enter (e.g., text, number, email, password), impacts the on-screen keyboard on mobile devices, and enables input validation based on the chosen type. */
get type() {
return this.nativeElement ? this.nativeElement.type : undefined;
}
set type(value) {
this.nativeElement ? this.nativeElement.type = value : undefined;
}
/** @description When set to true, this property ensures that the element is not focusable and cannot receive keyboard or programmatic focus. */
get unfocusable() {
return this.nativeElement ? this.nativeElement.unfocusable : undefined;
}
set unfocusable(value) {
this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
}
/** @description Sets a new value for the element or retrieves its current value, depending on how the function is used. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Closes the currently open dropdown menu, hiding its options from view and reverting the interface to its default state.
*/
close() {
if (this.nativeElement.isRendered) {
this.nativeElement.close();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.close();
});
}
}
/** @description Ensures that the currently selected item remains visible within the viewport by automatically scrolling the container as needed. This guarantees that users can always see the active item, even when navigating through a list with limited onscreen space.
*/
ensureVisible() {
if (this.nativeElement.isRendered) {
this.nativeElement.ensureVisible();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.ensureVisible();
});
}
}
/** @description Expands the dropdown menu to display all available options for user selection.
*/
open() {
if (this.nativeElement.isRendered) {
this.nativeElement.open();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.open();
});
}
}
/** @description Enhances user interaction by automatically focusing the input element and selecting its text. If the input is set to readonly, the element receives focus but its text is not selected, ensuring consistent behavior based on the input's state.
*/
select() {
if (this.nativeElement.isRendered) {
this.nativeElement.select();
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.select();
});
}
}
/** @description Selects an item from a data source based on its value. If your data source is a simple array of strings (e.g., `['Item 1', 'Item 2', 'Item 3']`), you can select an item by passing the exact string value, such as `'Item 1'`. If your data source is an array of objects with `label` and `value` properties (e.g., `[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]`), you should pass the corresponding `value` property (e.g., `1` for the first item) when calling `selectItem`. This method automatically locates and selects the item whose value matches the argument you provide, whether the values are strings or object properties.
* @param {string | number} value. The item's value when the item is an object or string when the item is a string item.
*/
selectItem(value) {
if (this.nativeElement.isRendered) {
this.nativeElement.selectItem(value);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.selectItem(value);
});
}
}
/** @description Retrieves an item from the data source by matching its value. For example, if your data source is an array of strings like ['Item 1', 'Item 2', 'Item 3'], you can retrieve an item by passing its exact string value, such as 'Item 1'. If your data source is an array of objects with properties such as { label: 'Item 1', value: 'item1' }, you should pass the specific value (e.g., 'item1') when calling selectItem. The method will return the corresponding item whose value matches the argument you provide.
* @param {string | number} value. The item's value when the item is an object or string when the item is a string item.
* @returns {any}
*/
getItem(value) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getItem(value);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getItemSync(value) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getItem(value);
}
return null;
}
/** @description Retrieves the currently selected item from the data source. - If your data source is a simple array of strings—such as `['Item 1', 'Item 2', 'Item 3']`—and the user selects the second item, this method will return `'Item 2'`.- If your data source is an array of objects with properties like `{ label, value }`, the method returns the `value` property of the selected object. For example, with a data source of `[ { label: 'First', value: 1 }, { label: 'Second', value: 2 } ]` and the user selects "Second", the method returns `2`.This ensures the method always returns the relevant value associated with the selected option, based on the structure of the data source.
* @param {string | number} value. The item's value when the item is an object or string when the item is a string item.
* @returns {any}
*/
getSelectedItem(value) {
return __awaiter(this, void 0, void 0, function* () {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getSelectedItem(value);
resolve(result);
});
});
};
const result = yield getResultOnRender();
return result;
});
}
getSelectedItemSync(value) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getSelectedItem(value);
}
return null;
}
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['openHandler'] = (event) => { that.onOpen.emit(event); };
that.nativeElement.addEventListener('open', that.eventHandlers['openHandler']);
that.eventHandlers['closeHandler'] = (event) => { that.onClose.emit(event); };
that.nativeElement.addEventListener('close', that.eventHandlers['closeHandler']);
that.eventHandlers['itemClickHandler'] = (event) => { that.onItemClick.emit(event); };
that.nativeElement.addEventListener('itemClick', that.eventHandlers['itemClickHandler']);
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['openHandler']) {
that.nativeElement.removeEventListener('open', that.eventHandlers['openHandler']);
}
if (that.eventHandlers['closeHandler']) {
that.nativeElement.removeEventListener('close', that.eventHandlers['closeHandler']);
}
if (that.eventHandlers['itemClickHandler']) {
that.nativeElement.removeEventListener('itemClick', that.eventHandlers['itemClickHandler']);
}
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']);
}
}
}
InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
InputComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: InputComponent, selector: "smart-input, [smart-input]", inputs: { autoCompleteDelay: "autoCompleteDelay", dataSource: "dataSource", disabled: "disabled", dropDownClassList: "dropDownClassList", dropDownButtonPosition: "dropDownButtonPosition", dropDownOpenPosition: "dropDownOpenPosition", dropDownHeight: "dropDownHeight", dropDownWidth: "dropDownWidth", inputPurpose: "inputPurpose", items: "items", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", minLength: "minLength", name: "name", opened: "opened", placeholder: "placeholder", query: "query", queryMode: "queryMode", readonly: "readonly", rightToLeft: "rightToLeft", sorted: "sorted", sortDirection: "sortDirection", selectedIndex: "selectedIndex", selectedValue: "selectedValue", theme: "theme", type: "type", unfocusable: "unfocusable", value: "value" }, outputs: { onChange: "onChange", onChanging: "onChanging", onOpen: "onOpen", onClose: "onClose", onItemClick: "onItemClick" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-input"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: InputComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-input', selector: 'smart-input, [smart-input]',
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { autoCompleteDelay: [{
type: Input
}], dataSource: [{
type: Input
}], disabled: [{
type: Input
}], dropDownClassList: [{
type: Input
}], dropDownButtonPosition: [{
type: Input
}], dropDownOpenPosition: [{
type: Input
}], dropDownHeight: [{
type: Input
}], dropDownWidth: [{
type: Input
}], inputPurpose: [{
type: Input
}], items: [{
type: Input
}], unlockKey: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], minLength: [{
type: Input
}], name: [{
type: Input
}], opened: [{
type: Input
}], placeholder: [{
type: Input
}], query: [{
type: Input
}], queryMode: [{
type: Input
}], readonly: [{
type: Input
}], rightToLeft: [{
type: Input
}], sorted: [{
type: Input
}], sortDirection: [{
type: Input
}], selectedIndex: [{
type: Input
}], selectedValue: [{
type: Input
}], theme: [{
type: Input
}], type: [{
type: Input
}], unfocusable: [{
type: Input
}], value: [{
type: Input
}], onChange: [{
type: Output
}], onChanging: [{
type: Output
}], onOpen: [{
type: Output
}], onClose: [{
type: Output
}], onItemClick: [{
type: Output
}] } });
class InputModule {
}
InputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: InputModule, declarations: [InputComponent], exports: [InputComponent] });
InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: InputModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: InputModule, decorators: [{
type: NgModule,
args: [{
declarations: [InputComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [InputComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { InputComponent, InputModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-input.mjs.map