@coderundebug/ui-web/ui-data-bar.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";export class UiDataBar extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiDataBar.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiDataBar.uiCssStyleSheet],this.t=this.shadowRoot.querySelector(".base"),this.i=this.shadowRoot.getElementById("bar"),this.h=this.shadowRoot.getElementById("value"),this.o=this.o.bind(this),this.l=0,this.u=100,this.v=0,this.p=0,this.m="",this.k="",this.B=!0}connectedCallback(){this.D(),this.U=new ResizeObserver(this.o),this.U.observe(this.t)}disconnectedCallback(){this.U.unobserve(this.t)}attributeChangedCallback(t,i,s){this.D()}static get observedAttributes(){return["min","max","value","prefix","suffix","text"]}o(t){this.C&&(clearTimeout(this.C),this.C=null),this.C=setTimeout((()=>{this.F()}),100)}D(){let t=this.l,i=this.u,s=this.v;if(!0===this.hasAttribute("min")&&(t=parseFloat(this.getAttribute("min"))),!0===this.hasAttribute("max")&&(i=parseFloat(this.getAttribute("max"))),!0===this.hasAttribute("value")&&(s=parseFloat(this.getAttribute("value"))),t===this.l&&i===this.u&&s===this.v)return;if(t>i)return;if(t===i)return;let a=s;a<t&&(a=t),a>i&&(a=i);let r=0;const e=i-t;if(this.m="",this.k="",this.h.style.justifySelf="",this.h.style.right="",this.h.style.left="",this.i.style.border="",this.i.classList.remove("minus"),s<0&&this.i.classList.add("minus"),this.p=0,this.B=!0,t>=0){r=a-t;const i=100-r/e*100;this.i.style.left="0px",this.i.style.right=i.toString()+"%",this.p=1}else if(i<=0){r=a-i;const t=100-r/e*-100;this.i.style.right="0px",this.i.style.left=t.toString()+"%",this.m="",this.k="var(--ui-data-bar-text-gap, 8px)",this.h.style.justifySelf="left",this.h.style.right=this.m="",this.h.style.left=this.k,this.p=-1}else{if(a<0){const t=i/e*100;r=a-i;const s=100-r/e*-100;this.i.style.right=t.toString()+"%",this.i.style.left=s.toString()+"%",this.m="",this.k="var(--ui-data-bar-text-gap, 8px)",this.h.style.justifySelf="left",this.h.style.right=this.m,this.h.style.left=this.k,this.p=-1}if(a>=0){const i=t/e*-100;r=a-t;const s=100-r/e*100;this.i.style.left=i.toString()+"%",this.i.style.right=s.toString()+"%",this.p=1,0===a&&(this.B=!1,this.m="0",this.k="0",r=0)}}0===r&&(this.i.style.border="none");let h="";!0===this.hasAttribute("text")?h=this.getAttribute("text"):(!0===this.hasAttribute("prefix")&&(h=this.getAttribute("prefix")),h+=this.getAttribute("value"),!0===this.hasAttribute("suffix")&&(h+=this.getAttribute("suffix"))),this.h.innerText=h,this.F()}F(){const t=this.h.getBoundingClientRect(),i=this.i.getBoundingClientRect();if(this.h.classList.remove("outside"),this.h.style.right=this.m,this.h.style.left=this.k,t.width+16>i.width){this.h.classList.add("outside");let i="calc((var(--ui-data-bar-text-gap, 8px) + "+t.width.toString()+"px) * -1)";!1===this.B&&(i="0"),1===this.p&&(this.h.style.right=i),-1===this.p&&(this.h.style.left=i)}}}UiDataBar.uiCss=" .base{display:block;position:relative;direction:ltr;min-height:calc(var(--ui-data-bar-text-font-size, var(--ui-font-size-normal, 16px)) + 8px);height:100%;width:100%;box-sizing:border-box;background-color:var(--ui-data-bar-background, transparent);}#bar{display:grid;position:absolute;top:0;bottom:0;border-style:var(--ui-data-bar-border-style, solid);border-width:var(--ui-data-bar-border-width, 0);border-color:var(--ui-data-bar-border-color, color-mix(in hsl, var(--ui-data-bar-plus-color, #1858bb) 80%, black 20%));border-radius:var(--ui-data-bar-border-raduis, var(--ui-border-radius-small, 3px));background-color:var(--ui-data-bar-plus-color, #1858bb);}#bar.minus{background-color:var(--ui-data-bar-minus-color, #bb1818);}#value{align-self:center;justify-self:right;position:absolute;right:var(--ui-data-bar-text-gap, 8px);font-size:var(--ui-data-bar-text-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-data-bar-text-font-weight, var(--ui-font-weight-normal, normal));line-height:var(--ui-data-bar-text-font-size, var(--ui-font-size-normal, 16px));white-space:nowrap;color:var(--ui-data-bar-text-inside-color, hsl(0 0% 97% / 1));user-select:none;-webkit-user-select:none;}#value.outside{color:var(--ui-data-bar-text-outside-color, var(--ui-foreground, hsl(0 0% 18% / 1)));}",UiDataBar.uiHtml='<div class="base"><div id="bar"><div id="value"></div></div></div>',t.createUi(UiDataBar,"ui-data-bar",import.meta.url);