@revolist/revogrid 4.23.13 → 4.23.15

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

@@ -11,6 +11,7 @@ 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
  */
@@ -30,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;
@@ -104,36 +108,75 @@ export class FilterPanel {
             return '';
         const propFilters = (_b = this.filterItems[prop]) !== null && _b !== void 0 ? _b : [];
         const visibleFilterCount = propFilters.filter(filter => !filter.hidden).length;
-        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-        return (h("div", { key: this.filterId }, propFilters.map((filter, index) => {
+        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) }));
             }
             const extra = this.renderExtra(prop, index);
-            return (h("div", { key: filter.id, class: FILTER_LIST_CLASS }, h("div", { ref: el => el === null || el === void 0 ? void 0 : el.classList.add('multi-filter-list-row') }, visibleFilterCount > 1 ? (h(ReorderButton, { dragging: this.draggedFilterId === filter.id, dragOver: this.dragOverFilterId === filter.id && this.draggedFilterId !== filter.id, onDragStart: e => this.onFilterDragStart(e, filter.id), onDragEnd: () => this.onFilterDragEnd(), onDragOver: e => this.onFilterDragOver(e, filter.id), onDragLeave: () => this.onFilterDragLeave(filter.id), onDrop: e => this.onFilterDrop(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("div", { onClick: () => this.onRemoveFilter(filter.id) }, h(TrashButton, null))))));
-        }), propFilters.filter(f => !f.hidden).length > 0 ? h("div", { class: "add-filter-divider" }) : ''));
+            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" }) : ''));
     }
-    autoCorrect(el) {
-        var _a, _b;
-        if (!el) {
+    componentDidRender() {
+        this.syncDialog();
+    }
+    syncDialog() {
+        if (!this.dialog) {
             return;
         }
-        const revoGrid = el.closest('revo-grid');
-        if (!revoGrid) {
+        if (!this.changes) {
+            if (this.dialog.open) {
+                this.dialog.close();
+            }
             return;
         }
-        const pos = el.getBoundingClientRect();
-        const gridPos = revoGrid.getBoundingClientRect();
-        const maxLeft = gridPos.right - pos.width;
-        if (pos.left > maxLeft && el.offsetLeft) {
-            el.style.left = `${maxLeft - ((_b = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) !== null && _b !== void 0 ? _b : 0)}px`;
+        if (!this.dialog.open) {
+            this.dialog.show();
+        }
+        if (this.changes.autoCorrect !== false) {
+            this.autoCorrect(this.dialog);
+            requestAnimationFrame(() => this.autoCorrect(this.dialog));
         }
     }
+    autoCorrect(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 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)) {
             return;
@@ -267,6 +310,37 @@ export class FilterPanel {
         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();
@@ -305,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]));
@@ -338,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, {
@@ -375,30 +449,34 @@ export class FilterPanel {
             } }));
     }
     render() {
-        var _a, _b, _c, _d, _e;
-        if (!this.changes) {
-            return h(Host, { style: { display: 'none' } });
-        }
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const style = {
-            display: 'block',
-            left: `${this.changes.x}px`,
-            top: `${this.changes.y}px`,
+            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, { style: style, ref: el => {
-                var _a;
-                ((_a = this.changes) === null || _a === void 0 ? void 0 : _a.autoCorrect) !== false && this.autoCorrect(el);
-            } }, h("slot", { slot: "header" }), ((_b = (_a = this.changes).extraContent) === null || _b === void 0 ? void 0 : _b.call(_a, this.changes)) || '', ((_c = this.changes) === null || _c === void 0 ? void 0 : _c.hideDefaultFilters) !== true && ([
-            h("label", null, capts.title),
-            h("div", { class: "filter-holder" }, this.getFilterItemsList()),
-            h("div", { class: "add-filter" }, h("select", { id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType)))
-        ]), h("slot", null), ((_e = (_d = this.changes).extraBottomContent) === null || _e === void 0 ? void 0 : _e.call(_d, this.changes)) || '', h("div", { class: "filter-actions" }, this.disableDynamicFiltering && [
-            h("button", { id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
-            h("button", { id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
-        ], !this.disableDynamicFiltering && [
-            h("button", { id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
-            h("button", { id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
-        ]), h("slot", { slot: "footer" })));
+        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();
+            } }, 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: "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: "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: "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: "footer-slot", slot: "footer" }),
+        ])));
     }
     static get is() { return "revogr-filter-panel"; }
     static get originalStyleUrls() {

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

@@ -178,7 +178,8 @@ export class FilterPlugin extends BasePlugin {
     async headerclick(e) {
         var _a, _b;
         const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
-        if (!isFilterBtn(el)) {
+        const filterButton = isFilterBtn(el);
+        if (!filterButton) {
             return;
         }
         e.preventDefault();
@@ -192,9 +193,8 @@ export class FilterPlugin extends BasePlugin {
             return;
         }
         // filter button clicked, open filter dialog
-        const gridPos = this.revogrid.getBoundingClientRect();
-        const buttonPos = el.getBoundingClientRect();
-        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent, extraBottomContent: this.extraBottomHyperContent });
+        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 });
         (_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
         this.pop.show(data);
     }

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

@@ -36,12 +36,15 @@ revo-grid[theme^=dark] .revo-button.outline {
 }
 
 revogr-filter-panel {
-  position: absolute;
   display: block;
+}
+
+revogr-filter-panel .filter-panel-dialog {
+  position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
-  max-height: calc(100% - 80px);
+  max-height: calc(100vh - 16px);
   overflow: auto;
   opacity: 1;
   transform: none;
@@ -49,25 +52,27 @@ revogr-filter-panel {
   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;
   min-width: 220px;
   text-align: left;
   animation: revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1);
 }
-revogr-filter-panel .filter-holder > div {
+revogr-filter-panel .filter-panel-dialog .filter-holder > div {
   display: flex;
   flex-direction: column;
 }
-revogr-filter-panel label {
+revogr-filter-panel .filter-panel-dialog label {
   font-size: 13px;
   display: block;
   padding: 8px 0;
 }
-revogr-filter-panel select {
+revogr-filter-panel .filter-panel-dialog select {
   width: 100%;
 }
-revogr-filter-panel input[type=text] {
+revogr-filter-panel .filter-panel-dialog input[type=text] {
   border: 0;
   min-height: 34px;
   margin: 5px 0;
@@ -77,11 +82,19 @@ revogr-filter-panel input[type=text] {
   box-sizing: border-box;
   width: 100%;
 }
-revogr-filter-panel .filter-actions {
+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-actions button {
+revogr-filter-panel .filter-panel-dialog .filter-actions button {
   margin-top: 10px;
   margin-right: 5px;
 }
@@ -97,7 +110,7 @@ revogr-filter-panel .filter-actions button {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  revogr-filter-panel {
+  revogr-filter-panel .filter-panel-dialog {
     animation: none;
   }
 }
@@ -186,9 +199,38 @@ revogr-filter-panel .filter-actions button {
   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;
+  align-self: stretch;
   flex: 0 0 auto;
   justify-content: flex-end;
   align-items: center;
@@ -200,6 +242,10 @@ revogr-filter-panel .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%;
@@ -221,9 +267,6 @@ revogr-filter-panel .filter-actions button {
   transform: scaleX(0.8);
   width: 16px;
 }
-.multi-filter-list .reorder-button.filter-row-dragging {
-  opacity: 0.55;
-}
 .multi-filter-list .reorder-button.filter-row-drag-over {
   color: var(--revo-grid-filter-panel-reorder-accent, #007cb2);
 }
@@ -231,6 +274,12 @@ revogr-filter-panel .filter-actions button {
   cursor: grabbing;
 }
 
+.multi-filter-list-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
 .add-filter-divider {
   display: block;
   margin: 0 -10px 10px -10px;
@@ -250,6 +299,9 @@ revogr-filter-panel .filter-actions button {
   flex: 1 1 0;
   min-width: 0;
 }
+.select-input .select-filter {
+  width: auto;
+}
 .select-input .filter-extra {
   display: flex;
 }

package/dist/{revo-grid/column.drag.plugin-UNSHSmgo.js → esm/column.drag.plugin-BZacA8n_.js}

@@ -6,7 +6,7 @@ import { K as createStore, l as setStore, i as calculateDimensionData, L as iden
 import { j as calculateRowHeaderSize } from './viewport.store-_c579YyM.js';
 import { g as getScrollbarSize, t as timeout } from './index-Db3qZoW5.js';
 import { h } from './index-Chp_81rd.js';
-import { b as FILTER_PROP, i as isFilterBtn } from './filter.button-BFwo1uvz.js';
+import { b as FILTER_PROP, i as isFilterBtn } from './filter.button-B-RBiF67.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
 import { O as ON_COLUMN_CLICK, d as dispatch } from './header-cell-renderer-BMmXRsd_.js';
 
@@ -1400,7 +1400,8 @@ class FilterPlugin extends BasePlugin {
     async headerclick(e) {
         var _a, _b;
         const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
-        if (!isFilterBtn(el)) {
+        const filterButton = isFilterBtn(el);
+        if (!filterButton) {
             return;
         }
         e.preventDefault();
@@ -1414,9 +1415,8 @@ class FilterPlugin extends BasePlugin {
             return;
         }
         // filter button clicked, open filter dialog
-        const gridPos = this.revogrid.getBoundingClientRect();
-        const buttonPos = el.getBoundingClientRect();
-        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent, extraBottomContent: this.extraBottomHyperContent });
+        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 });
         (_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
         this.pop.show(data);
     }

package/dist/{revo-grid/filter.button-BFwo1uvz.js → esm/filter.button-B-RBiF67.js}

@@ -15,24 +15,18 @@ const FilterButton = ({ column }) => {
             [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" }))))));
 };
-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" }))));
+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" }))));
 };
-const AndOrButton = ({ text }) => {
-    return h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
+const AndOrButton = ({ text, onClick }) => {
+    return h("button", { type: "button", class: { [AND_OR_BUTTON]: true, 'light revo-button': true }, onClick: onClick }, text);
 };
-const ReorderButton = ({ dragging, dragOver, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, }) => {
-    const applyClass = (el) => {
-        if (!el) {
-            return;
-        }
-        el.className = [
-            REORDER_BUTTON,
-            dragging ? 'filter-row-dragging' : '',
-            dragOver ? 'filter-row-drag-over' : '',
-        ].filter(Boolean).join(' ');
-    };
-    return (h("button", { type: "button", ref: applyClass, draggable: true, title: "Reorder filter", "aria-label": "reorder filter", onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop }, "::"));
+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 }, "::"));
 };
 function isFilterBtn(e) {
     if (e.classList.contains(FILTER_BUTTON_CLASS)) {

package/dist/esm/index.js

@@ -2,8 +2,8 @@
  * Built by Revolist OU ❤️
  */
 export { o as GROUPING_ROW_TYPE, j as GROUP_COLUMN_PROP, G as GROUP_DEPTH, h as GROUP_EXPANDED, l as GROUP_EXPAND_BTN, m as GROUP_EXPAND_EVENT, k as GROUP_ORIGINAL_INDEX, f as PSEUDO_GROUP_COLUMN, P as PSEUDO_GROUP_ITEM, d as PSEUDO_GROUP_ITEM_ID, e as PSEUDO_GROUP_ITEM_VALUE, c as columnTypes, a as cropCellToMax, H as gatherGroup, s as gatherGrouping, z as getCellData, B as getCellDataParsed, A as getCellRaw, I as getColumnByProp, D as getColumnSizes, C as getColumnType, F as getColumns, q as getExpanded, t as getGroupingName, x as getParsedGroup, g as getRange, p as getSource, E as isColGrouping, u as isGrouping, v as isGroupingColumn, b as isRangeSingleCell, i as isRowType, y as isSameGroup, w as measureEqualDepth, n as nextCell, r as rowTypes } from './column.service-C6hByxPy.js';
-import { B as BasePlugin } from './column.drag.plugin-UNSHSmgo.js';
-export { A as AutoSizeColumnPlugin, n as BEFORE_COLUMN_DRAG_END_EVENT, m as COLUMN_DRAG_END_EVENT, l as COLUMN_DRAG_MOVE_EVENT, o as COLUMN_DRAG_START_EVENT, C as ColumnAutoSizeMode, p as ColumnMovePlugin, D as DimensionStore, b as ExportCsv, E as ExportFilePlugin, c as FILTER_CONFIG_CHANGED_EVENT, F as FILTER_TRIMMED_TYPE, d as FILTE_PANEL, e as FilterPlugin, G as GroupingRowPlugin, S as SelectionStore, s as SortingPlugin, a as StretchColumn, w as defaultCellCompare, x as descCellCompare, j as doCollapse, k as doExpand, f as filterCoreFunctionsIndexedByType, h as filterNames, g as filterTypes, r as getColumnDragPosition, z as getComparer, q as getLeftRelative, y as getNextOrder, u as getSortingIndex, t as hasActiveSorting, i as isStretchPlugin, v as sortIndexByItems } from './column.drag.plugin-UNSHSmgo.js';
+import { B as BasePlugin } from './column.drag.plugin-BZacA8n_.js';
+export { A as AutoSizeColumnPlugin, n as BEFORE_COLUMN_DRAG_END_EVENT, m as COLUMN_DRAG_END_EVENT, l as COLUMN_DRAG_MOVE_EVENT, o as COLUMN_DRAG_START_EVENT, C as ColumnAutoSizeMode, p as ColumnMovePlugin, D as DimensionStore, b as ExportCsv, E as ExportFilePlugin, c as FILTER_CONFIG_CHANGED_EVENT, F as FILTER_TRIMMED_TYPE, d as FILTE_PANEL, e as FilterPlugin, G as GroupingRowPlugin, S as SelectionStore, s as SortingPlugin, a as StretchColumn, w as defaultCellCompare, x as descCellCompare, j as doCollapse, k as doExpand, f as filterCoreFunctionsIndexedByType, h as filterNames, g as filterTypes, r as getColumnDragPosition, z as getComparer, q as getLeftRelative, y as getNextOrder, u as getSortingIndex, t as hasActiveSorting, i as isStretchPlugin, v as sortIndexByItems } from './column.drag.plugin-BZacA8n_.js';
 export { d as dispatch, a as dispatchByEvent } from './header-cell-renderer-BMmXRsd_.js';
 export { C as CellRenderer, G as GroupingRowRenderer, S as SortingSign, e as expandEvent, a as expandSvgIconVNode } from './cell-renderer-CLTRlCa5.js';
 export { a as applyMixins, f as findPositionInArray, g as getScrollbarSize, m as mergeSortedArray, p as pushSorted, r as range, s as scaleValue, t as timeout } from './index-Db3qZoW5.js';
@@ -12,7 +12,7 @@ export { k as isAll, c as isClear, h as isCopy, a as isCtrlKey, b as isCtrlMetaK
 export { h } from './index-Chp_81rd.js';
 export { C as CELL_CLASS, z as CELL_HANDLER_CLASS, m as DATA_COL, n as DATA_ROW, o as DISABLED_CLASS, x as DRAGGABLE_CLASS, A as DRAGG_TEXT, w as DRAG_ICON_CLASS, D as DataStore, E as EDIT_INPUT_WR, F as FOCUS_CLASS, G as GRID_INTERNALS, v as HEADER_ACTUAL_ROW_CLASS, H as HEADER_CLASS, u as HEADER_ROW_CLASS, r as HEADER_SORTABLE_CLASS, M as MIN_COL_SIZE, y as MOBILE_CLASS, R as RESIZE_INTERVAL, B as ROW_FOCUSED_CLASS, q as ROW_HEADER_TYPE, S as SELECTION_BORDER_CLASS, T as TMP_SELECTION_BG_CLASS, i as calculateDimensionData, I as codesLetter, h as gatherTrimmedItems, k as getItemByIndex, j as getItemByPosition, g as getPhysical, b as getSourceItem, f as getSourceItemVirtualIndexByProp, c as getSourcePhysicalIndex, a as getVisibleSourceItem, J as keyValues, p as proxyPlugin, e as setItems, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, l as setStore, t as trimmedPlugin } from './dimension.helpers-CGKwSvw6.js';
 export { V as ViewportStore, b as addMissingItems, j as calculateRowHeaderSize, c as clampViewportCoordinate, f as getFirstItem, d as getItems, h as getLastItem, a as getUpdatedItemsByPosition, g as getViewportMaxCoordinate, i as isActiveRange, e as isActiveRangeOutsideLastItem, r as recombineByOffset, s as setItemSizes, u as updateMissingAndRange } from './viewport.store-_c579YyM.js';
-export { A as AND_OR_BUTTON, e as AndOrButton, a as FILTER_BUTTON_ACTIVE, F as FILTER_BUTTON_CLASS, b as FILTER_PROP, c as FilterButton, R as REORDER_BUTTON, f as ReorderButton, T as TRASH_BUTTON, d as TrashButton, i as isFilterBtn } from './filter.button-BFwo1uvz.js';
+export { A as AND_OR_BUTTON, e as AndOrButton, a as FILTER_BUTTON_ACTIVE, F as FILTER_BUTTON_CLASS, b as FILTER_PROP, c as FilterButton, R as REORDER_BUTTON, f as ReorderButton, T as TRASH_BUTTON, d as TrashButton, i as isFilterBtn } from './filter.button-B-RBiF67.js';
 import './debounce-PCRWZliA.js';
 
 const REVOGRID_EVENTS = new Map([

package/dist/esm/revo-grid.entry.js

@@ -6,12 +6,12 @@ import { c as columnTypes, J as reduce, C as getColumnType, r as rowTypes, i as
 import { D as DataStore, b as getSourceItem, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, a as getVisibleSourceItem, h as gatherTrimmedItems, k as getItemByIndex, R as RESIZE_INTERVAL } from './dimension.helpers-CGKwSvw6.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
 import { g as getScrollDimension, v as viewportDataPartition, F as FOOTER_SLOT, C as CONTENT_SLOT, H as HEADER_SLOT, D as DATA_SLOT } from './viewport.helpers-CoCAvmZs.js';
-import { D as DimensionStore, S as SelectionStore, B as BasePlugin, G as GroupingRowPlugin, a as StretchColumn, i as isStretchPlugin, A as AutoSizeColumnPlugin, e as FilterPlugin, E as ExportFilePlugin, s as SortingPlugin, p as ColumnMovePlugin } from './column.drag.plugin-UNSHSmgo.js';
+import { D as DimensionStore, S as SelectionStore, B as BasePlugin, G as GroupingRowPlugin, a as StretchColumn, i as isStretchPlugin, A as AutoSizeColumnPlugin, e as FilterPlugin, E as ExportFilePlugin, s as SortingPlugin, p as ColumnMovePlugin } from './column.drag.plugin-BZacA8n_.js';
 import { V as ViewportStore } from './viewport.store-_c579YyM.js';
 import { T as ThemeService } from './theme.service-BmnDvr6P.js';
 import { t as timeout } from './index-Db3qZoW5.js';
 import { g as getPropertyFromEvent } from './events-BvSmBueA.js';
-import './filter.button-BFwo1uvz.js';
+import './filter.button-B-RBiF67.js';
 import './header-cell-renderer-BMmXRsd_.js';
 
 class ColumnDataProvider {

package/dist/esm/revogr-clipboard_3.entry.js

@@ -143,7 +143,7 @@ const Clipboard = class {
     }
     getData(e) {
         return (e.clipboardData ||
-            (window === null || window === void 0 ? void 0 : window.clipboardData));
+            (globalThis === null || globalThis === void 0 ? void 0 : globalThis.clipboardData));
     }
 };
 

package/dist/esm/revogr-data_4.entry.js

@@ -5,7 +5,7 @@ import { r as registerInstance, d as createEvent, h, e as Host, g as getElement
 import { M as ColumnService, u as isGrouping } from './column.service-C6hByxPy.js';
 import { B as ROW_FOCUSED_CLASS, b as getSourceItem, n as DATA_ROW, m as DATA_COL, M as MIN_COL_SIZE, r as HEADER_SORTABLE_CLASS, H as HEADER_CLASS, F as FOCUS_CLASS, k as getItemByIndex, u as HEADER_ROW_CLASS, v as HEADER_ACTUAL_ROW_CLASS } from './dimension.helpers-CGKwSvw6.js';
 import { G as GroupingRowRenderer, C as CellRenderer, R as RowRenderer, P as PADDING_DEPTH, S as SortingSign } from './cell-renderer-CLTRlCa5.js';
-import { c as FilterButton } from './filter.button-BFwo1uvz.js';
+import { c as FilterButton } from './filter.button-B-RBiF67.js';
 import { H as HeaderCellRenderer } from './header-cell-renderer-BMmXRsd_.js';
 import { t as throttle, L as LocalScrollTimer, a as LocalScrollService, g as getContentSize } from './throttle-CaUDyxyU.js';
 import { H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT } from './viewport.helpers-CoCAvmZs.js';