smart-webcomponents-angular/fesm2020/smart-webcomponents-angular-listbox.mjs.map

[](https://jqwidgets.com/license/)

{"version":3,"file":"smart-webcomponents-angular-listbox.mjs","sources":["../../listbox/src/smart.element.ts","../../listbox/src/smart.listbox.ts","../../listbox/src/smart.listitem.ts","../../listbox/src/smart.listitemsgroup.ts","../../listbox/src/smart.listbox.module.ts","../../listbox/src/smart-webcomponents-angular-listbox.ts"],"sourcesContent":["\ndeclare global {\n    interface Window {\n        Smart: any;\n}\n}\n\n\nimport { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';\nimport { ElementRenderMode } from './../index';\n\n@Directive()\nexport class BaseElement {\n    constructor(ref: ElementRef) {\n        const that = this;\n        this.nativeElement = ref.nativeElement as any;\n\n        that.nativeElement.onAttached = () => {\n            that.onAttach.emit(that.nativeElement);\n        }\n\n        that.nativeElement.onDetached = () => {\n            that.onDetach.emit(that.nativeElement);\n        }\n    }\n\n    @Output() onCreate: EventEmitter<any> = new EventEmitter();\n    @Output() onReady: EventEmitter<any> = new EventEmitter();\n    @Output() onAttach: EventEmitter<any> = new EventEmitter();\n    @Output() onDetach: EventEmitter<any> = new EventEmitter();\n\n    public nativeElement: any;\n\n    public addEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n        this.nativeElement.addEventListener(type, listener, options);\n\t}\n\n\tpublic removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions = false): void {\n\t\tthis.nativeElement.removeEventListener(type, listener, options);\n\t}\n\n\tpublic dispatchEvent(event: Event): boolean {\n\t\treturn this.nativeElement.dispatchEvent(event);\n\t}\n\n\tpublic blur(): void {\n\t\tthis.nativeElement.blur();\n\t}\n\n\tpublic click(): void {\n\t\tthis.nativeElement.click();\n\t}\n\n\tpublic focus(options?: FocusOptions): void {\n\t\tthis.nativeElement.focus(options);\n\t}\n\n/** @description Sets or gets the license.  */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\t\n/** @description Sets or gets the language. Used in conjunction with the property messages.  */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.  */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Determines the theme. Theme defines the look of the element */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n}\n\nlet Smart: any;\nif (typeof window !== \"undefined\") {\n\tSmart = window.Smart;\n}\nexport { Smart };\n\n","import { ListBox } from './../index';\nimport { Animation, ListBoxDropAction, FilterMode, HorizontalScrollBarVisibility, SearchMode, ListItemMeasureMode, VerticalAlignment, ListSelectionMode, ListBoxSelectionChangeAction, VerticalScrollBarVisibility, ListBoxItem, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges, forwardRef, ChangeDetectionStrategy, Output, EventEmitter, QueryList, ContentChildren } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { Animation, ListBoxDropAction, FilterMode, HorizontalScrollBarVisibility, SearchMode, ListItemMeasureMode, VerticalAlignment, ListSelectionMode, ListBoxSelectionChangeAction, VerticalScrollBarVisibility, ListBoxItem, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { ListBox } from './../index';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n\n\nimport { ListItemComponent } from './smart.listitem';\n\nimport { ListItemsGroupComponent } from './smart.listitemsgroup';\n\nconst CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => ListBoxComponent),\n    multi: true\n}\n\n@Directive({\n\texportAs: 'smart-list-box',\tselector: 'smart-list-box, [smart-list-box]',\n\tproviders: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]\n\n})\n\nexport class ListBoxComponent extends BaseElement implements OnInit, AfterViewInit, OnDestroy, OnChanges, ControlValueAccessor {\n\n\tconstructor(ref: ElementRef<ListBox>) {\n\t\tsuper(ref);\n\t\tthis.nativeElement = ref.nativeElement as ListBox;\n\t}\n\n\tprivate eventHandlers: any[] = [];\n\n\tpublic declare nativeElement: ListBox;\n\t/** @description Creates the component on demand.\n\t * @param properties An optional object of properties, which will be added to the template binded ones.\n\t */\n\tpublic createComponent(properties = {}): any {\n    \tthis.nativeElement = <ListBox>document.createElement('smart-list-box');\n\t\tfor (let propertyName in properties) { \n \t\t\tthis.nativeElement[propertyName] = properties[propertyName];\n\t\t}\n\t\treturn this.nativeElement;\n\t}\n        /**\n        * @description\n        * The registered callback function called when a change event occurs on the form elements.\n        */\n       _onChange: (value: any) => void = () => {};\n        /**\n        * @description\n        * The registered callback function called when a blur event occurs on the form elements.\n        */\n       _onTouched: () => any = () => {};\n\n\n\t/** @description Enables or disables the ability to drag list items out of the List box. Disabled items cannot be dragged. */\n\t@Input()\n\tget allowDrag(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.allowDrag : undefined;\n\t}\n\tset allowDrag(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.allowDrag = value : undefined;\n\t}\n\n\t/** @description Enables or disables the ability to drop list items inside the target List box. */\n\t@Input()\n\tget allowDrop(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.allowDrop : undefined;\n\t}\n\tset allowDrop(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.allowDrop = value : undefined;\n\t}\n\n\t/** @description Determines the number of color alternations in rows. */\n\t@Input()\n\tget alternationCount(): number {\n\t\treturn this.nativeElement ? this.nativeElement.alternationCount : undefined;\n\t}\n\tset alternationCount(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.alternationCount = value : undefined;\n\t}\n\n\t/** @description Determines the ending index of color alternations in rows. */\n\t@Input()\n\tget alternationEnd(): number {\n\t\treturn this.nativeElement ? this.nativeElement.alternationEnd : undefined;\n\t}\n\tset alternationEnd(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.alternationEnd = value : undefined;\n\t}\n\n\t/** @description Determines the starting index of color alternations in rows */\n\t@Input()\n\tget alternationStart(): number {\n\t\treturn this.nativeElement ? this.nativeElement.alternationStart : undefined;\n\t}\n\tset alternationStart(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.alternationStart = value : undefined;\n\t}\n\n\t/** @description Sets or gets the animation mode. Animation is disabled when the property is set to 'none' */\n\t@Input()\n\tget animation(): Animation | string {\n\t\treturn this.nativeElement ? this.nativeElement.animation : undefined;\n\t}\n\tset animation(value: Animation | string) {\n\t\tthis.nativeElement ? this.nativeElement.animation = value : undefined;\n\t}\n\n\t/** @description Enables or disables auto sorting. If sorted is enabled, but autoSort is false, the element will not be re-sorted automatically. */\n\t@Input()\n\tget autoSort(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.autoSort : undefined;\n\t}\n\tset autoSort(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.autoSort = value : undefined;\n\t}\n\n\t/** @description Determines the data source that will be loaded to the ListBox. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value, group. It can also be a callback that returns an Array of items as previously described. */\n\t@Input()\n\tget dataSource(): any {\n\t\treturn this.nativeElement ? this.nativeElement.dataSource : undefined;\n\t}\n\tset dataSource(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.dataSource = value : undefined;\n\t}\n\n\t/** @description Enables or disables the list box. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.disabled : undefined;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.disabled = value : undefined;\n\t}\n\n\t/** @description Determines whether an indicator will appear during filtering and remote item loading. */\n\t@Input()\n\tget displayLoadingIndicator(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.displayLoadingIndicator : undefined;\n\t}\n\tset displayLoadingIndicator(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.displayLoadingIndicator = value : undefined;\n\t}\n\n\t/** @description Sets or gets the displayMember. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'dataSource' property. */\n\t@Input()\n\tget displayMember(): string {\n\t\treturn this.nativeElement ? this.nativeElement.displayMember : undefined;\n\t}\n\tset displayMember(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.displayMember = value : undefined;\n\t}\n\n\t/** @description A callback function for customizing the HTML of the drag feedback. It receives one parameter - the currently dragged item. */\n\t@Input()\n\tget dragFeedbackFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.dragFeedbackFormatFunction : undefined;\n\t}\n\tset dragFeedbackFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.dragFeedbackFormatFunction = value : undefined;\n\t}\n\n\t/** @description Determines the offset of the drag feedback element from the mouse cursor when dragging an item. The first member of the array is the horizontal offset and the second one - the vertical offset. */\n\t@Input()\n\tget dragOffset(): number[] {\n\t\treturn this.nativeElement ? this.nativeElement.dragOffset : undefined;\n\t}\n\tset dragOffset(value: number[]) {\n\t\tthis.nativeElement ? this.nativeElement.dragOffset = value : undefined;\n\t}\n\n\t/** @description Determines what happens when an item is dropped. */\n\t@Input()\n\tget dropAction(): ListBoxDropAction | string {\n\t\treturn this.nativeElement ? this.nativeElement.dropAction : undefined;\n\t}\n\tset dropAction(value: ListBoxDropAction | string) {\n\t\tthis.nativeElement ? this.nativeElement.dropAction = value : undefined;\n\t}\n\n\t/** @description Determines if list items can be edited or not. If enabled, items can be edited by double clicking on a target item ( that is not disabled ) or pressing the F2 key on the keyboard. */\n\t@Input()\n\tget editable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.editable : undefined;\n\t}\n\tset editable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.editable = value : undefined;\n\t}\n\n\t/** @description Determines whether list items can be filtered or not. If enable a filter input appears at the top of the list box. */\n\t@Input()\n\tget filterable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.filterable : undefined;\n\t}\n\tset filterable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.filterable = value : undefined;\n\t}\n\n\t/** @description A callback that should return a condition that will be used for custom item filtering. Used in conjunction with filterMode 'custom' */\n\t@Input()\n\tget filterCallback(): any {\n\t\treturn this.nativeElement ? this.nativeElement.filterCallback : undefined;\n\t}\n\tset filterCallback(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.filterCallback = value : undefined;\n\t}\n\n\t/** @description Determines the filtering mode. */\n\t@Input()\n\tget filterMode(): FilterMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.filterMode : undefined;\n\t}\n\tset filterMode(value: FilterMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.filterMode = value : undefined;\n\t}\n\n\t/** @description Determines the placeholder for the filter input field. */\n\t@Input()\n\tget filterInputPlaceholder(): string {\n\t\treturn this.nativeElement ? this.nativeElement.filterInputPlaceholder : undefined;\n\t}\n\tset filterInputPlaceholder(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.filterInputPlaceholder = value : undefined;\n\t}\n\n\t/** @description If enabled, the items will be grouped by their first letter. Can't be applied if the dataSource already contains groups. */\n\t@Input()\n\tget grouped(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.grouped : undefined;\n\t}\n\tset grouped(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.grouped = value : undefined;\n\t}\n\n\t/** @description Determines which attribute from the dataSource object will be used as the group member for the items. If not set, by default 'group' property is used from the source object. groupMember is especially usefull when loading the data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used to group the items. */\n\t@Input()\n\tget groupMember(): string | null {\n\t\treturn this.nativeElement ? this.nativeElement.groupMember : undefined;\n\t}\n\tset groupMember(value: string | null) {\n\t\tthis.nativeElement ? this.nativeElement.groupMember = value : undefined;\n\t}\n\n\t/** @description Determines the visibility of the horizontal Scroll bar. */\n\t@Input()\n\tget horizontalScrollBarVisibility(): HorizontalScrollBarVisibility | string {\n\t\treturn this.nativeElement ? this.nativeElement.horizontalScrollBarVisibility : undefined;\n\t}\n\tset horizontalScrollBarVisibility(value: HorizontalScrollBarVisibility | string) {\n\t\tthis.nativeElement ? this.nativeElement.horizontalScrollBarVisibility = value : undefined;\n\t}\n\n\t/** @description IncrementalSearchDelay property specifies the time-interval in milliseconds until the previous search query is cleared. The timer starts when the user stops typing. A new query can be started only when the delay has passed. */\n\t@Input()\n\tget incrementalSearchDelay(): number {\n\t\treturn this.nativeElement ? this.nativeElement.incrementalSearchDelay : undefined;\n\t}\n\tset incrementalSearchDelay(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.incrementalSearchDelay = value : undefined;\n\t}\n\n\t/** @description Sets ot gets the mode of the incremental search mode. Incremental search is enabled by default. Typing while the List box is focused starts the incremental search. */\n\t@Input()\n\tget incrementalSearchMode(): SearchMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.incrementalSearchMode : undefined;\n\t}\n\tset incrementalSearchMode(value: SearchMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.incrementalSearchMode = value : undefined;\n\t}\n\n\t/** @description Sets the height for all list box items. Used only when virtualization is enabled. */\n\t@Input()\n\tget itemHeight(): number {\n\t\treturn this.nativeElement ? this.nativeElement.itemHeight : undefined;\n\t}\n\tset itemHeight(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.itemHeight = value : undefined;\n\t}\n\n\t/** @description Determines the item width measuring algorithm. */\n\t@Input()\n\tget itemMeasureMode(): ListItemMeasureMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.itemMeasureMode : undefined;\n\t}\n\tset itemMeasureMode(value: ListItemMeasureMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.itemMeasureMode = value : undefined;\n\t}\n\n\t/** @description A getter that returns an array of all ListBox items. */\n\t@Input()\n\tget items(): ListBoxItem[] {\n\t\treturn this.nativeElement ? this.nativeElement.items : undefined;\n\t}\n\tset items(value: ListBoxItem[]) {\n\t\tthis.nativeElement ? this.nativeElement.items = value : undefined;\n\t}\n\n\t/** @description A string that represents the id of an HTMLTemplateElement inside the DOM or a reference to the template itself. It's used to set a custom template for the list items. */\n\t@Input()\n\tget itemTemplate(): any {\n\t\treturn this.nativeElement ? this.nativeElement.itemTemplate : undefined;\n\t}\n\tset itemTemplate(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.itemTemplate = value : undefined;\n\t}\n\n\t/** @description Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom. */\n\t@Input()\n\tget loadingIndicatorPlaceholder(): string {\n\t\treturn this.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder : undefined;\n\t}\n\tset loadingIndicatorPlaceholder(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.loadingIndicatorPlaceholder = value : undefined;\n\t}\n\n\t/** @description Determines the position of the loading indicator. */\n\t@Input()\n\tget loadingIndicatorPosition(): VerticalAlignment | string {\n\t\treturn this.nativeElement ? this.nativeElement.loadingIndicatorPosition : undefined;\n\t}\n\tset loadingIndicatorPosition(value: VerticalAlignment | string) {\n\t\tthis.nativeElement ? this.nativeElement.loadingIndicatorPosition = value : undefined;\n\t}\n\n\t/** @description Sets or gets the license which unlocks the product. */\n\t@Input()\n\tget license(): string {\n\t\treturn this.nativeElement ? this.nativeElement.license : undefined;\n\t}\n\tset license(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.license = value : undefined;\n\t}\n\n\t/** @description Sets or gets the language. Used in conjunction with the property messages.  */\n\t@Input()\n\tget locale(): string {\n\t\treturn this.nativeElement ? this.nativeElement.locale : undefined;\n\t}\n\tset locale(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.locale = value : undefined;\n\t}\n\n\t/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */\n\t@Input()\n\tget localizeFormatFunction(): any {\n\t\treturn this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;\n\t}\n\tset localizeFormatFunction(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;\n\t}\n\n\t/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.  */\n\t@Input()\n\tget messages(): any {\n\t\treturn this.nativeElement ? this.nativeElement.messages : undefined;\n\t}\n\tset messages(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.messages = value : undefined;\n\t}\n\n\t/** @description Sets or gets the name attribute for the element. Name is used when submiting HTML forms. */\n\t@Input()\n\tget name(): string {\n\t\treturn this.nativeElement ? this.nativeElement.name : undefined;\n\t}\n\tset name(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.name = value : undefined;\n\t}\n\n\t/** @description Determines the placeholder that will be shown when the List box is empty. */\n\t@Input()\n\tget placeholder(): string {\n\t\treturn this.nativeElement ? this.nativeElement.placeholder : undefined;\n\t}\n\tset placeholder(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.placeholder = value : undefined;\n\t}\n\n\t/** @description Sets or gets the readonly property. If the element is readonly, users cannot interact with it. */\n\t@Input()\n\tget readonly(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.readonly : undefined;\n\t}\n\tset readonly(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.readonly = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */\n\t@Input()\n\tget rightToLeft(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.rightToLeft : undefined;\n\t}\n\tset rightToLeft(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.rightToLeft = value : undefined;\n\t}\n\n\t/** @description Sets or gets the selected indexes. Selected indexes represents an array of the indexes of the items that should be selected. */\n\t@Input()\n\tget selectedIndexes(): number[] {\n\t\treturn this.nativeElement ? this.nativeElement.selectedIndexes : undefined;\n\t}\n\tset selectedIndexes(value: number[]) {\n\t\tthis.nativeElement ? this.nativeElement.selectedIndexes = value : undefined;\n\t}\n\n\t/** @description Sets or gets elected indexes. Selected values represents the values of the items that should be selected. */\n\t@Input()\n\tget selectedValues(): string[] {\n\t\treturn this.nativeElement ? this.nativeElement.selectedValues : undefined;\n\t}\n\tset selectedValues(value: string[]) {\n\t\tthis.nativeElement ? this.nativeElement.selectedValues = value : undefined;\n\t}\n\n\t/** @description Determines how many items can be selected depending on the selection mode. */\n\t@Input()\n\tget selectionMode(): ListSelectionMode | string {\n\t\treturn this.nativeElement ? this.nativeElement.selectionMode : undefined;\n\t}\n\tset selectionMode(value: ListSelectionMode | string) {\n\t\tthis.nativeElement ? this.nativeElement.selectionMode = value : undefined;\n\t}\n\n\t/** @description Determines when listbox selection is achieved - on 'press' or 'release'. */\n\t@Input()\n\tget selectionChangeAction(): ListBoxSelectionChangeAction | string {\n\t\treturn this.nativeElement ? this.nativeElement.selectionChangeAction : undefined;\n\t}\n\tset selectionChangeAction(value: ListBoxSelectionChangeAction | string) {\n\t\tthis.nativeElement ? this.nativeElement.selectionChangeAction = value : undefined;\n\t}\n\n\t/** @description Determines whether the items are sorted alphabetically or not */\n\t@Input()\n\tget sorted(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.sorted : undefined;\n\t}\n\tset sorted(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.sorted = value : undefined;\n\t}\n\n\t/** @description Determines sorting direction - ascending(asc) or descending(desc) */\n\t@Input()\n\tget sortDirection(): string {\n\t\treturn this.nativeElement ? this.nativeElement.sortDirection : undefined;\n\t}\n\tset sortDirection(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.sortDirection = value : undefined;\n\t}\n\n\t/** @description Determines the theme for the element. Themes define the look of the elements. */\n\t@Input()\n\tget theme(): string {\n\t\treturn this.nativeElement ? this.nativeElement.theme : undefined;\n\t}\n\tset theme(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.theme = value : undefined;\n\t}\n\n\t/** @description Ensures the item with the target index is in view as the first (top) item in the list box. */\n\t@Input()\n\tget topVisibleIndex(): number {\n\t\treturn this.nativeElement ? this.nativeElement.topVisibleIndex : undefined;\n\t}\n\tset topVisibleIndex(value: number) {\n\t\tthis.nativeElement ? this.nativeElement.topVisibleIndex = value : undefined;\n\t}\n\n\t/** @description If is set to true, the element cannot be focused. */\n\t@Input()\n\tget unfocusable(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.unfocusable : undefined;\n\t}\n\tset unfocusable(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.unfocusable = value : undefined;\n\t}\n\n\t/** @description Sets or gets the value. Returns the selection. Return type: {label: string, value: any}[]. */\n\t@Input()\n\tget value(): any {\n\t\treturn this.nativeElement ? this.nativeElement.value : undefined;\n\t}\n\tset value(value: any) {\n\t\tthis.nativeElement ? this.nativeElement.value = value : undefined;\n\t}\n\n\t/** @description Determines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items. */\n\t@Input()\n\tget valueMember(): string {\n\t\treturn this.nativeElement ? this.nativeElement.valueMember : undefined;\n\t}\n\tset valueMember(value: string) {\n\t\tthis.nativeElement ? this.nativeElement.valueMember = value : undefined;\n\t}\n\n\t/** @description Determines the visibility of the vertical scroll bar. */\n\t@Input()\n\tget verticalScrollBarVisibility(): VerticalScrollBarVisibility | string {\n\t\treturn this.nativeElement ? this.nativeElement.verticalScrollBarVisibility : undefined;\n\t}\n\tset verticalScrollBarVisibility(value: VerticalScrollBarVisibility | string) {\n\t\tthis.nativeElement ? this.nativeElement.verticalScrollBarVisibility = value : undefined;\n\t}\n\n\t/** @description Determines weather or not Virtualization is used for the ListBox. Virtualization allows a huge amount of items to be loaded to the List box while preserving the performance. For example a milion items can be loaded to the list box. */\n\t@Input()\n\tget virtualized(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.virtualized : undefined;\n\t}\n\tset virtualized(value: boolean) {\n\t\tthis.nativeElement ? this.nativeElement.virtualized = value : undefined;\n\t}\n\n\t/** @description This event is triggered when listbox binding is completed.\n\t*  @param event. The custom event. \t*/\n\t@Output() onBindingComplete: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when selection is changed.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\taddedItems, \tdisabled, \tindex, \tlabel, \tremovedItems, \tselected, \tvalue)\n\t*   addedItems - An array of List items that have been selected.\n\t*   disabled - A flag indicating whether or not the item that caused the change event is disabled.\n\t*   index - The index of the List item that triggered the event.\n\t*   label - The label of the List item that triggered the event.\n\t*   removedItems - An array of List items that have been unselected before the event was fired.\n\t*   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.\n\t*   value - The value of the List item that triggered the event.\n\t*/\n\t@Output() onChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when an item is dropped. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tcontainer, \tdata, \titem, \toriginalEvent, \tpreviousContainer, \ttarget)\n\t*   container - The List box that an item was dragged <strong>to.</strong>\n\t*   data - An object that contains data about the dragging operation like start position, start time, etc.\n\t*   item - The List item that was dragged.\n\t*   originalEvent - That original event that was fired.\n\t*   previousContainer - The List box that an item was dragged <strong>from</strong>.\n\t*   target - The event target.\n\t*/\n\t@Output() onDragEnd: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when a List item is being dragged.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tdata, \titem, \toriginalEvent)\n\t*   data - An object that contains data about the dragging operation like start position, start time, etc.\n\t*   item - The List item that is being dragged. This is the item that has been clicked when initiating the drag operation\n\t*   originalEvent - The original event that initiates the dragging operation.\n\t*/\n\t@Output() onDragging: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when an item is dragged. The dragging operation can be canceled by calling event.preventDefault() in the event handler function.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tcontainer, \tdata, \titem, \toriginalEvent, \tpreviousContainer, \ttarget)\n\t*   container - The List box that an item was dragged <strong>to.</strong>\n\t*   data - An object that contains data about the dragging oepration like start position, start time, etc.\n\t*   item - The List item that was dragged.\n\t*   originalEvent - That original event that was fired.\n\t*   previousContainer - The List box that an item was dragged <strong>from</strong>.\n\t*   target - The event target.\n\t*/\n\t@Output() onDragStart: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when an item is clicked.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tdisabled, \tindex, \tlabel, \tselected, \tvalue)\n\t*   disabled - Indicates whether the List item that was clicked is disabled or not.\n\t*   index - Indicates the index of the List item that was clicked.\n\t*   label - The label of the List item that was clicked.\n\t*   selected - Indicates whether the List item that was clicked is selected or not.\n\t*   value - The value of the List item that was clicked.\n\t*/\n\t@Output() onItemClick: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when an item has been edited.\n\t*  @param event. The custom event. \tCustom event was created with: event.detail(\tselected, \tdisabled, \tindex, \tlabel, \tvalue)\n\t*   selected - Indicates whether the List item is selected or not.\n\t*   disabled - Indicates whether the List item is disabled or not.\n\t*   index - The index of the List item that was edited.\n\t*   label - The label of the edited List item.\n\t*   value - The value of the List item that was edited.\n\t*/\n\t@Output() onItemLabelChange: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when user scrolls to the end of the list.\n\t*  @param event. The custom event. \t*/\n\t@Output() onScrollBottomReached: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when user scrolls to the beginning of the list.\n\t*  @param event. The custom event. \t*/\n\t@Output() onScrollTopReached: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the user swipes to the left, inside the listBox.\n\t*  @param event. The custom event. \t*/\n\t@Output() onSwipeleft: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description This event is triggered when the user swipes to the right, inside the listBox.\n\t*  @param event. The custom event. \t*/\n\t@Output() onSwiperight: EventEmitter<CustomEvent> = new EventEmitter();\n\n\t/** @description Appends a ListItem to the end of the list of items inside element. \n\t* @param {Node} node. A ListItem element that should be added to the rest of the items as the last item.\n\t* @returns {Node}\n  */\n\tpublic async appendChild(node): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.appendChild(node);\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\t/** @description Adds a new item(s). \n\t* @param {any} item. Describes the properties of the item that will be inserted. You can also pass an array of items.\n\t*/\n    public add(item: any): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.add(item);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.add(item);\n            });\n        }\n    }\n\n\t/** @description Removes all items from the listBox. \n\t*/\n    public clearItems(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.clearItems();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.clearItems();\n            });\n        }\n    }\n\n\t/** @description Unselects all items. \n\t*/\n    public clearSelection(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.clearSelection();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.clearSelection();\n            });\n        }\n    }\n\n\t/** @description Performs a data bind. This can be used to refresh the data source. \n\t*/\n    public dataBind(): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.dataBind();\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.dataBind();\n            });\n        }\n    }\n\n\t/** @description Ensures the target item is visible by scrolling to it. \n\t* @param {HTMLElement | string} item. A list item or value of the desired item to be visible.\n\t*/\n    public ensureVisible(item: HTMLElement | string): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.ensureVisible(item);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.ensureVisible(item);\n            });\n        }\n    }\n\n\t/** @description Returns an item instance from the listBox. \n\t* @param {string} value. The value of an item from the listBox.\n\t* @returns {HTMLElement}\n  */\n\tpublic async getItem(value): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getItem(value);\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\t/** @description Returns an array of ListBox items. \n\t* @returns {{label: string, value: string}[]}\n  */\n\tpublic async getItems(): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.getItems();\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\t/** @description Inserts a new item at a specified index. \n\t* @param {number} index. The index where the item must be inserted.\n\t* @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.\n\t*/\n    public insert(index: number, items: any): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.insert(index, items);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.insert(index, items);\n            });\n        }\n    }\n\n\t/** @description Inserts a new ListItem before another in the list. \n\t* @param {Node} node. A ListItem element that should be added before the referenceItem in the list.\n\t* @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.\n\t* @returns {Node}\n  */\n\tpublic async insertBefore(node, referenceNode): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.insertBefore(node, referenceNode);\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\t/** @description Removes an item at a specified index. \n\t* @param {number} index. The index of the removed item.\n\t*/\n    public removeAt(index: number): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.removeAt(index);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.removeAt(index);\n            });\n        }\n    }\n\n\t/** @description Removes a ListItem from the list of items inside element. \n\t* @param {Node} node. A ListItem element that is part of the list of items inside the element.\n\t* @returns {Node}\n  */\n\tpublic async removeChild(node): Promise<any> {\n\t\tconst getResultOnRender = () => {\n            return new Promise(resolve => {\n                this.nativeElement.whenRendered(() => {\n                    const result = this.nativeElement.removeChild(node);\n                    resolve(result)\n                });\n            });\n        };\n        const result = await getResultOnRender();\n\n        return result;\n    }\n\n\t/** @description Selects an item from the listBox.  \n\t* @param {string | number | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list.\n\t*/\n    public select(item: string | number | HTMLElement): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.select(item);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.select(item);\n            });\n        }\n    }\n\n\t/** @description Unselects an item from the listBox.  \n\t* @param {string | HTMLElement} item. A string, representing the value of the item or an HTML Element referencing an item from the list\n\t*/\n    public unselect(item: string | HTMLElement): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.unselect(item);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.unselect(item);\n            });\n        }\n    }\n\n\t/** @description Updates an item from the listBox. \n\t* @param {number} index. The index of the item that is going to be updated.\n\t* @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.\n\t*/\n    public update(index: number, details: any): void {\n        if (this.nativeElement.isRendered) {\n            this.nativeElement.update(index, details);\n        }\n        else\n        {\n            this.nativeElement.whenRendered(() => {\n                this.nativeElement.update(index, details);\n            });\n        }\n    }\n\n\n\tget isRendered(): boolean {\n\t\treturn this.nativeElement ? this.nativeElement.isRendered : false;\n\t}\n\n\tngOnInit() {\n\t}\n\n    ngAfterViewInit() {\n      const that = this;\n\n      that.onCreate.emit(that.nativeElement);\n\n\t\tif (Smart) Smart.Render();\n\n\t\tthis.nativeElement.classList.add('smart-angular');\n\n\t\tif (this.nativeElement.whenRendered) this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });\n\t\tthis.listen();\n\t}\n\n\tngOnDestroy() {\n\t\tthis.unlisten();\n\t}\n\n\t_initialChange = true; \n\n\tget ngValue(): any {\n\t\tif (!this.nativeElement) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif (this.selectedValues && this.selectedValues.length > 0) {\n\t\t\tconst value = this.selectedValues.length === 1 ? this.nativeElement.selectedValues[0] : this.nativeElement.selectedValues;\n\t\t\treturn value;\n\t\t}\n        return null;\n\t\tconst value = this.nativeElement.value;\n\t\treturn value;\n\t}\n\n\tset ngValue(value: any) {\n\t\tif (this.nativeElement) {\n\t\t    this.writeValue(value);\n\t\t}\n\t}\n\n\twriteValue(value: any): void {\n        const that = this;\n        const normalizedValue = value == null ? '' : value;\n\n\t\tthat.nativeElement.whenRendered(() => {\n            that.nativeElement.isInitialized = that._initialChange ? false : true;\n\t\t\tthat.clearSelection();\n            if (Array.isArray(normalizedValue)) {\n                value.forEach((currentValue: any) => this.select(currentValue));\n                }\n                else {\n                    that.select(normalizedValue);\n                }\n            that.nativeElement.isInitialized = true;\n\t\t\tif (that._initialChange === false) {\n               if (that.selectedValues && that.selectedValues.length > 1) {\n                    that._onChange(that.selectedValues);\n                }\n                else {\n                    that._onChange((that.selectedValues && that.selectedValues.length > 0) ? that.selectedValues[0] : null);\n                }\n            }\n\t\t});\n\t}\n\n\tregisterOnChange(fn: any): void {\n\t\tthis._onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any): void {\n\t\tthis._onTouched = fn;\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\tif (this.nativeElement && this.nativeElement.isRendered) {\n\t\t\tfor (const propName in changes) {\n\t\t\t\tif (changes.hasOwnProperty(propName)) {\n\t\t\t\t\tthis.nativeElement[propName] = changes[propName].currentValue;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t/** @description Add event listeners. */\n\tprivate listen(): void {\n        const that = this;\n\t\tthat.eventHandlers['bindingCompleteHandler'] = (event: CustomEvent) => { that.onBindingComplete.emit(event); }\n\t\tthat.nativeElement.addEventListener('bindingComplete', that.eventHandlers['bindingCompleteHandler']);\n\n\t\tthat.eventHandlers['changeHandler'] = (event: CustomEvent) => { that.onChange.emit(event); }\n\t\tthat.nativeElement.addEventListener('change', that.eventHandlers['changeHandler']);\n\n\t\tthat.eventHandlers['dragEndHandler'] = (event: CustomEvent) => { that.onDragEnd.emit(event); }\n\t\tthat.nativeElement.addEventListener('dragEnd', that.eventHandlers['dragEndHandler']);\n\n\t\tthat.eventHandlers['draggingHandler'] = (event: CustomEvent) => { that.onDragging.emit(event); }\n\t\tthat.nativeElement.addEventListener('dragging', that.eventHandlers['draggingHandler']);\n\n\t\tthat.eventHandlers['dragStartHandler'] = (event: CustomEvent) => { that.onDragStart.emit(event); }\n\t\tthat.nativeElement.addEventListener('dragStart', that.eventHandlers['dragStartHandler']);\n\n\t\tthat.eventHandlers['itemClickHandler'] = (event: CustomEvent) => { that.onItemClick.emit(event); }\n\t\tthat.nativeElement.addEventListener('itemClick', that.eventHandlers['itemClickHandler']);\n\n\t\tthat.eventHandlers['itemLabelChangeHandler'] = (event: CustomEvent) => { that.onItemLabelChange.emit(event); }\n\t\tthat.nativeElement.addEventListener('itemLabelChange', that.eventHandlers['itemLabelChangeHandler']);\n\n\t\tthat.eventHandlers['scrollBottomReachedHandler'] = (event: CustomEvent) => { that.onScrollBottomReached.emit(event); }\n\t\tthat.nativeElement.addEventListener('scrollBottomReached', that.eventHandlers['scrollBottomReachedHandler']);\n\n\t\tthat.eventHandlers['scrollTopReachedHandler'] = (event: CustomEvent) => { that.onScrollTopReached.emit(event); }\n\t\tthat.nativeElement.addEventListener('scrollTopReached', that.eventHandlers['scrollTopReachedHandler']);\n\n\t\tthat.eventHandlers['swipeleftHandler'] = (event: CustomEvent) => { that.onSwipeleft.emit(event); }\n\t\tthat.nativeElement.addEventListener('swipeleft', that.eventHandlers['swipeleftHandler']);\n\n\t\tthat.eventHandlers['swiperightHandler'] = (event: CustomEvent) => { that.onSwiperight.emit(event); }\n\t\tthat.nativeElement.addEventListener('swiperight', that.eventHandlers['swiperightHandler']);\n\n\n        that.eventHandlers['changeModelHandler'] = (event: Event) =>\n        {\n            that._initialChange = false;\n            that._onChange(that.nativeElement.selectedValues.length > 0 ? (that.nativeElement.selectedValues.length > 1 ? that.nativeElement.selectedValues : that.nativeElement.selectedValues[0]) : null);\n        }\n        that.eventHandlers['blurModelHandler'] = (event: Event) => {\n            that._onTouched();\n        };\n        that.nativeElement.whenRendered(() => {\n            if (that.nativeElement.querySelector('input')) {\n                that.eventHandlers['keyupModelHandler'] = (event) => {\n                    setTimeout(() => { that.eventHandlers['changeModelHandler'](event); }, 50);\n                };\n\n                that.nativeElement.querySelector('input').addEventListener('keyup', that.eventHandlers['keyupModelHandler']);\n            }\n        });\n\t\tthat.nativeElement.addEventListener('change', that.eventHandlers['changeModelHandler']);\n\t\tthat.nativeElement.addEventListener('blur', that.eventHandlers['blurModelHandler']);\n\t}\n\n\t/** @description Remove event listeners. */\n\tprivate unlisten(): void {\n        const that = this;\n\t\tif (that.eventHandlers['bindingCompleteHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('bindingComplete', that.eventHandlers['bindingCompleteHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['changeHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('change', that.eventHandlers['changeHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['dragEndHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('dragEnd', that.eventHandlers['dragEndHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['draggingHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('dragging', that.eventHandlers['draggingHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['dragStartHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('dragStart', that.eventHandlers['dragStartHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['itemClickHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('itemClick', that.eventHandlers['itemClickHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['itemLabelChangeHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('itemLabelChange', that.eventHandlers['itemLabelChangeHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['scrollBottomReachedHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('scrollBottomReached', that.eventHandlers['scrollBottomReachedHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['scrollTopReachedHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('scrollTopReached', that.eventHandlers['scrollTopReachedHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['swipeleftHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('swipeleft', that.eventHandlers['swipeleftHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['swiperightHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('swiperight', that.eventHandlers['swiperightHandler']);\n\t\t}\n\n\t\tif (that.eventHandlers['changeModelHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('change', that.eventHandlers['changeModelHandler']);\n            if (that.nativeElement.querySelector('input')) {\n                  that.nativeElement.querySelector('input').removeEventListener('keyup', that.eventHandlers['keyupModelHandler']);\n            }\n\t\t}\n\t\tif (that.eventHandlers['blurModelHandler']) {\n\t\t\tthat.nativeElement.removeEventListener('blur', that.eventHandlers['blurModelHandler']);\n\t\t}\n\t}\n}\n","import { ListItem } from './../index';\nimport { ListItemDisplayMode, ElementRenderMode} from './../index';\nimport { Component, Directive, AfterViewInit, ElementRef, Input, OnInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';\nimport { BaseElement, Smart } from './smart.element';\nexport { ListItemDisplayMode, ElementRenderMode} from './../index';\nexport { Smart } from './smart.element';\nexport { ListItem } from './../index';\n\n\n@Directive({\n\texportAs: 'smart-list-item',\tselector: 'smart-list-item, [smart-list-item]'\n})\n\nexport class ListItemComponent extends BaseElement implements OnInit, Aft