@loomui-ng/ui 0.0.0-stage → 0.1.1

package/fesm2022/loomui-ng-ui-dropdown-menu.mjs

@@ -0,0 +1,1322 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, booleanAttribute, computed, contentChildren, forwardRef, inject, input, model } from "@angular/core";
+import { contextMenuCheckboxItemClass, contextMenuContentClass, contextMenuItemClass, contextMenuLabelClass, contextMenuRadioItemClass, contextMenuSeparatorClass, contextMenuShortcutClass, contextMenuSubTriggerClass } from "@loomui-ng/ui/context-menu";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UI_MENU_CTX, UI_MENU_ITEM, UI_MENU_SUB, UiElementHost, UiMenuContentBase, UiMenuItemBase, UiMenuRootBase, UiMenuSelectEvent, UiMenuSubBase, UiMenuSubTriggerBase, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+const dd = (c) => c.replace(/context-menu/g, "dropdown-menu");
+const CONTENT_CLASS = dd(contextMenuContentClass);
+const ITEM_CLASS = dd(contextMenuItemClass);
+const SUB_TRIGGER_CLASS = dd(contextMenuSubTriggerClass);
+const CHECKBOX_CLASS = dd(contextMenuCheckboxItemClass);
+const RADIO_CLASS = dd(contextMenuRadioItemClass);
+const LABEL_CLASS = dd(contextMenuLabelClass);
+const SEPARATOR_CLASS = dd(contextMenuSeparatorClass);
+const SHORTCUT_CLASS = dd(contextMenuShortcutClass);
+var UiDropdownMenu = class UiDropdownMenu extends UiMenuRootBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenu,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiDropdownMenu,
+		isStandalone: true,
+		selector: "[uiDropdownMenu], ui-dropdown-menu",
+		providers: [{
+			provide: UI_MENU_CTX,
+			useExisting: forwardRef(() => UiDropdownMenu)
+		}],
+		exportAs: ["uiDropdownMenu"],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenu,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenu], ui-dropdown-menu",
+			hostDirectives: [UiElementHost],
+			exportAs: "uiDropdownMenu",
+			providers: [{
+				provide: UI_MENU_CTX,
+				useExisting: forwardRef(() => UiDropdownMenu)
+			}]
+		}]
+	}]
+});
+var UiDropdownMenuTrigger = class UiDropdownMenuTrigger {
+	root = inject(UiDropdownMenu);
+	constructor() {
+		const el = inject(ElementRef).nativeElement;
+		this.root.trigger.set(el);
+		this.root.triggerId.set(el.id || `${this.root.id}-trigger`);
+	}
+	onClick() {
+		if (!this.root.open()) this.root.keyboardOpen = null;
+		this.root.toggle();
+	}
+	onKey(e, where) {
+		e.preventDefault();
+		this.root.keyboardOpen = where;
+		this.root.open.set(true);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiDropdownMenuTrigger,
+		isStandalone: true,
+		selector: "[uiDropdownMenuTrigger], ui-dropdown-menu-trigger",
+		host: {
+			attributes: {
+				"data-slot": "dropdown-menu-trigger",
+				"aria-haspopup": "menu"
+			},
+			listeners: {
+				"click": "onClick()",
+				"keydown.enter": "onKey($event, \"first\")",
+				"keydown.space": "onKey($event, \"first\")",
+				"keydown.arrowdown": "onKey($event, \"first\")",
+				"keydown.arrowup": "onKey($event, \"last\")"
+			},
+			properties: {
+				"attr.id": "root.triggerId()",
+				"attr.aria-expanded": "root.open()",
+				"attr.aria-controls": "root.open() ? root.id : null",
+				"attr.data-state": "root.open() ? \"open\" : \"closed\""
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuTrigger], ui-dropdown-menu-trigger",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "dropdown-menu-trigger",
+				"aria-haspopup": "menu",
+				"[attr.id]": "root.triggerId()",
+				"[attr.aria-expanded]": "root.open()",
+				"[attr.aria-controls]": "root.open() ? root.id : null",
+				"[attr.data-state]": "root.open() ? \"open\" : \"closed\"",
+				"(click)": "onClick()",
+				"(keydown.enter)": "onKey($event, \"first\")",
+				"(keydown.space)": "onKey($event, \"first\")",
+				"(keydown.arrowdown)": "onKey($event, \"first\")",
+				"(keydown.arrowup)": "onKey($event, \"last\")"
+			}
+		}]
+	}],
+	ctorParameters: () => []
+});
+var UiDropdownMenuContent = class UiDropdownMenuContent extends UiMenuContentBase {
+	root = inject(UiDropdownMenu);
+	menu = this.root;
+	varPrefix = "--radix-dropdown-menu";
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	items = contentChildren(UI_MENU_ITEM, {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	classes = computed(() => cn(CONTENT_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	menuItems() {
+		return this.items();
+	}
+	constructor() {
+		super();
+		this.init();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiDropdownMenuContent,
+		isStandalone: true,
+		selector: "[uiDropdownMenuContent], ui-dropdown-menu-content",
+		inputs: { align: {
+			classPropertyName: "align",
+			publicName: "align",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "menu",
+				"aria-orientation": "vertical",
+				"data-slot": "dropdown-menu-content",
+				"data-orientation": "vertical",
+				"tabindex": "-1"
+			},
+			listeners: { "keydown": "onMenuKeydown($event)" },
+			properties: {
+				"id": "root.id",
+				"attr.aria-labelledby": "root.triggerId()",
+				"attr.data-state": "root.state()",
+				"attr.dir": "dir.value",
+				"attr.class": "classes()"
+			}
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: UI_MENU_ITEM,
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuContent], ui-dropdown-menu-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "menu",
+				"aria-orientation": "vertical",
+				"data-slot": "dropdown-menu-content",
+				"data-orientation": "vertical",
+				tabindex: "-1",
+				"[id]": "root.id",
+				"[attr.aria-labelledby]": "root.triggerId()",
+				"[attr.data-state]": "root.state()",
+				"[attr.dir]": "dir.value",
+				"[attr.class]": "classes()",
+				"(keydown)": "onMenuKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UI_MENU_ITEM), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiDropdownMenuItem = class UiDropdownMenuItem extends UiMenuItemBase {
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => cn(ITEM_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuItem,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiDropdownMenuItem,
+		isStandalone: true,
+		selector: "[uiDropdownMenuItem], ui-dropdown-menu-item",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "dropdown-menu-item",
+				"role": "menuitem"
+			},
+			listeners: {
+				"focus": "onFocus()",
+				"blur": "onBlur()",
+				"pointermove": "onPointerMove()",
+				"pointerleave": "onPointerLeave()",
+				"click": "activate()"
+			},
+			properties: {
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.data-variant": "variant()",
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: UI_MENU_ITEM,
+			useExisting: forwardRef(() => UiDropdownMenuItem)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuItem,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuItem], ui-dropdown-menu-item",
+			hostDirectives: [UiElementHost],
+			providers: [{
+				provide: UI_MENU_ITEM,
+				useExisting: forwardRef(() => UiDropdownMenuItem)
+			}],
+			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()",
+				"data-slot": "dropdown-menu-item",
+				role: "menuitem",
+				"[attr.data-variant]": "variant()",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}]
+	}
+});
+const CHECK = "<svg uiIcon=\"check\" class=\"size-4\"></svg>";
+var UiDropdownMenuCheckboxItem = class UiDropdownMenuCheckboxItem extends UiMenuItemBase {
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => cn(CHECKBOX_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	beforeSelect() {
+		this.checked.update((v) => !v);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuCheckboxItem,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiDropdownMenuCheckboxItem,
+		isStandalone: true,
+		selector: "[uiDropdownMenuCheckboxItem], ui-dropdown-menu-checkbox-item",
+		inputs: {
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { checked: "checkedChange" },
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "dropdown-menu-checkbox-item",
+				"role": "menuitemcheckbox"
+			},
+			listeners: {
+				"focus": "onFocus()",
+				"blur": "onBlur()",
+				"pointermove": "onPointerMove()",
+				"pointerleave": "onPointerLeave()",
+				"click": "activate()"
+			},
+			properties: {
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.aria-checked": "checked()",
+				"attr.data-state": "checked() ? \"checked\" : \"unchecked\"",
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: UI_MENU_ITEM,
+			useExisting: forwardRef(() => UiDropdownMenuCheckboxItem)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: "\n    <ng-content />\n    <span class=\"pointer-events-none absolute end-2 flex items-center justify-center\" data-slot=\"dropdown-menu-checkbox-item-indicator\">\n      @if (checked()) { <svg uiIcon=\"check\" class=\"size-4\"></svg> }\n    </span>\n  ",
+		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: UiDropdownMenuCheckboxItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiDropdownMenuCheckboxItem], ui-dropdown-menu-checkbox-item",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: UI_MENU_ITEM,
+				useExisting: forwardRef(() => UiDropdownMenuCheckboxItem)
+			}],
+			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()",
+				"data-slot": "dropdown-menu-checkbox-item",
+				role: "menuitemcheckbox",
+				"[attr.aria-checked]": "checked()",
+				"[attr.data-state]": "checked() ? \"checked\" : \"unchecked\"",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <ng-content />
+    <span class="pointer-events-none absolute end-2 flex items-center justify-center" data-slot="dropdown-menu-checkbox-item-indicator">
+      @if (checked()) { ${CHECK} }
+    </span>
+  `
+		}]
+	}],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}]
+	}
+});
+var UiDropdownMenuRadioGroup = class UiDropdownMenuRadioGroup {
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuRadioGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiDropdownMenuRadioGroup,
+		isStandalone: true,
+		selector: "[uiDropdownMenuRadioGroup], ui-dropdown-menu-radio-group",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { value: "valueChange" },
+		host: { attributes: {
+			"role": "group",
+			"data-slot": "dropdown-menu-radio-group"
+		} },
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuRadioGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuRadioGroup], ui-dropdown-menu-radio-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "group",
+				"data-slot": "dropdown-menu-radio-group"
+			}
+		}]
+	}],
+	propDecorators: { value: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "value",
+			required: false
+		}]
+	}, {
+		type: i0.Output,
+		args: ["valueChange"]
+	}] }
+});
+var UiDropdownMenuRadioItem = class UiDropdownMenuRadioItem extends UiMenuItemBase {
+	group = inject(UiDropdownMenuRadioGroup);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	checked = computed(() => this.group.value() === this.value(), ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(RADIO_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	beforeSelect() {
+		this.group.value.set(this.value());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuRadioItem,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiDropdownMenuRadioItem,
+		isStandalone: true,
+		selector: "[uiDropdownMenuRadioItem], ui-dropdown-menu-radio-item",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "dropdown-menu-radio-item",
+				"role": "menuitemradio"
+			},
+			listeners: {
+				"focus": "onFocus()",
+				"blur": "onBlur()",
+				"pointermove": "onPointerMove()",
+				"pointerleave": "onPointerLeave()",
+				"click": "activate()"
+			},
+			properties: {
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.aria-checked": "checked()",
+				"attr.data-state": "checked() ? \"checked\" : \"unchecked\"",
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: UI_MENU_ITEM,
+			useExisting: forwardRef(() => UiDropdownMenuRadioItem)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: "\n    <ng-content />\n    <span class=\"pointer-events-none absolute end-2 flex items-center justify-center\" data-slot=\"dropdown-menu-radio-item-indicator\">\n      @if (checked()) { <svg uiIcon=\"check\" class=\"size-4\"></svg> }\n    </span>\n  ",
+		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: UiDropdownMenuRadioItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiDropdownMenuRadioItem], ui-dropdown-menu-radio-item",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: UI_MENU_ITEM,
+				useExisting: forwardRef(() => UiDropdownMenuRadioItem)
+			}],
+			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()",
+				"data-slot": "dropdown-menu-radio-item",
+				role: "menuitemradio",
+				"[attr.aria-checked]": "checked()",
+				"[attr.data-state]": "checked() ? \"checked\" : \"unchecked\"",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <ng-content />
+    <span class="pointer-events-none absolute end-2 flex items-center justify-center" data-slot="dropdown-menu-radio-item-indicator">
+      @if (checked()) { ${CHECK} }
+    </span>
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}]
+	}
+});
+var UiDropdownMenuSub = class UiDropdownMenuSub extends UiMenuSubBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuSub,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiDropdownMenuSub,
+		isStandalone: true,
+		selector: "[uiDropdownMenuSub], ui-dropdown-menu-sub",
+		providers: [{
+			provide: UI_MENU_CTX,
+			useExisting: forwardRef(() => UiDropdownMenuSub)
+		}, {
+			provide: UI_MENU_SUB,
+			useExisting: forwardRef(() => UiDropdownMenuSub)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuSub,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuSub], ui-dropdown-menu-sub",
+			hostDirectives: [UiElementHost],
+			providers: [{
+				provide: UI_MENU_CTX,
+				useExisting: forwardRef(() => UiDropdownMenuSub)
+			}, {
+				provide: UI_MENU_SUB,
+				useExisting: forwardRef(() => UiDropdownMenuSub)
+			}]
+		}]
+	}]
+});
+var UiDropdownMenuSubTrigger = class UiDropdownMenuSubTrigger extends UiMenuSubTriggerBase {
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	classes = computed(() => cn(SUB_TRIGGER_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuSubTrigger,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiDropdownMenuSubTrigger,
+		isStandalone: true,
+		selector: "[uiDropdownMenuSubTrigger], ui-dropdown-menu-sub-trigger",
+		inputs: { inset: {
+			classPropertyName: "inset",
+			publicName: "inset",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"tabindex": "-1",
+				"data-slot": "dropdown-menu-sub-trigger",
+				"role": "menuitem",
+				"aria-haspopup": "menu"
+			},
+			listeners: {
+				"focus": "onFocus()",
+				"blur": "onBlur()",
+				"pointermove": "onPointerMove()",
+				"pointerleave": "onPointerLeave()",
+				"click": "activate()"
+			},
+			properties: {
+				"attr.data-disabled": "disabled ? \"\" : null",
+				"attr.aria-disabled": "disabled ? \"true\" : null",
+				"attr.data-highlighted": "highlighted() ? \"\" : null",
+				"attr.aria-expanded": "sub.open()",
+				"attr.data-state": "sub.open() ? \"open\" : \"closed\"",
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: UI_MENU_ITEM,
+			useExisting: forwardRef(() => UiDropdownMenuSubTrigger)
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    <ng-content />
+    <svg uiIcon="chevron-right" class="ms-auto rtl:rotate-180"></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: UiDropdownMenuSubTrigger,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[uiDropdownMenuSubTrigger], ui-dropdown-menu-sub-trigger",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: UI_MENU_ITEM,
+				useExisting: forwardRef(() => UiDropdownMenuSubTrigger)
+			}],
+			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()",
+				"data-slot": "dropdown-menu-sub-trigger",
+				role: "menuitem",
+				"aria-haspopup": "menu",
+				"[attr.aria-expanded]": "sub.open()",
+				"[attr.data-state]": "sub.open() ? \"open\" : \"closed\"",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			},
+			template: `
+    <ng-content />
+    <svg uiIcon="chevron-right" class="ms-auto rtl:rotate-180"></svg>
+  `
+		}]
+	}],
+	propDecorators: { inset: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "inset",
+			required: false
+		}]
+	}] }
+});
+var UiDropdownMenuSubContent = class UiDropdownMenuSubContent extends UiMenuContentBase {
+	root = inject(UiDropdownMenuSub);
+	menu = this.root;
+	varPrefix = "--radix-dropdown-menu";
+	side = input("right", ...ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []);
+	align = input("start", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	sideOffset = input(0, ...ngDevMode ? [{ debugName: "sideOffset" }] : /* istanbul ignore next */ []);
+	items = contentChildren(UI_MENU_ITEM, {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		descendants: true
+	});
+	classes = computed(() => cn(CONTENT_CLASS, "w-auto", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	menuItems() {
+		return this.items();
+	}
+	constructor() {
+		super();
+		this.isSub = true;
+		this.init();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuSubContent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: UiDropdownMenuSubContent,
+		isStandalone: true,
+		selector: "[uiDropdownMenuSubContent], ui-dropdown-menu-sub-content",
+		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
+			}
+		},
+		host: {
+			attributes: {
+				"role": "menu",
+				"aria-orientation": "vertical",
+				"data-slot": "dropdown-menu-sub-content",
+				"tabindex": "-1"
+			},
+			listeners: { "keydown": "onMenuKeydown($event)" },
+			properties: {
+				"attr.data-state": "root.state()",
+				"attr.dir": "dir.value",
+				"attr.class": "classes()"
+			}
+		},
+		queries: [{
+			propertyName: "items",
+			predicate: UI_MENU_ITEM,
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuSubContent,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuSubContent], ui-dropdown-menu-sub-content",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "menu",
+				"aria-orientation": "vertical",
+				"data-slot": "dropdown-menu-sub-content",
+				tabindex: "-1",
+				"[attr.data-state]": "root.state()",
+				"[attr.dir]": "dir.value",
+				"[attr.class]": "classes()",
+				"(keydown)": "onMenuKeydown($event)"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	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
+			}]
+		}],
+		items: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => UI_MENU_ITEM), {
+				descendants: true,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var UiDropdownMenuLabel = class UiDropdownMenuLabel {
+	inset = input(false, {
+		...ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(LABEL_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuLabel,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiDropdownMenuLabel,
+		isStandalone: true,
+		selector: "[uiDropdownMenuLabel], ui-dropdown-menu-label",
+		inputs: {
+			inset: {
+				classPropertyName: "inset",
+				publicName: "inset",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "dropdown-menu-label" },
+			properties: {
+				"attr.data-inset": "inset() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuLabel,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuLabel], ui-dropdown-menu-label",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "dropdown-menu-label",
+				"[attr.data-inset]": "inset() ? \"\" : null",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: {
+		inset: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inset",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+var UiDropdownMenuSeparator = class UiDropdownMenuSeparator {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(SEPARATOR_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuSeparator,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiDropdownMenuSeparator,
+		isStandalone: true,
+		selector: "[uiDropdownMenuSeparator], ui-dropdown-menu-separator",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: {
+				"role": "separator",
+				"aria-orientation": "horizontal",
+				"data-slot": "dropdown-menu-separator"
+			},
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuSeparator,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuSeparator], ui-dropdown-menu-separator",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "separator",
+				"aria-orientation": "horizontal",
+				"data-slot": "dropdown-menu-separator",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiDropdownMenuShortcut = class UiDropdownMenuShortcut {
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	classes = computed(() => cn(SHORTCUT_CLASS, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuShortcut,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: UiDropdownMenuShortcut,
+		isStandalone: true,
+		selector: "[uiDropdownMenuShortcut], ui-dropdown-menu-shortcut",
+		inputs: { userClass: {
+			classPropertyName: "userClass",
+			publicName: "class",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "data-slot": "dropdown-menu-shortcut" },
+			properties: { "attr.class": "classes()" }
+		},
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuShortcut,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuShortcut], ui-dropdown-menu-shortcut",
+			hostDirectives: [UiElementHost],
+			host: {
+				"data-slot": "dropdown-menu-shortcut",
+				"[attr.class]": "classes()"
+			}
+		}]
+	}],
+	propDecorators: { userClass: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "class",
+			required: false
+		}]
+	}] }
+});
+var UiDropdownMenuGroup = class UiDropdownMenuGroup {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiDropdownMenuGroup,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: UiDropdownMenuGroup,
+		isStandalone: true,
+		selector: "[uiDropdownMenuGroup], ui-dropdown-menu-group",
+		host: { attributes: {
+			"role": "group",
+			"data-slot": "dropdown-menu-group"
+		} },
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiDropdownMenuGroup,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiDropdownMenuGroup], ui-dropdown-menu-group",
+			hostDirectives: [UiElementHost],
+			host: {
+				role: "group",
+				"data-slot": "dropdown-menu-group"
+			}
+		}]
+	}]
+});
+const UI_DROPDOWN_MENU = [
+	UiDropdownMenu,
+	UiDropdownMenuTrigger,
+	UiDropdownMenuContent,
+	UiDropdownMenuItem,
+	UiDropdownMenuCheckboxItem,
+	UiDropdownMenuRadioGroup,
+	UiDropdownMenuRadioItem,
+	UiDropdownMenuSub,
+	UiDropdownMenuSubTrigger,
+	UiDropdownMenuSubContent,
+	UiDropdownMenuLabel,
+	UiDropdownMenuSeparator,
+	UiDropdownMenuShortcut,
+	UiDropdownMenuGroup
+];
+export { UI_DROPDOWN_MENU, UiDropdownMenu, UiDropdownMenuCheckboxItem, UiDropdownMenuContent, UiDropdownMenuGroup, UiDropdownMenuItem, UiDropdownMenuLabel, UiDropdownMenuRadioGroup, UiDropdownMenuRadioItem, UiDropdownMenuSeparator, UiDropdownMenuShortcut, UiDropdownMenuSub, UiDropdownMenuSubContent, UiDropdownMenuSubTrigger, UiDropdownMenuTrigger, UiMenuSelectEvent };
+
+//# sourceMappingURL=loomui-ng-ui-dropdown-menu.mjs.map