@revolist/revogrid 4.12.12 → 4.13.2

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

@@ -1,5 +1,1947 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import{h as e,r as t,c as r,H as o,a as i}from"./index-f6fae858.js";import{H as s,A as a,B as n,K as d,F as l,D as h,L as c}from"./column.service-f39c0a1d.js";import{c as g,o as v,r as u,i as f,D as p,B as m,G as w,S as b,a as x,A as C,f as y,E as S,n as k,C as R}from"./column.drag.plugin-017c4fb3.js";import{D as L,b as E,f as H,d as j,s as P,a as z,h as O,k as M,R as T,u as D}from"./dimension.helpers-5567e424.js";import{d as I}from"./debounce-b3166f78.js";import{V as N}from"./viewport.store-c18a25a6.js";import{v as F,H as $,C as B,F as V,D as U}from"./viewport.helpers-7e7f9dad.js";import{g as A}from"./events-cf0893a3.js";import"./filter.button-84396156.js";import"./header-cell-renderer-31f53644.js";class Y{constructor(){this.defaultRowSize=32}}class X{constructor(){this.defaultRowSize=27}}class W{constructor(){this.defaultRowSize=42}}const G="default";const Z=[G,"material","compact","darkMaterial","darkCompact"];class _{get theme(){return this.currentTheme}get rowSize(){return this.customRowSize||this.currentTheme.defaultRowSize}set rowSize(e){this.customRowSize=e}constructor(e){this.customRowSize=0;this.customRowSize=e.rowSize;this.register("default")}register(e){const t=K(e);switch(t){case"material":case"darkMaterial":this.currentTheme=new W;break;case"compact":case"darkCompact":this.currentTheme=new Y;break;default:this.currentTheme=new X;break}}}function K(e){if(e&&Z.indexOf(e)>-1){return e}return G}class q{get order(){const e={};const t=this.sorting;if(t){Object.keys(t).forEach((r=>{e[r]=t[r].order}))}return e}get stores(){return this.dataSources}constructor(){this.sorting=null;this.collection=null;this.dataSources=g.reduce(((e,t)=>{e[t]=new L(t);return e}),{})}column(e,t="rgCol"){return this.getColumn(e,t)}getColumn(e,t){return E(this.dataSources[t].store,e)}getRawColumns(){return s(this.dataSources,((e,t,r)=>{e[r]=t.store.get("source");return e}),{rgCol:[],colPinStart:[],colPinEnd:[]})}getColumns(e="all"){const t=this.getRawColumns();if(e!=="all"){return t[e]}return g.reduce(((e,r)=>[...e,...t[r]]),[])}getColumnIndexByProp(e,t){return H(this.dataSources[t].store,e)}getColumnByProp(e){var t;return(t=this.collection)===null||t===void 0?void 0:t.columnByProp[e]}refreshByType(e){this.dataSources[e].refresh()}setColumns(e){g.forEach((t=>{this.dataSources[t].updateData(e.columns[t],{depth:e.maxLevel,groups:e.columnGrouping[t].reduce(((e,t)=>{if(!e[t.level]){e[t.level]=[]}e[t.level].push(t);return e}),{})})}));this.sorting=e.sort;this.collection=e;return e}updateColumns(e){const t=e.reduce(((e,t)=>{const r=a(t);if(!e[r]){e[r]={}}e[r][t.prop]=t;return e}),{});const r={};for(const e in t){if(!t.hasOwnProperty(e)){continue}const o=e;const i=t[o];const s=this.dataSources[o].store.get("source");r[o]={};for(let e=0;e<s.length;e++){const t=s[e];const a=i===null||i===void 0?void 0:i[t.prop];if(a){r[o][e]=a}}}for(const e in r){if(!r.hasOwnProperty(e)){continue}const t=e;j(this.dataSources[t].store,r[t]||{})}}updateColumn(e,t){const r=a(e);P(this.dataSources[r].store,{[t]:e})}updateColumnSorting(e,t,r,o){if(!o){this.clearSorting()}e.order=r;if(!this.sorting){this.sorting={}}this.sorting[e.prop]=e;this.updateColumn(e,t);return e}clearSorting(){const e=s(this.sorting,((e,t)=>{const r=a(t);e[r]=true;return e}),{});v(e,((e,t)=>{const r=this.dataSources[t].store.get("source");v(r,(e=>e.order=undefined));this.dataSources[t].setData({source:[...r]})}));this.sorting={}}}class J{constructor(e){this.dimensionProvider=e;this.stores=s(u,((e,t)=>{e[t]=new L(t);return e}),{})}setData(e,t="rgRow",r=false,o,i=false){this.stores[t].updateData([...e],o,i);const s=t!=="rgRow"||r;this.dimensionProvider.setData(e.length,t,s);return e}getModel(e,t="rgRow"){const r=this.stores[t].store;return E(r,e)}changeOrder({rowType:e="rgRow",from:t,to:r}){const o=this.stores[e];const i=[...o.store.get("proxyItems")];const s=o.store.get("items");const a=i.splice(i.indexOf(s[t]),1);i.splice(i.indexOf(s[r]),0,...a);o.setData({proxyItems:i});const n=o.store.get("items");this.dimensionProvider.updateSizesPositionByNewDataIndexes(e,n,s)}setCellData({type:e,rowIndex:t,prop:r,val:o},i=true){const s=this.getModel(t,e);s[r]=o;this.stores[e].setSourceData({[t]:s},i)}setRangeData(e,t){const r={};for(let o in e){const i=r[o]=E(this.stores[t].store,parseInt(o,10));if(!i){continue}for(let t in e[o]){i[t]=e[o][t]}}this.stores[t].setSourceData(r)}refresh(e="all"){if(f(e)){this.refreshItems(e)}u.forEach((e=>this.refreshItems(e)))}refreshItems(e="rgRow"){const t=this.stores[e].store.get("items");this.stores[e].setData({items:[...t]})}setGrouping({depth:e},t="rgRow"){this.stores[t].setData({groupingDepth:e})}setTrimmed(e,t="rgRow"){const r=this.stores[t];r.addTrimmed(e);this.dimensionProvider.setTrimmed(e,t);if(t==="rgRow"){this.dimensionProvider.setData(z(r.store).length,t)}}}class Q{constructor(e,t){this.viewports=e;const r=I((e=>t.realSizeChanged(e)),T);this.stores=s([...u,...g],((e,t)=>{e[t]=new p(t);e[t].store.onChange("realSize",(()=>r(t)));return e}),{})}clearSize(e,t){this.stores[e].drop();this.viewports.stores[e].setOriginalSizes(this.stores[e].store.get("originItemSize"));this.setItemCount(t,e)}setCustomSizes(e,t,r=false){let o=t;if(r){const r=this.stores[e].store.get("sizes");o=Object.assign(Object.assign({},r),t)}this.stores[e].setDimensionSize(o);this.setViewPortCoordinate({type:e,force:true})}setItemCount(e,t){this.viewports.stores[t].setViewport({realCount:e});this.stores[t].setStore({count:e})}setTrimmed(e,t){const r=O(e);const o=this.stores[t];o.setStore({trimmed:r});this.setViewPortCoordinate({type:t,force:true})}setData(e,t,r=false){this.setItemCount(e,t);if(r){const e=this.stores[t].getCurrentState();this.viewports.stores[t].setViewport({virtualSize:e.realSize})}this.setViewPortCoordinate({type:t})}applyNewColumns(e,t,r=false){for(let o of g){if(!r){this.stores[o].drop()}const i=e[o];const s=o!=="rgCol"||t;this.stores[o].setStore({count:i.length});const a=n(i);this.stores[o].setDimensionSize(a);const d={realCount:i.length};if(s){d.virtualSize=this.stores[o].getCurrentState().realSize}this.viewports.stores[o].setViewport(d);this.setViewPortCoordinate({type:o})}}getFullSize(){var e,t;let r=0;let o=0;for(let t of g){r+=((e=this.stores[t])===null||e===void 0?void 0:e.store.get("realSize"))||0}for(let e of u){o+=((t=this.stores[e])===null||t===void 0?void 0:t.store.get("realSize"))||0}return{y:o,x:r}}setViewPortCoordinate({type:e,coordinate:t=this.viewports.stores[e].lastCoordinate,force:r=false}){const o=this.stores[e].getCurrentState();this.viewports.stores[e].setViewPortCoordinate(t,o,r)}getViewPortPos(e){const t=this.stores[e.dimension].getCurrentState();const r=M(t,e.coordinate);return r.start}setSettings(e,t){let r=[];switch(t){case"rgCol":r=g;break;case"rgRow":r=u;break}for(let t of r){this.stores[t].setStore(e)}}updateSizesPositionByNewDataIndexes(e,t,r=[]){this.stores[e].updateSizesPositionByIndexes(t,r);this.setViewPortCoordinate({type:e,force:true})}}class ee{constructor(){this.stores=s([...u,...g],((e,t)=>{e[t]=new N(t);return e}),{})}setViewport(e,t){this.stores[e].setViewport(t)}}function te(e){const t=e.dimensions[e.colType].store;const r=t.get("realSize");const o={contentWidth:r,class:e.colType,contentHeight:e.contentHeight,key:e.colType,colType:e.colType,onResizeviewport:e.onResizeviewport,style:e.fixWidth?{minWidth:`${r}px`}:undefined};const i={colData:z(e.colStore),dimensionCol:t,type:e.colType,groups:e.colStore.get("groups"),groupingDepth:e.colStore.get("groupingDepth"),resizeHandler:e.colType==="colPinEnd"?["l"]:undefined,onHeaderresize:e.onHeaderresize};return{prop:o,type:e.colType,position:e.position,headerProp:i,viewportCol:e.viewports[e.colType].store}}class re{constructor(e,t){var r,o;this.config=e;(r=this.config.selectionStoreConnector)===null||r===void 0?void 0:r.beforeUpdate();const i=[];let s=0;g.forEach((r=>{const o=e.columnProvider.stores[r].store;if(!o.get("items").length){return}const a={colType:r,position:{x:s,y:1},contentHeight:t,fixWidth:r!=="rgCol",viewports:e.viewportProvider.stores,dimensions:e.dimensionProvider.stores,rowStores:e.dataProvider.stores,colStore:o,onHeaderresize:e=>this.onColumnResize(r,e,o)};if(r==="rgCol"){a.onResizeviewport=t=>{var r;const o={clientSize:t.detail.size};if(t.detail.dimension==="rgRow"&&!e.disableVirtualY||t.detail.dimension==="rgCol"&&!e.disableVirtualX){o.virtualSize=t.detail.size}(r=e.viewportProvider)===null||r===void 0?void 0:r.setViewport(t.detail.dimension,o)}}const n=te(a);const d=this.registerCol(n.position.x,r);const l=this.dataViewPort(a).reduce(((t,o)=>{const i=this.registerSegment(o.position);i.setLastCell(o.lastCell);const s=this.registerRow(o.position.y,o.type);const a=Object.assign(Object.assign({colType:r},o),{rowSelectionStore:s,selectionStore:i.store,ref:t=>e.selectionStoreConnector.registerSection(t),onSetrange:e=>{i.setRangeArea(e.detail)},onSettemprange:e=>i.setTempArea(e.detail),onFocuscell:t=>{i.clearFocus();e.selectionStoreConnector.focus(i,t.detail)}});t.push(a);return t}),[]);i.push(Object.assign(Object.assign({},n),{columnSelectionStore:d,dataPorts:l}));s++}));this.columns=i;(o=this.config.scrollingService)===null||o===void 0?void 0:o.unregister()}onColumnResize(e,{detail:t},r){var o;(o=this.config.dimensionProvider)===null||o===void 0?void 0:o.setCustomSizes(e,t,true);const i={};for(const[e,o]of Object.entries(t||{})){const t=parseInt(e,10);const s=E(r,t);if(s){i[t]=Object.assign(Object.assign({},s),{size:o})}}this.config.resize(i)}registerSegment(e){return this.config.selectionStoreConnector.register(e)}registerRow(e,t){return this.config.selectionStoreConnector.registerRow(e,t).store}registerCol(e,t){return this.config.selectionStoreConnector.registerColumn(e,t).store}dataViewPort(e){const t={rowPinStart:$,rgRow:B,rowPinEnd:V};let r=0;return u.reduce(((o,i)=>{const s=e.viewports[i].store.get("realCount")||i==="rgRow";const a=Object.assign(Object.assign({},e),{position:Object.assign(Object.assign({},e.position),{y:s?r:d})});const n=F(a,i,t[i],i!=="rgRow");o.push(n);if(s){r++}return o}),[])}scrollToCell(e){for(let t in e){const r=e[t];if(typeof r==="number"){this.config.scrollingService.proxyScroll({dimension:t==="x"?"rgCol":"rgRow",coordinate:r})}}}clearFocused(){this.config.selectionStoreConnector.clearAll()}clearEdit(){this.config.selectionStoreConnector.setEdit(false)}getFocused(){const e=this.config.selectionStoreConnector.focusedStore;if(!e){return null}const t=this.config.selectionStoreConnector.storesXToType[e.position.x];const r=this.config.columnProvider.getColumn(e.cell.x,t);const o=this.config.selectionStoreConnector.storesYToType[e.position.y];const i=this.config.dataProvider.getModel(e.cell.y,o);return{column:r,model:i,cell:e.cell,colType:t,rowType:o}}getStoreCoordinateByType(e,t){const r=this.config.selectionStoreConnector.storesByType;if(typeof r[e]==="undefined"||typeof r[t]==="undefined"){return}return{x:r[e],y:r[t]}}setFocus(e,t,r,o){var i;const s=this.getStoreCoordinateByType(e,t);if(s){(i=this.config.selectionStoreConnector)===null||i===void 0?void 0:i.focusByCell(s,r,o)}}getSelectedRange(){const e=this.config.selectionStoreConnector.focusedStore;if(!e){return null}const t=this.config.selectionStoreConnector.storesXToType[e.position.x];const r=this.config.selectionStoreConnector.storesYToType[e.position.y];const o=e.entity.store.get("range");if(!o){return null}return Object.assign(Object.assign({},o),{colType:t,rowType:r})}setEdit(e,t,r,o){var i;const s=this.getStoreCoordinateByType(r,o);if(s){(i=this.config.selectionStoreConnector)===null||i===void 0?void 0:i.setEditByCell(s,{x:t,y:e})}}}class oe{constructor(e){this.setViewport=e;this.elements={}}async proxyScroll(e,t){var r;let o;let i=e;for(let i in this.elements){if(e.dimension==="rgCol"&&i==="headerRow"){continue}else if(this.isPinnedColumn(t)&&e.dimension==="rgCol"){if(i===t||!e.delta){continue}for(let t of this.elements[i]){if(t.changeScroll){o=t.changeScroll(e)}}}else{for(let t of this.elements[i]){await((r=t.setScroll)===null||r===void 0?void 0:r.call(t,e))}}}const s=await o;if(s){i=s}this.setViewport(i)}async scrollSilentService(e,t){var r;for(let o in this.elements){if(o===t){continue}if(g.includes(t)&&(o==="headerRow"||g.includes(o))){for(let t of this.elements[o]){await((r=t.changeScroll)===null||r===void 0?void 0:r.call(t,e,true))}continue}}}isPinnedColumn(e){return!!e&&["colPinStart","colPinEnd"].indexOf(e)>-1}registerElements(e){this.elements=e}registerElement(e,t){if(!this.elements[t]){this.elements[t]=[]}if(e){this.elements[t].push(e)}else if(this.elements[t]){delete this.elements[t]}}unregister(){this.elements={}}}class ie{constructor(){this.parentY=0}start(e,{pos:t,text:r,event:o}){var i;const{top:s}=e.getBoundingClientRect();this.parentY=s;if(this.text){this.text.innerText=r}this.move(t);this.moveTip({x:o.x,y:o.y});(i=this.el)===null||i===void 0?void 0:i.classList.remove("hidden")}end(){var e;(e=this.el)===null||e===void 0?void 0:e.classList.add("hidden")}move(e){this.moveElement(e.end-this.parentY)}moveTip({x:e,y:t}){if(!this.draggable){return}this.draggable.style.left=`${e}px`;this.draggable.style.top=`${t}px`}moveElement(e){if(!this.rgRow){return}this.rgRow.style.transform=`translateY(${e}px)`}}const se=({ref:t})=>{const r=new ie;t(r);return e("div",{class:"draggable-wrapper hidden",ref:e=>r.el=e},e("div",{class:"draggable",ref:e=>r.draggable=e},e("span",{class:"revo-alt-icon"}),e("span",{ref:e=>r.text=e})),e("div",{class:"drag-position",ref:e=>r.rgRow=e}))};const ae=(e=[])=>{const t={};for(const r of e){let e=t[r.type];if(!e){e=t[r.type]={}}if(r.size){if(!e.sizes){e.sizes={}}e.sizes[r.index]=r.size}}return t};const ne=(e=[])=>{const t={};for(const r of e){let e=t[r.type];if(!e){e=t[r.type]=[]}if(r.size){e.push(r.index)}}return t};function de(){return/Mobi/i.test(navigator.userAgent)||/Android/i.test(navigator.userAgent)||navigator.maxTouchPoints>0}class le extends m{constructor(e,t){super(e,t);e.setAttribute("dir","ltr");e.setAttribute("role","treegrid");e.setAttribute("aria-keyshortcuts","Enter");e.setAttribute("aria-multiselectable","true");e.setAttribute("tabindex","0");this.addEventListener("beforecolumnsset",(({detail:t})=>{const r=[...t.columns.colPinStart,...t.columns.rgCol,...t.columns.colPinEnd];e.setAttribute("aria-colcount",`${r.length}`);r.forEach(((e,t)=>{const{columnProperties:r,cellProperties:o}=e;e.columnProperties=(...e)=>{const o=(r===null||r===void 0?void 0:r(...e))||{};o.role="columnheader";o["aria-colindex"]=t;return o};e.cellProperties=(...e)=>{const r={["role"]:"gridcell",["aria-colindex"]:t,["aria-rowindex"]:e[0].rowIndex,["tabindex"]:-1};const i=(o===null||o===void 0?void 0:o(...e))||{};return Object.assign(Object.assign({},r),i)}}))}));this.addEventListener("beforesourceset",(({detail:t})=>{e.setAttribute("aria-rowcount",`${t.source.length}`)}));this.addEventListener("beforerowrender",(({detail:e})=>{e.node.t=Object.assign(Object.assign({},e.node.t),{role:"row",["aria-rowindex"]:e.item.itemIndex})}));this.addEventListener("afterfocus",(async e=>{if(e.defaultPrevented){return}const t=this.revogrid.querySelector(`revogr-data[type="${e.detail.rowType}"][col-type="${e.detail.colType}"] [data-rgrow="${e.detail.rowIndex}"][data-rgcol="${e.detail.colIndex}"]`);if(t instanceof HTMLElement){t.focus()}}))}}class he{constructor(){this.internalPlugins=[]}get(){return[...this.internalPlugins]}add(e){this.internalPlugins.push(e)}addUserPluginsAndCreate(e,t=[],r,o){if(!o){return}const i=(r===null||r===void 0?void 0:r.filter((e=>!t.some((t=>t===e)))))||[];i.forEach((e=>{var t,r;const o=this.internalPlugins.findIndex((t=>t instanceof e));if(o!==-1){(r=(t=this.internalPlugins[o]).destroy)===null||r===void 0?void 0:r.call(t);this.internalPlugins.splice(o,1)}}));t===null||t===void 0?void 0:t.forEach((t=>{const r=this.internalPlugins.find((e=>e instanceof t));if(r){return}this.add(new t(e,o))}))}getByClass(e){return this.internalPlugins.find((t=>t instanceof e))}remove(e){var t,r;const o=this.internalPlugins.indexOf(e);if(o>-1){(r=(t=this.internalPlugins[o]).destroy)===null||r===void 0?void 0:r.call(t);this.internalPlugins.splice(o,1)}}destroy(){this.internalPlugins.forEach((e=>{var t;return(t=e.destroy)===null||t===void 0?void 0:t.call(e)}));this.internalPlugins=[]}}const ce='.revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:"::"}.revo-alt-icon{-webkit-mask-image:url("data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'UTF-8\'%3F%3E%3Csvg viewBox=\'0 0 384 383\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'%3E%3Cg%3E%3Cpath d=\'M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'UTF-8\'%3F%3E%3Csvg viewBox=\'0 0 384 383\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'%3E%3Cg%3E%3Cpath d=\'M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.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}revo-grid[theme=default],revo-grid:not([theme]){border:1px solid #cecece;font-size:12px}revo-grid[theme=default] .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:-1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-header,revo-grid:not([theme]) revogr-header{text-align:center;line-height:30px;background-color:#f8f9fa}revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:#000}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 #cecece inset, 0 -1px 0 0 #cecece, 0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-header .rgHeaderCell.focused-cell,revo-grid:not([theme]) revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:#f8f9fa}revo-grid[theme=default] .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:#000}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 #cecece inset, 1px 0 0 0 #cecece inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid #cecece}revo-grid[theme=default] .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #cecece inset, -1px 0 0 0 #cecece inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 #cecece inset}revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset, 0 -1px 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data,revo-grid:not([theme]) revogr-data{text-align:center}revo-grid[theme=default] revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid[theme=default] revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:27px}revo-grid[theme=default] revogr-data .rgRow.focused-rgRow,revo-grid:not([theme]) revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=default] revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{box-shadow:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=default] revogr-data .rgCell.disabled,revo-grid:not([theme]) revogr-data .rgCell.disabled{background-color:0 -1px 0 0 #e2e3e3 inset, -1px 0 0 0 #e2e3e3 inset}revo-grid[theme=material]{font-family:Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}revo-grid[theme=material] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=material] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=material] revogr-header .header-rgRow{height:50px}revo-grid[theme=material] revogr-data{text-align:left}revo-grid[theme=material] revogr-data .rgRow{line-height:42px}revo-grid[theme=material] revogr-data .rgCell{padding:0 15px}revo-grid[theme=material] .rowHeaders{background-color:#f7faff}revo-grid[theme=material] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=material] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=material] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=material] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=material] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=material] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=material] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=material] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=darkMaterial]{font-family:Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#d8d8d8}revo-grid[theme=darkMaterial] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkMaterial] revogr-header .header-rgRow{height:50px}revo-grid[theme=darkMaterial] revogr-data{text-align:left}revo-grid[theme=darkMaterial] revogr-data .rgRow{line-height:42px}revo-grid[theme=darkMaterial] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkMaterial] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkMaterial] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkMaterial] revogr-edit{background-color:#28272b}revo-grid[theme=darkMaterial] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkMaterial] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkMaterial] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkMaterial] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=darkCompact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";color:#d8d8d8}revo-grid[theme=darkCompact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkCompact] revogr-header .header-rgRow{height:45px}revo-grid[theme=darkCompact] revogr-data{text-align:left}revo-grid[theme=darkCompact] revogr-data .rgRow{line-height:32px}revo-grid[theme=darkCompact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkCompact] .rowHeaders{background-color:rgba(40, 39, 43, 0.8)}revo-grid[theme=darkCompact] .rowHeaders revogr-data .rgCell{color:rgba(216, 216, 216, 0.8)}revo-grid[theme=darkCompact] revogr-edit{background-color:#28272b}revo-grid[theme=darkCompact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #404040, 0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.sortable:hover{background-color:rgba(64, 64, 64, 0.5)}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell.focused-cell{background:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #404040}revo-grid[theme=darkCompact] revogr-data .rgCell{color:rgba(216, 216, 216, 0.9)}revo-grid[theme=darkCompact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-data .rgRow.focused-rgRow{background-color:rgba(115, 148, 160, 0.15)}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #404040 inset}revo-grid[theme=darkCompact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #404040}revo-grid[theme=compact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"}revo-grid[theme=compact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=compact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=compact] revogr-header .header-rgRow{height:45px}revo-grid[theme=compact] revogr-data{text-align:left}revo-grid[theme=compact] revogr-data .rgRow{line-height:32px}revo-grid[theme=compact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=compact] .rowHeaders{background-color:#f7faff}revo-grid[theme=compact] .rowHeaders revogr-data .rgCell{color:#757a82}revo-grid[theme=compact] revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 #f1f1f1, 0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-header .rgHeaderCell.sortable:hover{background-color:#f1f1f1}revo-grid[theme=compact] revogr-header .rgHeaderCell.focused-cell{background:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] .footer-wrapper revogr-data{box-shadow:0 -1px 0 #f1f1f1}revo-grid[theme=compact] revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 #f1f1f1}revo-grid[theme=compact] revogr-data .rgRow{box-shadow:0 -1px 0 0 #f1f1f1 inset}revo-grid[theme=compact] revogr-data .rgRow.focused-rgRow{background-color:rgba(233, 234, 237, 0.5)}revo-grid[theme=compact] revogr-data .rgCell{color:rgba(0, 0, 0, 0.87)}revo-grid[theme=compact] revogr-data .rgCell.disabled{background-color:#f7f7f7}revo-grid[theme=compact] revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid{display:flex !important;height:100%;min-height:300px;font-family:Helvetica, Arial, Sans-Serif, serif;font-size:14px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;width:100%;height:100%}revo-grid .attribution{position:absolute;bottom:0;left:0;right:0;z-index:1000;width:0;height:0;border-left:4px solid rgba(38, 106, 232, 0.9);border-bottom:4px solid rgba(38, 106, 232, 0.9);border-top:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;bottom:0;left:0;background-color:rgba(255, 255, 255, 0.9);padding:4px;border-radius:4px;box-shadow:0 1px 10px rgba(0, 0, 0, 0.2);white-space:nowrap;text-decoration:none;color:black;letter-spacing:0.3px;font-size:11px;opacity:0;width:4px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-width:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:#fff;border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.15);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:black;position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:gray;pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}';const ge=ce;const ve=class{constructor(e){t(this,e);this.contentsizechanged=r(this,"contentsizechanged",7);this.beforeedit=r(this,"beforeedit",7);this.beforerangeedit=r(this,"beforerangeedit",7);this.afteredit=r(this,"afteredit",7);this.beforeautofill=r(this,"beforeautofill",7);this.beforerange=r(this,"beforerange",7);this.afterfocus=r(this,"afterfocus",7);this.roworderchanged=r(this,"roworderchanged",7);this.beforesorting=r(this,"beforesorting",7);this.beforesourcesortingapply=r(this,"beforesourcesortingapply",7);this.beforesortingapply=r(this,"beforesortingapply",7);this.rowdragstart=r(this,"rowdragstart",7);this.headerclick=r(this,"headerclick",7);this.beforecellfocus=r(this,"beforecellfocus",7);this.beforefocuslost=r(this,"beforefocuslost",7);this.beforesourceset=r(this,"beforesourceset",7);this.beforeanysource=r(this,"beforeanysource",7);this.aftersourceset=r(this,"aftersourceset",7);this.afteranysource=r(this,"afteranysource",7);this.beforecolumnsset=r(this,"beforecolumnsset",7);this.beforecolumnapplied=r(this,"beforecolumnapplied",7);this.aftercolumnsset=r(this,"aftercolumnsset",7);this.beforefilterapply=r(this,"beforefilterapply",7);this.beforefiltertrimmed=r(this,"beforefiltertrimmed",7);this.beforetrimmed=r(this,"beforetrimmed",7);this.aftertrimmed=r(this,"aftertrimmed",7);this.viewportscroll=r(this,"viewportscroll",7);this.beforeexport=r(this,"beforeexport",7);this.beforeeditstart=r(this,"beforeeditstart",7);this.aftercolumnresize=r(this,"aftercolumnresize",7);this.beforerowdefinition=r(this,"beforerowdefinition",7);this.filterconfigchanged=r(this,"filterconfigchanged",7);this.sortingconfigchanged=r(this,"sortingconfigchanged",7);this.rowheaderschanged=r(this,"rowheaderschanged",7);this.beforegridrender=r(this,"beforegridrender",7);this.aftergridrender=r(this,"aftergridrender",7);this.aftergridinit=r(this,"aftergridinit",7);this.additionaldatachanged=r(this,"additionaldatachanged",7);this.afterthemechanged=r(this,"afterthemechanged",7);this.created=r(this,"created",7);this.extraElements=[];this.pluginService=new he;this.viewport=null;this.isInited=false;this.rowHeaders=undefined;this.frameSize=1;this.rowSize=0;this.colSize=100;this.range=false;this.readonly=false;this.resize=false;this.canFocus=true;this.useClipboard=true;this.columns=[];this.source=[];this.pinnedTopSource=[];this.pinnedBottomSource=[];this.rowDefinitions=[];this.editors={};this.applyOnClose=false;this.plugins=[];this.columnTypes={};this.theme="default";this.rowClass="";this.autoSizeColumn=false;this.filter=false;this.sorting=undefined;this.focusTemplate=undefined;this.canMoveColumns=false;this.trimmedRows={};this.exporting=false;this.grouping=undefined;this.stretch=false;this.additionalData={};this.disableVirtualX=false;this.disableVirtualY=false;this.hideAttribution=false;this.jobsBeforeRender=[];this.registerVNode=[];this.accessible=true;this.canDrag=true}async refresh(e="all"){if(!this.dataProvider){throw new Error("Not connected")}this.dataProvider.refresh(e)}async setDataAt({row:e,col:t,colType:r="rgCol",rowType:o="rgRow",val:i,skipDataUpdate:s=false}){var a;if(this.dataProvider&&this.columnProvider&&!s){const s=(a=this.columnProvider.getColumn(t,r))===null||a===void 0?void 0:a.prop;if(typeof s!=="undefined"){this.dataProvider.setCellData({type:o,rowIndex:e,prop:s,val:i},false)}}const n=this.element.querySelector(`revogr-data[type="${o}"][col-type="${r}"]`);return n===null||n===void 0?void 0:n.updateCell({row:e,col:t})}async scrollToRow(e=0){if(!this.dimensionProvider){throw new Error("Not connected")}const t=this.dimensionProvider.getViewPortPos({coordinate:e,dimension:"rgRow"});await this.scrollToCoordinate({y:t})}async scrollToColumnIndex(e=0){if(!this.dimensionProvider){throw new Error("Not connected")}const t=this.dimensionProvider.getViewPortPos({coordinate:e,dimension:"rgCol"});await this.scrollToCoordinate({x:t})}async scrollToColumnProp(e,t="rgCol"){if(!this.dimensionProvider||!this.columnProvider){throw new Error("Not connected")}const r=this.columnProvider.getColumnIndexByProp(e,t);if(r<0){return}const o=this.dimensionProvider.getViewPortPos({coordinate:r,dimension:t});await this.scrollToCoordinate({x:o})}async updateColumns(e){var t;(t=this.columnProvider)===null||t===void 0?void 0:t.updateColumns(e)}async addTrimmed(e,t="external",r="rgRow"){if(!this.dataProvider){throw new Error("Not connected")}const o=this.beforetrimmed.emit({trimmed:e,trimmedType:t,type:r});if(o.defaultPrevented){return o}this.dataProvider.setTrimmed({[t]:o.detail.trimmed},r);this.aftertrimmed.emit();return o}async scrollToCoordinate(e){var t;(t=this.viewport)===null||t===void 0?void 0:t.scrollToCell(e)}async setCellEdit(e,t,r="rgRow"){var o;const i=l(this.columns,t);if(!i){return}await D();const s=i.pin||"rgCol";if(!this.columnProvider){throw new Error("Not connected")}(o=this.viewport)===null||o===void 0?void 0:o.setEdit(e,this.columnProvider.getColumnIndexByProp(t,s),s,r)}async setCellsFocus(e={x:0,y:0},t={x:0,y:0},r="rgCol",o="rgRow"){var i;(i=this.viewport)===null||i===void 0?void 0:i.setFocus(r,o,e,t)}async getSource(e="rgRow"){if(!this.dataProvider){throw new Error("Not connected")}return this.dataProvider.stores[e].store.get("source")}async getVisibleSource(e="rgRow"){if(!this.dataProvider){throw new Error("Not connected")}return z(this.dataProvider.stores[e].store)}async getSourceStore(e="rgRow"){if(!this.dataProvider){throw new Error("Not connected")}return this.dataProvider.stores[e].store}async getColumnStore(e="rgCol"){if(!this.columnProvider){throw new Error("Not connected")}return this.columnProvider.stores[e].store}async updateColumnSorting(e,t,r,o){if(!this.columnProvider){throw new Error("Not connected")}return this.columnProvider.updateColumnSorting(e,t,r,o)}async clearSorting(){if(!this.columnProvider){throw new Error("Not connected")}this.columnProvider.clearSorting()}async getColumns(){if(!this.columnProvider){throw new Error("Not connected")}return this.columnProvider.getColumns()}async clearFocus(){var e,t;const r=(e=this.viewport)===null||e===void 0?void 0:e.getFocused();const o=this.beforefocuslost.emit(r);if(o.defaultPrevented){return}(t=this.selectionStoreConnector)===null||t===void 0?void 0:t.clearAll()}async getPlugins(){return this.pluginService.get()}async getFocused(){var e,t;return(t=(e=this.viewport)===null||e===void 0?void 0:e.getFocused())!==null&&t!==void 0?t:null}async getContentSize(){var e;if(!this.dimensionProvider){throw new Error("Not connected")}return(e=this.dimensionProvider)===null||e===void 0?void 0:e.getFullSize()}async getSelectedRange(){var e,t;return(t=(e=this.viewport)===null||e===void 0?void 0:e.getSelectedRange())!==null&&t!==void 0?t:null}async refreshExtraElements(){var e;(e=this.extraService)===null||e===void 0?void 0:e.refresh()}mousedownHandle(e){const t=A(e,"screenX");const r=A(e,"screenY");if(t===null||r===null){return}this.clickTrackForFocusClear=t+r}async mouseupHandle(e){var t;const r=A(e,"screenX");const o=A(e,"screenY");if(r===null||o===null){return}if(e.defaultPrevented){return}const i=r+o;if(Math.abs(((t=this.clickTrackForFocusClear)!==null&&t!==void 0?t:0)-i)>10){return}const s=e.composedPath();if(!s.includes(this.element)&&!(this.element.shadowRoot&&s.includes(this.element.shadowRoot))){await this.clearFocus()}}onRowDragStarted(e){var t;const r=this.rowdragstart.emit(e.detail);if(r.defaultPrevented){e.preventDefault();return}(t=this.orderService)===null||t===void 0?void 0:t.start(this.element,Object.assign(Object.assign({},e.detail),r.detail))}onRowDragEnd(){var e;(e=this.orderService)===null||e===void 0?void 0:e.end()}onRowOrderChange(e){var t;(t=this.dataProvider)===null||t===void 0?void 0:t.changeOrder(e.detail)}onRowDrag({detail:e}){var t;(t=this.orderService)===null||t===void 0?void 0:t.move(e)}onRowMouseMove(e){var t;(t=this.orderService)===null||t===void 0?void 0:t.moveTip(e.detail)}async onCellEdit(e){var t;const{defaultPrevented:r,detail:o}=this.beforeedit.emit(e.detail);await D();if(!r){(t=this.dataProvider)===null||t===void 0?void 0:t.setCellData(o);this.afteredit.emit(o)}}onRangeEdit(e){if(!this.dataProvider){throw new Error("Not connected")}const{defaultPrevented:t,detail:r}=this.beforerangeedit.emit(e.detail);if(t){e.preventDefault();return}this.dataProvider.setRangeData(r.data,r.type);this.afteredit.emit(r)}onRangeChanged(e){const t=this.beforerange.emit(e.detail);if(t.defaultPrevented){e.preventDefault()}const r=this.beforeautofill.emit(t.detail);if(r.defaultPrevented){e.preventDefault()}}onRowDropped(e){const{defaultPrevented:t}=this.roworderchanged.emit(e.detail);if(t){e.preventDefault()}}onHeaderClick(e){const{defaultPrevented:t}=this.headerclick.emit(Object.assign(Object.assign({},e.detail.column),{originalEvent:e.detail.originalEvent}));if(t){e.preventDefault()}}onCellFocus(e){const{defaultPrevented:t}=this.beforecellfocus.emit(e.detail);if(!this.canFocus||t){e.preventDefault()}}columnTypesChanged(){this.columnChanged(this.columns)}columnChanged(e=[],t=undefined,r="columns",o=false){if(!this.dimensionProvider||!this.columnProvider){return}const i=h(e,0,this.columnTypes);const s=this.beforecolumnsset.emit(i);if(s.defaultPrevented){return}this.dimensionProvider.applyNewColumns(s.detail.columns,this.disableVirtualX,o);const a=this.beforecolumnapplied.emit(i);if(a.defaultPrevented){return}const n=this.columnProvider.setColumns(a.detail);this.aftercolumnsset.emit({columns:n,order:this.columnProvider.order})}disableVirtualXChanged(e=false,t=false){if(e===t){return}this.columnChanged(this.columns)}rowSizeChanged(e){if(!this.dimensionProvider){return}this.dimensionProvider.setSettings({originItemSize:e},"rgRow");this.rowDefChanged(this.rowDefinitions,this.rowDefinitions,"rowSize",true)}themeChanged(e,t,r="theme",o=false){if(!this.dimensionProvider){return}this.themeService.register(e);this.dimensionProvider.setSettings({originItemSize:this.themeService.rowSize},"rgRow");this.dimensionProvider.setSettings({originItemSize:this.colSize},"rgCol");if(!o){this.dimensionProvider.setSettings({originItemSize:this.themeService.rowSize},"rgRow");this.rowDefChanged(this.rowDefinitions,this.rowDefinitions,"theme",true)}this.afterthemechanged.emit(e)}dataSourceChanged(e=[],t,r){if(!this.dataProvider){return}let o="rgRow";switch(r){case"pinnedBottomSource":o="rowPinEnd";break;case"pinnedTopSource":o="rowPinStart";break;case"source":o="rgRow";const t=this.beforesourceset.emit({type:o,source:e});e=t.detail.source;break}const i=this.beforeanysource.emit({type:o,source:e});const s=[...i.detail.source];this.dataProvider.setData(s,o,this.disableVirtualY);if(r==="source"){this.aftersourceset.emit({type:o,source:e})}this.afteranysource.emit({type:o,source:e})}disableVirtualYChanged(e=false,t=false){if(e===t){return}this.dataSourceChanged(this.source,this.source,"source")}rowDefChanged(e,t,r,o=true){if(!this.dimensionProvider||!this.dataProvider){return}const{detail:{vals:i,oldVals:s}}=this.beforerowdefinition.emit({vals:e,oldVals:t});const a=ae(i);if(s){const e=ne(s);for(const t in e){if(e.hasOwnProperty(t)){const e=t;const r=this.dataProvider.stores[e];const o=r.store.get("source").length;this.dimensionProvider.clearSize(e,o)}}}u.forEach((e=>{var t;const r=a[e];if(r||o){(t=this.dimensionProvider)===null||t===void 0?void 0:t.setCustomSizes(e,(r===null||r===void 0?void 0:r.sizes)||{})}}))}trimmedRowsChanged(e={}){this.addTrimmed(e)}groupingChanged(e={}){var t;(t=this.pluginService.getByClass(w))===null||t===void 0?void 0:t.setGrouping(e||{})}applyStretch(e){if(!this.dimensionProvider||!this.dataProvider||!this.columnProvider||!this.viewportProvider){return}if(e==="false"){e=false}const t=this.getPluginData();if(!t){return}const r=this.pluginService.getByClass(b);if(typeof e==="boolean"&&e||e==="true"){if(!r){this.pluginService.add(new b(this.element,t))}else if(x(r)){r.applyStretch(this.columnProvider.getRawColumns())}}else if(r){this.pluginService.remove(r)}}applyFilter(e){this.filterconfigchanged.emit(e)}applySorting(e){this.sortingconfigchanged.emit(e)}rowHeadersChange(e){this.rowheaderschanged.emit(e)}registerOutsideVNodes(e=[]){this.extraElements=e}additionalDataChanged(e){this.additionaldatachanged.emit(e)}pluginsChanged(e=[],t){this.pluginService.addUserPluginsAndCreate(this.element,e,t,this.getPluginData())}setPlugins(){this.removePlugins();const e=this.getPluginData();if(!e){return}this.setCorePlugins(e);this.pluginsChanged(this.plugins)}setCorePlugins(e){if(this.accessible){this.pluginService.add(new le(this.element,e))}if(this.autoSizeColumn){this.pluginService.add(new C(this.element,e,typeof this.autoSizeColumn==="object"?this.autoSizeColumn:undefined))}if(this.filter){this.pluginService.add(new y(this.element,e,typeof this.filter==="object"?this.filter:undefined))}if(this.exporting){this.pluginService.add(new S(this.element,e))}this.pluginService.add(new k(this.element,e));this.pluginService.add(new w(this.element,e));if(this.canMoveColumns){this.pluginService.add(new R(this.element,e))}}getPluginData(){if(!this.dimensionProvider||!this.dataProvider||!this.columnProvider||!this.viewportProvider||!this.selectionStoreConnector){return}const e={data:this.dataProvider,column:this.columnProvider,dimension:this.dimensionProvider,viewport:this.viewportProvider,selection:this.selectionStoreConnector,plugins:this.pluginService};return e}removePlugins(){this.pluginService.destroy()}connectedCallback(){if(this.isInited){this.setPlugins()}this.created.emit()}componentWillLoad(){var e;this.viewportProvider=new ee;this.themeService=new _({rowSize:this.rowSize});this.dimensionProvider=new Q(this.viewportProvider,{realSizeChanged:e=>this.contentsizechanged.emit(e)});this.columnProvider=new q;this.selectionStoreConnector=new c;this.dataProvider=new J(this.dimensionProvider);this.registerOutsideVNodes(this.registerVNode);this.setPlugins();this.applyStretch(this.stretch);this.themeChanged(this.theme,undefined,undefined,true);this.columnChanged(this.columns,undefined,undefined,true);this.dataSourceChanged(this.source,undefined,"source");this.dataSourceChanged(this.pinnedTopSource,undefined,"pinnedTopSource");this.dataSourceChanged(this.pinnedBottomSource,undefined,"pinnedBottomSource");if(Object.keys((e=this.trimmedRows)!==null&&e!==void 0?e:{}).length>0){this.trimmedRowsChanged(this.trimmedRows)}this.rowDefChanged(this.rowDefinitions);if(this.grouping&&Object.keys(this.grouping).length>0){this.groupingChanged(this.grouping)}this.scrollingService=new oe((e=>{var t;(t=this.dimensionProvider)===null||t===void 0?void 0:t.setViewPortCoordinate({coordinate:e.coordinate,type:e.dimension});this.viewportscroll.emit(e)}));this.aftergridinit.emit();this.isInited=true}componentWillRender(){const e=this.beforegridrender.emit();if(e.defaultPrevented){return false}return Promise.all(this.jobsBeforeRender)}componentDidRender(){this.aftergridrender.emit()}render(){if(!this.dimensionProvider||!this.dataProvider||!this.columnProvider||!this.viewportProvider||!this.selectionStoreConnector){return}const t=this.dimensionProvider.stores["rgRow"].store.get("realSize");this.viewport=new re({columnProvider:this.columnProvider,dataProvider:this.dataProvider,dimensionProvider:this.dimensionProvider,viewportProvider:this.viewportProvider,scrollingService:this.scrollingService,orderService:this.orderService,selectionStoreConnector:this.selectionStoreConnector,disableVirtualX:this.disableVirtualX,disableVirtualY:this.disableVirtualY,resize:e=>this.aftercolumnresize.emit(e)},t);const r=[];if(this.rowHeaders&&this.viewport.columns.length){const o=this.viewport.columns[0];r.push(e("revogr-row-headers",{additionalData:this.additionalData,height:t,rowClass:this.rowClass,resize:this.resize,dataPorts:o.dataPorts,headerProp:o.headerProp,jobsBeforeRender:this.jobsBeforeRender,rowHeaderColumn:typeof this.rowHeaders==="object"?this.rowHeaders:undefined,onScrollview:({detail:e})=>this.scrollingService.proxyScroll(e,"headerRow"),onRef:({detail:e})=>this.scrollingService.registerElement(e,"headerRow")}))}const i=de();const s=[];for(let t of this.viewport.columns){const r=Object.assign(Object.assign({},t.headerProp),{type:t.type,additionalData:this.additionalData,viewportCol:t.viewportCol,selectionStore:t.columnSelectionStore,canResize:this.resize,readonly:this.readonly,columnFilter:!!this.filter});const o=[e("revogr-header",Object.assign({},r,{slot:$}))];t.dataPorts.forEach((r=>{const s=`${r.type}_${t.type}`;const a=e("revogr-overlay-selection",Object.assign({},r,{canDrag:this.canDrag&&r.canDrag,isMobileDevice:i,onSelectall:()=>{var e;return(e=this.selectionStoreConnector)===null||e===void 0?void 0:e.selectAll()},editors:this.editors,readonly:this.readonly,range:this.range,useClipboard:this.useClipboard,applyChangesOnClose:this.applyOnClose,additionalData:this.additionalData,slot:r.slot,onBeforenextvpfocus:e=>{var t;return(t=this.selectionStoreConnector)===null||t===void 0?void 0:t.beforeNextFocusCell(e.detail)},onCanceledit:()=>{var e;return(e=this.selectionStoreConnector)===null||e===void 0?void 0:e.setEdit(false)},onSetedit:({detail:e})=>{var t;const r=this.beforeeditstart.emit(e);if(!r.defaultPrevented){(t=this.selectionStoreConnector)===null||t===void 0?void 0:t.setEdit(e.val)}}}),e("revogr-data",Object.assign({},r,{colType:t.type,key:s,readonly:this.readonly,range:this.range,rowClass:this.rowClass,rowSelectionStore:r.rowSelectionStore,additionalData:this.additionalData,jobsBeforeRender:this.jobsBeforeRender,slot:U}),e("slot",{name:`data-${t.type}-${r.type}`})),e("revogr-temp-range",{selectionStore:r.selectionStore,dimensionRow:r.dimensionRow,dimensionCol:r.dimensionCol}),e("revogr-focus",{colData:r.colData,dataStore:r.dataStore,focusTemplate:this.focusTemplate,rowType:r.type,colType:t.type,selectionStore:r.selectionStore,dimensionRow:r.dimensionRow,dimensionCol:r.dimensionCol},e("slot",{name:`focus-${t.type}-${r.type}`})));o.push(a)}));s.push(e("revogr-viewport-scroll",Object.assign({},t.prop,{ref:e=>this.scrollingService.registerElement(e,`${t.prop.key}`),onScrollviewport:e=>this.scrollingService.proxyScroll(e.detail,`${t.prop.key}`),onScrollviewportsilent:e=>this.scrollingService.scrollSilentService(e.detail,`${t.prop.key}`)}),o))}r.push(s);const a="rgRow";const n="rgCol";const d=this.viewportProvider.stores;const l=this.dimensionProvider.stores;return e(o,null,this.hideAttribution?null:e("revogr-attribution",{class:"attribution"}),e("slot",{name:"header"}),e("div",{class:"main-viewport",onClick:e=>{var t;if(e.currentTarget===e.target){(t=this.viewport)===null||t===void 0?void 0:t.clearEdit()}}},e("div",{class:"viewports"},e("slot",{name:"viewport"}),r,e("revogr-scroll-virtual",{class:"vertical",dimension:a,viewportStore:d[a].store,dimensionStore:l[a].store,ref:e=>this.scrollingService.registerElement(e,"rowScroll"),onScrollvirtual:e=>this.scrollingService.proxyScroll(e.detail)}),e(se,{ref:e=>this.orderService=e}))),e("revogr-scroll-virtual",{class:"horizontal",dimension:n,viewportStore:d[n].store,dimensionStore:l[n].store,ref:e=>this.scrollingService.registerElement(e,"colScroll"),onScrollvirtual:e=>this.scrollingService.proxyScroll(e.detail)}),e("revogr-extra",{ref:e=>this.extraService=e,nodes:this.extraElements}),e("slot",{name:"footer"}))}disconnectedCallback(){this.removePlugins()}get element(){return i(this)}static get watchers(){return{columnTypes:["columnTypesChanged"],columns:["columnChanged"],disableVirtualX:["disableVirtualXChanged"],rowSize:["rowSizeChanged"],theme:["themeChanged"],source:["dataSourceChanged"],pinnedBottomSource:["dataSourceChanged"],pinnedTopSource:["dataSourceChanged"],disableVirtualY:["disableVirtualYChanged"],rowDefinitions:["rowDefChanged"],trimmedRows:["trimmedRowsChanged"],grouping:["groupingChanged"],stretch:["applyStretch"],filter:["applyFilter"],sorting:["applySorting"],rowHeaders:["rowHeadersChange"],registerVNode:["registerOutsideVNodes"],additionalData:["additionalDataChanged"],plugins:["pluginsChanged"]}}};ve.style=ge;export{ve as revo_grid};
+import { h, r as registerInstance, c as createEvent, H as Host, a as getElement } from './index-f6fae858.js';
+import { H as reduce, A as getColumnType, B as getColumnSizes, K as EMPTY_INDEX, F as getColumnByProp, D as getColumns, L as SelectionStoreConnector } from './column.service-f39c0a1d.js';
+import { c as columnTypes, o as forEach, r as rowTypes, i as isRowType, D as DimensionStore, B as BasePlugin, G as GroupingRowPlugin, S as StretchColumn, a as isStretchPlugin, A as AutoSizeColumnPlugin, f as FilterPlugin, E as ExportFilePlugin, n as SortingPlugin, C as ColumnMovePlugin } from './column.drag.plugin-d201beb7.js';
+import { D as DataStore, b as getSourceItem, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, a as getVisibleSourceItem, h as gatherTrimmedItems, k as getItemByIndex, R as RESIZE_INTERVAL, u as timeout } from './dimension.helpers-5567e424.js';
+import { d as debounce } from './debounce-b3166f78.js';
+import { V as ViewportStore } from './viewport.store-c18a25a6.js';
+import { v as viewportDataPartition, H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT, D as DATA_SLOT } from './viewport.helpers-7e7f9dad.js';
+import { g as getPropertyFromEvent } from './events-cf0893a3.js';
+import './filter.button-84396156.js';
+import './header-cell-renderer-31f53644.js';
+
+class ThemeCompact {
+    constructor() {
+        this.defaultRowSize = 32;
+    }
+}
+
+class ThemeDefault {
+    constructor() {
+        this.defaultRowSize = 27;
+    }
+}
+
+class ThemeMaterial {
+    constructor() {
+        this.defaultRowSize = 42;
+    }
+}
+
+const DEFAULT_THEME = 'default';
+const allowedThemes = [
+    DEFAULT_THEME,
+    'material',
+    'compact',
+    'darkMaterial',
+    'darkCompact',
+];
+class ThemeService {
+    get theme() {
+        return this.currentTheme;
+    }
+    get rowSize() {
+        return this.customRowSize || this.currentTheme.defaultRowSize;
+    }
+    set rowSize(size) {
+        this.customRowSize = size;
+    }
+    constructor(cfg) {
+        this.customRowSize = 0;
+        this.customRowSize = cfg.rowSize;
+        this.register('default');
+    }
+    register(theme) {
+        const parsedTheme = getTheme(theme);
+        switch (parsedTheme) {
+            case 'material':
+            case 'darkMaterial':
+                this.currentTheme = new ThemeMaterial();
+                break;
+            case 'compact':
+            case 'darkCompact':
+                this.currentTheme = new ThemeCompact();
+                break;
+            default:
+                this.currentTheme = new ThemeDefault();
+                break;
+        }
+    }
+}
+function getTheme(theme) {
+    if (theme && allowedThemes.indexOf(theme) > -1) {
+        return theme;
+    }
+    return DEFAULT_THEME;
+}
+
+class ColumnDataProvider {
+    get order() {
+        const order = {};
+        const sorting = this.sorting;
+        if (sorting) {
+            Object.keys(sorting).forEach(prop => {
+                order[prop] = sorting[prop].order;
+            });
+        }
+        return order;
+    }
+    get stores() {
+        return this.dataSources;
+    }
+    constructor() {
+        this.sorting = null;
+        this.collection = null;
+        this.dataSources = columnTypes.reduce((sources, k) => {
+            sources[k] = new DataStore(k);
+            return sources;
+        }, {});
+    }
+    column(c, type = 'rgCol') {
+        return this.getColumn(c, type);
+    }
+    getColumn(virtualIndex, type) {
+        return getSourceItem(this.dataSources[type].store, virtualIndex);
+    }
+    getRawColumns() {
+        return reduce(this.dataSources, (result, item, type) => {
+            result[type] = item.store.get('source');
+            return result;
+        }, {
+            rgCol: [],
+            colPinStart: [],
+            colPinEnd: [],
+        });
+    }
+    getColumns(type = 'all') {
+        const columnsByType = this.getRawColumns();
+        if (type !== 'all') {
+            return columnsByType[type];
+        }
+        return columnTypes.reduce((r, t) => [...r, ...columnsByType[t]], []);
+    }
+    getColumnIndexByProp(prop, type) {
+        return getSourceItemVirtualIndexByProp(this.dataSources[type].store, prop);
+    }
+    getColumnByProp(prop) {
+        var _a;
+        return (_a = this.collection) === null || _a === void 0 ? void 0 : _a.columnByProp[prop];
+    }
+    refreshByType(type) {
+        this.dataSources[type].refresh();
+    }
+    /**
+     * Main method to set columns
+     */
+    setColumns(data) {
+        columnTypes.forEach(k => {
+            // set columns data
+            this.dataSources[k].updateData(data.columns[k], {
+                // max depth level
+                depth: data.maxLevel,
+                // groups
+                groups: data.columnGrouping[k].reduce((res, g) => {
+                    if (!res[g.level]) {
+                        res[g.level] = [];
+                    }
+                    res[g.level].push(g);
+                    return res;
+                }, {}),
+            });
+        });
+        this.sorting = data.sort;
+        this.collection = data;
+        return data;
+    }
+    /**
+     * Used in plugins
+     * Modify columns in store
+     */
+    updateColumns(updatedColumns) {
+        // collect column by type and propert
+        const columnByKey = updatedColumns.reduce((res, c) => {
+            const type = getColumnType(c);
+            if (!res[type]) {
+                res[type] = {};
+            }
+            res[type][c.prop] = c;
+            return res;
+        }, {});
+        // find indexes in source
+        const colByIndex = {};
+        for (const t in columnByKey) {
+            if (!columnByKey.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            const colsToUpdate = columnByKey[type];
+            const sourceItems = this.dataSources[type].store.get('source');
+            colByIndex[type] = {};
+            for (let i = 0; i < sourceItems.length; i++) {
+                const column = sourceItems[i];
+                const colToUpdateIfExists = colsToUpdate === null || colsToUpdate === void 0 ? void 0 : colsToUpdate[column.prop];
+                // update column if exists in source
+                if (colToUpdateIfExists) {
+                    colByIndex[type][i] = colToUpdateIfExists;
+                }
+            }
+        }
+        for (const t in colByIndex) {
+            if (!colByIndex.hasOwnProperty(t)) {
+                continue;
+            }
+            const type = t;
+            setSourceByPhysicalIndex(this.dataSources[type].store, colByIndex[type] || {});
+        }
+    }
+    updateColumn(column, index) {
+        const type = getColumnType(column);
+        setSourceByVirtualIndex(this.dataSources[type].store, { [index]: column });
+    }
+    updateColumnSorting(column, index, sorting, additive) {
+        if (!additive) {
+            this.clearSorting();
+        }
+        column.order = sorting;
+        if (!this.sorting) {
+            this.sorting = {};
+        }
+        this.sorting[column.prop] = column;
+        this.updateColumn(column, index);
+        return column;
+    }
+    clearSorting() {
+        const types = reduce(this.sorting, (r, c) => {
+            const k = getColumnType(c);
+            r[k] = true;
+            return r;
+        }, {});
+        forEach(types, (_, type) => {
+            const cols = this.dataSources[type].store.get('source');
+            forEach(cols, (c) => (c.order = undefined));
+            this.dataSources[type].setData({ source: [...cols] });
+        });
+        this.sorting = {};
+    }
+}
+
+/**
+ * Data source provider
+ *
+ * @dependsOn DimensionProvider
+ */
+class DataProvider {
+    constructor(dimensionProvider) {
+        this.dimensionProvider = dimensionProvider;
+        this.stores = reduce(rowTypes, (sources, k) => {
+            sources[k] = new DataStore(k);
+            return sources;
+        }, {});
+    }
+    setData(data, type = 'rgRow', disableVirtualRows = false, grouping, silent = false) {
+        // set rgRow data
+        this.stores[type].updateData([...data], grouping, silent);
+        // for pinned row no need virtual data
+        const noVirtual = type !== 'rgRow' || disableVirtualRows;
+        this.dimensionProvider.setData(data.length, type, noVirtual);
+        return data;
+    }
+    getModel(virtualIndex, type = 'rgRow') {
+        const store = this.stores[type].store;
+        return getSourceItem(store, virtualIndex);
+    }
+    changeOrder({ rowType = 'rgRow', from, to }) {
+        const storeService = this.stores[rowType];
+        // take currently visible row indexes
+        const newItemsOrder = [...storeService.store.get('proxyItems')];
+        const prevItems = storeService.store.get('items');
+        // take out
+        const toMove = newItemsOrder.splice(newItemsOrder.indexOf(prevItems[from]), // get index in proxy
+        1);
+        // insert before
+        newItemsOrder.splice(newItemsOrder.indexOf(prevItems[to]), // get index in proxy
+        0, ...toMove);
+        storeService.setData({
+            proxyItems: newItemsOrder,
+        });
+        // take currently visible row indexes
+        const newItems = storeService.store.get('items');
+        this.dimensionProvider.updateSizesPositionByNewDataIndexes(rowType, newItems, prevItems);
+    }
+    setCellData({ type, rowIndex, prop, val }, mutate = true) {
+        const model = this.getModel(rowIndex, type);
+        model[prop] = val;
+        this.stores[type].setSourceData({ [rowIndex]: model }, mutate);
+    }
+    setRangeData(data, type) {
+        const items = {};
+        for (let rowIndex in data) {
+            const oldModel = (items[rowIndex] = getSourceItem(this.stores[type].store, parseInt(rowIndex, 10)));
+            if (!oldModel) {
+                continue;
+            }
+            for (let prop in data[rowIndex]) {
+                oldModel[prop] = data[rowIndex][prop];
+            }
+        }
+        this.stores[type].setSourceData(items);
+    }
+    refresh(type = 'all') {
+        if (isRowType(type)) {
+            this.refreshItems(type);
+        }
+        rowTypes.forEach((t) => this.refreshItems(t));
+    }
+    refreshItems(type = 'rgRow') {
+        const items = this.stores[type].store.get('items');
+        this.stores[type].setData({ items: [...items] });
+    }
+    setGrouping({ depth }, type = 'rgRow') {
+        this.stores[type].setData({ groupingDepth: depth });
+    }
+    setTrimmed(trimmed, type = 'rgRow') {
+        const store = this.stores[type];
+        store.addTrimmed(trimmed);
+        this.dimensionProvider.setTrimmed(trimmed, type);
+        if (type === 'rgRow') {
+            this.dimensionProvider.setData(getVisibleSourceItem(store.store).length, type);
+        }
+    }
+}
+
+/**
+ * Dimension provider
+ * Stores dimension information and custom sizes
+ *
+ * @dependsOn ViewportProvider
+ */
+class DimensionProvider {
+    constructor(viewports, config) {
+        this.viewports = viewports;
+        const sizeChanged = debounce((k) => config.realSizeChanged(k), RESIZE_INTERVAL);
+        this.stores = reduce([...rowTypes, ...columnTypes], (sources, t) => {
+            sources[t] = new DimensionStore(t);
+            sources[t].store.onChange('realSize', () => sizeChanged(t));
+            return sources;
+        }, {});
+    }
+    /**
+     * Clear old sizes from dimension and viewports
+     * @param type - dimension type
+     * @param count - count of items
+     */
+    clearSize(t, count) {
+        this.stores[t].drop();
+        // after we done with drop trigger viewport recalculaction
+        this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get('originItemSize'));
+        this.setItemCount(count, t);
+    }
+    /**
+     * Apply new custom sizes to dimension and view port
+     * @param type - dimension type
+     * @param sizes - new custom sizes
+     * @param keepOld - keep old sizes merge new with old
+     */
+    setCustomSizes(type, sizes, keepOld = false) {
+        let newSizes = sizes;
+        if (keepOld) {
+            const oldSizes = this.stores[type].store.get('sizes');
+            newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
+        }
+        this.stores[type].setDimensionSize(newSizes);
+        this.setViewPortCoordinate({
+            type,
+            force: true,
+        });
+    }
+    setItemCount(realCount, type) {
+        this.viewports.stores[type].setViewport({ realCount });
+        this.stores[type].setStore({ count: realCount });
+    }
+    /**
+     * Apply trimmed items
+     * @param trimmed - trimmed items
+     * @param type
+     */
+    setTrimmed(trimmed, type) {
+        const allTrimmed = gatherTrimmedItems(trimmed);
+        const dimStoreType = this.stores[type];
+        dimStoreType.setStore({ trimmed: allTrimmed });
+        this.setViewPortCoordinate({
+            type,
+            force: true,
+        });
+    }
+    /**
+     * Sets dimension data and viewport coordinate
+     * @param itemCount
+     * @param type - dimension type
+     * @param noVirtual - disable virtual data
+     */
+    setData(itemCount, type, noVirtual = false) {
+        this.setItemCount(itemCount, type);
+        // Virtualization will get disabled
+        if (noVirtual) {
+            const dimension = this.stores[type].getCurrentState();
+            this.viewports.stores[type].setViewport({
+                virtualSize: dimension.realSize,
+            });
+        }
+        this.setViewPortCoordinate({
+            type,
+        });
+    }
+    /**
+     * Applies new columns to the dimension provider
+     * @param columns - new columns data
+     * @param disableVirtualX - disable virtual data for X axis
+     */
+    applyNewColumns(columns, disableVirtualX, keepOld = false) {
+        // Apply new columns to dimension provider
+        for (let type of columnTypes) {
+            if (!keepOld) {
+                // Clear existing data in the dimension provider
+                this.stores[type].drop();
+            }
+            // Get the new columns for the current type
+            const items = columns[type];
+            // Determine if virtual data should be disabled for the current type
+            const noVirtual = type !== 'rgCol' || disableVirtualX;
+            // Set the items count in the dimension provider
+            this.stores[type].setStore({ count: items.length });
+            // Set the custom sizes for the columns
+            const newSizes = getColumnSizes(items);
+            this.stores[type].setDimensionSize(newSizes);
+            // Update the viewport with new data
+            const vpUpdate = {
+                // This triggers drop on realCount change
+                realCount: items.length,
+            };
+            // If virtual data is disabled, set the virtual size to the real size
+            if (noVirtual) {
+                vpUpdate.virtualSize = this.stores[type].getCurrentState().realSize;
+            }
+            // Update the viewport
+            this.viewports.stores[type].setViewport(vpUpdate);
+            this.setViewPortCoordinate({
+                type,
+            });
+        }
+    }
+    /**
+     * Gets the full size of the grid by summing up the sizes of all dimensions
+     * Goes through all dimensions columnTypes (x) and rowTypes (y) and sums up their sizes
+     */
+    getFullSize() {
+        var _a, _b;
+        let x = 0;
+        let y = 0;
+        for (let type of columnTypes) {
+            x += ((_a = this.stores[type]) === null || _a === void 0 ? void 0 : _a.store.get('realSize')) || 0;
+        }
+        for (let type of rowTypes) {
+            y += ((_b = this.stores[type]) === null || _b === void 0 ? void 0 : _b.store.get('realSize')) || 0;
+        }
+        return { y, x };
+    }
+    setViewPortCoordinate({ type, coordinate = this.viewports.stores[type].lastCoordinate, force = false, }) {
+        const dimension = this.stores[type].getCurrentState();
+        this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
+    }
+    getViewPortPos(e) {
+        const dimension = this.stores[e.dimension].getCurrentState();
+        const item = getItemByIndex(dimension, e.coordinate);
+        return item.start;
+    }
+    setSettings(data, dimensionType) {
+        let stores = [];
+        switch (dimensionType) {
+            case 'rgCol':
+                stores = columnTypes;
+                break;
+            case 'rgRow':
+                stores = rowTypes;
+                break;
+        }
+        for (let s of stores) {
+            this.stores[s].setStore(data);
+        }
+    }
+    updateSizesPositionByNewDataIndexes(type, newItemsOrder, prevItemsOrder = []) {
+        // Move custom sizes to new order
+        this.stores[type].updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder);
+        this.setViewPortCoordinate({
+            type,
+            force: true,
+        });
+    }
+}
+
+class ViewportProvider {
+    constructor() {
+        this.stores = reduce([...rowTypes, ...columnTypes], (sources, k) => {
+            sources[k] = new ViewportStore(k);
+            return sources;
+        }, {});
+    }
+    setViewport(type, data) {
+        this.stores[type].setViewport(data);
+    }
+}
+
+/** Collect Column data */
+function gatherColumnData(data) {
+    const colDimension = data.dimensions[data.colType].store;
+    const realWidth = colDimension.get('realSize');
+    const prop = {
+        contentWidth: realWidth,
+        class: data.colType,
+        contentHeight: data.contentHeight,
+        key: data.colType,
+        colType: data.colType,
+        onResizeviewport: data.onResizeviewport,
+        // set viewport size to real size
+        style: data.fixWidth ? { minWidth: `${realWidth}px` } : undefined,
+    };
+    const headerProp = {
+        colData: getVisibleSourceItem(data.colStore),
+        dimensionCol: colDimension,
+        type: data.colType,
+        groups: data.colStore.get('groups'),
+        groupingDepth: data.colStore.get('groupingDepth'),
+        resizeHandler: data.colType === 'colPinEnd' ? ['l'] : undefined,
+        onHeaderresize: data.onHeaderresize,
+    };
+    return {
+        prop,
+        type: data.colType,
+        position: data.position,
+        headerProp,
+        viewportCol: data.viewports[data.colType].store,
+    };
+}
+class ViewportService {
+    constructor(config, contentHeight) {
+        var _a, _b;
+        this.config = config;
+        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
+        // ----------- Handle columns ----------- //
+        // Transform data from stores and apply it to different components
+        const columns = [];
+        let x = 0; // we increase x only if column present
+        columnTypes.forEach(val => {
+            const colStore = config.columnProvider.stores[val].store;
+            // only columns that have data show
+            if (!colStore.get('items').length) {
+                return;
+            }
+            const column = {
+                colType: val,
+                position: { x, y: 1 },
+                contentHeight,
+                // only central column has dynamic width
+                fixWidth: val !== 'rgCol',
+                viewports: config.viewportProvider.stores,
+                dimensions: config.dimensionProvider.stores,
+                rowStores: config.dataProvider.stores,
+                colStore,
+                onHeaderresize: e => this.onColumnResize(val, e, colStore),
+            };
+            if (val === 'rgCol') {
+                column.onResizeviewport = (e) => {
+                    var _a;
+                    const vpState = {
+                        clientSize: e.detail.size,
+                    };
+                    // virtual size will be handled by dimension provider if disabled
+                    if ((e.detail.dimension === 'rgRow' && !config.disableVirtualY)
+                        || (e.detail.dimension === 'rgCol' && !config.disableVirtualX)) {
+                        vpState.virtualSize = e.detail.size;
+                    }
+                    (_a = config.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, vpState);
+                };
+            }
+            const colData = gatherColumnData(column);
+            const columnSelectionStore = this.registerCol(colData.position.x, val);
+            // render per each column data collections vertically
+            const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
+                // register selection store for Segment
+                const segmentSelection = this.registerSegment(rgRow.position);
+                segmentSelection.setLastCell(rgRow.lastCell);
+                // register selection store for Row
+                const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
+                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
+                        segmentSelection.setRangeArea(e.detail);
+                    }, onSettemprange: e => segmentSelection.setTempArea(e.detail), onFocuscell: e => {
+                        // todo: multi focus
+                        segmentSelection.clearFocus();
+                        config.selectionStoreConnector.focus(segmentSelection, e.detail);
+                    } });
+                r.push(rowDef);
+                return r;
+            }, []);
+            columns.push(Object.assign(Object.assign({}, colData), { columnSelectionStore,
+                dataPorts }));
+            x++;
+        });
+        this.columns = columns;
+        // ----------- Handle columns end ----------- //
+        (_b = this.config.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
+    }
+    onColumnResize(type, { detail }, store) {
+        var _a;
+        // apply to dimension provider
+        (_a = this.config.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
+        // set resize event
+        const changedItems = {};
+        for (const [i, size] of Object.entries(detail || {})) {
+            const virtualIndex = parseInt(i, 10);
+            const item = getSourceItem(store, virtualIndex);
+            if (item) {
+                changedItems[virtualIndex] = Object.assign(Object.assign({}, item), { size });
+            }
+        }
+        this.config.resize(changedItems);
+    }
+    /** register selection store for Segment */
+    registerSegment(position) {
+        return this.config.selectionStoreConnector.register(position);
+    }
+    /** register selection store for Row */
+    registerRow(y, type) {
+        return this.config.selectionStoreConnector.registerRow(y, type).store;
+    }
+    /** register selection store for Column */
+    registerCol(x, type) {
+        return this.config.selectionStoreConnector.registerColumn(x, type).store;
+    }
+    /** Collect Row data */
+    dataViewPort(data) {
+        const slots = {
+            rowPinStart: HEADER_SLOT,
+            rgRow: CONTENT_SLOT,
+            rowPinEnd: FOOTER_SLOT,
+        };
+        // y position for selection
+        let y = 0;
+        return rowTypes.reduce((result, type) => {
+            // filter out empty sources, we still need to return source to keep slot working
+            const isPresent = data.viewports[type].store.get('realCount') || type === 'rgRow';
+            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y: isPresent ? y : EMPTY_INDEX }) });
+            const partition = viewportDataPartition(rgCol, type, slots[type], type !== 'rgRow');
+            result.push(partition);
+            if (isPresent) {
+                y++;
+            }
+            return result;
+        }, []);
+    }
+    scrollToCell(cell) {
+        for (let key in cell) {
+            const coordinate = cell[key];
+            if (typeof coordinate === 'number') {
+                this.config.scrollingService.proxyScroll({
+                    dimension: key === 'x' ? 'rgCol' : 'rgRow',
+                    coordinate,
+                });
+            }
+        }
+    }
+    /**
+     * Clear current grid focus
+     */
+    clearFocused() {
+        this.config.selectionStoreConnector.clearAll();
+    }
+    clearEdit() {
+        this.config.selectionStoreConnector.setEdit(false);
+    }
+    /**
+     * Collect focused element data
+     */
+    getFocused() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        const column = this.config.columnProvider.getColumn(focused.cell.x, colType);
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const model = this.config.dataProvider.getModel(focused.cell.y, rowType);
+        return {
+            column,
+            model,
+            cell: focused.cell,
+            colType,
+            rowType,
+        };
+    }
+    getStoreCoordinateByType(colType, rowType) {
+        const stores = this.config.selectionStoreConnector.storesByType;
+        if (typeof stores[colType] === 'undefined' || typeof stores[rowType] === 'undefined') {
+            return;
+        }
+        return {
+            x: stores[colType],
+            y: stores[rowType],
+        };
+    }
+    setFocus(colType, rowType, start, end) {
+        var _a;
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(coordinate, start, end);
+        }
+    }
+    getSelectedRange() {
+        const focused = this.config.selectionStoreConnector.focusedStore;
+        if (!focused) {
+            return null;
+        }
+        // get column data
+        const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+        // get row data
+        const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+        const range = focused.entity.store.get('range');
+        if (!range) {
+            return null;
+        }
+        return Object.assign(Object.assign({}, range), { colType,
+            rowType });
+    }
+    setEdit(rowIndex, colIndex, colType, rowType) {
+        var _a;
+        const coordinate = this.getStoreCoordinateByType(colType, rowType);
+        if (coordinate) {
+            (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(coordinate, { x: colIndex, y: rowIndex });
+        }
+    }
+}
+
+class GridScrollingService {
+    constructor(setViewport) {
+        this.setViewport = setViewport;
+        this.elements = {};
+    }
+    async proxyScroll(e, key) {
+        var _a;
+        let newEventPromise;
+        let event = e;
+        for (let elKey in this.elements) {
+            // skip
+            if (e.dimension === 'rgCol' && elKey === 'headerRow') {
+                continue;
+                // pinned column only
+            }
+            else if (this.isPinnedColumn(key) && e.dimension === 'rgCol') {
+                if (elKey === key || !e.delta) {
+                    continue;
+                }
+                for (let el of this.elements[elKey]) {
+                    if (el.changeScroll) {
+                        newEventPromise = el.changeScroll(e);
+                    }
+                }
+            }
+            else {
+                for (let el of this.elements[elKey]) {
+                    await ((_a = el.setScroll) === null || _a === void 0 ? void 0 : _a.call(el, e));
+                }
+            }
+        }
+        const newEvent = await newEventPromise;
+        if (newEvent) {
+            event = newEvent;
+        }
+        this.setViewport(event);
+    }
+    /**
+     * Silent scroll update for mobile devices when we have negative scroll top
+     */
+    async scrollSilentService(e, key) {
+        var _a;
+        for (let elKey in this.elements) {
+            // skip same element update
+            if (elKey === key) {
+                continue;
+            }
+            if (columnTypes.includes(key) &&
+                (elKey === 'headerRow' ||
+                    columnTypes.includes(elKey))) {
+                for (let el of this.elements[elKey]) {
+                    await ((_a = el.changeScroll) === null || _a === void 0 ? void 0 : _a.call(el, e, true));
+                }
+                continue;
+            }
+        }
+    }
+    isPinnedColumn(key) {
+        return !!key && ['colPinStart', 'colPinEnd'].indexOf(key) > -1;
+    }
+    registerElements(els) {
+        this.elements = els;
+    }
+    /**
+     * Register new element for farther scroll support
+     * @param el - can be null if holder removed
+     * @param key - element key
+     */
+    registerElement(el, key) {
+        if (!this.elements[key]) {
+            this.elements[key] = [];
+        }
+        // new element added
+        if (el) {
+            this.elements[key].push(el);
+        }
+        else if (this.elements[key]) {
+            // element removed
+            delete this.elements[key];
+        }
+    }
+    unregister() {
+        this.elements = {};
+    }
+}
+
+/**
+ * Draw drag
+ */
+class OrdererService {
+    constructor() {
+        this.parentY = 0;
+    }
+    start(parent, { pos, text, event }) {
+        var _a;
+        const { top } = parent.getBoundingClientRect();
+        this.parentY = top;
+        if (this.text) {
+            this.text.innerText = text;
+        }
+        this.move(pos);
+        this.moveTip({ x: event.x, y: event.y });
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.remove('hidden');
+    }
+    end() {
+        var _a;
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.classList.add('hidden');
+    }
+    move(pos) {
+        this.moveElement(pos.end - this.parentY);
+    }
+    moveTip({ x, y }) {
+        if (!this.draggable) {
+            return;
+        }
+        this.draggable.style.left = `${x}px`;
+        this.draggable.style.top = `${y}px`;
+    }
+    moveElement(y) {
+        if (!this.rgRow) {
+            return;
+        }
+        this.rgRow.style.transform = `translateY(${y}px)`;
+    }
+}
+const OrderRenderer = ({ ref }) => {
+    const service = new OrdererService();
+    ref(service);
+    return (h("div", { class: "draggable-wrapper hidden", ref: e => (service.el = e) },
+        h("div", { class: "draggable", ref: el => (service.draggable = el) },
+            h("span", { class: "revo-alt-icon" }),
+            h("span", { ref: e => (service.text = e) })),
+        h("div", { class: "drag-position", ref: e => (service.rgRow = e) })));
+};
+
+const rowDefinitionByType = (newVal = []) => {
+    const result = {};
+    for (const v of newVal) {
+        let rowDefs = result[v.type];
+        if (!rowDefs) {
+            rowDefs = result[v.type] = {};
+        }
+        if (v.size) {
+            if (!rowDefs.sizes) {
+                rowDefs.sizes = {};
+            }
+            rowDefs.sizes[v.index] = v.size;
+        }
+    }
+    return result;
+};
+const rowDefinitionRemoveByType = (oldVal = []) => {
+    const result = {};
+    for (const v of oldVal) {
+        let rowDefs = result[v.type];
+        if (!rowDefs) {
+            rowDefs = result[v.type] = [];
+        }
+        if (v.size) {
+            rowDefs.push(v.index);
+        }
+    }
+    return result;
+};
+
+function isMobileDevice() {
+    return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || navigator.maxTouchPoints > 0;
+}
+
+/**
+ * WCAG Plugin is responsible for enhancing the accessibility features of the RevoGrid component.
+ * It ensures that the grid is fully compliant with Web Content Accessibility Guidelines (WCAG) 2.1.
+ * This plugin should be the last plugin you add, as it modifies the grid's default behavior.
+ *
+ * The WCAG Plugin performs the following tasks:
+ * - Sets the 'dir' attribute to 'ltr' for left-to-right text direction.
+ * - Sets the 'role' attribute to 'treegrid' for treelike hierarchical structure.
+ * - Sets the 'aria-keyshortcuts' attribute to 'Enter' and 'Esc' for keyboard shortcuts.
+ * - Adds event listeners for keyboard navigation and editing.
+ *
+ * By default, the plugin adds ARIA roles and properties to the grid elements, providing semantic information
+ * for assistive technologies. These roles include 'grid', 'row', and 'gridcell'. The plugin also sets
+ * ARIA attributes such as 'aria-rowindex', 'aria-colindex', and 'aria-selected'.
+ *
+ * The WCAG Plugin ensures that the grid is fully functional and usable for users with various disabilities,
+ * including visual impairments, deaf-blindness, and cognitive disabilities.
+ *
+ * Note: The WCAG Plugin should be added as the last plugin in the list of plugins, as it modifies the grid's
+ * default behavior and may conflict with other plugins if added earlier.
+ */
+class WCAGPlugin extends BasePlugin {
+    constructor(revogrid, providers) {
+        super(revogrid, providers);
+        revogrid.setAttribute('dir', 'ltr');
+        revogrid.setAttribute('role', 'treegrid');
+        revogrid.setAttribute('aria-keyshortcuts', 'Enter');
+        revogrid.setAttribute('aria-multiselectable', 'true');
+        revogrid.setAttribute('tabindex', '0');
+        /**
+         * Before Columns Set Event
+         */
+        this.addEventListener('beforecolumnsset', ({ detail }) => {
+            const columns = [
+                ...detail.columns.colPinStart,
+                ...detail.columns.rgCol,
+                ...detail.columns.colPinEnd,
+            ];
+            revogrid.setAttribute('aria-colcount', `${columns.length}`);
+            columns.forEach((column, index) => {
+                const { columnProperties, cellProperties } = column;
+                column.columnProperties = (...args) => {
+                    const result = (columnProperties === null || columnProperties === void 0 ? void 0 : columnProperties(...args)) || {};
+                    result.role = 'columnheader';
+                    result['aria-colindex'] = index;
+                    return result;
+                };
+                column.cellProperties = (...args) => {
+                    const wcagProps = {
+                        ['role']: 'gridcell',
+                        ['aria-colindex']: index,
+                        ['aria-rowindex']: args[0].rowIndex,
+                        ['tabindex']: -1,
+                    };
+                    const columnProps = (cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties(...args)) || {};
+                    return Object.assign(Object.assign({}, wcagProps), columnProps);
+                };
+            });
+        });
+        /**
+         * Before Row Set Event
+         */
+        this.addEventListener('beforesourceset', ({ detail, }) => {
+            revogrid.setAttribute('aria-rowcount', `${detail.source.length}`);
+        });
+        this.addEventListener('beforerowrender', ({ detail, }) => {
+            detail.node.$attrs$ = Object.assign(Object.assign({}, detail.node.$attrs$), { role: 'row', ['aria-rowindex']: detail.item.itemIndex });
+        });
+        // focuscell
+        this.addEventListener('afterfocus', async (e) => {
+            if (e.defaultPrevented) {
+                return;
+            }
+            const el = this.revogrid.querySelector(`revogr-data[type="${e.detail.rowType}"][col-type="${e.detail.colType}"] [data-rgrow="${e.detail.rowIndex}"][data-rgcol="${e.detail.colIndex}"]`);
+            if (el instanceof HTMLElement) {
+                el.focus();
+            }
+        });
+    }
+}
+
+/**
+ * Plugin service
+ * Manages plugins
+ */
+class PluginService {
+    constructor() {
+        /**
+         * Plugins
+         * Define plugins collection
+         */
+        this.internalPlugins = [];
+    }
+    /**
+     * Get all plugins
+     */
+    get() {
+        return [...this.internalPlugins];
+    }
+    /**
+     * Add plugin to collection
+     */
+    add(plugin) {
+        this.internalPlugins.push(plugin);
+    }
+    /**
+     * Add user plugins and create
+     */
+    addUserPluginsAndCreate(element, plugins = [], prevPlugins, pluginData) {
+        if (!pluginData) {
+            return;
+        }
+        // Step 1: Identify plugins to remove, compare new and old plugins
+        const pluginsToRemove = (prevPlugins === null || prevPlugins === void 0 ? void 0 : prevPlugins.filter(prevPlugin => !plugins.some(userPlugin => userPlugin === prevPlugin))) || [];
+        // Step 2: Remove old plugins
+        pluginsToRemove.forEach(plugin => {
+            var _a, _b;
+            const index = this.internalPlugins.findIndex(createdPlugin => createdPlugin instanceof plugin);
+            if (index !== -1) {
+                (_b = (_a = this.internalPlugins[index]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.internalPlugins.splice(index, 1); // Remove the plugin
+            }
+        });
+        // Step 3: Register user plugins
+        plugins === null || plugins === void 0 ? void 0 : plugins.forEach(userPlugin => {
+            // check if plugin already exists, if so, skip
+            const existingPlugin = this.internalPlugins.find(createdPlugin => createdPlugin instanceof userPlugin);
+            if (existingPlugin) {
+                return;
+            }
+            this.add(new userPlugin(element, pluginData));
+        });
+    }
+    /**
+     * Get plugin by class
+     */
+    getByClass(pluginClass) {
+        return this.internalPlugins.find(p => p instanceof pluginClass);
+    }
+    /**
+     * Remove plugin
+     */
+    remove(plugin) {
+        var _a, _b;
+        const index = this.internalPlugins.indexOf(plugin);
+        if (index > -1) {
+            (_b = (_a = this.internalPlugins[index]).destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+            this.internalPlugins.splice(index, 1);
+        }
+    }
+    /**
+     * Remove all plugins
+     */
+    destroy() {
+        this.internalPlugins.forEach(p => { var _a; return (_a = p.destroy) === null || _a === void 0 ? void 0 : _a.call(p); });
+        this.internalPlugins = [];
+    }
+}
+
+const revoGridStyleCss = ".revo-drag-icon{width:11px;opacity:0.8}.revo-drag-icon::before{content:\"::\"}.revo-alt-icon{-webkit-mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg viewBox='0 0 384 383' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cpath d='M192.4375,383 C197.424479,383 201.663411,381.254557 205.154297,377.763672 L205.154297,377.763672 L264.25,318.667969 C270.234375,312.683594 271.605794,306.075846 268.364258,298.844727 C265.122721,291.613607 259.51237,287.998047 251.533203,287.998047 L251.533203,287.998047 L213.382812,287.998047 L213.382812,212.445312 L288.935547,212.445312 L288.935547,250.595703 C288.935547,258.57487 292.551107,264.185221 299.782227,267.426758 C307.013346,270.668294 313.621094,269.296875 319.605469,263.3125 L319.605469,263.3125 L378.701172,204.216797 C382.192057,200.725911 383.9375,196.486979 383.9375,191.5 C383.9375,186.513021 382.192057,182.274089 378.701172,178.783203 L378.701172,178.783203 L319.605469,119.6875 C313.621094,114.201823 307.013346,112.955078 299.782227,115.947266 C292.551107,118.939453 288.935547,124.42513 288.935547,132.404297 L288.935547,132.404297 L288.935547,170.554688 L213.382812,170.554688 L213.382812,95.0019531 L251.533203,95.0019531 C259.51237,95.0019531 264.998047,91.3863932 267.990234,84.1552734 C270.982422,76.9241536 269.735677,70.3164062 264.25,64.3320312 L264.25,64.3320312 L205.154297,5.23632812 C201.663411,1.74544271 197.424479,0 192.4375,0 C187.450521,0 183.211589,1.74544271 179.720703,5.23632812 L179.720703,5.23632812 L120.625,64.3320312 C114.640625,70.3164062 113.269206,76.9241536 116.510742,84.1552734 C119.752279,91.3863932 125.36263,95.0019531 133.341797,95.0019531 L133.341797,95.0019531 L171.492188,95.0019531 L171.492188,170.554688 L95.9394531,170.554688 L95.9394531,132.404297 C95.9394531,124.42513 92.3238932,118.814779 85.0927734,115.573242 C77.8616536,112.331706 71.2539062,113.703125 65.2695312,119.6875 L65.2695312,119.6875 L6.17382812,178.783203 C2.68294271,182.274089 0.9375,186.513021 0.9375,191.5 C0.9375,196.486979 2.68294271,200.725911 6.17382812,204.216797 L6.17382812,204.216797 L65.2695312,263.3125 C71.2539062,268.798177 77.8616536,270.044922 85.0927734,267.052734 C92.3238932,264.060547 95.9394531,258.57487 95.9394531,250.595703 L95.9394531,250.595703 L95.9394531,212.445312 L171.492188,212.445312 L171.492188,287.998047 L133.341797,287.998047 C125.36263,287.998047 119.876953,291.613607 116.884766,298.844727 C113.892578,306.075846 115.139323,312.683594 120.625,318.667969 L120.625,318.667969 L179.720703,377.763672 C183.211589,381.254557 187.450521,383 192.4375,383 Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E\");width:11px;height:11px;background-size:cover;background-repeat:no-repeat}.arrow-down{position:absolute;right:5px;top:0}.arrow-down svg{width:8px;margin-top:5px;margin-left:5px;opacity:0.4}.cell-value-wrapper{margin-right:10px;overflow:hidden;text-overflow:ellipsis}.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}revo-grid[theme=default],revo-grid:not([theme]){border:1px solid var(--revo-grid-header-border);font-size:12px}revo-grid[theme=default] .rowHeaders revogr-header,revo-grid:not([theme]) .rowHeaders revogr-header{box-shadow:-1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-header,revo-grid:not([theme]) revogr-header{text-align:center;line-height:30px;background-color:var(--revo-grid-header-bg)}revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{box-shadow:none}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid[theme=default] revogr-header .group-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .group-rgRow{text-transform:uppercase;font-size:12px;color:var(--revo-grid-header-color)}revo-grid[theme=default] revogr-header .header-rgRow,revo-grid:not([theme]) revogr-header .header-rgRow{height:30px;box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-header .rgHeaderCell,revo-grid:not([theme]) revogr-header .rgHeaderCell{box-shadow:-1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] .rowHeaders,revo-grid:not([theme]) .rowHeaders{background-color:var(--revo-grid-header-bg)}revo-grid[theme=default] .rowHeaders revogr-data .rgCell,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell{color:var(--revo-grid-header-color)}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child){box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset, 1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] .rowHeaders revogr-data .rgCell:last-child,revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child{border-right:1px solid var(--revo-grid-header-border)}revo-grid[theme=default] .rowHeaders revogr-data revogr-header,revo-grid:not([theme]) .rowHeaders revogr-data revogr-header{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child{box-shadow:0 -1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--revo-grid-header-border) inset, -1px 0 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header{box-shadow:1px 0 0 var(--revo-grid-header-border) inset}revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell{box-shadow:0 1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-cell-border) inset, 0 -1px 0 0 var(--revo-grid-cell-border) inset}revo-grid[theme=default] revogr-data,revo-grid:not([theme]) revogr-data{text-align:center}revo-grid[theme=default] revogr-data .revo-draggable,revo-grid:not([theme]) revogr-data .revo-draggable{float:left}revo-grid[theme=default] revogr-data .rgRow,revo-grid:not([theme]) revogr-data .rgRow{line-height:27px}revo-grid[theme=default] revogr-data .rgCell,revo-grid:not([theme]) revogr-data .rgCell{box-shadow:0 -1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-cell-border) inset}revo-grid[theme=material]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=material] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=material] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=material] revogr-header .header-rgRow{height:50px}revo-grid[theme=material] revogr-data{text-align:left}revo-grid[theme=material] revogr-data .rgRow{line-height:42px}revo-grid[theme=material] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkMaterial]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=darkMaterial] revogr-header{line-height:50px;font-weight:600;text-align:left}revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkMaterial] revogr-header .header-rgRow{height:50px}revo-grid[theme=darkMaterial] revogr-data{text-align:left}revo-grid[theme=darkMaterial] revogr-data .rgRow{line-height:42px}revo-grid[theme=darkMaterial] revogr-data .rgCell{padding:0 15px}revo-grid[theme=darkCompact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=darkCompact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=darkCompact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=darkCompact] revogr-header .header-rgRow{height:45px}revo-grid[theme=darkCompact] revogr-data{text-align:left}revo-grid[theme=darkCompact] revogr-data .rgRow{line-height:32px}revo-grid[theme=darkCompact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=compact]{font-family:Nunito, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}revo-grid[theme=compact] revogr-header{line-height:45px;font-weight:600;text-align:left}revo-grid[theme=compact] revogr-header .rgHeaderCell{padding:0 15px;text-overflow:ellipsis}revo-grid[theme=compact] revogr-header .header-rgRow{height:45px}revo-grid[theme=compact] revogr-data{text-align:left}revo-grid[theme=compact] revogr-data .rgRow{line-height:32px}revo-grid[theme=compact] revogr-data .rgCell{padding:0 15px}revo-grid[theme=compact] revo-dropdown .rv-dr-root{padding:0px 9px}revo-grid{--revo-grid-primary:#266ae8;--revo-grid-primary-transparent:rgba(38, 106, 232, 0.9);--revo-grid-background:#fff;--revo-grid-foreground:black;--revo-grid-divider:gray;--revo-grid-shadow:rgba(0, 0, 0, 0.15);--revo-grid-text:black;--revo-grid-border:rgba(0, 0, 0, 0.2);--revo-grid-filter-panel-bg:#fff;--revo-grid-filter-panel-border:#d9d9d9;--revo-grid-filter-panel-shadow:rgba(0, 0, 0, 0.15);--revo-grid-filter-panel-input-bg:#eaeaeb;--revo-grid-filter-panel-divider:#d9d9d9;--revo-grid-filter-panel-select-border:transparent;--revo-grid-filter-panel-select-border-hover:transparent;--revo-grid-header-bg:#f8f9fa;--revo-grid-header-color:#000;--revo-grid-header-border:#cecece;--revo-grid-cell-border:#e2e3e3;--revo-grid-focused-bg:rgba(233, 234, 237, 0.5);--revo-grid-row-hover:#f1f1f1;--revo-grid-row-headers-bg:#f7faff;--revo-grid-row-headers-color:#757a82;--revo-grid-cell-disabled-bg:rgba(0, 0, 0, 0.07);display:flex !important;height:100%;min-height:300px;font-family:Helvetica, Arial, Sans-Serif, serif;font-size:14px;position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;width:100%;height:100%}revo-grid[theme*=dark]{--revo-grid-background:#212529;--revo-grid-foreground:#fff;--revo-grid-text:rgba(255, 255, 255, 0.9);--revo-grid-divider:#505050;--revo-grid-border:rgba(255, 255, 255, 0.2);--revo-grid-filter-panel-bg:#212529;--revo-grid-filter-panel-border:#505050;--revo-grid-filter-panel-input-bg:#343a40;--revo-grid-filter-panel-divider:#505050;--revo-grid-header-bg:#343a40;--revo-grid-header-color:#fff;--revo-grid-header-border:#505050;--revo-grid-cell-border:#424242;--revo-grid-focused-bg:rgba(52, 58, 64, 0.5);--revo-grid-row-hover:rgba(80, 80, 80, 0.5);--revo-grid-row-headers-bg:rgba(52, 58, 64, 0.8);--revo-grid-row-headers-color:rgba(255, 255, 255, 0.8);--revo-grid-cell-disabled-bg:rgba(255, 255, 255, 0.07)}revo-grid revogr-header .header-rgRow.group{box-shadow:0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid revogr-header .header-rgRow:not(.group){box-shadow:0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset}revo-grid revogr-header .rgHeaderCell.sortable:hover{background-color:var(--revo-grid-row-hover)}revo-grid revogr-header .rgHeaderCell.focused-cell{background:var(--revo-grid-focused-bg)}revo-grid .footer-wrapper revogr-data{box-shadow:0 -1px 0 var(--revo-grid-cell-border)}revo-grid revogr-viewport-scroll.colPinStart{box-shadow:-1px 0 0 var(--revo-grid-cell-border) inset}revo-grid revogr-viewport-scroll.colPinEnd{box-shadow:-1px 0 0 var(--revo-grid-cell-border)}revo-grid revogr-data .rgRow{box-shadow:0 -1px 0 0 var(--revo-grid-cell-border) inset}revo-grid revogr-data .rgRow.focused-rgRow{background-color:var(--revo-grid-focused-bg)}revo-grid revogr-data .rgCell{color:var(--revo-grid-text)}revo-grid revogr-data .rgCell.disabled{background-color:var(--revo-grid-cell-disabled-bg)}revo-grid .attribution{position:absolute;bottom:0;left:0;right:0;z-index:1000;width:0;height:0;border-left:4px solid var(--revo-grid-primary-transparent);border-bottom:4px solid var(--revo-grid-primary-transparent);border-top:4px solid transparent;border-right:4px solid transparent;cursor:pointer}revo-grid .attribution .value{position:absolute;bottom:0;left:0;background-color:var(--revo-grid-background);padding:4px;border-radius:4px;box-shadow:0 1px 10px var(--revo-grid-border);white-space:nowrap;text-decoration:none;color:var(--revo-grid-text);letter-spacing:0.3px;font-size:11px;opacity:0;width:4px;overflow:hidden;transition:opacity 0.5s ease-in-out, width 0.3s ease-in-out}revo-grid .attribution:hover .value{width:63px;opacity:1}revo-grid.column-draggable.column-drag-start:hover,revo-grid.column-draggable.column-drag-start *:hover{cursor:grabbing}revo-grid .footer-wrapper,revo-grid .header-wrapper{width:100%}revo-grid .footer-wrapper revogr-data,revo-grid .header-wrapper revogr-data{z-index:3}revo-grid revo-dropdown{width:100%}revo-grid revo-dropdown .rv-dr-root{max-height:100%}revo-grid revo-dropdown.shrink label{opacity:0}revo-grid .viewports{max-width:100%;display:flex;flex-direction:row;align-items:flex-start;flex-grow:1}revo-grid .main-viewport{flex-grow:1;height:0;display:flex;justify-content:space-between;flex-direction:row}revo-grid .draggable{position:fixed;height:30px;line-height:30px;background:var(--revo-grid-background);border-radius:3px;display:block;z-index:100;margin-top:5px;margin-right:-20px;box-shadow:0 4px 20px 0 var(--revo-grid-shadow);padding-left:20px;padding-right:5px}revo-grid .draggable.hidden{display:none}revo-grid .draggable .revo-alt-icon{background-color:var(--revo-grid-foreground);position:absolute;left:5px;top:10px}revo-grid .draggable-wrapper.hidden{display:none}revo-grid .drag-position{position:absolute;left:0;right:0;height:1px;z-index:2;background:var(--revo-grid-divider);pointer-events:none}revo-grid .drag-position-y{position:absolute;top:0;left:0;bottom:0;width:1px;z-index:2;background:var(--revo-grid-divider);pointer-events:none}revo-grid .drag-auto-scroll-y{pointer-events:none;position:absolute;left:0;top:0;height:50px;width:1px}revo-grid .clipboard{position:absolute;left:0;top:0}revo-grid revogr-scroll-virtual{position:relative}revo-grid revogr-scroll-virtual.vertical,revo-grid revogr-scroll-virtual.horizontal{z-index:3}";
+const RevoGridStyle0 = revoGridStyleCss;
+
+const RevoGridComponent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.contentsizechanged = createEvent(this, "contentsizechanged", 7);
+        this.beforeedit = createEvent(this, "beforeedit", 7);
+        this.beforerangeedit = createEvent(this, "beforerangeedit", 7);
+        this.afteredit = createEvent(this, "afteredit", 7);
+        this.beforeautofill = createEvent(this, "beforeautofill", 7);
+        this.beforerange = createEvent(this, "beforerange", 7);
+        this.afterfocus = createEvent(this, "afterfocus", 7);
+        this.roworderchanged = createEvent(this, "roworderchanged", 7);
+        this.beforesorting = createEvent(this, "beforesorting", 7);
+        this.beforesourcesortingapply = createEvent(this, "beforesourcesortingapply", 7);
+        this.beforesortingapply = createEvent(this, "beforesortingapply", 7);
+        this.rowdragstart = createEvent(this, "rowdragstart", 7);
+        this.headerclick = createEvent(this, "headerclick", 7);
+        this.beforecellfocus = createEvent(this, "beforecellfocus", 7);
+        this.beforefocuslost = createEvent(this, "beforefocuslost", 7);
+        this.beforesourceset = createEvent(this, "beforesourceset", 7);
+        this.beforeanysource = createEvent(this, "beforeanysource", 7);
+        this.aftersourceset = createEvent(this, "aftersourceset", 7);
+        this.afteranysource = createEvent(this, "afteranysource", 7);
+        this.beforecolumnsset = createEvent(this, "beforecolumnsset", 7);
+        this.beforecolumnapplied = createEvent(this, "beforecolumnapplied", 7);
+        this.aftercolumnsset = createEvent(this, "aftercolumnsset", 7);
+        this.beforefilterapply = createEvent(this, "beforefilterapply", 7);
+        this.beforefiltertrimmed = createEvent(this, "beforefiltertrimmed", 7);
+        this.beforetrimmed = createEvent(this, "beforetrimmed", 7);
+        this.aftertrimmed = createEvent(this, "aftertrimmed", 7);
+        this.viewportscroll = createEvent(this, "viewportscroll", 7);
+        this.beforeexport = createEvent(this, "beforeexport", 7);
+        this.beforeeditstart = createEvent(this, "beforeeditstart", 7);
+        this.aftercolumnresize = createEvent(this, "aftercolumnresize", 7);
+        this.beforerowdefinition = createEvent(this, "beforerowdefinition", 7);
+        this.filterconfigchanged = createEvent(this, "filterconfigchanged", 7);
+        this.sortingconfigchanged = createEvent(this, "sortingconfigchanged", 7);
+        this.rowheaderschanged = createEvent(this, "rowheaderschanged", 7);
+        this.beforegridrender = createEvent(this, "beforegridrender", 7);
+        this.aftergridrender = createEvent(this, "aftergridrender", 7);
+        this.aftergridinit = createEvent(this, "aftergridinit", 7);
+        this.additionaldatachanged = createEvent(this, "additionaldatachanged", 7);
+        this.afterthemechanged = createEvent(this, "afterthemechanged", 7);
+        this.created = createEvent(this, "created", 7);
+        this.extraElements = [];
+        this.pluginService = new PluginService();
+        this.viewport = null;
+        this.isInited = false;
+        this.rowHeaders = undefined;
+        this.frameSize = 1;
+        this.rowSize = 0;
+        this.colSize = 100;
+        this.range = false;
+        this.readonly = false;
+        this.resize = false;
+        this.canFocus = true;
+        this.useClipboard = true;
+        this.columns = [];
+        this.source = [];
+        this.pinnedTopSource = [];
+        this.pinnedBottomSource = [];
+        this.rowDefinitions = [];
+        this.editors = {};
+        this.applyOnClose = false;
+        this.plugins = [];
+        this.columnTypes = {};
+        this.theme = 'default';
+        this.rowClass = '';
+        this.autoSizeColumn = false;
+        this.filter = false;
+        this.sorting = undefined;
+        this.focusTemplate = undefined;
+        this.canMoveColumns = false;
+        this.trimmedRows = {};
+        this.exporting = false;
+        this.grouping = undefined;
+        this.stretch = false;
+        this.additionalData = {};
+        this.disableVirtualX = false;
+        this.disableVirtualY = false;
+        this.hideAttribution = false;
+        this.jobsBeforeRender = [];
+        this.registerVNode = [];
+        this.accessible = true;
+        this.canDrag = true;
+    }
+    // #endregion
+    // #region Methods
+    /**
+     * Refreshes data viewport.
+     * Can be specific part as rgRow or pinned rgRow or 'all' by default.
+     */
+    async refresh(type = 'all') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        this.dataProvider.refresh(type);
+    }
+    /**
+     * Refreshes data at specified cell.
+     * Useful for performance optimization.
+     * No viewport update will be triggered.
+     *
+     * @example
+     * const grid = document.querySelector('revo-grid');
+     * grid.setDataAt({ row: 0, col: 0, val: 'test' }); // refresh
+     */
+    async setDataAt({ row, col, colType = 'rgCol', rowType = 'rgRow', val, skipDataUpdate = false }) {
+        var _a;
+        if (this.dataProvider && this.columnProvider && !skipDataUpdate) {
+            const columnProp = (_a = this.columnProvider.getColumn(col, colType)) === null || _a === void 0 ? void 0 : _a.prop;
+            if (typeof columnProp !== 'undefined') {
+                this.dataProvider.setCellData({
+                    type: rowType,
+                    rowIndex: row,
+                    prop: columnProp,
+                    val,
+                }, false);
+            }
+        }
+        const dataElement = this.element.querySelector(`revogr-data[type="${rowType}"][col-type="${colType}"]`);
+        return dataElement === null || dataElement === void 0 ? void 0 : dataElement.updateCell({
+            row,
+            col,
+        });
+    }
+    /**
+     * Scrolls viewport to specified row by index.
+     */
+    async scrollToRow(coordinate = 0) {
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
+        const y = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension: 'rgRow',
+        });
+        await this.scrollToCoordinate({ y });
+    }
+    /**
+     * Scrolls viewport to specified column by index.
+     */
+    async scrollToColumnIndex(coordinate = 0) {
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
+        const x = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension: 'rgCol',
+        });
+        await this.scrollToCoordinate({ x });
+    }
+    /**
+     * Scrolls viewport to specified column by prop
+     */
+    async scrollToColumnProp(prop, dimension = 'rgCol') {
+        if (!this.dimensionProvider || !this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        const coordinate = this.columnProvider.getColumnIndexByProp(prop, dimension);
+        if (coordinate < 0) {
+            // already on the screen
+            return;
+        }
+        const x = this.dimensionProvider.getViewPortPos({
+            coordinate,
+            dimension,
+        });
+        await this.scrollToCoordinate({ x });
+    }
+    /** Update columns */
+    async updateColumns(cols) {
+        var _a;
+        (_a = this.columnProvider) === null || _a === void 0 ? void 0 : _a.updateColumns(cols);
+    }
+    /** Add trimmed by type */
+    async addTrimmed(trimmed, trimmedType = 'external', type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        const event = this.beforetrimmed.emit({
+            trimmed,
+            trimmedType,
+            type,
+        });
+        if (event.defaultPrevented) {
+            return event;
+        }
+        this.dataProvider.setTrimmed({ [trimmedType]: event.detail.trimmed }, type);
+        this.aftertrimmed.emit();
+        return event;
+    }
+    /**  Scrolls view port to coordinate */
+    async scrollToCoordinate(cell) {
+        var _a;
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToCell(cell);
+    }
+    /**  Open editor for cell. */
+    async setCellEdit(rgRow, prop, rowSource = 'rgRow') {
+        var _a;
+        const rgCol = getColumnByProp(this.columns, prop);
+        if (!rgCol) {
+            return;
+        }
+        await timeout();
+        const colGroup = rgCol.pin || 'rgCol';
+        if (!this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setEdit(rgRow, this.columnProvider.getColumnIndexByProp(prop, colGroup), colGroup, rowSource);
+    }
+    /**  Set focus range. */
+    async setCellsFocus(cellStart = { x: 0, y: 0 }, cellEnd = { x: 0, y: 0 }, colType = 'rgCol', rowType = 'rgRow') {
+        var _a;
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.setFocus(colType, rowType, cellStart, cellEnd);
+    }
+    /**  Get data from source */
+    async getSource(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        return this.dataProvider.stores[type].store.get('source');
+    }
+    /**
+     * Get data from visible part of source
+     * Trimmed/filtered rows will be excluded
+     * @param type - type of source
+     */
+    async getVisibleSource(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        return getVisibleSourceItem(this.dataProvider.stores[type].store);
+    }
+    /**
+     * Provides access to rows internal store observer
+     * Can be used for plugin support
+     * @param type - type of source
+     */
+    async getSourceStore(type = 'rgRow') {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        return this.dataProvider.stores[type].store;
+    }
+    /**
+     * Provides access to column internal store observer
+     * Can be used for plugin support
+     * @param type - type of column
+     */
+    async getColumnStore(type = 'rgCol') {
+        if (!this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        return this.columnProvider.stores[type].store;
+    }
+    /**
+     * Update column sorting
+     * @param column - full column details to update
+     * @param index - virtual column index
+     * @param order - order to apply
+     * @param additive - if false will replace current order
+     */
+    async updateColumnSorting(column, index, order, additive) {
+        if (!this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        return this.columnProvider.updateColumnSorting(column, index, order, additive);
+    }
+    /**
+     * Clears column sorting
+     */
+    async clearSorting() {
+        if (!this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        this.columnProvider.clearSorting();
+    }
+    /**
+     * Receive all columns in data source
+     */
+    async getColumns() {
+        if (!this.columnProvider) {
+            throw new Error('Not connected');
+        }
+        return this.columnProvider.getColumns();
+    }
+    /**
+     * Clear current grid focus. Grid has no longer focus on it.
+     */
+    async clearFocus() {
+        var _a, _b;
+        const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
+        const event = this.beforefocuslost.emit(focused);
+        if (event.defaultPrevented) {
+            return;
+        }
+        (_b = this.selectionStoreConnector) === null || _b === void 0 ? void 0 : _b.clearAll();
+    }
+    /**
+     * Get all active plugins instances
+     */
+    async getPlugins() {
+        return this.pluginService.get();
+    }
+    /**
+     * Get the currently focused cell.
+     */
+    async getFocused() {
+        var _a, _b;
+        return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused()) !== null && _b !== void 0 ? _b : null;
+    }
+    /**
+     * Get size of content
+     * Including all pinned data
+     */
+    async getContentSize() {
+        var _a;
+        if (!this.dimensionProvider) {
+            throw new Error('Not connected');
+        }
+        return (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.getFullSize();
+    }
+    /**
+     * Get the currently selected Range.
+     */
+    async getSelectedRange() {
+        var _a, _b;
+        return (_b = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getSelectedRange()) !== null && _b !== void 0 ? _b : null;
+    }
+    /**
+     * Refresh extra elements. Triggers re-rendering of extra elements and functions.
+     * Part of extraElements and registerVNode methods.
+     * Useful for plugins.
+     */
+    async refreshExtraElements() {
+        var _a;
+        (_a = this.extraService) === null || _a === void 0 ? void 0 : _a.refresh();
+    }
+    mousedownHandle(event) {
+        const screenX = getPropertyFromEvent(event, 'screenX');
+        const screenY = getPropertyFromEvent(event, 'screenY');
+        if (screenX === null || screenY === null) {
+            return;
+        }
+        this.clickTrackForFocusClear = screenX + screenY;
+    }
+    /**
+     * To keep your elements from losing focus use mouseup/touchend e.preventDefault();
+     */
+    async mouseupHandle(event) {
+        var _a;
+        const screenX = getPropertyFromEvent(event, 'screenX');
+        const screenY = getPropertyFromEvent(event, 'screenY');
+        if (screenX === null || screenY === null) {
+            return;
+        }
+        if (event.defaultPrevented) {
+            return;
+        }
+        const pos = screenX + screenY;
+        // detect if mousemove then do nothing
+        if (Math.abs(((_a = this.clickTrackForFocusClear) !== null && _a !== void 0 ? _a : 0) - pos) > 10) {
+            return;
+        }
+        // Check if action finished inside the document
+        // if event prevented, or it is current table don't clear focus
+        const path = event.composedPath();
+        if (!path.includes(this.element) &&
+            !(this.element.shadowRoot && path.includes(this.element.shadowRoot))) {
+            // Perform actions if the click is outside the component
+            await this.clearFocus();
+        }
+    }
+    // #endregion
+    // #region Listeners
+    /** Drag events */
+    onRowDragStarted(e) {
+        var _a;
+        const dragStart = this.rowdragstart.emit(e.detail);
+        if (dragStart.defaultPrevented) {
+            e.preventDefault();
+            return;
+        }
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.start(this.element, Object.assign(Object.assign({}, e.detail), dragStart.detail));
+    }
+    onRowDragEnd() {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.end();
+    }
+    onRowOrderChange(e) {
+        var _a;
+        (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.changeOrder(e.detail);
+    }
+    onRowDrag({ detail }) {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.move(detail);
+    }
+    onRowMouseMove(e) {
+        var _a;
+        (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.moveTip(e.detail);
+    }
+    async onCellEdit(e) {
+        var _a;
+        const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
+        await timeout();
+        // apply data
+        if (!defaultPrevented) {
+            (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.setCellData(detail);
+            // @feature: incrimental update for cells
+            // this.dataProvider.setCellData(detail, false);
+            // await this.setDataAt({
+            //   row: detail.rowIndex,
+            //   col: detail.colIndex,
+            //   rowType: detail.type,
+            //   colType: detail.colType,
+            // });
+            this.afteredit.emit(detail);
+        }
+    }
+    onRangeEdit(e) {
+        if (!this.dataProvider) {
+            throw new Error('Not connected');
+        }
+        const { defaultPrevented, detail } = this.beforerangeedit.emit(e.detail);
+        if (defaultPrevented) {
+            e.preventDefault();
+            return;
+        }
+        this.dataProvider.setRangeData(detail.data, detail.type);
+        this.afteredit.emit(detail);
+    }
+    onRangeChanged(e) {
+        const beforeange = this.beforerange.emit(e.detail);
+        if (beforeange.defaultPrevented) {
+            e.preventDefault();
+        }
+        const beforeFill = this.beforeautofill.emit(beforeange.detail);
+        if (beforeFill.defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onRowDropped(e) {
+        // e.cancelBubble = true;
+        const { defaultPrevented } = this.roworderchanged.emit(e.detail);
+        if (defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onHeaderClick(e) {
+        const { defaultPrevented } = this.headerclick.emit(Object.assign(Object.assign({}, e.detail.column), { originalEvent: e.detail.originalEvent }));
+        if (defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    onCellFocus(e) {
+        const { defaultPrevented } = this.beforecellfocus.emit(e.detail);
+        if (!this.canFocus || defaultPrevented) {
+            e.preventDefault();
+        }
+    }
+    // #endregion
+    // #region Watchers
+    columnTypesChanged() {
+        // Column format change will trigger column structure update
+        this.columnChanged(this.columns);
+    }
+    columnChanged(newVal = [], _prevVal = undefined, __watchName = 'columns', init = false) {
+        if (!this.dimensionProvider || !this.columnProvider) {
+            return;
+        }
+        const columnGather = getColumns(newVal, 0, this.columnTypes);
+        const beforeSetEvent = this.beforecolumnsset.emit(columnGather);
+        if (beforeSetEvent.defaultPrevented) {
+            return;
+        }
+        this.dimensionProvider.applyNewColumns(beforeSetEvent.detail.columns, this.disableVirtualX, init);
+        const beforeApplyEvent = this.beforecolumnapplied.emit(columnGather);
+        if (beforeApplyEvent.defaultPrevented) {
+            return;
+        }
+        const columns = this.columnProvider.setColumns(beforeApplyEvent.detail);
+        this.aftercolumnsset.emit({
+            columns,
+            order: this.columnProvider.order,
+        });
+    }
+    disableVirtualXChanged(newVal = false, prevVal = false) {
+        if (newVal === prevVal) {
+            return;
+        }
+        this.columnChanged(this.columns);
+    }
+    rowSizeChanged(s) {
+        if (!this.dimensionProvider) {
+            return;
+        }
+        // clear existing data
+        this.dimensionProvider.setSettings({ originItemSize: s }, 'rgRow');
+        this.rowDefChanged(this.rowDefinitions, this.rowDefinitions, 'rowSize', true);
+    }
+    themeChanged(t, _, __ = 'theme', init = false) {
+        if (!this.dimensionProvider) {
+            return;
+        }
+        this.themeService.register(t);
+        this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
+        this.dimensionProvider.setSettings({ originItemSize: this.colSize }, 'rgCol');
+        // if theme change we need to reapply row size and reset viewport
+        if (!init) {
+            // clear existing data
+            this.dimensionProvider.setSettings({ originItemSize: this.themeService.rowSize }, 'rgRow');
+            this.rowDefChanged(
+            // for cases when some custom size present and not
+            this.rowDefinitions, this.rowDefinitions, 'theme', true);
+        }
+        this.afterthemechanged.emit(t);
+    }
+    dataSourceChanged(newVal = [], _, watchName) {
+        if (!this.dataProvider) {
+            return;
+        }
+        let type = 'rgRow';
+        switch (watchName) {
+            case 'pinnedBottomSource':
+                type = 'rowPinEnd';
+                break;
+            case 'pinnedTopSource':
+                type = 'rowPinStart';
+                break;
+            case 'source':
+                type = 'rgRow';
+                /**
+                 * Applied for source only for cross compatability between plugins
+                 */
+                const beforesourceset = this.beforesourceset.emit({
+                    type,
+                    source: newVal,
+                });
+                newVal = beforesourceset.detail.source;
+                break;
+        }
+        const beforesourceset = this.beforeanysource.emit({
+            type,
+            source: newVal,
+        });
+        const newSource = [...beforesourceset.detail.source];
+        this.dataProvider.setData(newSource, type, this.disableVirtualY);
+        /**
+         * Applied for source only for cross compatability between plugins
+         */
+        if (watchName === 'source') {
+            this.aftersourceset.emit({
+                type,
+                source: newVal,
+            });
+        }
+        this.afteranysource.emit({
+            type,
+            source: newVal,
+        });
+    }
+    disableVirtualYChanged(newVal = false, prevVal = false) {
+        if (newVal === prevVal) {
+            return;
+        }
+        this.dataSourceChanged(this.source, this.source, 'source');
+    }
+    rowDefChanged(after, before, _watchName, forceUpdate = true) {
+        // in firefox it's triggered before init
+        if (!this.dimensionProvider || !this.dataProvider) {
+            return;
+        }
+        const { detail: { vals: newVal, oldVals: oldVal }, } = this.beforerowdefinition.emit({
+            vals: after,
+            oldVals: before,
+        });
+        // apply new values
+        const newRows = rowDefinitionByType(newVal);
+        // clear current defs
+        if (oldVal) {
+            const remove = rowDefinitionRemoveByType(oldVal);
+            // clear all old data and drop sizes
+            for (const t in remove) {
+                if (remove.hasOwnProperty(t)) {
+                    const type = t;
+                    const store = this.dataProvider.stores[type];
+                    const sourceLength = store.store.get('source').length;
+                    this.dimensionProvider.clearSize(type, sourceLength);
+                }
+            }
+        }
+        // set new sizes
+        rowTypes.forEach((t) => {
+            var _a;
+            const newSizes = newRows[t];
+            // apply new sizes or force update
+            if (newSizes || forceUpdate) {
+                (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(t, (newSizes === null || newSizes === void 0 ? void 0 : newSizes.sizes) || {});
+            }
+        });
+    }
+    trimmedRowsChanged(newVal = {}) {
+        this.addTrimmed(newVal);
+    }
+    /**
+     * Grouping
+     */
+    groupingChanged(newVal = {}) {
+        var _a;
+        (_a = this.pluginService.getByClass(GroupingRowPlugin)) === null || _a === void 0 ? void 0 : _a.setGrouping(newVal || {});
+    }
+    /**
+     * Stretch Plugin Apply
+     */
+    applyStretch(isStretch) {
+        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider) {
+            return;
+        }
+        if (isStretch === 'false') {
+            isStretch = false;
+        }
+        const pluginData = this.getPluginData();
+        if (!pluginData) {
+            return;
+        }
+        const stretch = this.pluginService.getByClass(StretchColumn);
+        if ((typeof isStretch === 'boolean' && isStretch) || isStretch === 'true') {
+            if (!stretch) {
+                this.pluginService.add(new StretchColumn(this.element, pluginData));
+            }
+            else if (isStretchPlugin(stretch)) {
+                stretch.applyStretch(this.columnProvider.getRawColumns());
+            }
+        }
+        else if (stretch) {
+            this.pluginService.remove(stretch);
+        }
+    }
+    applyFilter(cfg) {
+        this.filterconfigchanged.emit(cfg);
+    }
+    applySorting(cfg) {
+        this.sortingconfigchanged.emit(cfg);
+    }
+    rowHeadersChange(rowHeaders) {
+        this.rowheaderschanged.emit(rowHeaders);
+    }
+    /**
+     * Register external VNodes
+     */
+    registerOutsideVNodes(elements = []) {
+        this.extraElements = elements;
+    }
+    additionalDataChanged(data) {
+        this.additionaldatachanged.emit(data);
+    }
+    /**
+     * User can add plugins via plugins property
+     */
+    pluginsChanged(plugins = [], prevPlugins) {
+        this.pluginService.addUserPluginsAndCreate(this.element, plugins, prevPlugins, this.getPluginData());
+    }
+    // #endregion
+    // #region Plugins
+    setPlugins() {
+        // remove old plugins if any
+        this.removePlugins();
+        // pass data provider to plugins
+        const pluginData = this.getPluginData();
+        if (!pluginData) {
+            return;
+        }
+        // register system plugins
+        this.setCorePlugins(pluginData);
+        // register user plugins
+        this.pluginsChanged(this.plugins);
+    }
+    setCorePlugins(pluginData) {
+        if (this.accessible) {
+            this.pluginService.add(new WCAGPlugin(this.element, pluginData));
+        }
+        // register auto size plugin
+        if (this.autoSizeColumn) {
+            this.pluginService.add(new AutoSizeColumnPlugin(this.element, pluginData, typeof this.autoSizeColumn === 'object'
+                ? this.autoSizeColumn
+                : undefined));
+        }
+        // register filter plugin
+        if (this.filter) {
+            this.pluginService.add(new FilterPlugin(this.element, pluginData, typeof this.filter === 'object' ? this.filter : undefined));
+        }
+        // register export plugin
+        if (this.exporting) {
+            this.pluginService.add(new ExportFilePlugin(this.element, pluginData));
+        }
+        // register sorting plugin
+        this.pluginService.add(new SortingPlugin(this.element, pluginData));
+        // register grouping plugin
+        this.pluginService.add(new GroupingRowPlugin(this.element, pluginData));
+        if (this.canMoveColumns) {
+            this.pluginService.add(new ColumnMovePlugin(this.element, pluginData));
+        }
+    }
+    getPluginData() {
+        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
+            return;
+        }
+        // pass data provider to plugins
+        const pluginData = {
+            data: this.dataProvider,
+            column: this.columnProvider,
+            dimension: this.dimensionProvider,
+            viewport: this.viewportProvider,
+            selection: this.selectionStoreConnector,
+            plugins: this.pluginService,
+        };
+        return pluginData;
+    }
+    removePlugins() {
+        this.pluginService.destroy();
+    }
+    // #endregion
+    // if reconnect to dom we need to set up plugins
+    connectedCallback() {
+        if (this.isInited) {
+            this.setPlugins();
+        }
+        this.created.emit();
+    }
+    /**
+     * Called once just after the component is first connected to the DOM.
+     * Since this method is only called once, it's a good place to load data asynchronously and to setup the state
+     * without triggering extra re-renders.
+     * A promise can be returned, that can be used to wait for the first render().
+     */
+    componentWillLoad() {
+        var _a;
+        // #region Setup Providers
+        this.viewportProvider = new ViewportProvider();
+        this.themeService = new ThemeService({
+            rowSize: this.rowSize,
+        });
+        this.dimensionProvider = new DimensionProvider(this.viewportProvider, {
+            realSizeChanged: (k) => this.contentsizechanged.emit(k),
+        });
+        this.columnProvider = new ColumnDataProvider();
+        this.selectionStoreConnector = new SelectionStoreConnector();
+        this.dataProvider = new DataProvider(this.dimensionProvider);
+        // #endregion
+        this.registerOutsideVNodes(this.registerVNode);
+        // init plugins
+        this.setPlugins();
+        // set data
+        this.applyStretch(this.stretch);
+        this.themeChanged(this.theme, undefined, undefined, true);
+        this.columnChanged(this.columns, undefined, undefined, true);
+        this.dataSourceChanged(this.source, undefined, 'source');
+        this.dataSourceChanged(this.pinnedTopSource, undefined, 'pinnedTopSource');
+        this.dataSourceChanged(this.pinnedBottomSource, undefined, 'pinnedBottomSource');
+        if (Object.keys((_a = this.trimmedRows) !== null && _a !== void 0 ? _a : {}).length > 0) {
+            this.trimmedRowsChanged(this.trimmedRows);
+        }
+        this.rowDefChanged(this.rowDefinitions);
+        // init grouping
+        if (this.grouping && Object.keys(this.grouping).length > 0) {
+            this.groupingChanged(this.grouping);
+        }
+        // init scrolling service
+        this.scrollingService = new GridScrollingService((e) => {
+            var _a;
+            (_a = this.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setViewPortCoordinate({
+                coordinate: e.coordinate,
+                type: e.dimension,
+            });
+            this.viewportscroll.emit(e);
+        });
+        this.aftergridinit.emit();
+        // set inited flag for connectedCallback
+        this.isInited = true;
+    }
+    componentWillRender() {
+        const event = this.beforegridrender.emit();
+        if (event.defaultPrevented) {
+            return false;
+        }
+        return Promise.all(this.jobsBeforeRender);
+    }
+    componentDidRender() {
+        this.aftergridrender.emit();
+    }
+    render() {
+        if (!this.dimensionProvider || !this.dataProvider || !this.columnProvider || !this.viewportProvider || !this.selectionStoreConnector) {
+            return;
+        }
+        const contentHeight = this.dimensionProvider.stores['rgRow'].store.get('realSize');
+        // init viewport service helpers
+        this.viewport = new ViewportService({
+            columnProvider: this.columnProvider,
+            dataProvider: this.dataProvider,
+            dimensionProvider: this.dimensionProvider,
+            viewportProvider: this.viewportProvider,
+            scrollingService: this.scrollingService,
+            orderService: this.orderService,
+            selectionStoreConnector: this.selectionStoreConnector,
+            disableVirtualX: this.disableVirtualX,
+            disableVirtualY: this.disableVirtualY,
+            resize: c => this.aftercolumnresize.emit(c),
+        }, contentHeight);
+        // #region ViewportSections
+        /**
+         * The code renders a viewport divided into sections.
+         * It starts by rendering the pinned start, data, and pinned end sections.
+         * Within each section, it renders columns along with their headers, pinned top, center data, and pinned bottom.
+         * The code iterates over the columns and their data to generate the view port's HTML structure.
+         */
+        const viewportSections = [];
+        // Row headers setting
+        if (this.rowHeaders && this.viewport.columns.length) {
+            const anyView = this.viewport.columns[0];
+            viewportSections.push(h("revogr-row-headers", { additionalData: this.additionalData, height: contentHeight, rowClass: this.rowClass, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, jobsBeforeRender: this.jobsBeforeRender, rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollview: ({ detail: e }) => this.scrollingService.proxyScroll(e, 'headerRow'), onRef: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
+        }
+        // Viewport section render
+        const isMobile = isMobileDevice();
+        const viewPortHtml = [];
+        // Render viewports column(horizontal sections)
+        for (let view of this.viewport.columns) {
+            const headerProperties = Object.assign(Object.assign({}, view.headerProp), { type: view.type, additionalData: this.additionalData, viewportCol: view.viewportCol, selectionStore: view.columnSelectionStore, canResize: this.resize, readonly: this.readonly, columnFilter: !!this.filter });
+            // Column headers
+            const dataViews = [
+                h("revogr-header", Object.assign({}, headerProperties, { slot: HEADER_SLOT })),
+            ];
+            // 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 }) => {
+                        var _a;
+                        const event = this.beforeeditstart.emit(detail);
+                        if (!event.defaultPrevented) {
+                            (_a = this.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEdit(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);
+            });
+            // Add viewport scroll in the end
+            viewPortHtml.push(h("revogr-viewport-scroll", Object.assign({}, view.prop, { ref: el => this.scrollingService.registerElement(el, `${view.prop.key}`), onScrollviewport: e => this.scrollingService.proxyScroll(e.detail, `${view.prop.key}`), onScrollviewportsilent: e => this.scrollingService.scrollSilentService(e.detail, `${view.prop.key}`) }), dataViews));
+        }
+        viewportSections.push(viewPortHtml);
+        // #endregion
+        const typeRow = 'rgRow';
+        const typeCol = 'rgCol';
+        const viewports = this.viewportProvider.stores;
+        const dimensions = this.dimensionProvider.stores;
+        return (h(Host, null, this.hideAttribution ? null : (h("revogr-attribution", { class: "attribution" })), h("slot", { name: "header" }), h("div", { class: "main-viewport", onClick: (e) => {
+                var _a;
+                if (e.currentTarget === e.target) {
+                    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
+                }
+            } }, h("div", { class: "viewports" }, h("slot", { name: "viewport" }), viewportSections, h("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h(OrderRenderer, { ref: e => (this.orderService = e) }))), h("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), h("revogr-extra", { ref: el => (this.extraService = el), nodes: this.extraElements }), h("slot", { name: "footer" })));
+    }
+    disconnectedCallback() {
+        // Remove all plugins, to avoid memory leaks
+        // and unexpected behaviour when the component is removed
+        this.removePlugins();
+    }
+    get element() { return getElement(this); }
+    static get watchers() { return {
+        "columnTypes": ["columnTypesChanged"],
+        "columns": ["columnChanged"],
+        "disableVirtualX": ["disableVirtualXChanged"],
+        "rowSize": ["rowSizeChanged"],
+        "theme": ["themeChanged"],
+        "source": ["dataSourceChanged"],
+        "pinnedBottomSource": ["dataSourceChanged"],
+        "pinnedTopSource": ["dataSourceChanged"],
+        "disableVirtualY": ["disableVirtualYChanged"],
+        "rowDefinitions": ["rowDefChanged"],
+        "trimmedRows": ["trimmedRowsChanged"],
+        "grouping": ["groupingChanged"],
+        "stretch": ["applyStretch"],
+        "filter": ["applyFilter"],
+        "sorting": ["applySorting"],
+        "rowHeaders": ["rowHeadersChange"],
+        "registerVNode": ["registerOutsideVNodes"],
+        "additionalData": ["additionalDataChanged"],
+        "plugins": ["pluginsChanged"]
+    }; }
+};
+RevoGridComponent.style = RevoGridStyle0;
+
+export { RevoGridComponent as revo_grid };
+
 //# sourceMappingURL=revo-grid.entry.js.map