@zumer/orbit 0.4.1 → 0.5.0

package/dist/orbit.js

@@ -1,7 +1,7 @@
 
 /*
 * orbit
-* v.0.4.1
+* v.0.5.0
 * Author Juan Martin Muda - Zumerlab
 * License MIT
 **/
@@ -222,7 +222,7 @@
     }
   };
 
-  // src/js/orbit-slice.js
+  // src/js/orbit-arc.js
   var template = document.createElement("template");
   template.innerHTML = `
    <style>
@@ -238,23 +238,23 @@
        svg * {
           pointer-events: stroke;
         }
-       .slice {
-          stroke: var(--o-slice-color, var(--o-cyan-light));
+       .arc {
+          stroke: var(--o-arc-color, var(--o-cyan-light));
           stroke-width:  calc(var(--o-radius) / var(--o-orbit-number) * var(--o-size-ratio, 1));
           transition: stroke 0.3s;
         }
         
-        :host(:hover) .slice {
-          stroke: var(--o-hover-slice-color, var(--o-slice-color));
+        :host(:hover) .arc {
+          stroke: var(--o-hover-arc-color, var(--o-arc-color));
           
         }
    </style>
    <svg viewBox="0 0 100 100">
      <defs></defs>
-     <path class="slice" vector-effect="non-scaling-stroke" fill="transparent"></path>
+     <path class="arc" vector-effect="non-scaling-stroke" fill="transparent"></path>
    </svg>
  `;
-  var OrbitSlice = class extends HTMLElement {
+  var OrbitArc = class extends HTMLElement {
     constructor() {
       super();
       this.attachShadow({ mode: "open" });
@@ -281,17 +281,17 @@
         path.setAttribute("marker-end", "url(#head)");
         path.setAttribute("marker-start", "url(#tail)");
       }
-      const { realRadius, sliceColor, gap } = this.getAttributes();
+      const { realRadius, arcColor, gap } = this.getAttributes();
       const angle = this.calculateAngle();
       const { d } = this.calculateArcParameters(angle, realRadius, gap);
       path.setAttribute("d", d);
-      path.setAttribute("stroke", sliceColor);
+      path.setAttribute("stroke", arcColor);
     }
     getAttributes() {
       const orbitRadius = parseFloat(getComputedStyle(this).getPropertyValue("r") || 0);
       const gap = parseFloat(getComputedStyle(this).getPropertyValue("--o-gap") || 1e-3);
       const shape = this.getAttribute("shape") || "none";
-      const sliceColor = this.getAttribute("slice-color");
+      const arcColor = this.getAttribute("arc-color");
       const rawAngle = getComputedStyle(this).getPropertyValue("--o-angle");
       const strokeWidth = parseFloat(getComputedStyle(this).getPropertyValue("stroke-width") || 1);
       const strokeWithPercentage = strokeWidth / 2 * 100 / orbitRadius / 2;
@@ -309,20 +309,20 @@
         innerOuter = strokeWithPercentage * 0.75;
       }
       const realRadius = 50 + innerOuter - strokeWithPercentage;
-      const sliceAngle = calcularExpresionCSS(rawAngle);
+      const arcAngle = calcularExpresionCSS(rawAngle);
       return {
         orbitRadius,
         strokeWidth,
         realRadius,
-        sliceColor,
+        arcColor,
         gap,
-        sliceAngle,
+        arcAngle,
         shape
       };
     }
     calculateAngle() {
-      const { sliceAngle, gap } = this.getAttributes();
-      return sliceAngle - gap;
+      const { arcAngle, gap } = this.getAttributes();
+      return arcAngle - gap;
     }
     calculateArcParameters(angle, realRadius) {
       const radiusX = realRadius / 1;
@@ -579,7 +579,7 @@
 
   // src/orbit.js
   customElements.define("o-progress", OrbitProgress);
-  customElements.define("o-slice", OrbitSlice);
+  customElements.define("o-arc", OrbitArc);
   customElements.define("o-text", OrbitText);
   window.Orbit = Orbit;
 })();