@ojiepermana/angular 21.3.4 → 22.0.1

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

@@ -0,0 +1,308 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { input, contentChildren, forwardRef, inject, ElementRef, signal, computed, ChangeDetectionStrategy, Component, TemplateRef, Directive, output, ViewContainerRef, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { cn } from '@ojiepermana/angular/component/utils';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+function position(align, side) {
+    const originX = align === 'start' ? 'start' : align === 'end' ? 'end' : 'center';
+    if (side === 'bottom') {
+        return {
+            originX,
+            originY: 'bottom',
+            overlayX: originX,
+            overlayY: 'top',
+            offsetY: 4,
+        };
+    }
+    return {
+        originX,
+        originY: 'top',
+        overlayX: originX,
+        overlayY: 'bottom',
+        offsetY: -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);
+    activeTrigger = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTrigger" }] : /* istanbul ignore next */ []));
+    openTrigger = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openTrigger" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('inline-flex min-h-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) {
+        if (trigger.disabled()) {
+            return;
+        }
+        this.activeTrigger.set(trigger);
+    }
+    tabIndexFor(trigger) {
+        if (trigger.disabled()) {
+            return -1;
+        }
+        const enabledTriggers = this.enabledTriggers();
+        if (enabledTriggers.length === 0) {
+            return -1;
+        }
+        const activeTrigger = this.activeTrigger();
+        const resolvedActiveTrigger = activeTrigger && enabledTriggers.includes(activeTrigger) ? activeTrigger : enabledTriggers[0];
+        return resolvedActiveTrigger === trigger ? 0 : -1;
+    }
+    hasOpenTrigger(except) {
+        const currentOpenTrigger = this.openTrigger();
+        return !!currentOpenTrigger && currentOpenTrigger !== except;
+    }
+    notifyOpen(trigger) {
+        const currentOpenTrigger = this.openTrigger();
+        if (currentOpenTrigger && currentOpenTrigger !== trigger) {
+            currentOpenTrigger.close({ restoreFocus: false });
+        }
+        this.openTrigger.set(trigger);
+        this.setActiveTrigger(trigger);
+    }
+    notifyClosed(trigger) {
+        if (this.openTrigger() === trigger) {
+            this.openTrigger.set(null);
+        }
+    }
+    onKeydown(event) {
+        const currentTrigger = this.resolveTrigger(event.target);
+        if (!currentTrigger) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentTrigger.open({ focusFirstItem: true });
+            return;
+        }
+        if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            this.moveFocus(currentTrigger, event.key === 'Home' ? 'start' : 'end');
+            return;
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this.moveFocus(currentTrigger, event.key === 'ArrowRight' ? 'next' : 'previous');
+        }
+    }
+    enabledTriggers() {
+        return this.triggers().filter((trigger) => !trigger.disabled());
+    }
+    resolveTrigger(target) {
+        return this.triggers().find((trigger) => trigger.containsTarget(target)) ?? null;
+    }
+    moveFocus(currentTrigger, direction) {
+        const enabledTriggers = this.enabledTriggers();
+        if (enabledTriggers.length === 0) {
+            return;
+        }
+        const currentIndex = enabledTriggers.indexOf(currentTrigger);
+        if (currentIndex === -1) {
+            enabledTriggers[0]?.focus();
+            return;
+        }
+        const nextTrigger = direction === 'start'
+            ? enabledTriggers[0]
+            : direction === 'end'
+                ? enabledTriggers[enabledTriggers.length - 1]
+                : enabledTriggers[this.nextIndex(currentIndex, direction === 'next' ? this.horizontalStep() : -this.horizontalStep(), enabledTriggers.length)];
+        if (!nextTrigger || nextTrigger === currentTrigger) {
+            return;
+        }
+        nextTrigger.focus();
+        this.setActiveTrigger(nextTrigger);
+        if (this.hasOpenTrigger(nextTrigger)) {
+            nextTrigger.open();
+        }
+    }
+    nextIndex(currentIndex, delta, length) {
+        const rawIndex = currentIndex + delta;
+        if (this.loop()) {
+            return (rawIndex + length) % length;
+        }
+        return Math.max(0, Math.min(length - 1, rawIndex));
+    }
+    horizontalStep() {
+        return getComputedStyle(this.host.nativeElement).direction === 'rtl' ? -1 : 1;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenubarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.0", type: MenubarComponent, isStandalone: true, selector: "ui-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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenubarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-menubar',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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.0.0", ngImport: i0, type: MenubarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: MenubarMenuComponent, isStandalone: true, selector: "ui-menubar-menu", host: { classAttribute: "contents" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenubarMenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-menubar-menu',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'contents',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }] });
+class MenubarContentDirective {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenubarContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: MenubarContentDirective, isStandalone: true, selector: "ng-template[uiMenubarContent]", exportAs: ["uiMenubarContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenubarContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[uiMenubarContent]',
+                    exportAs: 'uiMenubarContent',
+                }]
+        }] });
+class MenubarTriggerDirective {
+    uiMenubarTrigger = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiMenubarTrigger" }] : /* 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 */ []));
+    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);
+    overlayRef = null;
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isOpen() ? this.close() : 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: 'ui-menubar-panel',
+        });
+        const portal = new TemplatePortal(this.uiMenubarTrigger().template, this.vcr);
+        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());
+        this.isOpen.set(true);
+        this.openedChange.emit(true);
+        if (options.focusFirstItem) {
+            queueMicrotask(() => this.focusFirstItem());
+        }
+    }
+    close(options = {}) {
+        const { restoreFocus = true } = options;
+        if (!this.isOpen()) {
+            return;
+        }
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        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);
+    }
+    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"])');
+        firstItem?.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenubarTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: MenubarTriggerDirective, isStandalone: true, selector: "[uiMenubarTrigger]", inputs: { uiMenubarTrigger: { classPropertyName: "uiMenubarTrigger", publicName: "uiMenubarTrigger", 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 } }, 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.role": "\"menuitem\"", "attr.aria-haspopup": "\"menu\"", "attr.aria-expanded": "isOpen()", "attr.data-state": "isOpen() ? \"open\" : \"closed\"", "attr.tabindex": "tabIndex()", "attr.disabled": "disabled() ? \"\" : 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 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground" }, exportAs: ["uiMenubarTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: MenubarTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiMenubarTrigger]',
+                    exportAs: 'uiMenubarTrigger',
+                    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 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+                        '[attr.role]': '"menuitem"',
+                        '[attr.aria-haspopup]': '"menu"',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '[attr.disabled]': 'disabled() ? "" : 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()',
+                    },
+                }]
+        }], propDecorators: { uiMenubarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "uiMenubarTrigger", required: true }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], openedChange: [{ type: i0.Output, args: ["openedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MenubarComponent, MenubarContentDirective, MenubarMenuComponent, MenubarTriggerDirective };
+//# sourceMappingURL=ojiepermana-angular-component-menubar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-menubar.mjs","sources":["../../../projects/angular/component/menubar/menubar.component.ts","../../../projects/angular/component/menubar/ojiepermana-angular-component-menubar.ts"],"sourcesContent":["import { ConnectedPosition, Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  TemplateRef,\n  ViewContainerRef,\n  computed,\n  contentChildren,\n  forwardRef,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { cn } from '@ojiepermana/angular/component/utils';\nimport { merge } from 'rxjs';\nimport { filter } from 'rxjs/operators';\n\nexport type MenubarAlign = 'start' | 'center' | 'end';\n\nfunction position(align: MenubarAlign, side: 'bottom' | 'top'): ConnectedPosition {\n  const originX = align === 'start' ? 'start' : align === 'end' ? 'end' : 'center';\n\n  if (side === 'bottom') {\n    return {\n      originX,\n      originY: 'bottom',\n      overlayX: originX,\n      overlayY: 'top',\n      offsetY: 4,\n    };\n  }\n\n  return {\n    originX,\n    originY: 'top',\n    overlayX: originX,\n    overlayY: 'bottom',\n    offsetY: -4,\n  };\n}\n\n@Component({\n  selector: 'ui-menubar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    '[attr.role]': '\"menubar\"',\n    '(keydown)': 'onKeydown($any($event))',\n  },\n  template: `<ng-content />`,\n})\nexport class MenubarComponent {\n  readonly class = input<string>('');\n  readonly loop = input<boolean>(true);\n\n  private readonly triggers = contentChildren(\n    forwardRef(() => MenubarTriggerDirective),\n    { descendants: true },\n  );\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly activeTrigger = signal<MenubarTriggerDirective | null>(null);\n  private readonly openTrigger = signal<MenubarTriggerDirective | null>(null);\n\n  protected readonly classes = computed(() =>\n    cn(\n      'inline-flex min-h-10 items-center gap-1 rounded-md border border-border bg-background p-1 text-foreground shadow-sm',\n      this.class(),\n    ),\n  );\n\n  setActiveTrigger(trigger: MenubarTriggerDirective): void {\n    if (trigger.disabled()) {\n      return;\n    }\n\n    this.activeTrigger.set(trigger);\n  }\n\n  tabIndexFor(trigger: MenubarTriggerDirective): number {\n    if (trigger.disabled()) {\n      return -1;\n    }\n\n    const enabledTriggers = this.enabledTriggers();\n\n    if (enabledTriggers.length === 0) {\n      return -1;\n    }\n\n    const activeTrigger = this.activeTrigger();\n    const resolvedActiveTrigger =\n      activeTrigger && enabledTriggers.includes(activeTrigger) ? activeTrigger : enabledTriggers[0];\n\n    return resolvedActiveTrigger === trigger ? 0 : -1;\n  }\n\n  hasOpenTrigger(except?: MenubarTriggerDirective): boolean {\n    const currentOpenTrigger = this.openTrigger();\n    return !!currentOpenTrigger && currentOpenTrigger !== except;\n  }\n\n  notifyOpen(trigger: MenubarTriggerDirective): void {\n    const currentOpenTrigger = this.openTrigger();\n\n    if (currentOpenTrigger && currentOpenTrigger !== trigger) {\n      currentOpenTrigger.close({ restoreFocus: false });\n    }\n\n    this.openTrigger.set(trigger);\n    this.setActiveTrigger(trigger);\n  }\n\n  notifyClosed(trigger: MenubarTriggerDirective): void {\n    if (this.openTrigger() === trigger) {\n      this.openTrigger.set(null);\n    }\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    const currentTrigger = this.resolveTrigger(event.target);\n\n    if (!currentTrigger) {\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      currentTrigger.open({ focusFirstItem: true });\n      return;\n    }\n\n    if (event.key === 'Home' || event.key === 'End') {\n      event.preventDefault();\n      this.moveFocus(currentTrigger, event.key === 'Home' ? 'start' : 'end');\n      return;\n    }\n\n    if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.moveFocus(currentTrigger, event.key === 'ArrowRight' ? 'next' : 'previous');\n    }\n  }\n\n  private enabledTriggers(): MenubarTriggerDirective[] {\n    return this.triggers().filter((trigger) => !trigger.disabled());\n  }\n\n  private resolveTrigger(target: EventTarget | null): MenubarTriggerDirective | null {\n    return this.triggers().find((trigger) => trigger.containsTarget(target)) ?? null;\n  }\n\n  private moveFocus(currentTrigger: MenubarTriggerDirective, direction: 'previous' | 'next' | 'start' | 'end'): void {\n    const enabledTriggers = this.enabledTriggers();\n\n    if (enabledTriggers.length === 0) {\n      return;\n    }\n\n    const currentIndex = enabledTriggers.indexOf(currentTrigger);\n\n    if (currentIndex === -1) {\n      enabledTriggers[0]?.focus();\n      return;\n    }\n\n    const nextTrigger =\n      direction === 'start'\n        ? enabledTriggers[0]\n        : direction === 'end'\n          ? enabledTriggers[enabledTriggers.length - 1]\n          : enabledTriggers[\n              this.nextIndex(\n                currentIndex,\n                direction === 'next' ? this.horizontalStep() : -this.horizontalStep(),\n                enabledTriggers.length,\n              )\n            ];\n\n    if (!nextTrigger || nextTrigger === currentTrigger) {\n      return;\n    }\n\n    nextTrigger.focus();\n    this.setActiveTrigger(nextTrigger);\n\n    if (this.hasOpenTrigger(nextTrigger)) {\n      nextTrigger.open();\n    }\n  }\n\n  private nextIndex(currentIndex: number, delta: number, length: number): number {\n    const rawIndex = currentIndex + delta;\n\n    if (this.loop()) {\n      return (rawIndex + length) % length;\n    }\n\n    return Math.max(0, Math.min(length - 1, rawIndex));\n  }\n\n  private horizontalStep(): number {\n    return getComputedStyle(this.host.nativeElement).direction === 'rtl' ? -1 : 1;\n  }\n}\n\n@Component({\n  selector: 'ui-menubar-menu',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'contents',\n  },\n  template: `<ng-content />`,\n})\nexport class MenubarMenuComponent {}\n\n@Directive({\n  selector: 'ng-template[uiMenubarContent]',\n  exportAs: 'uiMenubarContent',\n})\nexport class MenubarContentDirective {\n  readonly template = inject<TemplateRef<unknown>>(TemplateRef);\n}\n\n@Directive({\n  selector: '[uiMenubarTrigger]',\n  exportAs: 'uiMenubarTrigger',\n  host: {\n    class:\n      '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 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',\n    '[attr.role]': '\"menuitem\"',\n    '[attr.aria-haspopup]': '\"menu\"',\n    '[attr.aria-expanded]': 'isOpen()',\n    '[attr.data-state]': 'isOpen() ? \"open\" : \"closed\"',\n    '[attr.tabindex]': 'tabIndex()',\n    '[attr.disabled]': 'disabled() ? \"\" : null',\n    '(click)': 'toggle()',\n    '(keydown.enter)': 'openFromKeyboard($any($event), false)',\n    '(keydown.space)': 'openFromKeyboard($any($event), false)',\n    '(keydown.arrowDown)': 'openFromKeyboard($any($event), true)',\n    '(focus)': 'syncActiveState()',\n    '(mouseenter)': 'openFromHover()',\n  },\n})\nexport class MenubarTriggerDirective {\n  readonly uiMenubarTrigger = input.required<MenubarContentDirective>();\n  readonly align = input<MenubarAlign>('start');\n  readonly disabled = input<boolean>(false);\n\n  readonly openedChange = output<boolean>();\n  readonly isOpen = signal(false);\n\n  private readonly overlay = inject(Overlay);\n  private readonly vcr = inject(ViewContainerRef);\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly menubar = inject(MenubarComponent, { optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  private overlayRef: OverlayRef | null = null;\n\n  toggle(): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    this.isOpen() ? this.close() : this.open();\n  }\n\n  open(options: { focusFirstItem?: boolean } = {}): void {\n    if (this.isOpen() || this.disabled()) {\n      return;\n    }\n\n    this.menubar?.notifyOpen(this);\n\n    const overlayRef = this.overlay.create({\n      positionStrategy: this.overlay\n        .position()\n        .flexibleConnectedTo(this.el)\n        .withFlexibleDimensions(false)\n        .withPush(false)\n        .withPositions([position(this.align(), 'bottom'), position(this.align(), 'top')]),\n      scrollStrategy: this.overlay.scrollStrategies.reposition(),\n      hasBackdrop: false,\n      panelClass: 'ui-menubar-panel',\n    });\n\n    const portal = new TemplatePortal(this.uiMenubarTrigger().template, this.vcr);\n\n    overlayRef.attach(portal);\n    this.overlayRef = overlayRef;\n\n    merge(\n      overlayRef.outsidePointerEvents().pipe(filter((event) => !this.el.nativeElement.contains(event.target as Node))),\n      overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Escape')),\n      overlayRef.detachments(),\n    )\n      .pipe(takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => this.close());\n\n    this.isOpen.set(true);\n    this.openedChange.emit(true);\n\n    if (options.focusFirstItem) {\n      queueMicrotask(() => this.focusFirstItem());\n    }\n  }\n\n  close(options: { restoreFocus?: boolean } = {}): void {\n    const { restoreFocus = true } = options;\n\n    if (!this.isOpen()) {\n      return;\n    }\n\n    this.overlayRef?.dispose();\n    this.overlayRef = null;\n    this.isOpen.set(false);\n    this.openedChange.emit(false);\n    this.menubar?.notifyClosed(this);\n\n    if (restoreFocus) {\n      this.el.nativeElement.focus();\n    }\n  }\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n\n  containsTarget(target: EventTarget | null): boolean {\n    return target instanceof Node && this.el.nativeElement.contains(target);\n  }\n\n  protected tabIndex(): number {\n    return this.menubar?.tabIndexFor(this) ?? (this.disabled() ? -1 : 0);\n  }\n\n  protected openFromKeyboard(event: KeyboardEvent, focusFirstItem: boolean): void {\n    if (this.disabled()) {\n      return;\n    }\n\n    event.preventDefault();\n    this.open({ focusFirstItem });\n  }\n\n  protected syncActiveState(): void {\n    this.menubar?.setActiveTrigger(this);\n  }\n\n  protected openFromHover(): void {\n    if (this.disabled() || !this.menubar?.hasOpenTrigger(this)) {\n      return;\n    }\n\n    this.open();\n  }\n\n  private focusFirstItem(): void {\n    const overlayElement = this.overlayRef?.overlayElement;\n\n    if (!overlayElement) {\n      return;\n    }\n\n    const firstItem = overlayElement.querySelector<HTMLElement>(\n      '[role=\"menuitem\"]:not([aria-disabled=\"true\"]), [role=\"menuitemcheckbox\"]:not([aria-disabled=\"true\"]), [role=\"menuitemradio\"]:not([aria-disabled=\"true\"])',\n    );\n\n    firstItem?.focus();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,67 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, input, computed, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { cn } from '@ojiepermana/angular/component/utils';
+
+const BASE = [
+    'block h-9 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.0.0", ngImport: i0, type: NativeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: NativeSelectComponent, isStandalone: true, selector: "select[ui-native-select]", 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:2.5rem;padding-right:.75rem}:host([multiple]),:host([size]:not([size=\"1\"])){background-image:none;padding-left:.75rem;padding-right:.75rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: NativeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'select[ui-native-select]', changeDetection: ChangeDetectionStrategy.OnPush, 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:2.5rem;padding-right:.75rem}:host([multiple]),:host([size]:not([size=\"1\"])){background-image:none;padding-left:.75rem;padding-right:.75rem}\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.0.0", ngImport: i0, type: NativeSelectOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: NativeSelectOptionDirective, isStandalone: true, selector: "option[ui-native-select-option]", 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.0.0", ngImport: i0, type: NativeSelectOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'option[ui-native-select-option]',
+                    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.0.0", ngImport: i0, type: NativeSelectOptGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: NativeSelectOptGroupDirective, isStandalone: true, selector: "optgroup[ui-native-select-opt-group]", 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.0.0", ngImport: i0, type: NativeSelectOptGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'optgroup[ui-native-select-opt-group]',
+                    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 };
+//# sourceMappingURL=ojiepermana-angular-component-native-select.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ojiepermana-angular-component-native-select.mjs","sources":["../../../projects/angular/component/native-select/native-select.component.ts","../../../projects/angular/component/native-select/native-select-option.directive.ts","../../../projects/angular/component/native-select/native-select-opt-group.directive.ts","../../../projects/angular/component/native-select/ojiepermana-angular-component-native-select.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\nconst BASE = [\n  'block h-9 w-full appearance-none rounded-md border border-input bg-transparent px-3 py-2',\n  'pr-10 text-sm shadow-sm transition-colors',\n  'text-foreground',\n  'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',\n  'disabled:cursor-not-allowed disabled:opacity-50',\n  'aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:ring-destructive',\n].join(' ');\n\n@Component({\n  selector: 'select[ui-native-select]',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { '[class]': 'classes()' },\n  template: '<ng-content />',\n  styleUrl: './native-select.component.css',\n})\nexport class NativeSelectComponent {\n  private readonly el = inject<ElementRef<HTMLSelectElement>>(ElementRef);\n\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn(BASE, this.class()));\n\n  focus(): void {\n    this.el.nativeElement.focus();\n  }\n}\n","import { Directive, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Directive({\n  selector: 'option[ui-native-select-option]',\n  host: { '[class]': 'classes()' },\n})\nexport class NativeSelectOptionDirective {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn(this.class()));\n}\n","import { Directive, computed, input } from '@angular/core';\nimport { cn } from '@ojiepermana/angular/component/utils';\n\n@Directive({\n  selector: 'optgroup[ui-native-select-opt-group]',\n  host: { '[class]': 'classes()' },\n})\nexport class NativeSelectOptGroupDirective {\n  readonly class = input<string>('');\n\n  protected readonly classes = computed(() => cn(this.class()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}