@ojiepermana/angular 22.1.11 → 22.1.13

package/fesm2022/ojiepermana-angular-navigation-navigation-horizontal.component-Dk_03e-6.mjs

@@ -0,0 +1,466 @@
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, input, output, computed, effect, signal, afterNextRender, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
+import { N as NavigationEntryGridComponent } from './ojiepermana-angular-navigation-navigation-entry-grid.component-Cd-jh6tg.mjs';
+import { n as navigationPanelId, N as NavigationItemComponent, a as NavigationItemContentComponent } from './ojiepermana-angular-navigation-ojiepermana-angular-navigation-DNKU6viC.mjs';
+import { NAVIGATION_ADAPTER } from '@ojiepermana/angular/navigation/core';
+
+class NavigationHorizontalComponent {
+    nav = inject(NAVIGATION_ADAPTER);
+    host = inject(ElementRef);
+    injector = inject(Injector);
+    document = inject(DOCUMENT);
+    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 */ []));
+    openPanelKey = computed(() => this.nav.currentPanelKey(this.navId()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openPanelKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Template method calls re-run on every check. Resolving the whole row once
+     * per dependency change keeps a redraw from replaying an URL match — and a
+     * `cn()` merge — for every item in the bar.
+     */
+    itemState = computed(() => {
+        const activeIds = this.activeIds();
+        const activeUrl = this.activeUrl();
+        const navId = this.navId();
+        const openKey = this.openPanelKey();
+        return new Map(this.items().map((item) => {
+            const active = this.nav.isItemActive(item, activeIds, activeUrl);
+            const open = openKey === item.key;
+            return [
+                item,
+                {
+                    active,
+                    open,
+                    panelId: navigationPanelId(navId, item),
+                    triggerClasses: this.computeTriggerClasses(item, active, open),
+                },
+            ];
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemState" }] : /* istanbul ignore next */ []));
+    isItemActive(item) {
+        return this.itemState().get(item)?.active ?? false;
+    }
+    isPanelOpen(item) {
+        return this.itemState().get(item)?.open ?? false;
+    }
+    panelIdFor(item) {
+        return this.itemState().get(item)?.panelId ?? navigationPanelId(this.navId(), item);
+    }
+    togglePanel(item) {
+        if (!this.isPanelOpen(item)) {
+            this.measurePanelPlacement();
+        }
+        this.nav.togglePanel(this.navId(), item);
+    }
+    constructor() {
+        // Host `(document:click)`/`(window:resize)` bindings mark this view dirty
+        // before the handler even runs, so every click anywhere in the app re-checked
+        // the whole bar. Outside dismissal only matters while a panel is open, so the
+        // listeners exist only then — and outside Angular, since they are no-ops
+        // unless they actually close something.
+        effect((onCleanup) => {
+            if (this.openPanelKey() === null) {
+                return;
+            }
+            const view = this.document.defaultView;
+            const onDocumentClick = (event) => this.closeOnOutsideClick(event);
+            const onResize = () => this.measurePanelPlacement();
+            this.document.addEventListener('click', onDocumentClick);
+            view?.addEventListener('resize', onResize);
+            onCleanup(() => {
+                this.document.removeEventListener('click', onDocumentClick);
+                view?.removeEventListener('resize', onResize);
+            });
+        });
+    }
+    /** Klik di luar menubar/panel menutup panel mega yang sedang terbuka. */
+    closeOnOutsideClick(event) {
+        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 this.itemState().get(item)?.triggerClasses ?? '';
+    }
+    computeTriggerClasses(item, active, open) {
+        return cn('nav-trigger nav-text group/nav inline-flex min-w-0 items-center gap-(--nav-item-gap) rounded-md transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', 'h-(--nav-item-height) px-(--nav-item-padding-x)', this.compact() && 'size-(--nav-rail-item-size) justify-center gap-0 px-0', this.isBorderRail()
+            ? open || active
+                ? 'rounded-none text-primary'
+                : 'rounded-none text-foreground/80 hover:text-primary'
+            : active
+                ? 'bg-accent text-foreground'
+                : 'text-foreground/80 hover:bg-accent hover:text-accent-foreground', item.classes?.wrapper, this.itemClass());
+    }
+    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 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 border-border'
+            : cn('rounded-xl border border-[hsl(var(--border)/var(--section-border-opacity))]', 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();
+                // The panel renders under `@if`, so a microtask still runs before it
+                // exists and the focus call finds nothing.
+                afterNextRender({ read: () => this.focusFirstPanelItem(this.nav.currentPanelKey(this.navId())) }, { injector: this.injector });
+            }
+            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.1.4", ngImport: i0, type: NavigationHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.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: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    <ul [class]="listClasses()" role="menubar" tabindex="-1" (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]="isPanelOpen(item) ? panelIdFor(item) : null"
+          [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()"
+          />
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="panelIdFor(item)"
+            role="menu"
+            tabindex="-1"
+            [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: 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", "stairsRail", "straightRailActive", "firstInBranch", "lastInBranch", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationItemContentComponent, selector: "NavigationItemContent", inputs: ["item", "active", "compact", "orientation", "level", "iconTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationHorizontal',
+                    imports: [
+                        NgTemplateOutlet,
+                        NavigationEntryGridComponent,
+                        NavigationItemComponent,
+                        NavigationItemContentComponent,
+                    ],
+                    host: {
+                        class: 'relative block h-full w-full',
+                    },
+                    template: `
+    <ul [class]="listClasses()" role="menubar" tabindex="-1" (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]="isPanelOpen(item) ? panelIdFor(item) : null"
+          [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()"
+          />
+        </button>
+
+        @if (isPanelOpen(item)) {
+          <div
+            [id]="panelIdFor(item)"
+            role="menu"
+            tabindex="-1"
+            [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>
+  `,
+                }]
+        }], ctorParameters: () => [], 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 };