@acorex/components 21.1.0-next.2 → 22.0.0-next.0

package/fesm2022/acorex-components-kbd.mjs

@@ -1,15 +1,20 @@
 import { NXComponent, AXComponent } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { input, signal, model, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, effect } from '@angular/core';
+import { input, signal, model, computed, ViewEncapsulation, Component, contentChildren, effect } from '@angular/core';
 
 class AXKBDItemComponent extends NXComponent {
     constructor() {
         super(...arguments);
-        this.keys = input(...(ngDevMode ? [undefined, { debugName: "keys" }] : /* istanbul ignore next */ []));
-        this.modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc', 'del', 'delete', 'win'], ...(ngDevMode ? [{ debugName: "modifierKeys" }] : /* istanbul ignore next */ []));
-        this.join = input('joined', ...(ngDevMode ? [{ debugName: "join" }] : /* istanbul ignore next */ []));
-        this.look = model('solid', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
-        this.lookClass = computed(() => `ax-${this.look()} ax-default`, ...(ngDevMode ? [{ debugName: "lookClass" }] : /* istanbul ignore next */ []));
+        this.keys = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "keys" }] : /* istanbul ignore next */ []));
+        this.modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc', 'del', 'delete', 'win'], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modifierKeys" }] : /* istanbul ignore next */ []));
+        this.join = input('joined', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "join" }] : /* istanbul ignore next */ []));
+        this.look = model('solid', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        this.lookClass = computed(() => `ax-${this.look()} ax-default`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lookClass" }] : /* istanbul ignore next */ []));
     }
     /**
      * Capitalizes the first letter of the provided text.
@@ -20,34 +25,36 @@ class AXKBDItemComponent extends NXComponent {
     capitalizeFirstLetter(text) {
         return text.charAt(0).toUpperCase() + text.slice(1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXKBDItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXKBDItemComponent, isStandalone: true, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, join: { classPropertyName: "join", publicName: "join", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange" }, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], usesInheritance: true, ngImport: i0, template: "@let localKeys = keys();\n\n@if (typeof localKeys === 'string') {\n  <kbd [class]=\"lookClass()\">\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\n      <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(localKeys) }}</span>\n    } @else {\n      <span class=\"ax-kbd-text\"> {{ localKeys.toLocaleUpperCase() }}</span>\n    }\n  </kbd>\n} @else {\n  @if (join() === 'split') {\n    @for (key of localKeys; track $index) {\n      <kbd [class]=\"lookClass()\">\n        @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n          <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n        } @else {\n          <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n        }\n      </kbd>\n      @if (!$last) {\n        <span class=\"ax-kbd-separator\">+</span>\n      }\n    }\n  } @else {\n    <kbd [class]=\"lookClass()\">\n      <div class=\"ax-kbd-inner-text\">\n        @for (key of localKeys; track $index) {\n          @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n            <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n          } @else {\n            <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n          }\n          @if (!$last) {\n            <span class=\"ax-kbd-separator\">+</span>\n          }\n        }\n      </div>\n    </kbd>\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXKBDItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXKBDItemComponent, isStandalone: true, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null }, join: { classPropertyName: "join", publicName: "join", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange" }, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], usesInheritance: true, ngImport: i0, template: "@let localKeys = keys();\n\n@if (typeof localKeys === 'string') {\n  <kbd [class]=\"lookClass()\">\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\n      <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(localKeys) }}</span>\n    } @else {\n      <span class=\"ax-kbd-text\"> {{ localKeys.toLocaleUpperCase() }}</span>\n    }\n  </kbd>\n} @else {\n  @if (join() === 'split') {\n    @for (key of localKeys; track $index) {\n      <kbd [class]=\"lookClass()\">\n        @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n          <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n        } @else {\n          <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n        }\n      </kbd>\n      @if (!$last) {\n        <span class=\"ax-kbd-separator\">+</span>\n      }\n    }\n  } @else {\n    <kbd [class]=\"lookClass()\">\n      <div class=\"ax-kbd-inner-text\">\n        @for (key of localKeys; track $index) {\n          @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n            <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n          } @else {\n            <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n          }\n          @if (!$last) {\n            <span class=\"ax-kbd-separator\">+</span>\n          }\n        }\n      </div>\n    </kbd>\n  }\n}\n", encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXKBDItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXKBDItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], template: "@let localKeys = keys();\n\n@if (typeof localKeys === 'string') {\n  <kbd [class]=\"lookClass()\">\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\n      <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(localKeys) }}</span>\n    } @else {\n      <span class=\"ax-kbd-text\"> {{ localKeys.toLocaleUpperCase() }}</span>\n    }\n  </kbd>\n} @else {\n  @if (join() === 'split') {\n    @for (key of localKeys; track $index) {\n      <kbd [class]=\"lookClass()\">\n        @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n          <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n        } @else {\n          <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n        }\n      </kbd>\n      @if (!$last) {\n        <span class=\"ax-kbd-separator\">+</span>\n      }\n    }\n  } @else {\n    <kbd [class]=\"lookClass()\">\n      <div class=\"ax-kbd-inner-text\">\n        @for (key of localKeys; track $index) {\n          @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n            <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n          } @else {\n            <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n          }\n          @if (!$last) {\n            <span class=\"ax-kbd-separator\">+</span>\n          }\n        }\n      </div>\n    </kbd>\n  }\n}\n" }]
+            args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], template: "@let localKeys = keys();\n\n@if (typeof localKeys === 'string') {\n  <kbd [class]=\"lookClass()\">\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\n      <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(localKeys) }}</span>\n    } @else {\n      <span class=\"ax-kbd-text\"> {{ localKeys.toLocaleUpperCase() }}</span>\n    }\n  </kbd>\n} @else {\n  @if (join() === 'split') {\n    @for (key of localKeys; track $index) {\n      <kbd [class]=\"lookClass()\">\n        @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n          <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n        } @else {\n          <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n        }\n      </kbd>\n      @if (!$last) {\n        <span class=\"ax-kbd-separator\">+</span>\n      }\n    }\n  } @else {\n    <kbd [class]=\"lookClass()\">\n      <div class=\"ax-kbd-inner-text\">\n        @for (key of localKeys; track $index) {\n          @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n            <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n          } @else {\n            <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n          }\n          @if (!$last) {\n            <span class=\"ax-kbd-separator\">+</span>\n          }\n        }\n      </div>\n    </kbd>\n  }\n}\n" }]
         }], propDecorators: { keys: [{ type: i0.Input, args: [{ isSignal: true, alias: "keys", required: false }] }], join: [{ type: i0.Input, args: [{ isSignal: true, alias: "join", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }] } });
 
 class AXKBDComponent extends NXComponent {
     constructor() {
         super(...arguments);
         this.kbdItem = contentChildren(AXKBDItemComponent, { ...(ngDevMode ? { debugName: "kbdItem" } : /* istanbul ignore next */ {}), descendants: true });
-        this.look = input(null, ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        this.look = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
         this.#eff = effect(() => {
             if (!this.look())
                 return;
             this.kbdItem().forEach((kbd) => {
                 kbd.look.set(this.look());
             });
-        }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
     #eff;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXKBDComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXKBDComponent, isStandalone: true, selector: "ax-kbd", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXKBDComponent }], queries: [{ propertyName: "kbdItem", predicate: AXKBDItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["@layer properties;ax-kbd{display:flex;gap:calc(var(--spacing, .25rem) * 4);--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-user-select:none;user-select:none}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kbd ax-kbd-item .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-normal, 400);font-weight:var(--font-weight-normal, 400)}ax-kbd ax-kbd-item .ax-kbd-inner-text{display:flex;height:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-kbd ax-kbd-item .ax-kbd-separator{display:inline-flex;align-items:center;align-self:center;font-size:11px;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}ax-kbd ax-kbd-item kbd{display:flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:6px;padding-inline:calc(var(--spacing, .25rem) * 1);--tw-font-weight: var(--ax-sys-font-family);font-weight:var(--ax-sys-font-family)}ax-kbd ax-kbd-item kbd.ax-fill{border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:rgba(var(--ax-comp-kbd-item-bg-color,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-lightest-surface),.74)}ax-kbd ax-kbd-item kbd.ax-solid{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-comp-kbd-item-border-color,var(--ax-sys-color-dark-surface)));background-color:rgba(var(--ax-comp-kbd-item-bg-color,var(--ax-sys-color-lightest-surface)));color:rgba(var(--ax-sys-color-on-lightest-surface),.74);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kbd ax-kbd-item kbd.ax-blank{border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;color:rgba(var(--ax-sys-color-on-lightest-surface),.74)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-font-weight: initial;--tw-border-style: solid;--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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXKBDComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: AXKBDComponent, isStandalone: true, selector: "ax-kbd", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXKBDComponent }], queries: [{ propertyName: "kbdItem", predicate: AXKBDItemComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["@layer properties;ax-kbd{display:flex;gap:calc(var(--spacing, .25rem) * 4);--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-user-select:none;user-select:none}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kbd ax-kbd-item .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-normal, 400);font-weight:var(--font-weight-normal, 400)}ax-kbd ax-kbd-item .ax-kbd-inner-text{display:flex;height:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-kbd ax-kbd-item .ax-kbd-separator{display:inline-flex;align-items:center;align-self:center;font-size:11px;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}ax-kbd ax-kbd-item kbd{display:flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:6px;padding-inline:calc(var(--spacing, .25rem) * 1);--tw-font-weight: var(--ax-sys-font-family);font-weight:var(--ax-sys-font-family)}ax-kbd ax-kbd-item kbd.ax-fill{border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:rgba(var(--ax-comp-kbd-item-bg-color,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-lightest-surface),.74)}ax-kbd ax-kbd-item kbd.ax-solid{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-comp-kbd-item-border-color,var(--ax-sys-color-dark-surface)));background-color:rgba(var(--ax-comp-kbd-item-bg-color,var(--ax-sys-color-lightest-surface)));color:rgba(var(--ax-sys-color-on-lightest-surface),.74);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kbd ax-kbd-item kbd.ax-blank{border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;color:rgba(var(--ax-sys-color-on-lightest-surface),.74)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-font-weight: initial;--tw-border-style: solid;--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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXKBDComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXKBDComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-kbd', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXKBDComponent }], template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["@layer properties;ax-kbd{display:flex;gap:calc(var(--spacing, .25rem) * 4);--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-user-select:none;user-select:none}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kbd ax-kbd-item .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-normal, 400);font-weight:var(--font-weight-normal, 400)}ax-kbd ax-kbd-item .ax-kbd-inner-text{display:flex;height:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-kbd ax-kbd-item .ax-kbd-separator{display:inline-flex;align-items:center;align-self:center;font-size:11px;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}ax-kbd ax-kbd-item kbd{display:flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:6px;padding-inline:calc(var(--spacing, .25rem) * 1);--tw-font-weight: var(--ax-sys-font-family);font-weight:var(--ax-sys-font-family)}ax-kbd ax-kbd-item kbd.ax-fill{border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:rgba(var(--ax-comp-kbd-item-bg-color,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-lightest-surface),.74)}ax-kbd ax-kbd-item kbd.ax-solid{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-comp-kbd-item-border-color,var(--ax-sys-color-dark-surface)));background-color:rgba(var(--ax-comp-kbd-item-bg-color,var(--ax-sys-color-lightest-surface)));color:rgba(var(--ax-sys-color-on-lightest-surface),.74);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kbd ax-kbd-item kbd.ax-blank{border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;color:rgba(var(--ax-sys-color-on-lightest-surface),.74)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-font-weight: initial;--tw-border-style: solid;--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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-kbd', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXKBDComponent }], template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["@layer properties;ax-kbd{display:flex;gap:calc(var(--spacing, .25rem) * 4);--tw-leading: var(--leading-normal, 1.5);line-height:var(--leading-normal, 1.5);-webkit-user-select:none;user-select:none}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kbd ax-kbd-item .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-normal, 400);font-weight:var(--font-weight-normal, 400)}ax-kbd ax-kbd-item .ax-kbd-inner-text{display:flex;height:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-kbd ax-kbd-item .ax-kbd-separator{display:inline-flex;align-items:center;align-self:center;font-size:11px;--tw-leading: 1;line-height:1;--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}ax-kbd ax-kbd-item kbd{display:flex;height:calc(var(--spacing, .25rem) * 5);min-width:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;border-radius:6px;padding-inline:calc(var(--spacing, .25rem) * 1);--tw-font-weight: var(--ax-sys-font-family);font-weight:var(--ax-sys-font-family)}ax-kbd ax-kbd-item kbd.ax-fill{border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:rgba(var(--ax-comp-kbd-item-bg-color,var(--ax-sys-color-surface)));color:rgba(var(--ax-sys-color-on-lightest-surface),.74)}ax-kbd ax-kbd-item kbd.ax-solid{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-comp-kbd-item-border-color,var(--ax-sys-color-dark-surface)));background-color:rgba(var(--ax-comp-kbd-item-bg-color,var(--ax-sys-color-lightest-surface)));color:rgba(var(--ax-sys-color-on-lightest-surface),.74);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kbd ax-kbd-item kbd.ax-blank{border-style:var(--tw-border-style);border-width:1px;border-color:transparent;background-color:transparent;color:rgba(var(--ax-sys-color-on-lightest-surface),.74)}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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-font-weight: initial;--tw-border-style: solid;--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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { kbdItem: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXKBDItemComponent), { ...{ descendants: true }, isSignal: true }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }] } });
 
 /**

package/fesm2022/acorex-components-kbd.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-kbd.mjs","sources":["../../../../packages/components/kbd/src/lib/kbd-item/kbd-item.component.ts","../../../../packages/components/kbd/src/lib/kbd-item/kbd-item.component.html","../../../../packages/components/kbd/src/lib/kbd.component.ts","../../../../packages/components/kbd/src/lib/kbd.component.html","../../../../packages/components/kbd/src/acorex-components-kbd.ts"],"sourcesContent":["import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, computed, input, model, signal, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-kbd-item',\n  templateUrl: './kbd-item.component.html',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }],\n})\nexport class AXKBDItemComponent extends NXComponent {\n  keys = input<string[] | string>();\n\n  modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc', 'del', 'delete', 'win']);\n\n  join = input<'split' | 'joined'>('joined');\n\n  look = model<'fill' | 'solid' | 'blank'>('solid');\n\n  lookClass = computed(() => `ax-${this.look()} ax-default`);\n\n  /**\n   * Capitalizes the first letter of the provided text.\n   *\n   * @param text Input text to transform\n   * @returns The text with its first character uppercased\n   */\n  protected capitalizeFirstLetter(text: string) {\n    return text.charAt(0).toUpperCase() + text.slice(1);\n  }\n}\n","@let localKeys = keys();\n\n@if (typeof localKeys === 'string') {\n  <kbd [class]=\"lookClass()\">\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\n      <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(localKeys) }}</span>\n    } @else {\n      <span class=\"ax-kbd-text\"> {{ localKeys.toLocaleUpperCase() }}</span>\n    }\n  </kbd>\n} @else {\n  @if (join() === 'split') {\n    @for (key of localKeys; track $index) {\n      <kbd [class]=\"lookClass()\">\n        @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n          <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n        } @else {\n          <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n        }\n      </kbd>\n      @if (!$last) {\n        <span class=\"ax-kbd-separator\">+</span>\n      }\n    }\n  } @else {\n    <kbd [class]=\"lookClass()\">\n      <div class=\"ax-kbd-inner-text\">\n        @for (key of localKeys; track $index) {\n          @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n            <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n          } @else {\n            <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n          }\n          @if (!$last) {\n            <span class=\"ax-kbd-separator\">+</span>\n          }\n        }\n      </div>\n    </kbd>\n  }\n}\n","import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, contentChildren, effect, input, ViewEncapsulation } from '@angular/core';\nimport { AXKBDItemComponent } from './kbd-item/kbd-item.component';\n\n@Component({\n  selector: 'ax-kbd',\n  templateUrl: './kbd.component.html',\n  styleUrls: ['./kbd.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: AXComponent, useExisting: AXKBDComponent }],\n})\nexport class AXKBDComponent extends NXComponent {\n  private kbdItem = contentChildren(AXKBDItemComponent, { descendants: true });\n\n  look = input<'fill' | 'solid' | 'blank'>(null);\n\n  #eff = effect(() => {\n    if (!this.look()) return;\n    this.kbdItem().forEach((kbd) => {\n      kbd.look.set(this.look());\n    });\n  });\n}\n","<ng-content select=\"ax-kbd-item\"></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-kbd.mjs","sources":["../../../../packages/components/kbd/src/lib/kbd-item/kbd-item.component.ts","../../../../packages/components/kbd/src/lib/kbd-item/kbd-item.component.html","../../../../packages/components/kbd/src/lib/kbd.component.ts","../../../../packages/components/kbd/src/lib/kbd.component.html","../../../../packages/components/kbd/src/acorex-components-kbd.ts"],"sourcesContent":["import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { Component, computed, input, model, signal, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-kbd-item',\n  templateUrl: './kbd-item.component.html',\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }],\n})\nexport class AXKBDItemComponent extends NXComponent {\n  keys = input<string[] | string>();\n\n  modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc', 'del', 'delete', 'win']);\n\n  join = input<'split' | 'joined'>('joined');\n\n  look = model<'fill' | 'solid' | 'blank'>('solid');\n\n  lookClass = computed(() => `ax-${this.look()} ax-default`);\n\n  /**\n   * Capitalizes the first letter of the provided text.\n   *\n   * @param text Input text to transform\n   * @returns The text with its first character uppercased\n   */\n  protected capitalizeFirstLetter(text: string) {\n    return text.charAt(0).toUpperCase() + text.slice(1);\n  }\n}\n","@let localKeys = keys();\n\n@if (typeof localKeys === 'string') {\n  <kbd [class]=\"lookClass()\">\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\n      <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(localKeys) }}</span>\n    } @else {\n      <span class=\"ax-kbd-text\"> {{ localKeys.toLocaleUpperCase() }}</span>\n    }\n  </kbd>\n} @else {\n  @if (join() === 'split') {\n    @for (key of localKeys; track $index) {\n      <kbd [class]=\"lookClass()\">\n        @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n          <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n        } @else {\n          <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n        }\n      </kbd>\n      @if (!$last) {\n        <span class=\"ax-kbd-separator\">+</span>\n      }\n    }\n  } @else {\n    <kbd [class]=\"lookClass()\">\n      <div class=\"ax-kbd-inner-text\">\n        @for (key of localKeys; track $index) {\n          @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n            <span class=\"ax-kbd-text\"> {{ capitalizeFirstLetter(key) }}</span>\n          } @else {\n            <span class=\"ax-kbd-text\"> {{ key.toLocaleUpperCase() }}</span>\n          }\n          @if (!$last) {\n            <span class=\"ax-kbd-separator\">+</span>\n          }\n        }\n      </div>\n    </kbd>\n  }\n}\n","import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { Component, contentChildren, effect, input, ViewEncapsulation } from '@angular/core';\nimport { AXKBDItemComponent } from './kbd-item/kbd-item.component';\n\n@Component({\n  selector: 'ax-kbd',\n  templateUrl: './kbd.component.html',\n  styleUrls: ['./kbd.component.css'],\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [{ provide: AXComponent, useExisting: AXKBDComponent }],\n})\nexport class AXKBDComponent extends NXComponent {\n  private kbdItem = contentChildren(AXKBDItemComponent, { descendants: true });\n\n  look = input<'fill' | 'solid' | 'blank'>(null);\n\n  #eff = effect(() => {\n    if (!this.look()) return;\n    this.kbdItem().forEach((kbd) => {\n      kbd.look.set(this.look());\n    });\n  });\n}\n","<ng-content select=\"ax-kbd-item\"></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-label.mjs

@@ -1,6 +1,6 @@
 import { MXBaseComponent, AXComponent } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { EventEmitter, Input, Output, ViewEncapsulation, Component, NgModule } from '@angular/core';
 
 /**
  * Represents a label component that provides a way to display text labels within the application.
@@ -63,15 +63,15 @@ class AXLabelComponent extends MXBaseComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXLabelComponent, isStandalone: true, selector: "ax-label", inputs: { required: "required", for: "for" }, outputs: { requiredChange: "requiredChange" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLabelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLabelComponent, isStandalone: true, selector: "ax-label", inputs: { required: "required", for: "for" }, outputs: { requiredChange: "requiredChange" }, providers: [
             { provide: MXBaseComponent, useExisting: AXLabelComponent },
             { provide: AXComponent, useExisting: AXLabelComponent },
-        ], usesInheritance: true, ngImport: i0, template: "<label (click)=\"for?.focus()\" [class.ax-cursor-pointer]=\"for\" [attr.for]=\"for?.getHostElement().id\">\n  <ng-content></ng-content>\n  @if (required || for?.isRequired) {\n    <span class=\"ax-state-required\">&nbsp;*</span>\n  }\n</label>\n", styles: ["@layer properties;@layer components{ax-label{color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-label label{margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;cursor:inherit;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);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-label label .ax-state-required{color:rgba(var(--ax-sys-color-danger-600))}ax-label.ax-state-error{color:rgba(var(--ax-sys-color-danger-600))}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesInheritance: true, ngImport: i0, template: "<label (click)=\"for?.focus()\" [class.ax-cursor-pointer]=\"for\" [attr.for]=\"for?.getHostElement().id\">\n  <ng-content></ng-content>\n  @if (required || for?.isRequired) {\n    <span class=\"ax-state-required\">&nbsp;*</span>\n  }\n</label>\n", styles: ["@layer properties;@layer components{ax-label{color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-label label{margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;cursor:inherit;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);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-label label .ax-state-required{color:rgba(var(--ax-sys-color-danger-600))}ax-label.ax-state-error{color:rgba(var(--ax-sys-color-danger-600))}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLabelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-label', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+            args: [{ selector: 'ax-label', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: MXBaseComponent, useExisting: AXLabelComponent },
                         { provide: AXComponent, useExisting: AXLabelComponent },
                     ], template: "<label (click)=\"for?.focus()\" [class.ax-cursor-pointer]=\"for\" [attr.for]=\"for?.getHostElement().id\">\n  <ng-content></ng-content>\n  @if (required || for?.isRequired) {\n    <span class=\"ax-state-required\">&nbsp;*</span>\n  }\n</label>\n", styles: ["@layer properties;@layer components{ax-label{color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-label label{margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;cursor:inherit;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);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-label label .ax-state-required{color:rgba(var(--ax-sys-color-danger-600))}ax-label.ax-state-error{color:rgba(var(--ax-sys-color-danger-600))}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
@@ -84,11 +84,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 class AXLabelModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXLabelModule, imports: [AXLabelComponent], exports: [AXLabelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXLabelModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXLabelModule, imports: [AXLabelComponent], exports: [AXLabelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLabelModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXLabelModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLabelModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXLabelComponent],

package/fesm2022/acorex-components-label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-label.mjs","sources":["../../../../packages/components/label/src/lib/label.component.ts","../../../../packages/components/label/src/lib/label.component.html","../../../../packages/components/label/src/lib/label.module.ts","../../../../packages/components/label/src/acorex-components-label.ts"],"sourcesContent":["import { AXComponent, MXBaseComponent, MXValueComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\n\n/**\n * Represents a label component that provides a way to display text labels within the application.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-label',\n  templateUrl: './label.component.html',\n  styleUrls: ['./label.component.css'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: MXBaseComponent, useExisting: AXLabelComponent },\n    { provide: AXComponent, useExisting: AXLabelComponent },\n  ],\n})\nexport class AXLabelComponent extends MXBaseComponent {\n  /**\n   * Emitted when the `required` property changes.\n   *\n   * @event\n   */\n  @Output()\n  requiredChange = new EventEmitter<boolean>();\n\n  /**\n   *  @ignore\n   */\n  private _required?: boolean | null = null;\n\n  /**\n   * Determines if the field is required.\n   *\n   * @defaultValue false\n   */\n  @Input()\n  public get required(): boolean {\n    return this._required;\n  }\n  /**\n   * Sets whether the field is required.\n   *\n   * @param v - A boolean indicating if the field is required.\n   */\n  public set required(v: boolean) {\n    this.setOption({\n      name: 'required',\n      value: v,\n      afterCallback: () => {\n        this.cdr.markForCheck();\n      },\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  private _for: MXValueComponent;\n\n  /**\n   * Gets the form control or component associated with the label.\n   */\n  @Input()\n  public get for(): MXValueComponent {\n    return this._for;\n  }\n  /**\n   * Sets the form control or component associated with the label.\n   *\n   * @param v The `MXValueComponent` to associate with the label.\n   */\n  public set for(v: MXValueComponent) {\n    this.setOption({\n      name: 'for',\n      value: v,\n      afterCallback: () => {\n        this.cdr.markForCheck();\n      },\n    });\n  }\n}\n","<label (click)=\"for?.focus()\" [class.ax-cursor-pointer]=\"for\" [attr.for]=\"for?.getHostElement().id\">\n  <ng-content></ng-content>\n  @if (required || for?.isRequired) {\n    <span class=\"ax-state-required\">&nbsp;*</span>\n  }\n</label>\n","import { NgModule } from '@angular/core';\nimport { AXLabelComponent } from './label.component';\n\n@NgModule({\n  imports: [AXLabelComponent],\n  exports: [AXLabelComponent],\n})\nexport class AXLabelModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-label.mjs","sources":["../../../../packages/components/label/src/lib/label.component.ts","../../../../packages/components/label/src/lib/label.component.html","../../../../packages/components/label/src/lib/label.module.ts","../../../../packages/components/label/src/acorex-components-label.ts"],"sourcesContent":["import { AXComponent, MXBaseComponent, MXValueComponent } from '@acorex/cdk/common';\nimport { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';\n\n/**\n * Represents a label component that provides a way to display text labels within the application.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-label',\n  templateUrl: './label.component.html',\n  styleUrls: ['./label.component.css'],\n\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    { provide: MXBaseComponent, useExisting: AXLabelComponent },\n    { provide: AXComponent, useExisting: AXLabelComponent },\n  ],\n})\nexport class AXLabelComponent extends MXBaseComponent {\n  /**\n   * Emitted when the `required` property changes.\n   *\n   * @event\n   */\n  @Output()\n  requiredChange = new EventEmitter<boolean>();\n\n  /**\n   *  @ignore\n   */\n  private _required?: boolean | null = null;\n\n  /**\n   * Determines if the field is required.\n   *\n   * @defaultValue false\n   */\n  @Input()\n  public get required(): boolean {\n    return this._required;\n  }\n  /**\n   * Sets whether the field is required.\n   *\n   * @param v - A boolean indicating if the field is required.\n   */\n  public set required(v: boolean) {\n    this.setOption({\n      name: 'required',\n      value: v,\n      afterCallback: () => {\n        this.cdr.markForCheck();\n      },\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  private _for: MXValueComponent;\n\n  /**\n   * Gets the form control or component associated with the label.\n   */\n  @Input()\n  public get for(): MXValueComponent {\n    return this._for;\n  }\n  /**\n   * Sets the form control or component associated with the label.\n   *\n   * @param v The `MXValueComponent` to associate with the label.\n   */\n  public set for(v: MXValueComponent) {\n    this.setOption({\n      name: 'for',\n      value: v,\n      afterCallback: () => {\n        this.cdr.markForCheck();\n      },\n    });\n  }\n}\n","<label (click)=\"for?.focus()\" [class.ax-cursor-pointer]=\"for\" [attr.for]=\"for?.getHostElement().id\">\n  <ng-content></ng-content>\n  @if (required || for?.isRequired) {\n    <span class=\"ax-state-required\">&nbsp;*</span>\n  }\n</label>\n","import { NgModule } from '@angular/core';\nimport { AXLabelComponent } from './label.component';\n\n@NgModule({\n  imports: [AXLabelComponent],\n  exports: [AXLabelComponent],\n})\nexport class AXLabelModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-list.mjs

@@ -5,7 +5,7 @@ import { AXTranslatorPipe } from '@acorex/core/translation';
 import { CdkVirtualScrollableElement, CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import { isPlatformBrowser, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { viewChildren, input, signal, computed, EventEmitter, Optional, SkipSelf, forwardRef, HostListener, ViewChild, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { viewChildren, input, signal, computed, EventEmitter, Optional, SkipSelf, forwardRef, HostListener, ViewChild, Input, Output, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
@@ -16,19 +16,22 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 class AXListComponent extends MXSelectionValueComponent {
     constructor() {
         super(...arguments);
-        this.tooltipRef = viewChildren(AXTooltipDirective, ...(ngDevMode ? [{ debugName: "tooltipRef" }] : /* istanbul ignore next */ []));
+        this.tooltipRef = viewChildren(AXTooltipDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipRef" }] : /* istanbul ignore next */ []));
         /**
          * Determines if an item is truncated.
          *
          * @defaultValue true
          */
-        this.isItemTruncated = input(true, ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : /* istanbul ignore next */ []));
+        this.isItemTruncated = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isItemTruncated" }] : /* istanbul ignore next */ []));
         /**
          * Determines if a tooltip is shown for an item.
          *
          * @defaultValue false
          */
-        this.showItemTooltip = input(false, ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : /* istanbul ignore next */ []));
+        this.showItemTooltip = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this._dataSource = convertArrayToDataSource([]);
         /** @ignore */
@@ -36,7 +39,8 @@ class AXListComponent extends MXSelectionValueComponent {
         /**
          *  @ignore
          */
-        this.itemHeightSignal = signal(40, ...(ngDevMode ? [{ debugName: "itemHeightSignal" }] : /* istanbul ignore next */ []));
+        this.itemHeightSignal = signal(40, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemHeightSignal" }] : /* istanbul ignore next */ []));
         /**
          * Fixed pixel size for CDK virtual scroll. Falls back to 40 when `itemHeight` is `'auto'`.
          * @ignore
@@ -44,12 +48,14 @@ class AXListComponent extends MXSelectionValueComponent {
         this.cdkItemSize = computed(() => {
             const height = this.itemHeightSignal();
             return typeof height === 'number' ? height : 40;
-        }, ...(ngDevMode ? [{ debugName: "cdkItemSize" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cdkItemSize" }] : /* istanbul ignore next */ []));
         /**
          * CSS value applied to `--ax-comp-list-item-height` so rendered rows match the virtual slot.
          * @ignore
          */
-        this.itemHeightCss = computed(() => `${this.cdkItemSize()}px`, ...(ngDevMode ? [{ debugName: "itemHeightCss" }] : /* istanbul ignore next */ []));
+        this.itemHeightCss = computed(() => `${this.cdkItemSize()}px`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemHeightCss" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the index of the scrolled item changes.
          *
@@ -65,7 +71,8 @@ class AXListComponent extends MXSelectionValueComponent {
         /**
          *  @ignore
          */
-        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.isLoading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
         /**
          *  @ignore
          */
@@ -82,7 +89,8 @@ class AXListComponent extends MXSelectionValueComponent {
          * Determines whether to show the empty template based on the presence of items and loading state.
          * @ignore
          */
-        this.showEmptyTemplate = computed(() => this.isLoading() === false && this.emptyTemplate && this.hasItems === false, ...(ngDevMode ? [{ debugName: "showEmptyTemplate" }] : /* istanbul ignore next */ []));
+        this.showEmptyTemplate = computed(() => this.isLoading() === false && this.emptyTemplate && this.hasItems === false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showEmptyTemplate" }] : /* istanbul ignore next */ []));
     }
     /**
      * Defines the data source for the list.
@@ -329,8 +337,8 @@ class AXListComponent extends MXSelectionValueComponent {
             this.postponeFocus = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXListComponent, isStandalone: true, selector: "ax-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, isItemTruncated: { classPropertyName: "isItemTruncated", publicName: "isItemTruncated", isSignal: true, isRequired: false, transformFunction: null }, showItemTooltip: { classPropertyName: "showItemTooltip", publicName: "showItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", onBlur: "onBlur", onFocus: "onFocus", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onScrolledIndexChanged: "onScrolledIndexChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXListComponent, isStandalone: true, selector: "ax-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, textTemplate: { classPropertyName: "textTemplate", publicName: "textTemplate", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, isItemTruncated: { classPropertyName: "isItemTruncated", publicName: "isItemTruncated", isSignal: true, isRequired: false, transformFunction: null }, showItemTooltip: { classPropertyName: "showItemTooltip", publicName: "showItemTooltip", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: false, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: false, isRequired: false, transformFunction: null }, checkbox: { classPropertyName: "checkbox", publicName: "checkbox", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", disabledChange: "disabledChange", readonlyChange: "readonlyChange", onBlur: "onBlur", onFocus: "onFocus", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onScrolledIndexChanged: "onScrolledIndexChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
             { provide: AXComponent, useExisting: AXListComponent },
             { provide: AXFocusableComponent, useExisting: AXListComponent },
             { provide: AXValuableComponent, useExisting: AXListComponent },
@@ -346,11 +354,11 @@ class AXListComponent extends MXSelectionValueComponent {
                 },
                 deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],
             },
-        ], viewQueries: [{ propertyName: "tooltipRef", predicate: AXTooltipDirective, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement [class.ax-height-auto]=\"showEmptyTemplate()\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <cdk-virtual-scroll-viewport\n    [itemSize]=\"cdkItemSize()\"\n    [style.--ax-comp-list-item-height]=\"itemHeightCss()\"\n    (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n    [class.ax-truncated-container]=\"isItemTruncated()\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        @if (item !== null && item !== undefined) {\n          <li\n            [class.ax-state-selected]=\"isItemSelected(item)\"\n            class=\"list-item\"\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            [attr.tabindex]=\"i\"\n            (click)=\"_handleOnItemClick($event, item)\"\n            [attr.data-id]=\"getValue(item)\"\n          >\n            <!--  Custom Item Template  -->\n            @if (itemTemplate) {\n              <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\">\n              </ng-container>\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"defaultItemTpl\"></ng-container>\n            }\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              @if (item !== null && item !== undefined) {\n                <div class=\"ax-label-container\">\n                  @if (multiple && checkbox) {\n                    <input\n                      class=\"ax-checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isItemSelected(item)\"\n                      [disabled]=\"isItemDisabled(item)\"\n                      tabindex=\"0\"\n                    />\n                  }\n\n                  <span\n                    [class.ax-checkbox-label]=\"multiple && checkbox\"\n                    [class.ax-truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"getDisplayText(item)\"\n                    [axTooltipDisabled]=\"!showItemTooltip()\"\n                  >\n                    {{ getDisplayText(item) | translate | async }}\n                  </span>\n                </div>\n                <!-- @if (isItemSelected(item)) {\n                  <i class=\"ax-icon ax-icon-check ax-selected-icon\"></i>\n                } -->\n              } @else {\n                <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n              }\n            </ng-template>\n          </li>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n        }\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  @if (loadingTemplate) {\n    <ng-container [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"defaultLoadingTpl\"> </ng-container>\n  }\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ '@acorex:common.status.loading' | translate | async }}</li>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n@if (showEmptyTemplate()) {\n  <div class=\"empty-container\">\n    <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-list{display:block;width:100%;height:100%;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)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-footer,ax-list ax-header{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-list .empty-container{display:flex;height:calc(var(--spacing, .25rem) * 10);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3)}ax-list .cdk-virtual-scroll-viewport{height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1 1 auto}ax-list .cdk-virtual-scroll-viewport.ax-truncated-container .cdk-virtual-scroll-content-wrapper{width:100%;min-width:unset}ax-list .cdk-virtual-scroll-viewport ul li{position:relative;box-sizing:border-box;display:flex!important;cursor:pointer;align-items:center;justify-content:space-between;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end: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)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);-webkit-user-select:none;user-select:none;height:var(--ax-comp-list-item-height);min-height:var(--ax-comp-list-item-height);max-height:var(--ax-comp-list-item-height)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background-color:rgba(var(--ax-sys-color-surface))}ax-list .cdk-virtual-scroll-viewport ul li:focus,ax-list .cdk-virtual-scroll-viewport ul li:focus-within,ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{outline-width:var(--ax-comp-list-item-focus-outline-width, 2px);outline-offset:var(--ax-comp-list-item-focus-outline-offset, -4px);outline-color:var(--color-primary)}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;width:100%;align-items:center}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)}}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@property --tw-leading{syntax: \"*\"; inherits: false;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "tooltipRef", predicate: AXTooltipDirective, descendants: true, isSignal: true }, { propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"list-container\" cdkVirtualScrollingElement [class.ax-height-auto]=\"showEmptyTemplate()\">\n  <ng-content select=\"ax-header\"></ng-content>\n  <cdk-virtual-scroll-viewport\n    [itemSize]=\"cdkItemSize()\"\n    [style.--ax-comp-list-item-height]=\"itemHeightCss()\"\n    (scrolledIndexChange)=\"_handleOnscrolledIndexChange($event)\"\n    [class.ax-truncated-container]=\"isItemTruncated()\"\n  >\n    <ul>\n      <!--  Item Template  -->\n      <ng-container *cdkVirtualFor=\"let item of listDataSource; let i = index; trackBy: trackByIdx\">\n        @if (item !== null && item !== undefined) {\n          <li\n            [class.ax-state-selected]=\"isItemSelected(item)\"\n            class=\"list-item\"\n            [class.ax-state-disabled]=\"isItemDisabled(item)\"\n            [attr.tabindex]=\"i\"\n            (click)=\"_handleOnItemClick($event, item)\"\n            [attr.data-id]=\"getValue(item)\"\n          >\n            <!--  Custom Item Template  -->\n            @if (itemTemplate) {\n              <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\">\n              </ng-container>\n            } @else {\n              <ng-container [ngTemplateOutlet]=\"defaultItemTpl\"></ng-container>\n            }\n            <!--  Default Item Template  -->\n            <ng-template #defaultItemTpl>\n              @if (item !== null && item !== undefined) {\n                <div class=\"ax-label-container\">\n                  @if (multiple && checkbox) {\n                    <input\n                      class=\"ax-checkbox\"\n                      type=\"checkbox\"\n                      [checked]=\"isItemSelected(item)\"\n                      [disabled]=\"isItemDisabled(item)\"\n                      tabindex=\"0\"\n                    />\n                  }\n\n                  <span\n                    [class.ax-checkbox-label]=\"multiple && checkbox\"\n                    [class.ax-truncated]=\"isItemTruncated()\"\n                    [axTooltip]=\"getDisplayText(item)\"\n                    [axTooltipDisabled]=\"!showItemTooltip()\"\n                  >\n                    {{ getDisplayText(item) | translate | async }}\n                  </span>\n                </div>\n                <!-- @if (isItemSelected(item)) {\n                  <i class=\"ax-icon ax-icon-check ax-selected-icon\"></i>\n                } -->\n              } @else {\n                <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n              }\n            </ng-template>\n          </li>\n        } @else {\n          <ng-container [ngTemplateOutlet]=\"loadingTpl\"> </ng-container>\n        }\n      </ng-container>\n    </ul>\n  </cdk-virtual-scroll-viewport>\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n<!--  Loading Template  -->\n<ng-template #loadingTpl>\n  <!--  Custom Loading Template  -->\n  @if (loadingTemplate) {\n    <ng-container [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"defaultLoadingTpl\"> </ng-container>\n  }\n  <!--  Default Loading Template  -->\n  <ng-template #defaultLoadingTpl>\n    <li>{{ '@acorex:common.status.loading' | translate | async }}</li>\n  </ng-template>\n</ng-template>\n<!--  Empty Template  -->\n@if (showEmptyTemplate()) {\n  <div class=\"empty-container\">\n    <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\n  </div>\n}\n", styles: ["@layer properties;@layer components{ax-list{display:block;width:100%;height:100%;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)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-footer,ax-list ax-header{background-color:rgba(var(--ax-sys-color-lighter-surface))}ax-list .empty-container{display:flex;height:calc(var(--spacing, .25rem) * 10);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3)}ax-list .cdk-virtual-scroll-viewport{height:100%;min-height:calc(var(--spacing, .25rem) * 0);width:100%;flex:1 1 auto}ax-list .cdk-virtual-scroll-viewport.ax-truncated-container .cdk-virtual-scroll-content-wrapper{width:100%;min-width:unset}ax-list .cdk-virtual-scroll-viewport ul li{position:relative;box-sizing:border-box;display:flex!important;cursor:pointer;align-items:center;justify-content:space-between;overflow:hidden;padding-inline-start:calc(var(--spacing, .25rem) * 3);padding-inline-end: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)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);-webkit-user-select:none;user-select:none;height:var(--ax-comp-list-item-height);min-height:var(--ax-comp-list-item-height);max-height:var(--ax-comp-list-item-height)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background-color:rgba(var(--ax-sys-color-surface))}ax-list .cdk-virtual-scroll-viewport ul li:focus,ax-list .cdk-virtual-scroll-viewport ul li:focus-within,ax-list .cdk-virtual-scroll-viewport ul li:focus-visible{outline-width:var(--ax-comp-list-item-focus-outline-width, 2px);outline-offset:var(--ax-comp-list-item-focus-outline-offset, -4px);outline-color:var(--color-primary)}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;width:100%;align-items:center}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:calc(var(--spacing, .25rem) * 2)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)}}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@property --tw-leading{syntax: \"*\"; inherits: false;}@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}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkVirtualScrollableElement, selector: "[cdkVirtualScrollingElement]" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i1.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, inputs: [
+            args: [{ selector: 'ax-list', encapsulation: ViewEncapsulation.None, inputs: [
                         'id',
                         'name',
                         'disabled',
@@ -411,11 +419,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 class AXListModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXListModule, imports: [AXListComponent], exports: [AXListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXListModule, imports: [AXListComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXListModule, imports: [AXListComponent], exports: [AXListComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListModule, imports: [AXListComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXListModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXListModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [AXListComponent],