@acorex/cdk 20.2.0-next.9 → 20.2.0

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.3.3", ngImport: i0, type: NXButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: NXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: NXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: NXInteractiveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXInteractiveComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: NXLookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXLookComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: NXValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NXValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: AXDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXClosableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXAutocompleteParentComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXAutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXHotkeysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXHotkeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXResponsiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", 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.3.3", 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.3.3", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.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.3.3", 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.3.3", 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.3.3", ngImport: i0, type: MXLookableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: MXLookableComponent, decorators: [{
             type: Injectable
         }] });
 class MXLookComponent extends MXBaseComponent {
@@ -1614,10 +1703,10 @@ 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.3.3", ngImport: i0, type: MXInputBaseValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: MXInputBaseValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1631,10 +1720,10 @@ class MXSelectionBridgeService {
         /** 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.3.3", ngImport: i0, type: MXSelectionBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: MXSelectionBridgeService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -1655,8 +1744,18 @@ class MXSelectionValueComponent extends MXValueComponent {
         this._valueField = 'id';
         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() {
@@ -1679,6 +1778,13 @@ class MXSelectionValueComponent extends MXValueComponent {
     set textTemplate(value) {
         this.setOption({ name: 'textTemplate', value });
     }
+    /** Text to display when neither textField nor valueField exist on the item */
+    get defaultText() {
+        return this._defaultText;
+    }
+    set defaultText(value) {
+        this.setOption({ name: 'defaultText', value });
+    }
     /** Field name used to determine if an item is disabled */
     get disabledField() {
         return this._disabledField;
@@ -1716,16 +1822,22 @@ class MXSelectionValueComponent extends MXValueComponent {
         if (value == null || (isArray && value.length === 0)) {
             return this.multiple ? [] : null;
         }
-        // Normalize items and find by key if needed
+        // Check if items already have text properties to avoid unnecessary findByKey calls
         const itemsToNormalize = isArray ? value : [value];
-        const normalizedItems = this.normalizeItemsList(itemsToNormalize, true);
+        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;
         }
         // Extract values based on selection mode
         return this.multiple
-            ? normalizedItems.map(item => item[this.valueField])
-            : normalizedItems[0]?.[this.valueField] ?? null;
+            ? normalizedItems.map((item) => get(item, this.valueField))
+            : (get(normalizedItems[0], this.valueField) ?? null);
     }
     /**
      * Override to normalize selected items when value changes
@@ -1745,9 +1857,7 @@ class MXSelectionValueComponent extends MXValueComponent {
     normalizeItemsList(items, findByKey = false) {
         if (!items?.length)
             return [];
-        return items
-            .filter(item => item != null)
-            .map(item => this.normalizeItem(item, findByKey));
+        return items.filter((item) => item != null).map((item) => this.normalizeItem(item, findByKey));
     }
     /**
      * Normalizes a single item, handling caching and async loading
@@ -1758,22 +1868,24 @@ class MXSelectionValueComponent extends MXValueComponent {
     normalizeItem(item, findByKey = false) {
         const isComplexObject = typeof item === 'object' && item !== null;
         const itemRecord = item;
-        const key = isComplexObject ? String(itemRecord[this.valueField]) : String(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 && cachedItem[this.textField]) {
+        if (cachedItem && get(cachedItem, this.textField) != null) {
             return cachedItem;
         }
-        const hasTextProperty = !isComplexObject || itemRecord[this.textField] != null;
+        const hasTextProperty = !isComplexObject || get(itemRecord, this.textField) != null;
         const normalizedObj = {};
-        if (isComplexObject && hasTextProperty) {
-            // Item already has all required properties
-            Object.assign(normalizedObj, item);
+        // 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 {
-            // Need to find or create item properties
-            this.handleItemNormalization(normalizedObj, item, key, findByKey, cacheKey);
+            // Item already has all required properties, just copy them
+            Object.assign(normalizedObj, item);
         }
         this.dataService.cacheList[cacheKey] = normalizedObj;
         return normalizedObj;
@@ -1800,9 +1912,9 @@ class MXSelectionValueComponent extends MXValueComponent {
         // Set loading state
         obj[this.valueField] = key;
         obj['isLoading'] = true;
-        obj[this.textField] = 'Loading';
+        obj[this.textField] = '@acorex:common.status.loading';
         promise
-            .then(result => {
+            .then((result) => {
             if (typeof result === 'object' && result) {
                 Object.assign(obj, cloneDeep(result));
             }
@@ -1810,11 +1922,23 @@ class MXSelectionValueComponent extends MXValueComponent {
                 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;
-            this.cdr.markForCheck();
+            // Use setTimeout to defer change detection and prevent immediate re-rendering
+            setTimeout(() => {
+                if (this.cdr) {
+                    this.cdr.markForCheck();
+                }
+            }, 0);
         });
     }
     /**
@@ -1824,12 +1948,16 @@ class MXSelectionValueComponent extends MXValueComponent {
         const isSourceObject = typeof sourceItem === 'object' && sourceItem !== null;
         const sourceRecord = sourceItem;
         if (isComplexSource && isSourceObject) {
-            obj[this.valueField] = sourceRecord[this.valueField];
-            obj[this.textField] = sourceRecord[this.textField];
+            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 {
-            obj[this.valueField] = isSourceObject ? sourceRecord[this.valueField] : sourceItem;
-            obj[this.textField] = isSourceObject ? sourceRecord[this.textField] : sourceItem;
+            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);
         }
     }
     /**
@@ -1842,10 +1970,13 @@ class MXSelectionValueComponent extends MXValueComponent {
      * 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(value => this.normalizeItem(value));
+        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
@@ -1859,7 +1990,8 @@ class MXSelectionValueComponent extends MXValueComponent {
             return;
         }
         const normalizedItems = this.normalizeItemsList(items);
-        const newSelectedItems = this.selectedItems.filter(selectedItem => !normalizedItems.some(normalizedItem => normalizedItem[this.valueField] === selectedItem[this.valueField]));
+        const newSelectedItems = this.selectedItems.filter((selectedItem) => !normalizedItems.some((normalizedItem) => get(normalizedItem, this.valueField) ===
+            get(selectedItem, this.valueField)));
         this.commitValue(newSelectedItems, true);
     }
     /**
@@ -1867,13 +1999,18 @@ class MXSelectionValueComponent extends MXValueComponent {
      * @param items Items to select
      */
     selectItems(...items) {
-        if (!items?.length)
+        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;
+        const newSelectedItems = this.multiple ? [...currentValue, ...normalizedItems] : normalizedItems;
+        this.onItemSelected.emit({
+            component: this,
+            isUserInteraction: true,
+            item: newSelectedItems[0],
+            htmlElement: this.getHostElement(),
+        });
         this.commitValue(newSelectedItems, true);
     }
     /**
@@ -1881,11 +2018,9 @@ class MXSelectionValueComponent extends MXValueComponent {
      * @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);
@@ -1901,7 +2036,8 @@ class MXSelectionValueComponent extends MXValueComponent {
      */
     isItemSelected(item) {
         const normalizedItem = this.normalizeItem(item);
-        return this.selectedItems.some(selectedItem => selectedItem[this.valueField] === normalizedItem[this.valueField]);
+        const normalizedValue = get(normalizedItem, this.valueField);
+        return this.selectedItems.some((selectedItem) => get(selectedItem, this.valueField) === normalizedValue);
     }
     /**
      * Checks if an item is disabled
@@ -1911,9 +2047,18 @@ class MXSelectionValueComponent extends MXValueComponent {
     isItemDisabled(item) {
         const itemRecord = item;
         return (this.disabled ||
-            coerceBooleanProperty(itemRecord[this.disabledField]) === true ||
+            coerceBooleanProperty(get(itemRecord, this.disabledField)) === true ||
             (this.disabledCallback?.({ item, index: -1 }) ?? false));
     }
+    /**
+     * 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
     /**
@@ -1922,22 +2067,109 @@ class MXSelectionValueComponent extends MXValueComponent {
      * @returns Formatted display text
      */
     getDisplayText(item) {
-        const normalizedItem = this.normalizeItem(item);
+        // Prevent recursive calls that could cause infinite loops
+        if (item && typeof item === 'object' && item['_displayTextLoading']) {
+            return '@acorex:common.status.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 !== '@acorex:common.status.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) {
-                return formattedTemplate;
+                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
-        if (normalizedItem[this.textField]) {
-            return String(normalizedItem[this.textField]);
+        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 = '@acorex:common.status.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 = normalizedItem[this.valueField];
-        this.loadAndCacheItemByKey(value);
-        return String(value);
+        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
@@ -1946,7 +2178,7 @@ class MXSelectionValueComponent extends MXValueComponent {
      */
     getValue(item) {
         const normalizedItem = this.normalizeItem(item);
-        return normalizedItem[this.valueField];
+        return get(normalizedItem, this.valueField);
     }
     /**
      * Clears the selection cache and selected items
@@ -1963,6 +2195,52 @@ class MXSelectionValueComponent extends MXValueComponent {
         this.dataService.cacheList = {};
         this.cdr.markForCheck();
     }
+    /**
+     * 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
     /**
@@ -1975,18 +2253,35 @@ class MXSelectionValueComponent extends MXValueComponent {
             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;
-                this.cdr.markForCheck();
+                // 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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -2019,10 +2314,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.3.3", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDelayedValueChanged]',
@@ -2073,10 +2368,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.3.3", ngImport: i0, type: AXInvertedColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", 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.3.3", ngImport: i0, type: AXInvertedColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axInvertedColor]',
@@ -2129,10 +2424,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.3.3", ngImport: i0, type: AXRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", 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.3.3", ngImport: i0, type: AXRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axRipple]',
@@ -2148,5 +2443,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