@ojiepermana/angular 0.1.0 → 0.1.1

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

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