@revolist/revogrid 4.27.1 → 4.27.3

package/dist/revo-grid/revogr-filter-panel.entry.js

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, a as createEvent, h, d as Host, g as getElement } from './index-CtimkLsB.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
-import { e as AndOrButton, f as ReorderButton, d as TrashButton, i as isFilterBtn } from './filter.button-DMhpuAiw.js';
+import { e as AndOrButton, f as ReorderButton, d as TrashButton, i as isFilterBtn } from './filter.button-CEPUxLUo.js';
 
 (function closest() {
     if (!Element.prototype.matches) {
@@ -66,7 +66,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';
@@ -78,6 +78,7 @@ const FilterPanel = class {
         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',
@@ -113,7 +114,7 @@ const FilterPanel = class {
          */
         this.allowDuplicateOperators = true;
         this.debouncedApplyFilter = debounce(() => {
-            this.filterChange.emit(this.filterItems);
+            this.emitFilterChange();
         }, 400);
     }
     onMouseDown(e) {
@@ -143,10 +144,27 @@ const FilterPanel = class {
         }
     }
     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 &&
+                this.changes.hideDefaultFilters !== true) {
+                const type = this.resolveDraftFilterType(this.changes.defaultFilterType);
+                if (type) {
+                    this.draftFilter = {
+                        id: ++this.filterId,
+                        type,
+                        value: '',
+                        relation: 'and',
+                    };
+                }
+            }
         }
     }
     async getChanges() {
@@ -167,29 +185,42 @@ const FilterPanel = class {
         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();
@@ -238,16 +269,24 @@ const FilterPanel = class {
         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();
             }
@@ -282,12 +321,20 @@ const FilterPanel = class {
             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);
@@ -296,7 +343,9 @@ const FilterPanel = class {
         }, 0);
     }
     onSave() {
-        this.filterChange.emit(this.filterItems);
+        if (this.hasChanges) {
+            this.emitFilterChange();
+        }
     }
     onCancel() {
         this.changes = undefined;
@@ -304,16 +353,25 @@ const FilterPanel = class {
     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;
@@ -321,6 +379,7 @@ const FilterPanel = class {
         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 : ''];
@@ -362,6 +421,7 @@ const FilterPanel = class {
         if (!moveFilterItem(items, sourceId, targetId)) {
             return;
         }
+        this.hasChanges = true;
         this.filterId++;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
@@ -397,6 +457,7 @@ const FilterPanel = class {
         if (!target || !moveFilterItem(items, sourceId, target.id)) {
             return;
         }
+        this.hasChanges = true;
         this.filterId++;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
@@ -415,6 +476,7 @@ const FilterPanel = class {
         if (index === -1)
             return;
         items[index].relation = items[index].relation === 'and' ? 'or' : 'and';
+        this.hasChanges = true;
         if (!this.disableDynamicFiltering) {
             this.debouncedApplyFilter();
         }
@@ -463,12 +525,22 @@ const FilterPanel = class {
         }
         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();
             }
@@ -483,11 +555,11 @@ const FilterPanel = class {
             }
         };
         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,
@@ -502,7 +574,7 @@ const FilterPanel = class {
         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);
                 }
@@ -518,6 +590,42 @@ const FilterPanel = class {
                 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}`);
     }
@@ -550,7 +658,7 @@ const FilterPanel = class {
             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: 'f7ec3ca1855a9391b4f270ad7056f9c7a4a0204e' }, h("dialog", { key: 'a5c46aa4822934e7a6eb455fd686513b9101afb4', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
             } }, this.changes && [
@@ -559,7 +667,7 @@ const FilterPanel = class {
             ((_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: '3912f4bd9b1e66fda46e9b6d7c002d29da726345', 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)) || '',

package/dist/{esm/row-resize.plugin-DBOgjLdE.js → revo-grid/row-resize.plugin-Beu0pMds.js}

@@ -6,7 +6,7 @@ import { L as createStore, m as setStore, j as calculateDimensionData, N as iden
 import { j as calculateRowHeaderSize, g as getViewportMaxCoordinate } from './viewport.store-DWMKRDSH.js';
 import { g as getScrollbarSize, t as timeout } from './index-BvMNbQyq.js';
 import { h } from './index-CtimkLsB.js';
-import { b as FILTER_PROP, i as isFilterBtn } from './filter.button-DMhpuAiw.js';
+import { b as FILTER_PROP, i as isFilterBtn } from './filter.button-CEPUxLUo.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
 import { O as ON_COLUMN_CLICK, d as dispatch } from './header-cell-renderer-YCiVIQ2E.js';
 
@@ -1361,6 +1361,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',
@@ -1403,6 +1408,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.
  */
 /**
@@ -1424,7 +1431,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;
@@ -1508,11 +1515,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);
@@ -1601,11 +1613,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] };
@@ -1625,6 +1638,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]);
     }
@@ -3709,4 +3757,4 @@ class RowResizePlugin extends BasePlugin {
     }
 }
 
-export { AutoSizeColumnPlugin as A, BasePlugin as B, ColumnAutoSizeMode as C, DimensionStore as D, ExportFilePlugin as E, FILTER_TRIMMED_TYPE as F, GroupingRowPlugin as G, ROW_RESIZE_CANCEL_EVENT as H, RowResizePlugin as I, DEFAULT_MIN_ROW_HEIGHT as J, resolveRowResizeConfig as K, clampRowResizeHeight as L, getRowResizeIndexes as M, createRowResizePatch as N, mergeRowResizeDefinitions as O, SortingPlugin as P, hasActiveSorting as Q, ROW_RESIZE_HANDLE_CLASS as R, SelectionStore as S, getSortingIndex as T, sortIndexByItems as U, defaultCellCompare as V, descCellCompare as W, getNextOrder as X, getComparer as Y, StretchColumn as a, ExportCsv as b, FILTER_CONFIG_CHANGED_EVENT as c, defineTheme as d, FILTE_PANEL as e, FilterPlugin as f, filterCoreFunctionsIndexedByType as g, filterTypes as h, isStretchPlugin as i, filterNames as j, DEFAULT_BLANK_SEMANTICS as k, isBlankValue as l, doCollapse as m, doExpand as n, COLUMN_DRAG_MOVE_EVENT as o, COLUMN_DRAG_END_EVENT as p, BEFORE_COLUMN_DRAG_END_EVENT as q, resolveBlankSemantics as r, COLUMN_DRAG_START_EVENT as s, themeTokenCssVariables as t, ColumnMovePlugin as u, getLeftRelative as v, getColumnDragPosition as w, BEFORE_ROW_RESIZE_EVENT as x, ROW_RESIZE_EVENT as y, AFTER_ROW_RESIZE_EVENT as z };
+export { AutoSizeColumnPlugin as A, BasePlugin as B, ColumnAutoSizeMode as C, DimensionStore as D, ExportFilePlugin as E, FILTER_TRIMMED_TYPE as F, GroupingRowPlugin as G, AFTER_ROW_RESIZE_EVENT as H, ROW_RESIZE_CANCEL_EVENT as I, RowResizePlugin as J, DEFAULT_MIN_ROW_HEIGHT as K, resolveRowResizeConfig as L, clampRowResizeHeight as M, getRowResizeIndexes as N, createRowResizePatch as O, mergeRowResizeDefinitions as P, SortingPlugin as Q, ROW_RESIZE_HANDLE_CLASS as R, SelectionStore as S, hasActiveSorting as T, getSortingIndex as U, sortIndexByItems as V, defaultCellCompare as W, descCellCompare as X, getNextOrder as Y, getComparer as Z, StretchColumn as a, ExportCsv as b, FILTER_CONFIG_CHANGED_EVENT as c, defineTheme as d, FILTE_PANEL as e, FilterPlugin as f, filterCoreFunctionsIndexedByType as g, filterTypes as h, isStretchPlugin as i, filterTypeDefaults as j, filterNames as k, DEFAULT_BLANK_SEMANTICS as l, isBlankValue as m, doCollapse as n, doExpand as o, COLUMN_DRAG_MOVE_EVENT as p, COLUMN_DRAG_END_EVENT as q, resolveBlankSemantics as r, BEFORE_COLUMN_DRAG_END_EVENT as s, themeTokenCssVariables as t, COLUMN_DRAG_START_EVENT as u, ColumnMovePlugin as v, getLeftRelative as w, getColumnDragPosition as x, BEFORE_ROW_RESIZE_EVENT as y, ROW_RESIZE_EVENT as z };

package/dist/types/plugins/filter/filter.indexed.d.ts

@@ -1,6 +1,8 @@
 import { LogicFunction } from './filter.types';
 export declare const filterCoreFunctionsIndexedByType: Record<FilterType, LogicFunction>;
 export declare const filterTypes: Record<string, FilterType[]>;
+/** Preferred initial operator for built-in filter families. */
+export declare const filterTypeDefaults: Partial<Record<string, FilterType>>;
 export declare const filterNames: {
     none: string;
     empty: string;

package/dist/types/plugins/filter/filter.panel.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, type VNode } from '../../stencil-public-runtime';
 import '../../utils/closest.polifill';
-import { FilterCaptions, LogicFunction, MultiFilterItem, ShowData } from './filter.types';
+import { FilterCaptions, FilterData, LogicFunction, MultiFilterItem, ShowData } from './filter.types';
 import type { ColumnProp } from "../../types/index";
 import { FilterType } from './filter.indexed';
 /**
@@ -11,6 +11,7 @@ import { FilterType } from './filter.indexed';
  */
 export declare class FilterPanel {
     private dialog?;
+    private hasChanges;
     private filterCaptionsInternal;
     element: HTMLElement;
     isFilterIdSet: boolean;
@@ -19,6 +20,7 @@ export declare class FilterPanel {
     currentFilterType: FilterType;
     changes: ShowData | undefined;
     filterItems: MultiFilterItem;
+    draftFilter: FilterData | undefined;
     draggedFilterId: number | undefined;
     dragOverFilterId: number | undefined;
     filterNames: Record<string, string>;
@@ -63,7 +65,12 @@ export declare class FilterPanel {
     private toggleFilterAndOr;
     private assertChanges;
     renderSelectOptions(type: FilterType, isDefaultTypeRemoved?: boolean): VNode[] | undefined;
-    renderExtra(prop: ColumnProp, index: number): any;
+    renderExtra(prop: ColumnProp, index: number, isDraft?: boolean): any;
+    private resolveDraftFilterType;
+    private promoteDraft;
+    private isMeaningfulDraftValue;
+    private emitFilterChange;
+    private cloneFilterItems;
     private getAddFilterSelect;
     private isOwnFilterButton;
     private getOwningGrid;

package/dist/types/plugins/filter/filter.plugin.d.ts

@@ -24,6 +24,8 @@ export declare 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.
  */
 /**
@@ -56,7 +58,12 @@ export declare class FilterPlugin extends BasePlugin {
     extraContent(): any;
     initConfig(config: ColumnFilterConfig): void;
     headerclick(e: CustomEvent<ColumnRegular>): Promise<void>;
-    getColumnFilter(type?: boolean | string | string[]): Record<string, string[]>;
+    getColumnFilter(config?: ColumnRegular['filter']): Record<string, string[]>;
+    /** Resolve the preferred operator against the column's available filters. */
+    getDefaultFilter(config?: ColumnRegular['filter']): string | undefined;
+    /** Resolve grid and column-level draft opt-outs. */
+    shouldShowDefaultFilter(config?: ColumnRegular['filter']): boolean;
+    private isColumnFilterOption;
     isValidType(type: any): type is string;
     /**
      * Called on internal component change

package/dist/types/plugins/filter/filter.types.d.ts

@@ -83,6 +83,10 @@ export interface FilterLocalization {
 export interface ColumnFilterConfig {
     /** Grid-level blank policy. Individual columns can override fields. */
     blankSemantics?: BlankSemantics;
+    /**
+     * Whether empty filter panels start with a draft condition. Defaults to true.
+     */
+    defaultFilter?: boolean;
     /**
      * The collection of filters to be applied to the column.
      */
@@ -165,6 +169,10 @@ export interface ShowData extends FilterItem, Omit<ColumnRegular, 'filter'> {
      */
     autoCorrect?: boolean;
     filterTypes?: Record<string, string[]>;
+    /** Preferred operator for an empty panel. */
+    defaultFilterType?: string;
+    /** Whether an empty panel should create a draft condition. */
+    showDefaultFilter?: boolean;
     filterItems?: MultiFilterItem;
     hideDefaultFilters?: boolean;
     extraContent?: (data: ShowData) => any;

package/dist/types/types/interfaces.d.ts

@@ -165,6 +165,18 @@ export interface ColumnType<TModel extends DataType = DataType> extends ColumnPr
     cellParser?: (model: TModel, column: ColumnRegular<ColumnProp, TModel>) => any;
 }
 export type Order = 'asc' | 'desc' | undefined;
+/**
+ * Structured filter configuration for an individual column.
+ */
+export interface ColumnFilterOption {
+    /** Filter family, or ordered filter families, available to the column. */
+    type: string | string[];
+    /**
+     * Preferred operator shown when the column has no filter conditions, or false
+     * to disable the draft.
+     */
+    default?: string | false;
+}
 /**
  * Interface for regular column definition.
  * Regular column can be any column that is not a grouping column.
@@ -194,7 +206,7 @@ export interface ColumnRegular<P extends ColumnProp = ColumnProp, TModel extends
     /**
      * Filter. Require filter plugin to be installed and activated through grid config filter.
      */
-    filter?: boolean | string | string[];
+    filter?: boolean | string | string[] | ColumnFilterOption;
     /** Partial column override for the grid-level blank filtering policy. */
     blankSemantics?: BlankSemantics;
     /**