@ojiepermana/angular 0.1.1 → 21.0.0

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

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