@revolist/revogrid 4.27.0 → 4.27.2

package/dist/collection/components/header/header-renderer.js

@@ -11,19 +11,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: {
@@ -59,6 +60,6 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    return (h(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hasSortingSign ? h(SortingSign, { column: p.data }) : null, p.canFilter && ((_k = p.data) === null || _k === void 0 ? void 0 : _k.filter) !== false ? (h(FilterButton, { column: p.data })) : ('')));
+    return (h(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hasSortingSign || hasFilterButton ? (h("span", { class: "header-controls" }, hasSortingSign ? h(SortingSign, { column: p.data }) : null, hasFilterButton ? h(FilterButton, { column: p.data }) : null)) : null));
 };
 export default HeaderRenderer;

package/dist/collection/components/header/revogr-header-style.css

@@ -71,10 +71,15 @@ revogr-header .rgHeaderCell .header-content {
   white-space: nowrap;
   flex-grow: 1;
 }
-revogr-header .rgHeaderCell > span:first-of-type {
-  position: relative;
+revogr-header .rgHeaderCell .header-controls {
+  position: absolute;
+  top: 0;
+  right: 1px;
+  bottom: 1px;
+  min-width: 15px;
   z-index: 1;
-  margin-left: auto;
+  display: flex;
+  align-items: center;
 }
 revogr-header .rgHeaderCell .resizable {
   display: block;

package/dist/collection/components/revoGrid/revo-grid-style.css

@@ -175,9 +175,16 @@ revo-grid[theme]:not([theme=default],
 [theme=dark],
 [theme=compact],
 [theme=darkCompact]) revogr-header .rgHeaderCell {
-  padding: var(--rg-theme-header-padding);
+  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],
@@ -264,9 +271,12 @@ revo-grid:is([theme=compact], [theme=darkCompact]) revogr-header {
   text-align: var(--rg-theme-header-text-align);
 }
 revo-grid:is([theme=compact], [theme=darkCompact]) revogr-header .rgHeaderCell {
-  padding: var(--rg-theme-header-padding);
+  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);
 }

package/dist/collection/components/revoGrid/revo-grid.js

@@ -21,7 +21,7 @@ import GridScrollingService from "./viewport.scrolling.service";
 import { SelectionStoreConnector } from "../../services/selection.store.connector";
 import OrderRenderer from "../order/order-renderer";
 import { StretchColumn, isStretchPlugin, } from "../../plugins/column.stretch.plugin";
-import { rowDefinitionByType, rowDefinitionRemoveByType } from "./grid.helpers";
+import { rowDefinitionByType } from "./grid.helpers";
 import { ColumnMovePlugin } from "../../plugins/moveColumn/column.drag.plugin";
 import { getPropertyFromEvent } from "../../utils/events";
 import { isMobileDevice } from "../../utils/mobile";
@@ -857,29 +857,31 @@ export class RevoGridComponent {
             vals: after,
             oldVals: before,
         });
-        // apply new values
+        this.dimensionProvider.syncRowDefinitions(newVal);
         const newRows = rowDefinitionByType(newVal);
-        // clear current defs
-        if (oldVal) {
-            const remove = rowDefinitionRemoveByType(oldVal);
-            // clear all old data and drop sizes
-            for (const t in remove) {
-                if (remove.hasOwnProperty(t)) {
-                    const type = t;
-                    const store = this.dataProvider.stores[type];
-                    const sourceLength = store.store.get('source').length;
-                    this.dimensionProvider.clearSize(type, sourceLength);
-                }
-            }
-        }
-        // set new sizes
+        const oldRows = rowDefinitionByType(oldVal);
+        const dataProvider = this.dataProvider;
+        const dimensionProvider = this.dimensionProvider;
         rowTypes.forEach((t) => {
-            var _a;
             const newSizes = newRows[t];
-            // apply new sizes or force update
-            if (newSizes || forceUpdate) {
-                (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(t, (newSizes === null || newSizes === void 0 ? void 0 : newSizes.sizes) || {});
+            const oldSizes = oldRows[t];
+            if (!newSizes && !oldSizes && !forceUpdate) {
+                return;
             }
+            const sizes = Object.assign({}, dimensionProvider.stores[t].store.get('sizes'));
+            const definitionSizes = (newSizes === null || newSizes === void 0 ? void 0 : newSizes.sizes) || {};
+            const previousDefinitionSizes = (oldSizes === null || oldSizes === void 0 ? void 0 : oldSizes.sizes) || {};
+            const items = dataProvider.stores[t].store.get('items');
+            items.forEach((physicalIndex, virtualIndex) => {
+                if (Object.hasOwn(previousDefinitionSizes, physicalIndex) &&
+                    sizes[virtualIndex] === previousDefinitionSizes[physicalIndex]) {
+                    delete sizes[virtualIndex];
+                }
+                if (Object.hasOwn(definitionSizes, physicalIndex)) {
+                    sizes[virtualIndex] = definitionSizes[physicalIndex];
+                }
+            });
+            dimensionProvider.setCustomSizes(t, sizes);
         });
     }
     trimmedRowsChanged(newVal = {}) {
@@ -928,6 +930,9 @@ export class RevoGridComponent {
     rowHeadersChange(rowHeaders) {
         this.rowheaderschanged.emit(rowHeaders);
     }
+    resizeRowChanged() {
+        this.syncRowResizeConfig();
+    }
     /**
      * Register external VNodes
      */
@@ -950,6 +955,7 @@ export class RevoGridComponent {
      */
     pluginsChanged(plugins = [], prevPlugins) {
         this.pluginService.addUserPluginsAndCreate(this.element, plugins, prevPlugins, this.getPluginData());
+        this.syncRowResizeConfig();
     }
     // #endregion
     // #region Plugins
@@ -990,11 +996,15 @@ export class RevoGridComponent {
         this.pluginService.add(new SortingPlugin(this.element, pluginData));
         // register grouping plugin
         this.pluginService.add(new GroupingRowPlugin(this.element, pluginData));
-        this.pluginService.add(RowResizePlugin.fromGridProperty(this.element, pluginData));
+        this.pluginService.add(new RowResizePlugin(this.element, pluginData));
         if (this.canMoveColumns) {
             this.pluginService.add(new ColumnMovePlugin(this.element, pluginData));
         }
     }
+    syncRowResizeConfig() {
+        const plugin = this.pluginService.getByClass(RowResizePlugin);
+        plugin === null || plugin === void 0 ? void 0 : plugin.syncGridConfig();
+    }
     getPluginData() {
         if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
             return;
@@ -1037,6 +1047,9 @@ export class RevoGridComponent {
         this.themeService.setDefinitions(this.themeDefinitions);
         this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
             realSizeChanged: (k) => this.contentsizechanged.emit(k),
+            rowDefinitionsChanged: definitions => {
+                this.rowDefinitions = definitions;
+            },
         });
         this.dimensionProvider.setSettings({ originItemSize: getColumnSize(this.colSize) }, 'rgCol');
         this.columnProvider = new ColumnDataProvider();
@@ -3873,6 +3886,9 @@ export class RevoGridComponent {
             }, {
                 "propName": "rowHeaders",
                 "methodName": "rowHeadersChange"
+            }, {
+                "propName": "resizeRow",
+                "methodName": "resizeRowChanged"
             }, {
                 "propName": "registerVNode",
                 "methodName": "registerOutsideVNodes"

package/dist/collection/plugins/filter/filter.button.js

@@ -9,9 +9,10 @@ export const AND_OR_BUTTON = 'and-or-button';
 export const TRASH_BUTTON = 'trash-button';
 export const REORDER_BUTTON = 'reorder-button';
 export const FilterButton = ({ column }) => {
-    return (h("span", null, h("button", { class: {
+    const active = !!(column === null || column === void 0 ? void 0 : column[FILTER_PROP]);
+    return (h("span", { class: "filter-button-wrapper" }, h("button", { class: {
             [FILTER_BUTTON_CLASS]: true,
-            [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],
+            [FILTER_BUTTON_ACTIVE]: active,
         } }, h("svg", { class: "filter-img", viewBox: "0 0 64 64" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("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" }))))));
 };
 export const TrashButton = ({ ariaLabel, onClick }) => {

package/dist/collection/plugins/filter/filter.indexed.js

@@ -32,6 +32,11 @@ export const filterTypes = {
     boolean: ['notEmpty', 'empty'],
     array: ['notEmpty', 'empty'],
 };
+/** Preferred initial operator for built-in filter families. */
+export const filterTypeDefaults = {
+    string: 'contains',
+    number: 'eqN',
+};
 export const filterNames = {
     none: 'None',
     empty: 'Is blank',

package/dist/collection/plugins/filter/filter.panel.js

@@ -20,6 +20,7 @@ const VIEWPORT_PADDING = 8;
  */
 export class FilterPanel {
     constructor() {
+        this.hasChanges = false;
         this.filterCaptionsInternal = {
             title: 'Filter by',
             ok: 'Close',
@@ -55,7 +56,7 @@ export class FilterPanel {
          */
         this.allowDuplicateOperators = true;
         this.debouncedApplyFilter = debounce(() => {
-            this.filterChange.emit(this.filterItems);
+            this.emitFilterChange();
         }, 400);
     }
     onMouseDown(e) {
@@ -85,10 +86,25 @@ export 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() {
@@ -109,29 +125,42 @@ export 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 (h("div", { key: this.filterId }, h("ul", { class: "multi-filter-list-container" }, propFilters.map((filter, index) => {
+        return (h("div", { key: this.filterId }, h("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 = (h(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 (h("li", { key: filter.id, class: FILTER_LIST_CLASS, "aria-label": `${capts.filterCondition} ${index + 1}` }, h("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 ? (h("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 ? (h(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) })) : '', h("div", { class: { 'select-input': true } }, h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), extra ? h("div", { class: "filter-extra" }, extra) : ''), h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, h(TrashButton, { ariaLabel: capts.removeFilter, onClick: () => this.onRemoveFilter(filter.id) })))));
-        })), propFilters.some(f => !f.hidden) ? h("div", { class: "add-filter-divider" }) : ''));
+                } }, canReorder ? (h("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 ? (h(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) })) : '', h("div", { class: { 'select-input': true } }, h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index, isDraft) }, this.renderSelectOptions(filter.type, true)), extra ? h("div", { class: "filter-extra" }, extra) : ''), h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, h(TrashButton, { ariaLabel: capts.removeFilter, onClick: () => this.onRemoveFilter(filter.id) })))));
+        })), visibleFilterCount ? h("div", { class: "add-filter-divider" }) : ''));
     }
     componentDidRender() {
         this.syncDialog();
@@ -180,16 +209,24 @@ export 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();
             }
@@ -224,12 +261,20 @@ export 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);
@@ -238,7 +283,9 @@ export class FilterPanel {
         }, 0);
     }
     onSave() {
-        this.filterChange.emit(this.filterItems);
+        if (this.hasChanges) {
+            this.emitFilterChange();
+        }
     }
     onCancel() {
         this.changes = undefined;
@@ -246,16 +293,25 @@ export 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;
@@ -263,6 +319,7 @@ export 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 : ''];
@@ -304,6 +361,7 @@ export class FilterPanel {
         if (!moveFilterItem(items, sourceId, targetId)) {
             return;
         }
+        this.hasChanges = true;
         this.filterId++;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
@@ -339,6 +397,7 @@ export class FilterPanel {
         if (!target || !moveFilterItem(items, sourceId, target.id)) {
             return;
         }
+        this.hasChanges = true;
         this.filterId++;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
@@ -357,6 +416,7 @@ export class FilterPanel {
         if (index === -1)
             return;
         items[index].relation = items[index].relation === 'and' ? 'or' : 'and';
+        this.hasChanges = true;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
         }
@@ -405,12 +465,22 @@ export 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();
             }
@@ -425,11 +495,11 @@ export 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(h, {
-                value: currentFilter[index].value,
-                filter: currentFilter[index],
+                value: currentFilter.value,
+                filter: currentFilter,
                 prop,
                 index,
                 placeholder: capts.placeholder,
@@ -444,7 +514,7 @@ export class FilterPanel {
         if (extra !== 'input' && extra !== 'datepicker') {
             return '';
         }
-        return (h("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: capts.placeholder, type: extra === 'datepicker' ? 'date' : 'text', value: currentFilter[index].value, onInput: (e) => {
+        return (h("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);
                 }
@@ -460,6 +530,42 @@ export 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}`);
     }
@@ -492,7 +598,7 @@ export 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 (h(Host, { key: 'd0e4ebb408750b11b3965da6a25e581733c968e3' }, h("dialog", { key: '3df36777c931ec1063e8574169ca880a99dbfe41', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+        return (h(Host, { key: '0bb6ac39407141e989b6a2f54063ee5ed789e40e' }, h("dialog", { key: '28a919ca4184018e8f00bbd31d373e153306d163', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
             } }, this.changes && [
@@ -501,7 +607,7 @@ export class FilterPanel {
             ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
                 h("label", { key: "filter-title" }, capts.title),
                 h("div", { key: "filter-holder", class: "filter-holder" }, this.getFilterItemsList()),
-                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: 'e2a8bd29f2090d3e6c933795427b71ca190b82aa', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: 'c5816b6699d8608bd8ec2621bbbd4c70daf52a1e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
             ],
             h("slot", { key: "default-slot" }),
             ((_j = (_h = this.changes).extraBottomContent) === null || _j === void 0 ? void 0 : _j.call(_h, this.changes)) || '',
@@ -678,6 +784,7 @@ export class FilterPanel {
             "currentFilterType": {},
             "changes": {},
             "filterItems": {},
+            "draftFilter": {},
             "draggedFilterId": {},
             "dragOverFilterId": {}
         };