@loomui-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,971 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, booleanAttribute, computed, contentChildren, effect, forwardRef, inject, input, model, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { buttonVariants } from "@loomui-ng/ui/button";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, UiLayerRoot, UiPopperContentBase, cn, nextId } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+const comboboxTriggerClass = "group/button inline-flex shrink-0 items-center rounded-lg border bg-clip-padding text-sm whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50 h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 w-64 justify-between font-normal [&_svg:not([class*='size-'])]:size-4";
+const comboboxContentClass = "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95";
+const comboboxListClass = "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0";
+const comboboxItemClass = "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pe-8 ps-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
+const comboboxEmptyClass = "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex";
+const comboboxChipsClass = "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 w-full max-w-xs";
+const comboboxChipClass = "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0";
+const comboboxChipInputClass = "min-w-16 flex-1 outline-none";
+const comboboxClearClass = "group/button shrink-0 justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 flex items-center gap-2 text-sm shadow-none size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0 has-[>ui-icon]:p-0";
+const UI_COMBOBOX_GENERATED = [];
+var UiCombobox = class UiCombobox extends UiLayerRoot {
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	listId = nextId("ui-combobox-list");
+	search = signal("", ...ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []);
+	highlighted = signal(null, ...ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []);
+	items = contentChildren(forwardRef(() => UiComboboxItem), {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	selectedLabel = computed(() => this.items().find((i) => i.value() === this.value())?.label() ?? "", ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
+	visible = computed(() => this.items().filter((i) => i.visible()), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	hasResults = computed(() => this.visible().length > 0, ...ngDevMode ? [{ debugName: "hasResults" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	constructor() {
+		super();
+		effect(() => {
+			if (this.open()) {
+				this.search.set("");
+				queueMicrotask(() => this.ensureHighlight(true));
+			}
+		});
+	}
+	ensureHighlight(reset = false) {
+		const enabled = this.visible().filter((i) => !i.disabled);
+		const selected = enabled.find((i) => i.value() === this.value());
+		if (reset) this.highlighted.set((selected ?? enabled[0])?.id ?? null);
+		else if (!enabled.some((i) => i.id === this.highlighted())) this.highlighted.set(enabled[0]?.id ?? null);
+	}
+	move(delta) {
+		const enabled = this.visible().filter((i) => !i.disabled);
+		if (!enabled.length) return;
+		let idx = enabled.findIndex((i) => i.id === this.highlighted());
+		if (delta === "first") idx = 0;
+		else if (delta === "last") idx = enabled.length - 1;
+		else idx = (idx + delta + enabled.length) % enabled.length;
+		this.highlighted.set(enabled[idx].id);
+		enabled[idx].scrollIntoView();
+	}
+	choose(v) {
+		this.value.set(v);
+		this.onChange(v);
+		this.close();
+	}
+	chooseHighlighted() {
+		this.items().find((i) => i.id === this.highlighted())?.activate();
+	}
+	writeValue(v) {
+		this.value.set(v ?? "");
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(d) {
+		this.cvaDisabled.set(d);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCombobox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiCombobox,
+		isStandalone: true,
+		selector: "[uiCombobox], ui-combobox",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiCombobox),
+			multi: true
+		}],
+		queries: [{
+			propertyName: "items",
+			predicate: i0.forwardRef(() => UiComboboxItem),
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["uiCombobox"],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCombobox,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiCombobox], ui-combobox",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiCombobox",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiCombobox),
+				multi: true
+			}]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiComboboxItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiComboboxTrigger = class UiComboboxTrigger {
+	root = inject(UiCombobox);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(buttonVariants({ variant: "outline" }), "w-[200px] justify-between font-normal", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.root.trigger.set(inject(ElementRef).nativeElement);
+	}
+	onKeydown(e) {
+		if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+			e.preventDefault();
+			this.root.open.set(true);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiComboboxTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiComboboxTrigger,
+		isStandalone: true,
+		selector: "button[uiComboboxTrigger], ui-combobox-trigger",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"type": "button",
+				"role": "combobox",
+				"aria-haspopup": "listbox",
+				"data-slot": "combobox-trigger"
+			},
+			listeners: {
+				"click": "root.toggle()",
+				"keydown": "onKeydown($event)",
+				"blur": "root.onTouched()"
+			},
+			properties: {
+				"attr.aria-expanded": "root.open()",
+				"attr.aria-controls": "root.open() ? root.listId : null",
+				"attr.data-state": "root.open() ? \"open\" : \"closed\"",
+				"attr.data-placeholder": "root.value() === \"\" ? \"\" : null",
+				"attr.disabled": "(root.isDisabled()) ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `<ng-content /><svg uiIcon="chevrons-up-down" class="pointer-events-none size-4 shrink-0 text-muted-foreground"></svg>`,
+		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: UiComboboxTrigger,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[uiComboboxTrigger], ui-combobox-trigger",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				type: "button",
+				role: "combobox",
+				"aria-haspopup": "listbox",
+				"data-slot": "combobox-trigger",
+				"[attr.aria-expanded]": "root.open()",
+				"[attr.aria-controls]": "root.open() ? root.listId : null",
+				"[attr.data-state]": "root.open() ? \"open\" : \"closed\"",
+				"[attr.data-placeholder]": "root.value() === \"\" ? \"\" : null",
+				"[attr.disabled]": "(root.isDisabled()) ? \"\" : null",
+				"[attr.class]": "classes()",
+				"(click)": "root.toggle()",
+				"(keydown)": "onKeydown($event)",
+				"(blur)": "root.onTouched()"
+			},
+			template: `<ng-content /><svg uiIcon="chevrons-up-down" class="pointer-events-none size-4 shrink-0 text-muted-foreground"></svg>`
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiComboboxValue = class UiComboboxValue {
+	root = inject(UiCombobox);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	text = computed(() => this.root.selectedLabel() || this.placeholder(), ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiComboboxValue,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiComboboxValue,
+		isStandalone: true,
+		selector: "[uiComboboxValue], ui-combobox-value",
+		inputs: { placeholder: {
+			classPropertyName: "placeholder",
+			publicName: "placeholder",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "combobox-value" },
+			properties: {
+				"textContent": "text()",
+				"class.text-muted-foreground": "!root.selectedLabel()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiComboboxValue,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiComboboxValue], ui-combobox-value",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "combobox-value",
+				"[textContent]": "text()",
+				"[class.text-muted-foreground]": "!root.selectedLabel()"
+			}
+		}]
+	}],
+	propDecorators: { placeholder: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "placeholder",
+			required: false
+		}]
+	}] }
+});
+var UiComboboxContent = class UiComboboxContent extends UiPopperContentBase {
+	root = inject(UiCombobox);
+	varPrefix = "--radix-combobox";
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(comboboxContentClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		this.matchTriggerWidth = true;
+		this.init();
+	}
+	onAttached() {
+		const t = this.root.trigger();
+		if (t) {
+			const r = t.getBoundingClientRect();
+			this.el.style.setProperty("--anchor-width", `${r.width}px`);
+			this.el.style.setProperty("--available-height", `${window.innerHeight - 16}px`);
+			this.el.style.setProperty("--available-width", `${window.innerWidth - 16}px`);
+			this.el.style.setProperty("--transform-origin", "top");
+		}
+		queueMicrotask(() => this.el.querySelector("[data-slot=combobox-input]")?.focus());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiComboboxContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiComboboxContent,
+		isStandalone: true,
+		selector: "[uiComboboxContent], ui-combobox-content",
+		inputs: { align: {
+			classPropertyName: "align",
+			publicName: "align",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "presentation",
+				"data-slot": "combobox-content",
+				"data-chips": "false",
+				"tabindex": "-1"
+			},
+			properties: {
+				"attr.data-open": "root.state() === \"open\" ? \"\" : null",
+				"attr.data-state": "root.state()",
+				"attr.data-empty": "!root.hasResults() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiComboboxContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiComboboxContent], ui-combobox-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "presentation",
+				"data-slot": "combobox-content",
+				"data-chips": "false",
+				tabindex: "-1",
+				"[attr.data-open]": "root.state() === \"open\" ? \"\" : null",
+				"[attr.data-state]": "root.state()",
+				"[attr.data-empty]": "!root.hasResults() ? \"\" : null",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { align: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "align",
+			required: false
+		}]
+	}] }
+});
+var UiComboboxInput = class UiComboboxInput {
+	root = inject(UiCombobox);
+	onInput(e) {
+		this.root.search.set(e.target.value);
+		queueMicrotask(() => this.root.ensureHighlight());
+	}
+	onKeydown(e) {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				return this.root.move(1);
+			case "ArrowUp":
+				e.preventDefault();
+				return this.root.move(-1);
+			case "Home":
+				e.preventDefault();
+				return this.root.move("first");
+			case "End":
+				e.preventDefault();
+				return this.root.move("last");
+			case "Enter":
+				e.preventDefault();
+				return this.root.chooseHighlighted();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiComboboxInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiComboboxInput,
+		isStandalone: true,
+		selector: "input[uiComboboxInput]",
+		host: {
+			attributes: {
+				"data-slot": "combobox-input",
+				"type": "text",
+				"role": "combobox",
+				"autocomplete": "off",
+				"spellcheck": "false",
+				"aria-autocomplete": "list",
+				"aria-expanded": "true"
+			},
+			listeners: {
+				"input": "onInput($event)",
+				"keydown": "onKeydown($event)"
+			},
+			properties: {
+				"attr.aria-controls": "root.listId",
+				"attr.aria-activedescendant": "root.highlighted()"
+			},
+			classAttribute: "w-full border-b border-input bg-transparent px-3 py-2 text-sm outline-hidden placeholder:text-muted-foreground"
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiComboboxInput,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[uiComboboxInput]",
+			host: {
+				"data-slot": "combobox-input",
+				type: "text",
+				role: "combobox",
+				autocomplete: "off",
+				spellcheck: "false",
+				"aria-autocomplete": "list",
+				"aria-expanded": "true",
+				"[attr.aria-controls]": "root.listId",
+				"[attr.aria-activedescendant]": "root.highlighted()",
+				class: "w-full border-b border-input bg-transparent px-3 py-2 text-sm outline-hidden placeholder:text-muted-foreground",
+				"(input)": "onInput($event)",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}]
+});
+var UiComboboxList = class UiComboboxList {
+	root = inject(UiCombobox);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(comboboxListClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiComboboxList,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiComboboxList,
+		isStandalone: true,
+		selector: "[uiComboboxList], ui-combobox-list",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "listbox",
+				"tabindex": "-1",
+				"aria-orientation": "vertical",
+				"data-slot": "combobox-list"
+			},
+			properties: {
+				"id": "root.listId",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiComboboxList,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiComboboxList], ui-combobox-list",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "listbox",
+				tabindex: "-1",
+				"aria-orientation": "vertical",
+				"data-slot": "combobox-list",
+				"[id]": "root.listId",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiComboboxEmpty = class UiComboboxEmpty {
+	root = inject(UiCombobox);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(comboboxEmptyClass, "flex", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiComboboxEmpty,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiComboboxEmpty,
+		isStandalone: true,
+		selector: "[uiComboboxEmpty], ui-combobox-empty",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"data-slot": "combobox-empty"
+			},
+			properties: {
+				"hidden": "root.hasResults()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiComboboxEmpty,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiComboboxEmpty], ui-combobox-empty",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"data-slot": "combobox-empty",
+				"[hidden]": "root.hasResults()",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiComboboxItem = class UiComboboxItem {
+	root = inject(UiCombobox);
+	el = inject(ElementRef).nativeElement;
+	id = nextId("ui-combobox-item");
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* 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"
+	});
+	label = signal("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	get disabled() {
+		return this.disabledInput();
+	}
+	selected = computed(() => this.root.value() === this.value(), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	highlighted = computed(() => this.root.highlighted() === this.id, ...ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []);
+	visible = computed(() => {
+		const q = this.root.search().trim().toLowerCase();
+		return !q || (this.label() || this.value()).toLowerCase().includes(q);
+	}, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(comboboxItemClass, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			this.value();
+			queueMicrotask(() => this.label.set((this.el.querySelector("span")?.textContent ?? "").trim()));
+		});
+	}
+	activate() {
+		if (!this.disabled) this.root.choose(this.value());
+	}
+	scrollIntoView() {
+		this.el.scrollIntoView({ block: "nearest" });
+	}
+	onMove() {
+		if (!this.disabled && this.root.highlighted() !== this.id) this.root.highlighted.set(this.id);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiComboboxItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiComboboxItem,
+		isStandalone: true,
+		selector: "[uiComboboxItem], ui-combobox-item",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				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
+			}
+		},
+		host: {
+			attributes: {
+				"role": "option",
+				"data-slot": "combobox-item"
+			},
+			listeners: {
+				"click": "activate()",
+				"pointermove": "onMove()"
+			},
+			properties: {
+				"id": "id",
+				"attr.aria-selected": "selected()",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"hidden": "!visible()",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <span><ng-content /></span>
+    <span class="pointer-events-none absolute end-2 flex size-4 items-center justify-center">
+      @if (selected()) {
+        <svg uiIcon="check"></svg>
+      }
+    </span>
+  `,
+		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: UiComboboxItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiComboboxItem], ui-combobox-item",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "option",
+				"data-slot": "combobox-item",
+				"[id]": "id",
+				"[attr.aria-selected]": "selected()",
+				"[attr.data-highlighted]": "highlighted() ? \"\" : null",
+				"[attr.data-disabled]": "disabled ? \"\" : null",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[hidden]": "!visible()",
+				"[attr.class]": "classes()",
+				"(click)": "activate()",
+				"(pointermove)": "onMove()"
+			},
+			template: `
+    <span><ng-content /></span>
+    <span class="pointer-events-none absolute end-2 flex size-4 items-center justify-center">
+      @if (selected()) {
+        <svg uiIcon="check"></svg>
+      }
+    </span>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiComboboxInputElement = class UiComboboxInputElement {
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiComboboxInputElement,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiComboboxInputElement,
+		isStandalone: true,
+		selector: "ui-combobox-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
+			}
+		},
+		host: { classAttribute: "contents" },
+		ngImport: i0,
+		template: `<input uiComboboxInput [attr.placeholder]="placeholder() || null" [attr.aria-label]="ariaLabel() || null" />`,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiComboboxInput,
+			selector: "input[uiComboboxInput]"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiComboboxInputElement,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-combobox-input",
+			imports: [UiComboboxInput],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "contents" },
+			template: `<input uiComboboxInput [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
+			}]
+		}]
+	}
+});
+const UI_COMBOBOX = [
+	UiCombobox,
+	UiComboboxTrigger,
+	UiComboboxValue,
+	UiComboboxContent,
+	UiComboboxInput,
+	UiComboboxList,
+	UiComboboxEmpty,
+	UiComboboxItem,
+	UiComboboxInputElement
+];
+export { UI_COMBOBOX, UI_COMBOBOX_GENERATED, UiCombobox, UiComboboxContent, UiComboboxEmpty, UiComboboxInput, UiComboboxInputElement, UiComboboxItem, UiComboboxList, UiComboboxTrigger, UiComboboxValue, comboboxChipClass, comboboxChipInputClass, comboboxChipsClass, comboboxClearClass, comboboxContentClass, comboboxEmptyClass, comboboxItemClass, comboboxListClass, comboboxTriggerClass };
+
+//# sourceMappingURL=loomui-ng-ui-combobox.mjs.map