@loomui-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/loomui-ng-ui-command.mjs

@@ -0,0 +1,982 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, booleanAttribute, computed, contentChildren, forwardRef, inject, input, output, signal } from "@angular/core";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn, nextId } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+var UiCommand = class UiCommand {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	search = signal("", ...ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []);
+	listId = nextId("ui-command-list");
+	items = contentChildren(forwardRef(() => UiCommandItem), {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	selectedId = signal(null, ...ngDevMode ? [{ debugName: "selectedId" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	visibleItems = computed(() => this.items().filter((i) => i.visible()), ...ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []);
+	hasResults = computed(() => this.visibleItems().length > 0, ...ngDevMode ? [{ debugName: "hasResults" }] : /* istanbul ignore next */ []);
+	constructor() {
+		queueMicrotask(() => this.ensureSelection(true));
+	}
+	matches(value, keywords) {
+		const q = this.search().trim().toLowerCase();
+		if (!q) return true;
+		return [value, ...keywords].some((s) => s.toLowerCase().includes(q));
+	}
+	ensureSelection(reset = false) {
+		const enabled = this.visibleItems().filter((i) => !i.disabled);
+		const current = enabled.find((i) => i.id === this.selectedId());
+		if (reset || !current) this.selectedId.set(enabled[0]?.id ?? null);
+	}
+	move(delta) {
+		const enabled = this.visibleItems().filter((i) => !i.disabled);
+		if (!enabled.length) return;
+		let idx = enabled.findIndex((i) => i.id === this.selectedId());
+		if (delta === "first") idx = 0;
+		else if (delta === "last") idx = enabled.length - 1;
+		else idx = (idx + delta + enabled.length) % enabled.length;
+		this.selectedId.set(enabled[idx].id);
+		enabled[idx].scrollIntoView();
+	}
+	activateSelected() {
+		this.items().find((i) => i.id === this.selectedId())?.activate();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommand,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiCommand,
+		isStandalone: true,
+		selector: "[uiCommand], ui-command",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "command"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: i0.forwardRef(() => UiCommandItem),
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["uiCommand"],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommand,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCommand], ui-command",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiCommand",
+			host: {
+				tabindex: "-1",
+				"data-slot": "command",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiCommandItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiCommandInput = class UiCommandInput {
+	cmd = inject(UiCommand);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	onInput(e) {
+		this.cmd.search.set(e.target.value);
+		queueMicrotask(() => this.cmd.ensureSelection(true));
+	}
+	onKeydown(e) {
+		const ctrl = e.ctrlKey && !e.altKey && !e.metaKey;
+		switch (true) {
+			case e.key === "ArrowDown" || ctrl && (e.key === "n" || e.key === "j"):
+				e.preventDefault();
+				return this.cmd.move(1);
+			case e.key === "ArrowUp" || ctrl && (e.key === "p" || e.key === "k"):
+				e.preventDefault();
+				return this.cmd.move(-1);
+			case e.key === "Home":
+				e.preventDefault();
+				return this.cmd.move("first");
+			case e.key === "End":
+				e.preventDefault();
+				return this.cmd.move("last");
+			case e.key === "Enter" && !e.isComposing:
+				e.preventDefault();
+				return this.cmd.activateSelected();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCommandInput,
+		isStandalone: true,
+		selector: "input[uiCommandInput]",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"data-slot": "command-input",
+				"type": "text",
+				"role": "combobox",
+				"autocomplete": "off",
+				"autocorrect": "off",
+				"spellcheck": "false",
+				"aria-autocomplete": "list",
+				"aria-expanded": "true"
+			},
+			listeners: {
+				"input": "onInput($event)",
+				"keydown": "onKeydown($event)"
+			},
+			properties: {
+				"attr.aria-controls": "cmd.listId",
+				"attr.aria-activedescendant": "cmd.selectedId()",
+				"attr.class": "classes()"
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandInput,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[uiCommandInput]",
+			host: {
+				"data-slot": "command-input",
+				type: "text",
+				role: "combobox",
+				autocomplete: "off",
+				autocorrect: "off",
+				spellcheck: "false",
+				"aria-autocomplete": "list",
+				"aria-expanded": "true",
+				"[attr.aria-controls]": "cmd.listId",
+				"[attr.aria-activedescendant]": "cmd.selectedId()",
+				"[attr.class]": "classes()",
+				"(input)": "onInput($event)",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiCommandInputWrapper = class UiCommandInputWrapper {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandInputWrapper,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiCommandInputWrapper,
+		isStandalone: true,
+		selector: "[uiCommandInputWrapper], ui-command-input-wrapper",
+		host: {
+			attributes: { "data-slot": "command-input-wrapper" },
+			classAttribute: "p-1 pb-0"
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <div class="flex h-8 items-center gap-2 rounded-lg border border-input bg-input/30 px-2.5">
+      <svg uiIcon="search" class="size-4 shrink-0 opacity-50"></svg>
+      <ng-content />
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandInputWrapper,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiCommandInputWrapper], ui-command-input-wrapper",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "command-input-wrapper",
+				class: "p-1 pb-0"
+			},
+			template: `
+    <div class="flex h-8 items-center gap-2 rounded-lg border border-input bg-input/30 px-2.5">
+      <svg uiIcon="search" class="size-4 shrink-0 opacity-50"></svg>
+      <ng-content />
+    </div>
+  `
+		}]
+	}]
+});
+var UiCommandList = class UiCommandList {
+	cmd = inject(UiCommand);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCommandList,
+		isStandalone: true,
+		selector: "[uiCommandList], ui-command-list",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "listbox",
+				"tabindex": "-1",
+				"aria-label": "Suggestions",
+				"data-slot": "command-list"
+			},
+			properties: {
+				"id": "cmd.listId",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandList,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCommandList], ui-command-list",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "listbox",
+				tabindex: "-1",
+				"aria-label": "Suggestions",
+				"data-slot": "command-list",
+				"[id]": "cmd.listId",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiCommandEmpty = class UiCommandEmpty {
+	cmd = inject(UiCommand);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("py-6 text-center text-sm", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandEmpty,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCommandEmpty,
+		isStandalone: true,
+		selector: "[uiCommandEmpty], ui-command-empty",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "presentation",
+				"data-slot": "command-empty"
+			},
+			properties: {
+				"hidden": "cmd.hasResults()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandEmpty,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCommandEmpty], ui-command-empty",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "presentation",
+				"data-slot": "command-empty",
+				"[hidden]": "cmd.hasResults()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiCommandGroup = class UiCommandGroup {
+	cmd = inject(UiCommand);
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	items = contentChildren(forwardRef(() => UiCommandItem), {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	hasVisible = computed(() => this.items().some((i) => i.visible()), ...ngDevMode ? [{ debugName: "hasVisible" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("overflow-hidden p-1 text-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiCommandGroup,
+		isStandalone: true,
+		selector: "[uiCommandGroup], ui-command-group",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "presentation",
+				"data-slot": "command-group"
+			},
+			properties: {
+				"attr.data-value": "heading()",
+				"hidden": "!hasVisible()",
+				"attr.class": "classes()"
+			}
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: i0.forwardRef(() => UiCommandItem),
+			descendants: true,
+			isSignal: true
+		}],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    @if (heading()) {
+      <div cmdk-group-heading aria-hidden="true" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading() }}</div>
+    }
+    <div role="group" cmdk-group-items [attr.aria-label]="heading() || null"><ng-content /></div>
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandGroup,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiCommandGroup], ui-command-group",
+			hostDirectives: [UiElementHost],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "presentation",
+				"data-slot": "command-group",
+				"[attr.data-value]": "heading()",
+				"[hidden]": "!hasVisible()",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    @if (heading()) {
+      <div cmdk-group-heading aria-hidden="true" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">{{ heading() }}</div>
+    }
+    <div role="group" cmdk-group-items [attr.aria-label]="heading() || null"><ng-content /></div>
+  `
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiCommandItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiCommandSeparator = class UiCommandSeparator {
+	cmd = inject(UiCommand);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("-mx-1 h-px bg-border", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCommandSeparator,
+		isStandalone: true,
+		selector: "[uiCommandSeparator], ui-command-separator",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "separator",
+				"data-slot": "command-separator"
+			},
+			properties: {
+				"hidden": "cmd.search().trim() !== \"\"",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandSeparator,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCommandSeparator], ui-command-separator",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "separator",
+				"data-slot": "command-separator",
+				"[hidden]": "cmd.search().trim() !== \"\"",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiCommandItem = class UiCommandItem {
+	cmd = inject(UiCommand);
+	el = inject(ElementRef).nativeElement;
+	id = nextId("ui-command-item");
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	keywords = input([], ...ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []);
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	select = output();
+	get disabled() {
+		return this.disabledInput();
+	}
+	resolvedValue = computed(() => this.value() || (this.el.textContent ?? "").trim(), ...ngDevMode ? [{ debugName: "resolvedValue" }] : /* istanbul ignore next */ []);
+	visible = computed(() => this.cmd.matches(this.resolvedValue(), this.keywords()), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	selected = computed(() => this.cmd.selectedId() === this.id, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn("group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	activate() {
+		if (!this.disabled) this.select.emit();
+	}
+	scrollIntoView() {
+		this.el.scrollIntoView({ block: "nearest" });
+	}
+	onPointerMove() {
+		if (!this.disabled && this.cmd.selectedId() !== this.id) this.cmd.selectedId.set(this.id);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCommandItem,
+		isStandalone: true,
+		selector: "[uiCommandItem], ui-command-item",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			keywords: {
+				classPropertyName: "keywords",
+				publicName: "keywords",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { select: "select" },
+		host: {
+			attributes: {
+				"role": "option",
+				"data-slot": "command-item"
+			},
+			listeners: {
+				"click": "activate()",
+				"pointermove": "onPointerMove()"
+			},
+			properties: {
+				"id": "id",
+				"attr.aria-selected": "selected()",
+				"attr.aria-disabled": "disabled",
+				"attr.data-disabled": "disabled",
+				"attr.data-selected": "selected()",
+				"attr.data-value": "resolvedValue()",
+				"hidden": "!visible()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCommandItem], ui-command-item",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "option",
+				"data-slot": "command-item",
+				"[id]": "id",
+				"[attr.aria-selected]": "selected()",
+				"[attr.aria-disabled]": "disabled",
+				"[attr.data-disabled]": "disabled",
+				"[attr.data-selected]": "selected()",
+				"[attr.data-value]": "resolvedValue()",
+				"[hidden]": "!visible()",
+				"[attr.class]": "classes()",
+				"(click)": "activate()",
+				"(pointermove)": "onPointerMove()"
+			}
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		keywords: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "keywords",
+				required: false
+			}]
+		}],
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}],
+		select: [{
+			type: i0.Output,
+			args: ["select"]
+		}]
+	}
+});
+var UiCommandShortcut = class UiCommandShortcut {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("ms-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandShortcut,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCommandShortcut,
+		isStandalone: true,
+		selector: "[uiCommandShortcut], ui-command-shortcut",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "command-shortcut" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandShortcut,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCommandShortcut], ui-command-shortcut",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "command-shortcut",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiCommandInputElement = class UiCommandInputElement {
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCommandInputElement,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiCommandInputElement,
+		isStandalone: true,
+		selector: "ui-command-input",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "contents" },
+		ngImport: i0,
+		template: `<input uiCommandInput [class]="userClass()" [attr.placeholder]="placeholder() || null" [attr.aria-label]="ariaLabel() || null" />`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiCommandInput,
+			selector: "input[uiCommandInput]",
+			inputs: ["class"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCommandInputElement,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-command-input",
+			imports: [UiCommandInput],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "contents" },
+			template: `<input uiCommandInput [class]="userClass()" [attr.placeholder]="placeholder() || null" [attr.aria-label]="ariaLabel() || null" />`
+		}]
+	}],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_COMMAND = [
+	UiCommand,
+	UiCommandInput,
+	UiCommandInputWrapper,
+	UiCommandList,
+	UiCommandEmpty,
+	UiCommandGroup,
+	UiCommandSeparator,
+	UiCommandItem,
+	UiCommandShortcut,
+	UiCommandInputElement
+];
+export { UI_COMMAND, UiCommand, UiCommandEmpty, UiCommandGroup, UiCommandInput, UiCommandInputElement, UiCommandInputWrapper, UiCommandItem, UiCommandList, UiCommandSeparator, UiCommandShortcut };
+
+//# sourceMappingURL=loomui-ng-ui-command.mjs.map