
if (!window['Smart']) {
	window['Smart'] = { RenderMode: 'manual' };
}
else {
	window['Smart'].RenderMode = 'manual';
}
import './../source/modules/smart.listbox';

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(() => ListBoxComponent),
    multi: true
};
class ListBoxComponent 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 after the listbox has successfully finished binding its data source. At this point, all data items have been loaded and rendered in the listbox, making it ready for user interaction or further programmatic manipulation. Use this event to perform actions that depend on the completion of data binding, such as customizing item appearance, enabling controls, or initiating additional data processing.
        *  @param event. The custom event. 	*/
        this.onBindingComplete = new EventEmitter();
        /** @description This event is triggered whenever the user changes the current selection, such as when they select a different item from a list, dropdown, or any selectable element. It allows developers to respond dynamically to user input by detecting and handling selection changes in real time.
        *  @param event. The custom event. 	Custom event was created with: event.detail(	addedItems, 	disabled, 	index, 	label, 	removedItems, 	selected, 	value)
        *   addedItems - An array of List items that have been selected.
        *   disabled - A flag indicating whether or not the item that caused the change event is disabled.
        *   index - The index of the List item that triggered the event.
        *   label - The label of the List item that triggered the event.
        *   removedItems - An array of List items that have been unselected before the event was fired.
        *   selected - The selected state of the List item that triggered the event. If an item was selected the value will be true and vice versa.
        *   value - The value of the List item that triggered the event.
        */
        this.onChange = new EventEmitter();
        /** @description This event is fired when a user drops a draggable item onto a valid drop target. Within the event handler, you can call event.preventDefault() to cancel the default drop behavior, which allows you to define custom handling logic for the dropped item. This gives you full control over what should happen when an item is released on the target element.
        *  @param event. The custom event. 	Custom event was created with: event.detail(	container, 	data, 	item, 	originalEvent, 	previousContainer, 	target)
        *   container - The List box that an item was dragged <strong>to.</strong>
        *   data - An object that contains data about the dragging operation like start position, start time, etc.
        *   item - The List item that was dragged.
        *   originalEvent - That original event that was fired.
        *   previousContainer - The List box that an item was dragged <strong>from</strong>.
        *   target - The event target.
        */
        this.onDragEnd = new EventEmitter();
        /** @description This event is triggered whenever a user starts dragging a list item, providing an opportunity to handle custom logic—such as updating the UI or managing the item's state—during the drag operation.
        *  @param event. The custom event. 	Custom event was created with: event.detail(	data, 	item, 	originalEvent)
        *   data - An object that contains data about the dragging operation like start position, start time, etc.
        *   item - The List item that is being dragged. This is the item that has been clicked when initiating the drag operation
        *   originalEvent - The original event that initiates the dragging operation.
        */
        this.onDragging = new EventEmitter();
        /** @description This event is triggered whenever a user initiates and performs a drag action on an item. Within the event handler, you can call event.preventDefault() to cancel or prevent the default drag behavior. This allows you to override the standard dragging operation and implement custom drag-and-drop functionality as needed.
        *  @param event. The custom event. 	Custom event was created with: event.detail(	container, 	data, 	item, 	originalEvent, 	previousContainer, 	target)
        *   container - The List box that an item was dragged <strong>to.</strong>
        *   data - An object that contains data about the dragging oepration like start position, start time, etc.
        *   item - The List item that was dragged.
        *   originalEvent - That original event that was fired.
        *   previousContainer - The List box that an item was dragged <strong>from</strong>.
        *   target - The event target.
        */
        this.onDragStart = new EventEmitter();
        /** @description This event is triggered whenever a user clicks on an item within the component. It provides detailed information about the clicked item, such as its identifier and relevant data, enabling you to implement custom logic in response to user interactions.
        *  @param event. The custom event. 	Custom event was created with: event.detail(	disabled, 	index, 	label, 	selected, 	value)
        *   disabled - Indicates whether the List item that was clicked is disabled or not.
        *   index - Indicates the index of the List item that was clicked.
        *   label - The label of the List item that was clicked.
        *   selected - Indicates whether the List item that was clicked is selected or not.
        *   value - The value of the List item that was clicked.
        */
        this.onItemClick = new EventEmitter();
        /** @description This event is triggered immediately after an item has been modified and the changes have been saved. It allows you to respond to updates or modifications made to an item's data.
        *  @param event. The custom event. 	Custom event was created with: event.detail(	selected, 	disabled, 	index, 	label, 	value)
        *   selected - Indicates whether the List item is selected or not.
        *   disabled - Indicates whether the List item is disabled or not.
        *   index - The index of the List item that was edited.
        *   label - The label of the edited List item.
        *   value - The value of the List item that was edited.
        */
        this.onItemLabelChange = new EventEmitter();
        /** @description This event is triggered when the user scrolls to the bottom of the list, indicating that the end of the available items has been reached. It can be used to load additional data or perform actions when no more items are visible in the current list view.
        *  @param event. The custom event. 	*/
        this.onScrollBottomReached = new EventEmitter();
        /** @description This event is triggered when the user scrolls to the very top of the list, indicating that the first item in the list is visible or has been reached. It can be used to implement features such as loading previous items, displaying a refresh indicator, or updating the UI when the user navigates to the start of the list.
        *  @param event. The custom event. 	*/
        this.onScrollTopReached = new EventEmitter();
        /** @description This event is triggered when the user performs a leftward swipe gesture within the boundaries of the listBox component. It can be used to initiate actions such as revealing additional options, deleting a list item, or any other behavior that should occur in response to a left swipe inside the listBox.
        *  @param event. The custom event. 	*/
        this.onSwipeleft = new EventEmitter();
        /** @description This event is triggered when the user performs a rightward swipe gesture within the boundaries of the listBox component. It detects intentional swipe actions to the right, allowing developers to respond to user navigation or interaction within the listBox. The event will only fire if the swipe is initiated and completed inside the listBox area.
        *  @param event. The custom event. 	*/
        this.onSwiperight = 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-list-box');
        for (let propertyName in properties) {
            this.nativeElement[propertyName] = properties[propertyName];
        }
        return this.nativeElement;
    }
    /** @description Controls whether users can drag items out of the List box. When enabled, users can drag and move list items, except for those marked as disabled. Disabled items remain fixed and cannot be dragged or moved by the user. */
    get allowDrag() {
        return this.nativeElement ? this.nativeElement.allowDrag : undefined;
    }
    set allowDrag(value) {
        this.nativeElement ? this.nativeElement.allowDrag = value : undefined;
    }
    /** @description Controls whether users can drag and drop list items into the target ListBox. When enabled, items can be dropped into the ListBox; when disabled, dropping items is not permitted. */
    get allowDrop() {
        return this.nativeElement ? this.nativeElement.allowDrop : undefined;
    }
    set allowDrop(value) {
        this.nativeElement ? this.nativeElement.allowDrop = value : undefined;
    }
    /** @description Specifies how many times the row colors alternate, controlling the pattern and frequency of color changes applied to rows in a table or list. This helps customize the visual distinction between adjacent rows. */
    get alternationCount() {
        return this.nativeElement ? this.nativeElement.alternationCount : undefined;
    }
    set alternationCount(value) {
        this.nativeElement ? this.nativeElement.alternationCount = value : undefined;
    }
    /** @description Specifies the last row index up to which alternating row colors are applied. Rows after this index will no longer display color alternations. */
    get alternationEnd() {
        return this.nativeElement ? this.nativeElement.alternationEnd : undefined;
    }
    set alternationEnd(value) {
        this.nativeElement ? this.nativeElement.alternationEnd = value : undefined;
    }
    /** @description Specifies the initial row index from which color alternation begins, determining where the alternating row colors pattern is applied in the table. */
    get alternationStart() {
        return this.nativeElement ? this.nativeElement.alternationStart : undefined;
    }
    set alternationStart(value) {
        this.nativeElement ? this.nativeElement.alternationStart = value : undefined;
    }
    /** @description Specifies the animation mode for the element. You can retrieve the current animation mode or set a new one by assigning a value to this property. When set to 'none', all animations are disabled. To enable different animation effects, assign one of the supported animation mode values other than 'none'. */
    get animation() {
        return this.nativeElement ? this.nativeElement.animation : undefined;
    }
    set animation(value) {
        this.nativeElement ? this.nativeElement.animation = value : undefined;
    }
    /** @description Controls whether automatic sorting is performed. When autoSort is set to true, the element will automatically re-sort itself whenever its data changes. If sorted is enabled but autoSort is set to false, the element will only be sorted once (typically on initialization) and will not automatically update its order in response to subsequent data changes. */
    get autoSort() {
        return this.nativeElement ? this.nativeElement.autoSort : undefined;
    }
    set autoSort(value) {
        this.nativeElement ? this.nativeElement.autoSort = value : undefined;
    }
    /** @description Specifies the source of data to populate the ListBox. The dataSource can be provided in several formats:- An array of strings or numbers, where each item represents a single ListBox entry.- An array of objects, where each object defines the properties of a ListBox item, such as label (the displayed text), value (the underlying value), and group (used for grouping items).- A callback function that returns an array of items in either of the formats described above.Using these options, you can flexibly supply data from static arrays or dynamically generate the list items as needed. */
    get dataSource() {
        return this.nativeElement ? this.nativeElement.dataSource : undefined;
    }
    set dataSource(value) {
        this.nativeElement ? this.nativeElement.dataSource = value : undefined;
    }
    /** @description Determines whether the list box is active and can be interacted with by the user. When enabled, users can select items from the list box; when disabled, the list box appears grayed out and does not respond to user input. */
    get disabled() {
        return this.nativeElement ? this.nativeElement.disabled : undefined;
    }
    set disabled(value) {
        this.nativeElement ? this.nativeElement.disabled = value : undefined;
    }
    /** @description Specifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data or loading items from a remote source. */
    get displayLoadingIndicator() {
        return this.nativeElement ? this.nativeElement.displayLoadingIndicator : undefined;
    }
    set displayLoadingIndicator(value) {
        this.nativeElement ? this.nativeElement.displayLoadingIndicator = value : undefined;
    }
    /** @description Defines or retrieves the displayMember property, which specifies the name of the object property to be shown in the UI for each item in the data source. The specified name should match a key present in the objects within the collection assigned to the 'dataSource' property. This allows you to control which property value is displayed for each item when rendering data-bound lists or dropdowns. */
    get displayMember() {
        return this.nativeElement ? this.nativeElement.displayMember : undefined;
    }
    set displayMember(value) {
        this.nativeElement ? this.nativeElement.displayMember = value : undefined;
    }
    /** @description A callback function that allows you to customize the HTML markup displayed as visual feedback while an item is being dragged. This function receives a single parameter representing the item currently being dragged, enabling you to tailor the appearance of the drag feedback element based on its properties or content. */
    get dragFeedbackFormatFunction() {
        return this.nativeElement ? this.nativeElement.dragFeedbackFormatFunction : undefined;
    }
    set dragFeedbackFormatFunction(value) {
        this.nativeElement ? this.nativeElement.dragFeedbackFormatFunction = value : undefined;
    }
    /** @description Specifies the position offset of the drag feedback element relative to the mouse cursor during a drag operation. This property takes an array with two values: the first value sets the horizontal offset (in pixels), and the second value sets the vertical offset (in pixels). These offsets determine how far the feedback element is displayed from the cursor while dragging an item. */
    get dragOffset() {
        return this.nativeElement ? this.nativeElement.dragOffset : undefined;
    }
    set dragOffset(value) {
        this.nativeElement ? this.nativeElement.dragOffset = value : undefined;
    }
    /** @description Specifies the actions or behavior that are triggered when an item is released or dropped during a drag-and-drop operation. This may include updating the interface, modifying data structures, or invoking specific callback functions associated with the drop event. */
    get dropAction() {
        return this.nativeElement ? this.nativeElement.dropAction : undefined;
    }
    set dropAction(value) {
        this.nativeElement ? this.nativeElement.dropAction = value : undefined;
    }
    /** @description Specifies whether list items are editable. When this option is enabled, users can modify items in the list by either double-clicking on a non-disabled item or by selecting the item and pressing the F2 key. Disabled items remain uneditable regardless of this setting. */
    get editable() {
        return this.nativeElement ? this.nativeElement.editable : undefined;
    }
    set editable(value) {
        this.nativeElement ? this.nativeElement.editable = value : undefined;
    }
    /** @description Specifies whether users can filter the items in the list. When enabled, a filter input field appears at the top of the list box, allowing users to quickly search and narrow down the displayed items based on their input. If disabled, the entire list is shown without any filtering option. */
    get filterable() {
        return this.nativeElement ? this.nativeElement.filterable : undefined;
    }
    set filterable(value) {
        this.nativeElement ? this.nativeElement.filterable = value : undefined;
    }
    /** @description A callback function that must return a condition (typically a boolean value) used to determine whether each item should be included when filtering the list. This function is called for every item and is intended for use when the filterMode is set to 'custom', allowing you to define your own filtering logic beyond the default behavior. */
    get filterCallback() {
        return this.nativeElement ? this.nativeElement.filterCallback : undefined;
    }
    set filterCallback(value) {
        this.nativeElement ? this.nativeElement.filterCallback = value : undefined;
    }
    /** @description Specifies which filtering mode is applied to the data set, controlling how items are included or excluded based on defined criteria. */
    get filterMode() {
        return this.nativeElement ? this.nativeElement.filterMode : undefined;
    }
    set filterMode(value) {
        this.nativeElement ? this.nativeElement.filterMode = value : undefined;
    }
    /** @description Specifies the placeholder text that appears inside the filter input field, guiding users on what to enter or search for. */
    get filterInputPlaceholder() {
        return this.nativeElement ? this.nativeElement.filterInputPlaceholder : undefined;
    }
    set filterInputPlaceholder(value) {
        this.nativeElement ? this.nativeElement.filterInputPlaceholder = value : undefined;
    }
    /** @description When enabled, this option organizes the items into groups based on the first letter of each item's value. Note: This setting is incompatible with data sources that are already grouped; it can only be used when the dataSource does not contain predefined groupings. */
    get grouped() {
        return this.nativeElement ? this.nativeElement.grouped : undefined;
    }
    set grouped(value) {
        this.nativeElement ? this.nativeElement.grouped = value : undefined;
    }
    /** @description Specifies the property name within the dataSource object that will be used to group the items in the ListBox. If this property is not set, the component defaults to using the 'group' attribute from each data item for grouping purposes. The groupMember property is particularly useful when loading data from a JSON file as the dataSource and you need to group items based on a specific custom property, rather than the default 'group' property. This allows for flexible and customized grouping behavior based on the structure of your data. */
    get groupMember() {
        return this.nativeElement ? this.nativeElement.groupMember : undefined;
    }
    set groupMember(value) {
        this.nativeElement ? this.nativeElement.groupMember = value : undefined;
    }
    /** @description Controls whether the horizontal scroll bar is displayed, allowing users to scroll content left and right when it overflows the container. */
    get horizontalScrollBarVisibility() {
        return this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility : undefined;
    }
    set horizontalScrollBarVisibility(value) {
        this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility = value : undefined;
    }
    /** @description The 'IncrementalSearchDelay' property defines the amount of time, in milliseconds, that the system waits after the user stops typing before clearing the previous search query. This delay timer begins as soon as the user ceases input. Only after the specified delay has fully elapsed will the previous search query be reset, allowing a new search query to be initiated. This property helps control the responsiveness of incremental search operations, preventing premature query resets while the user is still entering input. */
    get incrementalSearchDelay() {
        return this.nativeElement ? this.nativeElement.incrementalSearchDelay : undefined;
    }
    set incrementalSearchDelay(value) {
        this.nativeElement ? this.nativeElement.incrementalSearchDelay = value : undefined;
    }
    /** @description Sets or retrieves the current incremental search mode. By default, incremental search is enabled, allowing users to begin searching by typing while the ListBox is focused. This mode enables real-time filtering or selection as the user types, making it easier to quickly find items in the list. */
    get incrementalSearchMode() {
        return this.nativeElement ? this.nativeElement.incrementalSearchMode : undefined;
    }
    set incrementalSearchMode(value) {
        this.nativeElement ? this.nativeElement.incrementalSearchMode = value : undefined;
    }
    /** @description Specifies the height, in pixels, for each item within the list box when virtualization is enabled. This property is required for correct rendering and performance optimizations during virtualization. It ensures each list item is allocated sufficient space and enables efficient scrolling and item measurement. */
    get itemHeight() {
        return this.nativeElement ? this.nativeElement.itemHeight : undefined;
    }
    set itemHeight(value) {
        this.nativeElement ? this.nativeElement.itemHeight = value : undefined;
    }
    /** @description Specifies the algorithm used to calculate the width of each item. This setting determines how the item width is measured, such as using fixed values, automatic sizing based on content, or percentage-based calculations. */
    get itemMeasureMode() {
        return this.nativeElement ? this.nativeElement.itemMeasureMode : undefined;
    }
    set itemMeasureMode(value) {
        this.nativeElement ? this.nativeElement.itemMeasureMode = value : undefined;
    }
    /** @description A read-only property that retrieves an array containing all the items currently present in the ListBox. Each element in the array represents a distinct item from the ListBox, preserving their order as displayed. */
    get items() {
        return this.nativeElement ? this.nativeElement.items : undefined;
    }
    set items(value) {
        this.nativeElement ? this.nativeElement.items = value : undefined;
    }
    /** @description A string specifying either the ID of an HTMLTemplateElement present in the DOM or a direct reference to the template element itself. This property allows you to define a custom template for rendering individual list items, enabling flexible and reusable item layouts within the component. */
    get itemTemplate() {
        return this.nativeElement ? this.nativeElement.itemTemplate : undefined;
    }
    set itemTemplate(value) {
        this.nativeElement ? this.nativeElement.itemTemplate = value : undefined;
    }
    /** @description Specifies the text to be displayed alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the component. This text provides contextual feedback to users during loading operations. */
    get loadingIndicatorPlaceholder() {
        return this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder : undefined;
    }
    set loadingIndicatorPlaceholder(value) {
        this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder = value : undefined;
    }
    /** @description Specifies the placement of the loading indicator within the user interface, such as at the top, center, or bottom of the container or screen. This property controls where the loading spinner or progress bar will appear while content is being loaded. */
    get loadingIndicatorPosition() {
        return this.nativeElement ? this.nativeElement.loadingIndicatorPosition : undefined;
    }
    set loadingIndicatorPosition(value) {
        this.nativeElement ? this.nativeElement.loadingIndicatorPosition = value : undefined;
    }
    /** @description Gets or sets the unlockKey property, a unique code required to unlock access to the product. This key is used for product activation or to enable restricted features. */
    get unlockKey() {
        return this.nativeElement ? this.nativeElement.unlockKey : undefined;
    }
    set unlockKey(value) {
        this.nativeElement ? this.nativeElement.unlockKey = value : undefined;
    }
    /** @description Specifies or retrieves the language code to be used for message localization. This property determines which set of messages from the messages object will be displayed, enabling support for multiple languages and dynamic language switching in your application. */
    get locale() {
        return this.nativeElement ? this.nativeElement.locale : undefined;
    }
    set locale(value) {
        this.nativeElement ? this.nativeElement.locale = value : undefined;
    }
    /** @description A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify how localized messages are structured or displayed before they are rendered to the user. */
    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 localized strings used throughout the widget’s user interface. This allows you to customize all display text and messages according to different languages or regions. Typically used together with the language property to support internationalization and provide translations for various UI elements. */
    get messages() {
        return this.nativeElement ? this.nativeElement.messages : undefined;
    }
    set messages(value) {
        this.nativeElement ? this.nativeElement.messages = value : undefined;
    }
    /** @description Sets or retrieves the value of the element's name attribute. The name attribute identifies the element when submitting an HTML form, allowing its value to be included in the form data sent to the server. This is essential for processing form fields on the server-side. */
    get name() {
        return this.nativeElement ? this.nativeElement.name : undefined;
    }
    set name(value) {
        this.nativeElement ? this.nativeElement.name = value : undefined;
    }
    /** @description Specifies the placeholder text that will be displayed in the List box when there are no available items to show. This text provides guidance or information to the user when the List box is empty. */
    get placeholder() {
        return this.nativeElement ? this.nativeElement.placeholder : undefined;
    }
    set placeholder(value) {
        this.nativeElement ? this.nativeElement.placeholder = value : undefined;
    }
    /** @description Sets or retrieves the readonly property of the element. When the readonly property is set to true, the element becomes non-editable—users can view its content but cannot modify it. This property is commonly used with input and textarea elements to prevent user interaction while still displaying the field’s value. */
    get readonly() {
        return this.nativeElement ? this.nativeElement.readonly : undefined;
    }
    set readonly(value) {
        this.nativeElement ? this.nativeElement.readonly = value : undefined;
    }
    /** @description Specifies or retrieves a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, enabling proper display and support for languages and locales that use right-to-left scripts, such as Arabic or Hebrew. */
    get rightToLeft() {
        return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
    }
    set rightToLeft(value) {
        this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
    }
    /** @description Controls whether the select all item is displayed when Checkboxes are enabled. */
    get selectAll() {
        return this.nativeElement ? this.nativeElement.selectAll : undefined;
    }
    set selectAll(value) {
        this.nativeElement ? this.nativeElement.selectAll = value : undefined;
    }
    /** @description Gets or sets the selected indexes. The selected indexes property is an array containing the numerical indexes of the items that are currently selected. Assigning an array of indexes will update the selection to match those items; retrieving this property returns the array of currently selected item indexes. */
    get selectedIndexes() {
        return this.nativeElement ? this.nativeElement.selectedIndexes : undefined;
    }
    set selectedIndexes(value) {
        this.nativeElement ? this.nativeElement.selectedIndexes = value : undefined;
    }
    /** @description Sets or retrieves the selected indexes. The selected values correspond to the values of the items that are currently selected. When setting, provide an array of indexes or values to specify which items should be marked as selected; when getting, this returns the values associated with the selected items. */
    get selectedValues() {
        return this.nativeElement ? this.nativeElement.selectedValues : undefined;
    }
    set selectedValues(value) {
        this.nativeElement ? this.nativeElement.selectedValues = value : undefined;
    }
    /** @description Specifies the maximum number of items that a user can select, based on the current selection mode (e.g., single, multiple, or none). This setting controls and restricts selection behavior within the interface. */
    get selectionMode() {
        return this.nativeElement ? this.nativeElement.selectionMode : undefined;
    }
    set selectionMode(value) {
        this.nativeElement ? this.nativeElement.selectionMode = value : undefined;
    }
    /** @description Specifies the user interaction event that triggers the selection of a listbox item: either when the item is initially pressed (‘press’) or when the user releases the press (‘release’). Choosing ‘press’ selects the item on mouse down or touch start, while ‘release’ selects it on mouse up or touch end. This setting controls how and when the user’s selection action is registered. */
    get selectionChangeAction() {
        return this.nativeElement ? this.nativeElement.selectionChangeAction : undefined;
    }
    set selectionChangeAction(value) {
        this.nativeElement ? this.nativeElement.selectionChangeAction = value : undefined;
    }
    /** @description Specifies whether the items should be automatically arranged in alphabetical order. If set to true, the items will be displayed from A to Z (or according to the selected locale’s alphabetical rules); if false, items will retain their original order. */
    get sorted() {
        return this.nativeElement ? this.nativeElement.sorted : undefined;
    }
    set sorted(value) {
        this.nativeElement ? this.nativeElement.sorted = value : undefined;
    }
    /** @description Specifies the sorting order for the data. Accepts either 'asc' for ascending order (from lowest to highest) or 'desc' for descending order (from highest to lowest). */
    get sortDirection() {
        return this.nativeElement ? this.nativeElement.sortDirection : undefined;
    }
    set sortDirection(value) {
        this.nativeElement ? this.nativeElement.sortDirection = value : undefined;
    }
    /** @description Specifies the visual theme applied to the element. Themes control the overall appearance, including colors, fonts, spacing, and other stylistic properties that define the element's look and feel. Choosing a theme ensures consistency and enhances the user interface design across the application. */
    get theme() {
        return this.nativeElement ? this.nativeElement.theme : undefined;
    }
    set theme(value) {
        this.nativeElement ? this.nativeElement.theme = value : undefined;
    }
    /** @description Scrolls the list box so that the item at the specified index appears as the first (topmost) visible item, ensuring it is fully in view at the top of the list. */
    get topVisibleIndex() {
        return this.nativeElement ? this.nativeElement.topVisibleIndex : undefined;
    }
    set topVisibleIndex(value) {
        this.nativeElement ? this.nativeElement.topVisibleIndex = value : undefined;
    }
    /** @description When set to true, this property prevents the element from receiving keyboard focus, meaning users will not be able to select the element using the keyboard (e.g., via the Tab key) or by programmatic focus methods. */
    get unfocusable() {
        return this.nativeElement ? this.nativeElement.unfocusable : undefined;
    }
    set unfocusable(value) {
        this.nativeElement ? this.nativeElement.unfocusable = value : undefined;
    }
    /** @description Gets or sets the current selection value(s). This property returns an array of objects, where each object represents a selected option with the following structure: { label: string, value: any }. The 'label' is the display text shown to users, and 'value' holds the corresponding data for that option. Return type: { label: string, value: any }[]. */
    get value() {
        return this.nativeElement ? this.nativeElement.value : undefined;
    }
    set value(value) {
        this.nativeElement ? this.nativeElement.value = value : undefined;
    }
    /** @description Determines which property of each item object should be used as the item's value. The specified property is stored as the value in the item object. Similar to groupMember, the valueMember property is particularly useful when binding data from a JSON file as a dataSource for the ListBox, allowing you to designate a specific field to serve as the value for each item. This is helpful when your data objects contain multiple properties, and you want to control exactly which one will represent the underlying value of each ListBox entry. */
    get valueMember() {
        return this.nativeElement ? this.nativeElement.valueMember : undefined;
    }
    set valueMember(value) {
        this.nativeElement ? this.nativeElement.valueMember = value : undefined;
    }
    /** @description Controls whether the vertical scroll bar is displayed, allowing users to scroll through content vertically when it overflows the container. This setting can be used to show, hide, or automatically display the scroll bar based on the content size. */
    get verticalScrollBarVisibility() {
        return this.nativeElement ? this.nativeElement.verticalScrollBarVisibility : undefined;
    }
    set verticalScrollBarVisibility(value) {
        this.nativeElement ? this.nativeElement.verticalScrollBarVisibility = value : undefined;
    }
    /** @description Specifies whether virtualization is enabled for the ListBox. When virtualization is enabled, the ListBox renders only the visible items in the UI, instead of generating UI elements for every item in the collection. This significantly improves performance and reduces memory usage, especially when working with large data sets (e.g., displaying one million items). Virtualization ensures smooth scrolling and responsiveness, even with a vast number of items in the ListBox. */
    get virtualized() {
        return this.nativeElement ? this.nativeElement.virtualized : undefined;
    }
    set virtualized(value) {
        this.nativeElement ? this.nativeElement.virtualized = value : undefined;
    }
    /** @description Adds a new ListItem element to the end of the existing items within the specified container element, maintaining the original order of all previously added items.
    * @param {Node} node. A ListItem element that should be added to the rest of the items as the last item.
    * @returns {Node}
  */
    appendChild(node) {
        return __awaiter(this, void 0, void 0, function* () {
            const getResultOnRender = () => {
                return new Promise(resolve => {
                    this.nativeElement.whenRendered(() => {
                        const result = this.nativeElement.appendChild(node);
                        resolve(result);
                    });
                });
            };
            const result = yield getResultOnRender();
            return result;
        });
    }
    appendChildSync(node) {
        if (this.nativeElement.isRendered) {
            return this.nativeElement.appendChild(node);
        }
        return null;
    }
    /** @description Adds one or more new items to the collection. This operation updates the data set by appending the provided item(s), making them available for future retrieval or processing.
    * @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.
    */
    add(item) {
        if (this.nativeElement.isRendered) {
            this.nativeElement.add(item);
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.add(item);
            });
        }
    }
    /** @description Clears all items from the listBox, effectively removing every entry and leaving the listBox empty. This operation does not delete the listBox itself, only its contents.
    */
    clearItems() {
        if (this.nativeElement.isRendered) {
            this.nativeElement.clearItems();
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.clearItems();
            });
        }
    }
    /** @description Deselects all currently selected items, ensuring that no items remain selected within the list or interface.
    */
    clearSelection() {
        if (this.nativeElement.isRendered) {
            this.nativeElement.clearSelection();
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.clearSelection();
            });
        }
    }
    /** @description Binds the latest data from the data source to the component, ensuring the user interface reflects current information. This method can be called to refresh or update the displayed data whenever the data source changes.
    */
    dataBind() {
        if (this.nativeElement.isRendered) {
            this.nativeElement.dataBind();
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.dataBind();
            });
        }
    }
    /** @description Scrolls the container so that the target item is brought into view, ensuring it is fully visible to the user within the viewport or scrollable area.
    * @param {HTMLElement | string} item. A list item or value of the desired item to be visible.
    */
    ensureVisible(item) {
        if (this.nativeElement.isRendered) {
            this.nativeElement.ensureVisible(item);
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.ensureVisible(item);
            });
        }
    }
    /** @description Returns a specific item instance from the listBox based on the provided index or selection criteria. The returned object represents the selected item and includes its associated properties and methods for further manipulation.
    * @param {string} value. The value of an item from the listBox.
    * @returns {HTMLElement}
  */
    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 Returns an array containing all items currently present in the ListBox component. Each item in the array represents an individual entry within the ListBox, typically as an object with relevant properties such as value, label, and any other associated data. This allows developers to access, display, or manipulate the full set of ListBox options programmatically.
    * @returns {{label: string, value: string}[]}
  */
    getItems() {
        return __awaiter(this, void 0, void 0, function* () {
            const getResultOnRender = () => {
                return new Promise(resolve => {
                    this.nativeElement.whenRendered(() => {
                        const result = this.nativeElement.getItems();
                        resolve(result);
                    });
                });
            };
            const result = yield getResultOnRender();
            return result;
        });
    }
    getItemsSync() {
        if (this.nativeElement.isRendered) {
            return this.nativeElement.getItems();
        }
        return null;
    }
    /** @description Returns an array of the selected values.
    * @returns {any[]}
  */
    getSelectedValues() {
        return __awaiter(this, void 0, void 0, function* () {
            const getResultOnRender = () => {
                return new Promise(resolve => {
                    this.nativeElement.whenRendered(() => {
                        const result = this.nativeElement.getSelectedValues();
                        resolve(result);
                    });
                });
            };
            const result = yield getResultOnRender();
            return result;
        });
    }
    getSelectedValuesSync() {
        if (this.nativeElement.isRendered) {
            return this.nativeElement.getSelectedValues();
        }
        return null;
    }
    /** @description Inserts a new item into the collection at the specified index, shifting existing items at and after that position one place to the right. The index determines the position in the array or list where the new item will be placed.
    * @param {number} index. The index where the item must be inserted.
    * @param {any} items. A single item/definition or an array of List Items/definitions of list items to be inserted. The format of the item definitions is the same as the format of the <strong>dataSource</strong> property.
    */
    insert(index, items) {
        if (this.nativeElement.isRendered) {
            this.nativeElement.insert(index, items);
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.insert(index, items);
            });
        }
    }
    /** @description Inserts a new ListItem element into the list, placing it immediately before a specified existing ListItem. This ensures the new item appears in the correct sequence relative to the given reference item.
    * @param {Node} node. A ListItem element that should be added before the referenceItem in the list.
    * @param {Node | null} referenceNode. A ListItem element that acts as the reference item before which a new item is about to be inserted. The referenceNode must be in the same list as the node.
    * @returns {Node}
  */
    insertBefore(node, referenceNode) {
        return __awaiter(this, void 0, void 0, function* () {
            const getResultOnRender = () => {
                return new Promise(resolve => {
                    this.nativeElement.whenRendered(() => {
                        const result = this.nativeElement.insertBefore(node, referenceNode);
                        resolve(result);
                    });
                });
            };
            const result = yield getResultOnRender();
            return result;
        });
    }
    insertBeforeSync(node, referenceNode) {
        if (this.nativeElement.isRendered) {
            return this.nativeElement.insertBefore(node, referenceNode);
        }
        return null;
    }
    /** @description Removes the item located at the specified index from the collection or array. The operation shifts all subsequent items one position to the left, effectively reducing the total number of items by one. The specified index must be within the valid range; otherwise, an error may occur.
    * @param {number} index. The index of the removed item.
    */
    removeAt(index) {
        if (this.nativeElement.isRendered) {
            this.nativeElement.removeAt(index);
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.removeAt(index);
            });
        }
    }
    /** @description Removes a specific ListItem from the collection of items contained within the given element. This operation updates the element by deleting the specified ListItem from its current list of child items.
    * @param {Node} node. A ListItem element that is part of the list of items inside the element.
    * @returns {Node}
  */
    removeChild(node) {
        return __awaiter(this, void 0, void 0, function* () {
            const getResultOnRender = () => {
                return new Promise(resolve => {
                    this.nativeElement.whenRendered(() => {
                        const result = this.nativeElement.removeChild(node);
                        resolve(result);
                    });
                });
            };
            const result = yield getResultOnRender();
            return result;
        });
    }
    removeChildSync(node) {
        if (this.nativeElement.isRendered) {
            return this.nativeElement.removeChild(node);
        }
        return null;
    }
    /** @description Selects a specific item from the ListBox component by programmatically highlighting or activating it, allowing for interaction as if the user had manually chosen the item from the list.
    * @param {string | number | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list.
    */
    select(item) {
        if (this.nativeElement.isRendered) {
            this.nativeElement.select(item);
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.select(item);
            });
        }
    }
    /** @description Removes the selection from a specified item in the listBox component, ensuring that the item is no longer highlighted or considered selected by the application.
    * @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list
    */
    unselect(item) {
        if (this.nativeElement.isRendered) {
            this.nativeElement.unselect(item);
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.unselect(item);
            });
        }
    }
    /** @description Updates the properties or content of a specific item within the listBox control. This operation identifies the targeted item based on its index or unique identifier and applies the specified changes, ensuring the listBox reflects the latest data or state.
    * @param {number} index. The index of the item that is going to be updated.
    * @param {any} details. An object that contains the properties and their new values for the List item that should be updated. For example, label, value or selected attributes.
    */
    update(index, details) {
        if (this.nativeElement.isRendered) {
            this.nativeElement.update(index, details);
        }
        else {
            this.nativeElement.whenRendered(() => {
                this.nativeElement.update(index, details);
            });
        }
    }
    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;
        }
        if (this.selectedValues && this.selectedValues.length > 0) {
            const value = this.selectedValues.length === 1 ? this.nativeElement.selectedValues[0] : this.nativeElement.selectedValues;
            return value;
        }
        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.nativeElement.isInitialized = that._initialChange ? false : true;
            that.clearSelection();
            if (Array.isArray(normalizedValue)) {
                value.forEach((currentValue) => this.select(currentValue));
            }
            else {
                that.select(normalizedValue);
            }
            that.nativeElement.isInitialized = true;
            if (that._initialChange === false) {
                if (that.selectedValues && that.selectedValues.length > 1) {
                    that._onChange(that.selectedValues);
                }
                else {
                    that._onChange((that.selectedValues && that.selectedValues.length > 0) ? that.selectedValues[0] : null);
                }
            }
        });
    }
    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['bindingCompleteHandler'] = (event) => { that.onBindingComplete.emit(event); };
        that.nativeElement.addEventListener('bindingComplete', that.eventHandlers['bindingCompleteHandler']);
        that.eventHandlers['changeHandler'] = (event) => { that.onChange.emit(event); };
        that.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);
        that.eventHandlers['dragEndHandler'] = (event) => { that.onDragEnd.emit(event); };
        that.nativeElement.addEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
        that.eventHandlers['draggingHandler'] = (event) => { that.onDragging.emit(event); };
        that.nativeElement.addEventListener('dragging', that.eventHandlers['draggingHandler']);
        that.eventHandlers['dragStartHandler'] = (event) => { that.onDragStart.emit(event); };
        that.nativeElement.addEventListener('dragStart', that.eventHandlers['dragStartHandler']);
        that.eventHandlers['itemClickHandler'] = (event) => { that.onItemClick.emit(event); };
        that.nativeElement.addEventListener('itemClick', that.eventHandlers['itemClickHandler']);
        that.eventHandlers['itemLabelChangeHandler'] = (event) => { that.onItemLabelChange.emit(event); };
        that.nativeElement.addEventListener('itemLabelChange', that.eventHandlers['itemLabelChangeHandler']);
        that.eventHandlers['scrollBottomReachedHandler'] = (event) => { that.onScrollBottomReached.emit(event); };
        that.nativeElement.addEventListener('scrollBottomReached', that.eventHandlers['scrollBottomReachedHandler']);
        that.eventHandlers['scrollTopReachedHandler'] = (event) => { that.onScrollTopReached.emit(event); };
        that.nativeElement.addEventListener('scrollTopReached', that.eventHandlers['scrollTopReachedHandler']);
        that.eventHandlers['swipeleftHandler'] = (event) => { that.onSwipeleft.emit(event); };
        that.nativeElement.addEventListener('swipeleft', that.eventHandlers['swipeleftHandler']);
        that.eventHandlers['swiperightHandler'] = (event) => { that.onSwiperight.emit(event); };
        that.nativeElement.addEventListener('swiperight', that.eventHandlers['swiperightHandler']);
        that.eventHandlers['changeModelHandler'] = (event) => {
            that._initialChange = false;
            that._onChange(that.nativeElement.selectedValues.length > 0 ? (that.nativeElement.selectedValues.length > 1 ? that.nativeElement.selectedValues : that.nativeElement.selectedValues[0]) : null);
        };
        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['bindingCompleteHandler']) {
            that.nativeElement.removeEventListener('bindingComplete', that.eventHandlers['bindingCompleteHandler']);
        }
        if (that.eventHandlers['changeHandler']) {
            that.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);
        }
        if (that.eventHandlers['dragEndHandler']) {
            that.nativeElement.removeEventListener('dragEnd', that.eventHandlers['dragEndHandler']);
        }
        if (that.eventHandlers['draggingHandler']) {
            that.nativeElement.removeEventListener('dragging', that.eventHandlers['draggingHandler']);
        }
        if (that.eventHandlers['dragStartHandler']) {
            that.nativeElement.removeEventListener('dragStart', that.eventHandlers['dragStartHandler']);
        }
        if (that.eventHandlers['itemClickHandler']) {
            that.nativeElement.removeEventListener('itemClick', that.eventHandlers['itemClickHandler']);
        }
        if (that.eventHandlers['itemLabelChangeHandler']) {
            that.nativeElement.removeEventListener('itemLabelChange', that.eventHandlers['itemLabelChangeHandler']);
        }
        if (that.eventHandlers['scrollBottomReachedHandler']) {
            that.nativeElement.removeEventListener('scrollBottomReached', that.eventHandlers['scrollBottomReachedHandler']);
        }
        if (that.eventHandlers['scrollTopReachedHandler']) {
            that.nativeElement.removeEventListener('scrollTopReached', that.eventHandlers['scrollTopReachedHandler']);
        }
        if (that.eventHandlers['swipeleftHandler']) {
            that.nativeElement.removeEventListener('swipeleft', that.eventHandlers['swipeleftHandler']);
        }
        if (that.eventHandlers['swiperightHandler']) {
            that.nativeElement.removeEventListener('swiperight', that.eventHandlers['swiperightHandler']);
        }
        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']);
        }
    }
}
ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListBoxComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
ListBoxComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: ListBoxComponent, selector: "smart-list-box, [smart-list-box]", inputs: { allowDrag: "allowDrag", allowDrop: "allowDrop", alternationCount: "alternationCount", alternationEnd: "alternationEnd", alternationStart: "alternationStart", animation: "animation", autoSort: "autoSort", dataSource: "dataSource", disabled: "disabled", displayLoadingIndicator: "displayLoadingIndicator", displayMember: "displayMember", dragFeedbackFormatFunction: "dragFeedbackFormatFunction", dragOffset: "dragOffset", dropAction: "dropAction", editable: "editable", filterable: "filterable", filterCallback: "filterCallback", filterMode: "filterMode", filterInputPlaceholder: "filterInputPlaceholder", grouped: "grouped", groupMember: "groupMember", horizontalScrollBarVisibility: "horizontalScrollBarVisibility", incrementalSearchDelay: "incrementalSearchDelay", incrementalSearchMode: "incrementalSearchMode", itemHeight: "itemHeight", itemMeasureMode: "itemMeasureMode", items: "items", itemTemplate: "itemTemplate", loadingIndicatorPlaceholder: "loadingIndicatorPlaceholder", loadingIndicatorPosition: "loadingIndicatorPosition", unlockKey: "unlockKey", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", name: "name", placeholder: "placeholder", readonly: "readonly", rightToLeft: "rightToLeft", selectAll: "selectAll", selectedIndexes: "selectedIndexes", selectedValues: "selectedValues", selectionMode: "selectionMode", selectionChangeAction: "selectionChangeAction", sorted: "sorted", sortDirection: "sortDirection", theme: "theme", topVisibleIndex: "topVisibleIndex", unfocusable: "unfocusable", value: "value", valueMember: "valueMember", verticalScrollBarVisibility: "verticalScrollBarVisibility", virtualized: "virtualized" }, outputs: { onBindingComplete: "onBindingComplete", onChange: "onChange", onDragEnd: "onDragEnd", onDragging: "onDragging", onDragStart: "onDragStart", onItemClick: "onItemClick", onItemLabelChange: "onItemLabelChange", onScrollBottomReached: "onScrollBottomReached", onScrollTopReached: "onScrollTopReached", onSwipeleft: "onSwipeleft", onSwiperight: "onSwiperight" }, providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR], exportAs: ["smart-list-box"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListBoxComponent, decorators: [{
            type: Directive,
            args: [{
                    exportAs: 'smart-list-box', selector: 'smart-list-box, [smart-list-box]',
                    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { allowDrag: [{
                type: Input
            }], allowDrop: [{
                type: Input
            }], alternationCount: [{
                type: Input
            }], alternationEnd: [{
                type: Input
            }], alternationStart: [{
                type: Input
            }], animation: [{
                type: Input
            }], autoSort: [{
                type: Input
            }], dataSource: [{
                type: Input
            }], disabled: [{
                type: Input
            }], displayLoadingIndicator: [{
                type: Input
            }], displayMember: [{
                type: Input
            }], dragFeedbackFormatFunction: [{
                type: Input
            }], dragOffset: [{
                type: Input
            }], dropAction: [{
                type: Input
            }], editable: [{
                type: Input
            }], filterable: [{
                type: Input
            }], filterCallback: [{
                type: Input
            }], filterMode: [{
                type: Input
            }], filterInputPlaceholder: [{
                type: Input
            }], grouped: [{
                type: Input
            }], groupMember: [{
                type: Input
            }], horizontalScrollBarVisibility: [{
                type: Input
            }], incrementalSearchDelay: [{
                type: Input
            }], incrementalSearchMode: [{
                type: Input
            }], itemHeight: [{
                type: Input
            }], itemMeasureMode: [{
                type: Input
            }], items: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], loadingIndicatorPlaceholder: [{
                type: Input
            }], loadingIndicatorPosition: [{
                type: Input
            }], unlockKey: [{
                type: Input
            }], locale: [{
                type: Input
            }], localizeFormatFunction: [{
                type: Input
            }], messages: [{
                type: Input
            }], name: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], readonly: [{
                type: Input
            }], rightToLeft: [{
                type: Input
            }], selectAll: [{
                type: Input
            }], selectedIndexes: [{
                type: Input
            }], selectedValues: [{
                type: Input
            }], selectionMode: [{
                type: Input
            }], selectionChangeAction: [{
                type: Input
            }], sorted: [{
                type: Input
            }], sortDirection: [{
                type: Input
            }], theme: [{
                type: Input
            }], topVisibleIndex: [{
                type: Input
            }], unfocusable: [{
                type: Input
            }], value: [{
                type: Input
            }], valueMember: [{
                type: Input
            }], verticalScrollBarVisibility: [{
                type: Input
            }], virtualized: [{
                type: Input
            }], onBindingComplete: [{
                type: Output
            }], onChange: [{
                type: Output
            }], onDragEnd: [{
                type: Output
            }], onDragging: [{
                type: Output
            }], onDragStart: [{
                type: Output
            }], onItemClick: [{
                type: Output
            }], onItemLabelChange: [{
                type: Output
            }], onScrollBottomReached: [{
                type: Output
            }], onScrollTopReached: [{
                type: Output
            }], onSwipeleft: [{
                type: Output
            }], onSwiperight: [{
                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 ListBoxModule {
}
ListBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ListBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListBoxModule, declarations: [ListBoxComponent, ListItemComponent, ListItemsGroupComponent], exports: [ListBoxComponent, ListItemComponent, ListItemsGroupComponent] });
ListBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListBoxModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: ListBoxModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [ListBoxComponent, ListItemComponent, ListItemsGroupComponent],
                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
                    exports: [ListBoxComponent, ListItemComponent, ListItemsGroupComponent]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { ListBoxComponent, ListBoxModule, ListItemComponent, ListItemsGroupComponent, Smart };
//# sourceMappingURL=smart-webcomponents-angular-listbox.mjs.map
