integralui-web-treegrid/components/integralui.treegrid.js

IntegralUI Web - TreeGrid is a native Web Component that displays hierarchical data structures in multiple columns.

/*
  filename: integralui.treegrid.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{iuiTreeGridDefaultStyle}from"../styles/integralui.treegrid.style.js";import{iuiTreeGridOfficeStyle}from"../themes/office/integralui.treegrid.office.js";import{iuiTreeGridMidnightStyle}from"../themes/midnight/integralui.treegrid.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 IntegralUITreeGrid extends IntegralUIBaseGrid{_init(){super._init();this._expandTimeout=null;this._expandRow=null;this._isAutoExpandActive=!1;this._isExpandBoxVisible=!0;this._currentBaseStyleSettings=iuiBaseDefaultStyle;this._currentControlStyleSettings=iuiTreeGridDefaultStyle;this._currentEditorStyleSettings=iuiEditorsDefaultStyle;this._currentEditorThemeSettings=css``;this._currentFilterStyleSettings=iuiFilterDefaultStyle;this._currentScrollStyleSettings=iuiScrollBarStyle;this._currentSortStyleSettings=iuiSortingDefaultStyle;this._generalClassName="iui-treegrid";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-treegrid-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},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 showExpandBox(){return this._isExpandBoxVisible}set showExpandBox(e){const t=this._isExpandBoxVisible;this._isExpandBoxVisible=e;this.updateLayout();this.requestUpdate("showExpandBox",t)}loadData(e,t,i,l){this._processLoadData(e,t,i,l)}_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,l){if(this._isEnabled){let s=this._getRowElems(l);if(s&&i>=0&&i<s.length){let l=this._commonService.getPageRect(s[i]),r={x:l.left,y:l.top,width:l.right-l.left,height:l.bottom-l.top};this._expandOnDelay(t.data);this._processScroll(e,0,this._paginatorHeight);if(!this._isScrollTimerActive)this._processDragOver(e,t,r)}}e.stopPropagation()}_rowDragDrop(e,t){if(this._isEnabled){this._expandRow=null;if(this._expandTimeout)clearTimeout(this._expandTimeout);this._processDragDrop(e,t)}e.stopPropagation()}_getCellsAllSides(){let e=[];for(let t=0;t<3;t++){let i=0,l=[],s="";switch(t){case 1:i=this._fixedLeftViewIndexRange;s="normal";break;case 2:i=this._fixedRightViewIndexRange;s="right";break;default:i=this._numVisibleCells;s="left"}l=this._scrollRowList[s].filter((e,t)=>t===this._dragObjIndex).filter((e,t)=>t<i);e=e.concat(l.length>0?l[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-treegrid-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",l="iui-treegrid-block",s={top:this._currentHeaderHeight+"px"},r=this._isThereFixedColumns(e);switch(e){case"left":t="filter-left";i="filter-left-cell-elem";l+=" iui-treegrid-block-filter-left";s.left=0;break;case"right":t="filter-right";i="filter-right-cell-elem";l+=" iui-treegrid-block-filter-right";s.right=this._getBlockRightPos()+"px";break;default:l+=" iui-treegrid-block-filter";s.left=-this._contentLeftPos+"px"}if(r)return html`                     <div id="${t}" class="${l}" style=${styleMap(s)}>                         <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",l="iui-treegrid-block",s={bottom:this._getBlockBottomPos()+"px"},r=this._isThereFixedColumns(e);switch(e){case"left":t="footer-left";i="footer-left-cell-elem";l+=" iui-treegrid-block-bottom-left";s.left=0;break;case"right":t="footer-right";i="footer-right-cell-elem";l+=" iui-treegrid-block-bottom-right";s.right=this._getBlockRightPos()+"px";break;default:l+=" iui-treegrid-block-bottom";s.left=-this._contentLeftPos+"px"}if(r)return html`                     <div id="${t}" class="${l}" style=${styleMap(s)}>                         <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``}_getHeaderLayout(e){if(this._isHeaderVisible){let t="header",i="header-cell-elem",l="iui-treegrid-block",s={},r=this._isThereFixedColumns(e);switch(e){case"left":t="header-left";i="header-left-cell-elem";l+=" iui-treegrid-block-top-left";s={left:0};break;case"right":t="header-right";i="header-right-cell-elem";l+=" iui-treegrid-block-top-right";s={right:this._getBlockRightPos()+"px"};break;default:l+=" iui-treegrid-block-top";s={left:-this._contentLeftPos+"px"}}if(r)return html`                     <div id="${t}" class="${l}" style=${styleMap(s)}>                         <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-treegrid-block iui-treegrid-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 l=!1;if(t.editorVisibility&IntegralUIVisibility.Hover&&t.editorVisibility&IntegralUIVisibility.Click)l=e.data===this._hoverRow||e.data===this._currentSelectedRow;else if(t.editorVisibility&IntegralUIVisibility.None)l=!1;else if(t.editorVisibility&IntegralUIVisibility.Hover)l=e.data===this._hoverRow;else if(t.editorVisibility&IntegralUIVisibility.Click)l=e.data===this._currentSelectedRow;else l=!0;l=l&&!1!==t.data[this._cellFields.allowEdit];let s=t.editorSettings;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(l){let l=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,l);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===s.allowAnimation}"                                  .animationSpeed="${s.animationSpeed}"                                 .animationType="${"calendar"}"                                 .customStyle="${o}"                                  .dropDownAdjustment="${a}"                                 .calendarSize="${s.calendarSize}"                                 .enabled="${t.isEditorEnabled}"                                 .firstDayOfWeek="${s.firstDayOfWeek}"                                 .format=${s.format}                                  .formatOptions=${s.formatOptions}                                  .locales=${s.locales}                                  .resourcePath="${this._currentResourcePath}"                                  .selectedDate=${t.editorValueObject}                                  .theme="${this._currentTheme}"                                  @blur="${i=>this._editorLostFocus(i,e,t)}"                                 @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(l){let l=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===s.allowAnimation}"                                  .customStyle="${[l,this.customStyle]}"                                  .dropDownAdjustment="${r}"                                 .dropDownSize="${s.dropDownSize}"                                 .enabled="${t.isEditorEnabled}"                                 .maxDropDownItems="${s.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(l){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="${s.buttonAlign}"                                 .decimals="${s.decimals}"                                 .enabled="${t.isEditorEnabled}"                                 .displayMode="${s.displayMode}"                                 .max="${s.max}"                                 .min="${s.min}"                                 .step="${s.step}"                                 .resourcePath="${this._currentResourcePath}"                                 .size="${{width:t.width}}"                                  .value=${t.editorValue}                                  .theme="${this._currentTheme}"                                  @blur="${i=>this._editorLostFocus(i,e,t)}"                                 @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 l=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="${[l,this.customStyle]}"                                      .division="${s.division}"                                      .increment="${s.increment}"                                     .max="${s.max}"                                     .readOnly="${!t.allowEdit}"                                     .resourcePath="${this._currentResourcePath}"                                     .size="${{height:16}}"                                     .stepSize="${s.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 l=css`                             .iui-slider:focus {                                 outline: none !important;                             }                         `;i=html`                             <div class="iui-editor-slider">                                 <iui-slider                                      .enabled="${t.isEditorEnabled}"                                     .customStyle="${[l,this.customStyle]}"                                      .max="${s.max}"                                     .min="${s.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(l&&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="${s.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-treegrid-handle"></span>`:html``;else i=this._getDefaultRowTemplate(e,t)}}return i}_getRowEditorTemplate(e){if(e.isEditAllowed&&!e.isEmpty){let t="iui-treegrid-editing";if(e.isEditorActive)t+=" iui-treegrid-editing-active";return html`<span class="${t}" @mouseup="${t=>this._editorColumnMouseUp(t,e)}"></span>`}return html``}_getRowLayout(e){let t="body",i="row-cell-elem",l=0,s={},r=this._isThereFixedColumns(e),o="iui-treegrid-block",a="row-elem",n={};switch(e){case"left":t="body-left";i="row-left-cell-elem";l=this._fixedLeftViewIndexRange;s={left:0};o+=" iui-treegrid-block-left";a="row-left-elem";n={"margin-top":this._blockMarginTop+"px",height:this._leftBlockSize.height+"px",width:this._leftBlockSize.width+"px"};break;case"right":t="body-right";i="row-right-cell-elem";l=this._fixedRightViewIndexRange;o+=" iui-treegrid-block-right";a="row-right-elem";n={"margin-top":this._blockMarginTop+"px",height:this._rightBlockSize.height+"px",right:this._getBlockRightPos()+"px",width:this._rightBlockSize.width+"px"};break;default:l=this._numVisibleCells;s={left:-this._contentLeftPos+"px",position:"absolute"};n={"margin-top":this._blockMarginTop+"px",height:this._blockSize.height+"px"}}if(r)return html`                 <div class="${o}" style=${styleMap(n)} @scroll="${e=>this._onContentScroll(e)}">                     <table id="${t}" cellpadding="0" cellspacing="0" style=${styleMap(s)}>                         ${this._scrollRowList[e].filter((e,t)=>!e.isEmpty&&t<this._visibleRange).map((t,s)=>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,s)}" @dragover="${i=>this._rowDragOver(i,t,s,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<l).map((e,l)=>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({"padding-left":e.indent+"px","text-align":e.align,width:e.width+"px",height:e.height})} 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>`}_getSelectContentLayout(){if(this._isSelectedTemplatePresent&&!this._isUpdateActive)return this._currentSelectedRows.map((e,t)=>html`<span>                     ${this._isContentAllowed(e,"select")?html`<div class="iui-treegrid-block iui-treegrid-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);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._paginatorHeight=t._paginatorElem?t._paginatorElem.offsetHeight:0;t._paginatorPos.top=t._elemRef.clientHeight-t._paginatorHeight+1;t._horScrollElemPos.bottom=t._paginatorHeight>0?t._paginatorHeight-2:0;t._cornerScrollElemPos.bottom=t._paginatorHeight>0?t._paginatorHeight-2:0;t._clientRect={width:t._elemRef.clientWidth,height:t._elemRef.clientHeight-t._paginatorHeight};t._updateRange();t.update();t._updateReferences();let l=setTimeout(function(){t._columnPadding={top:0,right:0,bottom:0,left:0};let e=[];if(t._columnElems.normal&&t._isHeaderVisible)e=t._columnElems.normal;else if(t._footerElems.normal&&t._isFooterVisible)e=t._footerElems.normal;else if(t._cellElems.normal)e=t._cellElems.normal;if(e&&e.length>0)t._columnPadding=t._commonService.getPadding(e[0].firstElementChild);t._currentHeaderHeight=t._getHeaderHeight();t._currentFilterHeight=t._getFilterHeight();t._currentFooterHeight=t._getFooterHeight();t._updateVisibleRange();t._updateRange();t.update();let s=setTimeout(function(){t._blockMarginTop=t._currentHeaderHeight+t._currentFilterHeight;t._updateBlockSize();t._checkForSelectionChange();if(t._rowElems){let e=t._rowElems.normal;t._avgRowHeight=0;if(e&&e.length>0){let i=0,l=0;for(let s=0;s<e.length&&s<t._currentRowList.length;s++){l+=e[s].offsetHeight;i++}if(i>0)t._avgRowHeight=Math.floor(l/i)}}t._updateScrollSize();t._updateAllColumnWidth();t._updateScrollSize();t._updateSelectContentPos();t._invokeEvent("updateComplete");t._isUpdateActive=!1;t.update();clearTimeout(s);i()},1);clearTimeout(l)},1);clearTimeout(t._updateTimer)},100)}})}_updateRange(e){this._viewIndexRange={left:0,middle:999,right:999};this._updateLeftBlockSize();this._updateRightBlockSize();this._fixedLeftViewIndexRange=this._completeColumnList.left.length>0?this._completeColumnList.left[0].length:0;this._fixedRightViewIndexRange=this._completeColumnList.right.length>0?this._completeColumnList.right[0].length:0;let t=!1,i=!1,l=!1,s=this._currentScrollPos.x+this._clientRect.width-this._leftBlockSize.width,r=s+this._clientRect.width/2,o=0;if(this._completeColumnList.normal.length>0){let e=this._completeColumnList.normal[0].length;for(let a=0;a<e;a++){let e=this._completeColumnList.normal[0][a].data;o+=this._getColumnWidth(e)+this._columnPadding.left+this._columnPadding.right+6;if(!t&&o>=this._currentScrollPos.x){this._viewIndexRange.left=a;t=!0}if(!i&&o>=s){this._viewIndexRange.middle=a;i=!0}if(!l&&o>=r){this._viewIndexRange.right=a;l=!0}if(t&&l)break}if(!i)this._viewIndexRange.middle=e;if(!l)this._viewIndexRange.right=e;o=0;for(let t=0;t<e&&t<this._viewIndexRange.left;t++){let e=this._completeColumnList.normal[0][t].data;o+=this._getColumnWidth(e)+this._columnPadding.left+this._columnPadding.right+6}}this._initialContentLeftPos=this._currentScrollPos.x-o;this._contentLeftPos=this._initialContentLeftPos-this._leftBlockSize.width;let a=this._getColumnListInRange("normal");this._numVisibleCells=a.length;if(!e)this._updateScrollColumnList();this._updateScrollRowList()}beginLoad(e){if(e){if(this._loadRows.indexOf(e)<0)this._loadRows.push(e)}else{this._isLoading=!0;this.update();let e=this.shadowRoot.querySelector(".iui-loading-icon");if(e)this._loadIconPos={top:(this._clientRect.height-e.offsetHeight)/2,left:(this._clientRect.width-e.offsetWidth)/2}}this.update()}endLoad(e){let t=this;if(e){let i=t._loadRows.indexOf(e);if(i>=0)t._loadRows.splice(i,1);t._updateCurrentLayout(!0)}else{t._loadRows.length=0;t._isLoading=!1;t._isLoadingEnd=!0;t.refresh();t._loadingEndTimeout=setTimeout(function(){t._isLoadingEnd=!1;t.update();clearTimeout(t._loadingEndTimeout)},400)}}_isItemLoading(e){return this._loadRows.indexOf(e)>=0?!0:!1}_updateThemeSettings(e){this._currentThemeSettings=css``;this._currentEditorThemeSettings=css``;this._currentScrollStyleSettings=css``;switch(e){case IntegralUITheme.Office:this._currentThemeSettings.cssText=this._commonService.replaceAll(iuiTreeGridOfficeStyle.cssText,"../../icons",this._currentResourcePath);this._currentEditorThemeSettings.cssText=this._commonService.replaceAll(iuiEditorsOfficeStyle.cssText,"../../icons",e);this._currentScrollStyleSettings.cssText=this._commonService.replaceAll(iuiScrollBarOfficeStyle.cssText,"../../icons",this._currentResourcePath);break;case IntegralUITheme.Midnight:this._currentThemeSettings.cssText=this._commonService.replaceAll(iuiTreeGridMidnightStyle.cssText,"../../icons",this._currentResourcePath);this._currentEditorThemeSettings.cssText=this._commonService.replaceAll(iuiEditorsMidnightStyle.cssText,"../../icons",this._currentResourcePath);this._currentScrollStyleSettings.cssText=this._commonService.replaceAll(iuiScrollBarMidnightStyle.cssText,"../../icons",this._currentResourcePath);break;default:this._currentThemeSettings.cssText="";this._currentEditorThemeSettings.cssText="";this._currentScrollStyleSettings.cssText=this._commonService.replaceAll(iuiScrollBarStyle.cssText,"../icons",this._currentResourcePath)}}firstUpdated(e){let t=this;t._updateReferences();setTimeout(function(){t._isHoverTemplatePresent=t.rowHoverTemplate?!0:!1;t._isSelectedTemplatePresent=t.rowSelectTemplate?!0:!1;t.updateLayout()},1)}render(){return html`             <style>                 ${iuiScrollBarStyle}                 ${this._currentBaseStyleSettings}                 ${this._currentScrollStyleSettings}                 ${this._currentEditorStyleSettings}                 ${this._currentFilterStyleSettings}                 ${this._currentSortStyleSettings}                 ${this._currentControlStyleSettings}                 ${this._currentThemeSettings}                 ${this._currentCustomStyle}             </style>             <div data-ctrl="treegrid" class=${classMap(this._getControlClass())} style=${styleMap(this._getControlStyle())} @DOMMouseScroll="${e=>this._gridMouseWheel(e)}" @mousewheel="${e=>this._gridMouseWheel(e)}" @mousemove="${e=>this._gridMouseMove(e)}" @mouseup="${e=>this._gridMouseUp(e)}" @mouseenter="${e=>this._gridMouseEnter(e)}" @mouseleave="${e=>this._gridMouseLeave(e)}" @dragenter="${e=>this._ctrlDragEnter(e)}" @dragleave="${e=>this._ctrlDragLeave(e)}" @dragover="${e=>this._ctrlDragOver(e)}" @drop="${e=>this._ctrlDragDrop(e)}" @dragend="${e=>this._ctrlDragEnd(e)}" @scroll="${e=>this._onGridScroll(e)}" @touchstart="${e=>this._ctrlTouchStart(e)}" @touchend="${e=>this._ctrlTouchEnd(e)}">                 <div class=${classMap({"iui-base-loading":this._isLoading?!0:!1,"iui-base-loading-end":this._isLoadingEnd?!0:!1})}>                     ${this._getHeaderLayout("normal")}                     ${this._getHeaderLayout("left")}                     ${this._getHeaderLayout("right")}                     ${this._getFilterLayout("normal")}                     ${this._getFilterLayout("left")}                     ${this._getFilterLayout("right")}                     ${this._getRowLayout("normal")}                     ${this._getRowLayout("left")}                     ${this._getRowLayout("right")}                     ${this._getDragRowLayout()}                     ${this._getHoverContentLayout()}                     ${this._getSelectContentLayout()}                     ${this._getFooterLayout("normal")}                     ${this._getFooterLayout("left")}                     ${this._getFooterLayout("right")}                     ${this.isVerScrollVisible()?html`<iui-scrollbar id="ver-scroll" .enabled="${this.enabled}" .position="${{top:1}}" .value="${this._currentScrollPos.y}" .max="${this._maxScrollPos.y}" .largeChange="${this._scrollLargeChange.y}" .height="${this._scrollBarSize.height}" .theme="${this._currentTheme}" @mouseenter="${e=>this._scrollMouseEnter(e)}" @valueChanged="${e=>this._onVerticalScrollChanged(e)}" @scrollStart="${e=>this._onVerticalScrollStart(e)}" @scrollEnd="${e=>this._onVerticalScrollEnd(e)}"></iui-scrollbar>`:html``}                     ${this.isHorScrollVisible()?html`<iui-scrollbar id="hor-scroll" .enabled="${this.enabled}" orientation="Horizontal" .position="${{bottom:this._horScrollElemPos.bottom}}" .value="${this._currentScrollPos.x}" .max="${this._maxScrollPos.x}" .width="${this._scrollBarSize.width}" .theme="${this._currentTheme}" @mouseenter="${e=>this._scrollMouseEnter(e)}" @valueChanged="${e=>this._onHorizontalScrollChanged(e)}" @scrollMouseDown="${e=>this._scrollMouseDown(e)}" @scrollStart="${e=>this._onHorizontalScrollStart(e)}" @scrollEnd="${e=>this._onHorizontalScrollEnd(e)}"></iui-scrollbar>`:html``}                     ${this.isVerScrollVisible()&&this.isHorScrollVisible()?html`<div class="iui-scrollbar-corner" style=${styleMap({bottom:this._cornerScrollElemPos.bottom+"px",position:"absolute",right:"0",width:"16px",height:"16px"})}></div>`:html``}                     ${this._isPaginationEnabled()?html`<iui-paginator id="paginator" align="center" style=${styleMap({position:"absolute",top:this._paginatorPos.top+"px",width:"100%"})} .currentPage="${this._currentPageNumber}" .maxPages="${this.getMaxPages()}" .resourcePath="${this._currentResourcePath}" .theme="${this._currentTheme}" @mouseenter="${e=>this._paginatorMouseEnter(e)}" @pageChanged="${e=>this._paginatorPageChanged(e)}"></iui-paginator>`:html``}                 </div>                 ${this._isLoading?html`<div class="iui-loading-icon" style=${styleMap({top:this._loadIconPos.top+"px",left:this._loadIconPos.left+"px"})}></div>`:html``}             </div>         `}_updateControlStyleSettings(e){this._currentBaseStyleSettings=css``;this._currentBaseStyleSettings.cssText=this._commonService.replaceAll(iuiBaseDefaultStyle.cssText,"../icons",e);this._currentControlStyleSettings=css``;this._currentControlStyleSettings.cssText=this._commonService.replaceAll(iuiTreeGridDefaultStyle.cssText,"../icons",e);this._currentEditorStyleSettings=css``;this._currentEditorStyleSettings.cssText=this._commonService.replaceAll(iuiEditorsDefaultStyle.cssText,"../icons",e);this._currentFilterStyleSettings=css``;this._currentFilterStyleSettings.cssText=this._commonService.replaceAll(iuiFilterDefaultStyle.cssText,"../icons",e);this._currentSortStyleSettings=css``;this._currentSortStyleSettings.cssText=this._commonService.replaceAll(iuiSortingDefaultStyle.cssText,"../icons",e)}_updateReferences(){this._elemRef=this.shadowRoot.querySelector("div[data-ctrl=treegrid]");this._headerElem={normal:this.shadowRoot.querySelector("#header"),left:this.shadowRoot.querySelector("#header-left"),right:this.shadowRoot.querySelector("#header-right")};this._hiddenLeftHeaderElem=this._headerElem.left?this._headerElem.left.querySelector("#header-left-cell-end"):null;if(this._hiddenLeftHeaderElem)this._hiddenLeftHeaderElemSize.width=this._hiddenLeftHeaderElem.offsetWidth;this._columnElems={normal:this._headerElem.normal?this._headerElem.normal.querySelectorAll("#header-cell-elem"):[],left:this._headerElem.left?this._headerElem.left.querySelectorAll("#header-left-cell-elem"):[],right:this._headerElem.right?this._headerElem.right.querySelectorAll("#header-right-cell-elem"):[]};this._filterElem={normal:this.shadowRoot.querySelector("#filter"),left:this.shadowRoot.querySelector("#filter-left"),right:this.shadowRoot.querySelector("#filter-right")};this._filterElems={normal:this._filterElem.normal?this._filterElem.normal.querySelectorAll("#filter-cell-elem"):[],left:this._filterElem.left?this._filterElem.left.querySelectorAll("#filter-left-cell-elem"):[],right:this._filterElem.right?this._filterElem.right.querySelectorAll("#filter-right-cell-elem"):[]};this._bodyElem={normal:this.shadowRoot.querySelector("#body"),left:this.shadowRoot.querySelector("#body-left"),right:this.shadowRoot.querySelector("#body-right")};this._rowElems={normal:this._bodyElem.normal?this._bodyElem.normal.rows:[],left:this._bodyElem.left?this._bodyElem.left.rows:[],right:this._bodyElem.right?this._bodyElem.right.rows:[]};this._cellElems={normal:this._bodyElem.normal?this._bodyElem.normal.querySelectorAll("#row-cell-elem"):[],left:this._bodyElem.left?this._bodyElem.left.querySelectorAll("#row-left-cell-elem"):[],right:this._bodyElem.right?this._bodyElem.right.querySelectorAll("#row-right-cell-elem"):[]};this._footerElem={normal:this.shadowRoot.querySelector("#footer"),left:this.shadowRoot.querySelector("#footer-left"),right:this.shadowRoot.querySelector("#footer-right")};this._footerElems={normal:this._footerElem.normal?this._footerElem.normal.querySelectorAll("#footer-cell-elem"):[],left:this._footerElem.left?this._footerElem.left.querySelectorAll("#footer-left-cell-elem"):[],right:this._footerElem.right?this._footerElem.right.querySelectorAll("#footer-right-cell-elem"):[]};this._paginatorElem=this.shadowRoot.querySelector("#paginator");if(this._resizeObserver)this._resizeObserver.observe(this._elemRef)}}window.customElements.define("iui-treegrid",IntegralUITreeGrid);export default IntegralUITreeGrid;