@revolist/revogrid 4.23.14 → 4.23.16

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

@@ -64,7 +64,7 @@ export class RevoGridComponent {
         this.rowSize = 0;
         /** Indicates default column size. */
         this.colSize = 100;
-        /** When true, user can range selection. */
+        /** When true, user can select a cell range. Required for range-based clipboard fill. */
         this.range = false;
         /** When true, grid in read only mode. */
         this.readonly = false;
@@ -76,7 +76,7 @@ export class RevoGridComponent {
         this.noHorizontalScrollTransfer = false;
         /** When true cell focus appear. */
         this.canFocus = true;
-        /** When true enable clipboard. */
+        /** When true enable clipboard. Can be boolean or clipboard config. */
         this.useClipboard = true;
         /**
          * Columns - defines an array of grid columns.
@@ -1202,7 +1202,7 @@ export class RevoGridComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When true, user can range selection."
+                    "text": "When true, user can select a cell range. Required for range-based clipboard fill."
                 },
                 "getter": false,
                 "setter": false,
@@ -1294,15 +1294,22 @@ export class RevoGridComponent {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "boolean | ClipboardConfig",
+                    "resolved": "ClipboardConfig | boolean",
+                    "references": {
+                        "ClipboardConfig": {
+                            "location": "import",
+                            "path": "@type",
+                            "id": "src/types/index.ts::ClipboardConfig",
+                            "referenceLocation": "ClipboardConfig"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When true enable clipboard."
+                    "text": "When true enable clipboard. Can be boolean or clipboard config."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/scroll/revogr-viewport-scroll.js

@@ -219,9 +219,17 @@ export class RevogrViewportScroll {
     }
     render() {
         var _a, _b;
-        const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
+        const clientHeight = (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0;
+        // When content fits in the viewport (no scroll needed), don't inflate content-wrapper
+        // to clientHeight — that would prevent inner-content-table from shrinking and push
+        // rowPinEnd (footer) to the bottom instead of letting it follow the data rows.
+        // For large/compressed grids (content > clientHeight), physicalContentHeight handles
+        // the browser scroll-size compression correctly.
+        const physicalContentHeight = this.contentHeight < clientHeight
+            ? Math.max(this.contentHeight, 0)
+            : getContentSize(this.contentHeight, clientHeight);
         const physicalContentWidth = getContentSize(this.contentWidth, 0);
-        return (h(Host, { key: 'ec8d907976c1d50f7aab3c263be3f0249a274df6', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: 'e35696a7993ac94261426b45c28d488cdc42b7f0', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, h("div", { key: 'a6997451e01eacda1d27d4efa1d74e1748626218', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: '1d401e87d32d5b1531c2211723b552bbc894f22c', name: HEADER_SLOT })), h("div", { key: 'ceab6f9e812d6ca9a0aa376afcd2562a17f505e0', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: 'a9556578a23d6efddec2e982e863aec064042154', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, h("slot", { key: '0ae01f9736b9740612e75261f6e3abebda533377', name: CONTENT_SLOT }))), h("div", { key: '09c2565d4ed449a43820f92d97b6558fca3758e7', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: '1ffb08ff8138a560cc09d82e3fe22a53e502aafe', name: FOOTER_SLOT })))));
+        return (h(Host, { key: '3dd9d29cf26743d7aa4995f51180d56008526e54', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: 'af75428e845044c33eba2fecd1ec04a9177b9b5c', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, h("div", { key: 'a0149f597588371e1fafe69efc3bd4411379a017', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: 'e5d2570bf93897cd97ef702141c83bb8c0e13ee2', name: HEADER_SLOT })), h("div", { key: 'd1388ff0d721dd8ce925b934bb2128fddc1ac17b', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: 'a306ff56f62279402e2a881a081e3224341d5bdf', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, h("slot", { key: '898bda8e9429da06c9ff2bd41626ac27f3cde3cc', name: CONTENT_SLOT }))), h("div", { key: '5e9eba1edd5fca07a964971054a7900e4dd84099', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: 'f233ad1c23b3f692c45e1db235cfef4704a80726', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

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

@@ -7,17 +7,25 @@ export const FILTER_BUTTON_ACTIVE = 'active';
 export const FILTER_PROP = 'hasFilter';
 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: {
             [FILTER_BUTTON_CLASS]: true,
             [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],
         } }, 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 = () => {
-    return (h("div", { class: { [TRASH_BUTTON]: true } }, h("svg", { class: "trash-img", viewBox: "0 0 24 24" }, h("path", { fill: "currentColor", d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }))));
+export const TrashButton = ({ ariaLabel, onClick }) => {
+    return (h("button", { type: "button", class: { [TRASH_BUTTON]: true }, "aria-label": ariaLabel, onClick: onClick }, h("svg", { class: "trash-img", viewBox: "0 0 24 24" }, h("path", { fill: "currentColor", d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }))));
 };
-export const AndOrButton = ({ text }) => {
-    return h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
+export const AndOrButton = ({ text, onClick }) => {
+    return h("button", { type: "button", class: { [AND_OR_BUTTON]: true, 'light revo-button': true }, onClick: onClick }, text);
+};
+export const ReorderButton = ({ ariaLabel, dragging, dragOver, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, onKeyDown, }) => {
+    return (h("button", { type: "button", class: {
+            [REORDER_BUTTON]: true,
+            'filter-row-dragging': !!dragging,
+            'filter-row-drag-over': !!dragOver,
+        }, draggable: true, title: ariaLabel, "aria-label": ariaLabel, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, onKeyDown: onKeyDown }, "::"));
 };
 export function isFilterBtn(e) {
     if (e.classList.contains(FILTER_BUTTON_CLASS)) {

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

@@ -4,12 +4,14 @@
 // filter.panel.tsx
 import { h, Host, } from "@stencil/core";
 import debounce from "lodash/debounce";
-import { AndOrButton, isFilterBtn, TrashButton } from "./filter.button";
+import { AndOrButton, isFilterBtn, ReorderButton, TrashButton } from "./filter.button";
 import "../../utils/closest.polifill";
+import { getFilterReorderId, moveFilterItem, setFilterReorderData, } from "./filter.reorder";
 const defaultType = 'none';
 const FILTER_LIST_CLASS = 'multi-filter-list';
 const FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';
 const FILTER_ID = 'add-filter';
+const VIEWPORT_PADDING = 8;
 /**
  * Filter panel for editing filters
  */
@@ -29,6 +31,9 @@ export class FilterPanel {
             placeholder: 'Enter value...',
             and: 'and',
             or: 'or',
+            filterCondition: 'Filter condition',
+            removeFilter: 'Remove filter',
+            reorderFilter: 'Reorder filter',
         };
         this.isFilterIdSet = false;
         this.filterId = 0;
@@ -102,18 +107,28 @@ export class FilterPanel {
         if (typeof prop === 'undefined')
             return '';
         const propFilters = (_b = this.filterItems[prop]) !== null && _b !== void 0 ? _b : [];
-        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-        return (h("div", { key: this.filterId }, propFilters.map((filter, index) => {
+        const visibleFilterCount = propFilters.filter(filter => !filter.hidden).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) => {
             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) {
-                andOrButton = (h("div", { onClick: () => this.toggleFilterAndOr(filter.id) }, h(AndOrButton, { text: filter.relation === 'and' ? capts.and : capts.or })));
+                andOrButton = (h(AndOrButton, { text: filter.relation === 'and' ? capts.and : capts.or, onClick: () => this.toggleFilterAndOr(filter.id) }));
             }
-            return (h("div", { key: filter.id, class: FILTER_LIST_CLASS }, 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)), h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton), h("div", { onClick: () => this.onRemoveFilter(filter.id) }, h(TrashButton, null))), h("div", null, this.renderExtra(prop, index))));
-        }), propFilters.filter(f => !f.hidden).length > 0 ? h("div", { class: "add-filter-divider" }) : ''));
+            const extra = this.renderExtra(prop, index);
+            const isDragging = this.draggedFilterId === filter.id;
+            const isDragOver = this.dragOverFilterId === filter.id && !isDragging;
+            const canReorder = visibleFilterCount > 1;
+            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.filter(f => !f.hidden).length > 0 ? h("div", { class: "add-filter-divider" }) : ''));
     }
     componentDidRender() {
         this.syncDialog();
@@ -132,37 +147,35 @@ export class FilterPanel {
             this.dialog.show();
         }
         if (this.changes.autoCorrect !== false) {
+            this.autoCorrect(this.dialog);
             requestAnimationFrame(() => this.autoCorrect(this.dialog));
         }
     }
     autoCorrect(el) {
-        if (!el) {
+        var _a;
+        if (!el || !this.changes) {
             return;
         }
+        el.style.maxHeight = '';
+        el.style.left = `${this.changes.x}px`;
+        el.style.top = `${this.changes.y}px`;
         const pos = el.getBoundingClientRect();
-        const maxLeft = Math.max(0, window.innerWidth - pos.width);
-        const maxTop = Math.max(0, window.innerHeight - pos.height);
-        if (pos.left > maxLeft) {
-            el.style.left = `${maxLeft}px`;
-        }
-        if (pos.top > maxTop) {
-            el.style.top = `${maxTop}px`;
-        }
-    }
-    onDialogMouseDown(e) {
-        if (!this.closeOnOutsideClick ||
-            e.target !== this.dialog ||
-            !this.dialog) {
-            return;
-        }
-        const rect = this.dialog.getBoundingClientRect();
-        const isInside = e.clientX >= rect.left &&
-            e.clientX <= rect.right &&
-            e.clientY >= rect.top &&
-            e.clientY <= rect.bottom;
-        if (!isInside) {
-            this.onCancel();
-        }
+        const anchorTop = (_a = this.changes.anchorY) !== null && _a !== void 0 ? _a : this.changes.y;
+        const anchorBottom = this.changes.y;
+        const spaceAbove = Math.max(0, anchorTop - VIEWPORT_PADDING);
+        const spaceBelow = Math.max(0, window.innerHeight - anchorBottom - VIEWPORT_PADDING);
+        const openAbove = pos.height > spaceBelow && spaceAbove > spaceBelow;
+        const availableHeight = Math.max(VIEWPORT_PADDING, openAbove ? spaceAbove : spaceBelow);
+        el.style.maxHeight = `${availableHeight}px`;
+        const adjustedPos = el.getBoundingClientRect();
+        const maxLeft = Math.max(VIEWPORT_PADDING, window.innerWidth - adjustedPos.width - VIEWPORT_PADDING);
+        const maxTop = Math.max(VIEWPORT_PADDING, window.innerHeight - adjustedPos.height - VIEWPORT_PADDING);
+        const left = Math.min(Math.max(VIEWPORT_PADDING, this.changes.x), maxLeft);
+        const top = openAbove
+            ? Math.min(Math.max(VIEWPORT_PADDING, anchorTop - adjustedPos.height), maxTop)
+            : Math.min(Math.max(VIEWPORT_PADDING, anchorBottom), maxTop);
+        el.style.left = `${left}px`;
+        el.style.top = `${top}px`;
     }
     onFilterTypeChange(e, prop, index) {
         if (!(e.target instanceof HTMLSelectElement)) {
@@ -254,6 +267,80 @@ export class FilterPanel {
             this.debouncedApplyFilter();
         }
     }
+    onFilterDragStart(e, id) {
+        this.draggedFilterId = id;
+        setFilterReorderData(e.dataTransfer, id);
+    }
+    onFilterDragOver(e, id) {
+        if (this.draggedFilterId === undefined || this.draggedFilterId === id) {
+            return;
+        }
+        e.preventDefault();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'move';
+        }
+        this.dragOverFilterId = id;
+    }
+    onFilterDragLeave(id) {
+        if (this.dragOverFilterId === id) {
+            this.dragOverFilterId = undefined;
+        }
+    }
+    onFilterDrop(e, prop, targetId) {
+        var _a;
+        e.preventDefault();
+        const sourceId = (_a = this.draggedFilterId) !== null && _a !== void 0 ? _a : getFilterReorderId(e.dataTransfer);
+        this.onFilterDragEnd();
+        if (sourceId === undefined) {
+            return;
+        }
+        const items = this.filterItems[prop];
+        if (!items) {
+            return;
+        }
+        if (!moveFilterItem(items, sourceId, targetId)) {
+            return;
+        }
+        this.filterId++;
+        if (!this.disableDynamicFiltering) {
+            this.debouncedApplyFilter();
+        }
+    }
+    onFilterDragEnd() {
+        this.draggedFilterId = undefined;
+        this.dragOverFilterId = undefined;
+    }
+    onFilterReorderKeyDown(e, prop, sourceId) {
+        let direction = 0;
+        if (e.key === 'ArrowUp') {
+            direction = -1;
+        }
+        else if (e.key === 'ArrowDown') {
+            direction = 1;
+        }
+        else {
+            return;
+        }
+        const items = this.filterItems[prop];
+        if (!items) {
+            return;
+        }
+        const visibleItems = items.filter(item => !item.hidden);
+        const sourceIndex = visibleItems.findIndex(item => item.id === sourceId);
+        if (sourceIndex === -1) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const target = visibleItems[sourceIndex + direction];
+        if (!target || !moveFilterItem(items, sourceId, target.id)) {
+            return;
+        }
+        this.filterId++;
+        if (!this.disableDynamicFiltering) {
+            this.debouncedApplyFilter();
+        }
+    }
     toggleFilterAndOr(id) {
         var _a;
         this.assertChanges();
@@ -292,7 +379,7 @@ export class FilterPanel {
             });
         });
         if (!isDefaultTypeRemoved) {
-            const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+            const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
             options.push(h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0
                 ? capts.add
                 : this.filterNames[defaultType]));
@@ -325,7 +412,7 @@ export class FilterPanel {
                 select.focus();
             }
         };
-        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+        const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
         const extra = this.filterEntities[currentFilter[index].type].extra;
         if (typeof extra === 'function') {
             return extra(h, {
@@ -362,32 +449,33 @@ export class FilterPanel {
             } }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const style = {
             left: `${(_b = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0}px`,
             top: `${(_d = (_c = this.changes) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0}px`,
         };
-        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-        return (h(Host, { key: '9fb424017d080876ff7796237917b4f41f617fe0' }, h("dialog", { key: '37b9f870b95f6fe1bd7be359dd7b77ef196e896e', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+        const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
+        return (h(Host, { key: '4e969f8b7033363c885c94b1f7770917786669f2' }, h("dialog", { key: '79b2713724684fa99f56621fe43645a0b0ad54bf', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
-            }, onMouseDown: e => this.onDialogMouseDown(e) }, this.changes && [
-            h("slot", { key: '76ec505a92d0a7c1ae0bbb5f4cac63555f3416be', slot: "header" }),
+            } }, this.changes && [
+            h("slot", { key: "header-slot", slot: "header" }),
             ((_f = (_e = this.changes).extraContent) === null || _f === void 0 ? void 0 : _f.call(_e, this.changes)) || '',
             ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
-                h("label", { key: 'c6fd82c95f6005f286c7bc90de34956128a83246' }, capts.title),
-                h("div", { key: '5e7dac36ad79ba1b6072a0053b30aa384ade0dde', class: "filter-holder" }, this.getFilterItemsList()),
-                h("div", { key: 'd9b6103edbd138d4db845745686ee4c847310a66', class: "add-filter" }, h("select", { key: 'c1b321f2d19458f95ab3f9188d83d94bebdb688e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+                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: 'fc894bdfae1ff35d5c49adc7646dd3182b7bd49e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
             ],
-            h("slot", { key: '1571dcbc5c57651deb42a4046272ff60fa74f5a7' }),
-            h("div", { key: '4aa7dee532336b084542df0209291b4c60378b49', class: "filter-actions" }, this.disableDynamicFiltering && [
-                h("button", { key: '4c1b3054cd1bb7f46877592f00f6634d0f7ecafa', id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
-                h("button", { key: 'f31a568c89be18b1a854cdd7d4726e01db24e338', id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
+            h("slot", { key: "default-slot" }),
+            ((_j = (_h = this.changes).extraBottomContent) === null || _j === void 0 ? void 0 : _j.call(_h, this.changes)) || '',
+            h("div", { key: "filter-actions", class: "filter-actions" }, this.disableDynamicFiltering && [
+                h("button", { key: "save", id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
+                h("button", { key: "cancel", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
             ], !this.disableDynamicFiltering && [
-                h("button", { key: '5d40e8b1f13f94cff4f5a2e2aefeee8861104a9d', id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
-                h("button", { key: '67eac3abd16f6f6e2ed7089dcfb0d05524ddb7df', id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
+                h("button", { key: "ok", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
+                h("button", { key: "reset", id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
             ]),
-            h("slot", { key: 'b27a9bb3ef814e1e09dca14eda3e332ff34c654c', slot: "footer" }),
+            h("slot", { key: "footer-slot", slot: "footer" }),
         ])));
     }
     static get is() { return "revogr-filter-panel"; }
@@ -532,7 +620,9 @@ export class FilterPanel {
             "currentFilterId": {},
             "currentFilterType": {},
             "changes": {},
-            "filterItems": {}
+            "filterItems": {},
+            "draggedFilterId": {},
+            "dragOverFilterId": {}
         };
     }
     static get events() {

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

@@ -194,7 +194,7 @@ export 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, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent });
+        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 });
         (_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
         this.pop.show(data);
     }

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

@@ -0,0 +1,44 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+const FILTER_REORDER_MIME = 'text/revogrid-filter-id';
+export function setFilterReorderData(dataTransfer, id) {
+    if (!dataTransfer) {
+        return;
+    }
+    dataTransfer.effectAllowed = 'move';
+    dataTransfer.setData(FILTER_REORDER_MIME, String(id));
+    dataTransfer.setData('text/plain', String(id));
+}
+export function getFilterReorderId(dataTransfer) {
+    if (!dataTransfer) {
+        return;
+    }
+    const rawId = dataTransfer.getData(FILTER_REORDER_MIME) || dataTransfer.getData('text/plain');
+    const normalizedId = rawId.trim();
+    if (!normalizedId) {
+        return;
+    }
+    const id = Number(normalizedId);
+    return Number.isFinite(id) ? id : undefined;
+}
+export function moveFilterItem(items, sourceId, targetId) {
+    if (sourceId === targetId) {
+        return false;
+    }
+    const sourceIndex = items.findIndex(item => item.id === sourceId);
+    const targetIndex = items.findIndex(item => item.id === targetId);
+    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+        return false;
+    }
+    const relationsByPosition = items.map(item => { var _a; return (_a = item.relation) !== null && _a !== void 0 ? _a : 'and'; });
+    const [movedItem] = items.splice(sourceIndex, 1);
+    items.splice(targetIndex, 0, movedItem);
+    items.forEach((item, index) => {
+        var _a;
+        item.relation = index === items.length - 1
+            ? 'and'
+            : (_a = relationsByPosition[index]) !== null && _a !== void 0 ? _a : 'and';
+    });
+    return true;
+}

package/dist/collection/plugins/filter/filter.style.css

@@ -52,6 +52,7 @@ revogr-filter-panel .filter-panel-dialog {
   border: 1px solid var(--revo-grid-filter-panel-border, #cecece);
   transform-origin: 62px 0px;
   box-shadow: 0 5px 18px -2px var(--revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15));
+  box-sizing: border-box;
   padding: 10px;
   border-radius: 8px;
   margin: 0;
@@ -59,9 +60,6 @@ revogr-filter-panel .filter-panel-dialog {
   text-align: left;
   animation: revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1);
 }
-revogr-filter-panel .filter-panel-dialog::backdrop {
-  background: transparent;
-}
 revogr-filter-panel .filter-panel-dialog .filter-holder > div {
   display: flex;
   flex-direction: column;
@@ -85,8 +83,16 @@ revogr-filter-panel .filter-panel-dialog input[type=text] {
   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-right: -5px;
+  margin: 10px -10px -10px;
+  padding: 0 5px 10px 10px;
+  background: var(--revo-grid-filter-panel-bg, #fff);
+  border-top: 1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);
 }
 revogr-filter-panel .filter-panel-dialog .filter-actions button {
   margin-top: 10px;
@@ -189,9 +195,44 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
 .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(--revo-grid-filter-panel-reorder-accent, #007cb2);
+  border-radius: 999px;
+  box-shadow: 0 0 0 2px var(--revo-grid-filter-panel-bg, #fff);
+}
+.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;
-  justify-content: space-between;
+  align-self: stretch;
+  flex: 0 0 auto;
+  justify-content: flex-end;
   align-items: center;
 }
 .multi-filter-list .and-or-button {
@@ -201,6 +242,10 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
 }
 .multi-filter-list .trash-button {
   margin: 0 0 -2px 6px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
   cursor: pointer;
   width: 22px;
   height: 100%;
@@ -209,6 +254,31 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
 .multi-filter-list .trash-button .trash-img {
   width: 1em;
 }
+.multi-filter-list .reorder-button {
+  border: 0;
+  background: transparent;
+  color: var(--revo-grid-filter-panel-reorder-color, #6b7280);
+  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(--revo-grid-filter-panel-reorder-accent, #007cb2);
+}
+.multi-filter-list .reorder-button:active {
+  cursor: grabbing;
+}
+
+.multi-filter-list-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
 
 .add-filter-divider {
   display: block;
@@ -219,6 +289,26 @@ revogr-filter-panel .filter-panel-dialog .filter-actions button {
 
 .select-input {
   display: flex;
-  justify-content: space-between;
   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;
 }

package/dist/collection/plugins/groupingRow/grouping.row.renderer.js

@@ -21,12 +21,17 @@ export const GroupingRowRenderer = (props) => {
     const name = model[PSEUDO_GROUP_ITEM];
     const expanded = model[GROUP_EXPANDED];
     const depth = parseInt(model[GROUP_DEPTH], 10) || 0;
+    const groupRowAttrs = {
+        rowClass: 'groupingRow',
+        depth,
+        expanded,
+    };
     if (groupingCustomRenderer) {
-        return (h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }), h("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(h, Object.assign(Object.assign({}, props), { colType: props.providers.colType, name,
+        return (h(RowRenderer, Object.assign({}, props, groupRowAttrs), h("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(h, Object.assign(Object.assign({}, props), { colType: props.providers.colType, name,
             expanded,
             depth })))));
     }
-    return (h(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }), hasExpand && [
+    return (h(RowRenderer, Object.assign({}, props, groupRowAttrs), hasExpand && [
         h("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
         name,
     ]));