@acorex/components 7.5.0 → 7.5.1

package/fesm2022/acorex-components-common.mjs

@@ -1,10 +1,10 @@
 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';
@@ -18,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 {
@@ -41,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],
     },
@@ -145,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],
     },
@@ -157,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],
     },
@@ -168,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],
-    }
+    },
 };
 
 /**
@@ -327,68 +327,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
             type: Injectable
         }] });
 
-;
-// export interface AXDataSourceQuery {
-//     take?: number;
-//     skip?: number;
-//     searchQuery?: string;
-// }
-// export interface AXDataSourceCallbackResult<T> {
-//     items: Array<T>;
-//     total: number;
-// };
-// export type AXDataSourceLoadCallback<T> = (e: AXDataSourceQuery) => Promise<AXDataSourceCallbackResult<T>>;
-// export type AXDataSourceByKeyCallback<T> = (key: T) => Promise<T>;
-// export interface AXDateSourceRecord<T = unknown> {
-//     id: T;
-//     text: string;
-//     disabled: boolean,
-//     selected: boolean,
-//     [key: string]: unknown;
-// }
-// export interface AXDateSourceConfig<T> {
-//     load: AXDataSourceLoadCallback<T>;
-//     byKey: AXDataSourceByKeyCallback<T>
-// }
-// export class AXDateSource {
-//     constructor(public config: AXDateSourceConfig<unknown>) {
-//     }
-//     private _displayItems: AXDateSourceRecord[];
-//     public get displayItems(): AXDateSourceRecord[] {
-//         return this._displayItems;
-//     }
-//     public set displayItems(v: AXDateSourceRecord[]) {
-//         this._displayItems = this.normalizeItemsList(v);
-//     }
-//     private normalizeItem(item: unknown): AXDateSourceRecord {
-//         const obj: Partial<AXDateSourceRecord> = {};
-//         if (typeof item == 'object') {
-//             Object.assign(obj, item);
-//         } else if (typeof item != 'function') {
-//             const existsItem = this.displayItems.find((c) => c.id == item);
-//             if (existsItem) Object.assign(obj, existsItem);
-//             else {
-//                 obj.id = item;
-//                 obj.text = item?.toString();
-//             }
-//         }
-//         return obj as AXDateSourceRecord;
-//     }
-//     private normalizeItemsList(items: unknown[]): AXDateSourceRecord[] {
-//         if (items == null) return [];
-//         return items.filter((c) => c != null).map((i) => this.normalizeItem(i));
-//     }
-// }
+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',
@@ -416,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');
@@ -470,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);
@@ -489,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]
@@ -504,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) {
@@ -556,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
@@ -569,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) {
@@ -588,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() {
@@ -600,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$;
@@ -623,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
@@ -636,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);
                     });
                 }
             }
@@ -661,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 {
@@ -715,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,
@@ -735,6 +704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         AXHotkeyDirective,
                         AXRippleDirective,
                     ],
+                    providers: [AXHotkeysService],
                 }]
         }] });
 
@@ -826,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
@@ -876,7 +823,7 @@ class MXLookComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.lookChange = new EventEmitter();
-        this._look = 'default';
+        this._look = 'solid';
     }
     /**
      *  Predefined look schemes
@@ -1055,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;
     }
 }
@@ -1173,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;
@@ -1290,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 }); }
@@ -1389,7 +1336,6 @@ class MXSelectionValueComponent extends MXValueComponent {
         return this._selectedItems || [];
     }
     internalSetValue(value) {
-        debugger;
         const normalizedItems = Array.isArray(value)
             ? this.normalizeItemsList(value)
             : this.normalizeItemsList([value]);
@@ -1418,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.value] : []);
-        this._selectedItems = values.map(v => this.normalizeItem(v));
+        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) {
@@ -1472,6 +1421,10 @@ class MXSelectionValueComponent extends MXValueComponent {
         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 }); }
 }
@@ -1486,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();
         }
     }
@@ -1495,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
@@ -1527,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