@ojiepermana/angular 0.1.0 → 21.0.0

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

@@ -1,785 +0,0 @@
-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