@coderundebug/ui-web/ui-table.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as t}from"./ui-tools.js";class i{static t(t){if(!(t instanceof HTMLElement))return;let i=!0;for(;t;){if(!0===i){let i=t.scrollWidth>t.clientWidth,s=t.scrollHeight>t.clientHeight;const e=window.getComputedStyle(t).getPropertyValue("overflow");let r=!1;if(-1!==e.indexOf("scroll")&&(r=!0),-1!==e.indexOf("auto")&&(r=!0),!0===r&&(!0===i||!0===s))return t}if(t.assignedSlot)t=t.assignedSlot,i=!1;else if(t.parentElement)t=t.parentElement,i=!0;else if(t.parentNode)t=t.parentNode,i=!1;else{if(!t.host)break;t=t.host,i=!0}}return document.scrollingElement||document.documentElement}}class s{static i(t){return t.o}static h(t,i,s,e){t.l=!0;const r=[];let h=null,l=[],a=1;for(const i of t.children)if(null!==h&&1===a&&(h.nextRowFirstElement=i),l.push(i),a++,a>t.o){const t={nextRowFirstElement:null};t.rowElementList=l,h=t,r.push(t),l=[],a=1}if(e){if(r.length-1!==s.length)throw new Error("Number of elements given did not match the number in the table")}else if(r.length!==s.length)throw new Error("Number of elements given did not match the number in the table");n.u(t,i),e&&(s.splice(0,0,e),e.setAttribute("slot","header")),r.forEach((t=>{t.beforeElement=null,-1===i?t.beforeElement=t.rowElementList[0]:i<t.rowElementList.length?t.beforeElement=t.rowElementList[i]:t.beforeElement=t.nextRowFirstElement}));const d=t.hasAttribute("drag-row-cells");let u=0;r.forEach((e=>{const r=s[u];r._uiTableDraggable=!0,!0===d&&(r._uiTableDraggable=!1),t.insertBefore(r,e.beforeElement),-1===i?e.rowElementList.splice(0,0,r):i!==e.rowElementList.length?e.rowElementList.splice(i,0,r):e.rowElementList.push(r);t.v.children.item(u).firstElementChild.assign(...e.rowElementList),u++})),t.o++,t.m.h(i),t.p(),t._(),o.k(t),t.m.C(),t.R.C(),t.T.style.gridTemplateColumns=t.m.$(t.o)}static D(t,i){if(i>t.o)return;if(i<1)return;t.l=!0,n.U(t,i);const s=i-1,e=[];let r=[],h=1;for(const i of t.children)if(r.push(i),h++,h>t.o){const t={};t.rowElementList=r,t.deleteElement=r[s],e.push(t),r=[],h=1}let l=0;e.forEach((i=>{i.rowElementList.splice(s,1),i.deleteElement.remove();t.v.children.item(l).firstElementChild.assign(...i.rowElementList),l++})),t.o--,t.m.D(i),t.p(),t._(),o.k(t),t.m.C(),t.R.C(),t.T.style.gridTemplateColumns=t.m.$(t.o)}static I(t,i,s){o.I(t,i,s),o.k(t)}static S(t,i){const e=s.A(t,i);if(!e)return-1;if(e.length<7)return-1;const r=e[e.length-5],n=e[e.length-7],o=r.firstElementChild.assignedElements();for(let t=0;t<o.length;t++){if(o[t]===n)return t+1}return-1}static H(t){let i=t.v.childElementCount;return 0===i?0:(!1===t.v.firstElementChild.L&&i--,i)}static M(t,i,s){if(t.l=!0,i.length!==t.o)throw new Error("Number of elements is not the same as the number of columns");const e=[];if(!0===t.hasAttribute("drag-row-cells")){t.getAttribute("drag-row-cells").split(",").forEach((t=>{e.push(parseInt(t))}))}for(let t=0;t<i.length;t++){const s=i[t];s._uiTableDraggable=!0,0!==e.length&&-1===e.indexOf(t+1)&&(s._uiTableDraggable=!1)}let r=t.v.childElementCount,n=!1;0!==r&&!1===t.v.firstElementChild.L&&(r--,n=!0);let o=null;void 0!==s&&(-1===s?!0===n?0!==r&&(o=t.children.item(t.o)):o=t.firstElementChild:s>=r||(o=!0===n?t.children.item(t.o*(s+1)):t.children.item(t.o*s))),i.forEach((i=>{t.insertBefore(i,o)}));const h=t.M(t,i,"row",s);h._uiTableDraggable=!1,!0===t.hasAttribute("drag-drop-row")&&(h._uiTableDraggable=!0)}static N(t,i){let s=t.v.childElementCount,e=!1;0!==s&&!1===t.v.firstElementChild.L&&(s--,e=!0);let r=i;!1===e&&(r=i-1);const n=t.v.children.item(r);if(!n)return;t.l=!0;n.firstElementChild.assignedElements().forEach((t=>{t.remove()})),t.K(t,n)}static P(t){t.v.querySelectorAll(".row").forEach((i=>{const s=i.firstElementChild.assignedElements();t.K(t,i),s.forEach((t=>{t.remove()}))}))}static B(t,i,s){let e=t.v.childElementCount,r=!1;if(0!==e&&!1===t.v.firstElementChild.L&&(e--,r=!0),i<1)return;if(i>e)return;if(s<-1)return;if(0===s)return;if(s>e)return;t.l=!0;let o=null;o=!1===r?t.v.children.item(i-1):t.v.children.item(i);let h=null;-1===s?h=!1===r?t.v.children.item(0):t.v.children.item(1):s===e||(h=!1===r?t.v.children.item(s):t.v.children.item(s+1)),t.v.insertBefore(o,h),n.F(t,o,h)}static V(t,i){const e=s.Y(t,i);e&&e.classList.add("selected")}static j(t,i){const e=s.Y(t,i);e&&e.classList.remove("selected")}static Y(t,i){let s=t.v.childElementCount,e=!1;return 0!==s&&!1===t.v.firstElementChild.L&&(s--,e=!0),i<=0||i>s?null:!0===e?t.v.children.item(i):t.v.children.item(i-1)}static W(t,i){const e=s.Y(t,i);if(!e)return null;return e.firstElementChild.assignedElements()}static O(t,i){const e=s.A(t,i);if(!e)return-1;if(e.length<7)return-1;const r=e[e.length-5];if(!0!==r.L)return-1;let n=1;for(const i of t.v.children)if(!1!==i.L){if(i===r)return n;n++}return-1}static q(t,i){t.l=!0;const s=t.v.firstElementChild;if(s&&!1===s.L){const i=s.firstElementChild.assignedElements();t.K(t,s),i.forEach((t=>{t.remove()}))}const e=t.firstElementChild;i.forEach((i=>{i.setAttribute("slot","header"),t.insertBefore(i,e)})),t.M(t,i,"header",-1),t.o=i.length,t.p(),t._(),o.k(t),t.m.C(),t.R.C(),t.T.style.gridTemplateColumns=t.m.$(t.o)}static G(t){if(0===t.v.childElementCount)return null;const i=t.v.firstElementChild;if(!i)return null;if(!0===i.L)return null;return i.firstElementChild.assignedElements()}static J(t,i){const e=s.G(t);return null===e||i<1||i>e.length?null:e[i-1]}static X(t,i,s){if(0===t.v.childElementCount)return;const e=t.v.firstElementChild;if(!e)return;if(!0===e.L)return;const r=e.firstElementChild,n=r.assignedElements();if(i<1||i>n.length)return;t.l=!0;const o=n[i-1],h=o.nextSibling;s.setAttribute("slot","header"),s._uiDragHeader=o._uiDragHeader,s._uiTableDraggable=o._uiTableDraggable,s._uiTableHeaderColumn=o._uiTableHeaderColumn,!0===o._uiTableDraggable&&(s.style.cursor="grab",s.setAttribute("tabindex","0")),n[i-1]=s,t.removeChild(o),t.insertBefore(s,h),r.assign(...n)}static Z(t,i,s){let e=t.v.childElementCount,r=!1;if(0!==e&&!1===t.v.firstElementChild.L&&(e--,r=!0),i<1)return null;if(i>e)return null;const n=t.o;if(s<1)return null;if(s>n)return null;let o=(i-1)*n+s-1;if(!0===r&&(o+=n),o>=t.childElementCount)return null;return t.children.item(o)}static tt(t,i,e,r){const n=s.Y(t,i);if(!n)return;const o=n.firstElementChild,h=o.assignedElements();if(e<1||e>h.length)return;t.l=!0;const l=h[e-1],a=l.nextSibling;r._uiTableDraggable=l._uiTableDraggable,h[e-1]=r,t.removeChild(l),t.insertBefore(r,a),o.assign(...h)}static A(t,i){const s=[];let e=i;for(;;){if(!e)return null;if(s.push(e),e===t)return s;if(e.assignedSlot)e=e.assignedSlot;else if(e.parentElement)e=e.parentElement;else if(e.parentNode)e=e.parentNode;else{if(!e.host)return s;e=e.host}}}}class e{constructor(t){this.it=t}update(){const t=window.getComputedStyle(this.it);this.st=t.getPropertyValue("--ui-tp"),this.et=t.getPropertyValue("--ui-tad"),this.rt=t.getPropertyValue("--ui-tdrbg"),this.nt=t.getPropertyValue("--ui-tdrf"),this.ot=t.getPropertyValue("--ui-tdrb"),this.ht=t.getPropertyValue("--ui-tdrbr"),this.lt=t.getPropertyValue("--ui-tdrs"),this.dt=t.getPropertyValue("--ui-tdro"),this.ut=t.getPropertyValue("--ui-tdhbg"),this.ct=t.getPropertyValue("--ui-tdhf"),this.ft=t.getPropertyValue("--ui-tdhb"),this.vt=t.getPropertyValue("--ui-tdhbr"),this.gt=t.getPropertyValue("--ui-tdhs"),this.bt=t.getPropertyValue("--ui-tdho"),this.wt=t.getPropertyValue("--ui-thbg"),this._t=t.getPropertyValue("--ui-thfg"),this.xt=t.getPropertyValue("--ui-thfs"),this.kt=t.getPropertyValue("--ui-thfw"),this.yt=t.getPropertyValue("--ui-tclw"),this.Et=t.getPropertyValue("--ui-tcls"),this.Ct=t.getPropertyValue("--ui-tclc")}}class r{static _uiTableElementFrom=null;static _uiTableElementTo=null;static Rt=0;static Tt=0;static zt=0;static $t=0}class n{static Dt(t,i){const s=i.querySelector("slot").assignedElements(),e=document.createElement("div"),r=[];s.forEach((t=>{r.push(t.clientWidth.toString()+"px")})),e.style.position="absolute",e.style.width=i.clientWidth.toString()+"px",e.style.height=i.clientHeight.toString()+"px",e.style.display="grid",e.style.gridTemplateColumns=r.join(" "),e.style.touchAction="none",e.style.background=t.Ut.rt,e.style.color=t.Ut.nt,e.style.border=t.Ut.ot,e.style.borderRadius=t.Ut.ht,e.style.boxShadow=t.Ut.lt,e.style.opacity=t.Ut.dt;const o=t.hasAttribute("column-lines");for(let i=0;i<s.length;i++){const r=s[i],h=r.cloneNode(!0);n.It(r,h),h.style.padding=t.Ut.st,!0===o&&0!==i&&(h.style.borderInlineStartWidth=t.Ut.yt,h.style.borderInlineStartStyle=t.Ut.Et,h.style.borderInlineStartColor=t.Ut.Ct),e.appendChild(h)}return e}static It(t,i){void 0!==t.value&&(i.value=t.value),void 0!==t.checked&&(i.checked=t.checked);for(let s=0;s<t.children.length;s++){const e=t.children[s],r=i.children[s];if(!e)return;if(!r)return;this.It(e,r)}}static B(t,i,s){let e=0;null===s&&(e=-1);const o=[];let h=!1;for(const r of t.v.children)if(!1!==r.L)if(r!==i){if(r===s){if(!0===h)break;e=1,h=!0}!0===h&&o.push(r)}else{if(!0===h)break;e=-1,h=!0}o.forEach((t=>{if(!0===t._uiTableMoveAnimating){if(t._uiTableMoveAnimateDirection===e)return;t.removeEventListener("animationend",n.St),t.classList.remove("move-animation-up"),t.classList.remove("move-animation-down")}t.addEventListener("animationend",n.St),t._uiTableMoveAnimating=!0,t._uiTableMoveAnimateDirection=e,-1===e&&t.classList.add("move-animation-up"),1===e&&t.classList.add("move-animation-down")})),t.v.insertBefore(i,s),r.Tt=n.O(t,i)}static St(t){t.target._uiTableMoveAnimating=!1,t.target.removeEventListener("animationend",n.St),t.target.classList.remove("move-animation-up"),t.target.classList.remove("move-animation-down")}static F(t,i,s){const e=i.firstElementChild.assignedElements();if(t.l=!0,null===s)return void e.forEach((i=>{t.insertBefore(i,null)}));const r=s.firstElementChild.assignedElements();if(e.length!==r.length)return;const n=r[0];for(let i=0;i<e.length;i++){const s=e[i];t.insertBefore(s,n)}}static At(t,i){const s=t.getAttribute("drag-name"),e=i.getAttribute("drag-name");if(!s||!e)return!1;if(s===e)return!0;if(!1===i.hasAttribute("drag-accept"))return!1;return-1!==i.getAttribute("drag-accept").split(",").indexOf(s)}static O(t,i){let s=1;for(const e of t.v.children)if(!1!==e.L){if(e===i)return s;s++}return-1}static Ht(t){if(0===r.Tt)return;if(r._uiTableElementTo||(r._uiTableElementTo=r._uiTableElementFrom),r._uiTableElementFrom===r._uiTableElementTo&&r.Rt===r.Tt)return;const i=new CustomEvent("rowmoved",{bubbles:!0,composed:!0,detail:{fromTable:r._uiTableElementFrom,toTable:r._uiTableElementTo,fromRow:r.Rt,toRow:r.Tt}});t.dispatchEvent(i)}static u(t,i){if(!1===t.hasAttribute("drag-row-cells"))return;if(i===t.o)return;-1===i&&(i=0);const s=t.getAttribute("drag-row-cells").split(",");if(0!==s.length){for(let t=0;t<s.length;t++){const e=s[t];let r=parseInt(e);r<=i||(r++,s[t]=r.toString())}n.Lt(t,s)}}static U(t,i){if(!1===t.hasAttribute("drag-row-cells"))return;const s=t.getAttribute("drag-row-cells").split(",");if(0!==s.length){for(let t=0;t<s.length;t++){const e=s[t];if(parseInt(e)===i){s.splice(t,1);break}}for(let t=0;t<s.length;t++){const e=s[t];let r=parseInt(e);r<i||(r--,s[t]=r.toString())}n.Lt(t,s)}}static Mt(t,i,s){if(!1===t.hasAttribute("drag-row-cells"))return;const e=t.getAttribute("drag-row-cells").split(",");if(0===e.length)return;let r=0;r=-1===s?1:i>s?s+1:s;const o=[];for(let t=0;t<e.length;t++){const s=e[t];let n=parseInt(s);n===i||n===r?n!==i?n!==r||o.push(i.toString()):o.push(r.toString()):o.push(s)}n.Lt(t,o)}static Lt(t,i){i.sort(((t,i)=>{const s=parseInt(t),e=parseInt(i);return s>e?1:s<e?-1:0}));const s=i.join(",");t.setAttribute("drag-row-cells",s)}}class o{static Nt(t,i){const s=document.createElement("div");s.style.position="absolute",s.style.width=i.clientWidth.toString()+"px",s.style.height=i.clientHeight.toString()+"px",s.style.display="grid",s.style.gridTemplateColumns="1fr",s.style.gridTemplateRows="1fr",s.style.touchAction="none",s.style.background=t.Ut.ut,s.style.color=t.Ut.ct,s.style.fontSize=t.Ut.xt,s.style.fontWeight=t.Ut.kt,s.style.border=t.Ut.ft,s.style.borderRadius=t.Ut.vt,s.style.boxShadow=t.Ut.gt,s.style.opacity=t.Ut.bt;const e=i.cloneNode(!0);return e.style.padding=t.Ut.st,s.appendChild(e),s}static I(t,i,s){if(i<=0)return;if(i>t.o)return;if(i===s)return;if(i===s+1)return;if(1===i&&-1===s)return;const e=[];let r=null,o=[],h=1;for(const i of t.children)if(null!==r&&1===h&&(r.nextRowFirstElement=i),o.push(i),h++,h>t.o){const t={nextRowFirstElement:null};t.elementList=o,r=t,e.push(t),o=[],h=1}e.forEach((t=>{t.fromElement=t.elementList[i-1],t.beforeElement=null,-1===s?t.beforeElement=t.elementList[0]:s<t.elementList.length?t.beforeElement=t.elementList[s]:t.beforeElement=t.nextRowFirstElement;for(let i=0;i<t.elementList.length;i++)if(t.elementList[i]===t.fromElement){t.elementList.splice(i,1);break}if(-1===s)t.elementList.splice(0,0,t.fromElement);else if(s<t.elementList.length+1){for(let i=0;i<t.elementList.length;i++)if(t.elementList[i]===t.beforeElement){t.elementList.splice(i,0,t.fromElement);break}}else t.elementList.push(t.fromElement)})),t.l=!0,n.Mt(t,i,s);let l=0;e.forEach((i=>{t.insertBefore(i.fromElement,i.beforeElement);t.v.children.item(l).firstElementChild.assign(...i.elementList),l++})),t.p(),t._(),t.m.I(i,s)}static k(t){const i=t.v.firstElementChild;if(!i)return;if(!0===i.L)return;const s=i.firstElementChild.assignedElements();if(0!==s.length){const i=[];if(!0===t.hasAttribute("drag-header-cells")){t.getAttribute("drag-header-cells").split(",").forEach((t=>{i.push(parseInt(t))}))}if(s.forEach((t=>{t._uiTableDraggable=!1})),!0===t.hasAttribute("drag-drop-header")){let e=1;!0===t.hasAttribute("column-drag-from")&&(e=parseInt(t.getAttribute("column-drag-from")),e<=0&&(e=1));let r=1;s.forEach((t=>{t._uiTableDraggable=!0,0!==i.length&&-1===i.indexOf(r)&&(t._uiTableDraggable=!1),r<e&&(t._uiTableDraggable=!1),!0===t._uiTableDraggable?(t._uiDragHeader=!0,t.style.cursor="grab",t.setAttribute("tabindex","0")):(t._uiDragHeader=!1,t.style.cursor="unset",t.removeAttribute("tabindex","0")),r++}))}}}static Kt(t){if(0===r.$t)return;if(r.zt===r.$t)return;const i=new CustomEvent("columnmoved",{bubbles:!0,composed:!0,detail:{table:t,fromColumn:r.zt,toColumn:r.$t}});t.dispatchEvent(i)}}class h{constructor(t){this.it=t,this.Pt=!1,this.Bt=this.Bt.bind(this),this.Ft=this.Ft.bind(this),this.Vt=this.Vt.bind(this),this.Yt=this.Yt.bind(this),this.jt=this.jt.bind(this),this.Wt=this.Wt.bind(this)}Ot(){this.it.v.addEventListener("pointerdown",this.Bt),window.addEventListener("pointerup",this.Ft),this.it.v.addEventListener("pointermove",this.Vt)}qt(){this.it.v.removeEventListener("pointerdown",this.Bt),window.removeEventListener("pointerup",this.Ft),this.it.v.removeEventListener("pointermove",this.Vt)}Bt(t){if(!1===t.isPrimary)return;if(0!==t.button)return;const i=this.Gt(t.target);if(!i)return;if(!0===i.hasAttribute("slot"))return;if(!1===i._uiTableDraggable)return;const s=this.Jt(t.target);if(!s)return;if(!1===s._uiTableDraggable)return;r.Rt=n.O(this.it,s),r.Tt=0,this.Pt=!0,t.target.setPointerCapture(t.pointerId);const e=s.getBoundingClientRect();this.Qt=t.clientX-e.x,this.Xt=t.clientY-e.y}Ft(t){!1!==this.Pt&&(!0===this.Zt&&(!1===this.ti(t)&&(this.ii(t.clientX,t.clientY),n.F(this.it,this.si,this.si.nextSibling)),this.ei(),r._uiTableElementTo&&(r._uiTableElementTo.removeAttribute("dragging-valid"),r._uiTableElementTo.removeAttribute("dragging-from")),r._uiTableElementFrom.removeAttribute("dragging-valid"),r._uiTableElementFrom.removeAttribute("dragging-to"),n.Ht(this.it),r._uiTableElementFrom=null,r._uiTableElementTo=null),this.Pt=!1,t.target.releasePointerCapture(t.pointerId))}Vt(t){if(!0===this.Pt){!0!==this.Zt&&this.ri(t);const i=t.clientX-this.Qt,s=t.clientY-this.Xt;this.ni.style.left=i.toString()+"px",this.ni.style.top=s.toString()+"px",this.oi=t.clientX,this.hi=t.clientY,this.li(t.clientX,t.clientY),this.ai(t.clientX,t.clientY)}}ri(t){if(this.di=this.Gt(t.target),!this.di)return;const i=this.Jt(t.target);if(!i)return;this.it.Ut.update();const s=i.getBoundingClientRect();this.ui=document.createElement("div"),this.ui.style.position="fixed",this.ui.style.inset="0",this.ui.style.backgroundColor="transparent",this.ui.style.zIndex="999999",this.ui.style.touchAction="none",this.si=i,this.si.classList.add("drop-row"),this.ci=document.createElement("div"),this.ci.classList.add("dropzone"),this.si.appendChild(this.ci),this.fi=this.si.nextSibling,this.ni=n.Dt(this.it,i),this.ni.style.left=s.x.toString()+"px",this.ni.style.top=s.y.toString()+"px",document.body.appendChild(this.ui),this.ui.appendChild(this.ni),this.di.style.cursor="grabbing",this.gi=setInterval(this.Yt,500),r._uiTableElementFrom=this.it,this.Zt=!0}bi(t){this.it.Ut.update(),this.si=document.createElement("div"),this.si.style.height=t.mi.si.clientHeight.toString()+"px",this.si.style.gridColumn="1/-1",this.si.classList.add("row"),this.si.classList.add("drop-row"),this.ci=document.createElement("div"),this.ci.classList.add("dropzone"),this.si.appendChild(this.ci),this.it.v.appendChild(this.si),this.Qt=t.mi.Qt,this.Xt=t.mi.Xt}ei(){this.ni.addEventListener("transitionend",this.jt),this.ni.style.transition="top "+this.it.Ut.et+", left "+this.it.Ut.et;const t=this.si.getBoundingClientRect(),i=this.ni.getBoundingClientRect();this.ni.style.left=t.x.toString()+"px",this.ni.style.top=t.y.toString()+"px",this.di.removeAttribute("style"),clearInterval(this.gi),i.top===t.top&&i.left===t.left&&this.jt()}jt(){!1!==this.Zt&&(this.ni.removeEventListener("transitionend",this.jt),this.si.removeChild(this.ci),this.si.classList.remove("drop-row"),this.ui.removeChild(this.ni),document.body.removeChild(this.ui),this.ni=void 0,this.si=void 0,this.ui=void 0,this.ci=void 0,this.fi=void 0,this.Pt=!1,this.Zt=!1)}wi(){this.si&&(this.si.addEventListener("transitionend",this.Wt),this.si.style.transition="height "+this.it.Ut.et,this.si.style.height="0")}Wt(){this.si.removeEventListener("transitionend",this.Wt),this.si.remove(),this.si=void 0}pi(t){for(;;){if(!t)return null;if("UI-TABLE"===t.nodeName)return t;t.assignedSlot?t=t.assignedSlot:t=t.parentElement}}Gt(t){for(;;){if(!t)return null;if(t.assignedSlot)return t;t=t.parentElement}}Jt(t){for(;;){if(!t)return null;if(!0===t.L)return t;t.assignedSlot?t=t.assignedSlot:t=t.parentElement}}Yt(){!1!==this.Pt&&!0!==this._i()&&this.xi()}_i(){const t=this.it.getBoundingClientRect();let s=0,e=!0,r=!1;if(this.hi>t.bottom&&(s=1,e=!1),this.hi>.9*this.ui.clientHeight&&(s=1,r=!0),this.hi<t.top&&(s=-1,e=!1),this.hi<.1*this.ui.clientHeight&&(s=-1,r=!0),0===s)return!1;let n=i.t(this.it),o=!0;if(!0===e&&!0===r&&(o=!0),!0===e&&!1===r)return!1;if(!1===e&&!1===r&&(o=!0),!1===e&&!0===r&&(o=!1),1===s)for(;;){if(!n)return!1;if(n!==document.documentElement&&!1===o){if(Math.abs(n.scrollHeight-n.clientHeight-n.scrollTop)<=1){n=i.t(n.parentElement);continue}}return(!0!==o||!1!==r||n===this.it)&&(n.scrollBy({top:50,behavior:"smooth"}),this.li(this.oi,this.hi),this.ai(this.oi,this.hi),!0)}if(-1===s)for(;;){if(!n)return!1;if(n===document.documentElement||!1!==o||0!==n.scrollTop)return(!0!==o||!1!==r||n===this.it)&&(n.scrollBy({top:-50,behavior:"smooth"}),this.li(this.oi,this.hi),this.ai(this.oi,this.hi),!0);n=i.t(n.parentElement)}return!1}xi(){const t=this.it.getBoundingClientRect();let s=0,e=!0,r=!1;if(this.oi>t.right&&(s=1,e=!1),this.oi>.9*this.ui.clientWidth&&(s=1,r=!0),this.oi<t.left&&(s=-1,e=!1),this.oi<.1*this.ui.clientWidth&&(s=-1,r=!0),0===s)return;let n=i.t(this.it),o=!0;if(!0===e&&!0===r&&(o=!0),!0!==e||!1!==r){if(!1===e&&!1===r&&(o=!0),!1===e&&!0===r&&(o=!1),1===s)for(;;){if(!n)return;if(n!==document.documentElement&&!1===o){if(Math.abs(n.scrollWidth-n.clientWidth-n.scrollLeft)<=1){n=i.t(n.parentElement);continue}}if(!0===o&&!1===r&&n!==this.it)return;return n.scrollBy({left:50,behavior:"smooth"}),this.li(this.oi,this.hi),void this.ai(this.oi,this.hi)}if(-1===s)for(;;){if(!n)return;if(n===document.documentElement||!1!==o||0!==n.scrollLeft){if(!0===o&&!1===r&&n!==this.it)return;return n.scrollBy({left:-50,behavior:"smooth"}),this.li(this.oi,this.hi),void this.ai(this.oi,this.hi)}n=i.t(n.parentElement)}}}li(t,i){const s=t-this.Qt+this.ni.clientWidth/2,e=i-this.Xt+this.ni.clientHeight/2,n=this.it.getBoundingClientRect();if(e>=n.top&&e<=n.bottom&&s>=n.left&&s<=n.right)return null!==r._uiTableElementTo&&r._uiTableElementTo!==this.it&&(r._uiTableElementTo.removeAttribute("dragging-from"),r._uiTableElementTo.removeAttribute("dragging-valid"),r._uiTableElementTo.mi.wi(),r._uiTableElementTo=null),void this.it.removeAttribute("dragging-to");let o=null;for(let t=0;t<UiTable.ki.length;t++){const i=UiTable.ki[t],r=i.getBoundingClientRect();if(!(e<r.top)&&!(e>r.bottom||s<r.left||s>r.right)){o=i;break}}if(null===o)return void(null!==r._uiTableElementTo&&r._uiTableElementTo!==this.it&&(r._uiTableElementTo.removeAttribute("dragging-from"),r._uiTableElementTo.removeAttribute("dragging-valid"),r._uiTableElementTo.mi.wi(),r._uiTableElementTo=null));null!==r._uiTableElementTo&&r._uiTableElementTo!==o&&r._uiTableElementTo!==this.it&&(r._uiTableElementTo.removeAttribute("dragging-from"),r._uiTableElementTo.removeAttribute("dragging-valid"),r._uiTableElementTo.mi.wi(),r._uiTableElementTo=null),r._uiTableElementTo=o;const h=this.it.getAttribute("drag-name"),l=o.getAttribute("drag-name");if(!h||!l)return;let a=!1;if(h===l&&(a=!0),!0===o.hasAttribute("drag-accept")){-1!==o.getAttribute("drag-accept").split(",").indexOf(h)&&(a=!0)}this.it.setAttribute("dragging-to",l),o.setAttribute("dragging-from",h),!1!==a&&(this.it.setAttribute("dragging-valid",""),o.setAttribute("dragging-valid",""),r._uiTableElementTo.mi.si||r._uiTableElementTo.mi.bi(this.it),r._uiTableElementTo.mi.ai(t,i))}ai(t,i){const s=[];for(const t of this.it.v.children)!1!==t.L&&s.push(t);const e=t-this.Qt+this.si.clientWidth/2,r=i-this.Xt+this.si.clientHeight/2,o=this.it.getBoundingClientRect();if(r<o.top||r>o.bottom||e<o.left||e>o.right){if(s.length>0&&s[s.length-1]===this.si)return;n.B(this.it,this.si,null,!1)}else for(let t=0;t<s.length;t++){const i=s[t],e=i.getBoundingClientRect();if(r>e.top&&r<e.bottom){const o=e.top+e.height/2;if(i===this.si)return;if(r<o){if(0!==t&&s[t-1]===this.si)return;n.B(this.it,this.si,i,!1)}else{if(t+1<s.length&&s[t+1]===this.si)return;n.B(this.it,this.si,i.nextSibling,!1)}return}}}ti(t){const i=t.clientX-this.Qt+this.ni.clientWidth/2,s=t.clientY-this.Xt+this.ni.clientHeight/2,e=this.it.getBoundingClientRect();if(s>=e.top&&s<=e.bottom&&i>=e.left&&i<=e.right)return!1;let r=null;for(let t=0;t<UiTable.ki.length;t++){const e=UiTable.ki[t],n=e.getBoundingClientRect();if(!(s<n.top)&&!(s>n.bottom||i<n.left||i>n.right)){r=e;break}}return null!==r&&(!1!==n.At(this.it,r)&&(this.yi(r),!0))}ii(t,i){this.Qt,this.ni.clientWidth;if(i-this.Xt+this.ni.clientHeight/2<this.it.getBoundingClientRect().top)return n.B(this.it,this.si,this.fi,!1),void n.F(this.it,this.si,this.fi)}yi(t){this.it.l=!0;const i=this.si.firstElementChild.assignedElements();this.it.K(this.it,this.si),i.forEach((t=>{this.it.removeChild(t)})),t.l=!0;let s=null;if(t.mi.si.nextSibling){const i=t.mi.si.nextSibling.firstElementChild.assignedElements();i.length>0&&(s=i[0])}i.forEach((i=>{t.insertBefore(i,s)}));const e=this.it.M(t,i,"row");this.si=e,this.si.classList.add("row"),this.si.classList.add("drop-row"),this.ci=document.createElement("div"),this.ci.classList.add("dropzone"),this.si.appendChild(this.ci),r._uiTableElementTo.mi.si.replaceWith(e),r._uiTableElementTo.mi.si=null}}class l{constructor(t){this.it=t,this.Pt=!1,this.Ei=this.Ei.bind(this),this.Ci=this.Ci.bind(this),this.Ri=this.Ri.bind(this),this.Ti=this.Ti.bind(this),this.zi=this.zi.bind(this)}Ot(){this.it.addEventListener("keydown",this.Ei)}qt(){this.it.removeEventListener("keydown",this.Ei)}Ei(t){if("Space"===t.code){if(!0===this.Pt)return;if(!0===this.it.mi.Pt)return t.preventDefault(),void t.stopPropagation();if(!this.it.$i)return;return this.Di=this.it.$i,r.Rt=n.O(this.it,this.Di),r.Tt=0,this.Ui(this.it.$i),t.preventDefault(),void t.stopPropagation()}}Ci(t){if(t.preventDefault(),"Space"===t.code){if(r._uiTableElementFrom!==this.it)return;return r._uiTableElementTo!==this.it?this.yi(r._uiTableElementTo):n.F(this.it,this.si,this.si.nextSibling),this.Ii(!1),r._uiTableElementTo&&(r._uiTableElementTo.removeAttribute("dragging-valid"),r._uiTableElementTo.removeAttribute("dragging-from"),r._uiTableElementTo.removeAttribute("dragging-to")),this.it.removeAttribute("dragging-valid"),this.it.removeAttribute("dragging-from"),this.it.removeAttribute("dragging-to"),n.Ht(this.it),r._uiTableElementFrom=null,r._uiTableElementTo=null,void t.preventDefault()}if(!0===this.Pt){if("ArrowUp"===t.key||"ArrowDown"===t.key||"ArrowLeft"===t.key||"ArrowRight"===t.key){if(!0===this.Si)return;this.Si=!0,setTimeout((()=>{this.Si=!1}),100)}if("ArrowUp"===t.key){if(!r._uiTableElementTo.Ai.si.previousSibling)return void this.Hi(-1);if(!0===r._uiTableElementTo.Ai.si.previousSibling.classList.contains("header")){if(0!==r._uiTableElementTo.scrollTop){r._uiTableElementTo.scrollTop=0,this.ni.style.transition="top "+this.it.Ut.et;const t=r._uiTableElementTo.Ai.si.getBoundingClientRect();this.ni.style.top=t.y.toString()+"px"}else this.Hi(-1);return}n.B(r._uiTableElementTo,r._uiTableElementTo.Ai.si,r._uiTableElementTo.Ai.si.previousSibling),r._uiTableElementTo.Ai.Li(this)}if("ArrowDown"===t.key){const t=r._uiTableElementTo.Ai.si.nextSibling;if(!t)return void this.Hi(1);n.B(r._uiTableElementTo,r._uiTableElementTo.Ai.si,t.nextSibling),r._uiTableElementTo.Ai.Li(this)}if("ArrowLeft"===t.key||"ArrowRight"===t.key){let i=this.si.getBoundingClientRect();null!==r._uiTableElementTo&&r._uiTableElementTo!==this.it&&(i=r._uiTableElementTo.Ai.si.getBoundingClientRect(),r._uiTableElementTo.removeAttribute("dragging-from"),r._uiTableElementTo.removeAttribute("dragging-valid"),r._uiTableElementTo.Ai.si&&(r._uiTableElementTo.Ai.si.remove(),r._uiTableElementTo.Ai.si=null));let s=1;"ArrowLeft"===t.key&&(s=-1);const e=this.Mi(r._uiTableElementTo,s);if(null===e)return;r._uiTableElementTo=e,r._uiTableElementTo!==this.it&&(r._uiTableElementTo.Ai.Ni(this.it),n.B(this.it,this.si,null));const o=this.it.getAttribute("drag-name"),h=e.getAttribute("drag-name");this.it.setAttribute("dragging-to",h),e.setAttribute("dragging-from",o),this.it.setAttribute("dragging-valid",""),e.setAttribute("dragging-valid","");const l=i.top+i.height/2,a=this.Ki(l,e);n.B(r._uiTableElementTo,r._uiTableElementTo.Ai.si,a),r._uiTableElementTo.Ai.Li(this)}"Escape"===t.key&&this.Pi()}}Hi(t){null!==r._uiTableElementTo&&r._uiTableElementTo!==this.it&&(r._uiTableElementTo.removeAttribute("dragging-from"),r._uiTableElementTo.removeAttribute("dragging-valid"),r._uiTableElementTo.Ai.si&&(r._uiTableElementTo.Ai.si.remove(),r._uiTableElementTo.Ai.si=null));const i=this.Mi(r._uiTableElementTo,t);if(null===i)return;r._uiTableElementTo=i,r._uiTableElementTo!==this.it&&(r._uiTableElementTo.Ai.Ni(this.it),n.B(this.it,this.si,null));const s=this.it.getAttribute("drag-name"),e=i.getAttribute("drag-name");this.it.setAttribute("dragging-to",e),i.setAttribute("dragging-from",s),this.it.setAttribute("dragging-valid",""),i.setAttribute("dragging-valid","");let o=null,h=null,l=null;const a=i.getBoundingClientRect();for(const t of i.v.children){if(!1===t.L)continue;const i=t.getBoundingClientRect();i.top<a.top||(i.bottom>a.bottom||(null===h&&(h=t),l=t))}-1===t&&(o=l),1===t&&(o=h),n.B(r._uiTableElementTo,r._uiTableElementTo.Ai.si,o),r._uiTableElementTo.Ai.Li(this)}Ri(t){!0!==l.Bi&&this.Pi()}Ti(){this.Pi()}Ui(t){this.it.Ut.update();const i=t.getBoundingClientRect();this.ui=document.createElement("div"),this.ui.style.position="fixed",this.ui.style.inset="0",this.ui.style.backgroundColor="transparent",this.ui.style.zIndex="999999",this.si=t,this.si.classList.add("drop-row"),this.ci=document.createElement("div"),this.ci.classList.add("dropzone"),this.si.appendChild(this.ci),this.fi=this.si.nextSibling,this.ni=n.Dt(this.it,t);let s=i.x+20;this.ni.style.left=s.toString()+"px",this.ni.style.top=i.y.toString()+"px",document.body.appendChild(this.ui),this.ui.appendChild(this.ni),t.blur(),r._uiTableElementFrom=this.it,r._uiTableElementTo=this.it,document.addEventListener("keydown",this.Ci),document.addEventListener("scroll",this.Ri),document.addEventListener("click",this.Ti),this.Pt=!0,this.Si=!1}Ni(t){this.it.Ut.update(),this.si=document.createElement("div"),this.si.style.height=t.Ai.si.clientHeight.toString()+"px",this.si.style.gridColumn="1/-1",this.si.classList.add("row"),this.si.classList.add("drop-row"),this.ci=document.createElement("div"),this.ci.classList.add("dropzone"),this.si.appendChild(this.ci),this.it.v.appendChild(this.si),this.Qt=t.Ai.Qt,this.Xt=t.Ai.Xt}Ii(t){const i=this.si.getBoundingClientRect();if(!0===t)return this.ni.style.left=i.x.toString()+"px",this.ni.style.top=i.y.toString()+"px",void this.zi();this.ni.addEventListener("transitionend",this.zi),this.ni.style.transition="top "+this.it.Ut.et+", left "+this.it.Ut.et,this.ni.style.left=i.x.toString()+"px",this.ni.style.top=i.y.toString()+"px"}zi(){!1!==this.Pt&&(this.ni.removeEventListener("transitionend",this.zi),this.si.removeChild(this.ci),this.si.classList.remove("drop-row"),this.ui.removeChild(this.ni),document.body.removeChild(this.ui),this.ni=void 0,this.si=void 0,this.ui=void 0,this.ci=void 0,document.removeEventListener("keydown",this.Ci),document.removeEventListener("scroll",this.Ri),document.removeEventListener("click",this.Ti),this.Di.focus(),this.Pt=!1)}Pi(){r._uiTableElementTo!==this.it?this.yi(r._uiTableElementTo):n.F(this.it,this.si,this.si.nextSibling),this.Ii(!0),r._uiTableElementTo&&(r._uiTableElementTo.removeAttribute("dragging-valid"),r._uiTableElementTo.removeAttribute("dragging-from"),r._uiTableElementTo.removeAttribute("dragging-to")),n.Ht(this.it),this.it.removeAttribute("dragging-valid"),this.it.removeAttribute("dragging-from"),this.it.removeAttribute("dragging-to"),r._uiTableElementFrom=null,r._uiTableElementTo=null}Fi(){let t=this.it.getBoundingClientRect(),s=this.si.getBoundingClientRect();if(s.bottom>window.innerHeight&&t.bottom>window.innerHeight){const t=i.t(this.it.parentElement);let e=window.innerHeight-16-s.bottom;return t.scrollBy({top:-e}),this.Vi(),!1}if(s.top<0&&t.top<0){const t=i.t(this.it.parentElement);let e=s.top-16;return t.scrollBy({top:e}),this.Vi(),!1}let e=!0;if(s.top<t.top||s.bottom>t.bottom){let r=!0;if(s.top+s.height/2>t.top+t.height/2&&(r=!1),!0===r&&(t.top<0||t.top>window.innerHeight)){i.t(this.it.parentElement).scrollBy({top:t.top}),e=!1}if(!1===r&&(t.bottom<0||t.bottom>window.innerHeight)){const s=i.t(this.it.parentElement);let r=window.innerHeight-16-t.bottom;s.scrollBy({top:-r}),e=!1}}if(t.left<0){i.t(this.it.parentElement).scrollBy({left:t.left-16}),e=!1}else if(t.right>window.innerWidth&&t.width<window.innerWidth){const s=i.t(this.it.parentElement);let r=window.innerWidth-16-t.right;s.scrollBy({left:-r}),e=!1}if(!1===e&&this.Vi(),s.top<t.top){const i=t.top-s.top;return this.it.scrollBy({top:-i,behavior:"smooth"}),e}if(s.bottom>t.bottom){const i=s.bottom-t.bottom;return this.it.scrollBy({top:i,behavior:"smooth"}),e}return!1}Vi(){l.Bi=!0,l.Yi=Date.now()+1e3,setTimeout((()=>{l.Yi>=Date.now()||(l.Bi=!1)}),1200)}Li(t){if(!0===this.Fi())return;t.ni.style.transition="top "+this.it.Ut.et+", left "+this.it.Ut.et;const i=this.si.getBoundingClientRect();let s=i.x+20;t.ni.style.left=s.toString()+"px",t.ni.style.top=i.y.toString()+"px"}Mi(t,i){const s=[];if(UiTable.ki.forEach((t=>{!1!==n.At(this.it,t)&&s.push(t)})),s.length<=1)return null;let e=s.indexOf(t);return-1!==e?(1===i?e++:e--,e<0?e=s.length-1:e>=s.length&&(e=0),s[e]):void 0}Ki(t,i){for(const s of i.v.children){if(!1===s.L)continue;const i=s.getBoundingClientRect();if(!(t<i.top)&&!(t>i.bottom))return s}return null}yi(t){this.it.l=!0;const i=this.si.firstElementChild.assignedElements();this.it.K(this.it,this.si),i.forEach((t=>{this.it.removeChild(t)})),t.l=!0;let s=null;if(t.Ai.si.nextSibling){const i=t.Ai.si.nextSibling.firstElementChild.assignedElements();i.length>0&&(s=i[0])}i.forEach((i=>{t.insertBefore(i,s)})),this.Di=this.it.M(t,i,"row"),this.si=this.Di,this.si.classList.add("row"),this.si.classList.add("drop-row"),this.ci=document.createElement("div"),this.ci.classList.add("dropzone"),this.si.appendChild(this.ci),r._uiTableElementTo.Ai.si.replaceWith(this.Di),r._uiTableElementTo.Ai.si=null}}class a{constructor(t){this.it=t,this.ji=document.createElement("div"),this.ji.classList.add("overlay"),this.Pt=!1,this.Bt=this.Bt.bind(this),this.Ft=this.Ft.bind(this),this.Vt=this.Vt.bind(this),this.Yt=this.Yt.bind(this),this.Ci=this.Ci.bind(this),this.Wi=!1,this.Oi=[]}Ot(){this.it.v.addEventListener("pointerdown",this.Bt),window.addEventListener("pointerup",this.Ft),this.it.v.addEventListener("pointermove",this.Vt)}qt(){this.it.v.removeEventListener("pointerdown",this.Bt),window.removeEventListener("pointerup",this.Ft),this.it.v.removeEventListener("pointermove",this.Vt)}Bt(t){if(!1===t.isPrimary)return;if(0!==t.button)return;const i=this.qi(t.target);if(!i)return;if(!1===i.hasAttribute("slot"))return;if(!1===i._uiTableDraggable)return;this.Gi=i._uiTableHeaderColumn,this.Ji=null,r.zt=i._uiTableHeaderColumn,r.$t=0,this.Pt=!0,t.target.setPointerCapture(t.pointerId);const s=i.getBoundingClientRect();this.Qi=t.clientX-s.x,this.Xi=t.clientY-s.y,!0===this.Wi&&(this.it.T.style.gridTemplateColumns=this.it.m.$(this.it.o)),this.Zi=1,!0===this.it.hasAttribute("column-drag-from")&&(this.Zi=parseInt(this.it.getAttribute("column-drag-from")),this.Zi<=0&&(this.Zi=1))}Ft(t){!1!==this.Pt&&(!0===this.Zt&&(this.ei(),null!==this.Ji&&(o.I(this.it,this.Gi,this.Ji),-1===this.Ji?r.$t=1:this.Gi>this.Ji?r.$t=this.Ji+1:r.$t=this.Ji,o.Kt(this.it))),this.Pt=!1,t.target.releasePointerCapture(t.pointerId))}Vt(t){if(!0===this.Pt){!0!==this.Zt&&this.ri(t);const i=t.clientX-this.Qi,s=t.clientY-this.Xi;this.ts.style.left=i.toString()+"px",this.ts.style.top=s.toString()+"px",this.oi=t.clientX,this.hi=t.clientY,this.ss(t.clientX)}}Ci(t){!0===this.Pt&&"Escape"===t.key&&(this.ei(),t.preventDefault())}ri(t){if(this.es=this.qi(t.target),!this.es)return;this.it.Ut.update();const i=this.es.getBoundingClientRect();this.ui=document.createElement("div"),this.ui.style.position="fixed",this.ui.style.inset="0",this.ui.style.backgroundColor="transparent",this.ui.style.zIndex="999999",this.ts=o.Nt(this.it,this.es),this.ts.style.left=i.x.toString()+"px",this.ts.style.top=i.y.toString()+"px",document.body.appendChild(this.ui),this.ui.appendChild(this.ts),this.es.style.cursor="grabbing",this.gi=setInterval(this.Yt,500),document.addEventListener("keydown",this.Ci),this.es.setAttribute("selected",""),this.Zt=!0}ei(){this.es.style.cursor="grab",clearInterval(this.gi),this.ui.removeChild(this.ts),document.body.removeChild(this.ui),this.ts=void 0,this.ui=void 0,this.Oi.forEach((t=>{t.classList.remove("selected")})),document.removeEventListener("keydown",this.Ci),this.es.removeAttribute("selected"),this.Pt=!1,this.Zt=!1}ss(t){let i=0,s=1,e=null,r=0;this.Oi.forEach((n=>{if(r++,r<this.Zi)return;const o=n.getBoundingClientRect(),h=Math.abs(o.x-t);if(null===e)return i=h,s=r,void(e=n);h>i||(i=h,s=r,e=n)})),s===this.Oi.length&&1!==this.Zi||(this.Oi.forEach((t=>{t.classList.remove("selected")})),null!==e&&e.classList.add("selected"),s===this.Oi.length&&(s=-1),this.Ji=s)}qi(t){for(;;){if(!t)return null;if(t.assignedSlot)return t;t=t.parentElement}}Yt(){if(!1===this.Pt)return;const t=this.it.getBoundingClientRect();let s=0,e=!0,r=!1;if(this.oi>t.right&&(s=1,e=!1),this.oi>.9*this.ui.clientWidth&&(s=1,r=!0),this.oi<t.left&&(s=-1,e=!1),this.oi<.1*this.ui.clientWidth&&(s=-1,r=!0),0===s)return;let n=i.t(this.it),o=!0;if(!0===e&&!0===r&&(o=!0),!0!==e||!1!==r){if(!1===e&&!1===r&&(o=!0),!1===e&&!0===r&&(o=!1),1===s)for(;;){if(!n)return;if(n!==document.documentElement&&!1===o){if(Math.abs(n.scrollWidth-n.clientWidth-n.scrollLeft)<=1){n=i.t(n.parentElement);continue}}if(!0===o&&!1===r&&n!==this.it)return;return n.scrollBy({left:50,behavior:"smooth"}),void this.ss(this.oi)}if(-1===s)for(;;){if(!n)return;if(n===document.documentElement||!1!==o||0!==n.scrollLeft){if(!0===o&&!1===r&&n!==this.it)return;return n.scrollBy({left:-50,behavior:"smooth"}),void this.ss(this.oi)}n=i.t(n.parentElement)}}}C(){!0===this.it.hasAttribute("drag-drop-header")?!1===this.Wi&&(this.it.T.appendChild(this.ji),this.Wi=!0):!0===this.Wi&&(this.it.T.removeChild(this.ji),this.Wi=!1),this.Oi=[];const t=this.it.o;if(t<=1)return;for(let i=0;i<t;i++){const t=document.createElement("div");t.classList.add("bar"),t.style.gridColumn=(i+1).toString(),t.style.gridRow="1",this.ji.appendChild(t),this.Oi.push(t)}const i=document.createElement("div");i.classList.add("bar"),i.style.justifySelf="start",i.style.gridColumn="1",i.style.gridRow="1",this.ji.appendChild(i),this.Oi.push(i)}rs(){const t=this.it.v.firstElementChild;if(!t)return;const i=t.firstElementChild.assignedElements(),s=[];i.forEach((t=>{s.push(t.offsetWidth)}));return s.join(" ")}}class d{constructor(t){this.it=t,this.Pt=!1,this.Ei=this.Ei.bind(this),this.Ci=this.Ci.bind(this),this.Ti=this.Ti.bind(this)}Ot(){this.it.addEventListener("keydown",this.Ei)}qt(){this.it.removeEventListener("keydown",this.Ei)}Ei(t){if("Space"===t.code){if(!0===this.Pt)return;if(!0===this.it.R.Pt)return t.preventDefault(),void t.stopPropagation();if(this.es=this.qi(t.target),!this.es)return;if(!1===this.es.hasAttribute("slot"))return;return!1===this.es._uiTableDraggable?(t.preventDefault(),void t.stopPropagation()):(this.Gi=this.es._uiTableHeaderColumn,r.zt=this.es._uiTableHeaderColumn,r.$t=0,this.Ui(t),t.preventDefault(),void t.stopPropagation())}}Ci(t){if(t.preventDefault(),"Space"===t.code)return this.ei(),this.es.focus(),void o.Kt(this.it);if(!0===this.Pt){if("ArrowLeft"===t.key||"ArrowRight"===t.key){if(!0===this.Si)return;this.Si=!0,setTimeout((()=>{this.Si=!1}),100)}if("ArrowLeft"===t.key){if(1===this.Gi)return;let t=1;if(!0===this.it.hasAttribute("column-drag-from")&&(t=parseInt(this.it.getAttribute("column-drag-from")),t<=0&&(t=1)),this.Gi<=t)return;let i=-1;this.Gi>2&&(i=this.Gi-2),o.I(this.it,this.Gi,i),this.Gi--,r.$t=this.Gi,this.Fi(),this.ns()}if("ArrowRight"===t.key){if(this.Gi===this.it.o)return;o.I(this.it,this.Gi,this.Gi+1),this.Gi++,r.$t=this.Gi,this.Fi(),this.ns()}"Escape"===t.key&&(this.ei(),o.Kt(this.it))}}Ti(){this.ei()}Ui(t){if(this.es=this.qi(t.target),!this.es)return;this.it.Ut.update();const i=this.es.getBoundingClientRect();this.ui=document.createElement("div"),this.ui.style.position="fixed",this.ui.style.inset="0",this.ui.style.backgroundColor="transparent",this.ui.style.zIndex="999999",this.ts=o.Nt(this.it,this.es);let s=i.x+20,e=i.y+20;this.ts.style.left=s.toString()+"px",this.ts.style.top=e.toString()+"px",document.body.appendChild(this.ui),this.ui.appendChild(this.ts),this.es.blur(),document.addEventListener("keydown",this.Ci),document.addEventListener("click",this.Ti),this.es.setAttribute("selected",""),this.Pt=!0,this.Si=!1}ei(){this.es.style.cursor="grab",this.ui.removeChild(this.ts),document.body.removeChild(this.ui),this.ts=void 0,this.ui=void 0,document.removeEventListener("keydown",this.Ci),document.removeEventListener("click",this.Ti),this.es.removeAttribute("selected"),this.Pt=!1,this.Zt=!1}ns(){const t=this.es.getBoundingClientRect();let i=t.x+20,s=t.y+20;this.ts.style.left=i.toString()+"px",this.ts.style.top=s.toString()+"px"}qi(t){for(;;){if(!t)return null;if(t.assignedSlot)return t;t=t.parentElement}}Fi(){let t=this.es.getBoundingClientRect();if(t.left<0){i.t(this.it.parentElement).scrollBy({left:t.left-16})}else if(t.right>window.innerWidth){const s=i.t(this.it.parentElement);let e=window.innerWidth-16-t.right;s.scrollBy({left:-e})}}}class u{constructor(t){this.it=t,this.ji=document.createElement("div"),this.ji.classList.add("overlay"),this.Bt=this.Bt.bind(this),this.Ft=this.Ft.bind(this),this.Vt=this.Vt.bind(this),this.Wi=!1,this.Oi=[],this.Pt=!1}Bt(t){if(!1===t.isPrimary)return;if(0!==t.button)return;let i=t.target;!1===i.classList.contains("bar")&&(i=t.target.parentElement),i.classList.add("selected"),this.os(),this.hs(i),this.ls=t.clientX,this.ds=this.us[this.cs],this.fs=this.us[this.vs],t.target.setPointerCapture(t.pointerId),this.Pt=!0}Ft(t){let i=t.target;!1===i.classList.contains("bar")&&(i=t.target.parentElement),i.classList.remove("selected"),t.target.releasePointerCapture(t.pointerId),this.gs(),this.Pt=!1,this.bs()}Vt(t){if(!1===this.Pt)return;if(t.clientX<this.ws)return;if(t.clientX>this.ps)return;const i=t.clientX-this.ls;this.us[this.cs]=this.ds+i,this.us[this.vs]=this.fs-i;let s=[];this.us.forEach((t=>{s.push(t.toString()+"px")}));const e=s.join(" ");this.it.T.style.gridTemplateColumns=e}$(t){if(!1===this.it.hasAttribute("column-widths")){return"var(--ui-table-template-columns, "+"1fr ".repeat(t)+")"}let i=this.it.getAttribute("column-widths");-1!==i.indexOf(",")&&(i=i.replaceAll(","," "));let s=i.split(" ");if(s.length===t)return i;if(s.length>t)s.length=t;else{const i=t-s.length;for(let t=0;t<i;t++)s.push("1fr")}return i=s.join(" "),i}C(){!0===this.it.hasAttribute("column-bars")?!1===this.Wi&&(this.it.T.appendChild(this.ji),this.Wi=!0):!0===this.Wi&&(this.it.T.removeChild(this.ji),this.Wi=!1),this.Oi.forEach((t=>{t.removeEventListener("pointerdown",this.Bt),t.removeEventListener("pointerup",this.Ft),t.removeEventListener("pointermove",this.Vt),this.ji.removeChild(t)})),this.Oi=[];const t=this.it.o-1;if(!(t<=0))for(let i=0;i<t;i++){const t=document.createElement("div");t.classList.add("bar"),t.addEventListener("pointerdown",this.Bt),t.addEventListener("pointerup",this.Ft),t.addEventListener("pointermove",this.Vt);const i=document.createElement("div");t.appendChild(i),this.ji.appendChild(t),this.Oi.push(t)}}os(){const t=this.it.v.firstElementChild;if(!t)return;const i=t.firstElementChild.assignedElements();this.us=[],i.forEach((t=>{this.us.push(t.offsetWidth)}))}gs(){const t=this.it.v.firstElementChild;if(!t)return;const i=t.firstElementChild.assignedElements();let s=0;i.forEach((t=>{s+=t.offsetWidth}));const e=[];i.forEach((t=>{const i=t.offsetWidth/s*100;e.push(i.toFixed(2)+"%")}));const r=e.join(" ");this.it.T.style.gridTemplateColumns=r,this.it.setAttribute("column-widths",r)}hs(t){this.cs=-1,this.vs=-1;let i=null,s=null,e=!1;if(this.Oi.length>1){const t=this.Oi[0].getBoundingClientRect(),i=this.Oi[1].getBoundingClientRect();t.x>i.x&&(e=!0)}if(!1===e){for(let e=0;e<this.Oi.length;e++)if(this.Oi[e]===t){this.cs=e,this.vs=e+1,0!==e&&(i=this.Oi[e-1]),e+1<this.Oi.length&&(s=this.Oi[e+1]);break}}else for(let e=this.Oi.length-1;e>=0;e--)if(this.Oi[e]===t){this.cs=e+1,this.vs=e,0!==e&&(s=this.Oi[e-1]),e+1<this.Oi.length&&(i=this.Oi[e+1]);break}const r=this.it.getBoundingClientRect();let n=null,o=null;null!==i&&(n=i.getBoundingClientRect()),null!==s&&(o=s.getBoundingClientRect()),this.ws=0,this.ps=window.innerWidth,n&&(this.ws=n.x+32),n||(this.ws=r.x+32),this.ws<0&&(this.ws=0),o&&(this.ps=o.right-32),o||(this.ps=r.right-32),this.ps>window.innerWidth&&(this.ps=window.innerWidth)}bs(){const t=new Event("columnsized",{bubbles:!0,composed:!0});this.it.dispatchEvent(t)}h(t){if(!1===this.it.hasAttribute("column-widths"))return;let i=this.it.getAttribute("column-widths");-1!==i.indexOf(",")&&(i=i.replaceAll(","," "));const s=i.split(" ");if(0===s.length)return void this.it.setAttribute("column-widths","1fr");if(!1===s[0].endsWith("%"))return-1===t?s.splice(0,0,"1fr"):t!==s.length?s.splice(t,0,"1fr"):s.push("1fr"),void this.it.setAttribute("column-widths",s.join(" "));const e=1/(s.length+1);let r=0;for(let t=0;t<s.length;t++){let i=parseFloat(s[t]);i-=i*e,r+=i,s[t]=i.toFixed(2)+"%"}const n=(100-r).toFixed(2)+"%";-1===t?s.splice(0,0,n):t!==s.length?s.splice(t,0,n):s.push(n),this.it.setAttribute("column-widths",s.join(" "))}D(t){if(!1===this.it.hasAttribute("column-widths"))return;let i=this.it.getAttribute("column-widths");-1!==i.indexOf(",")&&(i=i.replaceAll(","," "));const s=i.split(" ");if(0===s.length)return void this.it.setAttribute("column-widths","1fr");if(!1===s[0].endsWith("%"))return s.splice(t-1,1),void this.it.setAttribute("column-widths",s.join(" "));const e=parseFloat(s[t-1])/100,r=e/(1-e);let n=0;s.splice(t-1,1);for(let t=0;t<s.length;t++){if(t===s.length-1){s[t]=(100-n).toFixed(2)+"%";break}let i=parseFloat(s[t]);i+=i*r,n+=i,s[t]=i.toFixed(2)+"%"}this.it.setAttribute("column-widths",s.join(" "))}I(t,i){const s=this.it.v.firstElementChild;if(!s)return;const e=s.firstElementChild.assignedElements();let r=0;e.forEach((t=>{r+=t.offsetWidth}));const n=[];e.forEach((t=>{const i=t.offsetWidth/r*100;n.push(i.toFixed(2)+"%")}));let o=n[t-1];-1===i?(n.splice(t-1,1),n.splice(0,0,o)):i>t?(n.splice(i,0,o),n.splice(t-1,1)):(n.splice(i,0,o),n.splice(t,1));const h=n.join(" ");this.it.T.style.gridTemplateColumns=h,this.it.setAttribute("column-widths",h)}}export class UiTable extends HTMLElement{constructor(){super(),this.m=new u(this),this.mi=new h(this),this.Ai=new l(this),this.R=new a(this),this._s=new d(this),this.Ut=new e(this),this.attachShadow({mode:"open",slotAssignment:"manual"}),this.shadowRoot.innerHTML=UiTable.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiTable.uiCssStyleSheet],this.T=this.shadowRoot.getElementById("column-control"),this.v=this.shadowRoot.getElementById("base"),this.xs=this.xs.bind(this),this.ks=this.ks.bind(this),this.ys=this.ys.bind(this),this.Es=this.Es.bind(this),this.l=!1}getColumnCount(){return s.i(this)}addColumn(t,i,e){s.h(this,t,i,e)}deleteColumn(t){s.D(this,t)}moveColumn(t,i){s.I(this,t,i)}getColumnNumber(t){return s.S(this,t)}getRowCount(){return s.H(this)}addRow(t,i){s.M(this,t,i)}deleteRow(t){s.N(this,t)}clearRows(t){s.P(this)}moveRow(t,i){s.B(this,t,i)}selectRow(t){s.V(this,t)}unselectRow(t){s.j(this,t)}getRowElementList(t){return s.W(this,t)}getRowNumber(t){return s.O(this,t)}setHeaders(t){s.q(this,t)}getHeaderElementList(){return s.G(this)}getHeaderElement(t){return s.J(this,t)}replaceHeaderElement(t,i){s.X(this,t,i)}getElement(t,i){return s.Z(this,t,i)}replaceElement(t,i,e){s.tt(this,t,i,e)}clear(){this.innerHTML=""}connectedCallback(){!0===this.Cs()&&this.Rs(),UiTable.Ts(this),this.mi.Ot(),this.Ai.Ot(),this.R.Ot(),this._s.Ot(),this.$i=null,this.zs=new MutationObserver(this.xs),this.zs.observe(this,{childList:!0})}disconnectedCallback(){this.zs.disconnect(),this.zs=void 0,UiTable.$s(this),this.mi.qt(),this.Ai.qt(),this.R.qt(),this._s.qt()}attributeChangedCallback(t,i,s){"columns"===t&&!0===this.Cs()&&this.Rs()}static get observedAttributes(){return["columns"]}xs(t,i){if(!0===this.l)return void(this.l=!1);let s=!1;for(let i=0;i<t.length;i++){const e=t[i];if(e.removedNodes){for(const t of e.removedNodes)if(1===t.nodeType&&!0===t.hasAttribute("slot")&&"header"===t.getAttribute("slot")){s=!0;break}if(!0===s)break}}if(!0===this.Cs()&&(s=!0),!0===s)return void this.Rs();let e=[],r=0;t.forEach((t=>{if(t.addedNodes)for(const i of t.addedNodes)e.push(i),r++,r>=this.o&&(this.M(this,e,"row"),e=[],r=0)}))}static Ts(t){UiTable.ki||(UiTable.ki=[]),UiTable.ki.push(t)}static $s(t){if(UiTable.ki)for(let i=0;i<UiTable.ki.length;i++){if(UiTable.ki[i]===t)return void UiTable.ki.splice(i,1)}}Cs(){const t=this.querySelectorAll('[slot="header"]');0===t.length?this.v.removeAttribute("has-headers"):this.v.setAttribute("has-headers","");let i=1;return!0===this.hasAttribute("columns")&&(i=parseInt(this.getAttribute("columns"))),i<=0&&(i=1),t.length>i&&(i=t.length),i!==this.o&&(this.o=i,!0)}Rs(){this.Ds(),this.p(),this._(),this.m.C(),this.R.C()}Ds(){this.v.innerHTML="";const t=this.querySelectorAll('[slot="header"]');0!==t.length&&(this.M(this,t,"header"),o.k(this)),this.T.style.gridTemplateColumns=this.m.$(this.o);const i=[];if(!0===this.hasAttribute("drag-row-cells")){this.getAttribute("drag-row-cells").split(",").forEach((t=>{i.push(parseInt(t))}))}let s=[],e=1;const r=this.hasAttribute("drag-drop-row");for(const t of this.children)if(!0!==t.hasAttribute("slot")&&(t._uiTableDraggable=!0,0!==i.length&&-1===i.indexOf(e)&&(t._uiTableDraggable=!1),s.push(t),e++,e>this.o)){const t=this.M(this,s,"row");t._uiTableDraggable=!1,!0===r&&(t._uiTableDraggable=!0),s=[],e=1}}async p(){const t=[],i=[],s=this.o;for(let e=1;e<=s;e++){const r=`& slot:not([name])::slotted(*:nth-child(${2*s}n + ${s+e}))`,n=`& slot:not([name])::slotted(*:nth-child(${2*s}n + ${e}))`;t.push(r),i.push(n)}t.join(","),i.join(",");const e=[],r=[];for(let t=1;t<=s;t+=2){const i=`& slot:not([name])::slotted(*:nth-child(${s}n + ${t}))`;e.push(i),1!=t&&r.push(i)}const n=e.join(","),o=r.join(",");let h=`\n        /* Vertical */\n        :host([vertical][striped]) #base:not([has-headers]) .row:nth-child(even) slot:not([name])::slotted(*:nth-child(${s}n+1)),\n        :host([vertical][striped]) #base[has-headers] .row:nth-child(odd) slot:not([name])::slotted(*:nth-child(${s}n+1)),\n        :host([vertical][hover]) .row:hover slot:not([name])::slotted(*:nth-child(${s}n+1)),\n        :host([vertical]) .row slot:not([name])::slotted(*:nth-child(${s}n+1)) {\n            background: var(--ui-tvbg);\n            color: var(--ui-tvfg);\n            font-family: inherit;\n            font-size: var(--ui-tvfs);\n            font-weight: var(--ui-tvfw);\n            padding: var(--ui-tvp);\n        }\n\n        /* Cells (everything except header and vertical) */\n        :host([vertical]) .row slot:not([name])::slotted(*:not(:nth-child(${s}n+1))),\n        :host(:not([vertical])) .row slot:not([name])::slotted(*) {\n            background-color: var(--ui-tbg);\n            color: var(--ui-tfg);\n            font-family: inherit;\n            font-size: var(--ui-tfs);\n            font-weight: var(--ui-tfw);\n            padding: var(--ui-tp);\n        }\n\n        /* Row lines */\n        :host([row-lines]) ::slotted(*:not(:nth-last-child(-n + ${s}))) {\n            border-block-end:\n                var(--ui-trlw)\n                var(--ui-trls)\n                var(--ui-trlc);\n        }\n\n        /* Column lines */\n        :host([column-lines]) ::slotted(*:not(:nth-child(${s}n + ${s}))) {\n            border-inline-end:\n