@ojiepermana/angular 22.1.10 → 22.1.12

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

@@ -1,7 +1,52 @@
-export * from '@ojiepermana/angular-component/kbd';
+import * as i0 from '@angular/core';
+import { 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.
+class KbdComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn([
+        'inline-flex min-h-6 min-w-6 select-none items-center justify-center gap-1 whitespace-nowrap rounded-md',
+        'border border-border bg-background px-1.5 font-mono text-2xs-plus font-medium leading-none text-foreground shadow-sm',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3',
+    ].join(' '), 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: KbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: KbdComponent, isStandalone: true, selector: "Kbd, [Kbd]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kbd\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KbdComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Kbd, [Kbd]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kbd"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+class KbdGroupComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex flex-wrap items-center gap-1.5', 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: KbdGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: KbdGroupComponent, isStandalone: true, selector: "KbdGroup, [KbdGroup]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-slot": "\"kbd-group\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KbdGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'KbdGroup, [KbdGroup]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-slot]': '"kbd-group"',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { KbdComponent, KbdGroupComponent };

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

@@ -1,7 +1,31 @@
-export * from '@ojiepermana/angular-component/label';
+import * as i0 from '@angular/core';
+import { 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.
+class LabelComponent {
+    for = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('text-sm font-medium leading-none text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70', 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: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: LabelComponent, isStandalone: true, selector: "Label, label[Label]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "for() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Label, label[Label]',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.for]': 'for() || null',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { LabelComponent };

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

@@ -1,7 +1,331 @@
-export * from '@ojiepermana/angular-component/menubar';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { input, contentChildren, forwardRef, inject, ElementRef, computed, Component, TemplateRef, Directive, output, signal, ViewContainerRef, DestroyRef, Injector } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MENU_OVERLAY, MENU_SUBMENU_TRIGGER } from '@ojiepermana/angular/component/dropdown-menu';
+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, 4);
+}
+class MenubarComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    loop = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
+    triggers = contentChildren(forwardRef(() => MenubarTriggerDirective), { ...(ngDevMode ? { debugName: "triggers" } : /* istanbul ignore next */ {}), descendants: true });
+    host = inject(ElementRef);
+    row = new RovingRow({
+        items: () => this.triggers(),
+        host: () => this.host.nativeElement,
+        loop: () => this.loop(),
+        enter: (trigger) => {
+            trigger.focus();
+            this.row.setActive(trigger);
+            if (this.row.hasOpenTrigger(trigger)) {
+                trigger.open();
+            }
+        },
+    });
+    classes = computed(() => cn('inline-flex min-h-control-10 items-center gap-1 rounded-md border border-border bg-background p-1 text-foreground shadow-sm', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    setActiveTrigger(trigger) {
+        this.row.setActive(trigger);
+    }
+    tabIndexFor(trigger) {
+        return this.row.tabIndexFor(trigger);
+    }
+    hasOpenTrigger(except) {
+        return this.row.hasOpenTrigger(except);
+    }
+    notifyOpen(trigger) {
+        this.row.notifyOpen(trigger);
+    }
+    notifyClosed(trigger) {
+        this.row.notifyClosed(trigger);
+    }
+    /**
+     * Move from an open menu to the neighbouring menubar item.
+     *
+     * A trigger calls this when a left or right arrow arrives while focus is
+     * inside its overlay, which the menubar itself cannot see: the overlay renders
+     * at the end of the document, so the keydown never bubbles up to here. The
+     * open menu closes, focus lands on the neighbour, and the neighbour's menu
+     * opens, which is the menubar keyboard pattern.
+     */
+    moveToSiblingMenu(from, direction) {
+        // `from` is still open at this point, so the move opens the neighbour and
+        // notifyOpen() closes this one, without stealing focus back.
+        this.row.move(from, direction);
+    }
+    onKeydown(event) {
+        // Every trigger answers, disabled ones included: a disabled trigger can
+        // still hold the menubar's only tab stop, and the row recovers from it.
+        const currentTrigger = this.row.itemFrom(event.target, 'all');
+        if (!currentTrigger) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentTrigger.open({ focusFirstItem: true });
+            return;
+        }
+        this.row.handleNavigationKey(currentTrigger, event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.4", type: MenubarComponent, isStandalone: true, selector: "Menubar", inputs: { class: { classPropertyName: "class", publicName: "class", 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": "\"menubar\"" } }, queries: [{ propertyName: "triggers", predicate: i0.forwardRef(() => MenubarTriggerDirective), descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenubarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Menubar',
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.role]': '"menubar"',
+                        '(keydown)': 'onKeydown($any($event))',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], triggers: [{ type: i0.ContentChildren, args: [forwardRef(() => MenubarTriggerDirective), { ...{ descendants: true }, isSignal: true }] }] } });
+class MenubarMenuComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenubarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.4", type: MenubarMenuComponent, isStandalone: true, selector: "MenubarMenu", host: { classAttribute: "contents" }, ngImport: i0, template: `<ng-content />`, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenubarMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'MenubarMenu',
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }] });
+class MenubarContentDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenubarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.4", type: MenubarContentDirective, isStandalone: true, selector: "ng-template[MenubarContent]", exportAs: ["MenubarContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenubarContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[MenubarContent]',
+                    exportAs: 'MenubarContent',
+                }]
+        }] });
+class MenubarTriggerDirective {
+    MenubarTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "MenubarTrigger" }] : /* istanbul ignore next */ []));
+    align = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Close the menu when an item is chosen, which is the menu pattern and the
+     * default. Matches the input of the same name on `[MenuTrigger]`, because both
+     * render the same `MenuSurface` and `MenuItem` components.
+     */
+    closeOnSelect = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "closeOnSelect" }] : /* istanbul ignore next */ []));
+    /** Ties `aria-controls` here to `aria-labelledby` on the surface. */
+    triggerId = injectUniqueId('MenubarTrigger');
+    surfaceId = injectUniqueId('MenuSurface');
+    openedChange = output();
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    el = inject(ElementRef);
+    menubar = inject(MenubarComponent, { optional: true });
+    destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
+    overlayRef = null;
+    constructor() {
+        this.destroyRef.onDestroy(() => this.close({ restoreFocus: false, emitOpenedChange: false }));
+    }
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open(options = {}) {
+        if (this.isOpen() || this.disabled()) {
+            return;
+        }
+        this.menubar?.notifyOpen(this);
+        const overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.el)
+                .withFlexibleDimensions(false)
+                .withPush(false)
+                .withPositions([position(this.align(), 'bottom'), position(this.align(), 'top')]),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: 'menubar-panel',
+        });
+        // The same controller the dropdown trigger provides, so the shared
+        // MenuSurface and MenuItem behave identically here: choosing an item closes
+        // the menu, Tab leaves it, and the pair references each other in ARIA.
+        const controller = {
+            surfaceId: this.surfaceId,
+            triggerId: this.triggerId,
+            // A menubar menu is a root menu, never a submenu: left and right belong to
+            // the menubar, which walks to the neighbouring menu with them.
+            isSubmenu: false,
+            close: () => this.close(),
+            closeAfterSelect: () => {
+                if (this.closeOnSelect())
+                    this.close();
+            },
+        };
+        const portal = new TemplatePortal(this.MenubarTrigger().template, this.vcr, undefined, Injector.create({
+            parent: this.injector,
+            providers: [{ provide: MENU_OVERLAY, useValue: controller }],
+        }));
+        overlayRef.attach(portal);
+        this.overlayRef = overlayRef;
+        merge(overlayRef
+            .outsidePointerEvents()
+            .pipe(filter((event) => !this.el.nativeElement.contains(event.target))), overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')), overlayRef.detachments())
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.close());
+        // Left and right move between menubar menus while focus sits inside the open
+        // overlay, which the menubar cannot see for itself. Three guards keep this
+        // from firing twice: the key has to be an arrow, the event has to originate
+        // inside this overlay (an arrow pressed on the menubar itself is already
+        // handled there, and it does not reach the overlay's DOM), and an arrow a
+        // nested submenu already claimed is left alone.
+        overlayRef
+            .keydownEvents()
+            .pipe(takeUntilDestroyed(this.destroyRef), filter((event) => (event.key === 'ArrowLeft' || event.key === 'ArrowRight') &&
+            !event.defaultPrevented &&
+            event.target instanceof Node &&
+            overlayRef.overlayElement.contains(event.target)))
+            .subscribe((event) => {
+            event.preventDefault();
+            this.menubar?.moveToSiblingMenu(this, event.key === 'ArrowRight' ? 'next' : 'previous');
+        });
+        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);
+        overlayRef?.dispose();
+        if (emitOpenedChange) {
+            this.openedChange.emit(false);
+        }
+        this.menubar?.notifyClosed(this);
+        if (restoreFocus) {
+            this.el.nativeElement.focus();
+        }
+    }
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    containsTarget(target) {
+        return target instanceof Node && this.el.nativeElement.contains(target);
+    }
+    tabIndex() {
+        return this.menubar?.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 menubar's only tab stop, which happens when every sibling is
+     * disabled too: there the native attribute would undo the tab stop the
+     * menubar just handed out, so the state travels as `aria-disabled` alone.
+     * Every action on this directive 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.menubar?.setActiveTrigger(this);
+    }
+    openFromHover() {
+        if (this.disabled() || !this.menubar?.hasOpenTrigger(this)) {
+            return;
+        }
+        this.open();
+    }
+    focusFirstItem() {
+        const overlayElement = this.overlayRef?.overlayElement;
+        if (!overlayElement) {
+            return;
+        }
+        const firstItem = overlayElement.querySelector('[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"])');
+        if (firstItem) {
+            firstItem.focus();
+            return;
+        }
+        // No enabled item (all disabled or content not rendered yet): move focus
+        // into the menu surface so keyboard focus still enters the popup.
+        const surface = overlayElement.querySelector('[role="menu"]');
+        if (surface) {
+            surface.tabIndex = -1;
+            surface.focus();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenubarTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: MenubarTriggerDirective, isStandalone: true, selector: "[MenubarTrigger]", inputs: { MenubarTrigger: { classPropertyName: "MenubarTrigger", publicName: "MenubarTrigger", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", 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: { "attr.id": "triggerId", "attr.role": "\"menuitem\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.aria-controls": "isOpen() ? surfaceId : null", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.tabindex": "tabIndex()", "attr.disabled": "nativeDisabled() ? \"\" : null", "attr.aria-disabled": "disabled() ? \"true\" : null" }, classAttribute: "inline-flex min-w-0 select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground 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 data-[state=open]:text-accent-foreground" }, providers: [{ provide: MENU_SUBMENU_TRIGGER, useValue: true }], exportAs: ["MenubarTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: MenubarTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[MenubarTrigger]',
+                    exportAs: 'MenubarTrigger',
+                    providers: [{ provide: MENU_SUBMENU_TRIGGER, useValue: true }],
+                    host: {
+                        class: 'inline-flex min-w-0 select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground 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 data-[state=open]:text-accent-foreground',
+                        '[attr.id]': 'triggerId',
+                        '[attr.role]': '"menuitem"',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.aria-controls]': 'isOpen() ? surfaceId : 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: { MenubarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "MenubarTrigger", required: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { MenubarComponent, MenubarContentDirective, MenubarMenuComponent, MenubarTriggerDirective };

package/fesm2022/ojiepermana-angular-component-native-select.mjs

@@ -1,7 +1,66 @@
-export * from '@ojiepermana/angular-component/native-select';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, Component, Directive } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils/core';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+const BASE = [
+    'block h-control-md w-full appearance-none rounded-md border border-input bg-transparent px-3 py-2',
+    'pr-10 text-sm shadow-sm transition-colors',
+    'text-foreground',
+    'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+    'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive',
+].join(' ');
+class NativeSelectComponent {
+    el = inject(ElementRef);
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(BASE, this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    focus() {
+        this.el.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NativeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: NativeSelectComponent, isStandalone: true, selector: "select[NativeSelect]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem 1rem}:host([dir=\"rtl\"]){background-position:left .75rem center;padding-left:calc(var(--spacing-base) * 10);padding-right:calc(var(--spacing-base) * 3)}:host([multiple]),:host([size]:not([size=\"1\"])){background-image:none;padding-left:calc(var(--spacing-base) * 3);padding-right:calc(var(--spacing-base) * 3)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NativeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'select[NativeSelect]', host: { '[class]': 'classes()' }, template: '<ng-content />', styles: [":host{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E\");background-position:right .75rem center;background-repeat:no-repeat;background-size:1rem 1rem}:host([dir=\"rtl\"]){background-position:left .75rem center;padding-left:calc(var(--spacing-base) * 10);padding-right:calc(var(--spacing-base) * 3)}:host([multiple]),:host([size]:not([size=\"1\"])){background-image:none;padding-left:calc(var(--spacing-base) * 3);padding-right:calc(var(--spacing-base) * 3)}\n"] }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class NativeSelectOptionDirective {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(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: NativeSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: NativeSelectOptionDirective, isStandalone: true, selector: "option[NativeSelectOption]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NativeSelectOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'option[NativeSelectOption]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class NativeSelectOptGroupDirective {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn(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: NativeSelectOptGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: NativeSelectOptGroupDirective, isStandalone: true, selector: "optgroup[NativeSelectOptGroup]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: NativeSelectOptGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'optgroup[NativeSelectOptGroup]',
+                    host: { '[class]': 'classes()' },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { NativeSelectComponent, NativeSelectOptGroupDirective, NativeSelectOptionDirective };