@revolist/revogrid 4.27.1 → 4.27.2

package/hydrate/index.mjs

@@ -7520,9 +7520,10 @@ const AND_OR_BUTTON = 'and-or-button';
 const TRASH_BUTTON = 'trash-button';
 const REORDER_BUTTON = 'reorder-button';
 const FilterButton = ({ column }) => {
-    return (hAsync("span", null, hAsync("button", { class: {
+    const active = !!(column === null || column === void 0 ? void 0 : column[FILTER_PROP]);
+    return (hAsync("span", { class: "filter-button-wrapper" }, hAsync("button", { class: {
             [FILTER_BUTTON_CLASS]: true,
-            [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],
+            [FILTER_BUTTON_ACTIVE]: active,
         } }, hAsync("svg", { class: "filter-img", viewBox: "0 0 64 64" }, hAsync("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, hAsync("path", { d: "M43,48 L43,56 L21,56 L21,48 L43,48 Z M53,28 L53,36 L12,36 L12,28 L53,28 Z M64,8 L64,16 L0,16 L0,8 L64,8 Z", fill: "currentColor" }))))));
 };
 const TrashButton = ({ ariaLabel, onClick }) => {
@@ -7606,7 +7607,7 @@ function moveFilterItem(items, sourceId, targetId) {
     return true;
 }
 
-const filterStyleCss = () => `.revo-button{position:relative;overflow:hidden;color:var(--rg-theme-button-text);background-color:var(--rg-theme-button-bg);height:32px;line-height:32px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:var(--rg-theme-button-success-bg)}.revo-button.red{background-color:var(--rg-theme-button-danger-bg)}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid var(--rg-theme-button-outline-border);line-height:30px;background:none;color:var(--rg-theme-button-outline-text);box-shadow:none}revogr-filter-panel{display:block}revogr-filter-panel .filter-panel-dialog{position:fixed;top:0;left:0;z-index:100;max-height:calc(100vh - 16px);overflow:auto;opacity:1;transform:none;color:var(--rg-theme-filter-panel-text);background-color:var(--rg-theme-filter-panel-bg);border:1px solid var(--rg-theme-filter-panel-border);transform-origin:62px 0px;box-shadow:0 5px 18px -2px var(--rg-theme-filter-panel-shadow);box-sizing:border-box;padding:10px;border-radius:8px;margin:0;min-width:220px;text-align:left;animation:revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1)}revogr-filter-panel .filter-panel-dialog .filter-holder>div{display:flex;flex-direction:column}revogr-filter-panel .filter-panel-dialog label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel .filter-panel-dialog select{width:100%}revogr-filter-panel .filter-panel-dialog input[type=text]{border:0;min-height:34px;margin:5px 0;color:var(--rg-theme-filter-panel-text);background:var(--rg-theme-filter-panel-input-bg);border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel .filter-panel-dialog .filter-actions{position:sticky;right:0;bottom:-10px;left:0;z-index:1;text-align:right;margin:10px -10px -10px;padding:0 5px 10px 10px;background:var(--rg-theme-filter-panel-bg);border-top:1px solid var(--rg-theme-filter-panel-divider)}revogr-filter-panel .filter-panel-dialog .filter-actions button{margin-top:10px;margin-right:5px}@keyframes revogr-filter-panel-open{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){revogr-filter-panel .filter-panel-dialog{animation:none}}.rgHeaderCell:hover .rv-filter{transition:opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.rgHeaderCell:hover .rv-filter,.rgHeaderCell .rv-filter.active{opacity:1}.rgHeaderCell .rv-filter{height:24px;width:24px;background:none;border:0;opacity:0;visibility:visible;cursor:pointer;border-radius:4px;position:relative;z-index:1}.rgHeaderCell .rv-filter.active{color:var(--rg-theme-filter-panel-icon-active)}.rgHeaderCell .rv-filter .filter-img{color:var(--rg-theme-filter-panel-icon);width:11px}.select-css{display:block;font-family:sans-serif;line-height:1.3;padding:0.6em 1.4em 0.5em 0.8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;color:var(--rg-theme-filter-panel-text);border:1px solid var(--rg-theme-filter-panel-select-border);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--rg-theme-filter-panel-input-bg);background-image:var(--revo-grid-filter-panel-select-arrow, url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"));background-repeat:no-repeat, repeat;background-position:right 0.7em top 50%, 0 0;background-size:0.65em auto, 100%;}.select-css::-ms-expand{display:none}.select-css{}.select-css:hover{border-color:var(--rg-theme-filter-panel-select-border)}.select-css{}.select-css:focus{border-color:var(--rg-theme-filter-panel-select-border-hover);box-shadow:var(--rg-theme-filter-panel-focus-ring);outline:none}.select-css{}.select-css option{font-weight:normal}.select-css{}.select-css:disabled,.select-css[aria-disabled=true]{color:var(--rg-theme-filter-panel-muted-text);background-image:var(--revo-grid-filter-panel-select-arrow-disabled, url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"))}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--rg-theme-filter-panel-select-border)}.multi-filter-list{margin-top:5px;margin-bottom:5px}.multi-filter-list div{white-space:nowrap}.multi-filter-list .multi-filter-list-row{display:flex;align-items:center;gap:6px;position:relative}.multi-filter-list .multi-filter-list-row.filter-row-dragging{opacity:0.65}.multi-filter-list .multi-filter-list-row.filter-row-drag-over::before{content:"";position:absolute;top:-4px;right:0;left:0;z-index:2;height:2px;background:var(--rg-theme-filter-panel-reorder-accent);border-radius:999px;box-shadow:0 0 0 2px var(--rg-theme-filter-panel-bg)}.multi-filter-list .multi-filter-list-row.filter-row-drop-active .filter-row-drop-target{pointer-events:auto}.multi-filter-list .filter-row-drop-target{position:absolute;inset:0;z-index:1;padding:0;pointer-events:none;background:transparent;border:0}.multi-filter-list .multi-filter-list-action{display:flex;align-self:stretch;flex:0 0 auto;justify-content:flex-end;align-items:center}.multi-filter-list .and-or-button{margin:0 0 0 10px;min-width:58px;cursor:pointer}.multi-filter-list .trash-button{margin:0 0 -2px 6px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;width:22px;height:100%;font-size:16px}.multi-filter-list .trash-button .trash-img{width:1em}.multi-filter-list .reorder-button{border:0;background:transparent;color:var(--rg-theme-filter-panel-reorder-color);cursor:grab;font-family:monospace;font-size:12px;letter-spacing:0;line-height:1;padding:6px 2px;transform:scaleX(0.8);width:16px}.multi-filter-list .reorder-button.filter-row-drag-over{color:var(--rg-theme-filter-panel-reorder-accent)}.multi-filter-list .reorder-button:active{cursor:grabbing}.multi-filter-list-container{padding:0;margin:0;list-style:none}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid var(--rg-theme-filter-panel-divider);height:10px}.select-input{display:flex;align-items:center;flex:1 1 auto;gap:6px;min-width:0}.select-input .select-filter,.select-input .filter-extra{flex:1 1 0;min-width:0}.select-input .select-filter{width:auto}.select-input .filter-extra{display:flex}.select-input .filter-extra>*{width:100%}.select-input input[type=text],.select-input input[type=date]{margin:0}`;
+const filterStyleCss = () => `.revo-button{position:relative;overflow:hidden;color:var(--rg-theme-button-text);background-color:var(--rg-theme-button-bg);height:32px;line-height:32px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:var(--rg-theme-button-success-bg)}.revo-button.red{background-color:var(--rg-theme-button-danger-bg)}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid var(--rg-theme-button-outline-border);line-height:30px;background:none;color:var(--rg-theme-button-outline-text);box-shadow:none}revogr-filter-panel{display:block}revogr-filter-panel .filter-panel-dialog{position:fixed;top:0;left:0;z-index:100;max-height:calc(100vh - 16px);overflow:auto;opacity:1;transform:none;color:var(--rg-theme-filter-panel-text);background-color:var(--rg-theme-filter-panel-bg);border:1px solid var(--rg-theme-filter-panel-border);transform-origin:62px 0px;box-shadow:0 5px 18px -2px var(--rg-theme-filter-panel-shadow);box-sizing:border-box;padding:10px;border-radius:8px;margin:0;min-width:220px;text-align:left;animation:revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1)}revogr-filter-panel .filter-panel-dialog .filter-holder>div{display:flex;flex-direction:column}revogr-filter-panel .filter-panel-dialog label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel .filter-panel-dialog select{width:100%}revogr-filter-panel .filter-panel-dialog input[type=text]{border:0;min-height:34px;margin:5px 0;color:var(--rg-theme-filter-panel-text);background:var(--rg-theme-filter-panel-input-bg);border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel .filter-panel-dialog .filter-actions{position:sticky;right:0;bottom:-10px;left:0;z-index:1;text-align:right;margin:10px -10px -10px;padding:0 5px 10px 10px;background:var(--rg-theme-filter-panel-bg);border-top:1px solid var(--rg-theme-filter-panel-divider)}revogr-filter-panel .filter-panel-dialog .filter-actions button{margin-top:10px;margin-right:5px}@keyframes revogr-filter-panel-open{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){revogr-filter-panel .filter-panel-dialog{animation:none}}.rgHeaderCell:hover .rv-filter{transition:opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.rgHeaderCell:hover:has(.rv-filter) .header-content,.rgHeaderCell:focus-within:has(.rv-filter) .header-content,.rgHeaderCell:has(.rv-filter.active) .header-content{margin-right:24px}.rgHeaderCell:hover:has(.rv-filter):has(.desc) .header-content,.rgHeaderCell:hover:has(.rv-filter):has(.asc) .header-content,.rgHeaderCell:focus-within:has(.rv-filter):has(.desc) .header-content,.rgHeaderCell:focus-within:has(.rv-filter):has(.asc) .header-content,.rgHeaderCell:has(.rv-filter.active):has(.desc) .header-content,.rgHeaderCell:has(.rv-filter.active):has(.asc) .header-content{margin-right:8px;padding-right:24px}.rgHeaderCell:hover .rv-filter,.rgHeaderCell:focus-within .rv-filter,.rgHeaderCell .rv-filter.active{opacity:1;width:24px}@media (hover: none), (pointer: coarse){.rgHeaderCell:has(.rv-filter) .header-content{margin-right:24px}.rgHeaderCell:has(.rv-filter):has(.desc) .header-content,.rgHeaderCell:has(.rv-filter):has(.asc) .header-content{margin-right:8px;padding-right:24px}.rgHeaderCell .rv-filter{opacity:1;width:24px}}.rgHeaderCell .rv-filter{height:24px;width:0;background:none;border:0;opacity:0;visibility:visible;cursor:pointer;border-radius:4px;position:relative;z-index:1;padding:0}.rgHeaderCell .rv-filter.active{color:var(--rg-theme-filter-panel-icon-active)}.rgHeaderCell .rv-filter .filter-img{color:var(--rg-theme-filter-panel-icon);width:11px}.select-css{display:block;font-family:sans-serif;line-height:1.3;padding:0.6em 1.4em 0.5em 0.8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;color:var(--rg-theme-filter-panel-text);border:1px solid var(--rg-theme-filter-panel-select-border);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--rg-theme-filter-panel-input-bg);background-image:var(--revo-grid-filter-panel-select-arrow, url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"));background-repeat:no-repeat, repeat;background-position:right 0.7em top 50%, 0 0;background-size:0.65em auto, 100%;}.select-css::-ms-expand{display:none}.select-css{}.select-css:hover{border-color:var(--rg-theme-filter-panel-select-border)}.select-css{}.select-css:focus{border-color:var(--rg-theme-filter-panel-select-border-hover);box-shadow:var(--rg-theme-filter-panel-focus-ring);outline:none}.select-css{}.select-css option{font-weight:normal}.select-css{}.select-css:disabled,.select-css[aria-disabled=true]{color:var(--rg-theme-filter-panel-muted-text);background-image:var(--revo-grid-filter-panel-select-arrow-disabled, url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"))}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--rg-theme-filter-panel-select-border)}.multi-filter-list{margin-top:5px;margin-bottom:5px}.multi-filter-list div{white-space:nowrap}.multi-filter-list .multi-filter-list-row{display:flex;align-items:center;gap:6px;position:relative}.multi-filter-list .multi-filter-list-row.filter-row-dragging{opacity:0.65}.multi-filter-list .multi-filter-list-row.filter-row-drag-over::before{content:"";position:absolute;top:-4px;right:0;left:0;z-index:2;height:2px;background:var(--rg-theme-filter-panel-reorder-accent);border-radius:999px;box-shadow:0 0 0 2px var(--rg-theme-filter-panel-bg)}.multi-filter-list .multi-filter-list-row.filter-row-drop-active .filter-row-drop-target{pointer-events:auto}.multi-filter-list .filter-row-drop-target{position:absolute;inset:0;z-index:1;padding:0;pointer-events:none;background:transparent;border:0}.multi-filter-list .multi-filter-list-action{display:flex;align-self:stretch;flex:0 0 auto;justify-content:flex-end;align-items:center}.multi-filter-list .and-or-button{margin:0 0 0 10px;min-width:58px;cursor:pointer}.multi-filter-list .trash-button{margin:0 0 -2px 6px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;width:22px;height:100%;font-size:16px}.multi-filter-list .trash-button .trash-img{width:1em}.multi-filter-list .reorder-button{border:0;background:transparent;color:var(--rg-theme-filter-panel-reorder-color);cursor:grab;font-family:monospace;font-size:12px;letter-spacing:0;line-height:1;padding:6px 2px;transform:scaleX(0.8);width:16px}.multi-filter-list .reorder-button.filter-row-drag-over{color:var(--rg-theme-filter-panel-reorder-accent)}.multi-filter-list .reorder-button:active{cursor:grabbing}.multi-filter-list-container{padding:0;margin:0;list-style:none}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid var(--rg-theme-filter-panel-divider);height:10px}.select-input{display:flex;align-items:center;flex:1 1 auto;gap:6px;min-width:0}.select-input .select-filter,.select-input .filter-extra{flex:1 1 0;min-width:0}.select-input .select-filter{width:auto}.select-input .filter-extra{display:flex}.select-input .filter-extra>*{width:100%}.select-input input[type=text],.select-input input[type=date]{margin:0}`;
 
 const defaultType = 'none';
 const FILTER_LIST_CLASS = 'multi-filter-list';
@@ -7624,6 +7625,7 @@ class FilterPanel {
         registerInstance(this, hostRef);
         this.filterChange = createEvent(this, "filterChange", 7);
         this.resetChange = createEvent(this, "resetChange", 7);
+        this.hasChanges = false;
         this.filterCaptionsInternal = {
             title: 'Filter by',
             ok: 'Close',
@@ -7659,7 +7661,7 @@ class FilterPanel {
          */
         this.allowDuplicateOperators = true;
         this.debouncedApplyFilter = debounce$1(() => {
-            this.filterChange.emit(this.filterItems);
+            this.emitFilterChange();
         }, 400);
     }
     onMouseDown(e) {
@@ -7689,10 +7691,25 @@ class FilterPanel {
         }
     }
     async show(newEntity) {
+        this.hasChanges = false;
         this.changes = newEntity;
-        this.filterItems = (newEntity === null || newEntity === void 0 ? void 0 : newEntity.filterItems) || {};
+        this.filterItems = this.cloneFilterItems((newEntity === null || newEntity === void 0 ? void 0 : newEntity.filterItems) || {});
+        this.draftFilter = undefined;
         if (this.changes) {
             this.changes.type = this.changes.type || defaultType;
+            const prop = this.changes.prop;
+            const propFilters = prop === undefined ? undefined : this.filterItems[prop];
+            if (!(propFilters === null || propFilters === void 0 ? void 0 : propFilters.length) && this.changes.showDefaultFilter !== false) {
+                const type = this.resolveDraftFilterType(this.changes.defaultFilterType);
+                if (type) {
+                    this.draftFilter = {
+                        id: ++this.filterId,
+                        type,
+                        value: '',
+                        relation: 'and',
+                    };
+                }
+            }
         }
     }
     async getChanges() {
@@ -7713,29 +7730,42 @@ class FilterPanel {
         const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
         if (prop === undefined)
             return '';
-        const propFilters = (_b = this.filterItems[prop]) !== null && _b !== void 0 ? _b : [];
-        const visibleFilterCount = propFilters.filter(filter => !filter.hidden).length;
+        const propFilters = ((_b = this.filterItems[prop]) !== null && _b !== void 0 ? _b : []).map((filter, index) => ({
+            filter,
+            index,
+            isDraft: false,
+        }));
+        if (this.draftFilter) {
+            propFilters.push({
+                filter: this.draftFilter,
+                index: propFilters.length,
+                isDraft: true,
+            });
+        }
+        const visibleFilters = propFilters.filter(({ filter }) => !filter.hidden);
+        const visibleFilterCount = visibleFilters.length;
         const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
-        return (hAsync("div", { key: this.filterId }, hAsync("ul", { class: "multi-filter-list-container" }, propFilters.map((filter, index) => {
+        return (hAsync("div", { key: this.filterId }, hAsync("ul", { class: "multi-filter-list-container" }, propFilters.map(({ filter, index, isDraft }) => {
+            var _a;
             let andOrButton;
             if (filter.hidden) {
                 return;
             }
             // hide toggle button if there is only one filter and the last one
-            if (index !== this.filterItems[prop].length - 1) {
+            if (((_a = visibleFilters[visibleFilterCount - 1]) === null || _a === void 0 ? void 0 : _a.filter.id) !== filter.id) {
                 andOrButton = (hAsync(AndOrButton, { text: filter.relation === 'and' ? capts.and : capts.or, onClick: () => this.toggleFilterAndOr(filter.id) }));
             }
-            const extra = this.renderExtra(prop, index);
+            const extra = this.renderExtra(prop, index, isDraft);
             const isDragging = this.draggedFilterId === filter.id;
             const isDragOver = this.dragOverFilterId === filter.id && !isDragging;
-            const canReorder = visibleFilterCount > 1;
+            const canReorder = visibleFilterCount > 1 && !isDraft;
             return (hAsync("li", { key: filter.id, class: FILTER_LIST_CLASS, "aria-label": `${capts.filterCondition} ${index + 1}` }, hAsync("div", { class: {
                     'multi-filter-list-row': true,
                     'filter-row-drop-active': this.draggedFilterId !== undefined && !isDragging,
                     'filter-row-dragging': isDragging,
                     'filter-row-drag-over': isDragOver,
-                } }, canReorder ? (hAsync("button", { type: "button", class: "filter-row-drop-target", tabIndex: -1, "aria-label": `${capts.filterCondition} ${index + 1}`, onDragOver: e => this.onFilterDragOver(e, filter.id), onDragLeave: () => this.onFilterDragLeave(filter.id), onDrop: e => this.onFilterDrop(e, prop, filter.id) })) : '', canReorder ? (hAsync(ReorderButton, { ariaLabel: capts.reorderFilter, dragging: isDragging, dragOver: isDragOver, onDragStart: e => this.onFilterDragStart(e, filter.id), onDragEnd: () => this.onFilterDragEnd(), onKeyDown: e => this.onFilterReorderKeyDown(e, prop, filter.id) })) : '', hAsync("div", { class: { 'select-input': true } }, hAsync("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), extra ? hAsync("div", { class: "filter-extra" }, extra) : ''), hAsync("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, hAsync(TrashButton, { ariaLabel: capts.removeFilter, onClick: () => this.onRemoveFilter(filter.id) })))));
-        })), propFilters.some(f => !f.hidden) ? hAsync("div", { class: "add-filter-divider" }) : ''));
+                } }, canReorder ? (hAsync("button", { type: "button", class: "filter-row-drop-target", tabIndex: -1, "aria-label": `${capts.filterCondition} ${index + 1}`, onDragOver: e => this.onFilterDragOver(e, filter.id), onDragLeave: () => this.onFilterDragLeave(filter.id), onDrop: e => this.onFilterDrop(e, prop, filter.id) })) : '', canReorder ? (hAsync(ReorderButton, { ariaLabel: capts.reorderFilter, dragging: isDragging, dragOver: isDragOver, onDragStart: e => this.onFilterDragStart(e, filter.id), onDragEnd: () => this.onFilterDragEnd(), onKeyDown: e => this.onFilterReorderKeyDown(e, prop, filter.id) })) : '', hAsync("div", { class: { 'select-input': true } }, hAsync("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index, isDraft) }, this.renderSelectOptions(filter.type, true)), extra ? hAsync("div", { class: "filter-extra" }, extra) : ''), hAsync("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, hAsync(TrashButton, { ariaLabel: capts.removeFilter, onClick: () => this.onRemoveFilter(filter.id) })))));
+        })), visibleFilterCount ? hAsync("div", { class: "add-filter-divider" }) : ''));
     }
     componentDidRender() {
         this.syncDialog();
@@ -7784,16 +7814,24 @@ class FilterPanel {
         el.style.left = `${left}px`;
         el.style.top = `${top}px`;
     }
-    onFilterTypeChange(e, prop, index) {
+    onFilterTypeChange(e, prop, index, isDraft = false) {
         if (!(e.target instanceof HTMLSelectElement)) {
             return;
         }
-        this.filterItems[prop][index].type = e.target.value;
+        const type = e.target.value;
+        const filter = isDraft
+            ? this.promoteDraft(prop, type)
+            : this.filterItems[prop][index];
+        if (!filter) {
+            return;
+        }
+        filter.type = type;
+        this.hasChanges = true;
         // this re-renders the input to know if we need extra input
         this.filterId++;
         // adding setTimeout will wait for the next tick DOM update then focus on input
         setTimeout(() => {
-            const input = document.getElementById('filter-input-' + this.filterItems[prop][index].id);
+            const input = document.getElementById('filter-input-' + filter.id);
             if (input instanceof HTMLInputElement) {
                 input.focus();
             }
@@ -7828,12 +7866,20 @@ class FilterPanel {
             return;
         this.filterId++;
         this.currentFilterId = this.filterId;
-        this.filterItems[prop].push({
-            id: this.currentFilterId,
-            type: this.currentFilterType,
-            value: '',
-            relation: 'and',
-        });
+        if (this.draftFilter) {
+            this.draftFilter.id = this.currentFilterId;
+            this.draftFilter.type = this.currentFilterType;
+            this.promoteDraft(prop);
+        }
+        else {
+            this.filterItems[prop].push({
+                id: this.currentFilterId,
+                type: this.currentFilterType,
+                value: '',
+                relation: 'and',
+            });
+            this.hasChanges = true;
+        }
         // adding setTimeout will wait for the next tick DOM update then focus on input
         setTimeout(() => {
             const input = document.getElementById('filter-input-' + this.currentFilterId);
@@ -7842,7 +7888,9 @@ class FilterPanel {
         }, 0);
     }
     onSave() {
-        this.filterChange.emit(this.filterItems);
+        if (this.hasChanges) {
+            this.emitFilterChange();
+        }
     }
     onCancel() {
         this.changes = undefined;
@@ -7850,16 +7898,25 @@ class FilterPanel {
     onReset() {
         var _a;
         this.assertChanges();
-        this.resetChange.emit((_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop);
+        this.draftFilter = undefined;
+        const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+        if (prop !== undefined) {
+            delete this.filterItems[prop];
+        }
+        this.resetChange.emit(prop);
         // this updates the DOM which is used by getFilterItemsList() key
         this.filterId++;
     }
     onRemoveFilter(id) {
-        var _a;
+        var _a, _b;
         this.assertChanges();
         // this is for reactivity issues for getFilterItemsList()
         this.filterId++;
         const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
+        if (((_b = this.draftFilter) === null || _b === void 0 ? void 0 : _b.id) === id) {
+            this.draftFilter = undefined;
+            return;
+        }
         const items = this.filterItems[prop !== null && prop !== void 0 ? prop : ''];
         if (!items)
             return;
@@ -7867,6 +7924,7 @@ class FilterPanel {
         if (index === -1)
             return;
         items.splice(index, 1);
+        this.hasChanges = true;
         // let's remove the prop if no more filters so the filter icon will be removed
         if (items.length === 0)
             delete this.filterItems[prop !== null && prop !== void 0 ? prop : ''];
@@ -7908,6 +7966,7 @@ class FilterPanel {
         if (!moveFilterItem(items, sourceId, targetId)) {
             return;
         }
+        this.hasChanges = true;
         this.filterId++;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
@@ -7943,6 +8002,7 @@ class FilterPanel {
         if (!target || !moveFilterItem(items, sourceId, target.id)) {
             return;
         }
+        this.hasChanges = true;
         this.filterId++;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
@@ -7961,6 +8021,7 @@ class FilterPanel {
         if (index === -1)
             return;
         items[index].relation = items[index].relation === 'and' ? 'or' : 'and';
+        this.hasChanges = true;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
         }
@@ -8009,12 +8070,22 @@ class FilterPanel {
         }
         return options;
     }
-    renderExtra(prop, index) {
-        const currentFilter = this.filterItems[prop];
+    renderExtra(prop, index, isDraft = false) {
+        var _a, _b;
+        const currentFilter = isDraft
+            ? this.draftFilter
+            : (_a = this.filterItems[prop]) === null || _a === void 0 ? void 0 : _a[index];
         if (!currentFilter)
             return '';
         const applyFilter = (value) => {
-            this.filterItems[prop][index].value = value;
+            currentFilter.value = value;
+            if (isDraft && !this.isMeaningfulDraftValue(value)) {
+                return;
+            }
+            if (isDraft && !this.promoteDraft(prop)) {
+                return;
+            }
+            this.hasChanges = true;
             if (!this.disableDynamicFiltering) {
                 this.debouncedApplyFilter();
             }
@@ -8029,11 +8100,11 @@ class FilterPanel {
             }
         };
         const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
-        const extra = this.filterEntities[currentFilter[index].type].extra;
+        const extra = (_b = this.filterEntities[currentFilter.type]) === null || _b === void 0 ? void 0 : _b.extra;
         if (typeof extra === 'function') {
             return extra(hAsync, {
-                value: currentFilter[index].value,
-                filter: currentFilter[index],
+                value: currentFilter.value,
+                filter: currentFilter,
                 prop,
                 index,
                 placeholder: capts.placeholder,
@@ -8048,7 +8119,7 @@ class FilterPanel {
         if (extra !== 'input' && extra !== 'datepicker') {
             return '';
         }
-        return (hAsync("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: capts.placeholder, type: extra === 'datepicker' ? 'date' : 'text', value: currentFilter[index].value, onInput: (e) => {
+        return (hAsync("input", { id: `filter-input-${currentFilter.id}`, placeholder: capts.placeholder, type: extra === 'datepicker' ? 'date' : 'text', value: currentFilter.value, onInput: (e) => {
                 if (e.target instanceof HTMLInputElement) {
                     applyFilter(e.target.value);
                 }
@@ -8064,6 +8135,42 @@ class FilterPanel {
                 e.stopPropagation();
             } }));
     }
+    resolveDraftFilterType(preferred) {
+        var _a, _b;
+        const available = Object.values((_b = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.filterTypes) !== null && _b !== void 0 ? _b : {}).flat();
+        const type = preferred && available.includes(preferred)
+            ? preferred
+            : available[0];
+        return type;
+    }
+    promoteDraft(prop, type) {
+        if (!this.draftFilter) {
+            return;
+        }
+        if (!this.filterItems[prop]) {
+            this.filterItems[prop] = [];
+        }
+        if (type) {
+            this.draftFilter.type = type;
+        }
+        const filter = this.draftFilter;
+        this.filterItems[prop].push(filter);
+        this.draftFilter = undefined;
+        this.hasChanges = true;
+        return filter;
+    }
+    isMeaningfulDraftValue(value) {
+        return value !== '' && value !== undefined && value !== null;
+    }
+    emitFilterChange() {
+        this.filterChange.emit(this.cloneFilterItems(this.filterItems));
+    }
+    cloneFilterItems(filterItems) {
+        return Object.fromEntries(Object.entries(filterItems).map(([prop, filters]) => [
+            prop,
+            filters.map(filter => (Object.assign({}, filter))),
+        ]));
+    }
     getAddFilterSelect() {
         return this.element.querySelector(`#${FILTER_ID}`);
     }
@@ -8096,7 +8203,7 @@ class FilterPanel {
             top: `${(_d = (_c = this.changes) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0}px`,
         };
         const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
-        return (hAsync(Host, { key: 'd0e4ebb408750b11b3965da6a25e581733c968e3' }, hAsync("dialog", { key: '3df36777c931ec1063e8574169ca880a99dbfe41', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+        return (hAsync(Host, { key: '0bb6ac39407141e989b6a2f54063ee5ed789e40e' }, hAsync("dialog", { key: '28a919ca4184018e8f00bbd31d373e153306d163', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
             } }, this.changes && [
@@ -8105,7 +8212,7 @@ class FilterPanel {
             ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
                 hAsync("label", { key: "filter-title" }, capts.title),
                 hAsync("div", { key: "filter-holder", class: "filter-holder" }, this.getFilterItemsList()),
-                hAsync("div", { key: "add-filter", class: "add-filter" }, hAsync("select", { key: 'e2a8bd29f2090d3e6c933795427b71ca190b82aa', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+                hAsync("div", { key: "add-filter", class: "add-filter" }, hAsync("select", { key: 'c5816b6699d8608bd8ec2621bbbd4c70daf52a1e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
             ],
             hAsync("slot", { key: "default-slot" }),
             ((_j = (_h = this.changes).extraBottomContent) === null || _j === void 0 ? void 0 : _j.call(_h, this.changes)) || '',
@@ -8137,6 +8244,7 @@ class FilterPanel {
             "currentFilterType": [32],
             "changes": [32],
             "filterItems": [32],
+            "draftFilter": [32],
             "draggedFilterId": [32],
             "dragOverFilterId": [32],
             "show": [64],
@@ -16392,6 +16500,11 @@ const filterTypes = {
     boolean: ['notEmpty', 'empty'],
     array: ['notEmpty', 'empty'],
 };
+/** Preferred initial operator for built-in filter families. */
+const filterTypeDefaults = {
+    string: 'contains',
+    number: 'eqN',
+};
 const filterNames = {
     none: 'None',
     empty: 'Is blank',
@@ -16434,6 +16547,8 @@ const FILTE_PANEL = 'revogr-filter-panel';
  *
  * @property {FilterLocalization|undefined} localization - translation for filter popup captions.
  *
+ * @property {boolean|undefined} defaultFilter - creates a draft condition when an empty filter panel opens. Defaults to true.
+ *
  * @property {boolean|undefined} disableDynamicFiltering - disables dynamic filtering. A way to apply filters on Save only.
  */
 /**
@@ -16455,7 +16570,7 @@ class FilterPlugin extends BasePlugin {
          *    number: ['eqN', 'neqN', 'gt']
          *  }
          */
-        this.filterByType = Object.assign({}, filterTypes);
+        this.filterByType = Object.fromEntries(Object.entries(filterTypes).map(([type, filters]) => [type, [...filters]]));
         this.filterNameIndexByType = Object.assign({}, filterNames);
         this.filterFunctionsIndexedByType = Object.assign({}, filterCoreFunctionsIndexedByType);
         this.filterProp = FILTER_PROP;
@@ -16539,11 +16654,16 @@ class FilterPlugin extends BasePlugin {
         return null;
     }
     initConfig(config) {
-        var _a;
+        var _a, _b, _c, _d;
         this.config = config;
         this.allowDuplicateOperators = (_a = config.allowDuplicateOperators) !== null && _a !== void 0 ? _a : true;
         if (this.pop) {
             this.pop.allowDuplicateOperators = this.allowDuplicateOperators;
+            this.pop.disableDynamicFiltering =
+                (_b = config.disableDynamicFiltering) !== null && _b !== void 0 ? _b : false;
+            this.pop.closeOnOutsideClick =
+                (_c = config.closeFilterPanelOnOutsideClick) !== null && _c !== void 0 ? _c : true;
+            this.pop.filterCaptions = (_d = config.localization) === null || _d === void 0 ? void 0 : _d.captions;
         }
         if (config.multiFilterItems) {
             this.multiFilterItems = Object.assign({}, config.multiFilterItems);
@@ -16632,11 +16752,12 @@ class FilterPlugin extends BasePlugin {
         }
         // filter button clicked, open filter dialog
         const buttonPos = (filterButton instanceof HTMLElement ? filterButton : el).getBoundingClientRect();
-        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x, y: buttonPos.y + buttonPos.height, anchorY: buttonPos.y, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent, extraBottomContent: this.extraBottomHyperContent });
+        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x, y: buttonPos.y + buttonPos.height, anchorY: buttonPos.y, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), defaultFilterType: this.getDefaultFilter(e.detail.filter), showDefaultFilter: this.shouldShowDefaultFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent, extraBottomContent: this.extraBottomHyperContent });
         (_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
         this.pop.show(data);
     }
-    getColumnFilter(type) {
+    getColumnFilter(config) {
+        const type = this.isColumnFilterOption(config) ? config.type : config;
         let filterType = 'string';
         if (!type) {
             return { [filterType]: this.filterByType[filterType] };
@@ -16656,6 +16777,41 @@ class FilterPlugin extends BasePlugin {
         }
         return { [filterType]: this.filterByType[filterType] };
     }
+    /** Resolve the preferred operator against the column's available filters. */
+    getDefaultFilter(config) {
+        var _a;
+        const filters = this.getColumnFilter(config);
+        const availableFilters = Object.values(filters).flat();
+        const columnDefault = this.isColumnFilterOption(config)
+            ? config.default
+            : undefined;
+        if (typeof columnDefault === 'string' &&
+            availableFilters.includes(columnDefault)) {
+            return columnDefault;
+        }
+        const firstFamily = Object.keys(filters)[0];
+        const familyDefault = filterTypeDefaults[firstFamily];
+        if (familyDefault && ((_a = filters[firstFamily]) === null || _a === void 0 ? void 0 : _a.includes(familyDefault))) {
+            return familyDefault;
+        }
+        return availableFilters[0];
+    }
+    /** Resolve grid and column-level draft opt-outs. */
+    shouldShowDefaultFilter(config) {
+        var _a;
+        if (this.isColumnFilterOption(config)) {
+            if (config.default === false) {
+                return false;
+            }
+            if (typeof config.default === 'string') {
+                return true;
+            }
+        }
+        return ((_a = this.config) === null || _a === void 0 ? void 0 : _a.defaultFilter) !== false;
+    }
+    isColumnFilterOption(value) {
+        return !!value && typeof value === 'object' && !Array.isArray(value);
+    }
     isValidType(type) {
         return !!(typeof type === 'string' && this.filterByType[type]);
     }
@@ -20594,7 +20750,7 @@ class RowResizePlugin extends BasePlugin {
     }
 }
 
-const revoGridStyleCss = () => `revo-grid:is([theme=default],[theme=dark]),revo-grid:not([theme]){--rg-theme-font-family:var(     --revo-grid-font-family,     Helvetica,     Arial,     Sans-Serif,     serif   );--rg-theme-font-size:var(--revo-grid-font-size, 12px);--rg-theme-header-height:var(--revo-grid-header-height, 30px);--rg-theme-header-font-size:var(--revo-grid-header-font-size, 12px);--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, normal);--rg-theme-header-text-transform:var(     --revo-grid-header-text-transform,     uppercase   );--rg-theme-header-text-align:var(--revo-grid-header-text-align, center);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, left);--rg-theme-header-padding:var(--revo-grid-header-padding, 0);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0 4px);border:1px solid var(--rg-theme-header-border);font-size:var(--rg-theme-font-size)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:-1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header,revo-grid:not([theme]) revogr-header{text-align:var(--rg-theme-header-text-align);line-height:var(--rg-theme-header-height);background-color:var(--rg-theme-header-bg)}revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow .rgHeaderCell,revo-grid:not([theme]) revogr-header .group-rgRow .rgHeaderCell{box-shadow:-1px 0 0 0 var(--rg-theme-header-border), -1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header .header-rgRow,revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:var(--rg-theme-header-text-transform);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);color:var(--rg-theme-header-color)}revo-grid:is([theme=default],[theme=dark]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:var(--rg-theme-header-height);box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid var(--rg-theme-header-border)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinEnd,revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset, 0 -1px 0 0 var(--rg-theme-cell-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-data,revo-grid:not([theme]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=default],[theme=dark]) revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid:is([theme=default],[theme=dark]) revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 27px)}revo-grid:is([theme=default],[theme=dark]) revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset}revo-grid:is([theme=material],[theme=darkMaterial]),revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]){--rg-theme-font-family:var(     --revo-grid-font-family,     Nunito,     -apple-system,     BlinkMacSystemFont,     'Segoe UI',     Roboto,     'Helvetica Neue',     Arial,     sans-serif,     'Apple Color Emoji',     'Segoe UI Emoji',     'Segoe UI Symbol'   );--rg-theme-header-height:var(--revo-grid-header-height, 50px);--rg-theme-header-font-size:var(     --revo-grid-header-font-size,     var(--rg-theme-font-size)   );--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, 600);--rg-theme-header-text-transform:var(     --revo-grid-header-text-transform,     none   );--rg-theme-header-text-align:var(--revo-grid-header-text-align, left);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, left);--rg-theme-header-padding:var(--revo-grid-header-padding, 0 15px);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0 15px);font-family:var(--rg-theme-font-family)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header{color:var(--rg-theme-header-color);background-color:var(--rg-theme-header-bg);line-height:var(--rg-theme-header-height);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);text-transform:var(--rg-theme-header-text-transform);text-align:var(--rg-theme-header-text-align)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header .rgHeaderCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header .rgHeaderCell{padding:var(--rg-theme-header-padding);text-overflow:ellipsis}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header .header-rgRow,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header .header-rgRow{height:var(--rg-theme-header-height)}revo-grid:is([theme=material],[theme=darkMaterial]) .rowHeaders,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) .rowHeaders{color:var(--rg-theme-row-headers-color);background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=material],[theme=darkMaterial]) .rowHeaders revogr-data .rgCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data .rgRow,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 42px)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data .rgCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:-1px 0 0 0 var(--rg-theme-cell-vertical-border) inset}revo-grid:is([theme=compact],[theme=darkCompact]){--rg-theme-font-family:var(     --revo-grid-font-family,     Nunito,     -apple-system,     BlinkMacSystemFont,     'Segoe UI',     Roboto,     'Helvetica Neue',     Arial,     sans-serif,     'Apple Color Emoji',     'Segoe UI Emoji',     'Segoe UI Symbol'   );--rg-theme-header-height:var(--revo-grid-header-height, 45px);--rg-theme-header-font-size:var(     --revo-grid-header-font-size,     var(--rg-theme-font-size)   );--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, 600);--rg-theme-header-text-transform:var(     --revo-grid-header-text-transform,     none   );--rg-theme-header-text-align:var(--revo-grid-header-text-align, left);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, left);--rg-theme-header-padding:var(--revo-grid-header-padding, 0 15px);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0 15px);font-family:var(--rg-theme-font-family)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header{color:var(--rg-theme-header-color);background-color:var(--rg-theme-header-bg);line-height:var(--rg-theme-header-height);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);text-transform:var(--rg-theme-header-text-transform);text-align:var(--rg-theme-header-text-align)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header .rgHeaderCell{padding:var(--rg-theme-header-padding);text-overflow:ellipsis}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header .header-rgRow{height:var(--rg-theme-header-height)}revo-grid:is([theme=compact],[theme=darkCompact]) .rowHeaders{color:var(--rg-theme-row-headers-color);background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=compact],[theme=darkCompact]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 32px)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:-1px 0 0 0 var(--rg-theme-cell-vertical-border) inset}revo-grid:is([theme=compact],[theme=darkCompact]) revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid[dir=rtl] .viewports{flex-direction:row-reverse}revo-grid[dir=rtl] revogr-header .rgHeaderCell{text-align:right}revo-grid[dir=rtl] revogr-data .rgCell{text-align:right}revo-grid[dir=rtl] .rowHeaders revogr-data .rgCell{text-align:right}revo-grid[dir=rtl] revogr-filter-panel{direction:rtl}revo-grid[dir=rtl] revo-dropdown .rv-dr-root{text-align:right}revo-grid[dir=rtl] .drag-position{right:0;left:auto}revo-grid[dir=rtl] .drag-auto-scroll-y{right:0;left:auto}revo-grid[dir=rtl] .clipboard{right:0;left:auto}revo-grid[dir=rtl] .draggable{margin-left:-20px;margin-right:0;padding-right:20px;padding-left:5px}revo-grid[dir=rtl] .draggable .revo-alt-icon{right:5px;left:auto}revo-grid[dir=rtl] .focused-cell{border-right:2px solid var(--rg-theme-primary);border-left:none}revo-grid[dir=rtl] .selection-range{border-right:2px solid var(--rg-theme-primary);border-left:none}revo-grid[dir=rtl] .resize-handle{right:0;left:auto}revo-grid[dir=rtl] .sort-indicator{margin-left:0;margin-right:5px}revo-grid[dir=rtl] .filter-button{margin-left:0;margin-right:5px}revo-grid[dir=rtl] .group-expand{margin-right:0;margin-left:2px;padding-right:5px;padding-left:0}revo-grid[dir=rtl] .rgCell,revo-grid[dir=rtl] .rgHeaderCell{padding-left:5px;padding-right:5px}revo-grid[dir=rtl] revogr-edit{direction:rtl}revo-grid[dir=rtl] .rgHeaderCell{direction:rtl}revo-grid[dir=rtl] revogr-header,revo-grid[dir=rtl] revogr-data{text-align:right}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders,revo-grid[dir=rtl]:not([theme]) .rowHeaders{background-color:var(--rg-theme-row-headers-bg)}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:first-child,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset, 1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:last-child,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-left:1px solid var(--rg-theme-header-border);border-right:none}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data revogr-header,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) revogr-header,revo-grid[dir=rtl]:not([theme]) revogr-header{text-align:right}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) revogr-data,revo-grid[dir=rtl]:not([theme]) revogr-data{text-align:right}.revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:"::";display:inline-block}.revo-alt-icon{-webkit-mask-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]){background-color:transparent}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) revogr-header,revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) .rowHeaders{background-color:transparent;color:inherit}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) .rowHeaders revogr-data .rgCell{color:inherit}revo-grid{--rg-theme-primary:var(--revo-grid-primary, #266ae8);--rg-theme-primary-transparent:var(     --revo-grid-primary-transparent,     rgba(38, 106, 232, 0.9)   );--rg-theme-background:var(--revo-grid-background, #fff);--rg-theme-foreground:var(--revo-grid-foreground, black);--rg-theme-divider:var(--revo-grid-divider, gray);--rg-theme-shadow:var(--revo-grid-shadow, rgba(0, 0, 0, 0.15));--rg-theme-text:var(--revo-grid-text, black);--rg-theme-border:var(--revo-grid-border, rgba(0, 0, 0, 0.2));--rg-theme-header-bg:var(--revo-grid-header-bg, #f8f9fa);--rg-theme-header-color:var(--revo-grid-header-color, #000);--rg-theme-header-border:var(--revo-grid-header-border, #cecece);--rg-theme-header-focused-bg:var(     --revo-grid-header-focused-bg,     var(--rg-theme-focused-bg)   );--rg-theme-header-hover-bg:var(     --revo-grid-header-hover-bg,     var(--rg-theme-row-hover)   );--rg-theme-cell-border:var(--revo-grid-cell-border, #e2e3e3);--rg-theme-cell-vertical-border:var(     --revo-grid-cell-vertical-border,     transparent   );--rg-theme-focused-bg:var(--revo-grid-focused-bg, rgba(233, 234, 237, 0.5));--rg-theme-row-hover:var(--revo-grid-row-hover, #f1f1f1);--rg-theme-row-headers-bg:var(     --revo-grid-row-headers-bg,     var(--rg-theme-header-bg)   );--rg-theme-row-headers-color:var(     --revo-grid-row-headers-color,     var(--rg-theme-header-color)   );--rg-theme-cell-disabled-bg:var(     --revo-grid-cell-disabled-bg,     rgba(0, 0, 0, 0.07)   );--rg-theme-filter-panel-bg:var(--revo-grid-filter-panel-bg, #fff);--rg-theme-filter-panel-border:var(--revo-grid-filter-panel-border, #d9d9d9);--rg-theme-filter-panel-shadow:var(     --revo-grid-filter-panel-shadow,     rgba(0, 0, 0, 0.15)   );--rg-theme-filter-panel-input-bg:var(     --revo-grid-filter-panel-input-bg,     #eaeaeb   );--rg-theme-filter-panel-divider:var(     --revo-grid-filter-panel-divider,     #d9d9d9   );--rg-theme-filter-panel-select-border:var(     --revo-grid-filter-panel-select-border,     transparent   );--rg-theme-filter-panel-select-border-hover:var(     --revo-grid-filter-panel-select-border-hover,     transparent   );--rg-theme-filter-panel-reorder-accent:var(     --revo-grid-filter-panel-reorder-accent,     #007cb2   );--rg-theme-filter-panel-reorder-color:var(     --revo-grid-filter-panel-reorder-color,     #6b7280   );--rg-theme-filter-panel-text:var(     --revo-grid-filter-panel-text,     var(--rg-theme-text)   );--rg-theme-filter-panel-muted-text:var(     --revo-grid-filter-panel-muted-text,     gray   );--rg-theme-filter-panel-focus-ring:var(     --revo-grid-filter-panel-focus-ring,     0 0 1px 3px rgba(59, 153, 252, 0.7)   );--rg-theme-filter-panel-icon:var(--revo-grid-filter-panel-icon, gray);--rg-theme-filter-panel-icon-active:var(     --revo-grid-filter-panel-icon-active,     #10224a   );--rg-theme-font-family:var(     --revo-grid-font-family,     Helvetica,     Arial,     Sans-Serif,     serif   );--rg-theme-font-size:var(--revo-grid-font-size, 14px);--rg-theme-header-height:var(--revo-grid-header-height, 30px);--rg-theme-header-font-size:var(--revo-grid-header-font-size, 12px);--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, normal);--rg-theme-header-text-transform:var(     --revo-grid-header-text-transform,     uppercase   );--rg-theme-header-text-align:var(--revo-grid-header-text-align, center);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, center);--rg-theme-header-padding:var(--revo-grid-header-padding, 0);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0);--rg-theme-selection-border:var(--revo-grid-selection-border, #0d63e8);--rg-theme-selection-bg:var(--revo-grid-selection-bg, transparent);--rg-theme-autofill-handle-bg:var(     --revo-grid-autofill-handle-bg,     var(--rg-theme-selection-border)   );--rg-theme-autofill-handle-border:var(     --revo-grid-autofill-handle-border,     white   );--rg-theme-range-handle-bg:var(     --revo-grid-range-handle-bg,     rgba(0, 0, 0, 0.2)   );--rg-theme-temporary-range-border:var(     --revo-grid-temporary-range-border,     rgb(255, 94, 0)   );--rg-theme-temporary-selection-border:var(     --revo-grid-temporary-selection-border,     gray   );--rg-theme-header-resize-hover:var(     --revo-grid-header-resize-hover,     deepskyblue   );--rg-theme-button-text:var(--revo-grid-button-text, #fff);--rg-theme-button-bg:var(--revo-grid-button-bg, #4545ff);--rg-theme-button-success-bg:var(--revo-grid-button-success-bg, #009037);--rg-theme-button-danger-bg:var(--revo-grid-button-danger-bg, #e0662e);--rg-theme-button-outline-border:var(     --revo-grid-button-outline-border,     #dbdbdb   );--rg-theme-button-outline-text:var(--revo-grid-button-outline-text, #000)}revo-grid[data-rg-theme-scheme=dark]{color-scheme:dark;--rg-theme-background:var(--revo-grid-background, #212529);--rg-theme-foreground:var(--revo-grid-foreground, #fff);--rg-theme-text:var(--revo-grid-text, rgba(255, 255, 255, 0.9));--rg-theme-divider:var(--revo-grid-divider, #505050);--rg-theme-border:var(     --revo-grid-border,     rgba(255, 255, 255, 0.2)   );--rg-theme-filter-panel-bg:var(--revo-grid-filter-panel-bg, #212529);--rg-theme-filter-panel-border:var(     --revo-grid-filter-panel-border,     #505050   );--rg-theme-filter-panel-input-bg:var(     --revo-grid-filter-panel-input-bg,     #343a40   );--rg-theme-filter-panel-divider:var(     --revo-grid-filter-panel-divider,     #505050   );--rg-theme-filter-panel-icon-active:var(     --revo-grid-filter-panel-icon-active,     #fff   );--rg-theme-header-bg:var(--revo-grid-header-bg, #343a40);--rg-theme-header-color:var(--revo-grid-header-color, #fff);--rg-theme-header-border:var(--revo-grid-header-border, #505050);--rg-theme-cell-border:var(--revo-grid-cell-border, #424242);--rg-theme-focused-bg:var(     --revo-grid-focused-bg,     rgba(52, 58, 64, 0.5)   );--rg-theme-row-hover:var(     --revo-grid-row-hover,     rgba(80, 80, 80, 0.5)   );--rg-theme-row-headers-bg:var(     --revo-grid-row-headers-bg,     rgba(52, 58, 64, 0.8)   );--rg-theme-row-headers-color:var(     --revo-grid-row-headers-color,     rgba(255, 255, 255, 0.8)   );--rg-theme-cell-disabled-bg:var(     --revo-grid-cell-disabled-bg,     rgba(255, 255, 255, 0.07)   );--rg-theme-button-outline-border:var(     --revo-grid-button-outline-border,     #404040   );--rg-theme-button-outline-text:var(     --revo-grid-button-outline-text,     #d8d8d8   )}revo-grid[data-rg-theme-scheme=light]{color-scheme:light}revo-grid{}revo-grid>*{--revo-grid-primary:var(--rg-theme-primary);--revo-grid-primary-transparent:var(--rg-theme-primary-transparent);--revo-grid-background:var(--rg-theme-background);--revo-grid-foreground:var(--rg-theme-foreground);--revo-grid-divider:var(--rg-theme-divider);--revo-grid-shadow:var(--rg-theme-shadow);--revo-grid-text:var(--rg-theme-text);--revo-grid-border:var(--rg-theme-border);--revo-grid-header-bg:var(--rg-theme-header-bg);--revo-grid-header-color:var(--rg-theme-header-color);--revo-grid-header-border:var(--rg-theme-header-border);--revo-grid-header-focused-bg:var(--rg-theme-header-focused-bg);--revo-grid-header-hover-bg:var(--rg-theme-header-hover-bg);--revo-grid-cell-border:var(--rg-theme-cell-border);--revo-grid-cell-vertical-border:var(--rg-theme-cell-vertical-border);--revo-grid-focused-bg:var(--rg-theme-focused-bg);--revo-grid-row-hover:var(--rg-theme-row-hover);--revo-grid-row-headers-bg:var(--rg-theme-row-headers-bg);--revo-grid-row-headers-color:var(--rg-theme-row-headers-color);--revo-grid-cell-disabled-bg:var(--rg-theme-cell-disabled-bg);--revo-grid-filter-panel-bg:var(--rg-theme-filter-panel-bg);--revo-grid-filter-panel-border:var(--rg-theme-filter-panel-border);--revo-grid-filter-panel-shadow:var(--rg-theme-filter-panel-shadow);--revo-grid-filter-panel-input-bg:var(--rg-theme-filter-panel-input-bg);--revo-grid-filter-panel-divider:var(--rg-theme-filter-panel-divider);--revo-grid-filter-panel-select-border:var(--rg-theme-filter-panel-select-border);--revo-grid-filter-panel-select-border-hover:var(--rg-theme-filter-panel-select-border-hover);--revo-grid-filter-panel-reorder-accent:var(--rg-theme-filter-panel-reorder-accent);--revo-grid-filter-panel-reorder-color:var(--rg-theme-filter-panel-reorder-color);--revo-grid-filter-panel-text:var(--rg-theme-filter-panel-text);--revo-grid-filter-panel-muted-text:var(--rg-theme-filter-panel-muted-text);--revo-grid-filter-panel-focus-ring:var(--rg-theme-filter-panel-focus-ring);--revo-grid-filter-panel-icon:var(--rg-theme-filter-panel-icon);--revo-grid-filter-panel-icon-active:var(--rg-theme-filter-panel-icon-active);--revo-grid-font-family:var(--rg-theme-font-family);--revo-grid-font-size:var(--rg-theme-font-size);--revo-grid-header-height:var(--rg-theme-header-height);--revo-grid-header-font-size:var(--rg-theme-header-font-size);--revo-grid-header-font-weight:var(--rg-theme-header-font-weight);--revo-grid-header-text-transform:var(--rg-theme-header-text-transform);--revo-grid-header-text-align:var(--rg-theme-header-text-align);--revo-grid-cell-text-align:var(--rg-theme-cell-text-align);--revo-grid-header-padding:var(--rg-theme-header-padding);--revo-grid-cell-padding:var(--rg-theme-cell-padding);--revo-grid-selection-border:var(--rg-theme-selection-border);--revo-grid-selection-bg:var(--rg-theme-selection-bg);--revo-grid-autofill-handle-bg:var(--rg-theme-autofill-handle-bg);--revo-grid-autofill-handle-border:var(--rg-theme-autofill-handle-border);--revo-grid-range-handle-bg:var(--rg-theme-range-handle-bg);--revo-grid-temporary-range-border:var(--rg-theme-temporary-range-border);--revo-grid-temporary-selection-border:var(--rg-theme-temporary-selection-border);--revo-grid-header-resize-hover:var(--rg-theme-header-resize-hover);--revo-grid-button-text:var(--rg-theme-button-text);--revo-grid-button-bg:var(--rg-theme-button-bg);--revo-grid-button-success-bg:var(--rg-theme-button-success-bg);--revo-grid-button-danger-bg:var(--rg-theme-button-danger-bg);--revo-grid-button-outline-border:var(--rg-theme-button-outline-border);--revo-grid-button-outline-text:var(--rg-theme-button-outline-text)}revo-grid{direction:ltr !important}revo-grid revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid revogr-header .rgHeaderCell.sortable:hover{background-color:var(--rg-theme-header-hover-bg)}revo-grid revogr-header .rgHeaderCell.focused-cell{background:var(--rg-theme-header-focused-bg)}revo-grid .footer-wrapper revogr-data{box-shadow:0 -1px 0 var(--rg-theme-cell-border)}revo-grid revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 var(--rg-theme-cell-border) inset}revo-grid revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 var(--rg-theme-cell-border)}revo-grid revogr-data .rgRow{box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset}revo-grid revogr-data .rgRow.focused-rgRow{background-color:var(--rg-theme-focused-bg)}revo-grid revogr-data .rgCell{color:var(--rg-theme-text)}revo-grid revogr-data .rgCell.disabled{background-color:var(--rg-theme-cell-disabled-bg)}revo-grid{display:flex !important;height:100%;min-height:300px;background-color:var(--rg-theme-background);font-family:var(--rg-theme-font-family);font-size:var(--rg-theme-font-size);position:relative;color:var(--rg-theme-text);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}revo-grid .attribution{position:absolute;bottom:0;left:0;right:0;z-index:1000;width:0;height:0;border-left:4px solid var(--rg-theme-primary-transparent);border-bottom:4px solid var(--rg-theme-primary-transparent);border-top:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;bottom:0;left:0;background-color:var(--rg-theme-background);padding:4px;border-radius:4px;box-shadow:0 1px 10px var(--rg-theme-border);white-space:nowrap;text-decoration:none;color:var(--rg-theme-text);letter-spacing:0.3px;font-size:11px;opacity:0;width:4px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-width:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1}revo-grid{display:flex;flex-direction:column;width:100%;height:100%}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:var(--rg-theme-background);border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 var(--rg-theme-shadow);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:var(--rg-theme-foreground);position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:var(--rg-theme-divider);pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:var(--rg-theme-divider);pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}`;
+const revoGridStyleCss = () => `revo-grid:is([theme=default],[theme=dark]),revo-grid:not([theme]){--rg-theme-font-family:var(     --revo-grid-font-family,     Helvetica,     Arial,     Sans-Serif,     serif   );--rg-theme-font-size:var(--revo-grid-font-size, 12px);--rg-theme-header-height:var(--revo-grid-header-height, 30px);--rg-theme-header-font-size:var(--revo-grid-header-font-size, 12px);--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, normal);--rg-theme-header-text-transform:var(     --revo-grid-header-text-transform,     uppercase   );--rg-theme-header-text-align:var(--revo-grid-header-text-align, center);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, left);--rg-theme-header-padding:var(--revo-grid-header-padding, 0);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0 4px);border:1px solid var(--rg-theme-header-border);font-size:var(--rg-theme-font-size)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:-1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header,revo-grid:not([theme]) revogr-header{text-align:var(--rg-theme-header-text-align);line-height:var(--rg-theme-header-height);background-color:var(--rg-theme-header-bg)}revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow .rgHeaderCell,revo-grid:not([theme]) revogr-header .group-rgRow .rgHeaderCell{box-shadow:-1px 0 0 0 var(--rg-theme-header-border), -1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header .header-rgRow,revo-grid:is([theme=default],[theme=dark]) revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:var(--rg-theme-header-text-transform);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);color:var(--rg-theme-header-color)}revo-grid:is([theme=default],[theme=dark]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:var(--rg-theme-header-height);box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 var(--rg-theme-header-border) inset, 0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid var(--rg-theme-header-border)}revo-grid:is([theme=default],[theme=dark]) .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--rg-theme-header-border) inset, -1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinEnd,revo-grid:is([theme=default],[theme=dark]) revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 var(--rg-theme-header-border) inset}revo-grid:is([theme=default],[theme=dark]) .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset, 0 -1px 0 0 var(--rg-theme-cell-border) inset}revo-grid:is([theme=default],[theme=dark]) revogr-data,revo-grid:not([theme]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=default],[theme=dark]) revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid:is([theme=default],[theme=dark]) revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 27px)}revo-grid:is([theme=default],[theme=dark]) revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset, -1px 0 0 0 var(--rg-theme-cell-border) inset}revo-grid:is([theme=material],[theme=darkMaterial]),revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]){--rg-theme-font-family:var(     --revo-grid-font-family,     Nunito,     -apple-system,     BlinkMacSystemFont,     'Segoe UI',     Roboto,     'Helvetica Neue',     Arial,     sans-serif,     'Apple Color Emoji',     'Segoe UI Emoji',     'Segoe UI Symbol'   );--rg-theme-header-height:var(--revo-grid-header-height, 50px);--rg-theme-header-font-size:var(     --revo-grid-header-font-size,     var(--rg-theme-font-size)   );--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, 600);--rg-theme-header-text-transform:var(     --revo-grid-header-text-transform,     none   );--rg-theme-header-text-align:var(--revo-grid-header-text-align, left);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, left);--rg-theme-header-padding:var(--revo-grid-header-padding, 0 15px);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0 15px);font-family:var(--rg-theme-font-family)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header{color:var(--rg-theme-header-color);background-color:var(--rg-theme-header-bg);line-height:var(--rg-theme-header-height);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);text-transform:var(--rg-theme-header-text-transform);text-align:var(--rg-theme-header-text-align)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header .rgHeaderCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header .rgHeaderCell{padding:0;text-overflow:ellipsis}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header .rgHeaderCell .header-content,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header .rgHeaderCell .header-content{padding:var(--rg-theme-header-padding)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-header .header-rgRow,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-header .header-rgRow{height:var(--rg-theme-header-height)}revo-grid:is([theme=material],[theme=darkMaterial]) .rowHeaders,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) .rowHeaders{color:var(--rg-theme-row-headers-color);background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=material],[theme=darkMaterial]) .rowHeaders revogr-data .rgCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data .rgRow,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 42px)}revo-grid:is([theme=material],[theme=darkMaterial]) revogr-data .rgCell,revo-grid[theme]:not([theme=default],[theme=dark],[theme=compact],[theme=darkCompact]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:-1px 0 0 0 var(--rg-theme-cell-vertical-border) inset}revo-grid:is([theme=compact],[theme=darkCompact]){--rg-theme-font-family:var(     --revo-grid-font-family,     Nunito,     -apple-system,     BlinkMacSystemFont,     'Segoe UI',     Roboto,     'Helvetica Neue',     Arial,     sans-serif,     'Apple Color Emoji',     'Segoe UI Emoji',     'Segoe UI Symbol'   );--rg-theme-header-height:var(--revo-grid-header-height, 45px);--rg-theme-header-font-size:var(     --revo-grid-header-font-size,     var(--rg-theme-font-size)   );--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, 600);--rg-theme-header-text-transform:var(     --revo-grid-header-text-transform,     none   );--rg-theme-header-text-align:var(--revo-grid-header-text-align, left);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, left);--rg-theme-header-padding:var(--revo-grid-header-padding, 0 15px);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0 15px);font-family:var(--rg-theme-font-family)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header{color:var(--rg-theme-header-color);background-color:var(--rg-theme-header-bg);line-height:var(--rg-theme-header-height);font-size:var(--rg-theme-header-font-size);font-weight:var(--rg-theme-header-font-weight);text-transform:var(--rg-theme-header-text-transform);text-align:var(--rg-theme-header-text-align)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header .rgHeaderCell{padding:0;text-overflow:ellipsis}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header .rgHeaderCell .header-content{padding:var(--rg-theme-header-padding)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-header .header-rgRow{height:var(--rg-theme-header-height)}revo-grid:is([theme=compact],[theme=darkCompact]) .rowHeaders{color:var(--rg-theme-row-headers-color);background-color:var(--rg-theme-row-headers-bg)}revo-grid:is([theme=compact],[theme=darkCompact]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data{text-align:var(--rg-theme-cell-text-align)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data .rgRow{line-height:var(--rg-theme-row-size, 32px)}revo-grid:is([theme=compact],[theme=darkCompact]) revogr-data .rgCell{padding:var(--rg-theme-cell-padding);box-shadow:-1px 0 0 0 var(--rg-theme-cell-vertical-border) inset}revo-grid:is([theme=compact],[theme=darkCompact]) revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid[dir=rtl] .viewports{flex-direction:row-reverse}revo-grid[dir=rtl] revogr-header .rgHeaderCell{text-align:right}revo-grid[dir=rtl] revogr-data .rgCell{text-align:right}revo-grid[dir=rtl] .rowHeaders revogr-data .rgCell{text-align:right}revo-grid[dir=rtl] revogr-filter-panel{direction:rtl}revo-grid[dir=rtl] revo-dropdown .rv-dr-root{text-align:right}revo-grid[dir=rtl] .drag-position{right:0;left:auto}revo-grid[dir=rtl] .drag-auto-scroll-y{right:0;left:auto}revo-grid[dir=rtl] .clipboard{right:0;left:auto}revo-grid[dir=rtl] .draggable{margin-left:-20px;margin-right:0;padding-right:20px;padding-left:5px}revo-grid[dir=rtl] .draggable .revo-alt-icon{right:5px;left:auto}revo-grid[dir=rtl] .focused-cell{border-right:2px solid var(--rg-theme-primary);border-left:none}revo-grid[dir=rtl] .selection-range{border-right:2px solid var(--rg-theme-primary);border-left:none}revo-grid[dir=rtl] .resize-handle{right:0;left:auto}revo-grid[dir=rtl] .sort-indicator{margin-left:0;margin-right:5px}revo-grid[dir=rtl] .filter-button{margin-left:0;margin-right:5px}revo-grid[dir=rtl] .group-expand{margin-right:0;margin-left:2px;padding-right:5px;padding-left:0}revo-grid[dir=rtl] .rgCell,revo-grid[dir=rtl] .rgHeaderCell{padding-left:5px;padding-right:5px}revo-grid[dir=rtl] revogr-edit{direction:rtl}revo-grid[dir=rtl] .rgHeaderCell{direction:rtl}revo-grid[dir=rtl] revogr-header,revo-grid[dir=rtl] revogr-data{text-align:right}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders,revo-grid[dir=rtl]:not([theme]) .rowHeaders{background-color:var(--rg-theme-row-headers-bg)}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--rg-theme-row-headers-color)}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:first-child,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset, 1px 0 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data .rgCell:last-child,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-left:1px solid var(--rg-theme-header-border);border-right:none}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) .rowHeaders revogr-data revogr-header,revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) revogr-header,revo-grid[dir=rtl]:not([theme]) revogr-header{text-align:right}revo-grid[dir=rtl]:is([theme=default],[theme=dark]) revogr-data,revo-grid[dir=rtl]:not([theme]) revogr-data{text-align:right}.revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:"::";display:inline-block}.revo-alt-icon{-webkit-mask-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]){background-color:transparent}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) revogr-header,revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) .rowHeaders{background-color:transparent;color:inherit}revo-grid[theme]:is([theme=compact],[theme=darkCompact],[theme=material],[theme=darkMaterial]) .rowHeaders revogr-data .rgCell{color:inherit}revo-grid{--rg-theme-primary:var(--revo-grid-primary, #266ae8);--rg-theme-primary-transparent:var(     --revo-grid-primary-transparent,     rgba(38, 106, 232, 0.9)   );--rg-theme-background:var(--revo-grid-background, #fff);--rg-theme-foreground:var(--revo-grid-foreground, black);--rg-theme-divider:var(--revo-grid-divider, gray);--rg-theme-shadow:var(--revo-grid-shadow, rgba(0, 0, 0, 0.15));--rg-theme-text:var(--revo-grid-text, black);--rg-theme-border:var(--revo-grid-border, rgba(0, 0, 0, 0.2));--rg-theme-header-bg:var(--revo-grid-header-bg, #f8f9fa);--rg-theme-header-color:var(--revo-grid-header-color, #000);--rg-theme-header-border:var(--revo-grid-header-border, #cecece);--rg-theme-header-focused-bg:var(     --revo-grid-header-focused-bg,     var(--rg-theme-focused-bg)   );--rg-theme-header-hover-bg:var(     --revo-grid-header-hover-bg,     var(--rg-theme-row-hover)   );--rg-theme-cell-border:var(--revo-grid-cell-border, #e2e3e3);--rg-theme-cell-vertical-border:var(     --revo-grid-cell-vertical-border,     transparent   );--rg-theme-focused-bg:var(--revo-grid-focused-bg, rgba(233, 234, 237, 0.5));--rg-theme-row-hover:var(--revo-grid-row-hover, #f1f1f1);--rg-theme-row-headers-bg:var(     --revo-grid-row-headers-bg,     var(--rg-theme-header-bg)   );--rg-theme-row-headers-color:var(     --revo-grid-row-headers-color,     var(--rg-theme-header-color)   );--rg-theme-cell-disabled-bg:var(     --revo-grid-cell-disabled-bg,     rgba(0, 0, 0, 0.07)   );--rg-theme-filter-panel-bg:var(--revo-grid-filter-panel-bg, #fff);--rg-theme-filter-panel-border:var(--revo-grid-filter-panel-border, #d9d9d9);--rg-theme-filter-panel-shadow:var(     --revo-grid-filter-panel-shadow,     rgba(0, 0, 0, 0.15)   );--rg-theme-filter-panel-input-bg:var(     --revo-grid-filter-panel-input-bg,     #eaeaeb   );--rg-theme-filter-panel-divider:var(     --revo-grid-filter-panel-divider,     #d9d9d9   );--rg-theme-filter-panel-select-border:var(     --revo-grid-filter-panel-select-border,     transparent   );--rg-theme-filter-panel-select-border-hover:var(     --revo-grid-filter-panel-select-border-hover,     transparent   );--rg-theme-filter-panel-reorder-accent:var(     --revo-grid-filter-panel-reorder-accent,     #007cb2   );--rg-theme-filter-panel-reorder-color:var(     --revo-grid-filter-panel-reorder-color,     #6b7280   );--rg-theme-filter-panel-text:var(     --revo-grid-filter-panel-text,     var(--rg-theme-text)   );--rg-theme-filter-panel-muted-text:var(     --revo-grid-filter-panel-muted-text,     gray   );--rg-theme-filter-panel-focus-ring:var(     --revo-grid-filter-panel-focus-ring,     0 0 1px 3px rgba(59, 153, 252, 0.7)   );--rg-theme-filter-panel-icon:var(--revo-grid-filter-panel-icon, gray);--rg-theme-filter-panel-icon-active:var(     --revo-grid-filter-panel-icon-active,     #10224a   );--rg-theme-font-family:var(     --revo-grid-font-family,     Helvetica,     Arial,     Sans-Serif,     serif   );--rg-theme-font-size:var(--revo-grid-font-size, 14px);--rg-theme-header-height:var(--revo-grid-header-height, 30px);--rg-theme-header-font-size:var(--revo-grid-header-font-size, 12px);--rg-theme-header-font-weight:var(--revo-grid-header-font-weight, normal);--rg-theme-header-text-transform:var(     --revo-grid-header-text-transform,     uppercase   );--rg-theme-header-text-align:var(--revo-grid-header-text-align, center);--rg-theme-cell-text-align:var(--revo-grid-cell-text-align, center);--rg-theme-header-padding:var(--revo-grid-header-padding, 0);--rg-theme-cell-padding:var(--revo-grid-cell-padding, 0);--rg-theme-selection-border:var(--revo-grid-selection-border, #0d63e8);--rg-theme-selection-bg:var(--revo-grid-selection-bg, transparent);--rg-theme-autofill-handle-bg:var(     --revo-grid-autofill-handle-bg,     var(--rg-theme-selection-border)   );--rg-theme-autofill-handle-border:var(     --revo-grid-autofill-handle-border,     white   );--rg-theme-range-handle-bg:var(     --revo-grid-range-handle-bg,     rgba(0, 0, 0, 0.2)   );--rg-theme-temporary-range-border:var(     --revo-grid-temporary-range-border,     rgb(255, 94, 0)   );--rg-theme-temporary-selection-border:var(     --revo-grid-temporary-selection-border,     gray   );--rg-theme-header-resize-hover:var(     --revo-grid-header-resize-hover,     deepskyblue   );--rg-theme-button-text:var(--revo-grid-button-text, #fff);--rg-theme-button-bg:var(--revo-grid-button-bg, #4545ff);--rg-theme-button-success-bg:var(--revo-grid-button-success-bg, #009037);--rg-theme-button-danger-bg:var(--revo-grid-button-danger-bg, #e0662e);--rg-theme-button-outline-border:var(     --revo-grid-button-outline-border,     #dbdbdb   );--rg-theme-button-outline-text:var(--revo-grid-button-outline-text, #000)}revo-grid[data-rg-theme-scheme=dark]{color-scheme:dark;--rg-theme-background:var(--revo-grid-background, #212529);--rg-theme-foreground:var(--revo-grid-foreground, #fff);--rg-theme-text:var(--revo-grid-text, rgba(255, 255, 255, 0.9));--rg-theme-divider:var(--revo-grid-divider, #505050);--rg-theme-border:var(     --revo-grid-border,     rgba(255, 255, 255, 0.2)   );--rg-theme-filter-panel-bg:var(--revo-grid-filter-panel-bg, #212529);--rg-theme-filter-panel-border:var(     --revo-grid-filter-panel-border,     #505050   );--rg-theme-filter-panel-input-bg:var(     --revo-grid-filter-panel-input-bg,     #343a40   );--rg-theme-filter-panel-divider:var(     --revo-grid-filter-panel-divider,     #505050   );--rg-theme-filter-panel-icon-active:var(     --revo-grid-filter-panel-icon-active,     #fff   );--rg-theme-header-bg:var(--revo-grid-header-bg, #343a40);--rg-theme-header-color:var(--revo-grid-header-color, #fff);--rg-theme-header-border:var(--revo-grid-header-border, #505050);--rg-theme-cell-border:var(--revo-grid-cell-border, #424242);--rg-theme-focused-bg:var(     --revo-grid-focused-bg,     rgba(52, 58, 64, 0.5)   );--rg-theme-row-hover:var(     --revo-grid-row-hover,     rgba(80, 80, 80, 0.5)   );--rg-theme-row-headers-bg:var(     --revo-grid-row-headers-bg,     rgba(52, 58, 64, 0.8)   );--rg-theme-row-headers-color:var(     --revo-grid-row-headers-color,     rgba(255, 255, 255, 0.8)   );--rg-theme-cell-disabled-bg:var(     --revo-grid-cell-disabled-bg,     rgba(255, 255, 255, 0.07)   );--rg-theme-button-outline-border:var(     --revo-grid-button-outline-border,     #404040   );--rg-theme-button-outline-text:var(     --revo-grid-button-outline-text,     #d8d8d8   )}revo-grid[data-rg-theme-scheme=light]{color-scheme:light}revo-grid{}revo-grid>*{--revo-grid-primary:var(--rg-theme-primary);--revo-grid-primary-transparent:var(--rg-theme-primary-transparent);--revo-grid-background:var(--rg-theme-background);--revo-grid-foreground:var(--rg-theme-foreground);--revo-grid-divider:var(--rg-theme-divider);--revo-grid-shadow:var(--rg-theme-shadow);--revo-grid-text:var(--rg-theme-text);--revo-grid-border:var(--rg-theme-border);--revo-grid-header-bg:var(--rg-theme-header-bg);--revo-grid-header-color:var(--rg-theme-header-color);--revo-grid-header-border:var(--rg-theme-header-border);--revo-grid-header-focused-bg:var(--rg-theme-header-focused-bg);--revo-grid-header-hover-bg:var(--rg-theme-header-hover-bg);--revo-grid-cell-border:var(--rg-theme-cell-border);--revo-grid-cell-vertical-border:var(--rg-theme-cell-vertical-border);--revo-grid-focused-bg:var(--rg-theme-focused-bg);--revo-grid-row-hover:var(--rg-theme-row-hover);--revo-grid-row-headers-bg:var(--rg-theme-row-headers-bg);--revo-grid-row-headers-color:var(--rg-theme-row-headers-color);--revo-grid-cell-disabled-bg:var(--rg-theme-cell-disabled-bg);--revo-grid-filter-panel-bg:var(--rg-theme-filter-panel-bg);--revo-grid-filter-panel-border:var(--rg-theme-filter-panel-border);--revo-grid-filter-panel-shadow:var(--rg-theme-filter-panel-shadow);--revo-grid-filter-panel-input-bg:var(--rg-theme-filter-panel-input-bg);--revo-grid-filter-panel-divider:var(--rg-theme-filter-panel-divider);--revo-grid-filter-panel-select-border:var(--rg-theme-filter-panel-select-border);--revo-grid-filter-panel-select-border-hover:var(--rg-theme-filter-panel-select-border-hover);--revo-grid-filter-panel-reorder-accent:var(--rg-theme-filter-panel-reorder-accent);--revo-grid-filter-panel-reorder-color:var(--rg-theme-filter-panel-reorder-color);--revo-grid-filter-panel-text:var(--rg-theme-filter-panel-text);--revo-grid-filter-panel-muted-text:var(--rg-theme-filter-panel-muted-text);--revo-grid-filter-panel-focus-ring:var(--rg-theme-filter-panel-focus-ring);--revo-grid-filter-panel-icon:var(--rg-theme-filter-panel-icon);--revo-grid-filter-panel-icon-active:var(--rg-theme-filter-panel-icon-active);--revo-grid-font-family:var(--rg-theme-font-family);--revo-grid-font-size:var(--rg-theme-font-size);--revo-grid-header-height:var(--rg-theme-header-height);--revo-grid-header-font-size:var(--rg-theme-header-font-size);--revo-grid-header-font-weight:var(--rg-theme-header-font-weight);--revo-grid-header-text-transform:var(--rg-theme-header-text-transform);--revo-grid-header-text-align:var(--rg-theme-header-text-align);--revo-grid-cell-text-align:var(--rg-theme-cell-text-align);--revo-grid-header-padding:var(--rg-theme-header-padding);--revo-grid-cell-padding:var(--rg-theme-cell-padding);--revo-grid-selection-border:var(--rg-theme-selection-border);--revo-grid-selection-bg:var(--rg-theme-selection-bg);--revo-grid-autofill-handle-bg:var(--rg-theme-autofill-handle-bg);--revo-grid-autofill-handle-border:var(--rg-theme-autofill-handle-border);--revo-grid-range-handle-bg:var(--rg-theme-range-handle-bg);--revo-grid-temporary-range-border:var(--rg-theme-temporary-range-border);--revo-grid-temporary-selection-border:var(--rg-theme-temporary-selection-border);--revo-grid-header-resize-hover:var(--rg-theme-header-resize-hover);--revo-grid-button-text:var(--rg-theme-button-text);--revo-grid-button-bg:var(--rg-theme-button-bg);--revo-grid-button-success-bg:var(--rg-theme-button-success-bg);--revo-grid-button-danger-bg:var(--rg-theme-button-danger-bg);--revo-grid-button-outline-border:var(--rg-theme-button-outline-border);--revo-grid-button-outline-text:var(--rg-theme-button-outline-text)}revo-grid{direction:ltr !important}revo-grid revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 var(--rg-theme-header-border), 0 -1px 0 0 var(--rg-theme-header-border) inset}revo-grid revogr-header .rgHeaderCell.sortable:hover{background-color:var(--rg-theme-header-hover-bg)}revo-grid revogr-header .rgHeaderCell.focused-cell{background:var(--rg-theme-header-focused-bg)}revo-grid .footer-wrapper revogr-data{box-shadow:0 -1px 0 var(--rg-theme-cell-border)}revo-grid revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 var(--rg-theme-cell-border) inset}revo-grid revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 var(--rg-theme-cell-border)}revo-grid revogr-data .rgRow{box-shadow:0 -1px 0 0 var(--rg-theme-cell-border) inset}revo-grid revogr-data .rgRow.focused-rgRow{background-color:var(--rg-theme-focused-bg)}revo-grid revogr-data .rgCell{color:var(--rg-theme-text)}revo-grid revogr-data .rgCell.disabled{background-color:var(--rg-theme-cell-disabled-bg)}revo-grid{display:flex !important;height:100%;min-height:300px;background-color:var(--rg-theme-background);font-family:var(--rg-theme-font-family);font-size:var(--rg-theme-font-size);position:relative;color:var(--rg-theme-text);-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}revo-grid .attribution{position:absolute;bottom:0;left:0;right:0;z-index:1000;width:0;height:0;border-left:4px solid var(--rg-theme-primary-transparent);border-bottom:4px solid var(--rg-theme-primary-transparent);border-top:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;bottom:0;left:0;background-color:var(--rg-theme-background);padding:4px;border-radius:4px;box-shadow:0 1px 10px var(--rg-theme-border);white-space:nowrap;text-decoration:none;color:var(--rg-theme-text);letter-spacing:0.3px;font-size:11px;opacity:0;width:4px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-width:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1}revo-grid{display:flex;flex-direction:column;width:100%;height:100%}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:var(--rg-theme-background);border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 var(--rg-theme-shadow);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:var(--rg-theme-foreground);position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:var(--rg-theme-divider);pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:var(--rg-theme-divider);pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}`;
 
 const DEFAULT_COLUMN_SIZE = 100;
 function getColumnSize(size) {
@@ -22585,19 +22741,20 @@ const HeaderRenderer = (p) => {
     const hasSortingSign = !!(((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable) ||
         ((_b = p.data) === null || _b === void 0 ? void 0 : _b.order) ||
         ((_c = p.data) === null || _c === void 0 ? void 0 : _c.sortIndex));
+    const hasFilterButton = !!(p.canFilter && ((_d = p.data) === null || _d === void 0 ? void 0 : _d.filter) !== false);
     const cellClass = {
         [HEADER_CLASS]: true,
-        [HEADER_SORTABLE_CLASS]: !!((_d = p.data) === null || _d === void 0 ? void 0 : _d.sortable),
+        [HEADER_SORTABLE_CLASS]: !!((_e = p.data) === null || _e === void 0 ? void 0 : _e.sortable),
     };
-    if ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) {
+    if ((_f = p.data) === null || _f === void 0 ? void 0 : _f.order) {
         cellClass[p.data.order] = true;
     }
     const dataProps = {
-        key: String((_g = (_f = p.data) === null || _f === void 0 ? void 0 : _f.prop) !== null && _g !== void 0 ? _g : p.column.itemIndex),
+        key: String((_h = (_g = p.data) === null || _g === void 0 ? void 0 : _g.prop) !== null && _h !== void 0 ? _h : p.column.itemIndex),
         [DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        minWidth: ((_h = p.data) === null || _h === void 0 ? void 0 : _h.minSize) || MIN_COL_SIZE,
-        maxWidth: (_j = p.data) === null || _j === void 0 ? void 0 : _j.maxSize,
+        minWidth: ((_j = p.data) === null || _j === void 0 ? void 0 : _j.minSize) || MIN_COL_SIZE,
+        maxWidth: (_k = p.data) === null || _k === void 0 ? void 0 : _k.maxSize,
         active: p.active || ['r'],
         class: cellClass,
         style: {
@@ -22633,7 +22790,7 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hasSortingSign ? hAsync(SortingSign, { column: p.data }) : null, p.canFilter && ((_k = p.data) === null || _k === void 0 ? void 0 : _k.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
+    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hasSortingSign || hasFilterButton ? (hAsync("span", { class: "header-controls" }, hasSortingSign ? hAsync(SortingSign, { column: p.data }) : null, hasFilterButton ? hAsync(FilterButton, { column: p.data }) : null)) : null));
 };
 
 const HeaderGroupRenderer = (p) => {
@@ -22655,7 +22812,7 @@ const HeaderGroupRenderer = (p) => {
     return (hAsync(HeaderCellRenderer, { data: Object.assign(Object.assign({}, p.group), { prop: '', providers: p.providers, index: p.start }), props: groupProps, additionalData: p.additionalData }));
 };
 
-const revogrHeaderStyleCss = () => `@charset "UTF-8";revogr-header{position:relative;z-index:5;display:block}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative;overflow:hidden}revogr-header .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex;text-align:var(--rg-theme-header-text-align, center)}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}revogr-header .rgHeaderCell .sort-indicator{display:inline-flex;align-items:flex-start;gap:1px}revogr-header .rgHeaderCell .sort-indicator i.asc:after,revogr-header .rgHeaderCell .sort-indicator i.desc:after{font-size:13px}revogr-header .rgHeaderCell .sort-indicator i.asc:after{content:"↑"}revogr-header .rgHeaderCell .sort-indicator i.desc:after{content:"↓"}revogr-header .rgHeaderCell .sort-indicator .sort-order-index{font-size:10px;line-height:1;top:0}revogr-header .rgHeaderCell.active{z-index:10}revogr-header .rgHeaderCell.active .resizable{background-color:var(--rg-theme-header-resize-hover)}revogr-header .rgHeaderCell .header-content{position:absolute;z-index:0;inset:0;box-sizing:border-box;padding:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell>span:first-of-type{position:relative;z-index:1;margin-left:auto}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:var(--rg-theme-header-resize-hover)}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}`;
+const revogrHeaderStyleCss = () => `@charset "UTF-8";revogr-header{position:relative;z-index:5;display:block}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative;overflow:hidden}revogr-header .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex;text-align:var(--rg-theme-header-text-align, center)}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}revogr-header .rgHeaderCell .sort-indicator{display:inline-flex;align-items:flex-start;gap:1px}revogr-header .rgHeaderCell .sort-indicator i.asc:after,revogr-header .rgHeaderCell .sort-indicator i.desc:after{font-size:13px}revogr-header .rgHeaderCell .sort-indicator i.asc:after{content:"↑"}revogr-header .rgHeaderCell .sort-indicator i.desc:after{content:"↓"}revogr-header .rgHeaderCell .sort-indicator .sort-order-index{font-size:10px;line-height:1;top:0}revogr-header .rgHeaderCell.active{z-index:10}revogr-header .rgHeaderCell.active .resizable{background-color:var(--rg-theme-header-resize-hover)}revogr-header .rgHeaderCell .header-content{position:absolute;z-index:0;inset:0;box-sizing:border-box;padding:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell .header-controls{position:absolute;top:0;right:1px;bottom:1px;min-width:15px;z-index:1;display:flex;align-items:center}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:var(--rg-theme-header-resize-hover)}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}`;
 
 class RevogrHeaderComponent {
     constructor(hostRef) {