@ojiepermana/angular-navigation 22.0.44 → 22.0.45

package/README.md

@@ -227,3 +227,12 @@ Gunakan template `NavigationIcon` hanya bila consumer ingin override renderer ba
 ## Boundaries
 
 Entry point ini tetap extensible di layer consumer. Type defaults, instance registration, overlay state, dan affordance icon bawaan dikelola di library, sementara consumer masih bisa mengganti renderer icon dan komposisi layout sesuai kebutuhan.
+
+## Bundle / performance
+
+`NavigationContent` me-render renderer sesuai type aktif. Renderer yang lebih jarang
+dipakai — **flyout**, **horizontal/navbar**, dan **dockbar** — dibungkus `@defer (on immediate)`
+sehingga bundler aplikasi memecahnya menjadi lazy chunk: aplikasi yang hanya memakai
+**sidebar** (vertical list, renderer default yang tetap eager) tidak ikut membundel ketiga
+renderer tersebut. Tidak ada perubahan API — komposisi `<Navigation><NavigationSidebar>…`
+tetap sama; hanya distribusi chunk di sisi consumer yang lebih ringan.

package/fesm2022/ojiepermana-angular-navigation-navigation-dockbar-menu.component-BQgpBy1I.mjs

@@ -0,0 +1,432 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, input, output, computed, signal, afterNextRender, Component } from '@angular/core';
+import { IconComponent } from '@ojiepermana/angular-component/icon';
+import { cn } from '@ojiepermana/angular-component/utils';
+import { N as NavigationItemComponent, a as NavigationItemContentComponent, b as NavigationListComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';
+import { NavigationService } from '@ojiepermana/angular-navigation/service';
+
+class NavigationDockbarMenuComponent {
+    nav = inject(NavigationService);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    mode = input('sticky', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    position = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    activeIds = input(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIds" }] : /* istanbul ignore next */ []));
+    activeUrl = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeUrl" }] : /* istanbul ignore next */ []));
+    iconTemplate = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []));
+    collapseTree = input('stairs', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapseTree" }] : /* istanbul ignore next */ []));
+    openedIds = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openedIds" }] : /* istanbul ignore next */ []));
+    openedIdsChange = output();
+    itemSelected = output();
+    isDrawerMode = computed(() => this.mode() === 'drawer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDrawerMode" }] : /* istanbul ignore next */ []));
+    asideId = computed(() => `nav-dockbar-${this.safeId(this.navId())}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideId" }] : /* istanbul ignore next */ []));
+    asideHeadingId = computed(() => `${this.asideId()}-heading`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideHeadingId" }] : /* istanbul ignore next */ []));
+    openGroup = computed(() => this.nav.resolveDockbarGroup(this.navId(), this.items(), this.mode(), this.activeIds(), this.activeUrl()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openGroup" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('block w-16'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    railClasses = computed(() => cn('flex w-full list-none flex-col items-center gap-0.5 p-2', 
+    // Mode drawer: rail tetap di atas backdrop (z-40) agar user bisa langsung
+    // berpindah group lain tanpa menutup drawer lebih dulu.
+    this.isDrawerMode() && this.openGroup() !== null && 'relative z-50'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "railClasses" }] : /* istanbul ignore next */ []));
+    asideClasses = computed(() => cn('absolute inset-y-0 flex w-60 flex-col bg-background', 
+    // Border only on the CONTENT-facing edge. The dockbar rail already draws the
+    // rail-facing separator, so a rail-facing border here would double up
+    // (right of the mini-dock + left of the aside).
+    this.position() === 'right'
+        ? 'right-16 border-l border-[hsl(var(--border)/var(--opacity-70))]'
+        : 'left-16 border-r border-[hsl(var(--border)/var(--opacity-70))]', this.isDrawerMode() && 'z-50 shadow-xl'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "asideClasses" }] : /* istanbul ignore next */ []));
+    /**
+     * Offset backdrop agar kolom navigasi (rail + header/footer) benar-benar bebas
+     * overlay — dockbar dan aside drawer berada di level yang sama di atas backdrop.
+     * `null` berarti pengukuran tidak tersedia (mis. jsdom) dan backdrop jatuh ke
+     * `inset-0` penuh seperti sebelumnya.
+     */
+    backdropInset = signal({
+        left: null,
+        right: null,
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "backdropInset" }] : /* istanbul ignore next */ []));
+    onWindowResize() {
+        if (this.isDrawerMode() && this.openGroup() !== null) {
+            this.measureBackdropInset();
+        }
+    }
+    measureBackdropInset() {
+        const navEl = this.host.nativeElement.closest('[data-navigation-id]') ??
+            this.host.nativeElement;
+        const rect = navEl.getBoundingClientRect();
+        const viewportWidth = this.host.nativeElement.ownerDocument?.defaultView?.innerWidth ?? 0;
+        if (rect.width <= 0 || viewportWidth <= 0) {
+            this.backdropInset.set({ left: null, right: null });
+            return;
+        }
+        // Containing block backdrop `fixed` bisa bergeser dari viewport (ancestor dengan
+        // filter/contain). Koreksi origin dihitung dari posisi aktual backdrop terhadap
+        // style left/right yang sedang berlaku — konvergen dalam satu langkah re-measure.
+        const backdrop = this.host.nativeElement.querySelector('[data-navigation-dockbar-backdrop="true"]');
+        const backdropRect = backdrop?.getBoundingClientRect() ?? null;
+        let originLeft = 0;
+        let originRight = viewportWidth;
+        if (backdrop && backdropRect && backdropRect.width > 0) {
+            originLeft = backdropRect.left - this.parsePx(backdrop.style.left);
+            originRight = backdropRect.right + this.parsePx(backdrop.style.right);
+        }
+        if (this.position() === 'right') {
+            this.backdropInset.set({ left: null, right: Math.max(originRight - rect.left, 0) });
+            return;
+        }
+        this.backdropInset.set({ left: Math.max(rect.right - originLeft, 0), right: null });
+    }
+    parsePx(value) {
+        const parsed = Number.parseFloat(value);
+        return Number.isFinite(parsed) ? parsed : 0;
+    }
+    isGroupOpen(entry) {
+        return this.openGroup()?.key === entry.key;
+    }
+    isGroupActive(entry) {
+        return this.nav.isItemActive(entry, this.activeIds(), this.activeUrl());
+    }
+    triggerClasses(entry) {
+        return cn('nav-text group/nav inline-flex h-10 w-10 items-center justify-center rounded-md font-medium transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', this.isGroupOpen(entry)
+            ? 'bg-accent text-accent-foreground'
+            : this.isGroupActive(entry)
+                ? 'font-semibold text-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', entry.classes?.wrapper, this.itemClass());
+    }
+    toggleGroup(entry) {
+        const wasOpen = this.isGroupOpen(entry);
+        if (!wasOpen && this.isDrawerMode()) {
+            this.measureBackdropInset();
+        }
+        this.nav.togglePanel(this.navId(), entry);
+        if (!this.isDrawerMode()) {
+            return;
+        }
+        if (wasOpen) {
+            this.afterRender(() => this.focusTrigger(entry.key));
+            return;
+        }
+        this.afterRender(() => {
+            // Ukur ulang setelah render: geometri kolom bisa bergeser saat panel terbuka.
+            this.measureBackdropInset();
+            this.focusFirstAsideItem();
+        });
+    }
+    closeAside() {
+        const openKey = this.openGroup()?.key ?? null;
+        this.nav.closePanel(this.navId());
+        if (openKey !== null) {
+            this.afterRender(() => this.focusTrigger(openKey));
+        }
+    }
+    onEscape(event) {
+        if (!this.isDrawerMode() || this.openGroup() === null) {
+            return;
+        }
+        event.preventDefault();
+        this.closeAside();
+    }
+    afterRender(callback) {
+        afterNextRender({ read: callback }, { injector: this.injector });
+    }
+    focusFirstAsideItem() {
+        const aside = this.host.nativeElement.querySelector(`#${this.asideId()}`);
+        const focusable = aside?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        focusable?.focus();
+    }
+    focusTrigger(key) {
+        const trigger = this.host.nativeElement.querySelector(`[data-navigation-dockbar-trigger="true"][data-navigation-item-key="${key}"]`);
+        trigger?.focus();
+    }
+    safeId(value) {
+        const normalized = value
+            .trim()
+            .toLowerCase()
+            .replace(/[^a-z0-9_-]+/g, '-');
+        return normalized || 'default';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationDockbarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationDockbarMenuComponent, isStandalone: true, selector: "NavigationDockbarMenu", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, activeIds: { classPropertyName: "activeIds", publicName: "activeIds", isSignal: true, isRequired: false, transformFunction: null }, activeUrl: { classPropertyName: "activeUrl", publicName: "activeUrl", isSignal: true, isRequired: false, transformFunction: null }, iconTemplate: { classPropertyName: "iconTemplate", publicName: "iconTemplate", isSignal: true, isRequired: false, transformFunction: null }, collapseTree: { classPropertyName: "collapseTree", publicName: "collapseTree", isSignal: true, isRequired: false, transformFunction: null }, openedIds: { classPropertyName: "openedIds", publicName: "openedIds", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedIdsChange: "openedIdsChange", itemSelected: "itemSelected" }, host: { listeners: { "keydown.escape": "onEscape($event)", "window:resize": "onWindowResize()" }, properties: { "class": "hostClasses()", "attr.data-mode": "mode()", "attr.data-position": "position()" } }, ngImport: i0, template: `
+    <ul [class]="railClasses()" role="list">
+      @for (entry of items(); track entry.key) {
+        @if (entry.children.length > 0) {
+          <li class="flex w-full justify-center">
+            <button
+              type="button"
+              data-navigation-dockbar-trigger="true"
+              [class]="triggerClasses(entry)"
+              [attr.aria-expanded]="isGroupOpen(entry)"
+              [attr.aria-controls]="asideId()"
+              [attr.aria-label]="entry.tooltip ?? entry.title ?? null"
+              [attr.title]="entry.tooltip ?? entry.title ?? null"
+              [attr.data-navigation-item-key]="entry.key"
+              [disabled]="entry.disabled || null"
+              (click)="toggleGroup(entry)"
+            >
+              <NavigationItemContent
+                [item]="entry"
+                [active]="isGroupActive(entry)"
+                [compact]="true"
+                orientation="vertical"
+                [level]="0"
+                [collapseTree]="collapseTree()"
+                [iconTemplate]="iconTemplate()"
+              />
+            </button>
+          </li>
+        } @else {
+          <li
+            NavigationItem
+            [navId]="navId()"
+            [item]="entry"
+            [level]="0"
+            orientation="vertical"
+            [compact]="true"
+            [itemClass]="itemClass()"
+            [activeIds]="activeIds()"
+            [activeUrl]="activeUrl()"
+            [iconTemplate]="iconTemplate()"
+            [collapseTree]="collapseTree()"
+            [openedIds]="openedIds()"
+            (openedIdsChange)="openedIdsChange.emit($event)"
+            (itemSelected)="itemSelected.emit($event)"
+          ></li>
+        }
+      }
+    </ul>
+
+    @if (openGroup(); as group) {
+      @if (isDrawerMode()) {
+        <div
+          class="fixed inset-0 z-40 bg-[hsl(var(--overlay-backdrop-strong))]"
+          data-navigation-dockbar-backdrop="true"
+          aria-hidden="true"
+          [style.left.px]="backdropInset().left"
+          [style.right.px]="backdropInset().right"
+          (click)="closeAside()"
+        ></div>
+      }
+
+      <!-- Drawer non-modal: rail tetap interaktif di atas backdrop, jadi tanpa aria-modal. -->
+      <aside
+        [id]="asideId()"
+        [class]="asideClasses()"
+        data-navigation-dockbar-aside="true"
+        [attr.role]="isDrawerMode() ? 'dialog' : null"
+        [attr.aria-labelledby]="asideHeadingId()"
+      >
+        <header
+          class="flex h-12 shrink-0 items-center gap-2 border-b border-[hsl(var(--border)/var(--opacity-70))] px-4"
+        >
+          <div class="min-w-0 flex-1">
+            <h2
+              [id]="asideHeadingId()"
+              class="truncate text-sm font-semibold leading-tight text-foreground"
+            >
+              {{ group.title }}
+            </h2>
+            @if (group.subtitle) {
+              <p class="truncate text-xs leading-tight text-muted-foreground">
+                {{ group.subtitle }}
+              </p>
+            }
+          </div>
+
+          @if (isDrawerMode()) {
+            <button
+              type="button"
+              class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-foreground/80 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              data-navigation-dockbar-close="true"
+              aria-label="Close navigation panel"
+              (click)="closeAside()"
+            >
+              <Icon name="close" [size]="16" />
+            </button>
+          }
+        </header>
+
+        <div
+          class="min-h-0 flex-1 overflow-y-auto px-2 py-3"
+          data-navigation-dockbar-aside-scroll="true"
+        >
+          <NavigationList
+            [navId]="navId()"
+            [items]="group.children"
+            [collapsed]="false"
+            position="left"
+            [itemClass]="itemClass()"
+            [activeIds]="activeIds()"
+            [activeUrl]="activeUrl()"
+            [iconTemplate]="iconTemplate()"
+            [collapseTree]="collapseTree()"
+            [openedIds]="openedIds()"
+            (openedIdsChange)="openedIdsChange.emit($event)"
+            (itemSelected)="itemSelected.emit($event)"
+          />
+        </div>
+      </aside>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationItemComponent, selector: "li[NavigationItem]", inputs: ["navId", "item", "level", "orientation", "compact", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "straightRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "collapseTree", "iconTemplate"] }, { kind: "component", type: NavigationListComponent, selector: "NavigationList", inputs: ["navId", "items", "collapsed", "compact", "position", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationDockbarMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationDockbarMenu',
+                    imports: [
+                        IconComponent,
+                        NavigationItemComponent,
+                        NavigationItemContentComponent,
+                        NavigationListComponent,
+                    ],
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-mode]': 'mode()',
+                        '[attr.data-position]': 'position()',
+                        '(keydown.escape)': 'onEscape($event)',
+                        '(window:resize)': 'onWindowResize()',
+                    },
+                    template: `
+    <ul [class]="railClasses()" role="list">
+      @for (entry of items(); track entry.key) {
+        @if (entry.children.length > 0) {
+          <li class="flex w-full justify-center">
+            <button
+              type="button"
+              data-navigation-dockbar-trigger="true"
+              [class]="triggerClasses(entry)"
+              [attr.aria-expanded]="isGroupOpen(entry)"
+              [attr.aria-controls]="asideId()"
+              [attr.aria-label]="entry.tooltip ?? entry.title ?? null"
+              [attr.title]="entry.tooltip ?? entry.title ?? null"
+              [attr.data-navigation-item-key]="entry.key"
+              [disabled]="entry.disabled || null"
+              (click)="toggleGroup(entry)"
+            >
+              <NavigationItemContent
+                [item]="entry"
+                [active]="isGroupActive(entry)"
+                [compact]="true"
+                orientation="vertical"
+                [level]="0"
+                [collapseTree]="collapseTree()"
+                [iconTemplate]="iconTemplate()"
+              />
+            </button>
+          </li>
+        } @else {
+          <li
+            NavigationItem
+            [navId]="navId()"
+            [item]="entry"
+            [level]="0"
+            orientation="vertical"
+            [compact]="true"
+            [itemClass]="itemClass()"
+            [activeIds]="activeIds()"
+            [activeUrl]="activeUrl()"
+            [iconTemplate]="iconTemplate()"
+            [collapseTree]="collapseTree()"
+            [openedIds]="openedIds()"
+            (openedIdsChange)="openedIdsChange.emit($event)"
+            (itemSelected)="itemSelected.emit($event)"
+          ></li>
+        }
+      }
+    </ul>
+
+    @if (openGroup(); as group) {
+      @if (isDrawerMode()) {
+        <div
+          class="fixed inset-0 z-40 bg-[hsl(var(--overlay-backdrop-strong))]"
+          data-navigation-dockbar-backdrop="true"
+          aria-hidden="true"
+          [style.left.px]="backdropInset().left"
+          [style.right.px]="backdropInset().right"
+          (click)="closeAside()"
+        ></div>
+      }
+
+      <!-- Drawer non-modal: rail tetap interaktif di atas backdrop, jadi tanpa aria-modal. -->
+      <aside
+        [id]="asideId()"
+        [class]="asideClasses()"
+        data-navigation-dockbar-aside="true"
+        [attr.role]="isDrawerMode() ? 'dialog' : null"
+        [attr.aria-labelledby]="asideHeadingId()"
+      >
+        <header
+          class="flex h-12 shrink-0 items-center gap-2 border-b border-[hsl(var(--border)/var(--opacity-70))] px-4"
+        >
+          <div class="min-w-0 flex-1">
+            <h2
+              [id]="asideHeadingId()"
+              class="truncate text-sm font-semibold leading-tight text-foreground"
+            >
+              {{ group.title }}
+            </h2>
+            @if (group.subtitle) {
+              <p class="truncate text-xs leading-tight text-muted-foreground">
+                {{ group.subtitle }}
+              </p>
+            }
+          </div>
+
+          @if (isDrawerMode()) {
+            <button
+              type="button"
+              class="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-foreground/80 transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              data-navigation-dockbar-close="true"
+              aria-label="Close navigation panel"
+              (click)="closeAside()"
+            >
+              <Icon name="close" [size]="16" />
+            </button>
+          }
+        </header>
+
+        <div
+          class="min-h-0 flex-1 overflow-y-auto px-2 py-3"
+          data-navigation-dockbar-aside-scroll="true"
+        >
+          <NavigationList
+            [navId]="navId()"
+            [items]="group.children"
+            [collapsed]="false"
+            position="left"
+            [itemClass]="itemClass()"
+            [activeIds]="activeIds()"
+            [activeUrl]="activeUrl()"
+            [iconTemplate]="iconTemplate()"
+            [collapseTree]="collapseTree()"
+            [openedIds]="openedIds()"
+            (openedIdsChange)="openedIdsChange.emit($event)"
+            (itemSelected)="itemSelected.emit($event)"
+          />
+        </div>
+      </aside>
+    }
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], activeIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIds", required: false }] }], activeUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeUrl", required: false }] }], iconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTemplate", required: false }] }], collapseTree: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapseTree", required: false }] }], openedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "openedIds", required: false }] }], openedIdsChange: [{ type: i0.Output, args: ["openedIdsChange"] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }] } });
+
+export { NavigationDockbarMenuComponent };