@acorex/components 7.4.4 → 7.4.6

package/fesm2022/acorex-components-common.mjs

@@ -701,6 +701,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
         }] });
 
 class MXBaseComponent {
+    constructor() {
+        this._cdr = inject(ChangeDetectorRef);
+        this._elementRef = inject(ElementRef);
+        this._viewRef = inject(ViewContainerRef);
+        this._domService = inject(AXDomService);
+        this._id = this._domService.generateElementId();
+        this.onOptionChanged = new EventEmitter();
+    }
     get id() {
         return this._id;
     }
@@ -719,18 +727,8 @@ class MXBaseComponent {
     internalOptionChanging(option) {
         return option?.value;
     }
-    internalOptionChanged(option) {
-    }
-    /**
-     * @ignore
-     */
-    constructor() {
-        this._cdr = inject(ChangeDetectorRef);
-        this._elementRef = inject(ElementRef);
-        this._viewRef = inject(ViewContainerRef);
-        this._domService = inject(AXDomService);
-        this._id = this._domService.generateElementId();
-        this.onOptionChanged = new EventEmitter();
+    internalOptionChanged(option) { }
+    ngOnInit() {
         this.getHostElement().__axContext__ = this;
     }
     setOption(option) {
@@ -759,8 +757,9 @@ class MXBaseComponent {
             option.afterCallback(oldValue, newValue);
     }
     _detectLayout() {
-        this.rtl = this.getHostElement().classList.contains('ax-rtl') ||
-            window.getComputedStyle(this.getHostElement(), null).getPropertyValue('direction') === 'rtl';
+        this.rtl =
+            this.getHostElement().classList.contains('ax-rtl') ||
+                window.getComputedStyle(this.getHostElement(), null).getPropertyValue('direction') === 'rtl';
     }
     get rtl() {
         return this._rtl;
@@ -773,11 +772,34 @@ class MXBaseComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: MXBaseComponent, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }] });
+
+class MXAppearanceComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.appearanceChange = new EventEmitter();
+        this._appearance = 'solid';
+    }
+    /**
+     *  Predefined color schemes
+     */
+    get appearance() {
+        return this._appearance;
+    }
+    set appearance(value) {
+        this.setOption({
+            name: 'appearance',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+}
 
 class MXColorComponent extends MXBaseComponent {
     constructor() {
-        super();
+        super(...arguments);
         this.colorChange = new EventEmitter();
         this._color = 'default';
     }
@@ -800,7 +822,7 @@ class MXColorComponent extends MXBaseComponent {
 
 class MXLookComponent extends MXBaseComponent {
     constructor() {
-        super();
+        super(...arguments);
         this.lookChange = new EventEmitter();
         this._look = 'default';
     }
@@ -822,12 +844,32 @@ class MXLookComponent extends MXBaseComponent {
 }
 
 class MXColorLookComponent extends classes(MXColorComponent, MXLookComponent) {
-    constructor() {
-        super();
-    }
 }
 
 class MXInteractiveComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.onTouchedCallback = noop;
+        this._touched = false;
+        this.disabledChange = new EventEmitter();
+        // TODO: we should remove it or rename it
+        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();
+        /**
+         *  Fires each time the user clicks the button.
+         *  @event
+         */
+        this.onClick = new EventEmitter();
+    }
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
     }
@@ -890,29 +932,6 @@ class MXInteractiveComponent extends MXBaseComponent {
             nativeEvent: e,
         });
     }
-    constructor() {
-        super();
-        this.onTouchedCallback = noop;
-        this._touched = false;
-        this.disabledChange = new EventEmitter();
-        // TODO: we should remove it or rename it
-        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();
-        /**
-         *  Fires each time the user clicks the button.
-         *  @event
-         */
-        this.onClick = new EventEmitter();
-    }
     focus() {
         AXHtmlUtil.focusElement(this.getHostElement());
     }
@@ -1084,10 +1103,12 @@ class MXValueComponent extends MXInteractiveComponent {
         return value;
     }
     internalValueChanged(value) { }
-    ngOnInit() {
-        this.getHostElement().setAttribute('ax-form-input', 'true');
-    }
     ngAfterViewInit() {
+        const a = this.getHostElement().querySelectorAll('[ax-form-input="true"]');
+        a.forEach((c) => {
+            c.removeAttribute('ax-form-input');
+        });
+        this.getHostElement().setAttribute('ax-form-input', 'true');
         this._checkRequired();
     }
     ngOnDestroy() {
@@ -1095,7 +1116,7 @@ class MXValueComponent extends MXInteractiveComponent {
         this.onOptionChanged?.unsubscribe();
     }
     _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')
@@ -1206,7 +1227,6 @@ class MXValueComponent extends MXInteractiveComponent {
     }
     clear(e) {
         this.commitValue(null, e);
-        this.setState('clear');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: MXValueComponent }); }
@@ -1259,6 +1279,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
             type: Injectable
         }] });
 
+class MXSelectionValueComponent extends MXValueComponent {
+    constructor() {
+        super(...arguments);
+        this.selectionMode = 'value';
+        this._valueField = 'id';
+        this._textField = 'text';
+        this._hintField = 'hint';
+        this._disabledField = 'disabled';
+        this._readonlyField = 'readonly';
+        this._multiple = false;
+        this._items = [];
+        this.displayItems = [];
+        this._selectedItems = [];
+    }
+    get valueField() {
+        return this._valueField;
+    }
+    set valueField(v) {
+        this.setOption({
+            name: 'valueField',
+            value: v,
+        });
+    }
+    get textField() {
+        return this._textField;
+    }
+    set textField(v) {
+        this.setOption({
+            name: 'textField',
+            value: v,
+        });
+    }
+    get hintField() {
+        return this._hintField;
+    }
+    set hintField(v) {
+        this.setOption({
+            name: 'hintField',
+            value: v,
+        });
+    }
+    get disabledField() {
+        return this._disabledField;
+    }
+    set disabledField(v) {
+        this.setOption({
+            name: 'disabledField',
+            value: v,
+        });
+    }
+    get readonlyField() {
+        return this._readonlyField;
+    }
+    set readonlyField(v) {
+        this.setOption({
+            name: 'readonlyField',
+            value: v,
+        });
+    }
+    get multiple() {
+        return this._multiple;
+    }
+    set multiple(v) {
+        this.setOption({
+            name: 'multiple',
+            value: v,
+        });
+    }
+    get items() {
+        return this._items;
+    }
+    set items(v) {
+        this.setOption({
+            name: 'items',
+            value: v,
+            afterCallback: (oldValue, newValue) => {
+                this.displayItems = this.normalizeItemsList(newValue);
+            },
+        });
+    }
+    get selectedItems() {
+        return this._selectedItems || [];
+    }
+    internalSetValue(value) {
+        let normalizedItems = Array.isArray(value)
+            ? this.normalizeItemsList(value)
+            : this.normalizeItemsList([value]);
+        normalizedItems = normalizedItems.filter((c) => this.displayItems.some((d) => d[this.valueField] == c[this.valueField]));
+        return this.multiple ? normalizedItems : normalizedItems[0];
+    }
+    emitOnValueChangedEvent(oldValue, newValue) {
+        this._normalizeSelectedItems();
+        super.emitOnValueChangedEvent(oldValue, newValue);
+    }
+    normalizeItemsList(items) {
+        if (items == null)
+            return [];
+        return items.filter((c) => c != null).map((i) => this.normalizeItem(i));
+    }
+    normalizeItem(item) {
+        const obj = {};
+        if (typeof item == 'object') {
+            Object.assign(obj, item);
+        }
+        else if (typeof item != 'function') {
+            const existsItem = this.displayItems.find((c) => c[this.valueField] == item);
+            if (existsItem)
+                Object.assign(obj, existsItem);
+            else {
+                obj[this.valueField] = item;
+                obj[this.textField] = item.toString();
+            }
+        }
+        return obj;
+    }
+    _normalizeSelectedItems() {
+        const values = Array.isArray(this.value) ? this.value : [this.value];
+        this._selectedItems = this.displayItems.filter((c) => values.some((v) => v[this.valueField] == c[this.valueField]));
+    }
+    unselectItems(...items) {
+        if (!items || items.length === 0) {
+            this.commitValue([], true);
+            return;
+        }
+        const normalizeItems = Array.isArray(items)
+            ? this.normalizeItemsList(items)
+            : [this.normalizeItem(items)];
+        const newSelectedItems = this.selectedItems.filter((i) => !normalizeItems.some((n) => n[this.valueField] == i[this.valueField]));
+        this.commitValue(newSelectedItems, true);
+    }
+    selectItems(...items) {
+        if (items && items.length) {
+            let newSelectedItems = Array.isArray(this.value) ? this.value : [this.value];
+            const normalizeItems = Array.isArray(items)
+                ? this.normalizeItemsList(items)
+                : [this.normalizeItem(items)];
+            if (this.multiple) {
+                newSelectedItems = [...newSelectedItems, ...normalizeItems];
+            }
+            else {
+                newSelectedItems = normalizeItems;
+            }
+            this.commitValue(newSelectedItems, true);
+        }
+        else {
+            this.commitValue(this.displayItems, true);
+        }
+    }
+    toggleSelect(...items) {
+        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));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: MXSelectionValueComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
+            type: Injectable
+        }] });
+
 class AXNgModelDelayedValueChangedDirective {
     get delayTime() {
         return this._delayTime;
@@ -1307,5 +1499,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAutoFocusDirective, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXItemClickEvent, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_STYLE_COLOR_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXValueComponent, TAB_META_KEY, convertToPlacement };
+export { AXAutoFocusDirective, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXItemClickEvent, AXNgModelDelayedValueChangedDirective, AXOptionChangedEvent, AXPagedComponent, AXRangeChangedEvent, AXResponsiveDirective, AXRippleDirective, AXSearchableComponent, AXSelectionValueChangedEvent, AXValuableComponent, AXValueChangedEvent, AX_LOCATIONS, AX_PLACEMENT_BOTTOM, AX_PLACEMENT_BOTTOM_END, AX_PLACEMENT_BOTTOM_START, AX_PLACEMENT_END, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP, AX_PLACEMENT_MAP, AX_PLACEMENT_START, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP, AX_PLACEMENT_TOP, AX_PLACEMENT_TOP_END, AX_PLACEMENT_TOP_START, AX_STYLE_COLOR_TYPES, MXAppearanceComponent, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXSelectionValueComponent, MXValueComponent, TAB_META_KEY, convertToPlacement };
 //# sourceMappingURL=acorex-components-common.mjs.map