@revolist/revogrid 4.23.13 → 4.23.15

package/hydrate/index.mjs

@@ -6856,7 +6856,7 @@ class Clipboard {
     }
     getData(e) {
         return (e.clipboardData ||
-            (window === null || window === void 0 ? void 0 : window.clipboardData));
+            (globalThis === null || globalThis === void 0 ? void 0 : globalThis.clipboardData));
     }
     static get cmpMeta() { return {
         "$flags$": 0,
@@ -7364,24 +7364,18 @@ const FilterButton = ({ column }) => {
             [FILTER_BUTTON_ACTIVE]: column && !!column[FILTER_PROP],
         } }, hAsync("svg", { class: "filter-img", viewBox: "0 0 64 64" }, hAsync("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, hAsync("path", { d: "M43,48 L43,56 L21,56 L21,48 L43,48 Z M53,28 L53,36 L12,36 L12,28 L53,28 Z M64,8 L64,16 L0,16 L0,8 L64,8 Z", fill: "currentColor" }))))));
 };
-const TrashButton = () => {
-    return (hAsync("div", { class: { [TRASH_BUTTON]: true } }, hAsync("svg", { class: "trash-img", viewBox: "0 0 24 24" }, hAsync("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 (hAsync("button", { type: "button", class: { [TRASH_BUTTON]: true }, "aria-label": ariaLabel, onClick: onClick }, hAsync("svg", { class: "trash-img", viewBox: "0 0 24 24" }, hAsync("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 hAsync("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
+const AndOrButton = ({ text, onClick }) => {
+    return hAsync("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 (hAsync("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 (hAsync("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)) {
@@ -7451,12 +7445,13 @@ function moveFilterItem(items, sourceId, targetId) {
     return true;
 }
 
-const filterStyleCss = () => `.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#4545ff;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:#009037}.revo-button.red{background-color:#E0662E}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid #dbdbdb;line-height:30px;background:none;color:#000;box-shadow:none}revo-grid[theme^=dark] .revo-button.outline{border:1px solid #404040;color:#d8d8d8}revogr-filter-panel{position:absolute;display:block;top:0;left:0;z-index:100;max-height:calc(100% - 80px);overflow:auto;opacity:1;transform:none;background-color:var(--revo-grid-filter-panel-bg, #fff);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));padding:10px;border-radius:8px;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{display:flex;flex-direction:column}revogr-filter-panel label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel select{width:100%}revogr-filter-panel input[type=text]{border:0;min-height:34px;margin:5px 0;background:var(--revo-grid-filter-panel-input-bg, #f3f3f3);border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel .filter-actions{text-align:right;margin-right:-5px}revogr-filter-panel .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{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}.rgHeaderCell .rv-filter.active{color:#10224a}.rgHeaderCell .rv-filter .filter-img{color:gray;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;border:1px solid var(--revo-grid-filter-panel-select-border, #d9d9d9);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--revo-grid-filter-panel-input-bg, #f3f3f3);background-image: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:hover{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.select-css:focus{border-color:var(--revo-grid-filter-panel-select-border-hover, #d9d9d9);box-shadow:0 0 1px 3px rgba(59, 153, 252, 0.7);box-shadow:0 0 0 3px -moz-mac-focusring;outline:none}.select-css option{font-weight:normal}.select-css:disabled,.select-css[aria-disabled=true]{color:gray;background-image: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"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.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}.multi-filter-list .multi-filter-list-action{display:flex;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;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(--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-dragging{opacity:0.55}.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}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);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 .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:#fff;background-color:#4545ff;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:#009037}.revo-button.red{background-color:#E0662E}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid #dbdbdb;line-height:30px;background:none;color:#000;box-shadow:none}revo-grid[theme^=dark] .revo-button.outline{border:1px solid #404040;color:#d8d8d8}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;background-color:var(--revo-grid-filter-panel-bg, #fff);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-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;background:var(--revo-grid-filter-panel-input-bg, #f3f3f3);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(--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;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}.rgHeaderCell .rv-filter.active{color:#10224a}.rgHeaderCell .rv-filter .filter-img{color:gray;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;border:1px solid var(--revo-grid-filter-panel-select-border, #d9d9d9);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--revo-grid-filter-panel-input-bg, #f3f3f3);background-image: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:hover{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.select-css:focus{border-color:var(--revo-grid-filter-panel-select-border-hover, #d9d9d9);box-shadow:0 0 1px 3px rgba(59, 153, 252, 0.7);box-shadow:0 0 0 3px -moz-mac-focusring;outline:none}.select-css option{font-weight:normal}.select-css:disabled,.select-css[aria-disabled=true]{color:gray;background-image: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"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.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(--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}.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(--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;margin:0 -10px 10px -10px;border-bottom:1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);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';
 const FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';
 const FILTER_ID = 'add-filter';
+const VIEWPORT_PADDING = 8;
 /**
  * Filter panel for editing filters
  */
@@ -7479,6 +7474,9 @@ class FilterPanel {
             placeholder: 'Enter value...',
             and: 'and',
             or: 'or',
+            filterCondition: 'Filter condition',
+            removeFilter: 'Remove filter',
+            reorderFilter: 'Reorder filter',
         };
         this.isFilterIdSet = false;
         this.filterId = 0;
@@ -7553,36 +7551,75 @@ 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 (hAsync("div", { key: this.filterId }, propFilters.map((filter, index) => {
+        const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
+        return (hAsync("div", { key: this.filterId }, hAsync("ul", { class: "multi-filter-list-container" }, propFilters.map((filter, index) => {
             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 = (hAsync("div", { onClick: () => this.toggleFilterAndOr(filter.id) }, hAsync(AndOrButton, { text: filter.relation === 'and' ? capts.and : capts.or })));
+                andOrButton = (hAsync(AndOrButton, { text: filter.relation === 'and' ? capts.and : capts.or, onClick: () => this.toggleFilterAndOr(filter.id) }));
             }
             const extra = this.renderExtra(prop, index);
-            return (hAsync("div", { key: filter.id, class: FILTER_LIST_CLASS }, hAsync("div", { ref: el => el === null || el === void 0 ? void 0 : el.classList.add('multi-filter-list-row') }, visibleFilterCount > 1 ? (hAsync(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) })) : '', hAsync("div", { class: { 'select-input': true } }, hAsync("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), extra ? hAsync("div", { class: "filter-extra" }, extra) : ''), hAsync("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, hAsync("div", { onClick: () => this.onRemoveFilter(filter.id) }, hAsync(TrashButton, null))))));
-        }), propFilters.filter(f => !f.hidden).length > 0 ? hAsync("div", { class: "add-filter-divider" }) : ''));
+            const isDragging = this.draggedFilterId === filter.id;
+            const isDragOver = this.dragOverFilterId === filter.id && !isDragging;
+            const canReorder = visibleFilterCount > 1;
+            return (hAsync("li", { key: filter.id, class: FILTER_LIST_CLASS, "aria-label": `${capts.filterCondition} ${index + 1}` }, hAsync("div", { class: {
+                    'multi-filter-list-row': true,
+                    'filter-row-drop-active': this.draggedFilterId !== undefined && !isDragging,
+                    'filter-row-dragging': isDragging,
+                    'filter-row-drag-over': isDragOver,
+                } }, canReorder ? (hAsync("button", { type: "button", class: "filter-row-drop-target", tabIndex: -1, "aria-label": `${capts.filterCondition} ${index + 1}`, onDragOver: e => this.onFilterDragOver(e, filter.id), onDragLeave: () => this.onFilterDragLeave(filter.id), onDrop: e => this.onFilterDrop(e, prop, filter.id) })) : '', canReorder ? (hAsync(ReorderButton, { ariaLabel: capts.reorderFilter, dragging: isDragging, dragOver: isDragOver, onDragStart: e => this.onFilterDragStart(e, filter.id), onDragEnd: () => this.onFilterDragEnd(), onKeyDown: e => this.onFilterReorderKeyDown(e, prop, filter.id) })) : '', hAsync("div", { class: { 'select-input': true } }, hAsync("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), extra ? hAsync("div", { class: "filter-extra" }, extra) : ''), hAsync("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, hAsync(TrashButton, { ariaLabel: capts.removeFilter, onClick: () => this.onRemoveFilter(filter.id) })))));
+        })), propFilters.filter(f => !f.hidden).length > 0 ? hAsync("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;
@@ -7716,6 +7753,37 @@ 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();
@@ -7754,7 +7822,7 @@ class FilterPanel {
             });
         });
         if (!isDefaultTypeRemoved) {
-            const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+            const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
             options.push(hAsync("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0
                 ? capts.add
                 : this.filterNames[defaultType]));
@@ -7787,7 +7855,7 @@ 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(hAsync, {
@@ -7824,30 +7892,34 @@ class FilterPanel {
             } }));
     }
     render() {
-        var _a, _b, _c, _d, _e;
-        if (!this.changes) {
-            return hAsync(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 (hAsync(Host, { style: style, ref: el => {
-                var _a;
-                ((_a = this.changes) === null || _a === void 0 ? void 0 : _a.autoCorrect) !== false && this.autoCorrect(el);
-            } }, hAsync("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 && ([
-            hAsync("label", null, capts.title),
-            hAsync("div", { class: "filter-holder" }, this.getFilterItemsList()),
-            hAsync("div", { class: "add-filter" }, hAsync("select", { id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType)))
-        ]), hAsync("slot", null), ((_e = (_d = this.changes).extraBottomContent) === null || _e === void 0 ? void 0 : _e.call(_d, this.changes)) || '', hAsync("div", { class: "filter-actions" }, this.disableDynamicFiltering && [
-            hAsync("button", { id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
-            hAsync("button", { id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
-        ], !this.disableDynamicFiltering && [
-            hAsync("button", { id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
-            hAsync("button", { id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
-        ]), hAsync("slot", { slot: "footer" })));
+        const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
+        return (hAsync(Host, { key: '4e969f8b7033363c885c94b1f7770917786669f2' }, hAsync("dialog", { key: '79b2713724684fa99f56621fe43645a0b0ad54bf', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+                e.preventDefault();
+                this.onCancel();
+            } }, this.changes && [
+            hAsync("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 && [
+                hAsync("label", { key: "filter-title" }, capts.title),
+                hAsync("div", { key: "filter-holder", class: "filter-holder" }, this.getFilterItemsList()),
+                hAsync("div", { key: "add-filter", class: "add-filter" }, hAsync("select", { key: 'fc894bdfae1ff35d5c49adc7646dd3182b7bd49e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+            ],
+            hAsync("slot", { key: "default-slot" }),
+            ((_j = (_h = this.changes).extraBottomContent) === null || _j === void 0 ? void 0 : _j.call(_h, this.changes)) || '',
+            hAsync("div", { key: "filter-actions", class: "filter-actions" }, this.disableDynamicFiltering && [
+                hAsync("button", { key: "save", id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
+                hAsync("button", { key: "cancel", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
+            ], !this.disableDynamicFiltering && [
+                hAsync("button", { key: "ok", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
+                hAsync("button", { key: "reset", id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
+            ]),
+            hAsync("slot", { key: "footer-slot", slot: "footer" }),
+        ])));
     }
     get element() { return getElement(this); }
     static get style() { return filterStyleCss(); }
@@ -15882,7 +15954,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();
@@ -15896,9 +15969,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.23.13",
+  "version": "4.23.15",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",

package/standalone/filter.button.js

@@ -1,4 +1,4 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import{h as r}from"@stencil/core/internal/client";const t="rv-filter",o="active",a="hasFilter",e="and-or-button",n="trash-button",l="reorder-button",s=({column:e})=>r("span",null,r("button",{class:{[t]:!0,[o]:e&&!!e[a]}},r("svg",{class:"filter-img",viewBox:"0 0 64 64"},r("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},r("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"}))))),i=()=>r("div",{class:{[n]:!0}},r("svg",{class:"trash-img",viewBox:"0 0 24 24"},r("path",{fill:"currentColor",d:"M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"}))),g=({text:t})=>r("button",{class:{[e]:!0,"light revo-button":!0}},t),d=({dragging:t,dragOver:o,onDragStart:a,onDragEnd:e,onDragOver:n,onDragLeave:s,onDrop:i})=>r("button",{type:"button",ref:r=>{r&&(r.className=[l,t?"filter-row-dragging":"",o?"filter-row-drag-over":""].filter(Boolean).join(" "))},draggable:!0,title:"Reorder filter","aria-label":"reorder filter",onDragStart:a,onDragEnd:e,onDragOver:n,onDragLeave:s,onDrop:i},"::");function u(r){return!!r.classList.contains(t)||(null==r?void 0:r.closest(`.${t}`))}export{e as A,t as F,l as R,n as T,o as a,a as b,s as c,i as d,g as e,d as f,u as i}
+import{h as a}from"@stencil/core/internal/client";const t="rv-filter",o="active",r="hasFilter",n="and-or-button",e="trash-button",l="reorder-button",i=({column:n})=>a("span",null,a("button",{class:{[t]:!0,[o]:n&&!!n[r]}},a("svg",{class:"filter-img",viewBox:"0 0 64 64"},a("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},a("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"}))))),s=({ariaLabel:t,onClick:o})=>a("button",{type:"button",class:{[e]:!0},"aria-label":t,onClick:o},a("svg",{class:"trash-img",viewBox:"0 0 24 24"},a("path",{fill:"currentColor",d:"M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"}))),g=({text:t,onClick:o})=>a("button",{type:"button",class:{[n]:!0,"light revo-button":!0},onClick:o},t),c=({ariaLabel:t,dragging:o,dragOver:r,onDragStart:n,onDragEnd:e,onDragOver:i,onDragLeave:s,onDrop:g,onKeyDown:c})=>a("button",{type:"button",class:{[l]:!0,"filter-row-dragging":!!o,"filter-row-drag-over":!!r},draggable:!0,title:t,"aria-label":t,onDragStart:n,onDragEnd:e,onDragOver:i,onDragLeave:s,onDrop:g,onKeyDown:c},"::");function u(a){return!!a.classList.contains(t)||(null==a?void 0:a.closest(`.${t}`))}export{n as A,t as F,l as R,e as T,o as a,r as b,i as c,s as d,g as e,c as f,u as i}