@zumer/orbit 1.2.2 → 1.4.3

package/dist/orbit.min.js

@@ -1,22 +1,22 @@
-(()=>{var H=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+(()=>{var f=class extends HTMLElement{constructor(){super(),this.commonProperties={orbitRadius:0,arcHeight:0,realRadius:0,arcAngle:0,shape:"none",arcHeightPercentage:0,orbitNumber:1,size:1,strokeWidth:1}}getCommonAttributes(t){let e=parseFloat(getComputedStyle(t).getPropertyValue("r")||0),r=parseFloat(getComputedStyle(t).getPropertyValue("--o-orbit-number")||1),n=parseFloat(getComputedStyle(t).getPropertyValue("--o-size-ratio")||1),a=parseFloat(getComputedStyle(t).getPropertyValue("--o-stroke-width")||1),i=t.getAttribute("shape")||"none",l=e/r*n-a+.3,s=l/2*100/e/2,o=0;t.classList.contains("outer-orbit")?o=s:t.classList.contains("quarter-outer-orbit")?o=s*-.5:t.classList.contains("inner-orbit")?o=s*-1:t.classList.contains("quarter-inner-orbit")&&(o=s*.5);let h=50+o;return{orbitRadius:e,arcHeight:l,realRadius:h,arcAngle:0,shape:i,arcHeightPercentage:s,orbitNumber:r,size:n,strokeWidth:a}}getProgressAngle(t,e,r=100){return e/r*t}getControlPoint(t,e,r,n,a="clockwise"){let i=(t+r)/2,l=(e+n)/2,s=r-t,o=n-e;return a==="clockwise"?{xc:i+o*.4,yc:l-s*.4}:{xc:i-o*.4,yc:l+s*.4}}arcPoint(t,e,r=0,n=0){let a=t+r,i=e+n*Math.PI/180;return{x:50+a*Math.cos(i),y:50+a*Math.sin(i)}}calculateCommonArcParameters(t,e,r,n,a,i,l,s=0){let o=Math.PI/2,h=t*Math.PI/180,c=e+r,g=e-r!==0?e-r:e,d=(s+i*1.25)/n/c,$=(s+i*1.25)/n/g,u=d-o,A=h-d-o,y=$-o,p=h-$-o,x=this.arcPoint(c,u),v=this.arcPoint(c,A),S=this.arcPoint(g,y),k=this.arcPoint(g,p),w=t<=180?0:1;return{upperArcStart:x,upperArcEnd:v,innerArcStart:S,innerArcEnd:k,largeArcFlag:w,bigRadius:c,smallRadius:g,radius:e,upperAngleStart:u,upperAngleEnd:A,innerAngleStart:y,innerAngleEnd:p}}generatePathData(t,e,r,n){let a="";switch(t){case"rounded":a=this.generateRoundedPath(e,r,n);break;case"circle":case"circle-a":case"bullet":a=this.generateCirclePath(e,t);break;case"circle-b":a=this.generateCircleBPath(e,r,n);break;case"arrow":a=this.generateArrowPath(e,n);break;case"backslash":case"slash":a=this.generateSlashPath(e,t,n);break;case"zigzag":a=this.generateZigzagPath(e,r,n);break;default:a=this.generateDefaultPath(e)}return a}generateRoundedPath(t,e,r){let{upperArcStart:n,upperArcEnd:a,innerArcStart:i,innerArcEnd:l,bigRadius:s,smallRadius:o,largeArcFlag:h}=t,c=e<10?5:e<5?2.5:10,g=this.arcPoint(s,t.upperAngleStart,0,c/r),d=this.arcPoint(s,t.upperAngleEnd,0,-c/r),$=this.arcPoint(o,t.innerAngleStart,0,c/r),u=this.arcPoint(o,t.innerAngleEnd,0,-c/r),A=this.arcPoint(s,t.upperAngleStart,-(c/2)/r,0),y=this.arcPoint(s,t.upperAngleEnd,-(c/2)/r,0),p=this.arcPoint(o,t.innerAngleStart,c/2/r,0),x=this.arcPoint(o,t.innerAngleEnd,c/2/r,0),v=this.getControlPoint(d.x,d.y,y.x,y.y),S=this.getControlPoint(x.x,x.y,u.x,u.y),k=this.getControlPoint($.x,$.y,p.x,p.y),w=this.getControlPoint(A.x,A.y,g.x,g.y),P=`M ${g.x},${g.y} A ${s},${s} 0 ${h} 1 ${d.x},${d.y}`;return P+=`Q ${v.xc}, ${v.yc} ${y.x} ${y.y} `,P+=`L ${y.x} ${y.y}`,P+=`L ${x.x} ${x.y}`,P+=`Q ${S.xc}, ${S.yc} ${u.x} ${u.y} `,P+=`A ${o},${o} 0 ${h} 0 ${$.x},${$.y}`,P+=`Q ${k.xc}, ${k.yc} ${p.x} ${p.y} `,P+=`L ${p.x} ${p.y}`,P+=`L ${A.x} ${A.y}`,P+=` Q ${w.xc}, ${w.yc} ${g.x} ${g.y} `,P+=" Z",P}generateCirclePath(t,e){let{upperArcStart:r,upperArcEnd:n,innerArcStart:a,innerArcEnd:i,bigRadius:l,smallRadius:s,largeArcFlag:o}=t,h=`M ${r.x},${r.y} A ${l},${l} 0 ${o} 1 ${n.x},${n.y}`;return h+=` A 1,1 0 0 1 ${i.x},${i.y} `,h+=` A ${s},${s} 0 ${o} 0 ${a.x},${a.y}`,h+=` A 1,1 0 0 ${e==="circle"||e==="circle-a"?1:0} ${r.x},${r.y} `,h+=" Z",h}generateCircleBPath(t,e,r){let{upperAngleStart:n,upperAngleEnd:a,innerAngleStart:i,innerAngleEnd:l,bigRadius:s,smallRadius:o,largeArcFlag:h}=t,c=e*1.36,g=this.arcPoint(s,n,0,c/r),d=this.arcPoint(s,a,0,-c/r),$=this.arcPoint(o,i,0,c/r),u=this.arcPoint(o,l,0,-c/r),A=`M ${g.x},${g.y} A ${s},${s} 0 ${h} 1 ${d.x},${d.y}`;return A+=` A 1,1 0 0 1 ${u.x},${u.y} `,A+=` A ${o},${o} 0 ${h} 0 ${$.x},${$.y}`,A+=` A 1,1 0 0 1 ${g.x},${g.y} `,A+=" Z",A}generateArrowPath(t,e){let{upperArcStart:r,upperArcEnd:n,innerArcStart:a,innerArcEnd:i,bigRadius:l,smallRadius:s,largeArcFlag:o,radius:h}=t,c=this.arcPoint(h,t.upperAngleEnd,0,24/e/2),g=this.arcPoint(h,t.upperAngleStart,0,24/e/2),d=`M ${r.x},${r.y} A ${l},${l} 0 ${o} 1 ${n.x},${n.y}`;return d+=`L ${c.x} ${c.y}`,d+=`L ${i.x} ${i.y}`,d+=`A ${s},${s} 0 ${o} 0 ${a.x}, ${a.y}`,d+=`L ${g.x} ${g.y}`,d+="Z",d}generateSlashPath(t,e,r){let{upperAngleStart:n,upperAngleEnd:a,innerAngleStart:i,innerAngleEnd:l,bigRadius:s,smallRadius:o,largeArcFlag:h}=t,c=this.arcPoint(s,n,0,e==="backslash"?0:24/r/2),g=this.arcPoint(s,a,0,e==="backslash"?0:24/r/2),d=this.arcPoint(o,i,0,e==="backslash"?24/r/2:0),$=this.arcPoint(o,l,0,e==="backslash"?24/r/2:0),u=`M ${c.x},${c.y} A ${s},${s} 0 ${h} 1 ${g.x},${g.y}`;return u+=`L ${$.x} ${$.y}`,u+=`A ${o},${o} 0 ${h} 0 ${d.x}, ${d.y}`,u+="Z",u}generateZigzagPath(t,e,r){let{upperArcStart:n,upperArcEnd:a,innerArcStart:i,innerArcEnd:l,bigRadius:s,smallRadius:o,largeArcFlag:h,radius:c}=t,g=this.arcPoint(c,t.upperAngleStart,-e/r/2,3),d=this.arcPoint(c,t.upperAngleStart,0/r/2,0),$=this.arcPoint(c,t.upperAngleStart,e/r/2,3),u=this.arcPoint(c,t.innerAngleEnd,e/r/2,3),A=this.arcPoint(c,t.innerAngleEnd,0/r/2,0),y=this.arcPoint(c,t.innerAngleEnd,-e/r/2,3),p=`M ${n.x},${n.y} A ${s},${s} 0 ${h} 1 ${a.x},${a.y}`;return p+=`L ${u.x} ${u.y}`,p+=`L ${A.x} ${A.y}`,p+=`L ${y.x} ${y.y}`,p+=`L ${l.x} ${l.y}`,p+=`A ${o},${o} 0 ${h} 0 ${i.x}, ${i.y}`,p+=`L ${g.x} ${g.y}`,p+=`L ${d.x} ${d.y}`,p+=`L ${$.x} ${$.y}`,p+="Z",p}generateDefaultPath(t){let{upperArcStart:e,upperArcEnd:r,innerArcStart:n,innerArcEnd:a,bigRadius:i,smallRadius:l,largeArcFlag:s}=t,o=`M ${e.x},${e.y} A ${i},${i} 0 ${s} 1 ${r.x},${r.y}`;return o+=`L ${a.x} ${a.y}`,o+=`A ${l},${l} 0 ${s} 0 ${n.x}, ${n.y}`,o+="Z",o}};var m=class extends f{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
       <style>
         :host {
-        --o-fill: var(--o-gray-light);
-        --o-stroke: var(--o-fill);
-        --o-stroke-width: 1;
-        --o-back-fill: transparent;
-        --o-back-stroke: none;
-        --o-back-stroke-width: 1;
-      }
-      :host(:hover){
-        --o-fill: var(--o-gray-light);
-        --o-stroke: var(--o-fill);
-        --o-stroke-width: 1;
-        --o-back-fill: transparent;
-        --o-back-stroke: none;
-        --o-back-stroke-width: 1;
-      }
-      svg {
+          --o-fill: var(--o-gray-light);
+          --o-stroke: var(--o-fill);
+          --o-stroke-width: 1;
+          --o-back-fill: transparent;
+          --o-back-stroke: none;
+          --o-back-stroke-width: 1;
+        }
+        :host(:hover) {
+          --o-fill: var(--o-gray-light);
+          --o-stroke: var(--o-fill);
+          --o-stroke-width: 1;
+          --o-back-fill: transparent;
+          --o-back-stroke: none;
+          --o-back-stroke-width: 1;
+        }
+        svg {
           width: 100%;
           height: 100%;
           overflow: visible;
@@ -42,50 +42,49 @@
         <path class="progress-bg" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
         <path class="progress-bar" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
       </svg>
-    `}connectedCallback(){this.update(),this.observer=new MutationObserver(r=>{this.observer.disconnect(),r.forEach(n=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let r=this.shadowRoot.querySelector(".progress-bg"),n=this.shadowRoot.querySelector(".progress-bar");this.updateArc(r,!0),this.updateArc(n,!1)}updateArc(r,n){let{d:h}=this.calculateArcParameters(n);r.setAttribute("d",h)}getAttributes(){let r=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),n=parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number")),h=parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio")),o=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),s=this.getAttribute("shape")||"none",d=parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width")),c=(r/n*h-d+.3)/2*100/r/2,l=o,t=parseFloat(this.getAttribute("max"))||100,b;this.classList.contains("outer-orbit")?b=c:this.classList.contains("quarter-outer-orbit")?b=c*-.5:this.classList.contains("inner-orbit")?b=c*-1:this.classList.contains("quarter-inner-orbit")?b=c*.5:b=0;let A=50+b;return{orbitRadius:r,progress:e,strokeWidth:d,realRadius:A,maxAngle:l,maxValue:t,shape:s,arcHeightPercentage:c,orbitNumber:n}}getProgressAngle(r){let{maxAngle:n,progress:h,maxValue:o}=this.getAttributes();return r?(o-1e-5)/o*n:h/o*n}calculateArcParameters(r){let n=this.getProgressAngle(r),{realRadius:h,arcHeightPercentage:o,orbitNumber:e,shape:s,strokeWidth:d}=this.getAttributes(),g=h,c,l,t,b,A,C,a,i,v,O,E,M,k,F,u=Math.PI/2,w=d,R=n*Math.PI/180,y=g+o,f=g-o!==0?g-o:g,p=w*2/e/2/y,$=w*2/e/2/f,P=p-u,x=R-p-u,S=$-u,L=R-$-u;c=50+y*Math.cos(P),l=50+y*Math.sin(P),t=50+y*Math.cos(x),b=50+y*Math.sin(x),E=50+y*Math.cos(x+3*Math.PI/180),k=50+y*Math.sin(x+3*Math.PI/180),C=50+f*Math.cos(S),a=50+f*Math.sin(S),i=50+f*Math.cos(L),v=50+f*Math.sin(L),M=50+f*Math.cos(L+3*Math.PI/180),F=50+f*Math.sin(L+3*Math.PI/180),A=n<=180?0:1;let m=`M ${c},${l} A ${y},${y} 0 ${A} 1 ${t},${b}`;return s==="arrow"&&(m+=`L ${(E+M)/2}  ${(k+F)/2} `),(s==="circle"||s==="bullet")&&(m+=`A ${o}, ${o} 0 0 1 ${i},${v} `),m+=`L ${i} ${v}`,m+=`A ${f},${f} 0 ${A} 0 ${C},${a}`,s==="circle"&&(m+=`A ${o}, ${o} 0 0 1 ${c},${l} `),s==="bullet"&&(m+=`A ${o}, ${o} 0 0 0 ${c},${l} `),s==="arrow"&&(m+=`L ${C+3} ${(l+a)/2}  `),m+="Z",{d:m}}};var T=document.createElement("template");T.innerHTML=`
-   <style>
-      :host {
-        --o-fill: var(--o-gray-light);
-        --o-stroke: var(--o-fill);
-        --o-stroke-width: 1;
-        --o-color: currentcolor;
-      }
-      :host(:hover){
-        --o-fill: var(--o-gray-light);
-        --o-stroke: var(--o-fill);
-        --o-stroke-width: 1;
-        --o-color: currentcolor;
-      }
-      svg {
-        width: 100%;
-        height: 100%;
-        overflow: visible;
-        pointer-events: none;
-      }
-      svg * {
-        pointer-events: visiblePainted;
-      }
-      #orbitShape {
-        fill: var(--o-fill);
-        stroke: var(--o-stroke);
-        stroke-width: var(--o-stroke-width);
-        transition: fill 0.25s, stroke 0.25s;
-       
-      }
-      text {
-       fill: var(--o-color);
-      }
-      #orbitPath {
-        fill: transparent;
-        stroke: none;
-        stroke-width: 0;
-      }
-   </style>
-   <svg viewBox="0 0 100 100">
-     <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
-     <path id="orbitPath"  shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke" ></path>
-     <text>
-        <textPath href="#orbitPath"  alignment-baseline="middle"></textPath>
-      </text>
-   </svg>
- `;var q=class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(T.content.cloneNode(!0))}connectedCallback(){this.update(),this.observer=new MutationObserver(r=>{this.observer.disconnect(),r.forEach(n=>{this.update()}),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0}),this.textObserver=new MutationObserver(()=>{let r=this.shadowRoot.querySelector("textPath");r.textContent=this.textContent}),this.textObserver.observe(this,{characterData:!0,subtree:!0})}disconnectedCallback(){this.observer.disconnect(),this.textObserver.disconnect()}update(){let{length:r,fontSize:n,textAnchor:h,fitRange:o}=this.getAttributes(),e=this.shadowRoot.getElementById("orbitPath"),s=this.shadowRoot.getElementById("orbitShape"),d=this.shadowRoot.querySelector("text"),g=this.shadowRoot.querySelector("textPath"),{dShape:c}=this.calculateArcParameters(),{dPath:l}=this.calculateTextArcParameters();s.setAttribute("d",c),e.setAttribute("d",l),h==="start"?(g.setAttribute("startOffset","0%"),g.setAttribute("text-anchor","start")):h==="middle"?(g.setAttribute("startOffset","50%"),g.setAttribute("text-anchor","middle")):h==="end"&&(g.setAttribute("startOffset","100%"),g.setAttribute("text-anchor","end")),o&&g.parentElement.setAttribute("textLength",e.getTotalLength()),d.style.fontSize=`calc(${n} * (100 / (${r}) * (12 /  var(--o-orbit-number) ))`,g.textContent=this.textContent}getAttributes(){let r,n,h,o,e,s=parseFloat(getComputedStyle(this).getPropertyValue("--o-stroke-width")),d=parseFloat(getComputedStyle(this).getPropertyValue("r")||0),g=this.getAttribute("shape")||"none",c=this.hasAttribute("flip")||this.classList.contains("flip"),l=this.hasAttribute("fit-range")||this.classList.contains("fit-range")||!1,t=parseFloat(getComputedStyle(this).getPropertyValue("--o-force")),b=this.getAttribute("text-anchor")||"middle",A=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),C=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),a=parseFloat(this.getAttribute("value"));if(a){n=this.getProgressAngle(C,a);let M=this.previousElementSibling,k=M?parseFloat(getComputedStyle(M).getPropertyValue("--o_stack")):0;this.style.setProperty("--o_stack",k+n),k>=0&&c&&this.style.setProperty("--o-angle-composite",parseFloat(k)+"deg"),k>0&&!c&&this.style.setProperty("--o-angle-composite",parseFloat(k)+"deg")}else r=getComputedStyle(this).getPropertyValue("--o-angle"),n=B(r);h=parseFloat(getComputedStyle(this).getPropertyValue("--o-orbit-number")),o=parseFloat(getComputedStyle(this).getPropertyValue("--o-size-ratio"));let i=d/h*o-s+.3,v=i/2*100/d/2,O=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));this.classList.contains("outer-orbit")?e=v:this.classList.contains("quarter-outer-orbit")?e=v*-.5:this.classList.contains("inner-orbit")?e=v*-1:this.classList.contains("quarter-inner-orbit")?e=v*.5:e=0;let E=50+e;return{orbitRadius:d,arcHeight:i,realRadius:E,gap:O,arcAngle:n,shape:g,length:t,fontSize:A,flip:c,fitRange:l,textAnchor:b,arcHeightPercentage:v,innerOuter:e,orbitNumber:h,size:o,strokeWidth:s}}getProgressAngle(r,n){let h=n,o=parseFloat(this.getAttribute("max"))||100;return h/o*r}getControlPoint(r,n,h,o,e="clockwise"){let s=(r+h)/2,d=(n+o)/2,g=h-r,c=o-n,l,t;return e==="clockwise"?(l=s+c*.4,t=d-g*.4):(l=s-c*.4,t=d+g*.4),{xc:l,yc:t}}calculateArcParameters(){let{arcAngle:r,realRadius:n,gap:h,arcHeightPercentage:o,orbitNumber:e,shape:s,strokeWidth:d,arcHeight:g}=this.getAttributes(),c=n,l,t,b=Math.PI/2,A=d,C=r*Math.PI/180,a=c+o,i=c-o!==0?c-o:c,v=(h+A*1.25)/e/a,O=(h+A*1.25)/e/i,E=v-b,M=C-v-b,k=O-b,F=C-O-b;function u(p,$,P=0,x=0){let S=p+P,L=$+x*Math.PI/180;return{x:50+S*Math.cos(L),y:50+S*Math.sin(L)}}let w=u(a,E),R=u(a,M),y=u(i,k),f=u(i,F);if(l=r<=180?0:1,s==="rounded"){let p=g<10?5:g<5?2.5:10,$=u(a,E,0,p/e),P=u(a,M,0,-p/e),x=u(i,k,0,p/e),S=u(i,F,0,-p/e),L=u(a,E,-(p/2)/e,0),m=u(a,M,-(p/2)/e,0),V=u(i,k,p/2/e,0),z=u(i,F,p/2/e,0),X=this.getControlPoint(P.x,P.y,m.x,m.y),Y=this.getControlPoint(z.x,z.y,S.x,S.y),Q=this.getControlPoint(x.x,x.y,V.x,V.y),Z=this.getControlPoint(L.x,L.y,$.x,$.y);t=`M ${$.x},${$.y} A ${a},${a} 0 ${l} 1 ${P.x},${P.y}`,t+=`Q ${X.xc}, ${X.yc} ${m.x}  ${m.y} `,t+=`L ${m.x} ${m.y}`,t+=`L ${z.x} ${z.y}`,t+=`Q ${Y.xc}, ${Y.yc} ${S.x} ${S.y} `,t+=`A ${i},${i} 0 ${l} 0 ${x.x},${x.y}`,t+=`Q ${Q.xc}, ${Q.yc} ${V.x}  ${V.y} `,t+=`L ${V.x} ${V.y}`,t+=`L ${L.x} ${L.y}`,t+=` Q ${Z.xc}, ${Z.yc} ${$.x} ${$.y} `,t+=" Z"}else if(s==="circle"||s==="bullet")t=`M ${w.x},${w.y} A ${a},${a} 0 ${l} 1 ${R.x},${R.y}`,t+=` A 1,1 0 0 1 ${f.x},${f.y} `,t+=` A ${i},${i} 0 ${l} 0 ${y.x},${y.y}`,t+=` A 1,1 0 0 ${s==="circle"?1:0} ${w.x},${w.y} `,t+=" Z";else if(s==="circle1"){let p=g*1.36,$=u(a,E,0,p/e),P=u(a,M,0,-(p/e)),x=u(i,k,0,p/e),S=u(i,F,0,-(p/e));t=`M ${$.x},${$.y} A ${a},${a} 0 ${l} 1 ${P.x},${P.y}`,t+=` A 1,1 0 0 1 ${S.x},${S.y} `,t+=` A ${i},${i} 0 ${l} 0 ${x.x},${x.y}`,t+=` A 1,1 0 0 1 ${$.x},${$.y} `,t+=" Z"}else if(s==="arrow"){let p=u(c,M,0,24/e/2),$=u(c,E,0,24/e/2);t=`M ${w.x},${w.y} A ${a},${a} 0 ${l} 1 ${R.x},${R.y}`,t+=`L ${p.x} ${p.y}`,t+=`L ${f.x} ${f.y}`,t+=`A ${i},${i} 0 ${l} 0 ${y.x}, ${y.y}`,t+=`L ${$.x} ${$.y}  `,t+="Z"}else if(s==="backslash"||s==="slash"){let p=u(a,E,0,s==="backslash"?0:24/e/2),$=u(a,M,0,s==="backslash"?0:24/e/2),P=u(i,k,0,s==="backslash"?24/e/2:0),x=u(i,F,0,s==="backslash"?24/e/2:0);t=`M ${p.x},${p.y} A ${a},${a} 0 ${l} 1 ${$.x},${$.y}`,t+=`L ${x.x} ${x.y}`,t+=`A ${i},${i} 0 ${l} 0 ${P.x}, ${P.y}`,t+="Z"}else s==="nr"?(t=`M ${w.x},${w.y} A ${a},${a} 0 ${l} 1 ${R.x},${R.y}`,t+=`L ${f.x} ${f.y}`,t+=`A ${i},${i} 0 ${l} 0 ${y.x}, ${y.y}`,t+="Z"):(t=`M ${w.x},${w.y} A ${a},${a} 0 ${l} 1 ${R.x},${R.y}`,t+=`L ${f.x} ${f.y}`,t+=`A ${i},${i} 0 ${l} 0 ${y.x}, ${y.y}`,t+="Z");return{dShape:t}}calculateTextArcParameters(){let{arcAngle:r,realRadius:n,gap:h,flip:o}=this.getAttributes(),e=n,s,d,g,c,l,t,b,A=h*.5;b=o?0:1,l=r<=180?0:1;let C=50+e*Math.cos((-90+A)*(Math.PI/180)),a=50+e*Math.sin((-90+A)*(Math.PI/180)),i=50+e*Math.cos((r-90-A)*Math.PI/180),v=50+e*Math.sin((r-90-A)*Math.PI/180);return o?(s=i,d=v,g=C,c=a):(s=C,d=a,g=i,c=v),t=`M ${s},${d} A ${e},${e} 0 ${l} ${b} ${g},${c}`,{dPath:t}}};function B(I){let r=I.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(r){let n=parseFloat(r[1]),h=parseInt(r[2])-parseInt(r[3]);if(!isNaN(n)&&!isNaN(h)&&h!==0)return n/h}}var N={};N={resize:I=>{let r=document.querySelector(I);if(!r){console.error(`Not found: ${I}`);return}new ResizeObserver(h=>{for(let o of h){let{width:e}=o.contentRect,s=r.querySelectorAll(".gravity-spot");s?s.forEach(d=>{let g=getComputedStyle(d).getPropertyValue("--o-force"),c=e/500;d.style.setProperty("--o-force-ratio",`${c}`)}):console.error("No gravity-spot found")}}).observe(r)}};customElements.get("o-progress")||customElements.define("o-progress",H);customElements.get("o-arc")||customElements.define("o-arc",q);window.Orbit=N;})();
+    `}connectedCallback(){this.update(),this.setupObserver()}setupObserver(){this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(()=>this.update()),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0})}update(){let t=this.shadowRoot.querySelector(".progress-bg"),e=this.shadowRoot.querySelector(".progress-bar");this.updateArc(t,!0),this.updateArc(e,!1)}updateArc(t,e){let{d:r}=this.calculateArcParameters(e);t.setAttribute("d",r)}getAttributes(){let t=super.getCommonAttributes(this),e=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),r=parseFloat(getComputedStyle(this).getPropertyValue("--o-progress")||this.getAttribute("value")||0),n=parseFloat(this.getAttribute("max"))||100;return{...t,range:e,progress:r,maxValue:n}}getProgressAngle(t){let{range:e,progress:r,maxValue:n}=this.getAttributes();return t?(n-1e-5)/n*e:r/n*e}calculateArcParameters(t){let{shape:e,realRadius:r,arcHeightPercentage:n,orbitNumber:a,strokeWidth:i,arcHeight:l}=this.getAttributes(),s=this.getProgressAngle(t),o=super.calculateCommonArcParameters(s,r,n,a,e,i,l);return{d:super.generatePathData(e,o,l,a)}}};var C=document.createElement("template");C.innerHTML=`
+  <style>
+    :host {
+      --o-fill: var(--o-gray-light);
+      --o-stroke: var(--o-fill);
+      --o-stroke-width: 1;
+      --o-color: currentcolor;
+    }
+    :host(:hover) {
+      --o-fill: var(--o-gray-light);
+      --o-stroke: var(--o-fill);
+      --o-stroke-width: 1;
+      --o-color: currentcolor;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+      pointer-events: none;
+    }
+    svg * {
+      pointer-events: visiblePainted;
+    }
+    #orbitShape {
+      fill: var(--o-fill);
+      stroke: var(--o-stroke);
+      stroke-width: var(--o-stroke-width);
+      transition: fill 0.25s, stroke 0.25s;
+    }
+    text {
+      fill: var(--o-color);
+    }
+    #orbitPath {
+      fill: transparent;
+      stroke: none;
+      stroke-width: 0;
+    }
+  </style>
+  <svg viewBox="0 0 100 100">
+    <path id="orbitShape" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
+    <path id="orbitPath" shape-rendering="geometricPrecision" vector-effect="non-scaling-stroke"></path>
+    <text>
+      <textPath href="#orbitPath" alignment-baseline="middle"></textPath>
+    </text>
+  </svg>
+`;var E=class extends f{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(C.content.cloneNode(!0))}connectedCallback(){this.update(),this.setupObservers()}disconnectedCallback(){this.observer?.disconnect(),this.textObserver?.disconnect()}setupObservers(){this.observer=new MutationObserver(t=>{this.observer.disconnect(),t.forEach(()=>this.update()),this.observer.observe(this,{attributes:!0,childList:!0})}),this.observer.observe(this,{attributes:!0,childList:!0}),this.textObserver=new MutationObserver(()=>{let t=this.shadowRoot.querySelector("textPath");t.textContent=this.textContent}),this.textObserver.observe(this,{characterData:!0,subtree:!0})}update(){let{length:t,fontSize:e,textAnchor:r,fitRange:n}=this.getAttributes(),a=this.shadowRoot.getElementById("orbitPath"),i=this.shadowRoot.getElementById("orbitShape"),l=this.shadowRoot.querySelector("text"),s=this.shadowRoot.querySelector("textPath"),{dShape:o}=this.calculateArcParameters(),{dPath:h}=this.calculateTextArcParameters();i.setAttribute("d",o),a.setAttribute("d",h),r==="start"?(s.setAttribute("startOffset","0%"),s.setAttribute("text-anchor","start")):r==="middle"?(s.setAttribute("startOffset","50%"),s.setAttribute("text-anchor","middle")):r==="end"&&(s.setAttribute("startOffset","100%"),s.setAttribute("text-anchor","end")),n&&s.parentElement.setAttribute("textLength",a.getTotalLength()),l.style.fontSize=`calc(${e} * (100 / (${t}) * (12 / var(--o-orbit-number)))`,s.textContent=this.textContent}getAttributes(){let t=super.getCommonAttributes(this),e,r=this.hasAttribute("flip")||this.classList.contains("flip"),n=this.hasAttribute("fit-range")||this.classList.contains("fit-range")||!1,a=parseFloat(getComputedStyle(this).getPropertyValue("--o-force")),i=this.getAttribute("text-anchor")||"middle",l=getComputedStyle(this).getPropertyValue("font-size")||getComputedStyle(this).getPropertyValue("--font-size"),s=parseFloat(getComputedStyle(this).getPropertyValue("--o-range")||360),o=parseFloat(this.getAttribute("value")),h=parseFloat(getComputedStyle(this).getPropertyValue("--o-gap"));if(o){e=super.getProgressAngle(s,o);let c=this.previousElementSibling,g=c?parseFloat(getComputedStyle(c).getPropertyValue("--o_stack")):0;this.style.setProperty("--o_stack",g+e),g>=0&&r&&this.style.setProperty("--o-angle-composite",parseFloat(g)+"deg"),g>0&&!r&&this.style.setProperty("--o-angle-composite",parseFloat(g)+"deg")}else{let c=getComputedStyle(this).getPropertyValue("--o-angle");e=this.calcularExpresionCSS(c)}return{...t,gap:h,arcAngle:e,flip:r,fitRange:n,length:a,fontSize:l,textAnchor:i}}calculateArcParameters(){let{arcAngle:t,realRadius:e,arcHeightPercentage:r,orbitNumber:n,shape:a,strokeWidth:i,arcHeight:l,gap:s}=this.getAttributes(),o=super.calculateCommonArcParameters(t,e,r,n,a,i,l,s);return{dShape:super.generatePathData(a,o,l,n)}}calculateTextArcParameters(){let{arcAngle:t,realRadius:e,gap:r,flip:n}=this.getAttributes(),a=r*.5,i=n?0:1,l=t<=180?0:1,s=50+e*Math.cos((-90+a)*(Math.PI/180)),o=50+e*Math.sin((-90+a)*(Math.PI/180)),h=50+e*Math.cos((t-90-a)*Math.PI/180),c=50+e*Math.sin((t-90-a)*Math.PI/180),[g,d,$,u]=n?[h,c,s,o]:[s,o,h,c];return{dPath:`M ${g},${d} A ${e},${e} 0 ${l} ${i} ${$},${u}`}}calcularExpresionCSS(t){let e=t.match(/calc\(\s*([\d.]+)deg\s*\/\s*\(\s*(\d+)\s*-\s*(\d+)\s*\)\s*\)/);if(e){let r=parseFloat(e[1]),n=parseInt(e[2])-parseInt(e[3]);if(!isNaN(r)&&!isNaN(n)&&n!==0)return r/n}return 0}};var R={};R={resize:b=>{let t=document.querySelector(b);if(!t){console.error(`Not found: ${b}`);return}new ResizeObserver(r=>{for(let n of r){let{width:a}=n.contentRect,i=t.querySelectorAll(".gravity-spot");i?i.forEach(l=>{let s=getComputedStyle(l).getPropertyValue("--o-force"),o=a/500;l.style.setProperty("--o-force-ratio",`${o}`)}):console.error("No gravity-spot found")}}).observe(t)}};customElements.get("o-progress")||customElements.define("o-progress",m);customElements.get("o-arc")||customElements.define("o-arc",E);window.Orbit=R;})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zumer/orbit",
-  "version": "1.2.2",
+  "version": "1.4.3",
   "description": "Orbit is a CSS framework for radial interfaces",
   "main": "./dist/orbit.js",
   "scripts": {