integralui-web-grid/components/integralui.grid.js

IntegralUI Web - Grid is a native Web Component that displays tabular data sets

/*
  filename: integralui.grid.js
  version : 21.4.0
  Copyright © 2016-2021 Lidor Systems. All rights reserved.

  This file is part of the "IntegralUI Web" Library. 
                                                                   
  The contents of this file are subject to the IntegralUI Web License, and may not be used except in compliance with the License.
  A copy of the License should have been installed in the product's root installation directory or it can be found at
  http://www.lidorsystems.com/products/web/studio/license-agreement.aspx.
                                                            
  This SOFTWARE is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language 
  governing rights and limitations under the License. Any infringement will be prosecuted under applicable laws.                           
*/
import{c as css,h as html}from"../external/lit-element.js";import{c as classMap}from"../external/class-map.js";import{s as styleMap}from"../external/style-map.js";import{IntegralUIFilterType,IntegralUIVisibility,IntegralUIEditorType,IntegralUITheme}from"./integralui.enums.js";import IntegralUIBaseGrid from"./integralui.base.grid.js";import"./integralui.dropdownfilter.js";import{iuiBaseDefaultStyle}from"../styles/integralui.style.js";import{iuiGridDefaultStyle}from"../styles/integralui.grid.style.js";import{iuiGridOfficeStyle}from"../themes/office/integralui.grid.office.js";import{iuiGridMidnightStyle}from"../themes/midnight/integralui.grid.midnight.js";import{iuiEditorsDefaultStyle}from"../styles/integralui.editors.style.js";import{iuiEditorsOfficeStyle}from"../themes/office/integralui.editors.office.js";import{iuiEditorsMidnightStyle}from"../themes/midnight/integralui.editors.midnight.js";import{iuiFilterDefaultStyle}from"../styles/integralui.filter.style.js";import{iuiSortingDefaultStyle}from"../styles/integralui.sorting.style.js";import{iuiScrollBarStyle}from"../styles/integralui.scrollbar.style.js";import{iuiScrollBarOfficeStyle}from"../themes/office/integralui.scrollbar.office.js";import{iuiScrollBarMidnightStyle}from"../themes/midnight/integralui.scrollbar.midnight.js";import"./integralui.paginator.js";class IntegralUIGrid extends IntegralUIBaseGrid{_init(){super._init();this._isExpandBoxVisible=!0;this._dataGroups=[];this._currentGrouping={dropdown:{items:[]},enabled:!1,showAddButton:!1,showColumns:!1,showPanel:!0};this._expandTimeout=null;this._expandRow=null;this._isAutoExpandActive=!1;this._groupReorderActive=!1;this._hoverGroup=null;this._reorderGroup=null;this._dragGroupElemSize={width:0,height:0};this._groupCoordinates=[];this._reorderGroupPos=-1;this._dragGroupSettings={display:"none",top:0,left:0,label:""};this._groupList=[];this._activeGroups=[];this._groupExpandList=[];this._groupPanelSize={width:0,height:0};this._groupPanelHeight=0;this._isGroupListItemSelected=!1;this._isGroupPanelHovered=!1;this._groupReorderMargin=50;this._reorderGroupWidth=50;this._currentBaseStyleSettings=iuiBaseDefaultStyle;this._currentControlStyleSettings=iuiGridDefaultStyle;this._currentEditorStyleSettings=iuiEditorsDefaultStyle;this._currentEditorThemeSettings=css``;this._currentFilterStyleSettings=iuiFilterDefaultStyle;this._currentScrollStyleSettings=iuiScrollBarStyle;this._currentSortStyleSettings=iuiSortingDefaultStyle;this._generalClassName="iui-grid";this._columnClassName=this._generalClassName+"-column";this._columnHeaderClassName=this._columnClassName+"-header";this._columnFilterClassName=this._columnClassName+"-filter";this._columnBodyClassName=this._columnClassName+"-body";this._columnFooterClassName=this._columnClassName+"-footer";this._rowClassName=this._generalClassName+"-row";this._cellBorderClassName="iui-grid-lines-both";this._cellClassName=this._rowClassName+"-cell";this._expandBoxClassName=this._generalClassName+"-expand-box";this._gridLinesClassName=this._generalClassName+"-lines";this._sortingClassName="iui-sort";this._initStyle();this._updateData();this._resizeObserver=new ResizeObserver(e=>{if(e&&e.length>0&&e[0].contentRect){let e=!1;if(this._clientRect.width!==this._prevClientRect.width){this._prevClientRect.width=this._clientRect.width;e=!0}if(this._clientRect.height!==this._prevClientRect.height){this._prevClientRect.height=this._clientRect.height;e=!0}if(e)this.updateLayout(!0)}})}connectedCallback(){super.connectedCallback();this._windowMouseMove=this._windowMouseMove.bind(this);window.addEventListener("mousemove",this._windowMouseMove);this._windowClick=this._windowClick.bind(this);window.addEventListener("click",this._windowClick)}disconnectedCallback(){super.disconnectedCallback();window.removeEventListener("mousemove",this._windowMouseMove);window.removeEventListener("click",this._windowClick);if(this._loadingEndTimeout)clearTimeout(this._loadingEndTimeout);if(this._resizeObserver)this._resizeObserver.disconnect();this._resizeObserver=null;this._resetLayoutTimer();this._rt()}_initStyle(){this._defaultStyle={general:{disabled:this._generalClassName+"-disabled",focused:this._generalClassName+"-focused",normal:this._generalClassName,hovered:this._generalClassName+"-hovered",selected:this._generalClassName+"-selected"},column:{header:{cell:this._columnHeaderClassName+"-cell",disabled:this._columnHeaderClassName+"-disabled",normal:this._columnHeaderClassName,hovered:this._columnHeaderClassName+"-hovered",selected:this._columnHeaderClassName+"-selected"},filter:{cell:this._columnFilterClassName+"-cell",disabled:this._columnFilterClassName+"-disabled",normal:this._columnFilterClassName,hovered:this._columnFilterClassName+"-hovered",selected:this._columnFilterClassName+"-selected"},body:{cell:this._columnBodyClassName+"-cell",disabled:this._columnBodyClassName+"-disabled",normal:this._columnBodyClassName,hovered:this._columnBodyClassName+"-hovered",selected:this._columnBodyClassName+"-selected"},footer:{cell:this._columnFooterClassName+"-cell",disabled:this._columnFooterClassName+"-disabled",normal:this._columnFooterClassName,hovered:this._columnFooterClassName+"-hovered",selected:this._columnFooterClassName+"-selected"},sorting:{normal:{ascending:this._sortingClassName+"-ascending",descending:this._sortingClassName+"-descending"},selected:{ascending:this._sortingClassName+"-ascending-selected",descending:this._sortingClassName+"-descending-selected"}}},row:{general:{disabled:this._rowClassName+"-disabled",focused:this._rowClassName+"-focused",normal:this._rowClassName,hovered:this._rowClassName+"-hovered",selected:this._rowClassName+"-selected"},expandBox:{general:this._expandBoxClassName,load:this._expandBoxClassName+"-load",expanded:this._expandBoxClassName+"-open",collapsed:this._expandBoxClassName+"-close"},cell:{disabled:this._cellClassName+"-disabled",focused:this._cellClassName+"-focused",normal:this._cellClassName,hovered:this._cellClassName+"-hovered",selected:this._cellClassName+"-selected"}},gridLines:{none:this._gridLinesClassName+"-none",horizontal:this._gridLinesClassName+"-horizontal",vertical:this._gridLinesClassName+"-vertical",both:this._gridLinesClassName+"-both"}};this._updateStyle(this.controlStyle);this._updateControlClass();this.refresh()}attributeChangedCallback(e,t,i){super.attributeChangedCallback(e,t,i)}static get properties(){return{autoExpand:{type:Boolean,attribute:"auto-expand",reflect:!0},grouping:{type:Object},groups:{type:Array},showExpandBox:{type:Boolean,attribute:"show-expandbox",reflect:!0}}}get autoExpand(){return this._isAutoExpandActive}set autoExpand(e){const t=this._isAutoExpandActive;this._isAutoExpandActive=e;this.requestUpdate("autoExpand",t)}get grouping(){return this._currentGrouping}set grouping(e){const t=this._currentGrouping;this._updateGrouping(e);this.requestUpdate("grouping",t)}get groups(){return this._dataGroups}set groups(e){const t=this._dataGroups;this._dataGroups=e;this.requestUpdate("groups",t)}get showExpandBox(){return this._isExpandBoxVisible}set showExpandBox(e){const t=this._isExpandBoxVisible;this._isExpandBoxVisible=e;this.updateLayout();this.requestUpdate("showExpandBox",t)}loadData(e,t){this._processLoadData(e,null,t)}_addRowToGroup(e){let t=e[this._rowFields.cells];if(t&&t.length>0){let i=-1,s=null;this._dataGroups.forEach((e,l)=>{let r=l;if((i=e[this._groupFields.cid]))r=this._getCellIndexById(t,l,i);if(r>=0&&r<t.length){let e="undefined",i=t[r][this._cellFields.text];if(!i||""===i){let s=t[r][this._cellFields.value];if(void 0!==s){i=s.toString();if(Array.isArray(s)&&0===s.length)i=e;else if(0===s)i=e}else i=e}let o=t[r][this._cellFields.value],a=this._getGroup(i,s);if(!a){(a={})[this._rowFields.text]=i;a[this._rowFields.gid]=this._dataGroups[l][this._groupFields.id];a[this._rowFields.allowDrag]=!1;let e=this._getExpandingColumn();if(e){let l=e[this._columnFields.id];a[this._rowFields.cells]=[{cid:l,text:i,isGroup:!0,tag:t[r][this._cellFields.tag],value:o,valueID:t[r][this._cellFields.cid],related:t[r]}];a.type="group";a.tagHide=void 0!==t[r].tagHide?t[r].tagHide:!1;if(s){a[this._rowFields.id]=s[this._rowFields.id]+"_"+a[this._rowFields.text];if(!s[this._rowFields.rows])s[this._rowFields.rows]=[];s[this._rowFields.rows].push(a)}else{a[this._rowFields.id]="GRP_"+a[this._rowFields.text];this._groupList.push(a)}a[this._rowFields.expanded]=this._isGroupExpandedFromRow(a);a[this._rowFields.cells][0][this._cellFields.expanded]=a[this._rowFields.expanded]}}s=a}});if(s){if(!s[this._rowFields.rows])s[this._rowFields.rows]=[];s[this._rowFields.rows].push(e)}}}_getGroup(e,t){let i=null,s=this._groupList;if(t)s=t[this._rowFields.rows];if(s)for(let t=0;t<s.length;t++)if(s[t][this._rowFields.text]===e){i=s[t];break}return i}_getGroupExpandObj(e){return this._commonService.getObjFromListById(this._groupExpandList,e)}_isGroupExpandedFromRow(e){let t=this._getGroupExpandObj(e[this._rowFields.id]);return t?t.expanded:!0}_updateGroupList(){this._groupList.length=0;this._activeGroups.length=0;if(this._dataGroups.length>0){this._dataGroups.forEach(e=>{if(!e[this._groupFields.id])e[this._groupFields.id]=this._commonService.getUniqueId();this._activeGroups.push(e)});let e=this._dataService.getList(null,this._rowDataKey);if(e)for(let t=0;t<e.length;t++)this._addRowToGroup(e[t])}this._groupAggregation(this._groupList)}_groupAggregation(e){let t=0,i=this._getExpandingColumn();if(i)t=i[this._columnFields.id];e.forEach(e=>{if("group"===e.type){let i=this._getCellByColumnId(e[this._rowFields.cells],t);if(i)for(let s=0;s<this._flatCurrentColumnList.normal.length;s++){let l=this._flatCurrentColumnList.normal[s],r=l[this._columnFields.id];if((r=void 0!==r?r:s)){let s=l[this._columnFields.aggregation];if(s&&s.enabled&&s.callback){let l=s.callback(e,r,i);if(void 0!==l)if(r===t){i.isModified=!0;i.value=l}else{let t={cid:r,isGroup:!0,value:l};e[this._rowFields.cells].push(t)}}}}if(e[this._rowFields.rows])this._groupAggregation(e[this._rowFields.rows])}})}_createGroupExpandList(){this._groupExpandList.length=0;this.getFullList().forEach(e=>{if("group"===e.type)this._groupExpandList.push({id:e[this._rowFields.id],expanded:this._isRowExpanded(e)})})}_updateExpandStatus(){this._createGroupExpandList()}_updateGroupExpandValue(e,t){let i=this._commonService.getObjFromListById(this._groupExpandList,e);if(i)i.expanded=t}_updateDataFields(e){let t=e||{};this._updateColumnFields(t.column);this._updateGroupFields(t.group);this._updateRowFields(t.row);this._updateCellFields(t.cell);this._updateFilterFields(t.filter)}_updateGroupFields(e){if(e)this._groupFields={id:e.id?e.id:"id",cells:e.cells?e.cells:"cells",cid:e.cid?e.cid:"cid",expanded:e.expanded?e.expanded:"expanded",rows:e.rows?e.rows:"rows",text:e.text?e.text:"text"};else this._groupFields={id:"id",cid:"cid",cells:"cells",expanded:"expanded",rows:"rows",text:"text"}}_updateGrouping(e){if(e)this._currentGrouping={dropdown:{items:this._commonService.isFieldAvailable(e.items,[])},enabled:this._commonService.isFieldAvailable(e.enabled,!1),showAddButton:this._commonService.isFieldAvailable(e.showAddButton,!1),showColumns:this._commonService.isFieldAvailable(e.showColumns,!1),showPanel:this._commonService.isFieldAvailable(e.showPanel,!0)};else this._currentGrouping={dropdown:{items:[]},enabled:!1,showAddButton:!1,showColumns:!1,showPanel:!0};this.updateLayout()}_addChildRowCheck(e,t){let i=!1;if("group"===e.type||!0===e[this._rowFields.hasChildren])i=t||this._isRowExpanded(e)?!0:!1;return i}_addChildRows(e,t,i,s){let l=!0;if(!e[this._rowFields.rows])return l=this._addRowToCurrentList(e,t,i,s);if((l=this._addRowToCurrentList(e,t,i,s))){let i=0,l=!0;if(this._addChildRowCheck(e,s)){let r=e[this._rowFields.rows];if(r){this._applySorting(r);for(let o=0;o<r.length;o++)if((l=this._addChildRows(r[o],t+this._currentIndent,e[this._rowFields.id],s)))i++}}if(!s&&!this._isThereChildRows&&(i>0||this._isThereRows(e)))this._isThereChildRows=!0}return l}_updateCurrentRowList(e){this._currentRowList.length=0;if(this._currentPaging.enabled){if(this._currentPageNumber>=1&&this._currentPageNumber<=this._pageList.length)for(let e=0;e<this._pageList[this._currentPageNumber-1].length;e++)this._currentRowList.push(this._pageList[this._currentPageNumber-1][e])}else{this._isThereChildRows=!1;let e=this._dataService.getList(null,this._rowDataKey);if(this._dataGroups.length>0)e=this._groupList;if(e){this._applySorting(e);for(let t=0;t<e.length;t++)this._addChildRows(e[t],0,null,!1)}}}updateFullList(){this._fullList.length=0;let e=this._dataService.getList(null,this._rowDataKey);if(this._dataGroups.length>0)e=this._groupList;if(e)for(let t=0;t<e.length;t++)this._addChildRows(e[t],0,null,!0);this._createGroupExpandList();return this._fullList}_updatePageList(){this._pageNumber=0;this._pageList.length=0;this._pageRowCount=0;this._isThereChildRows=!1;let e=this._dataService.getList(null,this._rowDataKey);if(this._dataGroups.length>0)e=this._groupList;if(e&&e.length>0){this._applySorting(e);this._pageList.push([]);for(let t=0;t<e.length;t++)this._addChildRows(e[t],0,null,!1);if(this._pageList.length>0&&0===this._pageList[this._pageList.length-1].length)this._pageList.splice(this._pageList.length-1,1)}}_expandOnDelay(e){let t=this;if(!1!==t._isAutoExpandActive){if(t._expandRow!==e){if(t._expandTimeout)clearTimeout(t._expandTimeout);t._expandTimeout=setTimeout(function(){if(t._expandTimeout)t.expand(e);clearTimeout(t._expandTimeout)},500)}t._expandRow=e}}_rowDragStart(e,t,i){if(this._isEnabled)if(t.isDragAllowed&&this._hoverCell&&this._hoverCell.isDragDropColumn){this._dragObjIndex=i;this._dragObj=t;this.update();this._dragGhost=this.shadowRoot.querySelector("#drag-row-elem");this._processDragStart(e,t.data)}else e.preventDefault();e.stopPropagation()}_rowDragOver(e,t,i,s){if(this._isEnabled){let l=this._getRowElems(s);if(l&&i>=0&&i<l.length){let s=this._commonService.getPageRect(l[i]),r={x:s.left,y:s.top,width:s.right-s.left,height:s.bottom-s.top};this._expandOnDelay(t.data);this._processScroll(e,this._groupPanelHeight,this._paginatorHeight);if(!this._isScrollTimerActive)this._processDragOver(e,t,r,!0)}}e.stopPropagation()}_rowDragDrop(e,t){if(this._isEnabled){this._expandRow=null;if(this._expandTimeout)clearTimeout(this._expandTimeout);this._processDragDrop(e,t)}e.stopPropagation()}toggle(e,t){if(this._isEnabled)if(e){if(!e[this._rowFields.hasChildren]&&(!e[this._rowFields.rows]||0===e[this._rowFields.rows].length))return;else if(t&&!1!==e[this._rowFields.expanded])return;else if(!1===t&&!1===e[this._rowFields.expanded])return;let i=void 0!==t?t:!1!==e[this._rowFields.expanded]?!0:!1,s={cancel:!1,row:e};if(void 0!==t)if(t)this._invokeEvent("beforeExpand",s);else this._invokeEvent("beforeCollapse",s);else if(i)this._invokeEvent("beforeCollapse",s);else this._invokeEvent("beforeExpand",s);if(!0!==s.cancel){let s=e[this._rowFields.expanded],l=void 0!==t?t:!i;if(l!==s){e[this._rowFields.expanded]=l;this._updateExpandingCell(e,l);if("group"===e.type)this._updateGroupExpandValue(e[this._rowFields.id],l);this._updateCurrentLayout(!1,!0)}if(this._isRowExpanded(e))this._invokeEvent("afterExpand",{row:e});else this._invokeEvent("afterCollapse",{row:e})}}else{this.getFullList().forEach(e=>{e[this._rowFields.expanded]=t;this._updateExpandingCell(e,t);if("group"===e.type)this._updateGroupExpandValue(e[this._rowFields.id],t)});this._updateCurrentLayout(!1,!0)}}isColumnVisible(e){let t=e&&!1!==e[this._columnFields.visible];if(this._currentGrouping.enabled&&this._dataGroups.length>0&&!this._currentGrouping.showColumns)t=e?t&&!this._checkColumnPresence(e[this._columnFields.id]):t;return t}_getGroupTextFromColumn(e){let t="";if(e)if(!(t=e[this._columnFields.groupText])||""===t)t=e[this._columnFields.headerText];return t}_getGroupText(e){let t="",i=this.getColumnById(e.cid);if(i)t=this._getGroupTextFromColumn(i);else if(this._currentGrouping&&this._currentGrouping.dropdown&&this._currentGrouping.dropdown.items){let i=this._commonService.getObjFromListById(this._currentGrouping.dropdown.items,e.cid);if(i)t=i.text}return t}_updateDragGroupElem(e,t){let i=this._commonService.getPadding(this._groupingPanelElem),s=this._commonService.getPageRect(this._groupingPanelElem),l=this._commonService.getShiftPos(),r=this._commonService.getMousePos(e);r.x-=s.left+l.x;r.y-=s.top+l.y;this._dragGroupElemSize.width=this._dragGroupElem.offsetWidth;let o={x:r.x-this._dragGroupElemSize.width/2,y:r.y};this._dragGroupSettings.top=i.top;this._dragGroupSettings.left=o.x;this._dragGroupSettings.display="block";this._dragGroupSettings.label=t}_groupPanelDragEnter(e){this._dropMark(e)}_groupPanelMouseEnter(e){if(this._isEnabled){this._isGroupPanelHovered=!0;if(1===e.which&&this._columnReorderActive&&this._reorderColumn){this._dragGroupSettings.display="none";this._dragGroupSettings.label=this._reorderColumn[this._columnFields.headerText];this._groupReorderActive=!0;this._reorderGroup=null;this._dropMark(e)}else this._changeCursor()}e.stopPropagation()}_groupPanelMouseMove(e){if(this._isEnabled&&1===e.which&&this._isGroupReorderInProcess()){this._isGroupPanelHovered=!0;let t=this._commonService.getPageRect(this._groupingPanelElem),i=this._commonService.getShiftPos(),s=this._commonService.getMousePos(e);s.x-=t.left+i.x;s.y-=t.top+i.y;let l="";if(this._reorderColumn)l=this._getGroupTextFromColumn(this._reorderColumn);else if(this._reorderGroup)l=this._getGroupText(this._reorderGroup);this._updateDragGroupElem(e,l);this._dropMark(e);this._changeCursor();this.update()}e.stopPropagation()}_groupPanelMouseLeave(e){this._isGroupPanelHovered=!1;this._dragGroupSettings.display="none"}_checkColumnPresence(e){let t=!1;for(let i=0;i<this._dataGroups.length;i++)if(this._dataGroups[i].cid===e){t=!0;break}return t}_groupPanelMouseUp(e){if(this._isEnabled&&1===e.which&&this._isGroupReorderInProcess()){if(this._groupReorderActive&&this._reorderGroup){let e=this._dataGroups.indexOf(this._reorderGroup),t=this._dataGroups.indexOf(this._hoverGroup);if(e!==t){this._commonService.moveObject(e,t,this._dataGroups);this.updateLayout();this._invokeEvent("groupOrderChanged")}}else{let e=this._reorderColumn[this._columnFields.id],t={cid:e};if(this._hoverGroup){let i=this._dataGroups.indexOf(this._hoverGroup);if(i>=0){if(!this._checkColumnPresence(e)){this._dataGroups.splice(i,0,t);this.updateLayout();this._invokeEvent("groupOrderChanged")}}}else if(!this._checkColumnPresence(e))if(this._addGroup(t))this._invokeEvent("groupOrderChanged")}this._resetReorderColumnSettings();this._hoverGroup=null;this._reorderGroup=null;this._dropMark(e);this._dragGroupSettings.display="none";this._changeCursor();e.stopPropagation()}}_groupMouseEnter(e,t){if(this._isEnabled&&1===e.which){this._hoverGroup=t;e.stopPropagation()}}_groupMouseLeave(e,t){if(this._isEnabled&&1===e.which){this._hoverGroup=null;e.stopPropagation()}}_groupMouseDown(e,t){if(this._isEnabled&&1===e.which&&this._dataGroups.length>1){this._groupReorderActive=!0;this._reorderGroup=t;this._updateDragGroupElem(e,this._getGroupText(this._reorderGroup))}e.stopPropagation()}_groupButtonMouseDown(e,t){if(this._isEnabled&&1===e.which)this._removeGroup(t);e.stopPropagation()}_isGroupReorderInProcess(){let e=!1;if(this._columnReorderActive&&this._reorderColumn)e=!0;else if(this._groupReorderActive&&this._reorderGroup)e=!0;return e}_addGroup(e){let t=!1,i={cancel:!1,group:e};this._invokeEvent("groupAdding",i);if(!0!==i.cancel){this._dataGroups.push(e);this.updateLayout();this._invokeEvent("groupAdded",{group:e});t=!0}return t}_removeGroup(e){let t=this._dataGroups.indexOf(e);if(t>=0){let i={cancel:!1,group:e};this._invokeEvent("groupRemoving",i);if(!0!==i.cancel){this._dataGroups.splice(t,1);this.updateLayout();this._invokeEvent("groupRemoved",{group:e})}}}_groupListItemSelected(e){if(!this._checkColumnPresence(e.id))this._addGroup({cid:e.id});this._isGroupListItemSelected=!0}_getCellsAllSides(){let e=[];for(let t=0;t<3;t++){let i=0,s=[],l="";switch(t){case 1:i=this._fixedLeftViewIndexRange;l="normal";break;case 2:i=this._fixedRightViewIndexRange;l="right";break;default:i=this._numVisibleCells;l="left"}s=this._scrollRowList[l].filter((e,t)=>t===this._dragObjIndex).filter((e,t)=>t<i);e=e.concat(s.length>0?s[0].cells:[])}return e}_getDragRowLayoutBySide(){let e=this._getCellsAllSides(),t=this._dragObj;return html`                 <tr class=${classMap(t.style.row||{})}>                     ${e.map(e=>html`                         <td class=${classMap(t.style.cell||{})}>                             <div class=${classMap(e.style.content)} style=${styleMap({"padding-left":e.indent+"px","text-align":e.align,width:e.width+"px",height:e.height})}>                                 ${this._getExpandBoxLayout(t,e)}                                 ${this._getRowCellTemplate(t,e)}                             </div>                         </td>                     `)}                 </tr>`}_getDragRowLayout(){if(this._dragObjIndex>=0){return html`                 <div id="drag-row-elem" class="${"iui-grid-block"}" style=${styleMap({position:"absolute",top:"-9999999px"})} @scroll="${e=>this._onContentScroll(e)}">                     <table cellpadding="0" cellspacing="0">                         ${this._getDragRowLayoutBySide()}                     </table>                 </div>`}return html``}_getExpandBoxLayout(e,t){if(this._isExpandBoxVisible&&t.expandBoxAllowed)if(t.allowEdit&&t.data===this._currentEditingCell)return html``;else return html`<span class=${classMap(e.style.expandBox)} @mousedown="${t=>this._expandBoxMouseDown(t,e)}" @mouseup="${t=>this._expandBoxMouseUp(t,e)}" @touchstart="${t=>this._expandBoxTouchStart(t,e)}"></span>`;return html``}_getFilterCellTemplate(e){let t=html``;if(e.isFilterAllowed)switch(e.filterType){case IntegralUIFilterType.Boolean:break;default:let i=css`                     `;t=html`                         <iui-dropdownfilter                              .allowAnimation="${this.allowAnimation}"                              .calendarSize="${e.filterCalendarSize}"                             .customStyle="${[i,this.customStyle]}"                             .dataFields="${this._filterFields}"                             .dropDownAdjustment="${e.filterAdjustment}"                             .dropDownSize="${e.filterDropDownSize}"                             .enabled="${this._isEnabled}"                             .format="${e.filterFormat}"                             .operation="${e.filterOperation}"                             .parentBounds="${this._getBounds()}"                             .resourcePath="${this._currentResourcePath}"                              .theme="${this._currentTheme}"                              .type="${e.filterType}"                             .value="${e.filterValue}"                             @filterChanged="${t=>this._filterOperationChanged(t,e)}"                             @valueChanged="${t=>this._filterValueChanged(t,e)}"                         ></iui-dropdownfilter>`}return t}_getFilterLayout(e){if(this._isInlineFilterVisible){let t="filter",i="filter-cell-elem",s="iui-grid-block",l={top:this._currentHeaderHeight+this._groupPanelHeight+"px"},r=this._isThereFixedColumns(e);switch(e){case"left":t="filter-left";i="filter-left-cell-elem";s+=" iui-grid-block-filter-left";l.left=0;break;case"right":t="filter-right";i="filter-right-cell-elem";s+=" iui-grid-block-filter-right";l.right=this._getBlockRightPos()+"px";break;default:s+=" iui-grid-block-filter";l.left=-this._contentLeftPos+"px"}if(r)return html`                     <div id="${t}" class="${s}" style=${styleMap(l)}>                         <table cellpadding="0" cellspacing="0">                             <tr id="filter-row" style="position:relative;">                                 ${this._scrollFilterList[e].map(e=>html`                                     <td id="${i}" class=${classMap(e.style.filter)} >                                         <div style=${styleMap({width:this._getColumnWidth(e.data)+"px"})}">                                             ${this._getFilterCellTemplate(e)}                                         </div>                                     </td>                                 `)}                             </tr>                         </table>                     </div>`}return html``}_getFooterLayout(e){if(this._isFooterVisible){let t="footer",i="footer-cell-elem",s="iui-grid-block",l={bottom:this._getBlockBottomPos()+"px"},r=this._isThereFixedColumns(e);switch(e){case"left":t="footer-left";i="footer-left-cell-elem";s+=" iui-grid-block-bottom-left";l.left=0;break;case"right":t="footer-right";i="footer-right-cell-elem";s+=" iui-grid-block-bottom-right";l.right=this._getBlockRightPos()+"px";break;default:s+=" iui-grid-block-bottom";l.left=-this._contentLeftPos+"px"}if(r)return html`                     <div id="${t}" class="${s}" style=${styleMap(l)}>                         <table cellpadding="0" cellspacing="0">                             <tr id="footer-row" style="position:relative;">                                 ${this._scrollFooterList[e].map(e=>html`                                     <td id="${i}" class=${classMap(e.style.footer)} style=${styleMap({height:e.inlineStyle.footer})} @mouseenter="${t=>this._footerMouseEnter(t,e)}">                                         <div style=${styleMap({height:e.footerHeight,"text-align":this._getColumnAlignment(e.data,!0),width:this._getColumnWidth(e.data)+"px"})}">                                             ${this._getColumnFooterTemplate(e)}                                         </div>                                     </td>                                 `)}                             </tr>                         </table>                     </div>`}return html``}_getGroupLayout(){if(this._currentGrouping&&this._currentGrouping.enabled)return html`                 <div id="grouping-panel" class="iui-grid-grouping-panel" style=${styleMap({width:this._groupPanelSize.width+"px"})} @dragenter="${e=>this._groupPanelDragEnter(e)}" @mouseenter="${e=>this._groupPanelMouseEnter(e)}" @mousemove="${e=>this._groupPanelMouseMove(e)}" @mouseleave="${e=>this._groupPanelMouseLeave(e)}" @mouseup="${e=>this._groupPanelMouseUp(e)}">                     ${this._activeGroups.map((e,t)=>html`                         <span @mouseenter="${t=>this._groupMouseEnter(t,e)}" @mouseleave="${t=>this._groupMouseLeave(t,e)}">                             <div class=${classMap({"iui-grid-grouping-panel-item":!0,"iui-grid-grouping-marker":t<this._activeGroups.length-1})} style=${styleMap({marginLeft:e===this._hoverGroup?this._groupReorderMargin+"px":"3px",display:e===this._reorderGroup?"none":"inline-block"})}>                                 <p class="iui-grid-grouping-panel-item-label" @mousedown="${t=>this._groupMouseDown(t,e)}">${this._getGroupText(e)}</p>                                 <span class="iui-grid-grouping-panel-item-button" @mousedown="${t=>this._groupButtonMouseDown(t,e)}"></span>                             </div>                         </span>                     `)}                     ${0===this._activeGroups.length?html`<div class="iui-grid-grouping-panel-item" style=${styleMap({marginLeft:"-9999999px"})}>                                 <p class="iui-grid-grouping-panel-item-label">Empty Group</p>                                     <span class="iui-grid-grouping-panel-item-button"></span>                                 </div>`:html``}                     <div id="drag-group" class="iui-grid-grouping-panel-item" style=${styleMap({display:this._dragGroupSettings.display,top:this._dragGroupSettings.top+"px",left:this._dragGroupSettings.left+"px",position:"absolute",pointerEvents:"none"})} >                         <p class="iui-grid-grouping-panel-item-label">${this._dragGroupSettings.label}</p>                     </div>                 </div>`;else return html``}_getHeaderLayout(e){if(this._isHeaderVisible){let t="header",i="header-cell-elem",s="iui-grid-block",l={},r=this._isThereFixedColumns(e);switch(e){case"left":t="header-left";i="header-left-cell-elem";s+=" iui-grid-block-top-left";l={left:0,top:this._groupPanelHeight+"px"};break;case"right":t="header-right";i="header-right-cell-elem";s+=" iui-grid-block-top-right";l={right:this._getBlockRightPos()+"px",top:this._groupPanelHeight+"px"};break;default:s+=" iui-grid-block-top";l={left:-this._contentLeftPos+"px",top:this._groupPanelHeight+"px"}}if(r)return html`                     <div id="${t}" class="${s}" style=${styleMap(l)}>                         <table cellpadding="0" cellspacing="0">                             ${this._scrollColumnList[e].map(t=>html`                                 <tr id="header-row" style="position:relative;">                                     ${t.columns.map(e=>html`                                         <td id="${i}" data-cid="${e.data[this._columnFields.id]}" style="pointer-events:all" colspan="${e.colSpan}" rowspan="${e.rowSpan}" class=${classMap(e.style.header)} @mousemove="${t=>this._columnMouseMove(t,e)}" @mousedown="${t=>this._columnMouseDown(t,e)}" @mouseup="${t=>this._columnMouseUp(t,e)}" @mouseenter="${t=>this._columnMouseEnter(t,e)}" @mouseleave="${t=>this._columnMouseLeave(t,e)}" @click="${t=>this._columnClickEvent(t,e)}" @dblclick="${t=>this._columnDblClickEvent(t,e)}" @contextmenu="${t=>this._columnRightClickEvent(t,e)}" @touchstart="${t=>this._columnTouchStart(t,e)}">                                             <div style=${styleMap({height:e.headerHeight,"text-align":this._getColumnAlignment(e.data),width:this._getColumnWidth(e.data)+"px"})}">                                                 ${this._getColumnHeaderTemplate(e)}                                             </div>                                         </td>                                     `)}                                     ${"right"!==e?html`<td id="header-left-cell-end" rowspan="1" style=${styleMap({height:this._providedHeaderHeight>0?this._providedHeaderHeight+"px":"auto",padding:"8px",pointerEvents:"none",opacity:0})}>_</td>`:html``}                                 </tr>                             `)}                         </table>                     </div>`}return html``}_getHoverContentLayout(){if(this._isHoverTemplatePresent&&!this._isUpdateActive&&this._isContentAllowed(this._hoverRowObj.data,"hover"))return html`<div class="iui-grid-block iui-grid-block-hover" style=${styleMap({left:this._blockHoverRect.left+"px",top:this._blockHoverRect.top+"px",height:this._blockHoverRect.height+"px",width:this._blockHoverRect.width+"px"})}>                     <div style=${styleMap({height:this._blockHoverRect.height+"px"})} @mousemove="${e=>this._hoverBlockMouseMove(e)}" @mouseleave="${e=>this._hoverBlockMouseLeave(e)}">                         ${this._getContentTemplate(this._hoverRowObj.data,"hover")}                     </div>                 </div>`;else return html``}_getRowCellTemplate(e,t){let i=html``;if(t.editorType){let s=!1;if(t.editorVisibility&IntegralUIVisibility.Hover&&t.editorVisibility&IntegralUIVisibility.Click)s=e.data===this._hoverRow||e.data===this._currentSelectedRow;else if(t.editorVisibility&IntegralUIVisibility.None)s=!1;else if(t.editorVisibility&IntegralUIVisibility.Hover)s=e.data===this._hoverRow;else if(t.editorVisibility&IntegralUIVisibility.Click)s=e.data===this._currentSelectedRow;else s=!0;let l=t.editorSettings;if("group"===e.data.type)if(t.isDragDropColumn)i=e.isDragAllowed&&!e.isEmpty?html`<span class="iui-grid-handle"></span>`:html``;else i=this._getDefaultRowTemplate(e,t);else switch(t.editorType){case IntegralUIEditorType.CheckBox:if(!t.isDataEmpty)i=html`                                 <div style=${styleMap({textAlign:"center"})}>                                     <span class=${classMap(t.editorClass||{})}></span>                                 </div>`;break;case IntegralUIEditorType.Date:if(s){let s=css`                                 .iui-datepicker-header {                                     text-align: var(--datepicker-header-text-align, left);                                 }                             `,r=css`                                 .iui-datepicker-header {                                     text-align: var(--datepicker-header-text-align, center);                                 }                             `,o=[css`                                 .iui-datepicker {                                     background: transparent;                                     margin: var(--datepicker-margin, 0);                                 }                                 .iui-datepicker:focus {                                     outline: none !important;                                 }                                 .iui-datepicker-header {                                     border: 0;                                     padding: var(--datepicker-header-padding, 0);                                 }                                 .iui-header-expand-box-arrow {                                     margin: var(--header-expand-box-margin, 2px);                                 }                                 .iui-header-label {                                     padding: var(--header-label-padding, 0);                                 }                             `,this.customStyle];switch(t.align){case"left":o.splice(1,0,s);break;case"center":o.splice(1,0,r);break;default:this._defaultFunc()}let a=this._getEditorAdjustment(t,{top:6,left:-6,width:11});i=html`                                 <iui-datepicker                                      .allowAnimation="${!0===l.allowAnimation}"                                      .animationSpeed="${l.animationSpeed}"                                     .animationType="${"calendar"}"                                     .customStyle="${o}"                                      .dropDownAdjustment="${a}"                                     .calendarSize="${l.calendarSize}"                                     .enabled="${t.isEditorEnabled}"                                     .firstDayOfWeek="${l.firstDayOfWeek}"                                     .format=${l.format}                                      .formatOptions=${l.formatOptions}                                      .locales=${l.locales}                                      .resourcePath="${this._currentResourcePath}"                                      .selectedDate=${t.editorValueObject}                                      .theme="${this._currentTheme}"                                      @dateChanged="${i=>this._editorValueChanged(i,e,t)}"                                     @opened="${i=>this._cellMouseDown(i.detail.event,e,t)}"                                 ></iui-datepicker>`}else i=html`<span class="iui-editor-label" style=${styleMap({display:t.display})}>${t.editorValue}</span>`;break;case IntegralUIEditorType.DropList:if(s){let s=css`                                 .iui-select {                                     background: transparent;                                     margin: var(--select-margin, 0);                                 }                                 .iui-select:focus {                                     outline: none !important;                                 }                                 .iui-select-header {                                     border: 0;                                     padding: var(--select-header-padding, 0);                                 }                                 .iui-header-expand-box-arrow {                                     margin: var(--header-expand-box-margin, 2px);                                 }                                 .iui-header-label {                                     padding: var(--header-label-padding, 0);                                 }                             `,r=this._getEditorAdjustment(t,{top:6,left:-6,width:11});i=html`                                 <iui-select                                      .allowAnimation="${!0===l.allowAnimation}"                                      .customStyle="${[s,this.customStyle]}"                                      .dropDownAdjustment="${r}"                                     .dropDownSize="${l.dropDownSize}"                                     .enabled="${t.isEditorEnabled}"                                     .maxDropDownItems="${l.maxDropDownItems}"                                     .items=${t.editorList}                                      .resourcePath="${this._currentResourcePath}"                                      .selectedItem=${t.editorValueObject}                                      .theme="${this._currentTheme}"                                      @afterSelect="${i=>this._editorValueChanged(i,e,t)}"                                     @lostFocus="${i=>this._editorLostFocus(i,e,t)}"                                     @opened="${i=>this._cellMouseDown(i.detail.event,e,t)}"                                 ></iui-select>`}else if(t.editorValueObject)i=html`<span class="iui-editor-label" style=${styleMap({display:t.display})}>${t.editorValueObject.text}</span>`;else i=html`<span class="iui-editor-label" style=${styleMap({display:t.display})}>${t.editorValue}</span>`;break;case IntegralUIEditorType.Numeric:if(s){i=html`                                 <iui-numeric                                      .customStyle="${[css`                                 .iui-numeric {                                     background: transparent;                                     margin: var(--numeric-margin, -1px 0 0 0);                                 }                                 .iui-numeric-inbound-value, .iui-numeric-leftright-value, .iui-numeric-updown-value {                                     border: 0;                                 }                                 .iui-numeric input {                                     background: transparent;                                 }                             `,this.customStyle]}"                                      .buttonAlign="${l.buttonAlign}"                                     .decimals="${l.decimals}"                                     .enabled="${t.isEditorEnabled}"                                     .displayMode="${l.displayMode}"                                     .max="${l.max}"                                     .min="${l.min}"                                     .step="${l.step}"                                     .resourcePath="${this._currentResourcePath}"                                     .size="${{width:t.width}}"                                      .value=${t.editorValue}                                      .theme="${this._currentTheme}"                                      @valueChanged="${i=>this._editorValueChanged(i,e,t)}"                                 ></iui-numeric>`}else i=html`<span class="iui-editor-label" style=${styleMap({display:t.display})}>${t.displayValue}</span>`;break;case IntegralUIEditorType.Progress:i=html`                             <div class="iui-editor-progress">                                 <div class="iui-editor-progress-content" style=${styleMap(this._getEditorProgressStyle(t))}></div>                             </div>`;break;case IntegralUIEditorType.Rating:if(!t.isDataEmpty){let s=css`                                 .iui-rating {                                     background: var(--rating-background, transparent);                                     border: var(--rating-border, 0);                                 }                                 .iui-rating:focus {                                     outline: none !important;                                 }                             `;i=html`                                 <div class="iui-editor-rating" align="center">                                     <iui-rating                                          .enabled="${t.isEditorEnabled}"                                         .customStyle="${[s,this.customStyle]}"                                          .division="${l.division}"                                          .increment="${l.increment}"                                         .max="${l.max}"                                         .readOnly="${!t.allowEdit}"                                         .resourcePath="${this._currentResourcePath}"                                         .size="${{height:16}}"                                         .stepSize="${l.stepSize}"                                         .tabIndex="${t.tabIndex}"                                         .theme="${this._currentTheme}"                                          .value=${t.editorValue}                                          @blur="${i=>this._editorLostFocus(i,e,t)}"                                         @valueChanged="${i=>this._editorValueChanged(i,e,t)}"                                     ></iui-rating>                                 </div>`}break;case IntegralUIEditorType.Slider:if(!t.isDataEmpty){let s=css`                                 .iui-slider:focus {                                     outline: none !important;                                 }                             `;i=html`                                 <div class="iui-editor-slider">                                     <iui-slider                                          .enabled="${t.isEditorEnabled}"                                         .customStyle="${[s,this.customStyle]}"                                          .max="${l.max}"                                         .min="${l.min}"                                         .readOnly="${!t.allowEdit}"                                         .resourcePath="${this._currentResourcePath}"                                         .size="${{height:20}}"                                         .theme="${this._currentTheme}"                                          .value=${t.editorValue}                                          @blur="${i=>this._editorLostFocus(i,e,t)}"                                         @valueChanged="${i=>this._editorValueChanged(i,e,t)}"                                     ></iui-slider>                                 </div>`}break;case IntegralUIEditorType.Text:if(s&&t.allowEdit&&this._isEditorFocused&&this._currentEditingCell===t.data)i=html`                                 <input                                      id="iui-editor-text"                                     class="iui-editor-text"                                     style=${styleMap({"text-align":t.align})}                                     .disabled="${!t.isEditorEnabled}"                                     tabindex="${t.tabIndex}"                                     type="${l.type||"text"}"                                     value="${null===t.editorValue?"":t.editorValue}"                                     @blur="${i=>this._editorLostFocus(i,e,t)}"                                     @keydown="${i=>this._editorKeyDown(i,e,t)}"                                     @focus="${()=>this._editorGotFocus(t)}"                                 />`;else i=this._getDefaultRowTemplate(e,t);break;default:if(t.isEditorColumn)i=this._getRowEditorTemplate(e);else if(t.isDragDropColumn)i=e.isDragAllowed&&!e.isEmpty?html`<span class="iui-grid-handle"></span>`:html``;else i=this._getDefaultRowTemplate(e,t)}}return i}_getRowLayout(e){let t="body",i="row-cell-elem",s=0,l={},r=this._isThereFixedColumns(e),o="iui-grid-block",a="row-elem",h={};switch(e){case"left":t="body-left";i="row-left-cell-elem";s=this._fixedLeftViewIndexRange;l={left:0};o+=" iui-grid-block-left";a="row-left-elem";h={"margin-top":this._blockMarginTop+this._groupPanelHeight+"px",height:this._leftBlockSize.height+"px",width:this._leftBlockSize.width+"px"};break;case"right":t="body-right";i="row-right-cell-elem";s=this._fixedRightViewIndexRange;o+=" iui-grid-block-right";a="row-right-elem";h={"margin-top":this._blockMarginTop+this._groupPanelHeight+"px",height:this._rightBlockSize.height+"px",right:this._getBlockRightPos()+"px",width:this._rightBlockSize.width+"px"};break;default:s=this._numVisibleCells;l={left:-this._contentLeftPos+"px",position:"absolute"};h={"margin-top":this._blockMarginTop+this._groupPanelHeight+"px",height:this._blockSize.height+"px"}}if(r)return html`                 <div class="${o}" style=${styleMap(h)} @scroll="${e=>this._onContentScroll(e)}">                     <table id="${t}" cellpadding="0" cellspacing="0" style=${styleMap(l)}>                         ${this._scrollRowList[e].filter((e,t)=>!e.isEmpty&&t<this._visibleRange).map((t,l)=>html`                                 <tr id="${a}" class=${classMap(t.style.row||{})} draggable="${t.draggable}" @mouseenter="${i=>this._rowMouseEnter(i,t,e)}" @mouseleave="${i=>this._rowMouseLeave(i,t,e)}" @mousedown="${e=>this._rowMouseDown(e,t)}" @mouseup="${e=>this._rowMouseUp(e,t)}" @dragstart="${e=>this._rowDragStart(e,t,l)}" @dragover="${i=>this._rowDragOver(i,t,l,e)}" @drop="${e=>this._rowDragDrop(e,t)}" @dragend="${e=>this._rowDragEnd(e,t)}" @click="${e=>this._rowClickEvent(e,t)}" @dblclick="${e=>this._rowDblClickEvent(e,t)}" @contextmenu="${e=>this._rowRightClickEvent(e,t)}" @touchstart="${e=>this._rowTouchStart(e,t)}">                                     ${t.cells.filter((e,t)=>t<s).map((e,s)=>html`                                             <td id="${i}" class=${classMap(t.style.cell||{})} @mouseenter="${t=>this._cellMouseEnter(t,e)}" @mouseleave="${e=>this._cellMouseLeave(e)}" @mousedown="${i=>this._cellMouseDown(i,t,e)}" @click="${t=>this._cellClickEvent(t,e)}" @mouseup="${t=>this._cellMouseUp(t,e)}" @dblclick="${t=>this._cellDblClickEvent(t,e)}" @contextmenu="${t=>this._cellRightClickEvent(t,e)}" @touchstart="${i=>this._cellTouchStart(i,t,e)}" @touchend="${i=>this._cellTouchEnd(i,t,e)}">                                                 <div class=${classMap(e.style.content)} style=${styleMap(this._getCellStyle(e))} tabindex="${e.tabIndex}" @focus="${i=>this._cellGotFocus(t,e)}" @blur="${i=>this._cellLostFocus(t,e)}" @keydown="${i=>this._cellKeyDown(i,t,e)}" @keypress="${i=>this._cellKeyPress(i,t,e)}" @keyup="${i=>this._cellKeyUp(i,t,e)}">                                                     ${this._getExpandBoxLayout(t,e)}                                                     ${this._getRowCellTemplate(t,e)}                                                 </div>                                             </td>                                     `)}                                 </tr>                         `)}                     </table>                 </div>`}_getCellStyle(e){let t=e.inlineStyle||{};t.paddingLeft=e.indent+"px";t.textAlign=e.align;t.width=e.width+"px";t.height=e.height;return t}_getSelectContentLayout(){if(this._isSelectedTemplatePresent&&!this._isUpdateActive)return this._currentSelectedRows.map((e,t)=>html`<span>                     ${this._isContentAllowed(e,"select")?html`<div class="iui-grid-block iui-grid-block-select" style=${styleMap(this._getSelectBlockRect(t))}>                             <div style=${styleMap({height:this._blockSelectHeight+"px"})}>                                 ${this._getContentTemplate(e,"select")}                             </div>                         </div>`:html``}                 </span>`);else return html``}_processUpdateLayout(e){let t=this;return new Promise(i=>{if(t._isUpdateAllowed){t._resetLayoutTimer();t._updateTimer=setTimeout(function(){t._updateCurrentColumnList(e);t._updateGroupList();if(t._currentPaging.enabled)t._updatePageList();t._updateCurrentRowList(e);t.updateFullList();t._updateScrollColumnList();t._updateReferences();t._updateExpandingColumnID();if(t._getNumScrollColumns("normal")<t._getNumVisibleColumns("normal"))t._updateScrollRowListLimit("normal",t._getNumVisibleColumns("normal")-t._getNumScrollColumns("normal"));if(t._getNumScrollColumns("left")<t._getNumVisibleColumns("left"))t._updateScrollRowListLimit("left",t._getNumVisibleColumns("left")-t._getNumScrollColumns("left"));if(t._getNumScrollColumns("right")<t._getNumVisibleColumns("right"))t._updateScrollRowListLimit("right",t._getNumVisibleColumns("right")-t._getNumScrollColumns("right"));t._groupPanelHeight=t._groupingPanelElem?t._groupingPanelElem.offsetHeight:0;t._groupPanelSize.height=t._groupingPanelElem?t._groupingPanelElem.offsetHeight:0;t._paginatorHeight=t._paginatorElem?t._paginatorElem.offsetHeight:0;t._paginatorPos.top=t._elemRef.clientHeight-t._paginatorHeight+1;t._horScrollElemPos.bottom=t._paginatorHeight>0?t._paginatorHeight-1:0;t._cornerScrollElemPos.bottom=t._paginatorHeight>0?t._paginatorHeight-1:0;t._clientRect={width:t._elemRef.clientWidth,height:t._elemRef.clientHeight-t._groupPanelHeight-t._paginatorHeight};if(t._groupingPanelElem){let e=t._commonService.getBorderWidth(t.groupingPanelElem),i=t._commonService.getPadding(t.groupingPanelElem);t._groupPanelSize.width=t._clientRect.width-(i.left+i.right)-(e.left+e.right)}t._updateRange();t.update();t._upd