@star-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/star-ng-ui-menu.mjs

@@ -0,0 +1,1840 @@
+import * as i1 from "@angular/cdk/menu";
+import { CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuGroup, CdkMenuItem, CdkMenuTrigger } from "@angular/cdk/menu";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, afterNextRender, booleanAttribute, effect, inject, input, model, output, viewChild } from "@angular/core";
+import { RouterLink, RouterLinkActive } from "@angular/router";
+import { STAR_UI_TEXT, StarDirectionService } from "@star-ng/ui/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { StarButton } from "@star-ng/ui/button";
+import { _IdGenerator } from "@angular/cdk/a11y";
+const STAR_MENU_POSITIONS = [
+	{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: 4
+	},
+	{
+		originX: "end",
+		originY: "bottom",
+		overlayX: "end",
+		overlayY: "top",
+		offsetY: 4
+	},
+	{
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -4
+	}
+];
+function keepMenuInsideDialog(trigger, element) {
+	const target = trigger;
+	const create = target._getOverlayPositionStrategy;
+	if (typeof create !== "function") return;
+	target._getOverlayPositionStrategy = (...args) => {
+		const strategy = create.apply(trigger, args);
+		const dialog = element.closest("dialog");
+		return dialog ? strategy.withPopoverLocation({
+			type: "parent",
+			element: dialog
+		}) : strategy;
+	};
+}
+var StarMenuInDialog = class StarMenuInDialog {
+	constructor() {
+		keepMenuInsideDialog(inject(CdkMenuTrigger), inject(ElementRef).nativeElement);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMenuInDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.6",
+		type: StarMenuInDialog,
+		isStandalone: true,
+		selector: "[cdkMenuTriggerFor]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarMenuInDialog,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[cdkMenuTriggerFor]" }]
+	}],
+	ctorParameters: () => []
+});
+var StarMenu = class StarMenu {
+	directionSync = inject(StarDirectionService);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	inline = input(false, {
+		...ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	template = viewChild.required("menu", ...ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []);
+	run(item) {
+		if (item.disabled) return;
+		item.command?.(item);
+		this.itemClick.emit(item);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarMenu,
+		isStandalone: true,
+		selector: "star-menu",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inline: {
+				classPropertyName: "inline",
+				publicName: "inline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemClick: "itemClick" },
+		host: { classAttribute: "star-menu-host" },
+		viewQueries: [{
+			propertyName: "template",
+			first: true,
+			predicate: ["menu"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <ng-template #menu let-items>
+      <!-- Items must be direct template children of cdkMenu: CDK resolves the menu by DI. -->
+      <div class="star-menu" cdkMenu [attr.aria-label]="ariaLabel()">
+        @for (item of items; track $index) {
+          @if (item.separator) {
+            <div class="star-menu__separator" role="separator"></div>
+          } @else if (item.items?.length) {
+            <button
+              type="button"
+              class="star-menu__item"
+              cdkMenuItem
+              [cdkMenuTriggerFor]="menu"
+              [cdkMenuTriggerData]="{ $implicit: item.items }"
+              [cdkMenuItemDisabled]="!!item.disabled"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+              <i
+                class="ph-bold ph-caret-right star-menu__sub star-icon-mirror"
+                aria-hidden="true"
+              ></i>
+            </button>
+          } @else if (item.routerLink) {
+            <a
+              class="star-menu__item"
+              cdkMenuItem
+              [class.star-menu__item--danger]="item.danger"
+              [routerLink]="item.routerLink"
+              [cdkMenuItemDisabled]="!!item.disabled"
+              (cdkMenuItemTriggered)="run(item)"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+            </a>
+          } @else if (item.url) {
+            <a
+              class="star-menu__item"
+              cdkMenuItem
+              [href]="item.url"
+              [cdkMenuItemDisabled]="!!item.disabled"
+              (cdkMenuItemTriggered)="run(item)"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+            </a>
+          } @else {
+            <button
+              type="button"
+              class="star-menu__item"
+              cdkMenuItem
+              [class.star-menu__item--danger]="item.danger"
+              [cdkMenuItemDisabled]="!!item.disabled"
+              (cdkMenuItemTriggered)="run(item)"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+            </button>
+          }
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #content let-item>
+      @if (item.icon) {
+        <i class="star-menu__icon" [class]="item.icon" aria-hidden="true"></i>
+      }
+      <span class="star-menu__label">{{ item.label }}</span>
+      @if (item.shortcut) {
+        <kbd class="star-menu__shortcut">{{ item.shortcut }}</kbd>
+      }
+    </ng-template>
+
+    @if (inline()) {
+      <ng-container *ngTemplateOutlet="menu; context: { $implicit: items() }" />
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkMenu,
+				selector: "[cdkMenu]",
+				outputs: ["closed"],
+				exportAs: ["cdkMenu"]
+			},
+			{
+				kind: "directive",
+				type: CdkMenuItem,
+				selector: "[cdkMenuItem]",
+				inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"],
+				outputs: ["cdkMenuItemTriggered"],
+				exportAs: ["cdkMenuItem"]
+			},
+			{
+				kind: "directive",
+				type: CdkMenuTrigger,
+				selector: "[cdkMenuTriggerFor]",
+				inputs: [
+					"cdkMenuTriggerFor",
+					"cdkMenuPosition",
+					"cdkMenuTriggerData",
+					"cdkMenuTriggerTransformOriginOn"
+				],
+				outputs: ["cdkMenuOpened", "cdkMenuClosed"],
+				exportAs: ["cdkMenuTriggerFor"]
+			},
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: StarMenuInDialog,
+				selector: "[cdkMenuTriggerFor]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarMenu,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-menu",
+			imports: [
+				CdkMenu,
+				CdkMenuItem,
+				CdkMenuTrigger,
+				NgTemplateOutlet,
+				RouterLink,
+				StarMenuInDialog
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-menu-host" },
+			template: `
+    <ng-template #menu let-items>
+      <!-- Items must be direct template children of cdkMenu: CDK resolves the menu by DI. -->
+      <div class="star-menu" cdkMenu [attr.aria-label]="ariaLabel()">
+        @for (item of items; track $index) {
+          @if (item.separator) {
+            <div class="star-menu__separator" role="separator"></div>
+          } @else if (item.items?.length) {
+            <button
+              type="button"
+              class="star-menu__item"
+              cdkMenuItem
+              [cdkMenuTriggerFor]="menu"
+              [cdkMenuTriggerData]="{ $implicit: item.items }"
+              [cdkMenuItemDisabled]="!!item.disabled"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+              <i
+                class="ph-bold ph-caret-right star-menu__sub star-icon-mirror"
+                aria-hidden="true"
+              ></i>
+            </button>
+          } @else if (item.routerLink) {
+            <a
+              class="star-menu__item"
+              cdkMenuItem
+              [class.star-menu__item--danger]="item.danger"
+              [routerLink]="item.routerLink"
+              [cdkMenuItemDisabled]="!!item.disabled"
+              (cdkMenuItemTriggered)="run(item)"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+            </a>
+          } @else if (item.url) {
+            <a
+              class="star-menu__item"
+              cdkMenuItem
+              [href]="item.url"
+              [cdkMenuItemDisabled]="!!item.disabled"
+              (cdkMenuItemTriggered)="run(item)"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+            </a>
+          } @else {
+            <button
+              type="button"
+              class="star-menu__item"
+              cdkMenuItem
+              [class.star-menu__item--danger]="item.danger"
+              [cdkMenuItemDisabled]="!!item.disabled"
+              (cdkMenuItemTriggered)="run(item)"
+            >
+              <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+            </button>
+          }
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #content let-item>
+      @if (item.icon) {
+        <i class="star-menu__icon" [class]="item.icon" aria-hidden="true"></i>
+      }
+      <span class="star-menu__label">{{ item.label }}</span>
+      @if (item.shortcut) {
+        <kbd class="star-menu__shortcut">{{ item.shortcut }}</kbd>
+      }
+    </ng-template>
+
+    @if (inline()) {
+      <ng-container *ngTemplateOutlet="menu; context: { $implicit: items() }" />
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		inline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inline",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}],
+		template: [{
+			type: i0.ViewChild,
+			args: ["menu", { isSignal: true }]
+		}]
+	}
+});
+var StarMenuTrigger = class StarMenuTrigger {
+	directionSync = inject(StarDirectionService);
+	starMenuTrigger = input.required(...ngDevMode ? [{ debugName: "starMenuTrigger" }] : /* istanbul ignore next */ []);
+	trigger = inject(CdkMenuTrigger);
+	host = inject(ElementRef);
+	constructor() {
+		this.trigger.menuPosition = STAR_MENU_POSITIONS;
+		keepMenuInsideDialog(this.trigger, this.host.nativeElement);
+		effect(() => {
+			const menu = this.starMenuTrigger();
+			this.trigger.menuTemplateRef = menu.template();
+			this.trigger.menuData = { $implicit: menu.items() };
+		});
+		afterNextRender(() => this.syncInnerButton(false));
+		this.trigger.opened.pipe(takeUntilDestroyed()).subscribe(() => this.syncInnerButton(true));
+		this.trigger.closed.pipe(takeUntilDestroyed()).subscribe(() => this.syncInnerButton(false));
+		this.adaptWrapperHost();
+	}
+	adaptWrapperHost() {
+		const host = this.host.nativeElement;
+		if (host.matches("button, a")) return;
+		host.focus = (options) => host.querySelector("button")?.focus(options);
+		host.addEventListener("keydown", (event) => {
+			const inner = event.target?.closest("button");
+			if (inner && host.contains(inner) && (event.key === "Enter" || event.key === " ")) event.stopPropagation();
+		}, true);
+	}
+	syncInnerButton(open) {
+		const host = this.host.nativeElement;
+		if (host.matches("button, a")) return;
+		const inner = host.querySelector("button");
+		if (!inner) return;
+		host.setAttribute("role", "none");
+		inner.setAttribute("aria-haspopup", "menu");
+		inner.setAttribute("aria-expanded", String(open));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMenuTrigger,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarMenuTrigger,
+		isStandalone: true,
+		selector: "[starMenuTrigger]",
+		inputs: { starMenuTrigger: {
+			classPropertyName: "starMenuTrigger",
+			publicName: "starMenuTrigger",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		hostDirectives: [{
+			directive: i1.CdkMenuTrigger,
+			outputs: [
+				"cdkMenuOpened",
+				"menuOpened",
+				"cdkMenuClosed",
+				"menuClosed"
+			]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarMenuTrigger,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[starMenuTrigger]",
+			hostDirectives: [{
+				directive: CdkMenuTrigger,
+				outputs: ["cdkMenuOpened: menuOpened", "cdkMenuClosed: menuClosed"]
+			}]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { starMenuTrigger: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "starMenuTrigger",
+			required: true
+		}]
+	}] }
+});
+var StarSplitButton = class StarSplitButton {
+	text = inject(STAR_UI_TEXT);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input(null, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	pressed = output();
+	itemClick = output();
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarSplitButton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarSplitButton,
+		isStandalone: true,
+		selector: "star-split-button",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			pressed: "pressed",
+			itemClick: "itemClick"
+		},
+		host: { classAttribute: "star-split" },
+		ngImport: i0,
+		template: `
+    <star-button
+      class="star-split__main"
+      [variant]="variant()"
+      [size]="size()"
+      [leadingIcon]="icon()"
+      [disabled]="disabled()"
+      (pressed)="pressed.emit($event)"
+    >
+      {{ label() }}
+    </star-button>
+    <button
+      type="button"
+      class="star-btn star-split__toggle"
+      [class]="'star-btn star-split__toggle star-btn--' + variant() + ' star-btn--' + size()"
+      [disabled]="disabled()"
+      [attr.aria-label]="text.moreActions"
+      [starMenuTrigger]="menu"
+    >
+      <i class="ph-bold ph-caret-down" aria-hidden="true"></i>
+    </button>
+    <star-menu #menu [items]="items()" (itemClick)="itemClick.emit($event)" />
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: StarButton,
+				selector: "star-button",
+				inputs: [
+					"variant",
+					"size",
+					"type",
+					"disabled",
+					"loading",
+					"leadingIcon",
+					"trailingIcon",
+					"iconOnly",
+					"fullWidth",
+					"ariaLabel"
+				],
+				outputs: ["pressed"]
+			},
+			{
+				kind: "component",
+				type: StarMenu,
+				selector: "star-menu",
+				inputs: [
+					"items",
+					"inline",
+					"ariaLabel"
+				],
+				outputs: ["itemClick"]
+			},
+			{
+				kind: "directive",
+				type: StarMenuTrigger,
+				selector: "[starMenuTrigger]",
+				inputs: ["starMenuTrigger"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarSplitButton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-split-button",
+			imports: [
+				StarButton,
+				StarMenu,
+				StarMenuTrigger
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-split" },
+			template: `
+    <star-button
+      class="star-split__main"
+      [variant]="variant()"
+      [size]="size()"
+      [leadingIcon]="icon()"
+      [disabled]="disabled()"
+      (pressed)="pressed.emit($event)"
+    >
+      {{ label() }}
+    </star-button>
+    <button
+      type="button"
+      class="star-btn star-split__toggle"
+      [class]="'star-btn star-split__toggle star-btn--' + variant() + ' star-btn--' + size()"
+      [disabled]="disabled()"
+      [attr.aria-label]="text.moreActions"
+      [starMenuTrigger]="menu"
+    >
+      <i class="ph-bold ph-caret-down" aria-hidden="true"></i>
+    </button>
+    <star-menu #menu [items]="items()" (itemClick)="itemClick.emit($event)" />
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		pressed: [{
+			type: i0.Output,
+			args: ["pressed"]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}]
+	}
+});
+var StarMegaMenu = class StarMegaMenu {
+	directionSync = inject(StarDirectionService);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	positions = STAR_MENU_POSITIONS;
+	panelId = `star-mega-${Math.random().toString(36).slice(2)}`;
+	run(item) {
+		if (item.disabled) return;
+		item.command?.(item);
+		this.itemClick.emit(item);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMegaMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarMegaMenu,
+		isStandalone: true,
+		selector: "star-mega-menu",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemClick: "itemClick" },
+		host: { classAttribute: "star-menubar star-mega-menu" },
+		ngImport: i0,
+		template: `
+    <div class="star-menubar__bar" cdkMenuBar [attr.aria-label]="ariaLabel()">
+      @for (item of items(); track $index) {
+        @if (item.items?.length) {
+          <button
+            type="button"
+            class="star-menubar__item"
+            cdkMenuItem
+            [cdkMenuTriggerFor]="panel"
+            [cdkMenuTriggerData]="{ $implicit: item.items }"
+            [cdkMenuPosition]="positions"
+            [cdkMenuItemDisabled]="!!item.disabled"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+            <i class="ph-bold ph-caret-down star-menubar__caret" aria-hidden="true"></i>
+          </button>
+        } @else if (item.routerLink) {
+          <a
+            class="star-menubar__item"
+            cdkMenuItem
+            [routerLink]="item.routerLink"
+            [cdkMenuItemDisabled]="!!item.disabled"
+            (cdkMenuItemTriggered)="run(item)"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+          </a>
+        } @else {
+          <button
+            type="button"
+            class="star-menubar__item"
+            cdkMenuItem
+            [cdkMenuItemDisabled]="!!item.disabled"
+            (cdkMenuItemTriggered)="run(item)"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+          </button>
+        }
+      }
+    </div>
+
+    <ng-template #panel let-columns>
+      <div class="star-menu star-mega-menu__panel" cdkMenu>
+        @for (column of columns; track $index; let c = $index) {
+          <div
+            class="star-mega-menu__column"
+            cdkMenuGroup
+            [attr.aria-labelledby]="column.label ? panelId + '-' + c : null"
+          >
+            @if (column.label) {
+              <div class="star-mega-menu__heading" [id]="panelId + '-' + c">{{ column.label }}</div>
+            }
+            @for (entry of column.items ?? []; track $index) {
+              @if (entry.separator) {
+                <div class="star-menu__separator" role="separator"></div>
+              } @else if (entry.routerLink) {
+                <a
+                  class="star-menu__item"
+                  cdkMenuItem
+                  [routerLink]="entry.routerLink"
+                  [cdkMenuItemDisabled]="!!entry.disabled"
+                  (cdkMenuItemTriggered)="run(entry)"
+                >
+                  @if (entry.icon) {
+                    <i class="star-menu__icon" [class]="entry.icon" aria-hidden="true"></i>
+                  }
+                  <span class="star-menu__label">{{ entry.label }}</span>
+                </a>
+              } @else if (entry.url) {
+                <a
+                  class="star-menu__item"
+                  cdkMenuItem
+                  [href]="entry.url"
+                  [cdkMenuItemDisabled]="!!entry.disabled"
+                  (cdkMenuItemTriggered)="run(entry)"
+                >
+                  @if (entry.icon) {
+                    <i class="star-menu__icon" [class]="entry.icon" aria-hidden="true"></i>
+                  }
+                  <span class="star-menu__label">{{ entry.label }}</span>
+                </a>
+              } @else {
+                <button
+                  type="button"
+                  class="star-menu__item"
+                  cdkMenuItem
+                  [class.star-menu__item--danger]="entry.danger"
+                  [cdkMenuItemDisabled]="!!entry.disabled"
+                  (cdkMenuItemTriggered)="run(entry)"
+                >
+                  @if (entry.icon) {
+                    <i class="star-menu__icon" [class]="entry.icon" aria-hidden="true"></i>
+                  }
+                  <span class="star-menu__label">{{ entry.label }}</span>
+                </button>
+              }
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkMenu,
+				selector: "[cdkMenu]",
+				outputs: ["closed"],
+				exportAs: ["cdkMenu"]
+			},
+			{
+				kind: "directive",
+				type: CdkMenuBar,
+				selector: "[cdkMenuBar]",
+				exportAs: ["cdkMenuBar"]
+			},
+			{
+				kind: "directive",
+				type: CdkMenuGroup,
+				selector: "[cdkMenuGroup]",
+				exportAs: ["cdkMenuGroup"]
+			},
+			{
+				kind: "directive",
+				type: CdkMenuItem,
+				selector: "[cdkMenuItem]",
+				inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"],
+				outputs: ["cdkMenuItemTriggered"],
+				exportAs: ["cdkMenuItem"]
+			},
+			{
+				kind: "directive",
+				type: CdkMenuTrigger,
+				selector: "[cdkMenuTriggerFor]",
+				inputs: [
+					"cdkMenuTriggerFor",
+					"cdkMenuPosition",
+					"cdkMenuTriggerData",
+					"cdkMenuTriggerTransformOriginOn"
+				],
+				outputs: ["cdkMenuOpened", "cdkMenuClosed"],
+				exportAs: ["cdkMenuTriggerFor"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: StarMenuInDialog,
+				selector: "[cdkMenuTriggerFor]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarMegaMenu,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-mega-menu",
+			imports: [
+				CdkMenu,
+				CdkMenuBar,
+				CdkMenuGroup,
+				CdkMenuItem,
+				CdkMenuTrigger,
+				RouterLink,
+				StarMenuInDialog
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-menubar star-mega-menu" },
+			template: `
+    <div class="star-menubar__bar" cdkMenuBar [attr.aria-label]="ariaLabel()">
+      @for (item of items(); track $index) {
+        @if (item.items?.length) {
+          <button
+            type="button"
+            class="star-menubar__item"
+            cdkMenuItem
+            [cdkMenuTriggerFor]="panel"
+            [cdkMenuTriggerData]="{ $implicit: item.items }"
+            [cdkMenuPosition]="positions"
+            [cdkMenuItemDisabled]="!!item.disabled"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+            <i class="ph-bold ph-caret-down star-menubar__caret" aria-hidden="true"></i>
+          </button>
+        } @else if (item.routerLink) {
+          <a
+            class="star-menubar__item"
+            cdkMenuItem
+            [routerLink]="item.routerLink"
+            [cdkMenuItemDisabled]="!!item.disabled"
+            (cdkMenuItemTriggered)="run(item)"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+          </a>
+        } @else {
+          <button
+            type="button"
+            class="star-menubar__item"
+            cdkMenuItem
+            [cdkMenuItemDisabled]="!!item.disabled"
+            (cdkMenuItemTriggered)="run(item)"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+          </button>
+        }
+      }
+    </div>
+
+    <ng-template #panel let-columns>
+      <div class="star-menu star-mega-menu__panel" cdkMenu>
+        @for (column of columns; track $index; let c = $index) {
+          <div
+            class="star-mega-menu__column"
+            cdkMenuGroup
+            [attr.aria-labelledby]="column.label ? panelId + '-' + c : null"
+          >
+            @if (column.label) {
+              <div class="star-mega-menu__heading" [id]="panelId + '-' + c">{{ column.label }}</div>
+            }
+            @for (entry of column.items ?? []; track $index) {
+              @if (entry.separator) {
+                <div class="star-menu__separator" role="separator"></div>
+              } @else if (entry.routerLink) {
+                <a
+                  class="star-menu__item"
+                  cdkMenuItem
+                  [routerLink]="entry.routerLink"
+                  [cdkMenuItemDisabled]="!!entry.disabled"
+                  (cdkMenuItemTriggered)="run(entry)"
+                >
+                  @if (entry.icon) {
+                    <i class="star-menu__icon" [class]="entry.icon" aria-hidden="true"></i>
+                  }
+                  <span class="star-menu__label">{{ entry.label }}</span>
+                </a>
+              } @else if (entry.url) {
+                <a
+                  class="star-menu__item"
+                  cdkMenuItem
+                  [href]="entry.url"
+                  [cdkMenuItemDisabled]="!!entry.disabled"
+                  (cdkMenuItemTriggered)="run(entry)"
+                >
+                  @if (entry.icon) {
+                    <i class="star-menu__icon" [class]="entry.icon" aria-hidden="true"></i>
+                  }
+                  <span class="star-menu__label">{{ entry.label }}</span>
+                </a>
+              } @else {
+                <button
+                  type="button"
+                  class="star-menu__item"
+                  cdkMenuItem
+                  [class.star-menu__item--danger]="entry.danger"
+                  [cdkMenuItemDisabled]="!!entry.disabled"
+                  (cdkMenuItemTriggered)="run(entry)"
+                >
+                  @if (entry.icon) {
+                    <i class="star-menu__icon" [class]="entry.icon" aria-hidden="true"></i>
+                  }
+                  <span class="star-menu__label">{{ entry.label }}</span>
+                </button>
+              }
+            }
+          </div>
+        }
+      </div>
+    </ng-template>
+  `
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}]
+	}
+});
+var StarMenubar = class StarMenubar {
+	directionSync = inject(StarDirectionService);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	run(item) {
+		if (item.disabled) return;
+		item.command?.(item);
+		this.itemClick.emit(item);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMenubar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarMenubar,
+		isStandalone: true,
+		selector: "star-menubar",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemClick: "itemClick" },
+		host: { classAttribute: "star-menubar" },
+		ngImport: i0,
+		template: `
+    <ng-content select="[starMenubarStart]" />
+    <div class="star-menubar__bar" cdkMenuBar [attr.aria-label]="ariaLabel()">
+      @for (item of items(); track $index) {
+        @if (item.items?.length) {
+          <button
+            type="button"
+            class="star-menubar__item"
+            cdkMenuItem
+            [cdkMenuTriggerFor]="submenu.template()"
+            [cdkMenuTriggerData]="{ $implicit: item.items }"
+            [cdkMenuItemDisabled]="!!item.disabled"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+            <i class="ph-bold ph-caret-down star-menubar__caret" aria-hidden="true"></i>
+          </button>
+        } @else if (item.routerLink) {
+          <a
+            class="star-menubar__item"
+            cdkMenuItem
+            routerLinkActive="star-menubar__item--active"
+            [routerLink]="item.routerLink"
+            [cdkMenuItemDisabled]="!!item.disabled"
+            (cdkMenuItemTriggered)="run(item)"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+          </a>
+        } @else {
+          <button
+            type="button"
+            class="star-menubar__item"
+            cdkMenuItem
+            [cdkMenuItemDisabled]="!!item.disabled"
+            (cdkMenuItemTriggered)="run(item)"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+          </button>
+        }
+      }
+    </div>
+    <span class="star-menubar__end"><ng-content select="[starMenubarEnd]" /></span>
+    <star-menu #submenu (itemClick)="itemClick.emit($event)" />
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkMenuBar,
+				selector: "[cdkMenuBar]",
+				exportAs: ["cdkMenuBar"]
+			},
+			{
+				kind: "directive",
+				type: CdkMenuItem,
+				selector: "[cdkMenuItem]",
+				inputs: ["cdkMenuItemDisabled", "cdkMenuitemTypeaheadLabel"],
+				outputs: ["cdkMenuItemTriggered"],
+				exportAs: ["cdkMenuItem"]
+			},
+			{
+				kind: "directive",
+				type: CdkMenuTrigger,
+				selector: "[cdkMenuTriggerFor]",
+				inputs: [
+					"cdkMenuTriggerFor",
+					"cdkMenuPosition",
+					"cdkMenuTriggerData",
+					"cdkMenuTriggerTransformOriginOn"
+				],
+				outputs: ["cdkMenuOpened", "cdkMenuClosed"],
+				exportAs: ["cdkMenuTriggerFor"]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLinkActive,
+				selector: "[routerLinkActive]",
+				inputs: [
+					"routerLinkActiveOptions",
+					"ariaCurrentWhenActive",
+					"routerLinkActive"
+				],
+				outputs: ["isActiveChange"],
+				exportAs: ["routerLinkActive"]
+			},
+			{
+				kind: "component",
+				type: StarMenu,
+				selector: "star-menu",
+				inputs: [
+					"items",
+					"inline",
+					"ariaLabel"
+				],
+				outputs: ["itemClick"]
+			},
+			{
+				kind: "directive",
+				type: StarMenuInDialog,
+				selector: "[cdkMenuTriggerFor]"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarMenubar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-menubar",
+			imports: [
+				CdkMenuBar,
+				CdkMenuItem,
+				CdkMenuTrigger,
+				RouterLink,
+				RouterLinkActive,
+				StarMenu,
+				StarMenuInDialog
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-menubar" },
+			template: `
+    <ng-content select="[starMenubarStart]" />
+    <div class="star-menubar__bar" cdkMenuBar [attr.aria-label]="ariaLabel()">
+      @for (item of items(); track $index) {
+        @if (item.items?.length) {
+          <button
+            type="button"
+            class="star-menubar__item"
+            cdkMenuItem
+            [cdkMenuTriggerFor]="submenu.template()"
+            [cdkMenuTriggerData]="{ $implicit: item.items }"
+            [cdkMenuItemDisabled]="!!item.disabled"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+            <i class="ph-bold ph-caret-down star-menubar__caret" aria-hidden="true"></i>
+          </button>
+        } @else if (item.routerLink) {
+          <a
+            class="star-menubar__item"
+            cdkMenuItem
+            routerLinkActive="star-menubar__item--active"
+            [routerLink]="item.routerLink"
+            [cdkMenuItemDisabled]="!!item.disabled"
+            (cdkMenuItemTriggered)="run(item)"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+          </a>
+        } @else {
+          <button
+            type="button"
+            class="star-menubar__item"
+            cdkMenuItem
+            [cdkMenuItemDisabled]="!!item.disabled"
+            (cdkMenuItemTriggered)="run(item)"
+          >
+            @if (item.icon) {
+              <i [class]="item.icon" aria-hidden="true"></i>
+            }
+            {{ item.label }}
+          </button>
+        }
+      }
+    </div>
+    <span class="star-menubar__end"><ng-content select="[starMenubarEnd]" /></span>
+    <star-menu #submenu (itemClick)="itemClick.emit($event)" />
+  `
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}]
+	}
+});
+var StarContextMenu = class StarContextMenu {
+	directionSync = inject(StarDirectionService);
+	starContextMenu = input.required(...ngDevMode ? [{ debugName: "starContextMenu" }] : /* istanbul ignore next */ []);
+	trigger = inject(CdkContextMenuTrigger);
+	constructor() {
+		this.trigger.menuPosition = STAR_MENU_POSITIONS;
+		keepMenuInsideDialog(this.trigger, inject(ElementRef).nativeElement);
+		effect(() => {
+			const menu = this.starContextMenu();
+			this.trigger.menuTemplateRef = menu.template();
+			this.trigger.menuData = { $implicit: menu.items() };
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarContextMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.6",
+		type: StarContextMenu,
+		isStandalone: true,
+		selector: "[starContextMenu]",
+		inputs: { starContextMenu: {
+			classPropertyName: "starContextMenu",
+			publicName: "starContextMenu",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		hostDirectives: [{
+			directive: i1.CdkContextMenuTrigger,
+			outputs: [
+				"cdkContextMenuOpened",
+				"menuOpened",
+				"cdkContextMenuClosed",
+				"menuClosed"
+			]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarContextMenu,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[starContextMenu]",
+			hostDirectives: [{
+				directive: CdkContextMenuTrigger,
+				outputs: ["cdkContextMenuOpened: menuOpened", "cdkContextMenuClosed: menuClosed"]
+			}]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { starContextMenu: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "starContextMenu",
+			required: true
+		}]
+	}] }
+});
+var StarPanelMenu = class StarPanelMenu {
+	id = inject(_IdGenerator).getId("star-panel-menu-");
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	single = input(false, {
+		...ngDevMode ? { debugName: "single" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	expandedKeys = model([], ...ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	isOpen(key) {
+		return this.expandedKeys().includes(key);
+	}
+	regionId(key) {
+		return `${this.id}-${key.replaceAll(".", "-")}`;
+	}
+	toggle(key) {
+		if (this.isOpen(key)) {
+			this.expandedKeys.update((keys) => keys.filter((open) => open !== key && !open.startsWith(`${key}.`)));
+			return;
+		}
+		const parent = key.includes(".") ? key.slice(0, key.lastIndexOf(".")) : "";
+		const isSibling = (open) => (open.includes(".") ? open.slice(0, open.lastIndexOf(".")) : "") === parent;
+		this.expandedKeys.update((keys) => [...this.single() ? keys.filter((open) => !isSibling(open) && !keys.some((k) => isSibling(k) && open.startsWith(`${k}.`))) : keys, key]);
+	}
+	run(item) {
+		if (item.disabled) return;
+		item.command?.(item);
+		this.itemClick.emit(item);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarPanelMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarPanelMenu,
+		isStandalone: true,
+		selector: "star-panel-menu",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			single: {
+				classPropertyName: "single",
+				publicName: "single",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expandedKeys: {
+				classPropertyName: "expandedKeys",
+				publicName: "expandedKeys",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			expandedKeys: "expandedKeysChange",
+			itemClick: "itemClick"
+		},
+		host: { classAttribute: "star-panel-menu" },
+		ngImport: i0,
+		template: `
+    <nav [attr.aria-label]="ariaLabel()">
+      <ng-container *ngTemplateOutlet="list; context: { $implicit: items(), path: '', level: 0 }" />
+    </nav>
+
+    <ng-template #list let-entries let-path="path" let-level="level">
+      <ul class="star-panel-menu__list" [class.star-panel-menu__list--nested]="level > 0">
+        @for (item of entries; track $index; let i = $index) {
+          @let key = path ? path + '.' + i : '' + i;
+          @if (item.separator) {
+            <li class="star-panel-menu__separator" role="separator"></li>
+          } @else if (item.items?.length) {
+            <li>
+              <button
+                type="button"
+                class="star-panel-menu__item star-panel-menu__item--parent"
+                [class.star-panel-menu__item--root]="level === 0"
+                [style.--star-level]="level"
+                [disabled]="item.disabled"
+                [attr.aria-expanded]="isOpen(key)"
+                [attr.aria-controls]="isOpen(key) ? regionId(key) : null"
+                (click)="toggle(key)"
+              >
+                @if (item.icon) {
+                  <i class="star-panel-menu__icon" [class]="item.icon" aria-hidden="true"></i>
+                }
+                <span class="star-panel-menu__label">{{ item.label }}</span>
+                <i class="ph-bold ph-caret-down star-panel-menu__caret" aria-hidden="true"></i>
+              </button>
+              @if (isOpen(key)) {
+                <div [id]="regionId(key)">
+                  <ng-container
+                    *ngTemplateOutlet="
+                      list;
+                      context: { $implicit: item.items, path: key, level: level + 1 }
+                    "
+                  />
+                </div>
+              }
+            </li>
+          } @else if (item.routerLink) {
+            <li>
+              <a
+                class="star-panel-menu__item"
+                routerLinkActive="star-panel-menu__item--active"
+                ariaCurrentWhenActive="page"
+                [style.--star-level]="level"
+                [routerLink]="item.disabled ? null : item.routerLink"
+                [attr.aria-disabled]="item.disabled || null"
+                (click)="run(item)"
+              >
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+              </a>
+            </li>
+          } @else if (item.url) {
+            <li>
+              <a
+                class="star-panel-menu__item"
+                [style.--star-level]="level"
+                [attr.href]="item.disabled ? null : item.url"
+                [attr.aria-disabled]="item.disabled || null"
+                (click)="run(item)"
+              >
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+              </a>
+            </li>
+          } @else {
+            <li>
+              <button
+                type="button"
+                class="star-panel-menu__item"
+                [class.star-panel-menu__item--danger]="item.danger"
+                [style.--star-level]="level"
+                [disabled]="item.disabled"
+                (click)="run(item)"
+              >
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+              </button>
+            </li>
+          }
+        }
+      </ul>
+    </ng-template>
+
+    <ng-template #content let-item>
+      @if (item.icon) {
+        <i class="star-panel-menu__icon" [class]="item.icon" aria-hidden="true"></i>
+      }
+      <span class="star-panel-menu__label">{{ item.label }}</span>
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "directive",
+				type: RouterLinkActive,
+				selector: "[routerLinkActive]",
+				inputs: [
+					"routerLinkActiveOptions",
+					"ariaCurrentWhenActive",
+					"routerLinkActive"
+				],
+				outputs: ["isActiveChange"],
+				exportAs: ["routerLinkActive"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarPanelMenu,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-panel-menu",
+			imports: [
+				NgTemplateOutlet,
+				RouterLink,
+				RouterLinkActive
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-panel-menu" },
+			template: `
+    <nav [attr.aria-label]="ariaLabel()">
+      <ng-container *ngTemplateOutlet="list; context: { $implicit: items(), path: '', level: 0 }" />
+    </nav>
+
+    <ng-template #list let-entries let-path="path" let-level="level">
+      <ul class="star-panel-menu__list" [class.star-panel-menu__list--nested]="level > 0">
+        @for (item of entries; track $index; let i = $index) {
+          @let key = path ? path + '.' + i : '' + i;
+          @if (item.separator) {
+            <li class="star-panel-menu__separator" role="separator"></li>
+          } @else if (item.items?.length) {
+            <li>
+              <button
+                type="button"
+                class="star-panel-menu__item star-panel-menu__item--parent"
+                [class.star-panel-menu__item--root]="level === 0"
+                [style.--star-level]="level"
+                [disabled]="item.disabled"
+                [attr.aria-expanded]="isOpen(key)"
+                [attr.aria-controls]="isOpen(key) ? regionId(key) : null"
+                (click)="toggle(key)"
+              >
+                @if (item.icon) {
+                  <i class="star-panel-menu__icon" [class]="item.icon" aria-hidden="true"></i>
+                }
+                <span class="star-panel-menu__label">{{ item.label }}</span>
+                <i class="ph-bold ph-caret-down star-panel-menu__caret" aria-hidden="true"></i>
+              </button>
+              @if (isOpen(key)) {
+                <div [id]="regionId(key)">
+                  <ng-container
+                    *ngTemplateOutlet="
+                      list;
+                      context: { $implicit: item.items, path: key, level: level + 1 }
+                    "
+                  />
+                </div>
+              }
+            </li>
+          } @else if (item.routerLink) {
+            <li>
+              <a
+                class="star-panel-menu__item"
+                routerLinkActive="star-panel-menu__item--active"
+                ariaCurrentWhenActive="page"
+                [style.--star-level]="level"
+                [routerLink]="item.disabled ? null : item.routerLink"
+                [attr.aria-disabled]="item.disabled || null"
+                (click)="run(item)"
+              >
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+              </a>
+            </li>
+          } @else if (item.url) {
+            <li>
+              <a
+                class="star-panel-menu__item"
+                [style.--star-level]="level"
+                [attr.href]="item.disabled ? null : item.url"
+                [attr.aria-disabled]="item.disabled || null"
+                (click)="run(item)"
+              >
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+              </a>
+            </li>
+          } @else {
+            <li>
+              <button
+                type="button"
+                class="star-panel-menu__item"
+                [class.star-panel-menu__item--danger]="item.danger"
+                [style.--star-level]="level"
+                [disabled]="item.disabled"
+                (click)="run(item)"
+              >
+                <ng-container *ngTemplateOutlet="content; context: { $implicit: item }" />
+              </button>
+            </li>
+          }
+        }
+      </ul>
+    </ng-template>
+
+    <ng-template #content let-item>
+      @if (item.icon) {
+        <i class="star-panel-menu__icon" [class]="item.icon" aria-hidden="true"></i>
+      }
+      <span class="star-panel-menu__label">{{ item.label }}</span>
+    </ng-template>
+  `
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		single: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "single",
+				required: false
+			}]
+		}],
+		expandedKeys: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandedKeys",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["expandedKeysChange"]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}]
+	}
+});
+export { STAR_MENU_POSITIONS, StarContextMenu, StarMegaMenu, StarMenu, StarMenuInDialog, StarMenuTrigger, StarMenubar, StarPanelMenu, StarSplitButton, keepMenuInsideDialog };
+
+//# sourceMappingURL=star-ng-ui-menu.mjs.map