@ojiepermana/angular 0.0.3 → 0.1.1

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

@@ -0,0 +1,721 @@
+import * as i0 from '@angular/core';
+import { inject, input, output, computed, Directive, signal, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NavigationService, getNavigationItemAction, shouldRenderNavigationItem, hasNavigationChildren } from '@ojiepermana/angular/navigation';
+import * as i2$1 from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i1$1 from '@angular/router';
+import { RouterLink } from '@angular/router';
+import * as i3 from '@ojiepermana/angular/internal';
+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 HorizontalNavigationBaseComponent {
+    _navigationService = inject(NavigationService);
+    _activeRootBranch = null;
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    navigation = input([], ...(ngDevMode ? [{ debugName: "navigation" }] : /* istanbul ignore next */ []));
+    itemClicked = output();
+    navigationData = computed(() => {
+        const inputData = this.navigation();
+        if (inputData.length > 0) {
+            return inputData;
+        }
+        return this._navigationService.getNavigation();
+    }, ...(ngDevMode ? [{ debugName: "navigationData" }] : /* istanbul ignore next */ []));
+    isMegaVariant() {
+        return this.variant === 'mega';
+    }
+    onItemClicked(item) {
+        if (item.id) {
+            this._navigationService.setActiveItem(item.id);
+        }
+        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);
+    }
+    getFlatNavigation() {
+        return this._navigationService.getFlatNavigation(this.navigationData());
+    }
+    getItem(id) {
+        return this._navigationService.getItem(id, this.navigationData());
+    }
+    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: HorizontalNavigationBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: HorizontalNavigationBaseComponent, isStandalone: true, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigationBaseComponent, decorators: [{
+            type: Directive
+        }], 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"] }] } });
+
+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 */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* 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(() => {
+        const nestingClass = this.menuItem() ? 'horizontal-navigation-menu--nested' : 'horizontal-navigation-menu--root';
+        const variantClass = this.variant() === 'mega' ? 'horizontal-navigation-menu--mega' : 'horizontal-navigation-menu--default';
+        return `horizontal-navigation-menu ${nestingClass} ${variantClass}`;
+    }, ...(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 }, variant: { classPropertyName: "variant", publicName: "variant", 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--mega]="variant() === 'mega'"
+        [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--mega]="variant() === 'mega'"
+        [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"
+          [variant]="variant()"
+          (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"
+          [class.horizontal-navigation-inline-branch-header--mega]="variant() === 'mega'"
+          [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--mega]="variant() === 'mega'"
+          [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--mega]="variant() === 'mega'"
+          [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--mega]="variant() === 'mega'"
+          [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--mega.mat-mdc-menu-panel{min-width:22rem;max-width:min(42rem,calc(100vw - 2rem));border-radius:1.25rem}.horizontal-navigation-menu .mat-mdc-menu-content{padding:.5rem 0;background:var(--popover)}.horizontal-navigation-menu--mega .mat-mdc-menu-content{padding:.75rem}.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--mega{min-height:3rem;padding-right:1rem}.horizontal-navigation-menu-entry--mega{min-height:3.25rem;padding:.875rem;border-radius:.875rem}.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-header--mega{padding-top:1rem;padding-bottom:.5rem;border-radius:.875rem}.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", "variant"], 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--mega]="variant() === 'mega'"
+        [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--mega]="variant() === 'mega'"
+        [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"
+          [variant]="variant()"
+          (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"
+          [class.horizontal-navigation-inline-branch-header--mega]="variant() === 'mega'"
+          [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--mega]="variant() === 'mega'"
+          [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--mega]="variant() === 'mega'"
+          [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--mega]="variant() === 'mega'"
+          [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--mega.mat-mdc-menu-panel{min-width:22rem;max-width:min(42rem,calc(100vw - 2rem));border-radius:1.25rem}.horizontal-navigation-menu .mat-mdc-menu-content{padding:.5rem 0;background:var(--popover)}.horizontal-navigation-menu--mega .mat-mdc-menu-content{padding:.75rem}.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--mega{min-height:3rem;padding-right:1rem}.horizontal-navigation-menu-entry--mega{min-height:3.25rem;padding:.875rem;border-radius:.875rem}.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-header--mega{padding-top:1rem;padding-bottom:.5rem;border-radius:.875rem}.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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], branchOpened: [{ type: i0.Output, args: ["branchOpened"] }], branchClosed: [{ type: i0.Output, args: ["branchClosed"] }] } });
+
+const HORIZONTAL_NAVIGATION_TEMPLATE = `
+  <nav class="horizontal-navigation" [class.horizontal-navigation--mega]="isMegaVariant()">
+    @if (navigationData()) {
+      <div class="horizontal-navigation-items" [class.horizontal-navigation-items--mega]="isMegaVariant()">
+        @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"
+                    [class.horizontal-navigation-root-trigger--mega]="isMegaVariant()"
+                    (click)="onItemClicked(item)">
+                    <ng-container
+                      [ngTemplateOutlet]="itemBody"
+                      [ngTemplateOutletContext]="{ $implicit: item }"></ng-container>
+                  </a>
+                } @else {
+                  <button
+                    type="button"
+                    class="horizontal-navigation-root-trigger"
+                    [class.horizontal-navigation-root-trigger--mega]="isMegaVariant()"
+                    [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"
+                    [variant]="variant"
+                    (itemClicked)="onItemClicked($event)"
+                    (branchOpened)="onRootBranchOpened($event)"
+                    (branchClosed)="onRootBranchClosed($event)" />
+                } @else {
+                  <button
+                    type="button"
+                    class="horizontal-navigation-root-trigger"
+                    [class.horizontal-navigation-root-trigger--mega]="isMegaVariant()"
+                    [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"
+                    [variant]="variant"
+                    (itemClicked)="onItemClicked($event)"
+                    (branchOpened)="onRootBranchOpened($event)"
+                    (branchClosed)="onRootBranchClosed($event)" />
+                } @else {
+                  <button
+                    type="button"
+                    class="horizontal-navigation-root-trigger"
+                    [class.horizontal-navigation-root-trigger--mega]="isMegaVariant()"
+                    [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="h-6 w-px bg-border mx-2"></div>
+              }
+
+              @case ('spacer') {
+                <div class="flex-1"></div>
+              }
+
+              @default {
+                <button
+                  type="button"
+                  class="horizontal-navigation-root-trigger"
+                  [class.horizontal-navigation-root-trigger--mega]="isMegaVariant()"
+                  [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>
+`;
+const HORIZONTAL_NAVIGATION_IMPORTS = [
+    RouterLink,
+    NgTemplateOutlet,
+    NavigationItemContent,
+    HorizontalNavigationBranchItem,
+];
+
+class HorizontalNavigation extends HorizontalNavigationBaseComponent {
+    variant = 'default';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigation, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: HorizontalNavigation, isStandalone: true, selector: "horizontal-navigation", usesInheritance: true, ngImport: i0, template: "\n  <nav class=\"horizontal-navigation\" [class.horizontal-navigation--mega]=\"isMegaVariant()\">\n    @if (navigationData()) {\n      <div class=\"horizontal-navigation-items\" [class.horizontal-navigation-items--mega]=\"isMegaVariant()\">\n        @for (item of navigationData(); track item.id || item.title) {\n          @if (shouldRenderItem(item)) {\n            @switch (item.type) {\n              @case ('basic') {\n                @if (item.link) {\n                  <a\n                    [routerLink]=\"item.link\"\n                    [title]=\"item.tooltip\"\n                    class=\"horizontal-navigation-root-trigger\"\n                    [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                    (click)=\"onItemClicked(item)\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemBody\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                  </a>\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"horizontal-navigation-root-trigger\"\n                    [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                    [title]=\"item.tooltip\"\n                    (click)=\"onItemClicked(item)\"\n                    (keydown.enter)=\"onItemClicked(item)\"\n                    (keydown.space)=\"$event.preventDefault(); onItemClicked(item)\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemBody\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                  </button>\n                }\n              }\n\n              @case ('collapsable') {\n                @if (hasChildren(item)) {\n                  <horizontal-navigation-branch-item\n                    [item]=\"item\"\n                    [variant]=\"variant\"\n                    (itemClicked)=\"onItemClicked($event)\"\n                    (branchOpened)=\"onRootBranchOpened($event)\"\n                    (branchClosed)=\"onRootBranchClosed($event)\" />\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"horizontal-navigation-root-trigger\"\n                    [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                    [title]=\"item.tooltip\"\n                    (click)=\"onItemClicked(item)\"\n                    (keydown.enter)=\"onItemClicked(item)\"\n                    (keydown.space)=\"$event.preventDefault(); onItemClicked(item)\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemBody\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                  </button>\n                }\n              }\n\n              @case ('group') {\n                @if (hasChildren(item)) {\n                  <horizontal-navigation-branch-item\n                    [item]=\"item\"\n                    [variant]=\"variant\"\n                    (itemClicked)=\"onItemClicked($event)\"\n                    (branchOpened)=\"onRootBranchOpened($event)\"\n                    (branchClosed)=\"onRootBranchClosed($event)\" />\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"horizontal-navigation-root-trigger\"\n                    [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                    [title]=\"item.tooltip\"\n                    (click)=\"onItemClicked(item)\"\n                    (keydown.enter)=\"onItemClicked(item)\"\n                    (keydown.space)=\"$event.preventDefault(); onItemClicked(item)\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemBody\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                  </button>\n                }\n              }\n\n              @case ('divider') {\n                <div class=\"h-6 w-px bg-border mx-2\"></div>\n              }\n\n              @case ('spacer') {\n                <div class=\"flex-1\"></div>\n              }\n\n              @default {\n                <button\n                  type=\"button\"\n                  class=\"horizontal-navigation-root-trigger\"\n                  [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                  [title]=\"item.tooltip\"\n                  (click)=\"onItemClicked(item)\"\n                  (keydown.enter)=\"onItemClicked(item)\"\n                  (keydown.space)=\"$event.preventDefault(); onItemClicked(item)\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"itemBody\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n    }\n\n    <ng-template #itemBody let-currentItem>\n      <navigation-item-content [item]=\"currentItem\" variant=\"horizontal\"></navigation-item-content>\n    </ng-template>\n  </nav>\n", 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: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.NavigationItemContent, selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "component", type: HorizontalNavigationBranchItem, selector: "horizontal-navigation-branch-item", inputs: ["item", "menuItem", "nested", "variant"], outputs: ["itemClicked", "branchOpened", "branchClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigation, decorators: [{
+            type: Component,
+            args: [{ selector: 'horizontal-navigation', template: HORIZONTAL_NAVIGATION_TEMPLATE, changeDetection: ChangeDetectionStrategy.OnPush, imports: HORIZONTAL_NAVIGATION_IMPORTS, 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"] }]
+        }] });
+
+class HorizontalNavigationMegaComponent extends HorizontalNavigationBaseComponent {
+    variant = 'mega';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigationMegaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: HorizontalNavigationMegaComponent, isStandalone: true, selector: "horizontal-navigation-mega", usesInheritance: true, ngImport: i0, template: "\n  <nav class=\"horizontal-navigation\" [class.horizontal-navigation--mega]=\"isMegaVariant()\">\n    @if (navigationData()) {\n      <div class=\"horizontal-navigation-items\" [class.horizontal-navigation-items--mega]=\"isMegaVariant()\">\n        @for (item of navigationData(); track item.id || item.title) {\n          @if (shouldRenderItem(item)) {\n            @switch (item.type) {\n              @case ('basic') {\n                @if (item.link) {\n                  <a\n                    [routerLink]=\"item.link\"\n                    [title]=\"item.tooltip\"\n                    class=\"horizontal-navigation-root-trigger\"\n                    [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                    (click)=\"onItemClicked(item)\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemBody\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                  </a>\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"horizontal-navigation-root-trigger\"\n                    [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                    [title]=\"item.tooltip\"\n                    (click)=\"onItemClicked(item)\"\n                    (keydown.enter)=\"onItemClicked(item)\"\n                    (keydown.space)=\"$event.preventDefault(); onItemClicked(item)\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemBody\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                  </button>\n                }\n              }\n\n              @case ('collapsable') {\n                @if (hasChildren(item)) {\n                  <horizontal-navigation-branch-item\n                    [item]=\"item\"\n                    [variant]=\"variant\"\n                    (itemClicked)=\"onItemClicked($event)\"\n                    (branchOpened)=\"onRootBranchOpened($event)\"\n                    (branchClosed)=\"onRootBranchClosed($event)\" />\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"horizontal-navigation-root-trigger\"\n                    [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                    [title]=\"item.tooltip\"\n                    (click)=\"onItemClicked(item)\"\n                    (keydown.enter)=\"onItemClicked(item)\"\n                    (keydown.space)=\"$event.preventDefault(); onItemClicked(item)\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemBody\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                  </button>\n                }\n              }\n\n              @case ('group') {\n                @if (hasChildren(item)) {\n                  <horizontal-navigation-branch-item\n                    [item]=\"item\"\n                    [variant]=\"variant\"\n                    (itemClicked)=\"onItemClicked($event)\"\n                    (branchOpened)=\"onRootBranchOpened($event)\"\n                    (branchClosed)=\"onRootBranchClosed($event)\" />\n                } @else {\n                  <button\n                    type=\"button\"\n                    class=\"horizontal-navigation-root-trigger\"\n                    [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                    [title]=\"item.tooltip\"\n                    (click)=\"onItemClicked(item)\"\n                    (keydown.enter)=\"onItemClicked(item)\"\n                    (keydown.space)=\"$event.preventDefault(); onItemClicked(item)\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"itemBody\"\n                      [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                  </button>\n                }\n              }\n\n              @case ('divider') {\n                <div class=\"h-6 w-px bg-border mx-2\"></div>\n              }\n\n              @case ('spacer') {\n                <div class=\"flex-1\"></div>\n              }\n\n              @default {\n                <button\n                  type=\"button\"\n                  class=\"horizontal-navigation-root-trigger\"\n                  [class.horizontal-navigation-root-trigger--mega]=\"isMegaVariant()\"\n                  [title]=\"item.tooltip\"\n                  (click)=\"onItemClicked(item)\"\n                  (keydown.enter)=\"onItemClicked(item)\"\n                  (keydown.space)=\"$event.preventDefault(); onItemClicked(item)\">\n                  <ng-container\n                    [ngTemplateOutlet]=\"itemBody\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                </button>\n              }\n            }\n          }\n        }\n      </div>\n    }\n\n    <ng-template #itemBody let-currentItem>\n      <navigation-item-content [item]=\"currentItem\" variant=\"horizontal\"></navigation-item-content>\n    </ng-template>\n  </nav>\n", 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", ".horizontal-navigation{position:relative;overflow:hidden;padding:.5rem;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:1.25rem;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 94%,white 6%),var(--card));box-shadow:0 20px 44px #0f172a1f,inset 0 1px #ffffff2e}.horizontal-navigation-items--mega{gap:.5rem;padding:.25rem}.horizontal-navigation-root-trigger--mega{min-height:3rem;padding:.75rem 1.25rem .75rem 1rem;border:1px solid transparent;border-radius:.875rem;background:color-mix(in srgb,var(--accent) 8%,transparent)}.horizontal-navigation-root-trigger--mega:hover,.horizontal-navigation-root-trigger--mega:focus-visible{border-color:color-mix(in srgb,var(--accent) 24%,transparent);background:color-mix(in srgb,var(--accent) 16%,transparent);color:inherit}.horizontal-navigation-root-trigger--mega .horizontal-navigation-item-label{font-weight:600}.horizontal-navigation-root-trigger--mega .horizontal-navigation-item-badge{padding-inline:.5rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 65%,transparent)}\n"], dependencies: [{ kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.NavigationItemContent, selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "component", type: HorizontalNavigationBranchItem, selector: "horizontal-navigation-branch-item", inputs: ["item", "menuItem", "nested", "variant"], outputs: ["itemClicked", "branchOpened", "branchClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: HorizontalNavigationMegaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'horizontal-navigation-mega', template: HORIZONTAL_NAVIGATION_TEMPLATE, changeDetection: ChangeDetectionStrategy.OnPush, imports: HORIZONTAL_NAVIGATION_IMPORTS, 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", ".horizontal-navigation{position:relative;overflow:hidden;padding:.5rem;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:1.25rem;background:linear-gradient(180deg,color-mix(in srgb,var(--card) 94%,white 6%),var(--card));box-shadow:0 20px 44px #0f172a1f,inset 0 1px #ffffff2e}.horizontal-navigation-items--mega{gap:.5rem;padding:.25rem}.horizontal-navigation-root-trigger--mega{min-height:3rem;padding:.75rem 1.25rem .75rem 1rem;border:1px solid transparent;border-radius:.875rem;background:color-mix(in srgb,var(--accent) 8%,transparent)}.horizontal-navigation-root-trigger--mega:hover,.horizontal-navigation-root-trigger--mega:focus-visible{border-color:color-mix(in srgb,var(--accent) 24%,transparent);background:color-mix(in srgb,var(--accent) 16%,transparent);color:inherit}.horizontal-navigation-root-trigger--mega .horizontal-navigation-item-label{font-weight:600}.horizontal-navigation-root-trigger--mega .horizontal-navigation-item-badge{padding-inline:.5rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--border) 65%,transparent)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HorizontalNavigation, HorizontalNavigationBranchItem, HorizontalNavigationMegaComponent };
+//# sourceMappingURL=ojiepermana-angular-navigation-horizontal.mjs.map