@acorex/components 20.1.35 → 20.1.37

package/fesm2022/acorex-components-kbd.mjs

@@ -6,7 +6,7 @@ class AXKBDItemComponent extends NXComponent {
     constructor() {
         super(...arguments);
         this.keys = input(...(ngDevMode ? [undefined, { debugName: "keys" }] : []));
-        this.modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc'], ...(ngDevMode ? [{ debugName: "modifierKeys" }] : []));
+        this.modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc', 'del', 'delete', 'win'], ...(ngDevMode ? [{ debugName: "modifierKeys" }] : []));
     }
     /**
      * Capitalizes the first letter of the provided text.
@@ -18,20 +18,20 @@ class AXKBDItemComponent extends NXComponent {
         return text.charAt(0).toUpperCase() + text.slice(1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXKBDItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AXKBDItemComponent, isStandalone: true, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], usesInheritance: true, ngImport: i0, template: "@if (typeof keys() === 'string') {\n  <kbd>{{ keys() }}</kbd>\n} @else {\n  @for (key of keys(); track $index; let last = $last) {\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n      <span>+</span>\n    }\n  }\n  @for (key of keys(); track $index; let last = $last) {\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n    }\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AXKBDItemComponent, isStandalone: true, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], usesInheritance: true, ngImport: i0, template: "<kbd>\n  @let localKeys = keys();\n  @if (typeof localKeys === 'string') {\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\n      {{ capitalizeFirstLetter(localKeys) }}\n    } @else {\n      {{ localKeys.toLocaleUpperCase() }}\n    }\n  } @else {\n    @for (key of localKeys; track $index) {\n      @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n        {{ capitalizeFirstLetter(key) }}\n      } @else {\n        {{ key.toLocaleUpperCase() }}\n      }\n    }\n  }\n</kbd>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXKBDItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], template: "@if (typeof keys() === 'string') {\n  <kbd>{{ keys() }}</kbd>\n} @else {\n  @for (key of keys(); track $index; let last = $last) {\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n      <span>+</span>\n    }\n  }\n  @for (key of keys(); track $index; let last = $last) {\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n    }\n  }\n}\n" }]
+            args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], template: "<kbd>\n  @let localKeys = keys();\n  @if (typeof localKeys === 'string') {\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\n      {{ capitalizeFirstLetter(localKeys) }}\n    } @else {\n      {{ localKeys.toLocaleUpperCase() }}\n    }\n  } @else {\n    @for (key of localKeys; track $index) {\n      @if (modifierKeys().includes(key.toLocaleLowerCase())) {\n        {{ capitalizeFirstLetter(key) }}\n      } @else {\n        {{ key.toLocaleUpperCase() }}\n      }\n    }\n  }\n</kbd>\n" }]
         }] });
 
 class AXKBDComponent extends NXComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXKBDComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AXKBDComponent, isStandalone: true, selector: "ax-kbd", providers: [{ provide: AXComponent, useExisting: AXKBDComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: AXKBDComponent, isStandalone: true, selector: "ax-kbd", providers: [{ provide: AXComponent, useExisting: AXKBDComponent }], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;font-weight:600;font-size:.75rem;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{display:flex;height:1.75rem;min-width:1.75rem;align-items:center;justify-content:center;padding-inline:.375rem;color:rgba(var(--ax-sys-color-on-lightest-surface),.74);font-family:var(--ax-comp-kbd-item-font-family, var(--ax-sys-font-family));border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-lightest-surface)));border:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}.ax-dark ax-kbd{color:rgba(var(--ax-sys-color-on-lighter-surface),.84);--ax-comp-kbd-item-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-lightest-surface)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", 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: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"] }]
+            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: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;font-weight:600;font-size:.75rem;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{display:flex;height:1.75rem;min-width:1.75rem;align-items:center;justify-content:center;padding-inline:.375rem;color:rgba(var(--ax-sys-color-on-lightest-surface),.74);font-family:var(--ax-comp-kbd-item-font-family, var(--ax-sys-font-family));border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-lightest-surface)));border:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}.ax-dark ax-kbd{color:rgba(var(--ax-sys-color-on-lighter-surface),.84);--ax-comp-kbd-item-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-lightest-surface)}\n"] }]
         }] });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-kbd.mjs","sources":["../tmp-esm2022/kbd/lib/kbd-item/kbd-item.component.js","../tmp-esm2022/kbd/lib/kbd.component.js","../tmp-esm2022/kbd/acorex-components-kbd.js"],"sourcesContent":["import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nexport class AXKBDItemComponent extends NXComponent {\n    constructor() {\n        super(...arguments);\n        this.keys = input(...(ngDevMode ? [undefined, { debugName: \"keys\" }] : []));\n        this.modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc'], ...(ngDevMode ? [{ debugName: \"modifierKeys\" }] : []));\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    capitalizeFirstLetter(text) {\n        return text.charAt(0).toUpperCase() + text.slice(1);\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.2.4\", ngImport: i0, type: AXKBDItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"20.2.4\", type: AXKBDItemComponent, isStandalone: true, selector: \"ax-kbd-item\", inputs: { keys: { classPropertyName: \"keys\", publicName: \"keys\", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], usesInheritance: true, ngImport: i0, template: \"@if (typeof keys() === 'string') {\\n  <kbd>{{ keys() }}</kbd>\\n} @else {\\n  @for (key of keys(); track $index; let last = $last) {\\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\\n      <span>+</span>\\n    }\\n  }\\n  @for (key of keys(); track $index; let last = $last) {\\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\\n    }\\n  }\\n}\\n\", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.2.4\", ngImport: i0, type: AXKBDItemComponent, decorators: [{\n            type: Component,\n            args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], template: \"@if (typeof keys() === 'string') {\\n  <kbd>{{ keys() }}</kbd>\\n} @else {\\n  @for (key of keys(); track $index; let last = $last) {\\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\\n      <span>+</span>\\n    }\\n  }\\n  @for (key of keys(); track $index; let last = $last) {\\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\\n    }\\n  }\\n}\\n\" }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2JkLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9rYmQvc3JjL2xpYi9rYmQtaXRlbS9rYmQtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL2tiZC9zcmMvbGliL2tiZC1pdGVtL2tiZC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVNyRyxNQUFNLE9BQU8sa0JBQW1CLFNBQVEsV0FBVztJQVBuRDs7UUFRRSxTQUFJLEdBQUcsS0FBSywwREFBcUIsQ0FBQztRQUVsQyxpQkFBWSxHQUFHLE1BQU0sQ0FBQyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLENBQUMsd0RBQUMsQ0FBQztLQVdoRTtJQVRDOzs7OztPQUtHO0lBQ08scUJBQXFCLENBQUMsSUFBWTtRQUMxQyxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxFQUFFLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN0RCxDQUFDOzhHQWJVLGtCQUFrQjtrR0FBbEIsa0JBQWtCLDJMQUZsQixDQUFDLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyxpRENSeEUsa2VBZUE7OzJGRExhLGtCQUFrQjtrQkFQOUIsU0FBUzsrQkFDRSxhQUFhLGlCQUVSLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxvQkFBb0IsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhDb21wb25lbnQsIE5YQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jZGsvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGlucHV0LCBzaWduYWwsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWtiZC1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2tiZC1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByb3ZpZGVyczogW3sgcHJvdmlkZTogQVhDb21wb25lbnQsIHVzZUV4aXN0aW5nOiBBWEtCREl0ZW1Db21wb25lbnQgfV0sXG59KVxuZXhwb3J0IGNsYXNzIEFYS0JESXRlbUNvbXBvbmVudCBleHRlbmRzIE5YQ29tcG9uZW50IHtcbiAga2V5cyA9IGlucHV0PHN0cmluZ1tdIHwgc3RyaW5nPigpO1xuXG4gIG1vZGlmaWVyS2V5cyA9IHNpZ25hbChbJ2N0cmwnLCAnc2hpZnQnLCAnYWx0JywgJ21ldGEnLCAnZXNjJ10pO1xuXG4gIC8qKlxuICAgKiBDYXBpdGFsaXplcyB0aGUgZmlyc3QgbGV0dGVyIG9mIHRoZSBwcm92aWRlZCB0ZXh0LlxuICAgKlxuICAgKiBAcGFyYW0gdGV4dCBJbnB1dCB0ZXh0IHRvIHRyYW5zZm9ybVxuICAgKiBAcmV0dXJucyBUaGUgdGV4dCB3aXRoIGl0cyBmaXJzdCBjaGFyYWN0ZXIgdXBwZXJjYXNlZFxuICAgKi9cbiAgcHJvdGVjdGVkIGNhcGl0YWxpemVGaXJzdExldHRlcih0ZXh0OiBzdHJpbmcpIHtcbiAgICByZXR1cm4gdGV4dC5jaGFyQXQoMCkudG9VcHBlckNhc2UoKSArIHRleHQuc2xpY2UoMSk7XG4gIH1cbn1cbiIsIkBpZiAodHlwZW9mIGtleXMoKSA9PT0gJ3N0cmluZycpIHtcbiAgPGtiZD57eyBrZXlzKCkgfX08L2tiZD5cbn0gQGVsc2Uge1xuICBAZm9yIChrZXkgb2Yga2V5cygpOyB0cmFjayAkaW5kZXg7IGxldCBsYXN0ID0gJGxhc3QpIHtcbiAgICBAaWYgKCFsYXN0ICYmIG1vZGlmaWVyS2V5cygpLmluY2x1ZGVzKGtleS50b0xvY2FsZUxvd2VyQ2FzZSgpKSkge1xuICAgICAgPGtiZD57eyBjYXBpdGFsaXplRmlyc3RMZXR0ZXIoa2V5KSB9fTwva2JkPlxuICAgICAgPHNwYW4+Kzwvc3Bhbj5cbiAgICB9XG4gIH1cbiAgQGZvciAoa2V5IG9mIGtleXMoKTsgdHJhY2sgJGluZGV4OyBsZXQgbGFzdCA9ICRsYXN0KSB7XG4gICAgQGlmIChsYXN0IHx8ICFtb2RpZmllcktleXMoKS5pbmNsdWRlcyhrZXkudG9Mb2NhbGVMb3dlckNhc2UoKSkpIHtcbiAgICAgIDxrYmQ+e3sga2V5LnRvTG9jYWxlVXBwZXJDYXNlKCkgfX08L2tiZD5cbiAgICB9XG4gIH1cbn1cbiJdfQ==","import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nexport class AXKBDComponent extends NXComponent {\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.2.4\", ngImport: i0, type: AXKBDComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"20.2.4\", type: AXKBDComponent, isStandalone: true, selector: \"ax-kbd\", providers: [{ provide: AXComponent, useExisting: AXKBDComponent }], usesInheritance: true, ngImport: i0, template: \"<ng-content select=\\\"ax-kbd-item\\\"></ng-content>\\n\", styles: [\"ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\\n\"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.2.4\", ngImport: i0, type: AXKBDComponent, decorators: [{\n            type: Component,\n            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: [\"ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\\n\"] }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2JkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMva2JkL3NyYy9saWIva2JkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMva2JkL3NyYy9saWIva2JkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFVdEYsTUFBTSxPQUFPLGNBQWUsU0FBUSxXQUFXOzhHQUFsQyxjQUFjO2tHQUFkLGNBQWMscURBRmQsQ0FBQyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLGNBQWMsRUFBRSxDQUFDLGlEQ1RwRSxvREFDQTs7MkZEVWEsY0FBYztrQkFSMUIsU0FBUzsrQkFDRSxRQUFRLGlCQUdILGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxnQkFBZ0IsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhDb21wb25lbnQsIE5YQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jZGsvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWtiZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9rYmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9rYmQuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByb3ZpZGVyczogW3sgcHJvdmlkZTogQVhDb21wb25lbnQsIHVzZUV4aXN0aW5nOiBBWEtCRENvbXBvbmVudCB9XSxcbn0pXG5leHBvcnQgY2xhc3MgQVhLQkRDb21wb25lbnQgZXh0ZW5kcyBOWENvbXBvbmVudCB7fVxuIiwiPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgta2JkLWl0ZW1cIj48L25nLWNvbnRlbnQ+XG4iXX0=","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNvbXBvbmVudHMta2JkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9rYmQvc3JjL2Fjb3JleC1jb21wb25lbnRzLWtiZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-kbd.mjs","sources":["../tmp-esm2022/kbd/lib/kbd-item/kbd-item.component.js","../tmp-esm2022/kbd/lib/kbd.component.js","../tmp-esm2022/kbd/acorex-components-kbd.js"],"sourcesContent":["import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, input, signal, ViewEncapsulation } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nexport class AXKBDItemComponent extends NXComponent {\n    constructor() {\n        super(...arguments);\n        this.keys = input(...(ngDevMode ? [undefined, { debugName: \"keys\" }] : []));\n        this.modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc', 'del', 'delete', 'win'], ...(ngDevMode ? [{ debugName: \"modifierKeys\" }] : []));\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    capitalizeFirstLetter(text) {\n        return text.charAt(0).toUpperCase() + text.slice(1);\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.2.4\", ngImport: i0, type: AXKBDItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.0.0\", version: \"20.2.4\", type: AXKBDItemComponent, isStandalone: true, selector: \"ax-kbd-item\", inputs: { keys: { classPropertyName: \"keys\", publicName: \"keys\", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], usesInheritance: true, ngImport: i0, template: \"<kbd>\\n  @let localKeys = keys();\\n  @if (typeof localKeys === 'string') {\\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\\n      {{ capitalizeFirstLetter(localKeys) }}\\n    } @else {\\n      {{ localKeys.toLocaleUpperCase() }}\\n    }\\n  } @else {\\n    @for (key of localKeys; track $index) {\\n      @if (modifierKeys().includes(key.toLocaleLowerCase())) {\\n        {{ capitalizeFirstLetter(key) }}\\n      } @else {\\n        {{ key.toLocaleUpperCase() }}\\n      }\\n    }\\n  }\\n</kbd>\\n\", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.2.4\", ngImport: i0, type: AXKBDItemComponent, decorators: [{\n            type: Component,\n            args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], template: \"<kbd>\\n  @let localKeys = keys();\\n  @if (typeof localKeys === 'string') {\\n    @if (modifierKeys().includes(localKeys.toLocaleLowerCase())) {\\n      {{ capitalizeFirstLetter(localKeys) }}\\n    } @else {\\n      {{ localKeys.toLocaleUpperCase() }}\\n    }\\n  } @else {\\n    @for (key of localKeys; track $index) {\\n      @if (modifierKeys().includes(key.toLocaleLowerCase())) {\\n        {{ capitalizeFirstLetter(key) }}\\n      } @else {\\n        {{ key.toLocaleUpperCase() }}\\n      }\\n    }\\n  }\\n</kbd>\\n\" }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2JkLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9rYmQvc3JjL2xpYi9rYmQtaXRlbS9rYmQtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9jb21wb25lbnRzL2tiZC9zcmMvbGliL2tiZC1pdGVtL2tiZC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDOztBQVNyRyxNQUFNLE9BQU8sa0JBQW1CLFNBQVEsV0FBVztJQVBuRDs7UUFRRSxTQUFJLEdBQUcsS0FBSywwREFBcUIsQ0FBQztRQUVsQyxpQkFBWSxHQUFHLE1BQU0sQ0FBQyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxLQUFLLENBQUMsd0RBQUMsQ0FBQztLQVd4RjtJQVRDOzs7OztPQUtHO0lBQ08scUJBQXFCLENBQUMsSUFBWTtRQUMxQyxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsV0FBVyxFQUFFLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN0RCxDQUFDOzhHQWJVLGtCQUFrQjtrR0FBbEIsa0JBQWtCLDJMQUZsQixDQUFDLEVBQUUsT0FBTyxFQUFFLFdBQVcsRUFBRSxXQUFXLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyxpRENSeEUsMGZBa0JBOzsyRkRSYSxrQkFBa0I7a0JBUDlCLFNBQVM7K0JBQ0UsYUFBYSxpQkFFUixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsRUFBRSxPQUFPLEVBQUUsV0FBVyxFQUFFLFdBQVcsb0JBQW9CLEVBQUUsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFYQ29tcG9uZW50LCBOWENvbXBvbmVudCB9IGZyb20gJ0BhY29yZXgvY2RrL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbnB1dCwgc2lnbmFsLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdheC1rYmQtaXRlbScsXG4gIHRlbXBsYXRlVXJsOiAnLi9rYmQtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcm92aWRlcnM6IFt7IHByb3ZpZGU6IEFYQ29tcG9uZW50LCB1c2VFeGlzdGluZzogQVhLQkRJdGVtQ29tcG9uZW50IH1dLFxufSlcbmV4cG9ydCBjbGFzcyBBWEtCREl0ZW1Db21wb25lbnQgZXh0ZW5kcyBOWENvbXBvbmVudCB7XG4gIGtleXMgPSBpbnB1dDxzdHJpbmdbXSB8IHN0cmluZz4oKTtcblxuICBtb2RpZmllcktleXMgPSBzaWduYWwoWydjdHJsJywgJ3NoaWZ0JywgJ2FsdCcsICdtZXRhJywgJ2VzYycsICdkZWwnLCAnZGVsZXRlJywgJ3dpbiddKTtcblxuICAvKipcbiAgICogQ2FwaXRhbGl6ZXMgdGhlIGZpcnN0IGxldHRlciBvZiB0aGUgcHJvdmlkZWQgdGV4dC5cbiAgICpcbiAgICogQHBhcmFtIHRleHQgSW5wdXQgdGV4dCB0byB0cmFuc2Zvcm1cbiAgICogQHJldHVybnMgVGhlIHRleHQgd2l0aCBpdHMgZmlyc3QgY2hhcmFjdGVyIHVwcGVyY2FzZWRcbiAgICovXG4gIHByb3RlY3RlZCBjYXBpdGFsaXplRmlyc3RMZXR0ZXIodGV4dDogc3RyaW5nKSB7XG4gICAgcmV0dXJuIHRleHQuY2hhckF0KDApLnRvVXBwZXJDYXNlKCkgKyB0ZXh0LnNsaWNlKDEpO1xuICB9XG59XG4iLCI8a2JkPlxuICBAbGV0IGxvY2FsS2V5cyA9IGtleXMoKTtcbiAgQGlmICh0eXBlb2YgbG9jYWxLZXlzID09PSAnc3RyaW5nJykge1xuICAgIEBpZiAobW9kaWZpZXJLZXlzKCkuaW5jbHVkZXMobG9jYWxLZXlzLnRvTG9jYWxlTG93ZXJDYXNlKCkpKSB7XG4gICAgICB7eyBjYXBpdGFsaXplRmlyc3RMZXR0ZXIobG9jYWxLZXlzKSB9fVxuICAgIH0gQGVsc2Uge1xuICAgICAge3sgbG9jYWxLZXlzLnRvTG9jYWxlVXBwZXJDYXNlKCkgfX1cbiAgICB9XG4gIH0gQGVsc2Uge1xuICAgIEBmb3IgKGtleSBvZiBsb2NhbEtleXM7IHRyYWNrICRpbmRleCkge1xuICAgICAgQGlmIChtb2RpZmllcktleXMoKS5pbmNsdWRlcyhrZXkudG9Mb2NhbGVMb3dlckNhc2UoKSkpIHtcbiAgICAgICAge3sgY2FwaXRhbGl6ZUZpcnN0TGV0dGVyKGtleSkgfX1cbiAgICAgIH0gQGVsc2Uge1xuICAgICAgICB7eyBrZXkudG9Mb2NhbGVVcHBlckNhc2UoKSB9fVxuICAgICAgfVxuICAgIH1cbiAgfVxuPC9rYmQ+XG4iXX0=","import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';\nimport * as i0 from \"@angular/core\";\nexport class AXKBDComponent extends NXComponent {\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.2.4\", ngImport: i0, type: AXKBDComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"14.0.0\", version: \"20.2.4\", type: AXKBDComponent, isStandalone: true, selector: \"ax-kbd\", providers: [{ provide: AXComponent, useExisting: AXKBDComponent }], usesInheritance: true, ngImport: i0, template: \"<ng-content select=\\\"ax-kbd-item\\\"></ng-content>\\n\", styles: [\"ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;font-weight:600;font-size:.75rem;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{display:flex;height:1.75rem;min-width:1.75rem;align-items:center;justify-content:center;padding-inline:.375rem;color:rgba(var(--ax-sys-color-on-lightest-surface),.74);font-family:var(--ax-comp-kbd-item-font-family, var(--ax-sys-font-family));border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-lightest-surface)));border:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}.ax-dark ax-kbd{color:rgba(var(--ax-sys-color-on-lighter-surface),.84);--ax-comp-kbd-item-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-lightest-surface)}\\n\"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.2.4\", ngImport: i0, type: AXKBDComponent, decorators: [{\n            type: Component,\n            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: [\"ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;font-weight:600;font-size:.75rem;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{display:flex;height:1.75rem;min-width:1.75rem;align-items:center;justify-content:center;padding-inline:.375rem;color:rgba(var(--ax-sys-color-on-lightest-surface),.74);font-family:var(--ax-comp-kbd-item-font-family, var(--ax-sys-font-family));border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-lightest-surface)));border:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}.ax-dark ax-kbd{color:rgba(var(--ax-sys-color-on-lighter-surface),.84);--ax-comp-kbd-item-bg-color: var(--ax-sys-color-lighter-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-lightest-surface)}\\n\"] }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoia2JkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMva2JkL3NyYy9saWIva2JkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMva2JkL3NyYy9saWIva2JkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDOUQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFVdEYsTUFBTSxPQUFPLGNBQWUsU0FBUSxXQUFXOzhHQUFsQyxjQUFjO2tHQUFkLGNBQWMscURBRmQsQ0FBQyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxFQUFFLGNBQWMsRUFBRSxDQUFDLGlEQ1RwRSxvREFDQTs7MkZEVWEsY0FBYztrQkFSMUIsU0FBUzsrQkFDRSxRQUFRLGlCQUdILGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsV0FBVyxnQkFBZ0IsRUFBRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQVhDb21wb25lbnQsIE5YQ29tcG9uZW50IH0gZnJvbSAnQGFjb3JleC9jZGsvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2F4LWtiZCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9rYmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9rYmQuY29tcG9uZW50LnNjc3MnXSxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIHByb3ZpZGVyczogW3sgcHJvdmlkZTogQVhDb21wb25lbnQsIHVzZUV4aXN0aW5nOiBBWEtCRENvbXBvbmVudCB9XSxcbn0pXG5leHBvcnQgY2xhc3MgQVhLQkRDb21wb25lbnQgZXh0ZW5kcyBOWENvbXBvbmVudCB7fVxuIiwiPG5nLWNvbnRlbnQgc2VsZWN0PVwiYXgta2JkLWl0ZW1cIj48L25nLWNvbnRlbnQ+XG4iXX0=","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNvcmV4LWNvbXBvbmVudHMta2JkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvY29tcG9uZW50cy9rYmQvc3JjL2Fjb3JleC1jb21wb25lbnRzLWtiZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"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 { input, EventEmitter, signal, computed, forwardRef, Optional, SkipSelf, HostListener, ViewChild, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { input, signal, EventEmitter, computed, forwardRef, Optional, SkipSelf, HostListener, ViewChild, Input, Output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
@@ -28,12 +28,6 @@ class AXListComponent extends MXSelectionValueComponent {
          * @defaultValue false
          */
         this.showItemTooltip = input(false, ...(ngDevMode ? [{ debugName: "showItemTooltip" }] : []));
-        /**
-         * Emitted when an item in the list is clicked.
-         *
-         * @event
-         */
-        this.onItemClick = new EventEmitter();
         /**
          * Defines the data source for the list.
          *
@@ -225,7 +219,7 @@ class AXListComponent extends MXSelectionValueComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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", onScrolledIndexChanged: "onScrolledIndexChanged" }, host: { listeners: { "keydown": "_handleKeydown($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", 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 },
@@ -241,7 +235,7 @@ class AXListComponent extends MXSelectionValueComponent {
                 },
                 deps: [[new Optional(), new SkipSelf(), AX_SELECTION_DATA_TOKEN]],
             },
-        ], viewQueries: [{ 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]=\"itemHeightSignal()\"\n    [style.--item-height]=\"itemHeightSignal() + 'px'\"\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) }}\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: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-list-item-header: var(--ax-sys-color-lighter-surface);--ax-comp-list-item-footer: var(--ax-sys-color-lighter-surface)}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-header{background-color:rgba(var(--ax-comp-list-item-header))}ax-list ax-footer{background-color:rgba(var(--ax-comp-list-item-footer))}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}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;display:flex;min-height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, 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:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-surface)))}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center;width:100%}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\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: "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]=\"itemHeightSignal()\"\n    [style.--item-height]=\"itemHeightSignal() + 'px'\"\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: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-list-item-header: var(--ax-sys-color-lighter-surface);--ax-comp-list-item-footer: var(--ax-sys-color-lighter-surface)}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-header{background-color:rgba(var(--ax-comp-list-item-header))}ax-list ax-footer{background-color:rgba(var(--ax-comp-list-item-footer))}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}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;display:flex;min-height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, 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:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-surface)))}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center;width:100%}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AXListComponent, decorators: [{
             type: Component,
@@ -256,7 +250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         'disabledField',
                         'multiple',
                         'selectionMode',
-                    ], outputs: ['onValueChanged', 'disabledChange', 'readonlyChange', 'onBlur', 'onFocus'], providers: [
+                    ], outputs: ['onValueChanged', 'disabledChange', 'readonlyChange', 'onBlur', 'onFocus', 'onItemClick', 'onItemSelected'], providers: [
                         { provide: AXComponent, useExisting: AXListComponent },
                         { provide: AXFocusableComponent, useExisting: AXListComponent },
                         { provide: AXValuableComponent, useExisting: AXListComponent },
@@ -282,10 +276,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         AXTranslatorPipe,
                         AXTooltipModule,
                         AXTooltipDirective,
-                    ], 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]=\"itemHeightSignal()\"\n    [style.--item-height]=\"itemHeightSignal() + 'px'\"\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) }}\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: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-list-item-header: var(--ax-sys-color-lighter-surface);--ax-comp-list-item-footer: var(--ax-sys-color-lighter-surface)}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-header{background-color:rgba(var(--ax-comp-list-item-header))}ax-list ax-footer{background-color:rgba(var(--ax-comp-list-item-footer))}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}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;display:flex;min-height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, 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:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-surface)))}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center;width:100%}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
-        }], propDecorators: { onItemClick: [{
-                type: Output
-            }], dataSource: [{
+                    ], 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]=\"itemHeightSignal()\"\n    [style.--item-height]=\"itemHeightSignal() + 'px'\"\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: ["ax-list{--ax-comp-list-item-height: var(--ax-sys-size-base);--ax-comp-list-empty-container-height: var(--ax-sys-size-base)}ax-list{--ax-comp-list-item-selected-bg-color: var(--ax-sys-color-primary-surface), .2;--ax-comp-list-item-header: var(--ax-sys-color-lighter-surface);--ax-comp-list-item-footer: var(--ax-sys-color-lighter-surface)}ax-list{display:block;height:100%;width:100%;font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .list-container{display:flex;height:100%;flex-direction:column}ax-list .list-container.ax-height-auto{height:auto}ax-list ax-header{background-color:rgba(var(--ax-comp-list-item-header))}ax-list ax-footer{background-color:rgba(var(--ax-comp-list-item-footer))}ax-list .empty-container{display:flex;height:var(--ax-comp-list-empty-container-height);width:100%;align-items:center;justify-content:center;padding-left:var(--ax-comp-list-empty-container-padding-x, .75rem);padding-right:var(--ax-comp-list-empty-container-padding-x, .75rem)}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;display:flex;min-height:var(--ax-comp-list-item-height);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;justify-content:space-between;padding-inline-end:var(--ax-comp-list-item-padding-e, 1rem);padding-inline-start:var(--ax-comp-list-item-padding-s, .75rem);font-size:var(--ax-comp-list-font-size, .875rem);line-height:var(--ax-comp-list-line-height, 1.25rem)}ax-list .cdk-virtual-scroll-viewport ul li:hover{background:rgba(var(--ax-comp-list-item-hover-bg-color, 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:rgba(var(--ax-comp-list-item-focus-outline-color, var(--ax-sys-color-primary-surface)))}ax-list .cdk-virtual-scroll-viewport ul li .ax-label-container{display:flex;align-items:center;width:100%}ax-list .cdk-virtual-scroll-viewport ul li .ax-checkbox-label{margin-inline-start:var(--ax-comp-list-checkbox-label-margin-s, .5rem)}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-selected{background-color:rgba(var(--ax-comp-list-item-selected-bg-color))}ax-list .cdk-virtual-scroll-viewport ul li.ax-state-disabled{cursor:not-allowed;opacity:var(--ax-comp-list-item-disabled-opacity, .5)}ax-list .cdk-virtual-scroll-viewport ul li .ax-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], propDecorators: { dataSource: [{
                 type: Input
             }], itemHeight: [{
                 type: Input