@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -0,0 +1,623 @@
+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/core';
+import { n as navigationPanelId, N as NavigationItemComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-DNKU6viC.mjs';
+import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
+
+/**
+ * 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(NAVIGATION_ADAPTER);
+    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 */ []));
+    /**
+     * Template method calls re-run on every check; resolving the branch once per
+     * dependency change keeps a redraw from replaying an URL match per entry.
+     */
+    entryState = computed(() => {
+        const activeIds = this.activeIds();
+        const activeUrl = this.activeUrl();
+        const navId = this.navId();
+        return new Map(this.branch().children.map((child) => [
+            child,
+            {
+                active: this.nav.isItemActive(child, activeIds, activeUrl),
+                panelId: navigationPanelId(navId, child),
+            },
+        ]));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "entryState" }] : /* istanbul ignore next */ []));
+    isItemActive(item) {
+        const state = this.entryState().get(item);
+        return state?.active ?? this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
+    }
+    panelIdFor(item) {
+        return this.entryState().get(item)?.panelId ?? navigationPanelId(this.navId(), item);
+    }
+    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-(--nav-item-padding-x) py-2 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 size-(--nav-entry-box-size) shrink-0 items-center justify-center self-center text-foreground transition-colors group-hover/nav:text-primary', active && 'text-primary');
+        }
+        return cn('relative flex size-(--nav-entry-box-size) 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(--section-border-opacity))]');
+    }
+    entryIconGlyphClasses(item) {
+        return cn('text-(length:--nav-icon-size) text-current', item.classes?.icon);
+    }
+    entryTitleClasses(item) {
+        return cn('block truncate', this.isBorderRail() ? 'text-current' : 'text-foreground', item.classes?.title);
+    }
+    entrySubtitleClasses(item) {
+        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');
+    }
+    nestedListClasses() {
+        // Rail digambar di pusat chip induk (padding-x + chip/2); pl = (chip − icon)/2
+        // membuat pusat icon anak jatuh tepat di garis rail itu.
+        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.1.4", ngImport: i0, type: NavigationEntryGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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();
+
+    <!--
+      No id here: the surface that owns the branch id is the panel rendering
+      this grid (the navbar mega panel), and repeating it put two elements with
+      the same id on every navbar page.
+    -->
+    <div
+      role="group"
+      [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]="isEntryOpen(child) ? panelIdFor(child) : null"
+                    [disabled]="child.disabled || null"
+                    (click)="toggleEntry(child)"
+                  >
+                    <ng-container
+                      [ngTemplateOutlet]="entryContent"
+                      [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }"
+                    />
+                    <Icon
+                      name="chevron_right"
+                      size="inherit"
+                      [class]="entryChevronClasses(child)"
+                    />
+                  </button>
+
+                  @if (isEntryOpen(child)) {
+                    <ul [id]="panelIdFor(child)" 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"
+                      [attr.rel]="relFor(child)"
+                      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="inherit"
+              [fill]="1"
+              [class]="entryIconGlyphClasses(child)"
+            />
+          }
+        } @else {
+          <span
+            aria-hidden="true"
+            class="text-(length:--nav-icon-size-sub) font-semibold uppercase"
+            >{{ fallbackInitials(child) }}</span
+          >
+        }
+      </span>
+
+      <span class="min-w-0 flex-1">
+        <span [class]="entryTitleClasses(child)">{{ child.title }}</span>
+        @if (child.subtitle) {
+          <span [class]="entrySubtitleClasses(child)">{{ child.subtitle }}</span>
+        }
+      </span>
+
+      @if (child.badge?.title; as badgeTitle) {
+        <span
+          [class]="
+            child.badge?.classes ??
+            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-muted-foreground'
+          "
+          >{{ badgeTitle }}</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", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationEntryGridComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationEntryGrid',
+                    imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, IconComponent, NavigationItemComponent],
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `
+    @let branchItem = branch();
+
+    <!--
+      No id here: the surface that owns the branch id is the panel rendering
+      this grid (the navbar mega panel), and repeating it put two elements with
+      the same id on every navbar page.
+    -->
+    <div
+      role="group"
+      [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]="isEntryOpen(child) ? panelIdFor(child) : null"
+                    [disabled]="child.disabled || null"
+                    (click)="toggleEntry(child)"
+                  >
+                    <ng-container
+                      [ngTemplateOutlet]="entryContent"
+                      [ngTemplateOutletContext]="{ $implicit: child, active: isItemActive(child) }"
+                    />
+                    <Icon
+                      name="chevron_right"
+                      size="inherit"
+                      [class]="entryChevronClasses(child)"
+                    />
+                  </button>
+
+                  @if (isEntryOpen(child)) {
+                    <ul [id]="panelIdFor(child)" 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"
+                      [attr.rel]="relFor(child)"
+                      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="inherit"
+              [fill]="1"
+              [class]="entryIconGlyphClasses(child)"
+            />
+          }
+        } @else {
+          <span
+            aria-hidden="true"
+            class="text-(length:--nav-icon-size-sub) font-semibold uppercase"
+            >{{ fallbackInitials(child) }}</span
+          >
+        }
+      </span>
+
+      <span class="min-w-0 flex-1">
+        <span [class]="entryTitleClasses(child)">{{ child.title }}</span>
+        @if (child.subtitle) {
+          <span [class]="entrySubtitleClasses(child)">{{ child.subtitle }}</span>
+        }
+      </span>
+
+      @if (child.badge?.title; as badgeTitle) {
+        <span
+          [class]="
+            child.badge?.classes ??
+            'nav-badge inline-flex h-5 shrink-0 items-center self-center rounded-full bg-muted px-2 text-muted-foreground'
+          "
+          >{{ badgeTitle }}</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 };