@ojiepermana/angular 22.2.0 → 22.2.2

package/fesm2022/{ojiepermana-angular-navigation-navigation-entry-grid.component-mpK9Ar08.mjs → ojiepermana-angular-navigation-navigation-entry-grid.component-zBCXDa4c.mjs}

@@ -1,13 +1,17 @@
-import { n as navigationPanelId, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs";
+import { n as navigationPanelId, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-DiGOcizS.mjs";
 import * as i0 from "@angular/core";
 import { Component, computed, inject, input, output, signal } from "@angular/core";
-import { RouterLink, RouterLinkActive } from "@angular/router";
+import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { cn } from "@ojiepermana/angular/component/utils/core";
-import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
+import { NAVIGATION_ADAPTER, NAVIGATION_ROUTE_CONTEXT_ADAPTER } from "@ojiepermana/angular/navigation/core";
 import { NgTemplateOutlet } from "@angular/common";
-import { IconComponent } from "@ojiepermana/angular/component/icon";
+import { LucideChevronRight } from "@lucide/angular";
+import { IconComponent, provideIcons } from "@ojiepermana/angular/component/icon";
 var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 	nav = inject(NAVIGATION_ADAPTER);
+	routeContext = inject(NAVIGATION_ROUTE_CONTEXT_ADAPTER);
+	router = inject(Router, { optional: true });
+	activatedRoute = inject(ActivatedRoute, { optional: true });
 	navId = input("default", ...ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []);
 	branch = input.required(...ngDevMode ? [{ debugName: "branch" }] : /* istanbul ignore next */ []);
 	typeStyle = input("flat", ...ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []);
@@ -28,12 +32,20 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 		const navId = this.navId();
 		return new Map(this.branch().children.map((child) => [child, {
 			active: this.nav.isItemActive(child, activeIds, activeUrl),
+			routeActive: this.nav.isRouterItem(child) && this.isRouteActive(child),
 			panelId: navigationPanelId(navId, child)
 		}]));
 	}, ...ngDevMode ? [{ debugName: "entryState" }] : /* istanbul ignore next */ []);
 	isItemActive(item) {
 		return this.entryState().get(item)?.active ?? this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
 	}
+	isRouterEntryActive(item) {
+		return (this.entryState().get(item)?.routeActive ?? this.isRouteActive(item)) || this.isItemActive(item);
+	}
+	isRouteActive(item) {
+		if (item.disabled || !this.router?.lastSuccessfulNavigation()) return false;
+		return this.routeContext.isItemRouteActive(item, null, this.activatedRoute);
+	}
 	panelIdFor(item) {
 		return this.entryState().get(item)?.panelId ?? navigationPanelId(this.navId(), item);
 	}
@@ -73,9 +85,6 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 	relFor(item) {
 		return this.nav.relFor(item);
 	}
-	routerLinkActiveOptions(item) {
-		return this.nav.routerLinkActiveOptions(item);
-	}
 	iconContext(item, active) {
 		return this.nav.iconContext(item, active, 1, "horizontal");
 	}
@@ -103,14 +112,14 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 		return cn("nav-subtitle mt-0.5 block truncate text-muted-foreground", item.classes?.subtitle);
 	}
 	entryChevronClasses(item) {
-		return cn("shrink-0 self-center text-(length:--nav-icon-size-sub) text-muted-foreground transition-transform duration-200", this.isEntryOpen(item) && "rotate-90");
+		return cn("shrink-0 self-center text-(length:--nav-icon-size-sub) text-muted-foreground transition-transform duration-normal", this.isEntryOpen(item) && "rotate-90");
 	}
 	nestedListClasses() {
 		return cn("relative mt-1 flex list-none flex-col gap-0.5 p-0 pl-[calc((var(--nav-entry-box-size)-var(--nav-icon-size))/2)] before:pointer-events-none before:absolute before:inset-y-0 before:left-[calc(var(--nav-item-padding-x)+var(--nav-entry-box-size)/2)] before:w-0 before:border-l before:content-['']", this.isBorderRail() ? "before:border-dashed before:border-border/40" : "before:border-[hsl(var(--border)/var(--section-border-opacity))]");
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationEntryGridComponent,
 		deps: [],
@@ -118,7 +127,7 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: NavigationEntryGridComponent,
 		isStandalone: true,
 		selector: "NavigationEntryGrid",
@@ -192,6 +201,7 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 			itemSelected: "itemSelected"
 		},
 		host: { classAttribute: "contents" },
+		providers: [provideIcons(LucideChevronRight)],
 		ngImport: i0,
 		template: `
     @let branchItem = branch();
@@ -232,7 +242,7 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
                       [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }"
                     />
                     <Icon
-                      name="chevron_right"
+                      name="chevron-right"
                       size="inherit"
                       [class]="entryChevronClasses(child)"
                     />
@@ -264,32 +274,25 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
               } @else {
                 <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
                   @if (isRouterItem(child)) {
+                    @let entryActive = isRouterEntryActive(child);
                     <a
                       role="menuitem"
                       data-navigation-flyout-entry="true"
-                      [class]="entryClasses(child, routerActive.isActive || isItemActive(child))"
-                      [routerLink]="child.link ?? null"
+                      [class]="entryClasses(child, entryActive)"
+                      [routerLink]="child.disabled ? null : (child.link ?? null)"
                       [queryParams]="child.queryParams ?? null"
                       [queryParamsHandling]="child.queryParamsHandling ?? null"
                       [fragment]="child.fragment ?? undefined"
                       [preserveFragment]="child.preserveFragment ?? false"
                       [target]="child.target ?? undefined"
                       [attr.rel]="relFor(child)"
-                      routerLinkActive
-                      #routerActive="routerLinkActive"
-                      [routerLinkActiveOptions]="routerLinkActiveOptions(child)"
-                      [attr.aria-current]="
-                        routerActive.isActive || isItemActive(child) ? 'page' : null
-                      "
+                      [attr.aria-current]="entryActive ? 'page' : null"
                       [attr.aria-disabled]="child.disabled || null"
                       (click)="selectEntry(child, $event)"
                     >
                       <ng-container
                         [ngTemplateOutlet]="entryContent"
-                        [ngTemplateOutletContext]="{
-                          $implicit: child,
-                          active: routerActive.isActive || isItemActive(child),
-                        }"
+                        [ngTemplateOutletContext]="{ $implicit: child, active: entryActive }"
                       />
                     </a>
                   } @else if (hrefFor(child)) {
@@ -381,12 +384,7 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
               [ngTemplateOutletContext]="iconContext(child, active)"
             />
           } @else {
-            <Icon
-              [name]="child.icon"
-              size="inherit"
-              [fill]="1"
-              [class]="entryIconGlyphClasses(child)"
-            />
+            <Icon [name]="child.icon" size="inherit" [class]="entryIconGlyphClasses(child)" />
           }
         } @else {
           <span
@@ -446,18 +444,6 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 					"routerLink"
 				]
 			},
-			{
-				kind: "directive",
-				type: RouterLinkActive,
-				selector: "[routerLinkActive]",
-				inputs: [
-					"routerLinkActiveOptions",
-					"ariaCurrentWhenActive",
-					"routerLinkActive"
-				],
-				outputs: ["isActiveChange"],
-				exportAs: ["routerLinkActive"]
-			},
 			{
 				kind: "component",
 				type: IconComponent,
@@ -466,10 +452,8 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 					"name",
 					"class",
 					"size",
-					"fill",
-					"weight",
-					"grade",
-					"opticalSize"
+					"strokeWidth",
+					"label"
 				]
 			},
 			{
@@ -502,7 +486,7 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationEntryGridComponent,
 	decorators: [{
@@ -512,10 +496,10 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				NgTemplateOutlet,
 				RouterLink,
-				RouterLinkActive,
 				IconComponent,
 				NavigationItemComponent
 			],
+			providers: [provideIcons(LucideChevronRight)],
 			host: { class: "contents" },
 			template: `
     @let branchItem = branch();
@@ -556,7 +540,7 @@ i0.ɵɵngDeclareClassMetadata({
                       [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }"
                     />
                     <Icon
-                      name="chevron_right"
+                      name="chevron-right"
                       size="inherit"
                       [class]="entryChevronClasses(child)"
                     />
@@ -588,32 +572,25 @@ i0.ɵɵngDeclareClassMetadata({
               } @else {
                 <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
                   @if (isRouterItem(child)) {
+                    @let entryActive = isRouterEntryActive(child);
                     <a
                       role="menuitem"
                       data-navigation-flyout-entry="true"
-                      [class]="entryClasses(child, routerActive.isActive || isItemActive(child))"
-                      [routerLink]="child.link ?? null"
+                      [class]="entryClasses(child, entryActive)"
+                      [routerLink]="child.disabled ? null : (child.link ?? null)"
                       [queryParams]="child.queryParams ?? null"
                       [queryParamsHandling]="child.queryParamsHandling ?? null"
                       [fragment]="child.fragment ?? undefined"
                       [preserveFragment]="child.preserveFragment ?? false"
                       [target]="child.target ?? undefined"
                       [attr.rel]="relFor(child)"
-                      routerLinkActive
-                      #routerActive="routerLinkActive"
-                      [routerLinkActiveOptions]="routerLinkActiveOptions(child)"
-                      [attr.aria-current]="
-                        routerActive.isActive || isItemActive(child) ? 'page' : null
-                      "
+                      [attr.aria-current]="entryActive ? 'page' : null"
                       [attr.aria-disabled]="child.disabled || null"
                       (click)="selectEntry(child, $event)"
                     >
                       <ng-container
                         [ngTemplateOutlet]="entryContent"
-                        [ngTemplateOutletContext]="{
-                          $implicit: child,
-                          active: routerActive.isActive || isItemActive(child),
-                        }"
+                        [ngTemplateOutletContext]="{ $implicit: child, active: entryActive }"
                       />
                     </a>
                   } @else if (hrefFor(child)) {
@@ -705,12 +682,7 @@ i0.ɵɵngDeclareClassMetadata({
               [ngTemplateOutletContext]="iconContext(child, active)"
             />
           } @else {
-            <Icon
-              [name]="child.icon"
-              size="inherit"
-              [fill]="1"
-              [class]="entryIconGlyphClasses(child)"
-            />
+            <Icon [name]="child.icon" size="inherit" [class]="entryIconGlyphClasses(child)" />
           }
         } @else {
           <span

package/fesm2022/{ojiepermana-angular-navigation-navigation-flyout-menu.component-BPgH7FJk.mjs → ojiepermana-angular-navigation-navigation-flyout-menu.component-DYkYIIHd.mjs}

@@ -1,11 +1,12 @@
-import { r as NavigationItemContentComponent, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs";
-import { t as NavigationEntryGridComponent } from "./ojiepermana-angular-navigation-navigation-entry-grid.component-mpK9Ar08.mjs";
+import { r as NavigationItemContentComponent, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-DiGOcizS.mjs";
+import { t as NavigationEntryGridComponent } from "./ojiepermana-angular-navigation-navigation-entry-grid.component-zBCXDa4c.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 } from "@angular/common";
-import { IconComponent } from "@ojiepermana/angular/component/icon";
+import { LucideChevronRight, LucideMenu } from "@lucide/angular";
+import { IconComponent, provideIcons } from "@ojiepermana/angular/component/icon";
 var NavigationFlyoutMenuComponent = class NavigationFlyoutMenuComponent {
 	nav = inject(NAVIGATION_ADAPTER);
 	host = inject(ElementRef);
@@ -175,7 +176,7 @@ var NavigationFlyoutMenuComponent = class NavigationFlyoutMenuComponent {
 		return cn("nav-trigger nav-text group/nav inline-flex h-full min-h-(--nav-item-height) min-w-0 items-center gap-(--nav-item-gap) rounded-md px-(--nav-item-padding-x) transition-colors", this.isBottom() ? "rounded-t-none" : "rounded-b-none", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", this.isBorderRail() ? open || active ? "rounded-none text-primary" : "rounded-none text-foreground/80 hover:text-primary" : open ? "bg-accent text-foreground" : active ? "text-foreground hover:bg-accent hover:text-accent-foreground" : "text-foreground/80 hover:bg-accent hover:text-accent-foreground", item.classes?.wrapper, this.itemClass());
 	}
 	tabChevronClasses(item) {
-		return cn("shrink-0 self-center text-(length:--nav-icon-size-sub) text-current transition-transform duration-200", this.isBranchOpen(item) && "rotate-90");
+		return cn("shrink-0 self-center text-(length:--nav-icon-size-sub) text-current transition-transform duration-normal", this.isBranchOpen(item) && "rotate-90");
 	}
 	onRowKeydown(event) {
 		if (event.key !== "ArrowRight" && event.key !== "ArrowLeft" && event.key !== "ArrowDown") return;
@@ -199,7 +200,7 @@ var NavigationFlyoutMenuComponent = class NavigationFlyoutMenuComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationFlyoutMenuComponent,
 		deps: [],
@@ -207,7 +208,7 @@ var NavigationFlyoutMenuComponent = class NavigationFlyoutMenuComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: NavigationFlyoutMenuComponent,
 		isStandalone: true,
 		selector: "NavigationFlyoutMenu",
@@ -368,8 +369,9 @@ var NavigationFlyoutMenuComponent = class NavigationFlyoutMenuComponent {
 			listeners: { "keydown.escape": "onEscape($event)" },
 			properties: { "class": "hostClasses()" }
 		},
+		providers: [provideIcons(LucideChevronRight, LucideMenu)],
 		ngImport: i0,
-		template: "<button\n  type=\"button\"\n  data-navigation-flyout-trigger=\"true\"\n  [class]=\"triggerClasses()\"\n  aria-haspopup=\"menu\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n  [attr.aria-label]=\"showIconOnly() ? label() : null\"\n  [attr.title]=\"showIconOnly() ? label() : null\"\n  (click)=\"toggleFlyout()\"\n>\n  @if (showIconOnly()) {\n    <Icon\n      [name]=\"triggerIcon() ?? 'menu'\"\n      size=\"inherit\"\n      [fill]=\"1\"\n      class=\"text-(length:--nav-icon-size) text-current\"\n    />\n  } @else {\n    @if (iconPosition() === 'start' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        [fill]=\"1\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n\n    <span class=\"truncate\">{{ label() }}</span>\n\n    @if (iconPosition() === 'end' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        [fill]=\"1\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n  }\n</button>\n\n@if (isOpen()) {\n  <div\n    [id]=\"panelId()\"\n    data-navigation-flyout-panel=\"true\"\n    [attr.data-navigation-flyout-floating]=\"floating() ? 'true' : null\"\n    [class]=\"panelWrapperClasses()\"\n    [style.left.px]=\"floating() ? null : panelPlacement()?.left\"\n    [style.top.px]=\"floating() || isBottom() ? null : panelPlacement()?.top\"\n    [style.bottom.px]=\"!floating() && isBottom() ? panelPlacement()?.bottom : null\"\n    [style.width.px]=\"floating() ? null : panelPlacement()?.width\"\n  >\n    <div\n      [attr.data-navigation-flyout-floating-card]=\"floating() ? 'true' : null\"\n      [class]=\"panelCardClasses()\"\n    >\n      <div data-navigation-flyout-menu-layout=\"true\" [class]=\"menuClasses()\">\n        <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:\n                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)\n                 di bawah bar yang ikut scroll. -->\n        <div data-navigation-flyout-bar=\"true\" [class]=\"barRowClasses()\">\n          <ng-content select=\"NavigationHeader\" />\n\n          <ul\n            role=\"menu\"\n            tabindex=\"-1\"\n            data-navigation-flyout-row=\"true\"\n            [class]=\"rowClasses()\"\n            [attr.aria-label]=\"label()\"\n            (keydown)=\"onRowKeydown($event)\"\n          >\n            @for (item of items(); track item.key) {\n              @switch (item.type) {\n                @case ('divider') {\n                  <li role=\"separator\" class=\"mx-1 h-5 w-px bg-border\"></li>\n                }\n                @case ('spacer') {\n                  <li role=\"none\" aria-hidden=\"true\" class=\"flex-1\"></li>\n                }\n                @default {\n                  @if (item.children.length > 0) {\n                    <li\n                      role=\"none\"\n                      [class]=\"groupContainerClasses(item)\"\n                      [attr.data-navigation-item-key]=\"item.key\"\n                    >\n                      <button\n                        type=\"button\"\n                        role=\"menuitem\"\n                        data-navigation-flyout-tab=\"true\"\n                        [class]=\"tabClasses(item)\"\n                        [attr.aria-expanded]=\"isBranchOpen(item)\"\n                        [attr.aria-controls]=\"isBranchOpen(item) ? panelContentId() : null\"\n                        [disabled]=\"item.disabled || null\"\n                        (click)=\"openBranch(item)\"\n                      >\n                        <NavigationItemContent\n                          [item]=\"item\"\n                          [active]=\"isItemActive(item)\"\n                          [compact]=\"false\"\n                          [orientation]=\"'horizontal'\"\n                          [level]=\"0\"\n                          [iconTemplate]=\"iconTemplate()\"\n                        />\n                        <Icon\n                          name=\"chevron_right\"\n                          size=\"inherit\"\n                          [class]=\"tabChevronClasses(item)\"\n                        />\n                      </button>\n                    </li>\n                  } @else {\n                    <li\n                      NavigationItem\n                      [navId]=\"navId()\"\n                      [item]=\"item\"\n                      [level]=\"0\"\n                      [orientation]=\"'horizontal'\"\n                      [compact]=\"false\"\n                      [itemClass]=\"navItemClass()\"\n                      [activeIds]=\"activeIds()\"\n                      [activeUrl]=\"activeUrl()\"\n                      [iconTemplate]=\"iconTemplate()\"\n                      [collapseTree]=\"collapseTree()\"\n                      [openedIds]=\"openedIds()\"\n                      (openedIdsChange)=\"openedIdsChange.emit($event)\"\n                      (itemSelected)=\"itemSelected.emit($event)\"\n                    ></li>\n                  }\n                }\n              }\n            }\n          </ul>\n\n          <ng-content select=\"NavigationFooter\" />\n        </div>\n\n        <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->\n        <div\n          [id]=\"panelContentId()\"\n          data-navigation-flyout-scroll=\"true\"\n          [attr.role]=\"activeBranch() ? 'menu' : null\"\n          [attr.aria-label]=\"activeBranch()?.title || null\"\n          [class]=\"scrollRegionClasses()\"\n        >\n          @if (activeBranch(); as branch) {\n            <NavigationEntryGrid\n              [navId]=\"navId()\"\n              [branch]=\"branch\"\n              [typeStyle]=\"typeStyle()\"\n              [itemClass]=\"itemClass()\"\n              [activeIds]=\"activeIds()\"\n              [activeUrl]=\"activeUrl()\"\n              [iconTemplate]=\"iconTemplate()\"\n              [collapseTree]=\"collapseTree()\"\n              [openedIds]=\"openedIds()\"\n              (openedIdsChange)=\"openedIdsChange.emit($event)\"\n              (itemSelected)=\"itemSelected.emit($event)\"\n            />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n",
+		template: "<button\n  type=\"button\"\n  data-navigation-flyout-trigger=\"true\"\n  [class]=\"triggerClasses()\"\n  aria-haspopup=\"menu\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n  [attr.aria-label]=\"showIconOnly() ? label() : null\"\n  [attr.title]=\"showIconOnly() ? label() : null\"\n  (click)=\"toggleFlyout()\"\n>\n  @if (showIconOnly()) {\n    <Icon\n      [name]=\"triggerIcon() ?? 'menu'\"\n      size=\"inherit\"\n      class=\"text-(length:--nav-icon-size) text-current\"\n    />\n  } @else {\n    @if (iconPosition() === 'start' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n\n    <span class=\"truncate\">{{ label() }}</span>\n\n    @if (iconPosition() === 'end' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n  }\n</button>\n\n@if (isOpen()) {\n  <div\n    [id]=\"panelId()\"\n    data-navigation-flyout-panel=\"true\"\n    [attr.data-navigation-flyout-floating]=\"floating() ? 'true' : null\"\n    [class]=\"panelWrapperClasses()\"\n    [style.left.px]=\"floating() ? null : panelPlacement()?.left\"\n    [style.top.px]=\"floating() || isBottom() ? null : panelPlacement()?.top\"\n    [style.bottom.px]=\"!floating() && isBottom() ? panelPlacement()?.bottom : null\"\n    [style.width.px]=\"floating() ? null : panelPlacement()?.width\"\n  >\n    <div\n      [attr.data-navigation-flyout-floating-card]=\"floating() ? 'true' : null\"\n      [class]=\"panelCardClasses()\"\n    >\n      <div data-navigation-flyout-menu-layout=\"true\" [class]=\"menuClasses()\">\n        <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:\n                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)\n                 di bawah bar yang ikut scroll. -->\n        <div data-navigation-flyout-bar=\"true\" [class]=\"barRowClasses()\">\n          <ng-content select=\"NavigationHeader\" />\n\n          <ul\n            role=\"menu\"\n            tabindex=\"-1\"\n            data-navigation-flyout-row=\"true\"\n            [class]=\"rowClasses()\"\n            [attr.aria-label]=\"label()\"\n            (keydown)=\"onRowKeydown($event)\"\n          >\n            @for (item of items(); track item.key) {\n              @switch (item.type) {\n                @case ('divider') {\n                  <li role=\"separator\" class=\"mx-1 h-5 w-px bg-border\"></li>\n                }\n                @case ('spacer') {\n                  <li role=\"none\" aria-hidden=\"true\" class=\"flex-1\"></li>\n                }\n                @default {\n                  @if (item.children.length > 0) {\n                    <li\n                      role=\"none\"\n                      [class]=\"groupContainerClasses(item)\"\n                      [attr.data-navigation-item-key]=\"item.key\"\n                    >\n                      <button\n                        type=\"button\"\n                        role=\"menuitem\"\n                        data-navigation-flyout-tab=\"true\"\n                        [class]=\"tabClasses(item)\"\n                        [attr.aria-expanded]=\"isBranchOpen(item)\"\n                        [attr.aria-controls]=\"isBranchOpen(item) ? panelContentId() : null\"\n                        [disabled]=\"item.disabled || null\"\n                        (click)=\"openBranch(item)\"\n                      >\n                        <NavigationItemContent\n                          [item]=\"item\"\n                          [active]=\"isItemActive(item)\"\n                          [compact]=\"false\"\n                          [orientation]=\"'horizontal'\"\n                          [level]=\"0\"\n                          [iconTemplate]=\"iconTemplate()\"\n                        />\n                        <Icon\n                          name=\"chevron-right\"\n                          size=\"inherit\"\n                          [class]=\"tabChevronClasses(item)\"\n                        />\n                      </button>\n                    </li>\n                  } @else {\n                    <li\n                      NavigationItem\n                      [navId]=\"navId()\"\n                      [item]=\"item\"\n                      [level]=\"0\"\n                      [orientation]=\"'horizontal'\"\n                      [compact]=\"false\"\n                      [itemClass]=\"navItemClass()\"\n                      [activeIds]=\"activeIds()\"\n                      [activeUrl]=\"activeUrl()\"\n                      [iconTemplate]=\"iconTemplate()\"\n                      [collapseTree]=\"collapseTree()\"\n                      [openedIds]=\"openedIds()\"\n                      (openedIdsChange)=\"openedIdsChange.emit($event)\"\n                      (itemSelected)=\"itemSelected.emit($event)\"\n                    ></li>\n                  }\n                }\n              }\n            }\n          </ul>\n\n          <ng-content select=\"NavigationFooter\" />\n        </div>\n\n        <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->\n        <div\n          [id]=\"panelContentId()\"\n          data-navigation-flyout-scroll=\"true\"\n          [attr.role]=\"activeBranch() ? 'menu' : null\"\n          [attr.aria-label]=\"activeBranch()?.title || null\"\n          [class]=\"scrollRegionClasses()\"\n        >\n          @if (activeBranch(); as branch) {\n            <NavigationEntryGrid\n              [navId]=\"navId()\"\n              [branch]=\"branch\"\n              [typeStyle]=\"typeStyle()\"\n              [itemClass]=\"itemClass()\"\n              [activeIds]=\"activeIds()\"\n              [activeUrl]=\"activeUrl()\"\n              [iconTemplate]=\"iconTemplate()\"\n              [collapseTree]=\"collapseTree()\"\n              [openedIds]=\"openedIds()\"\n              (openedIdsChange)=\"openedIdsChange.emit($event)\"\n              (itemSelected)=\"itemSelected.emit($event)\"\n            />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n",
 		styles: ["[data-navigation-flyout-floating=true]{width:var(--nav-flyout-floating-width, min(22rem, 85vw));max-width:var(--nav-flyout-floating-max-width, 85vw)}[data-navigation-flyout-floating-card=true]{border-radius:var(--nav-flyout-floating-radius, var(--radius-xl))}[data-navigation-flyout-panel=true]{-webkit-app-region:no-drag;app-region:no-drag}\n"],
 		dependencies: [
 			{
@@ -380,10 +382,8 @@ var NavigationFlyoutMenuComponent = class NavigationFlyoutMenuComponent {
 					"name",
 					"class",
 					"size",
-					"fill",
-					"weight",
-					"grade",
-					"opticalSize"
+					"strokeWidth",
+					"label"
 				]
 			},
 			{
@@ -446,7 +446,7 @@ var NavigationFlyoutMenuComponent = class NavigationFlyoutMenuComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationFlyoutMenuComponent,
 	decorators: [{
@@ -459,11 +459,12 @@ i0.ɵɵngDeclareClassMetadata({
 				NavigationItemComponent,
 				NavigationItemContentComponent
 			],
+			providers: [provideIcons(LucideChevronRight, LucideMenu)],
 			host: {
 				"[class]": "hostClasses()",
 				"(keydown.escape)": "onEscape($event)"
 			},
-			template: "<button\n  type=\"button\"\n  data-navigation-flyout-trigger=\"true\"\n  [class]=\"triggerClasses()\"\n  aria-haspopup=\"menu\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n  [attr.aria-label]=\"showIconOnly() ? label() : null\"\n  [attr.title]=\"showIconOnly() ? label() : null\"\n  (click)=\"toggleFlyout()\"\n>\n  @if (showIconOnly()) {\n    <Icon\n      [name]=\"triggerIcon() ?? 'menu'\"\n      size=\"inherit\"\n      [fill]=\"1\"\n      class=\"text-(length:--nav-icon-size) text-current\"\n    />\n  } @else {\n    @if (iconPosition() === 'start' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        [fill]=\"1\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n\n    <span class=\"truncate\">{{ label() }}</span>\n\n    @if (iconPosition() === 'end' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        [fill]=\"1\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n  }\n</button>\n\n@if (isOpen()) {\n  <div\n    [id]=\"panelId()\"\n    data-navigation-flyout-panel=\"true\"\n    [attr.data-navigation-flyout-floating]=\"floating() ? 'true' : null\"\n    [class]=\"panelWrapperClasses()\"\n    [style.left.px]=\"floating() ? null : panelPlacement()?.left\"\n    [style.top.px]=\"floating() || isBottom() ? null : panelPlacement()?.top\"\n    [style.bottom.px]=\"!floating() && isBottom() ? panelPlacement()?.bottom : null\"\n    [style.width.px]=\"floating() ? null : panelPlacement()?.width\"\n  >\n    <div\n      [attr.data-navigation-flyout-floating-card]=\"floating() ? 'true' : null\"\n      [class]=\"panelCardClasses()\"\n    >\n      <div data-navigation-flyout-menu-layout=\"true\" [class]=\"menuClasses()\">\n        <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:\n                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)\n                 di bawah bar yang ikut scroll. -->\n        <div data-navigation-flyout-bar=\"true\" [class]=\"barRowClasses()\">\n          <ng-content select=\"NavigationHeader\" />\n\n          <ul\n            role=\"menu\"\n            tabindex=\"-1\"\n            data-navigation-flyout-row=\"true\"\n            [class]=\"rowClasses()\"\n            [attr.aria-label]=\"label()\"\n            (keydown)=\"onRowKeydown($event)\"\n          >\n            @for (item of items(); track item.key) {\n              @switch (item.type) {\n                @case ('divider') {\n                  <li role=\"separator\" class=\"mx-1 h-5 w-px bg-border\"></li>\n                }\n                @case ('spacer') {\n                  <li role=\"none\" aria-hidden=\"true\" class=\"flex-1\"></li>\n                }\n                @default {\n                  @if (item.children.length > 0) {\n                    <li\n                      role=\"none\"\n                      [class]=\"groupContainerClasses(item)\"\n                      [attr.data-navigation-item-key]=\"item.key\"\n                    >\n                      <button\n                        type=\"button\"\n                        role=\"menuitem\"\n                        data-navigation-flyout-tab=\"true\"\n                        [class]=\"tabClasses(item)\"\n                        [attr.aria-expanded]=\"isBranchOpen(item)\"\n                        [attr.aria-controls]=\"isBranchOpen(item) ? panelContentId() : null\"\n                        [disabled]=\"item.disabled || null\"\n                        (click)=\"openBranch(item)\"\n                      >\n                        <NavigationItemContent\n                          [item]=\"item\"\n                          [active]=\"isItemActive(item)\"\n                          [compact]=\"false\"\n                          [orientation]=\"'horizontal'\"\n                          [level]=\"0\"\n                          [iconTemplate]=\"iconTemplate()\"\n                        />\n                        <Icon\n                          name=\"chevron_right\"\n                          size=\"inherit\"\n                          [class]=\"tabChevronClasses(item)\"\n                        />\n                      </button>\n                    </li>\n                  } @else {\n                    <li\n                      NavigationItem\n                      [navId]=\"navId()\"\n                      [item]=\"item\"\n                      [level]=\"0\"\n                      [orientation]=\"'horizontal'\"\n                      [compact]=\"false\"\n                      [itemClass]=\"navItemClass()\"\n                      [activeIds]=\"activeIds()\"\n                      [activeUrl]=\"activeUrl()\"\n                      [iconTemplate]=\"iconTemplate()\"\n                      [collapseTree]=\"collapseTree()\"\n                      [openedIds]=\"openedIds()\"\n                      (openedIdsChange)=\"openedIdsChange.emit($event)\"\n                      (itemSelected)=\"itemSelected.emit($event)\"\n                    ></li>\n                  }\n                }\n              }\n            }\n          </ul>\n\n          <ng-content select=\"NavigationFooter\" />\n        </div>\n\n        <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->\n        <div\n          [id]=\"panelContentId()\"\n          data-navigation-flyout-scroll=\"true\"\n          [attr.role]=\"activeBranch() ? 'menu' : null\"\n          [attr.aria-label]=\"activeBranch()?.title || null\"\n          [class]=\"scrollRegionClasses()\"\n        >\n          @if (activeBranch(); as branch) {\n            <NavigationEntryGrid\n              [navId]=\"navId()\"\n              [branch]=\"branch\"\n              [typeStyle]=\"typeStyle()\"\n              [itemClass]=\"itemClass()\"\n              [activeIds]=\"activeIds()\"\n              [activeUrl]=\"activeUrl()\"\n              [iconTemplate]=\"iconTemplate()\"\n              [collapseTree]=\"collapseTree()\"\n              [openedIds]=\"openedIds()\"\n              (openedIdsChange)=\"openedIdsChange.emit($event)\"\n              (itemSelected)=\"itemSelected.emit($event)\"\n            />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n",
+			template: "<button\n  type=\"button\"\n  data-navigation-flyout-trigger=\"true\"\n  [class]=\"triggerClasses()\"\n  aria-haspopup=\"menu\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? panelId() : null\"\n  [attr.aria-label]=\"showIconOnly() ? label() : null\"\n  [attr.title]=\"showIconOnly() ? label() : null\"\n  (click)=\"toggleFlyout()\"\n>\n  @if (showIconOnly()) {\n    <Icon\n      [name]=\"triggerIcon() ?? 'menu'\"\n      size=\"inherit\"\n      class=\"text-(length:--nav-icon-size) text-current\"\n    />\n  } @else {\n    @if (iconPosition() === 'start' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n\n    <span class=\"truncate\">{{ label() }}</span>\n\n    @if (iconPosition() === 'end' && triggerIcon(); as iconName) {\n      <Icon\n        [name]=\"iconName\"\n        size=\"inherit\"\n        class=\"shrink-0 text-(length:--nav-icon-size) text-current\"\n      />\n    }\n  }\n</button>\n\n@if (isOpen()) {\n  <div\n    [id]=\"panelId()\"\n    data-navigation-flyout-panel=\"true\"\n    [attr.data-navigation-flyout-floating]=\"floating() ? 'true' : null\"\n    [class]=\"panelWrapperClasses()\"\n    [style.left.px]=\"floating() ? null : panelPlacement()?.left\"\n    [style.top.px]=\"floating() || isBottom() ? null : panelPlacement()?.top\"\n    [style.bottom.px]=\"!floating() && isBottom() ? panelPlacement()?.bottom : null\"\n    [style.width.px]=\"floating() ? null : panelPlacement()?.width\"\n  >\n    <div\n      [attr.data-navigation-flyout-floating-card]=\"floating() ? 'true' : null\"\n      [class]=\"panelCardClasses()\"\n    >\n      <div data-navigation-flyout-menu-layout=\"true\" [class]=\"menuClasses()\">\n        <!-- ROW 1 = bar (sticky, menutup bar trigger), struktur seperti bar navbar:\n                 Header (kiri) | menu item (tengah) | Footer (kanan). Hanya ROW 2 (grid child)\n                 di bawah bar yang ikut scroll. -->\n        <div data-navigation-flyout-bar=\"true\" [class]=\"barRowClasses()\">\n          <ng-content select=\"NavigationHeader\" />\n\n          <ul\n            role=\"menu\"\n            tabindex=\"-1\"\n            data-navigation-flyout-row=\"true\"\n            [class]=\"rowClasses()\"\n            [attr.aria-label]=\"label()\"\n            (keydown)=\"onRowKeydown($event)\"\n          >\n            @for (item of items(); track item.key) {\n              @switch (item.type) {\n                @case ('divider') {\n                  <li role=\"separator\" class=\"mx-1 h-5 w-px bg-border\"></li>\n                }\n                @case ('spacer') {\n                  <li role=\"none\" aria-hidden=\"true\" class=\"flex-1\"></li>\n                }\n                @default {\n                  @if (item.children.length > 0) {\n                    <li\n                      role=\"none\"\n                      [class]=\"groupContainerClasses(item)\"\n                      [attr.data-navigation-item-key]=\"item.key\"\n                    >\n                      <button\n                        type=\"button\"\n                        role=\"menuitem\"\n                        data-navigation-flyout-tab=\"true\"\n                        [class]=\"tabClasses(item)\"\n                        [attr.aria-expanded]=\"isBranchOpen(item)\"\n                        [attr.aria-controls]=\"isBranchOpen(item) ? panelContentId() : null\"\n                        [disabled]=\"item.disabled || null\"\n                        (click)=\"openBranch(item)\"\n                      >\n                        <NavigationItemContent\n                          [item]=\"item\"\n                          [active]=\"isItemActive(item)\"\n                          [compact]=\"false\"\n                          [orientation]=\"'horizontal'\"\n                          [level]=\"0\"\n                          [iconTemplate]=\"iconTemplate()\"\n                        />\n                        <Icon\n                          name=\"chevron-right\"\n                          size=\"inherit\"\n                          [class]=\"tabChevronClasses(item)\"\n                        />\n                      </button>\n                    </li>\n                  } @else {\n                    <li\n                      NavigationItem\n                      [navId]=\"navId()\"\n                      [item]=\"item\"\n                      [level]=\"0\"\n                      [orientation]=\"'horizontal'\"\n                      [compact]=\"false\"\n                      [itemClass]=\"navItemClass()\"\n                      [activeIds]=\"activeIds()\"\n                      [activeUrl]=\"activeUrl()\"\n                      [iconTemplate]=\"iconTemplate()\"\n                      [collapseTree]=\"collapseTree()\"\n                      [openedIds]=\"openedIds()\"\n                      (openedIdsChange)=\"openedIdsChange.emit($event)\"\n                      (itemSelected)=\"itemSelected.emit($event)\"\n                    ></li>\n                  }\n                }\n              }\n            }\n          </ul>\n\n          <ng-content select=\"NavigationFooter\" />\n        </div>\n\n        <!-- ROW 2 = child dari menu item aktif; HANYA area ini yang men-scroll. -->\n        <div\n          [id]=\"panelContentId()\"\n          data-navigation-flyout-scroll=\"true\"\n          [attr.role]=\"activeBranch() ? 'menu' : null\"\n          [attr.aria-label]=\"activeBranch()?.title || null\"\n          [class]=\"scrollRegionClasses()\"\n        >\n          @if (activeBranch(); as branch) {\n            <NavigationEntryGrid\n              [navId]=\"navId()\"\n              [branch]=\"branch\"\n              [typeStyle]=\"typeStyle()\"\n              [itemClass]=\"itemClass()\"\n              [activeIds]=\"activeIds()\"\n              [activeUrl]=\"activeUrl()\"\n              [iconTemplate]=\"iconTemplate()\"\n              [collapseTree]=\"collapseTree()\"\n              [openedIds]=\"openedIds()\"\n              (openedIdsChange)=\"openedIdsChange.emit($event)\"\n              (itemSelected)=\"itemSelected.emit($event)\"\n            />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n",
 			styles: ["[data-navigation-flyout-floating=true]{width:var(--nav-flyout-floating-width, min(22rem, 85vw));max-width:var(--nav-flyout-floating-max-width, 85vw)}[data-navigation-flyout-floating-card=true]{border-radius:var(--nav-flyout-floating-radius, var(--radius-xl))}[data-navigation-flyout-panel=true]{-webkit-app-region:no-drag;app-region:no-drag}\n"]
 		}]
 	}],

package/fesm2022/{ojiepermana-angular-navigation-navigation-horizontal.component-DMpYcD9t.mjs → ojiepermana-angular-navigation-navigation-horizontal.component-LNTertHr.mjs}

@@ -1,5 +1,5 @@
-import { n as navigationPanelId, r as NavigationItemContentComponent, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-Basp5SIk.mjs";
-import { t as NavigationEntryGridComponent } from "./ojiepermana-angular-navigation-navigation-entry-grid.component-mpK9Ar08.mjs";
+import { n as navigationPanelId, r as NavigationItemContentComponent, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-DiGOcizS.mjs";
+import { t as NavigationEntryGridComponent } from "./ojiepermana-angular-navigation-navigation-entry-grid.component-zBCXDa4c.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";
@@ -155,7 +155,7 @@ var NavigationHorizontalComponent = class NavigationHorizontalComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationHorizontalComponent,
 		deps: [],
@@ -163,7 +163,7 @@ var NavigationHorizontalComponent = class NavigationHorizontalComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: NavigationHorizontalComponent,
 		isStandalone: true,
 		selector: "NavigationHorizontal",
@@ -433,7 +433,7 @@ var NavigationHorizontalComponent = class NavigationHorizontalComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationHorizontalComponent,
 	decorators: [{