@loomui-ng/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,1533 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, InjectionToken, Injector, afterNextRender, booleanAttribute, computed, effect, inject, input, linkedSignal, model, output, signal, untracked, viewChild } from "@angular/core";
+import { Directionality } from "@angular/cdk/bidi";
+import { Overlay } from "@angular/cdk/overlay";
+import { DomPortal } from "@angular/cdk/portal";
+import { FocusKeyManager, FocusTrapFactory } from "@angular/cdk/a11y";
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+let uidCounter = 0;
+const nextId = (prefix) => `${prefix}-${uidCounter++}`;
+function hideOthers(keep) {
+	const changed = [];
+	for (const el of Array.from(document.body.children)) {
+		if (el === keep || el.contains(keep) || el.tagName === "SCRIPT") continue;
+		changed.push({
+			el,
+			prev: el.getAttribute("aria-hidden")
+		});
+		el.setAttribute("aria-hidden", "true");
+		el.setAttribute("data-aria-hidden", "true");
+	}
+	return () => {
+		for (const { el, prev } of changed) {
+			el.removeAttribute("data-aria-hidden");
+			if (prev === null) el.removeAttribute("aria-hidden");
+			else el.setAttribute("aria-hidden", prev);
+		}
+	};
+}
+function whenAnimationDone(el, fallbackMs = 250) {
+	return new Promise((resolve) => {
+		if (!el) return resolve();
+		let done = false;
+		const finish = () => {
+			if (done) return;
+			done = true;
+			el.removeEventListener("animationend", onEnd);
+			el.removeEventListener("animationcancel", onEnd);
+			clearTimeout(timer);
+			resolve();
+		};
+		const onEnd = (e) => {
+			if (e.target === el) finish();
+		};
+		el.addEventListener("animationend", onEnd);
+		el.addEventListener("animationcancel", onEnd);
+		const timer = setTimeout(finish, fallbackMs);
+		if (!(typeof el.getAnimations === "function" ? el.getAnimations().length : 0)) finish();
+	});
+}
+var UiLayerRoot = class UiLayerRoot {
+	open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	id = nextId("ui-layer");
+	mounted = signal(false, ...ngDevMode ? [{ debugName: "mounted" }] : /* istanbul ignore next */ []);
+	state = signal("closed", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	trigger = signal(null, ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	contentEl = signal(null, ...ngDevMode ? [{ debugName: "contentEl" }] : /* istanbul ignore next */ []);
+	anchorPoint = signal(null, ...ngDevMode ? [{ debugName: "anchorPoint" }] : /* istanbul ignore next */ []);
+	childPanes = /* @__PURE__ */ new Set();
+	constructor() {
+		effect(() => {
+			const open = this.open();
+			untracked(() => {
+				if (open) {
+					this.mounted.set(true);
+					this.state.set("open");
+				} else if (this.mounted()) {
+					this.state.set("closed");
+					whenAnimationDone(this.contentEl()).then(() => {
+						if (!this.open()) this.mounted.set(false);
+					});
+				}
+			});
+		});
+	}
+	toggle() {
+		this.open.update((v) => !v);
+	}
+	close() {
+		this.open.set(false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiLayerRoot,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiLayerRoot,
+		isStandalone: true,
+		inputs: { open: {
+			classPropertyName: "open",
+			publicName: "open",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { open: "openChange" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiLayerRoot,
+	decorators: [{ type: Directive }],
+	ctorParameters: () => [],
+	propDecorators: { open: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "open",
+			required: false
+		}]
+	}, {
+		type: i0.Output,
+		args: ["openChange"]
+	}] }
+});
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left"
+};
+function buildPositions(side, align, sideOffset, rtl) {
+	const meta = /* @__PURE__ */ new WeakMap();
+	const make = (s) => {
+		let p;
+		const xAlign = align === "center" ? "center" : align;
+		if (s === "bottom" || s === "top") p = {
+			originX: xAlign,
+			originY: s === "bottom" ? "bottom" : "top",
+			overlayX: xAlign,
+			overlayY: s === "bottom" ? "top" : "bottom",
+			offsetY: s === "bottom" ? sideOffset : -sideOffset
+		};
+		else {
+			const yAlign = align === "start" ? "top" : align === "end" ? "bottom" : "center";
+			const outerX = s === "right" !== rtl ? "end" : "start";
+			p = {
+				originX: outerX,
+				originY: yAlign,
+				overlayX: outerX === "end" ? "start" : "end",
+				overlayY: yAlign,
+				offsetX: s === "right" ? sideOffset : -sideOffset
+			};
+		}
+		meta.set(p, {
+			side: s,
+			align
+		});
+		return p;
+	};
+	return {
+		positions: [make(side), make(OPPOSITE[side])],
+		meta
+	};
+}
+function transformOrigin(side, align) {
+	const x = align === "start" ? "left" : align === "end" ? "right" : "center";
+	const y = align === "start" ? "top" : align === "end" ? "bottom" : "center";
+	if (side === "bottom") return `${x} top`;
+	if (side === "top") return `${x} bottom`;
+	if (side === "right") return `left ${y}`;
+	return `right ${y}`;
+}
+var UiPopperContentBase = class UiPopperContentBase {
+	side = input("bottom", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	align = input("center", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	sideOffset = input(4, ...ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	el = inject(ElementRef).nativeElement;
+	overlay = inject(Overlay);
+	dir = inject(Directionality);
+	injector = inject(Injector);
+	overlayRef = null;
+	lastActive = null;
+	onAttached() {}
+	onDetached() {}
+	closeOnOutside = true;
+	restoreFocusOnClose = true;
+	matchTriggerWidth = false;
+	init() {
+		this.el.hidden = true;
+		this.root.contentEl.set(this.el);
+		effect(() => {
+			const mounted = this.root.mounted();
+			untracked(() => mounted ? this.attach() : this.detach());
+		}, { injector: this.injector });
+		inject(DestroyRef).onDestroy(() => this.detach(false));
+	}
+	attach() {
+		const trigger = this.root.trigger();
+		const point = this.root.anchorPoint();
+		if (this.overlayRef || !trigger && !point) return;
+		this.lastActive = document.activeElement;
+		const rtl = this.dir.value === "rtl";
+		const { positions, meta } = buildPositions(this.side(), this.align(), this.sideOffset(), rtl);
+		const strategy = this.overlay.position().flexibleConnectedTo(point ?? trigger).withPositions(positions).withPush(false).withFlexibleDimensions(false).withViewportMargin(8);
+		const ref = this.overlay.create({
+			positionStrategy: strategy,
+			scrollStrategy: this.overlay.scrollStrategies.reposition(),
+			direction: this.dir.value,
+			minWidth: this.matchTriggerWidth && trigger ? trigger.getBoundingClientRect().width : void 0
+		});
+		this.overlayRef = ref;
+		strategy.positionChanges.subscribe((c) => {
+			const m = meta.get(c.connectionPair);
+			if (!m) return;
+			this.el.setAttribute("data-side", m.side);
+			this.el.setAttribute("data-align", m.align);
+			this.setVars(m.side, m.align, trigger);
+		});
+		ref.attach(new DomPortal(this.el));
+		this.el.hidden = false;
+		this.el.setAttribute("data-side", this.side());
+		this.el.setAttribute("data-align", this.align());
+		this.setVars(this.side(), this.align(), trigger);
+		this.registerChildPane();
+		if (this.closeOnOutside) {
+			ref.keydownEvents().subscribe((e) => {
+				if (e.key === "Escape" && !e.defaultPrevented) {
+					e.preventDefault();
+					this.root.close();
+				}
+			});
+			ref.outsidePointerEvents().subscribe((e) => {
+				const t = e.target;
+				if (t && trigger?.contains(t)) return;
+				if (t && [...this.root.childPanes].some((pane) => pane.contains(t))) return;
+				this.root.close();
+			});
+		}
+		this.onAttached();
+	}
+	detach(restoreFocus = true) {
+		if (!this.overlayRef) return;
+		this.onDetached();
+		this.overlayRef.dispose();
+		this.overlayRef = null;
+		this.el.hidden = true;
+		if (restoreFocus && this.restoreFocusOnClose) (this.root.trigger() ?? this.lastActive)?.focus();
+	}
+	registerChildPane() {}
+	setVars(side, align, trigger) {
+		const r = trigger?.getBoundingClientRect() ?? new DOMRect(0, 0, 0, 0);
+		const s = this.el.style;
+		s.setProperty(`${this.varPrefix}-content-transform-origin`, transformOrigin(side, align));
+		s.setProperty(`${this.varPrefix}-trigger-width`, `${r.width}px`);
+		s.setProperty(`${this.varPrefix}-trigger-height`, `${r.height}px`);
+		s.setProperty(`${this.varPrefix}-content-available-height`, `${window.innerHeight - 16}px`);
+		s.setProperty(`${this.varPrefix}-content-available-width`, `${window.innerWidth - 16}px`);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiPopperContentBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiPopperContentBase,
+		isStandalone: true,
+		inputs: {
+			side: {
+				classPropertyName: "side",
+				publicName: "side",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sideOffset: {
+				classPropertyName: "sideOffset",
+				publicName: "sideOffset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiPopperContentBase,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		side: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "side",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		sideOffset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sideOffset",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiModalRoot = class UiModalRoot extends UiLayerRoot {
+	titleId = `${this.id}H1`;
+	descriptionId = `${this.id}H2`;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiModalRoot,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiModalRoot,
+		isStandalone: true,
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiModalRoot,
+	decorators: [{ type: Directive }]
+});
+var UiModalContentBase = class UiModalContentBase {
+	el = inject(ElementRef).nativeElement;
+	overlay = inject(Overlay);
+	trapFactory = inject(FocusTrapFactory);
+	injector = inject(Injector);
+	overlayRef = null;
+	trap = null;
+	restoreAria = null;
+	lastActive = null;
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	init() {
+		this.el.hidden = true;
+		this.root.contentEl.set(this.el);
+		effect(() => {
+			const mounted = this.root.mounted();
+			untracked(() => mounted ? this.attach() : this.detach());
+		}, { injector: this.injector });
+		effect(() => {
+			const state = this.root.state();
+			this.overlayRef?.backdropElement?.setAttribute("data-state", state);
+		}, { injector: this.injector });
+		inject(DestroyRef).onDestroy(() => this.detach(false));
+	}
+	attach() {
+		if (this.overlayRef) return;
+		this.lastActive = document.activeElement;
+		const ref = this.overlay.create({
+			hasBackdrop: true,
+			backdropClass: this.config.backdropClass.split(/\s+/).filter(Boolean),
+			positionStrategy: this.overlay.position().global(),
+			scrollStrategy: this.overlay.scrollStrategies.block()
+		});
+		this.overlayRef = ref;
+		ref.attach(new DomPortal(this.el));
+		this.el.hidden = false;
+		const backdrop = ref.backdropElement;
+		backdrop?.setAttribute("data-slot", `${this.config.slot}-overlay`);
+		backdrop?.setAttribute("data-state", "open");
+		backdrop?.setAttribute("aria-hidden", "true");
+		backdrop?.setAttribute("data-aria-hidden", "true");
+		ref.keydownEvents().subscribe((e) => {
+			if (e.key === "Escape" && !e.defaultPrevented) {
+				e.preventDefault();
+				this.root.close();
+			}
+		});
+		if (this.config.closeOnBackdrop !== false) ref.backdropClick().subscribe(() => this.root.close());
+		const container = ref.hostElement.parentElement;
+		this.restoreAria = hideOthers(container);
+		document.body.setAttribute("data-scroll-locked", "1");
+		this.trap = this.trapFactory.create(this.el);
+		const preferred = this.config.initialFocusSelector ? this.el.querySelector(this.config.initialFocusSelector) : null;
+		if (preferred) queueMicrotask(() => preferred.focus());
+		else this.trap.focusInitialElementWhenReady().then((ok) => {
+			if (!ok) this.el.focus();
+		});
+	}
+	detach(restoreFocus = true) {
+		if (!this.overlayRef) return;
+		this.trap?.destroy();
+		this.trap = null;
+		this.overlayRef.dispose();
+		this.overlayRef = null;
+		this.el.hidden = true;
+		this.restoreAria?.();
+		this.restoreAria = null;
+		document.body.removeAttribute("data-scroll-locked");
+		if (restoreFocus) (this.root.trigger() ?? this.lastActive)?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiModalContentBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiModalContentBase,
+		isStandalone: true,
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiModalContentBase,
+	decorators: [{ type: Directive }],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiMenuSelectEvent = class {
+	defaultPrevented = false;
+	preventDefault() {
+		this.defaultPrevented = true;
+	}
+};
+const UI_MENU_CTX = new InjectionToken("UI_MENU_CTX");
+const UI_MENU_ITEM = new InjectionToken("UI_MENU_ITEM");
+const UI_MENU_SUB = new InjectionToken("UI_MENU_SUB");
+var UiMenuRootBase = class UiMenuRootBase extends UiLayerRoot {
+	keyboardOpen = null;
+	manager = signal(null, ...ngDevMode ? [{ debugName: "manager" }] : /* istanbul ignore next */ []);
+	triggerId = signal("", ...ngDevMode ? [{ debugName: "triggerId" }] : /* istanbul ignore next */ []);
+	directionality = inject(Directionality);
+	dirIsRtl = () => this.directionality.value === "rtl";
+	closeAll() {
+		this.close();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenuRootBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiMenuRootBase,
+		isStandalone: true,
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenuRootBase,
+	decorators: [{ type: Directive }]
+});
+var UiMenuItemBase = class UiMenuItemBase {
+	ctx = inject(UI_MENU_CTX);
+	el = inject(ElementRef).nativeElement;
+	disabledInput = input(false, {
+		...ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {},
+		alias: "disabled",
+		transform: booleanAttribute
+	});
+	select = output();
+	highlighted = signal(false, ...ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	get disabled() {
+		return this.disabledInput();
+	}
+	focus() {
+		this.el.focus();
+	}
+	getLabel() {
+		return (this.el.textContent ?? "").trim();
+	}
+	onFocus() {
+		this.highlighted.set(true);
+	}
+	onBlur() {
+		this.highlighted.set(false);
+	}
+	onPointerMove() {
+		if (this.disabled || this.highlighted()) return;
+		const m = this.ctx.manager();
+		if (m) m.setActiveItem(this);
+		else this.focus();
+	}
+	onPointerLeave() {
+		if (this.highlighted() && !this.keepFocusOnLeave()) this.ctx.contentEl()?.focus();
+	}
+	keepFocusOnLeave() {
+		return false;
+	}
+	activate() {
+		if (this.disabled) return;
+		this.beforeSelect();
+		const ev = new UiMenuSelectEvent();
+		this.select.emit(ev);
+		if (!ev.defaultPrevented) this.ctx.closeAll();
+	}
+	beforeSelect() {}
+	openOnArrow() {
+		return false;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenuItemBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiMenuItemBase,
+		isStandalone: true,
+		inputs: {
+			disabledInput: {
+				classPropertyName: "disabledInput",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { select: "select" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenuItemBase,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		disabledInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		select: [{
+			type: i0.Output,
+			args: ["select"]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const MENU_ITEM_HOST = {
+	tabindex: "-1",
+	"[attr.data-disabled]": "disabled ? \"\" : null",
+	"[attr.aria-disabled]": "disabled ? \"true\" : null",
+	"[attr.data-highlighted]": "highlighted() ? \"\" : null",
+	"(focus)": "onFocus()",
+	"(blur)": "onBlur()",
+	"(pointermove)": "onPointerMove()",
+	"(pointerleave)": "onPointerLeave()",
+	"(click)": "activate()"
+};
+var UiMenuSubBase = class UiMenuSubBase extends UiMenuRootBase {
+	parent = inject(UI_MENU_CTX, { skipSelf: true });
+	closeAll() {
+		this.parent.closeAll();
+	}
+	dirIsRtl = () => this.parent.dirIsRtl();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenuSubBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiMenuSubBase,
+		isStandalone: true,
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenuSubBase,
+	decorators: [{ type: Directive }]
+});
+var UiMenuSubTriggerBase = class UiMenuSubTriggerBase extends UiMenuItemBase {
+	sub = inject(UI_MENU_SUB);
+	ctx = this.sub.parent;
+	timer;
+	constructor() {
+		super();
+		this.sub.trigger.set(this.el);
+	}
+	activate() {
+		if (this.disabled) return;
+		this.sub.keyboardOpen = "first";
+		this.sub.open.set(true);
+	}
+	openOnArrow() {
+		this.activate();
+		return true;
+	}
+	keepFocusOnLeave() {
+		return this.sub.open();
+	}
+	onPointerMove() {
+		super.onPointerMove();
+		if (this.disabled || this.sub.open()) return;
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => {
+			this.sub.keyboardOpen = null;
+			this.sub.open.set(true);
+		}, 100);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenuSubTriggerBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiMenuSubTriggerBase,
+		isStandalone: true,
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenuSubTriggerBase,
+	decorators: [{ type: Directive }],
+	ctorParameters: () => []
+});
+var UiMenuContentBase = class UiMenuContentBase extends UiPopperContentBase {
+	manager = null;
+	isSub = false;
+	onAttached() {
+		const items = this.menuItems().filter((i) => i.ctx === this.menu);
+		this.manager = new FocusKeyManager([...items]).withVerticalOrientation().withHomeAndEnd().withTypeAhead(150).skipPredicate((i) => i.disabled);
+		this.menu.manager.set(this.manager);
+		queueMicrotask(() => {
+			if (this.menu.keyboardOpen === "first") this.manager?.setFirstItemActive();
+			else if (this.menu.keyboardOpen === "last") this.manager?.setLastItemActive();
+			else this.el.focus();
+		});
+	}
+	onDetached() {
+		if (this.isSub) this.menu.parent.childPanes.delete(this.el);
+		this.manager = null;
+		this.menu.manager.set(null);
+		this.menu.keyboardOpen = null;
+	}
+	onMenuKeydown(e) {
+		if (e.key === "Tab") return e.preventDefault();
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			this.manager?.activeItem?.activate();
+			return;
+		}
+		const rtl = this.menu.dirIsRtl();
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const back = rtl ? "ArrowRight" : "ArrowLeft";
+		if (e.key === forward) {
+			if ((this.manager?.activeItem)?.openOnArrow()) {
+				e.preventDefault();
+				return;
+			}
+			if (!this.isSub) {
+				e.preventDefault();
+				this.menu.horizontal?.("next");
+			}
+			return;
+		}
+		if (e.key === back) {
+			e.preventDefault();
+			if (this.isSub) this.menu.close();
+			else this.menu.horizontal?.("prev");
+			return;
+		}
+		this.manager?.onKeydown(e);
+	}
+	registerChildPane() {
+		if (this.isSub) {
+			this.menu.parent.childPanes.add(this.el);
+			this.menu.contentEl.set(this.el);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiMenuContentBase,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiMenuContentBase,
+		isStandalone: true,
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiMenuContentBase,
+	decorators: [{ type: Directive }]
+});
+const ELEMENT_ORIGIN = {
+	"ui-accordion": "",
+	"ui-accordion-content": "",
+	"ui-accordion-item": "",
+	"ui-accordion-trigger": "button",
+	"ui-alert": "",
+	"ui-alert-action": "",
+	"ui-alert-description": "",
+	"ui-alert-dialog": "",
+	"ui-alert-dialog-action": "button",
+	"ui-alert-dialog-cancel": "button",
+	"ui-alert-dialog-content": "",
+	"ui-alert-dialog-description": "",
+	"ui-alert-dialog-footer": "",
+	"ui-alert-dialog-header": "",
+	"ui-alert-dialog-title": "",
+	"ui-alert-dialog-trigger": "",
+	"ui-alert-title": "",
+	"ui-aspect-ratio": "",
+	"ui-attachment": "",
+	"ui-attachment-action": "button",
+	"ui-attachment-actions": "",
+	"ui-attachment-content": "",
+	"ui-attachment-description": "span",
+	"ui-attachment-group": "",
+	"ui-attachment-media": "",
+	"ui-attachment-title": "span",
+	"ui-attachment-trigger": "a",
+	"ui-avatar": "",
+	"ui-avatar-badge": "",
+	"ui-avatar-fallback": "",
+	"ui-avatar-group": "",
+	"ui-avatar-group-count": "",
+	"ui-badge": "",
+	"ui-breadcrumb": "nav",
+	"ui-breadcrumb-ellipsis": "span",
+	"ui-breadcrumb-item": "li",
+	"ui-breadcrumb-link": "a",
+	"ui-breadcrumb-list": "ol",
+	"ui-breadcrumb-page": "span",
+	"ui-breadcrumb-separator": "li",
+	"ui-bubble": "",
+	"ui-bubble-content": "",
+	"ui-bubble-group": "",
+	"ui-bubble-reactions": "",
+	"ui-button": "button",
+	"ui-button-group": "",
+	"ui-button-group-separator": "",
+	"ui-calendar": "div",
+	"ui-card": "",
+	"ui-card-action": "",
+	"ui-card-content": "",
+	"ui-card-description": "",
+	"ui-card-footer": "",
+	"ui-card-header": "",
+	"ui-card-title": "",
+	"ui-carousel": "div",
+	"ui-carousel-content": "div",
+	"ui-carousel-item": "div",
+	"ui-carousel-next": "button",
+	"ui-carousel-previous": "button",
+	"ui-checkbox": "button",
+	"ui-collapsible": "",
+	"ui-collapsible-content": "",
+	"ui-collapsible-trigger": "",
+	"ui-combobox": "",
+	"ui-combobox-content": "",
+	"ui-combobox-empty": "",
+	"ui-combobox-item": "",
+	"ui-combobox-list": "",
+	"ui-combobox-trigger": "button",
+	"ui-combobox-value": "",
+	"ui-command": "",
+	"ui-command-empty": "",
+	"ui-command-group": "",
+	"ui-command-input-wrapper": "",
+	"ui-command-item": "",
+	"ui-command-list": "",
+	"ui-command-separator": "",
+	"ui-command-shortcut": "",
+	"ui-context-menu": "",
+	"ui-context-menu-checkbox-item": "",
+	"ui-context-menu-content": "",
+	"ui-context-menu-group": "",
+	"ui-context-menu-item": "",
+	"ui-context-menu-label": "",
+	"ui-context-menu-radio-group": "",
+	"ui-context-menu-radio-item": "",
+	"ui-context-menu-separator": "",
+	"ui-context-menu-shortcut": "",
+	"ui-context-menu-sub": "",
+	"ui-context-menu-sub-content": "",
+	"ui-context-menu-sub-trigger": "",
+	"ui-context-menu-trigger": "",
+	"ui-dialog": "",
+	"ui-dialog-close": "",
+	"ui-dialog-content": "",
+	"ui-dialog-description": "",
+	"ui-dialog-footer": "",
+	"ui-dialog-header": "",
+	"ui-dialog-title": "",
+	"ui-dialog-trigger": "",
+	"ui-direction": "",
+	"ui-drawer": "",
+	"ui-drawer-close": "button",
+	"ui-drawer-content": "",
+	"ui-drawer-description": "",
+	"ui-drawer-footer": "",
+	"ui-drawer-header": "",
+	"ui-drawer-title": "",
+	"ui-drawer-trigger": "",
+	"ui-dropdown-menu": "",
+	"ui-dropdown-menu-checkbox-item": "",
+	"ui-dropdown-menu-content": "",
+	"ui-dropdown-menu-group": "",
+	"ui-dropdown-menu-item": "",
+	"ui-dropdown-menu-label": "",
+	"ui-dropdown-menu-radio-group": "",
+	"ui-dropdown-menu-radio-item": "",
+	"ui-dropdown-menu-separator": "",
+	"ui-dropdown-menu-shortcut": "",
+	"ui-dropdown-menu-sub": "",
+	"ui-dropdown-menu-sub-content": "",
+	"ui-dropdown-menu-sub-trigger": "",
+	"ui-dropdown-menu-trigger": "",
+	"ui-empty": "",
+	"ui-empty-content": "",
+	"ui-empty-description": "",
+	"ui-empty-header": "",
+	"ui-empty-icon": "",
+	"ui-empty-title": "",
+	"ui-field": "",
+	"ui-field-content": "",
+	"ui-field-description": "",
+	"ui-field-error": "",
+	"ui-field-group": "",
+	"ui-field-label": "label",
+	"ui-field-legend": "legend",
+	"ui-field-separator": "",
+	"ui-field-set": "fieldset",
+	"ui-hover-card": "",
+	"ui-hover-card-content": "",
+	"ui-hover-card-trigger": "",
+	"ui-input-group": "",
+	"ui-input-group-addon": "",
+	"ui-input-otp": "div",
+	"ui-input-otp-group": "",
+	"ui-input-otp-separator": "",
+	"ui-input-otp-slot": "",
+	"ui-item": "",
+	"ui-item-actions": "",
+	"ui-item-content": "",
+	"ui-item-description": "",
+	"ui-item-group": "",
+	"ui-item-header": "",
+	"ui-item-media": "",
+	"ui-item-title": "",
+	"ui-kbd": "kbd",
+	"ui-kbd-group": "kbd",
+	"ui-label": "label",
+	"ui-marker": "",
+	"ui-marker-content": "span",
+	"ui-marker-icon": "span",
+	"ui-menubar": "",
+	"ui-menubar-checkbox-item": "",
+	"ui-menubar-content": "",
+	"ui-menubar-group": "",
+	"ui-menubar-item": "",
+	"ui-menubar-label": "",
+	"ui-menubar-menu": "",
+	"ui-menubar-radio-group": "",
+	"ui-menubar-radio-item": "",
+	"ui-menubar-separator": "",
+	"ui-menubar-shortcut": "",
+	"ui-menubar-sub": "",
+	"ui-menubar-sub-content": "",
+	"ui-menubar-sub-trigger": "",
+	"ui-menubar-trigger": "",
+	"ui-message": "",
+	"ui-message-avatar": "",
+	"ui-message-content": "",
+	"ui-message-footer": "",
+	"ui-message-group": "",
+	"ui-message-header": "",
+	"ui-message-scroller": "div",
+	"ui-message-scroller-button": "button",
+	"ui-message-scroller-content": "",
+	"ui-message-scroller-item": "",
+	"ui-message-scroller-viewport": "",
+	"ui-native-select-wrapper": "div",
+	"ui-navigation-menu": "nav",
+	"ui-navigation-menu-content": "",
+	"ui-navigation-menu-item": "li",
+	"ui-navigation-menu-link": "a",
+	"ui-navigation-menu-list": "ul",
+	"ui-navigation-menu-trigger": "button",
+	"ui-pagination": "nav",
+	"ui-pagination-content": "ul",
+	"ui-pagination-ellipsis": "span",
+	"ui-pagination-item": "li",
+	"ui-pagination-link": "a",
+	"ui-pagination-next": "a",
+	"ui-pagination-previous": "a",
+	"ui-popover": "",
+	"ui-popover-content": "",
+	"ui-popover-description": "",
+	"ui-popover-header": "",
+	"ui-popover-title": "",
+	"ui-popover-trigger": "",
+	"ui-progress": "div",
+	"ui-questionnaire": "form",
+	"ui-questionnaire-actions": "div",
+	"ui-questionnaire-choice": "label",
+	"ui-questionnaire-choices": "div",
+	"ui-questionnaire-description": "p",
+	"ui-questionnaire-input": "div",
+	"ui-questionnaire-item": "fieldset",
+	"ui-questionnaire-progress": "div",
+	"ui-questionnaire-title": "legend",
+	"ui-radio-group": "",
+	"ui-radio-group-item": "button",
+	"ui-resizable-handle": "",
+	"ui-resizable-panel": "",
+	"ui-resizable-panel-group": "",
+	"ui-scroll-area": "",
+	"ui-scroll-area-viewport": "",
+	"ui-select": "",
+	"ui-select-content": "",
+	"ui-select-group": "",
+	"ui-select-item": "",
+	"ui-select-label": "",
+	"ui-select-separator": "",
+	"ui-select-trigger": "button",
+	"ui-select-value": "",
+	"ui-separator": "",
+	"ui-sheet": "",
+	"ui-sheet-close": "",
+	"ui-sheet-content": "",
+	"ui-sheet-description": "",
+	"ui-sheet-footer": "",
+	"ui-sheet-header": "",
+	"ui-sheet-title": "",
+	"ui-sheet-trigger": "",
+	"ui-sidebar": "",
+	"ui-sidebar-content": "",
+	"ui-sidebar-footer": "",
+	"ui-sidebar-group": "",
+	"ui-sidebar-group-action": "button",
+	"ui-sidebar-group-content": "",
+	"ui-sidebar-group-label": "",
+	"ui-sidebar-header": "",
+	"ui-sidebar-inset": "",
+	"ui-sidebar-menu": "ul",
+	"ui-sidebar-menu-action": "button",
+	"ui-sidebar-menu-badge": "",
+	"ui-sidebar-menu-button": "button",
+	"ui-sidebar-menu-item": "li",
+	"ui-sidebar-menu-sub": "ul",
+	"ui-sidebar-menu-sub-button": "a",
+	"ui-sidebar-menu-sub-item": "li",
+	"ui-sidebar-provider": "",
+	"ui-sidebar-rail": "button",
+	"ui-sidebar-separator": "",
+	"ui-sidebar-trigger": "button",
+	"ui-skeleton": "",
+	"ui-slider": "span",
+	"ui-switch": "button",
+	"ui-table": "table",
+	"ui-table-body": "tbody",
+	"ui-table-caption": "caption",
+	"ui-table-cell": "td",
+	"ui-table-container": "",
+	"ui-table-footer": "tfoot",
+	"ui-table-head": "th",
+	"ui-table-header": "thead",
+	"ui-table-row": "tr",
+	"ui-tabs": "",
+	"ui-tabs-content": "",
+	"ui-tabs-list": "",
+	"ui-tabs-trigger": "button",
+	"ui-toggle": "button",
+	"ui-toggle-group": "",
+	"ui-toggle-group-item": "button",
+	"ui-tooltip": "",
+	"ui-tooltip-content": "",
+	"ui-tooltip-trigger": "",
+	"ui-typography": ""
+};
+const ROLE = {
+	button: "button",
+	a: "link",
+	ul: "list",
+	ol: "list",
+	li: "listitem",
+	nav: "navigation",
+	fieldset: "group",
+	table: "table",
+	thead: "rowgroup",
+	tbody: "rowgroup",
+	tfoot: "rowgroup",
+	tr: "row",
+	th: "columnheader",
+	td: "cell"
+};
+const DISPLAY = {
+	table: "table",
+	thead: "table-header-group",
+	tbody: "table-row-group",
+	tfoot: "table-footer-group",
+	tr: "table-row",
+	th: "table-cell",
+	td: "table-cell",
+	caption: "table-caption"
+};
+const HEADINGS = /* @__PURE__ */ new Set([
+	"ui-dialog-title",
+	"ui-sheet-title",
+	"ui-alert-dialog-title",
+	"ui-drawer-title"
+]);
+const INLINE_ORIGINS = /* @__PURE__ */ new Set([
+	"span",
+	"a",
+	"button",
+	"label",
+	"kbd"
+]);
+let styled = false;
+function ensureDefaultStyles() {
+	if (styled || typeof document === "undefined") return;
+	styled = true;
+	const groups = /* @__PURE__ */ new Map();
+	for (const [alias, origin] of Object.entries(ELEMENT_ORIGIN)) {
+		const d = DISPLAY[origin] ?? (INLINE_ORIGINS.has(origin) ? "inline-block" : "block");
+		(groups.get(d) ?? groups.set(d, []).get(d)).push(alias);
+	}
+	const css = [...groups].map(([d, list]) => `:where(${list.join(",")}):not([hidden]){display:${d}}`).join("\n") + "\n:where([data-slot][disabled]:not(:is(button,input,select,textarea,fieldset,optgroup,option))){pointer-events:none;opacity:.5}";
+	const style = document.createElement("style");
+	style.setAttribute("data-loomui-elements", "");
+	style.textContent = `@layer base{\n${css}\n}`;
+	document.head.appendChild(style);
+}
+const isDisabled = (el) => el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
+var UiElementHost = class UiElementHost {
+	el = inject(ElementRef).nativeElement;
+	constructor() {
+		const name = this.el.localName;
+		const origin = ELEMENT_ORIGIN[name];
+		if (origin === void 0) return;
+		ensureDefaultStyles();
+		const destroy = inject(DestroyRef);
+		afterNextRender(() => {
+			const el = this.el;
+			const role = ROLE[origin];
+			if (role && !el.hasAttribute("role")) el.setAttribute("role", role);
+			if ((origin === "button" || origin === "a") && !el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0");
+			if (HEADINGS.has(name) && !el.hasAttribute("role")) {
+				el.setAttribute("role", "heading");
+				if (!el.hasAttribute("aria-level")) el.setAttribute("aria-level", "2");
+			}
+			const off = [];
+			const on = (type, fn) => {
+				el.addEventListener(type, fn);
+				off.push(() => el.removeEventListener(type, fn));
+			};
+			if (origin === "button" || origin === "a") {
+				let spaceDown = false;
+				on("keydown", (e) => {
+					if (e.target !== el || e.defaultPrevented || isDisabled(el)) return;
+					if (e.key === "Enter") {
+						e.preventDefault();
+						el.click();
+					} else if (e.key === " " && origin === "button") {
+						e.preventDefault();
+						spaceDown = true;
+					}
+				});
+				on("keyup", (e) => {
+					if (e.key === " " && spaceDown && e.target === el && !isDisabled(el)) {
+						spaceDown = false;
+						el.click();
+					}
+				});
+			}
+			if (origin === "a") on("click", (e) => {
+				const href = el.getAttribute("href");
+				if (e.defaultPrevented || !href || isDisabled(el)) return;
+				if (el.getAttribute("target") === "_blank") window.open(href, "_blank", "noopener");
+				else window.location.assign(href);
+			});
+			if (origin === "label") on("click", (e) => {
+				const id = el.getAttribute("for");
+				if (!id || e.defaultPrevented) return;
+				if (e.target.closest("button, input, select, textarea, a, [role=checkbox], [role=switch], [role=radio]")) return;
+				const control = document.getElementById(id);
+				if (!control) return;
+				if ([
+					"INPUT",
+					"TEXTAREA",
+					"SELECT"
+				].includes(control.tagName) && control.type !== "checkbox" && control.type !== "radio") control.focus();
+				else control.click();
+			});
+			destroy.onDestroy(() => off.forEach((f) => f()));
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiElementHost,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiElementHost,
+		isStandalone: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiElementHost,
+	decorators: [{ type: Directive }],
+	ctorParameters: () => []
+});
+var UiNativeControl = class UiNativeControl {
+	control = viewChild.required("control", ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	autocomplete = input("", ...ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	ariaDescribedby = input("", {
+		...ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {},
+		alias: "aria-describedby"
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	current = linkedSignal(() => this.value(), ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	focus(options) {
+		this.control().nativeElement.focus(options);
+	}
+	onInput(e) {
+		const v = e.target.value;
+		this.current.set(v);
+		this.onChange(v);
+	}
+	writeValue(v) {
+		this.current.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: UiNativeControl,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiNativeControl,
+		isStandalone: true,
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autocomplete: {
+				classPropertyName: "autocomplete",
+				publicName: "autocomplete",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaDescribedby: {
+				classPropertyName: "ariaDescribedby",
+				publicName: "aria-describedby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "attr.id": "null" } },
+		viewQueries: [{
+			propertyName: "control",
+			first: true,
+			predicate: ["control"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiNativeControl,
+	decorators: [{
+		type: Directive,
+		args: [{ host: { "[attr.id]": "null" } }]
+	}],
+	propDecorators: {
+		control: [{
+			type: i0.ViewChild,
+			args: ["control", { isSignal: true }]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		autocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autocomplete",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaDescribedby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-describedby",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+export { ELEMENT_ORIGIN, MENU_ITEM_HOST, UI_MENU_CTX, UI_MENU_ITEM, UI_MENU_SUB, UiElementHost, UiLayerRoot, UiMenuContentBase, UiMenuItemBase, UiMenuRootBase, UiMenuSelectEvent, UiMenuSubBase, UiMenuSubTriggerBase, UiModalContentBase, UiModalRoot, UiNativeControl, UiPopperContentBase, buildPositions, cn, hideOthers, nextId, whenAnimationDone };
+
+//# sourceMappingURL=loomui-ng-ui-utils.mjs.map