@ojiepermana/angular 22.2.1 → 22.2.2

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

@@ -1,11 +1,12 @@
-import { n as navigationPanelId, t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-CUb68MZH.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 { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { cn } from "@ojiepermana/angular/component/utils/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);
@@ -111,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.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationEntryGridComponent,
 		deps: [],
@@ -126,7 +127,7 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: NavigationEntryGridComponent,
 		isStandalone: true,
 		selector: "NavigationEntryGrid",
@@ -200,6 +201,7 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 			itemSelected: "itemSelected"
 		},
 		host: { classAttribute: "contents" },
+		providers: [provideIcons(LucideChevronRight)],
 		ngImport: i0,
 		template: `
     @let branchItem = branch();
@@ -240,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)"
                     />
@@ -382,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
@@ -455,10 +452,8 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 					"name",
 					"class",
 					"size",
-					"fill",
-					"weight",
-					"grade",
-					"opticalSize"
+					"strokeWidth",
+					"label"
 				]
 			},
 			{
@@ -491,7 +486,7 @@ var NavigationEntryGridComponent = class NavigationEntryGridComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationEntryGridComponent,
 	decorators: [{
@@ -504,6 +499,7 @@ i0.ɵɵngDeclareClassMetadata({
 				IconComponent,
 				NavigationItemComponent
 			],
+			providers: [provideIcons(LucideChevronRight)],
 			host: { class: "contents" },
 			template: `
     @let branchItem = branch();
@@ -544,7 +540,7 @@ i0.ɵɵngDeclareClassMetadata({
                       [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }"
                     />
                     <Icon
-                      name="chevron_right"
+                      name="chevron-right"
                       size="inherit"
                       [class]="entryChevronClasses(child)"
                     />
@@ -686,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-D2vwEwBY.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-CUb68MZH.mjs";
-import { t as NavigationEntryGridComponent } from "./ojiepermana-angular-navigation-navigation-entry-grid.component-YIz0IsIb.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.2",
+		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.2",
+		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.2",
+	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-B5D7yXfb.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-CUb68MZH.mjs";
-import { t as NavigationEntryGridComponent } from "./ojiepermana-angular-navigation-navigation-entry-grid.component-YIz0IsIb.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.2",
+		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.2",
+		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.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationHorizontalComponent,
 	decorators: [{

package/fesm2022/{ojiepermana-angular-navigation-navigation-item.component-CUb68MZH.mjs → ojiepermana-angular-navigation-navigation-item.component-DiGOcizS.mjs}

@@ -4,7 +4,8 @@ import { ActivatedRoute, Router, RouterLink } from "@angular/router";
 import { cn } from "@ojiepermana/angular/component/utils/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";
 import { TooltipDirective } from "@ojiepermana/angular/component/tooltip";
 var NavigationItemContentComponent = class NavigationItemContentComponent {
 	nav = inject(NAVIGATION_ADAPTER);
@@ -14,7 +15,7 @@ var NavigationItemContentComponent = class NavigationItemContentComponent {
 	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 */ []);
+	iconSlotClasses = computed(() => cn("relative z-10 inline-flex shrink-0 items-center justify-center transition-colors duration-normal", 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 */ []);
@@ -27,7 +28,7 @@ var NavigationItemContentComponent = class NavigationItemContentComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationItemContentComponent,
 		deps: [],
@@ -35,7 +36,7 @@ var NavigationItemContentComponent = class NavigationItemContentComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: NavigationItemContentComponent,
 		isStandalone: true,
 		selector: "NavigationItemContent",
@@ -94,7 +95,7 @@ var NavigationItemContentComponent = class NavigationItemContentComponent {
             [ngTemplateOutletContext]="iconContext()"
           />
         } @else {
-          <Icon [name]="iconName" [class]="defaultIconClasses()" size="inherit" [fill]="1" />
+          <Icon [name]="iconName" [class]="defaultIconClasses()" size="inherit" />
         }
       </span>
     }
@@ -134,17 +135,15 @@ var NavigationItemContentComponent = class NavigationItemContentComponent {
 				"name",
 				"class",
 				"size",
-				"fill",
-				"weight",
-				"grade",
-				"opticalSize"
+				"strokeWidth",
+				"label"
 			]
 		}]
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationItemContentComponent,
 	decorators: [{
@@ -162,7 +161,7 @@ i0.ɵɵngDeclareClassMetadata({
             [ngTemplateOutletContext]="iconContext()"
           />
         } @else {
-          <Icon [name]="iconName" [class]="defaultIconClasses()" size="inherit" [fill]="1" />
+          <Icon [name]="iconName" [class]="defaultIconClasses()" size="inherit" />
         }
       </span>
     }
@@ -361,11 +360,11 @@ var NavigationItemComponent = class NavigationItemComponent {
 	}
 	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");
+		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-normal 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");
+		return cn("ml-auto shrink-0 self-center text-(length:--nav-icon-size-sub) text-muted-foreground transition-transform duration-normal", this.isOpen() && "rotate-90");
 	}
 	itemContainerClasses() {
 		return cn(this.orientation() === "horizontal" && this.level() === 0 ? "relative" : "w-full", this.compact() && "flex justify-center", this.straightRailClasses());
@@ -396,7 +395,7 @@ var NavigationItemComponent = class NavigationItemComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationItemComponent,
 		deps: [],
@@ -404,7 +403,7 @@ var NavigationItemComponent = class NavigationItemComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: NavigationItemComponent,
 		isStandalone: true,
 		selector: "li[NavigationItem]",
@@ -539,6 +538,7 @@ var NavigationItemComponent = class NavigationItemComponent {
 			"attr.data-navigation-item-key": "item().key",
 			"attr.aria-hidden": "item().type === \"spacer\" || item().type === \"divider\" ? \"true\" : null"
 		} },
+		providers: [provideIcons(LucideChevronRight)],
 		ngImport: i0,
 		template: `
     @switch (item().type) {
@@ -596,7 +596,7 @@ var NavigationItemComponent = class NavigationItemComponent {
           />
 
           @if (!compact()) {
-            <Icon name="chevron_right" size="inherit" [class]="chevronClasses()" />
+            <Icon name="chevron-right" size="inherit" [class]="chevronClasses()" />
           }
         </button>
 
@@ -778,10 +778,8 @@ var NavigationItemComponent = class NavigationItemComponent {
 					"name",
 					"class",
 					"size",
-					"fill",
-					"weight",
-					"grade",
-					"opticalSize"
+					"strokeWidth",
+					"label"
 				]
 			},
 			{
@@ -844,7 +842,7 @@ var NavigationItemComponent = class NavigationItemComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationItemComponent,
 	decorators: [{
@@ -858,6 +856,7 @@ i0.ɵɵngDeclareClassMetadata({
 				RouterLink,
 				TooltipDirective
 			],
+			providers: [provideIcons(LucideChevronRight)],
 			host: {
 				"[class]": "hostClasses()",
 				"[attr.role]": "hostRole()",
@@ -920,7 +919,7 @@ i0.ɵɵngDeclareClassMetadata({
           />
 
           @if (!compact()) {
-            <Icon name="chevron_right" size="inherit" [class]="chevronClasses()" />
+            <Icon name="chevron-right" size="inherit" [class]="chevronClasses()" />
           }
         </button>
 

package/fesm2022/{ojiepermana-angular-navigation-navigation-list.component-CrK16trj.mjs → ojiepermana-angular-navigation-navigation-list.component-DB22Gl-5.mjs}

@@ -1,4 +1,4 @@
-import { t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-CUb68MZH.mjs";
+import { t as NavigationItemComponent } from "./ojiepermana-angular-navigation-navigation-item.component-DiGOcizS.mjs";
 import * as i0 from "@angular/core";
 import { Component, computed, input, output } from "@angular/core";
 import { cn } from "@ojiepermana/angular/component/utils/core";
@@ -22,7 +22,7 @@ var NavigationListComponent = class NavigationListComponent {
 	listClasses = computed(() => cn(this.isCollapsed() ? "flex list-none flex-col items-center gap-0.5 p-0" : cn("flex list-none flex-col gap-0.5 p-0", this.position() === "right" && "items-end"), this.fill() && "flex-1"), ...ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationListComponent,
 		deps: [],
@@ -30,7 +30,7 @@ var NavigationListComponent = class NavigationListComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		type: NavigationListComponent,
 		isStandalone: true,
 		selector: "NavigationList",
@@ -181,7 +181,7 @@ var NavigationListComponent = class NavigationListComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationListComponent,
 	decorators: [{

package/fesm2022/ojiepermana-angular-navigation-service.mjs

@@ -1,4 +1,4 @@
-import { DOCUMENT } from "@angular/common";
+import { DOCUMENT, Location } from "@angular/common";
 import * as i0 from "@angular/core";
 import { Service, computed, inject, isDevMode, signal } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
@@ -213,7 +213,8 @@ var NavigationService = class NavigationService {
 	persistence = new NavigationPersistence(this.documentRef);
 	router = inject(Router, { optional: true });
 	urlResolver = new NavigationActiveUrlResolver(this.router);
-	routerUrl = signal(this.router?.url ?? "/", ...ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []);
+	location = inject(Location, { optional: true });
+	routerUrl = signal(this.initialUrl(), ...ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []);
 	states = signal({}, ...ngDevMode ? [{ debugName: "states" }] : /* istanbul ignore next */ []);
 	openPanelKeys = signal({}, ...ngDevMode ? [{ debugName: "openPanelKeys" }] : /* istanbul ignore next */ []);
 	drawerOpenState = signal({}, ...ngDevMode ? [{ debugName: "drawerOpenState" }] : /* istanbul ignore next */ []);
@@ -250,6 +251,13 @@ var NavigationService = class NavigationService {
 	releasePanelsAfterNavigation() {
 		this.openPanelKeys.update((state) => Object.values(state).some((key) => key !== null) ? {} : state);
 	}
+	initialUrl() {
+		if (this.router && !this.router.navigated) {
+			const path = this.location?.path(true);
+			if (path) return path;
+		}
+		return this.router?.url ?? "/";
+	}
 	urlPath(url) {
 		const end = url.search(/[?#]/);
 		return end === -1 ? url : url.slice(0, end);
@@ -525,7 +533,7 @@ var NavigationService = class NavigationService {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationService,
 		deps: [],
@@ -533,14 +541,14 @@ var NavigationService = class NavigationService {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.2",
+		version: "22.2.3",
 		ngImport: i0,
 		type: NavigationService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.2",
+	version: "22.2.3",
 	ngImport: i0,
 	type: NavigationService,
 	decorators: [{ type: Service }],