gauge-hotnipi.esm.min.js

var x=Object.defineProperty;var k=(c,o,a)=>o in c?x(c,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[o]=a;var h=(c,o,a)=>(k(c,typeof o!="symbol"?o+"":o,a),a);var f="gauge-hotnipi";function w(c,...o){return c.map((a,l)=>a+(o[l]||"")).join("")}var b=document.createElement("template");b.innerHTML=w`
    <style>
        :host{           
            --hng-needle-color: var(--needle-color,hsl(1, 74%, 52%));
            --hng-zone-color-high: var(--zone-color-high,hsla(5, 100%, 65%, 0.459));
            --hng-zone-color-warn: var(--zone-color-warn,hsla(39, 100%, 59%, 0.459));
            --hng-zone-color-normal: var(--zone-color-normal,hsla(97, 100%, 65%, 0.333));
            --hng-zone-color-low: var(--zone-color-low,hsla(200, 100%, 65%, 0.522));
            --hng-needle-speed: var(--needle-speed,0.5);
            --hng-plate-hue: 0;
        }
        .g-wrapper {
            display: grid;
            grid-template-rows: 1fr;
            width: 100%;
            height: 100%;
            align-content: center;
            align-items: center;
            justify-items: center;
        }
        .g-wrapper-label-0 .g-container {
            height: calc(100% - 6px);
        }        
        .g-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            user-select: none;
            width: 100%;
            height: 100%;
        }        
        .g-body {
            position: relative;
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: center;
            height: 98%;
            width: 98%;
            border-radius: 15%;
            box-shadow: 0px 2px 4px 2px #00000030;
            background: linear-gradient(0deg, var(--surface3) 0%, var(--surface4) 99%, var(--surface1) 100%);
            user-select: none;
        }
        .g-round{
            border-radius: 100%;
        }        
        .g-body::before {
            content: '';
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            left: 0px;
            opacity: 0.1;
            border-radius: 15%;    
        }        
        .g-ring {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            width: 94%;
            height: 94%;
            border-radius: 50%;
            background: linear-gradient(180deg, var(--surface2) 0%, var(--surface4) 99%, var(--surface5) 100%);
        } 

        .g-plate {
            --plate-hue:var(--hng-plate-hue);
            position: relative;
            overflow: hidden;
            width: 93%;
            height: 93%;
            border-radius: 50%;
            box-shadow: inset 0 0 11px hsl(var(--plate-hue) 67% 56% / 60%);
            background: radial-gradient(circle, hsl(var(--plate-hue), 31%, 17%) 0%, hsl(var(--plate-hue), 20%, 30%) 40%, hsl(var(--plate-hue), 69%, 10%) 100%);
        } 

        @media (prefers-color-scheme: light){
            .g-body {
                box-shadow: 0px 2px 6px 0px #00000020;
            }
            .g-plate {
                background: unset;
                box-shadow: inset 0 0 20px #00000035;
            }
            .g-ring{
                background: linear-gradient(180deg, var(--surface5) 0%, var(--surface2) 99%, var(--surface1) 100%);
            }
        }    
        .g-led{
            position: absolute;
            left:48%;
            top:27%;
            border-radius: 2em;
            width: 0.5em;
            height: 0.5em;
            background-color: hsla(360 100% 50% / 100%);
            box-shadow: 0 0 4px 1px hsl(0, 100%, 25%), inset 0px -5px 6px -3px hsl(360 100% 30%);
            filter:saturate(0.05) brightness(3);        
        }
        .g-led.active{
            animation:blink 0.25s linear ;
            animation-iteration-count: infinite;        
        }
        @keyframes blink{
            50%{filter: none;}
        }
        .g-ticks {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            filter: drop-shadow(2px 4px 6px hsl(0, 0%, 0%));
        }        
        .g-tick {
            position: relative;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
            margin-bottom: -1px;
            background: linear-gradient(90deg, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 0%, 0) 2%, var(--text3) 2%, var(--text3) 10%, hsla(0, 0%, 0%, 0) 10%);
            transform: rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-tick-count)) + 45deg)));
        }        
        .g-tick.clock {
            transform: rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick-count)) +270deg)));
        }        
        .g-subtick {
            position: relative;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
            margin-bottom: -1px;
            background: linear-gradient(90deg, hsla(0, 0%, 0%, 0) 0, hsla(0, 0%, 0%, 0) 2%, var(--text3) 2%, var(--text3) 6%, hsla(0, 0%, 0%, 0) 6%);
            transform: rotate(calc(calc(270deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-subtick-count)) + 45deg)));
        }   
        .g-subtick.clock {
            transform: rotate(calc(calc(360deg / var(--ga-subtick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-subtick-count)) + 270deg)));
        }        
        .g-num {
            position: absolute;
            top: 50%;
            left: 50%;
            text-align: center;
            transform: translate(-50%, -50%) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(270deg / var(--ga-tick-count)) + 45deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(270deg / var(--ga-tick-count)) * var(--ga-tick) *-1 - calc(calc(270deg / var(--ga-tick-count))*-1 - 45deg)));
        }        
        .g-num.clock {
            transform: translate(-50%, -50%) rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) - calc(calc(360deg / var(--ga-tick-count)) + 270deg))) translate(calc(-1px * var(--container-size) * var(--gn-distance))) rotate(calc(calc(360deg / var(--ga-tick-count)) * var(--ga-tick) *-1 - calc(calc(360deg / var(--ga-tick-count))*-1 - 270deg)));
        }        
        .g-nums {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            color: var(--text3);
            font-size: calc(var(--digit-size) * 1%);
            font-weight: 500;
            filter: drop-shadow(2px 4px 10px hsl(0, 0%, 0%));
        }        
        .g-needle {
            position: absolute;
            left: 0;
            top: 49%;
            width: 100%;
            height: 2%;
            filter: drop-shadow(0px 1px 3px hsla(0, 0%, 0%, 0.502));
            background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 10%, var(--hng-needle-color) 10%, var(--hng-needle-color) 65%, hsla(0, 0%, 0%, 0) 65%);
            transform: rotate(calc(270deg * calc(var(--gauge-value, 0deg) / 100) - 45deg));
            transition: transform calc(1s * var(--hng-needle-speed));
        }        
        .g-needle-secondary {
            position: absolute;
            left: 0;
            top: 49%;
            width: 100%;
            height: 2%;
            filter: drop-shadow(0px 1px 3px hsla(0, 0%, 0%, 0.502));
            background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 15%, var(--hng-needle-color-secondary) 15%, var(--hng-needle-color-secondary) 50%, hsla(0, 0%, 0%, 0) 50%);
            transform: rotate(calc(270deg * calc(var(--gauge-value-secondary, 0deg) / 100) - 45deg));
            transition: transform  calc(1s * var(--hng-needle-speed));
        }
        .g-needle.hour {
            background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 20%, var(--hng-needle-color) 20%, var(--hng-needle-color) 50%, hsla(0, 0%, 0%, 0) 50%);
            transition: unset;
            transform: rotate(var(--time-hour));
        }        
        .g-needle.minute {
            top: 49.25%;
            height: 1.5%;
            background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 15%, var(--hng-needle-color) 15%, var(--hng-needle-color) 50%, hsla(0, 0%, 0%, 0) 50%);
            transition: unset;
            transform: rotate(var(--time-minute));
        }        
        .g-needle.second {
            top: 49.5%;
            height: 0.5%;
            background: linear-gradient(90deg, hsla(243, 100%, 7%, 0) 0, hsla(0, 0%, 0%, 0) 10%, var(--hng-needle-color) 10%, var(--hng-needle-color) 50%, hsla(0, 0%, 0%, 0) 50%);
            transform: rotate(var(--time-second));
            transition: unset;
        }        
        .g-needle-ring {
            position: absolute;
            width: calc(var(--container-size) * 2.5%);
            height: calc(var(--container-size) * 2.5%);
            top: 50%;
            left: 50%;
            border-radius: 50%;
            box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.612);
            background: linear-gradient(hsl(0, 0%, 88%), hsl(0, 0%, 71%));
            background: linear-gradient(var(--surface4), var(--surface3));
            transform: translate(-50%, -50%);
        }    
        .g-val {
            position: absolute;
            text-align: center;
            left: 50%;
            bottom: 0%;
            width: 80px;
            font-family: monospace;
            font-size: calc(var(--container-size) * 50%);
            color: var(--text3);
            filter: drop-shadow(2px 3px 2px hsla(0, 0%, 0%, 0.314));
            transform: translateX(-50%);
        }
        .g-val-ring {
            position: absolute;
            right: 0%;
            top: 0%;
            width: calc(calc(var(--container-size) * 7%) / calc(var(--container-size)/4));
            height: calc(calc(var(--container-size) * 6%) / calc(var(--container-size)/4));
            border-radius: 50%;
            background: linear-gradient(180deg, hsl(0, 0%, 31%) 0%, hsl(0, 0%, 84%) 99%, hsl(0, 0%, 93%) 100%);
        }
        .g-val-plate {
            position: absolute;
            right: 0%;
            top: 0%;
            width: 90%;
            height: 90%;
            border-radius: 50%;
            background: hsl(210, 23%, 91%);
            box-shadow: inset 0 0 15px hsla(0, 0%, 0%, 0.639);
            transform: translate(-5%, 5%);
        }
        .g-text {
            position: absolute;
            left: 50%;           
            width: 100%;
            font-family: monospace;
            font-size: calc(var(--container-size) * 20%);
            text-align: center;
            color: var(--text3);
            filter: drop-shadow(2px 3px 2px hsla(0, 0%, 0%, 0.502));
            transform: translateX(-50%);
        }        
        .g-label {
            top: 35%;
        }
        .g-unit {
            top: 62%;
        }
        .g-multi{
            top: 69%;
            font-size: calc(var(--container-size) * 27%);
        }        
        .g-rivets {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }        
        .g-rivet {
            position: absolute;
            width: 4%;
            height: 4%;
            border: 1px solid hsla(0, 0%, 100%, 0.1);
            border-radius: 50px;
            box-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.596), -1px -1px 5px hsla(0, 0%, 0%, 0.2);           
        }        
        .g-rivet:nth-child(1) {
            top: 3%;
            left: 3%;
        }        
        .g-rivet:nth-child(2) {
            top: 3%;
            right: 3%;
        }        
        .g-rivet:nth-child(3) {
            bottom: 3%;
            left: 3%;
        }        
        .g-rivet:nth-child(4) {
            bottom: 3%;
            right: 3%;
        }
        .g-zone {
            position: absolute;
            width: 48%;
            height: 48%;
            top: 2%;
            left: 50%;
            box-sizing: border-box;
            border-radius: 0 100% 0 0;
            border-color: var(--hng-zone-color-normal);
            border-top: calc(var(--container-size) * 2.5px) solid;
            border-right: calc(var(--container-size) * 2.5px) solid;
            transform-origin: bottom left;
        }        
        .g-zone-1 {
            clip-path: polygon(0% 0%, 100% 0%, 50% 0%, 0% 100%);
        }
        .g-zone-2 {
            clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 100%);
        }
        .g-zone-3 {
            clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
        }
        .g-zone.high {
            border-color: var(--hng-zone-color-high);  
        }        
        .g-zone.warn {
            border-color: var(--hng-zone-color-warn);  
        }        
        .g-zone.normal {
            border-color: var(--hng-zone-color-normal);  
        }        
        .g-zone.low {
            border-color: var(--hng-zone-color-low);
        }
    </style>
`;var u=class extends HTMLElement{constructor(){super();h(this,"config",{min:0,max:100,shape:"rect",rivets:!0,led:!0,scales:[],measurement:"",unit:"",multiplier:0,digits:{size:100,distance:14},zones:[],platehue:0,size:"100%"});h(this,"lastValue");h(this,"width");let a=this.attachShadow({mode:"open",delegatesFocus:!0});a.append(b.content.cloneNode(!0)),this.dispatchEvent(new Event(`${f}:construction`,{bubbles:!0,composed:!0})),this.wrapper=document.createElement("div"),a.appendChild(this.wrapper)}static get observedAttributes(){return["min","max","shape","multiplier","measurement","unit","rivets","digits","led","zones","platehue","size"]}connectedCallback(){this.draw()}attributeChangedCallback(a,l,t){if(l!==t&&Object.prototype.hasOwnProperty.call(this.config,a)){switch(a){case"min":{t=parseFloat(t),isNaN(t)&&(t=0);break}case"max":{t=parseFloat(t),isNaN(t)&&(t=100);break}case"platehue":{if(console.debug("debug platehue: ",isNaN(t),getComputedStyle(document.body).getPropertyValue(t)),isNaN(t)){let r=getComputedStyle(document.body).getPropertyValue(t);r===""?t=this.config.platehue:t=r}break}case"multiplier":{t=parseFloat(t),(isNaN(t)||t===0)&&(t=!1);break}case"led":case"rivets":t=t==="true";case"digits":{try{t=JSON.parse(t)}catch(r){console.log(r),t=this.config.digits}break}case"zones":{try{t=JSON.parse(t)}catch(r){console.warn(r,t),t=this.config.zones}break}default:break}this.config[a]=t}this.draw(),this.lastValue&&this.update(this.lastValue)}draw(){let a=(this.config.max-this.config.min)/10,l=this.config.min;this.config.scales=[];let t=this.config.multiplier;for(let e=0;e<11;++e)this.config.scales.push(l),l=parseFloat((l+a).toFixed(2));t&&t!==0&&(this.config.scales=this.config.scales.map(e=>parseFloat((e/t).toFixed(2)))),this.wrapper.replaceChildren(),this.wrapper.style.width=this.config.size,this.wrapper.style.height=this.config.size,this.wrapper.style.position="relative",this.width=this.wrapper.getBoundingClientRect().width,this.gauge=document.createElement("div"),this.gauge.setAttribute("style","--gauge-value:0;--ga-tick-count:10;--ga-subtick-count:100;"),this.gauge.style.width="100%",this.gauge.style.setProperty("height","100%"),this.gauge.style.setProperty("--container-size",this.width/50),this.gauge.style.setProperty("--gn-distance",this.config.digits.distance),this.gauge.style.setProperty("--digit-size",this.config.digits.size),this.gauge.style.setProperty("--hng-plate-hue",this.config.platehue),this.gauge.style.setProperty("--plate-hue",this.config.platehue);let r=document.createElement("div");r.className="g-body",this.config.shape==="round"&&r.classList.add("g-round"),this.gauge.appendChild(r);let d=document.createElement("div");if(d.className="g-ring",r.appendChild(d),this.config.rivets&&this.config.shape==="rect"){let e=document.createElement("div");e.className="g-rivets",d.appendChild(e);for(let i=0;i<4;++i){let s=document.createElement("div");s.className="g-rivet",e.appendChild(s)}}let n=document.createElement("div");if(n.className="g-plate",d.appendChild(n),this.config.zones.length>0){let e,i;this.config.zones.forEach(s=>{e=document.createElement("div"),i="g-zone ",i+="g-zone-"+s.cover+" ",i+=s.type,e.className=i,e.style.rotate=s.rotate+"deg",n.appendChild(e)})}this.config.led&&(this.led=document.createElement("div"),this.led.className="g-led",n.appendChild(this.led));let g=document.createElement("div");g.className="g-ticks",n.appendChild(g);for(let e=1;e<12;e++){let i=document.createElement("div");i.className="g-tick",i.setAttribute("style","--ga-tick:"+e),g.appendChild(i)}for(let e=2;e<101;e++){let i=e.toString();if(i.charAt(i.length-1)==="1")continue;let s=document.createElement("div");s.className="g-subtick",s.setAttribute("style","--ga-tick:"+e),g.appendChild(s)}let p=document.createElement("div");p.className="g-nums",n.appendChild(p);for(let e=1;e<12;e++){let i=document.createElement("div");i.className="g-num",i.setAttribute("style","--ga-tick:"+e),i.textContent=this.config.scales[e-1].toString(),p.appendChild(i)}if(this.config.measurement){let e=document.createElement("div");e.className="g-text g-label",e.textContent=this.config.measurement,n.appendChild(e)}if(this.config.unit){let e=document.createElement("div");e.className="g-text g-unit",e.textContent=this.config.unit,n.appendChild(e)}if(this.config.multiplier){let e=document.createElement("div");e.className="g-text g-multi",e.textContent="x"+this.config.multiplier,n.appendChild(e)}let m=document.createElement("div");m.className="g-needle",n.appendChild(m);let v=document.createElement("div");v.className="g-needle-ring",n.appendChild(v),this.valueField=document.createElement("div"),this.valueField.className="g-val",n.appendChild(this.valueField),this.wrapper.appendChild(this.gauge)}removeBlink(){this.led.classList.remove("active"),this.delay=null}update(a){if(this.lastValue=a,!this.valueField)return;let l=this.config.multiplier?(a/this.config.multiplier).toFixed(1):a.toFixed(1);this.valueField.textContent=l;let t=(a-this.config.min)/(this.config.max-this.config.min)*100;this.gauge.style.setProperty("--gauge-value",t),this.config.led&&(this.delay!=null&&(clearTimeout(this.delay),this.removeBlink()),this.led.classList.add("active"),this.delay=setTimeout(()=>this.removeBlink(),800))}};customElements.define(f,u);
//# sourceMappingURL=gauge-hotnipi.esm.min.js.map