@acorex/components 19.10.10 → 19.10.11

package/fesm2022/acorex-components-common.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, PLATFORM_ID, Directive, Host, Self, Optional, Input, Inject, NgModule, ChangeDetectorRef, ViewContainerRef, EventEmitter, InjectionToken, Output, input, effect } from '@angular/core';
+import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, ChangeDetectorRef, ViewContainerRef, EventEmitter, PLATFORM_ID, Input, Host, Self, Optional, Directive, Inject, NgModule, InjectionToken, Output, input, effect } from '@angular/core';
 import { AXHtmlUtil } from '@acorex/core/utils';
-import { flatten, clone, set, isEqual, cloneDeep } from 'lodash-es';
-import { DataSource } from '@angular/cdk/collections';
-import { Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, Subject, fromEvent, noop, skip } from 'rxjs';
+import { flatten, clone, cloneDeep, isEqual, set } from 'lodash-es';
+import { isBrowser } from '@acorex/core/platform';
+import { AXValidationService } from '@acorex/core/validation';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { noop, Subscription, BehaviorSubject, debounceTime, distinctUntilChanged, Subject, fromEvent, skip } from 'rxjs';
+import { DataSource } from '@angular/cdk/collections';
 import * as i1 from '@angular/platform-browser';
 import { Observable } from 'rxjs/internal/Observable';
 import { map, pairwise, filter, startWith, exhaustMap } from 'rxjs/operators';
 import { classes } from 'polytype';
-import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import { isBrowser } from '@acorex/core/platform';
-import { AXValidationService } from '@acorex/core/validation';
 import { AXFormatService } from '@acorex/core/format';
 import * as i1$1 from '@angular/forms';
 
@@ -21,10 +21,10 @@ class NXButtonComponent {
         this.toggleableChange = output();
         this.selectedChange = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: NXButtonComponent, isStandalone: false, selector: "ng-component", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", toggleableChange: "toggleableChange", selectedChange: "selectedChange" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: NXButtonComponent, isStandalone: false, selector: "ng-component", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { text: "textChange", toggleableChange: "toggleableChange", selectedChange: "selectedChange" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXButtonComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -36,10 +36,10 @@ class NXColorComponent {
     constructor() {
         this.color = model('default');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: NXColorComponent, isStandalone: false, selector: "ng-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: NXColorComponent, isStandalone: false, selector: "ng-component", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXColorComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -65,10 +65,10 @@ class NXComponent {
     get nativeElement() {
         return this.#elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -108,10 +108,10 @@ class NXInteractiveComponent extends NXComponent {
     hasFocus() {
         return AXHtmlUtil.hasFocus(this.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXInteractiveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: NXInteractiveComponent, isStandalone: false, selector: "ng-component", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", tabIndex: "tabIndexChange", onFocus: "onFocus", onBlur: "onBlur" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXInteractiveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: NXInteractiveComponent, isStandalone: false, selector: "ng-component", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", tabIndex: "tabIndexChange", onFocus: "onFocus", onBlur: "onBlur" }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXInteractiveComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXInteractiveComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -123,10 +123,10 @@ class NXLookComponent {
     constructor() {
         this.look = model('solid');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXLookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: NXLookComponent, isStandalone: false, selector: "ng-component", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXLookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: NXLookComponent, isStandalone: false, selector: "ng-component", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXLookComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXLookComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -141,10 +141,10 @@ class NXValueComponent {
         this.value = model();
         this.onValueChanged = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: NXValueComponent, isStandalone: false, selector: "ng-component", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", name: "nameChange", value: "valueChange", onValueChanged: "onValueChanged" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: NXValueComponent, isStandalone: false, selector: "ng-component", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { readonly: "readonlyChange", name: "nameChange", value: "valueChange", onValueChanged: "onValueChanged" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: NXValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NXValueComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -321,191 +321,663 @@ const AX_PLACEMENT_MAP = {
  * A token that specifies the  selection mode of component.
  */
 
-/**
- *  Contains native event
- * @category Events
- */
-class AXEvent {
-    constructor() {
-        this.isUserInteraction = false;
+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: "19.1.8", ngImport: i0, type: AXDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXDomService, providedIn: 'root' }); }
 }
-/**
- *  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 {
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXDomService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class MXBaseComponent {
     constructor() {
-        super(...arguments);
+        this._cdr = inject(ChangeDetectorRef);
+        this._elementRef = inject(ElementRef);
+        this._viewRef = inject(ViewContainerRef);
+        this._domService = inject(AXDomService);
+        this._id = this._domService.generateElementId();
         /**
-         *  uses for extra data
+         * Fired when an option related to the component changes.
+         *
+         * @event
          */
-        this.data = null;
-        this.nativeEvent = null;
+        this.onOptionChanged = new EventEmitter();
     }
-}
-/**
- *  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 = [];
+    get id() {
+        return this._id;
     }
-}
-/**
- *  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;
+    set id(v) {
+        this._id = v;
     }
-}
-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);
+    get cdr() {
+        return this._cdr;
     }
-    close() {
-        if (this.closeMethod) {
-            this.closeMethod();
+    getHostElement() {
+        return this._elementRef?.nativeElement;
+    }
+    getViewContainer() {
+        return this._viewRef;
+    }
+    internalOptionChanging(option) {
+        return option?.value;
+    }
+    internalOptionChanged(option) { }
+    /**
+     *  @ignore
+     */
+    ngOnInit() {
+        this.getHostElement().__axContext__ = this;
+    }
+    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);
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXBaseComponent }); }
 }
-class AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXClosbaleComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXClosbaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXClosbaleComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXClosbaleComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXClearableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXClearableComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXClearableComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXSearchableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSearchableComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXSearchableComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXValuableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXValuableComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXValuableComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXFocusableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXFocusableComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXFocusableComponent, decorators: [{
-            type: Injectable
-        }] });
-class AXPagedComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPagedComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXPagedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXBaseComponent, decorators: [{
             type: Injectable
         }] });
 
-class AXListDataSource extends DataSource {
-    get range() {
-        return this._range;
+class MXInteractiveComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        /**
+         *  @ignore
+         */
+        this.onTouchedCallback = noop;
+        this._touched = false;
+        /**
+         * Emits an event whenever the disabled state of the component changes.
+         *
+         * @event
+         */
+        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();
+        // private _focused = signal(false);
+        // protected markAsFocused() {
+        //   this._focused.set(true);
+        // }
+        // protected markAsBlured() {
+        //   this._focused.set(false);
+        // }
+    }
+    registerOnTouched(fn) {
+        this.onTouchedCallback = fn;
     }
     /**
-     * @ignore
+     * Indicates whether the component has been touched.
+     *
      */
-    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);
-        });
+    get touched() {
+        return this._touched;
     }
-    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);
-            }
+    /**
+     *  @ignore
+     */
+    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 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.document = inject(DOCUMENT);
+        this.platformID = inject(PLATFORM_ID);
+        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 = cloneDeep(this.value);
+        if (v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0)) {
+            this.setState('clear');
+            if (old === null || old === undefined || old === '' || (Array.isArray(old) && old.length === 0)) {
+                return;
+            }
+        }
+        if (!isEqual(old, v)) {
+            this._value = v;
+            this.emitOnValueChangedEvent(old, this.value);
+            this.internalValueChanged(this.value);
+        }
+    }
+    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] && isPlatformBrowser(this.platformID)) {
+                        const span = this.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);
+    }
+    reset(e = false) {
+        this.commitValue(null, e);
+    }
+    resetErrors() {
+        this.setState('clear');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXValueComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXValueComponent, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ *  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: "19.1.8", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXClosbaleComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXClosbaleComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXClosbaleComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXClosbaleComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXClearableComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXClearableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXClearableComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXSearchableComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSearchableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXSearchableComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXValuableComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXValuableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXValuableComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXFocusableComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXFocusableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXFocusableComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXPagedComponent extends AXComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPagedComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXPagedComponent, decorators: [{
+            type: Injectable
+        }] });
+class AXAutocompleteParentComponent extends MXValueComponent {
+    constructor() {
+        super(...arguments);
+        this.oldInputValue = '';
+        this.onKeyDown = new EventEmitter();
+        this.onInputValueEmit = new EventEmitter();
+        this.onInputValueChanged = new EventEmitter();
+    }
+    handleInputValueChanged(value, isUserInteraction = false) {
+        if (value === this.oldInputValue)
+            return;
+        this.onInputValueChanged.emit({
+            value,
+            name: this.name,
+            component: this,
+            isUserInteraction,
+            oldValue: this.oldInputValue,
+            htmlElement: this.getHostElement(),
+        });
+        this.oldInputValue = value;
+    }
+    handleInputValueEmit(value, isUserInteraction = false) {
+        if (value === this.oldInputValue)
+            return;
+        this.onInputValueEmit.emit({
+            value,
+            name: this.name,
+            component: this,
+            isUserInteraction,
+            oldValue: this.oldInputValue,
+            htmlElement: this.getHostElement(),
+        });
+        this.oldInputValue = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteParentComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteParentComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutocompleteParentComponent, 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;
     }
@@ -712,10 +1184,10 @@ class AXAutoFocusDirective {
             }, this.time);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", 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: "19.1.7", type: AXAutoFocusDirective, isStandalone: true, selector: "[axAutoFocus]", inputs: { autoFocus: ["axAutoFocus", "autoFocus"], time: ["axAutoFocusTime", "time"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", 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: "19.1.8", type: AXAutoFocusDirective, isStandalone: true, selector: "[axAutoFocus]", inputs: { autoFocus: ["axAutoFocus", "autoFocus"], time: ["axAutoFocusTime", "time"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axAutoFocus]' }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: AXFocusableComponent, decorators: [{
@@ -768,10 +1240,10 @@ class AXHotkeysService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXHotkeysService, deps: [{ token: i1.EventManager }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXHotkeysService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXHotkeysService, deps: [{ token: i1.EventManager }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXHotkeysService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXHotkeysService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXHotkeysService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.EventManager }, { type: Document, decorators: [{
                     type: Inject,
@@ -834,10 +1306,10 @@ class AXHotkeyDirective {
             s.unsubscribe();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", 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: "19.1.7", type: AXHotkeyDirective, isStandalone: true, selector: "[axHotkey]", inputs: { axHotkey: "axHotkey" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", 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: "19.1.8", type: AXHotkeyDirective, isStandalone: true, selector: "[axHotkey]", inputs: { axHotkey: "axHotkey" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXHotkeyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXHotkeyDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axHotkey]' }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AXComponent, decorators: [{
@@ -890,10 +1362,10 @@ class AXInfiniteScrollerDirective {
             return this.scrollCallback();
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: AXInfiniteScrollerDirective, isStandalone: true, selector: "[axInfiniteScroller]", inputs: { scrollCallback: "scrollCallback", immediateCallback: "immediateCallback", scrollPercent: "scrollPercent" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: AXInfiniteScrollerDirective, isStandalone: true, selector: "[axInfiniteScroller]", inputs: { scrollCallback: "scrollCallback", immediateCallback: "immediateCallback", scrollPercent: "scrollPercent" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axInfiniteScroller]' }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { scrollCallback: [{
@@ -931,20 +1403,20 @@ class AXResponsiveDirective {
         this._observer?.disconnect();
         this._observer?.unobserve(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: AXResponsiveDirective, isStandalone: true, selector: "[axResponsive]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXResponsiveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: AXResponsiveDirective, isStandalone: true, selector: "[axResponsive]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXResponsiveDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", 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: "19.1.7", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXCommonModule, imports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective], exports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXCommonModule, providers: [AXHotkeysService] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXCommonModule, imports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective], exports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXCommonModule, providers: [AXHotkeysService] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective],
@@ -953,91 +1425,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
                 }]
         }] });
 
-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: "19.1.7", ngImport: i0, type: AXDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXDomService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", 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();
-        /**
-         * Fired when an option related to the component changes.
-         *
-         * @event
-         */
-        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) { }
-    /**
-     *  @ignore
-     */
-    ngOnInit() {
-        this.getHostElement().__axContext__ = this;
-    }
-    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);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXBaseComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXBaseComponent, decorators: [{
-            type: Injectable
-        }] });
-
 class MXColorComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
@@ -1052,172 +1439,48 @@ class MXColorComponent extends MXBaseComponent {
     }
     set color(value) {
         this.setOption({
-            name: 'color',
-            value,
-            afterCallback: () => {
-                this.cdr.markForCheck();
-            },
-        });
-    }
-}
-
-class MXLookableComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXLookableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXLookableComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", 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);
-        /**
-         *  @ignore
-         */
-        this.onTouchedCallback = noop;
-        this._touched = false;
-        /**
-         * Emits an event whenever the disabled state of the component changes.
-         *
-         * @event
-         */
-        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();
-        // private _focused = signal(false);
-        // protected markAsFocused() {
-        //   this._focused.set(true);
-        // }
-        // protected markAsBlured() {
-        //   this._focused.set(false);
-        // }
-    }
-    registerOnTouched(fn) {
-        this.onTouchedCallback = fn;
-    }
-    /**
-     * Indicates whether the component has been touched.
-     *
-     */
-    get touched() {
-        return this._touched;
-    }
-    /**
-     *  @ignore
-     */
-    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());
+            name: 'color',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
     }
-    blur() {
-        AXHtmlUtil.blurElement(this.getHostElement());
+}
+
+class MXLookableComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXLookableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXLookableComponent }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXLookableComponent, decorators: [{
+            type: Injectable
+        }] });
+class MXLookComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.lookChange = new EventEmitter();
+        this._look = 'solid';
     }
     /**
-     *  Check component is focused or has any focused element.
+     *  Predefined look schemes
      */
-    hasFocus() {
-        return AXHtmlUtil.hasFocus(this.getHostElement());
+    get look() {
+        return this._look;
+    }
+    set look(value) {
+        this.setOption({
+            name: 'look',
+            value,
+            afterCallback: () => {
+                this.cdr.markForCheck();
+            },
+        });
     }
 }
 
+class MXColorLookComponent extends classes(MXColorComponent, MXLookComponent) {
+}
+
 class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookComponent) {
     /**
      *  Defines the primary text to show inside the button.
@@ -1302,229 +1565,6 @@ class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookC
     }
 }
 
-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.document = inject(DOCUMENT);
-        this.platformID = inject(PLATFORM_ID);
-        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 (v === null || v === undefined || v === '' || (Array.isArray(v) && v.length === 0)) {
-            this.setState('clear');
-            if (old === null || old === undefined || old === '' || (Array.isArray(old) && old.length === 0)) {
-                return;
-            }
-        }
-        if (!isEqual(old, v)) {
-            this._value = v;
-            this.emitOnValueChangedEvent(old, this.value);
-            this.internalValueChanged(this.value);
-        }
-    }
-    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] && isPlatformBrowser(this.platformID)) {
-                        const span = this.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);
-    }
-    reset(e = false) {
-        this.commitValue(null, e);
-    }
-    resetErrors() {
-        this.setState('clear');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXValueComponent }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXValueComponent, decorators: [{
-            type: Injectable
-        }] });
-
 class MXInputBaseValueComponent extends MXValueComponent {
     constructor() {
         super(...arguments);
@@ -1569,10 +1609,10 @@ class MXInputBaseValueComponent extends MXValueComponent {
         else
             super.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXInputBaseValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXInputBaseValueComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXInputBaseValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXInputBaseValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXInputBaseValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXInputBaseValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1581,10 +1621,10 @@ class MXSelectionBridgeService {
         this.selectedItems = [];
         this.cacheList = {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXSelectionBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXSelectionBridgeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXSelectionBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXSelectionBridgeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXSelectionBridgeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXSelectionBridgeService, decorators: [{
             type: Injectable
         }] });
 const AX_SELECTION_DATA_TOKEN = new InjectionToken('AX_SELECTION_DATA_TOKEN');
@@ -1788,10 +1828,10 @@ class MXSelectionValueComponent extends MXValueComponent {
         this.dataService.cacheList = {};
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXSelectionValueComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXSelectionValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1824,10 +1864,10 @@ class AXNgModelDelayedValueChangedDirective {
         distinctUntilChanged(), debounceTime(this.delayTime))
             .subscribe((value) => this.axDelayedValueChanged.emit(value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, deps: [{ token: i1$1.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.7", type: AXNgModelDelayedValueChangedDirective, isStandalone: true, selector: "[axDelayedValueChanged]", inputs: { delayTime: "delayTime" }, outputs: { axDelayedValueChanged: "axDelayedValueChanged", axDelayTimeChange: "axDelayTimeChange" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, deps: [{ token: i1$1.NgModel }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: AXNgModelDelayedValueChangedDirective, isStandalone: true, selector: "[axDelayedValueChanged]", inputs: { delayTime: "delayTime" }, outputs: { axDelayedValueChanged: "axDelayedValueChanged", axDelayTimeChange: "axDelayTimeChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDelayedValueChanged]',
@@ -1879,10 +1919,10 @@ class AXInvertedColorDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXInvertedColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.7", type: AXInvertedColorDirective, isStandalone: true, selector: "[axInvertedColor]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXInvertedColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.8", type: AXInvertedColorDirective, isStandalone: true, selector: "[axInvertedColor]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXInvertedColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXInvertedColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axInvertedColor]',
@@ -1936,10 +1976,10 @@ class AXRippleDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", 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: "19.1.7", type: AXRippleDirective, isStandalone: true, selector: "[axRipple]", inputs: { enabled: ["axRipple", "enabled"], axRippleColor: "axRippleColor" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", 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: "19.1.8", type: AXRippleDirective, isStandalone: true, selector: "[axRipple]", inputs: { enabled: ["axRipple", "enabled"], axRippleColor: "axRippleColor" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXRippleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axRipple]',
@@ -1956,5 +1996,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
  * 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, AXInvertedColorDirective, 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, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
+export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosbaleComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, 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, AX_STYLE_LOOK_TYPES, MXBaseComponent, MXButtonBaseComponent, MXColorComponent, MXColorLookComponent, MXInputBaseValueComponent, MXInteractiveComponent, MXLookComponent, MXLookableComponent, MXSelectionBridgeService, MXSelectionValueComponent, MXValueComponent, NXButtonComponent, NXClickEvent, NXColorComponent, NXComponent, NXEvent, NXInteractiveComponent, NXLookComponent, NXNativeEvent, NXValueComponent, TAB_META_KEY, convertArrayToDataSource, convertToPlacement };
 //# sourceMappingURL=acorex-components-common.mjs.map