@masterteam/data-grid 0.0.1 → 0.0.2

package/fesm2022/masterteam-data-grid.mjs

@@ -4195,7 +4195,7 @@ class Sparkline {
         this.tooltip?.hide();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Sparkline, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Sparkline, isStandalone: true, selector: "mt-grid-sparkline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()" }, classAttribute: "mt-grid-sparkline" }, ngImport: i0, template: "@if (width() > 0 && height() > 0) {\n  @let g = geometry();\n  <svg\n    class=\"mt-grid-sparkline-svg mtg:block mtg:overflow-visible\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    @switch (type()) {\n      @case (\"column\") {\n        @for (bar of g.bars; track bar.index) {\n          <rect\n            class=\"mt-grid-sparkline-bar\"\n            [class.mt-grid-sparkline-highlight]=\"bar.index === hover()\"\n            [attr.x]=\"bar.x\"\n            [attr.y]=\"bar.y\"\n            [attr.width]=\"bar.w\"\n            [attr.height]=\"bar.h\"\n            [attr.fill]=\"stroke()\"\n          />\n        }\n      }\n      @case (\"bar\") {\n        @for (bar of g.bars; track bar.index) {\n          <rect\n            class=\"mt-grid-sparkline-bar\"\n            [class.mt-grid-sparkline-highlight]=\"bar.index === hover()\"\n            [attr.x]=\"bar.x\"\n            [attr.y]=\"bar.y\"\n            [attr.width]=\"bar.w\"\n            [attr.height]=\"bar.h\"\n            [attr.fill]=\"stroke()\"\n          />\n        }\n      }\n      @default {\n        @if (type() === \"area\" && g.area) {\n          <path\n            class=\"mt-grid-sparkline-area\"\n            [attr.d]=\"g.area\"\n            [attr.fill]=\"fill()\"\n          />\n        }\n        @if (g.path) {\n          <path\n            class=\"mt-grid-sparkline-line\"\n            [attr.d]=\"g.path\"\n            fill=\"none\"\n            [attr.stroke]=\"stroke()\"\n            [attr.stroke-width]=\"strokeWidth()\"\n          />\n        }\n        @if (hoverPoint(); as point) {\n          <circle\n            class=\"mt-grid-sparkline-marker\"\n            [attr.cx]=\"point.x\"\n            [attr.cy]=\"point.y\"\n            r=\"3\"\n            [attr.fill]=\"stroke()\"\n          />\n        }\n      }\n    }\n  </svg>\n}\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;overflow:hidden;line-height:0}.mt-grid-sparkline-line,.mt-grid-sparkline-area,.mt-grid-sparkline-bar{vector-effect:non-scaling-stroke}.mt-grid-sparkline-bar.mt-grid-sparkline-highlight{opacity:.7}.mt-grid-sparkline-marker{stroke:var(--mt-grid-background);stroke-width:1.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: Sparkline, isStandalone: true, selector: "mt-grid-sparkline", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointermove": "onPointerMove($event)", "pointerleave": "onPointerLeave()" }, classAttribute: "mt-grid-sparkline" }, ngImport: i0, template: "@if (width() > 0 && height() > 0) {\r\n  @let g = geometry();\r\n  <svg\r\n    class=\"mt-grid-sparkline-svg mtg:block mtg:overflow-visible\"\r\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\r\n    [attr.width]=\"width()\"\r\n    [attr.height]=\"height()\"\r\n    aria-hidden=\"true\"\r\n    focusable=\"false\"\r\n  >\r\n    @switch (type()) {\r\n      @case (\"column\") {\r\n        @for (bar of g.bars; track bar.index) {\r\n          <rect\r\n            class=\"mt-grid-sparkline-bar\"\r\n            [class.mt-grid-sparkline-highlight]=\"bar.index === hover()\"\r\n            [attr.x]=\"bar.x\"\r\n            [attr.y]=\"bar.y\"\r\n            [attr.width]=\"bar.w\"\r\n            [attr.height]=\"bar.h\"\r\n            [attr.fill]=\"stroke()\"\r\n          />\r\n        }\r\n      }\r\n      @case (\"bar\") {\r\n        @for (bar of g.bars; track bar.index) {\r\n          <rect\r\n            class=\"mt-grid-sparkline-bar\"\r\n            [class.mt-grid-sparkline-highlight]=\"bar.index === hover()\"\r\n            [attr.x]=\"bar.x\"\r\n            [attr.y]=\"bar.y\"\r\n            [attr.width]=\"bar.w\"\r\n            [attr.height]=\"bar.h\"\r\n            [attr.fill]=\"stroke()\"\r\n          />\r\n        }\r\n      }\r\n      @default {\r\n        @if (type() === \"area\" && g.area) {\r\n          <path\r\n            class=\"mt-grid-sparkline-area\"\r\n            [attr.d]=\"g.area\"\r\n            [attr.fill]=\"fill()\"\r\n          />\r\n        }\r\n        @if (g.path) {\r\n          <path\r\n            class=\"mt-grid-sparkline-line\"\r\n            [attr.d]=\"g.path\"\r\n            fill=\"none\"\r\n            [attr.stroke]=\"stroke()\"\r\n            [attr.stroke-width]=\"strokeWidth()\"\r\n          />\r\n        }\r\n        @if (hoverPoint(); as point) {\r\n          <circle\r\n            class=\"mt-grid-sparkline-marker\"\r\n            [attr.cx]=\"point.x\"\r\n            [attr.cy]=\"point.y\"\r\n            r=\"3\"\r\n            [attr.fill]=\"stroke()\"\r\n          />\r\n        }\r\n      }\r\n    }\r\n  </svg>\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;overflow:hidden;line-height:0}.mt-grid-sparkline-line,.mt-grid-sparkline-area,.mt-grid-sparkline-bar{vector-effect:non-scaling-stroke}.mt-grid-sparkline-bar.mt-grid-sparkline-highlight{opacity:.7}.mt-grid-sparkline-marker{stroke:var(--mt-grid-background);stroke-width:1.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Sparkline, decorators: [{
             type: Component,
@@ -4203,7 +4203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         class: 'mt-grid-sparkline',
                         '(pointermove)': 'onPointerMove($event)',
                         '(pointerleave)': 'onPointerLeave()',
-                    }, template: "@if (width() > 0 && height() > 0) {\n  @let g = geometry();\n  <svg\n    class=\"mt-grid-sparkline-svg mtg:block mtg:overflow-visible\"\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    aria-hidden=\"true\"\n    focusable=\"false\"\n  >\n    @switch (type()) {\n      @case (\"column\") {\n        @for (bar of g.bars; track bar.index) {\n          <rect\n            class=\"mt-grid-sparkline-bar\"\n            [class.mt-grid-sparkline-highlight]=\"bar.index === hover()\"\n            [attr.x]=\"bar.x\"\n            [attr.y]=\"bar.y\"\n            [attr.width]=\"bar.w\"\n            [attr.height]=\"bar.h\"\n            [attr.fill]=\"stroke()\"\n          />\n        }\n      }\n      @case (\"bar\") {\n        @for (bar of g.bars; track bar.index) {\n          <rect\n            class=\"mt-grid-sparkline-bar\"\n            [class.mt-grid-sparkline-highlight]=\"bar.index === hover()\"\n            [attr.x]=\"bar.x\"\n            [attr.y]=\"bar.y\"\n            [attr.width]=\"bar.w\"\n            [attr.height]=\"bar.h\"\n            [attr.fill]=\"stroke()\"\n          />\n        }\n      }\n      @default {\n        @if (type() === \"area\" && g.area) {\n          <path\n            class=\"mt-grid-sparkline-area\"\n            [attr.d]=\"g.area\"\n            [attr.fill]=\"fill()\"\n          />\n        }\n        @if (g.path) {\n          <path\n            class=\"mt-grid-sparkline-line\"\n            [attr.d]=\"g.path\"\n            fill=\"none\"\n            [attr.stroke]=\"stroke()\"\n            [attr.stroke-width]=\"strokeWidth()\"\n          />\n        }\n        @if (hoverPoint(); as point) {\n          <circle\n            class=\"mt-grid-sparkline-marker\"\n            [attr.cx]=\"point.x\"\n            [attr.cy]=\"point.y\"\n            r=\"3\"\n            [attr.fill]=\"stroke()\"\n          />\n        }\n      }\n    }\n  </svg>\n}\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;overflow:hidden;line-height:0}.mt-grid-sparkline-line,.mt-grid-sparkline-area,.mt-grid-sparkline-bar{vector-effect:non-scaling-stroke}.mt-grid-sparkline-bar.mt-grid-sparkline-highlight{opacity:.7}.mt-grid-sparkline-marker{stroke:var(--mt-grid-background);stroke-width:1.5}\n"] }]
+                    }, template: "@if (width() > 0 && height() > 0) {\r\n  @let g = geometry();\r\n  <svg\r\n    class=\"mt-grid-sparkline-svg mtg:block mtg:overflow-visible\"\r\n    [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\r\n    [attr.width]=\"width()\"\r\n    [attr.height]=\"height()\"\r\n    aria-hidden=\"true\"\r\n    focusable=\"false\"\r\n  >\r\n    @switch (type()) {\r\n      @case (\"column\") {\r\n        @for (bar of g.bars; track bar.index) {\r\n          <rect\r\n            class=\"mt-grid-sparkline-bar\"\r\n            [class.mt-grid-sparkline-highlight]=\"bar.index === hover()\"\r\n            [attr.x]=\"bar.x\"\r\n            [attr.y]=\"bar.y\"\r\n            [attr.width]=\"bar.w\"\r\n            [attr.height]=\"bar.h\"\r\n            [attr.fill]=\"stroke()\"\r\n          />\r\n        }\r\n      }\r\n      @case (\"bar\") {\r\n        @for (bar of g.bars; track bar.index) {\r\n          <rect\r\n            class=\"mt-grid-sparkline-bar\"\r\n            [class.mt-grid-sparkline-highlight]=\"bar.index === hover()\"\r\n            [attr.x]=\"bar.x\"\r\n            [attr.y]=\"bar.y\"\r\n            [attr.width]=\"bar.w\"\r\n            [attr.height]=\"bar.h\"\r\n            [attr.fill]=\"stroke()\"\r\n          />\r\n        }\r\n      }\r\n      @default {\r\n        @if (type() === \"area\" && g.area) {\r\n          <path\r\n            class=\"mt-grid-sparkline-area\"\r\n            [attr.d]=\"g.area\"\r\n            [attr.fill]=\"fill()\"\r\n          />\r\n        }\r\n        @if (g.path) {\r\n          <path\r\n            class=\"mt-grid-sparkline-line\"\r\n            [attr.d]=\"g.path\"\r\n            fill=\"none\"\r\n            [attr.stroke]=\"stroke()\"\r\n            [attr.stroke-width]=\"strokeWidth()\"\r\n          />\r\n        }\r\n        @if (hoverPoint(); as point) {\r\n          <circle\r\n            class=\"mt-grid-sparkline-marker\"\r\n            [attr.cx]=\"point.x\"\r\n            [attr.cy]=\"point.y\"\r\n            r=\"3\"\r\n            [attr.fill]=\"stroke()\"\r\n          />\r\n        }\r\n      }\r\n    }\r\n  </svg>\r\n}\r\n", styles: [":host{display:block;width:100%;height:100%;min-width:0;overflow:hidden;line-height:0}.mt-grid-sparkline-line,.mt-grid-sparkline-area,.mt-grid-sparkline-bar{vector-effect:non-scaling-stroke}.mt-grid-sparkline-bar.mt-grid-sparkline-highlight{opacity:.7}.mt-grid-sparkline-marker{stroke:var(--mt-grid-background);stroke-width:1.5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 /** How long the change delta and the value highlight stay (the reference flashes briefly; unobserved). */
@@ -5305,11 +5305,11 @@ class CellEditor {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CellEditor, isStandalone: true, selector: "mt-grid-cell-editor", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, startKey: { classPropertyName: "startKey", publicName: "startKey", isSignal: true, isRequired: false, transformFunction: null }, keepValue: { classPropertyName: "keepValue", publicName: "keepValue", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", editCancel: "editCancel", tab: "tab", blurCommit: "blurCommit" }, host: { classAttribute: "mt-grid-cell-editor" }, viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueArea"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch (kind()) {\n  @case (\"select\") {\n    <select\n      #field\n      class=\"mt-grid-editor-field mt-grid-editor-select mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur($event)\"\n    >\n      @for (option of selectOptions(); track $index) {\n        <option [selected]=\"option.value === value()\">\n          {{ option.label }}\n        </option>\n      }\n    </select>\n  }\n  @case (\"richSelect\") {\n    <!-- observed: ag-rich-select \u2014 the picker fills the cell (the value padded 8px, a chevron);\n         the list (ag-rich-select-list) opens under the cell, as wide as it -->\n    <div\n      class=\"mt-grid-rich-select mtg:flex mtg:items-center mtg:rounded-grid-control mtg:bg-grid-input\"\n      [class.mt-grid-rich-select-expanded]=\"listOpen()\"\n      (keydown)=\"onRichKeydown($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation()\"\n      (dblclick)=\"$event.stopPropagation()\"\n    >\n      @if (allowTyping()) {\n        <input\n          #field\n          type=\"text\"\n          class=\"mt-grid-rich-select-input mtg:flex-auto mtg:flex mtg:items-center mtg:min-w-0 mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis mtg:m-0\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"listOpen()\"\n          [value]=\"initialText()\"\n          (input)=\"onTyped($event)\"\n          (click)=\"openList()\"\n          (blur)=\"onBlur($event)\"\n        />\n      } @else {\n        <div\n          #valueArea\n          class=\"mt-grid-rich-select-value mtg:flex-auto mtg:flex mtg:items-center mtg:min-w-0 mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis\"\n          tabindex=\"0\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          [attr.aria-expanded]=\"listOpen()\"\n          (click)=\"toggleList()\"\n          (blur)=\"onBlur($event)\"\n        >\n          {{ display() }}\n        </div>\n      }\n      <mt-grid-icon\n        class=\"mt-grid-rich-select-icon mtg:flex-none mtg:me-1.5\"\n        name=\"chevron-down\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"toggleList()\"\n      />\n    </div>\n    @if (listOpen() && listBox(); as box) {\n      <div\n        #list\n        class=\"mt-grid-rich-select-list mtg:overflow-auto mtg:p-[var(--mt-grid-dropdown-padding)] mtg:[border-radius:var(--mt-grid-dropdown-radius)] mtg:text-grid-foreground mtg:[box-shadow:var(--mt-grid-shadow-panel)] mtg:text-start\"\n        [class.mt-grid-rich-select-list-above]=\"box.above\"\n        role=\"listbox\"\n        aria-label=\"Rich Select Field\"\n        [style.top.px]=\"box.top\"\n        [style.left.px]=\"box.left\"\n        [style.width.px]=\"box.width\"\n        [style.max-height.px]=\"box.maxHeight\"\n        (mousedown)=\"onListMousedown($event)\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (click)=\"$event.stopPropagation()\"\n        (dblclick)=\"$event.stopPropagation()\"\n      >\n        @for (row of listRows(); track row.index) {\n          <div\n            class=\"mt-grid-rich-select-row mtg:flex mtg:items-center mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis\"\n            role=\"option\"\n            [attr.aria-selected]=\"isCurrent(row.index)\"\n            [class.mt-grid-rich-select-row-selected]=\"isCurrent(row.index)\"\n            [class.mt-grid-rich-select-row-highlighted]=\"\n              row.index === highlighted()\n            \"\n            [style.height.px]=\"rowHeight()\"\n            (mouseenter)=\"highlighted.set(row.index)\"\n            (click)=\"pick(row.index)\"\n          >\n            @for (part of row.parts; track $index) {\n              @if (part.mark) {\n                <mark class=\"mt-grid-rich-select-mark mtg:font-bold\">{{\n                  part.text\n                }}</mark>\n              } @else {\n                {{ part.text }}\n              }\n            }\n          </div>\n        } @empty {\n          <div\n            class=\"mt-grid-rich-select-empty mtg:flex mtg:items-center mtg:[padding:0_8px] mtg:text-grid-secondary\"\n          >\n            No results\n          </div>\n        }\n      </div>\n    }\n  }\n  @case (\"number\") {\n    <!-- observed: ag-number-field-input, the raw number, padding 0 8px, the blue border and ring -->\n    <input\n      #field\n      type=\"number\"\n      class=\"mt-grid-editor-field mt-grid-editor-number mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\n      [value]=\"initialText()\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n  }\n  @default {\n    <!-- observed: ag-text-field-input filling the cell, the value selected on open -->\n    <input\n      #field\n      type=\"text\"\n      class=\"mt-grid-editor-field mt-grid-editor-text mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\n      [value]=\"initialText()\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n  }\n}\n", styles: [":host{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height)}*{scrollbar-width:thin;scrollbar-color:var(--mt-grid-scrollbar-thumb) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--mt-grid-scrollbar-thumb);border-radius:var(--mt-grid-radius-small)}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}button,input,select,[tabindex],[role=option],[role=treeitem],[role=menuitem],[role=menuitemcheckbox],[role=tab],.mt-grid-row{transition:background-color .15s ease,color .15s ease,opacity .15s ease}button,input,select,[tabindex]{outline:none}:is(button,input,select,[tabindex]):not(.mt-grid-chart-dialog,.mt-grid-filter-popup,.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:is(.mt-grid-menu,.mt-grid-chooser){position:relative}:host(:focus-visible),:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:none}:host(:focus-visible):after,:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible:after{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;outline:1px solid var(--mt-grid-focus);outline-offset:2px}button:hover:not(:disabled){background-color:var(--mt-grid-hover)}input::placeholder{color:var(--mt-grid-placeholder)}input,select{color:var(--mt-grid-foreground);accent-color:var(--mt-grid-primary)}input:is([type=text],[type=number],[type=search],[type=date]),select{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height);background-color:var(--mt-grid-input-background);border-radius:var(--mt-grid-control-radius)}input:is([type=text],[type=number],[type=search],[type=date]):hover:not(:disabled),select:hover:not(:disabled){border-color:var(--mt-grid-input-border-hover)}input:is([type=text],[type=number],[type=search],[type=date]):is(:focus,:focus-visible):not(:disabled),select:is(:focus,:focus-visible):not(:disabled){border-color:var(--mt-grid-focus)}input[readonly]{border-color:var(--mt-grid-input-border-readonly)}input[type=checkbox]:not(.mt-grid-toggle-input),input[type=radio]{appearance:none;position:relative;display:inline-grid;place-content:center;box-sizing:border-box;flex:none;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size);margin:0;border:var(--mt-grid-checkbox-border-width) solid var(--mt-grid-input-border);border-radius:var(--mt-grid-checkbox-radius);background:var(--mt-grid-input-background);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:not(.mt-grid-toggle-input):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{background:var(--mt-grid-primary);border-color:var(--mt-grid-primary)}input[type=checkbox]:checked:after{content:\"\";width:8px;height:4px;border:solid var(--mt-grid-checkbox-mark);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg);mask:none;background:none}input[type=checkbox]:indeterminate:after{content:\"\";width:8px;height:2px;background:var(--mt-grid-checkbox-mark);border:0;transform:none}input[type=radio]:checked:after{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mt-grid-checkbox-mark)}input:disabled,select:disabled,button:disabled,[aria-disabled=true]{cursor:default;opacity:.6}mt-grid-icon{color:var(--mt-grid-icon-color)}button:hover mt-grid-icon,button[aria-expanded=true] mt-grid-icon,button[aria-selected=true] mt-grid-icon,button[aria-pressed=true] mt-grid-icon{color:var(--mt-grid-primary)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;animation:none}}input[type=checkbox]:not(.mt-grid-toggle-input):focus-visible:hover:not(:disabled),input[type=radio]:focus-visible:hover:not(:disabled){outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:host{display:block;width:100%;height:100%;min-width:0}.mt-grid-editor-field{box-sizing:border-box;width:100%;height:100%;border:1px solid var(--mt-grid-focus);color:inherit;font:inherit;font-size:14px;outline:none;box-shadow:none}.mt-grid-editor-number{appearance:textfield}.mt-grid-editor-number::-webkit-outer-spin-button,.mt-grid-editor-number::-webkit-inner-spin-button{appearance:none;margin:0}.mt-grid-rich-select{box-sizing:border-box;width:100%;height:100%;border:1px solid var(--mt-grid-focus);box-shadow:none;font-size:14px;cursor:default}.mt-grid-rich-select-value,.mt-grid-rich-select-input{box-sizing:border-box;height:100%;outline:none}.mt-grid-rich-select:has(:focus-visible){border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-rich-select-input{border:0;background:transparent;color:inherit;font:inherit;font-size:14px}.mt-grid-rich-select-icon{width:16px;height:16px;color:var(--mt-grid-icon-color)}.mt-grid-rich-select-list{position:fixed;z-index:1000;box-sizing:border-box;border:1px solid var(--mt-grid-border);background:var(--mt-grid-background);font-size:14px}.mt-grid-rich-select-row{box-sizing:border-box;cursor:default}.mt-grid-rich-select-row-selected{background:var(--mt-grid-selected)}.mt-grid-rich-select-mark{background:none;color:inherit}.mt-grid-rich-select-empty{height:24px}.mt-grid-rich-select-list{background:var(--mt-grid-popup-background)}.mt-grid-editor-field,.mt-grid-rich-select{border-color:var(--mt-grid-input-border)}.mt-grid-editor-field:focus-visible,.mt-grid-rich-select:has(:focus-visible){border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-rich-select-list{border-color:var(--mt-grid-input-border)}.mt-grid-rich-select-row-selected{background:transparent}.mt-grid-rich-select-row-selected:after{content:\"\\2713\";width:16px;height:16px;flex:none;margin-inline-start:auto;color:var(--mt-grid-primary)}.mt-grid-rich-select-row-highlighted{background:var(--mt-grid-hover)}\n"], dependencies: [{ kind: "component", type: GridIcon, selector: "mt-grid-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CellEditor, isStandalone: true, selector: "mt-grid-cell-editor", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, startKey: { classPropertyName: "startKey", publicName: "startKey", isSignal: true, isRequired: false, transformFunction: null }, keepValue: { classPropertyName: "keepValue", publicName: "keepValue", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commit: "commit", editCancel: "editCancel", tab: "tab", blurCommit: "blurCommit" }, host: { classAttribute: "mt-grid-cell-editor" }, viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "valueRef", first: true, predicate: ["valueArea"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "@switch (kind()) {\r\n  @case (\"select\") {\r\n    <select\r\n      #field\r\n      class=\"mt-grid-editor-field mt-grid-editor-select mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    >\r\n      @for (option of selectOptions(); track $index) {\r\n        <option [selected]=\"option.value === value()\">\r\n          {{ option.label }}\r\n        </option>\r\n      }\r\n    </select>\r\n  }\r\n  @case (\"richSelect\") {\r\n    <!-- observed: ag-rich-select \u2014 the picker fills the cell (the value padded 8px, a chevron);\r\n         the list (ag-rich-select-list) opens under the cell, as wide as it -->\r\n    <div\r\n      class=\"mt-grid-rich-select mtg:flex mtg:items-center mtg:rounded-grid-control mtg:bg-grid-input\"\r\n      [class.mt-grid-rich-select-expanded]=\"listOpen()\"\r\n      (keydown)=\"onRichKeydown($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (pointerdown)=\"$event.stopPropagation()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (dblclick)=\"$event.stopPropagation()\"\r\n    >\r\n      @if (allowTyping()) {\r\n        <input\r\n          #field\r\n          type=\"text\"\r\n          class=\"mt-grid-rich-select-input mtg:flex-auto mtg:flex mtg:items-center mtg:min-w-0 mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis mtg:m-0\"\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-expanded]=\"listOpen()\"\r\n          [value]=\"initialText()\"\r\n          (input)=\"onTyped($event)\"\r\n          (click)=\"openList()\"\r\n          (blur)=\"onBlur($event)\"\r\n        />\r\n      } @else {\r\n        <div\r\n          #valueArea\r\n          class=\"mt-grid-rich-select-value mtg:flex-auto mtg:flex mtg:items-center mtg:min-w-0 mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis\"\r\n          tabindex=\"0\"\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-expanded]=\"listOpen()\"\r\n          (click)=\"toggleList()\"\r\n          (blur)=\"onBlur($event)\"\r\n        >\r\n          {{ display() }}\r\n        </div>\r\n      }\r\n      <mt-grid-icon\r\n        class=\"mt-grid-rich-select-icon mtg:flex-none mtg:me-1.5\"\r\n        name=\"chevron-down\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (click)=\"toggleList()\"\r\n      />\r\n    </div>\r\n    @if (listOpen() && listBox(); as box) {\r\n      <div\r\n        #list\r\n        class=\"mt-grid-rich-select-list mtg:overflow-auto mtg:p-[var(--mt-grid-dropdown-padding)] mtg:[border-radius:var(--mt-grid-dropdown-radius)] mtg:text-grid-foreground mtg:[box-shadow:var(--mt-grid-shadow-panel)] mtg:text-start\"\r\n        [class.mt-grid-rich-select-list-above]=\"box.above\"\r\n        role=\"listbox\"\r\n        aria-label=\"Rich Select Field\"\r\n        [style.top.px]=\"box.top\"\r\n        [style.left.px]=\"box.left\"\r\n        [style.width.px]=\"box.width\"\r\n        [style.max-height.px]=\"box.maxHeight\"\r\n        (mousedown)=\"onListMousedown($event)\"\r\n        (pointerdown)=\"$event.stopPropagation()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (dblclick)=\"$event.stopPropagation()\"\r\n      >\r\n        @for (row of listRows(); track row.index) {\r\n          <div\r\n            class=\"mt-grid-rich-select-row mtg:flex mtg:items-center mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"isCurrent(row.index)\"\r\n            [class.mt-grid-rich-select-row-selected]=\"isCurrent(row.index)\"\r\n            [class.mt-grid-rich-select-row-highlighted]=\"\r\n              row.index === highlighted()\r\n            \"\r\n            [style.height.px]=\"rowHeight()\"\r\n            (mouseenter)=\"highlighted.set(row.index)\"\r\n            (click)=\"pick(row.index)\"\r\n          >\r\n            @for (part of row.parts; track $index) {\r\n              @if (part.mark) {\r\n                <mark class=\"mt-grid-rich-select-mark mtg:font-bold\">{{\r\n                  part.text\r\n                }}</mark>\r\n              } @else {\r\n                {{ part.text }}\r\n              }\r\n            }\r\n          </div>\r\n        } @empty {\r\n          <div\r\n            class=\"mt-grid-rich-select-empty mtg:flex mtg:items-center mtg:[padding:0_8px] mtg:text-grid-secondary\"\r\n          >\r\n            No results\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n  @case (\"number\") {\r\n    <!-- observed: ag-number-field-input, the raw number, padding 0 8px, the blue border and ring -->\r\n    <input\r\n      #field\r\n      type=\"number\"\r\n      class=\"mt-grid-editor-field mt-grid-editor-number mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\r\n      [value]=\"initialText()\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    />\r\n  }\r\n  @default {\r\n    <!-- observed: ag-text-field-input filling the cell, the value selected on open -->\r\n    <input\r\n      #field\r\n      type=\"text\"\r\n      class=\"mt-grid-editor-field mt-grid-editor-text mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\r\n      [value]=\"initialText()\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    />\r\n  }\r\n}\r\n", styles: [":host{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height)}*{scrollbar-width:thin;scrollbar-color:var(--mt-grid-scrollbar-thumb) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--mt-grid-scrollbar-thumb);border-radius:var(--mt-grid-radius-small)}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}button,input,select,[tabindex],[role=option],[role=treeitem],[role=menuitem],[role=menuitemcheckbox],[role=tab],.mt-grid-row{transition:background-color .15s ease,color .15s ease,opacity .15s ease}button,input,select,[tabindex]{outline:none}:is(button,input,select,[tabindex]):not(.mt-grid-chart-dialog,.mt-grid-filter-popup,.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:is(.mt-grid-menu,.mt-grid-chooser){position:relative}:host(:focus-visible),:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:none}:host(:focus-visible):after,:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible:after{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;outline:1px solid var(--mt-grid-focus);outline-offset:2px}button:hover:not(:disabled){background-color:var(--mt-grid-hover)}input::placeholder{color:var(--mt-grid-placeholder)}input,select{color:var(--mt-grid-foreground);accent-color:var(--mt-grid-primary)}input:is([type=text],[type=number],[type=search],[type=date]),select{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height);background-color:var(--mt-grid-input-background);border-radius:var(--mt-grid-control-radius)}input:is([type=text],[type=number],[type=search],[type=date]):hover:not(:disabled),select:hover:not(:disabled){border-color:var(--mt-grid-input-border-hover)}input:is([type=text],[type=number],[type=search],[type=date]):is(:focus,:focus-visible):not(:disabled),select:is(:focus,:focus-visible):not(:disabled){border-color:var(--mt-grid-focus)}input[readonly]{border-color:var(--mt-grid-input-border-readonly)}input[type=checkbox]:not(.mt-grid-toggle-input),input[type=radio]{appearance:none;position:relative;display:inline-grid;place-content:center;box-sizing:border-box;flex:none;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size);margin:0;border:var(--mt-grid-checkbox-border-width) solid var(--mt-grid-input-border);border-radius:var(--mt-grid-checkbox-radius);background:var(--mt-grid-input-background);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:not(.mt-grid-toggle-input):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{background:var(--mt-grid-primary);border-color:var(--mt-grid-primary)}input[type=checkbox]:checked:after{content:\"\";width:8px;height:4px;border:solid var(--mt-grid-checkbox-mark);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg);mask:none;background:none}input[type=checkbox]:indeterminate:after{content:\"\";width:8px;height:2px;background:var(--mt-grid-checkbox-mark);border:0;transform:none}input[type=radio]:checked:after{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mt-grid-checkbox-mark)}input:disabled,select:disabled,button:disabled,[aria-disabled=true]{cursor:default;opacity:.6}mt-grid-icon{color:var(--mt-grid-icon-color)}button:hover mt-grid-icon,button[aria-expanded=true] mt-grid-icon,button[aria-selected=true] mt-grid-icon,button[aria-pressed=true] mt-grid-icon{color:var(--mt-grid-primary)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;animation:none}}input[type=checkbox]:not(.mt-grid-toggle-input):focus-visible:hover:not(:disabled),input[type=radio]:focus-visible:hover:not(:disabled){outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:host{display:block;width:100%;height:100%;min-width:0}.mt-grid-editor-field{box-sizing:border-box;width:100%;height:100%;border:1px solid var(--mt-grid-focus);color:inherit;font:inherit;font-size:14px;outline:none;box-shadow:none}.mt-grid-editor-number{appearance:textfield}.mt-grid-editor-number::-webkit-outer-spin-button,.mt-grid-editor-number::-webkit-inner-spin-button{appearance:none;margin:0}.mt-grid-rich-select{box-sizing:border-box;width:100%;height:100%;border:1px solid var(--mt-grid-focus);box-shadow:none;font-size:14px;cursor:default}.mt-grid-rich-select-value,.mt-grid-rich-select-input{box-sizing:border-box;height:100%;outline:none}.mt-grid-rich-select:has(:focus-visible){border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-rich-select-input{border:0;background:transparent;color:inherit;font:inherit;font-size:14px}.mt-grid-rich-select-icon{width:16px;height:16px;color:var(--mt-grid-icon-color)}.mt-grid-rich-select-list{position:fixed;z-index:1000;box-sizing:border-box;border:1px solid var(--mt-grid-border);background:var(--mt-grid-background);font-size:14px}.mt-grid-rich-select-row{box-sizing:border-box;cursor:default}.mt-grid-rich-select-row-selected{background:var(--mt-grid-selected)}.mt-grid-rich-select-mark{background:none;color:inherit}.mt-grid-rich-select-empty{height:24px}.mt-grid-rich-select-list{background:var(--mt-grid-popup-background)}.mt-grid-editor-field,.mt-grid-rich-select{border-color:var(--mt-grid-input-border)}.mt-grid-editor-field:focus-visible,.mt-grid-rich-select:has(:focus-visible){border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-rich-select-list{border-color:var(--mt-grid-input-border)}.mt-grid-rich-select-row-selected{background:transparent}.mt-grid-rich-select-row-selected:after{content:\"\\2713\";width:16px;height:16px;flex:none;margin-inline-start:auto;color:var(--mt-grid-primary)}.mt-grid-rich-select-row-highlighted{background:var(--mt-grid-hover)}\n"], dependencies: [{ kind: "component", type: GridIcon, selector: "mt-grid-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CellEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-grid-cell-editor', imports: [GridIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mt-grid-cell-editor' }, template: "@switch (kind()) {\n  @case (\"select\") {\n    <select\n      #field\n      class=\"mt-grid-editor-field mt-grid-editor-select mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur($event)\"\n    >\n      @for (option of selectOptions(); track $index) {\n        <option [selected]=\"option.value === value()\">\n          {{ option.label }}\n        </option>\n      }\n    </select>\n  }\n  @case (\"richSelect\") {\n    <!-- observed: ag-rich-select \u2014 the picker fills the cell (the value padded 8px, a chevron);\n         the list (ag-rich-select-list) opens under the cell, as wide as it -->\n    <div\n      class=\"mt-grid-rich-select mtg:flex mtg:items-center mtg:rounded-grid-control mtg:bg-grid-input\"\n      [class.mt-grid-rich-select-expanded]=\"listOpen()\"\n      (keydown)=\"onRichKeydown($event)\"\n      (mousedown)=\"$event.stopPropagation()\"\n      (pointerdown)=\"$event.stopPropagation()\"\n      (click)=\"$event.stopPropagation()\"\n      (dblclick)=\"$event.stopPropagation()\"\n    >\n      @if (allowTyping()) {\n        <input\n          #field\n          type=\"text\"\n          class=\"mt-grid-rich-select-input mtg:flex-auto mtg:flex mtg:items-center mtg:min-w-0 mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis mtg:m-0\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n          [attr.aria-expanded]=\"listOpen()\"\n          [value]=\"initialText()\"\n          (input)=\"onTyped($event)\"\n          (click)=\"openList()\"\n          (blur)=\"onBlur($event)\"\n        />\n      } @else {\n        <div\n          #valueArea\n          class=\"mt-grid-rich-select-value mtg:flex-auto mtg:flex mtg:items-center mtg:min-w-0 mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis\"\n          tabindex=\"0\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          [attr.aria-expanded]=\"listOpen()\"\n          (click)=\"toggleList()\"\n          (blur)=\"onBlur($event)\"\n        >\n          {{ display() }}\n        </div>\n      }\n      <mt-grid-icon\n        class=\"mt-grid-rich-select-icon mtg:flex-none mtg:me-1.5\"\n        name=\"chevron-down\"\n        (mousedown)=\"$event.preventDefault()\"\n        (click)=\"toggleList()\"\n      />\n    </div>\n    @if (listOpen() && listBox(); as box) {\n      <div\n        #list\n        class=\"mt-grid-rich-select-list mtg:overflow-auto mtg:p-[var(--mt-grid-dropdown-padding)] mtg:[border-radius:var(--mt-grid-dropdown-radius)] mtg:text-grid-foreground mtg:[box-shadow:var(--mt-grid-shadow-panel)] mtg:text-start\"\n        [class.mt-grid-rich-select-list-above]=\"box.above\"\n        role=\"listbox\"\n        aria-label=\"Rich Select Field\"\n        [style.top.px]=\"box.top\"\n        [style.left.px]=\"box.left\"\n        [style.width.px]=\"box.width\"\n        [style.max-height.px]=\"box.maxHeight\"\n        (mousedown)=\"onListMousedown($event)\"\n        (pointerdown)=\"$event.stopPropagation()\"\n        (click)=\"$event.stopPropagation()\"\n        (dblclick)=\"$event.stopPropagation()\"\n      >\n        @for (row of listRows(); track row.index) {\n          <div\n            class=\"mt-grid-rich-select-row mtg:flex mtg:items-center mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis\"\n            role=\"option\"\n            [attr.aria-selected]=\"isCurrent(row.index)\"\n            [class.mt-grid-rich-select-row-selected]=\"isCurrent(row.index)\"\n            [class.mt-grid-rich-select-row-highlighted]=\"\n              row.index === highlighted()\n            \"\n            [style.height.px]=\"rowHeight()\"\n            (mouseenter)=\"highlighted.set(row.index)\"\n            (click)=\"pick(row.index)\"\n          >\n            @for (part of row.parts; track $index) {\n              @if (part.mark) {\n                <mark class=\"mt-grid-rich-select-mark mtg:font-bold\">{{\n                  part.text\n                }}</mark>\n              } @else {\n                {{ part.text }}\n              }\n            }\n          </div>\n        } @empty {\n          <div\n            class=\"mt-grid-rich-select-empty mtg:flex mtg:items-center mtg:[padding:0_8px] mtg:text-grid-secondary\"\n          >\n            No results\n          </div>\n        }\n      </div>\n    }\n  }\n  @case (\"number\") {\n    <!-- observed: ag-number-field-input, the raw number, padding 0 8px, the blue border and ring -->\n    <input\n      #field\n      type=\"number\"\n      class=\"mt-grid-editor-field mt-grid-editor-number mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\n      [value]=\"initialText()\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n  }\n  @default {\n    <!-- observed: ag-text-field-input filling the cell, the value selected on open -->\n    <input\n      #field\n      type=\"text\"\n      class=\"mt-grid-editor-field mt-grid-editor-text mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\n      [value]=\"initialText()\"\n      (keydown)=\"onKeydown($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n  }\n}\n", styles: [":host{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height)}*{scrollbar-width:thin;scrollbar-color:var(--mt-grid-scrollbar-thumb) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--mt-grid-scrollbar-thumb);border-radius:var(--mt-grid-radius-small)}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}button,input,select,[tabindex],[role=option],[role=treeitem],[role=menuitem],[role=menuitemcheckbox],[role=tab],.mt-grid-row{transition:background-color .15s ease,color .15s ease,opacity .15s ease}button,input,select,[tabindex]{outline:none}:is(button,input,select,[tabindex]):not(.mt-grid-chart-dialog,.mt-grid-filter-popup,.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:is(.mt-grid-menu,.mt-grid-chooser){position:relative}:host(:focus-visible),:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:none}:host(:focus-visible):after,:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible:after{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;outline:1px solid var(--mt-grid-focus);outline-offset:2px}button:hover:not(:disabled){background-color:var(--mt-grid-hover)}input::placeholder{color:var(--mt-grid-placeholder)}input,select{color:var(--mt-grid-foreground);accent-color:var(--mt-grid-primary)}input:is([type=text],[type=number],[type=search],[type=date]),select{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height);background-color:var(--mt-grid-input-background);border-radius:var(--mt-grid-control-radius)}input:is([type=text],[type=number],[type=search],[type=date]):hover:not(:disabled),select:hover:not(:disabled){border-color:var(--mt-grid-input-border-hover)}input:is([type=text],[type=number],[type=search],[type=date]):is(:focus,:focus-visible):not(:disabled),select:is(:focus,:focus-visible):not(:disabled){border-color:var(--mt-grid-focus)}input[readonly]{border-color:var(--mt-grid-input-border-readonly)}input[type=checkbox]:not(.mt-grid-toggle-input),input[type=radio]{appearance:none;position:relative;display:inline-grid;place-content:center;box-sizing:border-box;flex:none;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size);margin:0;border:var(--mt-grid-checkbox-border-width) solid var(--mt-grid-input-border);border-radius:var(--mt-grid-checkbox-radius);background:var(--mt-grid-input-background);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:not(.mt-grid-toggle-input):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{background:var(--mt-grid-primary);border-color:var(--mt-grid-primary)}input[type=checkbox]:checked:after{content:\"\";width:8px;height:4px;border:solid var(--mt-grid-checkbox-mark);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg);mask:none;background:none}input[type=checkbox]:indeterminate:after{content:\"\";width:8px;height:2px;background:var(--mt-grid-checkbox-mark);border:0;transform:none}input[type=radio]:checked:after{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mt-grid-checkbox-mark)}input:disabled,select:disabled,button:disabled,[aria-disabled=true]{cursor:default;opacity:.6}mt-grid-icon{color:var(--mt-grid-icon-color)}button:hover mt-grid-icon,button[aria-expanded=true] mt-grid-icon,button[aria-selected=true] mt-grid-icon,button[aria-pressed=true] mt-grid-icon{color:var(--mt-grid-primary)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;animation:none}}input[type=checkbox]:not(.mt-grid-toggle-input):focus-visible:hover:not(:disabled),input[type=radio]:focus-visible:hover:not(:disabled){outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:host{display:block;width:100%;height:100%;min-width:0}.mt-grid-editor-field{box-sizing:border-box;width:100%;height:100%;border:1px solid var(--mt-grid-focus);color:inherit;font:inherit;font-size:14px;outline:none;box-shadow:none}.mt-grid-editor-number{appearance:textfield}.mt-grid-editor-number::-webkit-outer-spin-button,.mt-grid-editor-number::-webkit-inner-spin-button{appearance:none;margin:0}.mt-grid-rich-select{box-sizing:border-box;width:100%;height:100%;border:1px solid var(--mt-grid-focus);box-shadow:none;font-size:14px;cursor:default}.mt-grid-rich-select-value,.mt-grid-rich-select-input{box-sizing:border-box;height:100%;outline:none}.mt-grid-rich-select:has(:focus-visible){border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-rich-select-input{border:0;background:transparent;color:inherit;font:inherit;font-size:14px}.mt-grid-rich-select-icon{width:16px;height:16px;color:var(--mt-grid-icon-color)}.mt-grid-rich-select-list{position:fixed;z-index:1000;box-sizing:border-box;border:1px solid var(--mt-grid-border);background:var(--mt-grid-background);font-size:14px}.mt-grid-rich-select-row{box-sizing:border-box;cursor:default}.mt-grid-rich-select-row-selected{background:var(--mt-grid-selected)}.mt-grid-rich-select-mark{background:none;color:inherit}.mt-grid-rich-select-empty{height:24px}.mt-grid-rich-select-list{background:var(--mt-grid-popup-background)}.mt-grid-editor-field,.mt-grid-rich-select{border-color:var(--mt-grid-input-border)}.mt-grid-editor-field:focus-visible,.mt-grid-rich-select:has(:focus-visible){border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-rich-select-list{border-color:var(--mt-grid-input-border)}.mt-grid-rich-select-row-selected{background:transparent}.mt-grid-rich-select-row-selected:after{content:\"\\2713\";width:16px;height:16px;flex:none;margin-inline-start:auto;color:var(--mt-grid-primary)}.mt-grid-rich-select-row-highlighted{background:var(--mt-grid-hover)}\n"] }]
+            args: [{ selector: 'mt-grid-cell-editor', imports: [GridIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mt-grid-cell-editor' }, template: "@switch (kind()) {\r\n  @case (\"select\") {\r\n    <select\r\n      #field\r\n      class=\"mt-grid-editor-field mt-grid-editor-select mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    >\r\n      @for (option of selectOptions(); track $index) {\r\n        <option [selected]=\"option.value === value()\">\r\n          {{ option.label }}\r\n        </option>\r\n      }\r\n    </select>\r\n  }\r\n  @case (\"richSelect\") {\r\n    <!-- observed: ag-rich-select \u2014 the picker fills the cell (the value padded 8px, a chevron);\r\n         the list (ag-rich-select-list) opens under the cell, as wide as it -->\r\n    <div\r\n      class=\"mt-grid-rich-select mtg:flex mtg:items-center mtg:rounded-grid-control mtg:bg-grid-input\"\r\n      [class.mt-grid-rich-select-expanded]=\"listOpen()\"\r\n      (keydown)=\"onRichKeydown($event)\"\r\n      (mousedown)=\"$event.stopPropagation()\"\r\n      (pointerdown)=\"$event.stopPropagation()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      (dblclick)=\"$event.stopPropagation()\"\r\n    >\r\n      @if (allowTyping()) {\r\n        <input\r\n          #field\r\n          type=\"text\"\r\n          class=\"mt-grid-rich-select-input mtg:flex-auto mtg:flex mtg:items-center mtg:min-w-0 mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis mtg:m-0\"\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          aria-autocomplete=\"list\"\r\n          [attr.aria-expanded]=\"listOpen()\"\r\n          [value]=\"initialText()\"\r\n          (input)=\"onTyped($event)\"\r\n          (click)=\"openList()\"\r\n          (blur)=\"onBlur($event)\"\r\n        />\r\n      } @else {\r\n        <div\r\n          #valueArea\r\n          class=\"mt-grid-rich-select-value mtg:flex-auto mtg:flex mtg:items-center mtg:min-w-0 mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis\"\r\n          tabindex=\"0\"\r\n          role=\"combobox\"\r\n          aria-haspopup=\"listbox\"\r\n          [attr.aria-expanded]=\"listOpen()\"\r\n          (click)=\"toggleList()\"\r\n          (blur)=\"onBlur($event)\"\r\n        >\r\n          {{ display() }}\r\n        </div>\r\n      }\r\n      <mt-grid-icon\r\n        class=\"mt-grid-rich-select-icon mtg:flex-none mtg:me-1.5\"\r\n        name=\"chevron-down\"\r\n        (mousedown)=\"$event.preventDefault()\"\r\n        (click)=\"toggleList()\"\r\n      />\r\n    </div>\r\n    @if (listOpen() && listBox(); as box) {\r\n      <div\r\n        #list\r\n        class=\"mt-grid-rich-select-list mtg:overflow-auto mtg:p-[var(--mt-grid-dropdown-padding)] mtg:[border-radius:var(--mt-grid-dropdown-radius)] mtg:text-grid-foreground mtg:[box-shadow:var(--mt-grid-shadow-panel)] mtg:text-start\"\r\n        [class.mt-grid-rich-select-list-above]=\"box.above\"\r\n        role=\"listbox\"\r\n        aria-label=\"Rich Select Field\"\r\n        [style.top.px]=\"box.top\"\r\n        [style.left.px]=\"box.left\"\r\n        [style.width.px]=\"box.width\"\r\n        [style.max-height.px]=\"box.maxHeight\"\r\n        (mousedown)=\"onListMousedown($event)\"\r\n        (pointerdown)=\"$event.stopPropagation()\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (dblclick)=\"$event.stopPropagation()\"\r\n      >\r\n        @for (row of listRows(); track row.index) {\r\n          <div\r\n            class=\"mt-grid-rich-select-row mtg:flex mtg:items-center mtg:[padding:0_8px] mtg:overflow-hidden mtg:whitespace-nowrap mtg:text-ellipsis\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"isCurrent(row.index)\"\r\n            [class.mt-grid-rich-select-row-selected]=\"isCurrent(row.index)\"\r\n            [class.mt-grid-rich-select-row-highlighted]=\"\r\n              row.index === highlighted()\r\n            \"\r\n            [style.height.px]=\"rowHeight()\"\r\n            (mouseenter)=\"highlighted.set(row.index)\"\r\n            (click)=\"pick(row.index)\"\r\n          >\r\n            @for (part of row.parts; track $index) {\r\n              @if (part.mark) {\r\n                <mark class=\"mt-grid-rich-select-mark mtg:font-bold\">{{\r\n                  part.text\r\n                }}</mark>\r\n              } @else {\r\n                {{ part.text }}\r\n              }\r\n            }\r\n          </div>\r\n        } @empty {\r\n          <div\r\n            class=\"mt-grid-rich-select-empty mtg:flex mtg:items-center mtg:[padding:0_8px] mtg:text-grid-secondary\"\r\n          >\r\n            No results\r\n          </div>\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n  @case (\"number\") {\r\n    <!-- observed: ag-number-field-input, the raw number, padding 0 8px, the blue border and ring -->\r\n    <input\r\n      #field\r\n      type=\"number\"\r\n      class=\"mt-grid-editor-field mt-grid-editor-number mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\r\n      [value]=\"initialText()\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    />\r\n  }\r\n  @default {\r\n    <!-- observed: ag-text-field-input filling the cell, the value selected on open -->\r\n    <input\r\n      #field\r\n      type=\"text\"\r\n      class=\"mt-grid-editor-field mt-grid-editor-text mtg:m-0 mtg:[padding:0_8px] mtg:rounded-grid-control mtg:bg-grid-input\"\r\n      [value]=\"initialText()\"\r\n      (keydown)=\"onKeydown($event)\"\r\n      (blur)=\"onBlur($event)\"\r\n    />\r\n  }\r\n}\r\n", styles: [":host{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height)}*{scrollbar-width:thin;scrollbar-color:var(--mt-grid-scrollbar-thumb) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--mt-grid-scrollbar-thumb);border-radius:var(--mt-grid-radius-small)}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}button,input,select,[tabindex],[role=option],[role=treeitem],[role=menuitem],[role=menuitemcheckbox],[role=tab],.mt-grid-row{transition:background-color .15s ease,color .15s ease,opacity .15s ease}button,input,select,[tabindex]{outline:none}:is(button,input,select,[tabindex]):not(.mt-grid-chart-dialog,.mt-grid-filter-popup,.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:is(.mt-grid-menu,.mt-grid-chooser){position:relative}:host(:focus-visible),:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:none}:host(:focus-visible):after,:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible:after{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;outline:1px solid var(--mt-grid-focus);outline-offset:2px}button:hover:not(:disabled){background-color:var(--mt-grid-hover)}input::placeholder{color:var(--mt-grid-placeholder)}input,select{color:var(--mt-grid-foreground);accent-color:var(--mt-grid-primary)}input:is([type=text],[type=number],[type=search],[type=date]),select{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height);background-color:var(--mt-grid-input-background);border-radius:var(--mt-grid-control-radius)}input:is([type=text],[type=number],[type=search],[type=date]):hover:not(:disabled),select:hover:not(:disabled){border-color:var(--mt-grid-input-border-hover)}input:is([type=text],[type=number],[type=search],[type=date]):is(:focus,:focus-visible):not(:disabled),select:is(:focus,:focus-visible):not(:disabled){border-color:var(--mt-grid-focus)}input[readonly]{border-color:var(--mt-grid-input-border-readonly)}input[type=checkbox]:not(.mt-grid-toggle-input),input[type=radio]{appearance:none;position:relative;display:inline-grid;place-content:center;box-sizing:border-box;flex:none;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size);margin:0;border:var(--mt-grid-checkbox-border-width) solid var(--mt-grid-input-border);border-radius:var(--mt-grid-checkbox-radius);background:var(--mt-grid-input-background);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:not(.mt-grid-toggle-input):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{background:var(--mt-grid-primary);border-color:var(--mt-grid-primary)}input[type=checkbox]:checked:after{content:\"\";width:8px;height:4px;border:solid var(--mt-grid-checkbox-mark);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg);mask:none;background:none}input[type=checkbox]:indeterminate:after{content:\"\";width:8px;height:2px;background:var(--mt-grid-checkbox-mark);border:0;transform:none}input[type=radio]:checked:after{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mt-grid-checkbox-mark)}input:disabled,select:disabled,button:disabled,[aria-disabled=true]{cursor:default;opacity:.6}mt-grid-icon{color:var(--mt-grid-icon-color)}button:hover mt-grid-icon,button[aria-expanded=true] mt-grid-icon,button[aria-selected=true] mt-grid-icon,button[aria-pressed=true] mt-grid-icon{color:var(--mt-grid-primary)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;animation:none}}input[type=checkbox]:not(.mt-grid-toggle-input):focus-visible:hover:not(:disabled),input[type=radio]:focus-visible:hover:not(:disabled){outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:host{display:block;width:100%;height:100%;min-width:0}.mt-grid-editor-field{box-sizing:border-box;width:100%;height:100%;border:1px solid var(--mt-grid-focus);color:inherit;font:inherit;font-size:14px;outline:none;box-shadow:none}.mt-grid-editor-number{appearance:textfield}.mt-grid-editor-number::-webkit-outer-spin-button,.mt-grid-editor-number::-webkit-inner-spin-button{appearance:none;margin:0}.mt-grid-rich-select{box-sizing:border-box;width:100%;height:100%;border:1px solid var(--mt-grid-focus);box-shadow:none;font-size:14px;cursor:default}.mt-grid-rich-select-value,.mt-grid-rich-select-input{box-sizing:border-box;height:100%;outline:none}.mt-grid-rich-select:has(:focus-visible){border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-rich-select-input{border:0;background:transparent;color:inherit;font:inherit;font-size:14px}.mt-grid-rich-select-icon{width:16px;height:16px;color:var(--mt-grid-icon-color)}.mt-grid-rich-select-list{position:fixed;z-index:1000;box-sizing:border-box;border:1px solid var(--mt-grid-border);background:var(--mt-grid-background);font-size:14px}.mt-grid-rich-select-row{box-sizing:border-box;cursor:default}.mt-grid-rich-select-row-selected{background:var(--mt-grid-selected)}.mt-grid-rich-select-mark{background:none;color:inherit}.mt-grid-rich-select-empty{height:24px}.mt-grid-rich-select-list{background:var(--mt-grid-popup-background)}.mt-grid-editor-field,.mt-grid-rich-select{border-color:var(--mt-grid-input-border)}.mt-grid-editor-field:focus-visible,.mt-grid-rich-select:has(:focus-visible){border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-rich-select-list{border-color:var(--mt-grid-input-border)}.mt-grid-rich-select-row-selected{background:transparent}.mt-grid-rich-select-row-selected:after{content:\"\\2713\";width:16px;height:16px;flex:none;margin-inline-start:auto;color:var(--mt-grid-primary)}.mt-grid-rich-select-row-highlighted{background:var(--mt-grid-hover)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], startKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "startKey", required: false }] }], keepValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepValue", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], commit: [{ type: i0.Output, args: ["commit"] }], editCancel: [{ type: i0.Output, args: ["editCancel"] }], tab: [{ type: i0.Output, args: ["tab"] }], blurCommit: [{ type: i0.Output, args: ["blurCommit"] }], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], valueRef: [{ type: i0.ViewChild, args: ['valueArea', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }] } });
 
 const NUMBER = new Intl.NumberFormat('en-US');
@@ -5715,11 +5715,11 @@ class MenuIcon {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MenuIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MenuIcon, isStandalone: true, selector: "mt-grid-menu-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (name(); as name) {\n  <mt-grid-icon [name]=\"name\" />\n} @else if (html()) {\n  <span [innerHTML]=\"html()\"></span>\n}\n", styles: [":host{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: GridIcon, selector: "mt-grid-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: MenuIcon, isStandalone: true, selector: "mt-grid-menu-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (name(); as name) {\r\n  <mt-grid-icon [name]=\"name\" />\r\n} @else if (html()) {\r\n  <span [innerHTML]=\"html()\"></span>\r\n}\r\n", styles: [":host{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: GridIcon, selector: "mt-grid-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: MenuIcon, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-grid-menu-icon', standalone: true, imports: [GridIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (name(); as name) {\n  <mt-grid-icon [name]=\"name\" />\n} @else if (html()) {\n  <span [innerHTML]=\"html()\"></span>\n}\n", styles: [":host{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'mt-grid-menu-icon', standalone: true, imports: [GridIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (name(); as name) {\r\n  <mt-grid-icon [name]=\"name\" />\r\n} @else if (html()) {\r\n  <span [innerHTML]=\"html()\"></span>\r\n}\r\n", styles: [":host{display:inline-flex;width:16px;height:16px;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }] } });
 
 /**
@@ -6572,6 +6572,11 @@ function conditionComplete(condition, params = {}) {
 }
 
 const SET_FILTER_BLANKS = '(Blanks)';
+/** Default delay between typing and a remote set filter search. */
+const REMOTE_SEARCH_DEBOUNCE = 300;
+function isSubscribable(result) {
+    return typeof result.subscribe === 'function';
+}
 /** Observed default debounce between typing and applying (filter-ui-observations.json). */
 const FILTER_DEBOUNCE = 500;
 /** Observed popup widths: text and number 262px, date 186px (popup-widths). */
@@ -6813,8 +6818,37 @@ class ColumnFilter {
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     sourceVersion = 0;
     static sourceCache = new WeakMap();
+    // ---- remote set filter (filterParams.remoteSearch) ----
+    remote = computed(() => this.kind() === 'set' ? (this.params().remoteSearch ?? null) : null, ...(ngDevMode ? [{ debugName: "remote" }] : /* istanbul ignore next */ []));
+    /** Labels of the options a search returned, by search source, so chosen values keep their text. */
+    static remoteLabels = new WeakMap();
+    remoteOptions = signal([], ...(ngDevMode ? [{ debugName: "remoteOptions" }] : /* istanbul ignore next */ []));
+    /** Chosen values the last search did not return, listed first. */
+    remotePinned = signal([], ...(ngDevMode ? [{ debugName: "remotePinned" }] : /* istanbul ignore next */ []));
+    /** The text of the last search (trimmed). */
+    remoteTerm = signal('', ...(ngDevMode ? [{ debugName: "remoteTerm" }] : /* istanbul ignore next */ []));
+    remoteFailed = signal(false, ...(ngDevMode ? [{ debugName: "remoteFailed" }] : /* istanbul ignore next */ []));
+    remoteNeedsText = computed(() => {
+        const remote = this.remote();
+        return !!remote && this.remoteTerm().length < (remote.minLength ?? 0);
+    }, ...(ngDevMode ? [{ debugName: "remoteNeedsText" }] : /* istanbul ignore next */ []));
+    remoteVersion = 0;
+    remoteTimer;
+    remoteRequest;
+    showSelectAll = computed(() => !this.params().suppressSelectAll && !this.remote(), ...(ngDevMode ? [{ debugName: "showSelectAll" }] : /* istanbul ignore next */ []));
     setValues = computed(() => {
         const params = this.params();
+        const remote = this.remote();
+        if (remote) {
+            const labels = ColumnFilter.remoteLabels.get(remote.search);
+            const values = new Map();
+            for (const key of this.remotePinned())
+                values.set(key, { key, text: labels?.get(key) ?? key });
+            for (const option of this.remoteOptions())
+                if (!values.has(option.value))
+                    values.set(option.value, { key: option.value, text: option.label });
+            return [...values.values()];
+        }
         const raw = this.suppliedValues() ??
             (Array.isArray(params.values)
                 ? params.values
@@ -6871,7 +6905,8 @@ class ColumnFilter {
             return this.params().caseSensitive ? text : text.toLocaleLowerCase();
         };
         const term = fold(this.miniFilter());
-        return term
+        // A remote search already matched the text.
+        return term && !this.remote()
             ? this.setValues().filter((value) => [value.text, ...(value.path ?? [])].some((part) => fold(part).includes(term)))
             : this.setValues();
     }, ...(ngDevMode ? [{ debugName: "shownValues" }] : /* istanbul ignore next */ []));
@@ -6952,6 +6987,23 @@ class ColumnFilter {
     toggleKeys(keys) {
         if (this.params().readOnly)
             return;
+        const remote = this.remote();
+        if (remote) {
+            // The chosen values are the filter; none chosen is no filter.
+            const on = !keys.every((key) => this.isSelected(key));
+            const chosen = new Set(remote.single ? [] : (this.selected() ?? []));
+            for (const key of keys) {
+                if (on)
+                    chosen.add(key);
+                else
+                    chosen.delete(key);
+            }
+            this.selected.set(chosen.size ? chosen : null);
+            this.modified.emit();
+            if (!this.applyMode())
+                this.apply();
+            return;
+        }
         const next = new Set(this.setValues()
             .filter((value) => this.isSelected(value.key))
             .map((value) => value.key));
@@ -6977,6 +7029,11 @@ class ColumnFilter {
             event.stopPropagation();
             if (this.params().readOnly)
                 return;
+            if (this.remote()) {
+                // Enter searches at once instead of waiting for the debounce.
+                this.searchRemote(this.miniFilter());
+                return;
+            }
             this.selectShownValues();
             this.modified.emit();
             this.apply();
@@ -7056,7 +7113,7 @@ class ColumnFilter {
         if (list) {
             list.focus();
             const top = index * this.listRowHeight() +
-                (this.params().suppressSelectAll ? 0 : this.listRowHeight());
+                (this.showSelectAll() ? this.listRowHeight() : 0);
             if (top < list.scrollTop)
                 list.scrollTop = top;
             else if (top + this.listRowHeight() > list.scrollTop + list.clientHeight)
@@ -7097,6 +7154,9 @@ class ColumnFilter {
             const params = this.params();
             const values = this.values();
             untracked(() => {
+                // A remote search owns the list and its loading state.
+                if (this.remote())
+                    return;
                 const version = ++this.sourceVersion;
                 const source = params.values;
                 if (typeof source === 'function') {
@@ -7130,6 +7190,11 @@ class ColumnFilter {
                 previousValues = values;
             });
         });
+        // Opening (or a new search source) searches the current text at once.
+        effect(() => {
+            if (this.remote())
+                untracked(() => this.searchRemote(this.miniFilter()));
+        });
         afterNextRender(() => {
             this.listRowHeight.set(parseFloat(getComputedStyle(this.host.nativeElement).getPropertyValue('--mt-grid-set-row-height')) || 32);
             if (this.inline())
@@ -7143,9 +7208,76 @@ class ColumnFilter {
         afterNextRender(() => observer.observe(this.host.nativeElement));
         this.destroyRef.onDestroy(() => {
             clearTimeout(this.timer);
+            clearTimeout(this.remoteTimer);
+            this.remoteRequest?.unsubscribe();
             observer.disconnect();
         });
     }
+    /**
+     * Runs the remote search for a text. Only the latest search lands: an earlier one still in
+     * flight is unsubscribed (observable results) or ignored when it settles (promises).
+     */
+    searchRemote(text) {
+        clearTimeout(this.remoteTimer);
+        this.remoteRequest?.unsubscribe();
+        this.remoteRequest = undefined;
+        const version = ++this.remoteVersion;
+        const remote = this.remote();
+        const term = text.trim();
+        this.remoteTerm.set(term);
+        this.remoteFailed.set(false);
+        const chosen = () => [...(this.selected() ?? [])].filter((key) => key !== null);
+        if (!remote || term.length < (remote.minLength ?? 0)) {
+            this.loading.set(false);
+            this.remoteOptions.set([]);
+            this.remotePinned.set(chosen());
+            return;
+        }
+        const settle = (options, failed = false) => {
+            if (version !== this.remoteVersion || this.destroyRef.destroyed)
+                return;
+            let labels = ColumnFilter.remoteLabels.get(remote.search);
+            if (!labels)
+                ColumnFilter.remoteLabels.set(remote.search, (labels = new Map()));
+            for (const option of options)
+                labels.set(option.value, option.label);
+            const returned = new Set(options.map((option) => option.value));
+            this.remotePinned.set(chosen().filter((key) => !returned.has(key)));
+            this.remoteOptions.set(options);
+            this.remoteFailed.set(failed);
+            this.loading.set(false);
+        };
+        const fail = () => settle([], true);
+        this.loading.set(true);
+        let result;
+        try {
+            result = remote.search(term);
+        }
+        catch {
+            fail();
+            return;
+        }
+        if (isSubscribable(result)) {
+            let received = false;
+            this.remoteRequest = result.subscribe({
+                next: (options) => {
+                    received = true;
+                    settle(options);
+                },
+                error: fail,
+                complete: () => {
+                    if (!received)
+                        settle([]);
+                },
+            });
+        }
+        else
+            result.then((options) => settle(options), fail);
+    }
+    scheduleRemoteSearch(text) {
+        clearTimeout(this.remoteTimer);
+        this.remoteTimer = setTimeout(() => this.searchRemote(text), this.remote()?.debounceMs ?? REMOTE_SEARCH_DEBOUNCE);
+    }
     dateLimit(max) {
         const params = this.params();
         const limit = max ? params.maxValidDate : params.minValidDate;
@@ -7222,9 +7354,10 @@ class ColumnFilter {
     /** Rebuilds the editable conditions from a model (open, Cancel, Reset). */
     isSelected(key) {
         const selected = this.selectedLookup();
+        // `null` is every value, except for a remote search where it is none chosen.
         return selected
             ? selected.has(key === null || this.params().caseSensitive ? key : key.toLowerCase())
-            : true;
+            : !this.remote();
     }
     onMiniFilter(event) {
         this.updateMiniFilter(event.target.value);
@@ -7236,6 +7369,10 @@ class ColumnFilter {
         const list = this.host.nativeElement.querySelector('.mt-grid-set-list');
         if (list)
             list.scrollTop = 0;
+        if (this.remote()) {
+            this.scheduleRemoteSearch(text);
+            return;
+        }
         if (this.params().applyMiniFilterWhileTyping && !this.params().readOnly) {
             this.selectShownValues();
             this.modified.emit();
@@ -7276,6 +7413,13 @@ class ColumnFilter {
                 : this.children().map(() => null));
             return;
         }
+        if (this.remote()) {
+            const values = model?.filterType === 'set' ? model.values : [];
+            this.selected.set(values.length ? new Set(values) : null);
+            this.remotePinned.set(values.filter((key) => key !== null &&
+                !this.remoteOptions().some((option) => option.value === key)));
+            return;
+        }
         if (this.kind() === 'set') {
             this.selected.set(model?.filterType === 'set'
                 ? new Set(model.values)
@@ -7524,7 +7668,7 @@ class ColumnFilter {
         return button.charAt(0).toUpperCase() + button.slice(1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColumnFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ColumnFilter, isStandalone: true, selector: "mt-data-grid-column-filter", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, anchorTop: { classPropertyName: "anchorTop", publicName: "anchorTop", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange", modified: "modified", valuesResolved: "valuesResolved", closed: "closed" }, host: { attributes: { "role": "presentation", "tabindex": "-1" }, listeners: { "keydown": "onKey($event)" }, properties: { "attr.aria-label": "locale.text('Column Filter')", "class.mt-grid-filter-inline": "inline()", "style.top.px": "inline() ? null : top()", "style.left.px": "inline() ? null : position().left", "style.right.px": "inline() ? null : position().right", "style.width.px": "inline() ? null : width()" }, classAttribute: "mt-grid-popup mt-grid-filter-popup" }, ngImport: i0, template: "@if (kind() === \"multi\") {\r\n  <div class=\"mt-grid-multi-filter\">\r\n    @for (child of children(); track $index; let i = $index) {\r\n      <section\r\n        class=\"mt-grid-multi-section\"\r\n        [attr.data-multi-index]=\"i\"\r\n        [attr.data-display]=\"child.display ?? 'inline'\"\r\n      >\r\n        @if (child.display === \"accordion\") {\r\n          <button\r\n            class=\"mt-grid-multi-title mtg:block mtg:[padding:10px_12px] mtg:text-start mtg:hover:[background-color:var(--mt-grid-menu-active)]\"\r\n            [attr.aria-expanded]=\"openChildren().has(i)\"\r\n            (click)=\"toggleChild(i)\"\r\n          >\r\n            <mt-grid-icon\r\n              [name]=\"openChildren().has(i) ? 'chevron-down' : 'chevron-right'\"\r\n            />\r\n            {{ childTitle(i) | mtGridText }}\r\n          </button>\r\n        } @else if (child.display === \"subMenu\") {\r\n          <button\r\n            class=\"mt-grid-multi-title mtg:block mtg:[padding:10px_12px] mtg:text-start mtg:hover:[background-color:var(--mt-grid-menu-active)]\"\r\n            aria-haspopup=\"true\"\r\n            [attr.aria-expanded]=\"subMenu() === i\"\r\n            (click)=\"subMenu.set(i)\"\r\n            (mouseenter)=\"subMenu.set(i)\"\r\n            (keydown)=\"onMultiTitleKey($event, i)\"\r\n          >\r\n            {{ childTitle(i) | mtGridText }}\r\n            <mt-grid-icon name=\"chevron-right\" />\r\n          </button>\r\n        } @else {\r\n          <div\r\n            class=\"mt-grid-multi-heading mtg:[padding:8px_12px_0] mtg:font-semibold\"\r\n          >\r\n            <span>{{ childTitle(i) | mtGridText }}</span>\r\n          </div>\r\n        }\r\n        @if (\r\n          !child.display ||\r\n          child.display === \"inline\" ||\r\n          (child.display === \"accordion\" && openChildren().has(i)) ||\r\n          (child.display === \"subMenu\" && subMenu() === i)\r\n        ) {\r\n          <div\r\n            [class.mt-grid-multi-submenu]=\"child.display === 'subMenu'\"\r\n            (keydown.escape)=\"onChildEscape($event, i)\"\r\n          >\r\n            <mt-data-grid-column-filter\r\n              [inline]=\"true\"\r\n              [kind]=\"child.filter\"\r\n              [params]=\"childParams(i)\"\r\n              [values]=\"values()\"\r\n              [formatValue]=\"formatValue()\"\r\n              [model]=\"childModel(i)\"\r\n              [direction]=\"direction()\"\r\n              (modelChange)=\"onChildModel(i, $event)\"\r\n              (closed)=\"closed.emit($event)\"\r\n              (modified)=\"modified.emit()\"\r\n              (valuesResolved)=\"valuesResolved.emit($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n} @else if (kind() === \"set\") {\r\n  <div class=\"mt-grid-set-filter mtg:flex mtg:flex-col\">\r\n    @if (!params().suppressMiniFilter) {\r\n      <div class=\"mt-grid-set-mini mtg:flex mtg:items-center\">\r\n        <mt-grid-icon name=\"search\" />\r\n        <input\r\n          type=\"text\"\r\n          autocomplete=\"off\"\r\n          [attr.aria-label]=\"'Search filter values' | mtGridText\"\r\n          [placeholder]=\"'Search...' | mtGridText\"\r\n          [disabled]=\"params().readOnly\"\r\n          [value]=\"miniFilter()\"\r\n          (input)=\"onMiniFilter($event)\"\r\n          (keydown)=\"onSetKey($event, true)\"\r\n        />\r\n        @if (miniFilter()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\r\n            [attr.aria-label]=\"'Clear' | mtGridText\"\r\n            [disabled]=\"params().readOnly\"\r\n            (click)=\"clearMiniFilter()\"\r\n          >\r\n            <mt-grid-icon name=\"cross\" />\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @if (loading()) {\r\n      <div class=\"mt-grid-set-loading mtg:p-3\" role=\"status\">\r\n        {{ \"Loading...\" | mtGridText }}\r\n      </div>\r\n    } @else if (!shownValues().length) {\r\n      <div\r\n        class=\"mt-grid-set-no-matches mtg:p-3\"\r\n        [textContent]=\"'No matches.' | mtGridText\"\r\n      ></div>\r\n    } @else {\r\n      <div\r\n        class=\"mt-grid-set-list mtg:overflow-auto mtg:p-[var(--mt-grid-dropdown-padding)]\"\r\n        [attr.role]=\"params().treeList ? 'tree' : 'listbox'\"\r\n        [attr.aria-label]=\"'Filter List' | mtGridText\"\r\n        tabindex=\"0\"\r\n        [attr.aria-activedescendant]=\"rowId(activeIndex())\"\r\n        [attr.aria-multiselectable]=\"true\"\r\n        (scroll)=\"onSetScroll($event)\"\r\n        (keydown)=\"onSetKey($event)\"\r\n      >\r\n        @if (!params().suppressSelectAll) {\r\n          <label\r\n            class=\"mt-grid-set-item mt-grid-set-select-all mtg:flex mtg:items-center mtg:gap-2 mtg:ps-3\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"selectAllState() === 'all'\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              tabindex=\"-1\"\r\n              [disabled]=\"params().readOnly\"\r\n              [checked]=\"selectAllState() === 'all'\"\r\n              [indeterminate]=\"selectAllState() === 'some'\"\r\n              (change)=\"toggleSelectAll()\"\r\n            />\r\n            <span\r\n              class=\"mt-grid-set-item-text mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\r\n              >{{\r\n                params().excelMode && miniFilter()\r\n                  ? (\"(Select All Search Results)\" | mtGridText)\r\n                  : (\"(Select All)\" | mtGridText)\r\n              }}</span\r\n            >\r\n          </label>\r\n        }\r\n        <div\r\n          [style.height.px]=\"windowStart() * listRowHeight()\"\r\n          aria-hidden=\"true\"\r\n        ></div>\r\n        @for (row of windowRows(); track row.id; let offset = $index) {\r\n          <label\r\n            class=\"mt-grid-set-item mtg:flex mtg:items-center mtg:gap-2 mtg:ps-3\"\r\n            [class.mt-grid-set-item-active]=\"\r\n              activeIndex() === windowStart() + offset\r\n            \"\r\n            [id]=\"rowId(windowStart() + offset)\"\r\n            [attr.role]=\"params().treeList ? 'treeitem' : 'option'\"\r\n            [attr.data-set-key]=\"row.group ? null : (row.keys[0] ?? '')\"\r\n            [attr.aria-selected]=\"rowChecked(row.keys)\"\r\n            [attr.aria-checked]=\"\r\n              rowPartial(row.keys) ? 'mixed' : rowChecked(row.keys)\r\n            \"\r\n            [attr.aria-level]=\"row.level + 1\"\r\n            [attr.aria-expanded]=\"\r\n              row.group ? expandedPaths().has(row.id) : null\r\n            \"\r\n            [style.padding-inline-start.px]=\"12 + row.level * 16\"\r\n            [title]=\"params().showTooltips ? row.text : ''\"\r\n            (mousedown)=\"activeRow.set(windowStart() + offset)\"\r\n          >\r\n            @if (row.group) {\r\n              <button\r\n                class=\"mt-grid-set-tree-toggle mtg:p-0\"\r\n                tabindex=\"-1\"\r\n                [attr.aria-label]=\"\r\n                  (expandedPaths().has(row.id)\r\n                    ? ('Collapse ' | mtGridText)\r\n                    : ('Expand ' | mtGridText)) + row.text\r\n                \"\r\n                (click)=\"$event.preventDefault(); toggleTree(row.id)\"\r\n              >\r\n                <mt-grid-icon\r\n                  [name]=\"\r\n                    expandedPaths().has(row.id)\r\n                      ? 'chevron-down'\r\n                      : 'chevron-right'\r\n                  \"\r\n                />\r\n              </button>\r\n            }\r\n            <input\r\n              type=\"checkbox\"\r\n              tabindex=\"-1\"\r\n              [disabled]=\"params().readOnly\"\r\n              [checked]=\"rowChecked(row.keys)\"\r\n              [indeterminate]=\"rowPartial(row.keys)\"\r\n              (change)=\"toggleKeys(row.keys)\"\r\n            />\r\n            <span\r\n              class=\"mt-grid-set-item-text mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\r\n              >{{ row.text }}</span\r\n            >\r\n          </label>\r\n        }\r\n        <div [style.height.px]=\"bottomSpace()\" aria-hidden=\"true\"></div>\r\n      </div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <fieldset\r\n    class=\"mt-grid-filter-body mtg:m-0 mtg:min-w-0 mtg:flex mtg:flex-col mtg:p-3\"\r\n    [disabled]=\"params().readOnly\"\r\n  >\r\n    @for (condition of conditions(); track $index; let index = $index) {\r\n      @if (index > 0) {\r\n        <div\r\n          class=\"mt-grid-filter-join mtg:flex mtg:justify-center mtg:gap-4 mtg:my-2\"\r\n          role=\"radiogroup\"\r\n          [attr.aria-label]=\"'Filter join operator' | mtGridText\"\r\n        >\r\n          <label\r\n            class=\"mt-grid-filter-radio mtg:inline-flex mtg:items-center mtg:gap-2\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              [name]=\"joinId(index)\"\r\n              [checked]=\"operator() === 'AND'\"\r\n              (change)=\"setOperator('AND')\"\r\n              (keydown)=\"onJoinKey($event, 'AND')\"\r\n            />\r\n            <span>{{ \"AND\" | mtGridText }}</span>\r\n          </label>\r\n          <label\r\n            class=\"mt-grid-filter-radio mtg:inline-flex mtg:items-center mtg:gap-2\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              [name]=\"joinId(index)\"\r\n              [checked]=\"operator() === 'OR'\"\r\n              (change)=\"setOperator('OR')\"\r\n              (keydown)=\"onJoinKey($event, 'OR')\"\r\n            />\r\n            <span>{{ \"OR\" | mtGridText }}</span>\r\n          </label>\r\n        </div>\r\n      }\r\n      <div class=\"mt-grid-filter-condition mtg:flex mtg:flex-col mtg:gap-2\">\r\n        <div class=\"mt-grid-filter-picker-wrap\">\r\n          <div\r\n            class=\"mt-grid-filter-picker mtg:flex mtg:items-center mtg:px-2 mtg:bg-grid-input mtg:rounded-grid-control\"\r\n            role=\"combobox\"\r\n            [tabindex]=\"params().readOnly ? -1 : 0\"\r\n            [attr.aria-disabled]=\"!!params().readOnly\"\r\n            [attr.aria-label]=\"'Filtering operator' | mtGridText\"\r\n            aria-haspopup=\"listbox\"\r\n            [attr.aria-expanded]=\"openList() === index\"\r\n            [attr.aria-controls]=\"'mt-grid-filter-list-' + index\"\r\n            (click)=\"toggleList(index)\"\r\n            (keydown)=\"onPickerKey($event, index)\"\r\n          >\r\n            <span\r\n              class=\"mt-grid-filter-picker-display mtg:flex-1 mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\r\n              >{{ label(condition.type) | mtGridText }}</span\r\n            >\r\n            <mt-grid-icon name=\"chevron-down\" />\r\n          </div>\r\n          @if (openList() === index) {\r\n            <div\r\n              class=\"mt-grid-filter-list mtg:bg-grid-menu mtg:p-[var(--mt-grid-dropdown-padding)] mtg:[box-shadow:var(--mt-grid-shadow-panel)] mtg:[border-radius:var(--mt-grid-dropdown-radius)]\"\r\n              role=\"listbox\"\r\n              [attr.aria-label]=\"'Select Field' | mtGridText\"\r\n              [id]=\"'mt-grid-filter-list-' + index\"\r\n            >\r\n              @for (type of types(); track type; let option = $index) {\r\n                <div\r\n                  class=\"mt-grid-filter-option mtg:flex mtg:items-center mtg:px-2 mtg:whitespace-nowrap\"\r\n                  role=\"option\"\r\n                  [class.mt-grid-filter-option-active]=\"\r\n                    activeOption() === option\r\n                  \"\r\n                  [attr.aria-selected]=\"activeOption() === option ? true : null\"\r\n                  (mousedown)=\"$event.preventDefault()\"\r\n                  (click)=\"chooseType(index, type)\"\r\n                >\r\n                  <span>{{ label(type) | mtGridText }}</span>\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (!takesNoValue(condition)) {\r\n          <div\r\n            class=\"mt-grid-filter-input mtg:flex mtg:items-center mtg:bg-grid-input mtg:rounded-grid-control\"\r\n          >\r\n            <mt-grid-icon name=\"search\" />\r\n            <input\r\n              [type]=\"inputType()\"\r\n              [attr.aria-label]=\"fromLabel(condition) | mtGridText\"\r\n              [placeholder]=\"fromPlaceholder(condition) | mtGridText\"\r\n              [attr.min]=\"kind() === 'date' ? dateLimit(false) : null\"\r\n              [attr.max]=\"kind() === 'date' ? dateLimit(true) : null\"\r\n              [value]=\"condition.from\"\r\n              (input)=\"onInput(index, 'from', $event)\"\r\n            />\r\n            @if (condition.from !== \"\" && inputType() !== \"date\") {\r\n              <button\r\n                type=\"button\"\r\n                class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\r\n                [attr.aria-label]=\"'Clear' | mtGridText\"\r\n                (click)=\"clearInput(index, 'from')\"\r\n              >\r\n                <mt-grid-icon name=\"cross\" />\r\n              </button>\r\n            }\r\n          </div>\r\n          @if (isRange(condition)) {\r\n            <div\r\n              class=\"mt-grid-filter-input mtg:flex mtg:items-center mtg:bg-grid-input mtg:rounded-grid-control\"\r\n            >\r\n              <mt-grid-icon name=\"search\" />\r\n              <input\r\n                [type]=\"inputType()\"\r\n                [attr.aria-label]=\"toLabel() | mtGridText\"\r\n                [placeholder]=\"toPlaceholder(condition) | mtGridText\"\r\n                [attr.min]=\"kind() === 'date' ? dateLimit(false) : null\"\r\n                [attr.max]=\"kind() === 'date' ? dateLimit(true) : null\"\r\n                [value]=\"condition.to\"\r\n                (input)=\"onInput(index, 'to', $event)\"\r\n              />\r\n              @if (condition.to !== \"\" && inputType() !== \"date\") {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\r\n                  [attr.aria-label]=\"'Clear' | mtGridText\"\r\n                  (click)=\"clearInput(index, 'to')\"\r\n                >\r\n                  <mt-grid-icon name=\"cross\" />\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </fieldset>\r\n}\r\n@if (buttons().length) {\r\n  <div\r\n    class=\"mt-grid-filter-buttons mtg:flex mtg:justify-end mtg:gap-4 mtg:[padding:8px_12px_12px]\"\r\n  >\r\n    @for (button of buttons(); track button) {\r\n      <button\r\n        [type]=\"button === 'apply' ? 'submit' : 'button'\"\r\n        class=\"mt-grid-filter-button mtg:px-4 mtg:text-grid-primary mtg:rounded-grid-control mtg:hover:[background-color:var(--mt-grid-secondary-bg-hover)]\"\r\n        [attr.data-filter-button]=\"button\"\r\n        [disabled]=\"params().readOnly\"\r\n        (click)=\"onButton(button)\"\r\n      >\r\n        {{ buttonLabel(button) | mtGridText }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height)}*{scrollbar-width:thin;scrollbar-color:var(--mt-grid-scrollbar-thumb) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--mt-grid-scrollbar-thumb);border-radius:var(--mt-grid-radius-small)}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}button,input,select,[tabindex],[role=option],[role=treeitem],[role=menuitem],[role=menuitemcheckbox],[role=tab],.mt-grid-row{transition:background-color .15s ease,color .15s ease,opacity .15s ease}button,input,select,[tabindex]{outline:none}:is(button,input,select,[tabindex]):not(.mt-grid-chart-dialog,.mt-grid-filter-popup,.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:is(.mt-grid-menu,.mt-grid-chooser){position:relative}:host(:focus-visible),:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:none}:host(:focus-visible):after,:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible:after{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;outline:1px solid var(--mt-grid-focus);outline-offset:2px}button:hover:not(:disabled){background-color:var(--mt-grid-hover)}input::placeholder{color:var(--mt-grid-placeholder)}input,select{color:var(--mt-grid-foreground);accent-color:var(--mt-grid-primary)}input:is([type=text],[type=number],[type=search],[type=date]),select{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height);background-color:var(--mt-grid-input-background);border-radius:var(--mt-grid-control-radius)}input:is([type=text],[type=number],[type=search],[type=date]):hover:not(:disabled),select:hover:not(:disabled){border-color:var(--mt-grid-input-border-hover)}input:is([type=text],[type=number],[type=search],[type=date]):is(:focus,:focus-visible):not(:disabled),select:is(:focus,:focus-visible):not(:disabled){border-color:var(--mt-grid-focus)}input[readonly]{border-color:var(--mt-grid-input-border-readonly)}input[type=checkbox]:not(.mt-grid-toggle-input),input[type=radio]{appearance:none;position:relative;display:inline-grid;place-content:center;box-sizing:border-box;flex:none;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size);margin:0;border:var(--mt-grid-checkbox-border-width) solid var(--mt-grid-input-border);border-radius:var(--mt-grid-checkbox-radius);background:var(--mt-grid-input-background);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:not(.mt-grid-toggle-input):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{background:var(--mt-grid-primary);border-color:var(--mt-grid-primary)}input[type=checkbox]:checked:after{content:\"\";width:8px;height:4px;border:solid var(--mt-grid-checkbox-mark);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg);mask:none;background:none}input[type=checkbox]:indeterminate:after{content:\"\";width:8px;height:2px;background:var(--mt-grid-checkbox-mark);border:0;transform:none}input[type=radio]:checked:after{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mt-grid-checkbox-mark)}input:disabled,select:disabled,button:disabled,[aria-disabled=true]{cursor:default;opacity:.6}mt-grid-icon{color:var(--mt-grid-icon-color)}button:hover mt-grid-icon,button[aria-expanded=true] mt-grid-icon,button[aria-selected=true] mt-grid-icon,button[aria-pressed=true] mt-grid-icon{color:var(--mt-grid-primary)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;animation:none}}input[type=checkbox]:not(.mt-grid-toggle-input):focus-visible:hover:not(:disabled),input[type=radio]:focus-visible:hover:not(:disabled){outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:host{position:fixed;z-index:1000;box-sizing:border-box;color:var(--mt-grid-foreground);font-family:var(--mt-grid-font);background:var(--mt-grid-menu-background);border:1px solid var(--mt-grid-menu-border);border-radius:4px;box-shadow:0 0 16px var(--mt-grid-shadow-color);-webkit-user-select:none;user-select:none}.mt-grid-set-mini{margin:var(--mt-grid-set-search-margin, 8px);position:relative;height:32px}.mt-grid-set-mini>mt-grid-icon{position:absolute;inset-inline-start:8px;pointer-events:none}.mt-grid-set-mini input{box-sizing:border-box;width:100%;height:32px;padding-inline:32px;font:inherit;color:inherit;background:var(--mt-grid-input-background);border:1px solid var(--mt-grid-input-border);border-radius:var(--mt-grid-control-radius);outline:none}.mt-grid-set-mini input:focus-visible{border-color:var(--mt-grid-accent)}.mt-grid-set-mini .mt-grid-filter-clear{position:absolute;inset-inline-end:8px}.mt-grid-set-list{height:var(--mt-grid-set-list-height, 256px);max-height:var(--mt-grid-set-list-height, 256px)}.mt-grid-set-item{height:24px;cursor:default}.mt-grid-set-item input{box-sizing:border-box;flex:none;width:16px;height:16px;margin:0;accent-color:var(--mt-grid-accent)}:host(.mt-grid-filter-inline){position:static;width:auto;background:transparent;border:0;border-radius:0;box-shadow:none}.mt-grid-filter-body{border:0}.mt-grid-filter-condition:first-child{margin-bottom:8px}.mt-grid-filter-picker-wrap{position:relative}.mt-grid-filter-picker{box-sizing:border-box;height:32px;border:1px solid var(--mt-grid-input-border);cursor:default;outline:none}.mt-grid-filter-picker:focus-visible,.mt-grid-filter-input:focus-within{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none;border-color:var(--mt-grid-focus)}.mt-grid-filter-list{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:1;box-sizing:border-box;border:1px solid var(--mt-grid-menu-border)}.mt-grid-filter-option{height:24px}.mt-grid-filter-option-active{background:var(--mt-grid-menu-active)}.mt-grid-filter-input{position:relative;box-sizing:border-box;height:32px;border:1px solid var(--mt-grid-input-border)}.mt-grid-filter-input>mt-grid-icon{position:absolute;inset-inline-start:8px;width:16px;height:16px;color:var(--mt-grid-secondary-foreground);pointer-events:none}.mt-grid-filter-input input{flex:1;box-sizing:border-box;width:100%;height:100%;min-width:0;padding-inline:32px 28px;font:inherit;color:inherit;background:none;border:0;outline:none}.mt-grid-filter-input input[type=date]{padding-inline-end:8px}.mt-grid-filter-clear{position:absolute;inset-inline-end:8px;width:16px;height:16px;color:var(--mt-grid-secondary-foreground);background:none;border:0;cursor:pointer}.mt-grid-filter-join{height:17px}.mt-grid-filter-radio input{width:16px;height:16px;margin:0}.mt-grid-filter-buttons{box-sizing:border-box;height:59px;border-top:1px solid var(--mt-grid-menu-separator)}.mt-grid-filter-button{height:39px;font:inherit;color:inherit;background:var(--mt-grid-input-background);border:1px solid var(--mt-grid-input-border);cursor:pointer}.mt-grid-set-list:focus-visible .mt-grid-set-item-active{background:var(--mt-grid-menu-active)}.mt-grid-set-list:focus-visible{outline:2px solid var(--mt-grid-accent);outline-offset:-2px}.mt-grid-set-tree-toggle{border:0;background:none;color:inherit;width:16px;cursor:pointer}.mt-grid-multi-section{position:relative;border-bottom:1px solid var(--mt-grid-menu-border)}.mt-grid-multi-title{width:100%;border:0;color:inherit;font:inherit;background:transparent;cursor:pointer}.mt-grid-multi-submenu{position:absolute;inset-inline-start:calc(100% - 4px);top:0;width:260px;z-index:2;background:var(--mt-grid-menu-background);border:1px solid var(--mt-grid-menu-border);box-shadow:0 0 16px var(--mt-grid-shadow-color)}:host{border-radius:var(--mt-grid-overlay-radius);box-shadow:var(--mt-grid-shadow-popup)}.mt-grid-filter-button{height:var(--mt-grid-input-height);background:var(--mt-grid-chrome-background)}.mt-grid-filter-button[data-filter-button=apply]{color:var(--mt-grid-checkbox-mark);background:var(--mt-grid-accent);border-color:var(--mt-grid-accent)}.mt-grid-filter-list,.mt-grid-multi-submenu{border-radius:var(--mt-grid-overlay-radius);box-shadow:var(--mt-grid-shadow-popup)}.mt-grid-set-item,.mt-grid-filter-option{height:var(--mt-grid-dropdown-row-height)}.mt-grid-set-item input{order:0;margin:0;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size)}.mt-grid-filter-list{border-color:var(--mt-grid-input-border)}.mt-grid-filter-option[aria-selected=true]:after{content:\"\\2713\";width:16px;margin-inline-start:auto;color:var(--mt-grid-primary)}.mt-grid-filter-button{height:var(--mt-grid-button-height);border-color:transparent;font-size:var(--mt-grid-font-size);font-weight:500;background:var(--mt-grid-secondary-bg)}.mt-grid-filter-picker:focus-visible,.mt-grid-filter-input:focus-within{border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-filter-button[data-filter-button=apply]:hover{background:var(--mt-grid-primary-700)}.mt-grid-filter-option[aria-selected=true]{background:transparent}.mt-grid-filter-option-active[aria-selected=true]{background:var(--mt-grid-hover)}.mt-grid-filter-picker:hover,.mt-grid-filter-input:hover{border-color:var(--mt-grid-input-border-hover)}.mt-grid-filter-picker:is(:focus,:focus-visible),.mt-grid-filter-input:focus-within{border-color:var(--mt-grid-focus)}.mt-grid-filter-input input:focus-visible{box-shadow:none;outline:none}.mt-grid-set-item{height:var(--mt-grid-set-row-height, 32px)}.mt-grid-set-mini input:focus{outline:1px solid var(--mt-grid-focus);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ColumnFilter), selector: "mt-data-grid-column-filter", inputs: ["kind", "model", "params", "values", "formatValue", "position", "anchorTop", "inline", "direction"], outputs: ["modelChange", "modified", "valuesResolved", "closed"] }, { kind: "component", type: i0.forwardRef(() => GridIcon), selector: "mt-grid-icon", inputs: ["name"] }, { kind: "pipe", type: i0.forwardRef(() => MtGridTextPipe), name: "mtGridText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ColumnFilter, isStandalone: true, selector: "mt-data-grid-column-filter", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, anchorTop: { classPropertyName: "anchorTop", publicName: "anchorTop", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange", modified: "modified", valuesResolved: "valuesResolved", closed: "closed" }, host: { attributes: { "role": "presentation", "tabindex": "-1" }, listeners: { "keydown": "onKey($event)" }, properties: { "attr.aria-label": "locale.text('Column Filter')", "class.mt-grid-filter-inline": "inline()", "style.top.px": "inline() ? null : top()", "style.left.px": "inline() ? null : position().left", "style.right.px": "inline() ? null : position().right", "style.width.px": "inline() ? null : width()" }, classAttribute: "mt-grid-popup mt-grid-filter-popup" }, ngImport: i0, template: "@if (kind() === \"multi\") {\n  <div class=\"mt-grid-multi-filter\">\n    @for (child of children(); track $index; let i = $index) {\n      <section\n        class=\"mt-grid-multi-section\"\n        [attr.data-multi-index]=\"i\"\n        [attr.data-display]=\"child.display ?? 'inline'\"\n      >\n        @if (child.display === \"accordion\") {\n          <button\n            class=\"mt-grid-multi-title mtg:block mtg:[padding:10px_12px] mtg:text-start mtg:hover:[background-color:var(--mt-grid-menu-active)]\"\n            [attr.aria-expanded]=\"openChildren().has(i)\"\n            (click)=\"toggleChild(i)\"\n          >\n            <mt-grid-icon\n              [name]=\"openChildren().has(i) ? 'chevron-down' : 'chevron-right'\"\n            />\n            {{ childTitle(i) | mtGridText }}\n          </button>\n        } @else if (child.display === \"subMenu\") {\n          <button\n            class=\"mt-grid-multi-title mtg:block mtg:[padding:10px_12px] mtg:text-start mtg:hover:[background-color:var(--mt-grid-menu-active)]\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"subMenu() === i\"\n            (click)=\"subMenu.set(i)\"\n            (mouseenter)=\"subMenu.set(i)\"\n            (keydown)=\"onMultiTitleKey($event, i)\"\n          >\n            {{ childTitle(i) | mtGridText }}\n            <mt-grid-icon name=\"chevron-right\" />\n          </button>\n        } @else {\n          <div\n            class=\"mt-grid-multi-heading mtg:[padding:8px_12px_0] mtg:font-semibold\"\n          >\n            <span>{{ childTitle(i) | mtGridText }}</span>\n          </div>\n        }\n        @if (\n          !child.display ||\n          child.display === \"inline\" ||\n          (child.display === \"accordion\" && openChildren().has(i)) ||\n          (child.display === \"subMenu\" && subMenu() === i)\n        ) {\n          <div\n            [class.mt-grid-multi-submenu]=\"child.display === 'subMenu'\"\n            (keydown.escape)=\"onChildEscape($event, i)\"\n          >\n            <mt-data-grid-column-filter\n              [inline]=\"true\"\n              [kind]=\"child.filter\"\n              [params]=\"childParams(i)\"\n              [values]=\"values()\"\n              [formatValue]=\"formatValue()\"\n              [model]=\"childModel(i)\"\n              [direction]=\"direction()\"\n              (modelChange)=\"onChildModel(i, $event)\"\n              (closed)=\"closed.emit($event)\"\n              (modified)=\"modified.emit()\"\n              (valuesResolved)=\"valuesResolved.emit($event)\"\n            />\n          </div>\n        }\n      </section>\n    }\n  </div>\n} @else if (kind() === \"set\") {\n  <div class=\"mt-grid-set-filter mtg:flex mtg:flex-col\">\n    @if (!params().suppressMiniFilter) {\n      <div class=\"mt-grid-set-mini mtg:flex mtg:items-center\">\n        <mt-grid-icon name=\"search\" />\n        <input\n          type=\"text\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"'Search filter values' | mtGridText\"\n          [placeholder]=\"'Search...' | mtGridText\"\n          [disabled]=\"params().readOnly\"\n          [value]=\"miniFilter()\"\n          (input)=\"onMiniFilter($event)\"\n          (keydown)=\"onSetKey($event, true)\"\n        />\n        @if (miniFilter()) {\n          <button\n            type=\"button\"\n            class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\n            [attr.aria-label]=\"'Clear' | mtGridText\"\n            [disabled]=\"params().readOnly\"\n            (click)=\"clearMiniFilter()\"\n          >\n            <mt-grid-icon name=\"cross\" />\n          </button>\n        }\n      </div>\n    }\n    @if (loading()) {\n      <div class=\"mt-grid-set-loading mtg:p-3\" role=\"status\">\n        {{ \"Loading...\" | mtGridText }}\n      </div>\n    } @else if (remoteFailed()) {\n      <div\n        class=\"mt-grid-set-failed mtg:p-3\"\n        role=\"alert\"\n        [textContent]=\"'Could not load values.' | mtGridText\"\n      ></div>\n    } @else if (!shownValues().length) {\n      <div\n        class=\"mt-grid-set-no-matches mtg:p-3\"\n        [attr.role]=\"remote() ? 'status' : null\"\n        [textContent]=\"\n          (remoteNeedsText() ? 'Type to search...' : 'No matches.') | mtGridText\n        \"\n      ></div>\n    } @else {\n      <div\n        class=\"mt-grid-set-list mtg:overflow-auto mtg:p-[var(--mt-grid-dropdown-padding)]\"\n        [attr.role]=\"params().treeList ? 'tree' : 'listbox'\"\n        [attr.aria-label]=\"'Filter List' | mtGridText\"\n        tabindex=\"0\"\n        [attr.aria-activedescendant]=\"rowId(activeIndex())\"\n        [attr.aria-multiselectable]=\"!remote()?.single\"\n        (scroll)=\"onSetScroll($event)\"\n        (keydown)=\"onSetKey($event)\"\n      >\n        @if (showSelectAll()) {\n          <label\n            class=\"mt-grid-set-item mt-grid-set-select-all mtg:flex mtg:items-center mtg:gap-2 mtg:ps-3\"\n            role=\"option\"\n            [attr.aria-selected]=\"selectAllState() === 'all'\"\n          >\n            <input\n              type=\"checkbox\"\n              tabindex=\"-1\"\n              [disabled]=\"params().readOnly\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              (change)=\"toggleSelectAll()\"\n            />\n            <span\n              class=\"mt-grid-set-item-text mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\n              >{{\n                params().excelMode && miniFilter()\n                  ? (\"(Select All Search Results)\" | mtGridText)\n                  : (\"(Select All)\" | mtGridText)\n              }}</span\n            >\n          </label>\n        }\n        <div\n          [style.height.px]=\"windowStart() * listRowHeight()\"\n          aria-hidden=\"true\"\n        ></div>\n        @for (row of windowRows(); track row.id; let offset = $index) {\n          <label\n            class=\"mt-grid-set-item mtg:flex mtg:items-center mtg:gap-2 mtg:ps-3\"\n            [class.mt-grid-set-item-active]=\"\n              activeIndex() === windowStart() + offset\n            \"\n            [id]=\"rowId(windowStart() + offset)\"\n            [attr.role]=\"params().treeList ? 'treeitem' : 'option'\"\n            [attr.data-set-key]=\"row.group ? null : (row.keys[0] ?? '')\"\n            [attr.aria-selected]=\"rowChecked(row.keys)\"\n            [attr.aria-checked]=\"\n              rowPartial(row.keys) ? 'mixed' : rowChecked(row.keys)\n            \"\n            [attr.aria-level]=\"row.level + 1\"\n            [attr.aria-expanded]=\"\n              row.group ? expandedPaths().has(row.id) : null\n            \"\n            [style.padding-inline-start.px]=\"12 + row.level * 16\"\n            [title]=\"params().showTooltips ? row.text : ''\"\n            (mousedown)=\"activeRow.set(windowStart() + offset)\"\n          >\n            @if (row.group) {\n              <button\n                class=\"mt-grid-set-tree-toggle mtg:p-0\"\n                tabindex=\"-1\"\n                [attr.aria-label]=\"\n                  (expandedPaths().has(row.id)\n                    ? ('Collapse ' | mtGridText)\n                    : ('Expand ' | mtGridText)) + row.text\n                \"\n                (click)=\"$event.preventDefault(); toggleTree(row.id)\"\n              >\n                <mt-grid-icon\n                  [name]=\"\n                    expandedPaths().has(row.id)\n                      ? 'chevron-down'\n                      : 'chevron-right'\n                  \"\n                />\n              </button>\n            }\n            <input\n              type=\"checkbox\"\n              tabindex=\"-1\"\n              [disabled]=\"params().readOnly\"\n              [checked]=\"rowChecked(row.keys)\"\n              [indeterminate]=\"rowPartial(row.keys)\"\n              (change)=\"toggleKeys(row.keys)\"\n            />\n            <span\n              class=\"mt-grid-set-item-text mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\n              >{{ row.text }}</span\n            >\n          </label>\n        }\n        <div [style.height.px]=\"bottomSpace()\" aria-hidden=\"true\"></div>\n      </div>\n    }\n  </div>\n} @else {\n  <fieldset\n    class=\"mt-grid-filter-body mtg:m-0 mtg:min-w-0 mtg:flex mtg:flex-col mtg:p-3\"\n    [disabled]=\"params().readOnly\"\n  >\n    @for (condition of conditions(); track $index; let index = $index) {\n      @if (index > 0) {\n        <div\n          class=\"mt-grid-filter-join mtg:flex mtg:justify-center mtg:gap-4 mtg:my-2\"\n          role=\"radiogroup\"\n          [attr.aria-label]=\"'Filter join operator' | mtGridText\"\n        >\n          <label\n            class=\"mt-grid-filter-radio mtg:inline-flex mtg:items-center mtg:gap-2\"\n          >\n            <input\n              type=\"radio\"\n              [name]=\"joinId(index)\"\n              [checked]=\"operator() === 'AND'\"\n              (change)=\"setOperator('AND')\"\n              (keydown)=\"onJoinKey($event, 'AND')\"\n            />\n            <span>{{ \"AND\" | mtGridText }}</span>\n          </label>\n          <label\n            class=\"mt-grid-filter-radio mtg:inline-flex mtg:items-center mtg:gap-2\"\n          >\n            <input\n              type=\"radio\"\n              [name]=\"joinId(index)\"\n              [checked]=\"operator() === 'OR'\"\n              (change)=\"setOperator('OR')\"\n              (keydown)=\"onJoinKey($event, 'OR')\"\n            />\n            <span>{{ \"OR\" | mtGridText }}</span>\n          </label>\n        </div>\n      }\n      <div class=\"mt-grid-filter-condition mtg:flex mtg:flex-col mtg:gap-2\">\n        <div class=\"mt-grid-filter-picker-wrap\">\n          <div\n            class=\"mt-grid-filter-picker mtg:flex mtg:items-center mtg:px-2 mtg:bg-grid-input mtg:rounded-grid-control\"\n            role=\"combobox\"\n            [tabindex]=\"params().readOnly ? -1 : 0\"\n            [attr.aria-disabled]=\"!!params().readOnly\"\n            [attr.aria-label]=\"'Filtering operator' | mtGridText\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"openList() === index\"\n            [attr.aria-controls]=\"'mt-grid-filter-list-' + index\"\n            (click)=\"toggleList(index)\"\n            (keydown)=\"onPickerKey($event, index)\"\n          >\n            <span\n              class=\"mt-grid-filter-picker-display mtg:flex-1 mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\n              >{{ label(condition.type) | mtGridText }}</span\n            >\n            <mt-grid-icon name=\"chevron-down\" />\n          </div>\n          @if (openList() === index) {\n            <div\n              class=\"mt-grid-filter-list mtg:bg-grid-menu mtg:p-[var(--mt-grid-dropdown-padding)] mtg:[box-shadow:var(--mt-grid-shadow-panel)] mtg:[border-radius:var(--mt-grid-dropdown-radius)]\"\n              role=\"listbox\"\n              [attr.aria-label]=\"'Select Field' | mtGridText\"\n              [id]=\"'mt-grid-filter-list-' + index\"\n            >\n              @for (type of types(); track type; let option = $index) {\n                <div\n                  class=\"mt-grid-filter-option mtg:flex mtg:items-center mtg:px-2 mtg:whitespace-nowrap\"\n                  role=\"option\"\n                  [class.mt-grid-filter-option-active]=\"\n                    activeOption() === option\n                  \"\n                  [attr.aria-selected]=\"activeOption() === option ? true : null\"\n                  (mousedown)=\"$event.preventDefault()\"\n                  (click)=\"chooseType(index, type)\"\n                >\n                  <span>{{ label(type) | mtGridText }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n        @if (!takesNoValue(condition)) {\n          <div\n            class=\"mt-grid-filter-input mtg:flex mtg:items-center mtg:bg-grid-input mtg:rounded-grid-control\"\n          >\n            <mt-grid-icon name=\"search\" />\n            <input\n              [type]=\"inputType()\"\n              [attr.aria-label]=\"fromLabel(condition) | mtGridText\"\n              [placeholder]=\"fromPlaceholder(condition) | mtGridText\"\n              [attr.min]=\"kind() === 'date' ? dateLimit(false) : null\"\n              [attr.max]=\"kind() === 'date' ? dateLimit(true) : null\"\n              [value]=\"condition.from\"\n              (input)=\"onInput(index, 'from', $event)\"\n            />\n            @if (condition.from !== \"\" && inputType() !== \"date\") {\n              <button\n                type=\"button\"\n                class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\n                [attr.aria-label]=\"'Clear' | mtGridText\"\n                (click)=\"clearInput(index, 'from')\"\n              >\n                <mt-grid-icon name=\"cross\" />\n              </button>\n            }\n          </div>\n          @if (isRange(condition)) {\n            <div\n              class=\"mt-grid-filter-input mtg:flex mtg:items-center mtg:bg-grid-input mtg:rounded-grid-control\"\n            >\n              <mt-grid-icon name=\"search\" />\n              <input\n                [type]=\"inputType()\"\n                [attr.aria-label]=\"toLabel() | mtGridText\"\n                [placeholder]=\"toPlaceholder(condition) | mtGridText\"\n                [attr.min]=\"kind() === 'date' ? dateLimit(false) : null\"\n                [attr.max]=\"kind() === 'date' ? dateLimit(true) : null\"\n                [value]=\"condition.to\"\n                (input)=\"onInput(index, 'to', $event)\"\n              />\n              @if (condition.to !== \"\" && inputType() !== \"date\") {\n                <button\n                  type=\"button\"\n                  class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\n                  [attr.aria-label]=\"'Clear' | mtGridText\"\n                  (click)=\"clearInput(index, 'to')\"\n                >\n                  <mt-grid-icon name=\"cross\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  </fieldset>\n}\n@if (buttons().length) {\n  <div\n    class=\"mt-grid-filter-buttons mtg:flex mtg:justify-end mtg:gap-4 mtg:[padding:8px_12px_12px]\"\n  >\n    @for (button of buttons(); track button) {\n      <button\n        [type]=\"button === 'apply' ? 'submit' : 'button'\"\n        class=\"mt-grid-filter-button mtg:px-4 mtg:text-grid-primary mtg:rounded-grid-control mtg:hover:[background-color:var(--mt-grid-secondary-bg-hover)]\"\n        [attr.data-filter-button]=\"button\"\n        [disabled]=\"params().readOnly\"\n        (click)=\"onButton(button)\"\n      >\n        {{ buttonLabel(button) | mtGridText }}\n      </button>\n    }\n  </div>\n}\n", styles: [":host{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height)}*{scrollbar-width:thin;scrollbar-color:var(--mt-grid-scrollbar-thumb) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--mt-grid-scrollbar-thumb);border-radius:var(--mt-grid-radius-small)}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}button,input,select,[tabindex],[role=option],[role=treeitem],[role=menuitem],[role=menuitemcheckbox],[role=tab],.mt-grid-row{transition:background-color .15s ease,color .15s ease,opacity .15s ease}button,input,select,[tabindex]{outline:none}:is(button,input,select,[tabindex]):not(.mt-grid-chart-dialog,.mt-grid-filter-popup,.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:is(.mt-grid-menu,.mt-grid-chooser){position:relative}:host(:focus-visible),:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:none}:host(:focus-visible):after,:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible:after{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;outline:1px solid var(--mt-grid-focus);outline-offset:2px}button:hover:not(:disabled){background-color:var(--mt-grid-hover)}input::placeholder{color:var(--mt-grid-placeholder)}input,select{color:var(--mt-grid-foreground);accent-color:var(--mt-grid-primary)}input:is([type=text],[type=number],[type=search],[type=date]),select{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height);background-color:var(--mt-grid-input-background);border-radius:var(--mt-grid-control-radius)}input:is([type=text],[type=number],[type=search],[type=date]):hover:not(:disabled),select:hover:not(:disabled){border-color:var(--mt-grid-input-border-hover)}input:is([type=text],[type=number],[type=search],[type=date]):is(:focus,:focus-visible):not(:disabled),select:is(:focus,:focus-visible):not(:disabled){border-color:var(--mt-grid-focus)}input[readonly]{border-color:var(--mt-grid-input-border-readonly)}input[type=checkbox]:not(.mt-grid-toggle-input),input[type=radio]{appearance:none;position:relative;display:inline-grid;place-content:center;box-sizing:border-box;flex:none;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size);margin:0;border:var(--mt-grid-checkbox-border-width) solid var(--mt-grid-input-border);border-radius:var(--mt-grid-checkbox-radius);background:var(--mt-grid-input-background);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:not(.mt-grid-toggle-input):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{background:var(--mt-grid-primary);border-color:var(--mt-grid-primary)}input[type=checkbox]:checked:after{content:\"\";width:8px;height:4px;border:solid var(--mt-grid-checkbox-mark);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg);mask:none;background:none}input[type=checkbox]:indeterminate:after{content:\"\";width:8px;height:2px;background:var(--mt-grid-checkbox-mark);border:0;transform:none}input[type=radio]:checked:after{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mt-grid-checkbox-mark)}input:disabled,select:disabled,button:disabled,[aria-disabled=true]{cursor:default;opacity:.6}mt-grid-icon{color:var(--mt-grid-icon-color)}button:hover mt-grid-icon,button[aria-expanded=true] mt-grid-icon,button[aria-selected=true] mt-grid-icon,button[aria-pressed=true] mt-grid-icon{color:var(--mt-grid-primary)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;animation:none}}input[type=checkbox]:not(.mt-grid-toggle-input):focus-visible:hover:not(:disabled),input[type=radio]:focus-visible:hover:not(:disabled){outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:host{position:fixed;z-index:1000;box-sizing:border-box;color:var(--mt-grid-foreground);font-family:var(--mt-grid-font);background:var(--mt-grid-menu-background);border:1px solid var(--mt-grid-menu-border);border-radius:4px;box-shadow:0 0 16px var(--mt-grid-shadow-color);-webkit-user-select:none;user-select:none}.mt-grid-set-mini{margin:var(--mt-grid-set-search-margin, 8px);position:relative;height:32px}.mt-grid-set-mini>mt-grid-icon{position:absolute;inset-inline-start:8px;pointer-events:none}.mt-grid-set-mini input{box-sizing:border-box;width:100%;height:32px;padding-inline:32px;font:inherit;color:inherit;background:var(--mt-grid-input-background);border:1px solid var(--mt-grid-input-border);border-radius:var(--mt-grid-control-radius);outline:none}.mt-grid-set-mini input:focus-visible{border-color:var(--mt-grid-accent)}.mt-grid-set-mini .mt-grid-filter-clear{position:absolute;inset-inline-end:8px}.mt-grid-set-list{height:var(--mt-grid-set-list-height, 256px);max-height:var(--mt-grid-set-list-height, 256px)}.mt-grid-set-item{height:24px;cursor:default}.mt-grid-set-item input{box-sizing:border-box;flex:none;width:16px;height:16px;margin:0;accent-color:var(--mt-grid-accent)}:host(.mt-grid-filter-inline){position:static;width:auto;background:transparent;border:0;border-radius:0;box-shadow:none}.mt-grid-filter-body{border:0}.mt-grid-filter-condition:first-child{margin-bottom:8px}.mt-grid-filter-picker-wrap{position:relative}.mt-grid-filter-picker{box-sizing:border-box;height:32px;border:1px solid var(--mt-grid-input-border);cursor:default;outline:none}.mt-grid-filter-picker:focus-visible,.mt-grid-filter-input:focus-within{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none;border-color:var(--mt-grid-focus)}.mt-grid-filter-list{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:1;box-sizing:border-box;border:1px solid var(--mt-grid-menu-border)}.mt-grid-filter-option{height:24px}.mt-grid-filter-option-active{background:var(--mt-grid-menu-active)}.mt-grid-filter-input{position:relative;box-sizing:border-box;height:32px;border:1px solid var(--mt-grid-input-border)}.mt-grid-filter-input>mt-grid-icon{position:absolute;inset-inline-start:8px;width:16px;height:16px;color:var(--mt-grid-secondary-foreground);pointer-events:none}.mt-grid-filter-input input{flex:1;box-sizing:border-box;width:100%;height:100%;min-width:0;padding-inline:32px 28px;font:inherit;color:inherit;background:none;border:0;outline:none}.mt-grid-filter-input input[type=date]{padding-inline-end:8px}.mt-grid-filter-clear{position:absolute;inset-inline-end:8px;width:16px;height:16px;color:var(--mt-grid-secondary-foreground);background:none;border:0;cursor:pointer}.mt-grid-filter-join{height:17px}.mt-grid-filter-radio input{width:16px;height:16px;margin:0}.mt-grid-filter-buttons{box-sizing:border-box;height:59px;border-top:1px solid var(--mt-grid-menu-separator)}.mt-grid-filter-button{height:39px;font:inherit;color:inherit;background:var(--mt-grid-input-background);border:1px solid var(--mt-grid-input-border);cursor:pointer}.mt-grid-set-list:focus-visible .mt-grid-set-item-active{background:var(--mt-grid-menu-active)}.mt-grid-set-list:focus-visible{outline:2px solid var(--mt-grid-accent);outline-offset:-2px}.mt-grid-set-tree-toggle{border:0;background:none;color:inherit;width:16px;cursor:pointer}.mt-grid-multi-section{position:relative;border-bottom:1px solid var(--mt-grid-menu-border)}.mt-grid-multi-title{width:100%;border:0;color:inherit;font:inherit;background:transparent;cursor:pointer}.mt-grid-multi-submenu{position:absolute;inset-inline-start:calc(100% - 4px);top:0;width:260px;z-index:2;background:var(--mt-grid-menu-background);border:1px solid var(--mt-grid-menu-border);box-shadow:0 0 16px var(--mt-grid-shadow-color)}:host{border-radius:var(--mt-grid-overlay-radius);box-shadow:var(--mt-grid-shadow-popup)}.mt-grid-filter-button{height:var(--mt-grid-input-height);background:var(--mt-grid-chrome-background)}.mt-grid-filter-button[data-filter-button=apply]{color:var(--mt-grid-checkbox-mark);background:var(--mt-grid-accent);border-color:var(--mt-grid-accent)}.mt-grid-filter-list,.mt-grid-multi-submenu{border-radius:var(--mt-grid-overlay-radius);box-shadow:var(--mt-grid-shadow-popup)}.mt-grid-set-item,.mt-grid-filter-option{height:var(--mt-grid-dropdown-row-height)}.mt-grid-set-item input{order:0;margin:0;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size)}.mt-grid-filter-list{border-color:var(--mt-grid-input-border)}.mt-grid-filter-option[aria-selected=true]:after{content:\"\\2713\";width:16px;margin-inline-start:auto;color:var(--mt-grid-primary)}.mt-grid-filter-button{height:var(--mt-grid-button-height);border-color:transparent;font-size:var(--mt-grid-font-size);font-weight:500;background:var(--mt-grid-secondary-bg)}.mt-grid-filter-picker:focus-visible,.mt-grid-filter-input:focus-within{border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-filter-button[data-filter-button=apply]:hover{background:var(--mt-grid-primary-700)}.mt-grid-filter-option[aria-selected=true]{background:transparent}.mt-grid-filter-option-active[aria-selected=true]{background:var(--mt-grid-hover)}.mt-grid-filter-picker:hover,.mt-grid-filter-input:hover{border-color:var(--mt-grid-input-border-hover)}.mt-grid-filter-picker:is(:focus,:focus-visible),.mt-grid-filter-input:focus-within{border-color:var(--mt-grid-focus)}.mt-grid-filter-input input:focus-visible{box-shadow:none;outline:none}.mt-grid-set-item{height:var(--mt-grid-set-row-height, 32px)}.mt-grid-set-mini input:focus{outline:1px solid var(--mt-grid-focus);outline-offset:2px}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ColumnFilter), selector: "mt-data-grid-column-filter", inputs: ["kind", "model", "params", "values", "formatValue", "position", "anchorTop", "inline", "direction"], outputs: ["modelChange", "modified", "valuesResolved", "closed"] }, { kind: "component", type: i0.forwardRef(() => GridIcon), selector: "mt-grid-icon", inputs: ["name"] }, { kind: "pipe", type: i0.forwardRef(() => MtGridTextPipe), name: "mtGridText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ColumnFilter, decorators: [{
             type: Component,
@@ -7539,7 +7683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         '[style.right.px]': 'inline() ? null : position().right',
                         '[style.width.px]': 'inline() ? null : width()',
                         '(keydown)': 'onKey($event)',
-                    }, template: "@if (kind() === \"multi\") {\r\n  <div class=\"mt-grid-multi-filter\">\r\n    @for (child of children(); track $index; let i = $index) {\r\n      <section\r\n        class=\"mt-grid-multi-section\"\r\n        [attr.data-multi-index]=\"i\"\r\n        [attr.data-display]=\"child.display ?? 'inline'\"\r\n      >\r\n        @if (child.display === \"accordion\") {\r\n          <button\r\n            class=\"mt-grid-multi-title mtg:block mtg:[padding:10px_12px] mtg:text-start mtg:hover:[background-color:var(--mt-grid-menu-active)]\"\r\n            [attr.aria-expanded]=\"openChildren().has(i)\"\r\n            (click)=\"toggleChild(i)\"\r\n          >\r\n            <mt-grid-icon\r\n              [name]=\"openChildren().has(i) ? 'chevron-down' : 'chevron-right'\"\r\n            />\r\n            {{ childTitle(i) | mtGridText }}\r\n          </button>\r\n        } @else if (child.display === \"subMenu\") {\r\n          <button\r\n            class=\"mt-grid-multi-title mtg:block mtg:[padding:10px_12px] mtg:text-start mtg:hover:[background-color:var(--mt-grid-menu-active)]\"\r\n            aria-haspopup=\"true\"\r\n            [attr.aria-expanded]=\"subMenu() === i\"\r\n            (click)=\"subMenu.set(i)\"\r\n            (mouseenter)=\"subMenu.set(i)\"\r\n            (keydown)=\"onMultiTitleKey($event, i)\"\r\n          >\r\n            {{ childTitle(i) | mtGridText }}\r\n            <mt-grid-icon name=\"chevron-right\" />\r\n          </button>\r\n        } @else {\r\n          <div\r\n            class=\"mt-grid-multi-heading mtg:[padding:8px_12px_0] mtg:font-semibold\"\r\n          >\r\n            <span>{{ childTitle(i) | mtGridText }}</span>\r\n          </div>\r\n        }\r\n        @if (\r\n          !child.display ||\r\n          child.display === \"inline\" ||\r\n          (child.display === \"accordion\" && openChildren().has(i)) ||\r\n          (child.display === \"subMenu\" && subMenu() === i)\r\n        ) {\r\n          <div\r\n            [class.mt-grid-multi-submenu]=\"child.display === 'subMenu'\"\r\n            (keydown.escape)=\"onChildEscape($event, i)\"\r\n          >\r\n            <mt-data-grid-column-filter\r\n              [inline]=\"true\"\r\n              [kind]=\"child.filter\"\r\n              [params]=\"childParams(i)\"\r\n              [values]=\"values()\"\r\n              [formatValue]=\"formatValue()\"\r\n              [model]=\"childModel(i)\"\r\n              [direction]=\"direction()\"\r\n              (modelChange)=\"onChildModel(i, $event)\"\r\n              (closed)=\"closed.emit($event)\"\r\n              (modified)=\"modified.emit()\"\r\n              (valuesResolved)=\"valuesResolved.emit($event)\"\r\n            />\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n} @else if (kind() === \"set\") {\r\n  <div class=\"mt-grid-set-filter mtg:flex mtg:flex-col\">\r\n    @if (!params().suppressMiniFilter) {\r\n      <div class=\"mt-grid-set-mini mtg:flex mtg:items-center\">\r\n        <mt-grid-icon name=\"search\" />\r\n        <input\r\n          type=\"text\"\r\n          autocomplete=\"off\"\r\n          [attr.aria-label]=\"'Search filter values' | mtGridText\"\r\n          [placeholder]=\"'Search...' | mtGridText\"\r\n          [disabled]=\"params().readOnly\"\r\n          [value]=\"miniFilter()\"\r\n          (input)=\"onMiniFilter($event)\"\r\n          (keydown)=\"onSetKey($event, true)\"\r\n        />\r\n        @if (miniFilter()) {\r\n          <button\r\n            type=\"button\"\r\n            class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\r\n            [attr.aria-label]=\"'Clear' | mtGridText\"\r\n            [disabled]=\"params().readOnly\"\r\n            (click)=\"clearMiniFilter()\"\r\n          >\r\n            <mt-grid-icon name=\"cross\" />\r\n          </button>\r\n        }\r\n      </div>\r\n    }\r\n    @if (loading()) {\r\n      <div class=\"mt-grid-set-loading mtg:p-3\" role=\"status\">\r\n        {{ \"Loading...\" | mtGridText }}\r\n      </div>\r\n    } @else if (!shownValues().length) {\r\n      <div\r\n        class=\"mt-grid-set-no-matches mtg:p-3\"\r\n        [textContent]=\"'No matches.' | mtGridText\"\r\n      ></div>\r\n    } @else {\r\n      <div\r\n        class=\"mt-grid-set-list mtg:overflow-auto mtg:p-[var(--mt-grid-dropdown-padding)]\"\r\n        [attr.role]=\"params().treeList ? 'tree' : 'listbox'\"\r\n        [attr.aria-label]=\"'Filter List' | mtGridText\"\r\n        tabindex=\"0\"\r\n        [attr.aria-activedescendant]=\"rowId(activeIndex())\"\r\n        [attr.aria-multiselectable]=\"true\"\r\n        (scroll)=\"onSetScroll($event)\"\r\n        (keydown)=\"onSetKey($event)\"\r\n      >\r\n        @if (!params().suppressSelectAll) {\r\n          <label\r\n            class=\"mt-grid-set-item mt-grid-set-select-all mtg:flex mtg:items-center mtg:gap-2 mtg:ps-3\"\r\n            role=\"option\"\r\n            [attr.aria-selected]=\"selectAllState() === 'all'\"\r\n          >\r\n            <input\r\n              type=\"checkbox\"\r\n              tabindex=\"-1\"\r\n              [disabled]=\"params().readOnly\"\r\n              [checked]=\"selectAllState() === 'all'\"\r\n              [indeterminate]=\"selectAllState() === 'some'\"\r\n              (change)=\"toggleSelectAll()\"\r\n            />\r\n            <span\r\n              class=\"mt-grid-set-item-text mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\r\n              >{{\r\n                params().excelMode && miniFilter()\r\n                  ? (\"(Select All Search Results)\" | mtGridText)\r\n                  : (\"(Select All)\" | mtGridText)\r\n              }}</span\r\n            >\r\n          </label>\r\n        }\r\n        <div\r\n          [style.height.px]=\"windowStart() * listRowHeight()\"\r\n          aria-hidden=\"true\"\r\n        ></div>\r\n        @for (row of windowRows(); track row.id; let offset = $index) {\r\n          <label\r\n            class=\"mt-grid-set-item mtg:flex mtg:items-center mtg:gap-2 mtg:ps-3\"\r\n            [class.mt-grid-set-item-active]=\"\r\n              activeIndex() === windowStart() + offset\r\n            \"\r\n            [id]=\"rowId(windowStart() + offset)\"\r\n            [attr.role]=\"params().treeList ? 'treeitem' : 'option'\"\r\n            [attr.data-set-key]=\"row.group ? null : (row.keys[0] ?? '')\"\r\n            [attr.aria-selected]=\"rowChecked(row.keys)\"\r\n            [attr.aria-checked]=\"\r\n              rowPartial(row.keys) ? 'mixed' : rowChecked(row.keys)\r\n            \"\r\n            [attr.aria-level]=\"row.level + 1\"\r\n            [attr.aria-expanded]=\"\r\n              row.group ? expandedPaths().has(row.id) : null\r\n            \"\r\n            [style.padding-inline-start.px]=\"12 + row.level * 16\"\r\n            [title]=\"params().showTooltips ? row.text : ''\"\r\n            (mousedown)=\"activeRow.set(windowStart() + offset)\"\r\n          >\r\n            @if (row.group) {\r\n              <button\r\n                class=\"mt-grid-set-tree-toggle mtg:p-0\"\r\n                tabindex=\"-1\"\r\n                [attr.aria-label]=\"\r\n                  (expandedPaths().has(row.id)\r\n                    ? ('Collapse ' | mtGridText)\r\n                    : ('Expand ' | mtGridText)) + row.text\r\n                \"\r\n                (click)=\"$event.preventDefault(); toggleTree(row.id)\"\r\n              >\r\n                <mt-grid-icon\r\n                  [name]=\"\r\n                    expandedPaths().has(row.id)\r\n                      ? 'chevron-down'\r\n                      : 'chevron-right'\r\n                  \"\r\n                />\r\n              </button>\r\n            }\r\n            <input\r\n              type=\"checkbox\"\r\n              tabindex=\"-1\"\r\n              [disabled]=\"params().readOnly\"\r\n              [checked]=\"rowChecked(row.keys)\"\r\n              [indeterminate]=\"rowPartial(row.keys)\"\r\n              (change)=\"toggleKeys(row.keys)\"\r\n            />\r\n            <span\r\n              class=\"mt-grid-set-item-text mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\r\n              >{{ row.text }}</span\r\n            >\r\n          </label>\r\n        }\r\n        <div [style.height.px]=\"bottomSpace()\" aria-hidden=\"true\"></div>\r\n      </div>\r\n    }\r\n  </div>\r\n} @else {\r\n  <fieldset\r\n    class=\"mt-grid-filter-body mtg:m-0 mtg:min-w-0 mtg:flex mtg:flex-col mtg:p-3\"\r\n    [disabled]=\"params().readOnly\"\r\n  >\r\n    @for (condition of conditions(); track $index; let index = $index) {\r\n      @if (index > 0) {\r\n        <div\r\n          class=\"mt-grid-filter-join mtg:flex mtg:justify-center mtg:gap-4 mtg:my-2\"\r\n          role=\"radiogroup\"\r\n          [attr.aria-label]=\"'Filter join operator' | mtGridText\"\r\n        >\r\n          <label\r\n            class=\"mt-grid-filter-radio mtg:inline-flex mtg:items-center mtg:gap-2\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              [name]=\"joinId(index)\"\r\n              [checked]=\"operator() === 'AND'\"\r\n              (change)=\"setOperator('AND')\"\r\n              (keydown)=\"onJoinKey($event, 'AND')\"\r\n            />\r\n            <span>{{ \"AND\" | mtGridText }}</span>\r\n          </label>\r\n          <label\r\n            class=\"mt-grid-filter-radio mtg:inline-flex mtg:items-center mtg:gap-2\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              [name]=\"joinId(index)\"\r\n              [checked]=\"operator() === 'OR'\"\r\n              (change)=\"setOperator('OR')\"\r\n              (keydown)=\"onJoinKey($event, 'OR')\"\r\n            />\r\n            <span>{{ \"OR\" | mtGridText }}</span>\r\n          </label>\r\n        </div>\r\n      }\r\n      <div class=\"mt-grid-filter-condition mtg:flex mtg:flex-col mtg:gap-2\">\r\n        <div class=\"mt-grid-filter-picker-wrap\">\r\n          <div\r\n            class=\"mt-grid-filter-picker mtg:flex mtg:items-center mtg:px-2 mtg:bg-grid-input mtg:rounded-grid-control\"\r\n            role=\"combobox\"\r\n            [tabindex]=\"params().readOnly ? -1 : 0\"\r\n            [attr.aria-disabled]=\"!!params().readOnly\"\r\n            [attr.aria-label]=\"'Filtering operator' | mtGridText\"\r\n            aria-haspopup=\"listbox\"\r\n            [attr.aria-expanded]=\"openList() === index\"\r\n            [attr.aria-controls]=\"'mt-grid-filter-list-' + index\"\r\n            (click)=\"toggleList(index)\"\r\n            (keydown)=\"onPickerKey($event, index)\"\r\n          >\r\n            <span\r\n              class=\"mt-grid-filter-picker-display mtg:flex-1 mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\r\n              >{{ label(condition.type) | mtGridText }}</span\r\n            >\r\n            <mt-grid-icon name=\"chevron-down\" />\r\n          </div>\r\n          @if (openList() === index) {\r\n            <div\r\n              class=\"mt-grid-filter-list mtg:bg-grid-menu mtg:p-[var(--mt-grid-dropdown-padding)] mtg:[box-shadow:var(--mt-grid-shadow-panel)] mtg:[border-radius:var(--mt-grid-dropdown-radius)]\"\r\n              role=\"listbox\"\r\n              [attr.aria-label]=\"'Select Field' | mtGridText\"\r\n              [id]=\"'mt-grid-filter-list-' + index\"\r\n            >\r\n              @for (type of types(); track type; let option = $index) {\r\n                <div\r\n                  class=\"mt-grid-filter-option mtg:flex mtg:items-center mtg:px-2 mtg:whitespace-nowrap\"\r\n                  role=\"option\"\r\n                  [class.mt-grid-filter-option-active]=\"\r\n                    activeOption() === option\r\n                  \"\r\n                  [attr.aria-selected]=\"activeOption() === option ? true : null\"\r\n                  (mousedown)=\"$event.preventDefault()\"\r\n                  (click)=\"chooseType(index, type)\"\r\n                >\r\n                  <span>{{ label(type) | mtGridText }}</span>\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n        @if (!takesNoValue(condition)) {\r\n          <div\r\n            class=\"mt-grid-filter-input mtg:flex mtg:items-center mtg:bg-grid-input mtg:rounded-grid-control\"\r\n          >\r\n            <mt-grid-icon name=\"search\" />\r\n            <input\r\n              [type]=\"inputType()\"\r\n              [attr.aria-label]=\"fromLabel(condition) | mtGridText\"\r\n              [placeholder]=\"fromPlaceholder(condition) | mtGridText\"\r\n              [attr.min]=\"kind() === 'date' ? dateLimit(false) : null\"\r\n              [attr.max]=\"kind() === 'date' ? dateLimit(true) : null\"\r\n              [value]=\"condition.from\"\r\n              (input)=\"onInput(index, 'from', $event)\"\r\n            />\r\n            @if (condition.from !== \"\" && inputType() !== \"date\") {\r\n              <button\r\n                type=\"button\"\r\n                class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\r\n                [attr.aria-label]=\"'Clear' | mtGridText\"\r\n                (click)=\"clearInput(index, 'from')\"\r\n              >\r\n                <mt-grid-icon name=\"cross\" />\r\n              </button>\r\n            }\r\n          </div>\r\n          @if (isRange(condition)) {\r\n            <div\r\n              class=\"mt-grid-filter-input mtg:flex mtg:items-center mtg:bg-grid-input mtg:rounded-grid-control\"\r\n            >\r\n              <mt-grid-icon name=\"search\" />\r\n              <input\r\n                [type]=\"inputType()\"\r\n                [attr.aria-label]=\"toLabel() | mtGridText\"\r\n                [placeholder]=\"toPlaceholder(condition) | mtGridText\"\r\n                [attr.min]=\"kind() === 'date' ? dateLimit(false) : null\"\r\n                [attr.max]=\"kind() === 'date' ? dateLimit(true) : null\"\r\n                [value]=\"condition.to\"\r\n                (input)=\"onInput(index, 'to', $event)\"\r\n              />\r\n              @if (condition.to !== \"\" && inputType() !== \"date\") {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\r\n                  [attr.aria-label]=\"'Clear' | mtGridText\"\r\n                  (click)=\"clearInput(index, 'to')\"\r\n                >\r\n                  <mt-grid-icon name=\"cross\" />\r\n                </button>\r\n              }\r\n            </div>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </fieldset>\r\n}\r\n@if (buttons().length) {\r\n  <div\r\n    class=\"mt-grid-filter-buttons mtg:flex mtg:justify-end mtg:gap-4 mtg:[padding:8px_12px_12px]\"\r\n  >\r\n    @for (button of buttons(); track button) {\r\n      <button\r\n        [type]=\"button === 'apply' ? 'submit' : 'button'\"\r\n        class=\"mt-grid-filter-button mtg:px-4 mtg:text-grid-primary mtg:rounded-grid-control mtg:hover:[background-color:var(--mt-grid-secondary-bg-hover)]\"\r\n        [attr.data-filter-button]=\"button\"\r\n        [disabled]=\"params().readOnly\"\r\n        (click)=\"onButton(button)\"\r\n      >\r\n        {{ buttonLabel(button) | mtGridText }}\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n", styles: [":host{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height)}*{scrollbar-width:thin;scrollbar-color:var(--mt-grid-scrollbar-thumb) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--mt-grid-scrollbar-thumb);border-radius:var(--mt-grid-radius-small)}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}button,input,select,[tabindex],[role=option],[role=treeitem],[role=menuitem],[role=menuitemcheckbox],[role=tab],.mt-grid-row{transition:background-color .15s ease,color .15s ease,opacity .15s ease}button,input,select,[tabindex]{outline:none}:is(button,input,select,[tabindex]):not(.mt-grid-chart-dialog,.mt-grid-filter-popup,.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:is(.mt-grid-menu,.mt-grid-chooser){position:relative}:host(:focus-visible),:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:none}:host(:focus-visible):after,:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible:after{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;outline:1px solid var(--mt-grid-focus);outline-offset:2px}button:hover:not(:disabled){background-color:var(--mt-grid-hover)}input::placeholder{color:var(--mt-grid-placeholder)}input,select{color:var(--mt-grid-foreground);accent-color:var(--mt-grid-primary)}input:is([type=text],[type=number],[type=search],[type=date]),select{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height);background-color:var(--mt-grid-input-background);border-radius:var(--mt-grid-control-radius)}input:is([type=text],[type=number],[type=search],[type=date]):hover:not(:disabled),select:hover:not(:disabled){border-color:var(--mt-grid-input-border-hover)}input:is([type=text],[type=number],[type=search],[type=date]):is(:focus,:focus-visible):not(:disabled),select:is(:focus,:focus-visible):not(:disabled){border-color:var(--mt-grid-focus)}input[readonly]{border-color:var(--mt-grid-input-border-readonly)}input[type=checkbox]:not(.mt-grid-toggle-input),input[type=radio]{appearance:none;position:relative;display:inline-grid;place-content:center;box-sizing:border-box;flex:none;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size);margin:0;border:var(--mt-grid-checkbox-border-width) solid var(--mt-grid-input-border);border-radius:var(--mt-grid-checkbox-radius);background:var(--mt-grid-input-background);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:not(.mt-grid-toggle-input):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{background:var(--mt-grid-primary);border-color:var(--mt-grid-primary)}input[type=checkbox]:checked:after{content:\"\";width:8px;height:4px;border:solid var(--mt-grid-checkbox-mark);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg);mask:none;background:none}input[type=checkbox]:indeterminate:after{content:\"\";width:8px;height:2px;background:var(--mt-grid-checkbox-mark);border:0;transform:none}input[type=radio]:checked:after{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mt-grid-checkbox-mark)}input:disabled,select:disabled,button:disabled,[aria-disabled=true]{cursor:default;opacity:.6}mt-grid-icon{color:var(--mt-grid-icon-color)}button:hover mt-grid-icon,button[aria-expanded=true] mt-grid-icon,button[aria-selected=true] mt-grid-icon,button[aria-pressed=true] mt-grid-icon{color:var(--mt-grid-primary)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;animation:none}}input[type=checkbox]:not(.mt-grid-toggle-input):focus-visible:hover:not(:disabled),input[type=radio]:focus-visible:hover:not(:disabled){outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:host{position:fixed;z-index:1000;box-sizing:border-box;color:var(--mt-grid-foreground);font-family:var(--mt-grid-font);background:var(--mt-grid-menu-background);border:1px solid var(--mt-grid-menu-border);border-radius:4px;box-shadow:0 0 16px var(--mt-grid-shadow-color);-webkit-user-select:none;user-select:none}.mt-grid-set-mini{margin:var(--mt-grid-set-search-margin, 8px);position:relative;height:32px}.mt-grid-set-mini>mt-grid-icon{position:absolute;inset-inline-start:8px;pointer-events:none}.mt-grid-set-mini input{box-sizing:border-box;width:100%;height:32px;padding-inline:32px;font:inherit;color:inherit;background:var(--mt-grid-input-background);border:1px solid var(--mt-grid-input-border);border-radius:var(--mt-grid-control-radius);outline:none}.mt-grid-set-mini input:focus-visible{border-color:var(--mt-grid-accent)}.mt-grid-set-mini .mt-grid-filter-clear{position:absolute;inset-inline-end:8px}.mt-grid-set-list{height:var(--mt-grid-set-list-height, 256px);max-height:var(--mt-grid-set-list-height, 256px)}.mt-grid-set-item{height:24px;cursor:default}.mt-grid-set-item input{box-sizing:border-box;flex:none;width:16px;height:16px;margin:0;accent-color:var(--mt-grid-accent)}:host(.mt-grid-filter-inline){position:static;width:auto;background:transparent;border:0;border-radius:0;box-shadow:none}.mt-grid-filter-body{border:0}.mt-grid-filter-condition:first-child{margin-bottom:8px}.mt-grid-filter-picker-wrap{position:relative}.mt-grid-filter-picker{box-sizing:border-box;height:32px;border:1px solid var(--mt-grid-input-border);cursor:default;outline:none}.mt-grid-filter-picker:focus-visible,.mt-grid-filter-input:focus-within{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none;border-color:var(--mt-grid-focus)}.mt-grid-filter-list{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:1;box-sizing:border-box;border:1px solid var(--mt-grid-menu-border)}.mt-grid-filter-option{height:24px}.mt-grid-filter-option-active{background:var(--mt-grid-menu-active)}.mt-grid-filter-input{position:relative;box-sizing:border-box;height:32px;border:1px solid var(--mt-grid-input-border)}.mt-grid-filter-input>mt-grid-icon{position:absolute;inset-inline-start:8px;width:16px;height:16px;color:var(--mt-grid-secondary-foreground);pointer-events:none}.mt-grid-filter-input input{flex:1;box-sizing:border-box;width:100%;height:100%;min-width:0;padding-inline:32px 28px;font:inherit;color:inherit;background:none;border:0;outline:none}.mt-grid-filter-input input[type=date]{padding-inline-end:8px}.mt-grid-filter-clear{position:absolute;inset-inline-end:8px;width:16px;height:16px;color:var(--mt-grid-secondary-foreground);background:none;border:0;cursor:pointer}.mt-grid-filter-join{height:17px}.mt-grid-filter-radio input{width:16px;height:16px;margin:0}.mt-grid-filter-buttons{box-sizing:border-box;height:59px;border-top:1px solid var(--mt-grid-menu-separator)}.mt-grid-filter-button{height:39px;font:inherit;color:inherit;background:var(--mt-grid-input-background);border:1px solid var(--mt-grid-input-border);cursor:pointer}.mt-grid-set-list:focus-visible .mt-grid-set-item-active{background:var(--mt-grid-menu-active)}.mt-grid-set-list:focus-visible{outline:2px solid var(--mt-grid-accent);outline-offset:-2px}.mt-grid-set-tree-toggle{border:0;background:none;color:inherit;width:16px;cursor:pointer}.mt-grid-multi-section{position:relative;border-bottom:1px solid var(--mt-grid-menu-border)}.mt-grid-multi-title{width:100%;border:0;color:inherit;font:inherit;background:transparent;cursor:pointer}.mt-grid-multi-submenu{position:absolute;inset-inline-start:calc(100% - 4px);top:0;width:260px;z-index:2;background:var(--mt-grid-menu-background);border:1px solid var(--mt-grid-menu-border);box-shadow:0 0 16px var(--mt-grid-shadow-color)}:host{border-radius:var(--mt-grid-overlay-radius);box-shadow:var(--mt-grid-shadow-popup)}.mt-grid-filter-button{height:var(--mt-grid-input-height);background:var(--mt-grid-chrome-background)}.mt-grid-filter-button[data-filter-button=apply]{color:var(--mt-grid-checkbox-mark);background:var(--mt-grid-accent);border-color:var(--mt-grid-accent)}.mt-grid-filter-list,.mt-grid-multi-submenu{border-radius:var(--mt-grid-overlay-radius);box-shadow:var(--mt-grid-shadow-popup)}.mt-grid-set-item,.mt-grid-filter-option{height:var(--mt-grid-dropdown-row-height)}.mt-grid-set-item input{order:0;margin:0;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size)}.mt-grid-filter-list{border-color:var(--mt-grid-input-border)}.mt-grid-filter-option[aria-selected=true]:after{content:\"\\2713\";width:16px;margin-inline-start:auto;color:var(--mt-grid-primary)}.mt-grid-filter-button{height:var(--mt-grid-button-height);border-color:transparent;font-size:var(--mt-grid-font-size);font-weight:500;background:var(--mt-grid-secondary-bg)}.mt-grid-filter-picker:focus-visible,.mt-grid-filter-input:focus-within{border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-filter-button[data-filter-button=apply]:hover{background:var(--mt-grid-primary-700)}.mt-grid-filter-option[aria-selected=true]{background:transparent}.mt-grid-filter-option-active[aria-selected=true]{background:var(--mt-grid-hover)}.mt-grid-filter-picker:hover,.mt-grid-filter-input:hover{border-color:var(--mt-grid-input-border-hover)}.mt-grid-filter-picker:is(:focus,:focus-visible),.mt-grid-filter-input:focus-within{border-color:var(--mt-grid-focus)}.mt-grid-filter-input input:focus-visible{box-shadow:none;outline:none}.mt-grid-set-item{height:var(--mt-grid-set-row-height, 32px)}.mt-grid-set-mini input:focus{outline:1px solid var(--mt-grid-focus);outline-offset:2px}\n"] }]
+                    }, template: "@if (kind() === \"multi\") {\n  <div class=\"mt-grid-multi-filter\">\n    @for (child of children(); track $index; let i = $index) {\n      <section\n        class=\"mt-grid-multi-section\"\n        [attr.data-multi-index]=\"i\"\n        [attr.data-display]=\"child.display ?? 'inline'\"\n      >\n        @if (child.display === \"accordion\") {\n          <button\n            class=\"mt-grid-multi-title mtg:block mtg:[padding:10px_12px] mtg:text-start mtg:hover:[background-color:var(--mt-grid-menu-active)]\"\n            [attr.aria-expanded]=\"openChildren().has(i)\"\n            (click)=\"toggleChild(i)\"\n          >\n            <mt-grid-icon\n              [name]=\"openChildren().has(i) ? 'chevron-down' : 'chevron-right'\"\n            />\n            {{ childTitle(i) | mtGridText }}\n          </button>\n        } @else if (child.display === \"subMenu\") {\n          <button\n            class=\"mt-grid-multi-title mtg:block mtg:[padding:10px_12px] mtg:text-start mtg:hover:[background-color:var(--mt-grid-menu-active)]\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"subMenu() === i\"\n            (click)=\"subMenu.set(i)\"\n            (mouseenter)=\"subMenu.set(i)\"\n            (keydown)=\"onMultiTitleKey($event, i)\"\n          >\n            {{ childTitle(i) | mtGridText }}\n            <mt-grid-icon name=\"chevron-right\" />\n          </button>\n        } @else {\n          <div\n            class=\"mt-grid-multi-heading mtg:[padding:8px_12px_0] mtg:font-semibold\"\n          >\n            <span>{{ childTitle(i) | mtGridText }}</span>\n          </div>\n        }\n        @if (\n          !child.display ||\n          child.display === \"inline\" ||\n          (child.display === \"accordion\" && openChildren().has(i)) ||\n          (child.display === \"subMenu\" && subMenu() === i)\n        ) {\n          <div\n            [class.mt-grid-multi-submenu]=\"child.display === 'subMenu'\"\n            (keydown.escape)=\"onChildEscape($event, i)\"\n          >\n            <mt-data-grid-column-filter\n              [inline]=\"true\"\n              [kind]=\"child.filter\"\n              [params]=\"childParams(i)\"\n              [values]=\"values()\"\n              [formatValue]=\"formatValue()\"\n              [model]=\"childModel(i)\"\n              [direction]=\"direction()\"\n              (modelChange)=\"onChildModel(i, $event)\"\n              (closed)=\"closed.emit($event)\"\n              (modified)=\"modified.emit()\"\n              (valuesResolved)=\"valuesResolved.emit($event)\"\n            />\n          </div>\n        }\n      </section>\n    }\n  </div>\n} @else if (kind() === \"set\") {\n  <div class=\"mt-grid-set-filter mtg:flex mtg:flex-col\">\n    @if (!params().suppressMiniFilter) {\n      <div class=\"mt-grid-set-mini mtg:flex mtg:items-center\">\n        <mt-grid-icon name=\"search\" />\n        <input\n          type=\"text\"\n          autocomplete=\"off\"\n          [attr.aria-label]=\"'Search filter values' | mtGridText\"\n          [placeholder]=\"'Search...' | mtGridText\"\n          [disabled]=\"params().readOnly\"\n          [value]=\"miniFilter()\"\n          (input)=\"onMiniFilter($event)\"\n          (keydown)=\"onSetKey($event, true)\"\n        />\n        @if (miniFilter()) {\n          <button\n            type=\"button\"\n            class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\n            [attr.aria-label]=\"'Clear' | mtGridText\"\n            [disabled]=\"params().readOnly\"\n            (click)=\"clearMiniFilter()\"\n          >\n            <mt-grid-icon name=\"cross\" />\n          </button>\n        }\n      </div>\n    }\n    @if (loading()) {\n      <div class=\"mt-grid-set-loading mtg:p-3\" role=\"status\">\n        {{ \"Loading...\" | mtGridText }}\n      </div>\n    } @else if (remoteFailed()) {\n      <div\n        class=\"mt-grid-set-failed mtg:p-3\"\n        role=\"alert\"\n        [textContent]=\"'Could not load values.' | mtGridText\"\n      ></div>\n    } @else if (!shownValues().length) {\n      <div\n        class=\"mt-grid-set-no-matches mtg:p-3\"\n        [attr.role]=\"remote() ? 'status' : null\"\n        [textContent]=\"\n          (remoteNeedsText() ? 'Type to search...' : 'No matches.') | mtGridText\n        \"\n      ></div>\n    } @else {\n      <div\n        class=\"mt-grid-set-list mtg:overflow-auto mtg:p-[var(--mt-grid-dropdown-padding)]\"\n        [attr.role]=\"params().treeList ? 'tree' : 'listbox'\"\n        [attr.aria-label]=\"'Filter List' | mtGridText\"\n        tabindex=\"0\"\n        [attr.aria-activedescendant]=\"rowId(activeIndex())\"\n        [attr.aria-multiselectable]=\"!remote()?.single\"\n        (scroll)=\"onSetScroll($event)\"\n        (keydown)=\"onSetKey($event)\"\n      >\n        @if (showSelectAll()) {\n          <label\n            class=\"mt-grid-set-item mt-grid-set-select-all mtg:flex mtg:items-center mtg:gap-2 mtg:ps-3\"\n            role=\"option\"\n            [attr.aria-selected]=\"selectAllState() === 'all'\"\n          >\n            <input\n              type=\"checkbox\"\n              tabindex=\"-1\"\n              [disabled]=\"params().readOnly\"\n              [checked]=\"selectAllState() === 'all'\"\n              [indeterminate]=\"selectAllState() === 'some'\"\n              (change)=\"toggleSelectAll()\"\n            />\n            <span\n              class=\"mt-grid-set-item-text mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\n              >{{\n                params().excelMode && miniFilter()\n                  ? (\"(Select All Search Results)\" | mtGridText)\n                  : (\"(Select All)\" | mtGridText)\n              }}</span\n            >\n          </label>\n        }\n        <div\n          [style.height.px]=\"windowStart() * listRowHeight()\"\n          aria-hidden=\"true\"\n        ></div>\n        @for (row of windowRows(); track row.id; let offset = $index) {\n          <label\n            class=\"mt-grid-set-item mtg:flex mtg:items-center mtg:gap-2 mtg:ps-3\"\n            [class.mt-grid-set-item-active]=\"\n              activeIndex() === windowStart() + offset\n            \"\n            [id]=\"rowId(windowStart() + offset)\"\n            [attr.role]=\"params().treeList ? 'treeitem' : 'option'\"\n            [attr.data-set-key]=\"row.group ? null : (row.keys[0] ?? '')\"\n            [attr.aria-selected]=\"rowChecked(row.keys)\"\n            [attr.aria-checked]=\"\n              rowPartial(row.keys) ? 'mixed' : rowChecked(row.keys)\n            \"\n            [attr.aria-level]=\"row.level + 1\"\n            [attr.aria-expanded]=\"\n              row.group ? expandedPaths().has(row.id) : null\n            \"\n            [style.padding-inline-start.px]=\"12 + row.level * 16\"\n            [title]=\"params().showTooltips ? row.text : ''\"\n            (mousedown)=\"activeRow.set(windowStart() + offset)\"\n          >\n            @if (row.group) {\n              <button\n                class=\"mt-grid-set-tree-toggle mtg:p-0\"\n                tabindex=\"-1\"\n                [attr.aria-label]=\"\n                  (expandedPaths().has(row.id)\n                    ? ('Collapse ' | mtGridText)\n                    : ('Expand ' | mtGridText)) + row.text\n                \"\n                (click)=\"$event.preventDefault(); toggleTree(row.id)\"\n              >\n                <mt-grid-icon\n                  [name]=\"\n                    expandedPaths().has(row.id)\n                      ? 'chevron-down'\n                      : 'chevron-right'\n                  \"\n                />\n              </button>\n            }\n            <input\n              type=\"checkbox\"\n              tabindex=\"-1\"\n              [disabled]=\"params().readOnly\"\n              [checked]=\"rowChecked(row.keys)\"\n              [indeterminate]=\"rowPartial(row.keys)\"\n              (change)=\"toggleKeys(row.keys)\"\n            />\n            <span\n              class=\"mt-grid-set-item-text mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\n              >{{ row.text }}</span\n            >\n          </label>\n        }\n        <div [style.height.px]=\"bottomSpace()\" aria-hidden=\"true\"></div>\n      </div>\n    }\n  </div>\n} @else {\n  <fieldset\n    class=\"mt-grid-filter-body mtg:m-0 mtg:min-w-0 mtg:flex mtg:flex-col mtg:p-3\"\n    [disabled]=\"params().readOnly\"\n  >\n    @for (condition of conditions(); track $index; let index = $index) {\n      @if (index > 0) {\n        <div\n          class=\"mt-grid-filter-join mtg:flex mtg:justify-center mtg:gap-4 mtg:my-2\"\n          role=\"radiogroup\"\n          [attr.aria-label]=\"'Filter join operator' | mtGridText\"\n        >\n          <label\n            class=\"mt-grid-filter-radio mtg:inline-flex mtg:items-center mtg:gap-2\"\n          >\n            <input\n              type=\"radio\"\n              [name]=\"joinId(index)\"\n              [checked]=\"operator() === 'AND'\"\n              (change)=\"setOperator('AND')\"\n              (keydown)=\"onJoinKey($event, 'AND')\"\n            />\n            <span>{{ \"AND\" | mtGridText }}</span>\n          </label>\n          <label\n            class=\"mt-grid-filter-radio mtg:inline-flex mtg:items-center mtg:gap-2\"\n          >\n            <input\n              type=\"radio\"\n              [name]=\"joinId(index)\"\n              [checked]=\"operator() === 'OR'\"\n              (change)=\"setOperator('OR')\"\n              (keydown)=\"onJoinKey($event, 'OR')\"\n            />\n            <span>{{ \"OR\" | mtGridText }}</span>\n          </label>\n        </div>\n      }\n      <div class=\"mt-grid-filter-condition mtg:flex mtg:flex-col mtg:gap-2\">\n        <div class=\"mt-grid-filter-picker-wrap\">\n          <div\n            class=\"mt-grid-filter-picker mtg:flex mtg:items-center mtg:px-2 mtg:bg-grid-input mtg:rounded-grid-control\"\n            role=\"combobox\"\n            [tabindex]=\"params().readOnly ? -1 : 0\"\n            [attr.aria-disabled]=\"!!params().readOnly\"\n            [attr.aria-label]=\"'Filtering operator' | mtGridText\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"openList() === index\"\n            [attr.aria-controls]=\"'mt-grid-filter-list-' + index\"\n            (click)=\"toggleList(index)\"\n            (keydown)=\"onPickerKey($event, index)\"\n          >\n            <span\n              class=\"mt-grid-filter-picker-display mtg:flex-1 mtg:overflow-hidden mtg:text-ellipsis mtg:whitespace-nowrap\"\n              >{{ label(condition.type) | mtGridText }}</span\n            >\n            <mt-grid-icon name=\"chevron-down\" />\n          </div>\n          @if (openList() === index) {\n            <div\n              class=\"mt-grid-filter-list mtg:bg-grid-menu mtg:p-[var(--mt-grid-dropdown-padding)] mtg:[box-shadow:var(--mt-grid-shadow-panel)] mtg:[border-radius:var(--mt-grid-dropdown-radius)]\"\n              role=\"listbox\"\n              [attr.aria-label]=\"'Select Field' | mtGridText\"\n              [id]=\"'mt-grid-filter-list-' + index\"\n            >\n              @for (type of types(); track type; let option = $index) {\n                <div\n                  class=\"mt-grid-filter-option mtg:flex mtg:items-center mtg:px-2 mtg:whitespace-nowrap\"\n                  role=\"option\"\n                  [class.mt-grid-filter-option-active]=\"\n                    activeOption() === option\n                  \"\n                  [attr.aria-selected]=\"activeOption() === option ? true : null\"\n                  (mousedown)=\"$event.preventDefault()\"\n                  (click)=\"chooseType(index, type)\"\n                >\n                  <span>{{ label(type) | mtGridText }}</span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n        @if (!takesNoValue(condition)) {\n          <div\n            class=\"mt-grid-filter-input mtg:flex mtg:items-center mtg:bg-grid-input mtg:rounded-grid-control\"\n          >\n            <mt-grid-icon name=\"search\" />\n            <input\n              [type]=\"inputType()\"\n              [attr.aria-label]=\"fromLabel(condition) | mtGridText\"\n              [placeholder]=\"fromPlaceholder(condition) | mtGridText\"\n              [attr.min]=\"kind() === 'date' ? dateLimit(false) : null\"\n              [attr.max]=\"kind() === 'date' ? dateLimit(true) : null\"\n              [value]=\"condition.from\"\n              (input)=\"onInput(index, 'from', $event)\"\n            />\n            @if (condition.from !== \"\" && inputType() !== \"date\") {\n              <button\n                type=\"button\"\n                class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\n                [attr.aria-label]=\"'Clear' | mtGridText\"\n                (click)=\"clearInput(index, 'from')\"\n              >\n                <mt-grid-icon name=\"cross\" />\n              </button>\n            }\n          </div>\n          @if (isRange(condition)) {\n            <div\n              class=\"mt-grid-filter-input mtg:flex mtg:items-center mtg:bg-grid-input mtg:rounded-grid-control\"\n            >\n              <mt-grid-icon name=\"search\" />\n              <input\n                [type]=\"inputType()\"\n                [attr.aria-label]=\"toLabel() | mtGridText\"\n                [placeholder]=\"toPlaceholder(condition) | mtGridText\"\n                [attr.min]=\"kind() === 'date' ? dateLimit(false) : null\"\n                [attr.max]=\"kind() === 'date' ? dateLimit(true) : null\"\n                [value]=\"condition.to\"\n                (input)=\"onInput(index, 'to', $event)\"\n              />\n              @if (condition.to !== \"\" && inputType() !== \"date\") {\n                <button\n                  type=\"button\"\n                  class=\"mt-grid-filter-clear mtg:inline-flex mtg:p-0\"\n                  [attr.aria-label]=\"'Clear' | mtGridText\"\n                  (click)=\"clearInput(index, 'to')\"\n                >\n                  <mt-grid-icon name=\"cross\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </div>\n    }\n  </fieldset>\n}\n@if (buttons().length) {\n  <div\n    class=\"mt-grid-filter-buttons mtg:flex mtg:justify-end mtg:gap-4 mtg:[padding:8px_12px_12px]\"\n  >\n    @for (button of buttons(); track button) {\n      <button\n        [type]=\"button === 'apply' ? 'submit' : 'button'\"\n        class=\"mt-grid-filter-button mtg:px-4 mtg:text-grid-primary mtg:rounded-grid-control mtg:hover:[background-color:var(--mt-grid-secondary-bg-hover)]\"\n        [attr.data-filter-button]=\"button\"\n        [disabled]=\"params().readOnly\"\n        (click)=\"onButton(button)\"\n      >\n        {{ buttonLabel(button) | mtGridText }}\n      </button>\n    }\n  </div>\n}\n", styles: [":host{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height)}*{scrollbar-width:thin;scrollbar-color:var(--mt-grid-scrollbar-thumb) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:var(--mt-grid-scrollbar-thumb);border-radius:var(--mt-grid-radius-small)}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}button,input,select,[tabindex],[role=option],[role=treeitem],[role=menuitem],[role=menuitemcheckbox],[role=tab],.mt-grid-row{transition:background-color .15s ease,color .15s ease,opacity .15s ease}button,input,select,[tabindex]{outline:none}:is(button,input,select,[tabindex]):not(.mt-grid-chart-dialog,.mt-grid-filter-popup,.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:is(.mt-grid-menu,.mt-grid-chooser){position:relative}:host(:focus-visible),:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible{outline:none}:host(:focus-visible):after,:is(.mt-grid-menu,.mt-grid-chooser,.mt-grid-rich-select-list,.mt-grid-filter-list,.mt-grid-multi-submenu,.mt-grid-tool-panel-wrapper):focus-visible:after{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;outline:1px solid var(--mt-grid-focus);outline-offset:2px}button:hover:not(:disabled){background-color:var(--mt-grid-hover)}input::placeholder{color:var(--mt-grid-placeholder)}input,select{color:var(--mt-grid-foreground);accent-color:var(--mt-grid-primary)}input:is([type=text],[type=number],[type=search],[type=date]),select{font-family:var(--mt-grid-font);font-size:var(--mt-grid-font-size);line-height:var(--mt-grid-line-height);background-color:var(--mt-grid-input-background);border-radius:var(--mt-grid-control-radius)}input:is([type=text],[type=number],[type=search],[type=date]):hover:not(:disabled),select:hover:not(:disabled){border-color:var(--mt-grid-input-border-hover)}input:is([type=text],[type=number],[type=search],[type=date]):is(:focus,:focus-visible):not(:disabled),select:is(:focus,:focus-visible):not(:disabled){border-color:var(--mt-grid-focus)}input[readonly]{border-color:var(--mt-grid-input-border-readonly)}input[type=checkbox]:not(.mt-grid-toggle-input),input[type=radio]{appearance:none;position:relative;display:inline-grid;place-content:center;box-sizing:border-box;flex:none;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size);margin:0;border:var(--mt-grid-checkbox-border-width) solid var(--mt-grid-input-border);border-radius:var(--mt-grid-checkbox-radius);background:var(--mt-grid-input-background);cursor:pointer}input[type=radio]{border-radius:50%}input[type=checkbox]:not(.mt-grid-toggle-input):checked,input[type=checkbox]:indeterminate,input[type=radio]:checked{background:var(--mt-grid-primary);border-color:var(--mt-grid-primary)}input[type=checkbox]:checked:after{content:\"\";width:8px;height:4px;border:solid var(--mt-grid-checkbox-mark);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg);mask:none;background:none}input[type=checkbox]:indeterminate:after{content:\"\";width:8px;height:2px;background:var(--mt-grid-checkbox-mark);border:0;transform:none}input[type=radio]:checked:after{content:\"\";width:6px;height:6px;border-radius:50%;background:var(--mt-grid-checkbox-mark)}input:disabled,select:disabled,button:disabled,[aria-disabled=true]{cursor:default;opacity:.6}mt-grid-icon{color:var(--mt-grid-icon-color)}button:hover mt-grid-icon,button[aria-expanded=true] mt-grid-icon,button[aria-selected=true] mt-grid-icon,button[aria-pressed=true] mt-grid-icon{color:var(--mt-grid-primary)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none;animation:none}}input[type=checkbox]:not(.mt-grid-toggle-input):focus-visible:hover:not(:disabled),input[type=radio]:focus-visible:hover:not(:disabled){outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}:host{position:fixed;z-index:1000;box-sizing:border-box;color:var(--mt-grid-foreground);font-family:var(--mt-grid-font);background:var(--mt-grid-menu-background);border:1px solid var(--mt-grid-menu-border);border-radius:4px;box-shadow:0 0 16px var(--mt-grid-shadow-color);-webkit-user-select:none;user-select:none}.mt-grid-set-mini{margin:var(--mt-grid-set-search-margin, 8px);position:relative;height:32px}.mt-grid-set-mini>mt-grid-icon{position:absolute;inset-inline-start:8px;pointer-events:none}.mt-grid-set-mini input{box-sizing:border-box;width:100%;height:32px;padding-inline:32px;font:inherit;color:inherit;background:var(--mt-grid-input-background);border:1px solid var(--mt-grid-input-border);border-radius:var(--mt-grid-control-radius);outline:none}.mt-grid-set-mini input:focus-visible{border-color:var(--mt-grid-accent)}.mt-grid-set-mini .mt-grid-filter-clear{position:absolute;inset-inline-end:8px}.mt-grid-set-list{height:var(--mt-grid-set-list-height, 256px);max-height:var(--mt-grid-set-list-height, 256px)}.mt-grid-set-item{height:24px;cursor:default}.mt-grid-set-item input{box-sizing:border-box;flex:none;width:16px;height:16px;margin:0;accent-color:var(--mt-grid-accent)}:host(.mt-grid-filter-inline){position:static;width:auto;background:transparent;border:0;border-radius:0;box-shadow:none}.mt-grid-filter-body{border:0}.mt-grid-filter-condition:first-child{margin-bottom:8px}.mt-grid-filter-picker-wrap{position:relative}.mt-grid-filter-picker{box-sizing:border-box;height:32px;border:1px solid var(--mt-grid-input-border);cursor:default;outline:none}.mt-grid-filter-picker:focus-visible,.mt-grid-filter-input:focus-within{outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none;border-color:var(--mt-grid-focus)}.mt-grid-filter-list{position:absolute;inset-inline:0;top:calc(100% + 4px);z-index:1;box-sizing:border-box;border:1px solid var(--mt-grid-menu-border)}.mt-grid-filter-option{height:24px}.mt-grid-filter-option-active{background:var(--mt-grid-menu-active)}.mt-grid-filter-input{position:relative;box-sizing:border-box;height:32px;border:1px solid var(--mt-grid-input-border)}.mt-grid-filter-input>mt-grid-icon{position:absolute;inset-inline-start:8px;width:16px;height:16px;color:var(--mt-grid-secondary-foreground);pointer-events:none}.mt-grid-filter-input input{flex:1;box-sizing:border-box;width:100%;height:100%;min-width:0;padding-inline:32px 28px;font:inherit;color:inherit;background:none;border:0;outline:none}.mt-grid-filter-input input[type=date]{padding-inline-end:8px}.mt-grid-filter-clear{position:absolute;inset-inline-end:8px;width:16px;height:16px;color:var(--mt-grid-secondary-foreground);background:none;border:0;cursor:pointer}.mt-grid-filter-join{height:17px}.mt-grid-filter-radio input{width:16px;height:16px;margin:0}.mt-grid-filter-buttons{box-sizing:border-box;height:59px;border-top:1px solid var(--mt-grid-menu-separator)}.mt-grid-filter-button{height:39px;font:inherit;color:inherit;background:var(--mt-grid-input-background);border:1px solid var(--mt-grid-input-border);cursor:pointer}.mt-grid-set-list:focus-visible .mt-grid-set-item-active{background:var(--mt-grid-menu-active)}.mt-grid-set-list:focus-visible{outline:2px solid var(--mt-grid-accent);outline-offset:-2px}.mt-grid-set-tree-toggle{border:0;background:none;color:inherit;width:16px;cursor:pointer}.mt-grid-multi-section{position:relative;border-bottom:1px solid var(--mt-grid-menu-border)}.mt-grid-multi-title{width:100%;border:0;color:inherit;font:inherit;background:transparent;cursor:pointer}.mt-grid-multi-submenu{position:absolute;inset-inline-start:calc(100% - 4px);top:0;width:260px;z-index:2;background:var(--mt-grid-menu-background);border:1px solid var(--mt-grid-menu-border);box-shadow:0 0 16px var(--mt-grid-shadow-color)}:host{border-radius:var(--mt-grid-overlay-radius);box-shadow:var(--mt-grid-shadow-popup)}.mt-grid-filter-button{height:var(--mt-grid-input-height);background:var(--mt-grid-chrome-background)}.mt-grid-filter-button[data-filter-button=apply]{color:var(--mt-grid-checkbox-mark);background:var(--mt-grid-accent);border-color:var(--mt-grid-accent)}.mt-grid-filter-list,.mt-grid-multi-submenu{border-radius:var(--mt-grid-overlay-radius);box-shadow:var(--mt-grid-shadow-popup)}.mt-grid-set-item,.mt-grid-filter-option{height:var(--mt-grid-dropdown-row-height)}.mt-grid-set-item input{order:0;margin:0;width:var(--mt-grid-checkbox-size);height:var(--mt-grid-checkbox-size)}.mt-grid-filter-list{border-color:var(--mt-grid-input-border)}.mt-grid-filter-option[aria-selected=true]:after{content:\"\\2713\";width:16px;margin-inline-start:auto;color:var(--mt-grid-primary)}.mt-grid-filter-button{height:var(--mt-grid-button-height);border-color:transparent;font-size:var(--mt-grid-font-size);font-weight:500;background:var(--mt-grid-secondary-bg)}.mt-grid-filter-picker:focus-visible,.mt-grid-filter-input:focus-within{border-color:var(--mt-grid-focus);outline:1px solid var(--mt-grid-focus);outline-offset:2px;box-shadow:none}.mt-grid-filter-button[data-filter-button=apply]:hover{background:var(--mt-grid-primary-700)}.mt-grid-filter-option[aria-selected=true]{background:transparent}.mt-grid-filter-option-active[aria-selected=true]{background:var(--mt-grid-hover)}.mt-grid-filter-picker:hover,.mt-grid-filter-input:hover{border-color:var(--mt-grid-input-border-hover)}.mt-grid-filter-picker:is(:focus,:focus-visible),.mt-grid-filter-input:focus-within{border-color:var(--mt-grid-focus)}.mt-grid-filter-input input:focus-visible{box-shadow:none;outline:none}.mt-grid-set-item{height:var(--mt-grid-set-row-height, 32px)}.mt-grid-set-mini input:focus{outline:1px solid var(--mt-grid-focus);outline-offset:2px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], anchorTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorTop", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }], modified: [{ type: i0.Output, args: ["modified"] }], valuesResolved: [{ type: i0.Output, args: ["valuesResolved"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /** Application defaults for built-in Columns panels; explicit panel params win. */