@acorex/components 7.1.0 → 7.1.1

package/fesm2022/acorex-components-mixin.mjs

@@ -5,1252 +5,1252 @@ import { unionBy, flatMapDeep } from 'lodash-es';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { AXObjectUtil } from '@acorex/core/utils';
 
-class AXBaseComponent {
-    id = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
-    /**
-     * A token that specifies the layout direction of component.
-     */
-    //rtl: boolean;
-    #rtl;
-    get rtl() {
-        if (this.#rtl)
-            return this.#rtl;
-        else
-            return this._getHostElement().classList.contains('ax-rtl') ||
-                window
-                    .getComputedStyle(this._getHostElement(), null)
-                    .getPropertyValue('direction') === 'rtl';
-    }
-    set rtl(value) {
-        this.#rtl = value;
-    }
-    #elementRef;
-    _cdr;
-    _isInited;
-    _isRendered;
-    /**
-     *  @ignore
-     */
-    constructor(...args) {
-        this.#elementRef = args[0];
-        this._cdr = args[1];
-    }
-    ngOnInit() {
-        this._isInited = true;
-        this._onInternalInit();
-    }
-    ngAfterViewInit() {
-        this._isRendered = true;
-        this._onInternalViewInit();
-    }
-    ngOnDestroy() {
-        this._onInternalDestroy();
-    }
-    _getHostElement() {
-        return this.#elementRef.nativeElement;
-    }
-    _getInnerElement() {
-        return this._getHostElement().firstElementChild;
-    }
-    _onInternalInit() {
-        this._getHostElement().__axContext__ = this;
-        this._applyRtl();
-        this.onInit();
-    }
-    _onInternalViewInit() {
-        this.onViewInit();
-    }
-    _onInternalDestroy() {
-        this.onDestroy();
-    }
-    onInit() { }
-    onViewInit() { }
-    onDestroy() { }
-    _applyRtl() {
-        if (this.rtl) {
-            this._getHostElement().classList.add('ax-rtl');
-        }
-    }
-    _onOptionChanging(option) {
-        return option?.value;
-    }
-    _onOptionChanged(option) { }
-    _setOption(option) {
-        const oldValue = this[option.name];
-        const newValue = this._onOptionChanging({
-            name: option.name,
-            value: option.value,
-        });
-        //TODO : check real changes
-        if (option.beforeCallback)
-            option.beforeCallback(oldValue, newValue);
-        if (oldValue != newValue) {
-            this[`_${option.name}`] = option.value;
-            this._onOptionChanged({ name: option.name, newValue, oldValue });
-            const emitter = this[`${option.name}Change`];
-            if (emitter)
-                emitter.emit(newValue);
-        }
-        if (option.afterCallback)
-            option.afterCallback(oldValue, newValue);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXBaseComponent });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXBaseComponent, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [Array]
-                }] }]; } });
-function _BaseComponenetMixin(Base) {
-    return class extends Base {
-        constructor(...args) {
-            super(...args);
-        }
-    };
-}
-const BASE_INPUTS = ['rtl'];
+class AXBaseComponent {
+    id = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
+    /**
+     * A token that specifies the layout direction of component.
+     */
+    //rtl: boolean;
+    #rtl;
+    get rtl() {
+        if (this.#rtl)
+            return this.#rtl;
+        else
+            return this._getHostElement().classList.contains('ax-rtl') ||
+                window
+                    .getComputedStyle(this._getHostElement(), null)
+                    .getPropertyValue('direction') === 'rtl';
+    }
+    set rtl(value) {
+        this.#rtl = value;
+    }
+    #elementRef;
+    _cdr;
+    _isInited;
+    _isRendered;
+    /**
+     *  @ignore
+     */
+    constructor(...args) {
+        this.#elementRef = args[0];
+        this._cdr = args[1];
+    }
+    ngOnInit() {
+        this._isInited = true;
+        this._onInternalInit();
+    }
+    ngAfterViewInit() {
+        this._isRendered = true;
+        this._onInternalViewInit();
+    }
+    ngOnDestroy() {
+        this._onInternalDestroy();
+    }
+    _getHostElement() {
+        return this.#elementRef.nativeElement;
+    }
+    _getInnerElement() {
+        return this._getHostElement().firstElementChild;
+    }
+    _onInternalInit() {
+        this._getHostElement().__axContext__ = this;
+        this._applyRtl();
+        this.onInit();
+    }
+    _onInternalViewInit() {
+        this.onViewInit();
+    }
+    _onInternalDestroy() {
+        this.onDestroy();
+    }
+    onInit() { }
+    onViewInit() { }
+    onDestroy() { }
+    _applyRtl() {
+        if (this.rtl) {
+            this._getHostElement().classList.add('ax-rtl');
+        }
+    }
+    _onOptionChanging(option) {
+        return option?.value;
+    }
+    _onOptionChanged(option) { }
+    _setOption(option) {
+        const oldValue = this[option.name];
+        const newValue = this._onOptionChanging({
+            name: option.name,
+            value: option.value,
+        });
+        //TODO : check real changes
+        if (option.beforeCallback)
+            option.beforeCallback(oldValue, newValue);
+        if (oldValue != newValue) {
+            this[`_${option.name}`] = option.value;
+            this._onOptionChanged({ name: option.name, newValue, oldValue });
+            const emitter = this[`${option.name}Change`];
+            if (emitter)
+                emitter.emit(newValue);
+        }
+        if (option.afterCallback)
+            option.afterCallback(oldValue, newValue);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXBaseComponent });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: AXBaseComponent, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [Array]
+                }] }]; } });
+function _BaseComponenetMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+        }
+    };
+}
+const BASE_INPUTS = ['rtl'];
 const BASE_OUTPUT = [];
 
-function _BaseMenuComponentMixin(Base) {
-    return class extends Base {
-        textField = 'text';
-        valueField = 'id';
-        #isLoading = false;
-        #loadedItems = [];
-        visibleField;
-        disableField = 'disabled';
-        hasChildField;
-        iconField = 'icon';
-        openMode = 'click';
-        displayMode = 'sidemenu';
-        dividerField = 'divider';
-        onMenuItemClick = new EventEmitter();
-        constructor(...args) {
-            super(...args);
-        }
-        #items = [];
-        get items() {
-            return this.#items;
-        }
-        set items(v) {
-            if (Array.isArray(v)) {
-                this.#items = v;
-            }
-            else if (typeof v === 'function') {
-                this.#items = v;
-            }
-            else {
-                this.#items = [];
-            }
-        }
-        get displayItems() {
-            if (Array.isArray(this.items)) {
-                return this.#items || [];
-            }
-            else if (typeof this.#items == 'function') {
-                return this.#loadedItems || [];
-            }
-            return [];
-        }
-        get isLoading() {
-            return this.#isLoading;
-        }
-        _formatData(v) {
-            return _.unionBy(v.map((o, i) => {
-                if (typeof o == 'object')
-                    return o;
-                else {
-                    const no = {};
-                    no[this.valueField] = o;
-                    no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
-                    return no;
-                }
-            }), this.valueField);
-        }
-        _findNode(parentId, _children, source) {
-            if (source.length > 0) {
-                source.forEach(element => {
-                    if (element[this.valueField] == parentId) {
-                        element.children = _children;
-                    }
-                    else {
-                        if (element?.children)
-                            this._findNode(parentId, _children, element.children);
-                    }
-                });
-            }
-        }
-        _fetchData(parentId, searchText) {
-            return new Promise(resolve => {
-                if (this.#isLoading) {
-                    return;
-                }
-                if (this.#items) {
-                    this.#isLoading = true;
-                    this.#items({
-                        parentId: parentId,
-                        searchQuery: searchText,
-                    })
-                        .then(c => {
-                        if (Array.isArray(c)) {
-                            if (parentId) {
-                                resolve(this._findNode(parentId, c, this.displayItems));
-                            }
-                            else {
-                                resolve((this.#loadedItems = c));
-                            }
-                        }
-                        this._cdr.markForCheck();
-                    })
-                        .finally(() => {
-                        this.#isLoading = false;
-                    });
-                }
-            });
-        }
-        _onInternalInit() {
-            if (typeof this.#items == 'function') {
-                this._fetchData();
-            }
-            super._onInternalInit();
-        }
-        _getItemDisplayTextTemplte(item) {
-            if (item)
-                return Array.isArray(this.textField) ? this.textField.map(c => item[c]).join(',') : item[this.textField];
-            else
-                return 'Loading...';
-        }
-        refresh() {
-            this._fetchData();
-        }
-    };
-}
-const BASEMENU_INPUTS = [
-    'textField',
-    'valueField',
-    'items',
-    'parentId',
-    'iconField',
-    'tooltip',
-    'opened',
-    'active',
-    'visibleField',
-    'disableField',
-    'hasChildField',
-    'openMode',
-    'displayMode',
-    'dividerField',
-];
+function _BaseMenuComponentMixin(Base) {
+    return class extends Base {
+        textField = 'text';
+        valueField = 'id';
+        #isLoading = false;
+        #loadedItems = [];
+        visibleField;
+        disableField = 'disabled';
+        hasChildField;
+        iconField = 'icon';
+        openMode = 'click';
+        displayMode = 'sidemenu';
+        dividerField = 'divider';
+        onMenuItemClick = new EventEmitter();
+        constructor(...args) {
+            super(...args);
+        }
+        #items = [];
+        get items() {
+            return this.#items;
+        }
+        set items(v) {
+            if (Array.isArray(v)) {
+                this.#items = v;
+            }
+            else if (typeof v === 'function') {
+                this.#items = v;
+            }
+            else {
+                this.#items = [];
+            }
+        }
+        get displayItems() {
+            if (Array.isArray(this.items)) {
+                return this.#items || [];
+            }
+            else if (typeof this.#items == 'function') {
+                return this.#loadedItems || [];
+            }
+            return [];
+        }
+        get isLoading() {
+            return this.#isLoading;
+        }
+        _formatData(v) {
+            return _.unionBy(v.map((o, i) => {
+                if (typeof o == 'object')
+                    return o;
+                else {
+                    const no = {};
+                    no[this.valueField] = o;
+                    no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+                    return no;
+                }
+            }), this.valueField);
+        }
+        _findNode(parentId, _children, source) {
+            if (source.length > 0) {
+                source.forEach(element => {
+                    if (element[this.valueField] == parentId) {
+                        element.children = _children;
+                    }
+                    else {
+                        if (element?.children)
+                            this._findNode(parentId, _children, element.children);
+                    }
+                });
+            }
+        }
+        _fetchData(parentId, searchText) {
+            return new Promise(resolve => {
+                if (this.#isLoading) {
+                    return;
+                }
+                if (this.#items) {
+                    this.#isLoading = true;
+                    this.#items({
+                        parentId: parentId,
+                        searchQuery: searchText,
+                    })
+                        .then(c => {
+                        if (Array.isArray(c)) {
+                            if (parentId) {
+                                resolve(this._findNode(parentId, c, this.displayItems));
+                            }
+                            else {
+                                resolve((this.#loadedItems = c));
+                            }
+                        }
+                        this._cdr.markForCheck();
+                    })
+                        .finally(() => {
+                        this.#isLoading = false;
+                    });
+                }
+            });
+        }
+        _onInternalInit() {
+            if (typeof this.#items == 'function') {
+                this._fetchData();
+            }
+            super._onInternalInit();
+        }
+        _getItemDisplayTextTemplte(item) {
+            if (item)
+                return Array.isArray(this.textField) ? this.textField.map(c => item[c]).join(',') : item[this.textField];
+            else
+                return 'Loading...';
+        }
+        refresh() {
+            this._fetchData();
+        }
+    };
+}
+const BASEMENU_INPUTS = [
+    'textField',
+    'valueField',
+    'items',
+    'parentId',
+    'iconField',
+    'tooltip',
+    'opened',
+    'active',
+    'visibleField',
+    'disableField',
+    'hasChildField',
+    'openMode',
+    'displayMode',
+    'dividerField',
+];
 const BASEMENU_OUTPUT = ['onMenuItemClick'];
 
-function _ButtonComponentMixin(Base) {
-    return class extends Base {
-        _text;
-        /**
-        *  Defines the primary text to show inside the button.
-        */
-        get text() {
-            return this._text;
-        }
-        set text(v) {
-            this._setOption({
-                name: 'text',
-                value: v,
-                afterCallback: () => {
-                    this._cdr.markForCheck();
-                }
-            });
-        }
-        toggleableChange = new EventEmitter();
-        _toggleable = false;
-        /**
-        *  Provides visual styling that indicates if the Button is active
-        */
-        get toggleable() {
-            return this._toggleable;
-        }
-        set toggleable(value) {
-            this._setOption({
-                name: 'toggleable',
-                value
-            });
-        }
-        selectedChange = new EventEmitter();
-        _selected = false;
-        /**
-        *  Indicates if the Button is selected or not
-        */
-        get selected() {
-            return this._selected;
-        }
-        set selected(value) {
-            this._setOption({
-                name: 'selected',
-                value,
-                afterCallback: () => {
-                    this._cdr.markForCheck();
-                }
-            });
-        }
-        constructor(...args) {
-            super(...args);
-        }
-        get _classes() {
-            const cssClasses = {
-                'ax-button-icon': !this.text,
-                'ax-state-disabled': this["disabled"],
-                'ax-state-selected': this.selected
-            };
-            cssClasses[`ax-${this['color'] || 'default'}${this['look'] ? '-' + this['look'] : '-default'}`] = true;
-            return cssClasses;
-        }
-    };
-}
-const BUTTON_INPUTS = [
-    'text',
-    'toggleable',
-    'selected',
-];
+function _ButtonComponentMixin(Base) {
+    return class extends Base {
+        _text;
+        /**
+        *  Defines the primary text to show inside the button.
+        */
+        get text() {
+            return this._text;
+        }
+        set text(v) {
+            this._setOption({
+                name: 'text',
+                value: v,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
+                }
+            });
+        }
+        toggleableChange = new EventEmitter();
+        _toggleable = false;
+        /**
+        *  Provides visual styling that indicates if the Button is active
+        */
+        get toggleable() {
+            return this._toggleable;
+        }
+        set toggleable(value) {
+            this._setOption({
+                name: 'toggleable',
+                value
+            });
+        }
+        selectedChange = new EventEmitter();
+        _selected = false;
+        /**
+        *  Indicates if the Button is selected or not
+        */
+        get selected() {
+            return this._selected;
+        }
+        set selected(value) {
+            this._setOption({
+                name: 'selected',
+                value,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
+                }
+            });
+        }
+        constructor(...args) {
+            super(...args);
+        }
+        get _classes() {
+            const cssClasses = {
+                'ax-button-icon': !this.text,
+                'ax-state-disabled': this["disabled"],
+                'ax-state-selected': this.selected
+            };
+            cssClasses[`ax-${this['color'] || 'default'}${this['look'] ? '-' + this['look'] : '-default'}`] = true;
+            return cssClasses;
+        }
+    };
+}
+const BUTTON_INPUTS = [
+    'text',
+    'toggleable',
+    'selected',
+];
 const BUTTON_OUTPUT = ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'toggleableChange'];
 
-function _ClickableComponenetMixin(Base) {
-    return class extends Base {
-        /**
-        *  Fires each time the user clicks the button.
-        *  @event
-        */
-        onClick = new EventEmitter();
-        _emitOnClickEvent(e) {
-            this.onClick.emit({
-                component: this,
-                htmlElement: this._getHostElement(),
-                nativeEvent: e
-            });
-        }
-        /**
-        *  @ignore
-        */
-        constructor(...args) {
-            super(...args);
-        }
-    };
+function _ClickableComponenetMixin(Base) {
+    return class extends Base {
+        /**
+        *  Fires each time the user clicks the button.
+        *  @event
+        */
+        onClick = new EventEmitter();
+        _emitOnClickEvent(e) {
+            this.onClick.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e
+            });
+        }
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args);
+        }
+    };
 }
 
-function _ColorLookComponentMixin(Base) {
-    return class extends Base {
-        constructor(...args) {
-            super(...args);
-        }
-        colorChange = new EventEmitter();
-        _color = 'primary';
-        /**
-        *  Predefined color schemes
-        */
-        get color() {
-            return this._color;
-        }
-        set color(value) {
-            this._setOption({
-                name: 'color',
-                value,
-                afterCallback: () => {
-                    this._cdr.markForCheck();
-                }
-            });
-        }
-        lookChange = new EventEmitter();
-        _look = 'default';
-        /**
-        *  Predefined look schemes
-        */
-        get look() {
-            return this._look;
-        }
-        set look(value) {
-            this._setOption({
-                name: 'look',
-                value,
-                afterCallback: () => {
-                    this._cdr.markForCheck();
-                }
-            });
-        }
-    };
-}
-const COLOR_LOOK_INPUTS = [
-    'color',
-    'look',
-];
+function _ColorLookComponentMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+        }
+        colorChange = new EventEmitter();
+        _color = 'primary';
+        /**
+        *  Predefined color schemes
+        */
+        get color() {
+            return this._color;
+        }
+        set color(value) {
+            this._setOption({
+                name: 'color',
+                value,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
+                }
+            });
+        }
+        lookChange = new EventEmitter();
+        _look = 'default';
+        /**
+        *  Predefined look schemes
+        */
+        get look() {
+            return this._look;
+        }
+        set look(value) {
+            this._setOption({
+                name: 'look',
+                value,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
+                }
+            });
+        }
+    };
+}
+const COLOR_LOOK_INPUTS = [
+    'color',
+    'look',
+];
 const COLOR_LOOK_OUTPUT = ['lookChange', 'colorChange'];
 
-function _DatalistComponenetMixin(Base) {
-    return class extends Base {
-        valueField = 'id';
-        textField = 'text';
-        childrenField;
-        pageSize = 10;
-        #currentPage = 0;
-        #isLoading = false;
-        #loadedItems = [];
-        #flatItems = [];
-        #totalItems = 0;
-        #isLazy = false;
-        get totalCount() {
-            return this.#totalItems;
-        }
-        get isLazy() {
-            return this.#isLazy;
-        }
-        get loadedCount() {
-            return this.#loadedItems?.length || 0;
-        }
-        constructor(...args) {
-            super(...args);
-        }
-        #items = [];
-        get items() {
-            return this.#items;
-        }
-        set items(v) {
-            if (Array.isArray(v)) {
-                this.#items = this._formatData(v);
-                this._onDataLoaded();
-                this.#generateFlatItems();
-            }
-            else if (typeof v === 'function') {
-                this.#isLazy = true;
-                this.#items = v;
-            }
-            else {
-                this.#items = [];
-                this._onDataLoaded();
-                this.#generateFlatItems();
-            }
-        }
-        get displayItems() {
-            if (Array.isArray(this.items)) {
-                return (this.#items || []);
-            }
-            else if (typeof this.#items == 'function') {
-                return this.#loadedItems || [];
-            }
-            return [];
-        }
-        get flatItems() {
-            return this.#flatItems || [];
-        }
-        get isLoading() {
-            return this.#isLoading;
-        }
-        _formatData(v) {
-            return unionBy(v.map((o, i) => {
-                if (typeof o == 'object')
-                    return o;
-                else {
-                    const no = {};
-                    no[this.valueField] = o;
-                    no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
-                    return no;
-                }
-            }), this.valueField);
-            // return v.map((o, i) => {
-            //     if (typeof o == 'object')
-            //         return o
-            //     else {
-            //         const no: any = {};
-            //         no[this.valueField] = o;
-            //         no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
-            //         return no;
-            //     }
-            // });
-        }
-        _fetchData(opts) {
-            const skip = this.#currentPage * this.pageSize, take = this.pageSize;
-            if ((this.loadedCount >= this.totalCount && this.totalCount != 0) ||
-                this.#isLoading ||
-                !this.#isLazy ||
-                skip > this.totalCount) {
-                return;
-            }
-            if (this.#items) {
-                this.#isLoading = true;
-                const fetchFn = this.#items;
-                fetchFn({ skip, take, searchQuery: opts?.searchQuery })
-                    .then((c) => {
-                    if (Array.isArray(c)) {
-                        this.#loadedItems = this._formatData(c);
-                        this.#totalItems = c.length;
-                    }
-                    else {
-                        this.#totalItems = c.total || c.items?.length || 0;
-                        this.#loadedItems = [
-                            ...new Set(this.#loadedItems.concat(this._formatData(c.items))),
-                        ];
-                        this.#currentPage++;
-                    }
-                    this._cdr.markForCheck();
-                })
-                    .finally(() => {
-                    this.#isLoading = false;
-                    this._onDataLoaded();
-                    this.#generateFlatItems();
-                });
-            }
-        }
-        _onDataLoaded() { }
-        #generateFlatItems() {
-            const flattenFn = (item) => {
-                return [item, flatMapDeep(item.children, flattenFn)];
-            };
-            this.#flatItems = flatMapDeep(this.displayItems, flattenFn);
-        }
-        _getItemDisplayTextTemplte(item) {
-            if (item)
-                return Array.isArray(this.textField)
-                    ? this.textField.map((c) => item[c]).join(',')
-                    : item[this.textField];
-            else
-                return 'Loading...';
-        }
-        _trackByFunction(item) {
-            if (!item)
-                return null;
-            return item[this.valueField];
-        }
-        refresh() {
-            this.empty();
-            this._fetchData();
-        }
-        empty() {
-            this.#isLoading = false;
-            this.#currentPage = 0;
-            if (this.#loadedItems) {
-                this.#loadedItems.length = 0;
-            }
-        }
-    };
-}
-const DATALIST_INPUTS = ['pageSize', 'valueField', 'textField', 'items'];
+function _DatalistComponenetMixin(Base) {
+    return class extends Base {
+        valueField = 'id';
+        textField = 'text';
+        childrenField;
+        pageSize = 10;
+        #currentPage = 0;
+        #isLoading = false;
+        #loadedItems = [];
+        #flatItems = [];
+        #totalItems = 0;
+        #isLazy = false;
+        get totalCount() {
+            return this.#totalItems;
+        }
+        get isLazy() {
+            return this.#isLazy;
+        }
+        get loadedCount() {
+            return this.#loadedItems?.length || 0;
+        }
+        constructor(...args) {
+            super(...args);
+        }
+        #items = [];
+        get items() {
+            return this.#items;
+        }
+        set items(v) {
+            if (Array.isArray(v)) {
+                this.#items = this._formatData(v);
+                this._onDataLoaded();
+                this.#generateFlatItems();
+            }
+            else if (typeof v === 'function') {
+                this.#isLazy = true;
+                this.#items = v;
+            }
+            else {
+                this.#items = [];
+                this._onDataLoaded();
+                this.#generateFlatItems();
+            }
+        }
+        get displayItems() {
+            if (Array.isArray(this.items)) {
+                return (this.#items || []);
+            }
+            else if (typeof this.#items == 'function') {
+                return this.#loadedItems || [];
+            }
+            return [];
+        }
+        get flatItems() {
+            return this.#flatItems || [];
+        }
+        get isLoading() {
+            return this.#isLoading;
+        }
+        _formatData(v) {
+            return unionBy(v.map((o, i) => {
+                if (typeof o == 'object')
+                    return o;
+                else {
+                    const no = {};
+                    no[this.valueField] = o;
+                    no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+                    return no;
+                }
+            }), this.valueField);
+            // return v.map((o, i) => {
+            //     if (typeof o == 'object')
+            //         return o
+            //     else {
+            //         const no: any = {};
+            //         no[this.valueField] = o;
+            //         no[Array.isArray(this.textField) ? this.textField[0] : this.textField] = o;
+            //         return no;
+            //     }
+            // });
+        }
+        _fetchData(opts) {
+            const skip = this.#currentPage * this.pageSize, take = this.pageSize;
+            if ((this.loadedCount >= this.totalCount && this.totalCount != 0) ||
+                this.#isLoading ||
+                !this.#isLazy ||
+                skip > this.totalCount) {
+                return;
+            }
+            if (this.#items) {
+                this.#isLoading = true;
+                const fetchFn = this.#items;
+                fetchFn({ skip, take, searchQuery: opts?.searchQuery })
+                    .then((c) => {
+                    if (Array.isArray(c)) {
+                        this.#loadedItems = this._formatData(c);
+                        this.#totalItems = c.length;
+                    }
+                    else {
+                        this.#totalItems = c.total || c.items?.length || 0;
+                        this.#loadedItems = [
+                            ...new Set(this.#loadedItems.concat(this._formatData(c.items))),
+                        ];
+                        this.#currentPage++;
+                    }
+                    this._cdr.markForCheck();
+                })
+                    .finally(() => {
+                    this.#isLoading = false;
+                    this._onDataLoaded();
+                    this.#generateFlatItems();
+                });
+            }
+        }
+        _onDataLoaded() { }
+        #generateFlatItems() {
+            const flattenFn = (item) => {
+                return [item, flatMapDeep(item.children, flattenFn)];
+            };
+            this.#flatItems = flatMapDeep(this.displayItems, flattenFn);
+        }
+        _getItemDisplayTextTemplte(item) {
+            if (item)
+                return Array.isArray(this.textField)
+                    ? this.textField.map((c) => item[c]).join(',')
+                    : item[this.textField];
+            else
+                return 'Loading...';
+        }
+        _trackByFunction(item) {
+            if (!item)
+                return null;
+            return item[this.valueField];
+        }
+        refresh() {
+            this.empty();
+            this._fetchData();
+        }
+        empty() {
+            this.#isLoading = false;
+            this.#currentPage = 0;
+            if (this.#loadedItems) {
+                this.#loadedItems.length = 0;
+            }
+        }
+    };
+}
+const DATALIST_INPUTS = ['pageSize', 'valueField', 'textField', 'items'];
 const DATALIST_OUTPUT = [];
 
 ;
 
-function _DropdownComponenetMixin(Base) {
-    class Mixin extends Base {
-        readonly = false;
-        onOpened = new EventEmitter();
-        onClosed = new EventEmitter();
-        position = [];
-        _emitOnOpenedEvent() {
-            this.onOpened.emit({
-                component: this,
-                htmlElement: this._getHostElement()
-            });
-        }
-        _emitOnClosedEvent() {
-            this.onClosed.emit({
-                component: this,
-                htmlElement: this._getHostElement()
-            });
-        }
-        onInit() {
-            super.onInit();
-            this.popover.onOpened.subscribe(this.onOpened);
-            this.popover.onClosed.subscribe(this.onClosed);
-        }
-        onViewInit() {
-            // wait for documentElement
-            setTimeout(() => {
-                if (this.position.length == 0) {
-                    const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
-                    const list = [
-                        {
-                            originX: 'start',
-                            originY: 'bottom',
-                            overlayX: 'start',
-                            overlayY: 'top',
-                            offsetY: offset
-                        },
-                        {
-                            originX: 'start',
-                            originY: 'top',
-                            overlayX: 'start',
-                            overlayY: 'bottom',
-                            offsetY: -offset
-                        },
-                        {
-                            originX: 'end',
-                            originY: 'bottom',
-                            overlayX: 'end',
-                            overlayY: 'top',
-                            offsetY: offset
-                        },
-                        {
-                            originX: 'end',
-                            originY: 'top',
-                            overlayX: 'end',
-                            overlayY: 'bottom',
-                            offsetY: -offset
-                        },
-                    ];
-                    this.position.push(...list);
-                }
-            }, 500);
-        }
-        toggle() {
-            if (this['disabled'] !== true) {
-                this.popover.toggle();
-            }
-        }
-        close() {
-            if (!this.isOpen || this['disabled']) {
-                return;
-            }
-            this.popover.close();
-            this?.focus();
-        }
-        open() {
-            if (this.isOpen || this['disabled']) {
-                return;
-            }
-            this.popover.open();
-            this.popover.focus();
-        }
-        get isOpen() {
-            return this.popover?.isOpen;
-        }
-        constructor(...args) {
-            super(...args);
-        }
-    }
-    return Mixin;
-}
-const DROPDOWN_INPUTS = [
-    'isOpen',
-    'fitParent',
-    'dropdownWidth',
-    'position'
-];
+function _DropdownComponenetMixin(Base) {
+    class Mixin extends Base {
+        readonly = false;
+        onOpened = new EventEmitter();
+        onClosed = new EventEmitter();
+        position = [];
+        _emitOnOpenedEvent() {
+            this.onOpened.emit({
+                component: this,
+                htmlElement: this._getHostElement()
+            });
+        }
+        _emitOnClosedEvent() {
+            this.onClosed.emit({
+                component: this,
+                htmlElement: this._getHostElement()
+            });
+        }
+        onInit() {
+            super.onInit();
+            this.popover.onOpened.subscribe(this.onOpened);
+            this.popover.onClosed.subscribe(this.onClosed);
+        }
+        onViewInit() {
+            // wait for documentElement
+            setTimeout(() => {
+                if (this.position.length == 0) {
+                    const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
+                    const list = [
+                        {
+                            originX: 'start',
+                            originY: 'bottom',
+                            overlayX: 'start',
+                            overlayY: 'top',
+                            offsetY: offset
+                        },
+                        {
+                            originX: 'start',
+                            originY: 'top',
+                            overlayX: 'start',
+                            overlayY: 'bottom',
+                            offsetY: -offset
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'bottom',
+                            overlayX: 'end',
+                            overlayY: 'top',
+                            offsetY: offset
+                        },
+                        {
+                            originX: 'end',
+                            originY: 'top',
+                            overlayX: 'end',
+                            overlayY: 'bottom',
+                            offsetY: -offset
+                        },
+                    ];
+                    this.position.push(...list);
+                }
+            }, 500);
+        }
+        toggle() {
+            if (this['disabled'] !== true) {
+                this.popover.toggle();
+            }
+        }
+        close() {
+            if (!this.isOpen || this['disabled']) {
+                return;
+            }
+            this.popover.close();
+            this?.focus();
+        }
+        open() {
+            if (this.isOpen || this['disabled']) {
+                return;
+            }
+            this.popover.open();
+            this.popover.focus();
+        }
+        get isOpen() {
+            return this.popover?.isOpen;
+        }
+        constructor(...args) {
+            super(...args);
+        }
+    }
+    return Mixin;
+}
+const DROPDOWN_INPUTS = [
+    'isOpen',
+    'fitParent',
+    'dropdownWidth',
+    'position'
+];
 const DROPDOWN_OUTPUT = ['onOpened', 'onClosed'];
 
-function _InteractiveComponenetMixin(Base) {
-    class Mixin extends Base {
-        #disabled = false;
-        /**
-        *  If set to true, it disables the component.
-        */
-        get disabled() { return this.#disabled; }
-        set disabled(value) {
-            value = this._onOptionChanging({ name: 'disabled', value: value });
-            if (value != this.disabled) {
-                const oldValue = this.disabled;
-                this.#disabled = coerceBooleanProperty(value);
-                this._onOptionChanged({ name: 'disabled', oldValue, newValue: value });
-                this._cdr.markForCheck();
-            }
-        }
-        #tabIndex = 0;
-        /**
-        *  Specifies the tabindex of the component.
-        */
-        get tabIndex() { return this.disabled ? -1 : this.#tabIndex; }
-        set tabIndex(value) {
-            this.#tabIndex = value != null ? coerceNumberProperty(value) : 0;
-        }
-        /**
-        *  Fires each time the component gets focused.
-        *  @event
-        */
-        onFocus = new EventEmitter();
-        _emitOnFocusEvent(e) {
-            this.onFocus.emit({
-                component: this,
-                htmlElement: this._getHostElement(),
-                nativeEvent: e
-            });
-        }
-        /**
-        *  Fires each time the component gets blurred.
-        *  @event
-        */
-        onBlur = new EventEmitter();
-        _emitOnBlurEvent(e) {
-            this.onBlur.emit({
-                component: this,
-                htmlElement: this._getHostElement(),
-                nativeEvent: e
-            });
-        }
-        /**
-        *  Focuses the component.
-        */
-        focus() {
-            const list = ['button', 'input', '[href]', 'select', 'textarea', '[tabindex]'].map(c => c + ':not([tabindex="-1"])');
-            const focusable = this._getHostElement().querySelector(list.join(', '));
-            if (focusable) {
-                focusable.focus();
-            }
-        }
-        /**
-        *  Check component is focused or has any focused element.
-        */
-        hasFocus() {
-            return this._getHostElement().matches(':focus-within') || this._getHostElement().matches(':focus');
-        }
-        /**
-        *  @ignore
-        */
-        constructor(...args) {
-            super(...args);
-        }
-    }
-    return Mixin;
-}
-const INTERACTIVE_INPUTS = [
-    'disabled',
-    'tabIndex',
-];
+function _InteractiveComponenetMixin(Base) {
+    class Mixin extends Base {
+        #disabled = false;
+        /**
+        *  If set to true, it disables the component.
+        */
+        get disabled() { return this.#disabled; }
+        set disabled(value) {
+            value = this._onOptionChanging({ name: 'disabled', value: value });
+            if (value != this.disabled) {
+                const oldValue = this.disabled;
+                this.#disabled = coerceBooleanProperty(value);
+                this._onOptionChanged({ name: 'disabled', oldValue, newValue: value });
+                this._cdr.markForCheck();
+            }
+        }
+        #tabIndex = 0;
+        /**
+        *  Specifies the tabindex of the component.
+        */
+        get tabIndex() { return this.disabled ? -1 : this.#tabIndex; }
+        set tabIndex(value) {
+            this.#tabIndex = value != null ? coerceNumberProperty(value) : 0;
+        }
+        /**
+        *  Fires each time the component gets focused.
+        *  @event
+        */
+        onFocus = new EventEmitter();
+        _emitOnFocusEvent(e) {
+            this.onFocus.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e
+            });
+        }
+        /**
+        *  Fires each time the component gets blurred.
+        *  @event
+        */
+        onBlur = new EventEmitter();
+        _emitOnBlurEvent(e) {
+            this.onBlur.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e
+            });
+        }
+        /**
+        *  Focuses the component.
+        */
+        focus() {
+            const list = ['button', 'input', '[href]', 'select', 'textarea', '[tabindex]'].map(c => c + ':not([tabindex="-1"])');
+            const focusable = this._getHostElement().querySelector(list.join(', '));
+            if (focusable) {
+                focusable.focus();
+            }
+        }
+        /**
+        *  Check component is focused or has any focused element.
+        */
+        hasFocus() {
+            return this._getHostElement().matches(':focus-within') || this._getHostElement().matches(':focus');
+        }
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args);
+        }
+    }
+    return Mixin;
+}
+const INTERACTIVE_INPUTS = [
+    'disabled',
+    'tabIndex',
+];
 const INTERACTIVE_OUTPUT = ['onBlur', 'onFocus'];
 
-function _LoadingComponenetMixin(Base) {
-    return class extends Base {
-        /**
-       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
-       */
-        loading = false;
-        /**
-       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
-       */
-        loadingIconClass;
-        /**
-       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
-       */
-        loadingText;
-        constructor(...args) {
-            super(...args.slice(0, 2));
-        }
-        _onInternalInit() {
-            // if (!this.size) {
-            //     this.size = AXConfig.get('layout.size', 'sm');
-            // }
-            super._onInternalInit();
-        }
-    };
+function _LoadingComponenetMixin(Base) {
+    return class extends Base {
+        /**
+       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
+       */
+        loading = false;
+        /**
+       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
+       */
+        loadingIconClass;
+        /**
+       *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons.
+       */
+        loadingText;
+        constructor(...args) {
+            super(...args.slice(0, 2));
+        }
+        _onInternalInit() {
+            // if (!this.size) {
+            //     this.size = AXConfig.get('layout.size', 'sm');
+            // }
+            super._onInternalInit();
+        }
+    };
 }
 
-function _SelectionComponenetMixin(Base) {
-    return class extends Base {
-        valueField = 'id';
-        textField = 'text';
-        disabledField = 'disabled';
-        disabledCallback;
-        multiple = false;
-        selectionMode = 'value';
-        /**
-        *  Defines the primary text to show inside the button.
-        */
-        get items() {
-            return [];
-        }
-        get displayItems() {
-            return [];
-        }
-        get flatItems() {
-            return [];
-        }
-        valueChange = new EventEmitter();
-        onValueChanged = new EventEmitter();
-        constructor(...args) {
-            super(...args);
-        }
-        _onInternalInit() {
-            super._onInternalInit();
-        }
-        _value;
-        get value() {
-            return this._value;
-        }
-        set value(v) {
-            v = this._internalSetValue(v);
-            if (v !== this._value) {
-                const oldValue = AXObjectUtil.deepJSONClone(this._value);
-                if (this.multiple) {
-                    this._value = Array.isArray(v) ? v : (v ? [v] : []);
-                }
-                else {
-                    this._value = Array.isArray(v) ? v[0] : v;
-                }
-                this._renderSelection();
-                this.valueChange.emit(this._value);
-                this.onValueChanged.emit({
-                    component: this,
-                    htmlElement: this._getHostElement(),
-                    isUserInteraction: false,
-                    oldValue,
-                    value: this._value,
-                    selectedKeys: this.selectedItems.map(c => c[this.valueField]),
-                    selectedItems: this.selectedItems.slice()
-                });
-                if (v == null || v == undefined || v == "") {
-                    this._setState('clear');
-                }
-                else {
-                    if (this._isInited) {
-                        this.validate();
-                    }
-                }
-            }
-        }
-        _selectedItems;
-        get selectedItems() {
-            return this._selectedItems || [];
-        }
-        _renderSelection() {
-            const func = () => {
-                if (this.value == null || this.value == undefined) {
-                    return [];
-                }
-                const items = this.flatItems;
-                if (items.length > 0) {
-                    return items.filter(i => {
-                        if (Array.isArray(this.value)) {
-                            return this.value.some(ii => {
-                                if (typeof ii === 'object') {
-                                    return i[this.valueField] === ii[this.valueField];
-                                }
-                                else {
-                                    return i[this.valueField] === ii;
-                                }
-                            });
-                        }
-                        else {
-                            if (typeof this.value === 'object') {
-                                return i[this.valueField] === this.value[this.valueField];
-                            }
-                            else {
-                                return i[this.valueField] === this.value;
-                            }
-                        }
-                    });
-                }
-                if (Array.isArray(this.value)) {
-                    return this.value.map(ii => {
-                        if (typeof ii === 'object') {
-                            return ii;
-                        }
-                        else {
-                            const fake = {};
-                            fake[this.valueField] = this.value;
-                            fake[this.textField] = this.value;
-                            return fake;
-                        }
-                    });
-                }
-                else {
-                    if (typeof this.value === 'object') {
-                        return [this.value];
-                    }
-                    else {
-                        const fake = {};
-                        fake[this.valueField] = this.value;
-                        fake[this.textField] = this.value;
-                        return [fake];
-                    }
-                }
-            };
-            this._selectedItems = func();
-        }
-        _getItemByDataMode(item) {
-            return this.selectionMode === 'item' ? item : item[this.valueField];
-        }
-        _getItemValue(item) {
-            return typeof item === 'object' ? item[this.valueField] : item;
-        }
-        unselectItems(...items) {
-            if (!items || items.length === 0) {
-                this.value = null;
-            }
-            else if (Array.isArray(this.value)) {
-                this.value = this.value.filter(c => !items.some(d => this._getItemValue(c) === this._getItemValue(d)));
-            }
-            else {
-                this.value = null;
-            }
-        }
-        selectItems(...items) {
-            debugger;
-            if (items && items.length) {
-                if (this.multiple) {
-                    this.value = (this.value || []).concat(items.map(c => this._getItemByDataMode(c)));
-                }
-                else {
-                    this.value = this._getItemByDataMode(items[0]);
-                }
-            }
-        }
-        toggleSelect(...items) {
-            if (items && items.length) {
-                items.forEach(item => {
-                    if (this.multiple) {
-                        this.isItemSelected(item) ? this.unselectItems(item) : this.selectItems(item);
-                    }
-                    else {
-                        this.selectItems(item);
-                    }
-                });
-            }
-        }
-        isItemSelected(item) {
-            return this.selectedItems.some(c => c[this.valueField] === item[this.valueField]);
-        }
-        isItemDisabled(item) {
-            return coerceBooleanProperty(item[this.disabledField]) === true || (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false);
-        }
-    };
-}
-const SELECTION_INPUTS = [
-    'valueField',
-    'textField',
-    'disabledField',
-    'disabledCallback',
-    'multiple',
-    'selectionMode'
-];
+function _SelectionComponenetMixin(Base) {
+    return class extends Base {
+        valueField = 'id';
+        textField = 'text';
+        disabledField = 'disabled';
+        disabledCallback;
+        multiple = false;
+        selectionMode = 'value';
+        /**
+        *  Defines the primary text to show inside the button.
+        */
+        get items() {
+            return [];
+        }
+        get displayItems() {
+            return [];
+        }
+        get flatItems() {
+            return [];
+        }
+        valueChange = new EventEmitter();
+        onValueChanged = new EventEmitter();
+        constructor(...args) {
+            super(...args);
+        }
+        _onInternalInit() {
+            super._onInternalInit();
+        }
+        _value;
+        get value() {
+            return this._value;
+        }
+        set value(v) {
+            v = this._internalSetValue(v);
+            if (v !== this._value) {
+                const oldValue = AXObjectUtil.deepJSONClone(this._value);
+                if (this.multiple) {
+                    this._value = Array.isArray(v) ? v : (v ? [v] : []);
+                }
+                else {
+                    this._value = Array.isArray(v) ? v[0] : v;
+                }
+                this._renderSelection();
+                this.valueChange.emit(this._value);
+                this.onValueChanged.emit({
+                    component: this,
+                    htmlElement: this._getHostElement(),
+                    isUserInteraction: false,
+                    oldValue,
+                    value: this._value,
+                    selectedKeys: this.selectedItems.map(c => c[this.valueField]),
+                    selectedItems: this.selectedItems.slice()
+                });
+                if (v == null || v == undefined || v == "") {
+                    this._setState('clear');
+                }
+                else {
+                    if (this._isInited) {
+                        this.validate();
+                    }
+                }
+            }
+        }
+        _selectedItems;
+        get selectedItems() {
+            return this._selectedItems || [];
+        }
+        _renderSelection() {
+            const func = () => {
+                if (this.value == null || this.value == undefined) {
+                    return [];
+                }
+                const items = this.flatItems;
+                if (items.length > 0) {
+                    return items.filter(i => {
+                        if (Array.isArray(this.value)) {
+                            return this.value.some(ii => {
+                                if (typeof ii === 'object') {
+                                    return i[this.valueField] === ii[this.valueField];
+                                }
+                                else {
+                                    return i[this.valueField] === ii;
+                                }
+                            });
+                        }
+                        else {
+                            if (typeof this.value === 'object') {
+                                return i[this.valueField] === this.value[this.valueField];
+                            }
+                            else {
+                                return i[this.valueField] === this.value;
+                            }
+                        }
+                    });
+                }
+                if (Array.isArray(this.value)) {
+                    return this.value.map(ii => {
+                        if (typeof ii === 'object') {
+                            return ii;
+                        }
+                        else {
+                            const fake = {};
+                            fake[this.valueField] = this.value;
+                            fake[this.textField] = this.value;
+                            return fake;
+                        }
+                    });
+                }
+                else {
+                    if (typeof this.value === 'object') {
+                        return [this.value];
+                    }
+                    else {
+                        const fake = {};
+                        fake[this.valueField] = this.value;
+                        fake[this.textField] = this.value;
+                        return [fake];
+                    }
+                }
+            };
+            this._selectedItems = func();
+        }
+        _getItemByDataMode(item) {
+            return this.selectionMode === 'item' ? item : item[this.valueField];
+        }
+        _getItemValue(item) {
+            return typeof item === 'object' ? item[this.valueField] : item;
+        }
+        unselectItems(...items) {
+            if (!items || items.length === 0) {
+                this.value = null;
+            }
+            else if (Array.isArray(this.value)) {
+                this.value = this.value.filter(c => !items.some(d => this._getItemValue(c) === this._getItemValue(d)));
+            }
+            else {
+                this.value = null;
+            }
+        }
+        selectItems(...items) {
+            debugger;
+            if (items && items.length) {
+                if (this.multiple) {
+                    this.value = (this.value || []).concat(items.map(c => this._getItemByDataMode(c)));
+                }
+                else {
+                    this.value = this._getItemByDataMode(items[0]);
+                }
+            }
+        }
+        toggleSelect(...items) {
+            if (items && items.length) {
+                items.forEach(item => {
+                    if (this.multiple) {
+                        this.isItemSelected(item) ? this.unselectItems(item) : this.selectItems(item);
+                    }
+                    else {
+                        this.selectItems(item);
+                    }
+                });
+            }
+        }
+        isItemSelected(item) {
+            return this.selectedItems.some(c => c[this.valueField] === item[this.valueField]);
+        }
+        isItemDisabled(item) {
+            return coerceBooleanProperty(item[this.disabledField]) === true || (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false);
+        }
+    };
+}
+const SELECTION_INPUTS = [
+    'valueField',
+    'textField',
+    'disabledField',
+    'disabledCallback',
+    'multiple',
+    'selectionMode'
+];
 const SELECTION_OUTPUT = ['onValueChanged', 'valueChanged'];
 
-function _SizableComponenetMixin(Base) {
-    return class extends Base {
-        /**
-        *  A token that specifies the size of component.
-        */
-        size;
-        /**
-        *  @ignore
-        */
-        constructor(...args) {
-            super(...args.slice(0, 2));
-        }
-        _onInternalInit() {
-            super._onInternalInit();
-        }
-    };
-}
-const SIZABLE_INPUTS = [
-    'size',
-];
+function _SizableComponenetMixin(Base) {
+    return class extends Base {
+        /**
+        *  A token that specifies the size of component.
+        */
+        size;
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args.slice(0, 2));
+        }
+        _onInternalInit() {
+            super._onInternalInit();
+        }
+    };
+}
+const SIZABLE_INPUTS = [
+    'size',
+];
 const SIZABLE_OUTPUT = [];
 
-function _TextboxComponenetMixin(Base) {
-    return class extends Base {
-        /**
-       *  A string value that specifies the type of text box.
-       */
-        type = 'text';
-        /**
-        *  A string value that specifies the placeholder of text box.
-        */
-        placeholder = '';
-        /**
-        *  A number value that specifies the maximum characters of text box.
-        */
-        maxLength;
-        /**
-        *  Specifies that autocomplete is on or off.
-        */
-        autoComplete;
-        /**
-        *  Fires each time the user press a key.
-        *  @event
-        */
-        onKeyDown = new EventEmitter();
-        /**
-      *  Fires each time the user press a key.
-      *  @event
-      */
-        onKeyUp = new EventEmitter();
-        /**
-        *  Fires each time the user press a key.
-        *  @event
-        */
-        onKeyPress = new EventEmitter();
-        _emitOnKeydownEvent(e) {
-            this.onKeyDown.emit({
-                component: this,
-                nativeEvent: e
-            });
-            this._setUserInteraction();
-        }
-        _emitOnKeyupEvent(e) {
-            this.onKeyUp.emit({
-                component: this,
-                nativeEvent: e
-            });
-            this._setUserInteraction();
-        }
-        _emitOnKeypressEvent(e) {
-            this.onKeyPress.emit({
-                component: this,
-                nativeEvent: e
-            });
-            this._setUserInteraction();
-        }
-        /**
-        *  @ignore
-        */
-        constructor(...args) {
-            super(...args.slice(0, 2));
-        }
-    };
-}
-const TEXTBOX_INPUTS = ['placeholder', 'maxLength', 'allowNull', 'type', 'autoComplete', 'readonly', 'value', 'name'];
+function _TextboxComponenetMixin(Base) {
+    return class extends Base {
+        /**
+       *  A string value that specifies the type of text box.
+       */
+        type = 'text';
+        /**
+        *  A string value that specifies the placeholder of text box.
+        */
+        placeholder = '';
+        /**
+        *  A number value that specifies the maximum characters of text box.
+        */
+        maxLength;
+        /**
+        *  Specifies that autocomplete is on or off.
+        */
+        autoComplete;
+        /**
+        *  Fires each time the user press a key.
+        *  @event
+        */
+        onKeyDown = new EventEmitter();
+        /**
+      *  Fires each time the user press a key.
+      *  @event
+      */
+        onKeyUp = new EventEmitter();
+        /**
+        *  Fires each time the user press a key.
+        *  @event
+        */
+        onKeyPress = new EventEmitter();
+        _emitOnKeydownEvent(e) {
+            this.onKeyDown.emit({
+                component: this,
+                nativeEvent: e
+            });
+            this._setUserInteraction();
+        }
+        _emitOnKeyupEvent(e) {
+            this.onKeyUp.emit({
+                component: this,
+                nativeEvent: e
+            });
+            this._setUserInteraction();
+        }
+        _emitOnKeypressEvent(e) {
+            this.onKeyPress.emit({
+                component: this,
+                nativeEvent: e
+            });
+            this._setUserInteraction();
+        }
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args.slice(0, 2));
+        }
+    };
+}
+const TEXTBOX_INPUTS = ['placeholder', 'maxLength', 'allowNull', 'type', 'autoComplete', 'readonly', 'value', 'name'];
 const TEXTBOX_OUTPUT = ['valueChange', 'onValueChanged'];
 
-function _ValueComponenetMixin(Base) {
-    return class extends Base {
-        /**
-         *  Fires each time the user press a key.
-         *  @event
-         */
-        onValueChanged = new EventEmitter();
-        valueChange = new EventEmitter();
-        stateChange = new EventEmitter();
-        #readonly = false;
-        /**
-         *  If set to true, user cannot change the value of component.
-         */
-        get readonly() {
-            return this.#readonly;
-        }
-        set readonly(value) {
-            this.#readonly = coerceBooleanProperty(value);
-        }
-        #allowNull = true;
-        get allowNull() {
-            return this.#allowNull;
-        }
-        set allowNull(value) {
-            this.#allowNull = coerceBooleanProperty(value);
-        }
-        #name;
-        get name() {
-            return this.#name;
-        }
-        set name(value) {
-            this.#name = value;
-        }
-        #isUserInteraction = false;
-        get isUserInteraction() {
-            return this.#isUserInteraction;
-        }
-        #value;
-        get value() {
-            return this._internalGetValue();
-        }
-        set value(v) {
-            v = this._internalSetValue(v);
-            //if (!this._isInited ) {
-            const old = AXObjectUtil.deepJSONClone(this.value);
-            // TODO: check real equality
-            if (v != old) {
-                this.#value = v;
-                this._emitOnValueChangedEvent(old, this.value);
-                this._cdr.markForCheck();
-                if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
-                    this._setState('clear');
-                }
-                // else {
-                //   if (this._isInited) {
-                //     this.validate();
-                //   }
-                // }
-            }
-            this.#isUserInteraction = false;
-            //}
-        }
-        #state = 'clear';
-        get state() {
-            return this.#state;
-        }
-        set state(value) {
-            this._setState(value);
-            this.stateChange.emit(value);
-        }
-        _emitOnValueChangedEvent(oldValue, newValue) {
-            this.valueChange.emit(newValue);
-            this.onValueChanged.emit({
-                component: this,
-                value: newValue,
-                oldValue: oldValue,
-                name: this.name,
-                isUserInteraction: this.isUserInteraction,
-            });
-            this._onValueChanged(oldValue, this.#value);
-            this.#isUserInteraction = false;
-        }
-        _internalSetValue(value) {
-            return this._setValue(value);
-        }
-        _internalGetValue() {
-            return this._getValue(this.#value);
-        }
-        _setValue(value) {
-            return value;
-        }
-        _getValue(value) {
-            return value;
-        }
-        _setUserInteraction() {
-            this.#isUserInteraction = true;
-        }
-        _onValueChanged(oldValue, newValue) { }
-        _onInternalInit() {
-            this._getHostElement().setAttribute('ax-form-input', 'true');
-            super._onInternalInit();
-        }
-        _onInternalViewInit() {
-            this._checkRequired();
-            super._onInternalViewInit();
-        }
-        _onInternalDestroy() {
-            super.onDestroy();
-        }
-        clear() {
-            this.value = null;
-        }
-        _checkRequired() {
-            const isRequired = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).some(c => c.__axContext__.enabled && c.__axContext__.rule == 'required');
-            //
-            if (isRequired) {
-                const container = this._getHostElement().classList.contains('ax-editor-container')
-                    ? this._getHostElement()
-                    : this._getHostElement().querySelector('.ax-editor-container');
-                const formField = container?.closest('.ax-form-field');
-                const label = formField?.querySelector('ax-label')?.__axContext__;
-                if (label)
-                    label.required = true;
-            }
-        }
-        validate() {
-            const rules = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).filter(c => c.__axContext__.enabled);
-            //
-            if (!rules || rules.length === 0) {
-                this._setState('clear');
-                return Promise.resolve({
-                    result: true,
-                    value: this.value,
-                    name: this.name,
-                    id: this.id,
-                });
-            }
-            return new Promise(resolve => {
-                Promise.all(rules
-                    .filter(c => typeof c?.validate === 'function')
-                    .map(c => {
-                    return c.validate(this.value);
-                })).then(d => {
-                    const error = d.find(c => c.result === false);
-                    if (error) {
-                        this._setState('error', error.message);
-                        resolve({
-                            result: false,
-                            value: this.value,
-                            message: error.message,
-                            name: this.name,
-                            id: this.id,
-                        });
-                    }
-                    else {
-                        this._setState('success');
-                        resolve({
-                            result: true,
-                            value: this.value,
-                            name: this.name,
-                            id: this.id,
-                        });
-                    }
-                });
-            });
-        }
-        /**
-         *  @ignore
-         */
-        constructor(...args) {
-            super(...args);
-        }
-        _setState(state, ...args) {
-            const container = this._getHostElement().classList.contains('ax-editor-container')
-                ? this._getHostElement()
-                : this._getHostElement().querySelector('.ax-editor-container');
-            const formField = container?.closest('.ax-form-field');
-            const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
-            let target = container || this._getInnerElement();
-            if (target?.querySelector('.ax-error-container')) {
-                target = target.querySelector('.ax-error-container');
-            }
-            const parent = target?.parentElement;
-            if (!target || !parent)
-                return;
-            switch (state) {
-                case 'clear':
-                    this.#state = 'clear';
-                    if (parent.querySelector('span.ax-error-message')) {
-                        parent.removeChild(parent.querySelector('span.ax-error-message'));
-                    }
-                    label?.classList.remove('ax-state-error');
-                    target.classList.remove('ax-state-error', 'ax-state-success');
-                    break;
-                case 'success':
-                    this._setState('clear');
-                    target.classList.add('ax-state-success');
-                    this.#state = 'success';
-                    break;
-                case 'error':
-                    this._setState('clear');
-                    if (args[0]) {
-                        const span = document.createElement('span');
-                        span.innerText = args[0];
-                        span.classList.add('ax-error-message');
-                        parent.appendChild(span);
-                    }
-                    label?.classList.add('ax-state-error');
-                    target.classList.add('ax-state-error');
-                    this.#state = 'error';
-                    break;
-            }
-            this._cdr.markForCheck();
-        }
-    };
+function _ValueComponenetMixin(Base) {
+    return class extends Base {
+        /**
+         *  Fires each time the user press a key.
+         *  @event
+         */
+        onValueChanged = new EventEmitter();
+        valueChange = new EventEmitter();
+        stateChange = new EventEmitter();
+        #readonly = false;
+        /**
+         *  If set to true, user cannot change the value of component.
+         */
+        get readonly() {
+            return this.#readonly;
+        }
+        set readonly(value) {
+            this.#readonly = coerceBooleanProperty(value);
+        }
+        #allowNull = true;
+        get allowNull() {
+            return this.#allowNull;
+        }
+        set allowNull(value) {
+            this.#allowNull = coerceBooleanProperty(value);
+        }
+        #name;
+        get name() {
+            return this.#name;
+        }
+        set name(value) {
+            this.#name = value;
+        }
+        #isUserInteraction = false;
+        get isUserInteraction() {
+            return this.#isUserInteraction;
+        }
+        #value;
+        get value() {
+            return this._internalGetValue();
+        }
+        set value(v) {
+            v = this._internalSetValue(v);
+            //if (!this._isInited ) {
+            const old = AXObjectUtil.deepJSONClone(this.value);
+            // TODO: check real equality
+            if (v != old) {
+                this.#value = v;
+                this._emitOnValueChangedEvent(old, this.value);
+                this._cdr.markForCheck();
+                if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
+                    this._setState('clear');
+                }
+                // else {
+                //   if (this._isInited) {
+                //     this.validate();
+                //   }
+                // }
+            }
+            this.#isUserInteraction = false;
+            //}
+        }
+        #state = 'clear';
+        get state() {
+            return this.#state;
+        }
+        set state(value) {
+            this._setState(value);
+            this.stateChange.emit(value);
+        }
+        _emitOnValueChangedEvent(oldValue, newValue) {
+            this.valueChange.emit(newValue);
+            this.onValueChanged.emit({
+                component: this,
+                value: newValue,
+                oldValue: oldValue,
+                name: this.name,
+                isUserInteraction: this.isUserInteraction,
+            });
+            this._onValueChanged(oldValue, this.#value);
+            this.#isUserInteraction = false;
+        }
+        _internalSetValue(value) {
+            return this._setValue(value);
+        }
+        _internalGetValue() {
+            return this._getValue(this.#value);
+        }
+        _setValue(value) {
+            return value;
+        }
+        _getValue(value) {
+            return value;
+        }
+        _setUserInteraction() {
+            this.#isUserInteraction = true;
+        }
+        _onValueChanged(oldValue, newValue) { }
+        _onInternalInit() {
+            this._getHostElement().setAttribute('ax-form-input', 'true');
+            super._onInternalInit();
+        }
+        _onInternalViewInit() {
+            this._checkRequired();
+            super._onInternalViewInit();
+        }
+        _onInternalDestroy() {
+            super.onDestroy();
+        }
+        clear() {
+            this.value = null;
+        }
+        _checkRequired() {
+            const isRequired = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).some(c => c.__axContext__.enabled && c.__axContext__.rule == 'required');
+            //
+            if (isRequired) {
+                const container = this._getHostElement().classList.contains('ax-editor-container')
+                    ? this._getHostElement()
+                    : this._getHostElement().querySelector('.ax-editor-container');
+                const formField = container?.closest('.ax-form-field');
+                const label = formField?.querySelector('ax-label')?.__axContext__;
+                if (label)
+                    label.required = true;
+            }
+        }
+        validate() {
+            const rules = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).filter(c => c.__axContext__.enabled);
+            //
+            if (!rules || rules.length === 0) {
+                this._setState('clear');
+                return Promise.resolve({
+                    result: true,
+                    value: this.value,
+                    name: this.name,
+                    id: this.id,
+                });
+            }
+            return new Promise(resolve => {
+                Promise.all(rules
+                    .filter(c => typeof c?.validate === 'function')
+                    .map(c => {
+                    return c.validate(this.value);
+                })).then(d => {
+                    const error = d.find(c => c.result === false);
+                    if (error) {
+                        this._setState('error', error.message);
+                        resolve({
+                            result: false,
+                            value: this.value,
+                            message: error.message,
+                            name: this.name,
+                            id: this.id,
+                        });
+                    }
+                    else {
+                        this._setState('success');
+                        resolve({
+                            result: true,
+                            value: this.value,
+                            name: this.name,
+                            id: this.id,
+                        });
+                    }
+                });
+            });
+        }
+        /**
+         *  @ignore
+         */
+        constructor(...args) {
+            super(...args);
+        }
+        _setState(state, ...args) {
+            const container = this._getHostElement().classList.contains('ax-editor-container')
+                ? this._getHostElement()
+                : this._getHostElement().querySelector('.ax-editor-container');
+            const formField = container?.closest('.ax-form-field');
+            const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
+            let target = container || this._getInnerElement();
+            if (target?.querySelector('.ax-error-container')) {
+                target = target.querySelector('.ax-error-container');
+            }
+            const parent = target?.parentElement;
+            if (!target || !parent)
+                return;
+            switch (state) {
+                case 'clear':
+                    this.#state = 'clear';
+                    if (parent.querySelector('span.ax-error-message')) {
+                        parent.removeChild(parent.querySelector('span.ax-error-message'));
+                    }
+                    label?.classList.remove('ax-state-error');
+                    target.classList.remove('ax-state-error', 'ax-state-success');
+                    break;
+                case 'success':
+                    this._setState('clear');
+                    target.classList.add('ax-state-success');
+                    this.#state = 'success';
+                    break;
+                case 'error':
+                    this._setState('clear');
+                    if (args[0]) {
+                        const span = document.createElement('span');
+                        span.innerText = args[0];
+                        span.classList.add('ax-error-message');
+                        parent.appendChild(span);
+                    }
+                    label?.classList.add('ax-state-error');
+                    target.classList.add('ax-state-error');
+                    this.#state = 'error';
+                    break;
+            }
+            this._cdr.markForCheck();
+        }
+    };
 }
 
-const AXBaseComponentMixin = _BaseComponenetMixin(AXBaseComponent);
-const AXSizableComponentMixin = _SizableComponenetMixin(_BaseComponenetMixin(AXBaseComponent));
-const AXInteractiveComponenetMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(AXBaseComponent));
-const AXBaseClickableMixin = _InteractiveComponenetMixin(_ClickableComponenetMixin(AXBaseComponent));
-const AXBaseButtonMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ClickableComponenetMixin(_ColorLookComponentMixin(_ButtonComponentMixin(AXBaseComponent)))));
-const AXBaseValueComponentMixin = _InteractiveComponenetMixin(_ValueComponenetMixin(AXBaseComponent));
-const AXBaseTextBoxMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))));
-const AXBaseSelectionValueMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DatalistComponenetMixin(_SelectionComponenetMixin(_ValueComponenetMixin(AXBaseComponent)))));
-const AXBaseValueDropdownMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_ValueComponenetMixin(AXBaseComponent))));
-const AXBaseSelectionDropdownMixin = _DropdownComponenetMixin(AXBaseSelectionValueMixin);
-const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(AXBaseComponent)));
-const AXBaseMenuMixin = _BaseMenuComponentMixin(AXBaseComponent);
+const AXBaseComponentMixin = _BaseComponenetMixin(AXBaseComponent);
+const AXSizableComponentMixin = _SizableComponenetMixin(_BaseComponenetMixin(AXBaseComponent));
+const AXInteractiveComponenetMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(AXBaseComponent));
+const AXBaseClickableMixin = _InteractiveComponenetMixin(_ClickableComponenetMixin(AXBaseComponent));
+const AXBaseButtonMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ClickableComponenetMixin(_ColorLookComponentMixin(_ButtonComponentMixin(AXBaseComponent)))));
+const AXBaseValueComponentMixin = _InteractiveComponenetMixin(_ValueComponenetMixin(AXBaseComponent));
+const AXBaseTextBoxMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_ValueComponenetMixin(_TextboxComponenetMixin(AXBaseComponent))));
+const AXBaseSelectionValueMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DatalistComponenetMixin(_SelectionComponenetMixin(_ValueComponenetMixin(AXBaseComponent)))));
+const AXBaseValueDropdownMixin = _InteractiveComponenetMixin(_DropdownComponenetMixin(_DatalistComponenetMixin(_ValueComponenetMixin(AXBaseComponent))));
+const AXBaseSelectionDropdownMixin = _DropdownComponenetMixin(AXBaseSelectionValueMixin);
+const AXBaseDropdownMixin = _SizableComponenetMixin(_InteractiveComponenetMixin(_DropdownComponenetMixin(AXBaseComponent)));
+const AXBaseMenuMixin = _BaseMenuComponentMixin(AXBaseComponent);
 const AXAvatarMixin = _ColorLookComponentMixin(AXBaseComponent);
 
-function _PageComponenetMixin(Base) {
-    return class extends Base {
-        /**
-       *  @ignore
-       */
-        constructor(...args) {
-            super(...args.slice(0, 2));
-        }
-    };
+function _PageComponenetMixin(Base) {
+    return class extends Base {
+        /**
+       *  @ignore
+       */
+        constructor(...args) {
+            super(...args.slice(0, 2));
+        }
+    };
 }
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { AXAvatarMixin, AXBaseButtonMixin, AXBaseClickableMixin, AXBaseComponent, AXBaseComponentMixin, AXBaseDropdownMixin, AXBaseMenuMixin, AXBaseSelectionDropdownMixin, AXBaseSelectionValueMixin, AXBaseTextBoxMixin, AXBaseValueComponentMixin, AXBaseValueDropdownMixin, AXInteractiveComponenetMixin, AXSizableComponentMixin, BASEMENU_INPUTS, BASEMENU_OUTPUT, BASE_INPUTS, BASE_OUTPUT, BUTTON_INPUTS, BUTTON_OUTPUT, COLOR_LOOK_INPUTS, COLOR_LOOK_OUTPUT, DATALIST_INPUTS, DATALIST_OUTPUT, DROPDOWN_INPUTS, DROPDOWN_OUTPUT, INTERACTIVE_INPUTS, INTERACTIVE_OUTPUT, SELECTION_INPUTS, SELECTION_OUTPUT, SIZABLE_INPUTS, SIZABLE_OUTPUT, TEXTBOX_INPUTS, TEXTBOX_OUTPUT, _BaseComponenetMixin, _BaseMenuComponentMixin, _ButtonComponentMixin, _ClickableComponenetMixin, _ColorLookComponentMixin, _DatalistComponenetMixin, _DropdownComponenetMixin, _InteractiveComponenetMixin, _LoadingComponenetMixin, _PageComponenetMixin, _SelectionComponenetMixin, _SizableComponenetMixin, _TextboxComponenetMixin, _ValueComponenetMixin };