@mescius/wijmo.grid.detail/es2015-esm.js

UI library for pure JS, Angular, React, Vue and more...

/*!
    *
    * Wijmo Library 5.20251.40
    * https://developer.mescius.com/wijmo
    *
    * Copyright(c) MESCIUS inc. All rights reserved.
    *
    * Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
    * us.sales@mescius.com
    * https://developer.mescius.com/wijmo/licensing
    *
    */

import{_addCultureInfo,Key,Control,culture,copy,asEnum,asNumber,asBoolean,asFunction,isFunction,isNumber,animate,setCss,closest,closestClass,addClass,hasClass,setAriaLabel,setAttribute,ControlClsNames,InputFormElementsClsNames,GlyphClsNames,format,_registerModule}from"@mescius/wijmo";import{Row,FlexGrid,MergeManager,CellRange,CellType,_NewRowTemplate,GroupRow,FlexGridClsNames}from"@mescius/wijmo.grid";import*as selfModule from"@mescius/wijmo.grid.detail";export class DetailRow extends Row{constructor(e){super();this.isReadOnly=!0}get detail(){return this._detail}set detail(e){this._detail=e}}export class DetailMergeManager extends MergeManager{constructor(e){super();this._originalMergeManager=e.mergeManager}getMergedRange(e,t,i,l=!0){switch(e.cellType){case CellType.Cell:if(e.rows[t]instanceof DetailRow){e.columns._frozenInternal>0&&e.grid&&(e.grid.cloneFrozenCells=!1);return new CellRange(t,0,t,e.columns.length-1)}break;case CellType.RowHeader:let l=_isFrozen(e,t),s=_isNew(e,t),a=e.rows[t].dataItem;!a&&t>0&&e.rows[t]instanceof DetailRow&&(a=e.rows[t-1].dataItem);let r=t;for(;r>0&&e.rows[r-1].dataItem==a&&_isFrozen(e,r-1)==l&&_isNew(e,r-1)==s;)r--;let o=t;for(;o<e.rows.length-1&&e.rows[o+1].dataItem==a&&_isFrozen(e,o+1)==l&&_isNew(e,o+1)==s;)o++;o<e.rows.length-1&&e.rows[o+1]instanceof DetailRow&&_isFrozen(e,o+1)==l&&_isNew(e,o+1)==s&&o++;return r!=o?new CellRange(r,i,o,i):null}return this._originalMergeManager.getMergedRange(e,t,i,l)}}function _isFrozen(e,t){return t<e.rows._frozenInternal}function _isNew(e,t){return e.rows[t]instanceof _NewRowTemplate}export const FlexGridDetailProviderClsNames={detail:"wj-detail",detailRow:"wj-detail-row",elemDetail:"wj-elem-detail"};_addCultureInfo("FlexGridDetailProvider",{ariaLabels:{toggleDetail:"Toggle Row Detail"},accessibilityHelperMessage:{showDetail:"Show detail row: {rowIndex}",hideDetail:"Hide detail row: {rowIndex}"}});export var KeyAction;!function(e){e[e.None=0]="None";e[e.ToggleDetail=1]="ToggleDetail"}(KeyAction||(KeyAction={}));export var DetailVisibilityMode;!function(e){e[e.Code=0]="Code";e[e.Selection=1]="Selection";e[e.ExpandSingle=2]="ExpandSingle";e[e.ExpandMulti=3]="ExpandMulti"}(DetailVisibilityMode||(DetailVisibilityMode={}));export class FlexGridDetailProvider{constructor(e,t){this._maxHeight=null;this._mode=DetailVisibilityMode.ExpandSingle;this._animated=!1;this._keyActionEnter=KeyAction.None;this._g=e;e.mergeManager=new DetailMergeManager(e);e.addEventListener(e.rowHeaders.hostElement,"click",this._hdrClick.bind(this));e.addEventListener(e.rowHeaders.hostElement,"mousedown",t=>{let i=e.editableCollectionView;if(e.activeEditor||i&&i.currentEditItem){this._hdrClick(t);t.preventDefault()}});setTimeout(()=>{e.formatItem.addHandler(this._formatItem,this)},100);e.selectionChanged.addHandler(this._selectionChanged,this);e.resizedRow.addHandler(this._resizedRow,this);e.loadingRows.addHandler(()=>this.hideDetail());e.deletingRow.addHandler((e,t)=>{this.hideDetail(t.row)});e.updatedView.addHandler(this._handleFrozenCells,this);e.cloneFrozenCells=!1;e.draggingRow.addHandler((e,t)=>{if(t.row<e.rows.length-1&&e.rows[t.row+1]instanceof DetailRow){t.cancel=!0;this.hideDetail(t.row)}});e.addEventListener(e.hostElement,"keydown",e=>{if(e.keyCode==Key.Enter&&this._keyActionEnter==KeyAction.ToggleDetail){let t=this._g.selection.row,i=this._g.activePanel.cellType;this._toggleRowDetail(t)&&i===CellType.Cell&&e.preventDefault()}},!0);e._root.addEventListener("scroll",()=>{hasClass(e.activeCell,FlexGridDetailProviderClsNames.detail)&&Control.sharedState.InvalidScroll||Control.refreshAll(e._root)});copy(this,t)}get grid(){return this._g}get detailVisibilityMode(){return this._mode}set detailVisibilityMode(e){if((e=asEnum(e,DetailVisibilityMode))!=this._mode){this._mode=e;this.hideDetail();this._g.invalidate()}}get maxHeight(){return this._maxHeight}set maxHeight(e){if((e=asNumber(e,!0))!=this._maxHeight){this._maxHeight=e;this.hideDetail()}}get isAnimated(){return this._animated}set isAnimated(e){e!=this._animated&&(this._animated=asBoolean(e))}get keyActionEnter(){return this._keyActionEnter}set keyActionEnter(e){this._keyActionEnter=asEnum(e,KeyAction)}get createDetailCell(){return this._createDetailCellFn}set createDetailCell(e){this._createDetailCellFn=asFunction(e,!0)}get disposeDetailCell(){return this._disposeDetailCellFn}set disposeDetailCell(e){this._disposeDetailCellFn=asFunction(e,!0)}get rowHasDetail(){return this._rowHasDetailFn}set rowHasDetail(e){if((e=asFunction(e,!0))!=this._rowHasDetailFn){this._rowHasDetailFn=e;this.hideDetail();this._g.invalidate()}}getDetailRow(e){let t=this._g.rows,i=this._toIndex(e),l=t[i]?t[i].dataItem:void 0;for(;i<t.length;i++){let e=t[i];if(e instanceof DetailRow)return e;if(e.dataItem!=l)return null}return null}isDetailVisible(e){return null!=this.getDetailRow(e)}isDetailAvailable(e){e=this._toIndex(e);return this._hasDetail(e)}hideDetail(e){let t=this._g,i=t.rows,l=culture.FlexGridDetailProvider.accessibilityHelperMessage.hideDetail;if(null==e){for(let e=0;e<i.length;e++)i[e]instanceof DetailRow&&this.hideDetail(e);return}let s=this._toIndex(e);if(t.rows._frozenInternal>0&&s<=t.rows._frozenInternal-1){t.rows.frozenDetailChildren-=1;t.rows._frozenInternal-=1}else if(t.rows._frozenInternal<0&&t.rows.isFrozen(s)){t.rows.frozenDetailChildren-=1;t.rows._frozenInternal+=1}for(;!(i[s]instanceof DetailRow)&&s<i.length-1;)s++;let a=i[s];if(a instanceof DetailRow){let e=a.detail.parentElement;if(e){let i=e.querySelectorAll(`.${ControlClsNames.hostElement}`);for(let e=0;e<i.length;e++){let l=Control.getControl(i[e]);l&&l.containsFocus()&&t.focus(!0)}}let r=this.disposeDetailCell;!!r&&r(a)||Control.disposeAll(a.detail);i.removeAt(s);l=format(l,{rowIndex:s});t.announceShortcut(l)}}showDetail(e,t=!1){let i=this._g,l=i.rows,s=culture.FlexGridDetailProvider.accessibilityHelperMessage.showDetail,a=this._toIndex(e);if(i.rows._frozenInternal>0&&a<=i.rows._frozenInternal-1){i.rows.frozenDetailChildren+=1;i.rows._frozenInternal+=1}else if(i.rows._frozenInternal<0&&i.rows.isFrozen(a)){i.rows.frozenDetailChildren+=1;i.rows._frozenInternal-=1}a>0&&l[a]instanceof DetailRow&&a--;let r=l[a].dataItem;for(;a<l.length-1&&l[a+1].dataItem==r;)a++;if(t){let e=i.selection,t=!1;for(let i=0;i<l.length-1;i++)if(i!=a&&l[i+1]instanceof DetailRow){this.hideDetail(i);i<a&&a--;if(i<e.row){e.row--;e.row2--;t=!0}}t&&i.select(e,!1)}if(!this.isDetailVisible(a)&&this._hasDetail(a)){let e=new DetailRow(l[a]),t=this._createDetailCell(l[a]);e.detail=t;if(t){l.insert(a+1,e);s=format(s,{rowIndex:a+1});i.announceShortcut(s);let r=i.containsFocus();if(this._animated){let e=t.style;e.transform="translateY(-100%)";e.opacity="0";animate(l=>{if(l<1){e.transform="translateY("+(100*-(1-l)).toFixed(0)+"%)";e.opacity=(l*l).toString()}else{e.transform=e.opacity="";Control.invalidateAll(t);r&&i.scrollIntoView(a,-1)}})}else r&&i.scrollIntoView(a,-1,!0)}}}_sizeDetailRow(e,t=!1){let i=this._g,l=e.detail;Control.refreshAll(l);const s=t?l.scrollHeight:l.offsetHeight;let a=s+i._cellPadVert+1,r=this._maxHeight;isNumber(r)&&r>0&&a>r&&(a=r);e.height=a;l.style.height||(l.style.height="100%");let o=l.querySelector(`.${FlexGridClsNames.hostElement}`);o&&!o.style.height&&(o.style.height="100%");return s}_handleFrozenCells(){let e=this._g,t=e.hostElement,i=`.${FlexGridClsNames.hostElement}`,l=Control.getControl(t.querySelector(i));if(l instanceof FlexGrid&&(l.rows._frozenInternal||l.columns._frozenInternal)){setCss([e._eTL,e._eBL,e._eCFtr,e._eRHdr,e._eMarquee],{zIndex:"13"});setCss(e._eCHdr,{zIndex:"14"});let l=t.querySelectorAll(`.${FlexGridClsNames.frozen}`);for(let e=0;e<l.length;e++){let s=l[e];if(closest(s,i)==t){let e=parseInt(s.style.zIndex);s.style.zIndex=(e%10+10).toString()}}}}_toIndex(e){return e instanceof Row?e.index:asNumber(e)}_hdrClick(e){if(!e.defaultPrevented&&0==e.button&&closestClass(e.target,FlexGridDetailProvider._WJC_DETAIL)){let t=DetailVisibilityMode;switch(this._mode){case t.ExpandMulti:case t.ExpandSingle:let i=this._g,l=i.hitTest(e.target);l.panel||(l=i.hitTest(e));l.panel&&this._toggleRowDetail(l.row)&&e.preventDefault()}}}_toggleRowDetail(e){if(e>-1){if(this.isDetailVisible(e)){this.hideDetail(e);return!0}if(this._hasDetail(e)){this.showDetail(e,this._mode==DetailVisibilityMode.ExpandSingle);return!0}}return!1}_selectionChanged(e,t){if(this._mode==DetailVisibilityMode.Selection){this._toSel&&clearTimeout(this._toSel);this._toSel=setTimeout(()=>{let t=e._selHdl.selection.row;t>-1?this.showDetail(t,!0):this.hideDetail()},300)}}_formatItem(e,t){let i=this._g,l=t.cell,s=t.getRow(),a=DetailVisibilityMode;if(t.panel==i.cells&&s instanceof DetailRow&&null!=s.detail&&!hasClass(l,FlexGridDetailProviderClsNames.detail)){addClass(l,FlexGridDetailProviderClsNames.detail);addClass(l.parentElement,FlexGridDetailProviderClsNames.detailRow);l.textContent="";l.style.textAlign="";l.className=l.className.replace(/wj\-align\-[\S]+/g,"");l.appendChild(s.detail);null==s.height?0===this._sizeDetailRow(s)&&setTimeout(()=>{this._sizeDetailRow(s,!0)},1):Control.refreshAll(s.detail)}if(t.panel==i.rowHeaders&&0==t.col&&this._hasDetail(t.row)){l.style.cursor="";switch(this._mode){case a.ExpandMulti:case a.ExpandSingle:let e=this.isDetailVisible(t.row),i=e?"minus":"plus",s=FlexGridDetailProvider._WJC_DETAIL;l.innerHTML=`<div class="${InputFormElementsClsNames.btn} ${GlyphClsNames.btnGlyph} `+s+'" role="button" tabindex="-1">'+`<span class="${GlyphClsNames.glyph}-`+i+'"></span></div>';let r=l.children[0],o=culture.FlexGridDetailProvider.ariaLabels.toggleDetail;setAriaLabel(r,o);setAttribute(r,"aria-expanded",e)}}}_resizedRow(e,t){let i=t.getRow();i instanceof DetailRow&&i.detail&&Control.refreshAll(i.detail)}_hasDetail(e){let t=this._g.rows[e];return isFunction(this._rowHasDetailFn)?this._rowHasDetailFn(t):this._isRegularRow(t)}_isRegularRow(e){return!(e instanceof _NewRowTemplate||e instanceof DetailRow)&&!(e instanceof GroupRow&&!this._g.childItemsPath)}_createDetailCell(e){return this.createDetailCell?this.createDetailCell(e):null}}FlexGridDetailProvider._WJC_DETAIL=FlexGridDetailProviderClsNames.elemDetail;_registerModule("wijmo.grid.detail",selfModule);