@revolist/revogrid 4.26.2 → 4.27.0

package/dist/cjs/{text-editor-F04kTx53.js → text-editor-CJyQaYei.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var edit_utils = require('./edit.utils-rAcGublN.js');
-var index = require('./index--FdNLz1Z.js');
+var edit_utils = require('./edit.utils-CBAbQhGP.js');
+var index = require('./index-BVESmpqW.js');
 
 class TextEditor {
     constructor(data, saveCallback) {

package/dist/cjs/{throttle-fV6BUmM7.js → throttle-BsaP4fgu.js}

@@ -197,7 +197,7 @@ class LocalScrollTimer {
      * Remember last mw event time
      */
     latestScrollUpdate(dimension) {
-        this.mouseWheelScrollTimestamp[dimension] = new Date().getTime();
+        this.mouseWheelScrollTimestamp[dimension] = Date.now();
     }
     isReady(type, coordinate) {
         // if there is a callback, clear it
@@ -208,7 +208,7 @@ class LocalScrollTimer {
         return this.verifyChange(type, coordinate);
     }
     verifyChange(type, coordinate) {
-        const now = new Date().getTime();
+        const now = Date.now();
         const change = now - this.mouseWheelScrollTimestamp[type];
         return change > this.scrollThrottling &&
             coordinate !== this.lastKnownScrollCoordinate[type];
@@ -226,7 +226,7 @@ class LocalScrollTimer {
             // save lastScrollUpdate callback
             const callback = this.lastScrollUpdateCallbacks[type] = {
                 callback: lastScrollUpdate,
-                timestamp: new Date().getTime(),
+                timestamp: Date.now(),
                 coordinate,
                 timeout: 0,
             };

package/dist/cjs/{viewport.store-B4Clk4m9.js → viewport.store-mhsdi61t.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var dimension_helpers = require('./dimension.helpers-CgHhnN1d.js');
+var dimension_helpers = require('./dimension.helpers-CptesQOZ.js');
 
 const LETTER_BLOCK_SIZE = 10;
 const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) => {

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

@@ -44,6 +44,17 @@ revogr-data .rgRow {
   width: 100%;
   left: 0;
 }
+revogr-data .rgRow > .row-resize-handle {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: -3px;
+  left: 0;
+  height: 7px;
+  cursor: row-resize;
+  touch-action: none;
+  user-select: none;
+}
 revogr-data .rgRow.groupingRow {
   font-weight: 600;
   text-align: left;

package/dist/collection/components/data/revogr-data.js

@@ -113,7 +113,10 @@ export class RevogrData {
                     groupingCellRenderer, additionalData: this.additionalData,
                     // Only show expand button if grouping is enabled and not in row headers
                     hasExpand: this.columnService.hasGrouping && this.colType !== 'rowHeaders', columnItems: cols, providers: this.providers });
-                rowsEls.push(h(GroupingRowRenderer, Object.assign({}, gmodel)));
+                const row = h(GroupingRowRenderer, Object.assign({}, gmodel));
+                this.triggerBeforeRowRender(row, rgRow, dataItem);
+                rowsEls.push(row);
+                this.renderedRows.set(rgRow.itemIndex, row);
                 continue;
             }
             // #endregion
@@ -162,19 +165,22 @@ export class RevogrData {
                 rowClass += ` ${ROW_FOCUSED_CLASS}`;
             }
             const row = (h(RowRenderer, { index: rgRow.itemIndex, rowClass: rowClass, size: rgRow.size, start: rgRow.start - rowRenderOffset, groupingLevel: groupDepth || undefined }, cells));
-            this.beforerowrender.emit({
-                node: row,
-                item: rgRow,
-                model: dataItem,
-                colType: this.columnService.type,
-                rowType: this.type,
-            });
+            this.triggerBeforeRowRender(row, rgRow, dataItem);
             rowsEls.push(row);
             this.renderedRows.set(rgRow.itemIndex, row);
             // #endregion
         }
         return (h(Host, null, h("slot", null), rowsEls));
     }
+    triggerBeforeRowRender(node, item, model) {
+        this.beforerowrender.emit({
+            node,
+            item,
+            model,
+            colType: this.colType,
+            rowType: this.type,
+        });
+    }
     triggerBeforeCellRender(model, row, column) {
         const detail = {
             column,

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

@@ -62,6 +62,7 @@ revogr-header .rgHeaderCell.active .resizable {
 }
 revogr-header .rgHeaderCell .header-content {
   position: absolute;
+  z-index: 0;
   inset: 0;
   box-sizing: border-box;
   padding: inherit;

package/dist/collection/components/overlay/keyboard.service.js

@@ -15,6 +15,16 @@ const DIRECTION_CODES = [
 export class KeyboardService {
     constructor(sv) {
         this.sv = sv;
+        /** Keep focus transitions in keydown order so rendering can scroll each cell into view. */
+        this.keyChangeQueue = Promise.resolve(false);
+        this.keyChangeGeneration = 0;
+        this.applyingKeyChange = false;
+    }
+    /** Cancel delayed directional input after focus or edit context changes externally. */
+    invalidatePendingChanges() {
+        if (!this.applyingKeyChange) {
+            this.keyChangeGeneration += 1;
+        }
     }
     /**
      * Appends printable key input that arrives after edit mode was requested
@@ -117,13 +127,33 @@ export class KeyboardService {
         if (!data) {
             return false;
         }
+        const keyChangeGeneration = this.keyChangeGeneration;
         // this interval needed for several cases
         // grid could be resized before next click
         // at this case to avoid screen jump we use this interval
         await timeout(RESIZE_INTERVAL + 30);
-        const range = this.sv.selectionStore.get('range');
-        const focus = this.sv.selectionStore.get('focus');
-        return this.keyPositionChange(data.changes, range, focus, data.isMulti);
+        const applyKeyChange = async () => {
+            if (keyChangeGeneration !== this.keyChangeGeneration) {
+                return false;
+            }
+            const range = this.sv.selectionStore.get('range');
+            const focus = this.sv.selectionStore.get('focus');
+            this.applyingKeyChange = true;
+            let changed;
+            try {
+                changed = this.keyPositionChange(data.changes, range, focus, data.isMulti);
+            }
+            finally {
+                this.applyingKeyChange = false;
+            }
+            await new Promise(resolve => requestAnimationFrame(() => {
+                requestAnimationFrame(() => resolve());
+            }));
+            return changed;
+        };
+        const queuedChange = this.keyChangeQueue.then(applyKeyChange, applyKeyChange);
+        this.keyChangeQueue = queuedChange.catch(() => false);
+        return queuedChange;
     }
     keyPositionChange(changes, range, focus, isMulti = false) {
         if (!range || !focus) {

package/dist/collection/components/overlay/revogr-overlay-selection.js

@@ -84,6 +84,8 @@ export class OverlaySelection {
      * Selection & Keyboard
      */
     selectionServiceSet(selectionStore) {
+        var _a;
+        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.invalidatePendingChanges();
         // clear subscriptions
         this.unsubscribeSelectionStore.forEach(v => v());
         this.unsubscribeSelectionStore.length = 0;
@@ -111,6 +113,7 @@ export class OverlaySelection {
             getData: () => this.getData(),
             selectAll: () => this.selectAll.emit(),
         });
+        this.unsubscribeSelectionStore.push(selectionStore.onChange('focus', () => { var _a; return (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.invalidatePendingChanges(); }), selectionStore.onChange('edit', () => { var _a; return (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.invalidatePendingChanges(); }));
         this.createAutoFillService();
     }
     /** Autofill */
@@ -147,11 +150,12 @@ export class OverlaySelection {
         this.selectionServiceSet(this.selectionStore);
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         // clear subscriptions
+        (_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.invalidatePendingChanges();
         this.unsubscribeSelectionStore.forEach(v => v());
         this.unsubscribeSelectionStore.length = 0;
-        (_a = this.columnService) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.columnService) === null || _b === void 0 ? void 0 : _b.destroy();
     }
     async componentWillRender() {
         var _a, _b;
@@ -163,9 +167,7 @@ export class OverlaySelection {
     renderRange(range) {
         const cell = getCell(range, this.dimensionRow.state, this.dimensionCol.state);
         const styles = styleByCellProps(cell);
-        return [
-            h("div", { class: SELECTION_BORDER_CLASS, style: styles }, this.isMobileDevice && (h("div", { class: "range-handlers" }, h("span", { class: MOBILE_CLASS }), h("span", { class: MOBILE_CLASS })))),
-        ];
+        return (h("div", { class: SELECTION_BORDER_CLASS, style: styles }, this.isMobileDevice && (h("div", { class: "range-handlers" }, h("span", { class: MOBILE_CLASS }), h("span", { class: MOBILE_CLASS })))));
     }
     renderEditor() {
         // Check if edit access
@@ -218,7 +220,7 @@ export class OverlaySelection {
             }
             // Range
             if (range) {
-                nodes.push(...this.renderRange(range));
+                nodes.push(this.renderRange(range));
             }
             // Autofill
             if (focus && !this.readonly && this.range) {
@@ -229,9 +231,9 @@ export class OverlaySelection {
                 nodes.push(h("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (h(Host, { key: '2d8dc4fd40a883fe59b24b2cfac1c370b9f0ac16', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
+        return (h(Host, { key: '230e2122c5c7065c072f02019d616a64949d54d0', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true), onCloseedit: (e) => this.closeEdit(e),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '47740a79c605258b4024384510358be927d000b7', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -428,12 +430,12 @@ export class OverlaySelection {
     clearCell() {
         var _a;
         const range = this.selectionStore.get('range');
-        if (range && !isRangeSingleCell(range)) {
+        const focused = this.selectionStore.get('focus');
+        if (range && (!isRangeSingleCell(range) || !focused)) {
             const data = this.columnService.getRangeStaticData(range, '');
             (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(data, range, range);
         }
         else if (this.canEdit()) {
-            const focused = this.selectionStore.get('focus');
             if (!focused) {
                 return;
             }

package/dist/collection/components/revoGrid/plugin.service.js

@@ -33,7 +33,7 @@ export class PluginService {
             return;
         }
         // Step 1: Identify plugins to remove, compare new and old plugins
-        const pluginsToRemove = (prevPlugins === null || prevPlugins === void 0 ? void 0 : prevPlugins.filter(prevPlugin => !plugins.some(userPlugin => userPlugin === prevPlugin))) || [];
+        const pluginsToRemove = (prevPlugins === null || prevPlugins === void 0 ? void 0 : prevPlugins.filter(prevPlugin => !plugins.includes(prevPlugin))) || [];
         // Step 2: Remove old plugins
         pluginsToRemove.forEach(plugin => {
             var _a, _b;
@@ -46,7 +46,7 @@ export class PluginService {
         // Step 3: Register user plugins
         plugins === null || plugins === void 0 ? void 0 : plugins.forEach(userPlugin => {
             // check if plugin already exists, if so, skip
-            const existingPlugin = this.internalPlugins.find(createdPlugin => createdPlugin instanceof userPlugin);
+            const existingPlugin = this.internalPlugins.some(createdPlugin => createdPlugin instanceof userPlugin);
             if (existingPlugin) {
                 return;
             }

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

@@ -29,6 +29,7 @@ import { getColumnByProp, getColumns } from "../../utils/column.utils";
 import { WCAGPlugin } from "../../plugins/wcag";
 import { PluginService } from "./plugin.service";
 import { RTLPlugin } from "../../plugins/rtl/rtl.plugin";
+import { RowResizePlugin, } from "../../plugins/row-resize";
 const DEFAULT_COLUMN_SIZE = 100;
 function getColumnSize(size) {
     return Number.isFinite(size) && size > 0 ? size : DEFAULT_COLUMN_SIZE;
@@ -74,7 +75,12 @@ export class RevoGridComponent {
         /** When true, grid in read only mode. */
         this.readonly = false;
         /** When true, columns are resizable. */
-        this.resize = false;
+        this.resize = true;
+        /**
+         * Enables row resizing. Pass a configuration object to customize the
+         * height limits or enable resize edges across the full row.
+         */
+        this.resizeRow = false;
         /**
          * Prevents horizontal scroll state from being mirrored across viewport sections.
          */
@@ -145,15 +151,15 @@ export class RevoGridComponent {
          */
         this.autoSizeColumn = false;
         /**
-         * Enables filter plugin.
+         * Enables filter plugin. Enabled by default; set to `false` to opt out.
          * Can be boolean.
          * Or can be filter collection See `FilterCollection` for more info.
          */
-        this.filter = false;
+        this.filter = true;
         /**
          * Enable column move plugin.
          */
-        this.canMoveColumns = false;
+        this.canMoveColumns = true;
         /**
          * Trimmed rows.
          * Functionality which allows to hide rows from main data set.
@@ -163,7 +169,7 @@ export class RevoGridComponent {
         /**
          * Enable export plugin.
          */
-        this.exporting = false;
+        this.exporting = true;
         /**
          * Stretch strategy for columns by `StretchColumn` plugin.
          * For example if there are more space on the right last column size would be increased.
@@ -255,7 +261,7 @@ export class RevoGridComponent {
         var _a;
         if (this.dataProvider && this.columnProvider && !skipDataUpdate) {
             const columnProp = (_a = this.columnProvider.getColumn(col, colType)) === null || _a === void 0 ? void 0 : _a.prop;
-            if (typeof columnProp !== 'undefined') {
+            if (columnProp !== undefined) {
                 this.dataProvider.setCellData({
                     type: rowType,
                     rowIndex: row,
@@ -984,6 +990,7 @@ export class RevoGridComponent {
         this.pluginService.add(new SortingPlugin(this.element, pluginData));
         // register grouping plugin
         this.pluginService.add(new GroupingRowPlugin(this.element, pluginData));
+        this.pluginService.add(RowResizePlugin.fromGridProperty(this.element, pluginData));
         if (this.canMoveColumns) {
             this.pluginService.add(new ColumnMovePlugin(this.element, pluginData));
         }
@@ -1318,6 +1325,33 @@ export class RevoGridComponent {
                 "setter": false,
                 "reflect": false,
                 "attribute": "resize",
+                "defaultValue": "true"
+            },
+            "resizeRow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | RowResizeConfig",
+                    "resolved": "boolean | { minHeight?: number | undefined; maxHeight?: number | undefined; fullRow?: boolean | undefined; }",
+                    "references": {
+                        "RowResizeConfig": {
+                            "location": "import",
+                            "path": "../../plugins/row-resize",
+                            "id": "src/plugins/row-resize/index.ts::RowResizeConfig",
+                            "referenceLocation": "RowResizeConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables row resizing. Pass a configuration object to customize the\nheight limits or enable resize edges across the full row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize-row",
                 "defaultValue": "false"
             },
             "noHorizontalScrollTransfer": {
@@ -1724,13 +1758,13 @@ export class RevoGridComponent {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enables filter plugin.\nCan be boolean.\nOr can be filter collection See `FilterCollection` for more info."
+                    "text": "Enables filter plugin. Enabled by default; set to `false` to opt out.\nCan be boolean.\nOr can be filter collection See `FilterCollection` for more info."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "filter",
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "sorting": {
                 "type": "unknown",
@@ -1798,7 +1832,7 @@ export class RevoGridComponent {
                 "setter": false,
                 "reflect": false,
                 "attribute": "can-move-columns",
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "trimmedRows": {
                 "type": "unknown",
@@ -1841,7 +1875,7 @@ export class RevoGridComponent {
                 "setter": false,
                 "reflect": false,
                 "attribute": "exporting",
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "grouping": {
                 "type": "unknown",

package/dist/collection/components/revoGrid/viewport.scrolling.service.js

@@ -8,29 +8,25 @@ export default class GridScrollingService {
         this.elements = {};
     }
     async proxyScroll(e, key, skipEvent) {
-        var _a;
         let newEventPromise;
         let event = e;
-        for (let elKey in (skipEvent ? {} : this.elements)) {
+        for (const elKey in (skipEvent ? {} : this.elements)) {
             // skip
             if (e.dimension === 'rgCol' && elKey === 'headerRow') {
                 continue;
                 // pinned column only
             }
-            else if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
+            if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
                 if (elKey === key || !e.delta) {
                     continue;
                 }
-                for (let el of this.elements[elKey]) {
-                    if (el.changeScroll) {
-                        newEventPromise = el.changeScroll(e);
-                    }
+                const changedEvent = this.changeScroll(this.elements[elKey], e);
+                if (changedEvent) {
+                    newEventPromise = changedEvent;
                 }
             }
             else {
-                for (let el of this.elements[elKey]) {
-                    await ((_a = el.setScroll) === null || _a === void 0 ? void 0 : _a.call(el, e));
-                }
+                await this.setScroll(this.elements[elKey], e);
             }
         }
         const newEvent = await newEventPromise;
@@ -40,12 +36,27 @@ export default class GridScrollingService {
         this.setViewport(skipEvent && this.isPinnedColumn(key)
             ? Object.assign(Object.assign({}, event), { dimension: key }) : event);
     }
+    changeScroll(elements, e) {
+        let changedEvent;
+        for (const element of elements) {
+            if (element.changeScroll) {
+                changedEvent = element.changeScroll(e);
+            }
+        }
+        return changedEvent;
+    }
+    async setScroll(elements, e) {
+        var _a;
+        for (const element of elements) {
+            await ((_a = element.setScroll) === null || _a === void 0 ? void 0 : _a.call(element, e));
+        }
+    }
     /**
      * Silent scroll update for mobile devices when we have negative scroll top
      */
     async scrollSilentService(e, key) {
         var _a;
-        for (let elKey in this.elements) {
+        for (const elKey in this.elements) {
             // skip same element update
             if (elKey === key) {
                 continue;
@@ -53,7 +64,7 @@ export default class GridScrollingService {
             if (columnTypes.includes(key) &&
                 (elKey === 'headerRow' ||
                     columnTypes.includes(elKey))) {
-                for (let el of this.elements[elKey]) {
+                for (const el of this.elements[elKey]) {
                     await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
                 }
                 continue;
@@ -61,7 +72,7 @@ export default class GridScrollingService {
         }
     }
     isPinnedColumn(key) {
-        return !!key && ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
+        return !!key && ['colPinStart', 'colPinEnd'].includes(key);
     }
     registerElements(els) {
         this.elements = els;

package/dist/collection/components/revoGrid/viewport.service.js

@@ -114,7 +114,7 @@ export default class ViewportService {
         const changedItems = {};
         for (const i of Object.keys(detail || {})) {
             const size = detail[i];
-            const virtualIndex = parseInt(i, 10);
+            const virtualIndex = Number.parseInt(i, 10);
             const item = getSourceItem(store, virtualIndex);
             if (item) {
                 changedItems[virtualIndex] = Object.assign(Object.assign({}, item), { size });

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

@@ -0,0 +1,9 @@
+/*!
+ * Built by Revolist OU ❤️
+ */
+/** Fewer rows keep the existing synchronous filtering behavior. */
+export const ASYNC_FILTER_ROW_THRESHOLD = 15000;
+/** Maximum rows evaluated in one filtering chunk. */
+export const FILTER_CHUNK_SIZE = 1000;
+/** Yield after approximately this much accumulated filtering work. */
+export const FILTER_TIME_BUDGET_MS = 5;

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

@@ -107,7 +107,7 @@ export class FilterPanel {
     getFilterItemsList() {
         var _a, _b;
         const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
-        if (typeof prop === 'undefined')
+        if (prop === undefined)
             return '';
         const propFilters = (_b = this.filterItems[prop]) !== null && _b !== void 0 ? _b : [];
         const visibleFilterCount = propFilters.filter(filter => !filter.hidden).length;
@@ -131,7 +131,7 @@ export class FilterPanel {
                     '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" }) : ''));
+        })), propFilters.some(f => !f.hidden) ? h("div", { class: "add-filter-divider" }) : ''));
     }
     componentDidRender() {
         this.syncDialog();
@@ -492,7 +492,7 @@ export class FilterPanel {
             top: `${(_d = (_c = this.changes) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0}px`,
         };
         const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
-        return (h(Host, { key: '8859c452eb08838f65f18efecbdde7f65fda2b49' }, h("dialog", { key: 'f603067ff0986a9f344cbbf816388d2bbac198bb', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+        return (h(Host, { key: 'd0e4ebb408750b11b3965da6a25e581733c968e3' }, h("dialog", { key: '3df36777c931ec1063e8574169ca880a99dbfe41', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
             } }, this.changes && [
@@ -501,16 +501,16 @@ export class FilterPanel {
             ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
                 h("label", { key: "filter-title" }, capts.title),
                 h("div", { key: "filter-holder", class: "filter-holder" }, this.getFilterItemsList()),
-                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: '2ec0a66918edf91bdde3962b6ec84c89f6f1c8f1', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: 'e2a8bd29f2090d3e6c933795427b71ca190b82aa', 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),
+                h("button", { key: "save", type: "button", id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
+                h("button", { key: "cancel", type: "button", 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("button", { key: "ok", type: "button", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
+                h("button", { key: "reset", type: "button", id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
             ]),
             h("slot", { key: "footer-slot", slot: "footer" }),
         ])));