@nanahoshi/mona-ui 0.1.0 → 0.2.0

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

@@ -3,13 +3,13 @@ import * as i0 from '@angular/core';
 import { Directive, inject, DestroyRef, Renderer2, computed, contentChild, TemplateRef, viewChild, input, output, effect, ElementRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PopupService, fadePopupAnimation } from '@nanahoshi/mona-ui/popup';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { tooltipArrowThemeVariants, getPositionConnectionPoints, getOffsetForPosition } from '@nanahoshi/mona-ui/tooltip';
+import { getPositionConnectionPoints, getOffsetForPosition } from '@nanahoshi/mona-ui/tooltip';
 import { takeUntil, take, fromEvent, filter, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { v4 } from 'uuid';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { cva } from 'class-variance-authority';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class PopoverFooterTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverFooterTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -55,10 +55,10 @@ class PopoverShownEvent {
     }
 }
 
-const popoverBaseVariants = cva(`
-        flex flex-col items-center justify-center relative
-        bg-background border border-border
-        shadow-[0_2px_8px_rgba(0,0,0,0.12)] z-1
+const popoverBaseThemeVariants = cva(`
+        relative z-1 flex flex-col items-center justify-center
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay)
     `, {
     variants: {
         rounded: {
@@ -69,9 +69,9 @@ const popoverBaseVariants = cva(`
         }
     }
 });
-const popoverHeaderVariants = cva(`
-        flex items-center justify-between w-full
-        font-semibold overflow-hidden
+const popoverHeaderThemeVariants = cva(`
+        flex w-full items-center justify-between overflow-hidden
+        font-semibold
     `, {
     variants: {
         rounded: {
@@ -82,76 +82,55 @@ const popoverHeaderVariants = cva(`
         }
     }
 });
-const popoverContentVariants = cva(`
-        flex-1 w-full h-full
-        overflow-hidden
+const popoverContentThemeVariants = cva(`
+        h-full w-full flex-1 overflow-hidden
+    `);
+const popoverArrowThemeVariants = cva(`
+        absolute z-0 h-3 w-3 rotate-45 transform-center box-border
+        pointer-events-none
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border
+        data-[position="top"]:-bottom-1.5 data-[position="top"]:border-t-0 data-[position="top"]:border-l-0
+        data-[position="top"]:[clip-path:inset(1px_0_0_1px)]
+        data-[position="bottom"]:-top-1.5 data-[position="bottom"]:border-r-0 data-[position="bottom"]:border-b-0
+        data-[position="bottom"]:[clip-path:inset(0_1px_1px_0)]
+        data-[position="left"]:-right-1.5 data-[position="left"]:border-b-0 data-[position="left"]:border-l-0
+        data-[position="left"]:[clip-path:inset(0_0_1px_1px)]
+        data-[position="right"]:-left-1.5 data-[position="right"]:border-t-0 data-[position="right"]:border-r-0
+        data-[position="right"]:[clip-path:inset(1px_1px_0_0)]
     `);
-
-const popoverBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popoverBaseVariants;
-        default:
-            return popoverBaseVariants;
-    }
-};
-const popoverHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popoverHeaderVariants;
-        default:
-            return popoverHeaderVariants;
-    }
-};
-const popoverContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popoverContentVariants;
-        default:
-            return popoverContentVariants;
-    }
-};
-const popoverArrowThemeVariants = (theme) => {
-    return tooltipArrowThemeVariants(theme);
-};
 
 class PopoverComponent {
     #destroyRef;
     #popupService;
     #renderer;
-    #themeService;
     #subscription;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#popupService = inject(PopupService);
         this.#renderer = inject(Renderer2);
-        this.#themeService = inject(ThemeService);
         this.#subscription = null;
         this.arrowClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return popoverArrowThemeVariants(theme)();
+            return popoverArrowThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "arrowClasses" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            return popoverBaseThemeVariants(theme)({ rounded });
+            return popoverBaseThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.contentClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return popoverContentThemeVariants(theme)();
+            return popoverContentThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClasses" }] : /* istanbul ignore next */ []));
         this.currentArrowPosition = computed(() => this.position(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentArrowPosition" }] : /* istanbul ignore next */ []));
         this.footerTemplateRef = contentChild(PopoverFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplateRef" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.headerClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const hasTemplate = !!this.titleTemplateRef();
             const padding = hasTemplate ? "p-0" : "p-2";
-            const variants = popoverHeaderThemeVariants(theme)({ rounded });
+            const variants = popoverHeaderThemeVariants({ rounded });
             return twMerge(variants, padding);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
@@ -306,11 +285,11 @@ class PopoverComponent {
         return target instanceof ElementRef ? target.nativeElement : target;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopoverComponent, isStandalone: true, selector: "mona-popover", inputs: { displayArrow: { classPropertyName: "displayArrow", publicName: "displayArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hide: "hide", hidden: "hidden", show: "show", shown: "shown" }, queries: [{ propertyName: "footerTemplateRef", first: true, predicate: PopoverFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplateRef", first: true, predicate: PopoverTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["monaPopover"], ngImport: i0, template: "<ng-template>\r\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\r\n        <div>\r\n            @if (title() || titleTemplateRef()) {\r\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\r\n                    @if (titleTemplateRef()) {\r\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ title() }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n            <div [class]=\"contentClasses()\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            @if (footerTemplateRef()) {\r\n                <div class=\"mona-popover-footer\">\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\r\n                </div>\r\n            }\r\n        </div>\r\n        @if (displayArrow()) {\r\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopoverComponent, isStandalone: true, selector: "mona-popover", inputs: { displayArrow: { classPropertyName: "displayArrow", publicName: "displayArrow", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hide: "hide", hidden: "hidden", show: "show", shown: "shown" }, queries: [{ propertyName: "footerTemplateRef", first: true, predicate: PopoverFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplateRef", first: true, predicate: PopoverTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["monaPopover"], ngImport: i0, template: "<ng-template>\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\n        <div>\n            @if (title() || titleTemplateRef()) {\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\n                    @if (titleTemplateRef()) {\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\n                    } @else {\n                        <span>{{ title() }}</span>\n                    }\n                </div>\n            }\n            <div [class]=\"contentClasses()\">\n                <ng-content></ng-content>\n            </div>\n            @if (footerTemplateRef()) {\n                <div class=\"mona-popover-footer\">\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\n                </div>\n            }\n        </div>\n        @if (displayArrow()) {\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\n        }\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-popover", exportAs: "monaPopover", imports: [NgTemplateOutlet], template: "<ng-template>\r\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\r\n        <div>\r\n            @if (title() || titleTemplateRef()) {\r\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\r\n                    @if (titleTemplateRef()) {\r\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ title() }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n            <div [class]=\"contentClasses()\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n            @if (footerTemplateRef()) {\r\n                <div class=\"mona-popover-footer\">\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\r\n                </div>\r\n            }\r\n        </div>\r\n        @if (displayArrow()) {\r\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n" }]
+            args: [{ selector: "mona-popover", exportAs: "monaPopover", imports: [NgTemplateOutlet], template: "<ng-template>\n    <div [class]=\"baseClasses()\" [id]=\"uid\" role=\"dialog\" [attr.aria-labelledby]=\"headerId()\" [attr.data-uid]=\"uid\">\n        <div>\n            @if (title() || titleTemplateRef()) {\n                <div [class]=\"headerClasses()\" [id]=\"headerId()\">\n                    @if (titleTemplateRef()) {\n                        <ng-container [ngTemplateOutlet]=\"titleTemplateRef()\"></ng-container>\n                    } @else {\n                        <span>{{ title() }}</span>\n                    }\n                </div>\n            }\n            <div [class]=\"contentClasses()\">\n                <ng-content></ng-content>\n            </div>\n            @if (footerTemplateRef()) {\n                <div class=\"mona-popover-footer\">\n                    <ng-container [ngTemplateOutlet]=\"footerTemplateRef()\"></ng-container>\n                </div>\n            }\n        </div>\n        @if (displayArrow()) {\n            <div [class]=\"arrowClasses()\" [attr.data-position]=\"currentArrowPosition()\"></div>\n        }\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], displayArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayArrow", required: false }] }], hide: [{ type: i0.Output, args: ["hide"] }], hidden: [{ type: i0.Output, args: ["hidden"] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], show: [{ type: i0.Output, args: ["show"] }], shown: [{ type: i0.Output, args: ["shown"] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }] } });
 
 /*

package/fesm2022/nanahoshi-mona-ui-popup-menu.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, signal, computed, inject, DestroyRef, ElementRef, afterNextRender, Component, contentChild, contentChildren, input, output, afterRenderEffect, ChangeDetectionStrategy, linkedSignal, forwardRef, model, TemplateRef, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { createElementControlId, isNavigationKey, isTypeaheadKey, setupTypeahead, toCssValue, rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { themeOverlaySurfaceClasses, createElementControlId, isNavigationKey, isTypeaheadKey, setupTypeahead, toCssValue, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { PopupDataInjectionToken, PopupService } from '@nanahoshi/mona-ui/popup';
 import { forEach, select, groupBy, selectMany, any } from '@mirei/ts-collections';
 import { Subject, take, tap, fromEvent, takeUntil, filter, switchMap } from 'rxjs';
@@ -9,7 +9,6 @@ import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { v4 } from 'uuid';
 import { NgTemplateOutlet } from '@angular/common';
 import { LucideChevronRight, LucideCheck } from '@lucide/angular';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -134,7 +133,7 @@ class PopupMenuItemClickEvent extends PreventableEvent {
     }
 }
 
-const popupMenuBaseVariants = cva(`w-full h-full overflow-hidden`, {
+const popupMenuBaseThemeVariants = cva(`h-full w-full overflow-hidden`, {
     variants: {
         rounded: {
             small: "rounded-sm",
@@ -144,12 +143,10 @@ const popupMenuBaseVariants = cva(`w-full h-full overflow-hidden`, {
         }
     }
 });
-const popupMenuContainerVariants = cva(`
-        flex flex-col
-        bg-background text-foreground
-        border border-border
-        outline-none
-        p-1 shadow-md
+const popupMenuContainerThemeVariants = cva(`
+        flex flex-col p-1
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay) outline-none
     `, {
     variants: {
         rounded: {
@@ -160,7 +157,7 @@ const popupMenuContainerVariants = cva(`
         }
     }
 });
-const popupMenuGroupHeaderVariants = cva(`font-bold inline-flex select-none px-2 py-1 w-full`, {
+const popupMenuGroupHeaderThemeVariants = cva(`inline-flex w-full select-none px-2 py-1 font-bold text-muted-foreground`, {
     variants: {
         size: {
             small: "text-xs",
@@ -169,25 +166,17 @@ const popupMenuGroupHeaderVariants = cva(`font-bold inline-flex select-none px-2
         }
     }
 });
-const popupMenuIconContainerVariants = cva(`absolute left-2 flex items-center justify-center`);
-const popupMenuItemVariants = cva(`
-        relative flex gap-2
-        cursor-pointer select-none items-center pl-8 pr-2 py-1
-        outline-none
-
-        hover:bg-hover
-        hover:text-hover-foreground
-
-        focus-within:bg-accent
-        focus-within:text-accent-foreground
-        focus-within:outline-none
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-
-        data-[active='true']:bg-hover
-        data-[active='true']:text-hover-foreground
+const popupMenuIconContainerThemeVariants = cva(`absolute left-2 flex items-center justify-center`);
+const popupMenuItemThemeVariants = cva(`
+        relative flex cursor-pointer select-none items-center gap-2 py-1 pr-2 pl-8
+        text-foreground outline-none
+        hover:bg-[var(--mona-menu-item-hover-background,var(--color-hover))] hover:text-foreground
+        focus-within:bg-[var(--mona-menu-item-hover-background,var(--color-hover))]
+        focus-within:text-foreground focus-within:outline-none
+        data-[disabled='true']:pointer-events-none data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:text-disabled-foreground
+        data-[active='true']:bg-[var(--mona-menu-item-hover-background,var(--color-hover))]
+        data-[active='true']:text-foreground
     `, {
     variants: {
         rounded: {
@@ -203,56 +192,7 @@ const popupMenuItemVariants = cva(`
         }
     }
 });
-const popupMenuLinkVariants = cva(`flex items-center justify-center`);
-
-const popupMenuBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuBaseVariants;
-        default:
-            return popupMenuBaseVariants;
-    }
-};
-const popupMenuContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuContainerVariants;
-        default:
-            return popupMenuContainerVariants;
-    }
-};
-const popupMenuGroupHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuGroupHeaderVariants;
-        default:
-            return popupMenuGroupHeaderVariants;
-    }
-};
-const popupMenuIconContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuIconContainerVariants;
-        default:
-            return popupMenuIconContainerVariants;
-    }
-};
-const popupMenuItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuItemVariants;
-        default:
-            return popupMenuItemVariants;
-    }
-};
-const popupMenuLinkThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return popupMenuLinkVariants;
-        default:
-            return popupMenuLinkVariants;
-    }
-};
+const popupMenuLinkThemeVariants = cva(`flex items-center justify-center`);
 
 class PopupMenuListComponent {
     #childCloseRequest$;
@@ -264,7 +204,6 @@ class PopupMenuListComponent {
     #navigationItems;
     #parentConfig;
     #popupService;
-    #themeService;
     #typeaheadKey$;
     #viaKeyboardNavigation;
     constructor() {
@@ -312,29 +251,25 @@ class PopupMenuListComponent {
         ...(ngDevMode ? [{ debugName: "#navigationItems" }] : /* istanbul ignore next */ []));
         this.#parentConfig = inject(PopupDataInjectionToken);
         this.#popupService = inject(PopupService);
-        this.#themeService = inject(ThemeService);
         this.#typeaheadKey$ = new Subject();
         this.#viaKeyboardNavigation = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#viaKeyboardNavigation" }] : /* istanbul ignore next */ []));
         this.activeMenuItem = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "activeMenuItem" }] : /* istanbul ignore next */ []));
         this.baseClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.#parentConfig.rounded();
-            return popupMenuBaseThemeVariants(theme)({ rounded });
+            return popupMenuBaseThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClasses" }] : /* istanbul ignore next */ []));
         this.containerClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.#parentConfig.rounded();
-            return popupMenuContainerThemeVariants(theme)({ rounded });
+            return popupMenuContainerThemeVariants({ rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
         this.groupHeaderClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const size = this.#parentConfig.size();
             const hasIcon = this.iconAreaVisible();
-            const variantClasses = popupMenuGroupHeaderThemeVariants(theme)({ size });
+            const variantClasses = popupMenuGroupHeaderThemeVariants({ size });
             const iconClasses = hasIcon ? "pl-8" : "pl-2";
             return twMerge(variantClasses, iconClasses);
         }, /* @ts-ignore */
@@ -346,23 +281,20 @@ class PopupMenuListComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconAreaVisible" }] : /* istanbul ignore next */ []));
         this.iconContainerClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return popupMenuIconContainerThemeVariants(theme)();
+            return popupMenuIconContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconContainerClasses" }] : /* istanbul ignore next */ []));
         this.linkContainerClasses = computed(() => {
-            const theme = this.#themeService.theme();
-            return popupMenuLinkThemeVariants(theme)();
+            return popupMenuLinkThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "linkContainerClasses" }] : /* istanbul ignore next */ []));
         this.menuId = computed(() => this.#parentConfig.menuId, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "menuId" }] : /* istanbul ignore next */ []));
         this.menuItemClasses = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.#parentConfig.rounded();
             const size = this.#parentConfig.size();
             const hasIcon = this.iconAreaVisible();
-            const variantClasses = popupMenuItemThemeVariants(theme)({ rounded, size });
+            const variantClasses = popupMenuItemThemeVariants({ rounded, size });
             const iconClasses = hasIcon ? "pl-8" : "pl-2";
             return twMerge(variantClasses, iconClasses);
         }, /* @ts-ignore */
@@ -401,6 +333,13 @@ class PopupMenuListComponent {
         }
         this.#parentConfig.menuItemClick$.next(popupMenuItemClickEvent);
     }
+    closePopup() {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+        this.#close$.next();
+    }
     createSubmenu(target, viaKeyboard) {
         this.#viaKeyboardNavigation.set(viaKeyboard);
         const minWidth = this.#parentConfig.minWidth?.() ?? undefined;
@@ -533,10 +472,7 @@ class PopupMenuListComponent {
         }
     }
     handleEscapeKey() {
-        if (this.popupRef) {
-            this.popupRef.close();
-            this.popupRef = null;
-        }
+        this.closePopup();
     }
     handleHomeKey() {
         const firstItem = this.#navigationItems().firstOrDefault();
@@ -608,28 +544,20 @@ class PopupMenuListComponent {
     }
     setPopupCloseSubscription() {
         this.#parentConfig.parentClose$
-            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
-            if (this.popupRef) {
-                this.popupRef.close();
-                this.popupRef = null;
-            }
-        }))
+            .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => this.closePopup()))
             .subscribe();
         this.#childCloseRequest$
             .pipe(takeUntilDestroyed(this.#destroyRef), tap(() => {
             const activeItem = this.activeMenuItem();
             this.notifyNavigation(activeItem, "left");
-            if (this.popupRef) {
-                this.popupRef.close();
-                this.popupRef = null;
-            }
+            this.closePopup();
         }))
             .subscribe();
     }
     setPointerSubscriptions() {
         this.pointerEnter$
             .pipe(takeUntilDestroyed(this.#destroyRef), takeUntil(this.#parentConfig.parentClose$), filter(e => e.item !== this.activeMenuItem()), tap(e => {
-            this.popupRef?.close();
+            this.closePopup();
             if (e.item.items.length === 0) {
                 this.activeMenuItem.set(null);
             }
@@ -654,13 +582,13 @@ class PopupMenuListComponent {
             .subscribe(buffer => this.cycleThroughMatchedItems(buffer));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupMenuListComponent, isStandalone: true, selector: "mona-popup-menu-list", host: { properties: { "class": "baseClasses()" } }, ngImport: i0, template: "<div\r\n    role=\"menu\"\r\n    [attr.tabindex]=\"0\"\r\n    [attr.aria-orientation]=\"'vertical'\"\r\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\r\n    [attr.id]=\"menuId()\"\r\n    [class]=\"containerClasses()\">\r\n    @for (group of menuItems(); track $index) {\r\n        @if (typeof group.key === \"string\") {\r\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\r\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\r\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\r\n                    @if (groupTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"groupTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ group.key }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n        @for (item of group.source; track $index) {\r\n            @if (item.separator) {\r\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\r\n            } @else {\r\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\r\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\r\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\r\n                <div\r\n                    role=\"menuitem\"\r\n                    [id]=\"item.uid\"\r\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\r\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    [attr.data-active]=\"item === activeMenuItem()\"\r\n                    [attr.aria-disabled]=\"item.disabled\"\r\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\r\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\r\n                    [attr.aria-label]=\"item.label || null\"\r\n                    [attr.data-disabled]=\"item.disabled\"\r\n                    [class]=\"menuItemClasses()\">\r\n                    @if (iconAreaVisible()) {\r\n                        <div [class]=\"iconContainerClasses()\">\r\n                            @if (!item.checkable && !item.radio) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"iconTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                            } @else if (item.checkable) {\r\n                                @if (item.checked?.()) {\r\n                                    <svg lucideCheck [size]=\"14\"></svg>\r\n                                }\r\n                            } @else if (item.radio) {\r\n                                @if (item.selected?.()) {\r\n                                    <svg\r\n                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"24\"\r\n                                        height=\"24\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\"\r\n                                        class=\"lucide lucide-circle size-2 fill-current\">\r\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                                    </svg>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    }\r\n                    <div class=\"flex-1\">\r\n                        @if (textTemplate) {\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"textTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                        } @else {\r\n                            {{ item.label }}\r\n                        }\r\n                    </div>\r\n                    @if (item.items.length > 0) {\r\n                        @if (!item.checkable) {\r\n                            <div [class]=\"linkContainerClasses()\">\r\n                                <svg lucideChevronRight [size]=\"16\"></svg>\r\n                            </div>\r\n                        }\r\n                    } @else if (shortcutTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupMenuListComponent, isStandalone: true, selector: "mona-popup-menu-list", host: { properties: { "class": "baseClasses()" } }, ngImport: i0, template: "<div\n    role=\"menu\"\n    [attr.tabindex]=\"0\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\n    [attr.id]=\"menuId()\"\n    [class]=\"containerClasses()\">\n    @for (group of menuItems(); track $index) {\n        @if (typeof group.key === \"string\") {\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\n                    @if (groupTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"groupTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\n                    } @else {\n                        <span>{{ group.key }}</span>\n                    }\n                </div>\n            </div>\n        }\n        @for (item of group.source; track $index) {\n            @if (item.separator) {\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\n            } @else {\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\n                <div\n                    role=\"menuitem\"\n                    [id]=\"item.uid\"\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\n                    (click)=\"onItemClick($event, item)\"\n                    [attr.data-active]=\"item === activeMenuItem()\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\n                    [attr.aria-label]=\"item.label || null\"\n                    [attr.data-disabled]=\"item.disabled\"\n                    [class]=\"menuItemClasses()\">\n                    @if (iconAreaVisible()) {\n                        <div [class]=\"iconContainerClasses()\">\n                            @if (!item.checkable && !item.radio) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"iconTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                            } @else if (item.checkable) {\n                                @if (item.checked?.()) {\n                                    <svg lucideCheck [size]=\"14\"></svg>\n                                }\n                            } @else if (item.radio) {\n                                @if (item.selected?.()) {\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        width=\"24\"\n                                        height=\"24\"\n                                        viewBox=\"0 0 24 24\"\n                                        fill=\"none\"\n                                        stroke=\"currentColor\"\n                                        stroke-width=\"2\"\n                                        stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\"\n                                        class=\"lucide lucide-circle size-2 fill-current\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                    </svg>\n                                }\n                            }\n                        </div>\n                    }\n                    <div class=\"flex-1\">\n                        @if (textTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"textTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                        } @else {\n                            {{ item.label }}\n                        }\n                    </div>\n                    @if (item.items.length > 0) {\n                        @if (!item.checkable) {\n                            <div [class]=\"linkContainerClasses()\">\n                                <svg lucideChevronRight [size]=\"16\"></svg>\n                            </div>\n                        }\n                    } @else if (shortcutTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                    }\n                </div>\n            }\n        }\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideCheck, selector: "svg[lucideCheck]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupMenuListComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-popup-menu-list", imports: [NgTemplateOutlet, LucideChevronRight, LucideCheck], host: {
                         "[class]": "baseClasses()"
-                    }, template: "<div\r\n    role=\"menu\"\r\n    [attr.tabindex]=\"0\"\r\n    [attr.aria-orientation]=\"'vertical'\"\r\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\r\n    [attr.id]=\"menuId()\"\r\n    [class]=\"containerClasses()\">\r\n    @for (group of menuItems(); track $index) {\r\n        @if (typeof group.key === \"string\") {\r\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\r\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\r\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\r\n                    @if (groupTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"groupTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ group.key }}</span>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n        @for (item of group.source; track $index) {\r\n            @if (item.separator) {\r\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\r\n            } @else {\r\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\r\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\r\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\r\n                <div\r\n                    role=\"menuitem\"\r\n                    [id]=\"item.uid\"\r\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\r\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\r\n                    (click)=\"onItemClick($event, item)\"\r\n                    [attr.data-active]=\"item === activeMenuItem()\"\r\n                    [attr.aria-disabled]=\"item.disabled\"\r\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\r\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\r\n                    [attr.aria-label]=\"item.label || null\"\r\n                    [attr.data-disabled]=\"item.disabled\"\r\n                    [class]=\"menuItemClasses()\">\r\n                    @if (iconAreaVisible()) {\r\n                        <div [class]=\"iconContainerClasses()\">\r\n                            @if (!item.checkable && !item.radio) {\r\n                                <ng-container\r\n                                    [ngTemplateOutlet]=\"iconTemplate\"\r\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                            } @else if (item.checkable) {\r\n                                @if (item.checked?.()) {\r\n                                    <svg lucideCheck [size]=\"14\"></svg>\r\n                                }\r\n                            } @else if (item.radio) {\r\n                                @if (item.selected?.()) {\r\n                                    <svg\r\n                                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                                        width=\"24\"\r\n                                        height=\"24\"\r\n                                        viewBox=\"0 0 24 24\"\r\n                                        fill=\"none\"\r\n                                        stroke=\"currentColor\"\r\n                                        stroke-width=\"2\"\r\n                                        stroke-linecap=\"round\"\r\n                                        stroke-linejoin=\"round\"\r\n                                        class=\"lucide lucide-circle size-2 fill-current\">\r\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\r\n                                    </svg>\r\n                                }\r\n                            }\r\n                        </div>\r\n                    }\r\n                    <div class=\"flex-1\">\r\n                        @if (textTemplate) {\r\n                            <ng-container\r\n                                [ngTemplateOutlet]=\"textTemplate\"\r\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                        } @else {\r\n                            {{ item.label }}\r\n                        }\r\n                    </div>\r\n                    @if (item.items.length > 0) {\r\n                        @if (!item.checkable) {\r\n                            <div [class]=\"linkContainerClasses()\">\r\n                                <svg lucideChevronRight [size]=\"16\"></svg>\r\n                            </div>\r\n                        }\r\n                    } @else if (shortcutTemplate) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    }\r\n</div>\r\n" }]
+                    }, template: "<div\n    role=\"menu\"\n    [attr.tabindex]=\"0\"\n    [attr.aria-orientation]=\"'vertical'\"\n    [attr.aria-activedescendant]=\"activeMenuItem()?.uid\"\n    [attr.id]=\"menuId()\"\n    [class]=\"containerClasses()\">\n    @for (group of menuItems(); track $index) {\n        @if (typeof group.key === \"string\") {\n            @let groupTemplate = group.first().groupTemplate?.() ?? popupGroupTemplate() ?? null;\n            <div role=\"group\" [attr.aria-labelledby]=\"`${group.key}-${$index}`\" [class]=\"groupHeaderClasses()\">\n                <div [id]=\"`${group.key}-${$index}`\" role=\"presentation\">\n                    @if (groupTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"groupTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: group.key }\"></ng-container>\n                    } @else {\n                        <span>{{ group.key }}</span>\n                    }\n                </div>\n            </div>\n        }\n        @for (item of group.source; track $index) {\n            @if (item.separator) {\n                <div role=\"separator\" class=\"bg-border my-1 h-px\"></div>\n            } @else {\n                @let iconTemplate = item.iconTemplate?.() ?? popupIconTemplate() ?? null;\n                @let shortcutTemplate = item.shortcutTemplate?.() ?? popupShortcutTemplate() ?? null;\n                @let textTemplate = item.textTemplate?.() ?? popupTextTemplate() ?? null;\n                <div\n                    role=\"menuitem\"\n                    [id]=\"item.uid\"\n                    (pointerenter)=\"pointerEnter$.next({ event: $event, item: item })\"\n                    (pointerleave)=\"pointerLeave$.next({ event: $event, item: item })\"\n                    (click)=\"onItemClick($event, item)\"\n                    [attr.data-active]=\"item === activeMenuItem()\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.aria-expanded]=\"item.items.length > 0 && item === activeMenuItem() && !!popupRef\"\n                    [attr.aria-haspopup]=\"item.items.length > 0 ? 'menu' : null\"\n                    [attr.aria-label]=\"item.label || null\"\n                    [attr.data-disabled]=\"item.disabled\"\n                    [class]=\"menuItemClasses()\">\n                    @if (iconAreaVisible()) {\n                        <div [class]=\"iconContainerClasses()\">\n                            @if (!item.checkable && !item.radio) {\n                                <ng-container\n                                    [ngTemplateOutlet]=\"iconTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                            } @else if (item.checkable) {\n                                @if (item.checked?.()) {\n                                    <svg lucideCheck [size]=\"14\"></svg>\n                                }\n                            } @else if (item.radio) {\n                                @if (item.selected?.()) {\n                                    <svg\n                                        xmlns=\"http://www.w3.org/2000/svg\"\n                                        width=\"24\"\n                                        height=\"24\"\n                                        viewBox=\"0 0 24 24\"\n                                        fill=\"none\"\n                                        stroke=\"currentColor\"\n                                        stroke-width=\"2\"\n                                        stroke-linecap=\"round\"\n                                        stroke-linejoin=\"round\"\n                                        class=\"lucide lucide-circle size-2 fill-current\">\n                                        <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n                                    </svg>\n                                }\n                            }\n                        </div>\n                    }\n                    <div class=\"flex-1\">\n                        @if (textTemplate) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"textTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                        } @else {\n                            {{ item.label }}\n                        }\n                    </div>\n                    @if (item.items.length > 0) {\n                        @if (!item.checkable) {\n                            <div [class]=\"linkContainerClasses()\">\n                                <svg lucideChevronRight [size]=\"16\"></svg>\n                            </div>\n                        }\n                    } @else if (shortcutTemplate) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"shortcutTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n                    }\n                </div>\n            }\n        }\n    }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 class PopupMenuComponent {

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

@@ -203,13 +203,13 @@ class PopupWrapperComponent {
         this.#fallbackTimer = win.setTimeout(() => this.#completeClose(), duration + 50);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\r\n    <div\r\n        #animationElement\r\n        class=\"w-full h-full origin-center\"\r\n        [animate.enter]=\"enterAnimationClasses()\"\r\n        [animate.leave]=\"leaveAnimationClasses()\"\r\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\r\n        (animationend)=\"onNativeLeaveComplete($event)\"\r\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\r\n        (transitionend)=\"onNativeLeaveComplete($event)\">\r\n        @if (templateRef()) {\r\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\r\n        }\r\n        <ng-container #componentOutlet></ng-container>\r\n    </div>\r\n}\r\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PopupWrapperComponent, isStandalone: true, selector: "mona-popup-wrapper", host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "animationElement", first: true, predicate: ["animationElement"], descendants: true, isSignal: true }, { propertyName: "componentOutlet", first: true, predicate: ["componentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "@if (visible()) {\n    <div\n        #animationElement\n        class=\"w-full h-full origin-center\"\n        [animate.enter]=\"enterAnimationClasses()\"\n        [animate.leave]=\"leaveAnimationClasses()\"\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\n        (animationend)=\"onNativeLeaveComplete($event)\"\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\n        (transitionend)=\"onNativeLeaveComplete($event)\">\n        @if (templateRef()) {\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n        }\n        <ng-container #componentOutlet></ng-container>\n    </div>\n}\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-popup-wrapper", imports: [NgTemplateOutlet], host: {
                         "[class]": "hostClasses()"
-                    }, template: "@if (visible()) {\r\n    <div\r\n        #animationElement\r\n        class=\"w-full h-full origin-center\"\r\n        [animate.enter]=\"enterAnimationClasses()\"\r\n        [animate.leave]=\"leaveAnimationClasses()\"\r\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\r\n        (animationend)=\"onNativeLeaveComplete($event)\"\r\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\r\n        (transitionend)=\"onNativeLeaveComplete($event)\">\r\n        @if (templateRef()) {\r\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\r\n        }\r\n        <ng-container #componentOutlet></ng-container>\r\n    </div>\r\n}\r\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"] }]
+                    }, template: "@if (visible()) {\n    <div\n        #animationElement\n        class=\"w-full h-full origin-center\"\n        [animate.enter]=\"enterAnimationClasses()\"\n        [animate.leave]=\"leaveAnimationClasses()\"\n        (animationcancel)=\"onNativeLeaveComplete($event)\"\n        (animationend)=\"onNativeLeaveComplete($event)\"\n        (transitioncancel)=\"onNativeLeaveComplete($event)\"\n        (transitionend)=\"onNativeLeaveComplete($event)\">\n        @if (templateRef()) {\n            <ng-container [ngTemplateOutlet]=\"templateRef()\"></ng-container>\n        }\n        <ng-container #componentOutlet></ng-container>\n    </div>\n}\n", styles: [":host{display:block}.mona-popup-enter{animation:mona-popup-scale-in .15s cubic-bezier(.4,0,.2,1)}.mona-popup-leave{animation:mona-popup-scale-out .15s cubic-bezier(.4,0,.2,1)}.mona-dropdown-popup-enter{animation:mona-dropdown-popup-scale-in .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-dropdown-popup-leave{animation:mona-dropdown-popup-scale-out .15s cubic-bezier(.4,0,.2,1);transform-origin:top center}.mona-popup-fade-enter{animation:mona-popup-fade-in 50ms ease-in}.mona-popup-fade-leave{animation:mona-popup-fade-out .15s ease-out}@keyframes mona-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-dropdown-popup-scale-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes mona-dropdown-popup-scale-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@keyframes mona-popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes mona-popup-fade-out{0%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.mona-popup-enter,.mona-popup-leave,.mona-dropdown-popup-enter,.mona-dropdown-popup-leave,.mona-popup-fade-enter,.mona-popup-fade-leave{animation-duration:1ms}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { animationElement: [{ type: i0.ViewChild, args: ["animationElement", { isSignal: true }] }], componentOutlet: [{ type: i0.ViewChild, args: ["componentOutlet", { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class PopupRef {
@@ -1302,11 +1302,11 @@ class PopupComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupComponent, isStandalone: true, selector: "mona-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnMouseLeave: { classPropertyName: "closeOnMouseLeave", publicName: "closeOnMouseLeave", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, popupWrapperClass: { classPropertyName: "popupWrapperClass", publicName: "popupWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, preventClose: { classPropertyName: "preventClose", publicName: "preventClose", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, withPush: { classPropertyName: "withPush", publicName: "withPush", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, withScrollTracking: { classPropertyName: "withScrollTracking", publicName: "withScrollTracking", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", open: "open" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: PopupComponent, isStandalone: true, selector: "mona-popup", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, anchorConnectionPoint: { classPropertyName: "anchorConnectionPoint", publicName: "anchorConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, closeOnMouseLeave: { classPropertyName: "closeOnMouseLeave", publicName: "closeOnMouseLeave", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupConnectionPoint: { classPropertyName: "popupConnectionPoint", publicName: "popupConnectionPoint", isSignal: true, isRequired: false, transformFunction: null }, popupWrapperClass: { classPropertyName: "popupWrapperClass", publicName: "popupWrapperClass", isSignal: true, isRequired: false, transformFunction: null }, positionStrategy: { classPropertyName: "positionStrategy", publicName: "positionStrategy", isSignal: true, isRequired: false, transformFunction: null }, positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: false, transformFunction: null }, preventClose: { classPropertyName: "preventClose", publicName: "preventClose", isSignal: true, isRequired: false, transformFunction: null }, providers: { classPropertyName: "providers", publicName: "providers", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, withPush: { classPropertyName: "withPush", publicName: "withPush", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, restoreFocus: { classPropertyName: "restoreFocus", publicName: "restoreFocus", isSignal: true, isRequired: false, transformFunction: null }, withScrollTracking: { classPropertyName: "withScrollTracking", publicName: "withScrollTracking", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", open: "open" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PopupComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-popup", template: "<ng-template>\r\n    <ng-content></ng-content>\r\n</ng-template>\r\n" }]
+            args: [{ selector: "mona-popup", template: "<ng-template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { contentTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], anchorConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorConnectionPoint", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closeOnBackdropClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdropClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], closeOnMouseLeave: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnMouseLeave", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupConnectionPoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupConnectionPoint", required: false }] }], popupWrapperClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWrapperClass", required: false }] }], positionStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "positionStrategy", required: false }] }], positions: [{ type: i0.Input, args: [{ isSignal: true, alias: "positions", required: false }] }], preventClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventClose", required: false }] }], providers: [{ type: i0.Input, args: [{ isSignal: true, alias: "providers", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], withPush: [{ type: i0.Input, args: [{ isSignal: true, alias: "withPush", required: false }] }], closeOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnScroll", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], withScrollTracking: [{ type: i0.Input, args: [{ isSignal: true, alias: "withScrollTracking", required: false }] }] } });
 
 /*