@ojiepermana/angular 22.1.12 → 22.1.14

package/fesm2022/{ojiepermana-angular-navigation-navigation-flyout-menu.component-BCGvhoYj.mjs → ojiepermana-angular-navigation-navigation-flyout-menu.component-DA8VPEn7.mjs}

@@ -3,8 +3,8 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, Injector, input, output, computed, signal, effect, afterNextRender, Component } from '@angular/core';
 import { IconComponent } from '@ojiepermana/angular/component/icon';
 import { cn } from '@ojiepermana/angular/component/utils/core';
-import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-Cd-jh6tg.mjs';
-import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-DNKU6viC.mjs';
+import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-COQ-60DS.mjs';
+import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs';
 import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
 
 class NavigationFlyoutMenuComponent {
@@ -385,10 +385,10 @@ class NavigationFlyoutMenuComponent {
             .querySelector('[data-navigation-flyout-trigger="true"]')
             ?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFlyoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationFlyoutMenuComponent, isStandalone: true, selector: "NavigationFlyoutMenu", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerButtonClass: { classPropertyName: "triggerButtonClass", publicName: "triggerButtonClass", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { listeners: { "keydown.escape": "onEscape($event)" }, properties: { "class": "hostClasses()" } }, 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", 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: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFlyoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationFlyoutMenuComponent, isStandalone: true, selector: "NavigationFlyoutMenu", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, floating: { classPropertyName: "floating", publicName: "floating", isSignal: true, isRequired: false, transformFunction: null }, viewport: { classPropertyName: "viewport", publicName: "viewport", isSignal: true, isRequired: false, transformFunction: null }, triggerClass: { classPropertyName: "triggerClass", publicName: "triggerClass", isSignal: true, isRequired: false, transformFunction: null }, triggerButtonClass: { classPropertyName: "triggerButtonClass", publicName: "triggerButtonClass", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { listeners: { "keydown.escape": "onEscape($event)" }, properties: { "class": "hostClasses()" } }, 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", 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: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "tooltip-position", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationFlyoutMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationFlyoutMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'NavigationFlyoutMenu', imports: [
                         IconComponent,

package/fesm2022/{ojiepermana-angular-navigation-navigation-horizontal.component-Dk_03e-6.mjs → ojiepermana-angular-navigation-navigation-horizontal.component-U2TJTzlW.mjs}

@@ -2,8 +2,8 @@ import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, Injector, input, output, computed, effect, signal, afterNextRender, Component } from '@angular/core';
 import { cn } from '@ojiepermana/angular/component/utils/core';
-import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-Cd-jh6tg.mjs';
-import { n as navigationPanelId, N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-DNKU6viC.mjs';
+import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-COQ-60DS.mjs';
+import { n as navigationPanelId, N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-CIUhmytH.mjs';
 import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
 
 class NavigationHorizontalComponent {
@@ -241,8 +241,8 @@ class NavigationHorizontalComponent {
         const item = panel?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
         item?.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: NavigationHorizontalComponent, isStandalone: true, selector: "NavigationHorizontal", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: NavigationHorizontalComponent, isStandalone: true, selector: "NavigationHorizontal", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
     <ul [class]="listClasses()" role="menubar" tabindex="-1" (keydown)="onKeydown($event)">
       @for (item of items(); track item.key) {
         @switch (item.type) {
@@ -343,9 +343,9 @@ class NavigationHorizontalComponent {
         }
       </li>
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "tooltip-position", "collapseTree", "straightRail", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHorizontalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: NavigationHorizontalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'NavigationHorizontal',