@ojiepermana/angular 22.1.11 → 22.1.12

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

@@ -1,7 +1,382 @@
-export * from '@ojiepermana/angular-component/navigation-menu';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, Directive, contentChildren, forwardRef, computed, Component, TemplateRef, output, signal, ViewContainerRef, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { RovingRow, cn, injectUniqueId } from '@ojiepermana/angular/component/utils/core';
+import { connectedPositionFor } from '@ojiepermana/angular/component/utils/overlay';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+function position(align, side) {
+    return connectedPositionFor(side, align, 8);
+}
+class NavigationMenuRootItem {
+    elementRef = inject(ElementRef);
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    isWithin(container) {
+        return container.contains(this.elementRef.nativeElement);
+    }
+    focus() {
+        this.elementRef.nativeElement.focus();
+    }
+    containsTarget(target) {
+        return target instanceof Node && this.elementRef.nativeElement.contains(target);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuRootItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: NavigationMenuRootItem, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuRootItem, decorators: [{
+            type: Directive
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+class NavigationMenuComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Main navigation', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    loop = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
+    items = contentChildren(forwardRef(() => NavigationMenuRootItem), { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    host = inject(ElementRef);
+    row = new RovingRow({
+        // Only the items of THIS navigation menu: `descendants` also collects the
+        // root items a nested navigation menu contributes.
+        items: () => this.items().filter((item) => item.isWithin(this.host.nativeElement)),
+        host: () => this.host.nativeElement,
+        loop: () => this.loop(),
+        enter: (item) => this.enter(item),
+    });
+    classes = computed(() => cn('relative z-10 flex max-w-max flex-1 items-center justify-center', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    setActiveItem(item) {
+        this.row.setActive(item);
+    }
+    tabIndexFor(item) {
+        return this.row.tabIndexFor(item);
+    }
+    hasOpenTrigger(except) {
+        return this.row.hasOpenTrigger(except);
+    }
+    notifyOpen(trigger) {
+        this.row.notifyOpen(trigger);
+    }
+    notifyClosed(trigger) {
+        this.row.notifyClosed(trigger);
+    }
+    onKeydown(event) {
+        // A disabled item answers for nothing here: keys that reach one are dropped
+        // rather than recovered from.
+        const currentItem = this.row.itemFrom(event.target, 'enabled');
+        if (!currentItem) {
+            return;
+        }
+        if (event.key === 'ArrowDown' && currentItem instanceof NavigationMenuTriggerDirective) {
+            event.preventDefault();
+            currentItem.open({ focusFirstItem: true });
+            return;
+        }
+        this.row.handleNavigationKey(currentItem, event);
+    }
+    enter(nextItem) {
+        const currentOpenTrigger = this.row.openTrigger();
+        if (!currentOpenTrigger) {
+            nextItem.focus();
+            this.row.setActive(nextItem);
+            return;
+        }
+        if (nextItem instanceof NavigationMenuTriggerDirective) {
+            // Arrows walk the ROOT items, so focus lands on the next trigger itself.
+            // Its panel opens because one was already open, and `notifyOpen` closes
+            // the previous one -- but diving straight into that panel's first link
+            // would skip the trigger the user was steering towards.
+            nextItem.open();
+            this.row.setActive(nextItem);
+            nextItem.focus();
+            return;
+        }
+        currentOpenTrigger.close({ restoreFocus: false });
+        this.row.setActive(nextItem);
+        queueMicrotask(() => nextItem.focus());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: NavigationMenuComponent, isStandalone: true, selector: "NavigationMenu", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($any($event))" }, properties: { "class": "classes()", "attr.role": "\"navigation\"", "attr.aria-label": "ariaLabel() || null" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => NavigationMenuRootItem), descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationMenu',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"navigation"',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '(keydown)': 'onKeydown($any($event))',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => NavigationMenuRootItem), { ...{ descendants: true }, isSignal: true }] }] } });
+class NavigationMenuListComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('group flex flex-1 list-none items-center justify-center gap-1', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavigationMenuListComponent, isStandalone: true, selector: "NavigationMenuList", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationMenuList',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class NavigationMenuItemComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('relative', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NavigationMenuItemComponent, isStandalone: true, selector: "NavigationMenuItem", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'NavigationMenuItem',
+                    host: {
+                        '[class]': 'classes()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class NavigationMenuContentDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: NavigationMenuContentDirective, isStandalone: true, selector: "ng-template[NavigationMenuContent]", exportAs: ["NavigationMenuContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[NavigationMenuContent]',
+                    exportAs: 'NavigationMenuContent',
+                }]
+        }] });
+class NavigationMenuTriggerDirective extends NavigationMenuRootItem {
+    NavigationMenuTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "NavigationMenuTrigger" }] : /* istanbul ignore next */ []));
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Ties `aria-controls` here to the overlay this trigger discloses. */
+    panelId = injectUniqueId('NavigationMenuPanel');
+    openedChange = output();
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    navigationMenu = inject(NavigationMenuComponent, { optional: true });
+    destroyRef = inject(DestroyRef);
+    overlayRef = null;
+    constructor() {
+        super();
+        this.destroyRef.onDestroy(() => this.close({ restoreFocus: false, emitOpenedChange: false }));
+    }
+    classes = computed(() => cn('group inline-flex h-control-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors', 'after:mb-0.5 after:ml-2 after:inline-block after:h-2 after:w-2 after:shrink-0 after:rotate-45 after:border-b after:border-r after:border-current after:transition-transform after:content-[""]', 'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:after:-rotate-135', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open(options = {}) {
+        if (this.isOpen() || this.disabled()) {
+            return;
+        }
+        this.navigationMenu?.notifyOpen(this);
+        const overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.elementRef)
+                .withFlexibleDimensions(false)
+                .withPush(false)
+                .withPositions([position(this.align(), 'bottom'), position(this.align(), 'top')]),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: 'navigation-menu-panel',
+        });
+        const portal = new TemplatePortal(this.NavigationMenuTrigger().template, this.vcr);
+        overlayRef.attach(portal);
+        overlayRef.overlayElement.id = this.panelId;
+        this.overlayRef = overlayRef;
+        merge(overlayRef
+            .outsidePointerEvents()
+            .pipe(filter((event) => !this.elementRef.nativeElement.contains(event.target))), overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')), overlayRef.detachments())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+        if (options.focusFirstItem) {
+            queueMicrotask(() => this.focusFirstItem());
+        }
+    }
+    close(options = {}) {
+        const { restoreFocus = true, emitOpenedChange = true } = options;
+        if (!this.isOpen()) {
+            return;
+        }
+        const overlayRef = this.overlayRef;
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        if (emitOpenedChange) {
+            this.openedChange.emit(false);
+        }
+        this.navigationMenu?.notifyClosed(this);
+        overlayRef?.dispose();
+        if (restoreFocus) {
+            this.elementRef.nativeElement.focus();
+        }
+    }
+    tabIndex() {
+        return this.navigationMenu?.tabIndexFor(this) ?? (this.disabled() ? -1 : 0);
+    }
+    /**
+     * A disabled trigger normally carries the native `disabled` attribute, which
+     * takes it out of the tab order for free. The one exception is the trigger
+     * holding the menu's only tab stop, which happens when every sibling is
+     * disabled too: there the native attribute would undo the tab stop, so the
+     * state travels as `aria-disabled` alone. Every action here already refuses
+     * on `disabled()`, so nothing becomes operable by dropping the attribute.
+     */
+    nativeDisabled() {
+        return this.disabled() && this.tabIndex() < 0;
+    }
+    openFromKeyboard(event, focusFirstItem) {
+        if (this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.open({ focusFirstItem });
+    }
+    syncActiveState() {
+        this.navigationMenu?.setActiveItem(this);
+    }
+    openFromHover() {
+        if (this.disabled() || !this.navigationMenu?.hasOpenTrigger(this)) {
+            return;
+        }
+        this.open();
+    }
+    focusFirstItem() {
+        const overlayElement = this.overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        const firstItem = overlayElement.querySelector('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+        firstItem?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: NavigationMenuTriggerDirective, isStandalone: true, selector: "[NavigationMenuTrigger]", inputs: { NavigationMenuTrigger: { classPropertyName: "NavigationMenuTrigger", publicName: "NavigationMenuTrigger", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openedChange: "openedChange" }, host: { listeners: { "click": "toggle()", "keydown.enter": "openFromKeyboard($any($event), false)", "keydown.space": "openFromKeyboard($any($event), false)", "keydown.arrowDown": "openFromKeyboard($any($event), true)", "focus": "syncActiveState()", "mouseenter": "openFromHover()" }, properties: { "class": "classes()", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? panelId : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.tabindex": "tabIndex()", "attr.disabled": "nativeDisabled() ? \"\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" } }, providers: [
+            {
+                provide: NavigationMenuRootItem,
+                useExisting: forwardRef(() => NavigationMenuTriggerDirective),
+            },
+        ], exportAs: ["NavigationMenuTrigger"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[NavigationMenuTrigger]',
+                    exportAs: 'NavigationMenuTrigger',
+                    providers: [
+                        {
+                            provide: NavigationMenuRootItem,
+                            useExisting: forwardRef(() => NavigationMenuTriggerDirective),
+                        },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-controls]': 'isOpen() ? panelId : null',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[attr.disabled]': 'nativeDisabled() ? "" : null',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '(click)': 'toggle()',
+                        '(keydown.enter)': 'openFromKeyboard($any($event), false)',
+                        '(keydown.space)': 'openFromKeyboard($any($event), false)',
+                        '(keydown.arrowDown)': 'openFromKeyboard($any($event), true)',
+                        '(focus)': 'syncActiveState()',
+                        '(mouseenter)': 'openFromHover()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { NavigationMenuTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "NavigationMenuTrigger", required: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
+class NavigationMenuLinkDirective extends NavigationMenuRootItem {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    variant = input('content', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    navigationMenu = inject(NavigationMenuComponent, { optional: true });
+    classes = computed(() => this.variant() === 'trigger'
+        ? cn('inline-flex h-control-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors', 'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', this.class())
+        : cn('block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors', 'hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring', 'aria-disabled:pointer-events-none aria-disabled:opacity-50', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    tabIndex() {
+        if (this.variant() !== 'trigger') {
+            return this.disabled() ? -1 : 0;
+        }
+        return this.navigationMenu?.tabIndexFor(this) ?? (this.disabled() ? -1 : 0);
+    }
+    focus() {
+        if (this.variant() === 'trigger' && this.elementRef.nativeElement.tabIndex < 0) {
+            this.elementRef.nativeElement.tabIndex = 0;
+        }
+        super.focus();
+    }
+    syncActiveState() {
+        if (this.variant() === 'trigger') {
+            this.navigationMenu?.setActiveItem(this);
+        }
+    }
+    preventDisabled(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: NavigationMenuLinkDirective, isStandalone: true, selector: "a[NavigationMenuLink], button[NavigationMenuLink]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "syncActiveState()", "click": "preventDisabled($any($event))" }, properties: { "class": "classes()", "attr.tabindex": "tabIndex()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-variant": "variant()" } }, providers: [
+            { provide: NavigationMenuRootItem, useExisting: forwardRef(() => NavigationMenuLinkDirective) },
+        ], exportAs: ["NavigationMenuLink"], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NavigationMenuLinkDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'a[NavigationMenuLink], button[NavigationMenuLink]',
+                    exportAs: 'NavigationMenuLink',
+                    providers: [
+                        { provide: NavigationMenuRootItem, useExisting: forwardRef(() => NavigationMenuLinkDirective) },
+                    ],
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-variant]': 'variant()',
+                        '(focus)': 'syncActiveState()',
+                        '(click)': 'preventDisabled($any($event))',
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { NavigationMenuComponent, NavigationMenuContentDirective, NavigationMenuItemComponent, NavigationMenuLinkDirective, NavigationMenuListComponent, NavigationMenuRootItem, NavigationMenuTriggerDirective };

package/fesm2022/ojiepermana-angular-component-pagination.mjs

@@ -1,7 +1,242 @@
-export * from '@ojiepermana/angular-component/pagination';
+import { buttonVariants } from '@ojiepermana/angular/component/button';
+import * as i0 from '@angular/core';
+import { model, input, computed, Component } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * Simple pagination. Emits the desired page via `(pageChange)` and reflects
+ * the current page through the `page` model input while allowing lightweight
+ * label and visibility tweaks for localized and icon-only demos.
+ */
+class PaginationComponent {
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    total = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    /** Number of sibling pages on each side of current. */
+    siblingCount = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
+    showPageNumbers = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPageNumbers" }] : /* istanbul ignore next */ []));
+    previousText = input('Previous', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousText" }] : /* istanbul ignore next */ []));
+    nextText = input('Next', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextText" }] : /* istanbul ignore next */ []));
+    previousAriaLabel = input('Go to previous page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousAriaLabel" }] : /* istanbul ignore next */ []));
+    nextAriaLabel = input('Go to next page', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextAriaLabel" }] : /* istanbul ignore next */ []));
+    formatPageLabel = input((page) => page.toString(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formatPageLabel" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('mx-auto flex w-full justify-center', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    pages = computed(() => {
+        if (!this.showPageNumbers()) {
+            return [];
+        }
+        const total = Math.max(1, this.total());
+        const current = Math.min(Math.max(1, this.page()), total);
+        const siblings = Math.max(0, this.siblingCount());
+        const range = [];
+        const start = Math.max(2, current - siblings);
+        const end = Math.min(total - 1, current + siblings);
+        range.push({ key: 'p-1', kind: 'page', value: 1 });
+        if (start > 2)
+            range.push({ key: 'e-start', kind: 'ellipsis', value: -1 });
+        for (let i = start; i <= end; i++)
+            range.push({ key: `p-${i}`, kind: 'page', value: i });
+        if (end < total - 1)
+            range.push({ key: 'e-end', kind: 'ellipsis', value: -1 });
+        if (total > 1)
+            range.push({ key: `p-${total}`, kind: 'page', value: total });
+        return range;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    navClasses(hasText) {
+        return hasText
+            ? cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'gap-1 pl-2.5 pr-2.5')
+            : cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'h-control-md w-control-md');
+    }
+    pageClasses(active) {
+        return cn(buttonVariants({ variant: active ? 'outline' : 'ghost', size: 'icon' }), 'h-control-md w-control-md');
+    }
+    go(target) {
+        const total = Math.max(1, this.total());
+        const next = Math.min(Math.max(1, target), total);
+        if (next === this.page())
+            return;
+        this.page.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: PaginationComponent, isStandalone: true, selector: "Pagination, nav[Pagination]", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, showPageNumbers: { classPropertyName: "showPageNumbers", publicName: "showPageNumbers", isSignal: true, isRequired: false, transformFunction: null }, previousText: { classPropertyName: "previousText", publicName: "previousText", isSignal: true, isRequired: false, transformFunction: null }, nextText: { classPropertyName: "nextText", publicName: "nextText", isSignal: true, isRequired: false, transformFunction: null }, previousAriaLabel: { classPropertyName: "previousAriaLabel", publicName: "previousAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, nextAriaLabel: { classPropertyName: "nextAriaLabel", publicName: "nextAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, formatPageLabel: { classPropertyName: "formatPageLabel", publicName: "formatPageLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, host: { attributes: { "role": "navigation", "aria-label": "pagination" }, properties: { "class": "classes()" } }, ngImport: i0, template: `
+    <ul class="flex flex-row items-center gap-1">
+      <li>
+        <button
+          type="button"
+          [disabled]="page() <= 1 || null"
+          [attr.aria-label]="previousAriaLabel()"
+          [class]="navClasses(previousText().length > 0)"
+          (click)="go(page() - 1)"
+        >
+          <svg
+            aria-hidden="true"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+          @if (previousText()) {
+            <span>{{ previousText() }}</span>
+          }
+        </button>
+      </li>
+
+      @for (p of pages(); track p.key) {
+        <li>
+          @if (p.kind === 'page') {
+            <button
+              type="button"
+              [attr.aria-current]="p.value === page() ? 'page' : null"
+              [class]="pageClasses(p.value === page())"
+              (click)="go(p.value)"
+            >
+              {{ formatPageLabel()(p.value) }}
+            </button>
+          } @else {
+            <span
+              class="flex h-control-md w-control-md items-center justify-center"
+              aria-hidden="true"
+              >…</span
+            >
+          }
+        </li>
+      }
+
+      <li>
+        <button
+          type="button"
+          [disabled]="page() >= total() || null"
+          [attr.aria-label]="nextAriaLabel()"
+          [class]="navClasses(nextText().length > 0)"
+          (click)="go(page() + 1)"
+        >
+          @if (nextText()) {
+            <span>{{ nextText() }}</span>
+          }
+          <svg
+            aria-hidden="true"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+      </li>
+    </ul>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: PaginationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Pagination, nav[Pagination]',
+                    host: {
+                        role: 'navigation',
+                        'aria-label': 'pagination',
+                        '[class]': 'classes()',
+                    },
+                    template: `
+    <ul class="flex flex-row items-center gap-1">
+      <li>
+        <button
+          type="button"
+          [disabled]="page() <= 1 || null"
+          [attr.aria-label]="previousAriaLabel()"
+          [class]="navClasses(previousText().length > 0)"
+          (click)="go(page() - 1)"
+        >
+          <svg
+            aria-hidden="true"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+          @if (previousText()) {
+            <span>{{ previousText() }}</span>
+          }
+        </button>
+      </li>
+
+      @for (p of pages(); track p.key) {
+        <li>
+          @if (p.kind === 'page') {
+            <button
+              type="button"
+              [attr.aria-current]="p.value === page() ? 'page' : null"
+              [class]="pageClasses(p.value === page())"
+              (click)="go(p.value)"
+            >
+              {{ formatPageLabel()(p.value) }}
+            </button>
+          } @else {
+            <span
+              class="flex h-control-md w-control-md items-center justify-center"
+              aria-hidden="true"
+              >…</span
+            >
+          }
+        </li>
+      }
+
+      <li>
+        <button
+          type="button"
+          [disabled]="page() >= total() || null"
+          [attr.aria-label]="nextAriaLabel()"
+          [class]="navClasses(nextText().length > 0)"
+          (click)="go(page() + 1)"
+        >
+          @if (nextText()) {
+            <span>{{ nextText() }}</span>
+          }
+          <svg
+            aria-hidden="true"
+            class="h-4 w-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+      </li>
+    </ul>
+  `,
+                }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], showPageNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageNumbers", required: false }] }], previousText: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousText", required: false }] }], nextText: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextText", required: false }] }], previousAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousAriaLabel", required: false }] }], nextAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextAriaLabel", required: false }] }], formatPageLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatPageLabel", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { PaginationComponent };