@revolist/revogrid/standalone/revogr-header2.js

Virtual reactive data grid spreadsheet component - RevoGrid.

/*!
 * Built by Revolist OU ❤️
 */
import{h as e,proxyCustomElement as t,HTMLElement as i,createEvent as s,transformTag as r}from"@stencil/core/internal/client";import{r as o,u as h,l}from"./data.store.js";import{Q as a,K as n}from"./column.service.js";import{M as d,D as c,d as u,H as v,F as g,e as b,f as p}from"./consts.js";import"./platform.js";import{a as f}from"./dimension.helpers.js";import{c as m}from"./filter.button.js";function z(e,t,i){const s=new CustomEvent(t,{detail:i,cancelable:!0,bubbles:!0});return null==e||e.dispatchEvent(s),s}function x(e,t,i){return e.preventDefault(),z(e.target,t,i)}const w=({column:t})=>{var i;return e("i",{class:null!==(i=null==t?void 0:t.order)&&void 0!==i?i:"sort-off"})};var C;!function(e){e.start="resize:start",e.move="resize:move",e.end="resize:end"}(C||(C={}));const H={"resizable-r":{bit:1,cursor:"ew-resize"},"resizable-rb":{bit:3,cursor:"se-resize"},"resizable-b":{bit:2,cursor:"s-resize"},"resizable-lb":{bit:6,cursor:"sw-resize"},"resizable-l":{bit:4,cursor:"w-resize"},"resizable-lt":{bit:12,cursor:"nw-resize"},"resizable-t":{bit:8,cursor:"n-resize"},"resizable-rt":{bit:9,cursor:"ne-resize"}};class k{constructor(e,t){var i,s,r;this.initialProps=e,this.$event=t,this.mouseX=0,this.mouseY=0,this.width=0,this.height=0,this.changeX=0,this.changeY=0,this.disableCalcMap=15,this.props=(r=e,Object.assign(Object.assign({},r),{fitParent:r.fitParent||!1,active:r.active||[],disableAttributes:r.disableAttributes||[],minWidth:r.minWidth||0,minHeight:r.minHeight||0})),this.mouseMoveFunc=this.handleMove.bind(this),this.mouseUpFunc=this.handleUp.bind(this),this.minW=this.props.minWidth,this.minH=this.props.minHeight,this.maxW=null!==(i=this.props.maxWidth)&&void 0!==i?i:0,this.maxH=null!==(s=this.props.maxHeight)&&void 0!==s?s:0,this.parent={width:0,height:0},this.resizeState=0}set(e){this.$el=e,this.props.disableAttributes.forEach((e=>{switch(e){case"l":this.disableCalcMap&=-2;break;case"t":this.disableCalcMap&=-3;break;case"w":this.disableCalcMap&=-5;break;case"h":this.disableCalcMap&=-9}}))}emitEvent(e,t){var i;if(!this.$event)return;const s=null===(i=this.activeResizer)||void 0===i?void 0:i.classList.contains("resizable-l");this.$event(Object.assign({eventName:e,width:this.width+this.changeX*(s?-1:1),height:this.height+this.changeY,changedX:this.changeX,changedY:this.changeY},t))}static isTouchEvent(e){var t;return(null===(t=e.touches)||void 0===t?void 0:t.length)>=0}handleMove(e){var t;if(!this.resizeState)return;let i,s;k.isTouchEvent(e)?(i=e.touches[0].clientY,s=e.touches[0].clientX):(i=e.clientY,s=e.clientX);let r=this.resizeState&H["resizable-r"].bit||this.resizeState&H["resizable-l"].bit;if((this.resizeState&H["resizable-t"].bit||this.resizeState&H["resizable-b"].bit)&&8&this.disableCalcMap){let e=this.changeY+(i-this.mouseY);const t=this.height+e;t<this.minH&&(e=-(this.height-this.minH)),this.maxH&&t>this.maxH&&(e=this.maxH-this.height),this.changeY=e,this.mouseY=i,this.activeResizer&&(this.activeResizer.style.bottom=-this.changeY+"px")}if(r&&4&this.disableCalcMap){const e=null===(t=this.activeResizer)||void 0===t?void 0:t.classList.contains("resizable-l");let i=this.changeX+(s-this.mouseX);const r=this.width+i*(e?-1:1);r<this.minW&&(i=-(this.width-this.minW)),this.maxW&&r>this.maxW&&(i=this.maxW-this.width),this.changeX=i,this.mouseX=s,this.activeResizer&&(e?this.activeResizer.style.left=`${this.changeX}px`:this.activeResizer.style.right=-this.changeX+"px")}this.emitEvent(C.move)}handleDown(e){if(!e.defaultPrevented){e.preventDefault(),this.dropInitial();for(let t in H){const i=e.target;if(this.$el.contains(i)&&(null==i?void 0:i.classList.contains(t))){document.body.style.cursor=H[t].cursor,k.isTouchEvent(e)?this.setInitials(e.touches[0],i):(e.preventDefault&&e.preventDefault(),this.setInitials(e,i)),this.resizeState=H[t].bit,this.emitEvent(C.start);break}}this.bindMove()}}handleUp(e){e.preventDefault(),0!==this.resizeState&&(this.resizeState=0,document.body.style.cursor="",this.emitEvent(C.end)),this.dropInitial(),this.unbindMove()}setInitials({clientX:e,clientY:t},i){var s,r,o,h;const l=getComputedStyle(this.$el);if(this.$el.classList.add("active"),this.activeResizer=i,4&this.disableCalcMap){this.mouseX=e,this.width=this.$el.clientWidth,this.parent.width=null!==(r=null===(s=this.$el.parentElement)||void 0===s?void 0:s.clientWidth)&&void 0!==r?r:0;const t=parseFloat(l.paddingLeft)+parseFloat(l.paddingRight);this.minW=Math.max(t,this.initialProps.minWidth||0),this.initialProps.maxWidth&&(this.maxW=Math.max(this.width,this.initialProps.maxWidth))}if(8&this.disableCalcMap){this.mouseY=t,this.height=this.$el.clientHeight,this.parent.height=null!==(h=null===(o=this.$el.parentElement)||void 0===o?void 0:o.clientHeight)&&void 0!==h?h:0;const e=parseFloat(l.paddingTop)+parseFloat(l.paddingBottom);this.minH=Math.max(e,this.initialProps.minHeight||0),this.initialProps.maxHeight&&(this.maxH=Math.max(this.height,this.initialProps.maxHeight))}}dropInitial(){this.changeX=this.changeY=this.minW=this.minH,this.width=this.height=0,this.activeResizer&&this.activeResizer.removeAttribute("style"),this.$el.classList.remove("active"),this.activeResizer=void 0}bindMove(){document.documentElement.addEventListener("mouseup",this.mouseUpFunc,!0),document.documentElement.addEventListener("touchend",this.mouseUpFunc,!0),document.documentElement.addEventListener("mousemove",this.mouseMoveFunc,!0),document.documentElement.addEventListener("touchmove",this.mouseMoveFunc,!0),document.documentElement.addEventListener("mouseleave",this.mouseUpFunc)}unbindMove(){document.documentElement.removeEventListener("mouseup",this.mouseUpFunc,!0),document.documentElement.removeEventListener("touchend",this.mouseUpFunc,!0),document.documentElement.removeEventListener("mousemove",this.mouseMoveFunc,!0),document.documentElement.removeEventListener("touchmove",this.mouseMoveFunc,!0),document.documentElement.removeEventListener("mouseleave",this.mouseUpFunc)}}const j=(t,i)=>{const s=[],r=t.canResize&&new k(t,(e=>{var i;e.eventName===C.end&&(null===(i=t.onResize)||void 0===i||i.call(t,e))}))||null;if(t.active)if(t.canResize)for(let i in t.active)s.push(e("div",{onClick:e=>e.preventDefault(),onDblClick:e=>{var i;e.preventDefault(),null===(i=t.onDblClick)||void 0===i||i.call(t,e)},onMouseDown:e=>null==r?void 0:r.handleDown(e),onTouchStart:e=>null==r?void 0:r.handleDown(e),class:`resizable resizable-${t.active[i]}`}));else for(let i in t.active)s.push(e("div",{onClick:e=>e.preventDefault(),onTouchStart:e=>e.preventDefault(),onDblClick:e=>{var i;e.preventDefault(),null===(i=t.onDblClick)||void 0===i||i.call(t,e)},class:"no-resize"}));return e("div",Object.assign({},t,{ref:e=>e&&(null==r?void 0:r.set(e))}),i,s)},y="columnclick",D=({data:t,props:i,additionalData:s},r)=>{let o=(null==t?void 0:t.name)||"",h=i;if((null==t?void 0:t.columnTemplate)&&(o=t.columnTemplate(e,t,s)),null==t?void 0:t.columnProperties){const e=t.columnProperties(t);e&&(h=a(i,e))}const l=Object.assign(Object.assign({},h),{onMouseDown(e){z(e.currentTarget,y,{data:t,event:e})}});return e(j,Object.assign({},l),e("div",{class:"header-content"},o),r)};var O=function(){try{var e=o(Object,"defineProperty");return e({},"",{}),e}catch(e){}}();function R(e,t,i,s){for(var r=-1,o=null==e?0:e.length;++r<o;){var h=e[r];t(s,h,i(h),e)}return s}function M(e,t,i,s){return n(e,(function(e,r,o){t(s,e,i(e),o)})),s}var E,F=(E=function(e,t,i){!function(e,t,i){"__proto__"==t&&O?O(e,t,{configurable:!0,enumerable:!0,value:i,writable:!0}):e[t]=i}(e,i,t)},function(e,t){return(l(e)?R:M)(e,E,h(t),{})});const $=t=>{var i,s,r,o,h;const l={[v]:!0,[u]:!!(null===(i=t.data)||void 0===i?void 0:i.sortable)};(null===(s=t.data)||void 0===s?void 0:s.order)&&(l[t.data.order]=!0);const a={[c]:t.column.itemIndex,canResize:t.canResize,minWidth:(null===(r=t.data)||void 0===r?void 0:r.minSize)||d,maxWidth:null===(o=t.data)||void 0===o?void 0:o.maxSize,active:t.active||["r"],class:l,style:{width:`${t.column.size}px`,transform:`translateX(${t.column.start}px)`},onResize:t.onResize,onDblClick(e){var i;null===(i=t.onDblClick)||void 0===i||i.call(t,{column:t.data,index:t.column.itemIndex,originalEvent:e,providers:t.data.providers})},onClick(e){!e.defaultPrevented&&t.onClick&&t.onClick({column:t.data,index:t.column.itemIndex,originalEvent:e,providers:t.data.providers})}};return t.range&&t.column.itemIndex>=t.range.x&&t.column.itemIndex<=t.range.x1&&"object"==typeof a.class&&(a.class[g]=!0),e(D,{data:t.data,props:a,additionalData:t.additionalData},e(w,{column:t.data}),t.canFilter&&!1!==(null===(h=t.data)||void 0===h?void 0:h.filter)?e(m,{column:t.data}):"")},S=t=>{const i={canResize:t.canResize,minWidth:t.group.indexes.length*d,maxWidth:0,active:t.active||["r"],class:{[v]:!0},style:{transform:`translateX(${t.start}px)`,width:t.end-t.start+"px"},onResize:t.onResize};return e(D,{data:Object.assign(Object.assign({},t.group),{prop:"",providers:t.providers,index:t.start}),props:i,additionalData:t.additionalData})},W=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.initialHeaderClick=s(this,"beforeheaderclick",7),this.headerresize=s(this,"headerresize",7),this.beforeResize=s(this,"beforeheaderresize",7),this.headerdblClick=s(this,"headerdblclick",7),this.beforeHeaderRender=s(this,"beforeheaderrender",7),this.beforeGroupHeaderRender=s(this,"beforegroupheaderrender",7),this.afterHeaderRender=s(this,"afterheaderrender",7),this.groupingDepth=0,this.additionalData={}}onResize({width:e},t){this.beforeResize.emit([Object.assign(Object.assign({},this.colData[t]),{size:e||void 0})]).defaultPrevented||this.headerresize.emit({[t]:e||0})}onResizeGroup(e,t,i){const s={},r=F(this.viewportCol.get("items"),"itemIndex"),o=e/(i-t+1);for(let e=t;e<=i;e++){const t=r[e];t&&(s[e]=t.size+o)}this.headerresize.emit(s)}componentDidRender(){this.afterHeaderRender.emit(this.providers)}render(){var t;const i=this.viewportCol.get("items"),s=null===(t=this.selectionStore)||void 0===t?void 0:t.get("range"),{cells:r}=this.renderHeaderColumns(i,s),o=this.renderGroupingColumns();return[e("div",{key:"a8d57270f4758b454fb4900808453e0c4663c91c",class:"group-rgRow"},o),e("div",{key:"41a270ff6bde9943a81d9c46482f2a40312afb50",class:`${b} ${p}`},r)]}renderHeaderColumns(t,i){const s=[];for(let r of t){const t={range:i,column:r,data:Object.assign(Object.assign({},this.colData[r.itemIndex]),{index:r.itemIndex,providers:this.providers}),canFilter:!!this.columnFilter,canResize:this.canResize,active:this.resizeHandler,additionalData:this.additionalData,onResize:e=>this.onResize(e,r.itemIndex),onDblClick:e=>this.headerdblClick.emit(e),onClick:e=>this.initialHeaderClick.emit(e)},o=this.beforeHeaderRender.emit(t);o.defaultPrevented||s.push(e($,Object.assign({},o.detail)))}return{cells:s}}renderGroupingColumns(){var t;const i=[];for(let s=0;s<this.groupingDepth;s++){if(this.groups[s])for(let r of this.groups[s]){const s=null!==(t=r.indexes[0])&&void 0!==t?t:-1;if(s>-1){const t=s+r.indexes.length-1,o=f(this.dimensionCol.state,s).start,h=f(this.dimensionCol.state,t).end,l={providers:this.providers,start:o,end:h,group:r,active:this.resizeHandler,canResize:this.canResize,additionalData:this.additionalData,onResize:e=>{var i;return this.onResizeGroup(null!==(i=e.changedX)&&void 0!==i?i:0,s,t)}},a=this.beforeGroupHeaderRender.emit(l);a.defaultPrevented||i.push(e(S,Object.assign({},a.detail)))}}i.push(e("div",{class:`${b} group`}))}return i}get providers(){return{type:this.type,readonly:this.readonly,data:this.colData,viewport:this.viewportCol,dimension:this.dimensionCol,selection:this.selectionStore}}get element(){return this}static get style(){return'@charset "UTF-8";revogr-header{position:relative;z-index:5;display:block}revogr-header .header-rgRow{display:block;position:relative}revogr-header .header-rgRow.group{z-index:0}revogr-header .group-rgRow{position:relative;overflow:hidden}revogr-header .rgHeaderCell{position:absolute;box-sizing:border-box;height:100%;z-index:1;display:flex}revogr-header .rgHeaderCell.align-center{text-align:center}revogr-header .rgHeaderCell.align-left{text-align:left}revogr-header .rgHeaderCell.align-right{text-align:right}revogr-header .rgHeaderCell.sortable{cursor:pointer}revogr-header .rgHeaderCell i.asc:after,revogr-header .rgHeaderCell i.desc:after{font-size:13px}revogr-header .rgHeaderCell i.asc:after{content:"↑"}revogr-header .rgHeaderCell i.desc:after{content:"↓"}revogr-header .rgHeaderCell.active{z-index:10}revogr-header .rgHeaderCell.active .resizable{background-color:deepskyblue}revogr-header .rgHeaderCell .header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}revogr-header .rgHeaderCell .resizable{display:block;position:absolute;z-index:90;touch-action:none;user-select:none}revogr-header .rgHeaderCell .resizable:hover{background-color:deepskyblue}revogr-header .rgHeaderCell>.resizable-r{cursor:ew-resize;width:6px;right:0;top:0;height:100%}revogr-header .rgHeaderCell>.resizable-rb{cursor:se-resize;width:6px;height:6px;right:0;bottom:0}revogr-header .rgHeaderCell>.resizable-b{cursor:s-resize;height:6px;bottom:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-lb{cursor:sw-resize;width:6px;height:6px;left:0;bottom:0}revogr-header .rgHeaderCell>.resizable-l{cursor:w-resize;width:6px;left:0;height:100%;top:0}revogr-header .rgHeaderCell>.resizable-lt{cursor:nw-resize;width:6px;height:6px;left:0;top:0}revogr-header .rgHeaderCell>.resizable-t{cursor:n-resize;height:6px;top:0;width:100%;left:0}revogr-header .rgHeaderCell>.resizable-rt{cursor:ne-resize;width:6px;height:6px;right:0;top:0}revogr-header .rv-filter{visibility:hidden}'}},[0,"revogr-header",{viewportCol:[16],dimensionCol:[16],selectionStore:[16],groups:[16],groupingDepth:[2,"grouping-depth"],readonly:[4],canResize:[4,"can-resize"],resizeHandler:[16],colData:[16],columnFilter:[4,"column-filter"],type:[1],additionalData:[8,"additional-data"]}]);function T(){"undefined"!=typeof customElements&&["revogr-header"].forEach((e=>{"revogr-header"===e&&(customElements.get(r(e))||customElements.define(r(e),W))}))}export{y as O,W as R,w as S,x as a,T as b,z as d}