import { MXInputBaseValueComponent, MXLookComponent, AXAutoFocusDirective, AXComponent, AXValuableComponent, AXEvent } from '@acorex/cdk/common';
import * as i5 from '@acorex/cdk/list-navigation';
import { AXListNavigationDirective, AXListNavigationModule } from '@acorex/cdk/list-navigation';
import * as i2 from '@acorex/components/decorators';
import { AXDecoratorModule } from '@acorex/components/decorators';
import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
import * as i1 from '@acorex/components/search-box';
import { AXSearchBoxModule } from '@acorex/components/search-box';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, viewChild, output, computed, forwardRef, ViewEncapsulation, Component, NgModule } from '@angular/core';
import * as i4 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { classes } from 'polytype';

class AXCommandComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
    constructor() {
        super(...arguments);
        this.searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
        this.searchBox = viewChild('f', ...(ngDevMode ? [{ debugName: "searchBox" }] : []));
        this.onSubmit = output();
        this.onEscape = output();
        this.onSearchBoxFocus = output();
        this.onSearchBoxBlur = output();
        this.listNavigation = viewChild('l', ...(ngDevMode ? [{ debugName: "listNavigation", read: AXListNavigationDirective }] : [{ read: AXListNavigationDirective }]));
        this.listNav = viewChild(AXListNavigationDirective, ...(ngDevMode ? [{ debugName: "listNav" }] : []));
        this.displayItems = computed(() => {
            const searchValue = this.searchValue();
            let filtered;
            if (searchValue) {
                filtered = this.filterRecursive(this.value?.items ?? [], searchValue);
            }
            else {
                filtered = [];
            }
            return filtered;
        }, ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
    }
    focusHandler(e) {
        this.onSearchBoxFocus.emit({ component: this, nativeEvent: e.nativeEvent });
    }
    blurHandler(e) {
        this.onSearchBoxBlur.emit({ component: this, nativeEvent: e.nativeEvent });
    }
    filterRecursive(items, value) {
        const lowerSignal = value.toLowerCase();
        return items
            .map((item) => {
            const isMatch = item.text?.toLowerCase().includes(lowerSignal) || item.href?.toLowerCase().includes(lowerSignal);
            const filteredChildren = item.children ? this.filterRecursive(item.children, value) : [];
            if (isMatch || filteredChildren.length > 0) {
                return {
                    ...item,
                    children: filteredChildren,
                };
            }
            return null;
        })
            .filter(Boolean);
    }
    onItemClick(item) {
        this.onSubmit.emit({ data: item, component: this });
    }
    keyPress(e, item) {
        if (e.nativeEvent.key === 'Enter' || e.nativeEvent.code === 'Space') {
            e.nativeEvent.stopPropagation();
            e.nativeEvent.preventDefault();
            this.onSubmit.emit({ data: item, component: this });
        }
    }
    searchEscapeHandler(e) {
        if (e.nativeEvent.key === 'Escape') {
            this.onEscape.emit({ component: this, nativeEvent: e.nativeEvent });
        }
        if (e.nativeEvent.key === 'ArrowDown') {
            this.listNavigation().focusOnIndex(0);
        }
    }
    closeHandler(e) {
        if (!this.listNav().activeIndex() && e.nativeEvent.key === 'ArrowUp') {
            this.searchBox().focus();
        }
        if (e.nativeEvent.key === 'ArrowUp' ||
            e.nativeEvent.key === 'ArrowDown' ||
            e.nativeEvent.key === 'Tab' ||
            e.nativeEvent.key === 'Shift')
            return;
        this.searchBox().focus();
    }
    activeHandler(l, i) {
        l?.navigateTo(i);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXCommandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXCommandComponent, isStandalone: true, selector: "ax-command", inputs: { disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", placeholder: "placeholder", value: "value", state: "state", name: "name", id: "id" }, outputs: { onSubmit: "onSubmit", onEscape: "onEscape", onSearchBoxFocus: "onSearchBoxFocus", onSearchBoxBlur: "onSearchBoxBlur" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXCommandComponent),
                multi: true,
            },
            { provide: AXComponent, useExisting: AXCommandComponent },
            { provide: AXValuableComponent, useExisting: AXCommandComponent },
        ], viewQueries: [{ propertyName: "searchBox", first: true, predicate: ["f"], descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: ["l"], descendants: true, read: AXListNavigationDirective, isSignal: true }, { propertyName: "listNav", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-search-box-container\">\n  <ax-search-box\n    #f\n    [delayTime]=\"20\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [(ngModel)]=\"searchValue\"\n    (onFocus)=\"focusHandler($event)\"\n    (onBlur)=\"blurHandler($event)\"\n    (onKeyDown)=\"searchEscapeHandler($event)\"\n    [axAutoFocus]=\"true\"\n  >\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n</div>\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n  @if (value?.pinned && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n\n      @for (item of value.pinned.items; track item.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n\n  @if (displayItems() && searchValue()) {\n    <div class=\"ax-command-item-wrapper\">\n      @for (item of displayItems(); track $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      } @empty {\n        <div class=\"ax-command-not-found\">\n          <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n    <div\n      (mouseenter)=\"activeHandler(listNavigation, a)\"\n      class=\"ax-command-item-container\"\n      [style.padding-inline-start.rem]=\"level * 0.625\"\n      [ngClass]=\"{ 'ax-command-item-container-active': a.isActive() }\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      <div class=\"ax-command-item\">\n        @if (item.icon) {\n          <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n        }\n        <span class=\"ax-command-item-text\">{{ item.text }}</span>\n      </div>\n    </div>\n\n    @if (item.children?.length) {\n      @for (child of item.children; track child.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    }\n  </ng-template>\n</div>\n\n<div class=\"ax-command-footer\">\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&uarr;', '&darr;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&#8617;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to select</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to close</ax-text>\n  </div>\n</div>\n", styles: ["ax-command{overflow:hidden;border-radius:var(--ax-sys-border-radius);outline:4px solid rgba(var(--ax-sys-color-border-light-surface));display:block}ax-command .ax-editor-container.ax-solid{--ax-comp-editor-bg-color: var(--ax-sys-color-light-surface)}ax-command .ax-search-box-container{padding:.625rem}ax-command .ax-command-container{max-height:20rem;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:.625rem}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{font-weight:500;font-size:.9rem;color:rgba(var(--ax-sys-color-neutral));padding:.625rem}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:.625rem}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;padding:.5rem;border:1px solid transparent}ax-command .ax-command-container .ax-command-item-container .ax-command-item{display:flex;align-items:center;gap:.5rem}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-weight:500;color:rgba(var(--ax-sys-color-on-lightest-surface));font-size:.875rem}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:rgba(var(--ax-sys-color-neutral))}ax-command .ax-command-container .ax-command-not-found{padding:1rem;display:flex;justify-content:center}ax-command .ax-command-container .ax-command-item-container-active{outline:2px solid transparent;outline-offset:2px;--tw-border-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-light-surface))}ax-command .ax-kbd{display:flex;justify-content:center;align-items:center;height:100%}ax-command .ax-command-footer{border-bottom-right-radius:var(--ax-sys-border-radius);border-bottom-left-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-lighter-surface));color:rgba(var(--ax-sys-color-neutral));padding:.75rem;display:flex;align-items:center;gap:1.5rem}ax-command .ax-command-footer .ax-kbd-footer{display:flex;justify-content:center;align-items:center;gap:.7rem}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-command .ax-command-footer .ax-kbd-text{font-weight:600;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i5.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i5.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd" }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys"] }, { kind: "directive", type: AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXCommandComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-command', encapsulation: ViewEncapsulation.None, imports: [
                        AXSearchBoxModule,
                        AXDecoratorModule,
                        CommonModule,
                        FormsModule,
                        AXListNavigationModule,
                        AXKBDComponent,
                        AXKBDItemComponent,
                        AXAutoFocusDirective,
                    ], providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXCommandComponent),
                            multi: true,
                        },
                        { provide: AXComponent, useExisting: AXCommandComponent },
                        { provide: AXValuableComponent, useExisting: AXCommandComponent },
                    ], inputs: ['disabled', 'readonly', 'tabIndex', 'placeholder', 'value', 'state', 'name', 'id'], template: "<div class=\"ax-search-box-container\">\n  <ax-search-box\n    #f\n    [delayTime]=\"20\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [(ngModel)]=\"searchValue\"\n    (onFocus)=\"focusHandler($event)\"\n    (onBlur)=\"blurHandler($event)\"\n    (onKeyDown)=\"searchEscapeHandler($event)\"\n    [axAutoFocus]=\"true\"\n  >\n    <ax-clear-button></ax-clear-button>\n  </ax-search-box>\n</div>\n\n<div #l class=\"ax-command-container\" #s=\"axListNavigation\" axListNavigation (onKeypress)=\"closeHandler($event)\">\n  @if (value?.pinned && !searchValue()) {\n    <div class=\"ax-command-item-pinned-container\">\n      <ax-text class=\"ax-command-item-pinned-text\">{{ value.pinned.title }}</ax-text>\n\n      @for (item of value.pinned.items; track item.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    </div>\n  }\n\n  @if (displayItems() && searchValue()) {\n    <div class=\"ax-command-item-wrapper\">\n      @for (item of displayItems(); track $index) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item, level: 1, listNavigation: s }\"\n        >\n        </ng-container>\n      } @empty {\n        <div class=\"ax-command-not-found\">\n          <ax-text>No results found for \"{{ searchValue() }}\"</ax-text>\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #renderItem let-item let-level=\"level\" let-listNavigation=\"listNavigation\">\n    <div\n      (mouseenter)=\"activeHandler(listNavigation, a)\"\n      class=\"ax-command-item-container\"\n      [style.padding-inline-start.rem]=\"level * 0.625\"\n      [ngClass]=\"{ 'ax-command-item-container-active': a.isActive() }\"\n      #a=\"axListNavigationItem\"\n      axListNavigationItem\n      (click)=\"onItemClick(item)\"\n      (onKeypress)=\"keyPress($event, item)\"\n    >\n      <div class=\"ax-command-item\">\n        @if (item.icon) {\n          <i class=\"ax-command-item-icon\" [class]=\"item.icon\"></i>\n        }\n        <span class=\"ax-command-item-text\">{{ item.text }}</span>\n      </div>\n    </div>\n\n    @if (item.children?.length) {\n      @for (child of item.children; track child.id) {\n        <ng-container\n          [ngTemplateOutlet]=\"renderItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: child, level: level + 1, listNavigation: s }\"\n        >\n        </ng-container>\n      }\n    }\n  </ng-template>\n</div>\n\n<div class=\"ax-command-footer\">\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&uarr;', '&darr;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to navigate</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['&#8617;']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to select</ax-text>\n  </div>\n\n  <div class=\"ax-kbd-footer\">\n    <ax-kbd class=\"ax-kbd\">\n      <ax-kbd-item [keys]=\"['esc']\"></ax-kbd-item>\n    </ax-kbd>\n    <ax-text class=\"ax-kbd-text\">to close</ax-text>\n  </div>\n</div>\n", styles: ["ax-command{overflow:hidden;border-radius:var(--ax-sys-border-radius);outline:4px solid rgba(var(--ax-sys-color-border-light-surface));display:block}ax-command .ax-editor-container.ax-solid{--ax-comp-editor-bg-color: var(--ax-sys-color-light-surface)}ax-command .ax-search-box-container{padding:.625rem}ax-command .ax-command-container{max-height:20rem;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;background-color:rgba(var(--ax-sys-color-lightest-surface));color:rgba(var(--ax-sys-color-on-surface))}ax-command .ax-command-container .ax-command-item-pinned-container{padding-inline:.625rem}ax-command .ax-command-container .ax-command-item-pinned-container .ax-command-item-pinned-text{font-weight:500;font-size:.9rem;color:rgba(var(--ax-sys-color-neutral));padding:.625rem}ax-command .ax-command-container .ax-command-item-wrapper{padding-inline:.625rem}ax-command .ax-command-container .ax-command-item-container{cursor:pointer;padding:.5rem;border:1px solid transparent}ax-command .ax-command-container .ax-command-item-container .ax-command-item{display:flex;align-items:center;gap:.5rem}ax-command .ax-command-container .ax-command-item-container .ax-command-item-text{font-weight:500;color:rgba(var(--ax-sys-color-on-lightest-surface));font-size:.875rem}ax-command .ax-command-container .ax-command-item-container .ax-command-item-icon{color:rgba(var(--ax-sys-color-neutral))}ax-command .ax-command-container .ax-command-not-found{padding:1rem;display:flex;justify-content:center}ax-command .ax-command-container .ax-command-item-container-active{outline:2px solid transparent;outline-offset:2px;--tw-border-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface));border-radius:var(--ax-sys-border-radius);border:1px solid rgba(var(--ax-sys-color-border-light-surface))}ax-command .ax-kbd{display:flex;justify-content:center;align-items:center;height:100%}ax-command .ax-command-footer{border-bottom-right-radius:var(--ax-sys-border-radius);border-bottom-left-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-lighter-surface));color:rgba(var(--ax-sys-color-neutral));padding:.75rem;display:flex;align-items:center;gap:1.5rem}ax-command .ax-command-footer .ax-kbd-footer{display:flex;justify-content:center;align-items:center;gap:.7rem}ax-command .ax-command-footer .ax-kbd-footer kbd{background-color:rgba(var(--ax-sys-color-lightest-surface))}ax-command .ax-command-footer .ax-kbd-text{font-weight:600;font-size:.9rem}\n"] }]
        }], propDecorators: { searchBox: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onEscape: [{ type: i0.Output, args: ["onEscape"] }], onSearchBoxFocus: [{ type: i0.Output, args: ["onSearchBoxFocus"] }], onSearchBoxBlur: [{ type: i0.Output, args: ["onSearchBoxBlur"] }], listNavigation: [{ type: i0.ViewChild, args: ['l', { ...{ read: AXListNavigationDirective }, isSignal: true }] }], listNav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }] } });

const COMPONENT = [AXCommandComponent];
const MODULES = [];
class AXCommandModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXCommandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: AXCommandModule, imports: [AXCommandComponent], exports: [AXCommandComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXCommandModule, imports: [MODULES, COMPONENT] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXCommandModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [...MODULES, ...COMPONENT],
                    exports: [...COMPONENT],
                    providers: [],
                }]
        }] });

class AXCommandComponentEvent extends AXEvent {
}

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

export { AXCommandComponent, AXCommandComponentEvent, AXCommandModule };
//# sourceMappingURL=acorex-components-command.mjs.map
