@acorex/components 7.5.0 → 7.8.0

package/fesm2022/acorex-components-common.mjs

@@ -1,10 +1,11 @@
 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 _ from 'lodash';
+import { Subject, 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 +19,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 +42,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 +146,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 +158,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 +169,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 +328,111 @@ 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 totalCount() {
+        return this._totalCount;
+    }
+    ;
+    get totalPages() {
+        return Math.floor(this.totalCount / this.config.pageSize);
+    }
+    ;
+    get cachedItems() {
+        return this._cachedItems;
+    }
+    get items() {
+        return this._items;
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    constructor(config) {
+        this._totalCount = 0;
+        this._items = [];
+        this.fetchedPages = new Set();
+        this._page = 0;
+        this.onChanged = new Subject();
+        this.onLoadingChanged = new Subject();
+        this._isLoading = false;
+        this.config = config;
+        this._cachedItems = new Array(this.config.pageSize);
+        this._items = new Array(0);
+        this._query = { skip: 0, take: this.config.pageSize };
+    }
+    load() {
+        const page = this._page;
+        if (this.fetchedPages.has(page)) {
+            return;
+        }
+        this.setLoadingState(true);
+        this.fetchedPages.add(page);
+        this._query.skip = page * this.config.pageSize;
+        this.config.load({ ...this._query }).then(result => {
+            if (this._totalCount != result.total) {
+                this._cachedItems = new Array(result.total);
+                this._totalCount = result.total;
+            }
+            this._items = result.items;
+            this._cachedItems.splice(page * this.config.pageSize, this.config.pageSize, ...result.items);
+            const event = {
+                cachedItems: this.cachedItems,
+                items: this.items,
+                page: page,
+                totalCount: this.totalCount,
+                totalPages: this.totalPages
+            };
+            this.onChanged.next(event);
+        }).finally(() => {
+            this.setLoadingState(false);
+        });
+    }
+    setLoadingState(value) {
+        this._isLoading = value;
+        this.onLoadingChanged.next(this._isLoading);
+    }
+    setPage(page) {
+        if (this._page != page || this._items.length == 0) {
+            this._page = page;
+            this.load();
+        }
+    }
+    filter(predicate = null) {
+        this.reset();
+        this._query.predicate = predicate;
+        this.load();
+    }
+    reset() {
+        this._query.predicate = null;
+        this._query.skip = 0;
+        this._cachedItems = new Array(this.config.pageSize);
+        this.fetchedPages.clear();
+        this._page = 0;
+        this._totalCount = 0;
+    }
+    find(key) {
+        const fromCache = this.cachedItems.find(c => (!this.config.key && c == key) || (c && this.config.key && c[this.config.key] == key));
+        if (fromCache)
+            return fromCache;
+        return this.config.byKey ? this.config.byKey(key) : null;
+    }
+}
+function convertArrayToDataSource(items, options = { key: 'id', pageSize: 20 }) {
+    const config = {
+        key: options.key,
+        pageSize: options.pageSize,
+        load: (e) => {
+            const result = e.predicate ? _.filter(items, e.predicate) : items;
+            return Promise.resolve({
+                items: result.slice(e.skip, e.skip + e.take),
+                total: result.length
+            });
+        },
+        byKey: (v) => Promise.resolve(items.find(c => c[options.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 +460,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 +506,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 +525,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 +539,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 +591,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 +604,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 +621,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 +633,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 +655,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 +668,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,22 +695,24 @@ 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 {
     constructor(el) {
         this.el = el;
-        el.nativeElement.addEventListener('click', this.createRipple);
+        this.axRippleColor = 'rgb(0, 0, 0 , 0.1)';
+        el.nativeElement.addEventListener('click', this.createRipple.bind(this));
     }
     ngOnDestroy() {
-        this.el.nativeElement.removeEventListener('click', this.createRipple);
+        this.el.nativeElement.removeEventListener('click', this.createRipple.bind(this));
     }
     createRipple(event) {
+        this.el.nativeElement.style.overflow = 'hidden';
         const element = event.currentTarget;
         const rect = element.getBoundingClientRect();
         const x = Math.floor(((event.clientX - rect.left) / (rect.right - rect.left)) * element.clientWidth);
@@ -687,22 +723,26 @@ class AXRippleDirective {
         circle.style.width = circle.style.height = `${diameter}px`;
         circle.style.left = `${x - radius}px`;
         circle.style.top = `${y - radius}px`;
-        circle.classList.add('ripple');
-        const ripple = element.getElementsByClassName('ripple')[0];
+        circle.style.backgroundColor = `${this.axRippleColor}`;
+        circle.classList.add('ax-ripple');
+        const ripple = element.getElementsByClassName('ax-ripple')[0];
         if (ripple) {
             ripple.remove();
+            // this.el.nativeElement.style.overflow = 'initial';
         }
         element.appendChild(circle);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXRippleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXRippleDirective, selector: "[axRipple]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.9", type: AXRippleDirective, selector: "[axRipple]", inputs: { axRippleColor: "axRippleColor" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axRipple]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { axRippleColor: [{
+                type: Input
+            }] } });
 
 class AXCommonModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.9", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -715,7 +755,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 +775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.9", ngImpor
                         AXHotkeyDirective,
                         AXRippleDirective,
                     ],
+                    providers: [AXHotkeysService],
                 }]
         }] });
 
@@ -826,34 +867,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 +894,7 @@ class MXLookComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.lookChange = new EventEmitter();
-        this._look = 'default';
+        this._look = 'solid';
     }
     /**
      *  Predefined look schemes
@@ -916,11 +934,6 @@ class MXInteractiveComponent extends MXBaseComponent {
          *  @event
          */
         this.onBlur = new EventEmitter();
-        /**
-         *  Fires each time the user clicks the button.
-         *  @event
-         */
-        this.onClick = new EventEmitter();
     }
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
@@ -977,13 +990,18 @@ class MXInteractiveComponent extends MXBaseComponent {
             nativeEvent: e,
         });
     }
-    emitOnClickEvent(e) {
-        this.onClick.emit({
-            component: this,
-            htmlElement: this.getHostElement(),
-            nativeEvent: e,
-        });
-    }
+    // /**
+    //  *  Fires each time the user clicks the button.
+    //  *  @event
+    //  */
+    // onClick: EventEmitter<AXClickEvent> = new EventEmitter<AXClickEvent>();
+    // protected emitOnClickEvent(e: MouseEvent): void {
+    //   this.onClick.emit({
+    //     component: this,
+    //     htmlElement: this.getHostElement(),
+    //     nativeEvent: e,
+    //   });
+    // }
     focus() {
         AXHtmlUtil.focusElement(this.getHostElement());
     }
@@ -1055,7 +1073,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 +1191,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 +1308,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 }); }
@@ -1335,10 +1353,10 @@ class MXSelectionValueComponent extends MXValueComponent {
         super(...arguments);
         this._valueField = 'id';
         this._textField = 'text';
-        this._hintField = 'hint';
         this._disabledField = 'disabled';
         this._multiple = false;
         this._selectedItems = [];
+        this._cacheList = [];
     }
     get valueField() {
         return this._valueField;
@@ -1358,15 +1376,6 @@ class MXSelectionValueComponent extends MXValueComponent {
             value: v,
         });
     }
-    get hintField() {
-        return this._hintField;
-    }
-    set hintField(v) {
-        this.setOption({
-            name: 'hintField',
-            value: v,
-        });
-    }
     get disabledField() {
         return this._disabledField;
     }
@@ -1389,40 +1398,79 @@ class MXSelectionValueComponent extends MXValueComponent {
         return this._selectedItems || [];
     }
     internalSetValue(value) {
-        debugger;
-        const normalizedItems = Array.isArray(value)
-            ? this.normalizeItemsList(value)
-            : this.normalizeItemsList([value]);
-        return this.multiple ? normalizedItems : normalizedItems[0];
+        const isArray = Array.isArray(value);
+        if (value == null || (isArray && value.length == 0)) {
+            return this.multiple ? [] : null;
+        }
+        const normalizedItems = isArray
+            ? this.normalizeItemsList(value, true)
+            : this.normalizeItemsList([value], true);
+        if (normalizedItems.length == 0) {
+            return this.multiple ? [] : null;
+        }
+        const result = this.multiple
+            ? normalizedItems.map((c) => c[this.valueField])
+            : normalizedItems[0][this.valueField];
+        return result;
     }
     emitOnValueChangedEvent(oldValue, newValue) {
         this._normalizeSelectedItems();
         super.emitOnValueChangedEvent(oldValue, newValue);
     }
-    normalizeItemsList(items) {
+    normalizeItemsList(items, findBykey = false) {
         if (items == null)
             return [];
-        return items.filter((c) => c != null).map((i) => this.normalizeItem(i));
+        return items.filter((c) => c != null).map((i) => this.normalizeItem(i, findBykey));
     }
-    normalizeItem(item) {
+    normalizeItem(item, findBykey = false) {
+        const complex = typeof item == 'object';
+        const key = complex ? item[this.valueField] : `${item}`;
+        const cacheKey = `k-${key}`;
+        const hasText = !complex || item[this.textField] != null;
+        //
+        if (this._cacheList[cacheKey])
+            return this._cacheList[cacheKey];
+        //
         const obj = {};
-        if (typeof item == 'object') {
+        if (complex && hasText) {
             Object.assign(obj, item);
         }
-        else if (typeof item != 'function') {
-            const existsItem = this.getItemByKey(item);
-            if (existsItem)
-                Object.assign(obj, existsItem);
+        else {
+            const existsItem = findBykey ? this.getItemByKey(key) : null;
+            if (existsItem && existsItem instanceof Promise) {
+                obj[this.valueField] = key;
+                obj[this.textField] = key;
+                obj['isLoading'] = true;
+                //
+                existsItem.then((r) => {
+                    if (typeof r === 'object') {
+                        obj[this.valueField] = r[this.valueField];
+                        obj[this.textField] = r[this.textField];
+                    }
+                    else {
+                        obj[this.valueField] = obj[this.textField] = r || key;
+                    }
+                }).finally(() => {
+                    obj['isLoading'] = false;
+                    this.cdr.markForCheck();
+                });
+            }
+            else if (existsItem) {
+                obj[this.valueField] = existsItem;
+            }
             else {
                 obj[this.valueField] = item;
-                obj[this.textField] = item.toString();
             }
         }
+        if (!obj[this.textField]) {
+            obj[this.textField] = obj[this.valueField];
+        }
+        this._cacheList[cacheKey] = obj;
         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 != null ? [this.value] : [];
+        this._selectedItems = values.map((v) => this.normalizeItem(v));
     }
     unselectItems(...items) {
         if (!items || items.length === 0) {
@@ -1470,7 +1518,11 @@ class MXSelectionValueComponent extends MXValueComponent {
     }
     getDisplayText(item) {
         const normalizeItem = this.normalizeItem(item);
-        return normalizeItem[this.textField];
+        return normalizeItem['isLoading'] ? 'Loading...' : 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 +1538,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 +1547,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 +1581,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