@ojiepermana/angular 0.1.1 → 21.0.0

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

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