@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-component-command.mjs

@@ -1,355 +1,815 @@
-import * as i0 from '@angular/core';
-import { Directive, model, input, output, signal, computed, forwardRef, Component, inject, ElementRef, DestroyRef } from '@angular/core';
-import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
-
-/** Base class exposed to children for context lookup. */
-class CommandContextBase {
-    /** Shared id linking the combobox input (aria-controls) to the listbox. */
-    listboxId = injectUniqueId('CommandList');
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandContextBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: CommandContextBase, isStandalone: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandContextBase, decorators: [{
-            type: Directive
-        }] });
-class CommandComponent extends CommandContextBase {
-    query = model('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    /**
-     * Escape was pressed with nothing left to clear.
-     *
-     * A `Command` rendered inside a dialog or a popover does not need this: the
-     * overlay closes itself on Escape. A standalone one is not inside anything
-     * that would, so this is how it asks its container to dismiss it.
-     */
-    dismissed = output();
-    items = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    matches(text) {
-        const q = this.query().trim().toLowerCase();
-        if (!q)
-            return true;
-        return text.toLowerCase().includes(q);
-    }
-    registerItem(item) {
-        this.items.update((list) => [...list, item]);
-    }
-    unregisterItem(item) {
-        this.items.update((list) => list.filter((i) => i !== item));
-    }
-    /** Items currently visible (not filtered out), disabled ones included. */
-    visibleItems() {
-        return this.items().filter((it) => it.visible());
-    }
-    // Items the keyboard may land on: visible AND enabled.
-    //
-    // A disabled row stays visible, for discoverability, but must never become the
-    // active descendant. Announcing a row the user cannot choose -- Enter and
-    // click both refuse it -- is a dead end with no feedback.
-    navigableItems() {
-        return this.visibleItems().filter((it) => !it.disabled());
-    }
-    focusNext(delta) {
-        const navigable = this.navigableItems();
-        if (navigable.length === 0)
-            return;
-        const active = navigable.findIndex((i) => i.active());
-        const idx = active < 0 ? 0 : (active + delta + navigable.length) % navigable.length;
-        this.setActiveItem(navigable[idx] ?? null);
-    }
-    focusFirst() {
-        this.setActiveItem(this.navigableItems()[0] ?? null);
-    }
-    requestDismiss() {
-        this.dismissed.emit();
-    }
-    hasVisibleItems() {
-        return this.visibleItems().length > 0;
-    }
-    activateOnly(item) {
-        this.setActiveItem(item);
-    }
-    activeDescendantId() {
-        return this.getActive()?.itemId ?? null;
-    }
-    /** The row Enter would choose: the active one, else the first one it may land on. */
-    getActive() {
-        const navigable = this.navigableItems();
-        return navigable.find((i) => i.active()) ?? navigable[0] ?? null;
-    }
-    setActiveItem(activeItem) {
-        this.items().forEach((item) => item._setActive(item === activeItem));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CommandComponent, isStandalone: true, selector: "Command", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { query: "queryChange", dismissed: "dismissed" }, host: { properties: { "class": "classes()" } }, providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }], usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'Command',
-                    providers: [{ provide: CommandContextBase, useExisting: forwardRef(() => CommandComponent) }],
-                    host: { '[class]': 'classes()' },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }, { type: i0.Output, args: ["queryChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }] } });
-class CommandInputComponent {
-    ctx = inject(CommandComponent);
-    placeholder = input('Type a command or search…', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('flex h-11 w-full rounded-md bg-transparent px-3 py-3 text-sm outline-none', 'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', 'border-b border-border', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    onInput(e) {
-        this.ctx.query.set(e.target.value);
-        this.ctx.focusFirst();
-    }
-    onArrow(e, delta) {
-        e.preventDefault();
-        this.ctx.focusNext(delta);
-    }
-    onEnter(e) {
-        const active = this.ctx.getActive();
-        if (active) {
-            e.preventDefault();
-            active._select(e);
-        }
-    }
-    // Escape clears the query first, and only asks to be dismissed once there is
-    // nothing left to clear -- the search-field convention, and the one thing a
-    // standalone Command otherwise had no keyboard route to at all.
-    //
-    // Both branches consume the key's default action, so it never also reaches a
-    // browser-level Escape behaviour. They differ in how far the event travels:
-    // the clearing keystroke stops here, because overlays read Escape off a
-    // listener on `body` and letting it carry on would close the dialog or popover
-    // holding this Command in the same breath as clearing its query. The
-    // dismissing keystroke does propagate, so a container that closes on Escape
-    // still closes.
-    onEscape(e) {
-        e.preventDefault();
-        if (this.ctx.query()) {
-            e.stopPropagation();
-            this.ctx.query.set('');
-            this.ctx.focusFirst();
-            return;
-        }
-        this.ctx.requestDismiss();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CommandInputComponent, isStandalone: true, selector: "input[CommandInput]", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "text", "role": "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "autocomplete": "off" }, listeners: { "input": "onInput($any($event))", "keydown.arrowDown": "onArrow($any($event), 1)", "keydown.arrowUp": "onArrow($any($event), -1)", "keydown.enter": "onEnter($any($event))", "keydown.escape": "onEscape($any($event))" }, properties: { "class": "classes()", "attr.aria-controls": "ctx.listboxId", "attr.aria-activedescendant": "ctx.activeDescendantId()", "value": "ctx.query()", "placeholder": "placeholder()" } }, ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandInputComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'input[CommandInput]',
-                    host: {
-                        '[class]': 'classes()',
-                        type: 'text',
-                        role: 'combobox',
-                        'aria-autocomplete': 'list',
-                        'aria-expanded': 'true',
-                        '[attr.aria-controls]': 'ctx.listboxId',
-                        '[attr.aria-activedescendant]': 'ctx.activeDescendantId()',
-                        autocomplete: 'off',
-                        '[value]': 'ctx.query()',
-                        '[placeholder]': 'placeholder()',
-                        '(input)': 'onInput($any($event))',
-                        '(keydown.arrowDown)': 'onArrow($any($event), 1)',
-                        '(keydown.arrowUp)': 'onArrow($any($event), -1)',
-                        '(keydown.enter)': 'onEnter($any($event))',
-                        '(keydown.escape)': 'onEscape($any($event))',
-                    },
-                    template: ``,
-                }]
-        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class CommandListComponent {
-    ctx = inject(CommandContextBase);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    /** Accessible name for the listbox (required on role="listbox"). */
-    ariaLabel = input('Suggestions', { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
-    classes = computed(() => cn('max-h-75 overflow-y-auto overflow-x-hidden p-1', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CommandListComponent, isStandalone: true, selector: "CommandList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "classes()", "attr.id": "ctx.listboxId", "attr.aria-label": "ariaLabel()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'CommandList',
-                    host: {
-                        '[class]': 'classes()',
-                        role: 'listbox',
-                        '[attr.id]': 'ctx.listboxId',
-                        '[attr.aria-label]': 'ariaLabel()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }] } });
-class CommandEmptyComponent {
-    ctx = inject(CommandComponent);
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('py-6 text-center text-sm text-muted-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CommandEmptyComponent, isStandalone: true, selector: "CommandEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "hidden": "ctx.hasVisibleItems()" } }, ngImport: i0, template: `<ng-content>No results found.</ng-content>`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandEmptyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'CommandEmpty',
-                    host: {
-                        '[class]': 'classes()',
-                        '[hidden]': 'ctx.hasVisibleItems()',
-                    },
-                    template: `<ng-content>No results found.</ng-content>`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class CommandGroupComponent {
-    heading = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('overflow-hidden p-1 text-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: CommandGroupComponent, isStandalone: true, selector: "CommandGroup", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, computed, forwardRef, inject, input, model, output, signal } from "@angular/core";
+import { cn, injectUniqueId } from "@ojiepermana/angular/component/utils/core";
+var CommandContextBase = class CommandContextBase {
+	listboxId = injectUniqueId("CommandList");
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandContextBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: CommandContextBase,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandContextBase,
+	decorators: [{ type: Directive }]
+});
+var CommandComponent = class CommandComponent extends CommandContextBase {
+	query = model("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	items = signal([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	matches(text) {
+		const q = this.query().trim().toLowerCase();
+		if (!q) return true;
+		return text.toLowerCase().includes(q);
+	}
+	registerItem(item) {
+		this.items.update((list) => [...list, item]);
+	}
+	unregisterItem(item) {
+		this.items.update((list) => list.filter((i) => i !== item));
+	}
+	visibleItems() {
+		return this.items().filter((it) => it.visible());
+	}
+	navigableItems() {
+		return this.visibleItems().filter((it) => !it.disabled());
+	}
+	focusNext(delta) {
+		const navigable = this.navigableItems();
+		if (navigable.length === 0) return;
+		const active = navigable.findIndex((i) => i.active());
+		const idx = active < 0 ? 0 : (active + delta + navigable.length) % navigable.length;
+		this.setActiveItem(navigable[idx] ?? null);
+	}
+	focusFirst() {
+		this.setActiveItem(this.navigableItems()[0] ?? null);
+	}
+	requestDismiss() {
+		this.dismissed.emit();
+	}
+	hasVisibleItems() {
+		return this.visibleItems().length > 0;
+	}
+	activateOnly(item) {
+		this.setActiveItem(item);
+	}
+	activeDescendantId() {
+		return this.getActive()?.itemId ?? null;
+	}
+	getActive() {
+		const navigable = this.navigableItems();
+		return navigable.find((i) => i.active()) ?? navigable[0] ?? null;
+	}
+	setActiveItem(activeItem) {
+		this.items().forEach((item) => item._setActive(item === activeItem));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CommandComponent,
+		isStandalone: true,
+		selector: "Command",
+		inputs: {
+			query: {
+				classPropertyName: "query",
+				publicName: "query",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			query: "queryChange",
+			dismissed: "dismissed"
+		},
+		host: { properties: { "class": "classes()" } },
+		providers: [{
+			provide: CommandContextBase,
+			useExisting: forwardRef(() => CommandComponent)
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "Command",
+			providers: [{
+				provide: CommandContextBase,
+				useExisting: forwardRef(() => CommandComponent)
+			}],
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		query: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "query",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["queryChange"]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}]
+	}
+});
+var CommandInputComponent = class CommandInputComponent {
+	ctx = inject(CommandComponent);
+	placeholder = input("Type a command or search…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex h-11 w-full rounded-md bg-transparent px-3 py-3 text-sm outline-none", "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", "border-b border-border", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	onInput(e) {
+		this.ctx.query.set(e.target.value);
+		this.ctx.focusFirst();
+	}
+	onArrow(e, delta) {
+		e.preventDefault();
+		this.ctx.focusNext(delta);
+	}
+	onEnter(e) {
+		const active = this.ctx.getActive();
+		if (active) {
+			e.preventDefault();
+			active._select(e);
+		}
+	}
+	onEscape(e) {
+		e.preventDefault();
+		if (this.ctx.query()) {
+			e.stopPropagation();
+			this.ctx.query.set("");
+			this.ctx.focusFirst();
+			return;
+		}
+		this.ctx.requestDismiss();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CommandInputComponent,
+		isStandalone: true,
+		selector: "input[CommandInput]",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"type": "text",
+				"role": "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": "true",
+				"autocomplete": "off"
+			},
+			listeners: {
+				"input": "onInput($any($event))",
+				"keydown.arrowDown": "onArrow($any($event), 1)",
+				"keydown.arrowUp": "onArrow($any($event), -1)",
+				"keydown.enter": "onEnter($any($event))",
+				"keydown.escape": "onEscape($any($event))"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.aria-controls": "ctx.listboxId",
+				"attr.aria-activedescendant": "ctx.activeDescendantId()",
+				"value": "ctx.query()",
+				"placeholder": "placeholder()"
+			}
+		},
+		ngImport: i0,
+		template: ``,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "input[CommandInput]",
+			host: {
+				"[class]": "classes()",
+				type: "text",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": "true",
+				"[attr.aria-controls]": "ctx.listboxId",
+				"[attr.aria-activedescendant]": "ctx.activeDescendantId()",
+				autocomplete: "off",
+				"[value]": "ctx.query()",
+				"[placeholder]": "placeholder()",
+				"(input)": "onInput($any($event))",
+				"(keydown.arrowDown)": "onArrow($any($event), 1)",
+				"(keydown.arrowUp)": "onArrow($any($event), -1)",
+				"(keydown.enter)": "onEnter($any($event))",
+				"(keydown.escape)": "onEscape($any($event))"
+			},
+			template: ``
+		}]
+	}],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var CommandListComponent = class CommandListComponent {
+	ctx = inject(CommandContextBase);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Suggestions", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	classes = computed(() => cn("max-h-75 overflow-y-auto overflow-x-hidden p-1", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CommandListComponent,
+		isStandalone: true,
+		selector: "CommandList",
+		inputs: {
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "listbox" },
+			properties: {
+				"class": "classes()",
+				"attr.id": "ctx.listboxId",
+				"attr.aria-label": "ariaLabel()"
+			}
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "CommandList",
+			host: {
+				"[class]": "classes()",
+				role: "listbox",
+				"[attr.id]": "ctx.listboxId",
+				"[attr.aria-label]": "ariaLabel()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: {
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}]
+	}
+});
+var CommandEmptyComponent = class CommandEmptyComponent {
+	ctx = inject(CommandComponent);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("py-6 text-center text-sm text-muted-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandEmptyComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CommandEmptyComponent,
+		isStandalone: true,
+		selector: "CommandEmpty",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: {
+			"class": "classes()",
+			"hidden": "ctx.hasVisibleItems()"
+		} },
+		ngImport: i0,
+		template: `<ng-content>No results found.</ng-content>`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandEmptyComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "CommandEmpty",
+			host: {
+				"[class]": "classes()",
+				"[hidden]": "ctx.hasVisibleItems()"
+			},
+			template: `<ng-content>No results found.</ng-content>`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var CommandGroupComponent = class CommandGroupComponent {
+	heading = input(null, ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("overflow-hidden p-1 text-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: CommandGroupComponent,
+		isStandalone: true,
+		selector: "CommandGroup",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "group" },
+			properties: { "class": "classes()" }
+		},
+		ngImport: i0,
+		template: `
     @if (heading()) {
       <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading() }}</div>
     }
     <ng-content />
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandGroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'CommandGroup',
-                    host: { '[class]': 'classes()', role: 'group' },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "CommandGroup",
+			host: {
+				"[class]": "classes()",
+				role: "group"
+			},
+			template: `
     @if (heading()) {
       <div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading() }}</div>
     }
     <ng-content />
-  `,
-                }]
-        }], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class CommandSeparatorComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('-mx-1 h-px bg-border block', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CommandSeparatorComponent, isStandalone: true, selector: "CommandSeparator", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true" }, properties: { "class": "classes()" } }, ngImport: i0, template: '', isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandSeparatorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'CommandSeparator',
-                    // Decorative divider — a separator is not an allowed child of role="listbox".
-                    host: { '[class]': 'classes()', 'aria-hidden': 'true' },
-                    template: '',
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-class CommandItemComponent {
-    ctx = inject(CommandComponent);
-    el = inject(ElementRef);
-    itemId = injectUniqueId('CommandItem');
-    value = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    disabled = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether this option is the CHOSEN one, which is what `aria-selected`
-     * reports.
-     *
-     * It used to be bound to {@link active}, the highlighted row, which told a
-     * screen reader the wrong thing: moving the highlight looked like changing the
-     * selection. The highlighted row is announced through `aria-activedescendant`
-     * on the input instead, which is the listbox pattern.
-     */
-    selectedState = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selectedState" }] : /* istanbul ignore next */ []));
-    selected = output();
-    /** The highlighted row. Drives styling and `aria-activedescendant`, not `aria-selected`. */
-    active = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    visible = computed(() => {
-        const text = this.value() || this.el.nativeElement.textContent || '';
-        return this.ctx.matches(text);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none', 'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground', 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.ctx.registerItem(this);
-        inject(DestroyRef).onDestroy(() => this.ctx.unregisterItem(this));
-    }
-    focus() {
-        this.el.nativeElement.focus();
-    }
-    _setActive(active) {
-        this.active.set(active);
-    }
-    _select(e) {
-        if (this.disabled())
-            return;
-        this.selected.emit(e);
-    }
-    onHover() {
-        if (this.disabled())
-            return;
-        this.ctx.activateOnly(this);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CommandItemComponent, isStandalone: true, selector: "CommandItem, button[CommandItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, selectedState: { classPropertyName: "selectedState", publicName: "selectedState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { listeners: { "click": "_select($any($event))", "mousemove": "onHover()" }, properties: { "class": "classes()", "attr.id": "itemId", "attr.role": "\"option\"", "attr.tabindex": "-1", "attr.aria-selected": "selectedState()", "attr.data-active": "active() ? \"true\" : null", "attr.data-disabled": "disabled() ? \"true\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null", "hidden": "!visible()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'CommandItem, button[CommandItem]',
-                    host: {
-                        '[class]': 'classes()',
-                        '[attr.id]': 'itemId',
-                        '[attr.role]': '"option"',
-                        '[attr.tabindex]': '-1',
-                        '[attr.aria-selected]': 'selectedState()',
-                        '[attr.data-active]': 'active() ? "true" : null',
-                        '[attr.data-disabled]': 'disabled() ? "true" : null',
-                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
-                        '[hidden]': '!visible()',
-                        '(click)': '_select($any($event))',
-                        '(mousemove)': 'onHover()',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], selectedState: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedState", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
-class CommandShortcutComponent {
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    classes = computed(() => cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandShortcutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: CommandShortcutComponent, isStandalone: true, selector: "span[CommandShortcut]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: CommandShortcutComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[CommandShortcut]',
-                    host: { '[class]': 'classes()' },
-                    template: `<ng-content />`,
-                }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent };
+  `
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var CommandSeparatorComponent = class CommandSeparatorComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("-mx-1 h-px bg-border block", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandSeparatorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CommandSeparatorComponent,
+		isStandalone: true,
+		selector: "CommandSeparator",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-hidden": "true" },
+			properties: { "class": "classes()" }
+		},
+		ngImport: i0,
+		template: "",
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandSeparatorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "CommandSeparator",
+			host: {
+				"[class]": "classes()",
+				"aria-hidden": "true"
+			},
+			template: ""
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var CommandItemComponent = class CommandItemComponent {
+	ctx = inject(CommandComponent);
+	el = inject(ElementRef);
+	itemId = injectUniqueId("CommandItem");
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	selectedState = input(false, ...ngDevMode ? [{ debugName: "selectedState" }] : /* istanbul ignore next */ []);
+	selected = output();
+	active = signal(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	visible = computed(() => {
+		const text = this.value() || this.el.nativeElement.textContent || "";
+		return this.ctx.matches(text);
+	}, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none", "data-[active=true]:bg-accent data-[active=true]:text-accent-foreground", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.ctx.registerItem(this);
+		inject(DestroyRef).onDestroy(() => this.ctx.unregisterItem(this));
+	}
+	focus() {
+		this.el.nativeElement.focus();
+	}
+	_setActive(active) {
+		this.active.set(active);
+	}
+	_select(e) {
+		if (this.disabled()) return;
+		this.selected.emit(e);
+	}
+	onHover() {
+		if (this.disabled()) return;
+		this.ctx.activateOnly(this);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandItemComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CommandItemComponent,
+		isStandalone: true,
+		selector: "CommandItem, button[CommandItem]",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			class: {
+				classPropertyName: "class",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedState: {
+				classPropertyName: "selectedState",
+				publicName: "selectedState",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selected: "selected" },
+		host: {
+			listeners: {
+				"click": "_select($any($event))",
+				"mousemove": "onHover()"
+			},
+			properties: {
+				"class": "classes()",
+				"attr.id": "itemId",
+				"attr.role": "\"option\"",
+				"attr.tabindex": "-1",
+				"attr.aria-selected": "selectedState()",
+				"attr.data-active": "active() ? \"true\" : null",
+				"attr.data-disabled": "disabled() ? \"true\" : null",
+				"attr.aria-disabled": "disabled() ? \"true\" : null",
+				"hidden": "!visible()"
+			}
+		},
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "CommandItem, button[CommandItem]",
+			host: {
+				"[class]": "classes()",
+				"[attr.id]": "itemId",
+				"[attr.role]": "\"option\"",
+				"[attr.tabindex]": "-1",
+				"[attr.aria-selected]": "selectedState()",
+				"[attr.data-active]": "active() ? \"true\" : null",
+				"[attr.data-disabled]": "disabled() ? \"true\" : null",
+				"[attr.aria-disabled]": "disabled() ? \"true\" : null",
+				"[hidden]": "!visible()",
+				"(click)": "_select($any($event))",
+				"(mousemove)": "onHover()"
+			},
+			template: `<ng-content />`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		class: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		selectedState: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedState",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Output,
+			args: ["selected"]
+		}]
+	}
+});
+var CommandShortcutComponent = class CommandShortcutComponent {
+	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("ml-auto text-xs tracking-widest text-muted-foreground", this.class()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CommandShortcutComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: CommandShortcutComponent,
+		isStandalone: true,
+		selector: "span[CommandShortcut]",
+		inputs: { class: {
+			classPropertyName: "class",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CommandShortcutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "span[CommandShortcut]",
+			host: { "[class]": "classes()" },
+			template: `<ng-content />`
+		}]
+	}],
+	propDecorators: { class: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+export { CommandComponent, CommandContextBase, CommandEmptyComponent, CommandGroupComponent, CommandInputComponent, CommandItemComponent, CommandListComponent, CommandSeparatorComponent, CommandShortcutComponent };