@ojiepermana/angular-navigation 22.0.44 → 22.0.45

package/fesm2022/ojiepermana-angular-navigation-navigation-horizontal.component-SK1lXswT.mjs

@@ -0,0 +1,423 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, output, computed, signal, Component } from '@angular/core';
+import { IconComponent } from '@ojiepermana/angular-component/icon';
+import { cn } from '@ojiepermana/angular-component/utils';
+import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-BY-DXx81.mjs';
+import { N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-SlMGlTuA.mjs';
+import { NavigationService } from '@ojiepermana/angular-navigation/service';
+
+class NavigationHorizontalComponent {
+    nav = inject(NavigationService);
+    host = inject(ElementRef);
+    navId = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navId" }] : /* istanbul ignore next */ []));
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Posisi bar terhadap konten: `bottom` membuka panel ke atas; selain itu ke bawah. */
+    position = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    typeStyle = input('flat', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeStyle" }] : /* istanbul ignore next */ []));
+    compact = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
+    itemClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemClass" }] : /* istanbul ignore next */ []));
+    /** Kelas Tailwind untuk container `<li>` group navbar. */
+    groupClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupClass" }] : /* 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();
+    isBorderRail = computed(() => this.typeStyle() === 'border-rail', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    isBottom = computed(() => this.position() === 'bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBottom" }] : /* istanbul ignore next */ []));
+    /** Kelas tambahan untuk NavigationItem leaf di row saat style border-rail aktif. */
+    navItemClass = computed(() => cn(this.itemClass(), this.isBorderRail() && 'rounded-none hover:bg-transparent hover:text-primary'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navItemClass" }] : /* istanbul ignore next */ []));
+    listClasses = computed(() => cn('flex h-full min-w-0 items-center justify-center gap-1 list-none p-0'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listClasses" }] : /* istanbul ignore next */ []));
+    isItemActive(item) {
+        return this.nav.isItemActive(item, this.activeIds(), this.activeUrl());
+    }
+    isPanelOpen(item) {
+        return this.nav.isPanelOpen(this.navId(), item);
+    }
+    togglePanel(item) {
+        if (!this.isPanelOpen(item)) {
+            this.measurePanelPlacement();
+        }
+        this.nav.togglePanel(this.navId(), item);
+    }
+    onWindowResize() {
+        if (this.nav.currentPanelKey(this.navId())) {
+            this.measurePanelPlacement();
+        }
+    }
+    /** Klik di luar menubar/panel menutup panel mega yang sedang terbuka. */
+    onDocumentClick(event) {
+        if (!this.nav.currentPanelKey(this.navId())) {
+            return;
+        }
+        const target = event.target;
+        if (target && !this.host.nativeElement.contains(target)) {
+            this.nav.closePanel(this.navId());
+        }
+    }
+    /**
+     * Lebar & posisi kiri panel mengikuti container parent dari `Navigation`
+     * (wrapper display:contents dilewati). `null` = pengukuran tak tersedia dan
+     * panel jatuh ke lebar host (inset-x-0).
+     */
+    panelPlacement = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelPlacement" }] : /* istanbul ignore next */ []));
+    measurePanelPlacement() {
+        const hostEl = this.host.nativeElement;
+        const navEl = hostEl.closest('[data-navigation-id]');
+        let container = navEl?.parentElement ?? hostEl.parentElement;
+        while (container && container.getBoundingClientRect().width <= 0 && container.parentElement) {
+            container = container.parentElement;
+        }
+        const containerRect = (container ?? hostEl).getBoundingClientRect();
+        const hostRect = hostEl.getBoundingClientRect();
+        if (containerRect.width <= 0) {
+            this.panelPlacement.set(null);
+            return;
+        }
+        this.panelPlacement.set({
+            left: containerRect.left - hostRect.left,
+            width: containerRect.width,
+        });
+    }
+    compactLabel(item) {
+        return this.nav.compactLabel(item, this.compact());
+    }
+    titleFor(item) {
+        return this.nav.titleFor(item, this.compact());
+    }
+    /** Container `<li>` group navbar; consumer atur lewat `nav-group-class` atau `item.classes.container`. */
+    groupContainerClasses(item) {
+        return cn(this.groupClass(), item.classes?.container);
+    }
+    triggerClasses(item) {
+        return cn('nav-trigger nav-text group/nav inline-flex min-w-0 items-center gap-3 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', 'h-9 px-3 py-2', this.compact() && 'w-10 justify-center px-0', this.isBorderRail()
+            ? this.isPanelOpen(item) || this.isItemActive(item)
+                ? 'rounded-none text-primary'
+                : 'rounded-none text-foreground/80 hover:text-primary'
+            : this.isItemActive(item)
+                ? 'bg-accent text-accent-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', item.classes?.wrapper, this.itemClass());
+    }
+    chevronClasses(item) {
+        return cn('ml-auto shrink-0 self-center transition-transform duration-200', this.isPanelOpen(item) && 'rotate-90');
+    }
+    panelClasses() {
+        // Panel mega selebar container parent, menempel rapat tanpa gap pada sisi bar:
+        // nav-position top membuka ke bawah (sisi atas siku), bottom membuka ke atas
+        // (sisi bawah siku) sehingga sambungan border selalu menyatu dengan bar.
+        // Border-rail: sisi kiri/kanan panel dibiarkan ditangani rail vertikal dari
+        // layout; panel hanya menggambar border atas & bawah 1.5px senada rail.
+        // Panel dibiarkan pada tepi bawah bar (`top-full`) tanpa offset, sehingga border
+        // atasnya sejajar dengan border-bottom bar (mis. yang dipasang consumer).
+        return cn('absolute z-50 bg-popover text-popover-foreground shadow-lg', 
+        // Batasi tinggi ke viewport (dikurangi area bar) lalu scroll vertikal supaya
+        // menu dengan item banyak tetap bisa diakses tanpa keluar layar.
+        'max-h-[calc(100dvh-5rem)] overflow-x-hidden overflow-y-auto overscroll-contain', this.isBottom() ? 'bottom-full' : 'top-full', !this.panelPlacement() && 'inset-x-0', this.isBorderRail()
+            ? 'rounded-none border-y-[1.5px] border-border'
+            : cn('rounded-xl border border-[hsl(var(--border)/var(--opacity-70))]', this.isBottom() ? 'rounded-b-none' : 'rounded-t-none'));
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            const panelKey = this.nav.currentPanelKey(this.navId());
+            this.nav.closePanel(this.navId());
+            this.focusOpenPanelTrigger(panelKey);
+            return;
+        }
+        const rootItems = this.rootFocusItems();
+        if (rootItems.length === 0) {
+            return;
+        }
+        const currentIndex = rootItems.indexOf(document.activeElement);
+        if (currentIndex === -1) {
+            return;
+        }
+        // ArrowDown membuka panel di posisi top; ArrowUp di posisi bottom (panel di atas bar).
+        if (event.key === (this.isBottom() ? 'ArrowUp' : 'ArrowDown')) {
+            const currentItem = rootItems[currentIndex];
+            if (currentItem.getAttribute('aria-haspopup') === 'menu') {
+                event.preventDefault();
+                currentItem.click();
+                queueMicrotask(() => this.focusFirstPanelItem(this.nav.currentPanelKey(this.navId())));
+            }
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            const direction = event.key === 'ArrowRight' ? 1 : -1;
+            const nextIndex = (currentIndex + direction + rootItems.length) % rootItems.length;
+            rootItems[nextIndex]?.focus();
+        }
+    }
+    onPanelKeydown(event) {
+        if (event.key !== 'Escape') {
+            return;
+        }
+        event.preventDefault();
+        const panelKey = this.nav.currentPanelKey(this.navId());
+        this.nav.closePanel(this.navId());
+        this.focusOpenPanelTrigger(panelKey);
+    }
+    rootFocusItems() {
+        return Array.from(this.host.nativeElement.querySelectorAll('[data-navigation-root-item="true"]'));
+    }
+    focusOpenPanelTrigger(panelKey) {
+        if (!panelKey) {
+            return;
+        }
+        const trigger = this.host.nativeElement.querySelector(`[data-navigation-item-key="${panelKey}"] [data-navigation-root-item="true"]`);
+        trigger?.focus();
+    }
+    focusFirstPanelItem(panelKey) {
+        if (!panelKey) {
+            return;
+        }
+        const panel = this.host.nativeElement.querySelector(`[data-navigation-panel="${panelKey}"]`);
+        const item = panel?.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        item?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NavigationHorizontalComponent, isStandalone: true, selector: "NavigationHorizontal", inputs: { navId: { classPropertyName: "navId", publicName: "navId", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, typeStyle: { classPropertyName: "typeStyle", publicName: "typeStyle", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, itemClass: { classPropertyName: "itemClass", publicName: "itemClass", isSignal: true, isRequired: false, transformFunction: null }, groupClass: { classPropertyName: "groupClass", publicName: "groupClass", 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: { "window:resize": "onWindowResize()", "document:click": "onDocumentClick($event)" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    <ul [class]="listClasses()" role="menubar" (keydown)="onKeydown($event)">
+      @for (item of items(); track item.key) {
+        @switch (item.type) {
+          @case ('group') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @case ('collapsible') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @case ('mega') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @default {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="item"
+              [level]="0"
+              [orientation]="'horizontal'"
+              [compact]="compact()"
+              [itemClass]="navItemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"
+            ></li>
+          }
+        }
+      }
+    </ul>
+
+    <ng-template #branchTemplate let-item>
+      <li
+        role="none"
+        [class]="groupContainerClasses(item)"
+        [attr.data-navigation-item-key]="item.key"
+      >
+        <button
+          type="button"
+          role="menuitem"
+          data-navigation-root-item="true"
+          [class]="triggerClasses(item)"
+          [attr.aria-expanded]="isPanelOpen(item)"
+          [attr.aria-controls]="item.panelId"
+          [attr.aria-haspopup]="'menu'"
+          [attr.aria-label]="compactLabel(item)"
+          [attr.title]="titleFor(item)"
+          [disabled]="item.disabled || null"
+          (click)="togglePanel(item)"
+        >
+          <NavigationItemContent
+            [item]="item"
+            [active]="isItemActive(item)"
+            [compact]="compact()"
+            [orientation]="'horizontal'"
+            [level]="0"
+            [iconTemplate]="iconTemplate()"
+          />
+          <Icon name="chevron_right" [size]="16" [class]="chevronClasses(item)" />
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="item.panelId"
+            role="menu"
+            [class]="panelClasses()"
+            [style.left.px]="panelPlacement()?.left"
+            [style.width.px]="panelPlacement()?.width"
+            [attr.data-navigation-panel]="item.key"
+            (keydown)="onPanelKeydown($event)"
+          >
+            <NavigationEntryGrid
+              [navId]="navId()"
+              [branch]="item"
+              [typeStyle]="typeStyle()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"
+            />
+          </div>
+        }
+      </li>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "Icon", inputs: ["name", "class", "size", "fill", "weight", "grade", "opticalSize"] }, { kind: "component", type: NavigationEntryGridComponent, selector: "NavigationEntryGrid", inputs: ["navId", "branch", "typeStyle", "itemClass", "activeIds", "activeUrl", "iconTemplate", "collapseTree", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NavigationHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHorizontal',
+                    imports: [
+                        NgTemplateOutlet,
+                        IconComponent,
+                        NavigationEntryGridComponent,
+                        NavigationItemComponent,
+                        NavigationItemContentComponent,
+                    ],
+                    host: {
+                        class: 'relative block h-full w-full',
+                        '(window:resize)': 'onWindowResize()',
+                        '(document:click)': 'onDocumentClick($event)',
+                    },
+                    template: `
+    <ul [class]="listClasses()" role="menubar" (keydown)="onKeydown($event)">
+      @for (item of items(); track item.key) {
+        @switch (item.type) {
+          @case ('group') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @case ('collapsible') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @case ('mega') {
+            <ng-container
+              [ngTemplateOutlet]="branchTemplate"
+              [ngTemplateOutletContext]="{ $implicit: item }"
+            />
+          }
+          @default {
+            <li
+              NavigationItem
+              [navId]="navId()"
+              [item]="item"
+              [level]="0"
+              [orientation]="'horizontal'"
+              [compact]="compact()"
+              [itemClass]="navItemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"
+            ></li>
+          }
+        }
+      }
+    </ul>
+
+    <ng-template #branchTemplate let-item>
+      <li
+        role="none"
+        [class]="groupContainerClasses(item)"
+        [attr.data-navigation-item-key]="item.key"
+      >
+        <button
+          type="button"
+          role="menuitem"
+          data-navigation-root-item="true"
+          [class]="triggerClasses(item)"
+          [attr.aria-expanded]="isPanelOpen(item)"
+          [attr.aria-controls]="item.panelId"
+          [attr.aria-haspopup]="'menu'"
+          [attr.aria-label]="compactLabel(item)"
+          [attr.title]="titleFor(item)"
+          [disabled]="item.disabled || null"
+          (click)="togglePanel(item)"
+        >
+          <NavigationItemContent
+            [item]="item"
+            [active]="isItemActive(item)"
+            [compact]="compact()"
+            [orientation]="'horizontal'"
+            [level]="0"
+            [iconTemplate]="iconTemplate()"
+          />
+          <Icon name="chevron_right" [size]="16" [class]="chevronClasses(item)" />
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="item.panelId"
+            role="menu"
+            [class]="panelClasses()"
+            [style.left.px]="panelPlacement()?.left"
+            [style.width.px]="panelPlacement()?.width"
+            [attr.data-navigation-panel]="item.key"
+            (keydown)="onPanelKeydown($event)"
+          >
+            <NavigationEntryGrid
+              [navId]="navId()"
+              [branch]="item"
+              [typeStyle]="typeStyle()"
+              [itemClass]="itemClass()"
+              [activeIds]="activeIds()"
+              [activeUrl]="activeUrl()"
+              [iconTemplate]="iconTemplate()"
+              [collapseTree]="collapseTree()"
+              [openedIds]="openedIds()"
+              (openedIdsChange)="openedIdsChange.emit($event)"
+              (itemSelected)="itemSelected.emit($event)"
+            />
+          </div>
+        }
+      </li>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { navId: [{ type: i0.Input, args: [{ isSignal: true, alias: "navId", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], typeStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeStyle", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], itemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemClass", required: false }] }], groupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupClass", 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 { NavigationHorizontalComponent };