@revolist/revogrid 4.8.18 → 4.9.0

package/hydrate/index.js

@@ -3046,7 +3046,7 @@ class FilterPanel {
             title: 'Filter by',
             save: 'Save',
             // drops the filter
-            reset: 'Cancel',
+            reset: 'Clear changes',
             cancel: 'Close',
             add: 'Add more condition...',
             placeholder: 'Enter value...',
@@ -3061,7 +3061,6 @@ class FilterPanel {
         this.currentFilterId = -1;
         this.currentFilterType = defaultType;
         this.changes = undefined;
-        this.uuid = undefined;
         this.filterItems = {};
         this.filterTypes = {};
         this.filterNames = {};
@@ -3072,7 +3071,18 @@ class FilterPanel {
     onMouseDown(e) {
         if (this.changes && !e.defaultPrevented) {
             const el = e.target;
-            if (this.isOutside(el) && !isFilterBtn(el)) {
+            const select = document.getElementById('add-filter');
+            if (select) {
+                select.value = defaultType;
+            }
+            this.currentFilterType = defaultType;
+            if (this.changes) {
+                this.changes.type = defaultType;
+            }
+            this.currentFilterId = -1;
+            const path = e.composedPath();
+            const isOutside = !path.includes(this.element);
+            if (isOutside && !isFilterBtn(el)) {
                 this.changes = undefined;
             }
         }
@@ -3285,26 +3295,12 @@ class FilterPanel {
             throw new Error('Changes required per edit');
         }
     }
-    isOutside(e) {
-        const select = document.getElementById('add-filter');
-        if (select)
-            select.value = defaultType;
-        this.currentFilterType = defaultType;
-        if (this.changes) {
-            this.changes.type = defaultType;
-        }
-        this.currentFilterId = -1;
-        if (e === null || e === void 0 ? void 0 : e.classList.contains(`[uuid="${this.uuid}"]`)) {
-            return false;
-        }
-        return !(e === null || e === void 0 ? void 0 : e.closest(`[uuid="${this.uuid}"]`));
-    }
+    get element() { return getElement(this); }
     static get style() { return RevogrFilterPanelStyle0; }
     static get cmpMeta() { return {
         "$flags$": 0,
         "$tagName$": "revogr-filter-panel",
         "$members$": {
-            "uuid": [1537],
             "filterItems": [16],
             "filterTypes": [16],
             "filterNames": [16],
@@ -3321,7 +3317,7 @@ class FilterPanel {
         },
         "$listeners$": [[5, "mousedown", "onMouseDown"]],
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["uuid", "uuid"]]
+        "$attrsToReflect$": []
     }; }
 }
 
@@ -7495,12 +7491,13 @@ const trimmedPlugin = (store) => {
     const setTrimmed = (sizes, trimmed) => {
         const newSize = Object.assign({}, sizes);
         trimmedSize = {};
-        each(trimmed, (v, index) => {
-            if (v && newSize[index]) {
-                trimmedSize[index] = newSize[index];
-                delete newSize[index];
+        for (const [index, v] of Object.entries(trimmed)) {
+            const i = index;
+            if (v && newSize[i]) {
+                trimmedSize[i] = newSize[i];
+                delete newSize[i];
             }
-        });
+        }
         store.setDimensionSize(newSize);
     };
     return {
@@ -8425,7 +8422,6 @@ const MIN_COL_SIZE = 30;
 const RESIZE_INTERVAL = 40;
 const DATA_COL = 'data-rgCol';
 const DATA_ROW = 'data-rgRow';
-const UUID = 'grid-uuid';
 const DISABLED_CLASS = 'disabled';
 const CELL_CLASS = 'rgCell';
 const ROW_HEADER_TYPE = 'rowHeaders';
@@ -9385,37 +9381,6 @@ var osPlatform;
     osPlatform["mac"] = "Mac";
 })(osPlatform || (osPlatform = {}));
 
-var baseGetTag = _baseGetTag,
-    isArray$2 = isArray_1,
-    isObjectLike = isObjectLike_1;
-
-/** `Object#toString` result references. */
-var stringTag = '[object String]';
-
-/**
- * Checks if `value` is classified as a `String` primitive or object.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a string, else `false`.
- * @example
- *
- * _.isString('abc');
- * // => true
- *
- * _.isString(1);
- * // => false
- */
-function isString$1(value) {
-  return typeof value == 'string' ||
-    (!isArray$2(value) && isObjectLike(value) && baseGetTag(value) == stringTag);
-}
-
-var isString_1 = isString$1;
-
 function isLetterKey(code) {
     return (code === 32 || // space
         (code >= 48 && code <= 57) ||
@@ -10682,7 +10647,7 @@ var _baseMap = baseMap$1;
 var arrayMap = _arrayMap,
     baseIteratee$1 = _baseIteratee,
     baseMap = _baseMap,
-    isArray$1 = isArray_1;
+    isArray$2 = isArray_1;
 
 /**
  * Creates an array of values by running each element in `collection` thru
@@ -10727,7 +10692,7 @@ var arrayMap = _arrayMap,
  * // => ['barney', 'fred']
  */
 function map(collection, iteratee) {
-  var func = isArray$1(collection) ? arrayMap : baseMap;
+  var func = isArray$2(collection) ? arrayMap : baseMap;
   return func(collection, baseIteratee$1(iteratee));
 }
 
@@ -11697,7 +11662,7 @@ const filterTypes = {
 const FILTER_TRIMMED_TYPE = 'filter';
 const FILTER_CONFIG_CHANGED_EVENT = 'filterconfigchanged';
 class FilterPlugin extends BasePlugin {
-    constructor(revogrid, providers, uiid, config) {
+    constructor(revogrid, providers, config) {
         var _a;
         super(revogrid, providers);
         this.revogrid = revogrid;
@@ -11746,7 +11711,7 @@ class FilterPlugin extends BasePlugin {
         const existingNodes = this.revogrid.registerVNode.filter((n) => n.$tag$ !== 'revogr-filter-panel');
         this.revogrid.registerVNode = [
             ...existingNodes,
-            hAsync("revogr-filter-panel", { uuid: `filter-${uiid}`, filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
+            hAsync("revogr-filter-panel", { filterItems: this.multiFilterItems, filterNames: this.possibleFilterNames, filterEntities: this.possibleFilterEntities, filterCaptions: (_a = config === null || config === void 0 ? void 0 : config.localization) === null || _a === void 0 ? void 0 : _a.captions, onFilterChange: e => this.onFilterChange(e.detail), disableDynamicFiltering: config === null || config === void 0 ? void 0 : config.disableDynamicFiltering, ref: e => (this.pop = e) }),
         ];
     }
     initConfig(config) {
@@ -11985,6 +11950,37 @@ class FilterPlugin extends BasePlugin {
     }
 }
 
+var baseGetTag = _baseGetTag,
+    isArray$1 = isArray_1,
+    isObjectLike = isObjectLike_1;
+
+/** `Object#toString` result references. */
+var stringTag = '[object String]';
+
+/**
+ * Checks if `value` is classified as a `String` primitive or object.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a string, else `false`.
+ * @example
+ *
+ * _.isString('abc');
+ * // => true
+ *
+ * _.isString(1);
+ * // => false
+ */
+function isString$1(value) {
+  return typeof value == 'string' ||
+    (!isArray$1(value) && isObjectLike(value) && baseGetTag(value) == stringTag);
+}
+
+var isString_1 = isString$1;
+
 var baseProperty = _baseProperty;
 
 /**
@@ -13584,29 +13580,31 @@ function isStretchPlugin(plugin) {
 }
 
 const rowDefinitionByType = (newVal = []) => {
-    return reduce_1(newVal, (r, v) => {
-        if (!r[v.type]) {
-            r[v.type] = {};
+    const result = {};
+    for (const v of newVal) {
+        if (!result[v.type]) {
+            result[v.type] = {};
         }
         if (v.size) {
-            if (!r[v.type].sizes) {
-                r[v.type].sizes = {};
+            if (!result[v.type].sizes) {
+                result[v.type].sizes = {};
             }
-            r[v.type].sizes[v.index] = v.size;
+            result[v.type].sizes[v.index] = v.size;
         }
-        return r;
-    }, {});
+    }
+    return result;
 };
 const rowDefinitionRemoveByType = (oldVal = []) => {
-    return reduce_1(oldVal, (r, v) => {
-        if (!r[v.type]) {
-            r[v.type] = [];
+    const result = {};
+    for (const v of oldVal) {
+        if (!result[v.type]) {
+            result[v.type] = [];
         }
         if (v.size) {
-            r[v.type].push(v.index);
+            result[v.type].push(v.index);
         }
-        return r;
-    }, {});
+    }
+    return result;
 };
 
 const COLUMN_DRAG_CLASS = 'column-drag-start';
@@ -14209,8 +14207,6 @@ class RevoGridComponent {
         // #region Listeners outside scope
         this.clickTrackForFocusClear = null;
         this.extraElements = [];
-        // UUID required to support multiple grids in one page and avoid collision
-        this.uuid = null;
         this.viewport = null;
         this.isInited = false;
         /**
@@ -14457,19 +14453,19 @@ class RevoGridComponent {
         if (event.defaultPrevented) {
             return;
         }
-        const target = event.target;
         const pos = screenX + screenY;
         // detect if mousemove then do nothing
         if (Math.abs(this.clickTrackForFocusClear - pos) > 10) {
             return;
         }
-        // check if action finished inside of the document
-        // clear data which is outside of grid
+        // Check if action finished inside of the document
         // if event prevented or it is current table don't clear focus
-        if (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`)) {
-            return;
+        const path = event.composedPath();
+        if (!path.includes(this.element) &&
+            !path.includes(this.element.shadowRoot)) {
+            // Perform actions if the click is outside the component
+            this.clearFocus();
         }
-        this.clearFocus();
     }
     // #endregion
     // #region Listeners
@@ -14753,7 +14749,7 @@ class RevoGridComponent {
         }
         // register filter plugin
         if (this.filter) {
-            this.internalPlugins.push(new FilterPlugin(this.element, pluginData, this.uuid, typeof this.filter === 'object' ? this.filter : undefined));
+            this.internalPlugins.push(new FilterPlugin(this.element, pluginData, typeof this.filter === 'object' ? this.filter : undefined));
         }
         // register export plugin
         if (this.exporting) {
@@ -14800,8 +14796,6 @@ class RevoGridComponent {
         this.selectionStoreConnector = new SelectionStoreConnector();
         this.dataProvider = new DataProvider(this.dimensionProvider);
         // #endregion
-        // generate uuid for this grid
-        this.uuid = `rv--${Math.random().toString(36).slice(2, 6)}-${Date.now()}`;
         this.registerOutsideVNodes(this.registerVNode);
         // init plugins
         this.setPlugins();
@@ -14872,7 +14866,7 @@ class RevoGridComponent {
             const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
             // Column headers
             const dataViews = [
-                hAsync("revogr-header", Object.assign({ key: '83382de99ec784ec1b049ccd6fe4bdcc332cabed' }, headerProperties, { slot: HEADER_SLOT })),
+                hAsync("revogr-header", Object.assign({ key: 'ff8eefd6db3baf494c015a2ea573160d27739aa9' }, headerProperties, { slot: HEADER_SLOT })),
             ];
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
@@ -14894,11 +14888,11 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
-        return (hAsync(Host, { key: 'd0d2bbed64b64c9b6ca791a53f3a3c8ef3c4005e', [`${UUID}`]: this.uuid }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: 'bb8dd42f87d5bd0b7077de213512d05ceb8b6fca', class: "main-viewport", onClick: (e) => {
+        return (hAsync(Host, { key: '21bbe81595f20f7bcb271f28c9c86feef472efec' }, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("div", { key: '7a3092cd02305a0dfaa3b3d3160164001f0ed08b', class: "main-viewport", onClick: (e) => {
                 if (e.currentTarget === e.target) {
                     this.viewport.clearEdit();
                 }
-            } }, hAsync("div", { key: 'd8e40dd546ba1448b0e337c4f52a5bfc2ad0cacd', class: "viewports" }, hAsync("slot", { key: '2081bc7165ac469f4ff43be97519a3a1b960e105', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: '4ba3abc9197c7f5062166b5fff21eef258ee49df', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: '3c52006a7d1c846baeac3892d6804b56f47aebbd', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'e0ff22ae142089d9d4a66e074a03e41463fe4f01', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
+            } }, hAsync("div", { key: 'ae1dfccbb72cc2a9f7fa370889746c702d106045', class: "viewports" }, hAsync("slot", { key: '0725b46d877fbb63fb513845cc1c7b86d0f856b8', name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { key: 'd41771f6ff459f1f6747ce496c8165b1dab44963', class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { key: '2914421478450c9b198e0aade898ed342e4d7f6a', ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { key: 'bc1812c5ce54cda01e81cc06e28c69dc8e36fdf3', class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), this.extraElements));
     }
     disconnectedCallback() {
         // Remove all plugins, to avoid memory leaks and unexpected behaviour when the component is removed
@@ -16456,7 +16450,7 @@ class RevogrViewportScroll {
         // track horizontal viewport resize
         this.resizeService = new GridResizeService(this.horizontalScroll, {
             resize: entries => {
-                var _a, _b;
+                var _a, _b, _c;
                 let height = ((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.contentRect.height) || 0;
                 if (height) {
                     height -= this.header.clientHeight + this.footer.clientHeight;
@@ -16475,16 +16469,16 @@ class RevogrViewportScroll {
                         noScroll: this.colType !== 'rgCol' ? true : false,
                     },
                 };
-                each(els, (item, dimension) => {
-                    var _a;
+                for (const [dim, item] of Object.entries(els)) {
+                    const dimension = dim;
                     this.resizeViewport.emit({ dimension, size: item.size, rowHeader: this.rowHeader });
                     if (item.noScroll) {
-                        return;
+                        continue;
                     }
-                    (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(item.scroll, dimension, true);
+                    (_c = this.localScrollService) === null || _c === void 0 ? void 0 : _c.scroll(item.scroll, dimension, true);
                     // track scroll visibility on outer element change
                     this.setScrollVisibility(dimension, item.size, item.contentSize);
-                });
+                }
             },
         });
     }
@@ -16546,7 +16540,7 @@ class RevogrViewportScroll {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (hAsync(Host, { key: 'f7bd78e3f05aae8d8d8a6a93502f99ace0f35823', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '2d7aa9dbbcf2003aec46c6c127e172e45f2ffe1f', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'ba3d83de41d30c58ba6bc4c167e45ccbb36bb9a7', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '857a54cba6e79dac4d1ff93246c839e661f69977', name: HEADER_SLOT })), hAsync("div", { key: '47b20a22b88fdbdc82e12d4a4fb649410fd24d6d', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'ee01a566cc1f8a688d329cbb68f87ca2db480dcf', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: '9c23e4a846eda6a5edd21bc7e5fda04d118008a2', name: CONTENT_SLOT }))), hAsync("div", { key: '48fceef2ad3b425b1c37ff51f7774094ef7a40b4', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'eb71ecef7b1ca911e25360082d0f7706f67e3c9f', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: '485d211d22fd720192de2206afef46545339902e', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'e3d17c747ec3f525c2947a6fa2e4652ed0f498d9', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'f8fb5652593c76f676d57762911af866f46ce31d', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '6d96653adf4d23208a6091dab42000235d696b48', name: HEADER_SLOT })), hAsync("div", { key: 'afcfcdaeacfe01fa3d8fabc30db36f5aecb24ad3', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'f6ba7b1d8621fcb2ea8565cdea6a75e6abca9d35', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: 'e5377e124212312859b05431053bcd81543d8193', name: CONTENT_SLOT }))), hAsync("div", { key: '3e990a197388391d393c607c18441b363d60ab53', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'ae7eb7bde5e8798247b4d2a67ae622ba496c44f9', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing