@acorex/components 7.1.53 → 7.2.2

package/fesm2022/acorex-components-mixin.mjs

@@ -6,7 +6,6 @@ import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coerci
 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.
      */
@@ -16,19 +15,19 @@ class AXBaseComponent {
         if (this.#rtl)
             return this.#rtl;
         else
-            return this._getHostElement().classList.contains('ax-rtl') || window.getComputedStyle(this._getHostElement(), null).getPropertyValue('direction') === 'rtl';
+            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.id = `AX${Math.round(Math.random() * Math.pow(10, 10))}`;
         this.#elementRef = args[0];
         this._cdr = args[1];
     }
@@ -43,14 +42,19 @@ class AXBaseComponent {
     ngOnDestroy() {
         this._onInternalDestroy();
     }
+    //TODO: check why every time called _getHostElement function
     _getHostElement() {
-        return this.#elementRef.nativeElement;
+        //TODO: check elementRef retrun 0
+        return this.#elementRef?.nativeElement;
     }
     _getInnerElement() {
         return this._getHostElement().firstElementChild;
     }
     _onInternalInit() {
-        this._getHostElement().__axContext__ = this;
+        //TODO: check Cannot set properties of undefined (setting '__axContext__')
+        if (this._getHostElement()) {
+            this._getHostElement().__axContext__ = this;
+        }
         this._applyRtl();
         this.onInit();
     }
@@ -91,8 +95,8 @@ class AXBaseComponent {
         if (option.afterCallback)
             option.afterCallback(oldValue, newValue);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXBaseComponent });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXBaseComponent, deps: [{ token: Array }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXBaseComponent }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.4", ngImport: i0, type: AXBaseComponent, decorators: [{
             type: Injectable
@@ -112,22 +116,23 @@ 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();
+        #isLoading;
+        #loadedItems;
         constructor(...args) {
             super(...args);
-        }
-        #items = [];
+            this.textField = 'text';
+            this.valueField = 'id';
+            this.#isLoading = false;
+            this.#loadedItems = [];
+            this.disableField = 'disabled';
+            this.iconField = 'icon';
+            this.openMode = 'click';
+            this.displayMode = 'sidemenu';
+            this.dividerField = 'divider';
+            this.onMenuItemClick = new EventEmitter();
+            this.#items = [];
+        }
+        #items;
         get items() {
             return this.#items;
         }
@@ -168,7 +173,7 @@ function _BaseMenuComponentMixin(Base) {
         }
         _findNode(parentId, _children, source) {
             if (source.length > 0) {
-                source.forEach(element => {
+                source.forEach((element) => {
                     if (element[this.valueField] == parentId) {
                         element.children = _children;
                     }
@@ -180,7 +185,7 @@ function _BaseMenuComponentMixin(Base) {
             }
         }
         _fetchData(parentId, searchText) {
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 if (this.#isLoading) {
                     return;
                 }
@@ -190,7 +195,7 @@ function _BaseMenuComponentMixin(Base) {
                         parentId: parentId,
                         searchQuery: searchText,
                     })
-                        .then(c => {
+                        .then((c) => {
                         if (Array.isArray(c)) {
                             if (parentId) {
                                 resolve(this._findNode(parentId, c, this.displayItems));
@@ -215,7 +220,9 @@ function _BaseMenuComponentMixin(Base) {
         }
         _getItemDisplayTextTemplte(item) {
             if (item)
-                return Array.isArray(this.textField) ? this.textField.map(c => item[c]).join(',') : item[this.textField];
+                return Array.isArray(this.textField)
+                    ? this.textField.map((c) => item[c]).join(',')
+                    : item[this.textField];
             else
                 return 'Loading...';
         }
@@ -244,10 +251,9 @@ const BASEMENU_OUTPUT = ['onMenuItemClick'];
 
 function _ButtonComponentMixin(Base) {
     return class extends Base {
-        _text;
         /**
-        *  Defines the primary text to show inside the button.
-        */
+         *  Defines the primary text to show inside the button.
+         */
         get text() {
             return this._text;
         }
@@ -257,28 +263,24 @@ function _ButtonComponentMixin(Base) {
                 value: v,
                 afterCallback: () => {
                     this._cdr.markForCheck();
-                }
+                },
             });
         }
-        toggleableChange = new EventEmitter();
-        _toggleable = false;
         /**
-        *  Provides visual styling that indicates if the Button is active
-        */
+         *  Provides visual styling that indicates if the Button is active
+         */
         get toggleable() {
             return this._toggleable;
         }
         set toggleable(value) {
             this._setOption({
                 name: 'toggleable',
-                value
+                value,
             });
         }
-        selectedChange = new EventEmitter();
-        _selected = false;
         /**
-        *  Indicates if the Button is selected or not
-        */
+         *  Indicates if the Button is selected or not
+         */
         get selected() {
             return this._selected;
         }
@@ -288,37 +290,32 @@ function _ButtonComponentMixin(Base) {
                 value,
                 afterCallback: () => {
                     this._cdr.markForCheck();
-                }
+                },
             });
         }
         constructor(...args) {
             super(...args);
+            this.toggleableChange = new EventEmitter();
+            this._toggleable = false;
+            this.selectedChange = new EventEmitter();
+            this._selected = false;
         }
         get _classes() {
             const cssClasses = {
                 'ax-button-icon': !this.text,
-                'ax-state-disabled': this["disabled"],
-                'ax-state-selected': this.selected
+                '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_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,
@@ -331,6 +328,11 @@ function _ClickableComponenetMixin(Base) {
         */
         constructor(...args) {
             super(...args);
+            /**
+            *  Fires each time the user clicks the button.
+            *  @event
+            */
+            this.onClick = new EventEmitter();
         }
     };
 }
@@ -339,9 +341,11 @@ function _ColorLookComponentMixin(Base) {
     return class extends Base {
         constructor(...args) {
             super(...args);
+            this.colorChange = new EventEmitter();
+            this._color = 'default';
+            this.lookChange = new EventEmitter();
+            this._look = 'default';
         }
-        colorChange = new EventEmitter();
-        _color = 'default';
         /**
          *  Predefined color schemes
          */
@@ -357,8 +361,6 @@ function _ColorLookComponentMixin(Base) {
                 },
             });
         }
-        lookChange = new EventEmitter();
-        _look = 'default';
         /**
          *  Predefined look schemes
          */
@@ -381,16 +383,12 @@ 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;
+        #currentPage;
+        #isLoading;
+        #loadedItems;
+        #flatItems;
+        #totalItems;
+        #isLazy;
         get totalCount() {
             return this.#totalItems;
         }
@@ -402,8 +400,18 @@ function _DatalistComponenetMixin(Base) {
         }
         constructor(...args) {
             super(...args);
+            this.valueField = 'id';
+            this.textField = 'text';
+            this.pageSize = 10;
+            this.#currentPage = 0;
+            this.#isLoading = false;
+            this.#loadedItems = [];
+            this.#flatItems = [];
+            this.#totalItems = 0;
+            this.#isLazy = false;
+            this.#items = [];
         }
-        #items = [];
+        #items;
         get items() {
             return this.#items;
         }
@@ -533,10 +541,6 @@ 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,
@@ -559,7 +563,9 @@ function _DropdownComponenetMixin(Base) {
             setTimeout(() => {
                 if (this.position.length == 0) {
                     const a = 0;
-                    const offset = Number(getComputedStyle(document.documentElement).getPropertyValue('--ax-base-size').replace('px', ''));
+                    const offset = Number(getComputedStyle(document.documentElement)
+                        .getPropertyValue('--ax-base-size')
+                        .replace('px', ''));
                     const list = [
                         {
                             originX: 'start',
@@ -618,6 +624,10 @@ function _DropdownComponenetMixin(Base) {
         }
         constructor(...args) {
             super(...args);
+            this.readonly = false;
+            this.onOpened = new EventEmitter();
+            this.onClosed = new EventEmitter();
+            this.position = [];
         }
     }
     return Mixin;
@@ -627,7 +637,7 @@ const DROPDOWN_OUTPUT = ['onOpened', 'onClosed'];
 
 function _InteractiveComponenetMixin(Base) {
     class Mixin extends Base {
-        #disabled = false;
+        #disabled;
         /**
         *  If set to true, it disables the component.
         */
@@ -641,7 +651,7 @@ function _InteractiveComponenetMixin(Base) {
                 this._cdr.markForCheck();
             }
         }
-        #tabIndex = 0;
+        #tabIndex;
         /**
         *  Specifies the tabindex of the component.
         */
@@ -649,11 +659,6 @@ function _InteractiveComponenetMixin(Base) {
         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,
@@ -661,11 +666,6 @@ function _InteractiveComponenetMixin(Base) {
                 nativeEvent: e
             });
         }
-        /**
-        *  Fires each time the component gets blurred.
-        *  @event
-        */
-        onBlur = new EventEmitter();
         _emitOnBlurEvent(e) {
             this.onBlur.emit({
                 component: this,
@@ -694,6 +694,18 @@ function _InteractiveComponenetMixin(Base) {
         */
         constructor(...args) {
             super(...args);
+            this.#disabled = false;
+            this.#tabIndex = 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();
         }
     }
     return Mixin;
@@ -706,20 +718,12 @@ 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) {
@@ -732,12 +736,6 @@ function _LoadingComponenetMixin(Base) {
 
 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.
          */
@@ -750,15 +748,19 @@ function _SelectionComponenetMixin(Base) {
         get flatItems() {
             return [];
         }
-        valueChange = new EventEmitter();
-        onValueChanged = new EventEmitter();
         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();
         }
         _onInternalInit() {
             super._onInternalInit();
         }
-        _value;
         get value() {
             return this._value;
         }
@@ -780,7 +782,7 @@ function _SelectionComponenetMixin(Base) {
                     isUserInteraction: false,
                     oldValue,
                     value: this._value,
-                    selectedKeys: this.selectedItems.map(c => c[this.valueField]),
+                    selectedKeys: this.selectedItems.map((c) => c[this.valueField]),
                     selectedItems: this.selectedItems.slice(),
                 });
                 if (v == null || v == undefined || v == '') {
@@ -793,7 +795,6 @@ function _SelectionComponenetMixin(Base) {
                 }
             }
         }
-        _selectedItems;
         get selectedItems() {
             return this._selectedItems || [];
         }
@@ -804,9 +805,9 @@ function _SelectionComponenetMixin(Base) {
                 }
                 const items = this.flatItems;
                 if (items.length > 0) {
-                    return items.filter(i => {
+                    return items.filter((i) => {
                         if (Array.isArray(this.value)) {
-                            return this.value.some(ii => {
+                            return this.value.some((ii) => {
                                 if (typeof ii === 'object') {
                                     return i[this.valueField] === ii[this.valueField];
                                 }
@@ -826,7 +827,7 @@ function _SelectionComponenetMixin(Base) {
                     });
                 }
                 if (Array.isArray(this.value)) {
-                    return this.value.map(ii => {
+                    return this.value.map((ii) => {
                         if (typeof ii === 'object') {
                             return ii;
                         }
@@ -863,7 +864,7 @@ function _SelectionComponenetMixin(Base) {
                 this.value = null;
             }
             else if (Array.isArray(this.value)) {
-                this.value = this.value.filter(c => !items.some(d => this._getItemValue(c) === this._getItemValue(d)));
+                this.value = this.value.filter((c) => !items.some((d) => this._getItemValue(c) === this._getItemValue(d)));
             }
             else {
                 this.value = null;
@@ -872,7 +873,7 @@ function _SelectionComponenetMixin(Base) {
         selectItems(...items) {
             if (items && items.length) {
                 if (this.multiple) {
-                    this.value = (this.value || []).concat(items.map(c => this._getItemByDataMode(c)));
+                    this.value = (this.value || []).concat(items.map((c) => this._getItemByDataMode(c)));
                 }
                 else {
                     this.value = this._getItemByDataMode(items[0]);
@@ -881,7 +882,7 @@ function _SelectionComponenetMixin(Base) {
         }
         toggleSelect(...items) {
             if (items && items.length) {
-                items.forEach(item => {
+                items.forEach((item) => {
                     if (this.multiple) {
                         this.isItemSelected(item) ? this.unselectItems(item) : this.selectItems(item);
                     }
@@ -892,7 +893,7 @@ function _SelectionComponenetMixin(Base) {
             }
         }
         isItemSelected(item) {
-            return this.selectedItems.some(c => c[this.valueField] === item[this.valueField]);
+            return this.selectedItems.some((c) => c[this.valueField] === item[this.valueField]);
         }
         isItemDisabled(item) {
             return (coerceBooleanProperty(item[this.disabledField]) === true ||
@@ -900,18 +901,21 @@ function _SelectionComponenetMixin(Base) {
         }
     };
 }
-const SELECTION_INPUTS = ['valueField', 'textField', 'disabledField', 'disabledCallback', 'multiple', 'selectionMode'];
+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
-        */
+         *  @ignore
+         */
         constructor(...args) {
             super(...args.slice(0, 2));
         }
@@ -920,44 +924,11 @@ function _SizableComponenetMixin(Base) {
         }
     };
 }
-const SIZABLE_INPUTS = [
-    'size',
-];
+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,
@@ -984,6 +955,29 @@ function _TextboxComponenetMixin(Base) {
         */
         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();
         }
     };
 }
@@ -992,14 +986,7 @@ 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;
+        #readonly;
         /**
          *  If set to true, user cannot change the value of component.
          */
@@ -1009,7 +996,7 @@ function _ValueComponenetMixin(Base) {
         set readonly(value) {
             this.#readonly = coerceBooleanProperty(value);
         }
-        #allowNull = true;
+        #allowNull;
         get allowNull() {
             return this.#allowNull;
         }
@@ -1023,7 +1010,7 @@ function _ValueComponenetMixin(Base) {
         set name(value) {
             this.#name = value;
         }
-        #isUserInteraction = false;
+        #isUserInteraction;
         get isUserInteraction() {
             return this.#isUserInteraction;
         }
@@ -1052,7 +1039,7 @@ function _ValueComponenetMixin(Base) {
             this.#isUserInteraction = false;
             //}
         }
-        #state = 'clear';
+        #state;
         get state() {
             return this.#state;
         }
@@ -1103,7 +1090,7 @@ function _ValueComponenetMixin(Base) {
             this.value = null;
         }
         _checkRequired() {
-            const isRequired = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).some(c => c.__axContext__.enabled && c.__axContext__.rule == 'required');
+            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')
@@ -1116,7 +1103,7 @@ function _ValueComponenetMixin(Base) {
             }
         }
         validate() {
-            const rules = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).filter(c => c.__axContext__.enabled);
+            const rules = Array.from(this._getHostElement().querySelectorAll('ax-validation-rule')).filter((c) => c.__axContext__.enabled);
             //
             if (!rules || rules.length === 0) {
                 this._setState('clear');
@@ -1127,13 +1114,13 @@ function _ValueComponenetMixin(Base) {
                     id: this.id,
                 });
             }
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 Promise.all(rules
-                    .filter(c => typeof c?.validate === 'function')
-                    .map(c => {
+                    .filter((c) => typeof c?.validate === 'function')
+                    .map((c) => {
                     return c.validate(this.value);
-                })).then(d => {
-                    const error = d.find(c => c.result === false);
+                })).then((d) => {
+                    const error = d.find((c) => c.result === false);
                     if (error) {
                         this._setState('error', error.message);
                         resolve({
@@ -1161,6 +1148,17 @@ function _ValueComponenetMixin(Base) {
          */
         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();
+            this.#readonly = false;
+            this.#allowNull = true;
+            this.#isUserInteraction = false;
+            this.#state = 'clear';
         }
         _setState(state, ...args) {
             const container = this._getHostElement().classList.contains('ax-editor-container')