@acorex/components 7.0.41 → 7.1.0

package/{fesm2015 → fesm2022}/acorex-components-mixin.mjs

@@ -1,4 +1,3 @@
-import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
 import * as i0 from '@angular/core';
 import { Injectable, Inject, EventEmitter } from '@angular/core';
 import _ from 'lodash';
@@ -6,25 +5,16 @@ import { unionBy, flatMapDeep } from 'lodash-es';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { AXObjectUtil } from '@acorex/core/utils';
 
-var _AXBaseComponent_rtl, _AXBaseComponent_elementRef;
 class AXBaseComponent {
+    id = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
     /**
-     *  @ignore
+     * A token that specifies the layout direction of component.
      */
-    constructor(...args) {
-        this.id = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
-        /**
-         * A token that specifies the layout direction of component.
-         */
-        //rtl: boolean;
-        _AXBaseComponent_rtl.set(this, void 0);
-        _AXBaseComponent_elementRef.set(this, void 0);
-        __classPrivateFieldSet(this, _AXBaseComponent_elementRef, args[0], "f");
-        this._cdr = args[1];
-    }
+    //rtl: boolean;
+    #rtl;
     get rtl() {
-        if (__classPrivateFieldGet(this, _AXBaseComponent_rtl, "f"))
-            return __classPrivateFieldGet(this, _AXBaseComponent_rtl, "f");
+        if (this.#rtl)
+            return this.#rtl;
         else
             return this._getHostElement().classList.contains('ax-rtl') ||
                 window
@@ -32,7 +22,18 @@ class AXBaseComponent {
                     .getPropertyValue('direction') === 'rtl';
     }
     set rtl(value) {
-        __classPrivateFieldSet(this, _AXBaseComponent_rtl, value, "f");
+        this.#rtl = value;
+    }
+    #elementRef;
+    _cdr;
+    _isInited;
+    _isRendered;
+    /**
+     *  @ignore
+     */
+    constructor(...args) {
+        this.#elementRef = args[0];
+        this._cdr = args[1];
     }
     ngOnInit() {
         this._isInited = true;
@@ -46,7 +47,7 @@ class AXBaseComponent {
         this._onInternalDestroy();
     }
     _getHostElement() {
-        return __classPrivateFieldGet(this, _AXBaseComponent_elementRef, "f").nativeElement;
+        return this.#elementRef.nativeElement;
     }
     _getInnerElement() {
         return this._getHostElement().firstElementChild;
@@ -71,7 +72,7 @@ class AXBaseComponent {
         }
     }
     _onOptionChanging(option) {
-        return option === null || option === void 0 ? void 0 : option.value;
+        return option?.value;
     }
     _onOptionChanged(option) { }
     _setOption(option) {
@@ -93,18 +94,15 @@ class AXBaseComponent {
         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 });
 }
-_AXBaseComponent_rtl = new WeakMap(), _AXBaseComponent_elementRef = new WeakMap();
-AXBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable });
-AXBaseComponent.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXBaseComponent });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.4", ngImport: i0, type: AXBaseComponent, decorators: [{
+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]
-                    }] }];
-    } });
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [Array]
+                }] }]; } });
 function _BaseComponenetMixin(Base) {
     return class extends Base {
         constructor(...args) {
@@ -116,47 +114,48 @@ const BASE_INPUTS = ['rtl'];
 const BASE_OUTPUT = [];
 
 function _BaseMenuComponentMixin(Base) {
-    var _isLoading, _loadedItems, _items, _a;
-    return _a = class extends 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);
-            this.textField = 'text';
-            this.valueField = 'id';
-            _isLoading.set(this, false);
-            _loadedItems.set(this, []);
-            this.disableField = 'disabled';
-            this.iconField = 'icon';
-            this.openMode = 'click';
-            this.displayMode = 'sidemenu';
-            this.dividerField = 'divider';
-            this.onMenuItemClick = new EventEmitter();
-            _items.set(this, []);
         }
+        #items = [];
         get items() {
-            return __classPrivateFieldGet(this, _items, "f");
+            return this.#items;
         }
         set items(v) {
             if (Array.isArray(v)) {
-                __classPrivateFieldSet(this, _items, v, "f");
+                this.#items = v;
             }
             else if (typeof v === 'function') {
-                __classPrivateFieldSet(this, _items, v, "f");
+                this.#items = v;
             }
             else {
-                __classPrivateFieldSet(this, _items, [], "f");
+                this.#items = [];
             }
         }
         get displayItems() {
             if (Array.isArray(this.items)) {
-                return __classPrivateFieldGet(this, _items, "f") || [];
+                return this.#items || [];
             }
-            else if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
-                return __classPrivateFieldGet(this, _loadedItems, "f") || [];
+            else if (typeof this.#items == 'function') {
+                return this.#loadedItems || [];
             }
             return [];
         }
         get isLoading() {
-            return __classPrivateFieldGet(this, _isLoading, "f");
+            return this.#isLoading;
         }
         _formatData(v) {
             return _.unionBy(v.map((o, i) => {
@@ -177,7 +176,7 @@ function _BaseMenuComponentMixin(Base) {
                         element.children = _children;
                     }
                     else {
-                        if (element === null || element === void 0 ? void 0 : element.children)
+                        if (element?.children)
                             this._findNode(parentId, _children, element.children);
                     }
                 });
@@ -185,12 +184,12 @@ function _BaseMenuComponentMixin(Base) {
         }
         _fetchData(parentId, searchText) {
             return new Promise(resolve => {
-                if (__classPrivateFieldGet(this, _isLoading, "f")) {
+                if (this.#isLoading) {
                     return;
                 }
-                if (__classPrivateFieldGet(this, _items, "f")) {
-                    __classPrivateFieldSet(this, _isLoading, true, "f");
-                    __classPrivateFieldGet(this, _items, "f").call(this, {
+                if (this.#items) {
+                    this.#isLoading = true;
+                    this.#items({
                         parentId: parentId,
                         searchQuery: searchText,
                     })
@@ -200,19 +199,19 @@ function _BaseMenuComponentMixin(Base) {
                                 resolve(this._findNode(parentId, c, this.displayItems));
                             }
                             else {
-                                resolve((__classPrivateFieldSet(this, _loadedItems, c, "f")));
+                                resolve((this.#loadedItems = c));
                             }
                         }
                         this._cdr.markForCheck();
                     })
                         .finally(() => {
-                        __classPrivateFieldSet(this, _isLoading, false, "f");
+                        this.#isLoading = false;
                     });
                 }
             });
         }
         _onInternalInit() {
-            if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
+            if (typeof this.#items == 'function') {
                 this._fetchData();
             }
             super._onInternalInit();
@@ -226,11 +225,7 @@ function _BaseMenuComponentMixin(Base) {
         refresh() {
             this._fetchData();
         }
-    },
-        _isLoading = new WeakMap(),
-        _loadedItems = new WeakMap(),
-        _items = new WeakMap(),
-        _a;
+    };
 }
 const BASEMENU_INPUTS = [
     'textField',
@@ -252,13 +247,7 @@ 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;
-        }
+        _text;
         /**
         *  Defines the primary text to show inside the button.
         */
@@ -274,6 +263,8 @@ function _ButtonComponentMixin(Base) {
                 }
             });
         }
+        toggleableChange = new EventEmitter();
+        _toggleable = false;
         /**
         *  Provides visual styling that indicates if the Button is active
         */
@@ -286,6 +277,8 @@ function _ButtonComponentMixin(Base) {
                 value
             });
         }
+        selectedChange = new EventEmitter();
+        _selected = false;
         /**
         *  Indicates if the Button is selected or not
         */
@@ -301,6 +294,9 @@ function _ButtonComponentMixin(Base) {
                 }
             });
         }
+        constructor(...args) {
+            super(...args);
+        }
         get _classes() {
             const cssClasses = {
                 'ax-button-icon': !this.text,
@@ -322,16 +318,10 @@ const BUTTON_OUTPUT = ['onBlur', 'onFocus', 'onClick', 'selectedChange', 'toggle
 function _ClickableComponenetMixin(Base) {
     return class extends Base {
         /**
-        *  @ignore
+        *  Fires each time the user clicks the button.
+        *  @event
         */
-        constructor(...args) {
-            super(...args);
-            /**
-            *  Fires each time the user clicks the button.
-            *  @event
-            */
-            this.onClick = new EventEmitter();
-        }
+        onClick = new EventEmitter();
         _emitOnClickEvent(e) {
             this.onClick.emit({
                 component: this,
@@ -339,6 +329,12 @@ function _ClickableComponenetMixin(Base) {
                 nativeEvent: e
             });
         }
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args);
+        }
     };
 }
 
@@ -346,11 +342,9 @@ 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';
         }
+        colorChange = new EventEmitter();
+        _color = 'primary';
         /**
         *  Predefined color schemes
         */
@@ -366,6 +360,8 @@ function _ColorLookComponentMixin(Base) {
                 }
             });
         }
+        lookChange = new EventEmitter();
+        _look = 'default';
         /**
         *  Predefined look schemes
         */
@@ -390,65 +386,63 @@ const COLOR_LOOK_INPUTS = [
 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, []);
-        }
+    return class extends Base {
+        valueField = 'id';
+        textField = 'text';
+        childrenField;
+        pageSize = 10;
+        #currentPage = 0;
+        #isLoading = false;
+        #loadedItems = [];
+        #flatItems = [];
+        #totalItems = 0;
+        #isLazy = false;
         get totalCount() {
-            return __classPrivateFieldGet(this, _totalItems, "f");
+            return this.#totalItems;
         }
         get isLazy() {
-            return __classPrivateFieldGet(this, _isLazy, "f");
+            return this.#isLazy;
         }
         get loadedCount() {
-            var _b;
-            return ((_b = __classPrivateFieldGet(this, _loadedItems, "f")) === null || _b === void 0 ? void 0 : _b.length) || 0;
+            return this.#loadedItems?.length || 0;
+        }
+        constructor(...args) {
+            super(...args);
         }
+        #items = [];
         get items() {
-            return __classPrivateFieldGet(this, _items, "f");
+            return this.#items;
         }
         set items(v) {
             if (Array.isArray(v)) {
-                __classPrivateFieldSet(this, _items, this._formatData(v), "f");
+                this.#items = this._formatData(v);
                 this._onDataLoaded();
-                __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
+                this.#generateFlatItems();
             }
             else if (typeof v === 'function') {
-                __classPrivateFieldSet(this, _isLazy, true, "f");
-                __classPrivateFieldSet(this, _items, v, "f");
+                this.#isLazy = true;
+                this.#items = v;
             }
             else {
-                __classPrivateFieldSet(this, _items, [], "f");
+                this.#items = [];
                 this._onDataLoaded();
-                __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
+                this.#generateFlatItems();
             }
         }
         get displayItems() {
             if (Array.isArray(this.items)) {
-                return (__classPrivateFieldGet(this, _items, "f") || []);
+                return (this.#items || []);
             }
-            else if (typeof __classPrivateFieldGet(this, _items, "f") == 'function') {
-                return __classPrivateFieldGet(this, _loadedItems, "f") || [];
+            else if (typeof this.#items == 'function') {
+                return this.#loadedItems || [];
             }
             return [];
         }
         get flatItems() {
-            return __classPrivateFieldGet(this, _flatItems, "f") || [];
+            return this.#flatItems || [];
         }
         get isLoading() {
-            return __classPrivateFieldGet(this, _isLoading, "f");
+            return this.#isLoading;
         }
         _formatData(v) {
             return unionBy(v.map((o, i) => {
@@ -473,41 +467,45 @@ function _DatalistComponenetMixin(Base) {
             // });
         }
         _fetchData(opts) {
-            const skip = __classPrivateFieldGet(this, _currentPage, "f") * this.pageSize, take = this.pageSize;
+            const skip = this.#currentPage * this.pageSize, take = this.pageSize;
             if ((this.loadedCount >= this.totalCount && this.totalCount != 0) ||
-                __classPrivateFieldGet(this, _isLoading, "f") ||
-                !__classPrivateFieldGet(this, _isLazy, "f") ||
+                this.#isLoading ||
+                !this.#isLazy ||
                 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 === null || opts === void 0 ? void 0 : opts.searchQuery })
+            if (this.#items) {
+                this.#isLoading = true;
+                const fetchFn = this.#items;
+                fetchFn({ skip, take, searchQuery: opts?.searchQuery })
                     .then((c) => {
-                    var _b;
-                    var _a;
                     if (Array.isArray(c)) {
-                        __classPrivateFieldSet(this, _loadedItems, this._formatData(c), "f");
-                        __classPrivateFieldSet(this, _totalItems, c.length, "f");
+                        this.#loadedItems = this._formatData(c);
+                        this.#totalItems = c.length;
                     }
                     else {
-                        __classPrivateFieldSet(this, _totalItems, c.total || ((_b = c.items) === null || _b === void 0 ? void 0 : _b.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.#totalItems = c.total || c.items?.length || 0;
+                        this.#loadedItems = [
+                            ...new Set(this.#loadedItems.concat(this._formatData(c.items))),
+                        ];
+                        this.#currentPage++;
                     }
                     this._cdr.markForCheck();
                 })
                     .finally(() => {
-                    __classPrivateFieldSet(this, _isLoading, false, "f");
+                    this.#isLoading = false;
                     this._onDataLoaded();
-                    __classPrivateFieldGet(this, _instances, "m", _generateFlatItems).call(this);
+                    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)
@@ -526,28 +524,13 @@ function _DatalistComponenetMixin(Base) {
             this._fetchData();
         }
         empty() {
-            __classPrivateFieldSet(this, _isLoading, false, "f");
-            __classPrivateFieldSet(this, _currentPage, 0, "f");
-            if (__classPrivateFieldGet(this, _loadedItems, "f")) {
-                __classPrivateFieldGet(this, _loadedItems, "f").length = 0;
+            this.#isLoading = false;
+            this.#currentPage = 0;
+            if (this.#loadedItems) {
+                this.#loadedItems.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 = [];
@@ -556,13 +539,10 @@ 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 = [];
-        }
+        readonly = false;
+        onOpened = new EventEmitter();
+        onClosed = new EventEmitter();
+        position = [];
         _emitOnOpenedEvent() {
             this.onOpened.emit({
                 component: this,
@@ -629,7 +609,7 @@ function _DropdownComponenetMixin(Base) {
                 return;
             }
             this.popover.close();
-            this === null || this === void 0 ? void 0 : this.focus();
+            this?.focus();
         }
         open() {
             if (this.isOpen || this['disabled']) {
@@ -639,8 +619,10 @@ function _DropdownComponenetMixin(Base) {
             this.popover.focus();
         }
         get isOpen() {
-            var _a;
-            return (_a = this.popover) === null || _a === void 0 ? void 0 : _a.isOpen;
+            return this.popover?.isOpen;
+        }
+        constructor(...args) {
+            super(...args);
         }
     }
     return Mixin;
@@ -654,46 +636,34 @@ const DROPDOWN_INPUTS = [
 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();
-        }
+        #disabled = false;
         /**
         *  If set to true, it disables the component.
         */
-        get disabled() { return __classPrivateFieldGet(this, _Mixin_disabled, "f"); }
+        get disabled() { return this.#disabled; }
         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.#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 : __classPrivateFieldGet(this, _Mixin_tabIndex, "f"); }
+        get tabIndex() { return this.disabled ? -1 : this.#tabIndex; }
         set tabIndex(value) {
-            __classPrivateFieldSet(this, _Mixin_tabIndex, value != null ? coerceNumberProperty(value) : 0, "f");
+            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,
@@ -701,6 +671,11 @@ function _InteractiveComponenetMixin(Base) {
                 nativeEvent: e
             });
         }
+        /**
+        *  Fires each time the component gets blurred.
+        *  @event
+        */
+        onBlur = new EventEmitter();
         _emitOnBlurEvent(e) {
             this.onBlur.emit({
                 component: this,
@@ -724,8 +699,13 @@ function _InteractiveComponenetMixin(Base) {
         hasFocus() {
             return this._getHostElement().matches(':focus-within') || this._getHostElement().matches(':focus');
         }
+        /**
+        *  @ignore
+        */
+        constructor(...args) {
+            super(...args);
+        }
     }
-    _Mixin_disabled = new WeakMap(), _Mixin_tabIndex = new WeakMap();
     return Mixin;
 }
 const INTERACTIVE_INPUTS = [
@@ -736,12 +716,20 @@ 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));
-            /**
-           *  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) {
@@ -754,16 +742,12 @@ function _LoadingComponenetMixin(Base) {
 
 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();
-        }
+        valueField = 'id';
+        textField = 'text';
+        disabledField = 'disabled';
+        disabledCallback;
+        multiple = false;
+        selectionMode = 'value';
         /**
         *  Defines the primary text to show inside the button.
         */
@@ -776,9 +760,15 @@ function _SelectionComponenetMixin(Base) {
         get flatItems() {
             return [];
         }
+        valueChange = new EventEmitter();
+        onValueChanged = new EventEmitter();
+        constructor(...args) {
+            super(...args);
+        }
         _onInternalInit() {
             super._onInternalInit();
         }
+        _value;
         get value() {
             return this._value;
         }
@@ -813,6 +803,7 @@ function _SelectionComponenetMixin(Base) {
                 }
             }
         }
+        _selectedItems;
         get selectedItems() {
             return this._selectedItems || [];
         }
@@ -931,6 +922,10 @@ const SELECTION_OUTPUT = ['onValueChanged', 'valueChanged'];
 
 function _SizableComponenetMixin(Base) {
     return class extends Base {
+        /**
+        *  A token that specifies the size of component.
+        */
+        size;
         /**
         *  @ignore
         */
@@ -950,34 +945,36 @@ const SIZABLE_OUTPUT = [];
 function _TextboxComponenetMixin(Base) {
     return class extends Base {
         /**
-        *  @ignore
+       *  A string value that specifies the type of text box.
+       */
+        type = 'text';
+        /**
+        *  A string value that specifies the placeholder of text box.
         */
-        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 = '';
-            /**
-            *  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();
-        }
+        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,
@@ -999,57 +996,55 @@ function _TextboxComponenetMixin(Base) {
             });
             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) {
-    var _readonly, _allowNull, _name, _isUserInteraction, _value, _state, _a;
-    return _a = class extends Base {
+    return class extends Base {
         /**
-         *  @ignore
+         *  Fires each time the user press a key.
+         *  @event
          */
-        constructor(...args) {
-            super(...args);
-            /**
-             *  Fires each time the user press a key.
-             *  @event
-             */
-            this.onValueChanged = new EventEmitter();
-            this.valueChange = new EventEmitter();
-            this.stateChange = 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');
-        }
+        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 __classPrivateFieldGet(this, _readonly, "f");
+            return this.#readonly;
         }
         set readonly(value) {
-            __classPrivateFieldSet(this, _readonly, coerceBooleanProperty(value), "f");
+            this.#readonly = coerceBooleanProperty(value);
         }
+        #allowNull = true;
         get allowNull() {
-            return __classPrivateFieldGet(this, _allowNull, "f");
+            return this.#allowNull;
         }
         set allowNull(value) {
-            __classPrivateFieldSet(this, _allowNull, coerceBooleanProperty(value), "f");
+            this.#allowNull = coerceBooleanProperty(value);
         }
+        #name;
         get name() {
-            return __classPrivateFieldGet(this, _name, "f");
+            return this.#name;
         }
         set name(value) {
-            __classPrivateFieldSet(this, _name, value, "f");
+            this.#name = value;
         }
+        #isUserInteraction = false;
         get isUserInteraction() {
-            return __classPrivateFieldGet(this, _isUserInteraction, "f");
+            return this.#isUserInteraction;
         }
+        #value;
         get value() {
             return this._internalGetValue();
         }
@@ -1059,7 +1054,7 @@ function _ValueComponenetMixin(Base) {
             const old = AXObjectUtil.deepJSONClone(this.value);
             // TODO: check real equality
             if (v != old) {
-                __classPrivateFieldSet(this, _value, v, "f");
+                this.#value = v;
                 this._emitOnValueChangedEvent(old, this.value);
                 this._cdr.markForCheck();
                 if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
@@ -1071,11 +1066,12 @@ function _ValueComponenetMixin(Base) {
                 //   }
                 // }
             }
-            __classPrivateFieldSet(this, _isUserInteraction, false, "f");
+            this.#isUserInteraction = false;
             //}
         }
+        #state = 'clear';
         get state() {
-            return __classPrivateFieldGet(this, _state, "f");
+            return this.#state;
         }
         set state(value) {
             this._setState(value);
@@ -1090,14 +1086,14 @@ function _ValueComponenetMixin(Base) {
                 name: this.name,
                 isUserInteraction: this.isUserInteraction,
             });
-            this._onValueChanged(oldValue, __classPrivateFieldGet(this, _value, "f"));
-            __classPrivateFieldSet(this, _isUserInteraction, false, "f");
+            this._onValueChanged(oldValue, this.#value);
+            this.#isUserInteraction = false;
         }
         _internalSetValue(value) {
             return this._setValue(value);
         }
         _internalGetValue() {
-            return this._getValue(__classPrivateFieldGet(this, _value, "f"));
+            return this._getValue(this.#value);
         }
         _setValue(value) {
             return value;
@@ -1106,7 +1102,7 @@ function _ValueComponenetMixin(Base) {
             return value;
         }
         _setUserInteraction() {
-            __classPrivateFieldSet(this, _isUserInteraction, true, "f");
+            this.#isUserInteraction = true;
         }
         _onValueChanged(oldValue, newValue) { }
         _onInternalInit() {
@@ -1124,16 +1120,14 @@ function _ValueComponenetMixin(Base) {
             this.value = null;
         }
         _checkRequired() {
-            var _b;
-            debugger;
             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 === null || container === void 0 ? void 0 : container.closest('.ax-form-field');
-                const label = (_b = formField === null || formField === void 0 ? void 0 : formField.querySelector('ax-label')) === null || _b === void 0 ? void 0 : _b.__axContext__;
+                const formField = container?.closest('.ax-form-field');
+                const label = formField?.querySelector('ax-label')?.__axContext__;
                 if (label)
                     label.required = true;
             }
@@ -1152,7 +1146,7 @@ function _ValueComponenetMixin(Base) {
             }
             return new Promise(resolve => {
                 Promise.all(rules
-                    .filter(c => typeof (c === null || c === void 0 ? void 0 : c.validate) === 'function')
+                    .filter(c => typeof c?.validate === 'function')
                     .map(c => {
                     return c.validate(this.value);
                 })).then(d => {
@@ -1179,32 +1173,38 @@ function _ValueComponenetMixin(Base) {
                 });
             });
         }
+        /**
+         *  @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 === null || container === void 0 ? void 0 : container.closest('.ax-form-field');
-            const label = (formField === null || formField === void 0 ? void 0 : formField.querySelector('ax-label')) || (formField === null || formField === void 0 ? void 0 : formField.querySelector('label'));
+            const formField = container?.closest('.ax-form-field');
+            const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
             let target = container || this._getInnerElement();
-            if (target === null || target === void 0 ? void 0 : target.querySelector('.ax-error-container')) {
+            if (target?.querySelector('.ax-error-container')) {
                 target = target.querySelector('.ax-error-container');
             }
-            const parent = target === null || target === void 0 ? void 0 : target.parentElement;
+            const parent = target?.parentElement;
             if (!target || !parent)
                 return;
             switch (state) {
                 case 'clear':
-                    __classPrivateFieldSet(this, _state, 'clear', "f");
+                    this.#state = 'clear';
                     if (parent.querySelector('span.ax-error-message')) {
                         parent.removeChild(parent.querySelector('span.ax-error-message'));
                     }
-                    label === null || label === void 0 ? void 0 : label.classList.remove('ax-state-error');
+                    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");
+                    this.#state = 'success';
                     break;
                 case 'error':
                     this._setState('clear');
@@ -1214,21 +1214,14 @@ function _ValueComponenetMixin(Base) {
                         span.classList.add('ax-error-message');
                         parent.appendChild(span);
                     }
-                    label === null || label === void 0 ? void 0 : label.classList.add('ax-state-error');
+                    label?.classList.add('ax-state-error');
                     target.classList.add('ax-state-error');
-                    __classPrivateFieldSet(this, _state, 'error', "f");
+                    this.#state = 'error';
                     break;
             }
             this._cdr.markForCheck();
         }
-    },
-        _readonly = new WeakMap(),
-        _allowNull = new WeakMap(),
-        _name = new WeakMap(),
-        _isUserInteraction = new WeakMap(),
-        _value = new WeakMap(),
-        _state = new WeakMap(),
-        _a;
+    };
 }
 
 const AXBaseComponentMixin = _BaseComponenetMixin(AXBaseComponent);
@@ -1262,4 +1255,3 @@ function _PageComponenetMixin(Base) {
 
 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 };
 //# sourceMappingURL=acorex-components-mixin.mjs.map
-//# sourceMappingURL=acorex-components-mixin.mjs.map