@ojiepermana/angular 21.2.4 → 21.3.3

package/fesm2022/ojiepermana-angular-navigation.mjs

@@ -1,2369 +0,0 @@
-import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
-import * as i0 from '@angular/core';
-import { inject, DestroyRef, signal, computed, effect, Injectable, PLATFORM_ID, input, ChangeDetectionStrategy, Component, ViewContainerRef, viewChild, ElementRef } from '@angular/core';
-import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
-import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { filter, map } from 'rxjs/operators';
-import { MatTooltip } from '@angular/material/tooltip';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { FocusTrapFactory } from '@angular/cdk/a11y';
-import { ScrollAreaComponent } from '@ojiepermana/angular/component';
-import { merge } from 'rxjs';
-
-/** Default registry key used when no id is specified. */
-const DEFAULT_NAVIGATION_ID = 'main';
-const SIDEBAR_COLLAPSE_STORAGE_KEY = 'sidebar-collapse';
-const LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY = 'sidebar-appearance';
-function parseSidebarCollapsed(value) {
-    if (value === 'true')
-        return true;
-    if (value === 'false')
-        return false;
-    return null;
-}
-/**
- * Signal-based global state untuk navigation (sidebar/topbar).
- *
- * Items disimpan dalam registry ber-key. Key default adalah `'main'`.
- * Komponen `sidebar` / `topbar` memilih registry via input `navigationId`.
- */
-class NavigationService {
-    doc = inject(DOCUMENT);
-    router = inject(Router);
-    destroyRef = inject(DestroyRef);
-    persistedSidebarCollapsed = this.readPersistedSidebarCollapsed();
-    /** Internal version counter — incremented on every registry mutation. */
-    _version = signal(0, ...(ngDevMode ? [{ debugName: "_version" }] : /* istanbul ignore next */ []));
-    /** Internal map of registered navigation trees. */
-    _registry = new Map();
-    _collapsed = signal(this.persistedSidebarCollapsed ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : /* istanbul ignore next */ []));
-    _hasStoredSidebarCollapse = signal(this.persistedSidebarCollapsed !== null, ...(ngDevMode ? [{ debugName: "_hasStoredSidebarCollapse" }] : /* istanbul ignore next */ []));
-    /**
-     * Backward-compatible accessor — returns items for the default (`'main'`) key.
-     * Prefer `getItems(id)` when working with named registries.
-     */
-    items = computed(() => this.getItems(DEFAULT_NAVIGATION_ID)(), ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    /** Sidebar appearance preference (`default` or `thin`). */
-    sidebarAppearance = computed(() => (this._collapsed() ? 'thin' : 'default'), ...(ngDevMode ? [{ debugName: "sidebarAppearance" }] : /* istanbul ignore next */ []));
-    hasStoredSidebarCollapse = this._hasStoredSidebarCollapse.asReadonly();
-    /** Sidebar collapsed (default ↔ thin) toggle untuk desktop. */
-    collapsed = this._collapsed.asReadonly();
-    /** Sheet drawer terbuka di mobile. */
-    mobileOpen = signal(false, ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
-    /** Set id grup / collapsable yang sedang terbuka. */
-    openGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "openGroups" }] : /* istanbul ignore next */ []));
-    /** URL aktif terakhir. Update otomatis dari Router `NavigationEnd`. */
-    activeUrl = signal(this.router.url, ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
-    /** Trail id item yang sedang match dengan URL aktif (across ALL registries). */
-    activeTrail = computed(() => {
-        this._version(); // track changes
-        const url = this.activeUrl();
-        const trail = new Set();
-        const walk = (list, ancestors) => {
-            let matched = false;
-            for (const item of list) {
-                const id = item.id;
-                const link = 'link' in item ? item.link : undefined;
-                let selfMatch = false;
-                if (link) {
-                    selfMatch = url === link || url.startsWith(link + '/') || url.startsWith(link + '?');
-                }
-                const children = 'children' in item ? (item.children ?? []) : [];
-                const nextAncestors = id ? [...ancestors, id] : ancestors;
-                const childMatch = children.length > 0 && walk(children, nextAncestors);
-                if (selfMatch || childMatch) {
-                    if (id)
-                        trail.add(id);
-                    for (const a of ancestors)
-                        trail.add(a);
-                    matched = true;
-                }
-            }
-            return matched;
-        };
-        for (const items of this._registry.values()) {
-            walk(items, []);
-        }
-        return trail;
-    }, ...(ngDevMode ? [{ debugName: "activeTrail" }] : /* istanbul ignore next */ []));
-    constructor() {
-        effect(() => {
-            if (!this._hasStoredSidebarCollapse()) {
-                return;
-            }
-            this.persistSidebarCollapsed(this._collapsed());
-        });
-        this.router.events
-            .pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
-            .subscribe((e) => this.activeUrl.set(e.urlAfterRedirects));
-    }
-    registerItems(idOrItems, maybeItems) {
-        const [id, items] = typeof idOrItems === 'string' ? [idOrItems, maybeItems] : [DEFAULT_NAVIGATION_ID, idOrItems];
-        this._registry.set(id, items);
-        this._version.update((v) => v + 1);
-    }
-    /** Remove a named registry entry. */
-    removeItems(id) {
-        this._registry.delete(id);
-        this._version.update((v) => v + 1);
-    }
-    /**
-     * Computed yang mengembalikan items untuk key tertentu.
-     * Reactive terhadap perubahan registry.
-     */
-    getItems(id) {
-        return computed(() => {
-            this._version(); // track changes
-            return this._registry.get(id) ?? [];
-        });
-    }
-    setSidebarAppearance(value) {
-        this.setCollapsed(value === 'thin');
-    }
-    toggleSidebarAppearance(currentAppearance = this.sidebarAppearance()) {
-        this.setCollapsed(currentAppearance !== 'thin');
-    }
-    /** Toggle sidebar collapsed (default ↔ thin). */
-    toggleCollapsed() {
-        this.setCollapsed(!this._collapsed());
-    }
-    setCollapsed(value) {
-        this._collapsed.set(value);
-        this._hasStoredSidebarCollapse.set(true);
-    }
-    openMobile() {
-        this.mobileOpen.set(true);
-    }
-    closeMobile() {
-        this.mobileOpen.set(false);
-    }
-    toggleMobile() {
-        this.mobileOpen.update((v) => !v);
-    }
-    isGroupOpen(id) {
-        return this.openGroups().has(id);
-    }
-    toggleGroup(id) {
-        const next = new Set(this.openGroups());
-        if (next.has(id))
-            next.delete(id);
-        else
-            next.add(id);
-        this.openGroups.set(next);
-    }
-    setGroupOpen(id, open) {
-        const next = new Set(this.openGroups());
-        if (open)
-            next.add(id);
-        else
-            next.delete(id);
-        this.openGroups.set(next);
-    }
-    /** Apakah id termasuk dalam active trail saat ini. */
-    isActive(id) {
-        return !!id && this.activeTrail().has(id);
-    }
-    readPersistedSidebarCollapsed() {
-        try {
-            const storage = this.doc.defaultView?.localStorage;
-            const collapsed = parseSidebarCollapsed(storage?.getItem(SIDEBAR_COLLAPSE_STORAGE_KEY));
-            if (collapsed !== null) {
-                return collapsed;
-            }
-            const legacyAppearance = storage?.getItem(LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY);
-            if (legacyAppearance === 'thin') {
-                return true;
-            }
-            if (legacyAppearance === 'default') {
-                return false;
-            }
-            return null;
-        }
-        catch {
-            return null;
-        }
-    }
-    persistSidebarCollapsed(value) {
-        try {
-            const storage = this.doc.defaultView?.localStorage;
-            storage?.setItem(SIDEBAR_COLLAPSE_STORAGE_KEY, String(value));
-            storage?.removeItem(LEGACY_SIDEBAR_APPEARANCE_STORAGE_KEY);
-        }
-        catch {
-            /* ignore */
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-const MATERIAL_SYMBOLS_FONT_ATTR = 'data-ui-nav-icon-font';
-const MATERIAL_SYMBOLS_FONT_ID = 'material-symbols-outlined';
-const MATERIAL_SYMBOLS_FONT_HREF = 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0';
-/**
- * Material Symbols icon renderer.
- * Menyuntikkan stylesheet font sekali saat dipakai agar consumer tidak perlu
- * menambahkan `<link>` manual di `index.html`.
- */
-class UiNavIconComponent {
-    doc = inject(DOCUMENT);
-    platformId = inject(PLATFORM_ID);
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    size = input(null, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-    fontVariationSettings = '"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24';
-    constructor() {
-        this.ensureFontStylesheet();
-    }
-    classes = computed(() => {
-        const base = 'material-symbols-outlined inline-flex items-center justify-center leading-none select-none';
-        const extra = this.class();
-        return extra ? `${base} ${extra}` : base;
-    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    ensureFontStylesheet() {
-        if (!isPlatformBrowser(this.platformId) || !this.doc.head)
-            return;
-        const existing = this.doc.head.querySelector(`link[${MATERIAL_SYMBOLS_FONT_ATTR}="${MATERIAL_SYMBOLS_FONT_ID}"]`);
-        if (existing)
-            return;
-        const link = this.doc.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = MATERIAL_SYMBOLS_FONT_HREF;
-        link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
-        this.doc.head.appendChild(link);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UiNavIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: UiNavIconComponent, isStandalone: true, selector: "ui-nav-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "translate": "no" }, properties: { "class": "classes()", "style.font-size.px": "size()", "style.font-variation-settings": "fontVariationSettings" } }, ngImport: i0, template: `{{ name() }}`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UiNavIconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-nav-icon',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[class]': 'classes()',
-                        '[style.font-size.px]': 'size()',
-                        '[style.font-variation-settings]': 'fontVariationSettings',
-                        'aria-hidden': 'true',
-                        translate: 'no',
-                    },
-                    template: `{{ name() }}`,
-                }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
-
-/** Concatenate and dedupe Tailwind class names. */
-function cn(...inputs) {
-    return twMerge(clsx(inputs));
-}
-
-/**
- * Recursive navigation item renderer (vertical context).
- *
- * Menerima item polymorphic dan delegasi ke template sesuai `type`.
- * Mega dirender sebagai group biasa saat muncul di konteks vertical.
- */
-class UiNavItemComponent {
-    nav = inject(NavigationService);
-    cn = cn;
-    item = input.required(...(ngDevMode ? [{ debugName: "item" }] : /* istanbul ignore next */ []));
-    level = input(0, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
-    /** Compact / icon-only rendering (sidebar `thin`). */
-    compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
-    /** True when this branch sits inside a collapsable rail and can draw a connector back to it. */
-    railConnector = input(false, ...(ngDevMode ? [{ debugName: "railConnector" }] : /* istanbul ignore next */ []));
-    railConnectorDotClasses = 'pointer-events-none absolute -left-[11px] top-1/2 z-10 h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-foreground/80';
-    exactMatch = {
-        exact: true,
-        paths: 'exact',
-        queryParams: 'exact',
-        fragment: 'exact',
-        matrixParams: 'exact',
-    };
-    inexactMatch = {
-        paths: 'subset',
-        queryParams: 'subset',
-        fragment: 'ignored',
-        matrixParams: 'ignored',
-    };
-    type = computed(() => this.item().type, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    groupItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "groupItem" }] : /* istanbul ignore next */ []));
-    collapsableItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "collapsableItem" }] : /* istanbul ignore next */ []));
-    megaItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "megaItem" }] : /* istanbul ignore next */ []));
-    asideItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "asideItem" }] : /* istanbul ignore next */ []));
-    basicItem = computed(() => this.item(), ...(ngDevMode ? [{ debugName: "basicItem" }] : /* istanbul ignore next */ []));
-    headingId = computed(() => {
-        const id = this.item().id ?? '';
-        return `nav-group-${id}`;
-    }, ...(ngDevMode ? [{ debugName: "headingId" }] : /* istanbul ignore next */ []));
-    isGroupOpen() {
-        const id = this.item().id;
-        if (!id)
-            return false;
-        // auto-open when any descendant is active
-        if (this.nav.isActive(id) && 'children' in this.item())
-            return true;
-        return this.nav.isGroupOpen(id);
-    }
-    isTrailActive() {
-        return this.nav.isActive(this.item().id);
-    }
-    railConnectorClasses(active) {
-        if (!active || !this.railConnector())
-            return '';
-        return ('relative after:pointer-events-none after:absolute after:-left-3 after:top-1/2 after:z-0 after:h-px ' +
-            "after:w-3 after:-translate-y-1/2 after:rounded-full after:bg-primary/30 after:content-['']");
-    }
-    showRailConnector(active) {
-        return active && this.railConnector();
-    }
-    toggleGroup() {
-        const id = this.item().id;
-        if (id)
-            this.nav.toggleGroup(id);
-    }
-    runAction() {
-        const item = this.item();
-        if ('action' in item && typeof item.action === 'function') {
-            item.action(item);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UiNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: UiNavItemComponent, isStandalone: true, selector: "ui-nav-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, railConnector: { classPropertyName: "railConnector", publicName: "railConnector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @switch (type()) {
-      @case ('divider') {
-        <hr class="my-2 border-t border-border" role="separator" />
-      }
-      @case ('spacer') {
-        <div class="flex-1"></div>
-      }
-      @case ('group') {
-        <div role="group" [attr.aria-labelledby]="headingId()">
-          @if (!compact()) {
-            <div class="sticky top-0 z-10  p-3 text-muted-foreground backdrop-blur-3xl bg-transparent">
-              <div [id]="headingId()" [class]="cn('ui-nav-heading text-muted-foreground', item().classes?.title)">
-                {{ item().title }}
-              </div>
-            </div>
-          }
-          <div class="flex flex-col gap-0.5">
-            @for (child of groupItem().children; track child.id) {
-              <ui-nav-item
-                [item]="child"
-                [level]="level() + 1"
-                [compact]="compact()"
-                [railConnector]="railConnector()" />
-            }
-          </div>
-        </div>
-      }
-      @case ('collapsable') {
-        @let id = collapsableItem().id ?? '';
-        @let open = isGroupOpen();
-        @let active = isTrailActive();
-        <button
-          type="button"
-          [class]="
-            cn(
-              'ui-nav-text ui-nav-hover-surface group/ni flex w-full items-center gap-3 rounded p-3 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-              active && 'text-primary',
-              railConnectorClasses(active),
-              item().classes?.wrapper
-            )
-          "
-          [attr.aria-expanded]="open"
-          [attr.aria-controls]="id + '-panel'"
-          [disabled]="collapsableItem().disabled || null"
-          [matTooltip]="compact() ? (collapsableItem().title ?? '') : ''"
-          matTooltipPosition="right"
-          [matTooltipDisabled]="!compact()"
-          (click)="toggleGroup()">
-          @if (showRailConnector(active)) {
-            <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
-          }
-          @if (collapsableItem().icon) {
-            <span
-              [class]="
-                cn(
-                  'inline-flex shrink-0 items-center justify-center',
-                  open && 'h-7 w-7 rounded-full border border-brand'
-                )
-              ">
-              <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
-            </span>
-          }
-          @if (!compact()) {
-            <span [class]="cn('flex-1 truncate text-left', item().classes?.title)">
-              {{ collapsableItem().title }}
-            </span>
-            @if (collapsableItem().badge; as badge) {
-              <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
-            }
-            <ui-nav-icon
-              [name]="'chevron_right'"
-              [size]="18"
-              [class]="cn('transition-transform duration-200', open && 'rotate-90')" />
-          }
-        </button>
-        @if (!compact() && open) {
-          <div
-            [id]="id + '-panel'"
-            role="region"
-            class="relative ml-6.5 mt-0.5 flex flex-col gap-0.5 pl-3 before:absolute before:bottom-0 before:left-0 before:-top-3.5 before:w-px before:bg-primary/30 before:content-['']">
-            @for (child of collapsableItem().children; track child.id) {
-              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" [railConnector]="true" />
-            }
-          </div>
-        }
-      }
-      @case ('mega') {
-        <!-- Mega direndahkan ke group saat berada di sidebar vertical. -->
-        <div class="mt-4 py-3 first:mt-0" role="group">
-          @if (!compact()) {
-            <div class="ui-nav-heading sticky top-0 z-10 bg-background px-3 pb-1 text-muted-foreground">
-              {{ item().title }}
-            </div>
-          }
-          <div class="flex flex-col gap-0.5">
-            @for (child of megaItem().children; track child.id) {
-              <ui-nav-item
-                [item]="child"
-                [level]="level() + 1"
-                [compact]="compact()"
-                [railConnector]="railConnector()" />
-            }
-          </div>
-        </div>
-      }
-      @case ('aside') {
-        <a
-          [class]="
-            cn(
-              'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary',
-              railConnectorClasses(rla.isActive),
-              item().classes?.wrapper
-            )
-          "
-          routerLinkActive="text-primary"
-          #rla="routerLinkActive"
-          [attr.aria-current]="rla.isActive ? 'page' : null"
-          [routerLink]="asideItem().link"
-          [queryParams]="asideItem().queryParams"
-          [fragment]="asideItem().fragment ?? undefined"
-          [target]="asideItem().target ?? undefined"
-          [matTooltip]="compact() ? (asideItem().title ?? '') : ''"
-          matTooltipPosition="right"
-          [matTooltipDisabled]="!compact()">
-          @if (showRailConnector(rla.isActive)) {
-            <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
-          }
-          @if (asideItem().icon) {
-            <ui-nav-icon [name]="asideItem().icon!" [size]="18" />
-          }
-          @if (!compact()) {
-            <span class="flex-1 truncate">{{ asideItem().title }}</span>
-          }
-        </a>
-      }
-      @default {
-        <!-- basic -->
-        @if (basicItem().link && !basicItem().externalLink) {
-          <a
-            [class]="
-              cn(
-                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary aria-disabled:pointer-events-none aria-disabled:opacity-50',
-                railConnectorClasses(rla.isActive),
-                item().classes?.wrapper
-              )
-            "
-            routerLinkActive="text-primary"
-            #rla="routerLinkActive"
-            [routerLinkActiveOptions]="
-              basicItem().isActiveMatchOptions ?? (basicItem().exactMatch ? exactMatch : inexactMatch)
-            "
-            [attr.aria-current]="rla.isActive ? 'page' : null"
-            [attr.aria-disabled]="basicItem().disabled || null"
-            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="!compact()"
-            [routerLink]="basicItem().link"
-            [queryParams]="basicItem().queryParams"
-            [queryParamsHandling]="basicItem().queryParamsHandling ?? null"
-            [fragment]="basicItem().fragment ?? undefined"
-            [preserveFragment]="basicItem().preserveFragment ?? false"
-            [target]="basicItem().target ?? undefined"
-            (click)="runAction()">
-            @if (showRailConnector(rla.isActive)) {
-              <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
-            }
-            @if (basicItem().icon) {
-              <ui-nav-icon [name]="basicItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
-            }
-            @if (!compact()) {
-              <span [class]="cn('flex-1 truncate', item().classes?.title)">{{ basicItem().title }}</span>
-              @if (basicItem().badge; as badge) {
-                <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
-              }
-            }
-          </a>
-        } @else if (basicItem().link && basicItem().externalLink) {
-          <a
-            [class]="
-              cn(
-                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                item().classes?.wrapper
-              )
-            "
-            [attr.href]="basicItem().link"
-            [attr.target]="basicItem().target ?? '_blank'"
-            rel="noopener noreferrer"
-            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="!compact()">
-            @if (basicItem().icon) {
-              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
-            }
-            @if (!compact()) {
-              <span class="flex-1 truncate">{{ basicItem().title }}</span>
-            }
-          </a>
-        } @else {
-          <button
-            type="button"
-            [class]="
-              cn(
-                'ui-nav-text ui-nav-hover-surface flex w-full items-center gap-3 rounded px-3 py-2 text-left text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-                item().classes?.wrapper
-              )
-            "
-            [disabled]="basicItem().disabled || null"
-            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="!compact()"
-            (click)="runAction()">
-            @if (basicItem().icon) {
-              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
-            }
-            @if (!compact()) {
-              <span class="flex-1 truncate">{{ basicItem().title }}</span>
-            }
-          </button>
-        }
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact", "railConnector"] }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UiNavItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-nav-item',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [RouterLink, RouterLinkActive, MatTooltip, UiNavIconComponent],
-                    template: `
-    @switch (type()) {
-      @case ('divider') {
-        <hr class="my-2 border-t border-border" role="separator" />
-      }
-      @case ('spacer') {
-        <div class="flex-1"></div>
-      }
-      @case ('group') {
-        <div role="group" [attr.aria-labelledby]="headingId()">
-          @if (!compact()) {
-            <div class="sticky top-0 z-10  p-3 text-muted-foreground backdrop-blur-3xl bg-transparent">
-              <div [id]="headingId()" [class]="cn('ui-nav-heading text-muted-foreground', item().classes?.title)">
-                {{ item().title }}
-              </div>
-            </div>
-          }
-          <div class="flex flex-col gap-0.5">
-            @for (child of groupItem().children; track child.id) {
-              <ui-nav-item
-                [item]="child"
-                [level]="level() + 1"
-                [compact]="compact()"
-                [railConnector]="railConnector()" />
-            }
-          </div>
-        </div>
-      }
-      @case ('collapsable') {
-        @let id = collapsableItem().id ?? '';
-        @let open = isGroupOpen();
-        @let active = isTrailActive();
-        <button
-          type="button"
-          [class]="
-            cn(
-              'ui-nav-text ui-nav-hover-surface group/ni flex w-full items-center gap-3 rounded p-3 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-              active && 'text-primary',
-              railConnectorClasses(active),
-              item().classes?.wrapper
-            )
-          "
-          [attr.aria-expanded]="open"
-          [attr.aria-controls]="id + '-panel'"
-          [disabled]="collapsableItem().disabled || null"
-          [matTooltip]="compact() ? (collapsableItem().title ?? '') : ''"
-          matTooltipPosition="right"
-          [matTooltipDisabled]="!compact()"
-          (click)="toggleGroup()">
-          @if (showRailConnector(active)) {
-            <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
-          }
-          @if (collapsableItem().icon) {
-            <span
-              [class]="
-                cn(
-                  'inline-flex shrink-0 items-center justify-center',
-                  open && 'h-7 w-7 rounded-full border border-brand'
-                )
-              ">
-              <ui-nav-icon [name]="collapsableItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
-            </span>
-          }
-          @if (!compact()) {
-            <span [class]="cn('flex-1 truncate text-left', item().classes?.title)">
-              {{ collapsableItem().title }}
-            </span>
-            @if (collapsableItem().badge; as badge) {
-              <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
-            }
-            <ui-nav-icon
-              [name]="'chevron_right'"
-              [size]="18"
-              [class]="cn('transition-transform duration-200', open && 'rotate-90')" />
-          }
-        </button>
-        @if (!compact() && open) {
-          <div
-            [id]="id + '-panel'"
-            role="region"
-            class="relative ml-6.5 mt-0.5 flex flex-col gap-0.5 pl-3 before:absolute before:bottom-0 before:left-0 before:-top-3.5 before:w-px before:bg-primary/30 before:content-['']">
-            @for (child of collapsableItem().children; track child.id) {
-              <ui-nav-item [item]="child" [level]="level() + 1" [compact]="false" [railConnector]="true" />
-            }
-          </div>
-        }
-      }
-      @case ('mega') {
-        <!-- Mega direndahkan ke group saat berada di sidebar vertical. -->
-        <div class="mt-4 py-3 first:mt-0" role="group">
-          @if (!compact()) {
-            <div class="ui-nav-heading sticky top-0 z-10 bg-background px-3 pb-1 text-muted-foreground">
-              {{ item().title }}
-            </div>
-          }
-          <div class="flex flex-col gap-0.5">
-            @for (child of megaItem().children; track child.id) {
-              <ui-nav-item
-                [item]="child"
-                [level]="level() + 1"
-                [compact]="compact()"
-                [railConnector]="railConnector()" />
-            }
-          </div>
-        </div>
-      }
-      @case ('aside') {
-        <a
-          [class]="
-            cn(
-              'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary',
-              railConnectorClasses(rla.isActive),
-              item().classes?.wrapper
-            )
-          "
-          routerLinkActive="text-primary"
-          #rla="routerLinkActive"
-          [attr.aria-current]="rla.isActive ? 'page' : null"
-          [routerLink]="asideItem().link"
-          [queryParams]="asideItem().queryParams"
-          [fragment]="asideItem().fragment ?? undefined"
-          [target]="asideItem().target ?? undefined"
-          [matTooltip]="compact() ? (asideItem().title ?? '') : ''"
-          matTooltipPosition="right"
-          [matTooltipDisabled]="!compact()">
-          @if (showRailConnector(rla.isActive)) {
-            <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
-          }
-          @if (asideItem().icon) {
-            <ui-nav-icon [name]="asideItem().icon!" [size]="18" />
-          }
-          @if (!compact()) {
-            <span class="flex-1 truncate">{{ asideItem().title }}</span>
-          }
-        </a>
-      }
-      @default {
-        <!-- basic -->
-        @if (basicItem().link && !basicItem().externalLink) {
-          <a
-            [class]="
-              cn(
-                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary aria-disabled:pointer-events-none aria-disabled:opacity-50',
-                railConnectorClasses(rla.isActive),
-                item().classes?.wrapper
-              )
-            "
-            routerLinkActive="text-primary"
-            #rla="routerLinkActive"
-            [routerLinkActiveOptions]="
-              basicItem().isActiveMatchOptions ?? (basicItem().exactMatch ? exactMatch : inexactMatch)
-            "
-            [attr.aria-current]="rla.isActive ? 'page' : null"
-            [attr.aria-disabled]="basicItem().disabled || null"
-            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="!compact()"
-            [routerLink]="basicItem().link"
-            [queryParams]="basicItem().queryParams"
-            [queryParamsHandling]="basicItem().queryParamsHandling ?? null"
-            [fragment]="basicItem().fragment ?? undefined"
-            [preserveFragment]="basicItem().preserveFragment ?? false"
-            [target]="basicItem().target ?? undefined"
-            (click)="runAction()">
-            @if (showRailConnector(rla.isActive)) {
-              <span aria-hidden="true" data-nav-rail-dot [class]="railConnectorDotClasses"></span>
-            }
-            @if (basicItem().icon) {
-              <ui-nav-icon [name]="basicItem().icon!" [size]="18" [class]="item().classes?.icon ?? ''" />
-            }
-            @if (!compact()) {
-              <span [class]="cn('flex-1 truncate', item().classes?.title)">{{ basicItem().title }}</span>
-              @if (basicItem().badge; as badge) {
-                <span [class]="badge.classes ?? 'ui-nav-badge ml-auto'">{{ badge.title }}</span>
-              }
-            }
-          </a>
-        } @else if (basicItem().link && basicItem().externalLink) {
-          <a
-            [class]="
-              cn(
-                'ui-nav-text ui-nav-hover-surface flex items-center gap-3 rounded px-3 py-2 text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-                item().classes?.wrapper
-              )
-            "
-            [attr.href]="basicItem().link"
-            [attr.target]="basicItem().target ?? '_blank'"
-            rel="noopener noreferrer"
-            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="!compact()">
-            @if (basicItem().icon) {
-              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
-            }
-            @if (!compact()) {
-              <span class="flex-1 truncate">{{ basicItem().title }}</span>
-            }
-          </a>
-        } @else {
-          <button
-            type="button"
-            [class]="
-              cn(
-                'ui-nav-text ui-nav-hover-surface flex w-full items-center gap-3 rounded px-3 py-2 text-left text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-                item().classes?.wrapper
-              )
-            "
-            [disabled]="basicItem().disabled || null"
-            [matTooltip]="compact() ? (basicItem().title ?? '') : ''"
-            matTooltipPosition="right"
-            [matTooltipDisabled]="!compact()"
-            (click)="runAction()">
-            @if (basicItem().icon) {
-              <ui-nav-icon [name]="basicItem().icon!" [size]="18" />
-            }
-            @if (!compact()) {
-              <span class="flex-1 truncate">{{ basicItem().title }}</span>
-            }
-          </button>
-        }
-      }
-    }
-  `,
-                }]
-        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], railConnector: [{ type: i0.Input, args: [{ isSignal: true, alias: "railConnector", required: false }] }] } });
-
-/**
- * Vertical navigation (sidebar) — shadcn-styled.
- *
- * Variants:
- * - `default`: 17.5rem, label + icon
- * - `thin`: 4rem icon-only; hover memunculkan overlay expand (tidak push konten)
- *
- * Mobile (`< md`): saat `autoMobile=true` (default), host desktop disembunyikan
- * dan konten dirender lewat CDK Overlay drawer dengan focus trap. State buka
- * dikontrol lewat `NavigationService.mobileOpen`.
- */
-class SidebarComponent {
-    nav = inject(NavigationService);
-    bp = inject(BreakpointObserver);
-    overlay = inject(Overlay);
-    vcr = inject(ViewContainerRef);
-    focusTrapFactory = inject(FocusTrapFactory);
-    doc = inject(DOCUMENT);
-    destroyRef = inject(DestroyRef);
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    /** Registry key di `NavigationService`. Default `'main'`. */
-    navigationId = input(DEFAULT_NAVIGATION_ID, ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
-    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    /** Desktop border can be owned by the sidebar or by the surrounding layout shell. */
-    borderSource = input('component', ...(ngDevMode ? [{ debugName: "borderSource" }] : /* istanbul ignore next */ []));
-    position = input('left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    header = input(true, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    /** Auto switch ke CDK overlay drawer saat viewport `< md`. */
-    autoMobile = input(true, ...(ngDevMode ? [{ debugName: "autoMobile" }] : /* istanbul ignore next */ []));
-    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
-    autoRegister = input(true, ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
-    /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
-    resolvedItems = computed(() => {
-        const explicit = this.items();
-        return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();
-    }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
-    hovered = signal(false, ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
-    suppressHoverUntilLeave = signal(false, ...(ngDevMode ? [{ debugName: "suppressHoverUntilLeave" }] : /* istanbul ignore next */ []));
-    drawerTpl = viewChild.required('drawerTpl');
-    drawerRef = null;
-    focusTrap = null;
-    previouslyFocused = null;
-    /** True saat viewport `< md` (767.98px). */
-    isMobileMedia = toSignal(this.bp.observe('(max-width: 767.98px)').pipe(map((s) => s.matches)), {
-        initialValue: false,
-    });
-    isMobile = computed(() => this.autoMobile() && this.isMobileMedia(), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
-    resolvedCollapsed = computed(() => {
-        if (this.nav.hasStoredSidebarCollapse()) {
-            return this.nav.collapsed();
-        }
-        return this.appearance() === 'thin';
-    }, ...(ngDevMode ? [{ debugName: "resolvedCollapsed" }] : /* istanbul ignore next */ []));
-    resolvedAppearance = computed(() => {
-        return this.resolvedCollapsed() ? 'thin' : 'default';
-    }, ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
-    hoverActive = computed(() => this.hovered() && !this.suppressHoverUntilLeave(), ...(ngDevMode ? [{ debugName: "hoverActive" }] : /* istanbul ignore next */ []));
-    isExpanded = computed(() => !this.resolvedCollapsed() || this.hoverActive(), ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
-    isCompact = computed(() => !this.isMobile() && this.resolvedCollapsed() && !this.hoverActive(), ...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
-    toggleButtonLabel = computed(() => this.resolvedCollapsed() ? 'Expand sidebar' : 'Collapse sidebar', ...(ngDevMode ? [{ debugName: "toggleButtonLabel" }] : /* istanbul ignore next */ []));
-    constructor() {
-        // Auto-register items ke service untuk active trail (hanya jika input non-kosong).
-        effect(() => {
-            const explicit = this.items();
-            if (this.autoRegister() && explicit.length > 0)
-                this.nav.registerItems(this.navigationId(), explicit);
-        });
-        // Kelola overlay drawer berdasarkan mobileOpen + isMobile.
-        effect(() => {
-            const open = this.nav.mobileOpen();
-            const mobile = this.isMobile();
-            if (mobile && open)
-                this.openDrawer();
-            else
-                this.closeDrawer();
-        });
-        this.destroyRef.onDestroy(() => this.closeDrawer());
-    }
-    hostClasses = computed(() => {
-        const base = ['relative flex shrink-0 text-foreground', 'transition-[width] duration-200 ease-out'];
-        if (this.resolvedCollapsed())
-            base.push('w-16');
-        else
-            base.push('[width:17.5rem]');
-        if (this.borderSource() === 'component') {
-            if (this.position() === 'right')
-                base.push('border-l', 'border-primary/30');
-            else
-                base.push('border-r', 'border-primary/30');
-        }
-        return [...base, this.class()].join(' ');
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    headerClasses = computed(() => {
-        const base = ['flex items-center gap-1 border-b border-primary/30'];
-        if (this.isCompact()) {
-            base.push('h-12', 'justify-center', 'px-2');
-        }
-        else {
-            base.push('h-12', 'pr-2');
-        }
-        return base.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
-    headerSlotClasses = computed(() => {
-        const base = ['min-w-0'];
-        if (this.isCompact()) {
-            base.push('flex flex-1 items-center justify-center overflow-hidden', '[&>[sidebar-header]>*]:mx-auto', '[&>[sidebar-header]>*]:w-auto', '[&>[sidebar-header]>*]:max-w-full', '[&>[sidebar-header]>*]:justify-center', '[&>[sidebar-header]>*]:gap-0', '[&>[sidebar-header]>*]:px-0', '[&>[sidebar-header]>*]:shrink-0', '[&>[sidebar-header]>*>*:first-child]:mx-auto', '[&>[sidebar-header]>*>*:nth-child(n+2)]:hidden');
-        }
-        else {
-            base.push('flex min-w-0 flex-1 items-center');
-        }
-        return base.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "headerSlotClasses" }] : /* istanbul ignore next */ []));
-    navClasses = computed(() => {
-        const base = ['min-h-full'];
-        if (this.isCompact()) {
-            base.push('px-2', '[&_.ui-nav-text]:mx-auto', '[&_.ui-nav-text]:w-10', '[&_.ui-nav-text]:justify-center', '[&_.ui-nav-text]:px-0');
-        }
-        return base.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []));
-    scrollViewportClasses = computed(() => 'overflow-y-auto overflow-x-hidden scrollbar-thin scrollbar-thumb-primary scrollbar-track-primary/10', ...(ngDevMode ? [{ debugName: "scrollViewportClasses" }] : /* istanbul ignore next */ []));
-    footerClasses = computed(() => {
-        const base = ['h-12 border-t border-primary/30'];
-        if (this.isCompact()) {
-            base.push('flex items-center justify-center px-2');
-        }
-        return base.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
-    footerSlotClasses = computed(() => {
-        const base = ['h-full'];
-        if (this.isCompact()) {
-            base.push('flex h-full items-center justify-center overflow-hidden', '[&>[sidebar-footer]>*]:mx-auto', '[&>[sidebar-footer]>*]:w-auto', '[&>[sidebar-footer]>*]:max-w-full', '[&>[sidebar-footer]>*]:justify-center', '[&>[sidebar-footer]>*]:gap-0', '[&>[sidebar-footer]>*]:px-0', '[&>[sidebar-footer]>*>*:first-child]:mx-auto', '[&>[sidebar-footer]>*>*:nth-child(n+2)]:hidden');
-        }
-        else {
-            base.push('w-full');
-        }
-        return base.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "footerSlotClasses" }] : /* istanbul ignore next */ []));
-    innerClasses = computed(() => {
-        const overlayActive = this.resolvedCollapsed() && this.hoverActive();
-        const base = ['flex h-full flex-col transition-[width] duration-200 ease-out'];
-        if (this.resolvedCollapsed()) {
-            base.push('bg-background');
-        }
-        if (overlayActive) {
-            base.push('absolute inset-y-0 z-30 border-l border-r border-primary/30 shadow-xl [width:17.5rem]', this.position() === 'right' ? 'right-0' : 'left-0');
-        }
-        else {
-            base.push('w-full');
-        }
-        return base.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "innerClasses" }] : /* istanbul ignore next */ []));
-    onHoverEnter() {
-        if (!this.resolvedCollapsed() || this.isMobile() || this.suppressHoverUntilLeave())
-            return;
-        this.hovered.set(true);
-    }
-    onHoverLeave() {
-        this.suppressHoverUntilLeave.set(false);
-        if (this.resolvedCollapsed())
-            this.hovered.set(false);
-    }
-    toggleAppearance(event) {
-        event.stopPropagation();
-        const nextCollapsed = !this.resolvedCollapsed();
-        this.nav.setCollapsed(nextCollapsed);
-        this.hovered.set(false);
-        this.suppressHoverUntilLeave.set(nextCollapsed);
-    }
-    /** Touch fallback: tap pada strip thin (ketika belum expanded) untuk expand. */
-    onHostClick(event) {
-        if (!this.resolvedCollapsed() || this.isMobile())
-            return;
-        if (this.hovered())
-            return;
-        const target = event.target;
-        // Biarkan klik pada control interaktif terus propagate (tidak intercept).
-        if (target && target.closest('a,button,[role="menuitem"]'))
-            return;
-        this.hovered.set(true);
-    }
-    openDrawer() {
-        if (this.drawerRef)
-            return;
-        const side = this.position();
-        const pos = this.overlay.position().global().top('0');
-        if (side === 'right')
-            pos.right('0');
-        else
-            pos.left('0');
-        this.drawerRef = this.overlay.create({
-            positionStrategy: pos,
-            height: '100vh',
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-dark-backdrop',
-            scrollStrategy: this.overlay.scrollStrategies.block(),
-            panelClass: ['sidebar-drawer'],
-        });
-        const portal = new TemplatePortal(this.drawerTpl(), this.vcr);
-        const viewRef = this.drawerRef.attach(portal);
-        viewRef.detectChanges();
-        const root = this.drawerRef.overlayElement;
-        this.focusTrap = this.focusTrapFactory.create(root);
-        this.previouslyFocused = this.doc.activeElement;
-        queueMicrotask(() => this.focusTrap?.focusInitialElementWhenReady());
-        this.drawerRef
-            .backdropClick()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.nav.closeMobile());
-        this.drawerRef
-            .keydownEvents()
-            .pipe(filter((e) => e.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.nav.closeMobile());
-    }
-    closeDrawer() {
-        if (!this.drawerRef)
-            return;
-        this.focusTrap?.destroy();
-        this.focusTrap = null;
-        this.drawerRef.dispose();
-        this.drawerRef = null;
-        this.previouslyFocused?.focus?.();
-        this.previouslyFocused = null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SidebarComponent, isStandalone: true, selector: "sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, borderSource: { classPropertyName: "borderSource", publicName: "borderSource", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoMobile: { classPropertyName: "autoMobile", publicName: "autoMobile", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, listeners: { "mouseenter": "onHoverEnter()", "mouseleave": "onHoverLeave()", "focusin": "onHoverEnter()", "click": "onHostClick($event)" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "resolvedAppearance()", "attr.data-position": "position()", "attr.data-expanded": "isExpanded()", "hidden": "isMobile()" } }, viewQueries: [{ propertyName: "drawerTpl", first: true, predicate: ["drawerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div [class]="innerClasses()">
-      <ng-container [ngTemplateOutlet]="body" />
-    </div>
-
-    <ng-template #body>
-      @if (header()) {
-        <div [class]="headerClasses()">
-          <div [class]="headerSlotClasses()">
-            <ng-content select="[sidebar-header]" />
-          </div>
-          @if (!isMobile() && !isCompact()) {
-            <button
-              type="button"
-              data-sidebar-toggle
-              class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-              [attr.aria-label]="toggleButtonLabel()"
-              [attr.title]="toggleButtonLabel()"
-              [attr.aria-pressed]="resolvedAppearance() === 'thin'"
-              (click)="toggleAppearance($event)">
-              <ui-nav-icon name="view_sidebar" [size]="18" class="text-current" />
-            </button>
-          }
-        </div>
-      }
-      <ui-scroll-area class="min-h-0 flex-1" [viewportClass]="scrollViewportClasses()">
-        <nav [class]="navClasses()">
-          @for (item of resolvedItems(); track item.id) {
-            <ui-nav-item [item]="item" [compact]="isCompact()" />
-          }
-        </nav>
-      </ui-scroll-area>
-      <div [class]="footerClasses()">
-        <div [class]="footerSlotClasses()">
-          <ng-content select="[sidebar-footer]" />
-        </div>
-      </div>
-    </ng-template>
-
-    <ng-template #drawerTpl>
-      <div
-        role="dialog"
-        aria-modal="true"
-        [attr.aria-label]="ariaLabel()"
-        class="flex h-full w-72 max-w-[85vw] flex-col border-primary/30 text-foreground shadow-xl"
-        [class.border-r]="position() === 'left'"
-        [class.border-l]="position() === 'right'"
-        [class.border-primary/30]="position() === 'left' || position() === 'right'">
-        <ng-container [ngTemplateOutlet]="body" />
-      </div>
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ScrollAreaComponent, selector: "ui-scroll-area", inputs: ["class", "viewportClass", "viewportAriaLabel", "viewportTabIndex"] }, { kind: "component", type: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact", "railConnector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'sidebar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgTemplateOutlet, ScrollAreaComponent, UiNavIconComponent, UiNavItemComponent],
-                    host: {
-                        role: 'navigation',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[class]': 'hostClasses()',
-                        '[attr.data-appearance]': 'resolvedAppearance()',
-                        '[attr.data-position]': 'position()',
-                        '[attr.data-expanded]': 'isExpanded()',
-                        '[hidden]': 'isMobile()',
-                        '(mouseenter)': 'onHoverEnter()',
-                        '(mouseleave)': 'onHoverLeave()',
-                        '(focusin)': 'onHoverEnter()',
-                        '(click)': 'onHostClick($event)',
-                    },
-                    template: `
-    <div [class]="innerClasses()">
-      <ng-container [ngTemplateOutlet]="body" />
-    </div>
-
-    <ng-template #body>
-      @if (header()) {
-        <div [class]="headerClasses()">
-          <div [class]="headerSlotClasses()">
-            <ng-content select="[sidebar-header]" />
-          </div>
-          @if (!isMobile() && !isCompact()) {
-            <button
-              type="button"
-              data-sidebar-toggle
-              class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-              [attr.aria-label]="toggleButtonLabel()"
-              [attr.title]="toggleButtonLabel()"
-              [attr.aria-pressed]="resolvedAppearance() === 'thin'"
-              (click)="toggleAppearance($event)">
-              <ui-nav-icon name="view_sidebar" [size]="18" class="text-current" />
-            </button>
-          }
-        </div>
-      }
-      <ui-scroll-area class="min-h-0 flex-1" [viewportClass]="scrollViewportClasses()">
-        <nav [class]="navClasses()">
-          @for (item of resolvedItems(); track item.id) {
-            <ui-nav-item [item]="item" [compact]="isCompact()" />
-          }
-        </nav>
-      </ui-scroll-area>
-      <div [class]="footerClasses()">
-        <div [class]="footerSlotClasses()">
-          <ng-content select="[sidebar-footer]" />
-        </div>
-      </div>
-    </ng-template>
-
-    <ng-template #drawerTpl>
-      <div
-        role="dialog"
-        aria-modal="true"
-        [attr.aria-label]="ariaLabel()"
-        class="flex h-full w-72 max-w-[85vw] flex-col border-primary/30 text-foreground shadow-xl"
-        [class.border-r]="position() === 'left'"
-        [class.border-l]="position() === 'right'"
-        [class.border-primary/30]="position() === 'left' || position() === 'right'">
-        <ng-container [ngTemplateOutlet]="body" />
-      </div>
-    </ng-template>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], borderSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderSource", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoMobile", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], drawerTpl: [{ type: i0.ViewChild, args: ['drawerTpl', { isSignal: true }] }] } });
-
-/**
- * Horizontal navigation (topbar) — shadcn-styled.
- */
-class TopbarComponent {
-    nav = inject(NavigationService);
-    overlay = inject(Overlay);
-    vcr = inject(ViewContainerRef);
-    host = inject(ElementRef);
-    destroyRef = inject(DestroyRef);
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    /** Registry key di `NavigationService`. Default `'main'`. */
-    navigationId = input(DEFAULT_NAVIGATION_ID, ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
-    appearance = input('default', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Primary', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
-    autoRegister = input(true, ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
-    /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
-    showHamburger = input(true, ...(ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []));
-    hamburgerLabel = input('Open navigation', ...(ngDevMode ? [{ debugName: "hamburgerLabel" }] : /* istanbul ignore next */ []));
-    /** Resolved items: input jika disediakan, fallback ke registry NavigationService. */
-    resolvedItems = computed(() => {
-        const explicit = this.items();
-        return explicit.length > 0 ? explicit : this.nav.getItems(this.navigationId())();
-    }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
-    openId = signal(null, ...(ngDevMode ? [{ debugName: "openId" }] : /* istanbul ignore next */ []));
-    active = null;
-    dropdownTpl = viewChild.required('dropdownTpl');
-    constructor() {
-        effect(() => {
-            const explicit = this.items();
-            if (this.autoRegister() && explicit.length > 0)
-                this.nav.registerItems(this.navigationId(), explicit);
-        });
-        this.destroyRef.onDestroy(() => this.closeAll());
-    }
-    hostClasses = computed(() => {
-        return ['sticky top-0 z-20 flex h-11 w-full items-center', this.class()].join(' ');
-    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    endSlotClasses = computed(() => {
-        const base = ['flex h-full shrink-0 items-center justify-end gap-2 overflow-hidden'];
-        base.push('[&>[topbar-end]]:flex', '[&>[topbar-end]]:min-w-0', '[&>[topbar-end]]:max-w-full', '[&>[topbar-end]]:items-center', '[&>[topbar-end]]:justify-end', '[&>[topbar-end]]:gap-2', '[&>[topbar-end]>*]:w-auto', '[&>[topbar-end]>*]:max-w-full', '[&>[topbar-end]>*]:justify-end', '[&>[topbar-end]>*]:gap-0', '[&>[topbar-end]>*]:px-2', '[&>[topbar-end]>*>*:first-child]:ml-auto', '[&>[topbar-end]>*>*:nth-child(n+2)]:hidden');
-        return base.join(' ');
-    }, ...(ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []));
-    asBasic(i) {
-        return i;
-    }
-    asCollapsable(i) {
-        return i;
-    }
-    asGroup(i) {
-        return i;
-    }
-    isItemActive(id) {
-        return this.nav.isActive(id);
-    }
-    toggleDropdown(trigger, item) {
-        if (this.openId() === item.id)
-            this.closeAll();
-        else
-            this.openDropdown(trigger, item);
-    }
-    openDropdown(trigger, item) {
-        if (this.openId() === item.id)
-            return;
-        this.closeAll();
-        this.attach(trigger, item, this.dropdownTpl());
-    }
-    attach(trigger, item, tpl) {
-        const strategy = this.overlay
-            .position()
-            .flexibleConnectedTo(trigger)
-            .withFlexibleDimensions(false)
-            .withPush(false)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 4,
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -4,
-            },
-        ]);
-        const ref = this.overlay.create({
-            positionStrategy: strategy,
-            scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            hasBackdrop: true,
-            backdropClass: 'cdk-overlay-transparent-backdrop',
-            panelClass: ['ui-dropdown-panel'],
-        });
-        const portal = new TemplatePortal(tpl, this.vcr, { $implicit: item });
-        ref.attach(portal);
-        this.active = { ref, id: item.id ?? '' };
-        this.openId.set(item.id ?? null);
-        merge(ref.backdropClick(), ref.keydownEvents().pipe(filter((e) => e.key === 'Escape')))
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            this.closeAll();
-            trigger.focus();
-        });
-    }
-    closeAll() {
-        if (this.active) {
-            this.active.ref.dispose();
-            this.active = null;
-        }
-        this.openId.set(null);
-    }
-    /** Menubar keyboard navigation: ArrowLeft/Right antar trigger, Home/End, ArrowDown fokus panel. */
-    onMenubarKeydown(event) {
-        const key = event.key;
-        const root = this.host.nativeElement;
-        const triggers = Array.from(root.querySelectorAll('ul[role="menubar"] [role="menuitem"]')).filter((el) => !el.hasAttribute('disabled'));
-        if (triggers.length === 0)
-            return;
-        const currentIndex = triggers.indexOf(document.activeElement);
-        if (key === 'ArrowDown' && currentIndex !== -1) {
-            event.preventDefault();
-            // Jika open, fokus item pertama panel; jika belum, focus tetap (panel akan dibuka via click/mouseenter).
-            queueMicrotask(() => this.focusFirstInPanel());
-            return;
-        }
-        if (key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Home' && key !== 'End')
-            return;
-        let nextIndex = currentIndex;
-        if (key === 'ArrowRight')
-            nextIndex = (currentIndex + 1 + triggers.length) % triggers.length;
-        else if (key === 'ArrowLeft')
-            nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
-        else if (key === 'Home')
-            nextIndex = 0;
-        else if (key === 'End')
-            nextIndex = triggers.length - 1;
-        if (nextIndex !== currentIndex && triggers[nextIndex]) {
-            event.preventDefault();
-            triggers[nextIndex].focus();
-        }
-    }
-    /** Arrow-key navigation dalam dropdown panel. */
-    onPanelKeydown(event) {
-        const key = event.key;
-        if (key !== 'ArrowDown' &&
-            key !== 'ArrowUp' &&
-            key !== 'ArrowLeft' &&
-            key !== 'ArrowRight' &&
-            key !== 'Home' &&
-            key !== 'End')
-            return;
-        const panel = this.active?.ref.overlayElement;
-        if (!panel)
-            return;
-        const items = this.collectPanelFocusables(panel);
-        if (items.length === 0)
-            return;
-        const currentIndex = items.indexOf(document.activeElement);
-        let nextIndex = currentIndex;
-        if (key === 'ArrowDown' || key === 'ArrowRight')
-            nextIndex = (currentIndex + 1 + items.length) % items.length;
-        else if (key === 'ArrowUp' || key === 'ArrowLeft')
-            nextIndex = (currentIndex - 1 + items.length) % items.length;
-        else if (key === 'Home')
-            nextIndex = 0;
-        else if (key === 'End')
-            nextIndex = items.length - 1;
-        if (nextIndex !== currentIndex && items[nextIndex]) {
-            event.preventDefault();
-            items[nextIndex].focus();
-        }
-    }
-    collectPanelFocusables(root) {
-        return Array.from(root.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);
-    }
-    focusFirstInPanel() {
-        const panel = this.active?.ref.overlayElement;
-        if (!panel)
-            return;
-        const items = this.collectPanelFocusables(panel);
-        items[0]?.focus();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: TopbarComponent, isStandalone: true, selector: "topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, navigationId: { classPropertyName: "navigationId", publicName: "navigationId", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, autoRegister: { classPropertyName: "autoRegister", publicName: "autoRegister", isSignal: true, isRequired: false, transformFunction: null }, showHamburger: { classPropertyName: "showHamburger", publicName: "showHamburger", isSignal: true, isRequired: false, transformFunction: null }, hamburgerLabel: { classPropertyName: "hamburgerLabel", publicName: "hamburgerLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "ariaLabel()", "class": "hostClasses()", "attr.data-appearance": "appearance()" } }, viewQueries: [{ propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div class="flex h-full w-full items-center gap-3 px-1">
-      <div data-topbar-slot="start" class="flex shrink-0 items-center gap-2">
-        @if (showHamburger()) {
-          <button
-            type="button"
-            class="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
-            [attr.aria-label]="hamburgerLabel()"
-            [attr.aria-expanded]="nav.mobileOpen()"
-            (click)="nav.toggleMobile()">
-            <ui-nav-icon name="menu" [size]="18" />
-          </button>
-        }
-        <ng-content select="[topbar-start]" />
-      </div>
-
-      <div data-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
-        <ul
-          class="flex min-w-0 flex-1 items-center justify-center gap-1"
-          role="menubar"
-          (keydown)="onMenubarKeydown($event)">
-          @for (item of resolvedItems(); track item.id) {
-            <li role="none" class="relative">
-              @switch (item.type) {
-                @case ('basic') {
-                  @let basic = asBasic(item);
-                  <a
-                    role="menuitem"
-                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary"
-                    [routerLink]="basic.link"
-                    routerLinkActive
-                    #rla="routerLinkActive"
-                    [class.text-primary]="rla.isActive"
-                    [attr.aria-current]="rla.isActive ? 'page' : null"
-                    [target]="basic.target ?? undefined">
-                    @if (basic.icon) {
-                      <ui-nav-icon [name]="basic.icon" [size]="18" />
-                    }
-                    <span>{{ basic.title }}</span>
-                  </a>
-                }
-                @case ('collapsable') {
-                  @let col = asCollapsable(item);
-                  <button
-                    #trigger
-                    type="button"
-                    role="menuitem"
-                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    [class.text-primary]="isItemActive(col.id)"
-                    [attr.aria-expanded]="openId() === col.id"
-                    [attr.aria-haspopup]="'menu'"
-                    (click)="toggleDropdown(trigger, item)"
-                    (mouseenter)="openDropdown(trigger, item)">
-                    @if (col.icon) {
-                      <ui-nav-icon [name]="col.icon" [size]="18" />
-                    }
-                    <span>{{ col.title }}</span>
-                    <ui-nav-icon name="expand_more" [size]="18" />
-                  </button>
-                }
-                @case ('group') {
-                  @let group = asGroup(item);
-                  <button
-                    #trigger
-                    type="button"
-                    role="menuitem"
-                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    [class.text-primary]="isItemActive(group.id)"
-                    [attr.aria-expanded]="openId() === group.id"
-                    [attr.aria-haspopup]="'menu'"
-                    (click)="toggleDropdown(trigger, item)"
-                    (mouseenter)="openDropdown(trigger, item)">
-                    @if (group.icon) {
-                      <ui-nav-icon [name]="group.icon" [size]="18" />
-                    }
-                    <span>{{ group.title }}</span>
-                    <ui-nav-icon name="expand_more" [size]="18" />
-                  </button>
-                }
-                @default {
-                  <span class="ui-nav-heading px-3 py-2 text-muted-foreground">
-                    {{ item.title }}
-                  </span>
-                }
-              }
-            </li>
-          }
-        </ul>
-      </div>
-
-      <div data-topbar-slot="end" [class]="endSlotClasses()">
-        <ng-content select="[topbar-end]" />
-      </div>
-    </div>
-
-    <!-- Dropdown template -->
-    <ng-template #dropdownTpl let-item>
-      <div role="menu" class="min-w-56 border border-brand bg-background/95 p-1" (keydown)="onPanelKeydown($event)">
-        @for (child of item.children; track child.id) {
-          <ui-nav-item [item]="child" />
-        }
-      </div>
-    </ng-template>
-  `, isInline: true, dependencies: [{ 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: UiNavIconComponent, selector: "ui-nav-icon", inputs: ["name", "class", "size"] }, { kind: "component", type: UiNavItemComponent, selector: "ui-nav-item", inputs: ["item", "level", "compact", "railConnector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TopbarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'topbar',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [RouterLink, RouterLinkActive, UiNavIconComponent, UiNavItemComponent],
-                    host: {
-                        role: 'navigation',
-                        '[attr.aria-label]': 'ariaLabel()',
-                        '[class]': 'hostClasses()',
-                        '[attr.data-appearance]': 'appearance()',
-                    },
-                    template: `
-    <div class="flex h-full w-full items-center gap-3 px-1">
-      <div data-topbar-slot="start" class="flex shrink-0 items-center gap-2">
-        @if (showHamburger()) {
-          <button
-            type="button"
-            class="inline-flex h-9 w-9 items-center justify-center rounded-md text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
-            [attr.aria-label]="hamburgerLabel()"
-            [attr.aria-expanded]="nav.mobileOpen()"
-            (click)="nav.toggleMobile()">
-            <ui-nav-icon name="menu" [size]="18" />
-          </button>
-        }
-        <ng-content select="[topbar-start]" />
-      </div>
-
-      <div data-topbar-slot="nav" class="flex min-w-0 flex-1 items-center justify-center">
-        <ul
-          class="flex min-w-0 flex-1 items-center justify-center gap-1"
-          role="menubar"
-          (keydown)="onMenubarKeydown($event)">
-          @for (item of resolvedItems(); track item.id) {
-            <li role="none" class="relative">
-              @switch (item.type) {
-                @case ('basic') {
-                  @let basic = asBasic(item);
-                  <a
-                    role="menuitem"
-                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-primary"
-                    [routerLink]="basic.link"
-                    routerLinkActive
-                    #rla="routerLinkActive"
-                    [class.text-primary]="rla.isActive"
-                    [attr.aria-current]="rla.isActive ? 'page' : null"
-                    [target]="basic.target ?? undefined">
-                    @if (basic.icon) {
-                      <ui-nav-icon [name]="basic.icon" [size]="18" />
-                    }
-                    <span>{{ basic.title }}</span>
-                  </a>
-                }
-                @case ('collapsable') {
-                  @let col = asCollapsable(item);
-                  <button
-                    #trigger
-                    type="button"
-                    role="menuitem"
-                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    [class.text-primary]="isItemActive(col.id)"
-                    [attr.aria-expanded]="openId() === col.id"
-                    [attr.aria-haspopup]="'menu'"
-                    (click)="toggleDropdown(trigger, item)"
-                    (mouseenter)="openDropdown(trigger, item)">
-                    @if (col.icon) {
-                      <ui-nav-icon [name]="col.icon" [size]="18" />
-                    }
-                    <span>{{ col.title }}</span>
-                    <ui-nav-icon name="expand_more" [size]="18" />
-                  </button>
-                }
-                @case ('group') {
-                  @let group = asGroup(item);
-                  <button
-                    #trigger
-                    type="button"
-                    role="menuitem"
-                    class="ui-nav-text inline-flex items-center gap-2 rounded-md px-3 py-2 text-foreground/80 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-                    [class.text-primary]="isItemActive(group.id)"
-                    [attr.aria-expanded]="openId() === group.id"
-                    [attr.aria-haspopup]="'menu'"
-                    (click)="toggleDropdown(trigger, item)"
-                    (mouseenter)="openDropdown(trigger, item)">
-                    @if (group.icon) {
-                      <ui-nav-icon [name]="group.icon" [size]="18" />
-                    }
-                    <span>{{ group.title }}</span>
-                    <ui-nav-icon name="expand_more" [size]="18" />
-                  </button>
-                }
-                @default {
-                  <span class="ui-nav-heading px-3 py-2 text-muted-foreground">
-                    {{ item.title }}
-                  </span>
-                }
-              }
-            </li>
-          }
-        </ul>
-      </div>
-
-      <div data-topbar-slot="end" [class]="endSlotClasses()">
-        <ng-content select="[topbar-end]" />
-      </div>
-    </div>
-
-    <!-- Dropdown template -->
-    <ng-template #dropdownTpl let-item>
-      <div role="menu" class="min-w-56 border border-brand bg-background/95 p-1" (keydown)="onPanelKeydown($event)">
-        @for (child of item.children; track child.id) {
-          <ui-nav-item [item]="child" />
-        }
-      </div>
-    </ng-template>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], navigationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigationId", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], autoRegister: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoRegister", required: false }] }], showHamburger: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHamburger", required: false }] }], hamburgerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hamburgerLabel", required: false }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }] } });
-
-const DemoNavigationData = [
-    {
-        id: 'documentation',
-        title: 'Documentation',
-        subtitle: 'Guides and getting started resources',
-        type: 'group',
-        icon: 'menu_book',
-        children: [
-            {
-                id: 'documentation-introduction',
-                title: 'Introduction',
-                type: 'basic',
-                icon: 'menu_book',
-                link: '/docs/introduction',
-            },
-            {
-                id: 'documentation-installation',
-                title: 'Installation',
-                type: 'basic',
-                icon: 'download',
-                link: '/docs/installation',
-            },
-            {
-                id: 'documentation-getting-started',
-                title: 'Getting started',
-                type: 'basic',
-                icon: 'rocket_launch',
-                link: '/docs/getting-started',
-            },
-            {
-                id: 'documentation-upgrade-guide',
-                title: 'Upgrade Guide',
-                type: 'basic',
-                icon: 'arrow_circle_up',
-                link: '/docs/upgrade-guide',
-            },
-            {
-                id: 'documentation-changelog',
-                title: 'Changelog',
-                type: 'basic',
-                icon: 'history',
-                link: '/docs/changelog',
-            },
-            {
-                id: 'documentation-icon-lucide',
-                title: 'Lucide Icons',
-                type: 'basic',
-                icon: 'star',
-                link: '/lucide-icons',
-                badge: {
-                    title: 'Demo',
-                    classes: 'ml-2 px-2 py-0.5 rounded-full text-xs bg-blue-500 text-white',
-                },
-            },
-        ],
-    },
-    {
-        id: 'user-interface',
-        title: 'User Interface',
-        subtitle: 'Components and design elements',
-        type: 'group',
-        icon: 'dashboard',
-        children: [
-            {
-                id: 'user-interface-material-components',
-                title: 'Material Components',
-                type: 'collapsable',
-                icon: 'deployed_code',
-                children: [
-                    {
-                        id: 'user-interface-material-components-inputs-forms',
-                        title: 'Inputs & Forms',
-                        type: 'collapsable',
-                        icon: 'input',
-                        children: [
-                            {
-                                id: 'user-interface-material-components-inputs-forms-autocomplete',
-                                title: 'Autocomplete',
-                                type: 'basic',
-                                icon: 'search',
-                                link: '/ui/material/autocomplete',
-                            },
-                            {
-                                id: 'user-interface-material-components-inputs-forms-checkbox',
-                                title: 'Checkbox',
-                                type: 'basic',
-                                icon: 'check_box',
-                                link: '/ui/material/checkbox',
-                            },
-                            {
-                                id: 'user-interface-material-components-inputs-forms-datepicker',
-                                title: 'Datepicker',
-                                type: 'basic',
-                                icon: 'calendar_today',
-                                link: '/ui/material/datepicker',
-                            },
-                            {
-                                id: 'user-interface-material-components-inputs-forms-form-field',
-                                title: 'Form field',
-                                type: 'basic',
-                                icon: 'text_fields',
-                                link: '/ui/material/form-field',
-                            },
-                            {
-                                id: 'user-interface-material-components-inputs-forms-input',
-                                title: 'Input',
-                                type: 'basic',
-                                icon: 'text_fields',
-                                link: '/ui/material/input',
-                            },
-                            {
-                                id: 'user-interface-material-components-inputs-forms-radio-button',
-                                title: 'Radio button',
-                                type: 'basic',
-                                icon: 'radio_button_checked',
-                                link: '/ui/material/radio',
-                            },
-                            {
-                                id: 'user-interface-material-components-inputs-forms-select',
-                                title: 'Select',
-                                type: 'basic',
-                                icon: 'expand_more',
-                                link: '/ui/material/select',
-                            },
-                            {
-                                id: 'user-interface-material-components-inputs-forms-slider',
-                                title: 'Slider',
-                                type: 'basic',
-                                icon: 'tune',
-                                link: '/ui/material/slider',
-                            },
-                            {
-                                id: 'user-interface-material-components-inputs-forms-slide-toggle',
-                                title: 'Slide toggle',
-                                type: 'basic',
-                                icon: 'toggle_on',
-                                link: '/ui/material/slide-toggle',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-material-components-buttons-actions',
-                        title: 'Buttons & Actions',
-                        type: 'collapsable',
-                        icon: 'ads_click',
-                        children: [
-                            {
-                                id: 'user-interface-material-components-buttons-actions-button',
-                                title: 'Button',
-                                type: 'basic',
-                                icon: 'crop_square',
-                                link: '/ui/material/button',
-                            },
-                            {
-                                id: 'user-interface-material-components-buttons-actions-button-toggle',
-                                title: 'Button toggle',
-                                type: 'basic',
-                                icon: 'view_column',
-                                link: '/ui/material/button-toggle',
-                            },
-                            {
-                                id: 'user-interface-material-components-buttons-actions-chips',
-                                title: 'Chips',
-                                type: 'basic',
-                                icon: 'label',
-                                link: '/ui/material/chips',
-                                badge: {
-                                    title: 'New',
-                                    classes: 'ml-2 px-2 py-0.5 rounded-full text-xs bg-green-500 text-white',
-                                },
-                            },
-                            {
-                                id: 'user-interface-material-components-buttons-actions-menu',
-                                title: 'Menu',
-                                type: 'basic',
-                                icon: 'menu',
-                                link: '/ui/material/menu',
-                            },
-                            {
-                                id: 'user-interface-material-components-buttons-actions-ripples',
-                                title: 'Ripples',
-                                type: 'basic',
-                                icon: 'waves',
-                                link: '/ui/material/ripples',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-material-components-layout-containers',
-                        title: 'Layout & Containers',
-                        type: 'collapsable',
-                        icon: 'dashboard',
-                        children: [
-                            {
-                                id: 'user-interface-material-components-layout-containers-card',
-                                title: 'Card',
-                                type: 'basic',
-                                icon: 'credit_card',
-                                link: '/ui/material/card',
-                            },
-                            {
-                                id: 'user-interface-material-components-layout-containers-divider',
-                                title: 'Divider',
-                                type: 'basic',
-                                icon: 'remove',
-                                link: '/ui/material/divider',
-                            },
-                            {
-                                id: 'user-interface-material-components-layout-containers-expansion-panel',
-                                title: 'Expansion Panel',
-                                type: 'basic',
-                                icon: 'expand_more',
-                                link: '/ui/material/expansion',
-                            },
-                            {
-                                id: 'user-interface-material-components-layout-containers-grid-list',
-                                title: 'Grid list',
-                                type: 'basic',
-                                icon: 'grid_view',
-                                link: '/ui/material/grid-list',
-                            },
-                            {
-                                id: 'user-interface-material-components-layout-containers-list',
-                                title: 'List',
-                                type: 'basic',
-                                icon: 'list',
-                                link: '/ui/material/list',
-                            },
-                            {
-                                id: 'user-interface-material-components-layout-containers-sidenav',
-                                title: 'Sidenav',
-                                type: 'basic',
-                                icon: 'view_sidebar',
-                                link: '/ui/material/sidenav',
-                            },
-                            {
-                                id: 'user-interface-material-components-layout-containers-tabs',
-                                title: 'Tabs',
-                                type: 'basic',
-                                icon: 'tab',
-                                link: '/ui/material/tabs',
-                            },
-                            {
-                                id: 'user-interface-material-components-layout-containers-toolbar',
-                                title: 'Toolbar',
-                                type: 'basic',
-                                icon: 'build',
-                                link: '/ui/material/toolbar',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-material-components-data-display',
-                        title: 'Data & Display',
-                        type: 'collapsable',
-                        icon: 'bar_chart',
-                        children: [
-                            {
-                                id: 'user-interface-material-components-data-display-badge',
-                                title: 'Badge',
-                                type: 'basic',
-                                icon: 'verified',
-                                link: '/ui/material/badge',
-                            },
-                            {
-                                id: 'user-interface-material-components-data-display-icon',
-                                title: 'Icon',
-                                type: 'basic',
-                                icon: 'star',
-                                link: '/ui/material/icon',
-                            },
-                            {
-                                id: 'user-interface-material-components-data-display-paginator',
-                                title: 'Paginator',
-                                type: 'basic',
-                                icon: 'first_page',
-                                link: '/ui/material/paginator',
-                            },
-                            {
-                                id: 'user-interface-material-components-data-display-progress-bar',
-                                title: 'Progress bar',
-                                type: 'basic',
-                                icon: 'hourglass_empty',
-                                link: '/ui/material/progress-bar',
-                            },
-                            {
-                                id: 'user-interface-material-components-data-display-progress-spinner',
-                                title: 'Progress spinner',
-                                type: 'basic',
-                                icon: 'progress_activity',
-                                link: '/ui/material/progress-spinner',
-                            },
-                            {
-                                id: 'user-interface-material-components-data-display-sort',
-                                title: 'Sort header',
-                                type: 'basic',
-                                icon: 'swap_vert',
-                                link: '/ui/material/sort',
-                            },
-                            {
-                                id: 'user-interface-material-components-data-display-table',
-                                title: 'Table',
-                                type: 'basic',
-                                icon: 'table_chart',
-                                link: '/ui/material/table',
-                            },
-                            {
-                                id: 'user-interface-material-components-data-display-tree',
-                                title: 'Tree',
-                                type: 'basic',
-                                icon: 'hub',
-                                link: '/ui/material/tree',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-material-components-overlays-modals',
-                        title: 'Overlays & Modals',
-                        type: 'collapsable',
-                        icon: 'layers',
-                        children: [
-                            {
-                                id: 'user-interface-material-components-overlays-modals-bottom-sheet',
-                                title: 'Bottom Sheet',
-                                type: 'basic',
-                                icon: 'south',
-                                link: '/ui/material/bottom-sheet',
-                            },
-                            {
-                                id: 'user-interface-material-components-overlays-modals-dialog',
-                                title: 'Dialog',
-                                type: 'basic',
-                                icon: 'chat',
-                                link: '/ui/material/dialog',
-                            },
-                            {
-                                id: 'user-interface-material-components-overlays-modals-snack-bar',
-                                title: 'Snack-bar',
-                                type: 'basic',
-                                icon: 'notifications',
-                                link: '/ui/material/snack-bar',
-                            },
-                            {
-                                id: 'user-interface-material-components-overlays-modals-tooltip',
-                                title: 'Tooltip',
-                                type: 'basic',
-                                icon: 'help',
-                                link: '/ui/material/tooltip',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-material-components-navigation-stepper',
-                        title: 'Navigation & Steps',
-                        type: 'collapsable',
-                        icon: 'account_tree',
-                        children: [
-                            {
-                                id: 'user-interface-material-components-navigation-stepper-stepper',
-                                title: 'Stepper',
-                                type: 'basic',
-                                icon: 'account_tree',
-                                link: '/ui/material/stepper',
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                id: 'user-interface-angular-cdk',
-                title: 'Angular CDK',
-                type: 'collapsable',
-                icon: 'widgets',
-                children: [
-                    {
-                        id: 'user-interface-angular-cdk-accessibility-navigation',
-                        title: 'Accessibility & Navigation',
-                        type: 'collapsable',
-                        icon: 'accessibility',
-                        children: [
-                            {
-                                id: 'user-interface-angular-cdk-accessibility-navigation-a11y',
-                                title: 'Accessibility',
-                                type: 'basic',
-                                icon: 'accessibility',
-                                link: '/ui/cdk/a11y',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-accessibility-navigation-focus-trap',
-                                title: 'Focus Trap',
-                                type: 'basic',
-                                icon: 'center_focus_strong',
-                                link: '/ui/cdk/focus-trap',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-accessibility-navigation-live-announcer',
-                                title: 'Live Announcer',
-                                type: 'basic',
-                                icon: 'campaign',
-                                link: '/ui/cdk/live-announcer',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-accessibility-navigation-listbox',
-                                title: 'Listbox',
-                                type: 'basic',
-                                icon: 'list',
-                                link: '/ui/cdk/listbox',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-accessibility-navigation-menu-cdk',
-                                title: 'Menu',
-                                type: 'basic',
-                                icon: 'menu',
-                                link: '/ui/cdk/menu',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-angular-cdk-layout-positioning',
-                        title: 'Layout & Positioning',
-                        type: 'collapsable',
-                        icon: 'dashboard',
-                        children: [
-                            {
-                                id: 'user-interface-angular-cdk-layout-positioning-layout',
-                                title: 'Layout',
-                                type: 'basic',
-                                icon: 'dashboard',
-                                link: '/ui/cdk/layout',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-layout-positioning-overlay',
-                                title: 'Overlay',
-                                type: 'basic',
-                                icon: 'layers',
-                                link: '/ui/cdk/overlay',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-layout-positioning-portal',
-                                title: 'Portal',
-                                type: 'basic',
-                                icon: 'radio_button_checked',
-                                link: '/ui/cdk/portal',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-layout-positioning-scrolling',
-                                title: 'Scrolling',
-                                type: 'basic',
-                                icon: 'unfold_more',
-                                link: '/ui/cdk/scrolling',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-layout-positioning-virtual-scrolling',
-                                title: 'Virtual Scrolling',
-                                type: 'basic',
-                                icon: 'view_agenda',
-                                link: '/ui/cdk/virtual-scrolling',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-angular-cdk-interaction-behavior',
-                        title: 'Interaction & Behavior',
-                        type: 'collapsable',
-                        icon: 'pan_tool',
-                        children: [
-                            {
-                                id: 'user-interface-angular-cdk-interaction-behavior-drag-drop',
-                                title: 'Drag and Drop',
-                                type: 'basic',
-                                icon: 'open_with',
-                                link: '/ui/cdk/drag-drop',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-interaction-behavior-observers',
-                                title: 'Observers',
-                                type: 'basic',
-                                icon: 'visibility',
-                                link: '/ui/cdk/observers',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-interaction-behavior-platform',
-                                title: 'Platform',
-                                type: 'basic',
-                                icon: 'devices',
-                                link: '/ui/cdk/platform',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-interaction-behavior-stepper-cdk',
-                                title: 'Stepper',
-                                type: 'basic',
-                                icon: 'account_tree',
-                                link: '/ui/cdk/stepper',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-angular-cdk-forms-data',
-                        title: 'Forms & Data',
-                        type: 'collapsable',
-                        icon: 'storage',
-                        children: [
-                            {
-                                id: 'user-interface-angular-cdk-forms-data-accordion',
-                                title: 'Accordion',
-                                type: 'basic',
-                                icon: 'expand_more',
-                                link: '/ui/cdk/accordion',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-forms-data-table-cdk',
-                                title: 'Table',
-                                type: 'basic',
-                                icon: 'table_chart',
-                                link: '/ui/cdk/table',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-forms-data-tree-cdk',
-                                title: 'Tree',
-                                type: 'basic',
-                                icon: 'hub',
-                                link: '/ui/cdk/tree',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-angular-cdk-utilities-helpers',
-                        title: 'Utilities & Helpers',
-                        type: 'collapsable',
-                        icon: 'build',
-                        children: [
-                            {
-                                id: 'user-interface-angular-cdk-utilities-helpers-bidi',
-                                title: 'Bidirectionality',
-                                type: 'basic',
-                                icon: 'swap_horiz',
-                                link: '/ui/cdk/bidi',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-utilities-helpers-clipboard',
-                                title: 'Clipboard',
-                                type: 'basic',
-                                icon: 'content_paste',
-                                link: '/ui/cdk/clipboard',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-utilities-helpers-coercion',
-                                title: 'Coercion',
-                                type: 'basic',
-                                icon: 'shuffle',
-                                link: '/ui/cdk/coercion',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-utilities-helpers-collections',
-                                title: 'Collections',
-                                type: 'basic',
-                                icon: 'folder',
-                                link: '/ui/cdk/collections',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-utilities-helpers-keycodes',
-                                title: 'Keycodes',
-                                type: 'basic',
-                                icon: 'keyboard',
-                                link: '/ui/cdk/keycodes',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-angular-cdk-testing-tools',
-                        title: 'Testing Tools',
-                        type: 'collapsable',
-                        icon: 'bug_report',
-                        children: [
-                            {
-                                id: 'user-interface-angular-cdk-testing-tools-component-harnesses',
-                                title: 'Component Harnesses',
-                                type: 'basic',
-                                icon: 'science',
-                                link: '/ui/cdk/testing',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-testing-tools-test-harnesses',
-                                title: 'Test Harnesses',
-                                type: 'basic',
-                                icon: 'science',
-                                link: '/ui/cdk/test-harnesses',
-                            },
-                        ],
-                    },
-                    {
-                        id: 'user-interface-angular-cdk-advanced-feature',
-                        title: 'Advanced feature',
-                        type: 'collapsable',
-                        icon: 'settings',
-                        children: [
-                            {
-                                id: 'user-interface-angular-cdk-advanced-feature-dialog-cdk',
-                                title: 'Dialog',
-                                type: 'basic',
-                                icon: 'chat',
-                                link: '/ui/cdk/dialog',
-                            },
-                            {
-                                id: 'user-interface-angular-cdk-advanced-feature-text-field',
-                                title: 'Text Field',
-                                type: 'basic',
-                                icon: 'text_fields',
-                                link: '/ui/cdk/text-field',
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                id: 'user-interface-tailwind',
-                title: 'Tailwind CSS',
-                type: 'collapsable',
-                icon: 'air',
-                children: [
-                    {
-                        id: 'user-interface-tailwind-css-heading',
-                        title: 'Heading',
-                        type: 'basic',
-                        icon: 'text_fields',
-                        link: '/ui/tailwind/heading',
-                    },
-                    {
-                        id: 'user-interface-tailwind-data-display',
-                        title: 'Data Display',
-                        type: 'basic',
-                        icon: 'bar_chart',
-                        link: '/ui/tailwind/data-display',
-                    },
-                    {
-                        id: 'user-interface-tailwind-list',
-                        title: 'List',
-                        type: 'basic',
-                        icon: 'list',
-                        link: '/ui/tailwind/list',
-                    },
-                    {
-                        id: 'user-interface-tailwind-form',
-                        title: 'Form',
-                        type: 'basic',
-                        icon: 'dynamic_form',
-                        link: '/ui/tailwind/form',
-                    },
-                    {
-                        id: 'user-interface-tailwind-feedback',
-                        title: 'Feedback',
-                        type: 'basic',
-                        icon: 'report',
-                        link: '/ui/tailwind/feedback',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        id: 'feature',
-        title: 'Features',
-        subtitle: 'Advanced functionality and customization options',
-        type: 'group',
-        icon: 'settings',
-        children: [
-            {
-                id: 'feature-theme',
-                title: 'Themes',
-                type: 'collapsable',
-                icon: 'palette',
-                children: [
-                    {
-                        id: 'feature-theme-dark-mode',
-                        title: 'Dark Mode',
-                        type: 'basic',
-                        icon: 'dark_mode',
-                        link: '/feature/theme/dark-mode',
-                    },
-                    {
-                        id: 'feature-theme-color',
-                        title: 'Color Schemes',
-                        type: 'basic',
-                        icon: 'palette',
-                        link: '/feature/theme/color-schemes',
-                        badge: {
-                            title: 'Beta',
-                            classes: 'ml-2 px-2 py-0.5 rounded-full text-xs bg-yellow-500 text-white',
-                        },
-                    },
-                    {
-                        id: 'feature-layout',
-                        title: 'Layout',
-                        type: 'collapsable',
-                        icon: 'dashboard',
-                        children: [
-                            {
-                                id: 'feature-layout-apps',
-                                title: 'Application',
-                                type: 'collapsable',
-                                icon: 'web',
-                                children: [
-                                    {
-                                        id: 'feature-layout-apps-vertical',
-                                        title: 'Vertical',
-                                        type: 'basic',
-                                        icon: 'view_sidebar',
-                                        link: '/feature/layout/application/vertical',
-                                    },
-                                    {
-                                        id: 'feature-layout-apps-horizontal',
-                                        title: 'Horizontal',
-                                        type: 'basic',
-                                        icon: 'view_column',
-                                        link: '/feature/layout/application/horizontal',
-                                    },
-                                ],
-                            },
-                            {
-                                id: 'feature-layout-page',
-                                title: 'Pages',
-                                type: 'collapsable',
-                                icon: 'description',
-                                children: [
-                                    {
-                                        id: 'feature-layout-page-page',
-                                        title: 'Page',
-                                        type: 'basic',
-                                        icon: 'description',
-                                        link: '/feature/layout/page/page',
-                                    },
-                                    {
-                                        id: 'feature-layout-page-content',
-                                        title: 'Content',
-                                        type: 'basic',
-                                        icon: 'description',
-                                        link: '/feature/layout/page/content',
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                ],
-            },
-            {
-                id: 'feature-navigation',
-                title: 'Navigation',
-                type: 'collapsable',
-                icon: 'navigation',
-                children: [
-                    {
-                        id: 'feature-navigation-horizontal-navigation',
-                        title: 'Horizontal ',
-                        type: 'basic',
-                        icon: 'view_column',
-                        link: '/feature/navigation/horizontal',
-                    },
-                    {
-                        id: 'feature-navigation-vertical-navigation',
-                        title: 'Vertical ',
-                        type: 'collapsable',
-                        icon: 'view_agenda',
-                        children: [
-                            {
-                                id: 'feature-navigation-vertical-navigation-default',
-                                title: 'Default',
-                                type: 'basic',
-                                icon: 'view_agenda',
-                                link: '/feature/navigation/vertical/default',
-                            },
-                            {
-                                id: 'feature-navigation-vertical-navigation-thin',
-                                title: 'Thin',
-                                type: 'basic',
-                                icon: 'view_agenda',
-                                link: '/feature/navigation/vertical/thin',
-                            },
-                            {
-                                id: 'feature-navigation-vertical-navigation-compact',
-                                title: 'Compact',
-                                type: 'basic',
-                                icon: 'view_agenda',
-                                link: '/feature/navigation/vertical/compact',
-                            },
-                            {
-                                id: 'feature-navigation-vertical-navigation-dense',
-                                title: 'Dense',
-                                type: 'basic',
-                                icon: 'view_agenda',
-                                link: '/feature/navigation/vertical/dense',
-                            },
-                        ],
-                    },
-                ],
-            },
-        ],
-    },
-];
-
-/*
- * Public API Surface of @ojiepermana/angular/navigation
- */
-// Core
-const NAVIGATION_VERSION = '0.0.1';
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DEFAULT_NAVIGATION_ID, DemoNavigationData, NAVIGATION_VERSION, NavigationService, SidebarComponent, TopbarComponent, UiNavIconComponent, UiNavItemComponent };
-//# sourceMappingURL=ojiepermana-angular-navigation.mjs.map