@acorex/components 5.7.0 → 6.0.0

package/fesm2020/acorex-components-mixin.mjs

@@ -0,0 +1,1247 @@
+import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
+import * as i0 from '@angular/core';
+import { Injectable, Inject, EventEmitter } from '@angular/core';
+import { unionBy, flatMapDeep } from 'lodash-es';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { AXObjectUtil } from '@acorex/core/utils';
+import { Subscription, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+var _AXBaseComponent_elementRef;
+class AXBaseComponent {
+    /**
+     *  @ignore
+     */
+    constructor(...args) {
+        this.id = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
+        _AXBaseComponent_elementRef.set(this, void 0);
+        __classPrivateFieldSet(this, _AXBaseComponent_elementRef, args[0], "f");
+        this._cdr = args[1];
+    }
+    ngOnInit() {
+        this._isInited = true;
+        this._onInternalInit();
+    }
+    ngAfterViewInit() {
+        this._isRendered = true;
+        this._onInternalViewInit();
+    }
+    ngOnDestroy() {
+        this._onInternalDestroy();
+    }
+    _getHostElement() {
+        return __classPrivateFieldGet(this, _AXBaseComponent_elementRef, "f").nativeElement;
+    }
+    _getInnerElement() {
+        return this._getHostElement().firstElementChild;
+    }
+    _onInternalInit() {
+        this._getHostElement().__axContext__ = this;
+        if (this.rtl == null) {
+            this.rtl =
+                window
+                    .getComputedStyle(this._getHostElement(), null)
+                    .getPropertyValue('direction') === 'rtl';
+        }
+        //TODO: Apply
+        // this._getHostElement().classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
+        // this._getInnerElement()?.classList.add(this.rtl ? 'ax-rtl' : 'ax-ltr');
+        // this._getHostElement().setAttribute('data-id', this.id);
+        this.onInit();
+        this.onRenderCssClass();
+    }
+    _onInternalViewInit() {
+        this.onViewInit();
+    }
+    _onInternalDestroy() {
+        this.onDestroy();
+    }
+    onInit() { }
+    onRenderCssClass() { }
+    onViewInit() { }
+    onDestroy() { }
+    _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);
+    }
+}
+_AXBaseComponent_elementRef = new WeakMap();
+AXBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable });
+AXBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AXBaseComponent });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", 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) {
+    var _isLoading, _loadedItems, _items, _a;
+    return _a = class extends Base {
+            constructor(...args) {
+                super(...args);
+                this.textField = 'text';
+                this.valueField = 'id';
+                _isLoading.set(this, false);
+                _loadedItems.set(this, []);
+                this.openMode = 'click';
+                this.direction = 'vertical';
+                this.onMenuItemClick = new EventEmitter();
+                _items.set(this, []);
+            }
+            get loadedCount() {
+                return __classPrivateFieldGet(this, _loadedItems, "f")?.length || 0;
+            }
+            get items() {
+                return __classPrivateFieldGet(this, _items, "f");
+            }
+            set items(v) {
+                if (Array.isArray(v)) {
+                    __classPrivateFieldSet(this, _items, this._formatData(v), "f");
+                }
+                else if (typeof v === 'function') {
+                    __classPrivateFieldSet(this, _items, v, "f");
+                }
+                else {
+                    __classPrivateFieldSet(this, _items, [], "f");
+                }
+            }
+            get displayItems() {
+                if (Array.isArray(this.items)) {
+                    return __classPrivateFieldGet(this, _items, "f") || [];
+                }
+                else if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
+                    return __classPrivateFieldGet(this, _loadedItems, "f") || [];
+                }
+                return [];
+            }
+            get isLoading() {
+                return __classPrivateFieldGet(this, _isLoading, "f");
+            }
+            _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 (__classPrivateFieldGet(this, _isLoading, "f")) {
+                        return;
+                    }
+                    if (__classPrivateFieldGet(this, _items, "f")) {
+                        __classPrivateFieldSet(this, _isLoading, true, "f");
+                        __classPrivateFieldGet(this, _items, "f").call(this, {
+                            parentId: parentId,
+                            searchQuery: searchText,
+                        })
+                            .then((c) => {
+                            if (Array.isArray(c)) {
+                                if (parentId) {
+                                    resolve(this._findNode(parentId, c, this.displayItems));
+                                }
+                                else {
+                                    resolve((__classPrivateFieldSet(this, _loadedItems, c, "f")));
+                                }
+                            }
+                            this._cdr.markForCheck();
+                        })
+                            .finally(() => {
+                            __classPrivateFieldSet(this, _isLoading, false, "f");
+                        });
+                    }
+                });
+            }
+            _onInternalInit() {
+                if (typeof __classPrivateFieldGet(this, _items, "f") == '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...';
+            }
+            _trackLoaded(index, item) {
+                return item[this.textField];
+            }
+        },
+        _isLoading = new WeakMap(),
+        _loadedItems = new WeakMap(),
+        _items = new WeakMap(),
+        _a;
+}
+const BASEMENU_INPUTS = [
+    'textField',
+    'valueField',
+    'items',
+    'id',
+    'parentId',
+    'iconField',
+    'tooltip',
+    'isOpen',
+    'isActive',
+    'visibleField',
+    'disableField',
+    'hasChildField',
+    'openMode',
+    'direction',
+];
+const BASEMENU_OUTPUT = ['onMenuItemClick'];
+
+function _ButtonComponentMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this.toggleableChange = new EventEmitter();
+            this._toggleable = false;
+            this.selectedChange = new EventEmitter();
+            this._selected = false;
+        }
+        /**
+        *  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();
+                }
+            });
+        }
+        /**
+        *  Provides visual styling that indicates if the Button is active
+        */
+        get toggleable() {
+            return this._toggleable;
+        }
+        set toggleable(value) {
+            this._setOption({
+                name: 'toggleable',
+                value
+            });
+        }
+        /**
+        *  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();
+                }
+            });
+        }
+        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 {
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args);
+            /**
+            *  Fires each time the user clicks the button.
+            *  @event
+            */
+            this.onClick = new EventEmitter();
+        }
+        _emitOnClickEvent(e) {
+            this.onClick.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e
+            });
+        }
+    };
+}
+
+function _ColorLookComponentMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this.colorChange = new EventEmitter();
+            this._color = 'primary';
+            this.lookChange = new EventEmitter();
+            this._look = 'default';
+        }
+        /**
+        *  Predefined color schemes
+        */
+        get color() {
+            return this._color;
+        }
+        set color(value) {
+            this._setOption({
+                name: 'color',
+                value,
+                afterCallback: () => {
+                    this._cdr.markForCheck();
+                }
+            });
+        }
+        /**
+        *  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) {
+    var _instances, _currentPage, _isLoading, _loadedItems, _flatItems, _totalItems, _isLazy, _items, _generateFlatItems, _a;
+    return _a = class extends Base {
+            constructor(...args) {
+                super(...args);
+                _instances.add(this);
+                this.valueField = 'id';
+                this.textField = 'text';
+                this.pageSize = 10;
+                _currentPage.set(this, 0);
+                _isLoading.set(this, false);
+                _loadedItems.set(this, []);
+                _flatItems.set(this, []);
+                _totalItems.set(this, 0);
+                _isLazy.set(this, false);
+                _items.set(this, []);
+            }
+            get totalCount() {
+                return __classPrivateFieldGet(this, _totalItems, "f");
+            }
+            get isLazy() {
+                return __classPrivateFieldGet(this, _isLazy, "f");
+            }
+            get loadedCount() {
+                return __classPrivateFieldGet(this, _loadedItems, "f")?.length || 0;
+            }
+            get items() {
+                return __classPrivateFieldGet(this, _items, "f");
+            }
+            set items(v) {
+                if (Array.isArray(v)) {
+                    __classPrivateFieldSet(this, _items, this._formatData(v), "f");
+                    this._onDataLoaded();
+                    __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
+                }
+                else if (typeof v === 'function') {
+                    __classPrivateFieldSet(this, _isLazy, true, "f");
+                    __classPrivateFieldSet(this, _items, v, "f");
+                }
+                else {
+                    __classPrivateFieldSet(this, _items, [], "f");
+                    this._onDataLoaded();
+                    __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
+                }
+            }
+            get displayItems() {
+                if (Array.isArray(this.items)) {
+                    return (__classPrivateFieldGet(this, _items, "f") || []);
+                }
+                else if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
+                    return __classPrivateFieldGet(this, _loadedItems, "f") || [];
+                }
+                return [];
+            }
+            get flatItems() {
+                return __classPrivateFieldGet(this, _flatItems, "f") || [];
+            }
+            get isLoading() {
+                return __classPrivateFieldGet(this, _isLoading, "f");
+            }
+            _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 = __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take = this.pageSize;
+                if ((this.loadedCount >= this.totalCount && this.totalCount != 0) ||
+                    __classPrivateFieldGet(this, _isLoading, "f") ||
+                    !__classPrivateFieldGet(this, _isLazy, "f") ||
+                    skip > this.totalCount) {
+                    return;
+                }
+                if (__classPrivateFieldGet(this, _items, "f")) {
+                    __classPrivateFieldSet(this, _isLoading, true, "f");
+                    const fetchFn = __classPrivateFieldGet(this, _items, "f");
+                    fetchFn({ skip, take, searchQuery: opts?.searchQuery })
+                        .then((c) => {
+                        var _a;
+                        if (Array.isArray(c)) {
+                            __classPrivateFieldSet(this, _loadedItems, this._formatData(c), "f");
+                            __classPrivateFieldSet(this, _totalItems, c.length, "f");
+                        }
+                        else {
+                            __classPrivateFieldSet(this, _totalItems, c.total || c.items?.length || 0, "f");
+                            __classPrivateFieldSet(this, _loadedItems, [
+                                ...new Set(__classPrivateFieldGet(this, _loadedItems, "f").concat(this._formatData(c.items))),
+                            ], "f");
+                            __classPrivateFieldSet(this, _currentPage, (_a = __classPrivateFieldGet(this, _currentPage, "f"), _a++, _a), "f");
+                        }
+                        this._cdr.markForCheck();
+                    })
+                        .finally(() => {
+                        __classPrivateFieldSet(this, _isLoading, false, "f");
+                        this._onDataLoaded();
+                        __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
+                    });
+                }
+            }
+            _onDataLoaded() { }
+            _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() {
+                __classPrivateFieldSet(this, _isLoading, false, "f");
+                __classPrivateFieldSet(this, _currentPage, 0, "f");
+                if (__classPrivateFieldGet(this, _loadedItems, "f")) {
+                    __classPrivateFieldGet(this, _loadedItems, "f").length = 0;
+                }
+            }
+        },
+        _currentPage = new WeakMap(),
+        _isLoading = new WeakMap(),
+        _loadedItems = new WeakMap(),
+        _flatItems = new WeakMap(),
+        _totalItems = new WeakMap(),
+        _isLazy = new WeakMap(),
+        _items = new WeakMap(),
+        _instances = new WeakSet(),
+        _generateFlatItems = function _generateFlatItems() {
+            const flattenFn = (item) => {
+                return [item, flatMapDeep(item.children, flattenFn)];
+            };
+            __classPrivateFieldSet(this, _flatItems, flatMapDeep(this.displayItems, flattenFn), "f");
+        },
+        _a;
+}
+const DATALIST_INPUTS = ['pageSize', 'valueField', 'textField', 'items'];
+const DATALIST_OUTPUT = [];
+
+;
+
+function _DropdownComponenetMixin(Base) {
+    class Mixin extends Base {
+        constructor(...args) {
+            super(...args);
+            this.readonly = false;
+            this.onOpened = new EventEmitter();
+            this.onClosed = new EventEmitter();
+            this.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;
+        }
+    }
+    return Mixin;
+}
+const DROPDOWN_INPUTS = [
+    'isOpen',
+    'fitParent',
+    'dropdownWidth',
+    'position'
+];
+const DROPDOWN_OUTPUT = ['onOpened', 'onClosed'];
+
+function _InteractiveComponenetMixin(Base) {
+    var _Mixin_disabled, _Mixin_tabIndex;
+    class Mixin extends Base {
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args);
+            _Mixin_disabled.set(this, false);
+            _Mixin_tabIndex.set(this, 0);
+            /**
+            *  Fires each time the component gets focused.
+            *  @event
+            */
+            this.onFocus = new EventEmitter();
+            /**
+            *  Fires each time the component gets blurred.
+            *  @event
+            */
+            this.onBlur = new EventEmitter();
+        }
+        /**
+        *  If set to true, it disables the component.
+        */
+        get disabled() { return __classPrivateFieldGet(this, _Mixin_disabled, "f"); }
+        set disabled(value) {
+            value = this._onOptionChanging({ name: 'disabled', value: value });
+            if (value != this.disabled) {
+                const oldValue = this.disabled;
+                __classPrivateFieldSet(this, _Mixin_disabled, coerceBooleanProperty(value), "f");
+                this._onOptionChanged({ name: 'disabled', oldValue, newValue: value });
+                this._cdr.markForCheck();
+            }
+        }
+        /**
+        *  Specifies the tabindex of the component.
+        */
+        get tabIndex() { return this.disabled ? -1 : __classPrivateFieldGet(this, _Mixin_tabIndex, "f"); }
+        set tabIndex(value) {
+            __classPrivateFieldSet(this, _Mixin_tabIndex, value != null ? coerceNumberProperty(value) : 0, "f");
+        }
+        _emitOnFocusEvent(e) {
+            this.onFocus.emit({
+                component: this,
+                htmlElement: this._getHostElement(),
+                nativeEvent: e
+            });
+        }
+        _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');
+        }
+    }
+    _Mixin_disabled = new WeakMap(), _Mixin_tabIndex = new WeakMap();
+    return Mixin;
+}
+const INTERACTIVE_INPUTS = [
+    'disabled',
+    'tabIndex',
+];
+const INTERACTIVE_OUTPUT = ['onBlur', 'onFocus'];
+
+function _LoadingComponenetMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args.slice(0, 2));
+            /**
+           *  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.
+           */
+            this.loading = false;
+        }
+        _onInternalInit() {
+            // if (!this.size) {
+            //     this.size = AXConfig.get('layout.size', 'sm');
+            // }
+            super._onInternalInit();
+        }
+    };
+}
+
+function _SelectionComponenetMixin(Base) {
+    return class extends Base {
+        constructor(...args) {
+            super(...args);
+            this.valueField = 'id';
+            this.textField = 'text';
+            this.disabledField = 'disabled';
+            this.multiple = false;
+            this.selectionMode = 'value';
+            this.valueChange = new EventEmitter();
+            this.onValueChanged = new EventEmitter();
+        }
+        /**
+        *  Defines the primary text to show inside the button.
+        */
+        get items() {
+            return [];
+        }
+        get displayItems() {
+            return [];
+        }
+        get flatItems() {
+            return [];
+        }
+        _onInternalInit() {
+            super._onInternalInit();
+        }
+        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.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();
+                    }
+                }
+                this._renderSelection();
+            }
+        }
+        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 => () => {
+                        //&& ii[this.textField]
+                        if (typeof ii === 'object') {
+                            return ii;
+                        }
+                        else {
+                            const fake = {};
+                            fake[this.valueField] = this.value;
+                            fake[this.textField] = this.value;
+                            return fake;
+                        }
+                    });
+                }
+                else {
+                    //&& this.value[this.textField]
+                    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) {
+            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 {
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args.slice(0, 2));
+        }
+        _onInternalInit() {
+            super._onInternalInit();
+        }
+    };
+}
+const SIZABLE_INPUTS = [
+    'size',
+];
+const SIZABLE_OUTPUT = [];
+
+function _TextboxComponenetMixin(Base) {
+    var _valueSubscription, _valueSubject, _a;
+    return _a = class extends Base {
+            /**
+            *  @ignore
+            */
+            constructor(...args) {
+                super(...args.slice(0, 2));
+                /**
+               *  A string value that specifies the type of text box.
+               */
+                this.type = 'text';
+                /**
+                *  A string value that specifies the placeholder of text box.
+                */
+                this.placeholder = '';
+                this.debounceTime = 0;
+                _valueSubscription.set(this, new Subscription());
+                _valueSubject.set(this, new Subject());
+                /**
+                *  Fires each time the user press a key.
+                *  @event
+                */
+                this.onKeyDown = new EventEmitter();
+                /**
+              *  Fires each time the user press a key.
+              *  @event
+              */
+                this.onKeyUp = new EventEmitter();
+                /**
+                *  Fires each time the user press a key.
+                *  @event
+                */
+                this.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();
+            }
+            _handleModleChange(value) {
+                if (!this.debounceTime)
+                    this._settleValue(value);
+                else {
+                    __classPrivateFieldGet(this, _valueSubject, "f").next(value);
+                }
+            }
+            _settleValue(value) {
+                this.value = value;
+            }
+            onInit() {
+                __classPrivateFieldSet(this, _valueSubscription, __classPrivateFieldGet(this, _valueSubject, "f")
+                    .pipe(debounceTime(this.debounceTime))
+                    .pipe(distinctUntilChanged())
+                    .subscribe((v) => {
+                    this._settleValue(v);
+                }), "f");
+            }
+            onDestroy() {
+                __classPrivateFieldGet(this, _valueSubscription, "f").unsubscribe();
+            }
+        },
+        _valueSubscription = new WeakMap(),
+        _valueSubject = new WeakMap(),
+        _a;
+}
+const TEXTBOX_INPUTS = ['placeholder', 'maxLength', 'allowNull', 'debounceTime', 'type', 'autoComplete', 'readonly', 'allowNull', 'value', 'name', 'checked'];
+const TEXTBOX_OUTPUT = ['valueChange', 'onValueChanged'];
+
+function _ValueComponenetMixin(Base) {
+    var _readonly, _allowNull, _name, _isUserInteraction, _value, _state, _a;
+    return _a = class extends Base {
+            /**
+              *  @ignore
+            */
+            constructor(...args) {
+                super(...args);
+                /**
+                *  Fires each time the user press a key.
+                *  @event
+                */
+                this.onValueChanged = new EventEmitter();
+                this.valueChange = new EventEmitter();
+                _readonly.set(this, false);
+                _allowNull.set(this, true);
+                _name.set(this, void 0);
+                _isUserInteraction.set(this, false);
+                _value.set(this, void 0);
+                _state.set(this, 'clear');
+            }
+            /**
+            *  If set to true, user cannot change the value of component.
+            */
+            get readonly() {
+                return __classPrivateFieldGet(this, _readonly, "f");
+            }
+            set readonly(value) {
+                __classPrivateFieldSet(this, _readonly, coerceBooleanProperty(value), "f");
+            }
+            get allowNull() {
+                return __classPrivateFieldGet(this, _allowNull, "f");
+            }
+            set allowNull(value) {
+                __classPrivateFieldSet(this, _allowNull, coerceBooleanProperty(value), "f");
+            }
+            get name() {
+                return __classPrivateFieldGet(this, _name, "f");
+            }
+            set name(value) {
+                __classPrivateFieldSet(this, _name, value, "f");
+            }
+            get isUserInteraction() {
+                return __classPrivateFieldGet(this, _isUserInteraction, "f");
+            }
+            get value() {
+                return this._internalGetValue();
+            }
+            set value(v) {
+                v = this._internalSetValue(v);
+                //if (!this._isInited ) {
+                const old = __classPrivateFieldGet(this, _value, "f");
+                // TODO: check real equality
+                if (v != old) {
+                    __classPrivateFieldSet(this, _value, v, "f");
+                    this._emitOnValueChangedEvent(old, __classPrivateFieldGet(this, _value, "f"));
+                    this._cdr.markForCheck();
+                    if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
+                        this._setState('clear');
+                    }
+                    else {
+                        if (this._isInited) {
+                            this.validate();
+                        }
+                    }
+                }
+                __classPrivateFieldSet(this, _isUserInteraction, false, "f");
+                //} 
+            }
+            get state() {
+                return __classPrivateFieldGet(this, _state, "f");
+            }
+            _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, __classPrivateFieldGet(this, _value, "f"));
+            }
+            _internalSetValue(value) {
+                return this._setValue(value);
+            }
+            _internalGetValue() {
+                return this._getValue(__classPrivateFieldGet(this, _value, "f"));
+            }
+            _setValue(value) {
+                return value;
+            }
+            _getValue(value) {
+                return value;
+            }
+            _setUserInteraction() {
+                __classPrivateFieldSet(this, _isUserInteraction, true, "f");
+            }
+            _onValueChanged(oldValue, newValue) { }
+            _onInternalInit() {
+                this._getHostElement().setAttribute('ax-form-input', 'true');
+                super._onInternalInit();
+            }
+            _onInternalDestroy() {
+                super.onDestroy();
+            }
+            clear() {
+                this.value = null;
+            }
+            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 });
+                        }
+                    });
+                });
+            }
+            _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':
+                        __classPrivateFieldSet(this, _state, 'clear', "f");
+                        if (parent.querySelector('span.ax-error-msg')) {
+                            parent.removeChild(parent.querySelector('span.ax-error-msg'));
+                        }
+                        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');
+                        __classPrivateFieldSet(this, _state, 'success', "f");
+                        break;
+                    case 'error':
+                        this._setState('clear');
+                        if (args[0]) {
+                            const span = document.createElement('span');
+                            span.innerText = args[0];
+                            span.classList.add('ax-error-msg');
+                            parent.appendChild(span);
+                        }
+                        label?.classList.add('ax-state-error');
+                        target.classList.add('ax-state-error');
+                        __classPrivateFieldSet(this, _state, 'error', "f");
+                        break;
+                }
+                this._cdr.markForCheck();
+            }
+        },
+        _readonly = new WeakMap(),
+        _allowNull = new WeakMap(),
+        _name = new WeakMap(),
+        _isUserInteraction = new WeakMap(),
+        _value = new WeakMap(),
+        _state = new WeakMap(),
+        _a;
+}
+const VALUE_INPUTS = [
+    'readonly',
+    'allowNull',
+    'value',
+    'name',
+    'checked'
+];
+const VALUE_OUTPUT = ['valueChange', 'onValueChanged'];
+
+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 = _InteractiveComponenetMixin(_BaseMenuComponentMixin(AXBaseComponent));
+const AXAvatarMixin = _ColorLookComponentMixin(AXBaseComponent);
+
+function _PageComponenetMixin(Base) {
+    return class extends Base {
+        /**
+       *  @ignore
+       */
+        constructor(...args) {
+            super(...args.slice(0, 2));
+        }
+    };
+}
+
+/**
+ * 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, VALUE_INPUTS, VALUE_OUTPUT, _BaseComponenetMixin, _BaseMenuComponentMixin, _ButtonComponentMixin, _ClickableComponenetMixin, _ColorLookComponentMixin, _DatalistComponenetMixin, _DropdownComponenetMixin, _InteractiveComponenetMixin, _LoadingComponenetMixin, _PageComponenetMixin, _SelectionComponenetMixin, _SizableComponenetMixin, _TextboxComponenetMixin, _ValueComponenetMixin };
+//# sourceMappingURL=acorex-components-mixin.mjs.map