@acorex/components 21.0.1-next.76 → 21.0.1-next.77

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

@@ -93,7 +93,7 @@ class AXColorBoxComponent extends classes(MXDropdownBoxBaseComponent, (MXInputBa
                 useExisting: forwardRef(() => AXColorBoxComponent),
                 multi: true,
             },
-        ], 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-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.2.4 | 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 }); }
+        ], 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-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.3.0 | 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: "21.1.3", ngImport: i0, type: AXColorBoxComponent, decorators: [{
             type: Component,
@@ -125,7 +125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXColorPalettePickerComponent,
                         AXColorPaletteSwatchesComponent,
                         AXColorPaletteInputComponent,
-                    ], 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-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.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], 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-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.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { showBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBadge", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], picker: [{
                 type: ViewChild,
                 args: [AXColorPaletteComponent]

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

@@ -908,7 +908,7 @@ class AXColorPaletteComponent extends MXValueComponent {
             },
             { provide: AXComponent, useExisting: AXColorPaletteComponent },
             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.2.4 | 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 }); }
+        ], 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.3.0 | 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: "21.1.3", ngImport: i0, type: AXColorPaletteComponent, decorators: [{
             type: Component,
@@ -931,7 +931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXColorPalettePickerComponent,
                         AXColorPaletteSwatchesComponent,
                         AXColorPaletteInputComponent,
-                    ], 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.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], 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.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { _children: [{
                 type: ContentChildren,
                 args: [AXColorPaletteChildComponent]

package/fesm2022/acorex-components-command.mjs

@@ -117,7 +117,7 @@ class AXCommandComponent extends classes((MXInputBaseValueComponent), MXLookComp
             },
             { provide: AXComponent, useExisting: AXCommandComponent },
             { 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: "@if (searchBar()) {\n  <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    >\n      <ax-clear-button></ax-clear-button>\n    </ax-search-box>\n  </div>\n}\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      @if (value.pinned.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n      }\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 (value?.list && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      @if (value.list.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n      } @else if (divider()) {\n        <div class=\"ax-command-divider\"></div>\n      }\n\n      @for (item of value.list.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 item.id) {\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-remove-default-select-style\"\n      [class.ax-command-item-container]=\"!customTemplate()\"\n      [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\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@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n  <div class=\"ax-command-footer\">\n    @if (footerButtons().navigation) {\n      <div class=\"ax-kbd-footer\">\n        <ax-kbd class=\"ax-kbd\">\n          <ax-kbd-item [keys]=\"['&uarr;']\"></ax-kbd-item>\n          <ax-kbd-item [keys]=\"['&darr;']\"></ax-kbd-item>\n        </ax-kbd>\n        <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n      </div>\n    }\n\n    @if (footerButtons().select) {\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\n    @if (footerButtons().close) {\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    }\n  </div>\n}\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:1px;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);display:block}@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-pinned-container .ax-command-divider{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));background-color:rgba(var(--ax-sys-color-surface));width:100%;height:1px}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-remove-default-select-style{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}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)))}ax-command .ax-kbd{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);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.2.4 | 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 }); }
+        ], 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: "@if (searchBar()) {\n  <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    >\n      <ax-clear-button></ax-clear-button>\n    </ax-search-box>\n  </div>\n}\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      @if (value.pinned.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n      }\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 (value?.list && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      @if (value.list.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n      } @else if (divider()) {\n        <div class=\"ax-command-divider\"></div>\n      }\n\n      @for (item of value.list.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 item.id) {\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-remove-default-select-style\"\n      [class.ax-command-item-container]=\"!customTemplate()\"\n      [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\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@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n  <div class=\"ax-command-footer\">\n    @if (footerButtons().navigation) {\n      <div class=\"ax-kbd-footer\">\n        <ax-kbd class=\"ax-kbd\">\n          <ax-kbd-item [keys]=\"['&uarr;']\"></ax-kbd-item>\n          <ax-kbd-item [keys]=\"['&darr;']\"></ax-kbd-item>\n        </ax-kbd>\n        <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n      </div>\n    }\n\n    @if (footerButtons().select) {\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\n    @if (footerButtons().close) {\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    }\n  </div>\n}\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:1px;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);display:block}@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-pinned-container .ax-command-divider{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));background-color:rgba(var(--ax-sys-color-surface));width:100%;height:1px}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-remove-default-select-style{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}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)))}ax-command .ax-kbd{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);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.3.0 | 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: "21.1.3", ngImport: i0, type: AXCommandComponent, decorators: [{
             type: Component,
@@ -138,7 +138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         },
                         { provide: AXComponent, useExisting: AXCommandComponent },
                         { provide: AXValuableComponent, useExisting: AXCommandComponent },
-                    ], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "@if (searchBar()) {\n  <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    >\n      <ax-clear-button></ax-clear-button>\n    </ax-search-box>\n  </div>\n}\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      @if (value.pinned.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n      }\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 (value?.list && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      @if (value.list.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n      } @else if (divider()) {\n        <div class=\"ax-command-divider\"></div>\n      }\n\n      @for (item of value.list.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 item.id) {\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-remove-default-select-style\"\n      [class.ax-command-item-container]=\"!customTemplate()\"\n      [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\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@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n  <div class=\"ax-command-footer\">\n    @if (footerButtons().navigation) {\n      <div class=\"ax-kbd-footer\">\n        <ax-kbd class=\"ax-kbd\">\n          <ax-kbd-item [keys]=\"['&uarr;']\"></ax-kbd-item>\n          <ax-kbd-item [keys]=\"['&darr;']\"></ax-kbd-item>\n        </ax-kbd>\n        <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n      </div>\n    }\n\n    @if (footerButtons().select) {\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\n    @if (footerButtons().close) {\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    }\n  </div>\n}\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:1px;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);display:block}@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-pinned-container .ax-command-divider{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));background-color:rgba(var(--ax-sys-color-surface));width:100%;height:1px}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-remove-default-select-style{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}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)))}ax-command .ax-kbd{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);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.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "@if (searchBar()) {\n  <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    >\n      <ax-clear-button></ax-clear-button>\n    </ax-search-box>\n  </div>\n}\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      @if (value.pinned.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n      }\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 (value?.list && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      @if (value.list.title) {\n        <ax-text class=\"ax-command-item-pinned-text\">{{ value.list.title }}</ax-text>\n      } @else if (divider()) {\n        <div class=\"ax-command-divider\"></div>\n      }\n\n      @for (item of value.list.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 item.id) {\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-remove-default-select-style\"\n      [class.ax-command-item-container]=\"!customTemplate()\"\n      [style.padding-inline-start.rem]=\"!customTemplate() ? level * 0.625 : 0\"\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@if (footerButtons().navigation || footerButtons().select || footerButtons().close) {\n  <div class=\"ax-command-footer\">\n    @if (footerButtons().navigation) {\n      <div class=\"ax-kbd-footer\">\n        <ax-kbd class=\"ax-kbd\">\n          <ax-kbd-item [keys]=\"['&uarr;']\"></ax-kbd-item>\n          <ax-kbd-item [keys]=\"['&darr;']\"></ax-kbd-item>\n        </ax-kbd>\n        <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n      </div>\n    }\n\n    @if (footerButtons().select) {\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\n    @if (footerButtons().close) {\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    }\n  </div>\n}\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:1px;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);display:block}@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-pinned-container .ax-command-divider{background-color:var(--color-surface,rgba(var(--ax-sys-color-surface)));background-color:rgba(var(--ax-sys-color-surface));width:100%;height:1px}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-remove-default-select-style{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:#0000}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)))}ax-command .ax-kbd{justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 2);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.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { searchBox: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onEscape: [{ type: i0.Output, args: ["onEscape"] }], onSearchBoxFocus: [{ type: i0.Output, args: ["onSearchBoxFocus"] }], onSearchBoxBlur: [{ type: i0.Output, args: ["onSearchBoxBlur"] }], listNavigation: [{ type: i0.ViewChild, args: ['l', { ...{ read: AXListNavigationDirective }, isSignal: true }] }], listNav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], searchBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBar", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], searchKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchKey", required: false }] }], footerButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerButtons", required: false }] }] } });
 
 const COMPONENT = [AXCommandComponent];

package/fesm2022/acorex-components-comment.mjs

@@ -67,11 +67,11 @@ class AXCommentItemComponent {
         this.repliesExpanded.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null }, repliesExpanded: { classPropertyName: "repliesExpanded", publicName: "repliesExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { repliesExpanded: "repliesExpandedChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\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-duration:initial;--tw-ease:initial;--tw-font-weight:initial}}}@layer components{ax-comment-item{padding:calc(var(--spacing,.25rem) * 1);transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:1s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:1s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:.25rem;display:block}ax-comment-item:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}ax-comment-item.ax-state-highlight{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-comment-item .ax-comment-header{justify-content:space-between;align-items:center;display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-comment-item .ax-comment-body{padding-top:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));margin-inline-start:calc(var(--spacing,.25rem) * 12)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem) * 10);margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);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:rgba(var(--ax-sys-color-primary-surface));-webkit-user-select:none;user-select:none;display:inline-flex}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration-line:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;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:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration-line:underline}}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXCommentItemComponent, isStandalone: true, selector: "ax-comment-item", inputs: { replyCount: { classPropertyName: "replyCount", publicName: "replyCount", isSignal: true, isRequired: false, transformFunction: null }, repliesExpanded: { classPropertyName: "repliesExpanded", publicName: "repliesExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { repliesExpanded: "repliesExpandedChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], queries: [{ propertyName: "avatar", first: true, predicate: AXAvatarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\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-duration:initial;--tw-ease:initial;--tw-font-weight:initial}}}@layer components{ax-comment-item{padding:calc(var(--spacing,.25rem) * 1);transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:1s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:1s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:.25rem;display:block}ax-comment-item:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}ax-comment-item.ax-state-highlight{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-comment-item .ax-comment-header{justify-content:space-between;align-items:center;display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-comment-item .ax-comment-body{padding-top:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));margin-inline-start:calc(var(--spacing,.25rem) * 12)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem) * 10);margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);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:rgba(var(--ax-sys-color-primary-surface));-webkit-user-select:none;user-select:none;display:inline-flex}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration-line:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;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:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration-line:underline}}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\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-duration:initial;--tw-ease:initial;--tw-font-weight:initial}}}@layer components{ax-comment-item{padding:calc(var(--spacing,.25rem) * 1);transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:1s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:1s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:.25rem;display:block}ax-comment-item:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}ax-comment-item.ax-state-highlight{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-comment-item .ax-comment-header{justify-content:space-between;align-items:center;display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-comment-item .ax-comment-body{padding-top:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));margin-inline-start:calc(var(--spacing,.25rem) * 12)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem) * 10);margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);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:rgba(var(--ax-sys-color-primary-surface));-webkit-user-select:none;user-select:none;display:inline-flex}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration-line:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;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:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration-line:underline}}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslatorPipe, AsyncPipe], providers: [{ provide: AXComponent, useExisting: AXCommentItemComponent }], template: "<div class=\"ax-comment-header\">\n  <div class=\"ax-comment-header-start\">\n    <ng-content select=\"ax-avatar\" />\n    <div class=\"ax-comment-header-content\">\n      <ng-content select=\"ax-title\" />\n      <ng-content select=\"ax-comment-date\" />\n    </div>\n  </div>\n  <ng-content select=\"ax-comment-menu-options\" />\n</div>\n\n<div class=\"ax-comment-body\">\n  <ng-content select=\"ax-content\" />\n  <div class=\"ax-comment-actions\">\n    <ng-content select=\"ax-comment-like\" />\n    <ng-content select=\"ax-comment-reply-text\" />\n  </div>\n</div>\n\n@if (replyCount()) {\n  <div class=\"ax-comment-replies\">\n    <span class=\"ax-comment-replies-toggle\" (click)=\"toggleReplies()\">\n      {{ (repliesExpanded() ? '@acorex:comment.hide' : '@acorex:comment.view') | translate | async }}\n      {{ replyCount() }}\n      {{ (replyCount() > 1 ? '@acorex:comment.replies' : '@acorex:comment.reply') | translate | async }}\n    </span>\n    @if (repliesExpanded()) {\n      <div class=\"ax-comment-replies-content\">\n        <ng-content select=\"ax-comment-item\" />\n        <ng-content select=\"ax-comment-reply-more\" />\n      </div>\n    }\n  </div>\n}\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-duration:initial;--tw-ease:initial;--tw-font-weight:initial}}}@layer components{ax-comment-item{padding:calc(var(--spacing,.25rem) * 1);transition-property:background;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));--tw-duration:1s;--tw-ease:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));transition-duration:1s;transition-timing-function:var(--ease-in-out,cubic-bezier(.4, 0, .2, 1));border-radius:.25rem;display:block}ax-comment-item:not(:last-child){margin-bottom:calc(var(--spacing,.25rem) * 4)}ax-comment-item.ax-state-highlight{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-comment-item .ax-comment-header{justify-content:space-between;align-items:center;display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header .ax-comment-header-start .ax-comment-header-content{align-items:baseline;gap:calc(var(--spacing,.25rem) * 2);display:flex}ax-comment-item .ax-comment-header ax-title{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}ax-comment-item .ax-comment-body{padding-top:calc(var(--spacing,.25rem) * 1);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));margin-inline-start:calc(var(--spacing,.25rem) * 12)}ax-comment-item .ax-comment-actions{margin-top:calc(var(--spacing,.25rem) * 2);align-items:center;gap:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));display:flex}ax-comment-item .ax-comment-actions ax-comment-like,ax-comment-item .ax-comment-actions ax-comment-reply-text{cursor:pointer;-webkit-user-select:none;user-select:none}ax-comment-item .ax-comment-replies{margin-inline-start:calc(var(--spacing,.25rem) * 10);margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle{cursor:pointer;align-items:center;gap:calc(var(--spacing,.25rem) * 1);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:rgba(var(--ax-sys-color-primary-surface));-webkit-user-select:none;user-select:none;display:inline-flex}ax-comment-item .ax-comment-replies .ax-comment-replies-toggle:hover{text-decoration-line:underline}ax-comment-item .ax-comment-replies .ax-comment-replies-content{margin-top:calc(var(--spacing,.25rem) * 2)}ax-comment-item .ax-comment-replies ax-comment-reply-more{cursor:pointer;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:rgba(var(--ax-sys-color-primary-surface))}ax-comment-item .ax-comment-replies ax-comment-reply-more:hover{text-decoration-line:underline}}@property --tw-duration{syntax:\"*\";inherits:false}@property --tw-ease{syntax:\"*\";inherits:false}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXAvatarComponent), { isSignal: true }] }], replyCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "replyCount", required: false }] }], repliesExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "repliesExpanded", required: false }] }, { type: i0.Output, args: ["repliesExpandedChange"] }] } });
 
 /**
@@ -81,11 +81,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class AXCommentDateComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{ax-comment-date{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXCommentDateComponent, isStandalone: true, selector: "ax-comment-date", providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@layer components{ax-comment-date{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-date', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], styles: ["@layer components{ax-comment-date{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-date', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXCommentDateComponent }], styles: ["@layer components{ax-comment-date{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-on-surface,rgba(var(--ax-sys-color-on-surface)))}}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 /**
@@ -101,11 +101,11 @@ class AXCommentLikeComponent {
         this.like.update((prev) => !prev);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentLikeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { like: { classPropertyName: "like", publicName: "like", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { like: "likeChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], ngImport: i0, template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\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-font-weight:initial}}}@layer components{.ax-comment-like-container{align-items:center;gap:calc(var(--spacing,.25rem) * 1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:flex}.ax-comment-like-container ax-icon{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.ax-comment-like-container:hover:not(.ax-state-liked){color:var(--color-danger-400,rgba(var(--ax-sys-color-danger-400)))}.ax-comment-like-container.ax-state-liked{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-comment-like-container.ax-state-liked ax-icon{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: AXCommentLikeComponent, isStandalone: true, selector: "ax-comment-like", inputs: { like: { classPropertyName: "like", publicName: "like", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { like: "likeChange" }, providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], ngImport: i0, template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\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-font-weight:initial}}}@layer components{.ax-comment-like-container{align-items:center;gap:calc(var(--spacing,.25rem) * 1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:flex}.ax-comment-like-container ax-icon{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.ax-comment-like-container:hover:not(.ax-state-liked){color:var(--color-danger-400,rgba(var(--ax-sys-color-danger-400)))}.ax-comment-like-container.ax-state-liked{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-comment-like-container.ax-state-liked ax-icon{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXCommentLikeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-comment-like', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\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-font-weight:initial}}}@layer components{.ax-comment-like-container{align-items:center;gap:calc(var(--spacing,.25rem) * 1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:flex}.ax-comment-like-container ax-icon{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.ax-comment-like-container:hover:not(.ax-state-liked){color:var(--color-danger-400,rgba(var(--ax-sys-color-danger-400)))}.ax-comment-like-container.ax-state-liked{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-comment-like-container.ax-state-liked ax-icon{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-comment-like', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXDecoratorIconComponent, AXDecoratorGenericComponent], providers: [{ provide: AXComponent, useExisting: AXCommentLikeComponent }], template: "<div class=\"ax-comment-like-container\" [class.ax-state-liked]=\"like()\" (click)=\"toggleLike()\">\n  <ax-icon class=\"ax-icon ax-icon-heart\"></ax-icon>\n  <ax-text><ng-content /></ax-text>\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-font-weight:initial}}}@layer components{.ax-comment-like-container{align-items:center;gap:calc(var(--spacing,.25rem) * 1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));display:flex}.ax-comment-like-container ax-icon{font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.ax-comment-like-container:hover:not(.ax-state-liked){color:var(--color-danger-400,rgba(var(--ax-sys-color-danger-400)))}.ax-comment-like-container.ax-state-liked{color:var(--color-danger,rgba(var(--ax-sys-color-danger-surface)))}.ax-comment-like-container.ax-state-liked ax-icon{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}}@property --tw-font-weight{syntax:\"*\";inherits:false}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { like: [{ type: i0.Input, args: [{ isSignal: true, alias: "like", required: true }] }, { type: i0.Output, args: ["likeChange"] }] } });
 
 /**

package/fesm2022/acorex-components-data-pager.mjs

@@ -996,7 +996,7 @@ class AXDataPagerComponent extends MXValueComponent {
                 multi: true,
             },
             { provide: AXComponent, useExisting: AXDataPagerComponent },
-        ], usesInheritance: true, ngImport: i0, template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\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-leading:initial;--tw-border-style:solid}}}@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);flex-wrap:nowrap;display:flex;overflow-x:auto}ax-data-pager ax-button-group{gap:calc(var(--spacing,.25rem) * 4)!important;border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;display:flex!important}ax-data-pager ax-button-group ax-button-item{border-style:var(--tw-border-style)!important;padding:calc(var(--spacing,.25rem) * 0)!important;border-width:0!important;border-radius:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing,.25rem) * 16)!important;max-width:calc(var(--spacing,.25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing,.25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing,.25rem) * 28);border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2px}ax-data-pager ax-data-pager-numeric-selector{flex-wrap:nowrap;display:flex}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{flex-wrap:nowrap;display:flex}ax-data-pager ax-data-pager-info ax-text{white-space:nowrap;color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));margin-inline-end:.2px}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: 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: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\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-leading:initial;--tw-border-style:solid}}}@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);flex-wrap:nowrap;display:flex;overflow-x:auto}ax-data-pager ax-button-group{gap:calc(var(--spacing,.25rem) * 4)!important;border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;display:flex!important}ax-data-pager ax-button-group ax-button-item{border-style:var(--tw-border-style)!important;padding:calc(var(--spacing,.25rem) * 0)!important;border-width:0!important;border-radius:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing,.25rem) * 16)!important;max-width:calc(var(--spacing,.25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing,.25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing,.25rem) * 28);border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2px}ax-data-pager ax-data-pager-numeric-selector{flex-wrap:nowrap;display:flex}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{flex-wrap:nowrap;display:flex}ax-data-pager ax-data-pager-info ax-text{white-space:nowrap;color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));margin-inline-end:.2px}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: 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: "component", type: AXDataPagerNumericSelectorComponent, selector: "ax-data-pager-numeric-selector" }, { kind: "component", type: AXDataPagerPageSizesComponent, selector: "ax-data-pager-page-sizes", inputs: ["sizes"] }, { kind: "component", type: AXDataPagerInfoComponent, selector: "ax-data-pager-info", inputs: ["text"] }, { kind: "component", type: AXDataPagerPrevButtonsComponent, selector: "ax-data-pager-prev-buttons" }, { kind: "component", type: AXDataPagerInputSelectorComponent, selector: "ax-data-pager-input-selector" }, { kind: "component", type: AXDataPagerNextButtonsComponent, selector: "ax-data-pager-next-buttons" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDataPagerComponent, decorators: [{
             type: Component,
@@ -1016,7 +1016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXDataPagerPrevButtonsComponent,
                         AXDataPagerInputSelectorComponent,
                         AXDataPagerNextButtonsComponent,
-                    ], template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\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-leading:initial;--tw-border-style:solid}}}@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);flex-wrap:nowrap;display:flex;overflow-x:auto}ax-data-pager ax-button-group{gap:calc(var(--spacing,.25rem) * 4)!important;border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;display:flex!important}ax-data-pager ax-button-group ax-button-item{border-style:var(--tw-border-style)!important;padding:calc(var(--spacing,.25rem) * 0)!important;border-width:0!important;border-radius:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing,.25rem) * 16)!important;max-width:calc(var(--spacing,.25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing,.25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing,.25rem) * 28);border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2px}ax-data-pager ax-data-pager-numeric-selector{flex-wrap:nowrap;display:flex}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{flex-wrap:nowrap;display:flex}ax-data-pager ax-data-pager-info ax-text{white-space:nowrap;color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));margin-inline-end:.2px}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@switch (displayMode) {\n  @case ('full') {\n    <ax-prefix class=\"ax-full-prefix\">\n      <ax-data-pager-numeric-selector> </ax-data-pager-numeric-selector>\n      <ax-data-pager-page-sizes> </ax-data-pager-page-sizes>\n    </ax-prefix>\n    <ax-suffix class=\"ax-full-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @case ('compact') {\n    <ax-prefix class=\"ax-compact-prefix\">\n      <ax-data-pager-prev-buttons> </ax-data-pager-prev-buttons>\n      <ax-data-pager-input-selector> </ax-data-pager-input-selector>\n      <ax-data-pager-next-buttons> </ax-data-pager-next-buttons>\n    </ax-prefix>\n    <ax-suffix class=\"ax-compact-suffix\">\n      <ax-data-pager-info> </ax-data-pager-info>\n    </ax-suffix>\n  }\n  @default {\n    <ng-content select=\"ax-prefix\"></ng-content>\n    <ng-content select=\"ax-suffix\"></ng-content>\n  }\n}\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-leading:initial;--tw-border-style:solid}}}@layer components{html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-first-page,html[dir=rtl] ax-data-pager ax-data-pager-numeric-selector .ax-icon-last-page{rotate:180deg}ax-data-pager{justify-content:space-between;align-items:center;gap:calc(var(--spacing,.25rem) * 2);width:100%;padding-inline:calc(var(--spacing,.25rem) * 0);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5);flex-wrap:nowrap;display:flex;overflow-x:auto}ax-data-pager ax-button-group{gap:calc(var(--spacing,.25rem) * 4)!important;border-style:var(--tw-border-style)!important;border-width:0!important;border-radius:0!important;display:flex!important}ax-data-pager ax-button-group ax-button-item{border-style:var(--tw-border-style)!important;padding:calc(var(--spacing,.25rem) * 0)!important;border-width:0!important;border-radius:0!important}ax-data-pager ax-button-group ax-button-item.ax-state-selected{border-style:var(--tw-border-style)!important;border-width:1px!important}ax-data-pager ax-data-pager-input-selector .ax-input{width:calc(var(--spacing,.25rem) * 16)!important;max-width:calc(var(--spacing,.25rem) * 40)!important;text-align:center!important}ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector{margin-inline-end:calc(var(--spacing,.25rem) * 2)}:is(ax-data-pager ax-data-pager-next-buttons,ax-data-pager ax-data-pager-prev-buttons,ax-data-pager ax-data-pager-numeric-selector) ax-skeleton{width:calc(var(--spacing,.25rem) * 28);border-radius:var(--radius-default,var(--ax-sys-border-radius))}ax-data-pager ax-data-pager-next-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-prev-buttons .ax-data-pager-num-button,ax-data-pager ax-data-pager-numeric-selector .ax-data-pager-num-button{margin-inline:.2px}ax-data-pager ax-data-pager-numeric-selector{flex-wrap:nowrap;display:flex}ax-data-pager .ax-full-prefix,ax-data-pager .ax-full-suffix,ax-data-pager .ax-compact-prefix{display:flex}ax-data-pager .ax-compact-prefix ax-data-pager-next-buttons,ax-data-pager .ax-compact-prefix ax-data-pager-prev-buttons{flex-wrap:nowrap;display:flex}ax-data-pager ax-data-pager-info ax-text{white-space:nowrap;color:var(--color-lightest,rgba(var(--ax-sys-color-lightest-surface)));margin-inline-end:.2px}}@property --tw-leading{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { isLoading: [{
                 type: Input
             }], size: [{