circle-progress.min.js.js

/*!
 * Circle Progress - v1.0.0-beta.0 - 2023-07-17
 * https://tigrr.github.io/circle-progress/
 * Copyright (c) Tigran Sargsyan
 * Licensed MIT
 */
class t extends HTMLElement{static styles="";static props={};#t={};#e={};#a=new Set;constructor(){super();const t=this.attachShadow({mode:"open"}),{styles:e}=this.constructor;if(e){const a=document.createElement("style");a.textContent=e,t.append(a)}const{props:a}=this.constructor;if(a)for(const[t,e]of Object.entries(a))e.attribute&&(this.#t[t]=e.attribute,this.#e[e.attribute]=t),e.type===Boolean&&this.#a.add(t)}attributeUpdated(t,e){}_attrNameToProp(t){return this.#e[t]??t}_propToAttrName(t){return this.#t[t]??t}_attrValToProp(t,e){return this.#a.has(t)?null!==e:e}#i=!1;attributeChangedCallback(t,e,a){this.#i?this.#i=!1:this.attributeUpdated?.(this._attrNameToProp(t),this._attrValToProp(t,a))}reflectPropToAttribute(t){const e=this[t];this.#i=!0;const a=this._propToAttrName(t);this.#a.has(t)?e?this.setAttribute(a,""):this.removeAttribute(a):"function"==typeof e?this.removeAttribute(a):this.setAttribute(a,String(e))}}const e=function(t,e,i,r){r=r||document;const n=Object.create(a);if("string"==typeof t&&(t=r.querySelector(t)),!t)return;const s=r.createElementNS("http://www.w3.org/2000/svg","svg");return s.setAttribute("version","1.1"),e&&s.setAttribute("width",String(e)),i&&s.setAttribute("height",String(i)),e&&i&&s.setAttribute("viewBox","0 0 "+e+" "+i),t.appendChild(s),n.svg=s,n},a={element:function(t,e,a,r){const n=i(this,t,e,r);return a&&(n.el.innerHTML=a),n}},i=function(t,e,a,i,n){n=n||document;const s=Object.create(r);return s.el=n.createElementNS("http://www.w3.org/2000/svg",e),s.attr(a),(i?"el"in i?i.el:i:t.svg).appendChild(s.el),s},r={attr:function(t,e){if(void 0===t)return this;if("object"==typeof t){for(let e in t)this.attr(e,t[e]);return this}return void 0===e?this.el.getAttributeNS(null,t):(this.el.setAttribute(t,e),this)},content:function(t){return this.el.innerHTML=t,this}},n={linear:function(t,e,a,i){return a*t/i+e},easeInQuad:function(t,e,a,i){return a*(t/=i)*t+e},easeOutQuad:function(t,e,a,i){return-a*(t/=i)*(t-2)+e},easeInOutQuad:function(t,e,a,i){return(t/=i/2)<1?a/2*t*t+e:-a/2*(--t*(t-2)-1)+e},easeInCubic:function(t,e,a,i){return a*(t/=i)*t*t+e},easeOutCubic:function(t,e,a,i){return t/=i,a*(--t*t*t+1)+e},easeInOutCubic:function(t,e,a,i){return(t/=i/2)<1?a/2*t*t*t+e:a/2*((t-=2)*t*t+2)+e},easeInQuart:function(t,e,a,i){return a*(t/=i)*t*t*t+e},easeOutQuart:function(t,e,a,i){return t/=i,-a*(--t*t*t*t-1)+e},easeInOutQuart:function(t,e,a,i){return(t/=i/2)<1?a/2*t*t*t*t+e:-a/2*((t-=2)*t*t*t-2)+e},easeInQuint:function(t,e,a,i){return a*(t/=i)*t*t*t*t+e},easeOutQuint:function(t,e,a,i){return t/=i,a*(--t*t*t*t*t+1)+e},easeInOutQuint:function(t,e,a,i){return(t/=i/2)<1?a/2*t*t*t*t*t+e:a/2*((t-=2)*t*t*t*t+2)+e},easeInSine:function(t,e,a,i){return-a*Math.cos(t/i*(Math.PI/2))+a+e},easeOutSine:function(t,e,a,i){return a*Math.sin(t/i*(Math.PI/2))+e},easeInOutSine:function(t,e,a,i){return-a/2*(Math.cos(Math.PI*t/i)-1)+e},easeInExpo:function(t,e,a,i){return a*Math.pow(2,10*(t/i-1))+e},easeOutExpo:function(t,e,a,i){return a*(1-Math.pow(2,-10*t/i))+e},easeInOutExpo:function(t,e,a,i){return(t/=i/2)<1?a/2*Math.pow(2,10*(t-1))+e:(t--,a/2*(2-Math.pow(2,-10*t))+e)},easeInCirc:function(t,e,a,i){return t/=i,-a*(Math.sqrt(1-t*t)-1)+e},easeOutCirc:function(t,e,a,i){return t/=i,t--,a*Math.sqrt(1-t*t)+e},easeInOutCirc:function(t,e,a,i){return(t/=i/2)<1?-a/2*(Math.sqrt(1-t*t)-1)+e:(t-=2,a/2*(Math.sqrt(1-t*t)+1)+e)}},s=(t,e)=>({x:t*Math.cos(e*Math.PI/180),y:t*Math.sin(e*Math.PI/180)}),o=(t,e,a,i,r,n=!1)=>{r>0&&r<.3?r=0:r>359.999&&(r=359.999);const o=i+r*(2*+n-1),h=s(a,i),u=s(a,o),l=t+h.x,c=t+u.x;return["M",l,e+h.y,"A",a,a,0,+(r>180),+n,c,e+u.y].join(" ")};const h={value:"aria-valuenow",min:"aria-valuemin",max:"aria-valuemax"};class u extends t{static styles='\n\t:host(:not([hidden])) {\n\t\tdisplay: inline-block;\n\t}\n\n\t.circle {\n\t\tfill: none;\n\t\tstroke: #ddd;\n\t}\n\n\t.value {\n\t\tfill: none;\n\t\tstroke: #00E699;\n\t}\n\n\t.text {\n\t\tfont: 16px Arial, sans-serif;\n\t\ttext-anchor: middle;\n\t\tfill: #999;\n\t}\n\n\t:host([text-format="valueOnCircle"]) .text-value {\n\t\tfont-size: 12px;\n\t\tfill: #fff;\n\t}\n\n\t:host([text-format="valueOnCircle"]) .text-max {\n\t\tfont-size: 22px;\n\t\tfont-weight: bold;\n\t\tfill: #ddd;\n\t}\n\n\t:host([text-format="vertical"]) .text-separator {\n\t\tfont-family: Arial, sans-serif !important;\n\t}\n';value;min;max;startAngle;anticlockwise;unconstrained;indeterminateText;textFormat;animation;animationDuration;static props={value:!0,min:!0,max:!0,startAngle:{attribute:"start-angle"},anticlockwise:{type:Boolean},unconstrained:{type:Boolean},indeterminateText:{attribute:"indeterminate-text"},textFormat:{attribute:"text-format"},animation:!0,animationDuration:{attribute:"animation-duration"}};static get observedAttributes(){return Object.entries(this.props).map((([t,e])=>e&&"object"==typeof e&&e.attribute||t))}static defaults={startAngle:0,min:0,max:1,unconstrained:!1,indeterminateText:"?",anticlockwise:!1,textFormat:"horizontal",animation:"easeInOutCubic",animationDuration:600};constructor(t={}){let a;super(),Object.defineProperties(this,Object.keys(u.props).reduce(((t,e)=>(t[e]={get(){return this._get(e)},set(t){this.attr(e,t)}},t)),{})),a="valueOnCircle"===(t={...u.defaults,...t}).textFormat?16:8,this.graph={paper:e(this.shadowRoot,100,100),value:0},this.graph.paper.svg.setAttribute("class","base"),this.graph.paper.svg.setAttribute("part","base"),this.graph.paper.svg.setAttribute("role","progressbar"),this.graph.circle=this.graph.paper.element("circle").attr({class:"circle",part:"circle",cx:50,cy:50,r:50-a/2,"stroke-width":a}),this.graph.sector=this.graph.paper.element("path").attr({d:o(50,50,50-a/2,0,0),class:"value",part:"value","stroke-width":a}),this.graph.text=this.graph.paper.element("text",{class:"text",part:"text",x:50,y:50}),this._initText(),Object.keys(u.props).forEach((e=>e in t&&this._set(e,t[e])))}attributeUpdated(t,e){this._set(t,e)}#r={};attr(t){if(!["string","object"].includes(typeof t))throw new TypeError(`Wrong argument passed to attr. Expected object, got "${typeof t}"`);if("string"==typeof t){if(1===arguments.length)return this._get(t);t=[[t,arguments[1]]]}return Array.isArray(t)||(t=Object.keys(t).map((e=>[e,t[e]]))),t.forEach((([t,e])=>this._set(t,e))),this}_get(t){return this._flushBatch(),this.#r[t]}_set(t,e){if(void 0===(e=this._formatValue(t,e)))throw new TypeError(`Failed to set the ${t} property on CircleProgress: The provided value is non-finite.`);this._scheduleUpdate(t,e)}#n=null;updateComplete=null;_scheduleUpdate(t,e){this.#n||(this.#n={},this.updateComplete=Promise.resolve().then((()=>this._flushBatch()))),this.#n[t]=e}_flushBatch(){if(!this.#n)return;const t=this.#n;this.#n=null;let e=t.min??this.#r.min,a=t.max??this.#r.max;"min"in t&&t.min>=a&&(e=t.min=a),"max"in t&&t.max<=e&&(a=t.max=e),"value"in t&&!(t.unconstrained??this.#r.unconstrained)&&(null!=e&&t.value<e&&(t.value=e),null!=a&&t.value>a&&(t.value=a));for(const[e,a]of Object.entries(t))if(this.#r[e]!==a){if(this.#r[e]=a,e in h&&(void 0!==a?this.graph.paper.svg.setAttribute(h[e],a):this.graph.paper.svg.removeAttribute(h[e])),["min","max","unconstrained"].includes(e)&&(this.value>this.max||this.value<this.min)&&(this.value=Math.min(this.max,Math.max(this.min,this.value))),"textFormat"===e){this._initText();const t="valueOnCircle"===a?16:8;this.graph.sector.attr("stroke-width",t),this.graph.circle.attr("stroke-width",t)}this.reflectPropToAttribute(e)}this.updateGraph()}_formatValue(t,e){switch(t){case"value":case"min":case"max":e=Number(e),Number.isFinite(e)||(e=void 0);break;case"startAngle":e=Number(e),e=Number.isFinite(e)?Math.max(0,Math.min(360,e)):void 0;break;case"anticlockwise":case"unconstrained":e=!!e;break;case"indeterminateText":e=String(e);break;case"textFormat":if("function"!=typeof e&&!["valueOnCircle","horizontal","vertical","percent","value","none"].includes(e))throw new Error(`Failed to set the "textFormat" property on CircleProgress: the provided value "${e}" is not a legal textFormat identifier.`);break;case"animation":if("string"!=typeof e&&"function"!=typeof e)throw new TypeError(`Failed to set "animation" property on CircleProgress: the value must be either string or function, ${typeof e} passed.`);if("string"==typeof e&&"none"!==e&&!n[e])throw new Error(`Failed to set "animation" on CircleProgress: the provided value ${e} is not a legal easing function name.`)}return e}_valueToAngle(t=this.value){return Math.min(360,Math.max(0,(t-this.min)/(this.max-this.min)*360))}_isIndeterminate(){return["value","max","min"].some((t=>"number"!=typeof this[t]))}_positionValueText(t,e){const a=s(e,t);this.graph.textVal.attr({x:50+a.x,y:50+a.y})}_initText(){const t=this.textFormat;switch(this.graph.text.content(""),"string"==typeof t&&["valueOnCircle","horizontal","vertical"].includes(t)&&(this.graph.textVal=this.graph.paper.element("tspan",{class:"text-value",part:"text-value"},"",this.graph.text),["horizontal","vertical"].includes(t)&&(this.graph.textSeparator=this.graph.paper.element("tspan",{class:"text-separator",part:"text-separator"},"",this.graph.text)),this.graph.textMax=this.graph.paper.element("tspan",{class:"text-max",part:"text-max"},"",this.graph.text)),t){case"valueOnCircle":this.graph.textVal.attr({x:0,y:0,dy:"0.4em"}),this.graph.textMax.attr({x:50,y:50,dy:"0.4em"});break;case"horizontal":this.graph.textSeparator.content("/");break;case"vertical":this.graph.textVal.attr({x:50,dy:"-0.25em"}),this.graph.textSeparator.attr({x:50,dy:"0.1em"}).content("___"),this.graph.textMax.attr({x:50,dy:"1.2em"})}this.graph.text.attr("dy","vertical"===t?"":"0.4em")}#s=null;updateGraph(){const t=this.startAngle-90,e=this.getRadius();if(this.#s?.cancel(),this._isIndeterminate())this._updateText(this.value,t,e);else{const a=!this.anticlockwise;let i=this._valueToAngle();this.graph.circle.attr("r",e),"none"!==this.animation&&this.value!==this.graph.value?this.#s=function(t,e,a,i,r){const s="string"==typeof t?n[t]:t;let o,h;const u=function(t){o||(o=t),t-=o,t=Math.min(t,i);const n=s(t,e,a,i);r(n),t<i?h=requestAnimationFrame(u):r(e+a)};return h=requestAnimationFrame(u),{cancel:()=>{cancelAnimationFrame(h)}}}(this.animation,this.graph.value,this.value-this.graph.value,this.animationDuration,(r=>{i=this._valueToAngle(r),this.graph.sector.attr("d",o(50,50,e,t,i,a)),this._updateText(r===this.value?r:Math.round(r),(2*t+i)/2,e)})):(this.graph.sector.attr("d",o(50,50,e,t,i,a)),this._updateText(this.value,(2*t+i)/2,e)),this.graph.value=this.value}}_updateText(t,e,a){if("function"!=typeof this.textFormat)switch(this.textFormat){case"value":this.graph.text.el.textContent=void 0!==t?t:this.indeterminateText;break;case"percent":this.graph.text.el.textContent=(void 0!==t&&null!=this.max?Math.round(t/this.max*100):this.indeterminateText)+"%";break;case"none":this.graph.text.el.textContent="";break;default:this.graph.textVal.el.textContent=void 0!==t?t:this.indeterminateText,this.graph.textMax.el.textContent=void 0!==this.max?this.max:this.indeterminateText,"valueOnCircle"===this.textFormat&&this._positionValueText(e,a)}else this.graph.text.content(this.textFormat(t,this.max))}getRadius(){return 50-Math.max(this._getStrokeWidth(this.graph.circle.el),this._getStrokeWidth(this.graph.sector.el))/2}_getStrokeWidth(t){return Number.parseFloat(this.ownerDocument.defaultView?.getComputedStyle(t)["stroke-width"]||0)}}customElements.define("circle-progress",u);export{u as default};
//# sourceMappingURL=circle-progress.min.js.map