@ojiepermana/angular 22.0.1 → 22.0.29

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

@@ -1,670 +0,0 @@
-import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, ElementRef, DestroyRef, input, computed, signal, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { merge } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { UiNavIconComponent } from '@ojiepermana/angular/navigation/icon';
-import { UiNavItemComponent } from '@ojiepermana/angular/navigation/item';
-import { NavigationService, DEFAULT_NAVIGATION_ID } from '@ojiepermana/angular/navigation/service';
-
-/**
- * Horizontal navigation (topbar) — shadcn-styled.
- */
-class TopbarComponent {
-    nav = inject(NavigationService);
-    overlay = inject(Overlay);
-    vcr = inject(ViewContainerRef);
-    host = inject(ElementRef);
-    destroyRef = inject(DestroyRef);
-    items = input([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    /** Registry key di `NavigationService`. Default `'main'`. */
-    navigationId = input(DEFAULT_NAVIGATION_ID, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "navigationId" }] : /* istanbul ignore next */ []));
-    variant = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    ariaLabel = input('Primary', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
-    class = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
-    /** Auto-register `items` ke `NavigationService` agar `activeTrail` bekerja. */
-    autoRegister = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "autoRegister" }] : /* istanbul ignore next */ []));
-    /** Tampilkan hamburger di `< md` yang men-toggle mobile drawer sidebar. */
-    showHamburger = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []));
-    hamburgerLabel = input('Open navigation', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hamburgerLabel" }] : /* istanbul ignore next */ []));
-    mobileOpen = this.nav.mobileOpen;
-    isFlyout = computed(() => this.variant() === 'flyout', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isFlyout" }] : /* istanbul ignore next */ []));
-    exactMatch = {
-        exact: true,
-        paths: 'exact',
-        queryParams: 'exact',
-        fragment: 'exact',
-        matrixParams: 'exact',
-    };
-    inexactMatch = {
-        exact: false,
-        paths: 'subset',
-        queryParams: 'subset',
-        fragment: 'ignored',
-        matrixParams: 'ignored',
-    };
-    /** 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())();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
-    openId = signal(null, /* @ts-ignore */
-    ...(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(' ');
-    }, /* @ts-ignore */
-    ...(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(' ');
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "endSlotClasses" }] : /* istanbul ignore next */ []));
-    asBasic(i) {
-        return i;
-    }
-    asCollapsable(i) {
-        return i;
-    }
-    asGroup(i) {
-        return i;
-    }
-    panelClasses(item) {
-        const classes = [
-            'rounded-xl border border-border bg-background/95 p-2 text-foreground shadow-xl backdrop-blur supports-[backdrop-filter]:bg-background/90',
-        ];
-        if (this.isFlyout()) {
-            classes.push(item.children.length >= 4 ? 'w-[min(92vw,42rem)]' : 'w-[min(92vw,28rem)]');
-        }
-        else {
-            classes.push('min-w-56');
-        }
-        return classes.join(' ');
-    }
-    panelGridClasses(item) {
-        const classes = ['grid gap-2'];
-        if (item.children.length >= 4) {
-            classes.push('md:grid-cols-2');
-        }
-        return classes.join(' ');
-    }
-    flyoutItemClasses(active) {
-        return [
-            'block rounded-lg border border-transparent px-4 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-            active ? 'border-border bg-accent/50 text-foreground' : 'hover:bg-accent/50 hover:text-accent-foreground',
-        ].join(' ');
-    }
-    isItemActive(id) {
-        return this.nav.isActive(id);
-    }
-    runMenuAction(item) {
-        item.action?.(item);
-        this.closeAll();
-    }
-    toggleMobile() {
-        this.nav.toggleMobile();
-    }
-    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: "22.0.0", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", 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 }, variant: { classPropertyName: "variant", publicName: "variant", 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-variant": "variant()" } }, 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]="mobileOpen()"
-            (click)="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]="panelClasses(item)" (keydown)="onPanelKeydown($event)">
-        @if (isFlyout()) {
-          <div [class]="panelGridClasses(item)">
-            @for (child of item.children; track child.id) {
-              @switch (child.type) {
-                @case ('basic') {
-                  @let basic = asBasic(child);
-                  @if (basic.link && !basic.externalLink) {
-                    <a
-                      role="menuitem"
-                      [class]="flyoutItemClasses(rla.isActive)"
-                      [routerLink]="basic.link"
-                      [queryParams]="basic.queryParams"
-                      [queryParamsHandling]="basic.queryParamsHandling ?? null"
-                      [fragment]="basic.fragment ?? undefined"
-                      [preserveFragment]="basic.preserveFragment ?? false"
-                      [target]="basic.target ?? undefined"
-                      routerLinkActive
-                      #rla="routerLinkActive"
-                      [routerLinkActiveOptions]="
-                        basic.isActiveMatchOptions ?? (basic.exactMatch ? exactMatch : inexactMatch)
-                      "
-                      [attr.aria-current]="rla.isActive ? 'page' : null"
-                      (click)="closeAll()">
-                      <div class="flex items-start gap-3">
-                        @if (basic.icon) {
-                          <span
-                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
-                            <ui-nav-icon [name]="basic.icon" [size]="18" />
-                          </span>
-                        }
-                        <div class="min-w-0 space-y-1">
-                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
-                          @if (basic.subtitle) {
-                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
-                          }
-                        </div>
-                      </div>
-                    </a>
-                  } @else if (basic.link && basic.externalLink) {
-                    <a
-                      role="menuitem"
-                      [class]="flyoutItemClasses(false)"
-                      [attr.href]="basic.link"
-                      [attr.target]="basic.target ?? '_blank'"
-                      rel="noopener noreferrer"
-                      (click)="closeAll()">
-                      <div class="flex items-start gap-3">
-                        @if (basic.icon) {
-                          <span
-                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
-                            <ui-nav-icon [name]="basic.icon" [size]="18" />
-                          </span>
-                        }
-                        <div class="min-w-0 space-y-1">
-                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
-                          @if (basic.subtitle) {
-                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
-                          }
-                        </div>
-                      </div>
-                    </a>
-                  } @else {
-                    <button type="button" [class]="flyoutItemClasses(false)" (click)="runMenuAction(basic)">
-                      <div class="flex items-start gap-3 text-left">
-                        @if (basic.icon) {
-                          <span
-                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
-                            <ui-nav-icon [name]="basic.icon" [size]="18" />
-                          </span>
-                        }
-                        <div class="min-w-0 space-y-1">
-                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
-                          @if (basic.subtitle) {
-                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
-                          }
-                        </div>
-                      </div>
-                    </button>
-                  }
-                }
-                @default {
-                  <div class="md:col-span-2">
-                    <ui-nav-item [item]="child" />
-                  </div>
-                }
-              }
-            }
-          </div>
-        } @else {
-          @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", "browserUrl", "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: "22.0.0", 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-variant]': 'variant()',
-                    },
-                    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]="mobileOpen()"
-            (click)="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]="panelClasses(item)" (keydown)="onPanelKeydown($event)">
-        @if (isFlyout()) {
-          <div [class]="panelGridClasses(item)">
-            @for (child of item.children; track child.id) {
-              @switch (child.type) {
-                @case ('basic') {
-                  @let basic = asBasic(child);
-                  @if (basic.link && !basic.externalLink) {
-                    <a
-                      role="menuitem"
-                      [class]="flyoutItemClasses(rla.isActive)"
-                      [routerLink]="basic.link"
-                      [queryParams]="basic.queryParams"
-                      [queryParamsHandling]="basic.queryParamsHandling ?? null"
-                      [fragment]="basic.fragment ?? undefined"
-                      [preserveFragment]="basic.preserveFragment ?? false"
-                      [target]="basic.target ?? undefined"
-                      routerLinkActive
-                      #rla="routerLinkActive"
-                      [routerLinkActiveOptions]="
-                        basic.isActiveMatchOptions ?? (basic.exactMatch ? exactMatch : inexactMatch)
-                      "
-                      [attr.aria-current]="rla.isActive ? 'page' : null"
-                      (click)="closeAll()">
-                      <div class="flex items-start gap-3">
-                        @if (basic.icon) {
-                          <span
-                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
-                            <ui-nav-icon [name]="basic.icon" [size]="18" />
-                          </span>
-                        }
-                        <div class="min-w-0 space-y-1">
-                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
-                          @if (basic.subtitle) {
-                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
-                          }
-                        </div>
-                      </div>
-                    </a>
-                  } @else if (basic.link && basic.externalLink) {
-                    <a
-                      role="menuitem"
-                      [class]="flyoutItemClasses(false)"
-                      [attr.href]="basic.link"
-                      [attr.target]="basic.target ?? '_blank'"
-                      rel="noopener noreferrer"
-                      (click)="closeAll()">
-                      <div class="flex items-start gap-3">
-                        @if (basic.icon) {
-                          <span
-                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
-                            <ui-nav-icon [name]="basic.icon" [size]="18" />
-                          </span>
-                        }
-                        <div class="min-w-0 space-y-1">
-                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
-                          @if (basic.subtitle) {
-                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
-                          }
-                        </div>
-                      </div>
-                    </a>
-                  } @else {
-                    <button type="button" [class]="flyoutItemClasses(false)" (click)="runMenuAction(basic)">
-                      <div class="flex items-start gap-3 text-left">
-                        @if (basic.icon) {
-                          <span
-                            class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border bg-muted/40 text-foreground">
-                            <ui-nav-icon [name]="basic.icon" [size]="18" />
-                          </span>
-                        }
-                        <div class="min-w-0 space-y-1">
-                          <div class="font-medium leading-none text-foreground">{{ basic.title }}</div>
-                          @if (basic.subtitle) {
-                            <p class="line-clamp-2 text-sm leading-5 text-muted-foreground">{{ basic.subtitle }}</p>
-                          }
-                        </div>
-                      </div>
-                    </button>
-                  }
-                }
-                @default {
-                  <div class="md:col-span-2">
-                    <ui-nav-item [item]="child" />
-                  </div>
-                }
-              }
-            }
-          </div>
-        } @else {
-          @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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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 }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { TopbarComponent };
-//# sourceMappingURL=ojiepermana-angular-navigation-topbar.mjs.map