vicowa-web-components/dist/vicowa-data-grid/vicowa-data-grid.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../vicowa-resize-detector/vicowa-resize-detector.js";export function nestedArrayToDataInfo(t){return{subData:t.map((t=>({value:t})))}}export function arrayToDataInfo(t){return{subData:[{value:t}]}}window.customElements.define("vicowa-data-grid",class VicowaDataGrid extends t{#t;#e;#n;#i;#o;constructor(){super(),this.#t=[],this.#e=[],this.#n=0,this.#i=0,this.dataToDataInfo=nestedArrayToDataInfo,this.onGetColumnInfo=(t,e)=>new Promise((n=>{const i=Math.min(this.columns,e),o=[];for(let e=t;e<i;e++)o.push({});n(o)})),this.#o=null}static get properties(){return{data:{type:Array,value:[],observer:t=>t.#a()},defaultHeight:{type:Number,value:15,reflectToAttribute:!0,observer:t=>t.#a()},defaultWidth:{type:Number,value:50,reflectToAttribute:!0,observer:t=>t.#a()},snapToCellBoundaries:{type:Boolean,value:!1,reflectToAttribute:!0,observer:t=>t.#a()},fixedHeaderRows:{type:Number,value:0,reflectToAttribute:!0,observer:t=>t.#a()},fixedStartColumns:{type:Number,value:0,reflectToAttribute:!0,observer:t=>t.#a()}}}attached(){this.$.resizeDetector.addObserver((t=>{this.#r(t.newRect)}),this),this.addAutoEventListener(this.$.vscrollarea,"scroll",(()=>{this.#d(this.$.vscrollarea)})),this.addAutoEventListener(this.$.hscrollarea,"scroll",(()=>{this.#l(this.$.hscrollarea)}))}detached(){this.$.resizeDetector.removeOwner(this)}#a(){const t=this.$.verMain.getBoundingClientRect();this.$.rows.innerHTML="",this.#t=this.data.map(this.dataToDataInfo);let e=0,n=!0,i=0;for(let o=0;o<this.#t.length&&e<t.height;o++){const a=this.#t[o],r=document.importNode(this.$.row.content,!0),d=r.querySelector(".row"),l=r.querySelector(".force-height"),s=a.height||this.defaultHeight;e+=s,l.style.minHeight=l.style.maxHeight=`${s}px`;let h=0;for(let e=0;e<a.subData.length&&(!n&&e<=i||n&&h<t.width+this.defaultWidth);e++){const t=a.subData[e],o=document.importNode(this.$.cell.content,!0).querySelector(".cell");if(n){const n=t.width||this.defaultWidth;h+=n,o.style.minWidth=o.style.maxWidth=`${n}px`,i=e}d.appendChild(o)}this.$.rows.appendChild(r),n=!1}this.#r(),this.#s(0,0)}#r(){if(this.#t.length){const t=this.$.verMain.getBoundingClientRect(),e=this.#t[0].subData.reduce(((t,e)=>t+(e.width||this.defaultWidth)),0),n=this.#t.reduce(((t,e)=>t+(e.height||this.defaultHeight)),0);this.$.hscrollcontent.style.width=`${e}px`,this.$.vscrollcontent.style.height=`${n}px`;const i=this.$.hscrollcontent.getBoundingClientRect().width>t.width,o=this.$.vscrollcontent.getBoundingClientRect().height>t.height;this.$.hscrollarea.style.flexBasis=i?"10px":"0",this.$.vscrollarea.style.flexBasis=o?"15px":"0"}}#s(t,e){this.$$$("#rows > .row").forEach(((n,i)=>{const o=i<this.fixedHeaderRows?0:t,a=this.#t[Math.min(i+o,this.#t.length-1)];n.querySelector(".force-height").style.maxHeight=n.style.minHeight=(a.height|this.defaultHeight)+"px",n.classList.toggle("fixed",i<this.fixedHeaderRows),Array.from(n.querySelectorAll(".cell")).forEach(((t,n)=>{const o=n<this.fixedStartColumns?0:e;t.querySelector(".cell-content").innerHTML=a.subData[Math.min(n+o,a.subData.length-1)].value,t.classList.toggle("fixed",n<this.fixedStartColumns),0===i&&(t.style.minWidth=t.style.maxWidth=`${this.#t[0].subData[n].width||this.defaultWidth}px`)}))})),this.#i=t,this.#n=e}#d(t){let e=0,n=0;for(let i=0;i<this.#t.length;i++){const o=e+(this.#t[i].height||this.defaultHeight);if(o>t.scrollTop)break;e=o,n=i+1}this.#s(n,this.#n),this.$.contentMain.style.top=this.snapToCellBoundaries?"0":`-${e?t.scrollTop%e:t.scrollTop}px`}#l(t){let e=0,n=0;for(let i=0;i<this.#t[0].subData.length;i++){const o=e+(this.#t[0].subData[i].width||this.defaultWidth);if(o>t.scrollLeft)break;e=o,n=i+1}this.#s(this.#i,n),this.$.contentMain.style.left=this.snapToCellBoundaries?"0":`-${e?t.scrollLeft%e:t.scrollLeft}px`}static get template(){return'\n\t\t\t<style id="styles">\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t\t.column {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tdisplay: table-column;\n\t\t\t\t}\n\t\t\t\t.row {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tdisplay: table-row;\n\t\t\t\t}\n\t\t\t\t.cell {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tdisplay: table-cell;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-top: var(--vicowa-data-grid-cell-border-top, 0);\n\t\t\t\t\tborder-left: var(--vicowa-data-grid-cell-border-left, 0);\n\t\t\t\t\tborder-bottom: var(--vicowa-data-grid-cell-border-bottom, 0);\n\t\t\t\t\tborder-right: var(--vicowa-data-grid-cell-border-right, 0);\n\t\t\t\t}\n\t\t\n\t\t\t\t#main {\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t#content-main {\n\t\t\t\t\tdisplay: table;\n\t\t\t\t\tborder-collapse: collapse;\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\n\t\t\t\t#main {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\tjustify-items: stretch;\n\t\t\t\t}\n\t\t\n\t\t\t\t#hor-main {\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t}\n\t\t\t\t#ver-main {\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t}\n\t\t\n\t\t\t\t#hor-main,\n\t\t\t\t#ver-main {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t#hscrollarea,\n\t\t\t\t\t#vscrollarea {\n\t\t\t\t\tflex: 0 0 0;\n\t\t\t\t}\n\t\t\n\t\t\t\t#vscrollarea {\n\t\t\t\t\toverflow-y: auto;\n\t\t\t\t\toverflow-x: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t#hscrollarea {\n\t\t\t\t\toverflow-x: auto;\n\t\t\t\t\toverflow-y: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\t#vscrollcontent {\n\t\t\t\t\twidth: 10px;\n\t\t\t\t}\n\t\t\n\t\t\t\t#hscrollcontent {\n\t\t\t\t\theight: 10px;\n\t\t\t\t}\n\t\t\n\t\t\t\t.cell-content {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tright: 0;\n\t\t\t\t\tbottom: 0;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t}\n\t\t\n\t\t\t\t.row.fixed {\n\t\t\t\t\tbackground: var(--vicowa-data-grid-fixed-row-background, inherit);\n\t\t\t\t\tcolor: var(--vicowa-data-grid-fixed-row-color, inherit);\n\t\t\t\t\tborder-top: var(--vicowa-data-grid-fixed-row-border-top, 0);\n\t\t\t\t\tborder-left: var(--vicowa-data-grid-fixed-row-border-left, 0);\n\t\t\t\t\tborder-bottom: var(--vicowa-data-grid-fixed-row-border-bottom, 0);\n\t\t\t\t\tborder-right: var(--vicowa-data-grid-fixed-row-border-right, 0);\n\t\t\t\t}\n\t\t\n\t\t\t\t.row.fixed .cell {\n\t\t\n\t\t\t\t}\n\t\t\n\t\t\t\t:not(.row) .cell.fixed {\n\t\t\t\t\tbackground: var(--vicowa-data-grid-fixed-column-background, inherit);\n\t\t\t\t\tcolor: var(--vicowa-data-grid-fixed-column-color, inherit);\n\t\t\t\t\tborder-top: var(--vicowa-data-grid-fixed-column-border-top, 0);\n\t\t\t\t\tborder-left: var(--vicowa-data-grid-fixed-column-border-left, 0);\n\t\t\t\t\tborder-bottom: var(--vicowa-data-grid-fixed-column-border-bottom, 0);\n\t\t\t\t\tborder-right: var(--vicowa-data-grid-fixed-column-border-right, 0);\n\t\t\t\t}\n\t\t\n\t\t\t</style>\n\t\t\t<div id="main">\n\t\t\t\t<vicowa-resize-detector id="resize-detector"></vicowa-resize-detector>\n\t\t\t\t<div id="hor-main">\n\t\t\t\t<div id="ver-main">\n\t\t\t\t<div id="content-main">\n\t\t\t\t<div id="content">\n\t\t\t\t<div id="rows">\n\t\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div id="vscrollarea">\n\t\t\t\t<div id="vscrollcontent"></div>\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div id="hscrollarea">\n\t\t\t\t<div id="hscrollcontent"></div>\n\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<template id="row">\n\t\t\t\t<div class="row"><div class="force-height"></div></div>\n\t\t\t</template>\n\t\t\t<template id="column">\n\t\t\t\t<div class="column"></div>\n\t\t\t\t</template>\n\t\t\t\t<template id="cell">\n\t\t\t\t<div class="cell"><div class="cell-content"></div></div>\n\t\t\t</template>\n\t\t'}});
//# sourceMappingURL=vicowa-data-grid.js.map