@acorex/components 21.0.1-next.18 → 21.0.1-next.19

package/fesm2022/acorex-components-collapse.mjs

@@ -149,10 +149,10 @@ class AXCollapseComponent extends classes(MXInteractiveComponent, MXLookComponen
     get __hostClass() {
         return [`${this.disabled ? 'ax-state-disabled' : ''}`, `${this.look ?? this.parent?.look}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXCollapseComponent, isStandalone: true, selector: "ax-collapse", inputs: { disabled: "disabled", look: "look", isCollapsed: "isCollapsed", showHeader: "showHeader", caption: "caption", icon: "icon", isLoading: "isLoading", headerTemplate: "headerTemplate" }, outputs: { onClick: "onClick", isCollapsedChange: "isCollapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: "@if (showHeader) {\n  <div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n    @if (headerTemplate) {\n      <div class=\"ax-collapse-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-collapse-header-container\">\n        <div class=\"ax-collapse-header-start\">\n          <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n          <span>\n            {{ caption }}\n          </span>\n        </div>\n        <div class=\"ax-collapse-header-end\">\n          @if (isLoading) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n@if (!isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\" class=\"ax-collapse-body\">\n    <div class=\"ax-collapse-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: ["ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}.dark ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-darkest-surface)}ax-collapse-group ax-collapse.ax-fill{--ax-comp-collapse-bg-color: var(--ax-sys-color-surface)}ax-collapse-group ax-collapse.ax-flat{--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse.ax-outline{--ax-comp-collapse-border-color: var(--ax-sys-color-border-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse{--ax-comp-collapse-margin: .5rem}ax-collapse,ax-collapse-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:1500px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:1500px}to{opacity:0;max-height:0}}ax-collapse .ax-fade-slide-in,ax-collapse-group .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-collapse .ax-fade-slide-out,ax-collapse-group .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-collapse-group ax-collapse{margin-bottom:var(--ax-comp-collapse-margin)}ax-collapse-group ax-collapse.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-solid .ax-collapse-header{background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-fill .ax-collapse-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-outline .ax-collapse-header{background-color:transparent}ax-collapse-group ax-collapse.ax-flat{border-bottom-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-flat .ax-collapse-header{background-color:transparent}ax-collapse.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-collapse .ax-collapse-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.-rotation-90{transform:rotate(-90deg)}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.rotation-90{transform:rotate(90deg)}ax-collapse .ax-collapse-body .ax-collapse-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCollapseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXCollapseComponent, isStandalone: true, selector: "ax-collapse", inputs: { disabled: "disabled", look: "look", isCollapsed: "isCollapsed", showHeader: "showHeader", caption: "caption", icon: "icon", isLoading: "isLoading", headerTemplate: "headerTemplate" }, outputs: { onClick: "onClick", isCollapsedChange: "isCollapsedChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: AXComponent, useExisting: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: "@if (showHeader) {\n  <div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n    @if (headerTemplate) {\n      <div class=\"ax-collapse-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-collapse-header-container\">\n        <div class=\"ax-collapse-header-start\">\n          <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n          <span>\n            {{ caption }}\n          </span>\n        </div>\n        <div class=\"ax-collapse-header-end\">\n          @if (isLoading) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n@if (!isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\" class=\"ax-collapse-body\">\n    <div class=\"ax-collapse-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: ["ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}.dark ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-darkest-surface)}ax-collapse-group ax-collapse.ax-fill{--ax-comp-collapse-bg-color: var(--ax-sys-color-surface)}ax-collapse-group ax-collapse.ax-flat{--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse.ax-outline{--ax-comp-collapse-border-color: var(--ax-sys-color-border-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse{--ax-comp-collapse-margin: .5rem}ax-collapse,ax-collapse-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:1500px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:1500px}to{opacity:0;max-height:0}}ax-collapse .ax-fade-slide-in,ax-collapse-group .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-collapse .ax-fade-slide-out,ax-collapse-group .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-collapse-group ax-collapse{margin-bottom:var(--ax-comp-collapse-margin)}ax-collapse-group ax-collapse.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-solid .ax-collapse-header{background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-fill .ax-collapse-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-outline .ax-collapse-header{background-color:transparent}ax-collapse-group ax-collapse.ax-flat{border-bottom-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-flat .ax-collapse-header{background-color:transparent}ax-collapse.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-collapse .ax-collapse-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.-rotation-90{transform:rotate(-90deg)}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.rotation-90{transform:rotate(90deg)}ax-collapse .ax-collapse-body .ax-collapse-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCollapseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCollapseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-collapse', inputs: ['disabled', 'look'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, AXLoadingComponent, NgClass], providers: [{ provide: AXComponent, useExisting: AXCollapseComponent }], template: "@if (showHeader) {\n  <div class=\"ax-collapse-header\" [class.ax-state-collapsed]=\"isCollapsed\" (click)=\"handleHeaderClick($event)\">\n    @if (headerTemplate) {\n      <div class=\"ax-collapse-custom-header-container\">\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate\"\n          [ngTemplateOutletContext]=\"{ $implicit: { caption, isCollapsed } }\"\n        ></ng-container>\n      </div>\n    } @else {\n      <div class=\"ax-collapse-header-container\">\n        <div class=\"ax-collapse-header-start\">\n          <span class=\"ax-collapse-header-icon\" [class]=\"icon\"> </span>\n          <span>\n            {{ caption }}\n          </span>\n        </div>\n        <div class=\"ax-collapse-header-end\">\n          @if (isLoading) {\n            <ax-loading></ax-loading>\n          } @else {\n            <span\n              class=\"ax-icon ax-icon-chevron-left ax-collapse-arrow\"\n              [ngClass]=\"{ '-rotation-90': isCollapsed, 'rotation-90': !isCollapsed }\"\n            ></span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n@if (!isCollapsed) {\n  <div animate.enter=\"ax-fade-slide-in\" animate.leave=\"ax-fade-slide-out\" class=\"ax-collapse-body\">\n    <div class=\"ax-collapse-body-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n}\n", styles: ["ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}.dark ax-collapse-group ax-collapse.ax-solid{--ax-comp-collapse-bg-color: var(--ax-sys-color-darkest-surface);--ax-comp-collapse-border-color: var(--ax-sys-color-border-darkest-surface)}ax-collapse-group ax-collapse.ax-fill{--ax-comp-collapse-bg-color: var(--ax-sys-color-surface)}ax-collapse-group ax-collapse.ax-flat{--ax-comp-collapse-border-color: var(--ax-sys-color-border-lightest-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse.ax-outline{--ax-comp-collapse-border-color: var(--ax-sys-color-border-surface);--ax-comp-collapse-border-width: 1px}ax-collapse-group ax-collapse{--ax-comp-collapse-margin: .5rem}ax-collapse,ax-collapse-group{display:block;width:100%;overflow:hidden;font-size:1rem;line-height:1.5rem}@keyframes fadeSlideIn{0%{opacity:0;max-height:0}to{opacity:1;max-height:1500px}}@keyframes fadeSlideOut{0%{opacity:1;max-height:1500px}to{opacity:0;max-height:0}}ax-collapse .ax-fade-slide-in,ax-collapse-group .ax-fade-slide-in{animation:fadeSlideIn var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-collapse .ax-fade-slide-out,ax-collapse-group .ax-fade-slide-out{animation:fadeSlideOut var(--ax-sys-transition-duration) var(--ax-sys-transition-timing-function)}ax-collapse-group ax-collapse{margin-bottom:var(--ax-comp-collapse-margin)}ax-collapse-group ax-collapse.ax-solid{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-solid .ax-collapse-header{background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-fill .ax-collapse-header{border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-comp-collapse-bg-color))}ax-collapse-group ax-collapse.ax-outline{border-radius:var(--ax-sys-border-radius);border-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-outline .ax-collapse-header{background-color:transparent}ax-collapse-group ax-collapse.ax-flat{border-bottom-width:var(--ax-comp-collapse-border-width);border-color:rgba(var(--ax-comp-collapse-border-color))}ax-collapse-group ax-collapse.ax-flat .ax-collapse-header{background-color:transparent}ax-collapse.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-collapse .ax-collapse-header,ax-collapse .ax-collapse-body{font-size:.875rem;line-height:1.25rem;color:rgba(var(--ax-sys-color-on-surface-high))!important}ax-collapse .ax-collapse-header{cursor:pointer;-webkit-user-select:none;user-select:none;padding:.75rem}ax-collapse .ax-collapse-header .ax-collapse-header-container{display:flex;justify-content:space-between}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start{display:flex;align-items:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-start:not(:empty) .ax-collapse-header-icon{padding-inline-end:.5rem}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow{transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function);display:block}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.-rotation-90{transform:rotate(-90deg)}ax-collapse .ax-collapse-header .ax-collapse-header-container .ax-collapse-header-end .ax-collapse-arrow.rotation-90{transform:rotate(90deg)}ax-collapse .ax-collapse-body .ax-collapse-body-content{padding:1rem;padding-inline-end:1rem;padding-inline-start:1.25rem}\n"] }]
         }], propDecorators: { onClick: [{
@@ -302,8 +302,8 @@ class AXCollapseGroupComponent extends classes(MXBaseComponent, MXLookComponent)
     get __hostClass() {
         return ['ax-collapse-group', `${this.look}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCollapseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXCollapseGroupComponent, isStandalone: true, selector: "ax-collapse-group", inputs: { look: "look", accordion: "accordion", activeIndex: "activeIndex" }, outputs: { accordionChange: "accordionChange", activeIndexChange: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCollapseGroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXCollapseGroupComponent, isStandalone: true, selector: "ax-collapse-group", inputs: { look: "look", accordion: "accordion", activeIndex: "activeIndex" }, outputs: { accordionChange: "accordionChange", activeIndexChange: "activeIndexChange" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: MXLookableComponent,
                 useExisting: AXCollapseGroupComponent,
@@ -311,7 +311,7 @@ class AXCollapseGroupComponent extends classes(MXBaseComponent, MXLookComponent)
             { provide: AXComponent, useExisting: AXCollapseGroupComponent },
         ], queries: [{ propertyName: "_items", predicate: AXCollapseComponent }], usesInheritance: true, ngImport: i0, template: `<ng-content select="ax-collapse"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCollapseGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-collapse-group',
@@ -344,11 +344,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class AXCollapseModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXCollapseModule, imports: [AXCollapseComponent, AXCollapseGroupComponent], exports: [AXCollapseComponent, AXCollapseGroupComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCollapseModule, imports: [AXCollapseComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCollapseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXCollapseModule, imports: [AXCollapseComponent, AXCollapseGroupComponent], exports: [AXCollapseComponent, AXCollapseGroupComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCollapseModule, imports: [AXCollapseComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCollapseModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCollapseModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXCollapseComponent, AXCollapseGroupComponent],

package/fesm2022/acorex-components-color-box.mjs

@@ -82,8 +82,8 @@ class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBa
     get __hostName() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXColorBoxComponent, isStandalone: true, selector: "ax-color-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown": "handleKeyboardEvent($event)" }, properties: { "attr.name": "this.__hostName" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXColorBoxComponent, isStandalone: true, selector: "ax-color-box", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus", readonlyChange: "readonlyChange", disabledChange: "disabledChange", onOpened: "onOpened", onClosed: "onClosed" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "keydown": "handleKeyboardEvent($event)" }, properties: { "attr.name": "this.__hostName" } }, providers: [
             { provide: AXComponent, useExisting: AXColorBoxComponent },
             { provide: AXFocusableComponent, useExisting: AXColorBoxComponent },
             { provide: AXValuableComponent, useExisting: AXColorBoxComponent },
@@ -95,7 +95,7 @@ class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBa
             },
         ], viewQueries: [{ propertyName: "palettePicker", first: true, predicate: AXColorPalettePickerComponent, descendants: true, isSignal: true }, { propertyName: "picker", first: true, predicate: AXColorPaletteComponent, descendants: true }, { propertyName: "dropdown", first: true, predicate: AXDropdownBoxComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ax-dropdown-box\n  [look]=\"look\"\n  [disabled]=\"disabled\"\n  (onOpened)=\"_handleOnOpenedEvent($event)\"\n  (onClosed)=\"_handleOnClosedEvent($event)\"\n>\n  <ng-container input>\n    <ng-content select=\"ax-prefix\"> </ng-content>\n    <div class=\"ax-content\" (click)=\"_handleInputClickEvent($event)\" [tabindex]=\"tabIndex\">\n      @if (value && showBadge()) {\n        <div class=\"color-badge\" [ngStyle]=\"{ 'background-color': value }\"></div>\n      } @else {\n        <div class=\"color-placeholder\">{{ placeholder }}</div>\n      }\n      @if (showValue()) {\n        <div class=\"color-value\">{{ value }}</div>\n      }\n    </div>\n    @if (showClearButton()) {\n      @if (value && !disabled && !readonly) {\n        <ng-content select=\"ax-clear-button\"></ng-content>\n      }\n    }\n    @if (showIcon()) {\n      <button\n        type=\"button\"\n        class=\"ax-general-button-icon\"\n        [tabIndex]=\"-1\"\n        [disabled]=\"disabled\"\n        (click)=\"_handleArrowClickEvent($event)\"\n      >\n        <span class=\"ax-icon ax-icon-color-palette\"></span>\n      </button>\n    }\n    <ng-content select=\"ax-suffix\"> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\n  </ng-container>\n  <ng-container panel>\n    <ax-color-palette\n      [ngModel]=\"value\"\n      (ngModelChange)=\"_handleModelChange($event)\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n    >\n      <ax-color-palette-picker></ax-color-palette-picker>\n      <ax-color-palette-swatches></ax-color-palette-swatches>\n      <ax-color-palette-input></ax-color-palette-input>\n    </ax-color-palette>\n  </ng-container>\n</ax-dropdown-box>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid;--tw-border-style:solid;--tw-font-weight:initial}}}@layer components{ax-color-box{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);display:flex}ax-color-box .ax-editor-container{width:var(--ax-comp-color-box-width,100%);font-size:var(--ax-comp-color-box-font-size,var(--ax-comp-editor-font-size))}ax-color-box .ax-editor-container .ax-content{flex:1;flex-basis:calc(var(--spacing,.25rem)*0);align-items:center;gap:calc(var(--spacing,.25rem)*2);height:100%;display:flex;outline-style:var(--tw-outline-style)!important;outline-width:0!important}ax-color-box .ax-editor-container .ax-content .color-badge{width:calc(var(--spacing,.25rem)*4);height:calc(var(--spacing,.25rem)*4);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-surface);border-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));display:block}ax-color-box .ax-editor-container .ax-content .color-placeholder{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);color:inherit}ax-color-box .ax-editor-container .ax-content .color-value{text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;overflow:hidden}ax-color-box .ax-editor-container .ax-clear-button{flex-direction:row;display:flex;margin:calc(var(--spacing,.25rem)*0)!important}app-demo-box .log-container{flex-direction:row-reverse;justify-content:space-between;display:flex}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AXColorPaletteComponent, selector: "ax-color-palette", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-box', inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id', 'look'], outputs: [
                         'valueChange',
@@ -141,11 +141,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class AXColorBoxModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXColorBoxModule, imports: [AXColorBoxComponent], exports: [AXColorBoxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorBoxModule, imports: [AXColorBoxComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXColorBoxModule, imports: [AXColorBoxComponent], exports: [AXColorBoxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorBoxModule, imports: [AXColorBoxComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorBoxModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXColorBoxComponent],

package/fesm2022/acorex-components-color-palette.mjs

@@ -12,17 +12,17 @@ import { distinctUntilChanged } from 'rxjs/operators';
 import { NgTemplateOutlet } from '@angular/common';
 
 class AXColorPaletteParentComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteParentComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteParentComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteParentComponent, decorators: [{
             type: Injectable
         }] });
 class AXColorPaletteChildComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteChildComponent }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteChildComponent, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteChildComponent }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteChildComponent, decorators: [{
             type: Injectable
         }] });
 const AXDefaultColorPalette = [
@@ -319,10 +319,10 @@ class AXColorPaletteService {
     constructor() {
         this.colorMode = 'hex';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteService, decorators: [{
             type: Injectable
         }] });
 
@@ -439,8 +439,8 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-input`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXColorPaletteInputComponent, isStandalone: true, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXColorPaletteInputComponent, isStandalone: true, selector: "ax-color-palette-input", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteInputComponent,
@@ -449,7 +449,7 @@ class AXColorPaletteInputComponent extends MXBaseComponent {
             { provide: AXComponent, useExisting: AXColorPaletteInputComponent },
         ], usesInheritance: true, ngImport: i0, template: "<div class=\"palette-inputs ax-sm\">\n  <div class=\"select-box-container\">\n    <ax-select-box\n      [dataSource]=\"['hex', 'rgba']\"\n      [(ngModel)]=\"_colorMode\"\n      (ngModelChange)=\"_handleChangeInputMode()\"\n      [disabled]=\"_parent.disabled\"\n    >\n    </ax-select-box>\n  </div>\n  @switch (_colorMode) {\n    @case ('hex') {\n      <div>\n        <ax-text-box\n          [ngModel]=\"_hex\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [state]=\"isValid ? 'clear' : 'error'\"\n          (onValueChanged)=\"_handleHEXAValueChanged($event)\"\n          [mask-options]=\"_hexMaskOptions\"\n        >\n        </ax-text-box>\n      </div>\n    }\n    @case ('rgba') {\n      <div>\n        <ax-number-box\n          name=\"r\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.r\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"g\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.g\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"b\"\n          [minValue]=\"0\"\n          [maxValue]=\"255\"\n          [ngModel]=\"_rgba.b\"\n          [showSpinButtons]=\"false\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n      <div>\n        <ax-number-box\n          name=\"a\"\n          [minValue]=\"0\"\n          [maxValue]=\"1\"\n          [ngModel]=\"_rgba.a\"\n          [decimals]=\"2\"\n          [step]=\"0.1\"\n          [disabled]=\"_parent.disabled\"\n          [readonly]=\"_parent.readonly\"\n          [showSpinButtons]=\"false\"\n          (onValueChanged)=\"_handleRGBAValueChanged($event)\"\n        >\n        </ax-number-box>\n      </div>\n    }\n  }\n</div>\n", styles: [".ax-bold{font-weight:700}\n"], dependencies: [{ kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXNumberBoxComponent, selector: "ax-number-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "minValue", "maxValue", "showSpinButtons", "thousandsSeparator", "decimals", "changeOnScroll", "step"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "thousandsSeparatorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -673,8 +673,8 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-picker`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: AXColorPalettePickerComponent, isStandalone: true, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.16", type: AXColorPalettePickerComponent, isStandalone: true, selector: "ax-color-palette-picker", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePickerComponent,
@@ -683,7 +683,7 @@ class AXColorPalettePickerComponent extends MXBaseComponent {
             { provide: AXComponent, useExisting: AXColorPalettePickerComponent },
         ], viewQueries: [{ propertyName: "circle", first: true, predicate: ["circle"], descendants: true, isSignal: true }, { propertyName: "sample", first: true, predicate: ["sample"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-color-box-overlay-trans\">\n  <div class=\"ax-color-box-overlay\" [style.background-color]=\"_bgColor\" (pointerdown)=\"handleDown($event)\">\n    <div class=\"ax-color-box-overlay-g1\"></div>\n    <div class=\"ax-color-box-overlay-g2\"></div>\n    <div #circle class=\"ax-color-box-pointer\"></div>\n  </div>\n</div>\n<div class=\"ax-pickers-container\">\n  <div class=\"ax-slider-container\">\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"99\"\n      [mode]=\"'single'\"\n      [ngModel]=\"_gradient\"\n      class=\"ax-color-box-gradient\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      (ngModelChange)=\"_handleGradientChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"colorBoxGradientBG()\"\n    >\n    </ax-range-slider>\n    <ax-range-slider\n      [min]=\"0\"\n      [max]=\"1\"\n      [step]=\"0.01\"\n      [ngModel]=\"_rgba.a\"\n      [disabled]=\"_parent.disabled\"\n      [readonly]=\"_parent.readonly\"\n      class=\"ax-color-box-transparent\"\n      (ngModelChange)=\"_handleAlphaChanged($event)\"\n      [style.--ax-comp-range-slider-color]=\"\n        colorBoxTransparentColor.r +\n        ',' +\n        colorBoxTransparentColor.g +\n        ',' +\n        colorBoxTransparentColor.b +\n        ',' +\n        colorBoxTransparentColor.a\n      \"\n      [style.--ax-comp-color-palette-transparent-color]=\"\n        'rgba(' + colorBoxTransparentColor.r + ',' + colorBoxTransparentColor.g + ',' + colorBoxTransparentColor.b + ')'\n      \"\n    >\n    </ax-range-slider>\n  </div>\n  <div class=\"ax-color-sample\" #sample></div>\n</div>\n", dependencies: [{ kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPalettePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -742,8 +742,8 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
     get __hostClass() {
         return `ax-color-palette-preview`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: AXColorPalettePreviewComponent, isStandalone: true, selector: "ax-color-palette-preview", host: { properties: { "class": "this.__hostClass" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPalettePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AXColorPalettePreviewComponent, isStandalone: true, selector: "ax-color-palette-preview", host: { properties: { "class": "this.__hostClass" } }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPalettePreviewComponent,
@@ -752,7 +752,7 @@ class AXColorPalettePreviewComponent extends MXBaseComponent {
             { provide: AXComponent, useExisting: AXColorPalettePreviewComponent },
         ], usesInheritance: true, ngImport: i0, template: ` <div class="palette-preview-overlay" [class.ax-state-disabled]="_parent.disabled"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPalettePreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-preview',
@@ -839,8 +839,8 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
             code: color.code.toLowerCase(),
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXColorPaletteSwatchesComponent, isStandalone: true, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteSwatchesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXColorPaletteSwatchesComponent, isStandalone: true, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: { colors: "colors" }, providers: [
             {
                 provide: AXColorPaletteChildComponent,
                 useExisting: AXColorPaletteSwatchesComponent,
@@ -858,7 +858,7 @@ class AXColorPaletteSwatchesComponent extends MXBaseComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteSwatchesComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ax-color-palette-swatches, ax-color-palette-favorite',
@@ -899,8 +899,8 @@ class AXColorPaletteComponent extends MXValueComponent {
     get __hostDisabled() {
         return this.disabled;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXColorPaletteComponent, isStandalone: true, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXColorPaletteComponent, isStandalone: true, selector: "ax-color-palette", inputs: { disabled: "disabled", tabIndex: "tabIndex", readonly: "readonly", value: "value", state: "state", name: "name" }, outputs: { onBlur: "onBlur", onFocus: "onFocus", valueChange: "valueChange", stateChange: "stateChange", onValueChanged: "onValueChanged", readonlyChange: "readonlyChange", disabledChange: "disabledChange" }, host: { properties: { "class.ax-state-disabled": "this.__hostDisabled" } }, providers: [
             { provide: AXValuableComponent, useExisting: AXColorPaletteComponent },
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -915,7 +915,7 @@ class AXColorPaletteComponent extends MXValueComponent {
             AXColorPaletteService,
         ], queries: [{ propertyName: "_children", predicate: AXColorPaletteChildComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-header\"></ng-content>\n\n@if (_children?.length) {\n  <ng-container [ngTemplateOutlet]=\"custom\"></ng-container>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n}\n<ng-template #custom>\n  <ng-content select=\"ax-color-palette-preview\"></ng-content>\n  <ng-content select=\"ax-color-palette-picker\"></ng-content>\n  <ng-content select=\"ax-color-palette-swatches\"></ng-content>\n  <ng-content select=\"ax-color-palette-favorite\"></ng-content>\n  <ng-content select=\"ax-color-palette-input\"></ng-content>\n</ng-template>\n<ng-template #default>\n  <ax-color-palette-preview></ax-color-palette-preview>\n  <ax-color-palette-picker></ax-color-palette-picker>\n  <ax-color-palette-swatches></ax-color-palette-swatches>\n  <ax-color-palette-input></ax-color-palette-input>\n</ng-template>\n<ng-content select=\"ax-footer\"></ng-content>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-content:\"\";--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer components{ax-color-palette{--trans-bg:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=);gap:calc(var(--spacing,.25rem)*2);width:100%;padding:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}@media (min-width:48rem){ax-color-palette{width:calc(var(--spacing,.25rem)*80)}}ax-color-palette.ax-state-disabled,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div:hover,:is(ax-color-palette.ax-state-disabled ax-color-palette-swatches,ax-color-palette.ax-state-disabled ax-color-palette-favorite) div.ax-state-selected{cursor:not-allowed;opacity:.5}ax-color-palette ax-header,ax-color-palette ax-footer{display:flex}ax-color-palette ax-color-palette-preview{height:calc(var(--spacing,.25rem)*24);gap:calc(var(--spacing,.25rem)*2);background-color:var(--trans-bg)left center;width:100%;position:relative}ax-color-palette ax-color-palette-preview .palette-preview-overlay{border-bottom-style:var(--tw-border-style);text-transform:uppercase;width:100%;height:100%;border-bottom-width:1px;border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:absolute;inset-inline-start:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-favorite{display:block}ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite{max-height:calc(var(--spacing,.25rem)*36);gap:calc(var(--spacing,.25rem)*2);padding:calc(var(--spacing,.25rem)*2);scrollbar-width:thin;grid-template-columns:repeat(11,minmax(0,1fr));display:grid;overflow:hidden auto}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div{cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-lightest,rgba(var(--ax-sys-color-border-lightest-surface)));border-radius:.25rem;justify-content:center;align-items:center;display:flex;position:relative}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{--tw-content:\"\";content:var(--tw-content)}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:before{float:left;padding-top:100%}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:after{clear:both;display:block}:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div:hover,:is(ax-color-palette ax-color-palette-swatches,ax-color-palette ax-color-palette-favorite) div.ax-state-selected{border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-border-lighter,rgba(var(--ax-sys-color-border-lighter-surface)))}ax-color-palette ax-color-palette-input{gap:calc(var(--spacing,.25rem)*2);display:flex}ax-color-palette ax-color-palette-input .palette-inputs{gap:calc(var(--spacing,.25rem)*2);flex:1;display:flex}ax-color-palette ax-color-palette-input .palette-inputs .select-box-container{width:fit-content}ax-color-palette ax-color-palette-input .palette-inputs div{text-align:center;width:100%}ax-color-palette ax-color-palette-input .palette-inputs .ax-editor-container .ax-input{padding:calc(var(--spacing,.25rem)*0);text-align:center}ax-color-palette ax-color-palette-picker{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;display:flex}ax-color-palette ax-color-palette-picker .ax-color-box-overlay-trans{touch-action:none;background-image:var(--trans-bg);border-radius:.25rem;overflow:hidden}ax-color-palette ax-color-palette-picker .ax-color-box-overlay{height:calc(var(--spacing,.25rem)*32);width:100%;display:flex;position:relative}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{z-index:10;height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:#000;background-color:#0000;border-radius:3.40282e38px;position:relative}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-pointer{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1,ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{inset-inline-start:calc(var(--spacing,.25rem)*0);inset-inline-end:calc(var(--spacing,.25rem)*0);top:calc(var(--spacing,.25rem)*0);bottom:calc(var(--spacing,.25rem)*0);width:100%;height:100%;position:absolute}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g1{z-index:0;background-image:linear-gradient(90deg,#fff,#fff0)}ax-color-palette ax-color-palette-picker .ax-color-box-overlay .ax-color-box-overlay-g2{z-index:10;background-image:linear-gradient(#0000,#000)}ax-color-palette ax-color-palette-picker .ax-pickers-container{gap:calc(var(--spacing,.25rem)*4);display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container{gap:calc(var(--spacing,.25rem)*2);flex-direction:column;width:100%;display:flex}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider{padding:calc(var(--spacing,.25rem)*0)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);border-width:4px;border-color:var(--color-white,#fff);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-shadow-color:#000;background-color:#0000}@supports (color:color-mix(in lab,red,red)){ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider .ax-range-slider-handler{--tw-shadow-color:color-mix(in oklab,var(--color-black,#000)var(--tw-shadow-alpha),transparent)}}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-gradient .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-bar{height:calc(var(--spacing,.25rem)*4);background-image:linear-gradient(to right,#fff0,var(--ax-comp-color-palette-transparent-color)),var(--trans-bg)}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-slider-container ax-range-slider.ax-color-box-transparent .ax-range-slider-highlight{background-color:#0000!important}ax-color-palette ax-color-palette-picker .ax-pickers-container .ax-color-sample{width:calc(var(--spacing,.25rem)*14);border-radius:.25rem}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-content{syntax:\"*\";inherits:false;initial-value:\"\"}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXColorPalettePreviewComponent, selector: "ax-color-palette-preview" }, { kind: "component", type: AXColorPalettePickerComponent, selector: "ax-color-palette-picker" }, { kind: "component", type: AXColorPaletteSwatchesComponent, selector: "ax-color-palette-swatches, ax-color-palette-favorite", inputs: ["colors"] }, { kind: "component", type: AXColorPaletteInputComponent, selector: "ax-color-palette-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-color-palette', inputs: ['disabled', 'tabIndex', 'readonly', 'value', 'state', 'name'], outputs: ['onBlur', 'onFocus', 'valueChange', 'stateChange', 'onValueChanged', 'readonlyChange', 'disabledChange'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: AXValuableComponent, useExisting: AXColorPaletteComponent },
@@ -946,8 +946,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class AXColorPaletteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
             AXColorPalettePreviewComponent,
             AXColorPaletteSwatchesComponent,
             AXColorPaletteInputComponent,
@@ -956,11 +956,11 @@ class AXColorPaletteModule {
             AXColorPaletteSwatchesComponent,
             AXColorPaletteInputComponent,
             AXColorPalettePickerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteModule, imports: [AXColorPaletteComponent,
             AXColorPaletteInputComponent,
             AXColorPalettePickerComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXColorPaletteModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXColorPaletteModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/fesm2022/acorex-components-command.mjs

@@ -97,8 +97,8 @@ class AXCommandComponent extends classes((MXInputBaseValueComponent), MXLookComp
     activeHandler(l, i) {
         l?.navigateTo(i);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXCommandComponent, isStandalone: true, selector: "ax-command", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onEscape: "onEscape", onSearchBoxFocus: "onSearchBoxFocus", onSearchBoxBlur: "onSearchBoxBlur" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCommandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXCommandComponent, isStandalone: true, selector: "ax-command", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onEscape: "onEscape", onSearchBoxFocus: "onSearchBoxFocus", onSearchBoxBlur: "onSearchBoxBlur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AXCommandComponent),
@@ -108,7 +108,7 @@ class AXCommandComponent extends classes((MXInputBaseValueComponent), MXLookComp
             { provide: AXValuableComponent, useExisting: AXCommandComponent },
         ], viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["f"], descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: ["l"], descendants: true, read: AXListNavigationDirective, isSignal: true }, { propertyName: "listNav", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-search-box-container\">\n  <ax-search-box\n    #f\n    [delayTime]=\"20\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [(ngModel)]=\"searchValue\"\n    (onFocus)=\"focusHandler($event)\"\n    (onBlur)=\"blurHandler($event)\"\n    (onKeyDown)=\"searchEscapeHandler($event)\"\n    [axAutoFocus]=\"true\"\n    look=\"fill\"\n  >\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n</div>\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n  @if (value?.pinned && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n\n      @for (item of value.pinned.items; track item.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n\n  @if (displayItems() && searchValue()) {\n    <div class=\"ax-command-item-wrapper\">\n      @for (item of displayItems(); track $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      } @empty {\n        <div class=\"ax-command-not-found\">\n          <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n    <div\n      (mouseenter)=\"activeHandler(listNavigation, a)\"\n      class=\"ax-command-item-container\"\n      [style.padding-inline-start.rem]=\"level * 0.625\"\n      [class.ax-command-item-container-active]=\"a.isActive() && !customTemplate()\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      @if (customTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"customTemplate()\"\n          [ngTemplateOutletContext]=\"{\n            $implicit: item,\n            level: level,\n            isActive: a.isActive(),\n          }\"\n        ></ng-container>\n      } @else {\n        <div class=\"ax-command-item\">\n          @if (item.icon) {\n            <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n          }\n          <span class=\"ax-command-item-text\">{{ item.text }}</span>\n        </div>\n      }\n    </div>\n\n    @if (item.children?.length) {\n      @for (child of item.children; track child.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    }\n  </ng-template>\n</div>\n\n<div class=\"ax-command-footer\">\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&uarr;', '&darr;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&#8617;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to select</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to close</ax-text>\n  </div>\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid;--tw-font-weight:initial;--tw-border-style:solid}}}@layer components{ax-command{border-radius:var(--radius-lg,.5rem);outline-style:var(--tw-outline-style);outline-width:4px;outline-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));display:block;overflow:hidden}ax-command .ax-search-box-container{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));padding:calc(var(--spacing,.25rem)*3)}ax-command .ax-search-box-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{max-height:calc(var(--spacing,.25rem)*80);background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)));overflow:auto}ax-command .ax-command-container:where(.dark,.dark *){background-color:var(--color-darker,rgba(var(--ax-sys-color-darker-surface)))}ax-command .ax-command-container{scrollbar-width:none;-ms-overflow-style:none}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{padding:calc(var(--spacing,.25rem)*3);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:calc(var(--spacing,.25rem)*3)}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem)*2);border-width:1px;border-color:#0000}ax-command .ax-command-container .ax-command-item-container .ax-command-item{align-items:center;gap:calc(var(--spacing,.25rem)*2);display:flex}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500);color:var(--color-on-lightest,rgba(var(--ax-sys-color-on-lightest-surface)))}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in srgb,rgba(var(--ax-sys-color-on-lighter-surface))50%,transparent)}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:color-mix(in oklab,var(--color-on-lighter,rgba(var(--ax-sys-color-on-lighter-surface)))50%,transparent)}}ax-command .ax-command-container .ax-command-not-found{padding:calc(var(--spacing,.25rem)*4);justify-content:center;display:flex}ax-command .ax-command-container .ax-command-item-container-active{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border-light,rgba(var(--ax-sys-color-border-light-surface)));background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}ax-command .ax-kbd{justify-content:center;align-items:center;height:100%;display:flex}ax-command .ax-command-footer{align-items:center;gap:calc(var(--spacing,.25rem)*6);border-bottom-right-radius:var(--radius-lg,.5rem);border-bottom-left-radius:var(--radius-lg,.5rem);background-color:var(--color-light,rgba(var(--ax-sys-color-light-surface)));padding:calc(var(--spacing,.25rem)*3);color:color-mix(in srgb,rgba(var(--ax-sys-color-on-light-surface))50%,transparent);display:flex}@supports (color:color-mix(in lab,red,red)){ax-command .ax-command-footer{color:color-mix(in oklab,var(--color-on-light,rgba(var(--ax-sys-color-on-light-surface)))50%,transparent)}}ax-command .ax-command-footer .ax-kbd-footer{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem)*3);display:flex}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)))}ax-command .ax-command-footer .ax-kbd-text{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i5.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i5.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommandComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCommandComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-command', encapsulation: ViewEncapsulation.None, imports: [
                         AXSearchBoxModule,
@@ -133,11 +133,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 const COMPONENT = [AXCommandComponent];
 const MODULES = [];
 class AXCommandModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXCommandModule, imports: [AXCommandComponent], exports: [AXCommandComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommandModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCommandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: AXCommandModule, imports: [AXCommandComponent], exports: [AXCommandComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCommandModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXCommandModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXCommandModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],