@frame-ui-ng/components 0.1.0-beta.0

package/fesm2022/frame-ui-ng-components-command.mjs

@@ -0,0 +1,658 @@
+import { Dialog, DialogRef } from '@angular/cdk/dialog';
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, input, booleanAttribute, Directive, DestroyRef, ViewContainerRef, output, signal, Injectable, InjectionToken, computed, ElementRef, afterNextRender, effect, model, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+const DEFAULT_PANEL_CLASS = 'frame-command-dialog__overlay-pane';
+const DEFAULT_BACKDROP_CLASS = 'frame-command-dialog__backdrop';
+class FrCommandDialog {
+    templateRef = inject((TemplateRef));
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledBy = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    ariaDescribedBy = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    backdropClass = input(null, ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
+    closeOnDestroy = input(true, { ...(ngDevMode ? { debugName: "closeOnDestroy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    closeOnNavigation = input(true, { ...(ngDevMode ? { debugName: "closeOnNavigation" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    direction = input(null, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    disableClose = input(false, { ...(ngDevMode ? { debugName: "disableClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    height = input(null, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    id = input(null, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    maxHeight = input(null, ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+    maxWidth = input(null, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    minHeight = input(null, ...(ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []));
+    minWidth = input(null, ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
+    panelClass = input(null, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    role = input('dialog', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    buildConfig(viewContainerRef) {
+        return {
+            ariaLabel: this.ariaLabel() ?? undefined,
+            ariaLabelledBy: this.ariaLabelledBy() ?? undefined,
+            ariaDescribedBy: this.ariaDescribedBy() ?? undefined,
+            backdropClass: this.backdropClass() ?? undefined,
+            closeOnDestroy: this.closeOnDestroy(),
+            closeOnNavigation: this.closeOnNavigation(),
+            direction: this.direction() ?? undefined,
+            disableClose: this.disableClose(),
+            height: this.height() ?? undefined,
+            id: this.id() ?? undefined,
+            maxHeight: this.maxHeight() ?? undefined,
+            maxWidth: this.maxWidth() ?? undefined,
+            minHeight: this.minHeight() ?? undefined,
+            minWidth: this.minWidth() ?? undefined,
+            panelClass: this.panelClass() ?? undefined,
+            role: this.role(),
+            viewContainerRef,
+            width: this.width() ?? undefined,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandDialog, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCommandDialog, isStandalone: true, selector: "ng-template[frCommandDialog]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnDestroy: { classPropertyName: "closeOnDestroy", publicName: "closeOnDestroy", isSignal: true, isRequired: false, transformFunction: null }, closeOnNavigation: { classPropertyName: "closeOnNavigation", publicName: "closeOnNavigation", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, disableClose: { classPropertyName: "disableClose", publicName: "disableClose", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["frCommandDialog"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandDialog, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[frCommandDialog]',
+                    exportAs: 'frCommandDialog',
+                    standalone: true,
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], closeOnDestroy: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnDestroy", required: false }] }], closeOnNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnNavigation", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], disableClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableClose", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+class FrCommandDialogTrigger {
+    commandDialog = inject(FrCommandService);
+    destroyRef = inject(DestroyRef);
+    viewContainerRef = inject(ViewContainerRef);
+    dialogRef = null;
+    content = input(null, { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'frCommandDialogTrigger' });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    opened = output();
+    closed = output();
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    open() {
+        if (this.disabled() || this.isOpen()) {
+            return;
+        }
+        const content = this.content();
+        if (!content) {
+            return;
+        }
+        const templateRef = content instanceof FrCommandDialog ? content.templateRef : content;
+        const config = content instanceof FrCommandDialog
+            ? content.buildConfig(this.viewContainerRef)
+            : { viewContainerRef: this.viewContainerRef };
+        this.dialogRef = this.commandDialog.open(templateRef, config);
+        this.isOpen.set(true);
+        this.opened.emit(this.dialogRef);
+        this.dialogRef.closed.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((result) => {
+            this.isOpen.set(false);
+            this.dialogRef = null;
+            this.closed.emit(result);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandDialogTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCommandDialogTrigger, isStandalone: true, selector: "[frCommandDialogTrigger]", inputs: { content: { classPropertyName: "content", publicName: "frCommandDialogTrigger", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "open()" }, properties: { "attr.aria-haspopup": "\"dialog\"", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.disabled": "disabled() ? \"\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" }, classAttribute: "frame-command-dialog__trigger" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandDialogTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommandDialogTrigger]',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command-dialog__trigger',
+                        '[attr.aria-haspopup]': '"dialog"',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '(click)': 'open()',
+                    },
+                }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "frCommandDialogTrigger", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+class FrCommandService {
+    dialog = inject(Dialog);
+    open(content, config = {}) {
+        const dialogRef = this.dialog.open(content, this.withDefaultClasses(config));
+        if (isComponentType(content)) {
+            const host = dialogRef.componentRef?.location.nativeElement;
+            host?.style.setProperty('display', 'block');
+            host?.style.setProperty('inline-size', '100%');
+        }
+        return dialogRef;
+    }
+    closeAll() {
+        this.dialog.closeAll();
+    }
+    withDefaultClasses(config) {
+        return {
+            ariaModal: true,
+            autoFocus: 'first-tabbable',
+            restoreFocus: true,
+            width: 'min(calc(100vw - 2rem), 48rem)',
+            maxWidth: 'calc(100vw - 2rem)',
+            ...config,
+            panelClass: mergeClassList(config.panelClass, DEFAULT_PANEL_CLASS),
+            backdropClass: mergeClassList(config.backdropClass, DEFAULT_BACKDROP_CLASS),
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function isComponentType(value) {
+    return typeof value === 'function';
+}
+function mergeClassList(classList, defaultClass) {
+    const classes = Array.isArray(classList)
+        ? classList
+        : classList
+            ? classList.split(/\s+/)
+            : [];
+    return Array.from(new Set([defaultClass, ...classes].filter(Boolean)));
+}
+
+const FR_COMMAND = new InjectionToken('FrCommand');
+const FR_COMMAND_GROUP = new InjectionToken('FrCommandGroup');
+
+class FrCommandGroup {
+    items = new Set();
+    itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
+    forceMount = input(false, { ...(ngDevMode ? { debugName: "forceMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    heading = input(null, ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    hidden = computed(() => {
+        this.itemsVersion();
+        return !this.forceMount() && Array.from(this.items).every((item) => !item.isVisible());
+    }, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    registerItem(item) {
+        this.items.add(item);
+        this.bumpItems();
+    }
+    unregisterItem(item) {
+        this.items.delete(item);
+        this.bumpItems();
+    }
+    bumpItems() {
+        this.itemsVersion.update((value) => value + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCommandGroup, isStandalone: true, selector: "[frCommandGroup]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "heading()", "attr.data-hidden": "hidden() ? \"\" : null" }, classAttribute: "frame-command__group" }, providers: [{ provide: FR_COMMAND_GROUP, useExisting: FrCommandGroup }], exportAs: ["frCommandGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommandGroup]',
+                    exportAs: 'frCommandGroup',
+                    standalone: true,
+                    providers: [{ provide: FR_COMMAND_GROUP, useExisting: FrCommandGroup }],
+                    host: {
+                        class: 'frame-command__group',
+                        '[attr.aria-label]': 'heading()',
+                        '[attr.data-hidden]': 'hidden() ? "" : null',
+                        role: 'group',
+                    },
+                }]
+        }], propDecorators: { forceMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMount", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }] } });
+class FrCommandGroupHeading {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandGroupHeading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandGroupHeading, isStandalone: true, selector: "[frCommandGroupHeading]", host: { classAttribute: "frame-command__group-heading" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandGroupHeading, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommandGroupHeading]',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command__group-heading',
+                    },
+                }]
+        }] });
+
+class FrCommandInput {
+    elementRef = inject(ElementRef);
+    command = inject(FR_COMMAND);
+    placeholder = input('Type a command or search...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    handleInput() {
+        this.command.setQuery(this.elementRef.nativeElement.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandInput, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCommandInput, isStandalone: true, selector: "input[frCommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "autocomplete": "off", "role": "searchbox", "spellcheck": "false", "type": "text" }, listeners: { "input": "handleInput()" }, properties: { "attr.aria-disabled": "command.disabled() ? \"true\" : null", "attr.disabled": "command.disabled() ? \"\" : null", "attr.placeholder": "placeholder()", "value": "command.query()" }, classAttribute: "frame-command__input" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[frCommandInput]',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command__input',
+                        '[attr.aria-disabled]': 'command.disabled() ? "true" : null',
+                        '[attr.disabled]': 'command.disabled() ? "" : null',
+                        '[attr.placeholder]': 'placeholder()',
+                        autocomplete: 'off',
+                        role: 'searchbox',
+                        spellcheck: 'false',
+                        type: 'text',
+                        '[value]': 'command.query()',
+                        '(input)': 'handleInput()',
+                    },
+                }]
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+class FrCommandItem {
+    destroyRef = inject(DestroyRef);
+    elementRef = inject(ElementRef);
+    command = inject(FR_COMMAND);
+    group = inject(FR_COMMAND_GROUP, { optional: true });
+    mutationObserver = null;
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    itemKeywords = input([], { ...(ngDevMode ? { debugName: "itemKeywords" } : /* istanbul ignore next */ {}), alias: 'keywords' });
+    itemLabel = input(null, { ...(ngDevMode ? { debugName: "itemLabel" } : /* istanbul ignore next */ {}), alias: 'label' });
+    valueInput = input(undefined, { ...(ngDevMode ? { debugName: "valueInput" } : /* istanbul ignore next */ {}), alias: 'value' });
+    itemSelected = output({ alias: 'selected' });
+    resolvedLabel = signal('', ...(ngDevMode ? [{ debugName: "resolvedLabel" }] : /* istanbul ignore next */ []));
+    label = computed(() => this.itemLabel() ?? this.resolvedLabel(), ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    keywords = computed(() => {
+        const keywords = this.itemKeywords();
+        return typeof keywords === 'string'
+            ? keywords.split(/\s*,\s*/).filter(Boolean)
+            : [...keywords];
+    }, ...(ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []));
+    value = computed(() => this.valueInput() ?? this.label(), ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    visible = computed(() => this.command.filteredItemVisible(this.label(), this.keywords()), ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.command.registerItem(this);
+        this.group?.registerItem(this);
+        this.destroyRef.onDestroy(() => {
+            this.mutationObserver?.disconnect();
+            this.command.unregisterItem(this);
+            this.group?.unregisterItem(this);
+        });
+        afterNextRender(() => {
+            this.refreshResolvedLabel();
+            this.observeTextChanges();
+        });
+        effect(() => {
+            this.label();
+            this.keywords();
+            this.command.visibleCount();
+        });
+    }
+    isVisible() {
+        return this.visible();
+    }
+    isHighlighted() {
+        return this.command.isHighlighted(this);
+    }
+    isSelected() {
+        return this.command.isItemSelected(this.value());
+    }
+    scrollIntoView() {
+        this.elementRef.nativeElement.scrollIntoView?.({
+            block: 'nearest',
+            inline: 'nearest',
+        });
+    }
+    select() {
+        if (this.disabled() || !this.isVisible()) {
+            return;
+        }
+        this.command.selectItem(this);
+        this.itemSelected.emit(this.value());
+    }
+    highlightSelf() {
+        const index = this.command.visibleItems().indexOf(this);
+        if (index >= 0) {
+            this.command.highlightedIndex.set(index);
+        }
+    }
+    resolveLabel() {
+        return this.elementRef.nativeElement.textContent?.trim() ?? '';
+    }
+    refreshResolvedLabel() {
+        this.resolvedLabel.set(this.resolveLabel());
+    }
+    observeTextChanges() {
+        if (typeof MutationObserver === 'undefined' || this.itemLabel() !== null) {
+            return;
+        }
+        this.mutationObserver = new MutationObserver(() => this.refreshResolvedLabel());
+        this.mutationObserver.observe(this.elementRef.nativeElement, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCommandItem, isStandalone: true, selector: "button[frCommandItem]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, itemKeywords: { classPropertyName: "itemKeywords", publicName: "keywords", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, valueInput: { classPropertyName: "valueInput", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "selected" }, host: { attributes: { "role": "option", "type": "button" }, listeners: { "click": "select()", "mouseenter": "highlightSelf()" }, properties: { "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.aria-selected": "isHighlighted() ? \"true\" : \"false\"", "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-hidden": "isVisible() ? null : \"\"", "attr.data-highlighted": "isHighlighted() ? \"\" : null", "attr.data-selected": "isSelected() ? \"\" : null", "attr.disabled": "disabled() ? \"\" : null" }, classAttribute: "frame-command__item" }, exportAs: ["frCommandItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[frCommandItem]',
+                    exportAs: 'frCommandItem',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command__item',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.aria-selected]': 'isHighlighted() ? "true" : "false"',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-hidden]': 'isVisible() ? null : ""',
+                        '[attr.data-highlighted]': 'isHighlighted() ? "" : null',
+                        '[attr.data-selected]': 'isSelected() ? "" : null',
+                        '[attr.disabled]': 'disabled() ? "" : null',
+                        role: 'option',
+                        type: 'button',
+                        '(click)': 'select()',
+                        '(mouseenter)': 'highlightSelf()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], itemKeywords: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywords", required: false }] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], valueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], itemSelected: [{ type: i0.Output, args: ["selected"] }] } });
+class FrCommandItemIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandItemIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandItemIcon, isStandalone: true, selector: "[frCommandItemIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-command__item-icon" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandItemIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommandItemIcon]',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command__item-icon',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+class FrCommandShortcut {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandShortcut, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandShortcut, isStandalone: true, selector: "[frCommandShortcut]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "frame-command__shortcut" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandShortcut, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommandShortcut]',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command__shortcut',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+
+class FrCommandList {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandList, isStandalone: true, selector: "[frCommandList]", host: { attributes: { "role": "listbox" }, classAttribute: "frame-command__list" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommandList]',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command__list',
+                        role: 'listbox',
+                    },
+                }]
+        }] });
+class FrCommandEmpty {
+    command = inject(FR_COMMAND);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandEmpty, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandEmpty, isStandalone: true, selector: "[frCommandEmpty]", host: { properties: { "attr.hidden": "command.visibleCount() > 0 ? \"\" : null" }, classAttribute: "frame-command__empty" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandEmpty, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommandEmpty]',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command__empty',
+                        '[attr.hidden]': 'command.visibleCount() > 0 ? "" : null',
+                    },
+                }]
+        }] });
+
+const DEFAULT_FILTER = (query, label, keywords) => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) {
+        return true;
+    }
+    return [label, ...keywords].some((value) => value.toLowerCase().includes(normalizedQuery));
+};
+class FrCommand {
+    dialogRef = inject(DialogRef, { optional: true });
+    items = new Set();
+    itemsVersion = signal(0, ...(ngDevMode ? [{ debugName: "itemsVersion" }] : /* istanbul ignore next */ []));
+    closeOnSelect = input(false, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    filter = input(DEFAULT_FILTER, ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    itemSelected = output();
+    queryChange = output();
+    query = signal('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    highlightedIndex = signal(0, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
+    selectedValue = computed(() => this.value(), ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.query();
+            this.itemsVersion();
+            this.normalizeHighlight();
+        });
+        effect(() => {
+            this.highlightedIndex();
+            this.itemsVersion();
+            this.scrollHighlightedItemIntoView();
+        });
+    }
+    registerItem(item) {
+        this.items.add(item);
+        this.bumpItems();
+    }
+    unregisterItem(item) {
+        this.items.delete(item);
+        this.bumpItems();
+    }
+    visibleItems() {
+        this.itemsVersion();
+        return Array.from(this.items).filter((item) => item.isVisible() && !item.disabled());
+    }
+    visibleCount() {
+        return this.visibleItems().length;
+    }
+    filteredItemVisible(label, keywords) {
+        return this.filter()(this.query(), label, keywords);
+    }
+    isHighlighted(item) {
+        return this.visibleItems()[this.highlightedIndex()] === item;
+    }
+    isItemSelected(value) {
+        return Object.is(this.value(), value);
+    }
+    setQuery(query) {
+        this.query.set(query);
+        this.queryChange.emit(query);
+        this.highlightedIndex.set(0);
+    }
+    moveHighlight(delta) {
+        const count = this.visibleCount();
+        if (count === 0) {
+            this.highlightedIndex.set(0);
+            return;
+        }
+        const next = this.highlightedIndex() + delta;
+        if (this.loop()) {
+            this.highlightedIndex.set((next + count) % count);
+            return;
+        }
+        this.highlightedIndex.set(Math.max(0, Math.min(next, count - 1)));
+    }
+    highlightFirst() {
+        this.highlightedIndex.set(0);
+    }
+    highlightLast() {
+        this.highlightedIndex.set(Math.max(0, this.visibleCount() - 1));
+    }
+    selectHighlighted() {
+        this.visibleItems()[this.highlightedIndex()]?.select();
+    }
+    selectItem(item) {
+        const value = item.value();
+        this.value.set(value);
+        this.itemSelected.emit(value);
+        if (this.closeOnSelect()) {
+            this.close(value);
+        }
+    }
+    close(value) {
+        this.dialogRef?.close(value);
+    }
+    handleKeydown(event) {
+        if (this.disabled()) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.moveHighlight(1);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.moveHighlight(-1);
+            return;
+        }
+        if (event.key === 'Home') {
+            event.preventDefault();
+            this.highlightFirst();
+            return;
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            this.highlightLast();
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.selectHighlighted();
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    normalizeHighlight() {
+        const count = this.visibleCount();
+        if (count === 0) {
+            this.highlightedIndex.set(0);
+            return;
+        }
+        if (this.highlightedIndex() >= count) {
+            this.highlightedIndex.set(count - 1);
+        }
+    }
+    bumpItems() {
+        this.itemsVersion.update((value) => value + 1);
+    }
+    scrollHighlightedItemIntoView() {
+        this.visibleItems()[this.highlightedIndex()]?.scrollIntoView();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommand, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.16", type: FrCommand, isStandalone: true, selector: "[frCommand], frame-command", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", itemSelected: "itemSelected", queryChange: "queryChange" }, host: { listeners: { "keydown": "handleKeydown($event)" }, properties: { "attr.data-disabled": "disabled() ? \"\" : null", "attr.data-state": "visibleCount() > 0 ? \"results\" : \"empty\"" }, classAttribute: "frame-command" }, providers: [{ provide: FR_COMMAND, useExisting: FrCommand }], exportAs: ["frCommand"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommand, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommand], frame-command',
+                    exportAs: 'frCommand',
+                    standalone: true,
+                    providers: [{ provide: FR_COMMAND, useExisting: FrCommand }],
+                    host: {
+                        class: 'frame-command',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.data-state]': 'visibleCount() > 0 ? "results" : "empty"',
+                        '(keydown)': 'handleKeydown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }] } });
+
+class FrCommandSeparator {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.16", type: FrCommandSeparator, isStandalone: true, selector: "[frCommandSeparator]", host: { attributes: { "role": "separator" }, classAttribute: "frame-command__separator" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[frCommandSeparator]',
+                    standalone: true,
+                    host: {
+                        class: 'frame-command__separator',
+                        role: 'separator',
+                    },
+                }]
+        }] });
+
+class FrCommandModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.16", ngImport: i0, type: FrCommandModule, imports: [FrCommand,
+            FrCommandDialog,
+            FrCommandDialogTrigger,
+            FrCommandEmpty,
+            FrCommandGroup,
+            FrCommandGroupHeading,
+            FrCommandInput,
+            FrCommandItem,
+            FrCommandItemIcon,
+            FrCommandList,
+            FrCommandSeparator,
+            FrCommandShortcut], exports: [FrCommand,
+            FrCommandDialog,
+            FrCommandDialogTrigger,
+            FrCommandEmpty,
+            FrCommandGroup,
+            FrCommandGroupHeading,
+            FrCommandInput,
+            FrCommandItem,
+            FrCommandItemIcon,
+            FrCommandList,
+            FrCommandSeparator,
+            FrCommandShortcut] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FrCommandModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FrCommand,
+                        FrCommandDialog,
+                        FrCommandDialogTrigger,
+                        FrCommandEmpty,
+                        FrCommandGroup,
+                        FrCommandGroupHeading,
+                        FrCommandInput,
+                        FrCommandItem,
+                        FrCommandItemIcon,
+                        FrCommandList,
+                        FrCommandSeparator,
+                        FrCommandShortcut,
+                    ],
+                    exports: [
+                        FrCommand,
+                        FrCommandDialog,
+                        FrCommandDialogTrigger,
+                        FrCommandEmpty,
+                        FrCommandGroup,
+                        FrCommandGroupHeading,
+                        FrCommandInput,
+                        FrCommandItem,
+                        FrCommandItemIcon,
+                        FrCommandList,
+                        FrCommandSeparator,
+                        FrCommandShortcut,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FrCommand, FrCommandDialog, FrCommandDialogTrigger, FrCommandEmpty, FrCommandGroup, FrCommandGroupHeading, FrCommandInput, FrCommandItem, FrCommandItemIcon, FrCommandList, FrCommandModule, FrCommandSeparator, FrCommandService, FrCommandShortcut };
+//# sourceMappingURL=frame-ui-ng-components-command.mjs.map