@ojiepermana/angular 0.0.3 → 0.1.1

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

@@ -0,0 +1,1647 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, DOCUMENT, ElementRef, Renderer2, EventEmitter, ViewChild, Output, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, forwardRef } from '@angular/core';
+import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
+import { ReplaySubject, Subject, filter, takeUntil } from 'rxjs';
+import { NavigationService, shouldRenderNavigationItem, getNavigationItemAction, isNavigationRoutableItem } from '@ojiepermana/angular/navigation';
+import { trackNavigationTreeItem, NavigationItemContent, hasActiveNavigationDescendant, isNavigationTreeDescendant, NavigationTreeOutlet } from '@ojiepermana/angular/internal';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+class VerticalNavigationBaseComponent {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _document = inject(DOCUMENT);
+    _elementRef = inject(ElementRef);
+    _renderer2 = inject(Renderer2);
+    _router = inject(Router);
+    _navigationService = inject(NavigationService);
+    autoCollapse = true;
+    inner = false;
+    mode = 'side';
+    navigation = [];
+    opened = true;
+    position = 'left';
+    transparentOverlay = false;
+    appearanceChanged = new EventEmitter();
+    modeChanged = new EventEmitter();
+    openedChanged = new EventEmitter();
+    positionChanged = new EventEmitter();
+    _navigationContentEl;
+    activeAsideItemId = null;
+    onCollapsableItemCollapsed = new ReplaySubject(1);
+    onCollapsableItemExpanded = new ReplaySubject(1);
+    onRefreshed = new ReplaySubject(1);
+    _animationsEnabled = false;
+    _asideOverlay = null;
+    _hovered = false;
+    _mutationObserver;
+    _overlay = null;
+    _pendingTimeouts = [];
+    _unsubscribeAll = new Subject();
+    _overlayClickHandler = () => this.close();
+    _asideOverlayClickHandler = () => this.closeAside();
+    get hostClasses() {
+        return {
+            [`${this._componentPrefix}-animations-enabled`]: this._animationsEnabled,
+            [`${this._componentPrefix}-appearance-${this.appearance}`]: true,
+            [`${this._componentPrefix}-hover`]: this._hovered,
+            [`${this._componentPrefix}-inner`]: this.inner,
+            [`${this._componentPrefix}-mode-over`]: this.mode === 'over',
+            [`${this._componentPrefix}-mode-side`]: this.mode === 'side',
+            [`${this._componentPrefix}-opened`]: this.opened,
+            [`${this._componentPrefix}-position-left`]: this.position === 'left',
+            [`${this._componentPrefix}-position-right`]: this.position === 'right',
+        };
+    }
+    get asideWrapperClass() {
+        return this._asideWrapperClass;
+    }
+    activeAsideNavigationItem() {
+        if (!this.activeAsideItemId) {
+            return null;
+        }
+        const item = this._navigationService.getItem(this.activeAsideItemId, this.navigation);
+        return item?.type === 'aside' ? item : null;
+    }
+    shouldRenderItem(item) {
+        return shouldRenderNavigationItem(item);
+    }
+    onMouseenter() {
+        this._enableAnimations();
+        this._hovered = true;
+    }
+    onMouseleave() {
+        this._enableAnimations();
+        this._hovered = false;
+    }
+    ngOnChanges(changes) {
+        if ('appearance' in changes) {
+            this.appearanceChanged.emit(changes['appearance'].currentValue);
+        }
+        if ('mode' in changes) {
+            const currentMode = changes['mode'].currentValue;
+            const previousMode = changes['mode'].previousValue;
+            this._disableAnimations();
+            if (previousMode === 'over' && currentMode === 'side') {
+                this._hideOverlay();
+            }
+            if (previousMode === 'side' && currentMode === 'over') {
+                this.closeAside();
+                if (this.opened) {
+                    this._showOverlay();
+                }
+            }
+            this.modeChanged.emit(currentMode);
+            this._setTimeout(() => {
+                this._enableAnimations();
+            }, 500);
+        }
+        if ('navigation' in changes) {
+            this._changeDetectorRef.markForCheck();
+        }
+        if ('opened' in changes) {
+            this._toggleOpened(changes['opened'].currentValue);
+        }
+        if ('position' in changes) {
+            this.positionChanged.emit(changes['position'].currentValue);
+        }
+    }
+    ngOnInit() {
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+            if (this.mode === 'over' && this.opened) {
+                this.close();
+            }
+            if (this.mode === 'side' && this.activeAsideItemId) {
+                this.closeAside();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                const mutationTarget = mutation.target;
+                if (mutation.attributeName === 'class') {
+                    if (mutationTarget.classList.contains('cdk-global-scrollblock')) {
+                        const top = parseInt(mutationTarget.style.top, 10);
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
+                    }
+                    else {
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
+                    }
+                }
+            });
+        });
+        this._mutationObserver.observe(this._document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        this._setTimeout(() => {
+            if (!this._navigationContentEl) {
+                return;
+            }
+            const activeItem = this._navigationContentEl.nativeElement.querySelector('.kit-navigation-item-active');
+            if (activeItem) {
+                activeItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+    }
+    ngOnDestroy() {
+        if (this._mutationObserver) {
+            this._mutationObserver.disconnect();
+        }
+        // Clear all pending timeouts to prevent memory leaks
+        for (const id of this._pendingTimeouts) {
+            clearTimeout(id);
+        }
+        this._pendingTimeouts = [];
+        // Remove overlays synchronously on destroy
+        this._removeOverlayElement(this._overlay, this._overlayClickHandler);
+        this._overlay = null;
+        this._removeOverlayElement(this._asideOverlay, this._asideOverlayClickHandler);
+        this._asideOverlay = null;
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+        this.onCollapsableItemCollapsed.complete();
+        this.onCollapsableItemExpanded.complete();
+        this.onRefreshed.complete();
+    }
+    refresh() {
+        this._changeDetectorRef.markForCheck();
+        this.onRefreshed.next(true);
+    }
+    open() {
+        if (this.opened) {
+            return;
+        }
+        this._toggleOpened(true);
+    }
+    close() {
+        if (!this.opened) {
+            return;
+        }
+        this.closeAside();
+        this._toggleOpened(false);
+    }
+    toggle() {
+        if (this.opened) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    openAside(item) {
+        if (item.disabled || !item.id) {
+            return;
+        }
+        this.activeAsideItemId = item.id;
+        this._showAsideOverlay();
+        this._changeDetectorRef.markForCheck();
+    }
+    closeAside() {
+        this.activeAsideItemId = null;
+        this._hideAsideOverlay();
+        this._changeDetectorRef.markForCheck();
+    }
+    toggleAside(item) {
+        if (this.activeAsideItemId === item.id) {
+            this.closeAside();
+        }
+        else {
+            this.openAside(item);
+        }
+    }
+    trackByFn(index, item) {
+        return trackNavigationTreeItem(index, item);
+    }
+    _enableAnimations() {
+        if (this._animationsEnabled) {
+            return;
+        }
+        this._animationsEnabled = true;
+    }
+    _disableAnimations() {
+        if (!this._animationsEnabled) {
+            return;
+        }
+        this._animationsEnabled = false;
+    }
+    _showOverlay() {
+        if (this._overlay) {
+            return;
+        }
+        this._overlay = this._renderer2.createElement('div');
+        if (this._overlay) {
+            this._overlay.classList.add(`${this._componentPrefix}-overlay`);
+            if (this.transparentOverlay) {
+                this._overlay.classList.add(`${this._componentPrefix}-overlay-transparent`);
+            }
+            this._renderer2.setStyle(this._overlay, 'opacity', '0');
+            this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
+            this._overlay.addEventListener('click', this._overlayClickHandler);
+            this._setTimeout(() => {
+                if (this._overlay) {
+                    this._renderer2.setStyle(this._overlay, 'opacity', '1');
+                }
+            }, 10);
+        }
+    }
+    _hideOverlay() {
+        if (!this._overlay) {
+            return;
+        }
+        this._renderer2.setStyle(this._overlay, 'opacity', '0');
+        this._setTimeout(() => {
+            if (this._overlay) {
+                this._overlay.removeEventListener('click', this._overlayClickHandler);
+                if (this._overlay.parentNode) {
+                    this._overlay.parentNode.removeChild(this._overlay);
+                }
+                this._overlay = null;
+            }
+        }, 300);
+    }
+    _showAsideOverlay() {
+        if (this._asideOverlay) {
+            return;
+        }
+        this._asideOverlay = this._renderer2.createElement('div');
+        if (this._asideOverlay) {
+            this._asideOverlay.classList.add(`${this._componentPrefix}-aside-overlay`);
+            this._renderer2.setStyle(this._asideOverlay, 'opacity', '0');
+            this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._asideOverlay);
+            this._asideOverlay.addEventListener('click', this._asideOverlayClickHandler);
+            this._setTimeout(() => {
+                if (this._asideOverlay) {
+                    this._renderer2.setStyle(this._asideOverlay, 'opacity', '1');
+                }
+            }, 10);
+        }
+    }
+    _hideAsideOverlay() {
+        if (!this._asideOverlay) {
+            return;
+        }
+        this._renderer2.setStyle(this._asideOverlay, 'opacity', '0');
+        this._setTimeout(() => {
+            if (this._asideOverlay) {
+                this._asideOverlay.removeEventListener('click', this._asideOverlayClickHandler);
+                if (this._asideOverlay.parentNode) {
+                    this._asideOverlay.parentNode.removeChild(this._asideOverlay);
+                }
+                this._asideOverlay = null;
+            }
+        }, 300);
+    }
+    _setTimeout(fn, delay) {
+        const id = setTimeout(() => {
+            const index = this._pendingTimeouts.indexOf(id);
+            if (index > -1) {
+                this._pendingTimeouts.splice(index, 1);
+            }
+            fn();
+        }, delay);
+        this._pendingTimeouts.push(id);
+    }
+    _removeOverlayElement(overlay, clickHandler) {
+        if (!overlay) {
+            return;
+        }
+        overlay.removeEventListener('click', clickHandler);
+        if (overlay.parentNode) {
+            overlay.parentNode.removeChild(overlay);
+        }
+    }
+    _toggleOpened(open) {
+        this.opened = open;
+        this._enableAnimations();
+        if (this.mode === 'over') {
+            if (this.opened) {
+                this._showOverlay();
+            }
+            else {
+                this._hideOverlay();
+            }
+        }
+        this.openedChanged.emit(open);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: VerticalNavigationBaseComponent, isStandalone: true, inputs: { autoCollapse: "autoCollapse", inner: "inner", mode: "mode", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged" }, viewQueries: [{ propertyName: "_navigationContentEl", first: true, predicate: ["navigationContent"], descendants: true }], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { autoCollapse: [{
+                type: Input
+            }], inner: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], navigation: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], transparentOverlay: [{
+                type: Input
+            }], appearanceChanged: [{
+                type: Output
+            }], modeChanged: [{
+                type: Output
+            }], openedChanged: [{
+                type: Output
+            }], positionChanged: [{
+                type: Output
+            }], _navigationContentEl: [{
+                type: ViewChild,
+                args: ['navigationContent']
+            }] } });
+
+class VerticalNavigationBasicItemComponent {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _navigationComponent = inject(VerticalNavigationBaseComponent);
+    _navigationService = inject(NavigationService);
+    item;
+    isActiveMatchOptions = {
+        paths: 'subset',
+        queryParams: 'subset',
+        fragment: 'ignored',
+        matrixParams: 'ignored',
+    };
+    _unsubscribeAll = new Subject();
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Set the "isActiveMatchOptions" either from item's
+        // "isActiveMatchOptions" or the equivalent form of
+        // item's "exactMatch" option
+        this.isActiveMatchOptions =
+            this.item.isActiveMatchOptions ??
+                (this.item.exactMatch
+                    ? { paths: 'exact', queryParams: 'exact', fragment: 'ignored', matrixParams: 'ignored' }
+                    : { paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored' });
+        // Subscribe to onRefreshed on the navigation component
+        this._navigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+    hasAction() {
+        return !!getNavigationItemAction(this.item);
+    }
+    markActive() {
+        if (!this.item.id) {
+            return;
+        }
+        this._navigationService.setActiveItem(this.item.id);
+    }
+    triggerAction() {
+        this.markActive();
+        getNavigationItemAction(this.item)?.(this.item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationBasicItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationBasicItemComponent, isStandalone: true, selector: "vertical-navigation-basic-item", inputs: { item: "item" }, ngImport: i0, template: `
+    <!-- Item wrapper -->
+    <div
+      class="vertical-navigation-item-wrapper"
+      [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
+      [ngClass]="item.classes?.wrapper">
+      <!-- Item with an internal link -->
+      @if (item.link && !item.externalLink && !hasAction() && !item.disabled) {
+        <a
+          class="kit-navigation-item"
+          [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
+          [routerLink]="[item.link]"
+          [fragment]="item.fragment"
+          [preserveFragment]="item.preserveFragment ?? false"
+          [queryParams]="item.queryParams ?? null"
+          [queryParamsHandling]="item.queryParamsHandling ?? null"
+          [routerLinkActive]="'kit-navigation-item-active'"
+          [routerLinkActiveOptions]="isActiveMatchOptions"
+          [matTooltip]="item.tooltip || ''"
+          (click)="markActive()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+      }
+
+      <!-- Item with an external link -->
+      @if (item.link && item.externalLink && !hasAction() && !item.disabled) {
+        <a
+          class="kit-navigation-item"
+          [href]="item.link"
+          [target]="item.target || '_blank'"
+          [matTooltip]="item.tooltip || ''"
+          (click)="markActive()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+      }
+
+      <!-- Item with a function -->
+      @if (!item.link && hasAction() && !item.disabled) {
+        <div
+          class="kit-navigation-item"
+          [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
+          [matTooltip]="item.tooltip || ''"
+          role="button"
+          tabindex="0"
+          (click)="triggerAction()"
+          (keydown.enter)="triggerAction()"
+          (keydown.space)="$event.preventDefault(); triggerAction()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+      }
+
+      <!-- Item with an internal link and function -->
+      @if (item.link && !item.externalLink && hasAction() && !item.disabled) {
+        <a
+          class="kit-navigation-item"
+          [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
+          [routerLink]="[item.link]"
+          [fragment]="item.fragment"
+          [preserveFragment]="item.preserveFragment ?? false"
+          [queryParams]="item.queryParams ?? null"
+          [queryParamsHandling]="item.queryParamsHandling ?? null"
+          [routerLinkActive]="'kit-navigation-item-active'"
+          [routerLinkActiveOptions]="isActiveMatchOptions"
+          [matTooltip]="item.tooltip || ''"
+          (click)="triggerAction()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+      }
+
+      <!-- Item with an external link and function -->
+      @if (item.link && item.externalLink && hasAction() && !item.disabled) {
+        <a
+          class="kit-navigation-item"
+          [href]="item.link"
+          [target]="item.target || '_blank'"
+          [matTooltip]="item.tooltip || ''"
+          (click)="triggerAction()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+      }
+
+      <!-- Item with no link and no function -->
+      @if (!item.link && !hasAction() && !item.disabled) {
+        <div
+          class="kit-navigation-item"
+          [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
+          [matTooltip]="item.tooltip || ''">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+      }
+
+      <!-- Item is disabled -->
+      @if (item.disabled) {
+        <div class="kit-navigation-item kit-navigation-item-disabled" [matTooltip]="item.tooltip || ''">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+      }
+    </div>
+
+    <!-- Item template -->
+    <ng-template #itemTemplate>
+      <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: NavigationItemContent, selector: "navigation-item-content", inputs: ["item", "level", "variant"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationBasicItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vertical-navigation-basic-item',
+                    template: `
+    <!-- Item wrapper -->
+    <div
+      class="vertical-navigation-item-wrapper"
+      [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
+      [ngClass]="item.classes?.wrapper">
+      <!-- Item with an internal link -->
+      @if (item.link && !item.externalLink && !hasAction() && !item.disabled) {
+        <a
+          class="kit-navigation-item"
+          [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
+          [routerLink]="[item.link]"
+          [fragment]="item.fragment"
+          [preserveFragment]="item.preserveFragment ?? false"
+          [queryParams]="item.queryParams ?? null"
+          [queryParamsHandling]="item.queryParamsHandling ?? null"
+          [routerLinkActive]="'kit-navigation-item-active'"
+          [routerLinkActiveOptions]="isActiveMatchOptions"
+          [matTooltip]="item.tooltip || ''"
+          (click)="markActive()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+      }
+
+      <!-- Item with an external link -->
+      @if (item.link && item.externalLink && !hasAction() && !item.disabled) {
+        <a
+          class="kit-navigation-item"
+          [href]="item.link"
+          [target]="item.target || '_blank'"
+          [matTooltip]="item.tooltip || ''"
+          (click)="markActive()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+      }
+
+      <!-- Item with a function -->
+      @if (!item.link && hasAction() && !item.disabled) {
+        <div
+          class="kit-navigation-item"
+          [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
+          [matTooltip]="item.tooltip || ''"
+          role="button"
+          tabindex="0"
+          (click)="triggerAction()"
+          (keydown.enter)="triggerAction()"
+          (keydown.space)="$event.preventDefault(); triggerAction()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+      }
+
+      <!-- Item with an internal link and function -->
+      @if (item.link && !item.externalLink && hasAction() && !item.disabled) {
+        <a
+          class="kit-navigation-item"
+          [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
+          [routerLink]="[item.link]"
+          [fragment]="item.fragment"
+          [preserveFragment]="item.preserveFragment ?? false"
+          [queryParams]="item.queryParams ?? null"
+          [queryParamsHandling]="item.queryParamsHandling ?? null"
+          [routerLinkActive]="'kit-navigation-item-active'"
+          [routerLinkActiveOptions]="isActiveMatchOptions"
+          [matTooltip]="item.tooltip || ''"
+          (click)="triggerAction()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+      }
+
+      <!-- Item with an external link and function -->
+      @if (item.link && item.externalLink && hasAction() && !item.disabled) {
+        <a
+          class="kit-navigation-item"
+          [href]="item.link"
+          [target]="item.target || '_blank'"
+          [matTooltip]="item.tooltip || ''"
+          (click)="triggerAction()">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </a>
+      }
+
+      <!-- Item with no link and no function -->
+      @if (!item.link && !hasAction() && !item.disabled) {
+        <div
+          class="kit-navigation-item"
+          [ngClass]="{ 'kit-navigation-item-active-forced': item.active }"
+          [matTooltip]="item.tooltip || ''">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+      }
+
+      <!-- Item is disabled -->
+      @if (item.disabled) {
+        <div class="kit-navigation-item kit-navigation-item-disabled" [matTooltip]="item.tooltip || ''">
+          <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+        </div>
+      }
+    </div>
+
+    <!-- Item template -->
+    <ng-template #itemTemplate>
+      <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
+    </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgClass, NgTemplateOutlet, RouterLink, RouterLinkActive, NavigationItemContent, MatTooltipModule],
+                }]
+        }], propDecorators: { item: [{
+                type: Input
+            }] } });
+
+class VerticalNavigationDividerItemComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDividerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: VerticalNavigationDividerItemComponent, isStandalone: true, selector: "vertical-navigation-divider-item", ngImport: i0, template: '<div class="vertical-navigation-divider"></div>', isInline: true, styles: [".vertical-navigation-divider{height:1px;margin:12px 16px;background:rgb(var(--border))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDividerItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vertical-navigation-divider-item', template: '<div class="vertical-navigation-divider"></div>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".vertical-navigation-divider{height:1px;margin:12px 16px;background:rgb(var(--border))}\n"] }]
+        }] });
+
+class VerticalNavigationSpacerItemComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationSpacerItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: VerticalNavigationSpacerItemComponent, isStandalone: true, selector: "vertical-navigation-spacer-item", ngImport: i0, template: '<div class="vertical-navigation-spacer"></div>', isInline: true, styles: [".vertical-navigation-spacer{flex:1 1 auto;min-height:24px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationSpacerItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vertical-navigation-spacer-item', template: '<div class="vertical-navigation-spacer"></div>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".vertical-navigation-spacer{flex:1 1 auto;min-height:24px}\n"] }]
+        }] });
+
+class VerticalNavigationCollapsableItemComponent {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _navigationComponent = inject(VerticalNavigationBaseComponent);
+    _navigationService = inject(NavigationService);
+    _router = inject(Router);
+    autoCollapse = true;
+    item;
+    isCollapsed = true;
+    treeTrackByFn = trackNavigationTreeItem;
+    treeShouldRenderItemFn = shouldRenderNavigationItem;
+    get isExpanded() {
+        return !this.isCollapsed;
+    }
+    _unsubscribeAll = new Subject();
+    /**
+     * On init
+     */
+    ngOnInit() {
+        if (this._shouldExpand()) {
+            this.expand();
+        }
+        // Otherwise...
+        else {
+            // If the autoCollapse is on, collapse...
+            if (this.autoCollapse) {
+                this.collapse();
+            }
+        }
+        // Listen for the onCollapsableItemCollapsed from the service
+        this._navigationComponent.onCollapsableItemCollapsed
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((collapsedItem) => {
+            // Check if the collapsed item is null
+            if (collapsedItem === null) {
+                return;
+            }
+            // Collapse if this is a children of the collapsed item
+            if (this._isChildrenOf(collapsedItem, this.item)) {
+                this.collapse();
+            }
+        });
+        // Listen for the onCollapsableItemExpanded from the service if the autoCollapse is on
+        if (this.autoCollapse) {
+            this._navigationComponent.onCollapsableItemExpanded
+                .pipe(takeUntil(this._unsubscribeAll))
+                .subscribe((expandedItem) => {
+                // Check if the expanded item is null
+                if (expandedItem === null) {
+                    return;
+                }
+                // Check if this is a parent of the expanded item
+                if (this._isChildrenOf(this.item, expandedItem)) {
+                    return;
+                }
+                // Check if this has a children with a matching url with the current active url
+                if (this._hasActiveChild(this.item)) {
+                    return;
+                }
+                // Check if this is the expanded item
+                if (this.item === expandedItem) {
+                    return;
+                }
+                // If none of the above conditions are matched, collapse this item
+                this.collapse();
+            });
+        }
+        // Attach a listener to the NavigationEnd event
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+            if (this._shouldExpand()) {
+                this.expand();
+            }
+            // Otherwise...
+            else {
+                // If the autoCollapse is on, collapse...
+                if (this.autoCollapse) {
+                    this.collapse();
+                }
+            }
+        });
+        // Subscribe to onRefreshed on the navigation component
+        this._navigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+    /**
+     * Collapse
+     */
+    collapse() {
+        // Return if the item is disabled
+        if (this.item.disabled) {
+            return;
+        }
+        // Return if the item is already collapsed
+        if (this.isCollapsed) {
+            return;
+        }
+        // Collapse it
+        this.isCollapsed = true;
+        if (this.item.id) {
+            this._navigationService.collapseItem(this.item.id);
+        }
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+        // Execute the observable
+        this._navigationComponent.onCollapsableItemCollapsed.next(this.item);
+    }
+    /**
+     * Expand
+     */
+    expand() {
+        // Return if the item is disabled
+        if (this.item.disabled) {
+            return;
+        }
+        // Return if the item is already expanded
+        if (!this.isCollapsed) {
+            return;
+        }
+        // Expand it
+        this.isCollapsed = false;
+        if (this.item.id) {
+            this._navigationService.expandItem(this.item.id);
+        }
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+        // Execute the observable
+        this._navigationComponent.onCollapsableItemExpanded.next(this.item);
+    }
+    /**
+     * Toggle collapsable
+     */
+    toggleCollapsable() {
+        // Toggle collapse/expand
+        if (this.isCollapsed) {
+            this.expand();
+        }
+        else {
+            this.collapse();
+        }
+    }
+    /**
+     * Track by function for ngFor loops
+     */
+    trackByFn(index, item) {
+        return trackNavigationTreeItem(index, item);
+    }
+    shouldRenderItem(item) {
+        return shouldRenderNavigationItem(item);
+    }
+    get treeTemplateData() {
+        return { autoCollapse: this.autoCollapse };
+    }
+    /**
+     * Check if the given item has the given url in one of its children
+     */
+    _hasActiveChild(item) {
+        return hasActiveNavigationDescendant(item, (child) => isNavigationRoutableItem(child) && !!child.link && this._router.isActive(child.link, child.exactMatch || false));
+    }
+    _shouldExpand() {
+        return this._hasActiveChild(this.item) || (!!this.item.id && this._navigationService.isItemExpanded(this.item.id));
+    }
+    /**
+     * Check if this is a children of the given item
+     */
+    _isChildrenOf(parent, item) {
+        return isNavigationTreeDescendant(parent, item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationCollapsableItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationCollapsableItemComponent, isStandalone: true, selector: "vertical-navigation-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item" }, host: { properties: { "class.vertical-navigation-item-collapsed": "isCollapsed", "class.vertical-navigation-item-expanded": "isExpanded" } }, ngImport: i0, template: `
+    <div
+      class="vertical-navigation-item-wrapper"
+      [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
+      [ngClass]="item.classes?.wrapper">
+      <div
+        class="kit-navigation-item"
+        [ngClass]="{
+          'kit-navigation-item-disabled': item.disabled,
+          'kit-navigation-item-expanded': isExpanded,
+        }"
+        [matTooltip]="item.tooltip || ''"
+        role="button"
+        tabindex="0"
+        (click)="toggleCollapsable()"
+        (keydown.enter)="toggleCollapsable()"
+        (keydown.space)="$event.preventDefault(); toggleCollapsable()">
+        <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
+        <!-- State dot -->
+        <span class="kit-navigation-item-dot" aria-hidden="true"></span>
+      </div>
+    </div>
+
+    <!-- Children (with CSS transition instead of animation) -->
+    <div
+      class="kit-navigation-item-children"
+      [class.kit-navigation-item-children-expanded]="!isCollapsed"
+      [class.kit-navigation-item-children-collapsed]="isCollapsed">
+      @if (!isCollapsed) {
+        <navigation-tree-outlet
+          [items]="item.children"
+          [data]="treeTemplateData"
+          [branchTemplate]="branchItem"
+          [leafTemplate]="leafItem"
+          [groupTemplate]="groupItem"
+          [dividerTemplate]="dividerItem"
+          [spacerTemplate]="spacerItem"
+          [trackByFn]="treeTrackByFn"
+          [shouldRenderItemFn]="treeShouldRenderItemFn" />
+      }
+    </div>
+
+    <ng-template #branchItem let-child let-data="data">
+      @if (child.type === 'aside') {
+        <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
+        </vertical-navigation-aside-item>
+      } @else {
+        <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
+        </vertical-navigation-collapsable-item>
+      }
+    </ng-template>
+
+    <ng-template #leafItem let-child>
+      <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
+    </ng-template>
+
+    <ng-template #groupItem let-child let-data="data">
+      <div
+        class="vertical-navigation-item-wrapper"
+        [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
+        [ngClass]="child.classes?.wrapper">
+        <div class="kit-navigation-group-header">
+          <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #dividerItem>
+      <vertical-navigation-divider-item></vertical-navigation-divider-item>
+    </ng-template>
+
+    <ng-template #spacerItem>
+      <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
+    </ng-template>
+  `, isInline: true, styles: [".kit-navigation-item-dot{margin-left:auto;width:.5rem;height:.5rem;flex-shrink:0;border-radius:9999px;background:#9ca3af;opacity:.85;transition:background-color .18s ease,transform .18s ease,opacity .18s ease}.kit-navigation-item:hover .kit-navigation-item-dot{opacity:1}.kit-navigation-item.kit-navigation-item-expanded .kit-navigation-item-dot{background:#16a34a;opacity:1;transform:scale(1.1)}.kit-navigation-item-children{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.25,.8,.25,1),opacity .3s cubic-bezier(.25,.8,.25,1)}.kit-navigation-item-children-expanded{max-height:2000px;opacity:1}.kit-navigation-item-children-collapsed{max-height:0;opacity:0}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => VerticalNavigationCollapsableItemComponent), selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationAsideItemComponent), selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationBasicItemComponent), selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationDividerItemComponent), selector: "vertical-navigation-divider-item" }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationSpacerItemComponent), selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationCollapsableItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vertical-navigation-collapsable-item', template: `
+    <div
+      class="vertical-navigation-item-wrapper"
+      [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
+      [ngClass]="item.classes?.wrapper">
+      <div
+        class="kit-navigation-item"
+        [ngClass]="{
+          'kit-navigation-item-disabled': item.disabled,
+          'kit-navigation-item-expanded': isExpanded,
+        }"
+        [matTooltip]="item.tooltip || ''"
+        role="button"
+        tabindex="0"
+        (click)="toggleCollapsable()"
+        (keydown.enter)="toggleCollapsable()"
+        (keydown.space)="$event.preventDefault(); toggleCollapsable()">
+        <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
+        <!-- State dot -->
+        <span class="kit-navigation-item-dot" aria-hidden="true"></span>
+      </div>
+    </div>
+
+    <!-- Children (with CSS transition instead of animation) -->
+    <div
+      class="kit-navigation-item-children"
+      [class.kit-navigation-item-children-expanded]="!isCollapsed"
+      [class.kit-navigation-item-children-collapsed]="isCollapsed">
+      @if (!isCollapsed) {
+        <navigation-tree-outlet
+          [items]="item.children"
+          [data]="treeTemplateData"
+          [branchTemplate]="branchItem"
+          [leafTemplate]="leafItem"
+          [groupTemplate]="groupItem"
+          [dividerTemplate]="dividerItem"
+          [spacerTemplate]="spacerItem"
+          [trackByFn]="treeTrackByFn"
+          [shouldRenderItemFn]="treeShouldRenderItemFn" />
+      }
+    </div>
+
+    <ng-template #branchItem let-child let-data="data">
+      @if (child.type === 'aside') {
+        <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
+        </vertical-navigation-aside-item>
+      } @else {
+        <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
+        </vertical-navigation-collapsable-item>
+      }
+    </ng-template>
+
+    <ng-template #leafItem let-child>
+      <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
+    </ng-template>
+
+    <ng-template #groupItem let-child let-data="data">
+      <div
+        class="vertical-navigation-item-wrapper"
+        [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
+        [ngClass]="child.classes?.wrapper">
+        <div class="kit-navigation-group-header">
+          <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #dividerItem>
+      <vertical-navigation-divider-item></vertical-navigation-divider-item>
+    </ng-template>
+
+    <ng-template #spacerItem>
+      <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
+    </ng-template>
+  `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgClass,
+                        MatTooltipModule,
+                        NavigationItemContent,
+                        NavigationTreeOutlet,
+                        forwardRef(() => VerticalNavigationAsideItemComponent),
+                        VerticalNavigationBasicItemComponent,
+                        forwardRef(() => VerticalNavigationCollapsableItemComponent),
+                        VerticalNavigationDividerItemComponent,
+                        VerticalNavigationSpacerItemComponent,
+                    ], host: {
+                        '[class.vertical-navigation-item-collapsed]': 'isCollapsed',
+                        '[class.vertical-navigation-item-expanded]': 'isExpanded',
+                    }, styles: [".kit-navigation-item-dot{margin-left:auto;width:.5rem;height:.5rem;flex-shrink:0;border-radius:9999px;background:#9ca3af;opacity:.85;transition:background-color .18s ease,transform .18s ease,opacity .18s ease}.kit-navigation-item:hover .kit-navigation-item-dot{opacity:1}.kit-navigation-item.kit-navigation-item-expanded .kit-navigation-item-dot{background:#16a34a;opacity:1;transform:scale(1.1)}.kit-navigation-item-children{overflow:hidden;max-height:0;opacity:0;transition:max-height .3s cubic-bezier(.25,.8,.25,1),opacity .3s cubic-bezier(.25,.8,.25,1)}.kit-navigation-item-children-expanded{max-height:2000px;opacity:1}.kit-navigation-item-children-collapsed{max-height:0;opacity:0}\n"] }]
+        }], propDecorators: { autoCollapse: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }] } });
+
+class VerticalNavigationAsideItemComponent {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _navigationComponent = inject(VerticalNavigationBaseComponent);
+    _router = inject(Router);
+    activeItemId;
+    autoCollapse = true;
+    item;
+    skipChildren = false;
+    active = false;
+    treeTrackByFn = trackNavigationTreeItem;
+    treeShouldRenderItemFn = shouldRenderNavigationItem;
+    _unsubscribeAll = new Subject();
+    /**
+     * On changes
+     */
+    ngOnChanges(changes) {
+        // Active item id
+        if ('activeItemId' in changes) {
+            // Mark if active
+            this._markIfActive();
+        }
+    }
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Mark if active
+        this._markIfActive();
+        // Attach a listener to the NavigationEnd event
+        this._router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this._unsubscribeAll))
+            .subscribe(() => {
+            // Mark if active
+            this._markIfActive();
+        });
+        // Subscribe to onRefreshed on the navigation component
+        this._navigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+    /**
+     * Track by function for ngFor loops
+     */
+    trackByFn(index, item) {
+        return trackNavigationTreeItem(index, item);
+    }
+    shouldRenderItem(item) {
+        return shouldRenderNavigationItem(item);
+    }
+    get treeTemplateData() {
+        return { autoCollapse: this.autoCollapse };
+    }
+    /**
+     * Check if the given item has the given url in one of its children
+     */
+    _hasActiveChild(item) {
+        return hasActiveNavigationDescendant(item, (child) => child.type === 'basic' && !!child.link && this._router.isActive(child.link, child.exactMatch || false));
+    }
+    /**
+     * Decide and mark if the item is active
+     */
+    _markIfActive() {
+        // Check if the activeItemId is equals to this item id
+        this.active = this.activeItemId === this.item.id;
+        // If the aside has a children that is active, always mark it as active
+        if (this._hasActiveChild(this.item)) {
+            this.active = true;
+        }
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationAsideItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationAsideItemComponent, isStandalone: true, selector: "vertical-navigation-aside-item", inputs: { activeItemId: "activeItemId", autoCollapse: "autoCollapse", item: "item", skipChildren: "skipChildren" }, usesOnChanges: true, ngImport: i0, template: `
+    <div
+      class="vertical-navigation-item-wrapper"
+      [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
+      [ngClass]="item.classes?.wrapper">
+      <div
+        class="kit-navigation-item"
+        [ngClass]="{
+          'kit-navigation-item-active': active,
+          'kit-navigation-item-disabled': item.disabled,
+          'kit-navigation-item-active-forced': item.active,
+        }"
+        [matTooltip]="item.tooltip || ''">
+        <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
+      </div>
+    </div>
+
+    <!-- Children -->
+    @if (!skipChildren) {
+      <div class="kit-navigation-item-children">
+        <navigation-tree-outlet
+          [items]="item.children"
+          [data]="treeTemplateData"
+          [branchTemplate]="branchItem"
+          [leafTemplate]="leafItem"
+          [groupTemplate]="groupItem"
+          [dividerTemplate]="dividerItem"
+          [spacerTemplate]="spacerItem"
+          [trackByFn]="treeTrackByFn"
+          [shouldRenderItemFn]="treeShouldRenderItemFn" />
+      </div>
+    }
+
+    <ng-template #branchItem let-child let-data="data">
+      @if (child.type === 'aside') {
+        <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
+        </vertical-navigation-aside-item>
+      } @else {
+        <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
+        </vertical-navigation-collapsable-item>
+      }
+    </ng-template>
+
+    <ng-template #leafItem let-child>
+      <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
+    </ng-template>
+
+    <ng-template #groupItem let-child>
+      <div
+        class="vertical-navigation-item-wrapper"
+        [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
+        [ngClass]="child.classes?.wrapper">
+        <div class="kit-navigation-group-header">
+          <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #dividerItem>
+      <vertical-navigation-divider-item></vertical-navigation-divider-item>
+    </ng-template>
+
+    <ng-template #spacerItem>
+      <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(() => VerticalNavigationAsideItemComponent), selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatTooltipModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatTooltip), selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationBasicItemComponent), selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationCollapsableItemComponent), selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationDividerItemComponent), selector: "vertical-navigation-divider-item" }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationSpacerItemComponent), selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationAsideItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vertical-navigation-aside-item',
+                    template: `
+    <div
+      class="vertical-navigation-item-wrapper"
+      [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
+      [ngClass]="item.classes?.wrapper">
+      <div
+        class="kit-navigation-item"
+        [ngClass]="{
+          'kit-navigation-item-active': active,
+          'kit-navigation-item-disabled': item.disabled,
+          'kit-navigation-item-active-forced': item.active,
+        }"
+        [matTooltip]="item.tooltip || ''">
+        <navigation-item-content [item]="item" variant="vertical"></navigation-item-content>
+      </div>
+    </div>
+
+    <!-- Children -->
+    @if (!skipChildren) {
+      <div class="kit-navigation-item-children">
+        <navigation-tree-outlet
+          [items]="item.children"
+          [data]="treeTemplateData"
+          [branchTemplate]="branchItem"
+          [leafTemplate]="leafItem"
+          [groupTemplate]="groupItem"
+          [dividerTemplate]="dividerItem"
+          [spacerTemplate]="spacerItem"
+          [trackByFn]="treeTrackByFn"
+          [shouldRenderItemFn]="treeShouldRenderItemFn" />
+      </div>
+    }
+
+    <ng-template #branchItem let-child let-data="data">
+      @if (child.type === 'aside') {
+        <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
+        </vertical-navigation-aside-item>
+      } @else {
+        <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
+        </vertical-navigation-collapsable-item>
+      }
+    </ng-template>
+
+    <ng-template #leafItem let-child>
+      <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
+    </ng-template>
+
+    <ng-template #groupItem let-child>
+      <div
+        class="vertical-navigation-item-wrapper"
+        [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
+        [ngClass]="child.classes?.wrapper">
+        <div class="kit-navigation-group-header">
+          <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #dividerItem>
+      <vertical-navigation-divider-item></vertical-navigation-divider-item>
+    </ng-template>
+
+    <ng-template #spacerItem>
+      <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
+    </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        NgClass,
+                        MatTooltipModule,
+                        NavigationItemContent,
+                        NavigationTreeOutlet,
+                        VerticalNavigationBasicItemComponent,
+                        forwardRef(() => VerticalNavigationCollapsableItemComponent),
+                        VerticalNavigationDividerItemComponent,
+                        VerticalNavigationSpacerItemComponent,
+                    ],
+                }]
+        }], propDecorators: { activeItemId: [{
+                type: Input
+            }], autoCollapse: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], skipChildren: [{
+                type: Input
+            }] } });
+
+class VerticalNavigationGroupItemComponent {
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    _navigationComponent = inject(VerticalNavigationBaseComponent);
+    autoCollapse = true;
+    item;
+    _unsubscribeAll = new Subject();
+    treeTrackByFn = trackNavigationTreeItem;
+    treeShouldRenderItemFn = shouldRenderNavigationItem;
+    /**
+     * On init
+     */
+    ngOnInit() {
+        // Subscribe to onRefreshed on the navigation component
+        this._navigationComponent.onRefreshed.pipe(takeUntil(this._unsubscribeAll)).subscribe(() => {
+            // Mark for check
+            this._changeDetectorRef.markForCheck();
+        });
+    }
+    /**
+     * On destroy
+     */
+    ngOnDestroy() {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+    /**
+     * Track by function for ngFor loops
+     */
+    trackByFn(index, item) {
+        return trackNavigationTreeItem(index, item);
+    }
+    shouldRenderItem(item) {
+        return shouldRenderNavigationItem(item);
+    }
+    get treeTemplateData() {
+        return { autoCollapse: this.autoCollapse };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationGroupItemComponent, isStandalone: true, selector: "vertical-navigation-group-item", inputs: { autoCollapse: "autoCollapse", item: "item" }, ngImport: i0, template: `
+    <!-- Item wrapper -->
+    <div
+      class="vertical-navigation-item-wrapper"
+      [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
+      [ngClass]="item.classes?.wrapper">
+      <div class="kit-navigation-group-header">
+        <navigation-item-content [item]="item" variant="vertical-group"></navigation-item-content>
+      </div>
+    </div>
+
+    <navigation-tree-outlet
+      [items]="item.children"
+      [data]="treeTemplateData"
+      [branchTemplate]="branchItem"
+      [leafTemplate]="leafItem"
+      [groupTemplate]="groupItem"
+      [dividerTemplate]="dividerItem"
+      [spacerTemplate]="spacerItem"
+      [trackByFn]="treeTrackByFn"
+      [shouldRenderItemFn]="treeShouldRenderItemFn" />
+
+    <ng-template #branchItem let-child let-data="data">
+      @if (child.type === 'aside') {
+        <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
+        </vertical-navigation-aside-item>
+      } @else {
+        <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
+        </vertical-navigation-collapsable-item>
+      }
+    </ng-template>
+
+    <ng-template #leafItem let-child>
+      <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
+    </ng-template>
+
+    <ng-template #groupItem let-child>
+      <div
+        class="vertical-navigation-item-wrapper"
+        [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
+        [ngClass]="child.classes?.wrapper">
+        <div class="kit-navigation-group-header">
+          <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #dividerItem>
+      <vertical-navigation-divider-item></vertical-navigation-divider-item>
+    </ng-template>
+
+    <ng-template #spacerItem>
+      <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationAsideItemComponent), selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationBasicItemComponent), selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationCollapsableItemComponent), selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationDividerItemComponent), selector: "vertical-navigation-divider-item" }, { kind: "component", type: i0.forwardRef(() => VerticalNavigationSpacerItemComponent), selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationGroupItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vertical-navigation-group-item',
+                    template: `
+    <!-- Item wrapper -->
+    <div
+      class="vertical-navigation-item-wrapper"
+      [class.vertical-navigation-item-has-subtitle]="!!item.subtitle"
+      [ngClass]="item.classes?.wrapper">
+      <div class="kit-navigation-group-header">
+        <navigation-item-content [item]="item" variant="vertical-group"></navigation-item-content>
+      </div>
+    </div>
+
+    <navigation-tree-outlet
+      [items]="item.children"
+      [data]="treeTemplateData"
+      [branchTemplate]="branchItem"
+      [leafTemplate]="leafItem"
+      [groupTemplate]="groupItem"
+      [dividerTemplate]="dividerItem"
+      [spacerTemplate]="spacerItem"
+      [trackByFn]="treeTrackByFn"
+      [shouldRenderItemFn]="treeShouldRenderItemFn" />
+
+    <ng-template #branchItem let-child let-data="data">
+      @if (child.type === 'aside') {
+        <vertical-navigation-aside-item [item]="child" [autoCollapse]="data?.['autoCollapse'] === true">
+        </vertical-navigation-aside-item>
+      } @else {
+        <vertical-navigation-collapsable-item [item]="child" [autoCollapse]="data?.['autoCollapse'] !== false">
+        </vertical-navigation-collapsable-item>
+      }
+    </ng-template>
+
+    <ng-template #leafItem let-child>
+      <vertical-navigation-basic-item [item]="child"></vertical-navigation-basic-item>
+    </ng-template>
+
+    <ng-template #groupItem let-child>
+      <div
+        class="vertical-navigation-item-wrapper"
+        [class.vertical-navigation-item-has-subtitle]="!!child.subtitle"
+        [ngClass]="child.classes?.wrapper">
+        <div class="kit-navigation-group-header">
+          <navigation-item-content [item]="child" variant="vertical-group"></navigation-item-content>
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template #dividerItem>
+      <vertical-navigation-divider-item></vertical-navigation-divider-item>
+    </ng-template>
+
+    <ng-template #spacerItem>
+      <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
+    </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        NgClass,
+                        NavigationItemContent,
+                        NavigationTreeOutlet,
+                        forwardRef(() => VerticalNavigationAsideItemComponent),
+                        VerticalNavigationBasicItemComponent,
+                        forwardRef(() => VerticalNavigationCollapsableItemComponent),
+                        VerticalNavigationDividerItemComponent,
+                        VerticalNavigationSpacerItemComponent,
+                    ],
+                }]
+        }], propDecorators: { autoCollapse: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }] } });
+
+const VERTICAL_NAVIGATION_TEMPLATE = `
+  <div class="vertical-navigation-wrapper">
+    <div class="vertical-navigation-header">
+      <ng-content select="[verticalNavigationHeader]"></ng-content>
+    </div>
+
+    <div class="vertical-navigation-content" #navigationContent>
+      <div class="vertical-navigation-content-header">
+        <ng-content select="[verticalNavigationContentHeader]"></ng-content>
+      </div>
+
+      @for (item of navigation; track trackByFn($index, item)) {
+        @if (shouldRenderItem(item)) {
+          @switch (item.type) {
+            @case ('aside') {
+              <vertical-navigation-aside-item
+                [item]="item"
+                [activeItemId]="activeAsideItemId"
+                [autoCollapse]="autoCollapse"
+                [skipChildren]="true"
+                (click)="toggleAside(item)"
+              >
+              </vertical-navigation-aside-item>
+            }
+
+            @case ('basic') {
+              <vertical-navigation-basic-item [item]="item">
+              </vertical-navigation-basic-item>
+            }
+
+            @case ('collapsable') {
+              <vertical-navigation-collapsable-item
+                [item]="item"
+                [autoCollapse]="autoCollapse"
+              >
+              </vertical-navigation-collapsable-item>
+            }
+
+            @case ('divider') {
+              <vertical-navigation-divider-item></vertical-navigation-divider-item>
+            }
+
+            @case ('group') {
+              <vertical-navigation-group-item
+                [item]="item"
+                [autoCollapse]="autoCollapse"
+              >
+              </vertical-navigation-group-item>
+            }
+
+            @case ('spacer') {
+              <vertical-navigation-spacer-item></vertical-navigation-spacer-item>
+            }
+          }
+        }
+      }
+
+      <div class="vertical-navigation-content-footer">
+        <ng-content select="[verticalNavigationContentFooter]"></ng-content>
+      </div>
+    </div>
+
+    <div class="vertical-navigation-footer">
+      <ng-content select="[verticalNavigationFooter]"></ng-content>
+    </div>
+  </div>
+
+  @if (activeAsideNavigationItem(); as activeAsideItem) {
+    <div [class]="asideWrapperClass">
+      <vertical-navigation-aside-item
+        [item]="activeAsideItem"
+        [autoCollapse]="autoCollapse"
+      >
+      </vertical-navigation-aside-item>
+    </div>
+  }
+`;
+const VERTICAL_NAVIGATION_IMPORTS = [
+    VerticalNavigationAsideItemComponent,
+    VerticalNavigationBasicItemComponent,
+    VerticalNavigationCollapsableItemComponent,
+    VerticalNavigationDividerItemComponent,
+    VerticalNavigationGroupItemComponent,
+    VerticalNavigationSpacerItemComponent,
+];
+const VERTICAL_NAVIGATION_HOST = {
+    '[class]': 'hostClasses',
+    '[style.visibility]': 'opened ? "visible" : "hidden"',
+    '(mouseenter)': 'onMouseenter()',
+    '(mouseleave)': 'onMouseleave()',
+};
+function provideVerticalNavigationComponent(component) {
+    return {
+        provide: VerticalNavigationBaseComponent,
+        useExisting: forwardRef(() => component),
+    };
+}
+
+class VerticalNavigationDefaultComponent extends VerticalNavigationBaseComponent {
+    _componentPrefix = 'vertical-navigation';
+    _asideWrapperClass = 'vertical-navigation-aside-wrapper';
+    appearance = 'default';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDefaultComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: VerticalNavigationDefaultComponent, isStandalone: true, selector: "vertical-navigation", inputs: { appearance: "appearance" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "hostClasses", "style.visibility": "opened ? \"visible\" : \"hidden\"" } }, providers: [provideVerticalNavigationComponent(VerticalNavigationDefaultComponent)], exportAs: ["verticalNavigationDefault"], usesInheritance: true, ngImport: i0, template: "\n  <div class=\"vertical-navigation-wrapper\">\n    <div class=\"vertical-navigation-header\">\n      <ng-content select=\"[verticalNavigationHeader]\"></ng-content>\n    </div>\n\n    <div class=\"vertical-navigation-content\" #navigationContent>\n      <div class=\"vertical-navigation-content-header\">\n        <ng-content select=\"[verticalNavigationContentHeader]\"></ng-content>\n      </div>\n\n      @for (item of navigation; track trackByFn($index, item)) {\n        @if (shouldRenderItem(item)) {\n          @switch (item.type) {\n            @case ('aside') {\n              <vertical-navigation-aside-item\n                [item]=\"item\"\n                [activeItemId]=\"activeAsideItemId\"\n                [autoCollapse]=\"autoCollapse\"\n                [skipChildren]=\"true\"\n                (click)=\"toggleAside(item)\"\n              >\n              </vertical-navigation-aside-item>\n            }\n\n            @case ('basic') {\n              <vertical-navigation-basic-item [item]=\"item\">\n              </vertical-navigation-basic-item>\n            }\n\n            @case ('collapsable') {\n              <vertical-navigation-collapsable-item\n                [item]=\"item\"\n                [autoCollapse]=\"autoCollapse\"\n              >\n              </vertical-navigation-collapsable-item>\n            }\n\n            @case ('divider') {\n              <vertical-navigation-divider-item></vertical-navigation-divider-item>\n            }\n\n            @case ('group') {\n              <vertical-navigation-group-item\n                [item]=\"item\"\n                [autoCollapse]=\"autoCollapse\"\n              >\n              </vertical-navigation-group-item>\n            }\n\n            @case ('spacer') {\n              <vertical-navigation-spacer-item></vertical-navigation-spacer-item>\n            }\n          }\n        }\n      }\n\n      <div class=\"vertical-navigation-content-footer\">\n        <ng-content select=\"[verticalNavigationContentFooter]\"></ng-content>\n      </div>\n    </div>\n\n    <div class=\"vertical-navigation-footer\">\n      <ng-content select=\"[verticalNavigationFooter]\"></ng-content>\n    </div>\n  </div>\n\n  @if (activeAsideNavigationItem(); as activeAsideItem) {\n    <div [class]=\"asideWrapperClass\">\n      <vertical-navigation-aside-item\n        [item]=\"activeAsideItem\"\n        [autoCollapse]=\"autoCollapse\"\n      >\n      </vertical-navigation-aside-item>\n    </div>\n  }\n", isInline: true, styles: [":root{--vertical-navigation-width: 280px}vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-width);min-width:var(--vertical-navigation-width);max-width:var(--vertical-navigation-width);height:100%;min-height:0;max-height:100%;z-index:200}vertical-navigation.vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation.vertical-navigation-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation.vertical-navigation-mode-over{position:fixed;top:0;bottom:0;height:100vh;min-height:100vh;max-height:100vh}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-side{margin-left:calc(var(--vertical-navigation-width) * -1)}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-side.vertical-navigation-opened{margin-left:0}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-over.vertical-navigation-opened{transform:translateZ(0)}vertical-navigation.vertical-navigation-position-left .vertical-navigation-wrapper{left:0}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-side{margin-right:calc(var(--vertical-navigation-width) * -1)}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-side.vertical-navigation-opened{margin-right:0}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-over.vertical-navigation-opened{transform:translateZ(0)}vertical-navigation.vertical-navigation-position-right .vertical-navigation-wrapper{right:0}vertical-navigation.vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation.vertical-navigation-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation.vertical-navigation-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{display:flex;flex-direction:column;width:100%;height:100%;z-index:10;background:var(--background)}.vertical-navigation-header{flex:0 0 auto;background:var(--background);z-index:11}.vertical-navigation-content{flex:1 1 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-height:0}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-footer{flex:0 0 auto;background:var(--background);z-index:11}.vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-width);width:var(--vertical-navigation-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:var(--background)}.vertical-navigation-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-item-wrapper{display:none!important}vertical-navigation.vertical-navigation-position-right .vertical-navigation-aside-wrapper{left:auto;right:var(--vertical-navigation-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}vertical-navigation-group-item{display:block;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:var(--foreground)}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:8px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper{margin-bottom:-2px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:color-mix(in oklch,var(--accent) 10%,transparent)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{color:var(--primary);font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-item-expanded>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-item-expanded>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>*:last-child{margin-bottom:6px!important}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item .kit-navigation-item-icon{display:none}vertical-navigation-collapsable-item .kit-navigation-item-children{position:relative}vertical-navigation-collapsable-item>.kit-navigation-item-children{margin-left:28px!important;padding-left:20px!important;position:relative!important;padding-bottom:0!important}vertical-navigation-collapsable-item>.kit-navigation-item-children:before{content:\"\"!important;position:absolute!important;left:0!important;top:0!important;height:calc(100% - 26px)!important;width:1px!important;background:repeating-linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:1!important;border-radius:0!important}vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper{position:relative}vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before{content:\"\"!important;position:absolute!important;left:-22px!important;top:50%!important;transform:translateY(-.5px)!important;width:22px!important;height:1px!important;background:repeating-linear-gradient(to right,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:2!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children{margin-left:10px!important;padding-left:15px!important;padding-bottom:0!important;position:relative!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children:before{content:\"\"!important;position:absolute!important;left:0!important;top:0!important;height:calc(100% - 26px)!important;width:1px!important;background:repeating-linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:1!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>*:last-child,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>*:last-child{margin-bottom:6px!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before{content:\"\"!important;position:absolute!important;left:-17px!important;top:50%!important;transform:translateY(-.5px)!important;width:17px!important;height:1px!important;background:repeating-linear-gradient(to right,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:2!important}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:visible!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:8px!important;margin:0!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item{position:relative;margin-top:24px}vertical-navigation-group-item:first-of-type{margin-top:0}vertical-navigation-group-item>.vertical-navigation-item-wrapper{position:relative}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;padding:16px;margin:0;max-height:49px;background:var(--background)}vertical-navigation-group-item>.vertical-navigation-item-wrapper>vertical-navigation-basic-item:first-of-type,vertical-navigation-group-item>.vertical-navigation-item-wrapper>vertical-navigation-collapsable-item:first-of-type{margin-top:12px}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-title-wrapper{flex:1}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:var(--primary);opacity:1;line-height:var(--nav-group-title-line-height)}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);color:var(--muted-foreground);opacity:.7;text-transform:none;letter-spacing:normal;margin-top:0}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-overlay+.vertical-navigation-aside-overlay{background-color:transparent}.vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"], dependencies: [{ kind: "component", type: VerticalNavigationAsideItemComponent, selector: "vertical-navigation-aside-item", inputs: ["activeItemId", "autoCollapse", "item", "skipChildren"] }, { kind: "component", type: VerticalNavigationBasicItemComponent, selector: "vertical-navigation-basic-item", inputs: ["item"] }, { kind: "component", type: VerticalNavigationCollapsableItemComponent, selector: "vertical-navigation-collapsable-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationDividerItemComponent, selector: "vertical-navigation-divider-item" }, { kind: "component", type: VerticalNavigationGroupItemComponent, selector: "vertical-navigation-group-item", inputs: ["autoCollapse", "item"] }, { kind: "component", type: VerticalNavigationSpacerItemComponent, selector: "vertical-navigation-spacer-item" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationDefaultComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'vertical-navigation', template: VERTICAL_NAVIGATION_TEMPLATE, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'verticalNavigationDefault', imports: VERTICAL_NAVIGATION_IMPORTS, host: VERTICAL_NAVIGATION_HOST, providers: [provideVerticalNavigationComponent(VerticalNavigationDefaultComponent)], styles: [":root{--vertical-navigation-width: 280px}vertical-navigation{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--vertical-navigation-width);min-width:var(--vertical-navigation-width);max-width:var(--vertical-navigation-width);height:100%;min-height:0;max-height:100%;z-index:200}vertical-navigation.vertical-navigation-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}vertical-navigation.vertical-navigation-animations-enabled .vertical-navigation-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}vertical-navigation.vertical-navigation-mode-over{position:fixed;top:0;bottom:0;height:100vh;min-height:100vh;max-height:100vh}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-side{margin-left:calc(var(--vertical-navigation-width) * -1)}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-side.vertical-navigation-opened{margin-left:0}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-over{left:0;transform:translate3d(-100%,0,0)}vertical-navigation.vertical-navigation-position-left.vertical-navigation-mode-over.vertical-navigation-opened{transform:translateZ(0)}vertical-navigation.vertical-navigation-position-left .vertical-navigation-wrapper{left:0}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-side{margin-right:calc(var(--vertical-navigation-width) * -1)}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-side.vertical-navigation-opened{margin-right:0}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-over{right:0;transform:translate3d(100%,0,0)}vertical-navigation.vertical-navigation-position-right.vertical-navigation-mode-over.vertical-navigation-opened{transform:translateZ(0)}vertical-navigation.vertical-navigation-position-right .vertical-navigation-wrapper{right:0}vertical-navigation.vertical-navigation-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}vertical-navigation.vertical-navigation-inner .vertical-navigation-wrapper{position:relative;overflow:visible;height:auto}vertical-navigation.vertical-navigation-inner .vertical-navigation-wrapper .vertical-navigation-content{overflow:visible!important}.vertical-navigation-wrapper{display:flex;flex-direction:column;width:100%;height:100%;z-index:10;background:var(--background)}.vertical-navigation-header{flex:0 0 auto;background:var(--background);z-index:11}.vertical-navigation-content{flex:1 1 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;min-height:0}.vertical-navigation-content>vertical-navigation-divider-item{margin:24px 0}.vertical-navigation-footer{flex:0 0 auto;background:var(--background);z-index:11}.vertical-navigation-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--vertical-navigation-width);width:var(--vertical-navigation-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:var(--background)}.vertical-navigation-aside-wrapper>vertical-navigation-aside-item{padding:24px 0}.vertical-navigation-aside-wrapper>vertical-navigation-aside-item>.vertical-navigation-item-wrapper{display:none!important}vertical-navigation.vertical-navigation-position-right .vertical-navigation-aside-wrapper{left:auto;right:var(--vertical-navigation-width)}vertical-navigation-aside-item,vertical-navigation-basic-item,vertical-navigation-collapsable-item,vertical-navigation-divider-item,vertical-navigation-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}vertical-navigation-group-item{display:block;-webkit-user-select:none;user-select:none}.kit-navigation-item,.kit-navigation-group-header{font-family:var(--nav-font-family)}vertical-navigation-aside-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-basic-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-collapsable-item .vertical-navigation-item-wrapper .kit-navigation-item,vertical-navigation-group-item .vertical-navigation-item-wrapper .kit-navigation-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:var(--nav-item-font-size);font-weight:var(--nav-item-font-weight);line-height:var(--nav-item-line-height);text-decoration:none;border-radius:6px;color:var(--foreground)}.kit-navigation-item.kit-navigation-item-disabled{cursor:default;opacity:.4}.kit-navigation-item-icon{margin-right:8px;opacity:.6;color:currentColor}.kit-navigation-item-subtitle{font-size:var(--nav-subtitle-font-size);font-weight:var(--nav-subtitle-font-weight);line-height:var(--nav-subtitle-line-height);opacity:.5;color:currentColor}.kit-navigation-item-badge{margin-left:auto}.kit-navigation-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:var(--nav-badge-font-size);font-weight:var(--nav-badge-font-weight);line-height:var(--nav-badge-line-height);white-space:nowrap;height:20px}vertical-navigation-aside-item>.vertical-navigation-item-wrapper,vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper{margin-bottom:-2px}vertical-navigation-aside-item .kit-navigation-item,vertical-navigation-basic-item .kit-navigation-item,vertical-navigation-collapsable-item .kit-navigation-item{cursor:pointer}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-active-forced):not(.kit-navigation-item-active):not(.kit-navigation-item-disabled):hover{background-color:color-mix(in oklch,var(--accent) 10%,transparent)}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item:hover .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item:hover .kit-navigation-item-title{opacity:1}vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-aside-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-basic-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active,vertical-navigation-collapsable-item .kit-navigation-item:not(.kit-navigation-item-disabled).kit-navigation-item-active-forced{color:var(--primary);font-weight:var(--nav-item-active-font-weight)}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-icon,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-icon{opacity:1}vertical-navigation-aside-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-basic-item .kit-navigation-item-active .kit-navigation-item-title,vertical-navigation-collapsable-item .kit-navigation-item-active .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-badge+.kit-navigation-item-dot{margin-left:8px}vertical-navigation-collapsable-item.vertical-navigation-item-expanded>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-icon,vertical-navigation-collapsable-item.vertical-navigation-item-expanded>.vertical-navigation-item-wrapper .kit-navigation-item .kit-navigation-item-title{opacity:1}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:first-child,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>*:first-child{margin-top:6px}vertical-navigation-collapsable-item>.kit-navigation-item-children>*:last-child,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>*:last-child{margin-bottom:6px!important}vertical-navigation-collapsable-item>.kit-navigation-item-children .kit-navigation-item{padding:10px 16px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item .kit-navigation-item-icon{display:none}vertical-navigation-collapsable-item .kit-navigation-item-children{position:relative}vertical-navigation-collapsable-item>.kit-navigation-item-children{margin-left:28px!important;padding-left:20px!important;position:relative!important;padding-bottom:0!important}vertical-navigation-collapsable-item>.kit-navigation-item-children:before{content:\"\"!important;position:absolute!important;left:0!important;top:0!important;height:calc(100% - 26px)!important;width:1px!important;background:repeating-linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:1!important;border-radius:0!important}vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper{position:relative}vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item>.kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before{content:\"\"!important;position:absolute!important;left:-22px!important;top:50%!important;transform:translateY(-.5px)!important;width:22px!important;height:1px!important;background:repeating-linear-gradient(to right,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:2!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children{margin-left:10px!important;padding-left:15px!important;padding-bottom:0!important;position:relative!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children:before{content:\"\"!important;position:absolute!important;left:0!important;top:0!important;height:calc(100% - 26px)!important;width:1px!important;background:repeating-linear-gradient(to bottom,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:1!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>*:last-child,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>*:last-child{margin-bottom:6px!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-basic-item>.vertical-navigation-item-wrapper:before,vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children>navigation-tree-outlet>vertical-navigation-collapsable-item>.vertical-navigation-item-wrapper:before{content:\"\"!important;position:absolute!important;left:-17px!important;top:50%!important;transform:translateY(-.5px)!important;width:17px!important;height:1px!important;background:repeating-linear-gradient(to right,color-mix(in oklch,var(--foreground) 20%,transparent) 0,color-mix(in oklch,var(--foreground) 20%,transparent) 2px,transparent 2px,transparent 4px)!important;z-index:2!important}vertical-navigation-collapsable-item .kit-navigation-item-children{overflow:visible!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item{padding-left:8px!important;margin:0!important}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:72px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:88px}vertical-navigation-collapsable-item .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item-children .kit-navigation-item{padding-left:104px}vertical-navigation-divider-item{margin:12px 0}vertical-navigation-group-item{position:relative;margin-top:24px}vertical-navigation-group-item:first-of-type{margin-top:0}vertical-navigation-group-item>.vertical-navigation-item-wrapper{position:relative}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;padding:16px;margin:0;max-height:49px;background:var(--background)}vertical-navigation-group-item>.vertical-navigation-item-wrapper>vertical-navigation-basic-item:first-of-type,vertical-navigation-group-item>.vertical-navigation-item-wrapper>vertical-navigation-collapsable-item:first-of-type{margin-top:12px}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-title-wrapper{flex:1}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-badge,vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-item-icon{display:none!important}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-group-title{font-size:var(--nav-group-title-font-size);font-weight:var(--nav-group-title-font-weight);letter-spacing:var(--nav-group-title-letter-spacing);text-transform:uppercase;color:var(--primary);opacity:1;line-height:var(--nav-group-title-line-height)}vertical-navigation-group-item>.vertical-navigation-item-wrapper .kit-navigation-group-header .kit-navigation-group-subtitle{font-size:var(--nav-group-subtitle-font-size);font-weight:var(--nav-group-subtitle-font-weight);line-height:var(--nav-group-subtitle-line-height);color:var(--muted-foreground);opacity:.7;text-transform:none;letter-spacing:normal;margin-top:0}vertical-navigation-spacer-item{margin:6px 0}.vertical-navigation-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}.vertical-navigation-overlay+.vertical-navigation-aside-overlay{background-color:transparent}.vertical-navigation-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d;transition:opacity .3s cubic-bezier(.25,.8,.25,1)}\n"] }]
+        }], propDecorators: { appearance: [{
+                type: Input
+            }] } });
+
+class VerticalNavigationCollapsibleComponent {
+    navigationComponent;
+    autoCollapse = true;
+    appearance = 'collapsible';
+    inner = false;
+    mode = 'side';
+    navigation = [];
+    opened = true;
+    position = 'left';
+    transparentOverlay = false;
+    appearanceChanged = new EventEmitter();
+    modeChanged = new EventEmitter();
+    openedChanged = new EventEmitter();
+    positionChanged = new EventEmitter();
+    renderedAppearance = 'default';
+    refresh() {
+        this.navigationComponent?.refresh();
+    }
+    open() {
+        this.navigationComponent?.open();
+    }
+    close() {
+        this.navigationComponent?.close();
+    }
+    toggle() {
+        this.navigationComponent?.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: VerticalNavigationCollapsibleComponent, isStandalone: true, selector: "vertical-navigation-collapsible", inputs: { autoCollapse: "autoCollapse", appearance: "appearance", inner: "inner", mode: "mode", navigation: "navigation", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { appearanceChanged: "appearanceChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged" }, viewQueries: [{ propertyName: "navigationComponent", first: true, predicate: ["navigationInstance"], descendants: true }], exportAs: ["verticalNavigationCollapsible"], ngImport: i0, template: `
+    <vertical-navigation
+      #navigationInstance
+      [autoCollapse]="autoCollapse"
+      [appearance]="renderedAppearance"
+      [inner]="inner"
+      [mode]="mode"
+      [navigation]="navigation"
+      [opened]="opened"
+      [position]="position"
+      [transparentOverlay]="transparentOverlay"
+      (appearanceChanged)="appearanceChanged.emit(appearance)"
+      (modeChanged)="modeChanged.emit($event)"
+      (openedChanged)="openedChanged.emit($event)"
+      (positionChanged)="positionChanged.emit($event)">
+      <ng-content select="[verticalNavigationHeader]"></ng-content>
+      <ng-content select="[verticalNavigationContentHeader]"></ng-content>
+      <ng-content select="[verticalNavigationContentFooter]"></ng-content>
+      <ng-content select="[verticalNavigationFooter]"></ng-content>
+    </vertical-navigation>
+  `, isInline: true, dependencies: [{ kind: "component", type: VerticalNavigationDefaultComponent, selector: "vertical-navigation", inputs: ["appearance"], exportAs: ["verticalNavigationDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: VerticalNavigationCollapsibleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'vertical-navigation-collapsible',
+                    imports: [VerticalNavigationDefaultComponent],
+                    template: `
+    <vertical-navigation
+      #navigationInstance
+      [autoCollapse]="autoCollapse"
+      [appearance]="renderedAppearance"
+      [inner]="inner"
+      [mode]="mode"
+      [navigation]="navigation"
+      [opened]="opened"
+      [position]="position"
+      [transparentOverlay]="transparentOverlay"
+      (appearanceChanged)="appearanceChanged.emit(appearance)"
+      (modeChanged)="modeChanged.emit($event)"
+      (openedChanged)="openedChanged.emit($event)"
+      (positionChanged)="positionChanged.emit($event)">
+      <ng-content select="[verticalNavigationHeader]"></ng-content>
+      <ng-content select="[verticalNavigationContentHeader]"></ng-content>
+      <ng-content select="[verticalNavigationContentFooter]"></ng-content>
+      <ng-content select="[verticalNavigationFooter]"></ng-content>
+    </vertical-navigation>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    exportAs: 'verticalNavigationCollapsible',
+                }]
+        }], propDecorators: { navigationComponent: [{
+                type: ViewChild,
+                args: ['navigationInstance']
+            }], autoCollapse: [{
+                type: Input
+            }], appearance: [{
+                type: Input
+            }], inner: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], navigation: [{
+                type: Input
+            }], opened: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], transparentOverlay: [{
+                type: Input
+            }], appearanceChanged: [{
+                type: Output
+            }], modeChanged: [{
+                type: Output
+            }], openedChanged: [{
+                type: Output
+            }], positionChanged: [{
+                type: Output
+            }] } });
+
+/**
+ * Vertical Navigation Components barrel export
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VerticalNavigationAsideItemComponent, VerticalNavigationBasicItemComponent, VerticalNavigationCollapsableItemComponent, VerticalNavigationCollapsibleComponent, VerticalNavigationDefaultComponent, VerticalNavigationDividerItemComponent, VerticalNavigationGroupItemComponent, VerticalNavigationSpacerItemComponent };
+//# sourceMappingURL=ojiepermana-angular-navigation-vertical.mjs.map