@nanahoshi/mona-ui 0.1.0 → 0.2.0

package/fesm2022/nanahoshi-mona-ui-expansion-panel.mjs

@@ -1,8 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, contentChildren, TemplateRef, computed, contentChild, input, model, Component } from '@angular/core';
+import { Directive, contentChildren, TemplateRef, computed, contentChild, input, model, Component } from '@angular/core';
 import { LucideMinus, LucidePlus } from '@lucide/angular';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -40,11 +39,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const expansionPanelBaseVariants = cva(`
-        block w-full bg-background overflow-hidden
-        border border-border
-        not-last:border-b-transparent not-last:rounded-b-none
-        not-first:rounded-t-none relative
+const expansionPanelBaseThemeVariants = cva(`
+        relative block w-full overflow-hidden
+        bg-surface text-foreground border border-border
+        not-last:border-b-transparent not-last:rounded-b-none not-first:rounded-t-none
     `, {
     variants: {
         rounded: {
@@ -55,34 +53,33 @@ const expansionPanelBaseVariants = cva(`
         }
     }
 });
-const expansionPanelHeaderVariants = cva(`
-        w-full flex items-center justify-between
-        px-2 py-1
-        bg-background-dark
-        cursor-pointer
-        font-medium
-        text-foreground
-        select-none
-        transition-border-b duration-200
-        focus-visible:outline-primary/40 focus-visible:border-b-transparent
-        focus-visible:ring-1 focus-visible:ring-primary/40
-        focus-visible:z-10 focus-visible:relative
+const expansionPanelHeaderThemeVariants = cva(`
+        relative flex w-full items-center justify-between
+        px-2 py-1
+        cursor-pointer
+        select-none
+        font-medium text-foreground
+        bg-surface-muted
+        transition-colors duration-(--mona-motion-fast)
+        hover:bg-hover active:bg-active
+        focus-visible:z-10 focus-visible:outline-none
+        focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-indicator/35
     `, {
     variants: {
         collapsed: {
             true: "border-b-transparent",
-            false: "border-0 border-b border-border border-solid"
+            false: "border-0 border-b border-border-subtle"
         },
         disabled: {
-            true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
+            true: "pointer-events-none cursor-not-allowed select-none bg-disabled-background text-disabled-foreground",
             false: ""
         }
     }
 });
-const expansionPanelHeaderTitleVariants = cva(`
-        p-1 flex-1
+const expansionPanelHeaderTitleThemeVariants = cva(`
+        p-1 flex-1
     `);
-const expansionPanelIconContainerVariants = cva(``, {
+const expansionPanelIconContainerThemeVariants = cva(``, {
     variants: {
         hasTemplate: {
             true: "",
@@ -90,11 +87,11 @@ const expansionPanelIconContainerVariants = cva(``, {
         }
     }
 });
-const expansionPanelContentVariants = cva(`
-        text-foreground
-        grid
-        transition-[grid-template-rows] duration-300 ease-out
-        [&>div]:overflow-hidden
+const expansionPanelContentThemeVariants = cva(`
+        text-foreground
+        grid
+        transition-[grid-template-rows] duration-(--mona-motion-standard) ease-out
+        [&>div]:overflow-hidden
     `, {
     variants: {
         expanded: {
@@ -104,81 +101,34 @@ const expansionPanelContentVariants = cva(`
     }
 });
 
-const expansionPanelBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return expansionPanelBaseVariants;
-        default:
-            return expansionPanelBaseVariants;
-    }
-};
-const expansionPanelHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return expansionPanelHeaderVariants;
-        default:
-            return expansionPanelHeaderVariants;
-    }
-};
-const expansionPanelHeaderTitleThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return expansionPanelHeaderTitleVariants;
-        default:
-            return expansionPanelHeaderTitleVariants;
-    }
-};
-const expansionPanelIconContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return expansionPanelIconContainerVariants;
-        default:
-            return expansionPanelIconContainerVariants;
-    }
-};
-const expansionPanelContentThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return expansionPanelContentVariants;
-        default:
-            return expansionPanelContentVariants;
-    }
-};
-
 class ExpansionPanelComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.actionsTemplateList = contentChildren(ExpansionPanelActionsTemplateDirective, { ...(ngDevMode ? { debugName: "actionsTemplateList" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
-            const variantClass = expansionPanelBaseThemeVariants(theme)({ rounded });
+            const variantClass = expansionPanelBaseThemeVariants({ rounded });
             return twMerge(variantClass, this.userClass());
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.contentClass = computed(() => {
-            const theme = this.#themeService.theme();
             const expanded = this.expanded();
-            return expansionPanelContentThemeVariants(theme)({ expanded });
+            return expansionPanelContentThemeVariants({ expanded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
         this.contentId = createElementControlId();
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const collapsed = !this.expanded();
             const disabled = this.disabled();
-            return expansionPanelHeaderThemeVariants(theme)({ collapsed, disabled });
+            return expansionPanelHeaderThemeVariants({ collapsed, disabled });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.headerTitleClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return expansionPanelHeaderTitleThemeVariants(theme)();
+            return expansionPanelHeaderTitleThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerTitleClass" }] : /* istanbul ignore next */ []));
         this.iconContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
             const hasTemplate = !!this.iconTemplate();
-            return expansionPanelIconContainerThemeVariants(theme)({ hasTemplate });
+            return expansionPanelIconContainerThemeVariants({ hasTemplate });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "iconContainerClass" }] : /* istanbul ignore next */ []));
         this.iconTemplate = contentChild(ExpansionPanelIconTemplateDirective, { ...(ngDevMode ? { debugName: "iconTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -214,7 +164,6 @@ class ExpansionPanelComponent {
         this.userClass = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "userClass" }] : /* istanbul ignore next */ []));
     }
-    #themeService;
     toggle() {
         if (this.disabled()) {
             return;
@@ -222,13 +171,13 @@ class ExpansionPanelComponent {
         this.expanded.update(expanded => !expanded);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ExpansionPanelComponent, isStandalone: true, selector: "mona-expansion-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "userClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "actionsTemplateList", predicate: ExpansionPanelActionsTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ExpansionPanelIconTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div\r\n    [class]=\"headerClass()\"\r\n    role=\"button\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.aria-controls]=\"contentId\"\r\n    [attr.aria-disabled]=\"disabled() ? 'true' : undefined\"\r\n    (click)=\"toggle()\"\r\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\r\n    (keydown.space)=\"$event.preventDefault(); toggle()\">\r\n    <div [class]=\"headerTitleClass()\">\r\n        @if (titleTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\r\n        } @else {\r\n            {{ title() }}\r\n        }\r\n    </div>\r\n    <div>\r\n        @for (action of actionsTemplateList(); track $index) {\r\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\r\n        }\r\n    </div>\r\n    <div [class]=\"iconContainerClass()\">\r\n        @if (iconTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"iconTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\r\n        } @else {\r\n            @if (expanded()) {\r\n                <svg lucideMinus [size]=\"14\"></svg>\r\n            } @else {\r\n                <svg lucidePlus [size]=\"14\"></svg>\r\n            }\r\n        }\r\n    </div>\r\n</div>\r\n<div\r\n    [id]=\"contentId\"\r\n    [class]=\"contentClass()\"\r\n    [attr.aria-hidden]=\"!expanded()\"\r\n    [attr.inert]=\"!expanded() ? true : undefined\">\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ExpansionPanelComponent, isStandalone: true, selector: "mona-expansion-panel", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "userClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "actionsTemplateList", predicate: ExpansionPanelActionsTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "iconTemplate", first: true, predicate: ExpansionPanelIconTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "titleTemplate", first: true, predicate: ExpansionPanelTitleTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div\n    [class]=\"headerClass()\"\n    role=\"button\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"contentId\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : undefined\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\">\n    <div [class]=\"headerTitleClass()\">\n        @if (titleTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n        } @else {\n            {{ title() }}\n        }\n    </div>\n    <div>\n        @for (action of actionsTemplateList(); track $index) {\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n        }\n    </div>\n    <div [class]=\"iconContainerClass()\">\n        @if (iconTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\n        } @else {\n            @if (expanded()) {\n                <svg lucideMinus [size]=\"14\"></svg>\n            } @else {\n                <svg lucidePlus [size]=\"14\"></svg>\n            }\n        }\n    </div>\n</div>\n<div\n    [id]=\"contentId\"\n    [class]=\"contentClass()\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? true : undefined\">\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideMinus, selector: "svg[lucideMinus]" }, { kind: "component", type: LucidePlus, selector: "svg[lucidePlus]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: "mona-expansion-panel", imports: [NgTemplateOutlet, LucideMinus, LucidePlus], host: {
                         "[class]": "baseClass()"
-                    }, template: "<div\r\n    [class]=\"headerClass()\"\r\n    role=\"button\"\r\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\r\n    [attr.aria-expanded]=\"expanded()\"\r\n    [attr.aria-controls]=\"contentId\"\r\n    [attr.aria-disabled]=\"disabled() ? 'true' : undefined\"\r\n    (click)=\"toggle()\"\r\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\r\n    (keydown.space)=\"$event.preventDefault(); toggle()\">\r\n    <div [class]=\"headerTitleClass()\">\r\n        @if (titleTemplate()) {\r\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\r\n        } @else {\r\n            {{ title() }}\r\n        }\r\n    </div>\r\n    <div>\r\n        @for (action of actionsTemplateList(); track $index) {\r\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\r\n        }\r\n    </div>\r\n    <div [class]=\"iconContainerClass()\">\r\n        @if (iconTemplate()) {\r\n            <ng-container\r\n                [ngTemplateOutlet]=\"iconTemplate()\"\r\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\r\n        } @else {\r\n            @if (expanded()) {\r\n                <svg lucideMinus [size]=\"14\"></svg>\r\n            } @else {\r\n                <svg lucidePlus [size]=\"14\"></svg>\r\n            }\r\n        }\r\n    </div>\r\n</div>\r\n<div\r\n    [id]=\"contentId\"\r\n    [class]=\"contentClass()\"\r\n    [attr.aria-hidden]=\"!expanded()\"\r\n    [attr.inert]=\"!expanded() ? true : undefined\">\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>\r\n" }]
+                    }, template: "<div\n    [class]=\"headerClass()\"\n    role=\"button\"\n    [attr.tabindex]=\"disabled() ? -1 : 0\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-controls]=\"contentId\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : undefined\"\n    (click)=\"toggle()\"\n    (keydown.enter)=\"$event.preventDefault(); toggle()\"\n    (keydown.space)=\"$event.preventDefault(); toggle()\">\n    <div [class]=\"headerTitleClass()\">\n        @if (titleTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"titleTemplate()\"></ng-container>\n        } @else {\n            {{ title() }}\n        }\n    </div>\n    <div>\n        @for (action of actionsTemplateList(); track $index) {\n            <ng-container [ngTemplateOutlet]=\"action\"></ng-container>\n        }\n    </div>\n    <div [class]=\"iconContainerClass()\">\n        @if (iconTemplate()) {\n            <ng-container\n                [ngTemplateOutlet]=\"iconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: expanded() }\"></ng-container>\n        } @else {\n            @if (expanded()) {\n                <svg lucideMinus [size]=\"14\"></svg>\n            } @else {\n                <svg lucidePlus [size]=\"14\"></svg>\n            }\n        }\n    </div>\n</div>\n<div\n    [id]=\"contentId\"\n    [class]=\"contentClass()\"\n    [attr.aria-hidden]=\"!expanded()\"\n    [attr.inert]=\"!expanded() ? true : undefined\">\n    <div>\n        <ng-content></ng-content>\n    </div>\n</div>\n" }]
         }], propDecorators: { actionsTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ExpansionPanelActionsTemplateDirective), { ...{
                             read: TemplateRef
                         }, isSignal: true }] }], iconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExpansionPanelIconTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], titleTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExpansionPanelTitleTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "userClass", required: false }] }] } });

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

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, computed, contentChild, TemplateRef, input, Component } from '@angular/core';
+import { Directive, computed, contentChild, TemplateRef, input, Component } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -16,13 +15,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const fieldsetBaseVariants = cva(`
-        block
+const fieldsetBaseThemeVariants = cva(`
+        block
     `);
-const fieldsetVariants = cva(`
-        bg-background
-        border border-border
-        text-foreground
+const fieldsetThemeVariants = cva(`
+        bg-surface text-foreground border border-border
     `, {
     variants: {
         rounded: {
@@ -33,7 +30,7 @@ const fieldsetVariants = cva(`
             none: "rounded-none"
         },
         disabled: {
-            true: "pointer-events-none opacity-50 cursor-not-allowed select-none",
+            true: "pointer-events-none cursor-not-allowed select-none bg-disabled-background text-disabled-foreground border-disabled-border",
             false: ""
         }
     },
@@ -41,13 +38,13 @@ const fieldsetVariants = cva(`
         disabled: false
     }
 });
-const fieldsetLegendVariants = cva(`
-        ml-2
+const fieldsetLegendThemeVariants = cva(`
+        ms-2
     `, {
     variants: {
         hasTemplate: {
             true: "",
-            false: "bg-background-dark text-foreground border border-border px-2"
+            false: "px-2 bg-surface-raised text-foreground border border-border-subtle"
         },
         rounded: {
             small: "rounded-sm",
@@ -62,52 +59,23 @@ const fieldsetLegendVariants = cva(`
     }
 });
 
-const fieldsetBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return fieldsetBaseVariants;
-        default:
-            return fieldsetBaseVariants;
-    }
-};
-const fieldsetThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return fieldsetVariants;
-        default:
-            return fieldsetVariants;
-    }
-};
-const fieldsetLegendThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return fieldsetLegendVariants;
-        default:
-            return fieldsetLegendVariants;
-    }
-};
-
 class FieldsetComponent {
     constructor() {
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return fieldsetBaseThemeVariants(theme)();
+            return fieldsetBaseThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.fieldsetClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const disabled = this.disabled();
             const userClass = this.userClass();
-            return twMerge(fieldsetThemeVariants(theme)({ rounded, disabled }), userClass);
+            return twMerge(fieldsetThemeVariants({ rounded, disabled }), userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "fieldsetClass" }] : /* istanbul ignore next */ []));
         this.legendClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const hasTemplate = !!this.legendTemplate();
-            return fieldsetLegendThemeVariants(theme)({ hasTemplate, rounded });
+            return fieldsetLegendThemeVariants({ hasTemplate, rounded });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "legendClass" }] : /* istanbul ignore next */ []));
         this.legendTemplate = contentChild(FieldsetLegendTemplateDirective, { ...(ngDevMode ? { debugName: "legendTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -147,7 +115,6 @@ class FieldsetComponent {
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
     }
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FieldsetComponent, isStandalone: true, selector: "mona-fieldset", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, queries: [{ propertyName: "legendTemplate", first: true, predicate: FieldsetLegendTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<fieldset [class]=\"fieldsetClass()\" [disabled]=\"disabled()\" [attr.name]=\"name()\">\n    @if (legendVisible()) {\n        <legend [class]=\"legendClass()\">\n            @if (legendTemplate()) {\n                <ng-container [ngTemplateOutlet]=\"legendTemplate()\"></ng-container>\n            } @else {\n                <span>{{ legend() }}</span>\n            }\n        </legend>\n    }\n    <ng-content></ng-content>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }

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

@@ -8,8 +8,8 @@ import { DatePickerComponent } from '@nanahoshi/mona-ui/date-picker';
 import { DropdownListComponent } from '@nanahoshi/mona-ui/dropdown-list';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
 import { TextBoxComponent } from '@nanahoshi/mona-ui/text-box';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { cva } from 'class-variance-authority';
+import { themeOverlaySurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
 class OperatorFilterPipe {
     transform(value, visibleOperators) {
@@ -219,11 +219,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             type: Injectable
         }] });
 
-const filterMenuBaseVariants = cva(`
-        w-full flex flex-col
-        p-1 gap-2
-        bg-background-dark border border-border
-        shadow-lg
+const filterMenuBaseThemeVariants = cva(`
+        flex w-full flex-col
+        gap-2 p-1
+        ${themeOverlaySurfaceClasses} text-foreground
+        border border-border shadow-(--shadow-overlay)
     `, {
     variants: {
         rounded: {
@@ -239,49 +239,22 @@ const filterMenuBaseVariants = cva(`
         }
     }
 });
-const filterMenuItemVariants = cva(`
-        flex flex-col gap-1
-        [&>mona-button-group>button]:flex-1
+const filterMenuItemThemeVariants = cva(`
+        flex flex-col gap-1
+        [&>mona-button-group>button]:flex-1
     `);
-const filterMenuActionVariants = cva(`
-        flex flex-row
-        items-center justify-center
-        gap-1 [&>button]:flex-1
+const filterMenuActionsThemeVariants = cva(`
+        flex flex-row
+        items-center justify-center
+        gap-1 [&>button]:flex-1
     `);
 
-const filterMenuBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return filterMenuBaseVariants;
-        default:
-            return filterMenuBaseVariants;
-    }
-};
-const filterMenuActionsThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return filterMenuActionVariants;
-        default:
-            return filterMenuActionVariants;
-    }
-};
-const filterMenuItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return filterMenuItemVariants;
-        default:
-            return filterMenuItemVariants;
-    }
-};
-
 class FilterMenuComponent {
     #booleanFilterValues;
     #filterService;
-    #themeService;
     constructor() {
         this.#booleanFilterValues = [null, null];
         this.#filterService = inject(FilterService);
-        this.#themeService = inject(ThemeService);
         this.applyDisabled = computed(() => {
             if (!this.firstFilterValid()) {
                 return true;
@@ -290,8 +263,7 @@ class FilterMenuComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "applyDisabled" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return filterMenuBaseThemeVariants(theme)();
+            return filterMenuBaseThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.booleanFilterMenuDataItems = this.#filterService.booleanFilterMenuItems;
@@ -318,13 +290,11 @@ class FilterMenuComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "effectiveDateOptions" }] : /* istanbul ignore next */ []));
         this.filterMenuActionsClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return filterMenuActionsThemeVariants(theme)();
+            return filterMenuActionsThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterMenuActionsClass" }] : /* istanbul ignore next */ []));
         this.filterMenuItemClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return filterMenuItemThemeVariants(theme)();
+            return filterMenuItemThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "filterMenuItemClass" }] : /* istanbul ignore next */ []));
         this.firstFilterValid = computed(() => {
@@ -649,7 +619,7 @@ class FilterMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FilterMenuComponent, isStandalone: true, selector: "mona-filter-menu", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", field: "fieldChange", operators: "operatorsChange", type: "typeChange", value: "valueChange" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<div [class]=\"filterMenuItemClass()\">\r\n    @if (type() === \"string\") {\r\n        <mona-dropdown-list\r\n            [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n        <mona-text-box\r\n            [ngModel]=\"stringFilterValues()[0]\"\r\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\r\n            [size]=\"size()\"\r\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\r\n    }\r\n\r\n    @if (type() === \"number\") {\r\n        <mona-dropdown-list\r\n            [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n        <mona-numeric-text-box\r\n            [ngModel]=\"numberFilterValues()[0]\"\r\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\r\n    }\r\n\r\n    @if (type() === \"date\") {\r\n        <mona-dropdown-list\r\n            [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n\r\n        @if (type() === \"date\") {\r\n            <mona-date-picker\r\n                [ngModel]=\"dateFilterValues()[0]\"\r\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\r\n                [format]=\"effectiveDateOptions().format\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\r\n        }\r\n    }\r\n\r\n    @if (type() === \"boolean\") {\r\n        <mona-dropdown-list\r\n            [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n    }\r\n</div>\r\n@if (firstFilterValid()) {\r\n    <div [class]=\"filterMenuItemClass()\">\r\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\r\n            @for (item of connectorDataItems; track item) {\r\n                <button\r\n                    monaButton\r\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\r\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\r\n                    {{ item.text }}\r\n                </button>\r\n            }\r\n        </mona-button-group>\r\n    </div>\r\n}\r\n@if (!!selectedConnectorItem()) {\r\n    <div [class]=\"filterMenuItemClass()\">\r\n        @if (type() === \"string\") {\r\n            <mona-dropdown-list\r\n                [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n            <mona-text-box\r\n                [ngModel]=\"stringFilterValues()[1]\"\r\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\r\n        }\r\n\r\n        @if (type() === \"number\") {\r\n            <mona-dropdown-list\r\n                [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n\r\n            <mona-numeric-text-box\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"numberFilterValues()[1]\"\r\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\r\n        }\r\n\r\n        @if (type() === \"date\") {\r\n            <mona-dropdown-list\r\n                [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n\r\n            @if (type() === \"date\") {\r\n                <mona-date-picker\r\n                    [ngModel]=\"dateFilterValues()[1]\"\r\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\r\n                    [format]=\"effectiveDateOptions().format\"\r\n                    [size]=\"size()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\r\n            }\r\n        }\r\n\r\n        @if (type() === \"boolean\") {\r\n            <mona-dropdown-list\r\n                [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n        }\r\n    </div>\r\n}\r\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\r\n    <button\r\n        monaButton\r\n        (click)=\"onFilterApply()\"\r\n        [look]=\"'primary'\"\r\n        [size]=\"size()\"\r\n        [rounded]=\"rounded()\"\r\n        [disabled]=\"applyDisabled()\">\r\n        Apply\r\n    </button>\r\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">Clear</button>\r\n</div>\r\n", dependencies: [{ kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "pipe", type: ValuelessOperatorPipe, name: "valuelessOperator" }, { kind: "pipe", type: OperatorFilterPipe, name: "operatorFilter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FilterMenuComponent, isStandalone: true, selector: "mona-filter-menu", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", field: "fieldChange", operators: "operatorsChange", type: "typeChange", value: "valueChange" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<div [class]=\"filterMenuItemClass()\">\n    @if (type() === \"string\") {\n        <mona-dropdown-list\n            [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-text-box\n            [ngModel]=\"stringFilterValues()[0]\"\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\n            [size]=\"size()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\n    }\n\n    @if (type() === \"number\") {\n        <mona-dropdown-list\n            [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-numeric-text-box\n            [ngModel]=\"numberFilterValues()[0]\"\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\n    }\n\n    @if (type() === \"date\") {\n        <mona-dropdown-list\n            [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n\n        @if (type() === \"date\") {\n            <mona-date-picker\n                [ngModel]=\"dateFilterValues()[0]\"\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\n                [format]=\"effectiveDateOptions().format\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\n        }\n    }\n\n    @if (type() === \"boolean\") {\n        <mona-dropdown-list\n            [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n    }\n</div>\n@if (firstFilterValid()) {\n    <div [class]=\"filterMenuItemClass()\">\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\n            @for (item of connectorDataItems; track item) {\n                <button\n                    monaButton\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\n                    {{ item.text }}\n                </button>\n            }\n        </mona-button-group>\n    </div>\n}\n@if (!!selectedConnectorItem()) {\n    <div [class]=\"filterMenuItemClass()\">\n        @if (type() === \"string\") {\n            <mona-dropdown-list\n                [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n            <mona-text-box\n                [ngModel]=\"stringFilterValues()[1]\"\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\n        }\n\n        @if (type() === \"number\") {\n            <mona-dropdown-list\n                [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            <mona-numeric-text-box\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"numberFilterValues()[1]\"\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\n        }\n\n        @if (type() === \"date\") {\n            <mona-dropdown-list\n                [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            @if (type() === \"date\") {\n                <mona-date-picker\n                    [ngModel]=\"dateFilterValues()[1]\"\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\n                    [format]=\"effectiveDateOptions().format\"\n                    [size]=\"size()\"\n                    [rounded]=\"rounded()\"\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\n            }\n        }\n\n        @if (type() === \"boolean\") {\n            <mona-dropdown-list\n                [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n        }\n    </div>\n}\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\n    <button\n        monaButton\n        (click)=\"onFilterApply()\"\n        [look]=\"'primary'\"\n        [size]=\"size()\"\n        [rounded]=\"rounded()\"\n        [disabled]=\"applyDisabled()\">\n        Apply\n    </button>\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">Clear</button>\n</div>\n", dependencies: [{ kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "pipe", type: ValuelessOperatorPipe, name: "valuelessOperator" }, { kind: "pipe", type: OperatorFilterPipe, name: "operatorFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
@@ -665,7 +635,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         OperatorFilterPipe
                     ], host: {
                         "[class]": "baseClass()"
-                    }, template: "<div [class]=\"filterMenuItemClass()\">\r\n    @if (type() === \"string\") {\r\n        <mona-dropdown-list\r\n            [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n        <mona-text-box\r\n            [ngModel]=\"stringFilterValues()[0]\"\r\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\r\n            [size]=\"size()\"\r\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\r\n    }\r\n\r\n    @if (type() === \"number\") {\r\n        <mona-dropdown-list\r\n            [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n        <mona-numeric-text-box\r\n            [ngModel]=\"numberFilterValues()[0]\"\r\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\r\n    }\r\n\r\n    @if (type() === \"date\") {\r\n        <mona-dropdown-list\r\n            [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n\r\n        @if (type() === \"date\") {\r\n            <mona-date-picker\r\n                [ngModel]=\"dateFilterValues()[0]\"\r\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\r\n                [format]=\"effectiveDateOptions().format\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\r\n        }\r\n    }\r\n\r\n    @if (type() === \"boolean\") {\r\n        <mona-dropdown-list\r\n            [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\r\n            textField=\"text\"\r\n            valueField=\"value\"\r\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\r\n    }\r\n</div>\r\n@if (firstFilterValid()) {\r\n    <div [class]=\"filterMenuItemClass()\">\r\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\r\n            @for (item of connectorDataItems; track item) {\r\n                <button\r\n                    monaButton\r\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\r\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\r\n                    {{ item.text }}\r\n                </button>\r\n            }\r\n        </mona-button-group>\r\n    </div>\r\n}\r\n@if (!!selectedConnectorItem()) {\r\n    <div [class]=\"filterMenuItemClass()\">\r\n        @if (type() === \"string\") {\r\n            <mona-dropdown-list\r\n                [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n            <mona-text-box\r\n                [ngModel]=\"stringFilterValues()[1]\"\r\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\r\n        }\r\n\r\n        @if (type() === \"number\") {\r\n            <mona-dropdown-list\r\n                [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n\r\n            <mona-numeric-text-box\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"numberFilterValues()[1]\"\r\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\r\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\r\n        }\r\n\r\n        @if (type() === \"date\") {\r\n            <mona-dropdown-list\r\n                [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n\r\n            @if (type() === \"date\") {\r\n                <mona-date-picker\r\n                    [ngModel]=\"dateFilterValues()[1]\"\r\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\r\n                    [format]=\"effectiveDateOptions().format\"\r\n                    [size]=\"size()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\r\n            }\r\n        }\r\n\r\n        @if (type() === \"boolean\") {\r\n            <mona-dropdown-list\r\n                [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\r\n                textField=\"text\"\r\n                valueField=\"value\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\r\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\r\n        }\r\n    </div>\r\n}\r\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\r\n    <button\r\n        monaButton\r\n        (click)=\"onFilterApply()\"\r\n        [look]=\"'primary'\"\r\n        [size]=\"size()\"\r\n        [rounded]=\"rounded()\"\r\n        [disabled]=\"applyDisabled()\">\r\n        Apply\r\n    </button>\r\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">Clear</button>\r\n</div>\r\n" }]
+                    }, template: "<div [class]=\"filterMenuItemClass()\">\n    @if (type() === \"string\") {\n        <mona-dropdown-list\n            [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-text-box\n            [ngModel]=\"stringFilterValues()[0]\"\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\n            [size]=\"size()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\n    }\n\n    @if (type() === \"number\") {\n        <mona-dropdown-list\n            [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-numeric-text-box\n            [ngModel]=\"numberFilterValues()[0]\"\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\n    }\n\n    @if (type() === \"date\") {\n        <mona-dropdown-list\n            [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n\n        @if (type() === \"date\") {\n            <mona-date-picker\n                [ngModel]=\"dateFilterValues()[0]\"\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\n                [format]=\"effectiveDateOptions().format\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\n        }\n    }\n\n    @if (type() === \"boolean\") {\n        <mona-dropdown-list\n            [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n    }\n</div>\n@if (firstFilterValid()) {\n    <div [class]=\"filterMenuItemClass()\">\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\n            @for (item of connectorDataItems; track item) {\n                <button\n                    monaButton\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\n                    {{ item.text }}\n                </button>\n            }\n        </mona-button-group>\n    </div>\n}\n@if (!!selectedConnectorItem()) {\n    <div [class]=\"filterMenuItemClass()\">\n        @if (type() === \"string\") {\n            <mona-dropdown-list\n                [data]=\"stringFilterMenuDataItems | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n            <mona-text-box\n                [ngModel]=\"stringFilterValues()[1]\"\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\n        }\n\n        @if (type() === \"number\") {\n            <mona-dropdown-list\n                [data]=\"numericFilterMenuDataItems | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            <mona-numeric-text-box\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"numberFilterValues()[1]\"\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\n        }\n\n        @if (type() === \"date\") {\n            <mona-dropdown-list\n                [data]=\"dateFilterMenuDataItems | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            @if (type() === \"date\") {\n                <mona-date-picker\n                    [ngModel]=\"dateFilterValues()[1]\"\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\n                    [format]=\"effectiveDateOptions().format\"\n                    [size]=\"size()\"\n                    [rounded]=\"rounded()\"\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\n            }\n        }\n\n        @if (type() === \"boolean\") {\n            <mona-dropdown-list\n                [data]=\"booleanFilterMenuDataItems | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n        }\n    </div>\n}\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\n    <button\n        monaButton\n        (click)=\"onFilterApply()\"\n        [look]=\"'primary'\"\n        [size]=\"size()\"\n        [rounded]=\"rounded()\"\n        [disabled]=\"applyDisabled()\">\n        Apply\n    </button>\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">Clear</button>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { apply: [{ type: i0.Output, args: ["apply"] }], dateOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateOptions", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }, { type: i0.Output, args: ["fieldChange"] }], operators: [{ type: i0.Input, args: [{ isSignal: true, alias: "operators", required: false }] }, { type: i0.Output, args: ["operatorsChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }, { type: i0.Output, args: ["typeChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*

package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-cell.component-B9SQH5N-.mjs → nanahoshi-mona-ui-grid-grid-footer-cell.component-B6FBLtrr.mjs}

@@ -2,7 +2,7 @@ import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, computed, input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { ImmutableDictionary } from '@mirei/ts-collections';
-import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs';
+import { c as GridService } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BRZUd8cE.mjs';
 
 class GridFooterCellComponent {
     constructor() {
@@ -77,24 +77,24 @@ class GridFooterCellComponent {
     }
     #gridService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFooterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridFooterCellComponent, isStandalone: true, selector: "mona-grid-footer-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, columnIndex: { classPropertyName: "columnIndex", publicName: "columnIndex", isSignal: true, isRequired: true, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-        @if (templateRef(); as templateRef) {
-            <ng-container [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="templateContext()"></ng-container>
-        } @else if (displayValue() != null) {
-            <span class="block truncate font-medium">{{ displayValue() }}</span>
-        }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridFooterCellComponent, isStandalone: true, selector: "mona-grid-footer-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, columnIndex: { classPropertyName: "columnIndex", publicName: "columnIndex", isSignal: true, isRequired: true, transformFunction: null }, groupKey: { classPropertyName: "groupKey", publicName: "groupKey", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @if (templateRef(); as templateRef) {
+            <ng-container [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="templateContext()"></ng-container>
+        } @else if (displayValue() != null) {
+            <span class="block truncate font-medium">{{ displayValue() }}</span>
+        }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridFooterCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "mona-grid-footer-cell",
-                    template: `
-        @if (templateRef(); as templateRef) {
-            <ng-container [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="templateContext()"></ng-container>
-        } @else if (displayValue() != null) {
-            <span class="block truncate font-medium">{{ displayValue() }}</span>
-        }
+                    template: `
+        @if (templateRef(); as templateRef) {
+            <ng-container [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="templateContext()"></ng-container>
+        } @else if (displayValue() != null) {
+            <span class="block truncate font-medium">{{ displayValue() }}</span>
+        }
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet]
@@ -102,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], columnIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnIndex", required: true }] }], groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }] } });
 
 export { GridFooterCellComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-B9SQH5N-.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-cell.component-B6FBLtrr.mjs.map