@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -40,11 +40,11 @@ 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 expansionPanelBaseVariants = cva(`
+        block w-full bg-background overflow-hidden
+        border border-border text-foreground
+        not-last:border-b-transparent not-last:rounded-b-none
+        not-first:rounded-t-none relative
     `, {
     variants: {
         rounded: {
@@ -55,18 +55,18 @@ 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 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
     `, {
     variants: {
         collapsed: {
@@ -79,8 +79,8 @@ const expansionPanelHeaderVariants = cva(`
         }
     }
 });
-const expansionPanelHeaderTitleVariants = cva(`
-        p-1 flex-1
+const expansionPanelHeaderTitleVariants = cva(`
+        p-1 flex-1
     `);
 const expansionPanelIconContainerVariants = cva(``, {
     variants: {
@@ -90,11 +90,11 @@ const expansionPanelIconContainerVariants = cva(``, {
         }
     }
 });
-const expansionPanelContentVariants = cva(`
-        text-foreground
-        grid
-        transition-[grid-template-rows] duration-300 ease-out
-        [&>div]:overflow-hidden
+const expansionPanelContentVariants = cva(`
+        text-foreground
+        grid
+        transition-[grid-template-rows] duration-300 ease-out
+        [&>div]:overflow-hidden
     `, {
     variants: {
         expanded: {
@@ -222,13 +222,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

@@ -16,13 +16,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const fieldsetBaseVariants = cva(`
-        block
+const fieldsetBaseVariants = cva(`
+        block
     `);
-const fieldsetVariants = cva(`
-        bg-background
-        border border-border
-        text-foreground
+const fieldsetVariants = cva(`
+        bg-background
+        border border-border
+        text-foreground
     `, {
     variants: {
         rounded: {
@@ -41,8 +41,8 @@ const fieldsetVariants = cva(`
         disabled: false
     }
 });
-const fieldsetLegendVariants = cva(`
-        ml-2
+const fieldsetLegendVariants = cva(`
+        ml-2
     `, {
     variants: {
         hasTemplate: {

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

@@ -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 filterMenuBaseVariants = cva(`
+        w-full flex flex-col
+        p-1 gap-2
+        bg-background-dark text-foreground border border-border
+        shadow-lg
     `, {
     variants: {
         rounded: {
@@ -239,14 +239,14 @@ const filterMenuBaseVariants = cva(`
         }
     }
 });
-const filterMenuItemVariants = cva(`
-        flex flex-col gap-1
-        [&>mona-button-group>button]:flex-1
+const filterMenuItemVariants = 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 filterMenuActionVariants = cva(`
+        flex flex-row
+        items-center justify-center
+        gap-1 [&>button]:flex-1
     `);
 
 const filterMenuBaseThemeVariants = (theme) => {
@@ -649,7 +649,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 +665,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-B2ETh-uI.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-T9Bj98kl.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-B2ETh-uI.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DlLwcCFT.mjs → nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DZk18LJC.mjs}

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { inject, computed, input, Directive } from '@angular/core';
 import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { v as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-C3eZIaJK.mjs';
+import { v as gridFooterTableCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-T9Bj98kl.mjs';
 
 class GridFooterTableCellDirective {
     constructor() {
@@ -39,4 +39,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { footerCellMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellMinWidth", required: false }] }], footerCellWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerCellWidth", required: false }] }], footerColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerColumn", required: false }] }] } });
 
 export { GridFooterTableCellDirective };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DlLwcCFT.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DZk18LJC.mjs.map

package/fesm2022/nanahoshi-mona-ui-grid-grid-list.component-C7WKhhig.mjs

@@ -0,0 +1,128 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, viewChild, computed, input, afterNextRender, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ImmutableList, ImmutableSet, span } from '@mirei/ts-collections';
+import { SlicePipe } from '@nanahoshi/mona-ui/common';
+import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { fromEvent } from 'rxjs';
+import { G as GridAddRowComponent, a as GridCellComponent, b as GridRowDirective, c as GridCellDirective, d as GridDetailRowDirective, e as GridDetailIndentCellDirective, f as GridDetailContentCellDirective, g as GridToggleComponent } from './nanahoshi-mona-ui-grid-grid-toggle.component-BRiY0CDX.mjs';
+import { GridFooterTableCellDirective } from './nanahoshi-mona-ui-grid-grid-footer-table-cell.directive-DZk18LJC.mjs';
+import { G as GridNavigationService, a as GridRowFlattenerService, g as gridListBaseThemeVariants, b as gridFooterTableRowThemeVariants, c as GridService, d as gridGroupRowThemeVariants, e as gridListTableThemeVariants, f as GridLogicalCellDirective, h as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-T9Bj98kl.mjs';
+import { GridFooterCellComponent } from './nanahoshi-mona-ui-grid-grid-footer-cell.component-B2ETh-uI.mjs';
+
+class GridListComponent {
+    #destroyRef;
+    #gridNavigationService;
+    #hostElementRef;
+    #rowFlattener;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#gridNavigationService = inject(GridNavigationService);
+        this.#hostElementRef = inject((ElementRef));
+        this.#rowFlattener = inject(GridRowFlattenerService);
+        this.#themeService = inject(ThemeService);
+        this.bodyTableElementRef = viewChild.required("bodyTable", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bodyTableElementRef" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridListBaseThemeVariants(theme)({ virtual: false });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.flattenedGroupedRows = computed(() => {
+            const groupColumns = this.gridService.groupColumns();
+            if (groupColumns.length === 0) {
+                return [];
+            }
+            const collapsedKeys = new Set(this.gridService.collapsedGroupKeys());
+            const groupAggregateDict = this.gridService.groupAggregateMap().toDictionary(e => e.key, e => e.value);
+            const showFooter = this.gridService.groupableOptions().showFooter;
+            return this.#rowFlattener.flatten(this.data(), groupColumns, collapsedKeys, showFooter, groupAggregateDict);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "flattenedGroupedRows" }] : /* istanbul ignore next */ []));
+        this.footerTableRowClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridFooterTableRowThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerTableRowClass" }] : /* istanbul ignore next */ []));
+        this.gridService = inject(GridService);
+        this.groupRowClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridGroupRowThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupRowClass" }] : /* istanbul ignore next */ []));
+        this.tableClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return gridListTableThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
+        this.columns = input(ImmutableList.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.data = input(ImmutableSet.create(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.span = span;
+        afterNextRender({
+            read: () => {
+                const bodyTableElement = this.bodyTableElementRef().nativeElement;
+                const bodyScrollElement = this.#hostElementRef.nativeElement;
+                this.gridService.bodyTableElement.set(bodyTableElement);
+                this.gridService.bodyScrollElement.set(bodyScrollElement);
+                this.setSubscriptions();
+                this.#destroyRef.onDestroy(() => {
+                    if (this.gridService.bodyTableElement() === bodyTableElement) {
+                        this.gridService.bodyTableElement.set(null);
+                    }
+                    if (this.gridService.bodyScrollElement() === bodyScrollElement) {
+                        this.gridService.bodyScrollElement.set(null);
+                    }
+                });
+            }
+        });
+    }
+    onGridRowClick(event, row) {
+        this.gridService.handleRowClick(event, row);
+    }
+    onGroupExpandChange(groupKey) {
+        this.gridService.toggleGroupCollapse(groupKey);
+    }
+    onToggleDetailClick(row) {
+        const expanded = this.gridService.isRowExpanded(row);
+        this.gridService.setRowExpanded(row, !expanded);
+    }
+    setSubscriptions() {
+        fromEvent(this.#hostElementRef.nativeElement, "focus")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => {
+            this.#gridNavigationService.focusActiveCellOrFirstHeader();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridListComponent, isStandalone: true, selector: "mona-grid-list", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "bodyTableElementRef", first: true, predicate: ["bodyTable"], descendants: true, isSignal: true }], ngImport: i0, template: "<table #bodyTable [class]=\"tableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n    <colgroup>\n        @for (_ of gridService.groupColumns(); track $index) {\n            <col [style.width.px]=\"gridService.groupColumnWidth\" />\n        }\n        @if (gridService.masterDetailTemplate()) {\n            <col [style.width.px]=\"gridService.groupColumnWidth\" />\n        }\n        @for (col of columns(); track $index) {\n            <col [style.width.px]=\"col.calculatedWidth\" />\n        }\n    </colgroup>\n    <tbody role=\"rowgroup\">\n        @if (gridService.addRowVisible()) {\n            <tr monaGridAddRow [columns]=\"columns()\"></tr>\n        }\n        @if (gridService.groupColumns().length === 0) {\n            @for (row of data(); track row.uid) {\n                @let rowIndex = $index;\n                <tr\n                    (click)=\"onGridRowClick($event, row)\"\n                    monaGridRow\n                    [index]=\"rowIndex\"\n                    [row]=\"row\"\n                    #gridRow=\"monaGridRow\"\n                    #rowElement>\n                    @if (gridService.masterDetailTemplate()) {\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"0\"\n                            [masterDetailToggle]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'detail'\"\n                            [colIndex]=\"0\"\n                            [firstInRow]=\"true\"\n                            [lastInRow]=\"columns().length === 0\"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"\n                            [attr.colspan]=\"1\">\n                            <span class=\"flex h-full w-full items-stretch justify-center\">\n                                <mona-grid-toggle\n                                    [expanded]=\"gridRow.expanded()\"\n                                    [type]=\"'detail'\"\n                                    [width]=\"gridService.detailColumnWidth\"\n                                    (expandedChange)=\"onToggleDetailClick(row)\"></mona-grid-toggle>\n                            </span>\n                        </td>\n                    }\n                    @for (column of columns(); track $index) {\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [dataCell]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"column.kind\"\n                            [colIndex]=\"colIndex\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [firstInRow]=\"colIndex === 0\"\n                            [lastInRow]=\"colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 1)\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            (edit)=\"gridCell.handleLogicalCellEnter()\">\n                            <mona-grid-cell #gridCell [column]=\"column\" [row]=\"row\"></mona-grid-cell>\n                        </td>\n                    }\n                    @if (gridService.contextMenuItems().length !== 0) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"contextMenuTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.data, element: rowElement, index: $index }\">\n                        </ng-container>\n                    }\n                </tr>\n                @if (gridRow.expanded()) {\n                    <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"0\"\n                            [indentCell]=\"true\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                        <td monaGridCell [masterDetailContent]=\"true\" [attr.colspan]=\"columns().length\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row.data }\"></ng-container>\n                        </td>\n                    </tr>\n                }\n            }\n        } @else {\n            @for (viewRow of flattenedGroupedRows(); track $index) {\n                @let rowIndex = $index;\n                @if (viewRow.type === \"group\") {\n                    @let isCollapsed = gridService.isGroupCollapsed(viewRow.groupKey);\n                    @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n\n                    <tr\n                        [class]=\"groupRowClass()\"\n                        role=\"row\"\n                        [attr.aria-level]=\"viewRow.depth + 1\"\n                        [attr.aria-expanded]=\"!isCollapsed\">\n                        @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth; track $index) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [grouped]=\"true\"\n                                [indentCell]=\"true\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                        }\n                        @let colspan =\n                            columns().length +\n                            gridService.groupColumns().length +\n                            (gridService.masterDetailTemplate() ? 1 : 0) -\n                            viewRow.depth +\n                            1;\n\n                        <td\n                            monaGridCell\n                            monaGridLogicalCell\n                            [cellKind]=\"'group'\"\n                            [rowIndex]=\"rowIndex\"\n                            [colIndex]=\"0\"\n                            [section]=\"'body'\"\n                            [grouped]=\"true\"\n                            [groupHeader]=\"true\"\n                            [prevRowType]=\"prevRow?.type\"\n                            [firstInRow]=\"true\"\n                            [lastInRow]=\"columns().length === 0\"\n                            [groupKey]=\"viewRow.groupKey\"\n                            (toggle)=\"onGroupExpandChange(viewRow.groupKey)\"\n                            [attr.colspan]=\"colspan\">\n                            <p class=\"flex h-full items-center text-sm whitespace-nowrap\">\n                                <mona-grid-toggle\n                                    [expanded]=\"!isCollapsed\"\n                                    [width]=\"gridService.groupColumnWidth\"\n                                    [type]=\"'group'\"\n                                    (expandedChange)=\"onGroupExpandChange(viewRow.groupKey)\"></mona-grid-toggle>\n                                <span class=\"font-bold\">{{ viewRow.title }}: {{ viewRow.groupValue }}</span>\n                            </p>\n                        </td>\n                    </tr>\n                } @else if (viewRow.type === \"groupFooter\") {\n                    <tr role=\"row\" [class]=\"footerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                        }\n                        @for (column of columns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [footerColumn]=\"column\">\n                                <mona-grid-footer-cell\n                                    [column]=\"column\"\n                                    [columnIndex]=\"$index\"\n                                    [groupKey]=\"viewRow.groupAggregate.groupKey\"></mona-grid-footer-cell>\n                            </td>\n                        }\n                    </tr>\n                } @else {\n                    @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n                    @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n                    <tr\n                        (click)=\"onGridRowClick($event, viewRow.row)\"\n                        monaGridRow\n                        [index]=\"rowIndex\"\n                        [row]=\"viewRow.row\"\n                        #gridRow=\"monaGridRow\"\n                        #rowElement>\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [grouped]=\"true\"\n                                [indentCell]=\"true\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                        }\n\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridCell\n                                monaGridLogicalCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                [grouped]=\"true\"\n                                [masterDetailToggle]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [cellKind]=\"'detail'\"\n                                [colIndex]=\"0\"\n                                [firstInRow]=\"true\"\n                                [lastInRow]=\"columns().length === 0\"\n                                [style.width.px]=\"gridService.detailColumnWidth\">\n                                <span class=\"flex h-full w-full items-stretch justify-center\">\n                                    <mona-grid-toggle\n                                        [expanded]=\"gridRow.expanded()\"\n                                        [type]=\"'detail'\"\n                                        [width]=\"gridService.detailColumnWidth\"\n                                        (expandedChange)=\"onToggleDetailClick(viewRow.row)\"></mona-grid-toggle>\n                                </span>\n                            </td>\n                        }\n                        @for (column of columns(); track $index) {\n                            @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [grouped]=\"true\"\n                                [dataCell]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                monaGridLogicalCell\n                                [cellKind]=\"column.kind\"\n                                [colIndex]=\"colIndex\"\n                                [columnId]=\"column.id\"\n                                [firstInRow]=\"colIndex === 0\"\n                                [lastInRow]=\"\n                                    colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n                                \"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                (edit)=\"gridCell.handleLogicalCellEnter()\">\n                                <mona-grid-cell #gridCell [column]=\"column\" [row]=\"viewRow.row\"></mona-grid-cell>\n                            </td>\n                        }\n                        @if (gridService.contextMenuItems().length !== 0) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"contextMenuTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: viewRow.row.data,\n                                    element: rowElement,\n                                    index: rowIndex\n                                }\">\n                            </ng-container>\n                        }\n                    </tr>\n                    @if (gridRow.expanded()) {\n                        <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                            @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth + 1; track $index) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                            }\n                            @let colspan = columns().length + gridService.groupColumns().length - 1;\n                            <td\n                                monaGridDetailIndentCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"(viewRow.depth + 1) * gridService.groupColumnWidth\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                            <td monaGridDetailContentCell [nextRowType]=\"nextRow?.type\" [attr.colspan]=\"colspan\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: viewRow.row.data }\"></ng-container>\n                            </td>\n                        </tr>\n                    }\n                }\n            }\n        }\n    </tbody>\n</table>\n\n<ng-template let-rowData let-element=\"element\" let-rowIndex=\"index\" #contextMenuTemplate>\n    <mona-contextmenu [target]=\"element\" [items]=\"gridService.contextMenuItems()\"></mona-contextmenu>\n    <!--    [context]=\"{rowData, element, rowIndex}\"-->\n</ng-template>\n", dependencies: [{ kind: "component", type: GridAddRowComponent, selector: "tr[monaGridAddRow]", inputs: ["columns"] }, { kind: "component", type: GridCellComponent, selector: "mona-grid-cell", inputs: ["column", "row"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ContextMenuComponent, selector: "mona-contextmenu", inputs: ["ariaLabel", "items", "minWidth", "rounded", "size", "target", "width"], outputs: ["menuClick"] }, { kind: "directive", type: GridRowDirective, selector: "tr[monaGridRow]", inputs: ["index", "row"], exportAs: ["monaGridRow"] }, { kind: "directive", type: GridCellDirective, selector: "td[monaGridCell]", inputs: ["dataCell", "groupHeader", "groupToggle", "grouped", "indentCell", "lastInRow", "masterDetailContent", "masterDetailToggle", "nextRowType", "prevRowType"] }, { kind: "directive", type: GridDetailRowDirective, selector: "tr[monaGridDetailRow]" }, { kind: "directive", type: GridDetailIndentCellDirective, selector: "td[monaGridDetailIndentCell]", inputs: ["nextRowType"] }, { kind: "directive", type: GridDetailContentCellDirective, selector: "td[monaGridDetailContentCell]", inputs: ["nextRowType"] }, { kind: "component", type: GridToggleComponent, selector: "mona-grid-toggle", inputs: ["expanded", "type", "width"], outputs: ["expandedChange"] }, { kind: "directive", type: GridFooterTableCellDirective, selector: "td[monaGridFooterTableCell]", inputs: ["footerCellMinWidth", "footerCellWidth", "footerColumn"] }, { kind: "directive", type: GridLogicalCellDirective, selector: "td[monaGridLogicalCell], th[monaGridLogicalCell]", inputs: ["cellKind", "colIndex", "columnId", "firstInRow", "groupHeader", "groupKey", "lastInRow", "rowIndex", "rowUid", "section"], outputs: ["edit", "toggle"] }, { kind: "directive", type: GridLockedCellDirective, selector: "td[monaGridLockedCell], th[monaGridLockedCell]", inputs: ["column", "lockedCellHeader", "lockedStructuralOffset"] }, { kind: "component", type: GridFooterCellComponent, selector: "mona-grid-footer-cell", inputs: ["column", "columnIndex", "groupKey"] }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-grid-list", imports: [
+                        GridAddRowComponent,
+                        GridCellComponent,
+                        NgTemplateOutlet,
+                        ContextMenuComponent,
+                        GridRowDirective,
+                        GridCellDirective,
+                        GridDetailRowDirective,
+                        GridDetailIndentCellDirective,
+                        GridDetailContentCellDirective,
+                        SlicePipe,
+                        GridToggleComponent,
+                        GridFooterTableCellDirective,
+                        GridLogicalCellDirective,
+                        GridLockedCellDirective,
+                        GridFooterCellComponent
+                    ], host: {
+                        "[class]": "baseClass()"
+                    }, template: "<table #bodyTable [class]=\"tableClass()\" [style.width.px]=\"gridService.tableWidth()\">\n    <colgroup>\n        @for (_ of gridService.groupColumns(); track $index) {\n            <col [style.width.px]=\"gridService.groupColumnWidth\" />\n        }\n        @if (gridService.masterDetailTemplate()) {\n            <col [style.width.px]=\"gridService.groupColumnWidth\" />\n        }\n        @for (col of columns(); track $index) {\n            <col [style.width.px]=\"col.calculatedWidth\" />\n        }\n    </colgroup>\n    <tbody role=\"rowgroup\">\n        @if (gridService.addRowVisible()) {\n            <tr monaGridAddRow [columns]=\"columns()\"></tr>\n        }\n        @if (gridService.groupColumns().length === 0) {\n            @for (row of data(); track row.uid) {\n                @let rowIndex = $index;\n                <tr\n                    (click)=\"onGridRowClick($event, row)\"\n                    monaGridRow\n                    [index]=\"rowIndex\"\n                    [row]=\"row\"\n                    #gridRow=\"monaGridRow\"\n                    #rowElement>\n                    @if (gridService.masterDetailTemplate()) {\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"0\"\n                            [masterDetailToggle]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"'detail'\"\n                            [colIndex]=\"0\"\n                            [firstInRow]=\"true\"\n                            [lastInRow]=\"columns().length === 0\"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [style.width.px]=\"gridService.detailColumnWidth\"\n                            [attr.colspan]=\"1\">\n                            <span class=\"flex h-full w-full items-stretch justify-center\">\n                                <mona-grid-toggle\n                                    [expanded]=\"gridRow.expanded()\"\n                                    [type]=\"'detail'\"\n                                    [width]=\"gridService.detailColumnWidth\"\n                                    (expandedChange)=\"onToggleDetailClick(row)\"></mona-grid-toggle>\n                            </span>\n                        </td>\n                    }\n                    @for (column of columns(); track $index) {\n                        @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [column]=\"column\"\n                            [dataCell]=\"true\"\n                            monaGridLogicalCell\n                            [cellKind]=\"column.kind\"\n                            [colIndex]=\"colIndex\"\n                            [columnId]=\"column.id\"\n                            [rowIndex]=\"rowIndex\"\n                            [rowUid]=\"row.uid\"\n                            [section]=\"'body'\"\n                            [firstInRow]=\"colIndex === 0\"\n                            [lastInRow]=\"colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 1)\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"column.calculatedWidth\"\n                            [style.min-width.px]=\"column.minWidth\"\n                            (edit)=\"gridCell.handleLogicalCellEnter()\">\n                            <mona-grid-cell #gridCell [column]=\"column\" [row]=\"row\"></mona-grid-cell>\n                        </td>\n                    }\n                    @if (gridService.contextMenuItems().length !== 0) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"contextMenuTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.data, element: rowElement, index: $index }\">\n                        </ng-container>\n                    }\n                </tr>\n                @if (gridRow.expanded()) {\n                    <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                        <td\n                            monaGridCell\n                            monaGridLockedCell\n                            [lockedStructuralOffset]=\"0\"\n                            [indentCell]=\"true\"\n                            [attr.colspan]=\"1\"\n                            [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                        <td monaGridCell [masterDetailContent]=\"true\" [attr.colspan]=\"columns().length\">\n                            <ng-container\n                                [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                [ngTemplateOutletContext]=\"{ $implicit: row.data }\"></ng-container>\n                        </td>\n                    </tr>\n                }\n            }\n        } @else {\n            @for (viewRow of flattenedGroupedRows(); track $index) {\n                @let rowIndex = $index;\n                @if (viewRow.type === \"group\") {\n                    @let isCollapsed = gridService.isGroupCollapsed(viewRow.groupKey);\n                    @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n\n                    <tr\n                        [class]=\"groupRowClass()\"\n                        role=\"row\"\n                        [attr.aria-level]=\"viewRow.depth + 1\"\n                        [attr.aria-expanded]=\"!isCollapsed\">\n                        @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth; track $index) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [grouped]=\"true\"\n                                [indentCell]=\"true\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                        }\n                        @let colspan =\n                            columns().length +\n                            gridService.groupColumns().length +\n                            (gridService.masterDetailTemplate() ? 1 : 0) -\n                            viewRow.depth +\n                            1;\n\n                        <td\n                            monaGridCell\n                            monaGridLogicalCell\n                            [cellKind]=\"'group'\"\n                            [rowIndex]=\"rowIndex\"\n                            [colIndex]=\"0\"\n                            [section]=\"'body'\"\n                            [grouped]=\"true\"\n                            [groupHeader]=\"true\"\n                            [prevRowType]=\"prevRow?.type\"\n                            [firstInRow]=\"true\"\n                            [lastInRow]=\"columns().length === 0\"\n                            [groupKey]=\"viewRow.groupKey\"\n                            (toggle)=\"onGroupExpandChange(viewRow.groupKey)\"\n                            [attr.colspan]=\"colspan\">\n                            <p class=\"flex h-full items-center text-sm whitespace-nowrap\">\n                                <mona-grid-toggle\n                                    [expanded]=\"!isCollapsed\"\n                                    [width]=\"gridService.groupColumnWidth\"\n                                    [type]=\"'group'\"\n                                    (expandedChange)=\"onGroupExpandChange(viewRow.groupKey)\"></mona-grid-toggle>\n                                <span class=\"font-bold\">{{ viewRow.title }}: {{ viewRow.groupValue }}</span>\n                            </p>\n                        </td>\n                    </tr>\n                } @else if (viewRow.type === \"groupFooter\") {\n                    <tr role=\"row\" [class]=\"footerTableRowClass()\">\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [footerCellWidth]=\"gridService.groupColumnWidth\"></td>\n                        }\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                [footerCellWidth]=\"gridService.detailColumnWidth\"></td>\n                        }\n                        @for (column of columns(); track $index) {\n                            <td\n                                monaGridFooterTableCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [lockedCellHeader]=\"true\"\n                                [footerColumn]=\"column\">\n                                <mona-grid-footer-cell\n                                    [column]=\"column\"\n                                    [columnIndex]=\"$index\"\n                                    [groupKey]=\"viewRow.groupAggregate.groupKey\"></mona-grid-footer-cell>\n                            </td>\n                        }\n                    </tr>\n                } @else {\n                    @let nextRow = flattenedGroupedRows()[rowIndex + 1];\n                    @let prevRow = flattenedGroupedRows()[rowIndex - 1];\n                    <tr\n                        (click)=\"onGridRowClick($event, viewRow.row)\"\n                        monaGridRow\n                        [index]=\"rowIndex\"\n                        [row]=\"viewRow.row\"\n                        #gridRow=\"monaGridRow\"\n                        #rowElement>\n                        @for (_ of gridService.groupColumns(); track $index) {\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [lockedCellHeader]=\"true\"\n                                [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                [grouped]=\"true\"\n                                [indentCell]=\"true\"\n                                [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                        }\n\n                        @if (gridService.masterDetailTemplate()) {\n                            <td\n                                monaGridCell\n                                monaGridLogicalCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"\n                                    gridService.groupColumns().length * gridService.groupColumnWidth\n                                \"\n                                [grouped]=\"true\"\n                                [masterDetailToggle]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [cellKind]=\"'detail'\"\n                                [colIndex]=\"0\"\n                                [firstInRow]=\"true\"\n                                [lastInRow]=\"columns().length === 0\"\n                                [style.width.px]=\"gridService.detailColumnWidth\">\n                                <span class=\"flex h-full w-full items-stretch justify-center\">\n                                    <mona-grid-toggle\n                                        [expanded]=\"gridRow.expanded()\"\n                                        [type]=\"'detail'\"\n                                        [width]=\"gridService.detailColumnWidth\"\n                                        (expandedChange)=\"onToggleDetailClick(viewRow.row)\"></mona-grid-toggle>\n                                </span>\n                            </td>\n                        }\n                        @for (column of columns(); track $index) {\n                            @let colIndex = gridService.masterDetailTemplate() ? $index + 1 : $index;\n                            <td\n                                monaGridCell\n                                monaGridLockedCell\n                                [column]=\"column\"\n                                [grouped]=\"true\"\n                                [dataCell]=\"true\"\n                                [prevRowType]=\"prevRow?.type\"\n                                [nextRowType]=\"nextRow?.type\"\n                                monaGridLogicalCell\n                                [cellKind]=\"column.kind\"\n                                [colIndex]=\"colIndex\"\n                                [columnId]=\"column.id\"\n                                [firstInRow]=\"colIndex === 0\"\n                                [lastInRow]=\"\n                                    colIndex === columns().length - (gridService.masterDetailTemplate() ? 0 : 1)\n                                \"\n                                [rowIndex]=\"rowIndex\"\n                                [rowUid]=\"viewRow.row.uid\"\n                                [section]=\"'body'\"\n                                [style.width.px]=\"column.calculatedWidth\"\n                                [style.min-width.px]=\"column.minWidth\"\n                                (edit)=\"gridCell.handleLogicalCellEnter()\">\n                                <mona-grid-cell #gridCell [column]=\"column\" [row]=\"viewRow.row\"></mona-grid-cell>\n                            </td>\n                        }\n                        @if (gridService.contextMenuItems().length !== 0) {\n                            <ng-container\n                                [ngTemplateOutlet]=\"contextMenuTemplate\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: viewRow.row.data,\n                                    element: rowElement,\n                                    index: rowIndex\n                                }\">\n                            </ng-container>\n                        }\n                    </tr>\n                    @if (gridRow.expanded()) {\n                        <tr monaGridDetailRow [style.width.px]=\"gridService.masterDetailRowWidth()\">\n                            @for (_ of gridService.groupColumns() | monaSlice: 0 : viewRow.depth + 1; track $index) {\n                                <td\n                                    monaGridCell\n                                    monaGridLockedCell\n                                    [lockedCellHeader]=\"true\"\n                                    [lockedStructuralOffset]=\"$index * gridService.groupColumnWidth\"\n                                    [grouped]=\"true\"\n                                    [indentCell]=\"true\"\n                                    [attr.colspan]=\"1\"\n                                    [style.width.px]=\"gridService.groupColumnWidth\"></td>\n                            }\n                            @let colspan = columns().length + gridService.groupColumns().length - 1;\n                            <td\n                                monaGridDetailIndentCell\n                                monaGridLockedCell\n                                [lockedStructuralOffset]=\"(viewRow.depth + 1) * gridService.groupColumnWidth\"\n                                [nextRowType]=\"nextRow?.type\"\n                                [attr.colspan]=\"1\"\n                                [style.width.px]=\"gridService.masterDetailEmptyCellWidth()\"></td>\n                            <td monaGridDetailContentCell [nextRowType]=\"nextRow?.type\" [attr.colspan]=\"colspan\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"gridService.masterDetailTemplate()\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: viewRow.row.data }\"></ng-container>\n                            </td>\n                        </tr>\n                    }\n                }\n            }\n        }\n    </tbody>\n</table>\n\n<ng-template let-rowData let-element=\"element\" let-rowIndex=\"index\" #contextMenuTemplate>\n    <mona-contextmenu [target]=\"element\" [items]=\"gridService.contextMenuItems()\"></mona-contextmenu>\n    <!--    [context]=\"{rowData, element, rowIndex}\"-->\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+
+export { GridListComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-C7WKhhig.mjs.map