import { NXComponent, AXComponent } from '@acorex/cdk/common';
import * as i0 from '@angular/core';
import { input, signal, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';

class AXKBDItemComponent extends NXComponent {
    constructor() {
        super(...arguments);
        this.keys = input(...(ngDevMode ? [undefined, { debugName: "keys" }] : []));
        this.modifierKeys = signal(['ctrl', 'shift', 'alt', 'meta', 'esc', 'del', 'delete', 'win'], ...(ngDevMode ? [{ debugName: "modifierKeys" }] : []));
    }
    /**
     * Capitalizes the first letter of the provided text.
     *
     * @param text Input text to transform
     * @returns The text with its first character uppercased
     */
    capitalizeFirstLetter(text) {
        return text.charAt(0).toUpperCase() + text.slice(1);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXKBDItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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.3.15", ngImport: i0, type: AXKBDItemComponent, decorators: [{
            type: Component,
            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" }]
        }], propDecorators: { keys: [{ type: i0.Input, args: [{ isSignal: true, alias: "keys", required: false }] }] } });

class AXKBDComponent extends NXComponent {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXKBDComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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.3.15", 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;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"] }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { AXKBDComponent, AXKBDItemComponent };
//# sourceMappingURL=acorex-components-kbd.mjs.map
