@ojiepermana/angular 22.1.14 → 22.2.1

package/fesm2022/ojiepermana-angular-navigation-navigation-horizontal.component-B5D7yXfb.mjs

@@ -0,0 +1,662 @@
+import { n as navigationPanelId, r as NavigationItemContentComponent, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-CUb68MZH.mjs";
+import { t as NavigationEntryGridComponent } from "./ojiepermana-angular-navigation-navigation-entry-grid.component-YIz0IsIb.mjs";
+import * as i0 from "@angular/core";
+import { Component, ElementRef, Injector, afterNextRender, computed, effect, inject, input, output, signal } from "@angular/core";
+import { cn } from "@ojiepermana/angular/component/utils/core";
+import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { DOCUMENT, NgTemplateOutlet } from "@angular/common";
+var NavigationHorizontalComponent = class NavigationHorizontalComponent {
+	nav = inject(NAVIGATION_ADAPTER);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	document = inject(DOCUMENT);
+	navId = input("default", ...ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	position = input("top", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	typeStyle = input("flat", ...ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []);
+	compact = input(false, ...ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []);
+	itemClass = input("", ...ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []);
+	groupClass = input("", ...ngDevMode ? [{ debugName: "groupClass" }] : /* 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 */ []);
+	collapseTree = input("stairs", ...ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []);
+	openedIds = input([], ...ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []);
+	openedIdsChange = output();
+	itemSelected = output();
+	isBorderRail = computed(() => this.typeStyle() === "border-rail", ...ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []);
+	isBottom = computed(() => this.position() === "bottom", ...ngDevMode ? [{ debugName: "isBottom" }] : /* istanbul ignore next */ []);
+	navItemClass = computed(() => cn(this.itemClass(), this.isBorderRail() && "rounded-none hover:bg-transparent hover:text-primary"), ...ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []);
+	listClasses = computed(() => cn("flex h-full min-w-0 items-center justify-center gap-1 list-none p-0"), ...ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []);
+	openPanelKey = computed(() => this.nav.currentPanelKey(this.navId()), ...ngDevMode ? [{ debugName: "openPanelKey" }] : /* istanbul ignore next */ []);
+	itemState = computed(() => {
+		const activeIds = this.activeIds();
+		const activeUrl = this.activeUrl();
+		const navId = this.navId();
+		const openKey = this.openPanelKey();
+		return new Map(this.items().map((item) => {
+			const active = this.nav.isItemActive(item, activeIds, activeUrl);
+			const open = openKey === item.key;
+			return [item, {
+				active,
+				open,
+				panelId: navigationPanelId(navId, item),
+				triggerClasses: this.computeTriggerClasses(item, active, open)
+			}];
+		}));
+	}, ...ngDevMode ? [{ debugName: "itemState" }] : /* istanbul ignore next */ []);
+	isItemActive(item) {
+		return this.itemState().get(item)?.active ?? false;
+	}
+	isPanelOpen(item) {
+		return this.itemState().get(item)?.open ?? false;
+	}
+	panelIdFor(item) {
+		return this.itemState().get(item)?.panelId ?? navigationPanelId(this.navId(), item);
+	}
+	togglePanel(item) {
+		if (!this.isPanelOpen(item)) this.measurePanelPlacement();
+		this.nav.togglePanel(this.navId(), item);
+	}
+	constructor() {
+		effect((onCleanup) => {
+			if (this.openPanelKey() === null) return;
+			const view = this.document.defaultView;
+			const onDocumentClick = (event) => this.closeOnOutsideClick(event);
+			const onResize = () => this.measurePanelPlacement();
+			this.document.addEventListener("click", onDocumentClick);
+			view?.addEventListener("resize", onResize);
+			onCleanup(() => {
+				this.document.removeEventListener("click", onDocumentClick);
+				view?.removeEventListener("resize", onResize);
+			});
+		});
+	}
+	closeOnOutsideClick(event) {
+		const target = event.target;
+		if (target && !this.host.nativeElement.contains(target)) this.nav.closePanel(this.navId());
+	}
+	panelPlacement = signal(null, ...ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []);
+	measurePanelPlacement() {
+		const hostEl = this.host.nativeElement;
+		let container = hostEl.closest("[data-navigation-id]")?.parentElement ?? hostEl.parentElement;
+		while (container && container.getBoundingClientRect().width <= 0 && container.parentElement) container = container.parentElement;
+		const containerRect = (container ?? hostEl).getBoundingClientRect();
+		const hostRect = hostEl.getBoundingClientRect();
+		if (containerRect.width <= 0) {
+			this.panelPlacement.set(null);
+			return;
+		}
+		this.panelPlacement.set({
+			left: containerRect.left - hostRect.left,
+			width: containerRect.width
+		});
+	}
+	compactLabel(item) {
+		return this.nav.compactLabel(item, this.compact());
+	}
+	titleFor(item) {
+		return this.nav.titleFor(item, this.compact());
+	}
+	groupContainerClasses(item) {
+		return cn(this.groupClass(), item.classes?.container);
+	}
+	triggerClasses(item) {
+		return this.itemState().get(item)?.triggerClasses ?? "";
+	}
+	computeTriggerClasses(item, active, open) {
+		return cn("nav-trigger nav-text group/nav inline-flex min-w-0 items-center gap-(--nav-item-gap) rounded-md transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", "h-(--nav-item-height) px-(--nav-item-padding-x)", this.compact() && "size-(--nav-rail-item-size) justify-center gap-0 px-0", this.isBorderRail() ? open || active ? "rounded-none text-primary" : "rounded-none text-foreground/80 hover:text-primary" : active ? "bg-accent text-foreground" : "text-foreground/80 hover:bg-accent hover:text-accent-foreground", item.classes?.wrapper, this.itemClass());
+	}
+	panelClasses() {
+		return cn("absolute z-50 bg-popover text-popover-foreground shadow-lg", "max-h-[calc(100dvh-5rem)] overflow-x-hidden overflow-y-auto overscroll-contain", this.isBottom() ? "bottom-full" : "top-full", !this.panelPlacement() && "inset-x-0", this.isBorderRail() ? "rounded-none border-y border-border" : cn("rounded-xl border border-[hsl(var(--border)/var(--section-border-opacity))]", this.isBottom() ? "rounded-b-none" : "rounded-t-none"));
+	}
+	onKeydown(event) {
+		if (event.key === "Escape") {
+			const panelKey = this.nav.currentPanelKey(this.navId());
+			this.nav.closePanel(this.navId());
+			this.focusOpenPanelTrigger(panelKey);
+			return;
+		}
+		const rootItems = this.rootFocusItems();
+		if (rootItems.length === 0) return;
+		const currentIndex = rootItems.indexOf(document.activeElement);
+		if (currentIndex === -1) return;
+		if (event.key === (this.isBottom() ? "ArrowUp" : "ArrowDown")) {
+			const currentItem = rootItems[currentIndex];
+			if (currentItem.getAttribute("aria-haspopup") === "menu") {
+				event.preventDefault();
+				currentItem.click();
+				afterNextRender({ read: () => this.focusFirstPanelItem(this.nav.currentPanelKey(this.navId())) }, { injector: this.injector });
+			}
+			return;
+		}
+		if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+			event.preventDefault();
+			rootItems[(currentIndex + (event.key === "ArrowRight" ? 1 : -1) + rootItems.length) % rootItems.length]?.focus();
+		}
+	}
+	onPanelKeydown(event) {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		const panelKey = this.nav.currentPanelKey(this.navId());
+		this.nav.closePanel(this.navId());
+		this.focusOpenPanelTrigger(panelKey);
+	}
+	rootFocusItems() {
+		return Array.from(this.host.nativeElement.querySelectorAll("[data-navigation-root-item=\"true\"]"));
+	}
+	focusOpenPanelTrigger(panelKey) {
+		if (!panelKey) return;
+		this.host.nativeElement.querySelector(`[data-navigation-item-key="${panelKey}"] [data-navigation-root-item="true"]`)?.focus();
+	}
+	focusFirstPanelItem(panelKey) {
+		if (!panelKey) return;
+		(this.host.nativeElement.querySelector(`[data-navigation-panel="${panelKey}"]`)?.querySelector("a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])"))?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: NavigationHorizontalComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: NavigationHorizontalComponent,
+		isStandalone: true,
+		selector: "NavigationHorizontal",
+		inputs: {
+			navId: {
+				classPropertyName: "navId",
+				publicName: "navId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			typeStyle: {
+				classPropertyName: "typeStyle",
+				publicName: "typeStyle",
+				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
+			},
+			groupClass: {
+				classPropertyName: "groupClass",
+				publicName: "groupClass",
+				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
+			},
+			collapseTree: {
+				classPropertyName: "collapseTree",
+				publicName: "collapseTree",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openedIds: {
+				classPropertyName: "openedIds",
+				publicName: "openedIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			openedIdsChange: "openedIdsChange",
+			itemSelected: "itemSelected"
+		},
+		host: { classAttribute: "relative block h-full w-full" },
+		ngImport: i0,
+		template: `
+    <ul [class]="listClasses()" role="menubar" tabindex="-1" (keydown)="onKeydown($event)">
+      @for (item of items(); track item.key) {
+        @switch (item.type) {
+          @case ('group') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @case ('collapsible') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @case ('mega') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @default {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="item"
+              [level]="0"
+              [orientation]="'horizontal'"
+              [compact]="compact()"
+              [itemClass]="navItemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"
+            ></li>
+          }
+        }
+      }
+    </ul>
+
+    <ng-template #branchTemplate let-item>
+      <li
+        role="none"
+        [class]="groupContainerClasses(item)"
+        [attr.data-navigation-item-key]="item.key"
+      >
+        <button
+          type="button"
+          role="menuitem"
+          data-navigation-root-item="true"
+          [class]="triggerClasses(item)"
+          [attr.aria-expanded]="isPanelOpen(item)"
+          [attr.aria-controls]="isPanelOpen(item) ? panelIdFor(item) : null"
+          [attr.aria-haspopup]="'menu'"
+          [attr.aria-label]="compactLabel(item)"
+          [attr.title]="titleFor(item)"
+          [disabled]="item.disabled || null"
+          (click)="togglePanel(item)"
+        >
+          <NavigationItemContent
+            [item]="item"
+            [active]="isItemActive(item)"
+            [compact]="compact()"
+            [orientation]="'horizontal'"
+            [level]="0"
+            [iconTemplate]="iconTemplate()"
+          />
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="panelIdFor(item)"
+            role="menu"
+            tabindex="-1"
+            [class]="panelClasses()"
+            [style.left.px]="panelPlacement()?.left"
+            [style.width.px]="panelPlacement()?.width"
+            [attr.data-navigation-panel]="item.key"
+            (keydown)="onPanelKeydown($event)"
+          >
+            <NavigationEntryGrid
+              [navId]="navId()"
+              [branch]="item"
+              [typeStyle]="typeStyle()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"
+            />
+          </div>
+        }
+      </li>
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: NavigationEntryGridComponent,
+				selector: "NavigationEntryGrid",
+				inputs: [
+					"navId",
+					"branch",
+					"typeStyle",
+					"itemClass",
+					"activeIds",
+					"activeUrl",
+					"iconTemplate",
+					"collapseTree",
+					"openedIds"
+				],
+				outputs: ["openedIdsChange", "itemSelected"]
+			},
+			{
+				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: NavigationItemContentComponent,
+				selector: "NavigationItemContent",
+				inputs: [
+					"item",
+					"active",
+					"compact",
+					"orientation",
+					"level",
+					"iconTemplate"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: NavigationHorizontalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "NavigationHorizontal",
+			imports: [
+				NgTemplateOutlet,
+				NavigationEntryGridComponent,
+				NavigationItemComponent,
+				NavigationItemContentComponent
+			],
+			host: { class: "relative block h-full w-full" },
+			template: `
+    <ul [class]="listClasses()" role="menubar" tabindex="-1" (keydown)="onKeydown($event)">
+      @for (item of items(); track item.key) {
+        @switch (item.type) {
+          @case ('group') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @case ('collapsible') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @case ('mega') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @default {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="item"
+              [level]="0"
+              [orientation]="'horizontal'"
+              [compact]="compact()"
+              [itemClass]="navItemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"
+            ></li>
+          }
+        }
+      }
+    </ul>
+
+    <ng-template #branchTemplate let-item>
+      <li
+        role="none"
+        [class]="groupContainerClasses(item)"
+        [attr.data-navigation-item-key]="item.key"
+      >
+        <button
+          type="button"
+          role="menuitem"
+          data-navigation-root-item="true"
+          [class]="triggerClasses(item)"
+          [attr.aria-expanded]="isPanelOpen(item)"
+          [attr.aria-controls]="isPanelOpen(item) ? panelIdFor(item) : null"
+          [attr.aria-haspopup]="'menu'"
+          [attr.aria-label]="compactLabel(item)"
+          [attr.title]="titleFor(item)"
+          [disabled]="item.disabled || null"
+          (click)="togglePanel(item)"
+        >
+          <NavigationItemContent
+            [item]="item"
+            [active]="isItemActive(item)"
+            [compact]="compact()"
+            [orientation]="'horizontal'"
+            [level]="0"
+            [iconTemplate]="iconTemplate()"
+          />
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="panelIdFor(item)"
+            role="menu"
+            tabindex="-1"
+            [class]="panelClasses()"
+            [style.left.px]="panelPlacement()?.left"
+            [style.width.px]="panelPlacement()?.width"
+            [attr.data-navigation-panel]="item.key"
+            (keydown)="onPanelKeydown($event)"
+          >
+            <NavigationEntryGrid
+              [navId]="navId()"
+              [branch]="item"
+              [typeStyle]="typeStyle()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"
+            />
+          </div>
+        }
+      </li>
+    </ng-template>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		navId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navId",
+				required: false
+			}]
+		}],
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		typeStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "typeStyle",
+				required: false
+			}]
+		}],
+		compact: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compact",
+				required: false
+			}]
+		}],
+		itemClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemClass",
+				required: false
+			}]
+		}],
+		groupClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupClass",
+				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
+			}]
+		}],
+		collapseTree: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseTree",
+				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 { NavigationHorizontalComponent };