@ctrliq/quantic-components 1.62.0 → 1.62.1

package/dist/quantic-components.min.js

@@ -38564,7 +38564,7 @@ const Jn="important",Qn=" !"+Jn,Yn=Fe(class extends Re{constructor(e){if(super(e
     }
 
     ${r(Fi(e=>`--quantic-component-sparkline-color: var(--quantic-utility-${e}-500);`))}
-  `,t([Le({type:"number[]",default:"[]",description:"Array of numeric data points to chart."})],e.Sparkline.prototype,"values",void 0),t([Le({type:"SparklineVariant",options:Object.values(Uo),default:Uo.Line,description:"Chart style — line, filled area, or gradient fill."})],e.Sparkline.prototype,"variant",void 0),t([Le({type:"SparklineColor",options:Object.values(Zo),default:Zo.Brand,description:"Stroke and fill color."})],e.Sparkline.prototype,"color",void 0),t([Le({type:"number",description:"Override the minimum Y value used for scaling. Defaults to the data minimum."})],e.Sparkline.prototype,"yMin",void 0),t([Le({type:"number",description:"Override the maximum Y value used for scaling. Defaults to the data maximum."})],e.Sparkline.prototype,"yMax",void 0),e.Sparkline=t([Ce("quantic-sparkline")],e.Sparkline);const Jo={percent:0,flex:1};function Qo(e,t){if(0===t)return[];const i=e.trim().split(/\s+/).filter(Boolean),n=Array.from({length:t},(e,t)=>t<i.length?(e=>{if(e.endsWith("%")){const t=parseFloat(e);return{percent:isNaN(t)||t<0?0:t,flex:0}}const t="*"===e?1:parseFloat(e);return{percent:0,flex:isNaN(t)||t<=0?1:t}})(i[t]):Jo),o=n.reduce((e,{percent:t})=>e+t,0),s=n.reduce((e,{flex:t})=>e+t,0),c=Math.max(0,100-o),r=n.map(({percent:e,flex:t})=>0===t?e:s>0?t/s*c:0),l=r.reduce((e,t)=>e+t,0);return l>0?r.map(e=>e/l*100):Array(t).fill(100/t)}var Yo,es,ts,is;e.SplitterGroup=class extends fe{constructor(){super(...arguments),this.direction="horizontal",this.resizable=!1,this.split="",this.collapseBelow="640px",this.panes=[],this.sizes=[],this.mutationObserver=null,this.collapsedObserver=null,this.resizeObserver=null,this.dragInfo=null,this.handlePointerMove=e=>{if(!this.dragInfo)return;const t="vertical"===this.direction?this.wrapper.clientHeight:this.wrapper.clientWidth;if(0===t)return;const{dividerIndex:i,startX:n,startY:o,startLayoutA:s,startLayoutB:c}=this.dragInfo,r=this.panes[i-1],l=this.panes[i],a=("vertical"===this.direction?e.clientY-o:e.clientX-n)/t*100,[d,u]=Wo(s,a,{a:Go(r),b:Go(l),total:s+c}),h=[...this.sizes];h[i-1]=Xo(d,this.dragInfo.activeSizesSum),h[i]=Xo(u,this.dragInfo.activeSizesSum),this.sizes=h,this.applySizes()},this.handlePointerUp=()=>{this.dragInfo&&(this.renderRoot.querySelectorAll(".divider.dragging").forEach(e=>{e.classList.remove("dragging")}),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp),this.dragInfo=null,this.dispatchEvent(new CustomEvent("resize",{bubbles:!0,composed:!0,detail:{sizes:this.sizes}})))}}connectedCallback(){super.connectedCallback(),this.discoverPanes(),this.mutationObserver=new MutationObserver(()=>this.discoverPanes()),this.mutationObserver.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.collapsedObserver?.disconnect(),this.resizeObserver?.disconnect(),this.dragInfo&&(this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp),this.dragInfo=null)}firstUpdated(){this.setupResizeObserver()}updated(e){super.updated(e),e.has("split")&&!e.has("panes")&&(this.sizes=Qo(this.split,this.panes.length),this.applySizes()),e.has("collapseBelow")&&this.checkStacked()}discoverPanes(){const e=Array.from(this.querySelectorAll(":scope > quantic-splitter-pane"));e.forEach((e,t)=>{const i=`pane-${t}`;e.getAttribute("slot")!==i&&e.setAttribute("slot",i)}),this.panes.forEach(t=>{e.includes(t)||(t.removeAttribute("slot"),t.removeAttribute("stacked"))});const t=this.panes.length;this.panes=e,e.length!==t&&(this.sizes=Qo(this.split,e.length)),this.setupCollapsedObserver(),this.applySizes()}setupCollapsedObserver(){this.collapsedObserver?.disconnect(),0!==this.panes.length&&(this.collapsedObserver=new MutationObserver(()=>{this.panes=[...this.panes],this.applySizes()}),this.panes.forEach(e=>{this.collapsedObserver.observe(e,{attributes:!0,attributeFilter:["collapsed"]})}))}setupResizeObserver(){this.wrapper&&(this.resizeObserver=new ResizeObserver(e=>{const t=e[0];t&&this.checkStackedForSize(t.contentRect.width)}),this.resizeObserver.observe(this.wrapper))}checkStacked(){this.wrapper&&this.checkStackedForSize(this.wrapper.clientWidth)}checkStackedForSize(e){if("vertical"===this.direction)return;const t=(this.collapseBelow??"").trim();if(!t.endsWith("px"))return;const i=parseFloat(t);if(!Number.isFinite(i))return;const n=e<=i;this.toggleAttribute("stacked",n),this.panes.forEach(e=>e.toggleAttribute("stacked",n))}applySizes(){const e=Ko(this.sizes,this.panes);this.panes.forEach((t,i)=>{t.style.setProperty("--quantic-component-splitter-pane-flex-grow",String(e[i]))}),this.renderRoot.querySelectorAll('[part="divider"]').forEach((t,i)=>{t.setAttribute("aria-valuenow",String(Math.round(e[i])))})}dividerEffectiveBounds(e,t){const i=Go(this.panes[e-1]),n=Go(this.panes[e]),o=t[e-1]+t[e];return{min:Math.max(i.min,o-n.max),max:Math.min(i.max,o-n.min)}}isDividerDisabled(e){return!this.resizable||(this.panes[e-1]?.collapsed??!1)||(this.panes[e]?.collapsed??!1)}isDividerHidden(e){return(this.panes[e-1]?.hasAttribute("collapsed")??!1)||(this.panes[e]?.hasAttribute("collapsed")??!1)}handleDividerPointerDown(e,t){e.preventDefault();const i=e.currentTarget;i.setPointerCapture(e.pointerId),i.classList.add("dragging");const n=Ko(this.sizes,this.panes),o=No(this.sizes,this.panes);this.dragInfo={dividerIndex:t,startX:e.clientX,startY:e.clientY,startLayoutA:n[t-1],startLayoutB:n[t],activeSizesSum:o},this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp)}handleDividerKeyDown(e,t){const i=function(e,t){if(t){if("ArrowUp"===e)return-1;if("ArrowDown"===e)return 1}else{if("ArrowLeft"===e)return-1;if("ArrowRight"===e)return 1}return null}(e.key,"vertical"===this.direction);if(null===i)return;e.preventDefault();const n=Ko(this.sizes,this.panes),[o,s]=Wo(n[t-1],i,{a:Go(this.panes[t-1]),b:Go(this.panes[t]),total:n[t-1]+n[t]}),c=No(this.sizes,this.panes),r=[...this.sizes];r[t-1]=Xo(o,c),r[t]=Xo(s,c),this.sizes=r,this.applySizes(),this.dispatchEvent(new CustomEvent("resize",{bubbles:!0,composed:!0,detail:{sizes:this.sizes}}))}render(){const e=Ko(this.sizes,this.panes);return Z`
+  `,t([Le({type:"number[]",default:"[]",description:"Array of numeric data points to chart."})],e.Sparkline.prototype,"values",void 0),t([Le({type:"SparklineVariant",options:Object.values(Uo),default:Uo.Line,description:"Chart style — line, filled area, or gradient fill."})],e.Sparkline.prototype,"variant",void 0),t([Le({type:"SparklineColor",options:Object.values(Zo),default:Zo.Brand,description:"Stroke and fill color."})],e.Sparkline.prototype,"color",void 0),t([Le({type:"number",description:"Override the minimum Y value used for scaling. Defaults to the data minimum."})],e.Sparkline.prototype,"yMin",void 0),t([Le({type:"number",description:"Override the maximum Y value used for scaling. Defaults to the data maximum."})],e.Sparkline.prototype,"yMax",void 0),e.Sparkline=t([Ce("quantic-sparkline")],e.Sparkline);const Jo={percent:0,flex:1};function Qo(e,t){if(0===t)return[];const i=e.trim().split(/\s+/).filter(Boolean),n=Array.from({length:t},(e,t)=>t<i.length?(e=>{if(e.endsWith("%")){const t=parseFloat(e);return{percent:isNaN(t)||t<0?0:t,flex:0}}const t="*"===e?1:parseFloat(e);return{percent:0,flex:isNaN(t)||t<=0?1:t}})(i[t]):Jo),o=n.reduce((e,{percent:t})=>e+t,0),s=n.reduce((e,{flex:t})=>e+t,0),c=Math.max(0,100-o),r=n.map(({percent:e,flex:t})=>0===t?e:s>0?t/s*c:0),l=r.reduce((e,t)=>e+t,0);return l>0?r.map(e=>e/l*100):Array(t).fill(100/t)}var Yo,es,ts,is;e.SplitterGroup=class extends fe{constructor(){super(...arguments),this.direction="horizontal",this.resizable=!1,this.split="",this.collapseBelow="640px",this.panes=[],this.sizes=[],this.mutationObserver=null,this.collapsedObserver=null,this.resizeObserver=null,this.dragInfo=null,this.handlePointerMove=e=>{if(!this.dragInfo)return;const t="vertical"===this.direction?this.wrapper.clientHeight:this.wrapper.clientWidth;if(0===t)return;const{dividerIndex:i,startX:n,startY:o,startLayoutA:s,startLayoutB:c}=this.dragInfo,r=this.panes[i-1],l=this.panes[i],a=("vertical"===this.direction?e.clientY-o:e.clientX-n)/t*100,[d,u]=Wo(s,a,{a:Go(r),b:Go(l),total:s+c}),h=[...this.sizes];h[i-1]=Xo(d,this.dragInfo.activeSizesSum),h[i]=Xo(u,this.dragInfo.activeSizesSum),this.sizes=h,this.applySizes()},this.handlePointerUp=()=>{this.dragInfo&&(this.renderRoot.querySelectorAll(".divider.dragging").forEach(e=>{e.classList.remove("dragging")}),this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp),this.dragInfo=null,this.dispatchEvent(new CustomEvent("resize",{bubbles:!0,composed:!0,detail:{sizes:this.sizes}})))}}connectedCallback(){super.connectedCallback(),this.discoverPanes(),this.mutationObserver=new MutationObserver(()=>this.discoverPanes()),this.mutationObserver.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.collapsedObserver?.disconnect(),this.resizeObserver?.disconnect(),this.dragInfo&&(this.removeEventListener("pointermove",this.handlePointerMove),this.removeEventListener("pointerup",this.handlePointerUp),this.removeEventListener("pointercancel",this.handlePointerUp),this.dragInfo=null)}firstUpdated(){this.setupResizeObserver()}updated(e){super.updated(e),e.has("split")&&(this.sizes=Qo(this.split,this.panes.length),this.applySizes()),e.has("collapseBelow")&&this.checkStacked()}discoverPanes(){const e=Array.from(this.querySelectorAll(":scope > quantic-splitter-pane"));e.forEach((e,t)=>{const i=`pane-${t}`;e.getAttribute("slot")!==i&&e.setAttribute("slot",i)}),this.panes.forEach(t=>{e.includes(t)||(t.removeAttribute("slot"),t.removeAttribute("stacked"))});const t=this.panes.length;this.panes=e,e.length!==t&&(this.sizes=Qo(this.split,e.length)),this.setupCollapsedObserver(),this.applySizes()}setupCollapsedObserver(){this.collapsedObserver?.disconnect(),0!==this.panes.length&&(this.collapsedObserver=new MutationObserver(()=>{this.panes=[...this.panes],this.applySizes()}),this.panes.forEach(e=>{this.collapsedObserver.observe(e,{attributes:!0,attributeFilter:["collapsed"]})}))}setupResizeObserver(){this.wrapper&&(this.resizeObserver=new ResizeObserver(e=>{const t=e[0];t&&this.checkStackedForSize(t.contentRect.width)}),this.resizeObserver.observe(this.wrapper))}checkStacked(){this.wrapper&&this.checkStackedForSize(this.wrapper.clientWidth)}checkStackedForSize(e){if("vertical"===this.direction)return;const t=(this.collapseBelow??"").trim();if(!t.endsWith("px"))return;const i=parseFloat(t);if(!Number.isFinite(i))return;const n=e<=i;this.toggleAttribute("stacked",n),this.panes.forEach(e=>e.toggleAttribute("stacked",n))}applySizes(){const e=Ko(this.sizes,this.panes);this.panes.forEach((t,i)=>{t.style.setProperty("--quantic-component-splitter-pane-flex-grow",String(e[i]))}),this.renderRoot.querySelectorAll('[part="divider"]').forEach((t,i)=>{t.setAttribute("aria-valuenow",String(Math.round(e[i])))})}dividerEffectiveBounds(e,t){const i=Go(this.panes[e-1]),n=Go(this.panes[e]),o=t[e-1]+t[e];return{min:Math.max(i.min,o-n.max),max:Math.min(i.max,o-n.min)}}isDividerDisabled(e){return!this.resizable||(this.panes[e-1]?.collapsed??!1)||(this.panes[e]?.collapsed??!1)}isDividerHidden(e){return(this.panes[e-1]?.hasAttribute("collapsed")??!1)||(this.panes[e]?.hasAttribute("collapsed")??!1)}handleDividerPointerDown(e,t){e.preventDefault();const i=e.currentTarget;i.setPointerCapture(e.pointerId),i.classList.add("dragging");const n=Ko(this.sizes,this.panes),o=No(this.sizes,this.panes);this.dragInfo={dividerIndex:t,startX:e.clientX,startY:e.clientY,startLayoutA:n[t-1],startLayoutB:n[t],activeSizesSum:o},this.addEventListener("pointermove",this.handlePointerMove),this.addEventListener("pointerup",this.handlePointerUp),this.addEventListener("pointercancel",this.handlePointerUp)}handleDividerKeyDown(e,t){const i=function(e,t){if(t){if("ArrowUp"===e)return-1;if("ArrowDown"===e)return 1}else{if("ArrowLeft"===e)return-1;if("ArrowRight"===e)return 1}return null}(e.key,"vertical"===this.direction);if(null===i)return;e.preventDefault();const n=Ko(this.sizes,this.panes),[o,s]=Wo(n[t-1],i,{a:Go(this.panes[t-1]),b:Go(this.panes[t]),total:n[t-1]+n[t]}),c=No(this.sizes,this.panes),r=[...this.sizes];r[t-1]=Xo(o,c),r[t]=Xo(s,c),this.sizes=r,this.applySizes(),this.dispatchEvent(new CustomEvent("resize",{bubbles:!0,composed:!0,detail:{sizes:this.sizes}}))}render(){const e=Ko(this.sizes,this.panes);return Z`
       <div
         class=${Oe({wrapper:!0,"direction--horizontal":"horizontal"===this.direction,"direction--vertical":"vertical"===this.direction})}
       >