@ojiepermana/angular 0.0.2 → 0.1.0

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

@@ -0,0 +1,785 @@
+import * as i0 from '@angular/core';
+import { inject, signal, input, output, computed, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { shouldRenderNavigationItem, hasNavigationChildren, NavigationService, getNavigationItemAction } from '@ojiepermana/angular/navigation';
+import { trackNavigationTreeItem, getNavigationTreePathKey, isNavigationTreeItemExpanded, toggleNavigationTreeItemExpanded, NavigationItemContent, NavigationTreeOutlet } from '@ojiepermana/angular/internal';
+import * as i2 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i1 from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
+
+class HorizontalNavigationBranchItem {
+    _menuTrigger;
+    _rootTrigger;
+    _activeChildBranch = null;
+    _document = inject(DOCUMENT);
+    isMenuOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMenuOpen" }] : /* istanbul ignore next */ []));
+    expandedInlineBranchByParent = signal({}, ...(ngDevMode ? [{ debugName: "expandedInlineBranchByParent" }] : /* istanbul ignore next */ []));
+    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
+    menuItem = input(false, ...(ngDevMode ? [{ debugName: "menuItem" }] : /* istanbul ignore next */ []));
+    nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : /* istanbul ignore next */ []));
+    itemClicked = output();
+    branchOpened = output();
+    branchClosed = output();
+    itemChildren = computed(() => this.item().children ?? [], ...(ngDevMode ? [{ debugName: "itemChildren" }] : /* istanbul ignore next */ []));
+    treeTemplateData = computed(() => ({ inlineBranch: !this.menuItem() }), ...(ngDevMode ? [{ debugName: "treeTemplateData" }] : /* istanbul ignore next */ []));
+    treeTrackByFn = trackNavigationTreeItem;
+    treeShouldRenderItemFn = shouldRenderNavigationItem;
+    treeHasChildrenFn = hasNavigationChildren;
+    treeResolveParentKeyFn = getNavigationTreePathKey;
+    menuPanelClass = computed(() => this.menuItem()
+        ? 'horizontal-navigation-menu horizontal-navigation-menu--nested'
+        : 'horizontal-navigation-menu horizontal-navigation-menu--root', ...(ngDevMode ? [{ debugName: "menuPanelClass" }] : /* istanbul ignore next */ []));
+    hasChildren(item) {
+        return hasNavigationChildren(item);
+    }
+    shouldRenderItem(item) {
+        return shouldRenderNavigationItem(item);
+    }
+    trackByFn(index, item) {
+        return trackNavigationTreeItem(index, item) ?? index;
+    }
+    onMenuItemTriggerClick(event) {
+        event.stopPropagation();
+    }
+    onChildItemClicked(child) {
+        this.itemClicked.emit(child);
+    }
+    isInlineBranchExpanded(item, parentKey) {
+        return isNavigationTreeItemExpanded(this.expandedInlineBranchByParent(), parentKey, item);
+    }
+    toggleInlineBranch(item, parentKey) {
+        this.expandedInlineBranchByParent.update((current) => toggleNavigationTreeItemExpanded(current, parentKey, item));
+    }
+    onInlineBranchHeaderClick(event, item, parentKey) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.toggleInlineBranch(item, parentKey);
+    }
+    getPathKey(parentKey, item) {
+        return getNavigationTreePathKey(parentKey, item);
+    }
+    onChildBranchOpened(branch) {
+        if (this._activeChildBranch && this._activeChildBranch !== branch) {
+            this._activeChildBranch.closeMenu();
+        }
+        this._activeChildBranch = branch;
+    }
+    onChildBranchClosed(branch) {
+        if (this._activeChildBranch === branch) {
+            this._activeChildBranch = null;
+        }
+    }
+    handleMenuOpened() {
+        this.isMenuOpen.set(true);
+        this._syncRootTriggerWidth();
+        this.branchOpened.emit(this);
+    }
+    handleMenuClosed() {
+        this.isMenuOpen.set(false);
+        this._activeChildBranch?.closeMenu();
+        this._activeChildBranch = null;
+        this.branchClosed.emit(this);
+    }
+    closeMenu() {
+        this.isMenuOpen.set(false);
+        this._activeChildBranch?.closeMenu();
+        this._activeChildBranch = null;
+        this._menuTrigger?.closeMenu();
+    }
+    _syncRootTriggerWidth() {
+        if (this.menuItem()) {
+            return;
+        }
+        const width = this._rootTrigger?.nativeElement.offsetWidth;
+        if (!width) {
+            return;
+        }
+        this._document.documentElement.style.setProperty('--horizontal-navigation-root-trigger-width', `${width}px`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigationBranchItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: HorizontalNavigationBranchItem, isStandalone: true, selector: "horizontal-navigation-branch-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, menuItem: { classPropertyName: "menuItem", publicName: "menuItem", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked", branchOpened: "branchOpened", branchClosed: "branchClosed" }, viewQueries: [{ propertyName: "_menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }, { propertyName: "_rootTrigger", first: true, predicate: ["rootTrigger"], descendants: true }], ngImport: i0, template: `
+    @if (menuItem()) {
+      <button
+        type="button"
+        mat-menu-item
+        class="horizontal-navigation-menu-entry horizontal-navigation-menu-entry--branch"
+        [class.horizontal-navigation-menu-entry--nested]="nested()"
+        [class.horizontal-navigation-menu-entry--open]="isMenuOpen()"
+        [matMenuTriggerFor]="matMenu"
+        [matMenuTriggerRestoreFocus]="false"
+        (click)="onMenuItemTriggerClick($event)"
+        (menuOpened)="handleMenuOpened()"
+        (menuClosed)="handleMenuClosed()">
+        <ng-container
+          [ngTemplateOutlet]="itemBody"
+          [ngTemplateOutletContext]="{ $implicit: item(), level: nested() ? 1 : 0 }"></ng-container>
+        <span class="horizontal-navigation-item-dot" aria-hidden="true"></span>
+      </button>
+    } @else {
+      <button
+        type="button"
+        #rootTrigger
+        class="horizontal-navigation-root-trigger"
+        [class.horizontal-navigation-root-trigger--open]="isMenuOpen()"
+        [matMenuTriggerFor]="matMenu"
+        [matMenuTriggerRestoreFocus]="false"
+        (menuOpened)="handleMenuOpened()"
+        (menuClosed)="handleMenuClosed()">
+        <ng-container
+          [ngTemplateOutlet]="itemBody"
+          [ngTemplateOutletContext]="{ $implicit: item(), level: 0 }"></ng-container>
+        <span class="horizontal-navigation-item-dot" aria-hidden="true"></span>
+      </button>
+    }
+
+    <mat-menu
+      #matMenu="matMenu"
+      [class]="menuPanelClass()"
+      [hasBackdrop]="!menuItem()"
+      [overlapTrigger]="false"
+      xPosition="after"
+      yPosition="below">
+      <navigation-tree-outlet
+        [items]="itemChildren()"
+        [level]="0"
+        [parentKey]="getPathKey('root', item())"
+        [data]="treeTemplateData()"
+        [branchTemplate]="branchItem"
+        [leafTemplate]="leafItem"
+        [groupTemplate]="groupItem"
+        [dividerTemplate]="dividerItem"
+        [spacerTemplate]="spacerItem"
+        [trackByFn]="treeTrackByFn"
+        [shouldRenderItemFn]="treeShouldRenderItemFn"
+        [hasChildrenFn]="treeHasChildrenFn"
+        [resolveParentKeyFn]="treeResolveParentKeyFn" />
+    </mat-menu>
+
+    <ng-template #branchItem let-child let-level="level" let-parentKey="parentKey" let-isLast="isLast" let-data="data">
+      @if (data?.['inlineBranch']) {
+        <ng-container
+          [ngTemplateOutlet]="inlineBranchItem"
+          [ngTemplateOutletContext]="{
+            $implicit: child,
+            level: level,
+            parentKey: parentKey,
+            isLast: isLast,
+          }"></ng-container>
+      } @else {
+        <horizontal-navigation-branch-item
+          [item]="child"
+          [menuItem]="true"
+          [nested]="level > 0"
+          (itemClicked)="onChildItemClicked($event)"
+          (branchOpened)="onChildBranchOpened($event)"
+          (branchClosed)="onChildBranchClosed($event)" />
+      }
+    </ng-template>
+
+    <ng-template #groupItem let-child let-level="level" let-isLast="isLast">
+      <div
+        class="horizontal-navigation-group-label"
+        [class.horizontal-navigation-group-label--nested]="level > 0"
+        [class.horizontal-navigation-group-label--last]="isLast"
+        [style.--horizontal-navigation-item-level]="level">
+        {{ child.title }}
+      </div>
+    </ng-template>
+
+    <ng-template #dividerItem>
+      <mat-divider class="horizontal-navigation-divider"></mat-divider>
+    </ng-template>
+
+    <ng-template #spacerItem></ng-template>
+
+    <ng-template #inlineBranchItem let-child let-level="level" let-parentKey="parentKey" let-isLast="isLast">
+      <div
+        class="horizontal-navigation-inline-branch"
+        [class.horizontal-navigation-inline-branch--nested]="level > 0"
+        [class.horizontal-navigation-inline-branch--expanded]="isInlineBranchExpanded(child, parentKey)"
+        [class.horizontal-navigation-inline-branch--last]="isLast"
+        [style.--horizontal-navigation-item-level]="level">
+        <button
+          type="button"
+          class="horizontal-navigation-inline-branch-header"
+          [title]="child.tooltip"
+          [attr.aria-expanded]="isInlineBranchExpanded(child, parentKey)"
+          (click)="onInlineBranchHeaderClick($event, child, parentKey)">
+          <ng-container
+            [ngTemplateOutlet]="itemBody"
+            [ngTemplateOutletContext]="{ $implicit: child, level: level }"></ng-container>
+          <span class="horizontal-navigation-inline-branch-dot" aria-hidden="true"></span>
+        </button>
+
+        @if (isInlineBranchExpanded(child, parentKey)) {
+          <div
+            class="horizontal-navigation-inline-branch-children"
+            [style.--horizontal-navigation-child-level]="level + 1">
+            <navigation-tree-outlet
+              [items]="child.children || []"
+              [level]="level + 1"
+              [parentKey]="getPathKey(parentKey, child)"
+              [data]="treeTemplateData()"
+              [branchTemplate]="branchItem"
+              [leafTemplate]="leafItem"
+              [groupTemplate]="groupItem"
+              [dividerTemplate]="dividerItem"
+              [spacerTemplate]="spacerItem"
+              [trackByFn]="treeTrackByFn"
+              [shouldRenderItemFn]="treeShouldRenderItemFn"
+              [hasChildrenFn]="treeHasChildrenFn"
+              [resolveParentKeyFn]="treeResolveParentKeyFn" />
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #leafItem let-child let-level="level" let-isLast="isLast">
+      @if (child.link && !child.externalLink) {
+        <a
+          mat-menu-item
+          [routerLink]="child.link"
+          [title]="child.tooltip"
+          class="horizontal-navigation-menu-entry"
+          [class.horizontal-navigation-menu-entry--nested]="level > 0"
+          [class.horizontal-navigation-menu-entry--last]="isLast"
+          [style.--horizontal-navigation-item-level]="level"
+          (click)="onChildItemClicked(child)">
+          <ng-container
+            [ngTemplateOutlet]="itemBody"
+            [ngTemplateOutletContext]="{ $implicit: child, level: level }"></ng-container>
+        </a>
+      } @else if (child.link && child.externalLink) {
+        <a
+          mat-menu-item
+          [href]="child.link"
+          [target]="child.target || '_blank'"
+          [title]="child.tooltip"
+          class="horizontal-navigation-menu-entry"
+          [class.horizontal-navigation-menu-entry--nested]="level > 0"
+          [class.horizontal-navigation-menu-entry--last]="isLast"
+          [style.--horizontal-navigation-item-level]="level"
+          (click)="onChildItemClicked(child)">
+          <ng-container
+            [ngTemplateOutlet]="itemBody"
+            [ngTemplateOutletContext]="{ $implicit: child, level: level }"></ng-container>
+        </a>
+      } @else {
+        <button
+          type="button"
+          mat-menu-item
+          class="horizontal-navigation-menu-entry"
+          [class.horizontal-navigation-menu-entry--nested]="level > 0"
+          [class.horizontal-navigation-menu-entry--last]="isLast"
+          [style.--horizontal-navigation-item-level]="level"
+          [title]="child.tooltip"
+          (click)="onChildItemClicked(child)">
+          <ng-container
+            [ngTemplateOutlet]="itemBody"
+            [ngTemplateOutletContext]="{ $implicit: child, level: level }"></ng-container>
+        </button>
+      }
+    </ng-template>
+
+    <ng-template #itemBody let-currentItem let-level="level">
+      <navigation-item-content [item]="currentItem" [level]="level" variant="horizontal"></navigation-item-content>
+    </ng-template>
+  `, isInline: true, styles: [".horizontal-navigation-menu.mat-mdc-menu-panel{min-width:280px;max-width:360px;overflow:hidden;border:1px solid var(--border);border-radius:1rem;background:var(--popover);color:var(--popover-foreground);font-family:var(--nav-font-family);box-shadow:0 18px 48px #0f172a29,0 6px 18px #0f172a1a}.horizontal-navigation-menu--root.mat-mdc-menu-panel{margin-top:.5rem;position:relative;border-radius:1rem;overflow:hidden}.horizontal-navigation-menu--root.mat-mdc-menu-panel:before{display:none}.horizontal-navigation-menu--nested.mat-mdc-menu-panel{margin-left:.5rem}.horizontal-navigation-menu .mat-mdc-menu-content{padding:.5rem 0;background:var(--popover)}.horizontal-navigation-menu .mat-mdc-menu-item{min-height:3rem;line-height:normal;color:inherit;background:transparent}.horizontal-navigation-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center;width:100%;min-width:0;gap:.75rem}.horizontal-navigation-menu .horizontal-navigation-menu-entry.mat-mdc-menu-item-submenu-trigger .mat-mdc-menu-submenu-icon{display:none}.horizontal-navigation-root-trigger{display:inline-flex;align-items:center;gap:.75rem;width:auto;border:0;border-radius:0;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight);color:inherit;background:transparent;transition:background-color .15s ease,color .15s ease}.horizontal-navigation-menu-entry{display:flex;align-items:center;width:100%;gap:.875rem;border-radius:.75rem;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight);color:inherit;background:transparent;transition:background-color .15s ease,color .15s ease}.horizontal-navigation-root-trigger{position:relative;padding:0 .875rem 0 0;white-space:nowrap}.horizontal-navigation-menu-entry{box-sizing:border-box;padding:.75rem;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight)}.horizontal-navigation-menu-entry.horizontal-navigation-menu-entry--nested{position:relative;padding-left:calc(1rem + (var(--horizontal-navigation-item-level, 1) * .5rem))}.horizontal-navigation-root-trigger:hover,.horizontal-navigation-menu .horizontal-navigation-menu-entry:hover,.horizontal-navigation-menu .horizontal-navigation-menu-entry.cdk-program-focused,.horizontal-navigation-menu .horizontal-navigation-menu-entry.cdk-keyboard-focused,.horizontal-navigation-menu .horizontal-navigation-menu-entry.mat-mdc-menu-item-highlighted{background:var(--accent);color:var(--accent-foreground)}.horizontal-navigation-root-trigger:hover,.horizontal-navigation-root-trigger:focus-visible{background:transparent;color:inherit}.horizontal-navigation-root-trigger.horizontal-navigation-root-trigger--open{z-index:1101;border-color:transparent;padding-bottom:0;background:transparent;color:inherit;box-shadow:none}.horizontal-navigation-root-trigger.horizontal-navigation-root-trigger--open:hover,.horizontal-navigation-root-trigger.horizontal-navigation-root-trigger--open:focus-visible{background:transparent;color:inherit}.horizontal-navigation-item-body{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.875rem}.horizontal-navigation-item-leading{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.75rem}.horizontal-navigation-item-leading--nested:before{content:\"\";width:.875rem;min-width:.875rem;border-top:1px dashed var(--border);opacity:.9}.horizontal-navigation-item-icon{width:1.125rem;height:1.125rem;flex-shrink:0}.horizontal-navigation-item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-word}.horizontal-navigation-item-badge{margin-left:auto;display:inline-flex;align-items:center;padding:.1875rem .5rem;border-radius:9999px;font-size:.75rem;line-height:1rem;font-weight:500;flex-shrink:0}.horizontal-navigation-item-dot,.horizontal-navigation-inline-branch-dot{margin-left:auto;width:.5rem;height:.5rem;flex-shrink:0;border-radius:9999px;background:#9ca3af;opacity:.85;transition:background-color .18s ease,opacity .18s ease,transform .18s ease}.horizontal-navigation-inline-branch{padding:.125rem 0}.horizontal-navigation-inline-branch-header{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:.875rem .75rem .375rem;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight);color:var(--foreground);background:transparent;transition:background-color .15s ease,color .15s ease}.horizontal-navigation-inline-branch-header:hover,.horizontal-navigation-inline-branch-header:focus-visible{background:var(--accent);color:var(--accent-foreground)}.horizontal-navigation-inline-branch--nested .horizontal-navigation-inline-branch-header{position:relative;padding-left:calc(1rem + (var(--horizontal-navigation-item-level, 1) * .5rem))}.horizontal-navigation-root-trigger.horizontal-navigation-root-trigger--open .horizontal-navigation-item-dot,.horizontal-navigation-menu-entry.horizontal-navigation-menu-entry--open .horizontal-navigation-item-dot,.horizontal-navigation-inline-branch--expanded>.horizontal-navigation-inline-branch-header .horizontal-navigation-inline-branch-dot{background:#16a34a;opacity:1;transform:scale(1.1)}.horizontal-navigation-inline-branch-header:hover .horizontal-navigation-inline-branch-dot,.horizontal-navigation-menu .horizontal-navigation-menu-entry--branch:hover .horizontal-navigation-item-dot,.horizontal-navigation-root-trigger:hover .horizontal-navigation-item-dot{opacity:1}.horizontal-navigation-inline-branch-children{position:relative;display:block;overflow:hidden;padding-left:0;padding-bottom:.25rem}.horizontal-navigation-inline-branch-children:before{content:\"\";position:absolute;left:calc(.875rem + ((var(--horizontal-navigation-child-level, 1) - 1) * 1rem));top:-.25rem;bottom:0;border-left:1px dashed color-mix(in srgb,var(--border) 82%,transparent);pointer-events:none}.horizontal-navigation-group-label{padding:.875rem .75rem .375rem;font-size:var(--nav-group-title-font-size);line-height:var(--nav-group-title-line-height);font-weight:var(--nav-group-title-font-weight);text-transform:uppercase;letter-spacing:var(--nav-group-title-letter-spacing);color:var(--muted-foreground)}.horizontal-navigation-group-label--nested{position:relative;padding-left:calc(1rem + (var(--horizontal-navigation-item-level, 1) * .5rem))}.horizontal-navigation-group-label--nested:before{content:\"\";position:absolute;left:calc(.875rem + ((var(--horizontal-navigation-item-level, 1) - 1) * 1rem));top:calc(50% + .375rem);width:.875rem;border-top:1px dashed var(--border);transform:translateY(-50%);pointer-events:none}.horizontal-navigation-menu-entry.horizontal-navigation-menu-entry--nested.horizontal-navigation-menu-entry--last:after,.horizontal-navigation-group-label--nested.horizontal-navigation-group-label--last:after,.horizontal-navigation-inline-branch--nested.horizontal-navigation-inline-branch--last:not(.horizontal-navigation-inline-branch--expanded) .horizontal-navigation-inline-branch-header:after{content:\"\";position:absolute;left:calc(.875rem + ((var(--horizontal-navigation-item-level, 1) - 1) * 1rem));top:calc(50% + .375rem);bottom:-.5rem;width:2px;background:var(--popover);transform:translate(-50%);pointer-events:none}.horizontal-navigation-menu .horizontal-navigation-divider{margin:.375rem 0;border-top-color:var(--border)}.cdk-overlay-pane .horizontal-navigation-menu.mat-mdc-menu-panel{z-index:1000}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => HorizontalNavigationBranchItem), selector: "horizontal-navigation-branch-item", inputs: ["item", "menuItem", "nested"], outputs: ["itemClicked", "branchOpened", "branchClosed"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatMenuModule) }, { kind: "component", type: i0.forwardRef(() => i1.MatMenu), selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i0.forwardRef(() => i1.MatMenuItem), selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i0.forwardRef(() => i1.MatMenuTrigger), selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDividerModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i0.forwardRef(() => RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => NavigationItemContent), selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "component", type: i0.forwardRef(() => NavigationTreeOutlet), selector: "navigation-tree-outlet", inputs: ["items", "level", "parentKey", "data", "branchTemplate", "leafTemplate", "groupTemplate", "dividerTemplate", "spacerTemplate", "trackByFn", "shouldRenderItemFn", "hasChildrenFn", "resolveParentKeyFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigationBranchItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'horizontal-navigation-branch-item', template: `
+    @if (menuItem()) {
+      <button
+        type="button"
+        mat-menu-item
+        class="horizontal-navigation-menu-entry horizontal-navigation-menu-entry--branch"
+        [class.horizontal-navigation-menu-entry--nested]="nested()"
+        [class.horizontal-navigation-menu-entry--open]="isMenuOpen()"
+        [matMenuTriggerFor]="matMenu"
+        [matMenuTriggerRestoreFocus]="false"
+        (click)="onMenuItemTriggerClick($event)"
+        (menuOpened)="handleMenuOpened()"
+        (menuClosed)="handleMenuClosed()">
+        <ng-container
+          [ngTemplateOutlet]="itemBody"
+          [ngTemplateOutletContext]="{ $implicit: item(), level: nested() ? 1 : 0 }"></ng-container>
+        <span class="horizontal-navigation-item-dot" aria-hidden="true"></span>
+      </button>
+    } @else {
+      <button
+        type="button"
+        #rootTrigger
+        class="horizontal-navigation-root-trigger"
+        [class.horizontal-navigation-root-trigger--open]="isMenuOpen()"
+        [matMenuTriggerFor]="matMenu"
+        [matMenuTriggerRestoreFocus]="false"
+        (menuOpened)="handleMenuOpened()"
+        (menuClosed)="handleMenuClosed()">
+        <ng-container
+          [ngTemplateOutlet]="itemBody"
+          [ngTemplateOutletContext]="{ $implicit: item(), level: 0 }"></ng-container>
+        <span class="horizontal-navigation-item-dot" aria-hidden="true"></span>
+      </button>
+    }
+
+    <mat-menu
+      #matMenu="matMenu"
+      [class]="menuPanelClass()"
+      [hasBackdrop]="!menuItem()"
+      [overlapTrigger]="false"
+      xPosition="after"
+      yPosition="below">
+      <navigation-tree-outlet
+        [items]="itemChildren()"
+        [level]="0"
+        [parentKey]="getPathKey('root', item())"
+        [data]="treeTemplateData()"
+        [branchTemplate]="branchItem"
+        [leafTemplate]="leafItem"
+        [groupTemplate]="groupItem"
+        [dividerTemplate]="dividerItem"
+        [spacerTemplate]="spacerItem"
+        [trackByFn]="treeTrackByFn"
+        [shouldRenderItemFn]="treeShouldRenderItemFn"
+        [hasChildrenFn]="treeHasChildrenFn"
+        [resolveParentKeyFn]="treeResolveParentKeyFn" />
+    </mat-menu>
+
+    <ng-template #branchItem let-child let-level="level" let-parentKey="parentKey" let-isLast="isLast" let-data="data">
+      @if (data?.['inlineBranch']) {
+        <ng-container
+          [ngTemplateOutlet]="inlineBranchItem"
+          [ngTemplateOutletContext]="{
+            $implicit: child,
+            level: level,
+            parentKey: parentKey,
+            isLast: isLast,
+          }"></ng-container>
+      } @else {
+        <horizontal-navigation-branch-item
+          [item]="child"
+          [menuItem]="true"
+          [nested]="level > 0"
+          (itemClicked)="onChildItemClicked($event)"
+          (branchOpened)="onChildBranchOpened($event)"
+          (branchClosed)="onChildBranchClosed($event)" />
+      }
+    </ng-template>
+
+    <ng-template #groupItem let-child let-level="level" let-isLast="isLast">
+      <div
+        class="horizontal-navigation-group-label"
+        [class.horizontal-navigation-group-label--nested]="level > 0"
+        [class.horizontal-navigation-group-label--last]="isLast"
+        [style.--horizontal-navigation-item-level]="level">
+        {{ child.title }}
+      </div>
+    </ng-template>
+
+    <ng-template #dividerItem>
+      <mat-divider class="horizontal-navigation-divider"></mat-divider>
+    </ng-template>
+
+    <ng-template #spacerItem></ng-template>
+
+    <ng-template #inlineBranchItem let-child let-level="level" let-parentKey="parentKey" let-isLast="isLast">
+      <div
+        class="horizontal-navigation-inline-branch"
+        [class.horizontal-navigation-inline-branch--nested]="level > 0"
+        [class.horizontal-navigation-inline-branch--expanded]="isInlineBranchExpanded(child, parentKey)"
+        [class.horizontal-navigation-inline-branch--last]="isLast"
+        [style.--horizontal-navigation-item-level]="level">
+        <button
+          type="button"
+          class="horizontal-navigation-inline-branch-header"
+          [title]="child.tooltip"
+          [attr.aria-expanded]="isInlineBranchExpanded(child, parentKey)"
+          (click)="onInlineBranchHeaderClick($event, child, parentKey)">
+          <ng-container
+            [ngTemplateOutlet]="itemBody"
+            [ngTemplateOutletContext]="{ $implicit: child, level: level }"></ng-container>
+          <span class="horizontal-navigation-inline-branch-dot" aria-hidden="true"></span>
+        </button>
+
+        @if (isInlineBranchExpanded(child, parentKey)) {
+          <div
+            class="horizontal-navigation-inline-branch-children"
+            [style.--horizontal-navigation-child-level]="level + 1">
+            <navigation-tree-outlet
+              [items]="child.children || []"
+              [level]="level + 1"
+              [parentKey]="getPathKey(parentKey, child)"
+              [data]="treeTemplateData()"
+              [branchTemplate]="branchItem"
+              [leafTemplate]="leafItem"
+              [groupTemplate]="groupItem"
+              [dividerTemplate]="dividerItem"
+              [spacerTemplate]="spacerItem"
+              [trackByFn]="treeTrackByFn"
+              [shouldRenderItemFn]="treeShouldRenderItemFn"
+              [hasChildrenFn]="treeHasChildrenFn"
+              [resolveParentKeyFn]="treeResolveParentKeyFn" />
+          </div>
+        }
+      </div>
+    </ng-template>
+
+    <ng-template #leafItem let-child let-level="level" let-isLast="isLast">
+      @if (child.link && !child.externalLink) {
+        <a
+          mat-menu-item
+          [routerLink]="child.link"
+          [title]="child.tooltip"
+          class="horizontal-navigation-menu-entry"
+          [class.horizontal-navigation-menu-entry--nested]="level > 0"
+          [class.horizontal-navigation-menu-entry--last]="isLast"
+          [style.--horizontal-navigation-item-level]="level"
+          (click)="onChildItemClicked(child)">
+          <ng-container
+            [ngTemplateOutlet]="itemBody"
+            [ngTemplateOutletContext]="{ $implicit: child, level: level }"></ng-container>
+        </a>
+      } @else if (child.link && child.externalLink) {
+        <a
+          mat-menu-item
+          [href]="child.link"
+          [target]="child.target || '_blank'"
+          [title]="child.tooltip"
+          class="horizontal-navigation-menu-entry"
+          [class.horizontal-navigation-menu-entry--nested]="level > 0"
+          [class.horizontal-navigation-menu-entry--last]="isLast"
+          [style.--horizontal-navigation-item-level]="level"
+          (click)="onChildItemClicked(child)">
+          <ng-container
+            [ngTemplateOutlet]="itemBody"
+            [ngTemplateOutletContext]="{ $implicit: child, level: level }"></ng-container>
+        </a>
+      } @else {
+        <button
+          type="button"
+          mat-menu-item
+          class="horizontal-navigation-menu-entry"
+          [class.horizontal-navigation-menu-entry--nested]="level > 0"
+          [class.horizontal-navigation-menu-entry--last]="isLast"
+          [style.--horizontal-navigation-item-level]="level"
+          [title]="child.tooltip"
+          (click)="onChildItemClicked(child)">
+          <ng-container
+            [ngTemplateOutlet]="itemBody"
+            [ngTemplateOutletContext]="{ $implicit: child, level: level }"></ng-container>
+        </button>
+      }
+    </ng-template>
+
+    <ng-template #itemBody let-currentItem let-level="level">
+      <navigation-item-content [item]="currentItem" [level]="level" variant="horizontal"></navigation-item-content>
+    </ng-template>
+  `, imports: [
+                        MatMenuModule,
+                        MatDividerModule,
+                        RouterLink,
+                        NgTemplateOutlet,
+                        NavigationItemContent,
+                        NavigationTreeOutlet,
+                        forwardRef(() => HorizontalNavigationBranchItem),
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".horizontal-navigation-menu.mat-mdc-menu-panel{min-width:280px;max-width:360px;overflow:hidden;border:1px solid var(--border);border-radius:1rem;background:var(--popover);color:var(--popover-foreground);font-family:var(--nav-font-family);box-shadow:0 18px 48px #0f172a29,0 6px 18px #0f172a1a}.horizontal-navigation-menu--root.mat-mdc-menu-panel{margin-top:.5rem;position:relative;border-radius:1rem;overflow:hidden}.horizontal-navigation-menu--root.mat-mdc-menu-panel:before{display:none}.horizontal-navigation-menu--nested.mat-mdc-menu-panel{margin-left:.5rem}.horizontal-navigation-menu .mat-mdc-menu-content{padding:.5rem 0;background:var(--popover)}.horizontal-navigation-menu .mat-mdc-menu-item{min-height:3rem;line-height:normal;color:inherit;background:transparent}.horizontal-navigation-menu .mat-mdc-menu-item .mat-mdc-menu-item-text{display:flex;align-items:center;width:100%;min-width:0;gap:.75rem}.horizontal-navigation-menu .horizontal-navigation-menu-entry.mat-mdc-menu-item-submenu-trigger .mat-mdc-menu-submenu-icon{display:none}.horizontal-navigation-root-trigger{display:inline-flex;align-items:center;gap:.75rem;width:auto;border:0;border-radius:0;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight);color:inherit;background:transparent;transition:background-color .15s ease,color .15s ease}.horizontal-navigation-menu-entry{display:flex;align-items:center;width:100%;gap:.875rem;border-radius:.75rem;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight);color:inherit;background:transparent;transition:background-color .15s ease,color .15s ease}.horizontal-navigation-root-trigger{position:relative;padding:0 .875rem 0 0;white-space:nowrap}.horizontal-navigation-menu-entry{box-sizing:border-box;padding:.75rem;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight)}.horizontal-navigation-menu-entry.horizontal-navigation-menu-entry--nested{position:relative;padding-left:calc(1rem + (var(--horizontal-navigation-item-level, 1) * .5rem))}.horizontal-navigation-root-trigger:hover,.horizontal-navigation-menu .horizontal-navigation-menu-entry:hover,.horizontal-navigation-menu .horizontal-navigation-menu-entry.cdk-program-focused,.horizontal-navigation-menu .horizontal-navigation-menu-entry.cdk-keyboard-focused,.horizontal-navigation-menu .horizontal-navigation-menu-entry.mat-mdc-menu-item-highlighted{background:var(--accent);color:var(--accent-foreground)}.horizontal-navigation-root-trigger:hover,.horizontal-navigation-root-trigger:focus-visible{background:transparent;color:inherit}.horizontal-navigation-root-trigger.horizontal-navigation-root-trigger--open{z-index:1101;border-color:transparent;padding-bottom:0;background:transparent;color:inherit;box-shadow:none}.horizontal-navigation-root-trigger.horizontal-navigation-root-trigger--open:hover,.horizontal-navigation-root-trigger.horizontal-navigation-root-trigger--open:focus-visible{background:transparent;color:inherit}.horizontal-navigation-item-body{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.875rem}.horizontal-navigation-item-leading{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.75rem}.horizontal-navigation-item-leading--nested:before{content:\"\";width:.875rem;min-width:.875rem;border-top:1px dashed var(--border);opacity:.9}.horizontal-navigation-item-icon{width:1.125rem;height:1.125rem;flex-shrink:0}.horizontal-navigation-item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-word}.horizontal-navigation-item-badge{margin-left:auto;display:inline-flex;align-items:center;padding:.1875rem .5rem;border-radius:9999px;font-size:.75rem;line-height:1rem;font-weight:500;flex-shrink:0}.horizontal-navigation-item-dot,.horizontal-navigation-inline-branch-dot{margin-left:auto;width:.5rem;height:.5rem;flex-shrink:0;border-radius:9999px;background:#9ca3af;opacity:.85;transition:background-color .18s ease,opacity .18s ease,transform .18s ease}.horizontal-navigation-inline-branch{padding:.125rem 0}.horizontal-navigation-inline-branch-header{display:flex;align-items:center;width:100%;box-sizing:border-box;padding:.875rem .75rem .375rem;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight);color:var(--foreground);background:transparent;transition:background-color .15s ease,color .15s ease}.horizontal-navigation-inline-branch-header:hover,.horizontal-navigation-inline-branch-header:focus-visible{background:var(--accent);color:var(--accent-foreground)}.horizontal-navigation-inline-branch--nested .horizontal-navigation-inline-branch-header{position:relative;padding-left:calc(1rem + (var(--horizontal-navigation-item-level, 1) * .5rem))}.horizontal-navigation-root-trigger.horizontal-navigation-root-trigger--open .horizontal-navigation-item-dot,.horizontal-navigation-menu-entry.horizontal-navigation-menu-entry--open .horizontal-navigation-item-dot,.horizontal-navigation-inline-branch--expanded>.horizontal-navigation-inline-branch-header .horizontal-navigation-inline-branch-dot{background:#16a34a;opacity:1;transform:scale(1.1)}.horizontal-navigation-inline-branch-header:hover .horizontal-navigation-inline-branch-dot,.horizontal-navigation-menu .horizontal-navigation-menu-entry--branch:hover .horizontal-navigation-item-dot,.horizontal-navigation-root-trigger:hover .horizontal-navigation-item-dot{opacity:1}.horizontal-navigation-inline-branch-children{position:relative;display:block;overflow:hidden;padding-left:0;padding-bottom:.25rem}.horizontal-navigation-inline-branch-children:before{content:\"\";position:absolute;left:calc(.875rem + ((var(--horizontal-navigation-child-level, 1) - 1) * 1rem));top:-.25rem;bottom:0;border-left:1px dashed color-mix(in srgb,var(--border) 82%,transparent);pointer-events:none}.horizontal-navigation-group-label{padding:.875rem .75rem .375rem;font-size:var(--nav-group-title-font-size);line-height:var(--nav-group-title-line-height);font-weight:var(--nav-group-title-font-weight);text-transform:uppercase;letter-spacing:var(--nav-group-title-letter-spacing);color:var(--muted-foreground)}.horizontal-navigation-group-label--nested{position:relative;padding-left:calc(1rem + (var(--horizontal-navigation-item-level, 1) * .5rem))}.horizontal-navigation-group-label--nested:before{content:\"\";position:absolute;left:calc(.875rem + ((var(--horizontal-navigation-item-level, 1) - 1) * 1rem));top:calc(50% + .375rem);width:.875rem;border-top:1px dashed var(--border);transform:translateY(-50%);pointer-events:none}.horizontal-navigation-menu-entry.horizontal-navigation-menu-entry--nested.horizontal-navigation-menu-entry--last:after,.horizontal-navigation-group-label--nested.horizontal-navigation-group-label--last:after,.horizontal-navigation-inline-branch--nested.horizontal-navigation-inline-branch--last:not(.horizontal-navigation-inline-branch--expanded) .horizontal-navigation-inline-branch-header:after{content:\"\";position:absolute;left:calc(.875rem + ((var(--horizontal-navigation-item-level, 1) - 1) * 1rem));top:calc(50% + .375rem);bottom:-.5rem;width:2px;background:var(--popover);transform:translate(-50%);pointer-events:none}.horizontal-navigation-menu .horizontal-navigation-divider{margin:.375rem 0;border-top-color:var(--border)}.cdk-overlay-pane .horizontal-navigation-menu.mat-mdc-menu-panel{z-index:1000}\n"] }]
+        }], propDecorators: { _menuTrigger: [{
+                type: ViewChild,
+                args: [MatMenuTrigger]
+            }], _rootTrigger: [{
+                type: ViewChild,
+                args: ['rootTrigger']
+            }], item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], menuItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItem", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], branchOpened: [{ type: i0.Output, args: ["branchOpened"] }], branchClosed: [{ type: i0.Output, args: ["branchClosed"] }] } });
+
+class HorizontalNavigation {
+    _navigationService = inject(NavigationService);
+    _activeRootBranch = null;
+    // Navigation name identifier
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    // Input for navigation data
+    navigation = input([], ...(ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []));
+    // Output for item clicks
+    itemClicked = output();
+    // Computed navigation data (from input or service)
+    navigationData = computed(() => {
+        const inputData = this.navigation();
+        if (inputData.length > 0) {
+            return inputData;
+        }
+        return this._navigationService.getNavigation();
+    }, ...(ngDevMode ? [{ debugName: "navigationData" }] : /* istanbul ignore next */ []));
+    /**
+     * Handle item click
+     */
+    onItemClicked(item) {
+        getNavigationItemAction(item)?.(item);
+        this.itemClicked.emit(item);
+    }
+    onRootBranchOpened(branch) {
+        if (this._activeRootBranch && this._activeRootBranch !== branch) {
+            this._activeRootBranch.closeMenu();
+        }
+        this._activeRootBranch = branch;
+    }
+    onRootBranchClosed(branch) {
+        if (this._activeRootBranch === branch) {
+            this._activeRootBranch = null;
+        }
+    }
+    shouldRenderItem(item) {
+        return shouldRenderNavigationItem(item);
+    }
+    hasChildren(item) {
+        return hasNavigationChildren(item);
+    }
+    /**
+     * Get flat navigation for utility purposes
+     */
+    getFlatNavigation() {
+        return this._navigationService.getFlatNavigation(this.navigationData());
+    }
+    /**
+     * Get navigation item by ID
+     */
+    getItem(id) {
+        return this._navigationService.getItem(id, this.navigationData());
+    }
+    /**
+     * Get navigation item parent by ID
+     */
+    getItemParent(id) {
+        return this._navigationService.getItemParent(id, this.navigationData(), this.navigationData());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: HorizontalNavigation, isStandalone: true, selector: "horizontal-navigation", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, navigation: { classPropertyName: "navigation", publicName: "navigation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClicked: "itemClicked" }, ngImport: i0, template: `
+    <nav class="horizontal-navigation">
+      @if (navigationData()) {
+        <div class="horizontal-navigation-items">
+          @for (item of navigationData(); track item.id || item.title) {
+            @if (shouldRenderItem(item)) {
+              @switch (item.type) {
+                @case ('basic') {
+                  @if (item.link) {
+                    <a
+                      [routerLink]="item.link"
+                      [title]="item.tooltip"
+                      class="horizontal-navigation-root-trigger"
+                      (click)="onItemClicked(item)">
+                      <ng-container
+                        [ngTemplateOutlet]="itemBody"
+                        [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                    </a>
+                  } @else {
+                    <button
+                      type="button"
+                      class="horizontal-navigation-root-trigger"
+                      [title]="item.tooltip"
+                      (click)="onItemClicked(item)"
+                      (keydown.enter)="onItemClicked(item)"
+                      (keydown.space)="$event.preventDefault(); onItemClicked(item)">
+                      <ng-container
+                        [ngTemplateOutlet]="itemBody"
+                        [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                    </button>
+                  }
+                }
+
+                @case ('collapsable') {
+                  @if (hasChildren(item)) {
+                    <horizontal-navigation-branch-item
+                      [item]="item"
+                      (itemClicked)="onItemClicked($event)"
+                      (branchOpened)="onRootBranchOpened($event)"
+                      (branchClosed)="onRootBranchClosed($event)" />
+                  } @else {
+                    <button
+                      type="button"
+                      class="horizontal-navigation-root-trigger"
+                      [title]="item.tooltip"
+                      (click)="onItemClicked(item)"
+                      (keydown.enter)="onItemClicked(item)"
+                      (keydown.space)="$event.preventDefault(); onItemClicked(item)">
+                      <ng-container
+                        [ngTemplateOutlet]="itemBody"
+                        [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                    </button>
+                  }
+                }
+
+                @case ('group') {
+                  @if (hasChildren(item)) {
+                    <horizontal-navigation-branch-item
+                      [item]="item"
+                      (itemClicked)="onItemClicked($event)"
+                      (branchOpened)="onRootBranchOpened($event)"
+                      (branchClosed)="onRootBranchClosed($event)" />
+                  } @else {
+                    <button
+                      type="button"
+                      class="horizontal-navigation-root-trigger"
+                      [title]="item.tooltip"
+                      (click)="onItemClicked(item)"
+                      (keydown.enter)="onItemClicked(item)"
+                      (keydown.space)="$event.preventDefault(); onItemClicked(item)">
+                      <ng-container
+                        [ngTemplateOutlet]="itemBody"
+                        [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                    </button>
+                  }
+                }
+
+                @case ('divider') {
+                  <div class="w-px h-6 bg-border mx-2"></div>
+                }
+
+                @case ('spacer') {
+                  <div class="flex-1"></div>
+                }
+
+                @default {
+                  <button
+                    type="button"
+                    class="horizontal-navigation-root-trigger"
+                    [title]="item.tooltip"
+                    (click)="onItemClicked(item)"
+                    (keydown.enter)="onItemClicked(item)"
+                    (keydown.space)="$event.preventDefault(); onItemClicked(item)">
+                    <ng-container
+                      [ngTemplateOutlet]="itemBody"
+                      [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                  </button>
+                }
+              }
+            }
+          }
+        </div>
+      }
+
+      <ng-template #itemBody let-currentItem>
+        <navigation-item-content [item]="currentItem" variant="horizontal"></navigation-item-content>
+      </ng-template>
+    </nav>
+  `, isInline: true, styles: [".horizontal-navigation{@apply w-full;font-family:var(--nav-font-family)}.horizontal-navigation-items{display:flex;align-items:center;gap:.25rem;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.5) transparent}.horizontal-navigation-items::-webkit-scrollbar{height:4px}.horizontal-navigation-items::-webkit-scrollbar-track{background:transparent}.horizontal-navigation-items::-webkit-scrollbar-thumb{background:#9ca3af80;border-radius:2px}.horizontal-navigation-items::-webkit-scrollbar-thumb:hover{background:#9ca3afcc}.horizontal-navigation-root-trigger{display:inline-flex;align-items:center;gap:.75rem;width:auto;padding:.5rem 1rem .5rem .75rem;border-radius:.5rem;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight);color:inherit;background:transparent;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.horizontal-navigation-root-trigger:hover,.horizontal-navigation-root-trigger:focus-visible{background:var(--accent);color:var(--accent-foreground)}.horizontal-navigation-item-body{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.75rem}.horizontal-navigation-item-leading{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.625rem}.horizontal-navigation-item-icon{width:1rem;height:1rem;flex-shrink:0}.horizontal-navigation-item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.horizontal-navigation-item-badge{margin-left:auto;display:inline-flex;align-items:center;padding:.125rem .375rem;border-radius:9999px;font-size:var(--nav-badge-font-size);line-height:var(--nav-badge-line-height);font-weight:var(--nav-badge-font-weight);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NavigationItemContent, selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "component", type: HorizontalNavigationBranchItem, selector: "horizontal-navigation-branch-item", inputs: ["item", "menuItem", "nested"], outputs: ["itemClicked", "branchOpened", "branchClosed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigation, decorators: [{
+            type: Component,
+            args: [{ selector: 'horizontal-navigation', template: `
+    <nav class="horizontal-navigation">
+      @if (navigationData()) {
+        <div class="horizontal-navigation-items">
+          @for (item of navigationData(); track item.id || item.title) {
+            @if (shouldRenderItem(item)) {
+              @switch (item.type) {
+                @case ('basic') {
+                  @if (item.link) {
+                    <a
+                      [routerLink]="item.link"
+                      [title]="item.tooltip"
+                      class="horizontal-navigation-root-trigger"
+                      (click)="onItemClicked(item)">
+                      <ng-container
+                        [ngTemplateOutlet]="itemBody"
+                        [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                    </a>
+                  } @else {
+                    <button
+                      type="button"
+                      class="horizontal-navigation-root-trigger"
+                      [title]="item.tooltip"
+                      (click)="onItemClicked(item)"
+                      (keydown.enter)="onItemClicked(item)"
+                      (keydown.space)="$event.preventDefault(); onItemClicked(item)">
+                      <ng-container
+                        [ngTemplateOutlet]="itemBody"
+                        [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                    </button>
+                  }
+                }
+
+                @case ('collapsable') {
+                  @if (hasChildren(item)) {
+                    <horizontal-navigation-branch-item
+                      [item]="item"
+                      (itemClicked)="onItemClicked($event)"
+                      (branchOpened)="onRootBranchOpened($event)"
+                      (branchClosed)="onRootBranchClosed($event)" />
+                  } @else {
+                    <button
+                      type="button"
+                      class="horizontal-navigation-root-trigger"
+                      [title]="item.tooltip"
+                      (click)="onItemClicked(item)"
+                      (keydown.enter)="onItemClicked(item)"
+                      (keydown.space)="$event.preventDefault(); onItemClicked(item)">
+                      <ng-container
+                        [ngTemplateOutlet]="itemBody"
+                        [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                    </button>
+                  }
+                }
+
+                @case ('group') {
+                  @if (hasChildren(item)) {
+                    <horizontal-navigation-branch-item
+                      [item]="item"
+                      (itemClicked)="onItemClicked($event)"
+                      (branchOpened)="onRootBranchOpened($event)"
+                      (branchClosed)="onRootBranchClosed($event)" />
+                  } @else {
+                    <button
+                      type="button"
+                      class="horizontal-navigation-root-trigger"
+                      [title]="item.tooltip"
+                      (click)="onItemClicked(item)"
+                      (keydown.enter)="onItemClicked(item)"
+                      (keydown.space)="$event.preventDefault(); onItemClicked(item)">
+                      <ng-container
+                        [ngTemplateOutlet]="itemBody"
+                        [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                    </button>
+                  }
+                }
+
+                @case ('divider') {
+                  <div class="w-px h-6 bg-border mx-2"></div>
+                }
+
+                @case ('spacer') {
+                  <div class="flex-1"></div>
+                }
+
+                @default {
+                  <button
+                    type="button"
+                    class="horizontal-navigation-root-trigger"
+                    [title]="item.tooltip"
+                    (click)="onItemClicked(item)"
+                    (keydown.enter)="onItemClicked(item)"
+                    (keydown.space)="$event.preventDefault(); onItemClicked(item)">
+                    <ng-container
+                      [ngTemplateOutlet]="itemBody"
+                      [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                  </button>
+                }
+              }
+            }
+          }
+        </div>
+      }
+
+      <ng-template #itemBody let-currentItem>
+        <navigation-item-content [item]="currentItem" variant="horizontal"></navigation-item-content>
+      </ng-template>
+    </nav>
+  `, imports: [RouterLink, NgTemplateOutlet, NavigationItemContent, HorizontalNavigationBranchItem], styles: [".horizontal-navigation{@apply w-full;font-family:var(--nav-font-family)}.horizontal-navigation-items{display:flex;align-items:center;gap:.25rem;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.5) transparent}.horizontal-navigation-items::-webkit-scrollbar{height:4px}.horizontal-navigation-items::-webkit-scrollbar-track{background:transparent}.horizontal-navigation-items::-webkit-scrollbar-thumb{background:#9ca3af80;border-radius:2px}.horizontal-navigation-items::-webkit-scrollbar-thumb:hover{background:#9ca3afcc}.horizontal-navigation-root-trigger{display:inline-flex;align-items:center;gap:.75rem;width:auto;padding:.5rem 1rem .5rem .75rem;border-radius:.5rem;font-size:var(--nav-item-font-size);line-height:var(--nav-item-line-height);font-weight:var(--nav-item-font-weight);color:inherit;background:transparent;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.horizontal-navigation-root-trigger:hover,.horizontal-navigation-root-trigger:focus-visible{background:var(--accent);color:var(--accent-foreground)}.horizontal-navigation-item-body{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.75rem}.horizontal-navigation-item-leading{display:flex;align-items:center;flex:1 1 auto;min-width:0;gap:.625rem}.horizontal-navigation-item-icon{width:1rem;height:1rem;flex-shrink:0}.horizontal-navigation-item-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.horizontal-navigation-item-badge{margin-left:auto;display:inline-flex;align-items:center;padding:.125rem .375rem;border-radius:9999px;font-size:var(--nav-badge-font-size);line-height:var(--nav-badge-line-height);font-weight:var(--nav-badge-font-weight);flex-shrink:0}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], navigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigation", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HorizontalNavigation, HorizontalNavigationBranchItem };
+//# sourceMappingURL=ojiepermana-angular-navigation-horizontal.mjs.map