import { NXComponent, AXComponent } from '@acorex/cdk/common';
import * as i1 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import * as i0 from '@angular/core';
import { input, signal, model, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, contentChildren, effect } 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" }] : []));
        this.join = input('joined', ...(ngDevMode ? [{ debugName: "join" }] : []));
        this.look = model('solid', ...(ngDevMode ? [{ debugName: "look" }] : []));
        this.lookClass = computed(() => `ax-${this.look()} ax-default`, ...(ngDevMode ? [{ debugName: "lookClass" }] : []));
    }
    /**
     * 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.3", ngImport: i0, type: AXKBDItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 ($index < localKeys.length - 1) {\n        <ax-icon class=\"ax-icon ax-icon-plus\"></ax-icon>\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        }\n      </div>\n    </kbd>\n  }\n}\n", dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXKBDItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXKBDItemComponent }], imports: [AXDecoratorModule], 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 ($index < localKeys.length - 1) {\n        <ax-icon class=\"ax-icon ax-icon-plus\"></ax-icon>\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        }\n      </div>\n    </kbd>\n  }\n}\n" }]
        }] });

class AXKBDComponent extends NXComponent {
    constructor() {
        super(...arguments);
        this.kbdItem = contentChildren(AXKBDItemComponent, ...(ngDevMode ? [{ debugName: "kbdItem", descendants: true }] : [{ descendants: true }]));
        this.look = input(null, ...(ngDevMode ? [{ debugName: "look" }] : []));
        this.#eff = effect(() => {
            if (!this.look())
                return;
            this.kbdItem().forEach((kbd) => {
                kbd.look.set(this.look());
            });
        }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
    }
    #eff;
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXKBDComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", 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: ["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 .ax-kbd-text{font-weight:500}ax-kbd ax-kbd-item .ax-kbd-inner-text{display:flex;gap:.25rem}ax-kbd ax-kbd-item kbd{display:flex;height:1.25rem;min-width:1.25rem;align-items:center;justify-content:center;padding-inline:.25rem;font-family:var(--ax-comp-kbd-item-font-family, var(--ax-sys-font-family));border-radius:var(--ax-comp-kbd-item-border-radius, 6px)}ax-kbd ax-kbd-item kbd.ax-fill{color:rgba(var(--ax-sys-color-on-lightest-surface),.74);background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-surface)));border:1px solid transparent}ax-kbd ax-kbd-item kbd.ax-solid{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow);color:rgba(var(--ax-sys-color-on-lightest-surface),.74);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)))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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 .ax-kbd-text{font-weight:500}ax-kbd ax-kbd-item .ax-kbd-inner-text{display:flex;gap:.25rem}ax-kbd ax-kbd-item kbd{display:flex;height:1.25rem;min-width:1.25rem;align-items:center;justify-content:center;padding-inline:.25rem;font-family:var(--ax-comp-kbd-item-font-family, var(--ax-sys-font-family));border-radius:var(--ax-comp-kbd-item-border-radius, 6px)}ax-kbd ax-kbd-item kbd.ax-fill{color:rgba(var(--ax-sys-color-on-lightest-surface),.74);background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-surface)));border:1px solid transparent}ax-kbd ax-kbd-item kbd.ax-solid{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow);color:rgba(var(--ax-sys-color-on-lightest-surface),.74);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)))}\n"] }]
        }] });

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

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