@raqm/ui 0.0.0-stage → 0.1.1

package/fesm2022/raqm-ui-command.mjs

@@ -0,0 +1,1210 @@
+import { ActiveDescendantKeyManager } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, Injector, afterRenderEffect, booleanAttribute, computed, effect, inject, input, isDevMode, model, output, signal, untracked, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { RaqmButton } from "@raqm/ui/button";
+import { RAQM_DIALOG, RAQM_DIALOG_POLICY, RaqmDialogBaseComponent, RaqmDialogDescriptionDirective, RaqmDialogTitleDirective } from "@raqm/ui/dialog";
+import * as i1 from "@raqm/ui/input-group";
+import { RaqmInputGroup } from "@raqm/ui/input-group";
+const RAQM_COMMAND = new InjectionToken("RaqmCommand");
+const RAQM_COMMAND_GROUP = new InjectionToken("RaqmCommandGroup");
+/** @license
+* Typed translation of cmdk/src/command-score.ts:
+* https://github.com/dip/cmdk/blob/main/cmdk/src/command-score.ts
+*
+* MIT License
+* Copyright (c) 2022 Paco Coursey
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all
+* copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*/
+const SCORE_CONTINUE_MATCH = 1;
+const SCORE_SPACE_WORD_JUMP = .9;
+const SCORE_NON_SPACE_WORD_JUMP = .8;
+const SCORE_CHARACTER_JUMP = .17;
+const SCORE_TRANSPOSITION = .1;
+const PENALTY_SKIPPED = .999;
+const PENALTY_CASE_MISMATCH = .9999;
+const PENALTY_NOT_COMPLETE = .99;
+const IS_GAP_REGEXP = /[\\/_+.#"@\[({&]/;
+const COUNT_GAPS_REGEXP = /[\\/_+.#"@\[({&]/g;
+const IS_SPACE_REGEXP = /[\s-]/;
+const COUNT_SPACE_REGEXP = /[\s-]/g;
+function commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, stringIndex, abbreviationIndex, memoizedResults) {
+	if (abbreviationIndex === abbreviation.length) return stringIndex === string.length ? SCORE_CONTINUE_MATCH : PENALTY_NOT_COMPLETE;
+	const memoizeKey = `${stringIndex},${abbreviationIndex}`;
+	if (memoizedResults[memoizeKey] !== void 0) return memoizedResults[memoizeKey];
+	const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
+	let index = lowerString.indexOf(abbreviationChar, stringIndex);
+	let highScore = 0;
+	while (index >= 0) {
+		let score = commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 1, memoizedResults);
+		if (score > highScore) {
+			if (index === stringIndex) score *= SCORE_CONTINUE_MATCH;
+			else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_NON_SPACE_WORD_JUMP;
+				const wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP);
+				if (wordBreaks && stringIndex > 0) score *= Math.pow(PENALTY_SKIPPED, wordBreaks.length);
+			} else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+				score *= SCORE_SPACE_WORD_JUMP;
+				const spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP);
+				if (spaceBreaks && stringIndex > 0) score *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length);
+			} else {
+				score *= SCORE_CHARACTER_JUMP;
+				if (stringIndex > 0) score *= Math.pow(PENALTY_SKIPPED, index - stringIndex);
+			}
+			if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) score *= PENALTY_CASE_MISMATCH;
+		}
+		if (score < SCORE_TRANSPOSITION && lowerString.charAt(index - 1) === lowerAbbreviation.charAt(abbreviationIndex + 1) || lowerAbbreviation.charAt(abbreviationIndex + 1) === lowerAbbreviation.charAt(abbreviationIndex) && lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex)) {
+			const transposedScore = commandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 2, memoizedResults);
+			if (transposedScore * SCORE_TRANSPOSITION > score) score = transposedScore * SCORE_TRANSPOSITION;
+		}
+		if (score > highScore) highScore = score;
+		index = lowerString.indexOf(abbreviationChar, index + 1);
+	}
+	memoizedResults[memoizeKey] = highScore;
+	return highScore;
+}
+function commandScore(value, search, aliases) {
+	const string = aliases.length > 0 ? `${value} ${aliases.join(" ")}` : value;
+	const format = (input) => input.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
+	return commandScoreInner(string, search, format(string), format(search), 0, 0, {});
+}
+let nextCommandId = 0;
+var RaqmCommandComponent = class RaqmCommandComponent {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	search = model("", ...ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []);
+	loop = input(false, {
+		...ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	shouldFilter = input(true, {
+		...ngDevMode ? { debugName: "shouldFilter" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	listId = `raqm-command-${++nextCommandId}-list`;
+	inputId = `${this.listId}-input`;
+	items = signal([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	activeId = signal(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	listPresent = signal(false, ...ngDevMode ? [{ debugName: "listPresent" }] : /* istanbul ignore next */ []);
+	visibleItems = computed(() => this.items().filter((item) => this.matches(item)), ...ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []);
+	hasChecked = computed(() => this.items().some((item) => item.checked()), ...ngDevMode ? [{ debugName: "hasChecked" }] : /* istanbul ignore next */ []);
+	scores = computed(() => new Map(this.items().map((item) => [item, commandScore(item.value().trim(), this.search(), [item.title(), ...item.keywords()].filter(Boolean).map((alias) => alias.trim()))])), ...ngDevMode ? [{ debugName: "scores" }] : /* istanbul ignore next */ []);
+	rankedItems = computed(() => {
+		const items = [...this.items()];
+		if (!this.shouldFilter() || !this.search()) return items;
+		const scores = this.scores();
+		const groups = /* @__PURE__ */ new Map();
+		for (const item of items) if (item.group !== null) groups.set(item.group, Math.max(groups.get(item.group) ?? 0, scores.get(item) ?? 0));
+		const groupOrder = [...groups.keys()].sort((a, b) => groups.get(b) - groups.get(a));
+		return items.sort((a, b) => {
+			if (a.group !== b.group) {
+				if (a.group === null) return -1;
+				if (b.group === null) return 1;
+				return groupOrder.indexOf(a.group) - groupOrder.indexOf(b.group);
+			}
+			if (a.disabled !== b.disabled) return a.disabled ? -1 : 1;
+			return (scores.get(b) ?? 0) - (scores.get(a) ?? 0);
+		});
+	}, ...ngDevMode ? [{ debugName: "rankedItems" }] : /* istanbul ignore next */ []);
+	injector = inject(Injector);
+	contentInjector = Injector.create({
+		providers: [{
+			provide: RAQM_COMMAND,
+			useValue: this
+		}],
+		parent: this.injector
+	});
+	manager = new ActiveDescendantKeyManager(this.rankedItems, this.injector).withVerticalOrientation().withHomeAndEnd().skipPredicate((item) => item.disabled || !this.matches(item));
+	sequence = 0;
+	focusInput;
+	originalChildren = /* @__PURE__ */ new Map();
+	constructor() {
+		afterRenderEffect(() => {
+			const items = this.rankedItems();
+			if (!this.shouldFilter() || !this.search()) {
+				for (const [parent, children] of this.originalChildren) for (const child of children) if (child.parentNode === parent) parent.appendChild(child);
+				this.originalChildren.clear();
+				return;
+			}
+			const remember = (parent) => {
+				if (parent && !this.originalChildren.has(parent)) this.originalChildren.set(parent, Array.from(parent.childNodes));
+			};
+			const groups = /* @__PURE__ */ new Set();
+			for (const item of items) {
+				const parent = item.element.parentElement;
+				remember(parent);
+				parent?.appendChild(item.element);
+				const group = item.element.closest(".raqm-command-group");
+				if (group) {
+					remember(group.parentElement);
+					groups.add(group);
+				}
+			}
+			for (const group of groups) group.parentElement?.appendChild(group);
+		});
+		effect(() => {
+			const items = this.rankedItems().filter((item) => this.matches(item) && !item.disabled);
+			const search = this.search();
+			untracked(() => {
+				if (search !== this.lastSearch || !items.some((item) => item.id === this.activeId())) {
+					this.manager.setActiveItem(items[0] ?? -1);
+					this.activeId.set(items[0]?.id ?? null);
+				}
+				this.lastSearch = search;
+			});
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.manager.destroy();
+			this.contentInjector.destroy();
+		});
+	}
+	lastSearch = "";
+	register(item) {
+		this.items.update((items) => [...items, item]);
+	}
+	unregister(item) {
+		this.items.update((items) => items.filter((candidate) => candidate !== item));
+	}
+	mintId() {
+		return `${this.listId}-option-${++this.sequence}`;
+	}
+	registerInput(focus) {
+		this.focusInput = focus;
+	}
+	unregisterInput() {
+		this.focusInput = void 0;
+	}
+	matches(item) {
+		return !this.shouldFilter() || !this.search() || (this.scores().get(item) ?? 0) > 0;
+	}
+	activate(item) {
+		if (item.disabled || !this.matches(item)) return;
+		this.manager.setActiveItem(item);
+		this.activeId.set(item.id);
+	}
+	select(item) {
+		if (item.disabled || !this.matches(item)) return;
+		this.activate(item);
+		this.focusInput?.();
+		item.select();
+	}
+	keydown(event) {
+		if (event.isComposing || event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.key === "Enter") {
+			const item = this.items().find((item) => item.id === this.activeId());
+			if (item) {
+				event.preventDefault();
+				this.select(item);
+			}
+			return;
+		}
+		if (![
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) return;
+		this.manager.withWrap(this.loop()).onKeydown(event);
+		const item = this.manager.activeItem;
+		this.activeId.set(item?.id ?? null);
+		item?.scrollIntoView();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmCommandComponent,
+		isStandalone: true,
+		selector: "raqm-command",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			search: {
+				classPropertyName: "search",
+				publicName: "search",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loop: {
+				classPropertyName: "loop",
+				publicName: "loop",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shouldFilter: {
+				classPropertyName: "shouldFilter",
+				publicName: "shouldFilter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { search: "searchChange" },
+		host: { classAttribute: "raqm-command" },
+		providers: [{
+			provide: RAQM_COMMAND,
+			useExisting: RaqmCommandComponent
+		}],
+		ngImport: i0,
+		template: "<ng-content />\r\n",
+		styles: [":host{display:flex;flex-direction:column;inline-size:100%;block-size:100%;min-block-size:0;box-sizing:border-box;overflow:hidden;padding:var(--raqm-spacing);border-radius:var(--raqm-radius-xl);background:var(--raqm-popover);color:var(--raqm-popover-foreground)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-command",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "raqm-command" },
+			providers: [{
+				provide: RAQM_COMMAND,
+				useExisting: RaqmCommandComponent
+			}],
+			template: "<ng-content />\r\n",
+			styles: [":host{display:flex;flex-direction:column;inline-size:100%;block-size:100%;min-block-size:0;box-sizing:border-box;overflow:hidden;padding:var(--raqm-spacing);border-radius:var(--raqm-radius-xl);background:var(--raqm-popover);color:var(--raqm-popover-foreground)}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		search: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "search",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["searchChange"]
+		}],
+		loop: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loop",
+				required: false
+			}]
+		}],
+		shouldFilter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shouldFilter",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmCommandDialogComponent = class RaqmCommandDialogComponent extends RaqmDialogBaseComponent {
+	showCloseButton = input(false, {
+		...ngDevMode ? { debugName: "showCloseButton" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	closeLabel = input(void 0, ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
+	title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	description = input("", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
+	closeButtonVisible = this.showCloseButton;
+	closeLabelText = this.closeLabel;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandDialogComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmCommandDialogComponent,
+		isStandalone: true,
+		selector: "raqm-command-dialog",
+		inputs: {
+			showCloseButton: {
+				classPropertyName: "showCloseButton",
+				publicName: "showCloseButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeLabel: {
+				classPropertyName: "closeLabel",
+				publicName: "closeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			description: {
+				classPropertyName: "description",
+				publicName: "description",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [{
+			provide: RAQM_DIALOG,
+			useExisting: RaqmCommandDialogComponent
+		}, {
+			provide: RAQM_DIALOG_POLICY,
+			useFactory: () => ({
+				role: "dialog",
+				contentClass: "raqm-command-dialog-content",
+				paneClass: "raqm-command-dialog-pane",
+				touchOpening: signal(false),
+				dismissOnBackdrop: true,
+				allowWithoutTrigger: true
+			})
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<ng-content />\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content raqm-command-dialog-content\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <header class=\"raqm-command-dialog-header\">\r\n      <h2 raqm-dialog-title>{{ title() }}</h2>\r\n      @if (description()) {\r\n        <p raqm-dialog-description>{{ description() }}</p>\r\n      }\r\n    </header>\r\n    <raqm-command #command [label]=\"title()\"\r\n      ><ng-container\r\n        [ngTemplateOutlet]=\"contentTemplate()\"\r\n        [ngTemplateOutletInjector]=\"command.contentInjector\"\r\n    /></raqm-command>\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"m18 6-12 12M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+		styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 6);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 6);border-radius:var(--raqm-radius-xl);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;inset-block-start:calc(var(--raqm-spacing) * 4.5);inset-inline-end:calc(var(--raqm-spacing) * 4.5)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n", ".raqm-command-dialog-content{padding:0;gap:0;overflow:hidden;border-radius:var(--raqm-radius-xl);max-block-size:calc(66.6666666667dvh - 1rem)}.raqm-command-dialog-content .raqm-dialog-close{inset-block-start:calc(var(--raqm-spacing) * 2.5);inset-inline-end:calc(var(--raqm-spacing) * 2)}.raqm-command-dialog-header{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: RaqmButton,
+				selector: "button[raqm-button], a[raqm-button]",
+				inputs: [
+					"raqm-button",
+					"extra-small",
+					"small",
+					"large",
+					"icon",
+					"icon-extra-small",
+					"icon-small",
+					"icon-large",
+					"disabled",
+					"tabindex"
+				]
+			},
+			{
+				kind: "component",
+				type: RaqmCommandComponent,
+				selector: "raqm-command",
+				inputs: [
+					"label",
+					"search",
+					"loop",
+					"shouldFilter"
+				],
+				outputs: ["searchChange"]
+			},
+			{
+				kind: "directive",
+				type: RaqmDialogTitleDirective,
+				selector: "[raqm-dialog-title]"
+			},
+			{
+				kind: "directive",
+				type: RaqmDialogDescriptionDirective,
+				selector: "[raqm-dialog-description]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandDialogComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-command-dialog",
+			imports: [
+				NgTemplateOutlet,
+				RaqmButton,
+				RaqmCommandComponent,
+				RaqmDialogTitleDirective,
+				RaqmDialogDescriptionDirective
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: RAQM_DIALOG,
+				useExisting: RaqmCommandDialogComponent
+			}, {
+				provide: RAQM_DIALOG_POLICY,
+				useFactory: () => ({
+					role: "dialog",
+					contentClass: "raqm-command-dialog-content",
+					paneClass: "raqm-command-dialog-pane",
+					touchOpening: signal(false),
+					dismissOnBackdrop: true,
+					allowWithoutTrigger: true
+				})
+			}],
+			template: "<ng-content />\r\n<ng-template #panel>\r\n  <div\r\n    class=\"raqm-dialog-content raqm-command-dialog-content\"\r\n    [attr.dir]=\"panelDir()\"\r\n    [class.raqm-dialog-content--entering]=\"entering()\"\r\n    [class.raqm-dialog-content--closing]=\"closing()\"\r\n  >\r\n    <header class=\"raqm-command-dialog-header\">\r\n      <h2 raqm-dialog-title>{{ title() }}</h2>\r\n      @if (description()) {\r\n        <p raqm-dialog-description>{{ description() }}</p>\r\n      }\r\n    </header>\r\n    <raqm-command #command [label]=\"title()\"\r\n      ><ng-container\r\n        [ngTemplateOutlet]=\"contentTemplate()\"\r\n        [ngTemplateOutletInjector]=\"command.contentInjector\"\r\n    /></raqm-command>\r\n    @if (closeButtonVisible()) {\r\n      <button\r\n        raqm-button=\"ghost\"\r\n        icon-small\r\n        class=\"raqm-dialog-close\"\r\n        [attr.aria-label]=\"closeLabelText()\"\r\n        (click)=\"onCloseButtonClick()\"\r\n      >\r\n        <svg\r\n          viewBox=\"0 0 24 24\"\r\n          fill=\"none\"\r\n          stroke=\"currentColor\"\r\n          stroke-width=\"2\"\r\n          stroke-linecap=\"round\"\r\n          aria-hidden=\"true\"\r\n          focusable=\"false\"\r\n        >\r\n          <path d=\"m18 6-12 12M6 6l12 12\" />\r\n        </svg>\r\n      </button>\r\n    }\r\n  </div>\r\n</ng-template>\r\n",
+			styles: [":host{display:contents}.raqm-dialog-content{position:relative;display:grid;gap:calc(var(--raqm-spacing) * 6);box-sizing:border-box;inline-size:calc(100vw - 2rem);inline-size:calc(100dvw - 2rem);max-inline-size:100%;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);overflow:auto;padding:calc(var(--raqm-spacing) * 6);border-radius:var(--raqm-radius-xl);background-color:var(--raqm-popover);color:var(--raqm-popover-foreground);font-size:var(--raqm-font-size-sm);line-height:1.25rem;box-shadow:0 0 0 1px color-mix(in oklch,var(--raqm-foreground) 10%,transparent);outline:none}@media(min-width:40rem){.raqm-dialog-content{inline-size:24rem}}.raqm-dialog-content--entering{animation:raqm-dialog-in var(--raqm-duration-fast) var(--raqm-ease-out)}@keyframes raqm-dialog-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}.raqm-dialog-content--closing{opacity:0;transform:scale(.95);transition:opacity var(--raqm-duration-fast) var(--raqm-ease-out),transform var(--raqm-duration-fast) var(--raqm-ease-out)}@media(prefers-reduced-motion:reduce){.raqm-dialog-content,.raqm-dialog-content--closing{animation:none;transition:none}}.raqm-dialog-close{position:absolute;inset-block-start:calc(var(--raqm-spacing) * 4.5);inset-inline-end:calc(var(--raqm-spacing) * 4.5)}@media(forced-colors:active){.raqm-dialog-close{border-color:ButtonText}.raqm-dialog-content{border:1px solid CanvasText}}\n", ".raqm-command-dialog-content{padding:0;gap:0;overflow:hidden;border-radius:var(--raqm-radius-xl);max-block-size:calc(66.6666666667dvh - 1rem)}.raqm-command-dialog-content .raqm-dialog-close{inset-block-start:calc(var(--raqm-spacing) * 2.5);inset-inline-end:calc(var(--raqm-spacing) * 2)}.raqm-command-dialog-header{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"]
+		}]
+	}],
+	propDecorators: {
+		showCloseButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showCloseButton",
+				required: false
+			}]
+		}],
+		closeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeLabel",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmCommandInputComponent = class RaqmCommandInputComponent {
+	command = inject(RAQM_COMMAND);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	control = viewChild("control", ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.command.registerInput(() => this.control()?.nativeElement.focus());
+		inject(DestroyRef).onDestroy(() => this.command.unregisterInput());
+	}
+	onInput(event) {
+		this.command.search.set(event.target.value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: RaqmCommandInputComponent,
+		isStandalone: true,
+		selector: "raqm-command-input",
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "raqm-command-input-wrapper" },
+		viewQueries: [{
+			propertyName: "control",
+			first: true,
+			predicate: ["control"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<raqm-input-group class=\"raqm-command-input-group\">\r\n  <input\r\n    #control\r\n    raqm-input-group-control\r\n    class=\"raqm-command-input\"\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    spellcheck=\"false\"\r\n    aria-autocomplete=\"list\"\r\n    aria-haspopup=\"listbox\"\r\n    [id]=\"command.inputId\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-expanded]=\"command.listPresent()\"\r\n    [attr.aria-controls]=\"command.listPresent() ? command.listId : null\"\r\n    [attr.aria-activedescendant]=\"command.listPresent() ? command.activeId() : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [value]=\"command.search()\"\r\n    (input)=\"onInput($event)\"\r\n    (keydown)=\"command.keydown($event)\"\r\n  />\r\n  <raqm-input-group-addon>\r\n    <svg\r\n      class=\"raqm-command-input-icon\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      aria-hidden=\"true\"\r\n      focusable=\"false\"\r\n    >\r\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\r\n      <path d=\"m21 21-4.3-4.3\" />\r\n    </svg>\r\n  </raqm-input-group-addon>\r\n</raqm-input-group>\r\n",
+		styles: [":host{display:block;padding:var(--raqm-spacing);padding-block-end:0}.raqm-command-input-group.raqm-input-group{block-size:calc(var(--raqm-spacing) * 8);border-color:color-mix(in oklch,var(--raqm-input) 30%,transparent);background:color-mix(in oklch,var(--raqm-input) 30%,transparent);border-radius:var(--raqm-radius-lg)}.raqm-command-input{inline-size:100%;min-inline-size:0;align-self:stretch;padding-inline:calc(var(--raqm-spacing) * 1.5);border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}.raqm-command-input::placeholder{color:var(--raqm-muted-foreground)}.raqm-command-input:disabled{cursor:not-allowed;opacity:var(--raqm-disabled-opacity)}.raqm-command-input-icon{inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);flex-shrink:0;opacity:.5}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: i1.RaqmInputGroupComponent,
+				selector: "raqm-input-group"
+			},
+			{
+				kind: "component",
+				type: i1.RaqmInputGroupAddonComponent,
+				selector: "raqm-input-group-addon",
+				inputs: ["align"]
+			},
+			{
+				kind: "directive",
+				type: i1.RaqmInputGroupControlDirective,
+				selector: "[raqm-input-group-control]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-command-input",
+			imports: [RaqmInputGroup],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "raqm-command-input-wrapper" },
+			template: "<raqm-input-group class=\"raqm-command-input-group\">\r\n  <input\r\n    #control\r\n    raqm-input-group-control\r\n    class=\"raqm-command-input\"\r\n    type=\"text\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    spellcheck=\"false\"\r\n    aria-autocomplete=\"list\"\r\n    aria-haspopup=\"listbox\"\r\n    [id]=\"command.inputId\"\r\n    [attr.aria-label]=\"label()\"\r\n    [attr.aria-expanded]=\"command.listPresent()\"\r\n    [attr.aria-controls]=\"command.listPresent() ? command.listId : null\"\r\n    [attr.aria-activedescendant]=\"command.listPresent() ? command.activeId() : null\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [value]=\"command.search()\"\r\n    (input)=\"onInput($event)\"\r\n    (keydown)=\"command.keydown($event)\"\r\n  />\r\n  <raqm-input-group-addon>\r\n    <svg\r\n      class=\"raqm-command-input-icon\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      aria-hidden=\"true\"\r\n      focusable=\"false\"\r\n    >\r\n      <circle cx=\"11\" cy=\"11\" r=\"8\" />\r\n      <path d=\"m21 21-4.3-4.3\" />\r\n    </svg>\r\n  </raqm-input-group-addon>\r\n</raqm-input-group>\r\n",
+			styles: [":host{display:block;padding:var(--raqm-spacing);padding-block-end:0}.raqm-command-input-group.raqm-input-group{block-size:calc(var(--raqm-spacing) * 8);border-color:color-mix(in oklch,var(--raqm-input) 30%,transparent);background:color-mix(in oklch,var(--raqm-input) 30%,transparent);border-radius:var(--raqm-radius-lg)}.raqm-command-input{inline-size:100%;min-inline-size:0;align-self:stretch;padding-inline:calc(var(--raqm-spacing) * 1.5);border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}.raqm-command-input::placeholder{color:var(--raqm-muted-foreground)}.raqm-command-input:disabled{cursor:not-allowed;opacity:var(--raqm-disabled-opacity)}.raqm-command-input-icon{inline-size:calc(var(--raqm-spacing) * 4);block-size:calc(var(--raqm-spacing) * 4);flex-shrink:0;opacity:.5}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		control: [{
+			type: i0.ViewChild,
+			args: ["control", { isSignal: true }]
+		}]
+	}
+});
+var RaqmCommandListComponent = class RaqmCommandListComponent {
+	command = inject(RAQM_COMMAND);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.command.listPresent.set(true);
+		inject(DestroyRef).onDestroy(() => this.command.listPresent.set(false));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmCommandListComponent,
+		isStandalone: true,
+		selector: "raqm-command-list",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "listbox" },
+			properties: {
+				"id": "command.listId",
+				"attr.aria-label": "label() || command.label()",
+				"attr.aria-multiselectable": "command.hasChecked() ? \"true\" : null"
+			},
+			classAttribute: "raqm-command-list"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host(.raqm-command-list){display:block;min-block-size:0;max-block-size:calc(var(--raqm-spacing) * 72);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-padding-block:var(--raqm-spacing);outline:none}:host(.raqm-command-group){display:block;overflow:hidden;padding:var(--raqm-spacing);color:var(--raqm-foreground)}.raqm-command-group-heading{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);color:var(--raqm-muted-foreground);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4);font-weight:var(--raqm-font-weight-medium)}:host(.raqm-command-empty){display:block;padding-block:calc(var(--raqm-spacing) * 6);text-align:center;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host(.raqm-command-item){position:relative;display:flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-sm);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5);cursor:default;outline:none;-webkit-user-select:none;user-select:none}:host(.raqm-command-item[data-raqm-selected=true]){background:var(--raqm-muted);color:var(--raqm-foreground)}:host(.raqm-command-item[data-raqm-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-command-item-indicator{margin-inline-start:auto;opacity:0}:host([data-raqm-checked=true]) .raqm-command-item-indicator{opacity:1}:host([hidden]){display:none}@media(forced-colors:active){:host(.raqm-command-item[data-raqm-selected=true]){outline:1px solid Highlight}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-command-list",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-command-list",
+				role: "listbox",
+				"[id]": "command.listId",
+				"[attr.aria-label]": "label() || command.label()",
+				"[attr.aria-multiselectable]": "command.hasChecked() ? \"true\" : null"
+			},
+			styles: [":host(.raqm-command-list){display:block;min-block-size:0;max-block-size:calc(var(--raqm-spacing) * 72);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-padding-block:var(--raqm-spacing);outline:none}:host(.raqm-command-group){display:block;overflow:hidden;padding:var(--raqm-spacing);color:var(--raqm-foreground)}.raqm-command-group-heading{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);color:var(--raqm-muted-foreground);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4);font-weight:var(--raqm-font-weight-medium)}:host(.raqm-command-empty){display:block;padding-block:calc(var(--raqm-spacing) * 6);text-align:center;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host(.raqm-command-item){position:relative;display:flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-sm);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5);cursor:default;outline:none;-webkit-user-select:none;user-select:none}:host(.raqm-command-item[data-raqm-selected=true]){background:var(--raqm-muted);color:var(--raqm-foreground)}:host(.raqm-command-item[data-raqm-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-command-item-indicator{margin-inline-start:auto;opacity:0}:host([data-raqm-checked=true]) .raqm-command-item-indicator{opacity:1}:host([hidden]){display:none}@media(forced-colors:active){:host(.raqm-command-item[data-raqm-selected=true]){outline:1px solid Highlight}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: false
+		}]
+	}] }
+});
+var RaqmCommandEmptyComponent = class RaqmCommandEmptyComponent {
+	command = inject(RAQM_COMMAND);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandEmptyComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmCommandEmptyComponent,
+		isStandalone: true,
+		selector: "raqm-command-empty",
+		host: {
+			attributes: { "role": "presentation" },
+			properties: { "hidden": "command.visibleItems().length !== 0" },
+			classAttribute: "raqm-command-empty"
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host(.raqm-command-list){display:block;min-block-size:0;max-block-size:calc(var(--raqm-spacing) * 72);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-padding-block:var(--raqm-spacing);outline:none}:host(.raqm-command-group){display:block;overflow:hidden;padding:var(--raqm-spacing);color:var(--raqm-foreground)}.raqm-command-group-heading{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);color:var(--raqm-muted-foreground);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4);font-weight:var(--raqm-font-weight-medium)}:host(.raqm-command-empty){display:block;padding-block:calc(var(--raqm-spacing) * 6);text-align:center;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host(.raqm-command-item){position:relative;display:flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-sm);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5);cursor:default;outline:none;-webkit-user-select:none;user-select:none}:host(.raqm-command-item[data-raqm-selected=true]){background:var(--raqm-muted);color:var(--raqm-foreground)}:host(.raqm-command-item[data-raqm-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-command-item-indicator{margin-inline-start:auto;opacity:0}:host([data-raqm-checked=true]) .raqm-command-item-indicator{opacity:1}:host([hidden]){display:none}@media(forced-colors:active){:host(.raqm-command-item[data-raqm-selected=true]){outline:1px solid Highlight}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandEmptyComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-command-empty",
+			template: "<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-command-empty",
+				role: "presentation",
+				"[hidden]": "command.visibleItems().length !== 0"
+			},
+			styles: [":host(.raqm-command-list){display:block;min-block-size:0;max-block-size:calc(var(--raqm-spacing) * 72);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-padding-block:var(--raqm-spacing);outline:none}:host(.raqm-command-group){display:block;overflow:hidden;padding:var(--raqm-spacing);color:var(--raqm-foreground)}.raqm-command-group-heading{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);color:var(--raqm-muted-foreground);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4);font-weight:var(--raqm-font-weight-medium)}:host(.raqm-command-empty){display:block;padding-block:calc(var(--raqm-spacing) * 6);text-align:center;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host(.raqm-command-item){position:relative;display:flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-sm);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5);cursor:default;outline:none;-webkit-user-select:none;user-select:none}:host(.raqm-command-item[data-raqm-selected=true]){background:var(--raqm-muted);color:var(--raqm-foreground)}:host(.raqm-command-item[data-raqm-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-command-item-indicator{margin-inline-start:auto;opacity:0}:host([data-raqm-checked=true]) .raqm-command-item-indicator{opacity:1}:host([hidden]){display:none}@media(forced-colors:active){:host(.raqm-command-item[data-raqm-selected=true]){outline:1px solid Highlight}}\n"]
+		}]
+	}]
+});
+let nextGroupId = 0;
+var RaqmCommandGroupComponent = class RaqmCommandGroupComponent {
+	command = inject(RAQM_COMMAND);
+	id = `raqm-command-group-${++nextGroupId}`;
+	headingId = `${this.id}-heading`;
+	heading = input("", ...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	visible = computed(() => this.command.visibleItems().some((item) => item.group === this.id), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	ngOnInit() {
+		if (isDevMode() && !this.heading() && !this.label()) console.error("[raqm-command-group] The group has no accessible name. Provide a `heading` or a `label`.");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandGroupComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: RaqmCommandGroupComponent,
+		isStandalone: true,
+		selector: "raqm-command-group",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "group" },
+			properties: {
+				"attr.aria-labelledby": "heading() ? headingId : null",
+				"attr.aria-label": "heading() ? null : label()",
+				"hidden": "!visible()"
+			},
+			classAttribute: "raqm-command-group"
+		},
+		providers: [{
+			provide: RAQM_COMMAND_GROUP,
+			useFactory: () => inject(RaqmCommandGroupComponent).id
+		}],
+		ngImport: i0,
+		template: "@if (heading()) { <div class=\"raqm-command-group-heading\" [id]=\"headingId\">{{ heading() }}</div> }<ng-content />",
+		isInline: true,
+		styles: [":host(.raqm-command-list){display:block;min-block-size:0;max-block-size:calc(var(--raqm-spacing) * 72);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-padding-block:var(--raqm-spacing);outline:none}:host(.raqm-command-group){display:block;overflow:hidden;padding:var(--raqm-spacing);color:var(--raqm-foreground)}.raqm-command-group-heading{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);color:var(--raqm-muted-foreground);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4);font-weight:var(--raqm-font-weight-medium)}:host(.raqm-command-empty){display:block;padding-block:calc(var(--raqm-spacing) * 6);text-align:center;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host(.raqm-command-item){position:relative;display:flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-sm);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5);cursor:default;outline:none;-webkit-user-select:none;user-select:none}:host(.raqm-command-item[data-raqm-selected=true]){background:var(--raqm-muted);color:var(--raqm-foreground)}:host(.raqm-command-item[data-raqm-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-command-item-indicator{margin-inline-start:auto;opacity:0}:host([data-raqm-checked=true]) .raqm-command-item-indicator{opacity:1}:host([hidden]){display:none}@media(forced-colors:active){:host(.raqm-command-item[data-raqm-selected=true]){outline:1px solid Highlight}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandGroupComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-command-group",
+			template: "@if (heading()) { <div class=\"raqm-command-group-heading\" [id]=\"headingId\">{{ heading() }}</div> }<ng-content />",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: RAQM_COMMAND_GROUP,
+				useFactory: () => inject(RaqmCommandGroupComponent).id
+			}],
+			host: {
+				class: "raqm-command-group",
+				role: "group",
+				"[attr.aria-labelledby]": "heading() ? headingId : null",
+				"[attr.aria-label]": "heading() ? null : label()",
+				"[hidden]": "!visible()"
+			},
+			styles: [":host(.raqm-command-list){display:block;min-block-size:0;max-block-size:calc(var(--raqm-spacing) * 72);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-padding-block:var(--raqm-spacing);outline:none}:host(.raqm-command-group){display:block;overflow:hidden;padding:var(--raqm-spacing);color:var(--raqm-foreground)}.raqm-command-group-heading{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);color:var(--raqm-muted-foreground);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4);font-weight:var(--raqm-font-weight-medium)}:host(.raqm-command-empty){display:block;padding-block:calc(var(--raqm-spacing) * 6);text-align:center;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host(.raqm-command-item){position:relative;display:flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-sm);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5);cursor:default;outline:none;-webkit-user-select:none;user-select:none}:host(.raqm-command-item[data-raqm-selected=true]){background:var(--raqm-muted);color:var(--raqm-foreground)}:host(.raqm-command-item[data-raqm-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-command-item-indicator{margin-inline-start:auto;opacity:0}:host([data-raqm-checked=true]) .raqm-command-item-indicator{opacity:1}:host([hidden]){display:none}@media(forced-colors:active){:host(.raqm-command-item[data-raqm-selected=true]){outline:1px solid Highlight}}\n"]
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+var RaqmCommandSeparatorDirective = class RaqmCommandSeparatorDirective {
+	command = inject(RAQM_COMMAND);
+	alwaysRender = input(false, {
+		...ngDevMode ? { debugName: "alwaysRender" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandSeparatorDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmCommandSeparatorDirective,
+		isStandalone: true,
+		selector: "[raqm-command-separator]",
+		inputs: { alwaysRender: {
+			classPropertyName: "alwaysRender",
+			publicName: "alwaysRender",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "presentation" },
+			properties: { "hidden": "!alwaysRender() && command.search().trim().length > 0" },
+			classAttribute: "raqm-command-separator"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandSeparatorDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-command-separator]",
+			host: {
+				class: "raqm-command-separator",
+				role: "presentation",
+				"[hidden]": "!alwaysRender() && command.search().trim().length > 0"
+			}
+		}]
+	}],
+	propDecorators: { alwaysRender: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "alwaysRender",
+			required: false
+		}]
+	}] }
+});
+var RaqmCommandItemComponent = class RaqmCommandItemComponent {
+	command = inject(RAQM_COMMAND);
+	host = inject(ElementRef);
+	group = inject(RAQM_COMMAND_GROUP, { optional: true });
+	id = this.command.mintId();
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	keywords = input([], ...ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []);
+	disabledValue = input(false, {
+		...ngDevMode ? { debugName: "disabledValue" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	checked = input(false, {
+		...ngDevMode ? { debugName: "checked" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selected = output();
+	get disabled() {
+		return this.disabledValue();
+	}
+	get element() {
+		return this.host.nativeElement;
+	}
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.command.unregister(this));
+	}
+	ngOnInit() {
+		this.command.register(this);
+	}
+	setActiveStyles() {
+		this.command.activeId.set(this.id);
+	}
+	setInactiveStyles() {
+		if (this.command.activeId() === this.id) this.command.activeId.set(null);
+	}
+	select() {
+		this.selected.emit(this.value());
+	}
+	scrollIntoView() {
+		this.host.nativeElement.scrollIntoView({ block: "nearest" });
+	}
+	onPointerMove(event) {
+		if (event.pointerType !== "touch") this.command.activate(this);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandItemComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RaqmCommandItemComponent,
+		isStandalone: true,
+		selector: "raqm-command-item",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			keywords: {
+				classPropertyName: "keywords",
+				publicName: "keywords",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledValue: {
+				classPropertyName: "disabledValue",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selected: "selected" },
+		host: {
+			attributes: { "role": "option" },
+			listeners: {
+				"pointermove": "onPointerMove($event)",
+				"mousedown": "$event.preventDefault()",
+				"click": "command.select(this)"
+			},
+			properties: {
+				"id": "id",
+				"hidden": "!command.matches(this)",
+				"attr.aria-label": "title() || value()",
+				"attr.aria-checked": "command.hasChecked() ? (checked() ? \"true\" : \"false\") : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-raqm-selected": "command.activeId() === id ? \"true\" : null",
+				"attr.data-raqm-disabled": "disabled ? \"true\" : null",
+				"attr.data-raqm-checked": "checked() ? \"true\" : null"
+			},
+			classAttribute: "raqm-command-item"
+		},
+		ngImport: i0,
+		template: "<ng-content /><svg class=\"raqm-command-item-indicator\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m20 6-11 11-5-5\"/></svg>",
+		isInline: true,
+		styles: [":host(.raqm-command-list){display:block;min-block-size:0;max-block-size:calc(var(--raqm-spacing) * 72);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-padding-block:var(--raqm-spacing);outline:none}:host(.raqm-command-group){display:block;overflow:hidden;padding:var(--raqm-spacing);color:var(--raqm-foreground)}.raqm-command-group-heading{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);color:var(--raqm-muted-foreground);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4);font-weight:var(--raqm-font-weight-medium)}:host(.raqm-command-empty){display:block;padding-block:calc(var(--raqm-spacing) * 6);text-align:center;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host(.raqm-command-item){position:relative;display:flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-sm);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5);cursor:default;outline:none;-webkit-user-select:none;user-select:none}:host(.raqm-command-item[data-raqm-selected=true]){background:var(--raqm-muted);color:var(--raqm-foreground)}:host(.raqm-command-item[data-raqm-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-command-item-indicator{margin-inline-start:auto;opacity:0}:host([data-raqm-checked=true]) .raqm-command-item-indicator{opacity:1}:host([hidden]){display:none}@media(forced-colors:active){:host(.raqm-command-item[data-raqm-selected=true]){outline:1px solid Highlight}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "raqm-command-item",
+			template: "<ng-content /><svg class=\"raqm-command-item-indicator\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m20 6-11 11-5-5\"/></svg>",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "raqm-command-item",
+				role: "option",
+				"[id]": "id",
+				"[hidden]": "!command.matches(this)",
+				"[attr.aria-label]": "title() || value()",
+				"[attr.aria-checked]": "command.hasChecked() ? (checked() ? \"true\" : \"false\") : null",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.data-raqm-selected]": "command.activeId() === id ? \"true\" : null",
+				"[attr.data-raqm-disabled]": "disabled ? \"true\" : null",
+				"[attr.data-raqm-checked]": "checked() ? \"true\" : null",
+				"(pointermove)": "onPointerMove($event)",
+				"(mousedown)": "$event.preventDefault()",
+				"(click)": "command.select(this)"
+			},
+			styles: [":host(.raqm-command-list){display:block;min-block-size:0;max-block-size:calc(var(--raqm-spacing) * 72);overflow-x:hidden;overflow-y:auto;scrollbar-width:none;scroll-padding-block:var(--raqm-spacing);outline:none}:host(.raqm-command-group){display:block;overflow:hidden;padding:var(--raqm-spacing);color:var(--raqm-foreground)}.raqm-command-group-heading{padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);color:var(--raqm-muted-foreground);font-size:var(--raqm-font-size-xs);line-height:calc(var(--raqm-spacing) * 4);font-weight:var(--raqm-font-weight-medium)}:host(.raqm-command-empty){display:block;padding-block:calc(var(--raqm-spacing) * 6);text-align:center;font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5)}:host(.raqm-command-item){position:relative;display:flex;align-items:center;gap:calc(var(--raqm-spacing) * 2);padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * 1.5);border-radius:var(--raqm-radius-sm);font-size:var(--raqm-font-size-sm);line-height:calc(var(--raqm-spacing) * 5);cursor:default;outline:none;-webkit-user-select:none;user-select:none}:host(.raqm-command-item[data-raqm-selected=true]){background:var(--raqm-muted);color:var(--raqm-foreground)}:host(.raqm-command-item[data-raqm-disabled=true]){pointer-events:none;opacity:var(--raqm-disabled-opacity)}.raqm-command-item-indicator{margin-inline-start:auto;opacity:0}:host([data-raqm-checked=true]) .raqm-command-item-indicator{opacity:1}:host([hidden]){display:none}@media(forced-colors:active){:host(.raqm-command-item[data-raqm-selected=true]){outline:1px solid Highlight}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		keywords: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "keywords",
+				required: false
+			}]
+		}],
+		disabledValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Output,
+			args: ["selected"]
+		}]
+	}
+});
+var RaqmCommandShortcutDirective = class RaqmCommandShortcutDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RaqmCommandShortcutDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RaqmCommandShortcutDirective,
+		isStandalone: true,
+		selector: "[raqm-command-shortcut]",
+		host: {
+			attributes: { "aria-hidden": "true" },
+			classAttribute: "raqm-command-shortcut"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RaqmCommandShortcutDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[raqm-command-shortcut]",
+			host: {
+				class: "raqm-command-shortcut",
+				"aria-hidden": "true"
+			}
+		}]
+	}]
+});
+const RaqmCommand = [
+	RaqmCommandComponent,
+	RaqmCommandDialogComponent,
+	RaqmCommandInputComponent,
+	RaqmCommandListComponent,
+	RaqmCommandEmptyComponent,
+	RaqmCommandGroupComponent,
+	RaqmCommandSeparatorDirective,
+	RaqmCommandItemComponent,
+	RaqmCommandShortcutDirective
+];
+export { RaqmCommand, RaqmCommandComponent, RaqmCommandDialogComponent, RaqmCommandEmptyComponent, RaqmCommandGroupComponent, RaqmCommandInputComponent, RaqmCommandItemComponent, RaqmCommandListComponent, RaqmCommandSeparatorDirective, RaqmCommandShortcutDirective };
+
+//# sourceMappingURL=raqm-ui-command.mjs.map