@ojiepermana/angular 22.1.10 → 22.1.12

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

@@ -1,7 +1,331 @@
-export * from '@ojiepermana/angular-component/combobox';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import * as i0 from '@angular/core';
+import { inject, ViewContainerRef, DestroyRef, input, model, signal, computed, viewChild, forwardRef, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { merge } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { injectUniqueId, cn } from '@ojiepermana/angular/component/utils/core';
+import { overlayDismissals } from '@ojiepermana/angular/component/utils/overlay';
+import { buttonVariants } from '@ojiepermana/angular/component/button';
+import { CommandComponent, CommandInputComponent, CommandListComponent, CommandEmptyComponent, CommandGroupComponent, CommandItemComponent } from '@ojiepermana/angular/component/command';
 
-// Generated by scripts/gen-umbrella-entrypoints.mjs — do not edit by hand.
+/**
+ * Combobox with searchable option list. Options passed via `[options]`.
+ * Emits two-way `value` and supports forms via ControlValueAccessor.
+ */
+class ComboboxComponent {
+    overlay = inject(Overlay);
+    vcr = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    instanceId = injectUniqueId('Combobox');
+    options = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    placeholder = input('Select…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the combobox trigger (its text content is the value, not a name). */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    searchPlaceholder = input('Search…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    emptyText = input('No results found.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyText" }] : /* istanbul ignore next */ []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    /** Disabled state pushed by the Forms API; kept separate so it never clobbers the `disabled` binding. */
+    cvaDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    trigger = viewChild.required('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []));
+    panel = viewChild.required('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    overlayRef = null;
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    triggerId = `${this.instanceId}-trigger`;
+    panelId = `${this.instanceId}-panel`;
+    classes = computed(() => cn('inline-block min-w-50', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => cn(buttonVariants({ variant: 'outline', size: 'default' }), 'w-full justify-between'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    selectedLabel = computed(() => {
+        const v = this.value();
+        return this.options().find((o) => o.value === v)?.label ?? '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    constructor() {
+        this.destroyRef.onDestroy(() => this.close({ restoreFocus: false, notifyTouched: false }));
+    }
+    isSelected(opt) {
+        return opt.value === this.value();
+    }
+    toggle() {
+        if (this.isDisabled())
+            return;
+        if (this.isOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isOpen())
+            return;
+        const triggerEl = this.trigger().nativeElement;
+        triggerEl.style.setProperty('--combobox-trigger-width', triggerEl.offsetWidth + 'px');
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(triggerEl)
+                .withPositions([
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+            ]),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: false,
+            panelClass: 'combobox-panel',
+            minWidth: triggerEl.offsetWidth,
+        });
+        const portal = new TemplatePortal(this.panel(), this.vcr);
+        this.overlayRef.attach(portal);
+        // Tab closes the listbox and hands focus back to the trigger WITHOUT
+        // preventing the default, so the browser carries on with the tab sequence
+        // from the trigger. That is the ARIA combobox contract: tabbing away leaves
+        // the popup, rather than leaving it open behind the moving focus.
+        merge(overlayDismissals(this.overlayRef, triggerEl), this.overlayRef.keydownEvents().pipe(filter((event) => event.key === 'Tab')))
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((dismissal) => {
+            // A pointer press outside is already handing focus to whatever was
+            // pressed; pulling it back to the trigger would steal it. Escape, Tab
+            // and detachment have no such destination, so they do restore.
+            this.close({ restoreFocus: !(dismissal instanceof MouseEvent) });
+        });
+        this.isOpen.set(true);
+        // Focus search input after attach tick
+        queueMicrotask(() => this.overlayRef?.overlayElement.querySelector('input')?.focus());
+    }
+    close(options = {}) {
+        const { restoreFocus = true, notifyTouched = true } = options;
+        if (!this.isOpen())
+            return;
+        const overlayRef = this.overlayRef;
+        this.overlayRef = null;
+        this.isOpen.set(false);
+        overlayRef?.dispose();
+        if (restoreFocus) {
+            this.trigger().nativeElement.focus();
+        }
+        if (notifyTouched) {
+            this.onTouchedFn();
+        }
+    }
+    pick(opt) {
+        if (opt.disabled)
+            return;
+        const next = opt.value === this.value() ? null : opt.value;
+        this.value.set(next);
+        this.onChangeFn(next);
+        this.close();
+    }
+    writeValue(v) {
+        this.value.set(v);
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(state) {
+        this.cvaDisabled.set(state);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: ComboboxComponent, isStandalone: true, selector: "Combobox", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange" }, host: { properties: { "class": "classes()" } }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true },
+        ], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <button
+      #trigger
+      type="button"
+      [attr.id]="triggerId"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() ?? placeholder())"
+      [attr.aria-labelledby]="ariaLabelledby()"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="isOpen() ? panelId : null"
+      [class]="triggerClasses()"
+      [disabled]="isDisabled() || null"
+      (click)="toggle()"
+    >
+      <span [class.text-muted-foreground]="!selectedLabel()">
+        {{ selectedLabel() || placeholder() }}
+      </span>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        class="ml-2 h-4 w-4 shrink-0 opacity-50"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </button>
+
+    <ng-template #panel>
+      <div
+        [attr.id]="panelId"
+        class="w-(--combobox-trigger-width) rounded-md border bg-popover text-popover-foreground shadow-md"
+      >
+        <Command>
+          <input CommandInput [placeholder]="searchPlaceholder()" />
+          <CommandList>
+            <CommandEmpty>{{ emptyText() }}</CommandEmpty>
+            <CommandGroup>
+              @for (opt of options(); track opt.value) {
+                <button
+                  type="button"
+                  CommandItem
+                  [value]="opt.label"
+                  [selectedState]="isSelected(opt)"
+                  [disabled]="!!opt.disabled"
+                  (selected)="pick(opt)"
+                >
+                  {{ opt.label }}
+                  @if (isSelected(opt)) {
+                    <svg
+                      aria-hidden="true"
+                      focusable="false"
+                      class="ml-auto h-4 w-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  }
+                </button>
+              }
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: CommandComponent, selector: "Command", inputs: ["query", "class"], outputs: ["queryChange", "dismissed"] }, { kind: "component", type: CommandInputComponent, selector: "input[CommandInput]", inputs: ["placeholder", "class"] }, { kind: "component", type: CommandListComponent, selector: "CommandList", inputs: ["class", "aria-label"] }, { kind: "component", type: CommandEmptyComponent, selector: "CommandEmpty", inputs: ["class"] }, { kind: "component", type: CommandGroupComponent, selector: "CommandGroup", inputs: ["heading", "class"] }, { kind: "component", type: CommandItemComponent, selector: "CommandItem, button[CommandItem]", inputs: ["value", "disabled", "class", "selectedState"], outputs: ["selected"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: ComboboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'Combobox',
+                    imports: [
+                        CommandComponent,
+                        CommandInputComponent,
+                        CommandListComponent,
+                        CommandEmptyComponent,
+                        CommandGroupComponent,
+                        CommandItemComponent,
+                    ],
+                    providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => ComboboxComponent), multi: true },
+                    ],
+                    host: { '[class]': 'classes()' },
+                    template: `
+    <button
+      #trigger
+      type="button"
+      [attr.id]="triggerId"
+      role="combobox"
+      aria-haspopup="listbox"
+      [attr.aria-label]="ariaLabelledby() ? null : (ariaLabel() ?? placeholder())"
+      [attr.aria-labelledby]="ariaLabelledby()"
+      [attr.aria-expanded]="isOpen()"
+      [attr.aria-controls]="isOpen() ? panelId : null"
+      [class]="triggerClasses()"
+      [disabled]="isDisabled() || null"
+      (click)="toggle()"
+    >
+      <span [class.text-muted-foreground]="!selectedLabel()">
+        {{ selectedLabel() || placeholder() }}
+      </span>
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        class="ml-2 h-4 w-4 shrink-0 opacity-50"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </button>
+
+    <ng-template #panel>
+      <div
+        [attr.id]="panelId"
+        class="w-(--combobox-trigger-width) rounded-md border bg-popover text-popover-foreground shadow-md"
+      >
+        <Command>
+          <input CommandInput [placeholder]="searchPlaceholder()" />
+          <CommandList>
+            <CommandEmpty>{{ emptyText() }}</CommandEmpty>
+            <CommandGroup>
+              @for (opt of options(); track opt.value) {
+                <button
+                  type="button"
+                  CommandItem
+                  [value]="opt.label"
+                  [selectedState]="isSelected(opt)"
+                  [disabled]="!!opt.disabled"
+                  (selected)="pick(opt)"
+                >
+                  {{ opt.label }}
+                  @if (isSelected(opt)) {
+                    <svg
+                      aria-hidden="true"
+                      focusable="false"
+                      class="ml-auto h-4 w-4"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  }
+                </button>
+              }
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], emptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyText", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
- */
+ */
+
+export { ComboboxComponent };