@revolist/revogrid 4.23.22 → 4.23.24

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

@@ -2465,11 +2465,14 @@ const RevoGridComponent = class {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), index.h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: viewport_helpers.DATA_SLOT }), index.h("slot", { name: `data-${view.type}-${data.type}` })), index.h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), index.h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, index.h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

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

@@ -298,6 +298,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -359,7 +360,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!edit_utils.isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -788,12 +791,7 @@ const OverlaySelection = class {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -922,9 +920,9 @@ const OverlaySelection = class {
                 nodes.push(index.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 (index.h(index.Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', 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 (index.h(index.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),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, index.h("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, index.h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -1026,15 +1024,16 @@ const OverlaySelection = class {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered

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

@@ -616,7 +616,7 @@ class GridResizeService {
     }
 }
 
-const revogrViewportScrollStyleCss = () => `.rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}`;
+const revogrViewportScrollStyleCss = () => `.rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}`;
 
 const RevogrViewportScroll = class {
     constructor(hostRef) {

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

@@ -30,6 +30,7 @@ export class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -91,7 +92,9 @@ export class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position

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

@@ -100,12 +100,7 @@ export class OverlaySelection {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -234,9 +229,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: 'ff303c39d59e4ef217421fa11b9a80de07311b07', 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: '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),
             // 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: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -338,15 +333,16 @@ export class OverlaySelection {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered

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

@@ -1070,11 +1070,14 @@ export class RevoGridComponent {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

package/dist/collection/components/scroll/revogr-viewport-scroll-style.css

@@ -19,6 +19,7 @@ revogr-viewport-scroll {
   /* Hide scrollbar for Chrome, Safari and Opera */
   overflow-x: auto;
   overflow-y: hidden;
+  overscroll-behavior-x: contain;
   position: relative;
   z-index: 1;
   height: 100%;

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

@@ -2463,11 +2463,14 @@ const RevoGridComponent = class {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

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

@@ -296,6 +296,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -357,7 +358,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -786,12 +789,7 @@ const OverlaySelection = class {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -920,9 +918,9 @@ const OverlaySelection = class {
                 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: 'ff303c39d59e4ef217421fa11b9a80de07311b07', 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: '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),
             // 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: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -1024,15 +1022,16 @@ const OverlaySelection = class {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered

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

@@ -614,7 +614,7 @@ class GridResizeService {
     }
 }
 
-const revogrViewportScrollStyleCss = () => `.rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}`;
+const revogrViewportScrollStyleCss = () => `.rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}`;
 
 const RevogrViewportScroll = class {
     constructor(hostRef) {

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

@@ -2463,11 +2463,14 @@ const RevoGridComponent = class {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), h("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), h("slot", { name: `data-${view.type}-${data.type}` })), h("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, h("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);

package/dist/revo-grid/revogr-attribution_7.entry.js

@@ -296,6 +296,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -357,7 +358,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -786,12 +789,7 @@ const OverlaySelection = class {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -920,9 +918,9 @@ const OverlaySelection = class {
                 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: 'ff303c39d59e4ef217421fa11b9a80de07311b07', 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: '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),
             // 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: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, h("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -1024,15 +1022,16 @@ const OverlaySelection = class {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered

package/dist/revo-grid/revogr-data_4.entry.js

@@ -614,7 +614,7 @@ class GridResizeService {
     }
 }
 
-const revogrViewportScrollStyleCss = () => `.rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}`;
+const revogrViewportScrollStyleCss = () => `.rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}`;
 
 const RevogrViewportScroll = class {
     constructor(hostRef) {

package/dist/types/components/overlay/keyboard.service.d.ts

@@ -3,7 +3,7 @@ import { EventData } from './selection.utils';
 import { Cell, Nullable, RangeArea, SelectionStoreState } from "../../types/index";
 type Config = {
     selectionStore: Observable<SelectionStoreState>;
-    change(val?: any): void;
+    change(val?: any): boolean;
     cancel(): void;
     clearCell(): void;
     focus(focus: Cell, changes: Partial<Cell>, focusNextViewport?: number): boolean;
@@ -13,7 +13,7 @@ type Config = {
     selectAll(): void;
 };
 export declare class KeyboardService {
-    private sv;
+    private readonly sv;
     constructor(sv: Config);
     /**
      * Appends printable key input that arrives after edit mode was requested

package/dist/types/components/overlay/revogr-overlay-selection.d.ts

@@ -11,7 +11,7 @@ export declare class OverlaySelection {
     /**
      * Readonly mode.
      */
-    readonly: boolean;
+    readonly readonly: boolean;
     /**
      * Range selection allowed.
      */
@@ -189,7 +189,7 @@ export declare class OverlaySelection {
     private autoFillService;
     private orderEditor?;
     private revogrEdit?;
-    private unsubscribeSelectionStore;
+    private readonly unsubscribeSelectionStore;
     onMouseMove(e: MouseEvent | TouchEvent): void;
     /**
      * Action finished inside the document.
@@ -242,7 +242,7 @@ export declare class OverlaySelection {
     /**
      * Start cell editing
      */
-    protected doEdit(val?: string): void;
+    protected doEdit(val?: string): boolean;
     /**
      * Close editor event triggered
      * @param details - if it requires focus next

package/hydrate/index.js

@@ -13636,6 +13636,7 @@ class KeyboardService {
         if (typeof (editCell === null || editCell === void 0 ? void 0 : editCell.val) !== 'string') {
             return false;
         }
+        e.preventDefault();
         this.sv.selectionStore.set('edit', Object.assign(Object.assign({}, editCell), { val: `${editCell.val}${e.key}` }));
         return true;
     }
@@ -13697,7 +13698,9 @@ class KeyboardService {
         }
         // pressed letter key
         if (!isShortcutModifier(e) && e.key.length === 1) {
-            this.sv.change(e.key);
+            if (this.sv.change(e.key)) {
+                e.preventDefault();
+            }
             return;
         }
         // pressed arrow, change selection position
@@ -14129,12 +14132,7 @@ class OverlaySelection {
                     return this.doFocus(f, f, changes);
                 }
             },
-            change: val => {
-                if (this.readonly) {
-                    return;
-                }
-                this.doEdit(val);
-            },
+            change: val => this.doEdit(val),
             cancel: async () => {
                 var _a;
                 await ((_a = this.revogrEdit) === null || _a === void 0 ? void 0 : _a.cancelChanges());
@@ -14263,9 +14261,9 @@ class OverlaySelection {
                 nodes.push(hAsync("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 (hAsync(Host, { key: 'ff303c39d59e4ef217421fa11b9a80de07311b07', 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 (hAsync(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),
             // it's done to be able to throw events from different levels, not just from editor
-            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '3cbe4c3ad7d447f779e9e20f73eec2e3107275e0', name: "data" })));
+            onCelledit: (e) => this.onEditCell(e) }, nodes, hAsync("slot", { key: '8ad5df55904ca6a8b2fb0e69c5f608ec7264a0f1', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -14367,15 +14365,16 @@ class OverlaySelection {
      * Start cell editing
      */
     doEdit(val = '') {
-        var _a;
-        if (this.canEdit()) {
-            const focus = this.selectionStore.get('focus');
-            if (!focus) {
-                return;
-            }
-            const data = this.columnService.getSaveData(focus.y, focus.x);
-            (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
+        if (!this.canEdit()) {
+            return false;
+        }
+        const focus = this.selectionStore.get('focus');
+        if (!focus) {
+            return false;
         }
+        const data = this.columnService.getSaveData(focus.y, focus.x);
+        const event = this.setEdit.emit(Object.assign(Object.assign({}, data), { val }));
+        return !event.defaultPrevented;
     }
     /**
      * Close editor event triggered
@@ -20335,11 +20334,14 @@ class RevoGridComponent {
             // Render viewport data (vertical sections)
             view.dataPorts.forEach(data => {
                 const key = `${data.type}_${view.type}`;
-                const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: ({ detail }) => {
+                const dataView = (hAsync("revogr-overlay-selection", Object.assign({}, data, { canDrag: this.canDrag && data.canDrag, isMobileDevice: isMobile, onSelectall: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.selectAll(); }, editors: this.editors, readonly: this.readonly, range: this.range, useClipboard: this.useClipboard, applyChangesOnClose: this.applyOnClose, additionalData: this.additionalData, slot: data.slot, onBeforenextvpfocus: (e) => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeNextFocusCell(e.detail); }, onCanceledit: () => { var _a; return (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(false); }, onSetedit: e => {
                         var _a;
-                        const event = this.beforeeditstart.emit(detail);
-                        if (!event.defaultPrevented) {
-                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(detail.val);
+                        const event = this.beforeeditstart.emit(e.detail);
+                        if (event.defaultPrevented) {
+                            e.preventDefault();
+                        }
+                        else {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(e.detail.val);
                         }
                     } }), hAsync("revogr-data", Object.assign({}, data, { colType: view.type, key: key, readonly: this.readonly, range: this.range, rowClass: this.rowClass, rowSelectionStore: data.rowSelectionStore, additionalData: this.additionalData, jobsBeforeRender: this.jobsBeforeRender, slot: DATA_SLOT }), hAsync("slot", { name: `data-${view.type}-${data.type}` })), hAsync("revogr-temp-range", { selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }), hAsync("revogr-focus", { colData: data.colData, dataStore: data.dataStore, focusTemplate: this.focusTemplate, rowType: data.type, colType: view.type, selectionStore: data.selectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }, hAsync("slot", { name: `focus-${view.type}-${data.type}` }))));
                 dataViews.push(dataView);
@@ -21998,7 +22000,7 @@ class GridResizeService {
     }
 }
 
-const revogrViewportScrollStyleCss = () => `.rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}`;
+const revogrViewportScrollStyleCss = () => `.rowHeaders{z-index:2;font-size:10px;display:flex;height:100%}.rowHeaders revogr-data .rgCell{text-align:center}.rowHeaders .rgCell{padding:0 1em !important;min-width:100%}revogr-viewport-scroll{-ms-overflow-style:none;scrollbar-width:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;position:relative;z-index:1;height:100%}revogr-viewport-scroll::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll.colPinStart,revogr-viewport-scroll.colPinEnd{z-index:2}revogr-viewport-scroll.colPinEnd:has(.active){overflow:visible}revogr-viewport-scroll.rgCol{flex-grow:1}revogr-viewport-scroll .content-wrapper{overflow:hidden}revogr-viewport-scroll .inner-content-table{display:flex;flex-direction:column;max-height:100%;width:100%;min-width:100%;position:relative;z-index:0}revogr-viewport-scroll .vertical-inner{overflow-y:auto;position:relative;width:100%;flex-grow:1;outline:none;-ms-overflow-style:none;scrollbar-width:none;}revogr-viewport-scroll .vertical-inner::-webkit-scrollbar{display:none;-webkit-appearance:none}revogr-viewport-scroll .vertical-inner revogr-data,revogr-viewport-scroll .vertical-inner revogr-overlay-selection{height:100%}`;
 
 /**
  * Viewport scroll component for RevoGrid