@acorex/components 7.4.8 → 7.5.1

package/fesm2022/acorex-components-common.mjs

@@ -1,14 +1,15 @@
 import { flatten, clone } from 'lodash-es';
 import * as i0 from '@angular/core';
 import { Injectable, Directive, Host, Self, Optional, Input, Inject, NgModule, inject, ChangeDetectorRef, ElementRef, ViewContainerRef, EventEmitter, Output } from '@angular/core';
+import { BehaviorSubject, fromEvent, noop, skip, distinctUntilChanged, debounceTime } from 'rxjs';
 import { DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import { Observable } from 'rxjs/internal/Observable';
-import { fromEvent, noop, skip, distinctUntilChanged, debounceTime } from 'rxjs';
 import { map, pairwise, filter, startWith, exhaustMap } from 'rxjs/operators';
 import { classes } from 'polytype';
 import { AXHtmlUtil } from '@acorex/core/utils';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import isEqual from 'lodash-es/isEqual';
 import * as i1$1 from '@angular/forms';
 
 const defaultOffset = 3;
@@ -17,7 +18,7 @@ function convertToPlacement(value) {
     if (value == null)
         return result;
     if (Array.isArray(value)) {
-        const list = flatten(value.map(m => convertToPlacement(m)).filter(m => m != null)).map(m => (clone(m)));
+        const list = flatten(value.map((m) => convertToPlacement(m)).filter((m) => m != null)).map((m) => clone(m));
         result.push(...list);
     }
     else {
@@ -40,99 +41,99 @@ const AX_PLACEMENT_TOP = {
     originY: 'top',
     overlayX: 'center',
     overlayY: 'bottom',
-    offsetY: -defaultOffset
+    offsetY: -defaultOffset,
 };
 const AX_PLACEMENT_TOP_START = {
     originX: 'start',
     originY: 'top',
     overlayX: 'start',
     overlayY: 'bottom',
-    offsetY: -defaultOffset
+    offsetY: -defaultOffset,
 };
 const AX_PLACEMENT_TOP_END = {
     originX: 'end',
     originY: 'top',
     overlayX: 'start',
     overlayY: 'bottom',
-    offsetY: -defaultOffset
+    offsetY: -defaultOffset,
 };
 const AX_PLACEMENT_BOTTOM = {
     originX: 'center',
     originY: 'bottom',
     overlayX: 'center',
     overlayY: 'top',
-    offsetY: defaultOffset
+    offsetY: defaultOffset,
 };
 const AX_PLACEMENT_BOTTOM_START = {
     originX: 'start',
     originY: 'bottom',
     overlayX: 'start',
     overlayY: 'top',
-    offsetY: defaultOffset
+    offsetY: defaultOffset,
 };
 const AX_PLACEMENT_BOTTOM_END = {
     originX: 'end',
     originY: 'bottom',
     overlayX: 'end',
     overlayY: 'top',
-    offsetY: defaultOffset
+    offsetY: defaultOffset,
 };
 const AX_PLACEMENT_START = {
     originX: 'start',
     originY: 'center',
     overlayX: 'end',
     overlayY: 'center',
-    offsetX: -defaultOffset
+    offsetX: -defaultOffset,
 };
 const AX_PLACEMENT_START_TOP = {
     originX: 'start',
     originY: 'top',
     overlayX: 'end',
     overlayY: 'top',
-    offsetX: -defaultOffset
+    offsetX: -defaultOffset,
 };
 const AX_PLACEMENT_START_BOTTOM = {
     originX: 'start',
     originY: 'bottom',
     overlayX: 'end',
     overlayY: 'bottom',
-    offsetX: -defaultOffset
+    offsetX: -defaultOffset,
 };
 const AX_PLACEMENT_END = {
     originX: 'end',
     originY: 'center',
     overlayX: 'start',
     overlayY: 'center',
-    offsetX: defaultOffset
+    offsetX: defaultOffset,
 };
 const AX_PLACEMENT_END_TOP = {
     originX: 'end',
     originY: 'top',
     overlayX: 'start',
     overlayY: 'top',
-    offsetX: defaultOffset
+    offsetX: defaultOffset,
 };
 const AX_PLACEMENT_END_BOTTOM = {
     originX: 'end',
     originY: 'bottom',
     overlayX: 'start',
     overlayY: 'bottom',
-    offsetX: defaultOffset
+    offsetX: defaultOffset,
 };
 const AX_PLACEMENT_MAP = {
-    'top': {
+    top: {
         origin: AX_PLACEMENT_TOP,
-        alts: [AX_PLACEMENT_BOTTOM]
+        alts: [AX_PLACEMENT_BOTTOM],
     },
     'top-start': {
         origin: AX_PLACEMENT_TOP_START,
-        alts: [AX_PLACEMENT_BOTTOM_START]
+        alts: [AX_PLACEMENT_BOTTOM_START],
     },
     'top-end': {
         origin: AX_PLACEMENT_TOP_END,
-        alts: [AX_PLACEMENT_BOTTOM_END]
+        alts: [AX_PLACEMENT_BOTTOM_END],
     },
-    'bottom': {
+    bottom: {
         origin: AX_PLACEMENT_BOTTOM,
         alts: [AX_PLACEMENT_BOTTOM],
     },
@@ -144,7 +145,7 @@ const AX_PLACEMENT_MAP = {
         origin: AX_PLACEMENT_BOTTOM_END,
         alts: [AX_PLACEMENT_TOP_END],
     },
-    'end': {
+    end: {
         origin: AX_PLACEMENT_END,
         alts: [AX_PLACEMENT_START],
     },
@@ -156,7 +157,7 @@ const AX_PLACEMENT_MAP = {
         origin: AX_PLACEMENT_END_BOTTOM,
         alts: [AX_PLACEMENT_END_TOP, AX_PLACEMENT_START_BOTTOM, AX_PLACEMENT_START_TOP],
     },
-    'start': {
+    start: {
         origin: AX_PLACEMENT_START,
         alts: [AX_PLACEMENT_END],
     },
@@ -167,7 +168,7 @@ const AX_PLACEMENT_MAP = {
     'start-bottom': {
         origin: AX_PLACEMENT_START_BOTTOM,
         alts: [AX_PLACEMENT_START_TOP, AX_PLACEMENT_END_BOTTOM, AX_PLACEMENT_END_TOP],
-    }
+    },
 };
 
 /**
@@ -326,17 +327,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
             type: Injectable
         }] });
 
-;
+class AXDateSource {
+    get items() {
+        return this._items;
+    }
+    constructor(config) {
+        this.config = config;
+        this._totalCount = 0;
+        this._items = new Array(this.config.pageSize);
+        this.fetchedPages = new Set();
+        this._query = { skip: 0, take: this.config.pageSize };
+        this.loadingChanged = new BehaviorSubject(false);
+        this.dataStream = new BehaviorSubject(this._items);
+    }
+    async fetchPage(page) {
+        if (this.fetchedPages.has(page)) {
+            return;
+        }
+        this.loadingChanged.next(true);
+        this.fetchedPages.add(page);
+        this._query.skip = page * this.config.pageSize;
+        const result = await this.config.load(this._query);
+        if (this._totalCount != result.total) {
+            this._items = new Array(result.total);
+            this._totalCount = result.total;
+        }
+        this._items.splice(page * this.config.pageSize, this.config.pageSize, ...result.items);
+        this.dataStream.next(this.items);
+        this.loadingChanged.next(false);
+    }
+}
+function convertArrayToDataSource(key, items) {
+    const config = {
+        key,
+        pageSize: items.length,
+        load: (e) => Promise.resolve({ items, total: items.length }),
+        byKey: (v) => Promise.resolve(items.find((c) => c[key] == v)),
+    };
+    return new AXDateSource(config);
+}
 
-const AX_STYLE_COLOR_TYPES = [
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-    'danger',
-    'info',
-    'default',
-];
+const AX_STYLE_COLOR_TYPES = ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'ghost'];
 const AX_LOCATIONS = [
     'bottom-start',
     'bottom-center',
@@ -364,16 +395,8 @@ class AXAutoFocusDirective {
                 }, this.time);
                 return;
             }
-            const list = [
-                'button',
-                'input',
-                '[href]',
-                'select',
-                'textarea',
-                '[tabindex]',
-            ].map((c) => c + ':not([tabindex="-1"])');
-            const focusable = this.el.nativeElement.querySelector(list.join(', ')) ??
-                this.el.nativeElement;
+            const list = ['button', 'input', '[href]', 'select', 'textarea', '[tabindex]'].map((c) => c + ':not([tabindex="-1"])');
+            const focusable = this.el.nativeElement.querySelector(list.join(', ')) ?? this.el.nativeElement;
             const attr = document.createAttribute('autofocus');
             focusable.setAttributeNode(attr);
             const hasTabindex = focusable.hasAttribute('tabindex');
@@ -418,7 +441,7 @@ class AXHotkeysService {
     addShortcut(options) {
         const merged = { ...this.defaults, ...options };
         const event = `keydown.${merged.keys}`;
-        return new Observable(observer => {
+        return new Observable((observer) => {
             const handler = (e) => {
                 e.preventDefault();
                 observer.next(e);
@@ -437,11 +460,10 @@ class AXHotkeysService {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXHotkeysService, deps: [{ token: i1.EventManager }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXHotkeysService, providedIn: 'root' }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXHotkeysService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXHotkeysService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i1.EventManager }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -452,20 +474,20 @@ class AXHotkeyDirective {
         this.el = el;
         this._host = _host;
         this.hs = hs;
-        this.hotkey = '';
+        this.axHotkey = '';
         this._subs = [];
     }
     ngAfterViewInit() {
-        if (!this.hotkey || !this._host)
+        if (!this.axHotkey || !this._host)
             return;
-        if (typeof this.hotkey == 'string') {
-            this._addDefaultAction(this.hotkey);
+        if (typeof this.axHotkey == 'string') {
+            this._addDefaultAction(this.axHotkey);
         }
-        else if (typeof this.hotkey == 'object' && !Array.isArray(this.hotkey)) {
-            this._addHotKeyAction([this.hotkey]);
+        else if (typeof this.axHotkey == 'object' && !Array.isArray(this.axHotkey)) {
+            this._addHotKeyAction([this.axHotkey]);
         }
-        else if (Array.isArray(this.hotkey)) {
-            this._addHotKeyAction(this.hotkey);
+        else if (Array.isArray(this.axHotkey)) {
+            this._addHotKeyAction(this.axHotkey);
         }
     }
     _addDefaultAction(hotkey) {
@@ -504,12 +526,12 @@ class AXHotkeyDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXHotkeyDirective, deps: [{ token: i0.ElementRef }, { token: AXComponent, host: true, optional: true, self: true }, { token: AXHotkeysService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXHotkeyDirective, selector: "[hotkey]", inputs: { hotkey: "hotkey" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXHotkeyDirective, selector: "[axHotkey]", inputs: { axHotkey: "axHotkey" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXHotkeyDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[hotkey]',
+                    selector: '[axHotkey]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: AXComponent, decorators: [{
                     type: Host
@@ -517,16 +539,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                     type: Self
                 }, {
                     type: Optional
-                }] }, { type: AXHotkeysService }]; }, propDecorators: { hotkey: [{
-                type: Input,
-                args: ['hotkey']
+                }] }, { type: AXHotkeysService }]; }, propDecorators: { axHotkey: [{
+                type: Input
             }] } });
 
-;
 const AX_DEFAULT_SCROLL_POSITION = {
     scrollHeight: 0,
     scrollTop: 0,
-    clientHeight: 0
+    clientHeight: 0,
 };
 class AXInfiniteScrollerDirective {
     constructor(elm) {
@@ -536,7 +556,7 @@ class AXInfiniteScrollerDirective {
             return positions[0].sT < positions[1].sT;
         };
         this.isScrollExpectedPercent = (position) => {
-            return ((position.sT + position.cH) / position.sH) > (this.scrollPercent / 100);
+            return (position.sT + position.cH) / position.sH > this.scrollPercent / 100;
         };
     }
     ngAfterViewInit() {
@@ -548,12 +568,11 @@ class AXInfiniteScrollerDirective {
         this.scrollEvent$ = fromEvent(this.elm.nativeElement, 'scroll');
     }
     streamScrollEvents() {
-        this.userScrolledDown$ = this.scrollEvent$
-            .pipe(map((e) => ({
+        this.userScrolledDown$ = this.scrollEvent$.pipe(map((e) => ({
             scrollHeight: e.target.scrollHeight,
             scrollTop: e.target.scrollTop,
-            clientHeight: e.target.clientHeight
-        })), pairwise(), filter(positions => this.isUserScrollingDown(positions) && this.isScrollExpectedPercent(positions[1])));
+            clientHeight: e.target.clientHeight,
+        })), pairwise(), filter((positions) => this.isUserScrollingDown(positions) && this.isScrollExpectedPercent(positions[1])));
     }
     requestCallbackOnScroll() {
         this.requestOnScroll$ = this.userScrolledDown$;
@@ -571,7 +590,7 @@ class AXInfiniteScrollerDirective {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[axInfiniteScroller]'
+                    selector: '[axInfiniteScroller]',
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { scrollCallback: [{
                 type: Input
@@ -584,20 +603,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
 class AXResponsiveDirective {
     constructor(_elementRef) {
         this._elementRef = _elementRef;
-        this._observer = new ResizeObserver(entries => {
-            for (let entry of entries) {
+        this._observer = new ResizeObserver((entries) => {
+            for (const entry of entries) {
                 if (entry.target) {
                     const e = entry.target;
                     const elements = [e, ...Array.from(e.querySelectorAll(`[class*='sm:']`))];
                     elements
-                        .map(c => ({
+                        .map((c) => ({
                         element: c,
                         classList: Array.from(c.classList)
-                            .filter(c => c.includes('sm'))
-                            .map(c => c.slice(3)),
+                            .filter((c) => c.includes('sm'))
+                            .map((c) => c.slice(3)),
                     }))
-                        .forEach(c => {
-                        e.clientWidth < 320 ? c.element.classList.add(...c.classList) : c.element.classList.remove(...c.classList);
+                        .forEach((c) => {
+                        e.clientWidth < 320
+                            ? c.element.classList.add(...c.classList)
+                            : c.element.classList.remove(...c.classList);
                     });
                 }
             }
@@ -609,11 +630,11 @@ class AXResponsiveDirective {
         this._observer?.unobserve(this._elementRef.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXResponsiveDirective, selector: "[ax-responsive]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXResponsiveDirective, selector: "[axResponsive]", ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXResponsiveDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[ax-responsive]' }]
+            args: [{ selector: '[axResponsive]' }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
 
 class AXRippleDirective {
@@ -663,7 +684,7 @@ class AXCommonModule {
             AXAutoFocusDirective,
             AXHotkeyDirective,
             AXRippleDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCommonModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCommonModule, providers: [AXHotkeysService] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCommonModule, decorators: [{
             type: NgModule,
@@ -683,6 +704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         AXHotkeyDirective,
                         AXRippleDirective,
                     ],
+                    providers: [AXHotkeysService],
                 }]
         }] });
 
@@ -774,34 +796,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
             type: Injectable
         }] });
 
-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(...arguments);
         this.colorChange = new EventEmitter();
-        this._color = 'default';
+        this._color = 'ghost';
     }
     /**
      *  Predefined color schemes
@@ -824,7 +823,7 @@ class MXLookComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.lookChange = new EventEmitter();
-        this._look = 'default';
+        this._look = 'solid';
     }
     /**
      *  Predefined look schemes
@@ -1003,7 +1002,7 @@ class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookC
             'ax-state-disabled': this.disabled,
             'ax-state-selected': this.selected,
         };
-        cssClasses[`ax-${this['color'] || 'default'}${this['look'] ? '-' + this['look'] : '-default'}`] = true;
+        cssClasses[`ax-${this['color'] || 'solid'}${this['look'] ? '-' + this['look'] : '-solid'}`] = true;
         return cssClasses;
     }
 }
@@ -1066,8 +1065,7 @@ class MXValueComponent extends MXInteractiveComponent {
     set value(v) {
         v = this.internalSetValue(v);
         const old = clone(this.value);
-        // TODO: check real equality
-        if (v != old) {
+        if (!isEqual(old, v)) {
             this._value = v;
             this.emitOnValueChangedEvent(old, this.value);
             if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
@@ -1122,7 +1120,7 @@ class MXValueComponent extends MXInteractiveComponent {
             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 formField = container?.closest('ax-form-field');
             const label = formField?.querySelector('ax-label')?.__axContext__;
             if (label)
                 label.required = true;
@@ -1239,37 +1237,37 @@ class MXInputBaseValueComponent extends MXValueComponent {
     constructor() {
         super(...arguments);
         /**
-        *  Fires each time the user press a key.
-        *  @event
-        */
+         *  Fires each time the user press a key.
+         *  @event
+         */
         this.onKeyDown = new EventEmitter();
         /**
-        *  Fires each time the user press a key.
-        *  @event
-        */
+         *  Fires each time the user press a key.
+         *  @event
+         */
         this.onKeyUp = new EventEmitter();
         /**
-        *  Fires each time the user press a key.
-        *  @event
-        */
+         *  Fires each time the user press a key.
+         *  @event
+         */
         this.onKeyPress = new EventEmitter();
     }
     emitOnKeydownEvent(e) {
         this.onKeyDown.emit({
             component: this,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     emitOnKeyupEvent(e) {
         this.onKeyUp.emit({
             component: this,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     emitOnKeypressEvent(e) {
         this.onKeyPress.emit({
             component: this,
-            nativeEvent: e
+            nativeEvent: e,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: MXInputBaseValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -1282,15 +1280,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
 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() {
@@ -1329,15 +1323,6 @@ class MXSelectionValueComponent extends MXValueComponent {
             value: v,
         });
     }
-    get readonlyField() {
-        return this._readonlyField;
-    }
-    set readonlyField(v) {
-        this.setOption({
-            name: 'readonlyField',
-            value: v,
-        });
-    }
     get multiple() {
         return this._multiple;
     }
@@ -1347,26 +1332,13 @@ class MXSelectionValueComponent extends MXValueComponent {
             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)
+        const 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) {
@@ -1384,7 +1356,7 @@ class MXSelectionValueComponent extends MXValueComponent {
             Object.assign(obj, item);
         }
         else if (typeof item != 'function') {
-            const existsItem = this.displayItems.find((c) => c[this.valueField] == item);
+            const existsItem = this.getItemByKey(item);
             if (existsItem)
                 Object.assign(obj, existsItem);
             else {
@@ -1392,11 +1364,14 @@ class MXSelectionValueComponent extends MXValueComponent {
                 obj[this.textField] = item.toString();
             }
         }
+        if (!obj[this.textField]) {
+            obj[this.textField] = obj[this.valueField];
+        }
         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]));
+        const values = Array.isArray(this.value) ? this.value : this.value ? [this.value] : [];
+        this._selectedItems = values.map((v) => this.normalizeItem(v));
     }
     unselectItems(...items) {
         if (!items || items.length === 0) {
@@ -1423,9 +1398,6 @@ class MXSelectionValueComponent extends MXValueComponent {
             }
             this.commitValue(newSelectedItems, true);
         }
-        else {
-            this.commitValue(this.displayItems, true);
-        }
     }
     toggleSelect(...items) {
         items?.forEach((item) => {
@@ -1438,12 +1410,21 @@ class MXSelectionValueComponent extends MXValueComponent {
         });
     }
     isItemSelected(item) {
-        return this.selectedItems.some((c) => c[this.valueField] === item[this.valueField]);
+        return this.selectedItems.some((c) => c[this.valueField] === this.normalizeItem(item)[this.valueField]);
     }
     isItemDisabled(item) {
-        return (coerceBooleanProperty(item[this.disabledField]) === true ||
+        return (this.disabled ||
+            coerceBooleanProperty(item[this.disabledField]) === true ||
             (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false));
     }
+    getDisplayText(item) {
+        const normalizeItem = this.normalizeItem(item);
+        return normalizeItem[this.textField];
+    }
+    getValue(item) {
+        const normalizeItem = this.normalizeItem(item);
+        return normalizeItem[this.valueField];
+    }
     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 }); }
 }
@@ -1458,7 +1439,7 @@ class AXNgModelDelayedValueChangedDirective {
     set delayTime(v) {
         if (v != this._delayTime) {
             this._delayTime = v;
-            this.delayTimeChange.emit(v);
+            this.axDelayTimeChange.emit(v);
             this.update();
         }
     }
@@ -1467,29 +1448,31 @@ class AXNgModelDelayedValueChangedDirective {
     }
     constructor(ngModel) {
         this.ngModel = ngModel;
-        this.delayedValueChanged = new EventEmitter();
-        this.delayTimeChange = new EventEmitter();
+        this.axDelayedValueChanged = new EventEmitter();
+        this.axDelayTimeChange = new EventEmitter();
         this._delayTime = 0;
         this.delayTime = 0;
     }
     update() {
         this.subscription?.unsubscribe();
         //
-        this.subscription = this.ngModel.control.valueChanges.pipe(skip(1), // skip initial value
-        distinctUntilChanged(), debounceTime(this.delayTime)).subscribe((value) => this.delayedValueChanged.emit(value));
+        this.subscription = this.ngModel.control.valueChanges
+            .pipe(skip(1), // skip initial value
+        distinctUntilChanged(), debounceTime(this.delayTime))
+            .subscribe((value) => this.axDelayedValueChanged.emit(value));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, deps: [{ token: i1$1.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXNgModelDelayedValueChangedDirective, isStandalone: true, selector: "[delayedValueChanged]", inputs: { delayTime: "delayTime" }, outputs: { delayedValueChanged: "delayedValueChanged", delayTimeChange: "delayTimeChange" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXNgModelDelayedValueChangedDirective, isStandalone: true, selector: "[axDelayedValueChanged]", inputs: { delayTime: "delayTime" }, outputs: { axDelayedValueChanged: "axDelayedValueChanged", axDelayTimeChange: "axDelayTimeChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[delayedValueChanged]',
-                    standalone: true
+                    selector: '[axDelayedValueChanged]',
+                    standalone: true,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.NgModel }]; }, propDecorators: { delayedValueChanged: [{
+        }], ctorParameters: function () { return [{ type: i1$1.NgModel }]; }, propDecorators: { axDelayedValueChanged: [{
                 type: Output
-            }], delayTimeChange: [{
+            }], axDelayTimeChange: [{
                 type: Output
             }], delayTime: [{
                 type: Input
@@ -1499,5 +1482,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, MXAppearanceComponent, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXSelectionValueComponent, MXValueComponent, TAB_META_KEY, convertToPlacement };
+export { AXAutoFocusDirective, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDateSource, 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, MXSelectionValueComponent, MXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
 //# sourceMappingURL=acorex-components-common.mjs.map