@loomui-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,863 @@
+import { FocusKeyManager } from "@angular/cdk/a11y";
+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 * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, UiLayerRoot, UiPopperContentBase, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+const TRIGGER_CLASS = "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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";
+const CONTENT_CLASS = "relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-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-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 ITEM_CLASS = "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**: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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
+var UiSelect = class UiSelect extends UiLayerRoot {
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	items = contentChildren(forwardRef(() => UiSelectItem), {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	manager = signal(null, ...ngDevMode ? [{ debugName: "manager" }] : /* istanbul ignore next */ []);
+	keyboardOpen = false;
+	selectedLabel = computed(() => this.items().find((i) => i.value() === this.value())?.label() ?? "", ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	choose(v) {
+		this.value.set(v);
+		this.onChange(v);
+		this.close();
+	}
+	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: UiSelect,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiSelect,
+		isStandalone: true,
+		selector: "[uiSelect], ui-select",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiSelect),
+			multi: true
+		}],
+		queries: [{
+			propertyName: "items",
+			predicate: i0.forwardRef(() => UiSelectItem),
+			descendants: true,
+			isSignal: true
+		}],
+		exportAs: ["uiSelect"],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSelect,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSelect], ui-select",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiSelect",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiSelect),
+				multi: true
+			}]
+		}]
+	}],
+	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
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [forwardRef(() => UiSelectItem), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiSelectTrigger = class UiSelectTrigger {
+	root = inject(UiSelect);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(TRIGGER_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.root.trigger.set(inject(ElementRef).nativeElement);
+	}
+	onClick() {
+		this.root.keyboardOpen = false;
+		this.root.toggle();
+	}
+	onKeydown(e) {
+		if ([
+			"Enter",
+			" ",
+			"ArrowDown",
+			"ArrowUp"
+		].includes(e.key)) {
+			e.preventDefault();
+			this.root.keyboardOpen = true;
+			this.root.open.set(true);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSelectTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSelectTrigger,
+		isStandalone: true,
+		selector: "button[uiSelectTrigger], ui-select-trigger",
+		inputs: {
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"type": "button",
+				"role": "combobox",
+				"aria-autocomplete": "none",
+				"data-slot": "select-trigger"
+			},
+			listeners: {
+				"click": "onClick()",
+				"keydown": "onKeydown($event)",
+				"blur": "root.onTouched()"
+			},
+			properties: {
+				"attr.aria-controls": "root.id",
+				"attr.aria-expanded": "root.open()",
+				"attr.aria-invalid": "root.invalid() ? \"true\" : null",
+				"attr.data-state": "root.open() ? \"open\" : \"closed\"",
+				"attr.data-placeholder": "root.value() === \"\" ? \"\" : null",
+				"attr.data-size": "size()",
+				"attr.data-disabled": "root.isDisabled() ? \"\" : null",
+				"attr.disabled": "(root.isDisabled()) ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <ng-content />
+    <svg uiIcon="chevron-down" class="pointer-events-none size-4 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: UiSelectTrigger,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[uiSelectTrigger], ui-select-trigger",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				type: "button",
+				role: "combobox",
+				"aria-autocomplete": "none",
+				"data-slot": "select-trigger",
+				"[attr.aria-controls]": "root.id",
+				"[attr.aria-expanded]": "root.open()",
+				"[attr.aria-invalid]": "root.invalid() ? \"true\" : null",
+				"[attr.data-state]": "root.open() ? \"open\" : \"closed\"",
+				"[attr.data-placeholder]": "root.value() === \"\" ? \"\" : null",
+				"[attr.data-size]": "size()",
+				"[attr.data-disabled]": "root.isDisabled() ? \"\" : null",
+				"[attr.disabled]": "(root.isDisabled()) ? \"\" : null",
+				"[attr.class]": "classes()",
+				"(click)": "onClick()",
+				"(keydown)": "onKeydown($event)",
+				"(blur)": "root.onTouched()"
+			},
+			template: `
+    <ng-content />
+    <svg uiIcon="chevron-down" class="pointer-events-none size-4 text-muted-foreground"></svg>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiSelectValue = class UiSelectValue {
+	root = inject(UiSelect);
+	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: UiSelectValue,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSelectValue,
+		isStandalone: true,
+		selector: "[uiSelectValue], ui-select-value",
+		inputs: { placeholder: {
+			classPropertyName: "placeholder",
+			publicName: "placeholder",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "select-value" },
+			properties: { "textContent": "text()" },
+			styleAttribute: "pointer-events: none"
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSelectValue,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSelectValue], ui-select-value",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "select-value",
+				style: "pointer-events: none",
+				"[textContent]": "text()"
+			}
+		}]
+	}],
+	propDecorators: { placeholder: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "placeholder",
+			required: false
+		}]
+	}] }
+});
+var UiSelectContent = class UiSelectContent extends UiPopperContentBase {
+	root = inject(UiSelect);
+	varPrefix = "--radix-select";
+	classes = computed(() => cn(CONTENT_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	manager = null;
+	constructor() {
+		super();
+		this.matchTriggerWidth = true;
+		this.init();
+	}
+	onAttached() {
+		this.manager = new FocusKeyManager([...this.root.items()]).withVerticalOrientation().withHomeAndEnd().withTypeAhead(150).skipPredicate((i) => i.disabled);
+		this.root.manager.set(this.manager);
+		queueMicrotask(() => {
+			const selected = this.root.items().findIndex((i) => i.value() === this.root.value() && !i.disabled);
+			if (selected >= 0) this.manager?.setActiveItem(selected);
+			else this.manager?.setFirstItemActive();
+		});
+	}
+	onDetached() {
+		this.manager = null;
+		this.root.manager.set(null);
+	}
+	onKeydown(e) {
+		if (e.key === "Tab") return e.preventDefault();
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			this.manager?.activeItem?.choose();
+			return;
+		}
+		this.manager?.onKeydown(e);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSelectContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiSelectContent,
+		isStandalone: true,
+		selector: "[uiSelectContent], ui-select-content",
+		host: {
+			attributes: {
+				"role": "listbox",
+				"data-slot": "select-content",
+				"tabindex": "-1"
+			},
+			listeners: { "keydown": "onKeydown($event)" },
+			properties: {
+				"id": "root.id",
+				"attr.data-state": "root.state()",
+				"attr.dir": "dir.value",
+				"attr.class": "classes()"
+			}
+		},
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSelectContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSelectContent], ui-select-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "listbox",
+				"data-slot": "select-content",
+				tabindex: "-1",
+				"[id]": "root.id",
+				"[attr.data-state]": "root.state()",
+				"[attr.dir]": "dir.value",
+				"[attr.class]": "classes()",
+				"(keydown)": "onKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiSelectGroup = class UiSelectGroup {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("scroll-my-1 p-1", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSelectGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSelectGroup,
+		isStandalone: true,
+		selector: "[uiSelectGroup], ui-select-group",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "group",
+				"data-slot": "select-group"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSelectGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSelectGroup], ui-select-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "group",
+				"data-slot": "select-group",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSelectLabel = class UiSelectLabel {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("px-1.5 py-1 text-xs text-muted-foreground", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSelectLabel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSelectLabel,
+		isStandalone: true,
+		selector: "[uiSelectLabel], ui-select-label",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "select-label" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSelectLabel,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSelectLabel], ui-select-label",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "select-label",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSelectSeparator = class UiSelectSeparator {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn("pointer-events-none -mx-1 my-1 h-px bg-border", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSelectSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiSelectSeparator,
+		isStandalone: true,
+		selector: "[uiSelectSeparator], ui-select-separator",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "separator",
+				"aria-orientation": "horizontal",
+				"data-slot": "select-separator"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiSelectSeparator,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiSelectSeparator], ui-select-separator",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "separator",
+				"aria-orientation": "horizontal",
+				"data-slot": "select-separator",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiSelectItem = class UiSelectItem {
+	root = inject(UiSelect);
+	el = inject(ElementRef).nativeElement;
+	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"
+	});
+	highlighted = signal(false, ...ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []);
+	selected = computed(() => this.root.value() === this.value(), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(ITEM_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	label = signal("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			this.value();
+			queueMicrotask(() => this.label.set((this.el.querySelector("span")?.textContent ?? "").trim()));
+		});
+	}
+	get disabled() {
+		return this.disabledInput();
+	}
+	focus() {
+		this.el.focus();
+	}
+	getLabel() {
+		return this.label();
+	}
+	onPointerMove() {
+		if (this.disabled || this.highlighted()) return;
+		this.root.manager()?.setActiveItem(this);
+	}
+	choose() {
+		if (!this.disabled) this.root.choose(this.value());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiSelectItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiSelectItem,
+		isStandalone: true,
+		selector: "[uiSelectItem], ui-select-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",
+				"tabindex": "-1",
+				"data-slot": "select-item"
+			},
+			listeners: {
+				"focus": "highlighted.set(true)",
+				"blur": "highlighted.set(false)",
+				"pointermove": "onPointerMove()",
+				"click": "choose()"
+			},
+			properties: {
+				"attr.aria-selected": "selected()",
+				"attr.data-state": "selected() ? \"checked\" : \"unchecked\"",
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"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" data-slot="select-item-indicator">
+      @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: UiSelectItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiSelectItem], ui-select-item",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "option",
+				tabindex: "-1",
+				"data-slot": "select-item",
+				"[attr.aria-selected]": "selected()",
+				"[attr.data-state]": "selected() ? \"checked\" : \"unchecked\"",
+				"[attr.data-disabled]": "disabled ? \"\" : null",
+				"[attr.aria-disabled]": "disabled ? \"true\" : null",
+				"[attr.data-highlighted]": "highlighted() ? \"\" : null",
+				"[attr.class]": "classes()",
+				"(focus)": "highlighted.set(true)",
+				"(blur)": "highlighted.set(false)",
+				"(pointermove)": "onPointerMove()",
+				"(click)": "choose()"
+			},
+			template: `
+    <span><ng-content /></span>
+    <span class="pointer-events-none absolute end-2 flex size-4 items-center justify-center" data-slot="select-item-indicator">
+      @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
+			}]
+		}]
+	}
+});
+const UI_SELECT = [
+	UiSelect,
+	UiSelectTrigger,
+	UiSelectValue,
+	UiSelectContent,
+	UiSelectGroup,
+	UiSelectLabel,
+	UiSelectSeparator,
+	UiSelectItem
+];
+export { UI_SELECT, UiSelect, UiSelectContent, UiSelectGroup, UiSelectItem, UiSelectLabel, UiSelectSeparator, UiSelectTrigger, UiSelectValue };
+
+//# sourceMappingURL=loomui-ng-ui-select.mjs.map