@ojiepermana/angular 22.1.13 → 22.2.0

package/fesm2022/ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs

@@ -0,0 +1,1228 @@
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input, output, signal } from "@angular/core";
+import { RouterLink, RouterLinkActive } from "@angular/router";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { IconComponent } from "@ojiepermana/angular/component/icon";
+import { TooltipDirective } from "@ojiepermana/angular/component/tooltip";
+var NavigationItemContentComponent = class NavigationItemContentComponent {
+	nav = inject(NAVIGATION_ADAPTER);
+	item = input.required(...ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []);
+	active = input(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	level = input(0, ...ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []);
+	iconTemplate = input(void 0, ...ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []);
+	iconSlotClasses = computed(() => cn("relative z-10 inline-flex shrink-0 items-center justify-center transition-colors duration-200", this.compact() && "mx-auto", this.active() ? "text-current" : "text-muted-foreground group-hover/nav:text-current"), ...ngDevMode ? [{ debugName: "iconSlotClasses" }] : /* istanbul ignore next */ []);
+	titleClasses = computed(() => cn("block truncate", this.active() && "text-foreground", this.item().classes?.title), ...ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []);
+	showSubtitle = computed(() => !!this.item().subtitle && !(this.orientation() === "horizontal" && this.level() === 0), ...ngDevMode ? [{ debugName: "showSubtitle" }] : /* istanbul ignore next */ []);
+	subtitleClasses = computed(() => cn("nav-subtitle block truncate text-muted-foreground", this.item().classes?.subtitle), ...ngDevMode ? [{ debugName: "subtitleClasses" }] : /* istanbul ignore next */ []);
+	compactFallbackClasses = computed(() => cn("inline-flex h-5 min-w-5 items-center justify-center text-(length:--nav-icon-size-sub) font-semibold uppercase"), ...ngDevMode ? [{ debugName: "compactFallbackClasses" }] : /* istanbul ignore next */ []);
+	defaultBadgeClasses = computed(() => cn("nav-badge ml-auto inline-flex h-5 shrink-0 items-center rounded-full px-2", this.active() ? "bg-background text-foreground" : "bg-muted text-muted-foreground"), ...ngDevMode ? [{ debugName: "defaultBadgeClasses" }] : /* istanbul ignore next */ []);
+	defaultIconClasses = computed(() => cn(this.compact() ? "text-(length:--nav-icon-size-rail)" : "text-(length:--nav-icon-size)", "text-current", this.item().classes?.icon), ...ngDevMode ? [{ debugName: "defaultIconClasses" }] : /* istanbul ignore next */ []);
+	iconContext = computed(() => this.nav.iconContext(this.item(), this.active(), this.level(), this.orientation()), ...ngDevMode ? [{ debugName: "iconContext" }] : /* istanbul ignore next */ []);
+	compactFallback() {
+		return this.nav.compactFallback(this.item());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationItemContentComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationItemContentComponent,
+		isStandalone: true,
+		selector: "NavigationItemContent",
+		inputs: {
+			item: {
+				classPropertyName: "item",
+				publicName: "item",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			level: {
+				classPropertyName: "level",
+				publicName: "level",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconTemplate: {
+				classPropertyName: "iconTemplate",
+				publicName: "iconTemplate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "contents" },
+		ngImport: i0,
+		template: `
+    @if (item().icon; as iconName) {
+      <span data-navigation-icon-slot="true" [class]="iconSlotClasses()">
+        @if (iconTemplate(); as customIcon) {
+          <ng-container
+            [ngTemplateOutlet]="customIcon.template"
+            [ngTemplateOutletContext]="iconContext()"
+          />
+        } @else {
+          <Icon [name]="iconName" [class]="defaultIconClasses()" size="inherit" [fill]="1" />
+        }
+      </span>
+    }
+
+    @if (!compact()) {
+      <span class="min-w-0 flex-1">
+        <span [class]="titleClasses()">{{ item().title }}</span>
+        @if (showSubtitle()) {
+          <span [class]="subtitleClasses()">{{ item().subtitle }}</span>
+        }
+      </span>
+
+      @if (item().badge?.title; as badgeTitle) {
+        <span [class]="item().badge?.classes ?? defaultBadgeClasses()">{{ badgeTitle }}</span>
+      }
+    }
+
+    @if (compact() && !item().icon) {
+      <span aria-hidden="true" [class]="compactFallbackClasses()">{{ compactFallback() }}</span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "component",
+			type: IconComponent,
+			selector: "Icon",
+			inputs: [
+				"name",
+				"class",
+				"size",
+				"fill",
+				"weight",
+				"grade",
+				"opticalSize"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationItemContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationItemContent",
+			imports: [NgTemplateOutlet, IconComponent],
+			host: { class: "contents" },
+			template: `
+    @if (item().icon; as iconName) {
+      <span data-navigation-icon-slot="true" [class]="iconSlotClasses()">
+        @if (iconTemplate(); as customIcon) {
+          <ng-container
+            [ngTemplateOutlet]="customIcon.template"
+            [ngTemplateOutletContext]="iconContext()"
+          />
+        } @else {
+          <Icon [name]="iconName" [class]="defaultIconClasses()" size="inherit" [fill]="1" />
+        }
+      </span>
+    }
+
+    @if (!compact()) {
+      <span class="min-w-0 flex-1">
+        <span [class]="titleClasses()">{{ item().title }}</span>
+        @if (showSubtitle()) {
+          <span [class]="subtitleClasses()">{{ item().subtitle }}</span>
+        }
+      </span>
+
+      @if (item().badge?.title; as badgeTitle) {
+        <span [class]="item().badge?.classes ?? defaultBadgeClasses()">{{ badgeTitle }}</span>
+      }
+    }
+
+    @if (compact() && !item().icon) {
+      <span aria-hidden="true" [class]="compactFallbackClasses()">{{ compactFallback() }}</span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		item: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "item",
+				required: true
+			}]
+		}],
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		level: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "level",
+				required: false
+			}]
+		}],
+		iconTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconTemplate",
+				required: false
+			}]
+		}]
+	}
+});
+function navigationPanelId(navId, item) {
+	return `${safeNavId(navId)}-${item.panelId}`;
+}
+function navigationHeadingId(navId, item) {
+	return `${navigationPanelId(navId, item)}-heading`;
+}
+function safeNavId(value) {
+	return value.trim().toLowerCase().replace(/[^a-z0-9_-]+/g, "-") || "default";
+}
+var NavigationItemComponent = class NavigationItemComponent {
+	nav = inject(NAVIGATION_ADAPTER);
+	navId = input("default", ...ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []);
+	item = input.required(...ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []);
+	level = input(0, ...ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	itemClass = input("", ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
+	activeIds = input(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []);
+	activeUrl = input(null, ...ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []);
+	iconTemplate = input(void 0, ...ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []);
+	tooltipPosition = input("above", {
+		...ngDevMode ? { debugName: "tooltipPosition" } : /* istanbul ignore next */ {},
+		alias: "tooltip-position"
+	});
+	collapseTree = input("stairs", ...ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []);
+	straightRail = input(false, ...ngDevMode ? [{ debugName: "straightRail" }] : /* istanbul ignore next */ []);
+	stairsRail = input(false, ...ngDevMode ? [{ debugName: "stairsRail" }] : /* istanbul ignore next */ []);
+	straightRailActive = input(false, ...ngDevMode ? [{ debugName: "straightRailActive" }] : /* istanbul ignore next */ []);
+	firstInBranch = input(false, ...ngDevMode ? [{ debugName: "firstInBranch" }] : /* istanbul ignore next */ []);
+	lastInBranch = input(false, ...ngDevMode ? [{ debugName: "lastInBranch" }] : /* istanbul ignore next */ []);
+	openedIds = input([], ...ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []);
+	openedIdsChange = output();
+	itemSelected = output();
+	openedIdSet = computed(() => new Set(this.openedIds()), ...ngDevMode ? [{ debugName: "openedIdSet" }] : /* istanbul ignore next */ []);
+	listedAsOpen = computed(() => this.openedIdSet().has(this.item().stateId) || this.openedIdSet().has(this.item().key), ...ngDevMode ? [{ debugName: "listedAsOpen" }] : /* istanbul ignore next */ []);
+	userToggled = signal(false, ...ngDevMode ? [{ debugName: "userToggled" }] : /* istanbul ignore next */ []);
+	isHorizontalRoot = computed(() => this.orientation() === "horizontal" && this.level() === 0, ...ngDevMode ? [{ debugName: "isHorizontalRoot" }] : /* istanbul ignore next */ []);
+	isActive = computed(() => this.nav.isItemActive(this.item(), this.activeIds(), this.activeUrl()), ...ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []);
+	showChildren = computed(() => !this.compact() && this.isOpen(), ...ngDevMode ? [{ debugName: "showChildren" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => {
+		if (this.item().type === "divider") return this.dividerClasses();
+		if (this.item().type === "spacer") return "flex-1";
+		if (this.item().type === "group" || this.item().type === "mega") return this.groupContainerClasses();
+		return this.itemContainerClasses();
+	}, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	hostRole = computed(() => {
+		return this.orientation() === "horizontal" ? "none" : null;
+	}, ...ngDevMode ? [{ debugName: "hostRole" }] : /* istanbul ignore next */ []);
+	panelId = computed(() => navigationPanelId(this.navId(), this.item()), ...ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []);
+	headingId = computed(() => navigationHeadingId(this.navId(), this.item()), ...ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []);
+	isRouterItem() {
+		return this.nav.isRouterItem(this.item());
+	}
+	hrefFor() {
+		return this.nav.hrefFor(this.item());
+	}
+	routerLinkFor() {
+		return this.item().disabled ? null : this.item().link ?? null;
+	}
+	hrefAttribute() {
+		return this.item().disabled ? null : this.hrefFor();
+	}
+	leafTabIndex() {
+		return this.item().disabled ? -1 : null;
+	}
+	relFor() {
+		return this.nav.relFor(this.item());
+	}
+	routerLinkActiveOptions() {
+		return this.nav.routerLinkActiveOptions(this.item());
+	}
+	itemRole() {
+		return this.nav.itemRole(this.orientation(), this.level());
+	}
+	compactLabel() {
+		return this.nav.compactLabel(this.item(), this.compact());
+	}
+	titleFor() {
+		return this.nav.titleFor(this.item(), this.compact());
+	}
+	isOpen() {
+		if (this.userToggled()) return this.listedAsOpen();
+		return this.listedAsOpen() || this.isActive();
+	}
+	toggleOpen() {
+		if (this.item().disabled) return;
+		const open = this.isOpen();
+		this.userToggled.set(true);
+		const next = new Set(this.openedIds());
+		if (open) next.delete(this.item().stateId);
+		else next.add(this.item().stateId);
+		this.openedIdsChange.emit([...next]);
+	}
+	selectItem(event) {
+		if (this.item().disabled) {
+			event.preventDefault();
+			event.stopPropagation();
+			return;
+		}
+		this.item().action?.(this.item().source);
+		this.itemSelected.emit({
+			item: this.item().source,
+			key: this.item().key,
+			type: this.item().type,
+			link: this.item().link,
+			external: !!this.hrefFor()
+		});
+		this.nav.closePanel(this.navId());
+		this.nav.closeDrawer(this.navId());
+	}
+	leafClasses(active) {
+		return cn("NavigationItem nav-text group/nav inline-flex min-w-0 items-center rounded-md transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", this.orientation() === "horizontal" && this.level() === 0 ? "h-(--nav-item-height) px-(--nav-item-padding-x)" : "min-h-(--nav-item-height) w-full px-(--nav-item-padding-x) py-1 text-left", "gap-(--nav-item-gap)", this.compact() && "size-(--nav-rail-item-size) justify-center gap-0 px-0 py-0 text-center", this.interactiveStateClasses(active), this.item().disabled && "pointer-events-none opacity-50", this.item().classes?.wrapper, this.itemClass());
+	}
+	triggerClasses(active) {
+		return cn("nav-trigger nav-text group/nav inline-flex min-w-0 items-center rounded-md transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", this.orientation() === "horizontal" && this.level() === 0 ? "h-(--nav-item-height) px-(--nav-item-padding-x)" : "min-h-(--nav-item-height) w-full px-(--nav-item-padding-x) py-1 text-left", "gap-(--nav-item-gap)", this.compact() && "size-(--nav-rail-item-size) justify-center gap-0 px-0 py-0 text-center", this.interactiveStateClasses(active), this.item().classes?.wrapper, this.itemClass());
+	}
+	interactiveStateClasses(active) {
+		const showsNestedActiveConnector = active && this.orientation() === "vertical" && !this.compact() && this.stairsRail();
+		if (this.orientation() === "vertical" && !this.compact()) return cn("relative isolate", "before:pointer-events-none before:absolute before:inset-y-0 before:left-2 before:right-2 before:-z-10 before:rounded-md before:border before:border-transparent before:bg-transparent before:transition-colors before:duration-200 before:content-['']", showsNestedActiveConnector && "after:pointer-events-none after:absolute after:-left-[calc(var(--nav-indent)-var(--nav-rail-offset))] after:top-1/2 after:-z-10 after:h-px after:w-[calc(var(--nav-indent)-var(--nav-rail-offset))] after:-translate-y-1/2 after:rounded-full after:bg-current/25 after:content-['']", active ? "text-foreground before:bg-accent" : "text-foreground/80 hover:text-accent-foreground hover:before:bg-accent");
+		return active ? "text-foreground bg-accent" : "text-foreground/80 hover:bg-accent hover:text-accent-foreground";
+	}
+	chevronClasses() {
+		return cn("ml-auto shrink-0 self-center text-(length:--nav-icon-size-sub) text-muted-foreground transition-transform duration-200", this.isOpen() && "rotate-90");
+	}
+	itemContainerClasses() {
+		return cn(this.orientation() === "horizontal" && this.level() === 0 ? "relative" : "w-full", this.compact() && "flex justify-center", this.straightRailClasses());
+	}
+	groupContainerClasses() {
+		return cn("w-full", this.level() > 0 && "pt-2");
+	}
+	dividerClasses() {
+		return cn(this.orientation() === "horizontal" && this.level() === 0 ? "mx-1 h-5 w-px" : "my-2 w-full px-2");
+	}
+	groupHeadingClasses() {
+		return cn("nav-heading px-(--nav-item-padding-x) pt-4 pb-1 text-muted-foreground", this.item().classes?.title);
+	}
+	childListClasses() {
+		const isGroupedBranch = this.item().type === "group" || this.item().type === "mega";
+		const usesStairsTree = this.collapseTree() === "stairs";
+		return cn("flex list-none flex-col gap-0.5 p-0", !this.compact() && "mt-0.5", this.level() >= 0 && !this.compact() && !isGroupedBranch && usesStairsTree && cn("relative ml-(--nav-rail-offset) pl-[calc(var(--nav-indent)-var(--nav-rail-offset))] before:absolute before:-top-2 before:bottom-0 before:left-0 before:w-px before:-translate-x-1/2 before:rounded-full before:content-['']", this.isActive() ? "before:bg-current/25" : "before:bg-border"));
+	}
+	showsStairsRailForChildren() {
+		return !this.compact() && this.collapseTree() === "stairs" && this.item().type !== "group" && this.item().type !== "mega";
+	}
+	showStraightRailForChildren() {
+		return !this.compact() && this.collapseTree() === "straight" && this.item().type !== "group" && this.item().type !== "mega";
+	}
+	straightRailClasses() {
+		if (!this.straightRail() || this.orientation() !== "vertical" || this.compact()) return "";
+		return cn("relative", "before:pointer-events-none before:absolute before:left-(--nav-rail-offset) before:w-0 before:-z-10 before:border-l before:border-dotted before:content-['']", this.straightRailActive() ? "before:border-primary/50" : "before:border-border/50", this.firstInBranch() ? "before:-top-[calc(var(--nav-item-height)/2+var(--spacing-base)*0.5)]" : "before:-top-0.5", this.lastInBranch() ? "before:bottom-[calc(100%-var(--nav-item-height)/2)]" : "before:-bottom-0.5");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: NavigationItemComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: NavigationItemComponent,
+		isStandalone: true,
+		selector: "li[NavigationItem]",
+		inputs: {
+			navId: {
+				classPropertyName: "navId",
+				publicName: "navId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			item: {
+				classPropertyName: "item",
+				publicName: "item",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			level: {
+				classPropertyName: "level",
+				publicName: "level",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			compact: {
+				classPropertyName: "compact",
+				publicName: "compact",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			itemClass: {
+				classPropertyName: "itemClass",
+				publicName: "itemClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeIds: {
+				classPropertyName: "activeIds",
+				publicName: "activeIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeUrl: {
+				classPropertyName: "activeUrl",
+				publicName: "activeUrl",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconTemplate: {
+				classPropertyName: "iconTemplate",
+				publicName: "iconTemplate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltipPosition: {
+				classPropertyName: "tooltipPosition",
+				publicName: "tooltip-position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapseTree: {
+				classPropertyName: "collapseTree",
+				publicName: "collapseTree",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			straightRail: {
+				classPropertyName: "straightRail",
+				publicName: "straightRail",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stairsRail: {
+				classPropertyName: "stairsRail",
+				publicName: "stairsRail",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			straightRailActive: {
+				classPropertyName: "straightRailActive",
+				publicName: "straightRailActive",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstInBranch: {
+				classPropertyName: "firstInBranch",
+				publicName: "firstInBranch",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			lastInBranch: {
+				classPropertyName: "lastInBranch",
+				publicName: "lastInBranch",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openedIds: {
+				classPropertyName: "openedIds",
+				publicName: "openedIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			openedIdsChange: "openedIdsChange",
+			itemSelected: "itemSelected"
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.role": "hostRole()",
+			"attr.data-navigation-item-key": "item().key",
+			"attr.aria-hidden": "item().type === \"spacer\" || item().type === \"divider\" ? \"true\" : null"
+		} },
+		ngImport: i0,
+		template: `
+    @switch (item().type) {
+      @case ('divider') {
+        <span class="block h-px w-full bg-border"></span>
+      }
+
+      @case ('spacer') {}
+
+      @case ('group') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">
+            <span class="block truncate">{{ item().title }}</span>
+
+            @if (item().subtitle) {
+              <span
+                class="nav-subtitle -mt-0.5 block truncate text-2xs normal-case text-muted-foreground"
+                data-navigation-group-subtitle
+              >
+                {{ item().subtitle }}
+              </span>
+            }
+          </div>
+        }
+
+        <ul
+          [class]="childListClasses()"
+          role="list"
+          [attr.aria-labelledby]="item().title ? headingId() : null"
+        >
+          <ng-container [ngTemplateOutlet]="childItems" />
+        </ul>
+      }
+
+      @case ('collapsible') {
+        <button
+          type="button"
+          [class]="triggerClasses(isActive())"
+          [attr.aria-expanded]="showChildren()"
+          [attr.aria-controls]="showChildren() ? panelId() : null"
+          [attr.aria-label]="compactLabel()"
+          [attr.title]="titleFor()"
+          [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+          [TooltipPosition]="tooltipPosition()"
+          [disabled]="item().disabled || null"
+          (click)="toggleOpen()"
+        >
+          <NavigationItemContent
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [iconTemplate]="iconTemplate()"
+          />
+
+          @if (!compact()) {
+            <Icon name="chevron_right" size="inherit" [class]="chevronClasses()" />
+          }
+        </button>
+
+        @if (showChildren()) {
+          <ul [id]="panelId()" [class]="childListClasses()" role="list">
+            <ng-container [ngTemplateOutlet]="childItems" />
+          </ul>
+        }
+      }
+
+      @case ('mega') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul
+          [class]="childListClasses()"
+          role="list"
+          [attr.aria-labelledby]="item().title ? headingId() : null"
+        >
+          <ng-container [ngTemplateOutlet]="childItems" />
+        </ul>
+      }
+
+      @default {
+        @if (isRouterItem()) {
+          <a
+            [class]="leafClasses(routerActive.isActive || isActive())"
+            [routerLink]="routerLinkFor()"
+            [queryParams]="item().queryParams ?? null"
+            [queryParamsHandling]="item().queryParamsHandling ?? null"
+            [fragment]="item().fragment ?? undefined"
+            [preserveFragment]="item().preserveFragment ?? false"
+            [target]="item().target ?? undefined"
+            [attr.rel]="relFor()"
+            routerLinkActive
+            #routerActive="routerLinkActive"
+            [routerLinkActiveOptions]="routerLinkActiveOptions()"
+            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.tabindex]="leafTabIndex()"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [item]="item()"
+              [active]="routerActive.isActive || isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </a>
+        } @else if (hrefFor()) {
+          <a
+            [class]="leafClasses(isActive())"
+            [attr.href]="hrefAttribute()"
+            [attr.target]="item().target ?? (item().externalLink ? '_blank' : null)"
+            [attr.rel]="relFor()"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.tabindex]="leafTabIndex()"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="leafClasses(isActive())"
+            [disabled]="item().disabled || null"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </button>
+        }
+      }
+    }
+    <!--
+      The recursive child list, defined once.
+
+      It was written out three times, in the group, collapsible, and mega
+      branches, 25 identical lines each. Nothing needs passing in: every binding
+      is a member of this component and so is lexically in scope here, and
+      isFirst / isLast are @for locals declared inside.
+
+      The collapsible copy used to hardcode compact="false". That is the same
+      value there: its list only renders under showChildren(), which already
+      requires compact() to be false.
+    -->
+    <ng-template #childItems>
+      @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+        <li
+          NavigationItem
+          [navId]="navId()"
+          [item]="child"
+          [level]="level() + 1"
+          [orientation]="orientation()"
+          [compact]="compact()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIds()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTemplate()"
+          [tooltip-position]="tooltipPosition()"
+          [collapseTree]="collapseTree()"
+          [straightRail]="showStraightRailForChildren()"
+          [stairsRail]="showsStairsRailForChildren()"
+          [straightRailActive]="isActive()"
+          [firstInBranch]="isFirst"
+          [lastInBranch]="isLast"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)"
+        ></li>
+      }
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: NavigationItemComponent,
+				selector: "li[NavigationItem]",
+				inputs: [
+					"navId",
+					"item",
+					"level",
+					"orientation",
+					"compact",
+					"itemClass",
+					"activeIds",
+					"activeUrl",
+					"iconTemplate",
+					"tooltip-position",
+					"collapseTree",
+					"straightRail",
+					"stairsRail",
+					"straightRailActive",
+					"firstInBranch",
+					"lastInBranch",
+					"openedIds"
+				],
+				outputs: ["openedIdsChange", "itemSelected"]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "Icon",
+				inputs: [
+					"name",
+					"class",
+					"size",
+					"fill",
+					"weight",
+					"grade",
+					"opticalSize"
+				]
+			},
+			{
+				kind: "component",
+				type: NavigationItemContentComponent,
+				selector: "NavigationItemContent",
+				inputs: [
+					"item",
+					"active",
+					"compact",
+					"orientation",
+					"level",
+					"iconTemplate"
+				]
+			},
+			{
+				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"]
+			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[Tooltip]",
+				inputs: [
+					"Tooltip",
+					"TooltipPosition",
+					"TooltipDisabled",
+					"TooltipShowDelay",
+					"TooltipHideDelay"
+				],
+				exportAs: ["Tooltip"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: NavigationItemComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "li[NavigationItem]",
+			imports: [
+				IconComponent,
+				NavigationItemContentComponent,
+				NgTemplateOutlet,
+				RouterLink,
+				RouterLinkActive,
+				TooltipDirective
+			],
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.role]": "hostRole()",
+				"[attr.data-navigation-item-key]": "item().key",
+				"[attr.aria-hidden]": "item().type === \"spacer\" || item().type === \"divider\" ? \"true\" : null"
+			},
+			template: `
+    @switch (item().type) {
+      @case ('divider') {
+        <span class="block h-px w-full bg-border"></span>
+      }
+
+      @case ('spacer') {}
+
+      @case ('group') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">
+            <span class="block truncate">{{ item().title }}</span>
+
+            @if (item().subtitle) {
+              <span
+                class="nav-subtitle -mt-0.5 block truncate text-2xs normal-case text-muted-foreground"
+                data-navigation-group-subtitle
+              >
+                {{ item().subtitle }}
+              </span>
+            }
+          </div>
+        }
+
+        <ul
+          [class]="childListClasses()"
+          role="list"
+          [attr.aria-labelledby]="item().title ? headingId() : null"
+        >
+          <ng-container [ngTemplateOutlet]="childItems" />
+        </ul>
+      }
+
+      @case ('collapsible') {
+        <button
+          type="button"
+          [class]="triggerClasses(isActive())"
+          [attr.aria-expanded]="showChildren()"
+          [attr.aria-controls]="showChildren() ? panelId() : null"
+          [attr.aria-label]="compactLabel()"
+          [attr.title]="titleFor()"
+          [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+          [TooltipPosition]="tooltipPosition()"
+          [disabled]="item().disabled || null"
+          (click)="toggleOpen()"
+        >
+          <NavigationItemContent
+            [item]="item()"
+            [active]="isActive()"
+            [compact]="compact()"
+            [orientation]="orientation()"
+            [level]="level()"
+            [iconTemplate]="iconTemplate()"
+          />
+
+          @if (!compact()) {
+            <Icon name="chevron_right" size="inherit" [class]="chevronClasses()" />
+          }
+        </button>
+
+        @if (showChildren()) {
+          <ul [id]="panelId()" [class]="childListClasses()" role="list">
+            <ng-container [ngTemplateOutlet]="childItems" />
+          </ul>
+        }
+      }
+
+      @case ('mega') {
+        @if (!compact() && item().title) {
+          <div [id]="headingId()" [class]="groupHeadingClasses()">{{ item().title }}</div>
+        }
+
+        <ul
+          [class]="childListClasses()"
+          role="list"
+          [attr.aria-labelledby]="item().title ? headingId() : null"
+        >
+          <ng-container [ngTemplateOutlet]="childItems" />
+        </ul>
+      }
+
+      @default {
+        @if (isRouterItem()) {
+          <a
+            [class]="leafClasses(routerActive.isActive || isActive())"
+            [routerLink]="routerLinkFor()"
+            [queryParams]="item().queryParams ?? null"
+            [queryParamsHandling]="item().queryParamsHandling ?? null"
+            [fragment]="item().fragment ?? undefined"
+            [preserveFragment]="item().preserveFragment ?? false"
+            [target]="item().target ?? undefined"
+            [attr.rel]="relFor()"
+            routerLinkActive
+            #routerActive="routerLinkActive"
+            [routerLinkActiveOptions]="routerLinkActiveOptions()"
+            [attr.aria-current]="routerActive.isActive || isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.tabindex]="leafTabIndex()"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [item]="item()"
+              [active]="routerActive.isActive || isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </a>
+        } @else if (hrefFor()) {
+          <a
+            [class]="leafClasses(isActive())"
+            [attr.href]="hrefAttribute()"
+            [attr.target]="item().target ?? (item().externalLink ? '_blank' : null)"
+            [attr.rel]="relFor()"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-disabled]="item().disabled || null"
+            [attr.tabindex]="leafTabIndex()"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [Tooltip]="compact() ? (titleFor() ?? '') : ''"
+            [TooltipPosition]="tooltipPosition()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </a>
+        } @else {
+          <button
+            type="button"
+            [class]="leafClasses(isActive())"
+            [disabled]="item().disabled || null"
+            [attr.aria-current]="isActive() ? 'page' : null"
+            [attr.aria-label]="compactLabel()"
+            [attr.title]="titleFor()"
+            [attr.role]="itemRole()"
+            [attr.data-navigation-root-item]="isHorizontalRoot() ? 'true' : null"
+            (click)="selectItem($event)"
+          >
+            <NavigationItemContent
+              [item]="item()"
+              [active]="isActive()"
+              [compact]="compact()"
+              [orientation]="orientation()"
+              [level]="level()"
+              [iconTemplate]="iconTemplate()"
+            />
+          </button>
+        }
+      }
+    }
+    <!--
+      The recursive child list, defined once.
+
+      It was written out three times, in the group, collapsible, and mega
+      branches, 25 identical lines each. Nothing needs passing in: every binding
+      is a member of this component and so is lexically in scope here, and
+      isFirst / isLast are @for locals declared inside.
+
+      The collapsible copy used to hardcode compact="false". That is the same
+      value there: its list only renders under showChildren(), which already
+      requires compact() to be false.
+    -->
+    <ng-template #childItems>
+      @for (child of item().children; track child.key; let isFirst = $first; let isLast = $last) {
+        <li
+          NavigationItem
+          [navId]="navId()"
+          [item]="child"
+          [level]="level() + 1"
+          [orientation]="orientation()"
+          [compact]="compact()"
+          [itemClass]="itemClass()"
+          [activeIds]="activeIds()"
+          [activeUrl]="activeUrl()"
+          [iconTemplate]="iconTemplate()"
+          [tooltip-position]="tooltipPosition()"
+          [collapseTree]="collapseTree()"
+          [straightRail]="showStraightRailForChildren()"
+          [stairsRail]="showsStairsRailForChildren()"
+          [straightRailActive]="isActive()"
+          [firstInBranch]="isFirst"
+          [lastInBranch]="isLast"
+          [openedIds]="openedIds()"
+          (openedIdsChange)="openedIdsChange.emit($event)"
+          (itemSelected)="itemSelected.emit($event)"
+        ></li>
+      }
+    </ng-template>
+  `
+		}]
+	}],
+	propDecorators: {
+		navId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navId",
+				required: false
+			}]
+		}],
+		item: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "item",
+				required: true
+			}]
+		}],
+		level: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "level",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		itemClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemClass",
+				required: false
+			}]
+		}],
+		activeIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeIds",
+				required: false
+			}]
+		}],
+		activeUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeUrl",
+				required: false
+			}]
+		}],
+		iconTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconTemplate",
+				required: false
+			}]
+		}],
+		tooltipPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip-position",
+				required: false
+			}]
+		}],
+		collapseTree: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseTree",
+				required: false
+			}]
+		}],
+		straightRail: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "straightRail",
+				required: false
+			}]
+		}],
+		stairsRail: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stairsRail",
+				required: false
+			}]
+		}],
+		straightRailActive: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "straightRailActive",
+				required: false
+			}]
+		}],
+		firstInBranch: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstInBranch",
+				required: false
+			}]
+		}],
+		lastInBranch: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lastInBranch",
+				required: false
+			}]
+		}],
+		openedIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openedIds",
+				required: false
+			}]
+		}],
+		openedIdsChange: [{
+			type: i0.Output,
+			args: ["openedIdsChange"]
+		}],
+		itemSelected: [{
+			type: i0.Output,
+			args: ["itemSelected"]
+		}]
+	}
+});
+export { navigationPanelId as n, NavigationItemContentComponent as r, NavigationItemComponent as t };