@revolist/revogrid 4.23.12 → 4.23.14

package/hydrate/index.mjs

@@ -7395,7 +7395,7 @@ function isFilterBtn(e) {
     }
 })();
 
-const filterStyleCss = () => `.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#4545ff;height:32px;line-height:32px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037}.revo-button.red{background-color:#E0662E}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid #dbdbdb;line-height:30px;background:none;color:#000;box-shadow:none}revo-grid[theme^=dark] .revo-button.outline{border:1px solid #404040;color:#d8d8d8}revogr-filter-panel{position:absolute;display:block;top:0;left:0;z-index:100;max-height:calc(100% - 80px);overflow:auto;opacity:1;transform:none;background-color:var(--revo-grid-filter-panel-bg, #fff);border:1px solid var(--revo-grid-filter-panel-border, #cecece);transform-origin:62px 0px;box-shadow:0 5px 18px -2px var(--revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15));padding:10px;border-radius:8px;min-width:220px;text-align:left;animation:revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1)}revogr-filter-panel .filter-holder>div{display:flex;flex-direction:column}revogr-filter-panel label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel select{width:100%}revogr-filter-panel input[type=text]{border:0;min-height:34px;margin:5px 0;background:var(--revo-grid-filter-panel-input-bg, #f3f3f3);border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel .filter-actions{text-align:right;margin-right:-5px}revogr-filter-panel .filter-actions button{margin-top:10px;margin-right:5px}@keyframes revogr-filter-panel-open{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){revogr-filter-panel{animation:none}}.rgHeaderCell:hover .rv-filter{transition:opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.rgHeaderCell:hover .rv-filter,.rgHeaderCell .rv-filter.active{opacity:1}.rgHeaderCell .rv-filter{height:24px;width:24px;background:none;border:0;opacity:0;visibility:visible;cursor:pointer;border-radius:4px}.rgHeaderCell .rv-filter.active{color:#10224a}.rgHeaderCell .rv-filter .filter-img{color:gray;width:11px}.select-css{display:block;font-family:sans-serif;line-height:1.3;padding:0.6em 1.4em 0.5em 0.8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;border:1px solid var(--revo-grid-filter-panel-select-border, #d9d9d9);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--revo-grid-filter-panel-input-bg, #f3f3f3);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat, repeat;background-position:right 0.7em top 50%, 0 0;background-size:0.65em auto, 100%;}.select-css::-ms-expand{display:none}.select-css:hover{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.select-css:focus{border-color:var(--revo-grid-filter-panel-select-border-hover, #d9d9d9);box-shadow:0 0 1px 3px rgba(59, 153, 252, 0.7);box-shadow:0 0 0 3px -moz-mac-focusring;outline:none}.select-css option{font-weight:normal}.select-css:disabled,.select-css[aria-disabled=true]{color:gray;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.multi-filter-list{margin-top:5px;margin-bottom:5px}.multi-filter-list div{white-space:nowrap}.multi-filter-list .multi-filter-list-row{display:flex;align-items:center;gap:6px}.multi-filter-list .multi-filter-list-action{display:flex;flex:0 0 auto;justify-content:flex-end;align-items:center}.multi-filter-list .and-or-button{margin:0 0 0 10px;min-width:58px;cursor:pointer}.multi-filter-list .trash-button{margin:0 0 -2px 6px;cursor:pointer;width:22px;height:100%;font-size:16px}.multi-filter-list .trash-button .trash-img{width:1em}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);height:10px}.select-input{display:flex;align-items:center;flex:1 1 auto;gap:6px;min-width:0}.select-input .select-filter,.select-input .filter-extra{flex:1 1 0;min-width:0}.select-input .filter-extra{display:flex}.select-input .filter-extra>*{width:100%}.select-input input[type=text],.select-input input[type=date]{margin:0}`;
+const filterStyleCss = () => `.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#4545ff;height:32px;line-height:32px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037}.revo-button.red{background-color:#E0662E}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid #dbdbdb;line-height:30px;background:none;color:#000;box-shadow:none}revo-grid[theme^=dark] .revo-button.outline{border:1px solid #404040;color:#d8d8d8}revogr-filter-panel{display:block}revogr-filter-panel .filter-panel-dialog{position:fixed;top:0;left:0;z-index:100;max-height:calc(100vh - 16px);overflow:auto;opacity:1;transform:none;background-color:var(--revo-grid-filter-panel-bg, #fff);border:1px solid var(--revo-grid-filter-panel-border, #cecece);transform-origin:62px 0px;box-shadow:0 5px 18px -2px var(--revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15));padding:10px;border-radius:8px;margin:0;min-width:220px;text-align:left;animation:revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1)}revogr-filter-panel .filter-panel-dialog::backdrop{background:transparent}revogr-filter-panel .filter-panel-dialog .filter-holder>div{display:flex;flex-direction:column}revogr-filter-panel .filter-panel-dialog label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel .filter-panel-dialog select{width:100%}revogr-filter-panel .filter-panel-dialog input[type=text]{border:0;min-height:34px;margin:5px 0;background:var(--revo-grid-filter-panel-input-bg, #f3f3f3);border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel .filter-panel-dialog .filter-actions{text-align:right;margin-right:-5px}revogr-filter-panel .filter-panel-dialog .filter-actions button{margin-top:10px;margin-right:5px}@keyframes revogr-filter-panel-open{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){revogr-filter-panel .filter-panel-dialog{animation:none}}.rgHeaderCell:hover .rv-filter{transition:opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.rgHeaderCell:hover .rv-filter,.rgHeaderCell .rv-filter.active{opacity:1}.rgHeaderCell .rv-filter{height:24px;width:24px;background:none;border:0;opacity:0;visibility:visible;cursor:pointer;border-radius:4px}.rgHeaderCell .rv-filter.active{color:#10224a}.rgHeaderCell .rv-filter .filter-img{color:gray;width:11px}.select-css{display:block;font-family:sans-serif;line-height:1.3;padding:0.6em 1.4em 0.5em 0.8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;border:1px solid var(--revo-grid-filter-panel-select-border, #d9d9d9);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--revo-grid-filter-panel-input-bg, #f3f3f3);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat, repeat;background-position:right 0.7em top 50%, 0 0;background-size:0.65em auto, 100%;}.select-css::-ms-expand{display:none}.select-css:hover{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.select-css:focus{border-color:var(--revo-grid-filter-panel-select-border-hover, #d9d9d9);box-shadow:0 0 1px 3px rgba(59, 153, 252, 0.7);box-shadow:0 0 0 3px -moz-mac-focusring;outline:none}.select-css option{font-weight:normal}.select-css:disabled,.select-css[aria-disabled=true]{color:gray;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.multi-filter-list{margin-top:5px;margin-bottom:5px}.multi-filter-list div{white-space:nowrap}.multi-filter-list .multi-filter-list-action{display:flex;justify-content:space-between;align-items:center}.multi-filter-list .and-or-button{margin:0 0 0 10px;min-width:58px;cursor:pointer}.multi-filter-list .trash-button{margin:0 0 -2px 6px;cursor:pointer;width:22px;height:100%;font-size:16px}.multi-filter-list .trash-button .trash-img{width:1em}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);height:10px}.select-input{display:flex;justify-content:space-between;align-items:center}`;
 
 const defaultType = 'none';
 const FILTER_LIST_CLASS = 'multi-filter-list';
@@ -7506,24 +7506,56 @@ class FilterPanel {
             if (index !== this.filterItems[prop].length - 1) {
                 andOrButton = (hAsync("div", { onClick: () => this.toggleFilterAndOr(filter.id) }, hAsync(AndOrButton, { text: filter.relation === 'and' ? capts.and : capts.or })));
             }
-            const extra = this.renderExtra(prop, index);
-            return (hAsync("div", { key: filter.id, class: FILTER_LIST_CLASS }, hAsync("div", { class: "multi-filter-list-row" }, hAsync("div", { class: { 'select-input': true } }, hAsync("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), extra ? hAsync("div", { class: "filter-extra" }, extra) : ''), hAsync("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, hAsync("div", { onClick: () => this.onRemoveFilter(filter.id) }, hAsync(TrashButton, null))))));
+            return (hAsync("div", { key: filter.id, class: FILTER_LIST_CLASS }, hAsync("div", { class: { 'select-input': true } }, hAsync("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), hAsync("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton), hAsync("div", { onClick: () => this.onRemoveFilter(filter.id) }, hAsync(TrashButton, null))), hAsync("div", null, this.renderExtra(prop, index))));
         }), propFilters.filter(f => !f.hidden).length > 0 ? hAsync("div", { class: "add-filter-divider" }) : ''));
     }
+    componentDidRender() {
+        this.syncDialog();
+    }
+    syncDialog() {
+        if (!this.dialog) {
+            return;
+        }
+        if (!this.changes) {
+            if (this.dialog.open) {
+                this.dialog.close();
+            }
+            return;
+        }
+        if (!this.dialog.open) {
+            this.dialog.show();
+        }
+        if (this.changes.autoCorrect !== false) {
+            requestAnimationFrame(() => this.autoCorrect(this.dialog));
+        }
+    }
     autoCorrect(el) {
-        var _a, _b;
         if (!el) {
             return;
         }
-        const revoGrid = el.closest('revo-grid');
-        if (!revoGrid) {
+        const pos = el.getBoundingClientRect();
+        const maxLeft = Math.max(0, window.innerWidth - pos.width);
+        const maxTop = Math.max(0, window.innerHeight - pos.height);
+        if (pos.left > maxLeft) {
+            el.style.left = `${maxLeft}px`;
+        }
+        if (pos.top > maxTop) {
+            el.style.top = `${maxTop}px`;
+        }
+    }
+    onDialogMouseDown(e) {
+        if (!this.closeOnOutsideClick ||
+            e.target !== this.dialog ||
+            !this.dialog) {
             return;
         }
-        const pos = el.getBoundingClientRect();
-        const gridPos = revoGrid.getBoundingClientRect();
-        const maxLeft = gridPos.right - pos.width;
-        if (pos.left > maxLeft && el.offsetLeft) {
-            el.style.left = `${maxLeft - ((_b = (_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) !== null && _b !== void 0 ? _b : 0)}px`;
+        const rect = this.dialog.getBoundingClientRect();
+        const isInside = e.clientX >= rect.left &&
+            e.clientX <= rect.right &&
+            e.clientY >= rect.top &&
+            e.clientY <= rect.bottom;
+        if (!isInside) {
+            this.onCancel();
         }
     }
     onFilterTypeChange(e, prop, index) {
@@ -7724,30 +7756,33 @@ class FilterPanel {
             } }));
     }
     render() {
-        var _a, _b, _c, _d, _e;
-        if (!this.changes) {
-            return hAsync(Host, { style: { display: 'none' } });
-        }
+        var _a, _b, _c, _d, _e, _f, _g;
         const style = {
-            display: 'block',
-            left: `${this.changes.x}px`,
-            top: `${this.changes.y}px`,
+            left: `${(_b = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0}px`,
+            top: `${(_d = (_c = this.changes) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0}px`,
         };
         const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-        return (hAsync(Host, { style: style, ref: el => {
-                var _a;
-                ((_a = this.changes) === null || _a === void 0 ? void 0 : _a.autoCorrect) !== false && this.autoCorrect(el);
-            } }, hAsync("slot", { slot: "header" }), ((_b = (_a = this.changes).extraContent) === null || _b === void 0 ? void 0 : _b.call(_a, this.changes)) || '', ((_c = this.changes) === null || _c === void 0 ? void 0 : _c.hideDefaultFilters) !== true && ([
-            hAsync("label", null, capts.title),
-            hAsync("div", { class: "filter-holder" }, this.getFilterItemsList()),
-            hAsync("div", { class: "add-filter" }, hAsync("select", { id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType)))
-        ]), hAsync("slot", null), ((_e = (_d = this.changes).extraBottomContent) === null || _e === void 0 ? void 0 : _e.call(_d, this.changes)) || '', hAsync("div", { class: "filter-actions" }, this.disableDynamicFiltering && [
-            hAsync("button", { id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
-            hAsync("button", { id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
-        ], !this.disableDynamicFiltering && [
-            hAsync("button", { id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
-            hAsync("button", { id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
-        ]), hAsync("slot", { slot: "footer" })));
+        return (hAsync(Host, { key: '9fb424017d080876ff7796237917b4f41f617fe0' }, hAsync("dialog", { key: '37b9f870b95f6fe1bd7be359dd7b77ef196e896e', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+                e.preventDefault();
+                this.onCancel();
+            }, onMouseDown: e => this.onDialogMouseDown(e) }, this.changes && [
+            hAsync("slot", { key: '76ec505a92d0a7c1ae0bbb5f4cac63555f3416be', slot: "header" }),
+            ((_f = (_e = this.changes).extraContent) === null || _f === void 0 ? void 0 : _f.call(_e, this.changes)) || '',
+            ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
+                hAsync("label", { key: 'c6fd82c95f6005f286c7bc90de34956128a83246' }, capts.title),
+                hAsync("div", { key: '5e7dac36ad79ba1b6072a0053b30aa384ade0dde', class: "filter-holder" }, this.getFilterItemsList()),
+                hAsync("div", { key: 'd9b6103edbd138d4db845745686ee4c847310a66', class: "add-filter" }, hAsync("select", { key: 'c1b321f2d19458f95ab3f9188d83d94bebdb688e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+            ],
+            hAsync("slot", { key: '1571dcbc5c57651deb42a4046272ff60fa74f5a7' }),
+            hAsync("div", { key: '4aa7dee532336b084542df0209291b4c60378b49', class: "filter-actions" }, this.disableDynamicFiltering && [
+                hAsync("button", { key: '4c1b3054cd1bb7f46877592f00f6634d0f7ecafa', id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
+                hAsync("button", { key: 'f31a568c89be18b1a854cdd7d4726e01db24e338', id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
+            ], !this.disableDynamicFiltering && [
+                hAsync("button", { key: '5d40e8b1f13f94cff4f5a2e2aefeee8861104a9d', id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
+                hAsync("button", { key: '67eac3abd16f6f6e2ed7089dcfb0d05524ddb7df', id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
+            ]),
+            hAsync("slot", { key: 'b27a9bb3ef814e1e09dca14eda3e332ff34c654c', slot: "footer" }),
+        ])));
     }
     get element() { return getElement(this); }
     static get style() { return filterStyleCss(); }
@@ -13047,82 +13082,43 @@ class ColumnService {
             mapping,
         };
     }
-    getTransformedDataToApply({ start, data, targetRange, }) {
+    getTransformedDataToApply(start, data) {
         const changed = {};
         const copyRowLength = data.length;
-        if (!copyRowLength) {
-            return {
-                changed,
-                range: null,
-            };
-        }
         const colLength = this.columns.length;
         const rowLength = this.dataStore.get('items').length;
-        const bounds = this.getDataApplyBounds(start, targetRange, copyRowLength, rowLength, colLength);
-        if (!bounds) {
-            return {
-                changed,
-                range: null,
-            };
-        }
-        const { startRow, startCol, endRow } = bounds;
-        let maxCol = startCol - 1;
-        let lastRow = startRow - 1;
         // rows
-        for (let rowIndex = startRow, i = 0; rowIndex <= endRow; rowIndex++, i++) {
+        let rowIndex = start.y;
+        let maxCol = 0;
+        for (let i = 0; rowIndex < rowLength && i < copyRowLength; rowIndex++, i++) {
             // copy original data link
             const copyRow = data[i % copyRowLength];
             const copyColLength = (copyRow === null || copyRow === void 0 ? void 0 : copyRow.length) || 0;
-            if (!copyColLength) {
-                continue;
+            // columns
+            let colIndex = start.x;
+            for (let j = 0; colIndex < colLength && j < copyColLength; colIndex++, j++) {
+                const p = this.columns[colIndex].prop;
+                const currentCol = j % colLength;
+                /** if can write */
+                if (!this.isReadOnly(rowIndex, colIndex)) {
+                    /** to show before save */
+                    if (!changed[rowIndex]) {
+                        changed[rowIndex] = {};
+                    }
+                    changed[rowIndex][p] = copyRow[currentCol];
+                }
             }
-            maxCol = Math.max(maxCol, this.applyClipboardRow(changed, {
-                bounds,
-                copyColLength,
-                copyRow,
-                rowIndex,
-                start,
-                targetRange,
-            }));
-            lastRow = rowIndex;
+            maxCol = Math.max(maxCol, colIndex - 1);
         }
+        const range = getRange(start, {
+            y: rowIndex - 1,
+            x: maxCol,
+        });
         return {
             changed,
-            range: this.getAppliedRange(bounds, lastRow, maxCol),
+            range,
         };
     }
-    getDataApplyBounds(start, targetRange, copyRowLength, rowLength, colLength) {
-        var _a, _b, _c;
-        const startRow = (_a = targetRange === null || targetRange === void 0 ? void 0 : targetRange.y) !== null && _a !== void 0 ? _a : start.y;
-        const startCol = (_b = targetRange === null || targetRange === void 0 ? void 0 : targetRange.x) !== null && _b !== void 0 ? _b : start.x;
-        const endRow = Math.min(rowLength - 1, (_c = targetRange === null || targetRange === void 0 ? void 0 : targetRange.y1) !== null && _c !== void 0 ? _c : start.y + copyRowLength - 1);
-        if (endRow < startRow || startCol >= colLength) {
-            return null;
-        }
-        return { startRow, startCol, endRow, colLength };
-    }
-    applyClipboardRow(changed, { bounds, copyColLength, copyRow, rowIndex, start, targetRange, }) {
-        var _a;
-        const endCol = Math.min(bounds.colLength - 1, (_a = targetRange === null || targetRange === void 0 ? void 0 : targetRange.x1) !== null && _a !== void 0 ? _a : start.x + copyColLength - 1);
-        for (let colIndex = bounds.startCol, j = 0; colIndex <= endCol; colIndex++, j++) {
-            if (this.isReadOnly(rowIndex, colIndex)) {
-                continue;
-            }
-            const prop = this.columns[colIndex].prop;
-            changed[rowIndex] = changed[rowIndex] || {};
-            changed[rowIndex][prop] = copyRow[j % copyColLength];
-        }
-        return endCol;
-    }
-    getAppliedRange({ startRow, startCol }, lastRow, maxCol) {
-        if (lastRow < startRow || maxCol < startCol) {
-            return null;
-        }
-        return getRange({ x: startCol, y: startRow }, {
-            y: lastRow,
-            x: maxCol,
-        });
-    }
     getRangeStaticData(d, value) {
         const changed = {};
         // rows
@@ -13789,30 +13785,6 @@ class AutoFillService {
     }
 }
 
-function getRangeFillClipboardData(data, useClipboard) {
-    var _a;
-    if (!isClipboardRangeFillEnabled(useClipboard)) {
-        return null;
-    }
-    const normalized = trimTrailingEmptyClipboardRows(data);
-    return normalized.length === 1 && ((_a = normalized[0]) === null || _a === void 0 ? void 0 : _a.length) === 1
-        ? normalized
-        : null;
-}
-function isClipboardRangeFillEnabled(useClipboard) {
-    return (typeof useClipboard === 'object' && useClipboard.rangeFill === true);
-}
-function trimTrailingEmptyClipboardRows(data) {
-    const rows = [...data];
-    while (rows.length > 1 && isEmptyClipboardRow(rows[rows.length - 1])) {
-        rows.pop();
-    }
-    return rows;
-}
-function isEmptyClipboardRow(row) {
-    return !row || row.every(cell => cell === '');
-}
-
 const revogrOverlayStyleCss = () => `revogr-overlay-selection{display:block;position:relative;width:100%}revogr-overlay-selection .autofill-handle{position:absolute;width:14px;height:14px;margin-left:-13px;margin-top:-13px;z-index:10;cursor:crosshair}revogr-overlay-selection .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection.mobile .autofill-handle{position:absolute;width:30px;height:30px;margin-left:-29px;margin-top:-29px;z-index:10;cursor:crosshair}revogr-overlay-selection.mobile .autofill-handle::before{content:"";position:absolute;right:0;bottom:0;width:12px;height:12px;background:#0d63e8;border:1px solid white;box-sizing:border-box}revogr-overlay-selection .selection-border-range{position:absolute;pointer-events:none;z-index:9;box-shadow:-1px 0 0 #0d63e8 inset, 1px 0 0 #0d63e8 inset, 0 -1px 0 #0d63e8 inset, 0 1px 0 #0d63e8 inset}revogr-overlay-selection .selection-border-range .range-handlers{height:100%;background-color:transparent;width:75%;max-width:50px;min-width:20px;left:50%;transform:translateX(-50%);position:absolute}revogr-overlay-selection .selection-border-range .range-handlers>span{pointer-events:auto;height:20px;width:20px;position:absolute;left:50%;transform:translateX(-50%)}revogr-overlay-selection .selection-border-range .range-handlers>span:before,revogr-overlay-selection .selection-border-range .range-handlers>span:after{position:absolute;border-radius:5px;width:15px;height:5px;left:50%;transform:translateX(-50%);background-color:rgba(0, 0, 0, 0.2)}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child{top:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:first-child:before{content:"";top:0}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child{bottom:-7px}revogr-overlay-selection .selection-border-range .range-handlers>span:last-child:after{content:"";bottom:0}revogr-overlay-selection revogr-edit{z-index:10}`;
 
 /**
@@ -14063,9 +14035,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: 'd936e8452e84c7a25ecd6502e929f1a5af69467f', 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: 'cd3525d404aa44fd8d06e7fc459777acb8a9d585', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -14230,25 +14202,13 @@ class OverlaySelection {
         if (!focus || isEditing) {
             return;
         }
-        const rangeFillData = getRangeFillClipboardData(data, this.useClipboard);
-        const targetRange = rangeFillData
-            ? this.getClipboardPasteTargetRange()
-            : null;
-        let { changed, range } = this.columnService.getTransformedDataToApply({
-            start: focus,
-            data: rangeFillData || data,
-            targetRange,
-        });
+        let { changed, range } = this.columnService.getTransformedDataToApply(focus, data);
         const { defaultPrevented: canPaste } = this.rangeClipboardPaste.emit(Object.assign({ data: changed, models: collectModelsOfRange(changed, this.dataStore), range }, this.types));
         if (canPaste) {
             return;
         }
         (_a = this.autoFillService) === null || _a === void 0 ? void 0 : _a.onRangeApply(changed, range, range);
     }
-    getClipboardPasteTargetRange() {
-        const range = this.selectionStore.get('range');
-        return range && !isRangeSingleCell(range) ? range : null;
-    }
     async focusNext() {
         var _a;
         const canFocus = await ((_a = this.keyboardService) === null || _a === void 0 ? void 0 : _a.keyChangeSelection(new KeyboardEvent('keydown', {
@@ -15780,7 +15740,8 @@ class FilterPlugin extends BasePlugin {
     async headerclick(e) {
         var _a, _b;
         const el = (_a = e.detail.originalEvent) === null || _a === void 0 ? void 0 : _a.target;
-        if (!isFilterBtn(el)) {
+        const filterButton = isFilterBtn(el);
+        if (!filterButton) {
             return;
         }
         e.preventDefault();
@@ -15794,9 +15755,8 @@ class FilterPlugin extends BasePlugin {
             return;
         }
         // filter button clicked, open filter dialog
-        const gridPos = this.revogrid.getBoundingClientRect();
-        const buttonPos = el.getBoundingClientRect();
-        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x - gridPos.x, y: buttonPos.y - gridPos.y + buttonPos.height, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent, extraBottomContent: this.extraBottomHyperContent });
+        const buttonPos = (filterButton instanceof HTMLElement ? filterButton : el).getBoundingClientRect();
+        const data = Object.assign(Object.assign(Object.assign({}, e.detail), this.filterCollection[prop]), { x: buttonPos.x, y: buttonPos.y + buttonPos.height, autoCorrect: true, filterTypes: this.getColumnFilter(e.detail.filter), filterItems: this.multiFilterItems, extraContent: this.extraHyperContent });
         (_b = this.beforeshow) === null || _b === void 0 ? void 0 : _b.call(this, data);
         this.pop.show(data);
     }
@@ -17054,22 +17014,9 @@ function filterOutEmptyGroupRows(source, filterTrimmed) {
     return trimmed;
 }
 
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 const PADDING_DEPTH = 10;
-const RowRenderer = (_a, cells) => {
-    var { rowClass, index, size, start, depth, groupingLevel } = _a, attrs = __rest$1(_a, ["rowClass", "index", "size", "start", "depth", "groupingLevel"]);
-    const props = Object.assign(Object.assign(Object.assign({}, attrs), { [DATA_ROW]: index }), (typeof groupingLevel === 'number'
+const RowRenderer = ({ rowClass, index, size, start, depth, groupingLevel }, cells) => {
+    const props = Object.assign({ [DATA_ROW]: index }, (typeof groupingLevel === 'number'
         ? { 'data-level': groupingLevel }
         : {}));
     return (hAsync("div", Object.assign({}, props, { class: `rgRow ${rowClass || ''}`, style: {
@@ -17096,17 +17043,12 @@ const GroupingRowRenderer = (props) => {
     const name = model[PSEUDO_GROUP_ITEM];
     const expanded = model[GROUP_EXPANDED];
     const depth = parseInt(model[GROUP_DEPTH], 10) || 0;
-    const groupRowAttrs = {
-        rowClass: 'groupingRow',
-        depth,
-        expanded,
-    };
     if (groupingCustomRenderer) {
-        return (hAsync(RowRenderer, Object.assign({}, props, groupRowAttrs), hAsync("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(hAsync, Object.assign(Object.assign({}, props), { colType: props.providers.colType, name,
+        return (hAsync(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }), hAsync("div", { onClick: e => expandEvent(e, model, itemIndex) }, groupingCustomRenderer(hAsync, Object.assign(Object.assign({}, props), { colType: props.providers.colType, name,
             expanded,
             depth })))));
     }
-    return (hAsync(RowRenderer, Object.assign({}, props, groupRowAttrs), hasExpand && [
+    return (hAsync(RowRenderer, Object.assign({}, props, { rowClass: "groupingRow", depth: depth }), hasExpand && [
         hAsync("button", { class: { [GROUP_EXPAND_BTN]: true }, onClick: e => expandEvent(e, model, itemIndex) }, expandSvgIconVNode(expanded)),
         name,
     ]));
@@ -18579,17 +18521,8 @@ class ColumnMovePlugin extends BasePlugin {
     constructor(revogrid, providers) {
         super(revogrid, providers);
         this.moveFunc = debounce$1((e) => this.doMove(e), 5);
-        this.preventHeaderClickAfterDrag = (event) => {
-            if (!this.preventNextHeaderClick) {
-                return;
-            }
-            this.preventNextHeaderClick = false;
-            event.preventDefault();
-        };
         this.staticDragData = null;
         this.dragData = null;
-        this.columnDragMoved = false;
-        this.preventNextHeaderClick = false;
         this.localSubscriptions = {};
         this.orderUi = new ColumnOrderHandler();
         revogrid.appendChild(this.orderUi.render());
@@ -18608,13 +18541,11 @@ class ColumnMovePlugin extends BasePlugin {
             callback: (e) => this.move(e),
         };
         this.addEventListener(COLUMN_CLICK, ({ detail }) => this.dragStart(detail));
-        this.revogrid.addEventListener('beforeheaderclick', this.preventHeaderClickAfterDrag, { capture: true });
     }
     dragStart({ event, data }) {
         if (event.defaultPrevented) {
             return;
         }
-        this.preventNextHeaderClick = false;
         const { defaultPrevented } = dispatch(this.revogrid, COLUMN_DRAG_START_EVENT, data);
         // check if allowed to drag particulat column
         if (defaultPrevented) {
@@ -18636,8 +18567,7 @@ class ColumnMovePlugin extends BasePlugin {
         const cols = this.getDimension(data.pin || 'rgCol');
         const gridRect = this.revogrid.getBoundingClientRect();
         const elRect = dataEl.getBoundingClientRect();
-        const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left) +
-            (cols.renderOffset || 0));
+        const startItem = getItemByPosition(cols, getLeftRelative(event.x, gridRect.left, elRect.left - gridRect.left) + (cols.renderOffset || 0));
         this.staticDragData = {
             startPos: event.x,
             startItem,
@@ -18668,14 +18598,10 @@ class ColumnMovePlugin extends BasePlugin {
             if (rgCol.itemIndex >= this.staticDragData.cols.count) {
                 return;
             }
-            this.orderUi.showHandler(getColumnDragPosition(rgCol, this.staticDragData.startItem, this.staticDragData.cols.renderOffset || 0, dragData.scrollOffset), dragData.gridRect.width);
+            this.orderUi.showHandler(rgCol.end - (this.staticDragData.cols.renderOffset || 0) + dragData.scrollOffset, dragData.gridRect.width);
         }
     }
     move(e) {
-        if (this.staticDragData &&
-            Math.abs(this.staticDragData.startPos - e.x) > 10) {
-            this.columnDragMoved = true;
-        }
         dispatch(this.revogrid, COLUMN_DRAG_MOVE_EVENT, e);
         // then do move
         this.moveFunc(e);
@@ -18684,7 +18610,6 @@ class ColumnMovePlugin extends BasePlugin {
         this.clearOrder();
     }
     onMouseUp(e) {
-        const suppressClick = this.columnDragMoved;
         // apply new positions
         if (this.dragData && this.staticDragData) {
             let relativePos = getLeftRelative(e.x, this.dragData.gridRect.left, this.dragData.scrollOffset);
@@ -18707,9 +18632,6 @@ class ColumnMovePlugin extends BasePlugin {
             }
             dispatch(this.revogrid, COLUMN_DRAG_END_EVENT, this.getData(this.staticDragData, newItems, source));
         }
-        if (suppressClick) {
-            this.preventNextHeaderClick = !!e.target.closest('revogr-header');
-        }
         this.clearOrder();
     }
     clearLocalSubscriptions() {
@@ -18718,7 +18640,6 @@ class ColumnMovePlugin extends BasePlugin {
     clearOrder() {
         this.staticDragData = null;
         this.dragData = null;
-        this.columnDragMoved = false;
         this.clearLocalSubscriptions();
         this.orderUi.stop(this.revogrid);
     }
@@ -18728,7 +18649,6 @@ class ColumnMovePlugin extends BasePlugin {
     clearSubscriptions() {
         super.clearSubscriptions();
         this.clearLocalSubscriptions();
-        this.revogrid.removeEventListener('beforeheaderclick', this.preventHeaderClickAfterDrag, { capture: true });
     }
     getData({ gridEl, dataEl, pin }, order, source = []) {
         const gridRect = gridEl.getBoundingClientRect();
@@ -18750,12 +18670,6 @@ class ColumnMovePlugin extends BasePlugin {
 function getLeftRelative(absoluteX, gridPos, offset) {
     return absoluteX - gridPos - offset;
 }
-function getColumnDragPosition(targetItem, startItem, renderOffset, scrollOffset) {
-    const insertionEdge = startItem.itemIndex > targetItem.itemIndex
-        ? targetItem.start
-        : targetItem.end;
-    return insertionEdge - renderOffset + scrollOffset;
-}
 
 function isMobileDevice() {
     return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
@@ -19105,7 +19019,7 @@ class RevoGridComponent {
         this.rowSize = 0;
         /** Indicates default column size. */
         this.colSize = 100;
-        /** When true, user can select a cell range. Required for range-based clipboard fill. */
+        /** When true, user can range selection. */
         this.range = false;
         /** When true, grid in read only mode. */
         this.readonly = false;
@@ -19117,7 +19031,7 @@ class RevoGridComponent {
         this.noHorizontalScrollTransfer = false;
         /** When true cell focus appear. */
         this.canFocus = true;
-        /** When true enable clipboard. Can be boolean or clipboard config. */
+        /** When true enable clipboard. */
         this.useClipboard = true;
         /**
          * Columns - defines an array of grid columns.
@@ -21973,17 +21887,9 @@ class RevogrViewportScroll {
     }
     render() {
         var _a, _b;
-        const clientHeight = (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0;
-        // When content fits in the viewport (no scroll needed), don't inflate content-wrapper
-        // to clientHeight — that would prevent inner-content-table from shrinking and push
-        // rowPinEnd (footer) to the bottom instead of letting it follow the data rows.
-        // For large/compressed grids (content > clientHeight), physicalContentHeight handles
-        // the browser scroll-size compression correctly.
-        const physicalContentHeight = this.contentHeight < clientHeight
-            ? Math.max(this.contentHeight, 0)
-            : getContentSize(this.contentHeight, clientHeight);
+        const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
         const physicalContentWidth = getContentSize(this.contentWidth, 0);
-        return (hAsync(Host, { key: '3dd9d29cf26743d7aa4995f51180d56008526e54', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'af75428e845044c33eba2fecd1ec04a9177b9b5c', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: 'a0149f597588371e1fafe69efc3bd4411379a017', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: 'e5d2570bf93897cd97ef702141c83bb8c0e13ee2', name: HEADER_SLOT })), hAsync("div", { key: 'd1388ff0d721dd8ce925b934bb2128fddc1ac17b', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'a306ff56f62279402e2a881a081e3224341d5bdf', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '898bda8e9429da06c9ff2bd41626ac27f3cde3cc', name: CONTENT_SLOT }))), hAsync("div", { key: '5e9eba1edd5fca07a964971054a7900e4dd84099', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'f233ad1c23b3f692c45e1db235cfef4704a80726', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: 'ec8d907976c1d50f7aab3c263be3f0249a274df6', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'e35696a7993ac94261426b45c28d488cdc42b7f0', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: 'a6997451e01eacda1d27d4efa1d74e1748626218', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '1d401e87d32d5b1531c2211723b552bbc894f22c', name: HEADER_SLOT })), hAsync("div", { key: 'ceab6f9e812d6ca9a0aa376afcd2562a17f505e0', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'a9556578a23d6efddec2e982e863aec064042154', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '0ae01f9736b9740612e75261f6e3abebda533377', name: CONTENT_SLOT }))), hAsync("div", { key: '09c2565d4ed449a43820f92d97b6558fca3758e7', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '1ffb08ff8138a560cc09d82e3fe22a53e502aafe', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/package.json

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

package/readme.md

@@ -76,10 +76,7 @@ Used by some of the largest companies in Europe and the United States.
   - Header filtering.
   - Custom filters to extend system filters with your own set.
 
-- **[Export](https://rv-grid.com/guide/export.plugin)**:
-  - **[CSV](https://rv-grid.com/guide/export.plugin)**: Built-in file export for core RevoGrid data workflows.
-  - **[PDF](https://rv-grid.com/guide/pdf-export)**: Browser-side PDF export with the lightweight [`@revolist/revogrid-pdf-export`](https://www.npmjs.com/package/@revolist/revogrid-pdf-export) plugin.
-  - **[Excel (Pro)](https://rv-grid.com/guide/data-grid-export-excel)**: Workbook export for RevoGrid Pro with layout, styles, frozen panes, merged cells, and formulas.
+- **[Export](https://rv-grid.com/guide/export.plugin)**: Export data to file.
 
 - **Custom Sizes**: Define custom sizes for [columns](https://rv-grid.com/guide/column/#Column-Size) and [rows](https://rv-grid.com/guide/row/height). Automatic sizing based on content.
 
@@ -431,22 +428,6 @@ npm run test:e2e
 
 Test files live in `e2e/` and share helpers from `e2e/helpers.ts`:
 
-### Local startup troubleshooting
-
-For targeted local work, confirm a new or changed test is discoverable before starting the dev server:
-
-```bash
-./node_modules/.bin/playwright test e2e/pinning.spec.ts --grep "test name" --list
-```
-
-Then run a non-watch Stencil build to catch compile errors without invoking the Playwright web-server lifecycle:
-
-```bash
-./node_modules/.bin/stencil build --dev --serve --no-open
-```
-
-If Playwright fails before any tests run with a Stencil dev-server startup error such as `ERR_SOCKET_BAD_PORT` and port `65536`, treat it as an environment/startup issue rather than an e2e assertion failure. Check `node -v` and whether another local server is already using `localhost:3333`, then retry only after changing that environment state.
-
 
 ## Contributing