@revolist/revogrid 3.6.14 → 3.7.0

package/custom-element/filter.button.js

@@ -23,8 +23,8 @@ const TrashButton = () => {
     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 = ({ isAnd }) => {
-  return h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, isAnd ? 'and' : 'or');
+const AndOrButton = ({ text }) => {
+  return h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
 };
 function isFilterBtn(e) {
   if (e.classList.contains(FILTER_BUTTON_CLASS)) {

package/custom-element/revo-grid.js

@@ -1123,7 +1123,12 @@ class FilterPlugin extends BasePlugin {
     const buttonPos = el.getBoundingClientRect();
     const prop = e.detail.prop;
     this.pop.filterTypes = this.getColumnFilter(e.detail.filter);
-    this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+    this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: -9999, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+    // fix filter dialog is out of view
+    setTimeout(async () => {
+      const { width } = this.pop.getBoundingClientRect();
+      this.pop.style.left = Math.min(buttonPos.x - gridPos.x, gridPos.width - width - 20) + 'px';
+    });
   }
   getColumnFilter(type) {
     let filterType = 'string';

package/custom-element/revogr-clipboard.js

@@ -13,8 +13,9 @@ const Clipboard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   onPaste(e) {
     const clipboardData = this.getData(e);
     const isHTML = clipboardData.types.indexOf('text/html') > -1;
-    const data = isHTML ? clipboardData.getData('text/html') : clipboardData.getData('text');
-    const parsedData = isHTML ? this.htmlParse(data) : this.textParse(data);
+    const canBeParsedAsHtml = isHTML ? this.canBeParsedAsHTML(clipboardData.getData('text/html')) : false;
+    const data = canBeParsedAsHtml ? clipboardData.getData('text/html') : clipboardData.getData('text');
+    const parsedData = canBeParsedAsHtml ? this.htmlParse(data) : this.textParse(data);
     this.pasteRegion.emit(parsedData);
     e.preventDefault();
   }
@@ -44,6 +45,9 @@ const Clipboard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     return result;
   }
+  canBeParsedAsHTML(data) {
+    return document.createRange().createContextualFragment(data).querySelector('table') !== null;
+  }
   getData(e) {
     var _a;
     return e.clipboardData || ((_a = window) === null || _a === void 0 ? void 0 : _a.clipboardData);

package/custom-element/revogr-edit2.js

@@ -103,6 +103,11 @@ var codesLetter;
   codesLetter["ARROW_DOWN"] = "ArrowDown";
   codesLetter["SHIFT"] = "Shift";
 })(codesLetter || (codesLetter = {}));
+var keyValues;
+(function (keyValues) {
+  keyValues["ENTER"] = "Enter";
+  keyValues["TAB"] = "Tab";
+})(keyValues || (keyValues = {}));
 const KeyCodesEnum = codes;
 
 var osPlatform;
@@ -282,11 +287,11 @@ function isCtrlKey(code, platform) {
 function isClear(code) {
   return codesLetter.BACKSPACE === code || codesLetter.DELETE === code;
 }
-function isTab(code) {
-  return codesLetter.TAB === code;
+function isTabKeyValue(key) {
+  return keyValues.TAB === key;
 }
-function isEnterKey(code) {
-  return code === codesLetter.ENTER || code === codesLetter.ENTER_NUM;
+function isEnterKeyValue(key) {
+  return keyValues.ENTER === key;
 }
 
 class TextEditor {
@@ -304,8 +309,8 @@ class TextEditor {
     }
   }
   onKeyDown(e) {
-    const isEnter = isEnterKey(e.code);
-    const isKeyTab = isTab(e.code);
+    const isEnter = isEnterKeyValue(e.key);
+    const isKeyTab = isTabKeyValue(e.key);
     if ((isKeyTab || isEnter) && e.target && this.saveCallback && !e.isComposing) {
       // blur is needed to avoid autoscroll
       this.editInput.blur();
@@ -316,7 +321,7 @@ class TextEditor {
   // required
   render() {
     var _a;
-    return (h("input", { type: "text", value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '', ref: el => {
+    return (h("input", { type: "text", enterkeyhint: "enter", value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '', ref: el => {
         this.editInput = el;
       }, onKeyDown: e => this.onKeyDown(e) }));
   }
@@ -403,4 +408,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { Edit as E, isCtrlKey as a, isClear as b, codesLetter as c, defineCustomElement as d, isEnterKey as e, isLetterKey as f, isString_1 as i };
+export { Edit as E, isCtrlKey as a, isClear as b, codesLetter as c, defineCustomElement as d, isEnterKeyValue as e, isLetterKey as f, isString_1 as i };

package/custom-element/revogr-filter-panel.js

@@ -43,6 +43,10 @@ const FilterPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       save: 'Save',
       reset: 'Reset',
       cancel: 'Close',
+      add: 'Add more condition...',
+      placeholder: 'Enter value...',
+      and: 'and',
+      or: 'or',
     };
     this.isFilterIdSet = false;
     this.filterId = 0;
@@ -89,7 +93,8 @@ const FilterPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const options = [];
     const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
     if (!isDefaultTypeRemoved) {
-      options.push(h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? 'Add more condition...' : this.filterNames[defaultType]));
+      const capts = 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]));
     }
     for (let gIndex in this.filterTypes) {
       options.push(...this.filterTypes[gIndex].map(k => (h("option", { value: k, selected: type === k }, this.filterNames[k]))));
@@ -103,7 +108,8 @@ const FilterPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return '';
     if (this.filterEntities[currentFilter[index].type].extra !== 'input')
       return '';
-    return (h("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: "Enter value...", type: "text", value: currentFilter[index].value, onInput: this.onUserInput.bind(this, index, prop), onKeyDown: e => this.onKeyDown(e) }));
+    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+    return (h("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: capts.placeholder, type: "text", value: currentFilter[index].value, onInput: this.onUserInput.bind(this, index, prop), onKeyDown: e => this.onKeyDown(e) }));
   }
   getFilterItemsList() {
     var _a;
@@ -111,11 +117,12 @@ const FilterPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!(prop || prop === 0))
       return '';
     const propFilters = this.filterItems[prop] || [];
+    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
     return (h("div", { key: this.filterId }, propFilters.map((d, index) => {
       let andOrButton;
       // 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(d.id) }, h(AndOrButton, { isAnd: d.relation === 'and' })));
+        andOrButton = (h("div", { onClick: () => this.toggleFilterAndOr(d.id) }, h(AndOrButton, { text: d.relation === 'and' ? capts.and : capts.or })));
       }
       return (h("div", { key: d.id, class: FILTER_LIST_CLASS }, h("div", { class: { 'select-input': true } }, h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton), h("div", { onClick: () => this.onRemoveFilter(d.id) }, h(TrashButton, null))), h("div", null, this.renderExtra(prop, index))));
     }), propFilters.length > 0 ? h("div", { class: "add-filter-divider" }) : ''));

package/custom-element/revogr-header2.js

@@ -155,7 +155,8 @@ var keyBy = _createAggregator(function(result, value, key) {
 var keyBy_1 = keyBy;
 
 const SortingSign = ({ column }) => {
-  return h("i", { class: column.order });
+  var _a;
+  return h("i", { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' });
 };
 
 var ResizeEvents;
@@ -434,7 +435,7 @@ const HeaderCellRenderer = ({ data, props }, children) => {
 };
 
 const HeaderRenderer = (p) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e;
   const cellClass = {
     [HEADER_CLASS]: true,
     [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
@@ -469,8 +470,8 @@ const HeaderRenderer = (p) => {
     }
   }
   return (h(HeaderCellRenderer, { data: p.data, props: dataProps },
-    ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) ? h(SortingSign, { column: p.data }) : '',
-    p.canFilter && ((_f = p.data) === null || _f === void 0 ? void 0 : _f.filter) !== false ? h(FilterButton, { column: p.data }) : ''));
+    h(SortingSign, { column: p.data }),
+    p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? h(FilterButton, { column: p.data }) : ''));
 };
 
 const GroupHeaderRenderer = (p) => {

package/custom-element/revogr-overlay-selection2.js

@@ -3,7 +3,7 @@
  */
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { n as getRange, C as ColumnService, o as isRangeSingleCell } from './columnService.js';
-import { a as isCtrlKey, c as codesLetter, b as isClear, e as isEnterKey, f as isLetterKey, d as defineCustomElement$2 } from './revogr-edit2.js';
+import { a as isCtrlKey, c as codesLetter, b as isClear, e as isEnterKeyValue, f as isLetterKey, d as defineCustomElement$2 } from './revogr-edit2.js';
 import { E as EDIT_INPUT_WR, C as CELL_HANDLER_CLASS, S as SELECTION_BORDER_CLASS } from './consts.js';
 import { a as getCoordinate, i as isAfterLast, b as isBeforeFirst, c as getCell, d as getCurrentCell, g as getElStyle } from './selection.utils.js';
 import { t as timeout } from './utils.js';
@@ -89,7 +89,7 @@ class KeyboardService {
       return;
     }
     // pressed enter
-    if (isEnterKey(e.code)) {
+    if (isEnterKeyValue(e.key)) {
       this.sv.doEdit();
       return;
     }

package/custom-element/revogr-row-headers2.js

@@ -401,10 +401,13 @@ const RevogrRowHeaders = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     /** render viewports rows */
     let totalLength = 1;
     for (let data of this.dataPorts) {
-      const itemCount = data.dataStore.get('items').length;
+      const items = data.dataStore.get('items');
+      const itemCount = items.length;
+      const source = data.dataStore.get('source');
+      const visibleSourceItems = items.map(v => source[v]); // from src/store/dataSource/data.store.ts
       // initiate row data
       const dataStore = new DataStore(data.type);
-      dataStore.updateData(data.dataStore.get('source'));
+      dataStore.updateData(visibleSourceItems);
       // initiate column data
       const colData = new DataStore('colPinStart');
       const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);

package/dist/cjs/{debounce-6cea2774.js → debounce-f5e62c5a.js}

@@ -340,8 +340,8 @@ const TrashButton = () => {
     index.h("svg", { class: "trash-img", viewBox: "0 0 24 24" },
       index.h("path", { fill: "currentColor", d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }))));
 };
-const AndOrButton = ({ isAnd }) => {
-  return index.h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, isAnd ? 'and' : 'or');
+const AndOrButton = ({ text }) => {
+  return index.h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
 };
 function isFilterBtn(e) {
   if (e.classList.contains(FILTER_BUTTON_CLASS)) {

package/dist/cjs/revo-grid_11.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cb904e00.js');
-const debounce$1 = require('./debounce-6cea2774.js');
+const debounce$1 = require('./debounce-f5e62c5a.js');
 
 class ThemeCompact {
   constructor() {
@@ -5346,7 +5346,12 @@ class FilterPlugin extends BasePlugin {
     const buttonPos = el.getBoundingClientRect();
     const prop = e.detail.prop;
     this.pop.filterTypes = this.getColumnFilter(e.detail.filter);
-    this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+    this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: -9999, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+    // fix filter dialog is out of view
+    setTimeout(async () => {
+      const { width } = this.pop.getBoundingClientRect();
+      this.pop.style.left = Math.min(buttonPos.x - gridPos.x, gridPos.width - width - 20) + 'px';
+    });
   }
   getColumnFilter(type) {
     let filterType = 'string';
@@ -25962,6 +25967,11 @@ var codesLetter;
   codesLetter["ARROW_DOWN"] = "ArrowDown";
   codesLetter["SHIFT"] = "Shift";
 })(codesLetter || (codesLetter = {}));
+var keyValues;
+(function (keyValues) {
+  keyValues["ENTER"] = "Enter";
+  keyValues["TAB"] = "Tab";
+})(keyValues || (keyValues = {}));
 const KeyCodesEnum = codes;
 
 var osPlatform;
@@ -26141,11 +26151,11 @@ function isCtrlKey(code, platform) {
 function isClear(code) {
   return codesLetter.BACKSPACE === code || codesLetter.DELETE === code;
 }
-function isTab(code) {
-  return codesLetter.TAB === code;
+function isTabKeyValue(key) {
+  return keyValues.TAB === key;
 }
-function isEnterKey(code) {
-  return code === codesLetter.ENTER || code === codesLetter.ENTER_NUM;
+function isEnterKeyValue(key) {
+  return keyValues.ENTER === key;
 }
 
 class TextEditor {
@@ -26163,8 +26173,8 @@ class TextEditor {
     }
   }
   onKeyDown(e) {
-    const isEnter = isEnterKey(e.code);
-    const isKeyTab = isTab(e.code);
+    const isEnter = isEnterKeyValue(e.key);
+    const isKeyTab = isTabKeyValue(e.key);
     if ((isKeyTab || isEnter) && e.target && this.saveCallback && !e.isComposing) {
       // blur is needed to avoid autoscroll
       this.editInput.blur();
@@ -26175,7 +26185,7 @@ class TextEditor {
   // required
   render() {
     var _a;
-    return (index.h("input", { type: "text", value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '', ref: el => {
+    return (index.h("input", { type: "text", enterkeyhint: "enter", value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '', ref: el => {
         this.editInput = el;
       }, onKeyDown: e => this.onKeyDown(e) }));
   }
@@ -26484,7 +26494,8 @@ var keyBy = _createAggregator(function(result, value, key) {
 var keyBy_1 = keyBy;
 
 const SortingSign = ({ column }) => {
-  return index.h("i", { class: column.order });
+  var _a;
+  return index.h("i", { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' });
 };
 
 var ResizeEvents;
@@ -26763,7 +26774,7 @@ const HeaderCellRenderer = ({ data, props }, children) => {
 };
 
 const HeaderRenderer = (p) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e;
   const cellClass = {
     [HEADER_CLASS]: true,
     [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
@@ -26798,8 +26809,8 @@ const HeaderRenderer = (p) => {
     }
   }
   return (index.h(HeaderCellRenderer, { data: p.data, props: dataProps },
-    ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) ? index.h(SortingSign, { column: p.data }) : '',
-    p.canFilter && ((_f = p.data) === null || _f === void 0 ? void 0 : _f.filter) !== false ? index.h(debounce$1.FilterButton, { column: p.data }) : ''));
+    index.h(SortingSign, { column: p.data }),
+    p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? index.h(debounce$1.FilterButton, { column: p.data }) : ''));
 };
 
 const GroupHeaderRenderer = (p) => {
@@ -27126,7 +27137,7 @@ class KeyboardService {
       return;
     }
     // pressed enter
-    if (isEnterKey(e.code)) {
+    if (isEnterKeyValue(e.key)) {
       this.sv.doEdit();
       return;
     }
@@ -27751,10 +27762,13 @@ const RevogrRowHeaders = class {
     /** render viewports rows */
     let totalLength = 1;
     for (let data of this.dataPorts) {
-      const itemCount = data.dataStore.get('items').length;
+      const items = data.dataStore.get('items');
+      const itemCount = items.length;
+      const source = data.dataStore.get('source');
+      const visibleSourceItems = items.map(v => source[v]); // from src/store/dataSource/data.store.ts
       // initiate row data
       const dataStore = new DataStore(data.type);
-      dataStore.updateData(data.dataStore.get('source'));
+      dataStore.updateData(visibleSourceItems);
       // initiate column data
       const colData = new DataStore('colPinStart');
       const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);

package/dist/cjs/revogr-clipboard.cjs.entry.js

@@ -16,8 +16,9 @@ const Clipboard = class {
   onPaste(e) {
     const clipboardData = this.getData(e);
     const isHTML = clipboardData.types.indexOf('text/html') > -1;
-    const data = isHTML ? clipboardData.getData('text/html') : clipboardData.getData('text');
-    const parsedData = isHTML ? this.htmlParse(data) : this.textParse(data);
+    const canBeParsedAsHtml = isHTML ? this.canBeParsedAsHTML(clipboardData.getData('text/html')) : false;
+    const data = canBeParsedAsHtml ? clipboardData.getData('text/html') : clipboardData.getData('text');
+    const parsedData = canBeParsedAsHtml ? this.htmlParse(data) : this.textParse(data);
     this.pasteRegion.emit(parsedData);
     e.preventDefault();
   }
@@ -47,6 +48,9 @@ const Clipboard = class {
     }
     return result;
   }
+  canBeParsedAsHTML(data) {
+    return document.createRange().createContextualFragment(data).querySelector('table') !== null;
+  }
   getData(e) {
     var _a;
     return e.clipboardData || ((_a = window) === null || _a === void 0 ? void 0 : _a.clipboardData);

package/dist/cjs/revogr-filter-panel.cjs.entry.js

@@ -6,7 +6,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-cb904e00.js');
-const debounce = require('./debounce-6cea2774.js');
+const debounce = require('./debounce-f5e62c5a.js');
 
 const RevoButton = (props, children) => {
   return (index.h("button", Object.assign({}, props, { class: Object.assign(Object.assign({}, (typeof props.class === 'object' ? props.class : props.class ? { [props.class]: true } : '')), { ['revo-button']: true }) }), children));
@@ -45,6 +45,10 @@ const FilterPanel = class {
       save: 'Save',
       reset: 'Reset',
       cancel: 'Close',
+      add: 'Add more condition...',
+      placeholder: 'Enter value...',
+      and: 'and',
+      or: 'or',
     };
     this.isFilterIdSet = false;
     this.filterId = 0;
@@ -91,7 +95,8 @@ const FilterPanel = class {
     const options = [];
     const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
     if (!isDefaultTypeRemoved) {
-      options.push(index.h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? 'Add more condition...' : this.filterNames[defaultType]));
+      const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+      options.push(index.h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? capts.add : this.filterNames[defaultType]));
     }
     for (let gIndex in this.filterTypes) {
       options.push(...this.filterTypes[gIndex].map(k => (index.h("option", { value: k, selected: type === k }, this.filterNames[k]))));
@@ -105,7 +110,8 @@ const FilterPanel = class {
       return '';
     if (this.filterEntities[currentFilter[index$1].type].extra !== 'input')
       return '';
-    return (index.h("input", { id: `filter-input-${currentFilter[index$1].id}`, placeholder: "Enter value...", type: "text", value: currentFilter[index$1].value, onInput: this.onUserInput.bind(this, index$1, prop), onKeyDown: e => this.onKeyDown(e) }));
+    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+    return (index.h("input", { id: `filter-input-${currentFilter[index$1].id}`, placeholder: capts.placeholder, type: "text", value: currentFilter[index$1].value, onInput: this.onUserInput.bind(this, index$1, prop), onKeyDown: e => this.onKeyDown(e) }));
   }
   getFilterItemsList() {
     var _a;
@@ -113,11 +119,12 @@ const FilterPanel = class {
     if (!(prop || prop === 0))
       return '';
     const propFilters = this.filterItems[prop] || [];
+    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
     return (index.h("div", { key: this.filterId }, propFilters.map((d, index$1) => {
       let andOrButton;
       // hide toggle button if there is only one filter and the last one
       if (index$1 !== this.filterItems[prop].length - 1) {
-        andOrButton = (index.h("div", { onClick: () => this.toggleFilterAndOr(d.id) }, index.h(debounce.AndOrButton, { isAnd: d.relation === 'and' })));
+        andOrButton = (index.h("div", { onClick: () => this.toggleFilterAndOr(d.id) }, index.h(debounce.AndOrButton, { text: d.relation === 'and' ? capts.and : capts.or })));
       }
       return (index.h("div", { key: d.id, class: FILTER_LIST_CLASS }, index.h("div", { class: { 'select-input': true } }, index.h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index$1) }, this.renderSelectOptions(this.filterItems[prop][index$1].type, true)), index.h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton), index.h("div", { onClick: () => this.onRemoveFilter(d.id) }, index.h(debounce.TrashButton, null))), index.h("div", null, this.renderExtra(prop, index$1))));
     }), propFilters.length > 0 ? index.h("div", { class: "add-filter-divider" }) : ''));

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

@@ -6,8 +6,9 @@ export class Clipboard {
   onPaste(e) {
     const clipboardData = this.getData(e);
     const isHTML = clipboardData.types.indexOf('text/html') > -1;
-    const data = isHTML ? clipboardData.getData('text/html') : clipboardData.getData('text');
-    const parsedData = isHTML ? this.htmlParse(data) : this.textParse(data);
+    const canBeParsedAsHtml = isHTML ? this.canBeParsedAsHTML(clipboardData.getData('text/html')) : false;
+    const data = canBeParsedAsHtml ? clipboardData.getData('text/html') : clipboardData.getData('text');
+    const parsedData = canBeParsedAsHtml ? this.htmlParse(data) : this.textParse(data);
     this.pasteRegion.emit(parsedData);
     e.preventDefault();
   }
@@ -37,6 +38,9 @@ export class Clipboard {
     }
     return result;
   }
+  canBeParsedAsHTML(data) {
+    return document.createRange().createContextualFragment(data).querySelector('table') !== null;
+  }
   getData(e) {
     var _a;
     return e.clipboardData || ((_a = window) === null || _a === void 0 ? void 0 : _a.clipboardData);

package/dist/collection/components/header/headerRenderer.js

@@ -7,7 +7,7 @@ import { SortingSign } from '../../plugins/sorting/sorting.sign';
 import { DATA_COL, FOCUS_CLASS, HEADER_CLASS, HEADER_SORTABLE_CLASS, MIN_COL_SIZE } from '../../utils/consts';
 import { HeaderCellRenderer } from './headerCellRenderer';
 const HeaderRenderer = (p) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e;
   const cellClass = {
     [HEADER_CLASS]: true,
     [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
@@ -42,7 +42,7 @@ const HeaderRenderer = (p) => {
     }
   }
   return (h(HeaderCellRenderer, { data: p.data, props: dataProps },
-    ((_e = p.data) === null || _e === void 0 ? void 0 : _e.order) ? h(SortingSign, { column: p.data }) : '',
-    p.canFilter && ((_f = p.data) === null || _f === void 0 ? void 0 : _f.filter) !== false ? h(FilterButton, { column: p.data }) : ''));
+    h(SortingSign, { column: p.data }),
+    p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? h(FilterButton, { column: p.data }) : ''));
 };
 export default HeaderRenderer;

package/dist/collection/components/overlay/editors/text.js

@@ -2,7 +2,7 @@
  * Built by Revolist
  */
 import { h } from '@stencil/core';
-import { isEnterKey, isTab } from '../../../utils/keyCodes.utils';
+import { isEnterKeyValue, isTabKeyValue } from '../../../utils/keyCodes.utils';
 import { timeout } from '../../../utils/utils';
 export class TextEditor {
   constructor(column, saveCallback) {
@@ -19,8 +19,8 @@ export class TextEditor {
     }
   }
   onKeyDown(e) {
-    const isEnter = isEnterKey(e.code);
-    const isKeyTab = isTab(e.code);
+    const isEnter = isEnterKeyValue(e.key);
+    const isKeyTab = isTabKeyValue(e.key);
     if ((isKeyTab || isEnter) && e.target && this.saveCallback && !e.isComposing) {
       // blur is needed to avoid autoscroll
       this.editInput.blur();
@@ -31,7 +31,7 @@ export class TextEditor {
   // required
   render() {
     var _a;
-    return (h("input", { type: "text", value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '', ref: el => {
+    return (h("input", { type: "text", enterkeyhint: "enter", value: ((_a = this.editCell) === null || _a === void 0 ? void 0 : _a.val) || '', ref: el => {
         this.editInput = el;
       }, onKeyDown: e => this.onKeyDown(e) }));
   }

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

@@ -3,7 +3,7 @@
  */
 import { getRange } from '../../store/selection/selection.helpers';
 import { codesLetter } from '../../utils/keyCodes';
-import { isClear, isCtrlKey, isEnterKey, isLetterKey } from '../../utils/keyCodes.utils';
+import { isClear, isCtrlKey, isEnterKeyValue, isLetterKey } from '../../utils/keyCodes.utils';
 import { timeout } from '../../utils/utils';
 import { getCoordinate, isAfterLast, isBeforeFirst } from './selection.utils';
 export class KeyboardService {
@@ -43,7 +43,7 @@ export class KeyboardService {
       return;
     }
     // pressed enter
-    if (isEnterKey(e.code)) {
+    if (isEnterKeyValue(e.key)) {
       this.sv.doEdit();
       return;
     }

package/dist/collection/components/rowHeaders/revogr-row-headers.js

@@ -16,10 +16,13 @@ export class RevogrRowHeaders {
     /** render viewports rows */
     let totalLength = 1;
     for (let data of this.dataPorts) {
-      const itemCount = data.dataStore.get('items').length;
+      const items = data.dataStore.get('items');
+      const itemCount = items.length;
+      const source = data.dataStore.get('source');
+      const visibleSourceItems = items.map(v => source[v]); // from src/store/dataSource/data.store.ts
       // initiate row data
       const dataStore = new DataStore(data.type);
-      dataStore.updateData(data.dataStore.get('source'));
+      dataStore.updateData(visibleSourceItems);
       // initiate column data
       const colData = new DataStore('colPinStart');
       const column = Object.assign({ cellTemplate: RowHeaderRender(totalLength) }, this.rowHeaderColumn);

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

@@ -22,8 +22,8 @@ export const TrashButton = () => {
     h("svg", { class: "trash-img", viewBox: "0 0 24 24" },
       h("path", { fill: "currentColor", d: "M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" }))));
 };
-export const AndOrButton = ({ isAnd }) => {
-  return h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, isAnd ? 'and' : 'or');
+export const AndOrButton = ({ text }) => {
+  return h("button", { class: { [AND_OR_BUTTON]: true, 'light revo-button': true } }, text);
 };
 export function isFilterBtn(e) {
   if (e.classList.contains(FILTER_BUTTON_CLASS)) {

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

@@ -109,7 +109,12 @@ export default class FilterPlugin extends BasePlugin {
     const buttonPos = el.getBoundingClientRect();
     const prop = e.detail.prop;
     this.pop.filterTypes = this.getColumnFilter(e.detail.filter);
-    this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+    this.pop.show(Object.assign(Object.assign({}, this.filterCollection[prop]), { x: -9999, y: buttonPos.y - gridPos.y + buttonPos.height, prop }));
+    // fix filter dialog is out of view
+    setTimeout(async () => {
+      const { width } = this.pop.getBoundingClientRect();
+      this.pop.style.left = Math.min(buttonPos.x - gridPos.x, gridPos.width - width - 20) + 'px';
+    });
   }
   getColumnFilter(type) {
     let filterType = 'string';

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

@@ -16,6 +16,10 @@ export class FilterPanel {
       save: 'Save',
       reset: 'Reset',
       cancel: 'Close',
+      add: 'Add more condition...',
+      placeholder: 'Enter value...',
+      and: 'and',
+      or: 'or',
     };
     this.isFilterIdSet = false;
     this.filterId = 0;
@@ -62,7 +66,8 @@ export class FilterPanel {
     const options = [];
     const prop = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.prop;
     if (!isDefaultTypeRemoved) {
-      options.push(h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0 ? 'Add more condition...' : this.filterNames[defaultType]));
+      const capts = 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]));
     }
     for (let gIndex in this.filterTypes) {
       options.push(...this.filterTypes[gIndex].map(k => (h("option", { value: k, selected: type === k }, this.filterNames[k]))));
@@ -76,7 +81,8 @@ export class FilterPanel {
       return '';
     if (this.filterEntities[currentFilter[index].type].extra !== 'input')
       return '';
-    return (h("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: "Enter value...", type: "text", value: currentFilter[index].value, onInput: this.onUserInput.bind(this, index, prop), onKeyDown: e => this.onKeyDown(e) }));
+    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+    return (h("input", { id: `filter-input-${currentFilter[index].id}`, placeholder: capts.placeholder, type: "text", value: currentFilter[index].value, onInput: this.onUserInput.bind(this, index, prop), onKeyDown: e => this.onKeyDown(e) }));
   }
   getFilterItemsList() {
     var _a;
@@ -84,13 +90,14 @@ export class FilterPanel {
     if (!(prop || prop === 0))
       return '';
     const propFilters = this.filterItems[prop] || [];
+    const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
     return (h("div", { key: this.filterId },
       propFilters.map((d, index) => {
         let andOrButton;
         // 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(d.id) },
-            h(AndOrButton, { isAnd: d.relation === 'and' })));
+            h(AndOrButton, { text: d.relation === 'and' ? capts.and : capts.or })));
         }
         return (h("div", { key: d.id, class: FILTER_LIST_CLASS },
           h("div", { class: { 'select-input': true } },
@@ -374,7 +381,7 @@ export class FilterPanel {
       "mutable": false,
       "complexType": {
         "original": "FilterCaptions | undefined",
-        "resolved": "{ title: string; save: string; reset: string; cancel: string; }",
+        "resolved": "{ title: string; save: string; reset: string; cancel: string; add: string; placeholder: string; and: string; or: string; }",
         "references": {
           "FilterCaptions": {
             "location": "import",

package/dist/collection/plugins/sorting/sorting.sign.js

@@ -5,5 +5,6 @@ import { h } from '@stencil/core';
 export const FILTER_BUTTON_CLASS = 'rv-filter';
 export const FILTER_BUTTON_ACTIVE = 'active';
 export const SortingSign = ({ column }) => {
-  return h("i", { class: column.order });
+  var _a;
+  return h("i", { class: (_a = column === null || column === void 0 ? void 0 : column.order) !== null && _a !== void 0 ? _a : 'sort-off' });
 };