@ojiepermana/angular-navigation 22.0.44 → 22.0.46

package/fesm2022/ojiepermana-angular-navigation-navigation-entry-grid.component-DN42NJ2l.mjs

@@ -0,0 +1,569 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, signal, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { IconComponent } from '@ojiepermana/angular-component/icon';
+import { cn } from '@ojiepermana/angular-component/utils';
+import { N as NavigationItemComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-Dh4Huk-N.mjs';
+import { NavigationService } from '@ojiepermana/angular-navigation/service';
+
+/**
+ * Grid entry ala flyout: children sebuah branch dirender sebagai entry
+ * icon-box + title/subtitle dalam grid responsif (1/sm:2/md:3/lg:4, dibatasi
+ * `columns`); entry ber-children tampil terbuka secara default dengan collapse
+ * vertical yang icon-nya sejajar satu garis dengan icon induk. Dipakai oleh
+ * flyout dan panel mega navbar.
+ */
+class NavigationEntryGridComponent {
+    nav = inject(NavigationService);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    branch = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "branch" }] : /* istanbul ignore next */ []));
+    typeStyle = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    isBorderRail = computed(() => this.typeStyle() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    /** Kelas tambahan untuk NavigationItem bersarang saat style border-rail aktif. */
+    navItemClass = computed(() => cn(this.itemClass(), this.isBorderRail() && 'rounded-none hover:bg-transparent hover:text-primary'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Entry ber-children tampil TERBUKA secara default; set ini hanya menyimpan
+     * entry yang sengaja di-collapse pengguna. Instance grid dibuat ulang setiap
+     * panel dibuka sehingga state kembali terbuka semua.
+     */
+    collapsedEntryKeys = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsedEntryKeys" }] : /* istanbul ignore next */ []));
+    isItemActive(item) {
+        return this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
+    }
+    isEntryOpen(item) {
+        return !this.collapsedEntryKeys().has(item.stateId);
+    }
+    toggleEntry(item) {
+        if (item.disabled) {
+            return;
+        }
+        const next = new Set(this.collapsedEntryKeys());
+        if (next.has(item.stateId)) {
+            next.delete(item.stateId);
+        }
+        else {
+            next.add(item.stateId);
+        }
+        this.collapsedEntryKeys.set(next);
+    }
+    selectEntry(item, event) {
+        if (item.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        item.action?.(item.source);
+        this.itemSelected.emit({
+            item: item.source,
+            key: item.key,
+            type: item.type,
+            link: item.link,
+            external: !!this.nav.hrefFor(item),
+        });
+        this.nav.closePanel(this.navId());
+        this.nav.closeDrawer(this.navId());
+    }
+    isRouterItem(item) {
+        return this.nav.isRouterItem(item);
+    }
+    hrefFor(item) {
+        return this.nav.hrefFor(item);
+    }
+    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');
+    }
+    fallbackInitials(item) {
+        return this.nav.compactFallback(item);
+    }
+    contentGridClasses(branch) {
+        // Skala responsif: mobile 1, sm 2, md 3, lg ke atas 4; `columns` membatasi maksimumnya.
+        const columns = Math.min(Math.max(branch.columns ?? 4, 1), 4);
+        return cn('m-0 grid list-none grid-cols-1 gap-1 p-0', columns >= 2 && 'sm:grid-cols-2', columns >= 3 && 'md:grid-cols-3', columns >= 4 && 'lg:grid-cols-4');
+    }
+    entryClasses(item, active) {
+        return cn('group/nav nav-text flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', this.isBorderRail()
+            ? cn('rounded-none', active ? 'text-primary' : 'text-foreground hover:text-primary')
+            : cn('rounded-lg', active
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground hover:bg-accent hover:text-accent-foreground'), item.disabled && 'pointer-events-none opacity-50', item.classes?.wrapper, this.itemClass());
+    }
+    entryIconClasses(active) {
+        if (this.isBorderRail()) {
+            // Kotak icon polos; bingkai digambar oleh rail line yang menjorok melewati sudut.
+            return cn('relative flex h-10 w-10 shrink-0 items-center justify-center self-center text-foreground transition-colors group-hover/nav:text-primary', active && 'text-primary');
+        }
+        return cn('relative flex h-10 w-10 shrink-0 items-center justify-center self-center rounded-lg border bg-background text-foreground shadow-sm transition-colors', active ? 'border-primary text-primary' : 'border-[hsl(var(--border)/var(--opacity-70))]');
+    }
+    entryIconGlyphClasses(item) {
+        return cn('text-current', item.classes?.icon);
+    }
+    entryTitleClasses(item, active) {
+        return cn('block truncate font-medium', this.isBorderRail() ? 'text-current' : 'text-foreground', active && 'font-semibold', item.classes?.title);
+    }
+    entrySubtitleClasses(item) {
+        return cn('mt-0.5 block truncate text-xs text-muted-foreground', item.classes?.subtitle);
+    }
+    entryChevronClasses(item) {
+        return cn('shrink-0 self-center text-muted-foreground transition-transform duration-200', this.isEntryOpen(item) && 'rotate-90');
+    }
+    nestedListClasses() {
+        // Children sejajar satu garis vertical dengan icon induk: rail digambar lewat pseudo-element
+        // di x = 32px (px-3 entry + setengah icon box w-10); pl-2.5 membuat icon child (px-3 + slot
+        // w-5) ber-center tepat di garis yang sama.
+        return cn("relative mt-1 flex list-none flex-col gap-0.5 p-0 pl-2.5 before:pointer-events-none before:absolute before:inset-y-0 before:left-8 before:w-0 before:border-l before:content-['']", this.isBorderRail()
+            ? 'before:border-dashed before:border-border/40'
+            : 'before:border-[hsl(var(--border)/var(--opacity-60))]');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationEntryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationEntryGridComponent, isStandalone: true, selector: "NavigationEntryGrid", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, branch: { classPropertyName: "branch", publicName: "branch", isSignal: true, isRequired: true, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, 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: "contents" }, ngImport: i0, template: `
+    @let branchItem = branch();
+
+    <div
+      role="group"
+      [id]="branchItem.panelId"
+      [attr.aria-label]="branchItem.title || null"
+      [attr.data-navigation-flyout-content]="branchItem.key"
+      class="p-2 md:p-3"
+    >
+      <ul role="none" [class]="contentGridClasses(branchItem)">
+        @for (child of branchItem.children; track child.key) {
+          @switch (child.type) {
+            @case ('divider') {
+              <li role="separator" class="col-span-full my-1 h-px bg-border"></li>
+            }
+            @case ('spacer') {}
+            @default {
+              @if (child.children.length > 0) {
+                <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    data-navigation-flyout-entry="true"
+                    [class]="entryClasses(child, isItemActive(child))"
+                    [attr.aria-expanded]="isEntryOpen(child)"
+                    [attr.aria-controls]="child.panelId"
+                    [disabled]="child.disabled || null"
+                    (click)="toggleEntry(child)"
+                  >
+                    <ng-container
+                      [ngTemplateOutlet]="entryContent"
+                      [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }"
+                    />
+                    <Icon name="chevron_right" [size]="16" [class]="entryChevronClasses(child)" />
+                  </button>
+
+                  @if (isEntryOpen(child)) {
+                    <ul [id]="child.panelId" role="none" [class]="nestedListClasses()">
+                      @for (nested of child.children; track nested.key) {
+                        <li
+                          NavigationItem
+                          [navId]="navId()"
+                          [item]="nested"
+                          [level]="2"
+                          [orientation]="'horizontal'"
+                          [compact]="false"
+                          [itemClass]="navItemClass()"
+                          [activeIds]="activeIds()"
+                          [activeUrl]="activeUrl()"
+                          [iconTemplate]="iconTemplate()"
+                          [collapseTree]="collapseTree()"
+                          [openedIds]="openedIds()"
+                          (openedIdsChange)="openedIdsChange.emit($event)"
+                          (itemSelected)="itemSelected.emit($event)"
+                        ></li>
+                      }
+                    </ul>
+                  }
+                </li>
+              } @else {
+                <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
+                  @if (isRouterItem(child)) {
+                    <a
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, routerActive.isActive || isItemActive(child))"
+                      [routerLink]="child.link ?? null"
+                      [queryParams]="child.queryParams ?? null"
+                      [queryParamsHandling]="child.queryParamsHandling ?? null"
+                      [fragment]="child.fragment ?? undefined"
+                      [preserveFragment]="child.preserveFragment ?? false"
+                      [target]="child.target ?? undefined"
+                      routerLinkActive
+                      #routerActive="routerLinkActive"
+                      [routerLinkActiveOptions]="routerLinkActiveOptions(child)"
+                      [attr.aria-current]="
+                        routerActive.isActive || isItemActive(child) ? 'page' : null
+                      "
+                      [attr.aria-disabled]="child.disabled || null"
+                      (click)="selectEntry(child, $event)"
+                    >
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{
+                          $implicit: child,
+                          active: routerActive.isActive || isItemActive(child),
+                        }"
+                      />
+                    </a>
+                  } @else if (hrefFor(child)) {
+                    <a
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, isItemActive(child))"
+                      [attr.href]="hrefFor(child)"
+                      [attr.target]="child.target ?? (child.externalLink ? '_blank' : null)"
+                      [attr.rel]="relFor(child)"
+                      [attr.aria-current]="isItemActive(child) ? 'page' : null"
+                      [attr.aria-disabled]="child.disabled || null"
+                      (click)="selectEntry(child, $event)"
+                    >
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{
+                          $implicit: child,
+                          active: isItemActive(child),
+                        }"
+                      />
+                    </a>
+                  } @else {
+                    <button
+                      type="button"
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, isItemActive(child))"
+                      [disabled]="child.disabled || null"
+                      [attr.aria-current]="isItemActive(child) ? 'page' : null"
+                      (click)="selectEntry(child, $event)"
+                    >
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{
+                          $implicit: child,
+                          active: isItemActive(child),
+                        }"
+                      />
+                    </button>
+                  }
+                </li>
+              }
+            }
+          }
+        }
+      </ul>
+    </div>
+
+    <ng-template #entryContent let-child let-active="active">
+      <span [class]="entryIconClasses(active)">
+        @if (isBorderRail()) {
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="top"
+            class="pointer-events-none absolute -inset-x-1.5 top-0 h-px bg-border/50"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="bottom"
+            class="pointer-events-none absolute -inset-x-1.5 bottom-0 h-px bg-border/50"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="left"
+            class="pointer-events-none absolute -inset-y-1.5 left-0 w-px bg-border/50"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="right"
+            class="pointer-events-none absolute -inset-y-1.5 right-0 w-px bg-border/50"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="center-horizontal"
+            class="pointer-events-none absolute -inset-x-1.5 top-1/2 border-t border-dashed border-border/40"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="center-vertical"
+            class="pointer-events-none absolute -inset-y-1.5 left-1/2 border-l border-dashed border-border/40"
+          ></span>
+        }
+
+        @if (child.icon) {
+          @if (iconTemplate(); as customIcon) {
+            <ng-container
+              [ngTemplateOutlet]="customIcon.template"
+              [ngTemplateOutletContext]="iconContext(child, active)"
+            />
+          } @else {
+            <Icon [name]="child.icon" [size]="18" [class]="entryIconGlyphClasses(child)" />
+          }
+        } @else {
+          <span aria-hidden="true" class="text-xs font-semibold uppercase">{{
+            fallbackInitials(child)
+          }}</span>
+        }
+      </span>
+
+      <span class="min-w-0 flex-1">
+        <span [class]="entryTitleClasses(child, active)">{{ child.title }}</span>
+        @if (child.subtitle) {
+          <span [class]="entrySubtitleClasses(child)">{{ child.subtitle }}</span>
+        }
+      </span>
+
+      @if (child.badge; as badge) {
+        <span
+          [class]="
+            badge.classes ??
+            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-muted-foreground'
+          "
+          >{{ badge.title }}</span
+        >
+      }
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationEntryGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationEntryGrid',
+                    imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, IconComponent, NavigationItemComponent],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @let branchItem = branch();
+
+    <div
+      role="group"
+      [id]="branchItem.panelId"
+      [attr.aria-label]="branchItem.title || null"
+      [attr.data-navigation-flyout-content]="branchItem.key"
+      class="p-2 md:p-3"
+    >
+      <ul role="none" [class]="contentGridClasses(branchItem)">
+        @for (child of branchItem.children; track child.key) {
+          @switch (child.type) {
+            @case ('divider') {
+              <li role="separator" class="col-span-full my-1 h-px bg-border"></li>
+            }
+            @case ('spacer') {}
+            @default {
+              @if (child.children.length > 0) {
+                <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
+                  <button
+                    type="button"
+                    role="menuitem"
+                    data-navigation-flyout-entry="true"
+                    [class]="entryClasses(child, isItemActive(child))"
+                    [attr.aria-expanded]="isEntryOpen(child)"
+                    [attr.aria-controls]="child.panelId"
+                    [disabled]="child.disabled || null"
+                    (click)="toggleEntry(child)"
+                  >
+                    <ng-container
+                      [ngTemplateOutlet]="entryContent"
+                      [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }"
+                    />
+                    <Icon name="chevron_right" [size]="16" [class]="entryChevronClasses(child)" />
+                  </button>
+
+                  @if (isEntryOpen(child)) {
+                    <ul [id]="child.panelId" role="none" [class]="nestedListClasses()">
+                      @for (nested of child.children; track nested.key) {
+                        <li
+                          NavigationItem
+                          [navId]="navId()"
+                          [item]="nested"
+                          [level]="2"
+                          [orientation]="'horizontal'"
+                          [compact]="false"
+                          [itemClass]="navItemClass()"
+                          [activeIds]="activeIds()"
+                          [activeUrl]="activeUrl()"
+                          [iconTemplate]="iconTemplate()"
+                          [collapseTree]="collapseTree()"
+                          [openedIds]="openedIds()"
+                          (openedIdsChange)="openedIdsChange.emit($event)"
+                          (itemSelected)="itemSelected.emit($event)"
+                        ></li>
+                      }
+                    </ul>
+                  }
+                </li>
+              } @else {
+                <li role="none" class="min-w-0" [attr.data-navigation-item-key]="child.key">
+                  @if (isRouterItem(child)) {
+                    <a
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, routerActive.isActive || isItemActive(child))"
+                      [routerLink]="child.link ?? null"
+                      [queryParams]="child.queryParams ?? null"
+                      [queryParamsHandling]="child.queryParamsHandling ?? null"
+                      [fragment]="child.fragment ?? undefined"
+                      [preserveFragment]="child.preserveFragment ?? false"
+                      [target]="child.target ?? undefined"
+                      routerLinkActive
+                      #routerActive="routerLinkActive"
+                      [routerLinkActiveOptions]="routerLinkActiveOptions(child)"
+                      [attr.aria-current]="
+                        routerActive.isActive || isItemActive(child) ? 'page' : null
+                      "
+                      [attr.aria-disabled]="child.disabled || null"
+                      (click)="selectEntry(child, $event)"
+                    >
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{
+                          $implicit: child,
+                          active: routerActive.isActive || isItemActive(child),
+                        }"
+                      />
+                    </a>
+                  } @else if (hrefFor(child)) {
+                    <a
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, isItemActive(child))"
+                      [attr.href]="hrefFor(child)"
+                      [attr.target]="child.target ?? (child.externalLink ? '_blank' : null)"
+                      [attr.rel]="relFor(child)"
+                      [attr.aria-current]="isItemActive(child) ? 'page' : null"
+                      [attr.aria-disabled]="child.disabled || null"
+                      (click)="selectEntry(child, $event)"
+                    >
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{
+                          $implicit: child,
+                          active: isItemActive(child),
+                        }"
+                      />
+                    </a>
+                  } @else {
+                    <button
+                      type="button"
+                      role="menuitem"
+                      data-navigation-flyout-entry="true"
+                      [class]="entryClasses(child, isItemActive(child))"
+                      [disabled]="child.disabled || null"
+                      [attr.aria-current]="isItemActive(child) ? 'page' : null"
+                      (click)="selectEntry(child, $event)"
+                    >
+                      <ng-container
+                        [ngTemplateOutlet]="entryContent"
+                        [ngTemplateOutletContext]="{
+                          $implicit: child,
+                          active: isItemActive(child),
+                        }"
+                      />
+                    </button>
+                  }
+                </li>
+              }
+            }
+          }
+        }
+      </ul>
+    </div>
+
+    <ng-template #entryContent let-child let-active="active">
+      <span [class]="entryIconClasses(active)">
+        @if (isBorderRail()) {
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="top"
+            class="pointer-events-none absolute -inset-x-1.5 top-0 h-px bg-border/50"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="bottom"
+            class="pointer-events-none absolute -inset-x-1.5 bottom-0 h-px bg-border/50"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="left"
+            class="pointer-events-none absolute -inset-y-1.5 left-0 w-px bg-border/50"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="right"
+            class="pointer-events-none absolute -inset-y-1.5 right-0 w-px bg-border/50"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="center-horizontal"
+            class="pointer-events-none absolute -inset-x-1.5 top-1/2 border-t border-dashed border-border/40"
+          ></span>
+          <span
+            aria-hidden="true"
+            data-navigation-icon-rail="center-vertical"
+            class="pointer-events-none absolute -inset-y-1.5 left-1/2 border-l border-dashed border-border/40"
+          ></span>
+        }
+
+        @if (child.icon) {
+          @if (iconTemplate(); as customIcon) {
+            <ng-container
+              [ngTemplateOutlet]="customIcon.template"
+              [ngTemplateOutletContext]="iconContext(child, active)"
+            />
+          } @else {
+            <Icon [name]="child.icon" [size]="18" [class]="entryIconGlyphClasses(child)" />
+          }
+        } @else {
+          <span aria-hidden="true" class="text-xs font-semibold uppercase">{{
+            fallbackInitials(child)
+          }}</span>
+        }
+      </span>
+
+      <span class="min-w-0 flex-1">
+        <span [class]="entryTitleClasses(child, active)">{{ child.title }}</span>
+        @if (child.subtitle) {
+          <span [class]="entrySubtitleClasses(child)">{{ child.subtitle }}</span>
+        }
+      </span>
+
+      @if (child.badge; as badge) {
+        <span
+          [class]="
+            badge.classes ??
+            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-muted-foreground'
+          "
+          >{{ badge.title }}</span
+        >
+      }
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], branch: [{ type: i0.Input, args: [{ isSignal: true, alias: "branch", required: true }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+export { NavigationEntryGridComponent as N };