@acorex/components 16.0.2 → 17.0.1

package/fesm2022/acorex-components-common.mjs

@@ -0,0 +1,1737 @@
+import { flatten, clone, filter, isEqual } from 'lodash-es';
+import * as i0 from '@angular/core';
+import { Injectable, Directive, Host, Self, Optional, Input, Inject, NgModule, inject, ChangeDetectorRef, ElementRef, ViewContainerRef, EventEmitter, InjectionToken, Output } from '@angular/core';
+import { DataSource } from '@angular/cdk/collections';
+import { Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, Subject, fromEvent, noop, skip } from 'rxjs';
+import { DOCUMENT } from '@angular/common';
+import * as i1 from '@angular/platform-browser';
+import { Observable } from 'rxjs/internal/Observable';
+import { map, pairwise, filter as filter$1, startWith, exhaustMap } from 'rxjs/operators';
+import { isBrowser } from '@acorex/core/platform';
+import { classes } from 'polytype';
+import { AXHtmlUtil } from '@acorex/core/utils';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { AXValidationService } from '@acorex/core/validation';
+import * as i1$1 from '@angular/forms';
+
+const defaultOffset = 3;
+function convertToPlacement(value) {
+    const result = [];
+    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));
+        result.push(...list);
+    }
+    else {
+        if (typeof value === 'string') {
+            const p = AX_PLACEMENT_MAP[value];
+            if (p) {
+                result.push(...[clone(p.origin), ...clone(p.alts)]);
+            }
+        }
+        else {
+            if ('originX' in value && 'originY' in value) {
+                result.push(clone(value));
+            }
+        }
+    }
+    return result;
+}
+const AX_PLACEMENT_TOP = {
+    originX: 'center',
+    originY: 'top',
+    overlayX: 'center',
+    overlayY: 'bottom',
+    offsetY: -defaultOffset,
+};
+const AX_PLACEMENT_TOP_START = {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    offsetY: -defaultOffset,
+};
+const AX_PLACEMENT_TOP_END = {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    offsetY: -defaultOffset,
+};
+const AX_PLACEMENT_BOTTOM = {
+    originX: 'center',
+    originY: 'bottom',
+    overlayX: 'center',
+    overlayY: 'top',
+    offsetY: defaultOffset,
+};
+const AX_PLACEMENT_BOTTOM_START = {
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetY: defaultOffset,
+};
+const AX_PLACEMENT_BOTTOM_END = {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'end',
+    overlayY: 'top',
+    offsetY: defaultOffset,
+};
+const AX_PLACEMENT_START = {
+    originX: 'start',
+    originY: 'center',
+    overlayX: 'end',
+    overlayY: 'center',
+    offsetX: -defaultOffset,
+};
+const AX_PLACEMENT_START_TOP = {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+    offsetX: -defaultOffset,
+};
+const AX_PLACEMENT_START_BOTTOM = {
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    offsetX: -defaultOffset,
+};
+const AX_PLACEMENT_END = {
+    originX: 'end',
+    originY: 'center',
+    overlayX: 'start',
+    overlayY: 'center',
+    offsetX: defaultOffset,
+};
+const AX_PLACEMENT_END_TOP = {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetX: defaultOffset,
+};
+const AX_PLACEMENT_END_BOTTOM = {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    offsetX: defaultOffset,
+};
+const AX_PLACEMENT_MAP = {
+    top: {
+        origin: AX_PLACEMENT_TOP,
+        alts: [AX_PLACEMENT_BOTTOM],
+    },
+    'top-start': {
+        origin: AX_PLACEMENT_TOP_START,
+        alts: [AX_PLACEMENT_BOTTOM_START],
+    },
+    'top-end': {
+        origin: AX_PLACEMENT_TOP_END,
+        alts: [AX_PLACEMENT_BOTTOM_END],
+    },
+    bottom: {
+        origin: AX_PLACEMENT_BOTTOM,
+        alts: [AX_PLACEMENT_BOTTOM],
+    },
+    'bottom-start': {
+        origin: AX_PLACEMENT_BOTTOM_START,
+        alts: [
+            AX_PLACEMENT_BOTTOM_END,
+            AX_PLACEMENT_TOP_START,
+            AX_PLACEMENT_TOP_END,
+        ],
+    },
+    'bottom-end': {
+        origin: AX_PLACEMENT_BOTTOM_END,
+        alts: [AX_PLACEMENT_TOP_END],
+    },
+    end: {
+        origin: AX_PLACEMENT_END,
+        alts: [AX_PLACEMENT_START],
+    },
+    'end-top': {
+        origin: AX_PLACEMENT_END_TOP,
+        alts: [
+            AX_PLACEMENT_END_BOTTOM,
+            AX_PLACEMENT_START_TOP,
+            AX_PLACEMENT_START_BOTTOM,
+        ],
+    },
+    'end-bottom': {
+        origin: AX_PLACEMENT_END_BOTTOM,
+        alts: [
+            AX_PLACEMENT_END_TOP,
+            AX_PLACEMENT_START_BOTTOM,
+            AX_PLACEMENT_START_TOP,
+        ],
+    },
+    start: {
+        origin: AX_PLACEMENT_START,
+        alts: [AX_PLACEMENT_END],
+    },
+    'start-top': {
+        origin: AX_PLACEMENT_START_TOP,
+        alts: [
+            AX_PLACEMENT_START_BOTTOM,
+            AX_PLACEMENT_END_TOP,
+            AX_PLACEMENT_END_BOTTOM,
+        ],
+    },
+    'start-bottom': {
+        origin: AX_PLACEMENT_START_BOTTOM,
+        alts: [
+            AX_PLACEMENT_START_TOP,
+            AX_PLACEMENT_END_BOTTOM,
+            AX_PLACEMENT_END_TOP,
+        ],
+    },
+};
+
+/**
+ * A token that specifies the  selection mode of component.
+ */
+
+/**
+ *  Contains native event
+ * @category Events
+ */
+class AXEvent {
+    constructor() {
+        this.isUserInteraction = false;
+    }
+}
+/**
+ *  Contains native event
+ * @category Events
+ */
+class AXHtmlEvent extends AXEvent {
+}
+/**
+ *  Contains native event
+ * @category Events
+ */
+class AXValueChangedEvent extends AXEvent {
+}
+/**
+ *  Contains native event
+ * @category Events
+ */
+class AXOptionChangedEvent extends AXEvent {
+}
+/**
+ *  Fires each time the user click the element.
+ * @category Events
+ */
+class AXClickEvent extends AXHtmlEvent {
+    constructor() {
+        super(...arguments);
+        /**
+         *  uses for extra data
+         */
+        this.data = null;
+        this.nativeEvent = null;
+    }
+}
+/**
+ *  Fires each time the user click the element.
+ * @category Events
+ */
+class AXButtonClickEvent extends AXClickEvent {
+}
+/**
+ *  Fires each time the user click the element.
+ * @category Events
+ */
+class AXItemClickEvent extends AXClickEvent {
+}
+/**
+ *  Fires each time the component gets focused.
+ * @category Events
+ */
+class AXFocusEvent extends AXHtmlEvent {
+}
+/**
+ *  Fires each time an item or multiple items selected by the user or value.
+ * @category Events
+ */
+class AXSelectionValueChangedEvent extends AXValueChangedEvent {
+    constructor() {
+        super(...arguments);
+        this.value = null;
+        this.oldValue = null;
+        this.selectedKeys = [];
+        this.selectedItems = [];
+    }
+}
+/**
+ *  Contains range start & end values
+ * @category Events
+ */
+class AXRangeChangedEvent extends AXEvent {
+}
+
+const TAB_META_KEY = '__meta__';
+class AXComponentCloseEvent extends AXEvent {
+}
+class AXComponentClosing {
+    constructor() {
+        this.cancel = false;
+    }
+}
+class AXComponentResult {
+}
+/**
+ *  Defines a CSS class—or multiple classes separated by spaces— which are applied to a span element inside the Button. Allows the usage of custom icons after the primary text.
+ */
+class AXComponentClosedPromise extends Promise {
+    constructor(executor) {
+        super(executor);
+    }
+    close() {
+        if (this.closeMethod) {
+            this.closeMethod();
+        }
+    }
+}
+class AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXClosbaleComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXClosbaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXClosbaleComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXClosbaleComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXClearableComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXClearableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXClearableComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXSearchableComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXSearchableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXSearchableComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXValuableComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXValuableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXValuableComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXFocusableComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXFocusableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXFocusableComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPagedComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXPagedComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXPagedComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXListDataSource extends DataSource {
+    get range() {
+        return this._range;
+    }
+    /**
+     * @ignore
+     */
+    constructor(config) {
+        super();
+        this.config = config;
+        this.debounceTime = 0;
+        this.subscription = new Subscription();
+        this._range = { start: 0, end: 0 };
+        this.source = config.source;
+        if (config.debounceTime)
+            this.debounceTime = config.debounceTime;
+        //
+        this.dataStream = new BehaviorSubject(this.config.source.cachedItems);
+        this.source.onChanged.subscribe((data) => {
+            this.dataStream.next(data.cachedItems);
+        });
+    }
+    connect(collectionViewer) {
+        this.subscription.add(collectionViewer.viewChange
+            .pipe(debounceTime(this.debounceTime))
+            .pipe(distinctUntilChanged())
+            .subscribe((range) => {
+            this._range = range;
+            const startPage = this.getPageForIndex(range.start);
+            const endPage = this.getPageForIndex(range.end - 1);
+            for (let i = startPage; i <= endPage; i++) {
+                this.source.setPage(i);
+            }
+        }));
+        return this.dataStream;
+    }
+    disconnect() {
+        this.subscription.unsubscribe();
+    }
+    getPageForIndex(index) {
+        return Math.floor(index / this.source.config.pageSize);
+    }
+    refresh() {
+        this.dataStream.next(new Array(this.source.pageSize));
+        this.source.refresh();
+    }
+}
+
+class AXDataSource {
+    get totalCount() {
+        return this._totalCount;
+    }
+    get totalPages() {
+        return Math.floor(this.totalCount / this.config.pageSize);
+    }
+    get pageSize() {
+        return this.config.pageSize;
+    }
+    get cachedItems() {
+        return this._cachedItems;
+    }
+    get items() {
+        return this._items;
+    }
+    get query() {
+        return this._query;
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    constructor(config) {
+        this.useCache = true;
+        this._totalCount = 0;
+        this._items = [];
+        this.fetchedPages = new Set();
+        this._page = 0;
+        this._query = { skip: 0, take: 0, sort: [] };
+        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.take = this.config.pageSize;
+    }
+    load() {
+        const page = this._page;
+        if (this.fetchedPages.has(page) && this.useCache) {
+            return;
+        }
+        this.setLoadingState(true);
+        this.fetchedPages.add(page);
+        this._query.take = this.config.pageSize;
+        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();
+        }
+    }
+    setPageSize(pageSize) {
+        this.config.pageSize = pageSize;
+        this.load();
+    }
+    filter(value) {
+        this._query.filter = value;
+    }
+    sort(...value) {
+        this._query.sort = value;
+    }
+    clearFilter() {
+        this._query.filter = null;
+    }
+    reset() {
+        this._query.filter = null;
+        this._query.sort = [];
+        this._query.skip = 0;
+        this._cachedItems = new Array(this.config.pageSize);
+        this.fetchedPages.clear();
+        this._page = 0;
+        this._totalCount = 0;
+    }
+    refresh() {
+        const currentFilter = this._query.filter;
+        const currentSort = this._query.sort;
+        this.reset();
+        this._query.filter = currentFilter;
+        this._query.sort = currentSort;
+        this.load();
+    }
+    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: 100 }) {
+    const config = {
+        key: options.key,
+        pageSize: options.pageSize,
+        load: (e) => {
+            const result = e.filter ? filter(items, e.filter) : 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 AXDataSource(config);
+}
+
+const AX_STYLE_COLOR_TYPES = [
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'ghost',
+];
+const AX_LOCATIONS = [
+    'bottom-start',
+    'bottom-center',
+    'bottom-end',
+    'top-start',
+    'top-center',
+    'top-end',
+    'center-end',
+    'center-start',
+];
+
+class AXAutoFocusDirective {
+    constructor(renderer, el, _host) {
+        this.renderer = renderer;
+        this.el = el;
+        this._host = _host;
+        this.autoFocus = true;
+        this.time = 50;
+    }
+    ngAfterViewInit() {
+        this.doFocus();
+    }
+    doFocus() {
+        if (this.autoFocus) {
+            if (this._host) {
+                setTimeout(() => {
+                    this._host.focus();
+                }, 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 attr = document.createAttribute('autofocus');
+            focusable.setAttributeNode(attr);
+            const hasTabindex = focusable.hasAttribute('tabindex');
+            if (!hasTabindex) {
+                focusable.setAttribute('tabindex', '0');
+            }
+            setTimeout(() => {
+                focusable.focus();
+            }, this.time);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXAutoFocusDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: AXFocusableComponent, host: true, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: { autoFocus: ["axAutoFocus", "autoFocus"], time: ["axAutoFocusTime", "time"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axAutoFocus]',
+                }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AXFocusableComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Self
+                }, {
+                    type: Optional
+                }] }], propDecorators: { autoFocus: [{
+                type: Input,
+                args: ['axAutoFocus']
+            }], time: [{
+                type: Input,
+                args: ['axAutoFocusTime']
+            }] } });
+
+class AXHotkeysService {
+    constructor(eventManager, document) {
+        this.eventManager = eventManager;
+        this.document = document;
+        this.defaults = {
+            element: this.document,
+        };
+    }
+    /**
+     * Add shortcut
+     *
+     *
+     * @param options
+     * @returns Observable
+     *
+     */
+    addShortcut(options) {
+        const merged = { ...this.defaults, ...options };
+        const event = `keydown.${merged.keys}`;
+        return new Observable((observer) => {
+            const handler = (e) => {
+                e.preventDefault();
+                observer.next(e);
+            };
+            if (merged.element) {
+                // Todo: check addEventListener is not function
+                const dispose = this.eventManager.addEventListener(merged.element, event, handler);
+                return () => {
+                    dispose();
+                };
+            }
+            else {
+                // console.error('Element is not accessible');
+                return null;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXHotkeysService, deps: [{ token: i1.EventManager }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXHotkeysService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXHotkeysService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.EventManager }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+class AXHotkeyDirective {
+    constructor(el, _host, hs) {
+        this.el = el;
+        this._host = _host;
+        this.hs = hs;
+        this.axHotkey = '';
+        this._subs = [];
+    }
+    ngAfterViewInit() {
+        if (!this.axHotkey || !this._host)
+            return;
+        if (typeof this.axHotkey == 'string') {
+            this._addDefaultAction(this.axHotkey);
+        }
+        else if (typeof this.axHotkey == 'object' &&
+            !Array.isArray(this.axHotkey)) {
+            this._addHotKeyAction([this.axHotkey]);
+        }
+        else if (Array.isArray(this.axHotkey)) {
+            this._addHotKeyAction(this.axHotkey);
+        }
+    }
+    _addDefaultAction(hotkey) {
+        this._subs.push(this.hs.addShortcut({ keys: hotkey }).subscribe(() => {
+            ['click', 'toggle', 'open', 'focus'].forEach((a) => {
+                if (this._host[a]) {
+                    this._host[a]();
+                    return;
+                }
+            });
+        }));
+    }
+    _addHotKeyAction(hotkeys) {
+        hotkeys.forEach((k) => {
+            const hotkey = Object.entries(k)[0][0];
+            const action = Object.entries(k)[0][1];
+            if (!action)
+                this._addDefaultAction(hotkey);
+            else {
+                this._subs.push(this.hs.addShortcut({ keys: hotkey }).subscribe(() => {
+                    if (typeof action == 'string' && this._host[action]) {
+                        this._host[action]();
+                        return;
+                    }
+                    if (typeof action == 'function') {
+                        action();
+                        return;
+                    }
+                }));
+            }
+        });
+    }
+    ngOnDestroy() {
+        this._subs.forEach((s) => {
+            s.unsubscribe();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", 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: "17.3.2", type: AXHotkeyDirective, selector: "[axHotkey]", inputs: { axHotkey: "axHotkey" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXHotkeyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axHotkey]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AXComponent, decorators: [{
+                    type: Host
+                }, {
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: AXHotkeysService }], propDecorators: { axHotkey: [{
+                type: Input
+            }] } });
+
+const AX_DEFAULT_SCROLL_POSITION = {
+    scrollHeight: 0,
+    scrollTop: 0,
+    clientHeight: 0,
+};
+class AXInfiniteScrollerDirective {
+    constructor(elm) {
+        this.elm = elm;
+        this.scrollPercent = 70;
+        this.isUserScrollingDown = (positions) => {
+            return positions[0].sT < positions[1].sT;
+        };
+        this.isScrollExpectedPercent = (position) => {
+            return (position.sT + position.cH) / position.sH > this.scrollPercent / 100;
+        };
+    }
+    ngAfterViewInit() {
+        this.registerScrollEvent();
+        this.streamScrollEvents();
+        this.requestCallbackOnScroll();
+    }
+    registerScrollEvent() {
+        this.scrollEvent$ = fromEvent(this.elm.nativeElement, 'scroll');
+    }
+    streamScrollEvents() {
+        this.userScrolledDown$ = this.scrollEvent$.pipe(map((e) => ({
+            scrollHeight: e.target.scrollHeight,
+            scrollTop: e.target.scrollTop,
+            clientHeight: e.target.clientHeight,
+        })), pairwise(), filter$1((positions) => this.isUserScrollingDown(positions) &&
+            this.isScrollExpectedPercent(positions[1])));
+    }
+    requestCallbackOnScroll() {
+        this.requestOnScroll$ = this.userScrolledDown$;
+        if (this.immediateCallback) {
+            this.requestOnScroll$ = this.requestOnScroll$.pipe(startWith([AX_DEFAULT_SCROLL_POSITION, AX_DEFAULT_SCROLL_POSITION]));
+        }
+        this.requestOnScroll$.pipe(exhaustMap(() => {
+            return this.scrollCallback();
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: AXInfiniteScrollerDirective, selector: "[axInfiniteScroller]", inputs: { scrollCallback: "scrollCallback", immediateCallback: "immediateCallback", scrollPercent: "scrollPercent" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axInfiniteScroller]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrollCallback: [{
+                type: Input
+            }], immediateCallback: [{
+                type: Input
+            }], scrollPercent: [{
+                type: Input
+            }] } });
+
+class AXResponsiveDirective {
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        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) => ({
+                        element: c,
+                        classList: Array.from(c.classList)
+                            .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);
+                    });
+                }
+            }
+        });
+        this._observer.observe(_elementRef.nativeElement);
+    }
+    ngOnDestroy() {
+        this._observer?.disconnect();
+        this._observer?.unobserve(this._elementRef.nativeElement);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: AXResponsiveDirective, selector: "[axResponsive]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXResponsiveDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[axResponsive]' }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
+class AXCommonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: AXCommonModule, declarations: [AXResponsiveDirective,
+            AXInfiniteScrollerDirective,
+            AXAutoFocusDirective,
+            AXHotkeyDirective], exports: [AXResponsiveDirective,
+            AXInfiniteScrollerDirective,
+            AXAutoFocusDirective,
+            AXHotkeyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXCommonModule, providers: [AXHotkeysService] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AXResponsiveDirective,
+                        AXInfiniteScrollerDirective,
+                        AXAutoFocusDirective,
+                        AXHotkeyDirective,
+                    ],
+                    imports: [],
+                    exports: [
+                        AXResponsiveDirective,
+                        AXInfiniteScrollerDirective,
+                        AXAutoFocusDirective,
+                        AXHotkeyDirective,
+                    ],
+                    providers: [AXHotkeysService],
+                }]
+        }] });
+
+class AXDomService {
+    generateElementId() {
+        const dateString = Date.now().toString(36);
+        const randomness = Math.random().toString(36).substr(2);
+        return dateString + randomness;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDomService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXDomService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MXBaseComponent {
+    constructor() {
+        this._cdr = inject(ChangeDetectorRef);
+        this._elementRef = inject(ElementRef);
+        this._viewRef = inject(ViewContainerRef);
+        this._domService = inject(AXDomService);
+        this._id = this._domService.generateElementId();
+        this.onOptionChanged = new EventEmitter();
+    }
+    get id() {
+        return this._id;
+    }
+    set id(v) {
+        this._id = v;
+    }
+    get cdr() {
+        return this._cdr;
+    }
+    getHostElement() {
+        return this._elementRef?.nativeElement;
+    }
+    getViewContainer() {
+        return this._viewRef;
+    }
+    internalOptionChanging(option) {
+        return option?.value;
+    }
+    internalOptionChanged(option) { }
+    ngOnInit() {
+        this.getHostElement().__axContext__ = this;
+        this._detectLayout();
+    }
+    setOption(option) {
+        const oldValue = this[option.name];
+        let newValue = this.internalOptionChanging({
+            name: option.name,
+            value: option.value,
+        });
+        if (option.beforeCallback) {
+            newValue = option.beforeCallback(oldValue, newValue);
+        }
+        //TODO : check real changes if value is object
+        if (oldValue != newValue) {
+            this[`_${option.name}`] = option.value;
+            this.onOptionChanged.emit({
+                component: this,
+                name: option.name,
+                newValue,
+                oldValue,
+            });
+            const emitter = this[`${option.name}Change`];
+            emitter?.emit(newValue);
+            this.internalOptionChanged({ name: option.name, value: newValue });
+        }
+        if (option.afterCallback)
+            option.afterCallback(oldValue, newValue);
+    }
+    _detectLayout() {
+        if (isBrowser()) {
+            this.rtl =
+                this.getHostElement().classList.contains('ax-rtl') ||
+                    window.getComputedStyle(this.getHostElement(), null).getPropertyValue('direction') === 'rtl';
+        }
+    }
+    get rtl() {
+        return this._rtl;
+    }
+    set rtl(value) {
+        this.setOption({ name: 'rtl', value });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXBaseComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXBaseComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class MXColorComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.colorChange = new EventEmitter();
+        this._color = 'ghost';
+    }
+    /**
+     *  Predefined color schemes
+     */
+    get color() {
+        return this._color;
+    }
+    set color(value) {
+        this.setOption({
+            name: 'color',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+}
+
+class MXLookableComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXLookableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXLookableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXLookableComponent, decorators: [{
+            type: Injectable
+        }] });
+class MXLookComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.lookChange = new EventEmitter();
+        this._look = 'solid';
+    }
+    /**
+     *  Predefined look schemes
+     */
+    get look() {
+        return this._look;
+    }
+    set look(value) {
+        this.setOption({
+            name: 'look',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+}
+
+class MXColorLookComponent extends classes(MXColorComponent, MXLookComponent) {
+}
+
+class MXInteractiveComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.onTouchedCallback = noop;
+        this._touched = false;
+        this.disabledChange = new EventEmitter();
+        this._tabIndex = 0;
+        /**
+         *  Fires each time the component gets focused.
+         *  @event
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         *  Fires each time the component gets blurred.
+         *  @event
+         */
+        this.onBlur = new EventEmitter();
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
+    }
+    get touched() {
+        return this._touched;
+    }
+    markAsTouched() {
+        if (!this.touched) {
+            this.onTouchedCallback();
+            this._touched = true;
+        }
+    }
+    /**
+     *  If set to true, it disables the component.
+     */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        value = coerceBooleanProperty(value);
+        this.setOption({
+            name: 'disabled',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /**
+     *  Specifies the tabindex of the component.
+     */
+    get tabIndex() {
+        return this.disabled ? -1 : this._tabIndex;
+    }
+    set tabIndex(value) {
+        this.setOption({
+            name: 'tabIndex',
+            value: value != null ? coerceNumberProperty(value) : 0,
+        });
+    }
+    emitOnFocusEvent(e) {
+        this.onFocus.emit({
+            component: this,
+            htmlElement: this.getHostElement(),
+            nativeEvent: e,
+        });
+    }
+    emitOnBlurEvent(e) {
+        this.markAsTouched();
+        this.onBlur.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());
+    }
+    blur() {
+        AXHtmlUtil.blurElement(this.getHostElement());
+    }
+    /**
+     *  Check component is focused or has any focused element.
+     */
+    hasFocus() {
+        return AXHtmlUtil.hasFocus(this.getHostElement());
+    }
+}
+
+class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookComponent) {
+    /**
+     *  Defines the primary text to show inside the button.
+     */
+    get text() {
+        return this._text;
+    }
+    set text(v) {
+        this.setOption({
+            name: 'text',
+            value: v,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    /**
+     *  Provides visual styling that indicates if the Button is active
+     */
+    get toggleable() {
+        return this._toggleable;
+    }
+    set toggleable(value) {
+        this.setOption({
+            name: 'toggleable',
+            value,
+        });
+    }
+    /**
+     *  Indicates if the Button is selected or not
+     */
+    get selected() {
+        return this._selected;
+    }
+    set selected(value) {
+        this.setOption({
+            name: 'selected',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    constructor() {
+        super();
+        this.textChange = new EventEmitter();
+        this.toggleableChange = new EventEmitter();
+        this._toggleable = false;
+        this.selectedChange = new EventEmitter();
+        this._selected = false;
+    }
+    get cssClasses() {
+        const cssClasses = {
+            'ax-button-icon': !this.text,
+            'ax-state-disabled': this.disabled,
+            'ax-state-selected': this.selected,
+            'ax-el-interactive': true,
+        };
+        cssClasses[`ax-el-${this['color'] || 'solid'}${this['look'] ? '-' + this['look'] : '-solid'}`] = true;
+        return cssClasses;
+    }
+}
+
+class MXValueComponent extends MXInteractiveComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         *  Fires each time the user press a key.
+         *  @event
+         */
+        this.onValueChanged = new EventEmitter();
+        /**
+         * @deprecated The event should not be used, use ngModelChange instead
+         */
+        this.valueChange = new EventEmitter();
+        this.readonlyChange = new EventEmitter();
+        this._readonly = false;
+        this._dirty = false;
+        this._isUserInteraction = false;
+        this.stateChange = new EventEmitter();
+        this._state = 'clear';
+        this.validationService = inject(AXValidationService);
+        this.validationRulesChange = new EventEmitter();
+        this.validationRules = [];
+        this.onChangeCallback = noop;
+    }
+    /**
+     *  If set to true, user cannot change the value of component.
+     */
+    get readonly() {
+        return this._readonly;
+    }
+    set readonly(value) {
+        value = coerceBooleanProperty(value);
+        this.setOption({
+            name: 'readonly',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
+    }
+    get name() {
+        return this._name;
+    }
+    set name(value) {
+        this._name = value;
+    }
+    get dirty() {
+        return this._dirty;
+    }
+    markAsDirty() {
+        this._dirty = true;
+    }
+    /**
+     * @deprecated The property should not be used, use ngModel instead
+     */
+    get value() {
+        return this.internalGetValue(this._value) ?? this.defaultValue;
+    }
+    set value(v) {
+        v = this.internalSetValue(v);
+        const old = clone(this.value);
+        if (!isEqual(old, v)) {
+            this._value = v;
+            this.emitOnValueChangedEvent(old, this.value);
+            this.internalValueChanged(this.value);
+        }
+        if (v == null || v == undefined || v == '' || (Array.isArray(v) && v.length == 0)) {
+            this.setState('clear');
+        }
+    }
+    get state() {
+        return this._state;
+    }
+    set state(value) {
+        this.setState(value);
+        this.stateChange.emit(value);
+    }
+    emitOnValueChangedEvent(oldValue, newValue) {
+        this.valueChange.emit(newValue);
+        this.onValueChanged.emit({
+            component: this,
+            value: newValue,
+            oldValue: oldValue,
+            name: this.name,
+            isUserInteraction: this._isUserInteraction,
+        });
+        this.onChangeCallback(newValue);
+        this.cdr.markForCheck();
+        this._isUserInteraction = false;
+    }
+    internalSetValue(value) {
+        return value;
+    }
+    internalGetValue(value) {
+        return value;
+    }
+    internalValueChanged(value) { }
+    ngOnInit() {
+        super.ngOnInit();
+        //
+        this.registerValidation();
+    }
+    ngOnDestroy() {
+        this.onValueChanged?.unsubscribe();
+        this.onOptionChanged?.unsubscribe();
+    }
+    registerValidation() {
+        const a = this.getHostElement().querySelectorAll('[ax-form-item="true"]');
+        a.forEach((c) => {
+            c.removeAttribute('ax-form-item');
+        });
+        this.getHostElement().setAttribute('ax-form-item', 'true');
+    }
+    get isRequired() {
+        return this.validationRules?.some((c) => c.rule == 'required');
+    }
+    addValidationRule(rule) {
+        this.validationRules.push(rule);
+        this.validationRulesChange.emit(this.validationRules);
+    }
+    removeValidationRule(rule) {
+        this.validationRules = this.validationRules.filter((r) => r.rule !== rule.rule || !isEqual(r.options, rule.options));
+        this.validationRulesChange.emit(this.validationRules);
+    }
+    async validate() {
+        const container_classes = ['ax-editor-container', 'ax-checkbox', 'ax-radio'];
+        const container = container_classes.some((c) => this.getHostElement().classList.contains(c))
+            ? this.getHostElement()
+            : this.getHostElement().querySelector('.ax-editor-container');
+        const formField = container?.closest('ax-form-field') || container?.closest('ax-checkbox');
+        const label = formField?.querySelector('ax-label') || formField?.querySelector('label');
+        //
+        const rules = this.validationService.ruleFor(this.value);
+        this.validationRules.forEach((r) => {
+            r.options['title'] = (label?.firstChild?.textContent ?? this.name)?.replace('*', '').trim();
+            rules.addRule(r.rule, r.options);
+        });
+        const result = await rules.validate();
+        if (result.result) {
+            this.setState('clear');
+        }
+        else {
+            const message = result.rules.find((c) => !c.result).message;
+            this.setState('error', message);
+        }
+        return result;
+    }
+    setState(state, ...args) {
+        //TODO: find a better solution
+        if (isBrowser()) {
+            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 label = formField?.querySelector('ax-label') || formField?.querySelector('label');
+            let target = container || this.getHostElement().firstElementChild;
+            if (target?.querySelector('.ax-error-container')) {
+                target = target.querySelector('.ax-error-container');
+            }
+            const parent = target?.parentElement;
+            if (!target || !parent)
+                return;
+            switch (state) {
+                case 'clear':
+                    this._state = 'clear';
+                    if (parent.querySelector('span.ax-error-message')) {
+                        parent.removeChild(parent.querySelector('span.ax-error-message'));
+                    }
+                    label?.classList.remove('ax-state-error');
+                    target.classList.remove('ax-state-error', 'ax-state-success');
+                    break;
+                case 'success':
+                    this.setState('clear');
+                    target.classList.add('ax-state-success');
+                    this._state = 'success';
+                    break;
+                case 'error':
+                    this.setState('clear');
+                    if (args[0]) {
+                        const span = document.createElement('span');
+                        span.innerHTML = args[0];
+                        span.classList.add('ax-error-message');
+                        parent.appendChild(span);
+                    }
+                    label?.classList.add('ax-state-error');
+                    target.classList.add('ax-state-error');
+                    this._state = 'error';
+                    break;
+            }
+            this.cdr.markForCheck();
+        }
+    }
+    registerOnChange(fn) {
+        this.onChangeCallback = fn;
+    }
+    writeValue(value) {
+        this.value = value;
+    }
+    commitValue(value, u = false) {
+        if (u) {
+            this.markAsTouched();
+            this.markAsDirty();
+            this._isUserInteraction = true;
+        }
+        this.writeValue(value);
+    }
+    clear(e = false) {
+        this.commitValue(null, e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXValueComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXValueComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class MXInputBaseValueComponent extends MXValueComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         *  Fires each time the user press a key.
+         *  @event
+         */
+        this.onKeyDown = new EventEmitter();
+        /**
+         *  Fires each time the user press a key.
+         *  @event
+         */
+        this.onKeyUp = new EventEmitter();
+        /**
+         *  Fires each time the user press a key.
+         *  @event
+         */
+        this.onKeyPress = new EventEmitter();
+    }
+    emitOnKeydownEvent(e) {
+        this.onKeyDown.emit({
+            component: this,
+            nativeEvent: e,
+        });
+    }
+    emitOnKeyupEvent(e) {
+        this.onKeyUp.emit({
+            component: this,
+            nativeEvent: e,
+        });
+    }
+    emitOnKeypressEvent(e) {
+        this.onKeyPress.emit({
+            component: this,
+            nativeEvent: e,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXInputBaseValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXInputBaseValueComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXInputBaseValueComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class MXSelectionBridgeService {
+    constructor() {
+        this.selectedItems = [];
+        this.cacheList = {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXSelectionBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXSelectionBridgeService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXSelectionBridgeService, decorators: [{
+            type: Injectable
+        }] });
+const AX_SELECTION_DATA_TOKEN = new InjectionToken('AX_SELECTION_DATA_TOKEN');
+class MXSelectionValueComponent extends MXValueComponent {
+    constructor() {
+        super(...arguments);
+        this.dataService = inject(AX_SELECTION_DATA_TOKEN);
+        this._valueField = 'id';
+        this._textField = 'text';
+        this._disabledField = 'disabled';
+        this._multiple = false;
+    }
+    get valueField() {
+        return this._valueField;
+    }
+    set valueField(v) {
+        this.setOption({
+            name: 'valueField',
+            value: v,
+        });
+    }
+    get textField() {
+        return this._textField;
+    }
+    set textField(v) {
+        this.setOption({
+            name: 'textField',
+            value: v,
+        });
+    }
+    get disabledField() {
+        return this._disabledField;
+    }
+    set disabledField(v) {
+        this.setOption({
+            name: 'disabledField',
+            value: v,
+        });
+    }
+    get multiple() {
+        return this._multiple;
+    }
+    set multiple(v) {
+        this.setOption({
+            name: 'multiple',
+            value: v,
+            afterCallback: () => {
+                this.clear(false);
+            },
+        });
+    }
+    get selectedItems() {
+        return this.dataService.selectedItems || [];
+    }
+    internalSetValue(value) {
+        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, findBykey = false) {
+        if (items == null)
+            return [];
+        return items.filter((c) => c != null).map((i) => this.normalizeItem(i, findBykey));
+    }
+    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.dataService.cacheList[cacheKey] && this.dataService.cacheList[cacheKey][this.textField])
+            return this.dataService.cacheList[cacheKey];
+        //
+        const obj = {};
+        if (complex && hasText) {
+            Object.assign(obj, item);
+        }
+        else {
+            const existsItem = findBykey ? this.getItemByKey(key) : null;
+            if (existsItem && existsItem instanceof Promise) {
+                obj[this.valueField] = 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] = r || key;
+                    }
+                })
+                    .finally(() => {
+                    obj['isLoading'] = false;
+                    this.dataService.cacheList[cacheKey] = obj;
+                    this.cdr.markForCheck();
+                });
+            }
+            else if (existsItem) {
+                obj[this.valueField] = complex ? existsItem[this.valueField] : existsItem;
+            }
+            else {
+                obj[this.valueField] = complex ? item[this.valueField] : item;
+            }
+        }
+        this.dataService.cacheList[cacheKey] = obj;
+        return obj;
+    }
+    _normalizeSelectedItems() {
+        const values = Array.isArray(this.value) ? this.value : this.value != null ? [this.value] : [];
+        this.dataService.selectedItems = values.map((v) => this.normalizeItem(v));
+    }
+    unselectItems(...items) {
+        if (!items || items.length === 0) {
+            this.commitValue([], true);
+            return;
+        }
+        const normalizeItems = Array.isArray(items) ? this.normalizeItemsList(items) : [this.normalizeItem(items)];
+        const newSelectedItems = this.selectedItems.filter((i) => !normalizeItems.some((n) => n[this.valueField] == i[this.valueField]));
+        this.commitValue(newSelectedItems, true);
+    }
+    selectItems(...items) {
+        if (items && items.length) {
+            let newSelectedItems = Array.isArray(this.value) ? this.value : [this.value];
+            const normalizeItems = Array.isArray(items) ? this.normalizeItemsList(items) : [this.normalizeItem(items)];
+            if (this.multiple) {
+                newSelectedItems = [...newSelectedItems, ...normalizeItems];
+            }
+            else {
+                newSelectedItems = normalizeItems;
+            }
+            this.commitValue(newSelectedItems, true);
+        }
+    }
+    toggleSelect(...items) {
+        items?.forEach((item) => {
+            if (this.multiple) {
+                this.isItemSelected(item) ? this.unselectItems(item) : this.selectItems(item);
+            }
+            else {
+                this.selectItems(item);
+            }
+        });
+    }
+    isItemSelected(item) {
+        return this.selectedItems.some((c) => c[this.valueField] === this.normalizeItem(item)[this.valueField]);
+    }
+    isItemDisabled(item) {
+        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] || normalizeItem[this.valueField];
+    }
+    getValue(item) {
+        const normalizeItem = this.normalizeItem(item);
+        return normalizeItem[this.valueField];
+    }
+    clearSelectionCache() {
+        this.dataService.cacheList = {};
+        this.dataService.selectedItems = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXSelectionValueComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
+            type: Injectable
+        }] });
+
+class AXNgModelDelayedValueChangedDirective {
+    get delayTime() {
+        return this._delayTime;
+    }
+    set delayTime(v) {
+        if (v != this._delayTime) {
+            this._delayTime = v;
+            this.axDelayTimeChange.emit(v);
+            this.update();
+        }
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    constructor(ngModel) {
+        this.ngModel = ngModel;
+        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.axDelayedValueChanged.emit(value));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, deps: [{ token: i1$1.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: AXNgModelDelayedValueChangedDirective, isStandalone: true, selector: "[axDelayedValueChanged]", inputs: { delayTime: "delayTime" }, outputs: { axDelayedValueChanged: "axDelayedValueChanged", axDelayTimeChange: "axDelayTimeChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axDelayedValueChanged]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1$1.NgModel }], propDecorators: { axDelayedValueChanged: [{
+                type: Output
+            }], axDelayTimeChange: [{
+                type: Output
+            }], delayTime: [{
+                type: Input
+            }] } });
+
+class AXRippleDirective {
+    constructor(el, cdr) {
+        this.el = el;
+        this.cdr = cdr;
+        this.enabled = true;
+        this.axRippleColor = 'rgb(255, 255, 255 , 0.3)';
+    }
+    ngOnInit() {
+        if (this.enabled) {
+            this.el.nativeElement.addEventListener('click', (event) => {
+                this.onElementClick(event);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.el.nativeElement.removeEventListener('click', this.createRipple.bind(this));
+    }
+    onElementClick(event) {
+        this.createRipple(event);
+    }
+    createRipple(event) {
+        const element = event.currentTarget;
+        const exists = element.querySelector('.ax-ripple');
+        if (exists)
+            exists.remove();
+        this.el.nativeElement.style.overflow = 'hidden';
+        const rect = element.getBoundingClientRect();
+        const x = Math.floor(((event.clientX - rect.left) / (rect.right - rect.left)) *
+            element.clientWidth);
+        const y = Math.floor(((event.clientY - rect.top) / (rect.bottom - rect.top)) *
+            element.clientHeight);
+        const circle = document.createElement('span');
+        const diameter = Math.max(element.clientWidth, element.clientHeight);
+        const radius = diameter / 2;
+        circle.style.width = circle.style.height = `${diameter}px`;
+        circle.style.left = `${x - radius}px`;
+        circle.style.top = `${y - radius}px`;
+        circle.style.backgroundColor = `${this.axRippleColor}`;
+        circle.classList.add('ax-ripple');
+        element.appendChild(circle);
+        circle.addEventListener('animationend', () => {
+            circle?.remove();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRippleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: AXRippleDirective, isStandalone: true, selector: "[axRipple]", inputs: { enabled: ["axRipple", "enabled"], axRippleColor: "axRippleColor" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AXRippleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axRipple]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { enabled: [{
+                type: Input,
+                args: ['axRipple']
+            }], axRippleColor: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXAutoFocusDirective, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXItemClickEvent, AXListDataSource, 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_SELECTION_DATA_TOKEN, AX_STYLE_COLOR_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
+//# sourceMappingURL=acorex-components-common.mjs.map