@acorex/cdk 20.2.0-next.2 → 20.2.0-next.21

package/fesm2022/acorex-cdk-common.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { model, output, Component, inject, ElementRef, signal, afterNextRender, Injectable, ChangeDetectorRef, ViewContainerRef, EventEmitter, DOCUMENT, PLATFORM_ID, Renderer2, Input, Directive, NgModule, InjectionToken, Output, input, effect } from '@angular/core';
 import { AXHtmlUtil } from '@acorex/core/utils';
-import { flatten, clone, cloneDeep, isEqual, omit, set } from 'lodash-es';
+import { flatten, clone, cloneDeep, isEqual, omit, set, get } from 'lodash-es';
 import { isBrowser } from '@acorex/core/platform';
 import { AXValidationService } from '@acorex/core/validation';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -21,10 +21,10 @@ class NXButtonComponent {
         this.toggleableChange = output();
         this.selectedChange = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: NXButtonComponent, isStandalone: true, 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: "20.1.8", ngImport: i0, type: NXButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.8", type: NXButtonComponent, isStandalone: true, 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: "20.1.3", ngImport: i0, type: NXButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NXButtonComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -35,10 +35,10 @@ class NXColorComponent {
     constructor() {
         this.color = model('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: NXColorComponent, isStandalone: true, 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: "20.1.8", ngImport: i0, type: NXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.8", type: NXColorComponent, isStandalone: true, 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: "20.1.3", ngImport: i0, type: NXColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NXColorComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -63,10 +63,10 @@ class NXComponent {
     get nativeElement() {
         return this.#elementRef.nativeElement;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NXComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NXComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -106,10 +106,10 @@ class NXInteractiveComponent extends NXComponent {
     hasFocus() {
         return AXHtmlUtil.hasFocus(this.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXInteractiveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: NXInteractiveComponent, isStandalone: true, 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: "20.1.8", ngImport: i0, type: NXInteractiveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.8", type: NXInteractiveComponent, isStandalone: true, 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: "20.1.3", ngImport: i0, type: NXInteractiveComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NXInteractiveComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -120,10 +120,10 @@ class NXLookComponent {
     constructor() {
         this.look = model('solid', ...(ngDevMode ? [{ debugName: "look" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXLookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: NXLookComponent, isStandalone: true, 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: "20.1.8", ngImport: i0, type: NXLookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.8", type: NXLookComponent, isStandalone: true, 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: "20.1.3", ngImport: i0, type: NXLookComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NXLookComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -137,10 +137,10 @@ class NXValueComponent {
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
         this.onValueChanged = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: NXValueComponent, isStandalone: true, 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: "20.1.8", ngImport: i0, type: NXValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.8", type: NXValueComponent, isStandalone: true, 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: "20.1.3", ngImport: i0, type: NXValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: NXValueComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
@@ -316,10 +316,10 @@ class AXDomService {
         const randomness = Math.random().toString(36).substr(2);
         return dateString + randomness;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXDomService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXDomService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXDomService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXDomService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -347,6 +347,11 @@ class MXBaseComponent {
     get cdr() {
         return this._cdr;
     }
+    /**
+     * Gets the host HTML element of the component.
+     *
+     * @returns T - The native DOM element associated with this component.
+     */
     getHostElement() {
         return this._elementRef?.nativeElement;
     }
@@ -363,6 +368,11 @@ class MXBaseComponent {
     ngOnInit() {
         this.getHostElement().__axContext__ = this;
     }
+    /**
+     * Sets a component option with optional lifecycle callbacks.
+     *
+     * @param option - The option configuration containing the name, value and optional before/after callbacks.
+     */
     setOption(option) {
         const oldValue = this[option.name];
         let newValue = this.internalOptionChanging({
@@ -388,10 +398,10 @@ class MXBaseComponent {
         if (option.afterCallback)
             option.afterCallback(oldValue, newValue);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXBaseComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXBaseComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXBaseComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -428,6 +438,11 @@ class MXInteractiveComponent extends MXBaseComponent {
         //   this._focused.set(false);
         // }
     }
+    /**
+     * Registers a touched callback function (ControlValueAccessor method).
+     *
+     * @param fn - The callback function to register.
+     */
     registerOnTouched(fn) {
         this.onTouchedCallback = fn;
     }
@@ -463,6 +478,11 @@ class MXInteractiveComponent extends MXBaseComponent {
             },
         });
     }
+    /**
+     * Sets the disabled state of the component.
+     *
+     * @param isDisabled - Whether the component should be disabled.
+     */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
@@ -505,14 +525,22 @@ class MXInteractiveComponent extends MXBaseComponent {
     //     nativeEvent: e,
     //   });
     // }
+    /**
+     * Focuses the component.
+     */
     focus() {
         AXHtmlUtil.focusElement(this.getHostElement());
     }
+    /**
+     * Removes focus from the component.
+     */
     blur() {
         AXHtmlUtil.blurElement(this.getHostElement());
     }
     /**
-     *  Check component is focused or has any focused element.
+     * Checks if the component is focused or has any focused element.
+     *
+     * @returns boolean - True if the component has focus.
      */
     hasFocus() {
         return AXHtmlUtil.hasFocus(this.getHostElement());
@@ -639,10 +667,20 @@ class MXValueComponent extends MXInteractiveComponent {
     get isRequired() {
         return this.validationRules?.some((c) => c.rule == 'required');
     }
+    /**
+     * Adds a validation rule.
+     *
+     * @param rule - The validation rule to add.
+     */
     addValidationRule(rule) {
         this.validationRules.push(rule);
         this.validationRulesChange.emit(this.validationRules);
     }
+    /**
+     * Removes a validation rule.
+     *
+     * @param ruleToRemove - The validation rule to remove.
+     */
     removeValidationRule(ruleToRemove) {
         this.validationRules = this.validationRules.filter((r) => {
             if (r.rule !== ruleToRemove.rule) {
@@ -656,6 +694,11 @@ class MXValueComponent extends MXInteractiveComponent {
         this.validationRulesChange.emit(this.validationRules);
         this.setState('clear');
     }
+    /**
+     * Validates the component.
+     *
+     * @returns Promise<AXValidationSummary> - Validation result.
+     */
     async validate() {
         const container_classes = ['ax-editor-container', 'ax-checkbox', 'ax-radio'];
         const container = container_classes.some((c) => this.getHostElement().classList.contains(c))
@@ -724,12 +767,28 @@ class MXValueComponent extends MXInteractiveComponent {
             this.cdr.markForCheck();
         }
     }
+    /**
+     * Registers a change callback function (ControlValueAccessor method).
+     *
+     * @param fn - The callback function to register.
+     */
     registerOnChange(fn) {
         this.onChangeCallback = fn;
     }
+    /**
+     * Writes a value to the component (ControlValueAccessor method).
+     *
+     * @param value - The value to write.
+     */
     writeValue(value) {
         this.value = value;
     }
+    /**
+     * Commits a value with optional user interaction flag.
+     *
+     * @param value - The value to commit.
+     * @param u - Optional flag indicating if this is a user interaction.
+     */
     commitValue(value, u = false) {
         if (u) {
             this.markAsTouched();
@@ -738,16 +797,24 @@ class MXValueComponent extends MXInteractiveComponent {
         }
         this.writeValue(value);
     }
+    /**
+     * Resets the component value.
+     *
+     * @param e - Optional flag indicating if this is a user interaction.
+     */
     reset(e = false) {
         this.commitValue(null, e);
     }
+    /**
+     * Resets validation errors.
+     */
     resetErrors() {
         this.setState('clear');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXValueComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -804,6 +871,12 @@ class AXButtonClickEvent extends AXClickEvent {
  */
 class AXItemClickEvent extends AXClickEvent {
 }
+/**
+ *  Fires each time the user select the element.
+ * @category Events
+ */
+class AXItemSelectedEvent extends AXEvent {
+}
 /**
  *  Fires each time the component gets focused.
  * @category Events
@@ -854,52 +927,52 @@ class AXComponentClosedPromise extends Promise {
     }
 }
 class AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXComponent, decorators: [{
             type: Injectable
         }] });
 class AXClosableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXClosableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXClosableComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXClosableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXClosableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXClosableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXClosableComponent, decorators: [{
             type: Injectable
         }] });
 class AXClearableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXClearableComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXClearableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXClearableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXClearableComponent, decorators: [{
             type: Injectable
         }] });
 class AXSearchableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSearchableComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSearchableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXSearchableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXSearchableComponent, decorators: [{
             type: Injectable
         }] });
 class AXValuableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXValuableComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXValuableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXValuableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXValuableComponent, decorators: [{
             type: Injectable
         }] });
 class AXFocusableComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXFocusableComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXFocusableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXFocusableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXFocusableComponent, decorators: [{
             type: Injectable
         }] });
 class AXPagedComponent extends AXComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPagedComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPagedComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXPagedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXPagedComponent, decorators: [{
             type: Injectable
         }] });
 class AXAutocompleteParentComponent extends MXValueComponent {
@@ -921,10 +994,10 @@ class AXAutocompleteParentComponent extends MXValueComponent {
         });
         this.oldInputEmitValue = value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAutocompleteParentComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAutocompleteParentComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAutocompleteParentComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAutocompleteParentComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAutocompleteParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAutocompleteParentComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1100,34 +1173,50 @@ class AXDataSource {
     }
 }
 function convertArrayToDataSource(items, options = { key: 'id', pageSize: 100 }) {
+    // Normalize primitives to objects so consumers (e.g., select/list) can rely on
+    // value and text fields without triggering extra byKey lookups.
+    const normalizedItems = items.map((candidate) => {
+        const isObjectItem = candidate != null && typeof candidate === 'object';
+        if (isObjectItem) {
+            return candidate;
+        }
+        // For primitive values, create an object with both key and text
+        return { [options.key]: candidate, text: String(candidate ?? '') };
+    });
     const config = {
         key: options.key,
         pageSize: options.pageSize,
         load: async (e) => {
-            const result = e.filter ? handleSearch(items, e.filter) : items;
+            const itemsForFilter = normalizedItems;
+            const resultNormalized = e.filter
+                ? applyDataSourceQuery(itemsForFilter, e.filter)
+                : itemsForFilter;
+            const result = resultNormalized;
             return {
                 items: result.slice(e.skip, e.skip + e.take),
-                total: result.length,
+                total: resultNormalized.length,
             };
         },
-        byKey: (v) => Promise.resolve(items.find((c) => {
-            return c[options.key] == v;
-        })),
-    };
-    const handleSearch = (items, filter) => {
-        if (!filter?.field || filter.value === undefined || filter.value === null) {
-            return items; // No filter applied
-        }
-        return items.filter((item) => {
-            const itemField = item[filter.field];
-            if (typeof itemField === 'string' && typeof filter.value === 'string') {
-                return itemField.toLowerCase().includes(filter.value.toLowerCase());
-            }
-            return false; // Return false if itemField isn't comparable
-        });
+        byKey: async (v) => 
+        // Search in the normalized list (supports primitive and object arrays)
+        normalizedItems.find((record) => {
+            return record[options.key] == v;
+        }),
     };
     return new AXDataSource(config);
 }
+function applyDataSourceQuery(items, filter) {
+    if (!filter?.field || filter.value === undefined || filter.value === null) {
+        return items; // No filter applied
+    }
+    return items.filter((item) => {
+        const itemField = item[filter.field];
+        if (typeof itemField === 'string' && typeof filter.value === 'string') {
+            return itemField.toLowerCase().includes(filter.value.toLowerCase());
+        }
+        return false; // Return false if itemField isn't comparable
+    });
+}
 
 const AX_STYLE_COLOR_TYPES = [
     'primary',
@@ -1185,10 +1274,10 @@ class AXAutoFocusDirective {
             }, this.time);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", 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: "20.1.8", ngImport: i0, type: AXAutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.8", type: AXAutoFocusDirective, isStandalone: true, selector: "[axAutoFocus]", inputs: { autoFocus: ["axAutoFocus", "autoFocus"], time: ["axAutoFocusTime", "time"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axAutoFocus]' }]
         }], propDecorators: { autoFocus: [{
@@ -1235,10 +1324,10 @@ class AXHotkeysService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXHotkeysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXHotkeysService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXHotkeysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXHotkeysService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXHotkeysService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXHotkeysService, decorators: [{
             type: Injectable
         }] });
 
@@ -1298,10 +1387,10 @@ class AXHotkeyDirective {
             s.unsubscribe();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXHotkeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: AXHotkeyDirective, isStandalone: true, selector: "[axHotkey]", inputs: { axHotkey: "axHotkey" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXHotkeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.8", type: AXHotkeyDirective, isStandalone: true, selector: "[axHotkey]", inputs: { axHotkey: "axHotkey" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXHotkeyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXHotkeyDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axHotkey]' }]
         }], propDecorators: { axHotkey: [{
@@ -1348,10 +1437,10 @@ class AXInfiniteScrollerDirective {
             return this.scrollCallback();
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", 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: "20.1.8", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.8", type: AXInfiniteScrollerDirective, isStandalone: true, selector: "[axInfiniteScroller]", inputs: { scrollCallback: "scrollCallback", immediateCallback: "immediateCallback", scrollPercent: "scrollPercent" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axInfiniteScroller]' }]
         }], propDecorators: { scrollCallback: [{
@@ -1390,20 +1479,20 @@ class AXResponsiveDirective {
         this._observer?.disconnect();
         this._observer?.unobserve(this._elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXResponsiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: AXResponsiveDirective, isStandalone: true, selector: "[axResponsive]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXResponsiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.8", type: AXResponsiveDirective, isStandalone: true, selector: "[axResponsive]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXResponsiveDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXResponsiveDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axResponsive]' }]
         }], ctorParameters: () => [] });
 
 class AXCommonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: AXCommonModule, imports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective], exports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXCommonModule, providers: [AXHotkeysService] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.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: "20.1.8", ngImport: i0, type: AXCommonModule, providers: [AXHotkeysService] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective],
@@ -1436,10 +1525,10 @@ class MXColorComponent extends MXBaseComponent {
 }
 
 class MXLookableComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXLookableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXLookableComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXLookableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXLookableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXLookableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXLookableComponent, decorators: [{
             type: Injectable
         }] });
 class MXLookComponent extends MXBaseComponent {
@@ -1614,231 +1703,592 @@ class MXInputBaseValueComponent extends MXValueComponent {
         else
             super.focus();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXInputBaseValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXInputBaseValueComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXInputBaseValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXInputBaseValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXInputBaseValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXInputBaseValueComponent, decorators: [{
             type: Injectable
         }] });
 
+/**
+ * Service that manages selection state and caching for selection components
+ */
 class MXSelectionBridgeService {
     constructor() {
+        /** Array of currently selected items */
         this.selectedItems = [];
+        /** Cache for normalized items keyed by their unique identifier */
         this.cacheList = {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXSelectionBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXSelectionBridgeService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXSelectionBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXSelectionBridgeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXSelectionBridgeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXSelectionBridgeService, decorators: [{
             type: Injectable
         }] });
+/**
+ * Injection token for the selection bridge service
+ */
 const AX_SELECTION_DATA_TOKEN = new InjectionToken('AX_SELECTION_DATA_TOKEN');
+/**
+ * Abstract base component for selection-based value components
+ * Provides common functionality for components that support item selection
+ */
 class MXSelectionValueComponent extends MXValueComponent {
     constructor() {
         super(...arguments);
+        // #region Services
         this.formatService = inject(AXFormatService);
         this.dataService = inject(AX_SELECTION_DATA_TOKEN);
+        // #region Field Configuration Properties
         this._valueField = 'id';
-        this._textTemplate = '';
         this._textField = 'text';
+        this._textTemplate = '';
+        this._defaultText = '-';
         this._disabledField = 'disabled';
         this._multiple = false;
+        // #endregion
+        // #region Events
+        this.onItemSelected = new EventEmitter();
+        /**
+       * Emitted when an item in the list is clicked.
+       *
+       * @event
+       */
+        this.onItemClick = new EventEmitter();
     }
+    /** Field name used to extract the unique value from items */
     get valueField() {
         return this._valueField;
     }
-    set valueField(v) {
-        this.setOption({
-            name: 'valueField',
-            value: v,
-        });
+    set valueField(value) {
+        this.setOption({ name: 'valueField', value });
+    }
+    /** Field name used to extract the display text from items */
+    get textField() {
+        return this._textField;
     }
+    set textField(value) {
+        this.setOption({ name: 'textField', value });
+    }
+    /** Template string for formatting item display text */
     get textTemplate() {
         return this._textTemplate;
     }
-    set textTemplate(v) {
-        this.setOption({
-            name: 'textTemplate',
-            value: v,
-        });
+    set textTemplate(value) {
+        this.setOption({ name: 'textTemplate', value });
     }
-    get textField() {
-        return this._textField;
+    /** Text to display when neither textField nor valueField exist on the item */
+    get defaultText() {
+        return this._defaultText;
     }
-    set textField(v) {
-        this.setOption({
-            name: 'textField',
-            value: v,
-        });
+    set defaultText(value) {
+        this.setOption({ name: 'defaultText', value });
     }
+    /** Field name used to determine if an item is disabled */
     get disabledField() {
         return this._disabledField;
     }
-    set disabledField(v) {
-        this.setOption({
-            name: 'disabledField',
-            value: v,
-        });
+    set disabledField(value) {
+        this.setOption({ name: 'disabledField', value });
     }
+    /** Whether multiple items can be selected */
     get multiple() {
         return this._multiple;
     }
-    set multiple(v) {
+    set multiple(value) {
         this.setOption({
             name: 'multiple',
-            value: v,
-            afterCallback: () => {
-                this.reset(false);
-            },
+            value,
+            afterCallback: () => this.reset(false),
         });
     }
+    // #endregion
+    // #region Computed Properties
+    /** Gets the currently selected items */
     get selectedItems() {
         return this.dataService.selectedItems || [];
     }
+    // #endregion
+    // #region Override Methods
+    /**
+     * Internal method to set and normalize the component value
+     * @param value The value to set (can be single item or array)
+     * @returns Normalized value based on multiple selection mode
+     */
     internalSetValue(value) {
         const isArray = Array.isArray(value);
-        if (value == null || (isArray && value.length == 0)) {
+        // Handle null/empty values
+        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) {
+        // Check if items already have text properties to avoid unnecessary findByKey calls
+        const itemsToNormalize = isArray ? value : [value];
+        const needsFindByKey = itemsToNormalize.some(item => {
+            if (typeof item === 'object' && item !== null) {
+                return get(item, this.textField) == null;
+            }
+            return true; // Primitive values need findByKey
+        });
+        const normalizedItems = this.normalizeItemsList(itemsToNormalize, needsFindByKey);
+        if (normalizedItems.length === 0) {
             return this.multiple ? [] : null;
         }
-        const result = this.multiple ? normalizedItems.map((c) => c[this.valueField]) : normalizedItems[0][this.valueField];
-        return result;
+        // Extract values based on selection mode
+        return this.multiple
+            ? normalizedItems.map(item => get(item, this.valueField))
+            : get(normalizedItems[0], this.valueField) ?? null;
     }
+    /**
+     * Override to normalize selected items when value changes
+     */
     emitOnValueChangedEvent(oldValue, newValue) {
         this._normalizeSelectedItems();
         super.emitOnValueChangedEvent(oldValue, newValue);
     }
-    normalizeItemsList(items, findBykey = false) {
-        if (items == null)
+    // #endregion
+    // #region Private Normalization Methods
+    /**
+     * Normalizes a list of items, filtering out null values
+     * @param items Array of items to normalize
+     * @param findByKey Whether to attempt finding items by key
+     * @returns Array of normalized items
+     */
+    normalizeItemsList(items, findByKey = false) {
+        if (!items?.length)
             return [];
-        return items.filter((c) => c != null).map((i) => this.normalizeItem(i, findBykey));
+        return items
+            .filter(item => item != null)
+            .map(item => this.normalizeItem(item, 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);
+    /**
+     * Normalizes a single item, handling caching and async loading
+     * @param item Item to normalize
+     * @param findByKey Whether to attempt finding the item by key
+     * @returns Normalized item object
+     */
+    normalizeItem(item, findByKey = false) {
+        const isComplexObject = typeof item === 'object' && item !== null;
+        const itemRecord = item;
+        const valueKey = isComplexObject ? get(itemRecord, this.valueField) : item;
+        const key = valueKey != null ? String(valueKey) : String(item);
+        const cacheKey = this.createCacheKey(key);
+        // Return cached item if available and has text
+        const cachedItem = this.dataService.cacheList[cacheKey];
+        if (cachedItem && get(cachedItem, this.textField) != null) {
+            return cachedItem;
+        }
+        const hasTextProperty = !isComplexObject || get(itemRecord, this.textField) != null;
+        const normalizedObj = {};
+        // If findByKey is true, we need to resolve the item to get its text
+        // This is needed for string values like 'ir', 'us' that don't have text
+        if (findByKey) {
+            this.handleItemNormalization(normalizedObj, item, key, true, cacheKey);
         }
         else {
-            const existsItem = findBykey ? this.getItemByKey(key) : null;
-            if (existsItem && existsItem instanceof Promise) {
-                obj[this.valueField] = key;
-                obj['isLoading'] = true;
-                obj[this.textField] = 'Loading';
-                //
-                existsItem
-                    .then((r) => {
-                    if (typeof r === 'object' && r) {
-                        // obj[this.valueField] = r[this.valueField];
-                        // obj[this.textField] = r[this.textField];
-                        Object.assign(obj, cloneDeep(r));
-                    }
-                    else {
-                        obj[this.valueField] = r || key;
-                        obj[this.textField] = r;
-                    }
-                })
-                    .finally(() => {
-                    delete obj['isLoading'];
-                    this.dataService.cacheList[cacheKey] = obj;
-                    this.cdr.markForCheck();
-                });
-            }
-            else if (existsItem) {
-                obj[this.valueField] = complex ? existsItem[this.valueField] : existsItem;
-                obj[this.textField] = complex ? existsItem[this.textField] : existsItem;
+            // Item already has all required properties, just copy them
+            Object.assign(normalizedObj, item);
+        }
+        this.dataService.cacheList[cacheKey] = normalizedObj;
+        return normalizedObj;
+    }
+    /**
+     * Handles the normalization logic for items that need property assignment
+     */
+    handleItemNormalization(normalizedObj, originalItem, key, findByKey, cacheKey) {
+        const existingItem = findByKey ? this.getItemByKey(key) : null;
+        if (existingItem instanceof Promise) {
+            this.handleAsyncItem(normalizedObj, key, existingItem, cacheKey);
+        }
+        else if (existingItem) {
+            this.assignItemProperties(normalizedObj, existingItem, true);
+        }
+        else {
+            this.assignItemProperties(normalizedObj, originalItem, false);
+        }
+    }
+    /**
+     * Handles async item loading with loading state
+     */
+    handleAsyncItem(obj, key, promise, cacheKey) {
+        // Set loading state
+        obj[this.valueField] = key;
+        obj['isLoading'] = true;
+        obj[this.textField] = 'Loading...';
+        promise
+            .then(result => {
+            if (typeof result === 'object' && result) {
+                Object.assign(obj, cloneDeep(result));
             }
             else {
-                obj[this.valueField] = complex ? item[this.valueField] : item;
-                obj[this.textField] = complex ? item[this.textField] : item;
+                obj[this.valueField] = result || key;
+                obj[this.textField] = result;
             }
+        })
+            .catch(error => {
+            console.warn('Failed to load item by key:', key, error);
+            // On error, keep the original value but mark as failed
+            obj[this.textField] = this.defaultText;
+        })
+            .finally(() => {
+            delete obj['isLoading'];
+            delete obj['_displayTextLoading'];
+            delete obj['_loadingTriggered'];
+            this.dataService.cacheList[cacheKey] = obj;
+            // Use setTimeout to defer change detection and prevent immediate re-rendering
+            setTimeout(() => {
+                if (this.cdr) {
+                    this.cdr.markForCheck();
+                }
+            }, 0);
+        });
+    }
+    /**
+     * Assigns value and text properties to the normalized object
+     */
+    assignItemProperties(obj, sourceItem, isComplexSource) {
+        const isSourceObject = typeof sourceItem === 'object' && sourceItem !== null;
+        const sourceRecord = sourceItem;
+        if (isComplexSource && isSourceObject) {
+            const valueFromSource = get(sourceRecord, this.valueField);
+            const textFromSource = get(sourceRecord, this.textField);
+            obj[this.valueField] = (valueFromSource ?? textFromSource);
+            obj[this.textField] = (textFromSource ?? valueFromSource ?? this.defaultText);
+        }
+        else {
+            const valueFromSource = isSourceObject ? get(sourceRecord, this.valueField) : sourceItem;
+            const textFromSource = isSourceObject ? get(sourceRecord, this.textField) : sourceItem;
+            obj[this.valueField] = (valueFromSource ?? textFromSource);
+            obj[this.textField] = (textFromSource ?? valueFromSource ?? this.defaultText);
         }
-        this.dataService.cacheList[cacheKey] = obj;
-        return obj;
     }
+    /**
+     * Creates a consistent cache key for an item
+     */
+    createCacheKey(key) {
+        return `k-${key}`;
+    }
+    /**
+  * Normalizes currently selected items and updates the data service
+  */
     _normalizeSelectedItems() {
-        const values = Array.isArray(this.value) ? this.value : this.value != null ? [this.value] : [];
-        this.dataService.selectedItems = values.map((v) => this.normalizeItem(v));
+        const values = Array.isArray(this.value)
+            ? this.value
+            : this.value != null ? [this.value] : [];
+        // Only call normalizeItem with findByKey=true if the item doesn't have text
+        // This prevents unnecessary API calls for items that already have text
+        this.dataService.selectedItems = values.map(value => {
+            const hasText = typeof value === 'object' && value !== null &&
+                get(value, this.textField) != null;
+            return this.normalizeItem(value, !hasText);
+        });
     }
+    // #endregion
+    // #region Public Selection Methods
+    /**
+     * Unselects the specified items from the selection
+     * @param items Items to unselect
+     */
     unselectItems(...items) {
-        if (!items || items.length === 0) {
+        if (!items?.length) {
             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]));
+        const normalizedItems = this.normalizeItemsList(items);
+        const newSelectedItems = this.selectedItems.filter(selectedItem => !normalizedItems.some(normalizedItem => get(normalizedItem, this.valueField) === get(selectedItem, this.valueField)));
         this.commitValue(newSelectedItems, true);
     }
+    /**
+     * Selects the specified items
+     * @param items Items to select
+     */
     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);
+        if (!items?.length) {
+            return;
         }
+        const currentValue = Array.isArray(this.value) ? this.value : [this.value];
+        const normalizedItems = this.normalizeItemsList(items);
+        const newSelectedItems = this.multiple
+            ? [...currentValue, ...normalizedItems]
+            : normalizedItems;
+        this.onItemSelected.emit({
+            component: this,
+            isUserInteraction: true,
+            item: newSelectedItems[0],
+            htmlElement: this.getHostElement()
+        });
+        this.commitValue(newSelectedItems, true);
     }
+    /**
+     * Toggles the selection state of the specified items
+     * @param items Items to toggle
+     */
     toggleSelect(...items) {
-        items?.forEach((item) => {
+        items?.forEach(item => {
             if (this.multiple) {
-                this.isItemSelected(item) ? this.unselectItems(item) : this.selectItems(item);
+                this.isItemSelected(item)
+                    ? this.unselectItems(item)
+                    : this.selectItems(item);
             }
             else {
                 this.selectItems(item);
             }
         });
     }
+    // #endregion
+    // #region Public Utility Methods
+    /**
+     * Checks if an item is currently selected
+     * @param item Item to check
+     * @returns True if the item is selected
+     */
     isItemSelected(item) {
-        return this.selectedItems.some((c) => c[this.valueField] === this.normalizeItem(item)[this.valueField]);
+        const normalizedItem = this.normalizeItem(item);
+        const normalizedValue = get(normalizedItem, this.valueField);
+        return this.selectedItems.some(selectedItem => get(selectedItem, this.valueField) === normalizedValue);
     }
+    /**
+     * Checks if an item is disabled
+     * @param item Item to check
+     * @returns True if the item is disabled
+     */
     isItemDisabled(item) {
+        const itemRecord = item;
         return (this.disabled ||
-            coerceBooleanProperty(item[this.disabledField]) === true ||
-            (this.disabledCallback ? this.disabledCallback({ item, index: -1 }) : false));
+            coerceBooleanProperty(get(itemRecord, this.disabledField)) === true ||
+            (this.disabledCallback?.({ item, index: -1 }) ?? false));
     }
-    // protected getDisplayText(item: T) {
-    //   const normalizeItem = this.normalizeItem(item) as any;
-    //   return formattedText || normalizeItem[this.valueField];
-    // }
+    /**
+     * Checks if an item is currently loading
+     * @param item Item to check
+     * @returns True if the item is loading
+     */
+    isItemLoading(item) {
+        const normalizedItem = this.normalizeItem(item);
+        return normalizedItem['isLoading'] === true;
+    }
+    // #endregion
+    // #region Protected Utility Methods
+    /**
+     * Gets the display text for an item using template or text field
+     * @param item Item to get display text for
+     * @returns Formatted display text
+     */
     getDisplayText(item) {
-        const normalizeItem = this.normalizeItem(item);
-        const formattedTemplate = this.formatService.format(this.textTemplate, 'string', normalizeItem);
-        if (this.textTemplate && formattedTemplate != this.textTemplate)
-            return formattedTemplate;
-        else
-            return normalizeItem[this.textField] || normalizeItem[this.valueField];
+        // Prevent recursive calls that could cause infinite loops
+        if (item && typeof item === 'object' && item['_displayTextLoading']) {
+            return 'Loading...';
+        }
+        // Add timestamp-based debouncing to prevent excessive calls for ALL item types
+        const now = Date.now();
+        const itemKey = typeof item === 'string' ? item : get(item, this.valueField);
+        const cacheKey = this.createCacheKey(String(itemKey));
+        // Check if we have a recent result in the cache to prevent duplicate processing
+        const cachedResult = this.dataService.cacheList[cacheKey];
+        if (cachedResult && cachedResult['_lastDisplayTextCall']) {
+            const timeSinceLastCall = now - cachedResult['_lastDisplayTextCall'];
+            if (timeSinceLastCall < 50) { // 50ms debounce
+                return cachedResult['_lastDisplayTextResult'] || String(itemKey || '');
+            }
+        }
+        // For string values, we need to normalize with findByKey=true to trigger async loading
+        const isStringValue = typeof item === 'string';
+        const normalizedItem = this.normalizeItem(item, isStringValue);
+        // Check if this item is already in the cache with proper text
+        const itemValue = get(normalizedItem, this.valueField);
+        if (itemValue != null && itemValue !== '') {
+            const cacheKey = this.createCacheKey(String(itemValue));
+            const cachedItem = this.dataService.cacheList[cacheKey];
+            if (cachedItem && get(cachedItem, this.textField) != null) {
+                // Use cached text if available
+                const cachedText = get(cachedItem, this.textField);
+                if (cachedText && cachedText !== 'Loading...') {
+                    const result = String(cachedText);
+                    // Cache the timestamp and result for debouncing in the cache (works for all item types)
+                    if (cachedItem) {
+                        cachedItem['_lastDisplayTextCall'] = now;
+                        cachedItem['_lastDisplayTextResult'] = result;
+                    }
+                    return result;
+                }
+            }
+        }
+        // Try template formatting first
+        if (this.textTemplate) {
+            const formattedTemplate = this.formatService.format(this.textTemplate, 'string', normalizedItem);
+            if (formattedTemplate !== this.textTemplate) {
+                const result = formattedTemplate;
+                // Cache the timestamp and result for debouncing in the cache
+                if (normalizedItem) {
+                    normalizedItem['_lastDisplayTextCall'] = now;
+                    normalizedItem['_lastDisplayTextResult'] = result;
+                }
+                return result;
+            }
+        }
+        // Use text field or fallback to value field
+        const textValue = get(normalizedItem, this.textField);
+        if (textValue != null && textValue !== '') {
+            const result = String(textValue);
+            // Cache the timestamp and result for debouncing in the cache
+            if (normalizedItem) {
+                normalizedItem['_lastDisplayTextCall'] = now;
+                normalizedItem['_lastDisplayTextResult'] = result;
+            }
+            return result;
+        }
+        // If text is missing and item is loading, show loading state
+        if (normalizedItem['isLoading']) {
+            const result = 'Loading...';
+            // Cache the timestamp and result for debouncing in the cache
+            if (normalizedItem) {
+                normalizedItem['_lastDisplayTextCall'] = now;
+                normalizedItem['_lastDisplayTextResult'] = result;
+            }
+            return result;
+        }
+        // Attempt to load item by key if text is missing
+        const value = get(normalizedItem, this.valueField);
+        if (value == null || value === '') {
+            const result = this.defaultText;
+            // Cache the timestamp and result for debouncing in the cache
+            if (normalizedItem) {
+                normalizedItem['_lastDisplayTextCall'] = now;
+                normalizedItem['_lastDisplayTextResult'] = result;
+            }
+            return result;
+        }
+        // If we have a value but no text, trigger async loading only once
+        // Use a flag to prevent multiple calls
+        if (!normalizedItem['_loadingTriggered'] && !normalizedItem[this.textField]) {
+            normalizedItem['_loadingTriggered'] = true;
+            normalizedItem['_displayTextLoading'] = true;
+            // Use setTimeout to defer the async loading and prevent immediate change detection
+            setTimeout(() => {
+                this.loadAndCacheItemByKey(value);
+            }, 0);
+        }
+        // Return the value itself as a fallback
+        // This will be updated once the async loading completes
+        const result = String(value);
+        // Cache the timestamp and result for debouncing in the cache
+        if (normalizedItem) {
+            normalizedItem['_lastDisplayTextCall'] = now;
+            normalizedItem['_lastDisplayTextResult'] = result;
+        }
+        return result;
     }
+    /**
+     * Gets the value of an item
+     * @param item Item to get value from
+     * @returns Item value
+     */
     getValue(item) {
-        const normalizeItem = this.normalizeItem(item);
-        return normalizeItem[this.valueField];
+        const normalizedItem = this.normalizeItem(item);
+        return get(normalizedItem, this.valueField);
     }
+    /**
+     * Clears the selection cache and selected items
+     */
     clearSelectionCache() {
         this.dataService.cacheList = {};
         this.dataService.selectedItems = [];
         this.cdr.markForCheck();
     }
+    /**
+     * Clears only the cache while preserving selected items
+     */
     softClearSelectionCache() {
         this.dataService.cacheList = {};
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXSelectionValueComponent }); }
+    /**
+     * Clears the debouncing cache for specific items to ensure fresh data is displayed
+     */
+    clearItemDebouncingCache(item) {
+        // Get the cache key for this item
+        const itemKey = typeof item === 'string' ? item : get(item, this.valueField);
+        if (itemKey != null) {
+            const cacheKey = this.createCacheKey(String(itemKey));
+            const cachedItem = this.dataService.cacheList[cacheKey];
+            if (cachedItem) {
+                delete cachedItem['_lastDisplayTextCall'];
+                delete cachedItem['_lastDisplayTextResult'];
+                delete cachedItem['_displayTextLoading'];
+                delete cachedItem['_loadingTriggered'];
+            }
+        }
+    }
+    /**
+     * Forces a refresh of the display when items are loaded asynchronously
+     * This should be called when the data source is updated
+     */
+    refreshDisplay() {
+        this.cdr.markForCheck();
+    }
+    /**
+     * Refreshes the display for all selected items to ensure consistency
+     * This is useful when the data source has been updated
+     */
+    refreshSelectedItemsDisplay() {
+        // Force a refresh of the display without re-normalizing to avoid infinite loops
+        if (this.selectedItems.length > 0) {
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Forces a refresh of all selected items by clearing their debouncing cache
+     * This ensures fresh data is displayed when the data source is updated
+     */
+    forceRefreshSelectedItems() {
+        if (this.selectedItems.length > 0) {
+            this.selectedItems.forEach(item => {
+                this.clearItemDebouncingCache(item);
+            });
+            this.cdr.markForCheck();
+        }
+    }
+    // #endregion
+    // #region Private Helper Methods
+    /**
+     * Asynchronously loads an item by its key and caches the result
+     * @param key Key to load item by
+     */
+    async loadAndCacheItemByKey(key) {
+        try {
+            const item = await this.getItemByKey(key);
+            if (item) {
+                const normalizedItem = this.normalizeItem(item);
+                const cacheKey = this.createCacheKey(String(normalizedItem[this.valueField]));
+                // Update the cache with the loaded item
+                this.dataService.cacheList[cacheKey] = normalizedItem;
+                // Clear loading flags
+                if (this.dataService.cacheList[cacheKey]) {
+                    delete this.dataService.cacheList[cacheKey]['_displayTextLoading'];
+                    delete this.dataService.cacheList[cacheKey]['_loadingTriggered'];
+                }
+                // Use setTimeout to defer change detection and prevent immediate re-rendering
+                setTimeout(() => {
+                    if (this.cdr) {
+                        this.cdr.markForCheck();
+                    }
+                }, 0);
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load item by key:', key, error);
+            // Clear loading flags on error too
+            const cacheKey = this.createCacheKey(String(key));
+            if (this.dataService.cacheList[cacheKey]) {
+                delete this.dataService.cacheList[cacheKey]['_displayTextLoading'];
+                delete this.dataService.cacheList[cacheKey]['_loadingTriggered'];
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXSelectionValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1871,10 +2321,10 @@ class AXNgModelDelayedValueChangedDirective {
         distinctUntilChanged(), debounceTime(this.delayTime))
             .subscribe((value) => this.axDelayedValueChanged.emit(value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", 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: "20.1.8", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.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: "20.1.3", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDelayedValueChanged]',
@@ -1925,10 +2375,10 @@ class AXInvertedColorDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXInvertedColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.3", 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: "20.1.8", ngImport: i0, type: AXInvertedColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.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: "20.1.3", ngImport: i0, type: AXInvertedColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXInvertedColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axInvertedColor]',
@@ -1981,10 +2431,10 @@ class AXRippleDirective {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: AXRippleDirective, isStandalone: true, selector: "[axRipple]", inputs: { enabled: ["axRipple", "enabled"], axRippleColor: "axRippleColor" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.8", type: AXRippleDirective, isStandalone: true, selector: "[axRipple]", inputs: { enabled: ["axRipple", "enabled"], axRippleColor: "axRippleColor" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXRippleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImport: i0, type: AXRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axRipple]',
@@ -2000,5 +2450,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXAutoFocusDirective, AXAutocompleteParentComponent, AXButtonClickEvent, AXClearableComponent, AXClickEvent, AXClosableComponent, 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, AXClosableComponent, AXCommonModule, AXComponent, AXComponentCloseEvent, AXComponentClosedPromise, AXComponentClosing, AXComponentResult, AXDataSource, AXDomService, AXEvent, AXFocusEvent, AXFocusableComponent, AXHotkeyDirective, AXHotkeysService, AXHtmlEvent, AXInfiniteScrollerDirective, AXInvertedColorDirective, AXItemClickEvent, AXItemSelectedEvent, 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, applyDataSourceQuery, convertArrayToDataSource, convertToPlacement };
 //# sourceMappingURL=acorex-cdk-common.mjs.map