@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-dropdowns.mjs

@@ -0,0 +1,701 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DestroyRef, input, output, effect, untracked, afterNextRender, Directive, Injectable, signal, ElementRef, computed } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { ListService } from '@nanahoshi/mona-ui/internal/list';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { Subject, takeUntil, take, filter, switchMap, fromEvent } from 'rxjs';
+import { ConnectionPositionPair } from '@angular/cdk/overlay';
+import { PopupService, dropdownPopupAnimation } from '@nanahoshi/mona-ui/popup';
+import { cva } from 'class-variance-authority';
+
+const DropdownDataInputToken = new InjectionToken("DROPDOWN_DATA_INPUT");
+
+const DropdownPopupInputToken = new InjectionToken("DROPDOWN_POPUP_INPUT");
+
+class DropdownFilterableDirective {
+    #defaultOptions;
+    #destroyRef;
+    #listService;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true,
+            operator: "contains",
+            debounce: 0,
+            caseSensitive: false
+        };
+        this.#destroyRef = inject(DestroyRef);
+        this.#listService = inject(ListService);
+        this.filter = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.filterChange = output();
+        this.filterPlaceholder = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : /* istanbul ignore next */ []));
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaDropDownFilterable" });
+        effect(() => {
+            const filter = this.filter();
+            untracked(() => this.#listService.setFilter(filter));
+        });
+        effect(() => {
+            const filterPlaceholder = this.filterPlaceholder();
+            untracked(() => this.#listService.setFilterPlaceholder(filterPlaceholder));
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#listService.setFilterableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#listService.setFilterableOptions({
+                        ...this.#defaultOptions,
+                        ...options,
+                        enabled: options.enabled ?? this.#defaultOptions.enabled
+                    });
+                }
+            });
+        });
+        afterNextRender({
+            read: () => {
+                this.#listService.filterChange$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(filter => {
+                    this.filterChange.emit(filter);
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownFilterableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DropdownFilterableDirective, isStandalone: true, selector: "\n        mona-auto-complete[monaDropDownFilterable],\n        mona-dropdown-list[monaDropDownFilterable],\n        mona-combo-box[monaDropDownFilterable],\n        mona-multi-select[monaDropDownFilterable]\n    ", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaDropDownFilterable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownFilterableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        mona-auto-complete[monaDropDownFilterable],
+        mona-dropdown-list[monaDropDownFilterable],
+        mona-combo-box[monaDropDownFilterable],
+        mona-multi-select[monaDropDownFilterable]
+    `
+                }]
+        }], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaDropDownFilterable", required: false }] }] } });
+
+class DropdownFooterTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownFooterTemplateDirective, isStandalone: true, selector: "\n        ng-template[monaDropDownFooterTemplate],\n        ng-template[monaAutoCompleteFooterTemplate],\n        ng-template[monaDropDownListFooterTemplate],\n        ng-template[monaDropDownTreeFooterTemplate],\n        ng-template[monaComboBoxFooterTemplate],\n        ng-template[monaMultiSelectFooterTemplate]\n    ", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        ng-template[monaDropDownFooterTemplate],
+        ng-template[monaAutoCompleteFooterTemplate],
+        ng-template[monaDropDownListFooterTemplate],
+        ng-template[monaDropDownTreeFooterTemplate],
+        ng-template[monaComboBoxFooterTemplate],
+        ng-template[monaMultiSelectFooterTemplate]
+    `,
+                    standalone: true
+                }]
+        }] });
+
+class DropdownGroupHeaderTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownGroupHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownGroupHeaderTemplateDirective, isStandalone: true, selector: "\n        ng-template[monaDropDownGroupHeaderTemplate],\n        ng-template[monaAutoCompleteGroupHeaderTemplate],\n        ng-template[monaDropDownListGroupHeaderTemplate],\n        ng-template[monaComboBoxGroupHeaderTemplate],\n        ng-template[monaMultiSelectGroupHeaderTemplate]\n  ", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownGroupHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        ng-template[monaDropDownGroupHeaderTemplate],
+        ng-template[monaAutoCompleteGroupHeaderTemplate],
+        ng-template[monaDropDownListGroupHeaderTemplate],
+        ng-template[monaComboBoxGroupHeaderTemplate],
+        ng-template[monaMultiSelectGroupHeaderTemplate]
+  `,
+                    standalone: true
+                }]
+        }] });
+
+class DropdownGroupableDirective {
+    #defaultOptions;
+    #listService;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true,
+            headerOrder: "asc"
+        };
+        this.#listService = inject(ListService);
+        this.groupBy = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupBy" }] : /* istanbul ignore next */ []));
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaDropDownGroupable" });
+        effect(() => {
+            const groupBy = this.groupBy() ?? "";
+            untracked(() => this.#listService.setGroupBy(groupBy));
+        });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#listService.setGroupableOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#listService.setGroupableOptions({
+                        ...this.#defaultOptions,
+                        ...options,
+                        enabled: options.enabled ?? this.#defaultOptions.enabled
+                    });
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownGroupableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DropdownGroupableDirective, isStandalone: true, selector: "\n        mona-auto-complete[monaDropDownGroupable],\n        mona-combo-box[monaDropDownGroupable],\n        mona-dropdown-list[monaDropDownGroupable],\n        mona-multi-select[monaDropDownGroupable],\n    ", inputs: { groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "monaDropDownGroupable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownGroupableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        mona-auto-complete[monaDropDownGroupable],
+        mona-combo-box[monaDropDownGroupable],
+        mona-dropdown-list[monaDropDownGroupable],
+        mona-multi-select[monaDropDownGroupable],
+    `
+                }]
+        }], ctorParameters: () => [], propDecorators: { groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaDropDownGroupable", required: false }] }] } });
+
+class DropdownHeaderTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownHeaderTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownHeaderTemplateDirective, isStandalone: true, selector: "\n        ng-template[monaDropDownHeaderTemplate],\n        ng-template[monaAutoCompleteHeaderTemplate],\n        ng-template[monaDropDownListHeaderTemplate],\n        ng-template[monaDropDownTreeHeaderTemplate],\n        ng-template[monaComboBoxHeaderTemplate],\n        ng-template[monaMultiSelectHeaderTemplate]\n  ", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        ng-template[monaDropDownHeaderTemplate],
+        ng-template[monaAutoCompleteHeaderTemplate],
+        ng-template[monaDropDownListHeaderTemplate],
+        ng-template[monaDropDownTreeHeaderTemplate],
+        ng-template[monaComboBoxHeaderTemplate],
+        ng-template[monaMultiSelectHeaderTemplate]
+  `,
+                    standalone: true
+                }]
+        }] });
+
+class DropdownItemTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownItemTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownItemTemplateDirective, isStandalone: true, selector: "\n        ng-template[monaDropDownItemTemplate],\n        ng-template[monaAutoCompleteItemTemplate],\n        ng-template[monaDropDownListItemTemplate],\n        ng-template[monaComboBoxItemTemplate],\n        ng-template[monaMultiSelectItemTemplate]\n    ", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        ng-template[monaDropDownItemTemplate],
+        ng-template[monaAutoCompleteItemTemplate],
+        ng-template[monaDropDownListItemTemplate],
+        ng-template[monaComboBoxItemTemplate],
+        ng-template[monaMultiSelectItemTemplate]
+    `,
+                    standalone: true
+                }]
+        }] });
+
+class DropdownNoDataTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownNoDataTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownNoDataTemplateDirective, isStandalone: true, selector: "\n        ng-template[monaDropDownNoDataTemplate],\n        ng-template[monaAutoCompleteNoDataTemplate],\n        ng-template[monaDropDownListNoDataTemplate],\n        ng-template[monaDropDownTreeNoDataTemplate],\n        ng-template[monaComboBoxNoDataTemplate],\n        ng-template[monaMultiSelectNoDataTemplate]\n    ", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownNoDataTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        ng-template[monaDropDownNoDataTemplate],
+        ng-template[monaAutoCompleteNoDataTemplate],
+        ng-template[monaDropDownListNoDataTemplate],
+        ng-template[monaDropDownTreeNoDataTemplate],
+        ng-template[monaComboBoxNoDataTemplate],
+        ng-template[monaMultiSelectNoDataTemplate]
+    `,
+                    standalone: true
+                }]
+        }] });
+
+class DropdownVirtualScrollDirective {
+    #defaultOptions;
+    #listService;
+    constructor() {
+        this.#defaultOptions = {
+            enabled: true,
+            height: 28
+        };
+        this.#listService = inject(ListService);
+        this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaDropDownVirtualScroll" });
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                if (options === "") {
+                    this.#listService.setVirtualScrollOptions(this.#defaultOptions);
+                }
+                else {
+                    this.#listService.setVirtualScrollOptions({
+                        ...this.#defaultOptions,
+                        ...options,
+                        enabled: options.enabled ?? this.#defaultOptions.enabled
+                    });
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownVirtualScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: DropdownVirtualScrollDirective, isStandalone: true, selector: "\n        mona-auto-complete[monaDropDownVirtualScroll],\n        mona-dropdown-list[monaDropDownVirtualScroll],\n        mona-combo-box[monaDropDownVirtualScroll],\n        mona-multi-select[monaDropDownVirtualScroll]\n    ", inputs: { options: { classPropertyName: "options", publicName: "monaDropDownVirtualScroll", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownVirtualScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        mona-auto-complete[monaDropDownVirtualScroll],
+        mona-dropdown-list[monaDropDownVirtualScroll],
+        mona-combo-box[monaDropDownVirtualScroll],
+        mona-multi-select[monaDropDownVirtualScroll]
+    `,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaDropDownVirtualScroll", required: false }] }] } });
+
+class DropdownDataHandlerDirective {
+    #host = inject(DropdownDataInputToken);
+    #listService = inject(ListService);
+    constructor() {
+        effect(() => {
+            const data = this.#host.data();
+            untracked(() => this.#listService.setData(data));
+        });
+        effect(() => {
+            const itemDisabled = this.#host.itemDisabled() ?? "";
+            untracked(() => this.#listService.setDisabledBy(itemDisabled));
+        });
+        effect(() => {
+            const textField = this.#host.textField() ?? "";
+            untracked(() => this.#listService.setTextField(textField));
+        });
+        effect(() => {
+            const valueField = this.#host.valueField() ?? "";
+            untracked(() => this.#listService.setValueField(valueField));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownDataHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownDataHandlerDirective, isStandalone: true, selector: "[monaDropdownDataHandler]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownDataHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaDropdownDataHandler]"
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownListService {
+    constructor() {
+        this.navigate$ = new Subject();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListService, decorators: [{
+            type: Injectable
+        }] });
+
+class DropdownService {
+    constructor() {
+        this.beforeKeydown$ = new Subject();
+        this.beforeNavigate$ = new Subject();
+        this.keydown$ = new Subject();
+        this.popupCloseComplete$ = new Subject();
+        this.popupCloseStart$ = new Subject();
+        this.popupOpenComplete$ = new Subject();
+        this.popupRef = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupRef" }] : /* istanbul ignore next */ []));
+        this.popupTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
+        this.restoreFocus = signal("auto", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "restoreFocus" }] : /* istanbul ignore next */ []));
+        this.triggerPopupOpen$ = new Subject();
+        this.triggerPopupToggle$ = new Subject();
+    }
+    static getDefaultPositions() {
+        return [
+            new ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }, -1, 0, "mona-dropdown-popup-content-bottom"),
+            new ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" }, -1, -1, "mona-dropdown-popup-content-top")
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownService, decorators: [{
+            type: Injectable
+        }] });
+
+class DropdownPopupHandlerDirective {
+    #destroyRef = inject(DestroyRef);
+    #dropdownService = inject(DropdownService);
+    #hostElementRef = inject((ElementRef));
+    #host = inject(DropdownPopupInputToken);
+    #popupService = inject(PopupService);
+    constructor() {
+        afterNextRender({
+            read: () => {
+                this.#dropdownService.triggerPopupOpen$
+                    .pipe(takeUntilDestroyed(this.#destroyRef))
+                    .subscribe(s => this.openPopup(s));
+                this.#dropdownService.triggerPopupToggle$
+                    .pipe(takeUntilDestroyed(this.#destroyRef))
+                    .subscribe(s => this.togglePopup(s));
+            }
+        });
+        this.#destroyRef.onDestroy(() => this.closePopup());
+    }
+    closePopup() {
+        this.#dropdownService.popupRef()?.close();
+    }
+    getMaxHeight(maxHeight, height) {
+        if (typeof maxHeight === "number") {
+            return maxHeight;
+        }
+        if (maxHeight === "auto" && height === "auto") {
+            return "auto";
+        }
+        if (!maxHeight || maxHeight === "auto") {
+            if (!height || height === "auto") {
+                return 200;
+            }
+            return height;
+        }
+        return maxHeight ?? 200;
+    }
+    getMinWidth(minWidth, width) {
+        if (typeof minWidth === "number") {
+            return minWidth;
+        }
+        if (!minWidth || minWidth === "auto") {
+            if (!width || width === "auto") {
+                return this.#hostElementRef.nativeElement.getBoundingClientRect().width;
+            }
+            return width;
+        }
+        return minWidth ?? this.#hostElementRef.nativeElement.getBoundingClientRect().width;
+    }
+    openPopup(settings) {
+        let popupRef = this.#dropdownService.popupRef();
+        if (popupRef || this.#host.disabled() || this.#host.readonly()) {
+            return;
+        }
+        const event = new PreventableEvent("popupOpen");
+        this.#host.open.emit(event);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const anchor = this.#hostElementRef.nativeElement;
+        const anchorConnectionPoint = settings.anchorConnectionPoint ?? "bottomleft";
+        const content = this.#dropdownService.popupTemplate();
+        const closeOnOutsideClick = settings.closeOnOutsideClick ?? true;
+        const closeOnScroll = settings.closeOnScroll ?? true;
+        const hasBackdrop = settings.hasBackdrop ?? false;
+        const height = settings.height;
+        const maxHeight = this.getMaxHeight(settings.maxHeight, settings.height);
+        const minWidth = this.getMinWidth(settings.minWidth, settings.width);
+        const offset = settings.offset ?? { horizontal: 0, vertical: 4 };
+        const popupConnectionPoint = settings.popupConnectionPoint ?? "topleft";
+        const restoreFocus = this.#dropdownService.restoreFocus();
+        const width = settings.width ?? (this.#host.popupWidth() || anchor.getBoundingClientRect().width);
+        const withPush = settings.withPush ?? false;
+        const withScrollTracking = settings.withScrollTracking ?? false;
+        popupRef = this.#popupService.create({
+            anchor,
+            anchorConnectionPoint,
+            animation: dropdownPopupAnimation,
+            content,
+            closeOnOutsideClick,
+            closeOnScroll,
+            hasBackdrop,
+            height,
+            maxHeight,
+            minWidth,
+            offset,
+            popupConnectionPoint,
+            restoreFocus,
+            width,
+            withPush,
+            withScrollTracking
+        });
+        this.#dropdownService.popupRef.set(popupRef);
+        this.setPopupCloseSubscriptions(popupRef);
+        window.setTimeout(() => {
+            this.#dropdownService.popupOpenComplete$.next();
+            this.#host.opened.emit();
+        });
+    }
+    setPopupCloseSubscriptions(popupRef) {
+        popupRef.beforeClose.pipe(takeUntil(popupRef.closed)).subscribe(event => {
+            this.#host.close.emit(event);
+        });
+        popupRef.closeStart.pipe(takeUntil(popupRef.closed)).subscribe(event => {
+            this.#dropdownService.popupCloseStart$.next(event);
+        });
+        popupRef.closed.pipe(take(1)).subscribe(event => {
+            this.#dropdownService.popupRef.set(null);
+            this.#dropdownService.popupCloseComplete$.next(event);
+            this.#host.closed.emit();
+        });
+    }
+    togglePopup(settings) {
+        if (this.#dropdownService.popupRef()) {
+            this.closePopup();
+            return;
+        }
+        this.openPopup(settings);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownPopupHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownPopupHandlerDirective, isStandalone: true, selector: "[monaDropdownPopupHandler]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownPopupHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaDropdownPopupHandler]"
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownListPopupHandlerDirective {
+    #destroyRef = inject(DestroyRef);
+    #dropdownListService = inject(DropdownListService, { optional: true });
+    #dropdownService = inject(DropdownService);
+    #host = inject(DropdownPopupInputToken);
+    #hostElementRef = inject(ElementRef);
+    #listService = inject(ListService);
+    #popupClosed$ = toObservable(this.#dropdownService.popupRef).pipe(filter(popupRef => !!popupRef), switchMap(popupRef => popupRef.closed.pipe(take(1))));
+    #popupOpened$ = toObservable(this.#dropdownService.popupRef).pipe(filter(popupRef => !!popupRef), switchMap(popupRef => popupRef.opened.pipe(take(1))));
+    constructor() {
+        afterNextRender({
+            read: () => {
+                this.setKeyboardEvents();
+                this.#popupClosed$
+                    .pipe(takeUntilDestroyed(this.#destroyRef))
+                    .subscribe(() => this.setPopupCloseSubscriptions());
+                this.#popupOpened$
+                    .pipe(takeUntilDestroyed(this.#destroyRef))
+                    .subscribe(() => this.handleScrollOnPopupOpen());
+            }
+        });
+    }
+    closePopup() {
+        this.#dropdownService.popupRef()?.close();
+    }
+    handleArrowKeys(event) {
+        const navigateEvent = new PreventableEvent("beforeNavigate", event);
+        this.#dropdownService.beforeNavigate$.next(navigateEvent);
+        if (navigateEvent.isDefaultPrevented()) {
+            return;
+        }
+        event.preventDefault();
+        if (event.altKey) {
+            if (event.key === "ArrowDown") {
+                this.#dropdownService.triggerPopupOpen$.next({});
+            }
+            else {
+                this.closePopup();
+            }
+            return;
+        }
+        const previousItem = this.#listService.selectedListItems().lastOrDefault();
+        const direction = event.key === "ArrowDown" ? "next" : "previous";
+        const mode = this.#listService.navigableOptions().mode;
+        const item = this.#listService.navigate(direction, mode, false);
+        if (!item || previousItem === item) {
+            return;
+        }
+        this.#dropdownListService?.navigate$.next({ item });
+    }
+    handleKeyDown(e) {
+        const event = new PreventableEvent("beforeKeydown", e);
+        this.#dropdownService.beforeKeydown$.next(event);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            this.handleArrowKeys(e);
+        }
+        else if (e.key === "Escape") {
+            this.closePopup();
+        }
+        else if (e.key === "Tab") {
+            this.closePopup();
+        }
+        else if (e.key === " ") {
+            e.preventDefault();
+            this.#dropdownService.triggerPopupToggle$.next({});
+        }
+        else if (e.key === "Enter") {
+            this.#dropdownService.keydown$.next(e);
+            if (e.defaultPrevented) {
+                return;
+            }
+            this.#dropdownService.triggerPopupToggle$.next({});
+        }
+        else {
+            this.#dropdownService.keydown$.next(e);
+        }
+    }
+    handleScrollOnPopupOpen() {
+        const selectedDataItem = this.#listService.selectedListItems().lastOrDefault();
+        const highlightedItem = this.#listService.highlightedItem();
+        if (selectedDataItem) {
+            this.scrollToSelectedItem();
+        }
+        else if (highlightedItem) {
+            this.scrollToHighlightedItem();
+        }
+    }
+    scrollToHighlightedItem() {
+        const highlightedItem = this.#listService.highlightedItem();
+        if (!highlightedItem) {
+            return;
+        }
+        window.setTimeout(() => this.#listService.scrollToItem(highlightedItem, false));
+    }
+    scrollToSelectedItem() {
+        const item = this.#listService.selectedListItems().lastOrDefault();
+        if (!item) {
+            return;
+        }
+        window.setTimeout(() => this.#listService.scrollToItem(item, false));
+    }
+    setKeyboardEvents() {
+        fromEvent(this.#hostElementRef.nativeElement, "click")
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(e => !this.#host.disabled() &&
+            !this.#host.readonly() &&
+            !!e.target &&
+            e.target.tagName !== "INPUT"))
+            .subscribe(() => this.#dropdownService.triggerPopupToggle$.next({}));
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => !this.#host.disabled() && !this.#host.readonly()))
+            .subscribe(e => this.handleKeyDown(e));
+    }
+    setPopupCloseSubscriptions() {
+        this.#listService.clearHighlightedItem();
+        this.#listService.clearFilter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListPopupHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownListPopupHandlerDirective, isStandalone: true, selector: "[monaDropdownListPopupHandler]", hostDirectives: [{ directive: DropdownPopupHandlerDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownListPopupHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[monaDropdownListPopupHandler]",
+                    hostDirectives: [DropdownPopupHandlerDirective]
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownLiveRegionDirective {
+    #dropdownService;
+    #host;
+    #listService;
+    #expanded;
+    constructor() {
+        this.#dropdownService = inject(DropdownService);
+        this.#host = inject(ElementRef);
+        this.#listService = inject(ListService);
+        this.#expanded = computed(() => this.#dropdownService.popupRef() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#expanded" }] : /* istanbul ignore next */ []));
+        this.liveRegionText = computed(() => {
+            const highlightedItem = this.#listService.highlightedItem();
+            const selectedItem = this.#listService.selectedListItems().lastOrDefault();
+            const count = this.#listService.viewItems().size();
+            const activeItem = highlightedItem ?? selectedItem;
+            if (activeItem && this.#expanded()) {
+                const text = this.#listService.getItemText(activeItem);
+                const positionInfo = this.#listService.getItemPosition(activeItem);
+                if (positionInfo) {
+                    return `${text}, ${positionInfo.position} of ${positionInfo.total}`;
+                }
+                return text;
+            }
+            return count === 0 ? "No results found" : `${count} result${count === 1 ? "" : "s"} available`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "liveRegionText" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.#host.nativeElement.textContent = this.liveRegionText();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownLiveRegionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownLiveRegionDirective, isStandalone: true, selector: "span[monaDropdownLiveRegion]", host: { properties: { "class.sr-only": "true", "attr.aria-live": "\"polite\"", "attr.aria-atomic": "\"true\"", "attr.aria-label": "liveRegionText()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownLiveRegionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "span[monaDropdownLiveRegion]",
+                    host: {
+                        "[class.sr-only]": "true",
+                        "[attr.aria-live]": '"polite"',
+                        "[attr.aria-atomic]": '"true"',
+                        "[attr.aria-label]": "liveRegionText()"
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class DropdownPrefixTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownPrefixTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownPrefixTemplateDirective, isStandalone: true, selector: "ng-template[monaDropdownPrefixTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownPrefixTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDropdownPrefixTemplate]"
+                }]
+        }] });
+
+class DropdownSuffixTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownSuffixTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: DropdownSuffixTemplateDirective, isStandalone: true, selector: "ng-template[monaDropdownSuffixTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownSuffixTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaDropdownSuffixTemplate]"
+                }]
+        }] });
+
+const dropdownPopupVariants = cva(`
+        bg-background shadow-md
+        border border-input-border
+        h-full max-h-64 overflow-auto
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-lg"
+        },
+        size: {
+            large: "text-md",
+            medium: "text-sm",
+            small: "text-xs"
+        }
+    },
+    defaultVariants: {
+        rounded: "medium",
+        size: "medium"
+    }
+});
+
+const dropdownPopupThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dropdownPopupVariants;
+        default:
+            return dropdownPopupVariants;
+    }
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownDataHandlerDirective, DropdownDataInputToken, DropdownFilterableDirective, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownGroupableDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, DropdownListPopupHandlerDirective, DropdownListService, DropdownLiveRegionDirective, DropdownNoDataTemplateDirective, DropdownPopupHandlerDirective, DropdownPopupInputToken, DropdownPrefixTemplateDirective, DropdownService, DropdownSuffixTemplateDirective, DropdownVirtualScrollDirective, dropdownPopupThemeVariants };
+//# sourceMappingURL=nanahoshi-mona-ui-dropdowns.mjs.map