@cdevhub/ngx-tw 0.2.0

package/fesm2022/cdevhub-ngx-tw-command-palette.mjs

@@ -0,0 +1,721 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, input, Directive, output, viewChild, inject, computed, ChangeDetectionStrategy, Component, TemplateRef, model, ViewContainerRef, Injector, DestroyRef, contentChildren, contentChild, signal, linkedSignal, effect, untracked } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { FocusTrapFactory, LiveAnnouncer } from '@angular/cdk/a11y';
+import { Subscription } from 'rxjs';
+import { tv } from 'tailwind-variants';
+
+/** Injection token providing a `CommandPaletteRef` to palette overlay content. */
+const COMMAND_PALETTE_REF = new InjectionToken('COMMAND_PALETTE_REF');
+
+// ── Constants ──
+/** Duration of leave animation (ms) — matches scale-out/fade-out in theme/_base.css. */
+const ANIMATION_DURATION = 120;
+/** Debounce window (ms) for live-region result announcements while typing. */
+const ANNOUNCE_DEBOUNCE = 200;
+let nextPaletteId = 0;
+// ── Variant config ──
+const commandPaletteVariants = tv({
+    slots: {
+        panel: 'pointer-events-auto w-full max-w-xl mt-[15vh] bg-surface-overlay text-fg rounded-lg border border-border shadow-md overflow-hidden flex flex-col max-h-[70vh] outline-none',
+        searchWrapper: 'flex items-center gap-3 border-b border-border px-4',
+        searchInput: 'flex-1 bg-transparent border-0 outline-none text-fg placeholder:text-fg-subtle',
+        searchIcon: 'size-5 shrink-0 text-fg-muted',
+        list: 'flex-1 overflow-y-auto py-1',
+        groupHeader: 'px-4 text-xs font-semibold uppercase tracking-wide text-fg-subtle',
+        item: 'relative flex items-center gap-3 px-4 select-none transition-colors duration-normal motion-reduce:transition-none text-fg outline-none',
+        itemBody: 'flex-1 min-w-0 flex flex-col',
+        itemLabel: 'min-w-0 truncate',
+        itemDescription: 'block text-xs text-fg-muted mt-0.5 min-w-0 truncate',
+        itemShortcut: 'ml-auto flex items-center gap-1 pl-3 shrink-0',
+        itemKbd: 'inline-flex items-center justify-center min-w-5 h-5 px-1 rounded-md border border-border bg-surface-muted text-fg-muted text-2xs font-mono',
+        empty: 'px-4 py-10 text-center text-sm text-fg-muted',
+        footer: 'border-t border-border px-4 py-2 bg-surface-muted',
+    },
+    variants: {
+        size: {
+            xs: {
+                item: 'py-1 text-xs',
+                searchInput: 'py-2 text-xs',
+                groupHeader: 'pt-2 pb-0.5',
+            },
+            sm: {
+                item: 'py-1.5 text-xs',
+                searchInput: 'py-2.5 text-xs',
+                groupHeader: 'pt-2 pb-0.5',
+            },
+            md: {
+                item: 'py-2 text-sm',
+                searchInput: 'py-3 text-sm',
+                groupHeader: 'pt-3 pb-1',
+            },
+            lg: {
+                item: 'py-2.5 text-sm',
+                searchInput: 'py-3.5 text-base',
+                groupHeader: 'pt-3 pb-1',
+            },
+            xl: {
+                item: 'py-3 text-base',
+                searchInput: 'py-4 text-base',
+                groupHeader: 'pt-4 pb-1',
+            },
+        },
+        // Active option uses `bg-surface-sunken` (one step recessed from `bg-surface-muted`)
+        // so the activedescendant-listbox carve-out remains unambiguously distinguishable
+        // from the hovered non-active state — DOM focus stays on the combobox input, so
+        // this background shift is the only visual signal for the keyboard-active option.
+        active: {
+            true: { item: 'bg-surface-sunken' },
+            false: { item: '' },
+        },
+        disabled: {
+            true: { item: 'opacity-50 pointer-events-none cursor-default' },
+            false: { item: 'cursor-pointer hover:bg-surface-muted' },
+        },
+    },
+    compoundVariants: [
+        {
+            // When an item is BOTH active and enabled, drop the non-active hover token so
+            // hovering the keyboard-active option doesn't visually demote it to the
+            // hovered-non-active state. Without this, twMerge keeps both background classes
+            // and the active sunken fill flips to muted on hover.
+            active: true,
+            disabled: false,
+            class: { item: 'hover:bg-surface-sunken' },
+        },
+    ],
+    defaultVariants: { size: 'md', active: false, disabled: false },
+}, { twMerge: true });
+// ── Helpers ──
+function normalizeShortcut(value) {
+    if (value == null)
+        return [];
+    return Array.isArray(value) ? value : [value];
+}
+function defaultFilter(items, query) {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed)
+        return items;
+    return items.filter((item) => {
+        if (item.label.toLowerCase().includes(trimmed))
+            return true;
+        if (item.group && item.group.toLowerCase().includes(trimmed))
+            return true;
+        if (item.keywords) {
+            for (const keyword of item.keywords) {
+                if (keyword.toLowerCase().includes(trimmed))
+                    return true;
+            }
+        }
+        return false;
+    });
+}
+function findFirstEnabled(items) {
+    for (let i = 0; i < items.length; i++) {
+        if (!items[i].data.disabled)
+            return i;
+    }
+    return 0;
+}
+function findLastEnabled(items) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        if (!items[i].data.disabled)
+            return i;
+    }
+    return items.length - 1;
+}
+// ── Group directive ──
+/** Optional explicit grouping wrapper. Items placed inside inherit its label. */
+class CommandPaletteGroupDirective {
+    /** Group heading text shown above the items. Required. */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: CommandPaletteGroupDirective, isStandalone: true, selector: "[twCommandPaletteGroup]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twCommandPaletteGroup]',
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+// ── Item directive (component with projection) ──
+/** A declarative palette item. Consumers project its rendered content as children. */
+class CommandPaletteItemDirective {
+    /** Stable identifier for the item. Used as DOM id and in selection payloads. Required. */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Plain-text label used for filtering and default rendering. Defaults to `''`. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Additional search keywords that match the query but are not rendered. Defaults to `[]`. */
+    keywords = input([], ...(ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []));
+    /** Explicit group name. Overrides any enclosing `twCommandPaletteGroup`. Defaults to `undefined`. */
+    group = input(undefined, ...(ngDevMode ? [{ debugName: "group" }] : /* istanbul ignore next */ []));
+    /** Whether the item is disabled. Disabled items render but cannot be activated. Defaults to `false`. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Keyboard shortcut hint. A string renders as one kbd; an array renders each key separately. Defaults to `undefined`. */
+    shortcut = input(undefined, ...(ngDevMode ? [{ debugName: "shortcut" }] : /* istanbul ignore next */ []));
+    /** Secondary description text rendered under the label. Defaults to `''`. */
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Callback run before `activated` emits. Defaults to `undefined`. */
+    run = input(undefined, ...(ngDevMode ? [{ debugName: "run" }] : /* istanbul ignore next */ []));
+    /** Fires when this specific item is activated (Enter or click). */
+    activated = output();
+    /** Projected template used by the palette overlay to render this item's content. */
+    contentTemplate = viewChild('content', ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    parentGroup = inject(CommandPaletteGroupDirective, {
+        optional: true,
+        skipSelf: true,
+    });
+    /** Resolved CommandPaletteItem data derived from inputs + parent group. */
+    data = computed(() => ({
+        id: this.id(),
+        label: this.label(),
+        keywords: this.keywords(),
+        group: this.group() ?? this.parentGroup?.label() ?? undefined,
+        disabled: this.disabled(),
+        shortcut: this.shortcut(),
+        description: this.description() || undefined,
+        run: this.run(),
+    }), ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: CommandPaletteItemDirective, isStandalone: true, selector: "tw-command-palette-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, keywords: { classPropertyName: "keywords", publicName: "keywords", isSignal: true, isRequired: false, transformFunction: null }, group: { classPropertyName: "group", publicName: "group", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, shortcut: { classPropertyName: "shortcut", publicName: "shortcut", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, run: { classPropertyName: "run", publicName: "run", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activated: "activated" }, host: { styleAttribute: "display: none" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: `<ng-template #content><ng-content /></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemDirective, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-command-palette-item',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        style: 'display: none',
+                    },
+                    template: `<ng-template #content><ng-content /></ng-template>`,
+                }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], keywords: [{ type: i0.Input, args: [{ isSignal: true, alias: "keywords", required: false }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], shortcut: [{ type: i0.Input, args: [{ isSignal: true, alias: "shortcut", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], run: [{ type: i0.Input, args: [{ isSignal: true, alias: "run", required: false }] }], activated: [{ type: i0.Output, args: ["activated"] }], contentTemplate: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }] } });
+// ── Item decoration directives ──
+/** Styles a leading icon inside a palette item. */
+class CommandPaletteItemIconDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandPaletteItemIconDirective, isStandalone: true, selector: "[twCommandPaletteItemIcon]", host: { classAttribute: "size-4 shrink-0 text-fg-muted" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemIconDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twCommandPaletteItemIcon]',
+                    host: {
+                        class: 'size-4 shrink-0 text-fg-muted',
+                    },
+                }]
+        }] });
+/** Styles secondary description text inside a palette item. */
+class CommandPaletteItemDescriptionDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandPaletteItemDescriptionDirective, isStandalone: true, selector: "[twCommandPaletteItemDescription]", host: { classAttribute: "block text-xs text-fg-muted mt-0.5 min-w-0 truncate" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteItemDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twCommandPaletteItemDescription]',
+                    host: {
+                        class: 'block text-xs text-fg-muted mt-0.5 min-w-0 truncate',
+                    },
+                }]
+        }] });
+// ── Template directives ──
+/** Structural directive — consumer template rendered when no items match the query. */
+class CommandPaletteEmptyDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteEmptyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandPaletteEmptyDirective, isStandalone: true, selector: "[twCommandPaletteEmpty]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteEmptyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twCommandPaletteEmpty]',
+                }]
+        }] });
+/** Structural directive — consumer template rendered as a sticky footer inside the palette. */
+class CommandPaletteFooterDirective {
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: CommandPaletteFooterDirective, isStandalone: true, selector: "[twCommandPaletteFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[twCommandPaletteFooter]',
+                }]
+        }] });
+// ── Overlay component (private, not exported) ──
+class CommandPaletteOverlayComponent {
+    /** Host palette instance — provided via the content injector on attach. */
+    palette = inject(CommandPaletteComponent);
+    listId = `tw-command-palette-list-${nextPaletteId++}`;
+    searchInputRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
+    variantResult = computed(() => commandPaletteVariants({ size: this.palette.size() }), ...(ngDevMode ? [{ debugName: "variantResult" }] : /* istanbul ignore next */ []));
+    panelClasses = computed(() => {
+        const base = this.variantResult().panel();
+        const custom = this.palette.panelClassResolved();
+        return custom ? `${base} ${custom}` : base;
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    searchWrapperClasses = computed(() => this.variantResult().searchWrapper(), ...(ngDevMode ? [{ debugName: "searchWrapperClasses" }] : /* istanbul ignore next */ []));
+    searchInputClasses = computed(() => this.variantResult().searchInput(), ...(ngDevMode ? [{ debugName: "searchInputClasses" }] : /* istanbul ignore next */ []));
+    searchIconClasses = computed(() => this.variantResult().searchIcon(), ...(ngDevMode ? [{ debugName: "searchIconClasses" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => this.variantResult().list(), ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    groupHeaderClasses = computed(() => this.variantResult().groupHeader(), ...(ngDevMode ? [{ debugName: "groupHeaderClasses" }] : /* istanbul ignore next */ []));
+    itemBodyClasses = computed(() => this.variantResult().itemBody(), ...(ngDevMode ? [{ debugName: "itemBodyClasses" }] : /* istanbul ignore next */ []));
+    itemLabelClasses = computed(() => this.variantResult().itemLabel(), ...(ngDevMode ? [{ debugName: "itemLabelClasses" }] : /* istanbul ignore next */ []));
+    itemDescriptionClasses = computed(() => this.variantResult().itemDescription(), ...(ngDevMode ? [{ debugName: "itemDescriptionClasses" }] : /* istanbul ignore next */ []));
+    itemShortcutClasses = computed(() => this.variantResult().itemShortcut(), ...(ngDevMode ? [{ debugName: "itemShortcutClasses" }] : /* istanbul ignore next */ []));
+    itemKbdClasses = computed(() => this.variantResult().itemKbd(), ...(ngDevMode ? [{ debugName: "itemKbdClasses" }] : /* istanbul ignore next */ []));
+    emptyClasses = computed(() => this.variantResult().empty(), ...(ngDevMode ? [{ debugName: "emptyClasses" }] : /* istanbul ignore next */ []));
+    footerClasses = computed(() => this.variantResult().footer(), ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
+    itemClasses(active, disabled) {
+        return commandPaletteVariants({
+            size: this.palette.size(),
+            active,
+            disabled,
+        }).item();
+    }
+    onSearchInput(event) {
+        const value = event.target.value;
+        this.palette.query.set(value);
+    }
+    onItemClick(item) {
+        this.palette.selectItem(item);
+    }
+    onItemHover(item) {
+        this.palette.setActiveItem(item);
+    }
+    /** Focuses the search input (called by the palette after attach). */
+    focusSearch() {
+        this.searchInputRef()?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CommandPaletteOverlayComponent, isStandalone: true, selector: "tw-command-palette-overlay", host: { properties: { "attr.data-command-palette-overlay": "\"\"", "animate.enter": "\"scale-in\"", "animate.leave": "\"scale-out\"" }, classAttribute: "fixed inset-0 flex items-start justify-center p-4 pointer-events-none origin-top" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"'true'\" [attr.aria-label]=\"palette.ariaLabel()\">\n  <div [class]=\"searchWrapperClasses()\">\n    <svg [class]=\"searchIconClasses()\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n    </svg>\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      [class]=\"searchInputClasses()\"\n      [placeholder]=\"palette.placeholder()\"\n      [value]=\"palette.query()\"\n      (input)=\"onSearchInput($event)\"\n      [attr.aria-label]=\"palette.searchAriaLabel()\"\n      [attr.aria-expanded]=\"'true'\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"palette.activeItemId()\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n  </div>\n  <div [class]=\"listClasses()\" role=\"listbox\" [id]=\"listId\">\n    @if (palette.grouped().length === 0) {\n      @if (palette.emptyTemplate(); as emptyTpl) {\n        <div [class]=\"emptyClasses()\">\n          <ng-container [ngTemplateOutlet]=\"emptyTpl\" [ngTemplateOutletContext]=\"{ $implicit: palette.query() }\" />\n        </div>\n      } @else {\n        <div [class]=\"emptyClasses()\">No results found</div>\n      }\n    } @else {\n      @for (group of palette.grouped(); track group.id) {\n        <div role=\"group\" [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label) {\n            <div [class]=\"groupHeaderClasses()\" role=\"presentation\">{{ group.label }}</div>\n          }\n          @for (item of group.items; track item.data.id) {\n            <div\n              [id]=\"item.data.id\"\n              role=\"option\"\n              [class]=\"itemClasses(item.data.id === palette.activeItemId(), item.data.disabled ?? false)\"\n              [attr.aria-selected]=\"item.data.id === palette.activeItemId()\"\n              [attr.aria-disabled]=\"(item.data.disabled ?? false) ? 'true' : null\"\n              (click)=\"onItemClick(item)\"\n              (mousemove)=\"onItemHover(item)\"\n            >\n              <span [class]=\"itemBodyClasses()\">\n                @if (item.template; as tpl) {\n                  <span [class]=\"itemLabelClasses()\">\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                  </span>\n                } @else {\n                  <span [class]=\"itemLabelClasses()\">{{ item.data.label }}</span>\n                }\n                @if (item.data.description) {\n                  <span [class]=\"itemDescriptionClasses()\">{{ item.data.description }}</span>\n                }\n              </span>\n              @if (item.shortcutKeys.length > 0) {\n                <span [class]=\"itemShortcutClasses()\" aria-hidden=\"true\">\n                  @for (key of item.shortcutKeys; track $index) {\n                    <kbd [class]=\"itemKbdClasses()\">{{ key }}</kbd>\n                  }\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n  @if (palette.footerTemplate(); as footerTpl) {\n    <div [class]=\"footerClasses()\">\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tw-command-palette-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], host: {
+                        class: 'fixed inset-0 flex items-start justify-center p-4 pointer-events-none origin-top',
+                        '[attr.data-command-palette-overlay]': '""',
+                        '[animate.enter]': '"scale-in"',
+                        '[animate.leave]': '"scale-out"',
+                    }, template: "<div [class]=\"panelClasses()\" role=\"dialog\" [attr.aria-modal]=\"'true'\" [attr.aria-label]=\"palette.ariaLabel()\">\n  <div [class]=\"searchWrapperClasses()\">\n    <svg [class]=\"searchIconClasses()\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n      <path fill-rule=\"evenodd\" d=\"M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z\" clip-rule=\"evenodd\" />\n    </svg>\n    <input\n      #searchInput\n      type=\"text\"\n      role=\"combobox\"\n      [class]=\"searchInputClasses()\"\n      [placeholder]=\"palette.placeholder()\"\n      [value]=\"palette.query()\"\n      (input)=\"onSearchInput($event)\"\n      [attr.aria-label]=\"palette.searchAriaLabel()\"\n      [attr.aria-expanded]=\"'true'\"\n      [attr.aria-controls]=\"listId\"\n      [attr.aria-activedescendant]=\"palette.activeItemId()\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n  </div>\n  <div [class]=\"listClasses()\" role=\"listbox\" [id]=\"listId\">\n    @if (palette.grouped().length === 0) {\n      @if (palette.emptyTemplate(); as emptyTpl) {\n        <div [class]=\"emptyClasses()\">\n          <ng-container [ngTemplateOutlet]=\"emptyTpl\" [ngTemplateOutletContext]=\"{ $implicit: palette.query() }\" />\n        </div>\n      } @else {\n        <div [class]=\"emptyClasses()\">No results found</div>\n      }\n    } @else {\n      @for (group of palette.grouped(); track group.id) {\n        <div role=\"group\" [attr.aria-label]=\"group.label ?? null\">\n          @if (group.label) {\n            <div [class]=\"groupHeaderClasses()\" role=\"presentation\">{{ group.label }}</div>\n          }\n          @for (item of group.items; track item.data.id) {\n            <div\n              [id]=\"item.data.id\"\n              role=\"option\"\n              [class]=\"itemClasses(item.data.id === palette.activeItemId(), item.data.disabled ?? false)\"\n              [attr.aria-selected]=\"item.data.id === palette.activeItemId()\"\n              [attr.aria-disabled]=\"(item.data.disabled ?? false) ? 'true' : null\"\n              (click)=\"onItemClick(item)\"\n              (mousemove)=\"onItemHover(item)\"\n            >\n              <span [class]=\"itemBodyClasses()\">\n                @if (item.template; as tpl) {\n                  <span [class]=\"itemLabelClasses()\">\n                    <ng-container [ngTemplateOutlet]=\"tpl\" />\n                  </span>\n                } @else {\n                  <span [class]=\"itemLabelClasses()\">{{ item.data.label }}</span>\n                }\n                @if (item.data.description) {\n                  <span [class]=\"itemDescriptionClasses()\">{{ item.data.description }}</span>\n                }\n              </span>\n              @if (item.shortcutKeys.length > 0) {\n                <span [class]=\"itemShortcutClasses()\" aria-hidden=\"true\">\n                  @for (key of item.shortcutKeys; track $index) {\n                    <kbd [class]=\"itemKbdClasses()\">{{ key }}</kbd>\n                  }\n                </span>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n  @if (palette.footerTemplate(); as footerTpl) {\n    <div [class]=\"footerClasses()\">\n      <ng-container [ngTemplateOutlet]=\"footerTpl\" />\n    </div>\n  }\n</div>\n" }]
+        }], propDecorators: { searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+// ── Public palette component ──
+class CommandPaletteComponent {
+    /** Controls item density and padding across the palette. Defaults to `'md'`. */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Placeholder text shown inside the search input. Defaults to `'Type a command or search…'`. */
+    placeholder = input('Type a command or search…', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable search query. Reads or resets the current filter. Defaults to `''`. */
+    query = model('', ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable open state. Setting to `true` opens the palette; closing updates it to `false`. Defaults to `false`. */
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Data-driven command list. Merged with projected items and filtered by `query`. Defaults to `[]`. */
+    commands = input([], ...(ngDevMode ? [{ debugName: "commands" }] : /* istanbul ignore next */ []));
+    /** Custom filter function. Receives the merged item list and current query, returns the filtered result. Defaults to `undefined` (case-insensitive substring match). */
+    filterFn = input(undefined, ...(ngDevMode ? [{ debugName: "filterFn" }] : /* istanbul ignore next */ []));
+    /** Whether the palette closes automatically after an item is activated. Defaults to `true` — a command palette is a fire-and-dismiss surface; the special case is a "run many" launcher that opts out. */
+    closeOnSelect = input(true, ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    /** Whether Escape closes the palette. Defaults to `true` — Escape is the universal dismiss key for modal surfaces; the special case is a non-dismissible palette. */
+    closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : /* istanbul ignore next */ []));
+    /** Whether clicking the backdrop closes the palette. Defaults to `true` — clicking outside a modal is the expected dismiss gesture; the special case is enforcing an explicit choice. */
+    closeOnBackdropClick = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdropClick" }] : /* istanbul ignore next */ []));
+    /** Whether the search input is auto-focused when the palette opens. Defaults to `true` — without auto-focus the user must click into the input before typing, defeating the keyboard-first design. */
+    autoFocus = input(true, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+    /** Accessible label used for the dialog role. Defaults to `'Command palette'`. */
+    ariaLabel = input('Command palette', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Accessible label applied to the search input (`role="combobox"`). Defaults to `'Search commands'`. */
+    searchAriaLabel = input('Search commands', ...(ngDevMode ? [{ debugName: "searchAriaLabel" }] : /* istanbul ignore next */ []));
+    /** Additional classes appended to the overlay panel for consumer customization. Defaults to `''`. */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** Fires when a command is activated (via click or Enter). Payload is the resolved `CommandPaletteItem`. */
+    itemSelected = output();
+    /** Fires after the palette becomes fully visible. */
+    opened = output();
+    /** Fires after the palette is fully removed from the DOM. */
+    closed = output();
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    focusTrapFactory = inject(FocusTrapFactory);
+    announcer = inject(LiveAnnouncer);
+    declarativeItems = contentChildren(CommandPaletteItemDirective, { ...(ngDevMode ? { debugName: "declarativeItems" } : /* istanbul ignore next */ {}), descendants: true });
+    emptyDirective = contentChild(CommandPaletteEmptyDirective, ...(ngDevMode ? [{ debugName: "emptyDirective" }] : /* istanbul ignore next */ []));
+    footerDirective = contentChild(CommandPaletteFooterDirective, ...(ngDevMode ? [{ debugName: "footerDirective" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    overlayInstance = null;
+    focusTrap = null;
+    perOpenSubs = null;
+    previousFocus = null;
+    closing = false;
+    closeTimer = null;
+    announceTimer = null;
+    isAttached = signal(false, ...(ngDevMode ? [{ debugName: "isAttached" }] : /* istanbul ignore next */ []));
+    /** Merged (declarative + data-array) items keyed by id — declarative wins on collision. */
+    allItems = computed(() => {
+        const declarative = this.declarativeItems();
+        const declarativeResolved = declarative.map((dir) => ({
+            data: dir.data(),
+            directive: dir,
+            template: dir.contentTemplate(),
+            shortcutKeys: normalizeShortcut(dir.shortcut()),
+        }));
+        const seenIds = new Set(declarativeResolved.map((it) => it.data.id));
+        const arrayItems = this.commands();
+        const arrayResolved = [];
+        for (const data of arrayItems) {
+            if (seenIds.has(data.id))
+                continue;
+            seenIds.add(data.id);
+            arrayResolved.push({
+                data,
+                shortcutKeys: normalizeShortcut(data.shortcut),
+            });
+        }
+        return [...declarativeResolved, ...arrayResolved];
+    }, ...(ngDevMode ? [{ debugName: "allItems" }] : /* istanbul ignore next */ []));
+    /** Items after applying the filter function. */
+    filteredItems = computed(() => {
+        const all = this.allItems();
+        const q = this.query();
+        const dataList = all.map((r) => r.data);
+        const fn = this.filterFn();
+        const filtered = fn ? fn(dataList, q) : defaultFilter(dataList, q);
+        const byId = new Map();
+        for (const r of all)
+            byId.set(r.data.id, r);
+        const result = [];
+        for (const data of filtered) {
+            const resolved = byId.get(data.id);
+            if (resolved)
+                result.push(resolved);
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    /** Filtered items grouped by their `group` field. */
+    grouped = computed(() => {
+        const items = this.filteredItems();
+        const groups = [];
+        const byKey = new Map();
+        for (const item of items) {
+            const label = item.data.group;
+            const key = label ?? '__ungrouped__';
+            let g = byKey.get(key);
+            if (!g) {
+                g = { id: `group-${key}`, label, items: [] };
+                byKey.set(key, g);
+                groups.push(g);
+            }
+            g.items.push(item);
+        }
+        return groups;
+    }, ...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
+    /**
+     * Active item index, auto-resets to the first enabled item when the filtered
+     * *id set* changes. Keyed off the id sequence (not the array reference) so a
+     * re-emission of `filteredItems` with identical ids preserves the user's
+     * keyboard selection; only when ids actually shift do we recompute. When the
+     * previously-active id is still present in the new sequence its index is
+     * carried over; otherwise we fall back to the first enabled item.
+     */
+    activeIndex = linkedSignal({ ...(ngDevMode ? { debugName: "activeIndex" } : /* istanbul ignore next */ {}), source: () => this.filteredItems().map((i) => i.data.id),
+        computation: (ids, previous) => {
+            const items = this.filteredItems();
+            if (!previous)
+                return findFirstEnabled(items);
+            const prevId = previous.source[previous.value];
+            if (prevId) {
+                const carriedIndex = ids.indexOf(prevId);
+                if (carriedIndex >= 0)
+                    return carriedIndex;
+            }
+            return findFirstEnabled(items);
+        } });
+    /** Id of the currently active item (for `aria-activedescendant`). */
+    activeItemId = computed(() => {
+        const idx = this.activeIndex();
+        const items = this.filteredItems();
+        return items[idx]?.data.id ?? null;
+    }, ...(ngDevMode ? [{ debugName: "activeItemId" }] : /* istanbul ignore next */ []));
+    /** Template-ref of the projected empty state (if any). */
+    emptyTemplate = computed(() => this.emptyDirective()?.template ?? null, ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+    /** Template-ref of the projected footer (if any). */
+    footerTemplate = computed(() => this.footerDirective()?.template ?? null, ...(ngDevMode ? [{ debugName: "footerTemplate" }] : /* istanbul ignore next */ []));
+    /** Resolved panel-class string (array merged into a single string). */
+    panelClassResolved = computed(() => {
+        const raw = this.panelClass();
+        return Array.isArray(raw) ? raw.join(' ') : raw;
+    }, ...(ngDevMode ? [{ debugName: "panelClassResolved" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // React to model changes from the consumer
+        effect(() => {
+            const shouldOpen = this.open();
+            if (shouldOpen && !this.overlayInstance && !this.closing) {
+                this.openPalette();
+            }
+            else if (!shouldOpen && this.overlayInstance && !this.closing) {
+                this.closePalette();
+            }
+        });
+        // Debounced live-region announcements while the palette is open
+        effect(() => {
+            const q = this.query();
+            const count = this.filteredItems().length;
+            untracked(() => {
+                if (!this.isAttached())
+                    return;
+                this.clearAnnounceTimer();
+                this.announceTimer = setTimeout(() => {
+                    const message = count === 0
+                        ? `No commands match ${q}`
+                        : `${count} ${count === 1 ? 'result' : 'results'} for ${q}`;
+                    this.announcer.announce(message, 'polite');
+                }, ANNOUNCE_DEBOUNCE);
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            this.clearCloseTimer();
+            this.clearAnnounceTimer();
+            this.destroyFocusTrap();
+            this.perOpenSubs?.unsubscribe();
+            this.disposeOverlay();
+        });
+    }
+    // ── Public API ──
+    /** Open the palette programmatically. */
+    show() {
+        if (this.overlayInstance || this.closing)
+            return;
+        this.open.set(true);
+    }
+    /** Close the palette programmatically. */
+    hide() {
+        if (!this.overlayInstance || this.closing)
+            return;
+        this.closePalette();
+    }
+    /** Toggle the current open state. */
+    toggle() {
+        if (this.overlayInstance || this.closing) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    /** Force the palette to reapply focus to the search input. */
+    focusSearch() {
+        this.overlayInstance?.focusSearch();
+    }
+    // ── Internal wiring (used by overlay) ──
+    /** Activate an item: run callbacks, emit events, optionally close. */
+    selectItem(item) {
+        if (item.data.disabled)
+            return;
+        item.data.run?.();
+        item.directive?.activated.emit();
+        this.itemSelected.emit(item.data);
+        if (this.closeOnSelect())
+            this.hide();
+    }
+    /** Move the active descendant to the given item (used on hover). */
+    setActiveItem(item) {
+        if (item.data.disabled)
+            return;
+        const idx = this.filteredItems().indexOf(item);
+        if (idx >= 0)
+            this.activeIndex.set(idx);
+    }
+    // ── Private ──
+    openPalette() {
+        this.previousFocus =
+            document.activeElement ?? null;
+        this.ensureOverlay();
+        this.attachContent();
+        this.subscribePerOpen();
+        this.isAttached.set(true);
+        this.setupFocusTrap();
+        if (this.autoFocus()) {
+            queueMicrotask(() => this.overlayInstance?.focusSearch());
+        }
+        this.announcer.announce(`Command palette opened. ${this.filteredItems().length} commands available.`, 'polite');
+        this.opened.emit();
+    }
+    closePalette() {
+        if (this.closing)
+            return;
+        this.closing = true;
+        this.destroyFocusTrap();
+        this.previousFocus?.focus();
+        this.previousFocus = null;
+        this.closeTimer = setTimeout(() => {
+            this.closeTimer = null;
+            // Guard against teardown during the animation window. `destroyRef.onDestroy`
+            // calls `clearCloseTimer()` so this branch only fires when the timer survived;
+            // even so, `isAttached` is the authoritative signal — if the overlay already
+            // detached (programmatic disposeOverlay, double-close race), skip writes that
+            // would touch a destroyed instance or re-emit `open=false`.
+            if (!this.isAttached()) {
+                this.closing = false;
+                return;
+            }
+            if (this.overlayRef?.hasAttached()) {
+                this.overlayRef.detach();
+            }
+            this.perOpenSubs?.unsubscribe();
+            this.perOpenSubs = null;
+            this.overlayInstance = null;
+            this.isAttached.set(false);
+            untracked(() => this.open.set(false));
+            this.closed.emit();
+            this.closing = false;
+        }, ANIMATION_DURATION);
+    }
+    ensureOverlay() {
+        if (this.overlayRef)
+            return;
+        const positionStrategy = this.overlay.position().global();
+        const scrollStrategy = this.overlay.scrollStrategies.block();
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy,
+            hasBackdrop: true,
+            backdropClass: 'tw-dialog-backdrop',
+            panelClass: 'tw-command-palette-panel',
+        });
+    }
+    attachContent() {
+        if (!this.overlayRef)
+            return;
+        const paletteRef = {
+            close: () => this.hide(),
+            setQuery: (q) => this.query.set(q),
+        };
+        const contentInjector = Injector.create({
+            parent: this.injector,
+            providers: [
+                { provide: CommandPaletteComponent, useValue: this },
+                { provide: COMMAND_PALETTE_REF, useValue: paletteRef },
+            ],
+        });
+        const portal = new ComponentPortal(CommandPaletteOverlayComponent, this.viewContainerRef, contentInjector);
+        const ref = this.overlayRef.attach(portal);
+        this.overlayInstance = ref.instance;
+    }
+    subscribePerOpen() {
+        this.perOpenSubs?.unsubscribe();
+        this.perOpenSubs = new Subscription();
+        this.perOpenSubs.add(this.overlayRef.backdropClick().subscribe(() => {
+            if (this.closeOnBackdropClick())
+                this.hide();
+        }));
+        this.perOpenSubs.add(this.overlayRef.keydownEvents().subscribe((event) => this.handleOverlayKeydown(event)));
+    }
+    handleOverlayKeydown(event) {
+        switch (event.key) {
+            case 'Escape':
+                if (this.closeOnEscape()) {
+                    event.preventDefault();
+                    this.hide();
+                }
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.moveActive(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.moveActive(-1);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.activeIndex.set(findFirstEnabled(this.filteredItems()));
+                break;
+            case 'End':
+                event.preventDefault();
+                this.activeIndex.set(findLastEnabled(this.filteredItems()));
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this.activateActive();
+                break;
+            // Tab is intentionally NOT handled here — the FocusTrap installed in
+            // `setupFocusTrap()` cycles focus through the modal's focusable elements,
+            // so the user cannot accidentally tab out of the palette. Closing on Tab
+            // (the previous behaviour) ran counter to the universal "Tab moves focus
+            // within a modal" convention and surprised keyboard users.
+        }
+    }
+    moveActive(delta) {
+        const items = this.filteredItems();
+        if (items.length === 0)
+            return;
+        const n = items.length;
+        let idx = this.activeIndex();
+        for (let i = 0; i < n; i++) {
+            idx = (idx + delta + n) % n;
+            if (!items[idx].data.disabled) {
+                this.activeIndex.set(idx);
+                return;
+            }
+        }
+    }
+    activateActive() {
+        const items = this.filteredItems();
+        const item = items[this.activeIndex()];
+        if (item && !item.data.disabled)
+            this.selectItem(item);
+    }
+    setupFocusTrap() {
+        if (!this.overlayRef)
+            return;
+        this.focusTrap = this.focusTrapFactory.create(this.overlayRef.overlayElement);
+    }
+    destroyFocusTrap() {
+        this.focusTrap?.destroy();
+        this.focusTrap = null;
+    }
+    disposeOverlay() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.overlayInstance = null;
+    }
+    clearCloseTimer() {
+        if (this.closeTimer !== null) {
+            clearTimeout(this.closeTimer);
+            this.closeTimer = null;
+        }
+    }
+    clearAnnounceTimer() {
+        if (this.announceTimer !== null) {
+            clearTimeout(this.announceTimer);
+            this.announceTimer = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.14", type: CommandPaletteComponent, isStandalone: true, selector: "tw-command-palette", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, searchAriaLabel: { classPropertyName: "searchAriaLabel", publicName: "searchAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange", open: "openChange", itemSelected: "itemSelected", opened: "opened", closed: "closed" }, host: { styleAttribute: "display: none" }, queries: [{ propertyName: "declarativeItems", predicate: CommandPaletteItemDirective, descendants: true, isSignal: true }, { propertyName: "emptyDirective", first: true, predicate: CommandPaletteEmptyDirective, descendants: true, isSignal: true }, { propertyName: "footerDirective", first: true, predicate: CommandPaletteFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CommandPaletteComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tw-command-palette',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        style: 'display: none',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], commands: [{ type: i0.Input, args: [{ isSignal: true, alias: "commands", required: false }] }], filterFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterFn", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], searchAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchAriaLabel", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], declarativeItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CommandPaletteItemDirective), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], emptyDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CommandPaletteEmptyDirective), { isSignal: true }] }], footerDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CommandPaletteFooterDirective), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COMMAND_PALETTE_REF, CommandPaletteComponent, CommandPaletteEmptyDirective, CommandPaletteFooterDirective, CommandPaletteGroupDirective, CommandPaletteItemDescriptionDirective, CommandPaletteItemDirective, CommandPaletteItemIconDirective };
+//# sourceMappingURL=cdevhub-ngx-tw-command-palette.mjs.map