@acorex/cdk 21.0.2-next.49 → 21.0.2-next.50

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, cloneDeep, isEqual, omit, set, get } from 'lodash-es';
+import { flatten, cloneDeep, isEqual, omit, get } from 'lodash-es';
 import { isBrowser } from '@acorex/core/platform';
 import { AXValidationService } from '@acorex/core/validation';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -17,38 +17,38 @@ import { NgModel } from '@angular/forms';
 
 class NXButtonComponent {
     constructor() {
-        this.text = model(...(ngDevMode ? [undefined, { debugName: "text" }] : []));
+        this.text = model(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
         this.toggleableChange = output();
         this.selectedChange = output();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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.3.3", ngImport: i0, type: NXButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXButtonComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }] });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }, { type: i0.Output, args: ["textChange"] }], toggleableChange: [{ type: i0.Output, args: ["toggleableChange"] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }] } });
 
 class NXColorComponent {
     constructor() {
-        this.color = model('default', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.color = model('default', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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.3.3", ngImport: i0, type: NXColorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXColorComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }] });
+        }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }, { type: i0.Output, args: ["colorChange"] }] } });
 
 class NXComponent {
     constructor() {
         this.#elementRef = inject(ElementRef);
-        this.#isRendered = signal(false, ...(ngDevMode ? [{ debugName: "#isRendered" }] : []));
+        this.#isRendered = signal(false, ...(ngDevMode ? [{ debugName: "#isRendered" }] : /* istanbul ignore next */ []));
         this.isRendered = this.#isRendered.asReadonly();
         this.#afterNextRender = afterNextRender(() => {
             if (!this.isRendered()) {
@@ -63,10 +63,10 @@ class NXComponent {
     get nativeElement() {
         return this.#elementRef.nativeElement;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: NXComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -92,8 +92,8 @@ class NXClickEvent extends NXNativeEvent {
 class NXInteractiveComponent extends NXComponent {
     constructor() {
         super(...arguments);
-        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-        this.tabIndex = model(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : []));
+        this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.tabIndex = model(0, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
         this.onFocus = output();
         this.onBlur = output();
     }
@@ -106,46 +106,46 @@ class NXInteractiveComponent extends NXComponent {
     hasFocus() {
         return AXHtmlUtil.hasFocus(this.nativeElement);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXInteractiveComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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.3.3", ngImport: i0, type: NXInteractiveComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXInteractiveComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }] });
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }, { type: i0.Output, args: ["tabIndexChange"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }] } });
 
 class NXLookComponent {
     constructor() {
-        this.look = model('solid', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.look = model('solid', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXLookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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.3.3", ngImport: i0, type: NXLookComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXLookComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }] });
+        }], propDecorators: { look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }] } });
 
 class NXValueComponent {
     constructor() {
-        this.readonly = model(...(ngDevMode ? [undefined, { debugName: "readonly" }] : []));
-        this.name = model(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
-        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : []));
+        this.readonly = model(...(ngDevMode ? [undefined, { debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.name = model(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
+        this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         this.onValueChanged = output();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", 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.3.3", ngImport: i0, type: NXValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NXValueComponent, decorators: [{
             type: Component,
             args: [{
                     template: '',
                 }]
-        }] });
+        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }, { type: i0.Output, args: ["nameChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }] } });
 
 const defaultOffset = 3;
 function convertToPlacement(value) {
@@ -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.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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDomService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDomService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDomService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -398,10 +398,10 @@ class MXBaseComponent {
         if (option.afterCallback)
             option.afterCallback(oldValue, newValue);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXBaseComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXBaseComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -820,10 +820,10 @@ class MXValueComponent extends MXInteractiveComponent {
     resetErrors() {
         this.setState('clear');
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -936,52 +936,52 @@ class AXComponentClosedPromise extends Promise {
     }
 }
 class 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXComponent, decorators: [{
             type: Injectable
         }] });
 class AXClosableComponent extends AXComponent {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXClosableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXClosableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXClosableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXClosableComponent, decorators: [{
             type: Injectable
         }] });
 class AXClearableComponent extends AXComponent {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXClearableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXClearableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXClearableComponent, decorators: [{
             type: Injectable
         }] });
 class AXSearchableComponent extends AXComponent {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSearchableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSearchableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXSearchableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXSearchableComponent, decorators: [{
             type: Injectable
         }] });
 class AXValuableComponent extends AXComponent {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXValuableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXValuableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXValuableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXValuableComponent, decorators: [{
             type: Injectable
         }] });
 class AXFocusableComponent extends AXComponent {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFocusableComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFocusableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXFocusableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXFocusableComponent, decorators: [{
             type: Injectable
         }] });
 class AXPagedComponent extends AXComponent {
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPagedComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPagedComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPagedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPagedComponent, decorators: [{
             type: Injectable
         }] });
 class AXAutocompleteParentComponent extends MXValueComponent {
@@ -1003,10 +1003,10 @@ class AXAutocompleteParentComponent extends MXValueComponent {
         });
         this.oldInputEmitValue = value;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXAutocompleteParentComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXAutocompleteParentComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAutocompleteParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXAutocompleteParentComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1283,10 +1283,10 @@ class AXAutoFocusDirective {
             }, this.time);
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXAutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXAutoFocusDirective, isStandalone: true, selector: "[axAutoFocus]", inputs: { autoFocus: ["axAutoFocus", "autoFocus"], time: ["axAutoFocusTime", "time"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXAutoFocusDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axAutoFocus]' }]
         }], propDecorators: { autoFocus: [{
@@ -1333,11 +1333,12 @@ class 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXHotkeysService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXHotkeysService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXHotkeysService, decorators: [{
-            type: Injectable
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXHotkeysService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
 class AXHotkeyDirective {
@@ -1396,10 +1397,10 @@ class AXHotkeyDirective {
             s.unsubscribe();
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXHotkeyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXHotkeyDirective, isStandalone: true, selector: "[axHotkey]", inputs: { axHotkey: "axHotkey" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXHotkeyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXHotkeyDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axHotkey]' }]
         }], propDecorators: { axHotkey: [{
@@ -1446,10 +1447,10 @@ class AXInfiniteScrollerDirective {
             return this.scrollCallback();
         }));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXInfiniteScrollerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXInfiniteScrollerDirective, isStandalone: true, selector: "[axInfiniteScroller]", inputs: { scrollCallback: "scrollCallback", immediateCallback: "immediateCallback", scrollPercent: "scrollPercent" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXInfiniteScrollerDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axInfiniteScroller]' }]
         }], propDecorators: { scrollCallback: [{
@@ -1488,20 +1489,20 @@ class AXResponsiveDirective {
         this._observer?.disconnect();
         this._observer?.unobserve(this._elementRef.nativeElement);
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXResponsiveDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXResponsiveDirective, isStandalone: true, selector: "[axResponsive]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXResponsiveDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXResponsiveDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[axResponsive]' }]
         }], ctorParameters: () => [] });
 
 class AXCommonModule {
-    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] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXCommonModule, imports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective], exports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXCommonModule, providers: [AXHotkeysService] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXResponsiveDirective, AXInfiniteScrollerDirective, AXAutoFocusDirective, AXHotkeyDirective],
@@ -1520,7 +1521,22 @@ class MXColorComponent extends MXBaseComponent {
      *  Predefined color schemes
      */
     get color() {
-        return this._color;
+        switch (this._color) {
+            case 'primary':
+                return 'ax-primary';
+            case 'secondary':
+                return 'ax-secondary';
+            case 'success':
+                return 'ax-success';
+            case 'warning':
+                return 'ax-warning';
+            case 'danger':
+                return 'ax-danger';
+            case 'default':
+                return 'ax-default';
+            default:
+                return `ax-${this._color}`;
+        }
     }
     set color(value) {
         this.setOption({
@@ -1534,10 +1550,10 @@ class MXColorComponent extends MXBaseComponent {
 }
 
 class 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXLookableComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXLookableComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXLookableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXLookableComponent, decorators: [{
             type: Injectable
         }] });
 class MXLookComponent extends MXBaseComponent {
@@ -1550,7 +1566,48 @@ class MXLookComponent extends MXBaseComponent {
      *  Predefined look schemes
      */
     get look() {
-        return this._look;
+        switch (this._look) {
+            case 'solid':
+                return 'ax-solid';
+            case 'blank':
+                return 'ax-blank';
+            case 'outline':
+                return 'ax-outline';
+            case 'twotone':
+                return 'ax-twotone';
+            case 'flat':
+                return 'ax-flat';
+            case 'fill':
+                return 'ax-fill';
+            case 'link':
+                return 'ax-link';
+            case 'none':
+                return 'ax-none';
+            default:
+                return this._look;
+        }
+    }
+    get interactiveLook() {
+        switch (this._look) {
+            case 'solid':
+                return 'ax-solid-interactive';
+            case 'blank':
+                return 'ax-blank-interactive';
+            case 'outline':
+                return 'ax-outline-interactive';
+            case 'twotone':
+                return 'ax-twotone-interactive';
+            case 'flat':
+                return 'ax-flat-interactive';
+            case 'fill':
+                return 'ax-fill-interactive';
+            case 'link':
+                return 'ax-link-interactive';
+            case 'none':
+                return 'ax-none-interactive';
+            default:
+                return this._look;
+        }
     }
     set look(value) {
         this.setOption({
@@ -1641,11 +1698,9 @@ class MXButtonBaseComponent extends classes(MXInteractiveComponent, MXColorLookC
     get cssClasses() {
         const cssClasses = {
             'ax-button-icon': !this.text,
-            'ax-state-disabled': this.disabled,
-            'ax-state-selected': this.selected,
         };
-        set(cssClasses, `ax-${this.look || 'solid'}`, true);
-        set(cssClasses, `ax-${this.color || 'primary'}`, true);
+        // set(cssClasses, `${this.interactiveLook || 'ax-solid-interactive'}`, true);
+        // set(cssClasses, `${this.color || 'ax-primary'}`, true);
         return cssClasses;
     }
 }
@@ -1712,10 +1767,10 @@ class MXInputBaseValueComponent extends MXValueComponent {
         else
             super.focus();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXInputBaseValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXInputBaseValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXInputBaseValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXInputBaseValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -1729,10 +1784,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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXSelectionBridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXSelectionBridgeService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXSelectionBridgeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXSelectionBridgeService, decorators: [{
             type: Injectable
         }] });
 /**
@@ -2287,10 +2342,10 @@ class MXSelectionValueComponent extends MXValueComponent {
             }
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXSelectionValueComponent, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXSelectionValueComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MXSelectionValueComponent, decorators: [{
             type: Injectable
         }] });
 
@@ -2323,10 +2378,10 @@ class AXNgModelDelayedValueChangedDirective {
         distinctUntilChanged(), debounceTime(this.delayTime))
             .subscribe((value) => this.axDelayedValueChanged.emit(value));
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXNgModelDelayedValueChangedDirective, isStandalone: true, selector: "[axDelayedValueChanged]", inputs: { delayTime: "delayTime" }, outputs: { axDelayedValueChanged: "axDelayedValueChanged", axDelayTimeChange: "axDelayTimeChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXNgModelDelayedValueChangedDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axDelayedValueChanged]',
@@ -2341,7 +2396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
 
 class AXInvertedColorDirective {
     constructor() {
-        this.color = input.required(...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.color = input.required(...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.ref = inject(ViewContainerRef);
         this.platformID = inject(PLATFORM_ID);
         afterNextRender(() => {
@@ -2377,22 +2432,22 @@ class AXInvertedColorDirective {
             });
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXInvertedColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", 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.3.3", ngImport: i0, type: AXInvertedColorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXInvertedColorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axInvertedColor]',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }] } });
 
 class AXRippleDirective {
     constructor() {
         this.el = inject(ElementRef);
         this.cdr = inject(ChangeDetectorRef);
         this.enabled = true;
-        this.axRippleColor = 'var(--ax-comp-ripple-bg-color, rgba(255, 255, 255, 0.3))';
+        this.axRippleColor = 'var(--ax-comp-ripple-color, rgba(255, 255, 255, 0.3))';
         this.document = inject(DOCUMENT);
         this.platformID = inject(PLATFORM_ID);
     }
@@ -2433,10 +2488,10 @@ class AXRippleDirective {
             });
         }
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXRippleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: AXRippleDirective, isStandalone: true, selector: "[axRipple]", inputs: { enabled: ["axRipple", "enabled"], axRippleColor: "axRippleColor" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXRippleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXRippleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[axRipple]',