@m3e/loading-indicator 1.0.2 → 1.0.3

package/dist/custom-elements.json

@@ -69,30 +69,6 @@
               "privacy": "private",
               "readonly": true
             },
-            {
-              "kind": "field",
-              "name": "#shapes",
-              "privacy": "private",
-              "type": {
-                "text": "Array<keyof typeof ShapePolygon>"
-              },
-              "default": "[ \"soft-burst\", \"7-sided-cookie\", \"pentagon\", \"pill\", \"very-sunny\", \"4-sided-cookie\", \"oval\", ]"
-            },
-            {
-              "kind": "field",
-              "name": "#shapeIndex",
-              "privacy": "private",
-              "type": {
-                "text": "number"
-              },
-              "default": "1"
-            },
-            {
-              "kind": "field",
-              "name": "#animationIterationHandler",
-              "privacy": "private",
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "variant",

package/dist/index.js

@@ -30,19 +30,6 @@ function __decorate(decorators, target, key, desc) {
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
 
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-}
-
-function __classPrivateFieldSet(receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-}
-
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -110,7 +97,6 @@ const ShapePolygon = {
     "very-sunny": unsafeCSS("49.23% 1.00%,48.66% 1.00%,48.11% 1.00%,47.56% 1.00%,47.01% 1.00%,46.49% 1.00%,45.98% 1.00%,45.48% 1.28%,45.01% 1.60%,44.56% 1.95%,44.14% 2.33%,43.74% 2.74%,43.37% 3.17%,43.04% 3.63%,42.73% 4.11%,42.73% 4.11%,42.43% 4.61%,42.13% 5.10%,41.84% 5.58%,41.55% 6.07%,41.25% 6.57%,40.96% 7.05%,40.67% 7.54%,40.38% 8.03%,40.08% 8.52%,39.78% 9.01%,39.50% 9.50%,39.20% 9.99%,38.90% 10.48%,38.58% 10.95%,38.23% 11.40%,37.85% 11.82%,37.44% 12.22%,37.00% 12.59%,36.54% 12.92%,36.06% 13.23%,35.57% 13.50%,35.04% 13.75%,34.51% 13.95%,33.96% 14.12%,33.42% 14.25%,32.85% 14.35%,32.28% 14.39%,31.71% 14.42%,31.14% 14.39%,30.58% 14.33%,30.01% 14.24%,29.46% 14.11%,28.90% 13.97%,28.35% 13.82%,27.80% 13.69%,27.24% 13.55%,26.70% 13.41%,26.14% 13.28%,25.58% 13.14%,25.03% 12.99%,24.47% 12.86%,23.92% 12.72%,23.37% 12.58%,22.81% 12.43%,22.25% 12.32%,21.70% 12.22%,21.13% 12.16%,20.56% 12.15%,19.99% 12.17%,19.42% 12.23%,18.86% 12.33%,18.30% 12.47%,17.77% 12.65%,17.23% 12.86%,16.72% 13.11%,16.22% 13.38%,15.75% 13.71%,15.30% 14.05%,14.87% 14.43%,14.45% 14.82%,14.08% 15.25%,13.73% 15.71%,13.42% 16.18%,13.13% 16.67%,12.88% 17.19%,12.66% 17.72%,12.48% 18.25%,12.34% 18.81%,12.24% 19.37%,12.17% 19.94%,12.15% 20.51%,12.16% 21.08%,12.21% 21.65%,12.30% 22.21%,12.42% 22.77%,12.56% 23.33%,12.71% 23.87%,12.84% 24.43%,12.98% 24.98%,13.12% 25.53%,13.26% 26.09%,13.40% 26.64%,13.54% 27.20%,13.68% 27.76%,13.81% 28.30%,13.95% 28.86%,14.10% 29.41%,14.23% 29.96%,14.32% 30.52%,14.39% 31.09%,14.42% 31.66%,14.40% 32.23%,14.35% 32.80%,14.26% 33.36%,14.13% 33.92%,13.97% 34.47%,13.76% 35.00%,13.53% 35.52%,13.25% 36.02%,12.96% 36.51%,12.62% 36.97%,12.26% 37.41%,11.86% 37.81%,11.44% 38.21%,10.98% 38.56%,10.52% 38.88%,10.03% 39.18%,9.55% 39.48%,9.05% 39.76%,8.56% 40.06%,8.08% 40.36%,7.59% 40.64%,7.10% 40.94%,6.60% 41.24%,6.12% 41.52%,5.63% 41.82%,5.14% 42.11%,4.64% 42.41%,4.16% 42.70%,3.68% 43.00%,3.22% 43.34%,2.78% 43.71%,2.36% 44.11%,1.98% 44.52%,1.63% 44.98%,1.31% 45.44%,1.02% 45.94%,1.00% 46.45%,1.00% 46.97%,1.00% 47.52%,1.00% 48.06%,1.00% 48.62%,1.00% 49.19%,1.00% 49.76%,1.00% 50.33%,1.00% 50.90%,1.00% 51.46%,1.00% 52.02%,1.00% 52.58%,1.00% 53.11%,1.00% 53.63%,1.06% 54.14%,1.35% 54.63%,1.69% 55.10%,2.04% 55.55%,2.43% 55.96%,2.85% 56.35%,3.29% 56.71%,3.75% 57.04%,4.24% 57.35%,4.73% 57.64%,5.21% 57.93%,5.70% 58.23%,6.20% 58.52%,6.69% 58.81%,7.17% 59.11%,7.66% 59.41%,8.16% 59.69%,8.65% 59.99%,9.13% 60.29%,9.62% 60.57%,10.11% 60.87%,10.59% 61.16%,11.07% 61.50%,11.51% 61.85%,11.92% 62.24%,12.31% 62.66%,12.67% 63.10%,13.00% 63.57%,13.30% 64.05%,13.57% 64.56%,13.80% 65.08%,14.00% 65.62%,14.16% 66.16%,14.27% 66.72%,14.36% 67.29%,14.40% 67.86%,14.42% 68.43%,14.38% 69.00%,14.31% 69.56%,14.20% 70.12%,14.07% 70.68%,13.93% 71.24%,13.79% 71.78%,13.66% 72.34%,13.51% 72.90%,13.37% 73.44%,13.24% 74.00%,13.10% 74.55%,12.96% 75.11%,12.83% 75.67%,12.68% 76.21%,12.54% 76.77%,12.41% 77.32%,12.28% 77.87%,12.20% 78.44%,12.16% 79.01%,12.15% 79.58%,12.18% 80.15%,12.26% 80.72%,12.36% 81.28%,12.50% 81.83%,12.69% 82.38%,12.92% 82.90%,13.17% 83.41%,13.47% 83.90%,13.79% 84.37%,14.14% 84.81%,14.52% 85.24%,14.93% 85.64%,15.37% 86.01%,15.82% 86.35%,16.30% 86.66%,16.80% 86.94%,17.31% 87.17%,17.85% 87.39%,18.39% 87.55%,18.95% 87.68%,19.51% 87.78%,20.08% 87.84%,20.65% 87.85%,21.22% 87.83%,21.79% 87.77%,22.35% 87.67%,22.91% 87.54%,23.45% 87.40%,24.01% 87.26%,24.57% 87.13%,25.12% 86.98%,25.67% 86.84%,26.22% 86.71%,26.78% 86.57%,27.34% 86.43%,27.88% 86.28%,28.44% 86.15%,28.99% 86.01%,29.55% 85.87%,30.10% 85.75%,30.66% 85.65%,31.23% 85.59%,31.80% 85.58%,32.37% 85.61%,32.94% 85.67%,33.50% 85.77%,34.06% 85.90%,34.60% 86.08%,35.13% 86.29%,35.65% 86.53%,36.15% 86.82%,36.62% 87.13%,37.07% 87.47%,37.50% 87.84%,37.92% 88.24%,38.29% 88.67%,38.64% 89.12%,38.95% 89.60%,39.25% 90.08%,39.54% 90.58%,39.83% 91.07%,40.13% 91.56%,40.42% 92.04%,40.72% 92.54%,41.00% 93.03%,41.30% 93.52%,41.60% 94.00%,41.88% 94.49%,42.18% 94.99%,42.48% 95.48%,42.76% 95.96%,43.08% 96.44%,43.43% 96.90%,43.80% 97.33%,44.20% 97.73%,44.63% 98.11%,45.08% 98.46%,45.56% 98.76%,46.05% 99.05%,46.57% 99.30%,47.10% 99.50%,47.64% 99.68%,48.20% 99.82%,48.76% 99.92%,49.33% 99.98%,49.90% 100.00%,50.47% 99.99%,51.04% 99.94%,51.60% 99.86%,52.16% 99.73%,52.70% 99.57%,53.24% 99.37%,53.76% 99.13%,54.26% 98.87%,54.74% 98.56%,55.21% 98.23%,55.65% 97.86%,56.05% 97.47%,56.44% 97.04%,56.80% 96.59%,57.12% 96.13%,57.42% 95.64%,57.71% 95.15%,58.00% 94.66%,58.29% 94.17%,58.59% 93.68%,58.88% 93.19%,59.17% 92.71%,59.47% 92.21%,59.76% 91.72%,60.05% 91.24%,60.35% 90.75%,60.65% 90.25%,60.93% 89.76%,61.24% 89.29%,61.57% 88.82%,61.94% 88.38%,62.34% 87.98%,62.76% 87.59%,63.21% 87.23%,63.69% 86.91%,64.17% 86.63%,64.68% 86.37%,65.21% 86.15%,65.74% 85.96%,66.30% 85.81%,66.86% 85.70%,67.43% 85.62%,68.00% 85.58%,68.57% 85.59%,69.14% 85.63%,69.69% 85.71%,70.25% 85.82%,70.81% 85.96%,71.36% 86.10%,71.92% 86.25%,72.47% 86.38%,73.02% 86.52%,73.58% 86.66%,74.12% 86.79%,74.68% 86.94%,75.24% 87.08%,75.79% 87.21%,76.34% 87.35%,76.89% 87.49%,77.45% 87.62%,78.01% 87.74%,78.58% 87.81%,79.15% 87.85%,79.72% 87.85%,80.29% 87.80%,80.85% 87.72%,81.40% 87.60%,81.96% 87.45%,82.50% 87.26%,83.02% 87.02%,83.52% 86.76%,84.00% 86.46%,84.47% 86.13%,84.92% 85.77%,85.33% 85.38%,85.73% 84.96%,86.08% 84.52%,86.41% 84.06%,86.72% 83.57%,86.98% 83.08%,87.22% 82.55%,87.42% 82.02%,87.58% 81.47%,87.70% 80.91%,87.79% 80.34%,87.83% 79.77%,87.84% 79.20%,87.80% 78.63%,87.73% 78.08%,87.63% 77.51%,87.50% 76.96%,87.35% 76.40%,87.21% 75.84%,87.08% 75.30%,86.94% 74.74%,86.79% 74.19%,86.66% 73.63%,86.52% 73.08%,86.38% 72.53%,86.25% 71.97%,86.11% 71.43%,85.96% 70.87%,85.83% 70.31%,85.70% 69.75%,85.62% 69.19%,85.58% 68.62%,85.57% 68.05%,85.61% 67.48%,85.68% 66.91%,85.79% 66.35%,85.94% 65.81%,86.12% 65.26%,86.33% 64.74%,86.59% 64.23%,86.88% 63.73%,87.20% 63.25%,87.55% 62.81%,87.93% 62.39%,88.34% 61.98%,88.78% 61.62%,89.23% 61.27%,89.72% 60.96%,90.20% 60.68%,90.69% 60.38%,91.18% 60.08%,91.66% 59.80%,92.16% 59.50%,92.65% 59.20%,93.14% 58.92%,93.62% 58.62%,94.12% 58.33%,94.61% 58.03%,95.10% 57.74%,95.58% 57.45%,96.07% 57.15%,96.54% 56.83%,97.00% 56.47%,97.42% 56.09%,97.81% 55.69%,98.18% 55.25%,98.53% 54.80%,98.82% 54.31%,99.10% 53.81%,99.33% 53.29%,99.54% 52.76%,99.70% 52.21%,99.83% 51.65%,99.93% 51.09%,99.98% 50.52%,100.00% 49.95%,99.98% 49.38%,99.92% 48.81%,99.82% 48.25%,99.68% 47.70%,99.51% 47.15%,99.30% 46.63%,99.06% 46.10%,98.79% 45.61%,98.47% 45.13%,98.12% 44.68%,97.76% 44.24%,97.35% 43.84%,96.92% 43.47%,96.47% 43.11%,96.00% 42.80%,95.51% 42.51%,95.01% 42.21%,94.53% 41.92%,94.04% 41.63%,93.55% 41.33%,93.05% 41.03%,92.57% 40.75%,92.08% 40.45%,91.59% 40.15%,91.11% 39.87%,90.61% 39.57%,90.12% 39.28%,89.63% 38.99%,89.16% 38.67%,88.71% 38.33%,88.27% 37.96%,87.86% 37.55%,87.50% 37.13%,87.14% 36.66%,86.83% 36.19%,86.55% 35.69%,86.30% 35.18%,86.08% 34.66%,85.90% 34.11%,85.77% 33.55%,85.67% 32.99%,85.60% 32.42%,85.57% 31.85%,85.58% 31.28%,85.63% 30.72%,85.73% 30.15%,85.84% 29.60%,85.99% 29.05%,86.13% 28.49%,86.26% 27.93%,86.40% 27.39%,86.55% 26.83%,86.68% 26.28%,86.82% 25.72%,86.96% 25.17%,87.10% 24.62%,87.23% 24.06%,87.38% 23.50%,87.52% 22.96%,87.65% 22.40%,87.74% 21.84%,87.82% 21.27%,87.84% 20.70%,87.83% 20.13%,87.78% 19.56%,87.69% 19.00%,87.55% 18.44%,87.39% 17.90%,87.19% 17.36%,86.95% 16.85%,86.68% 16.34%,86.37% 15.87%,86.03% 15.40%,85.67% 14.96%,85.26% 14.56%,84.85% 14.17%,84.40% 13.82%,83.93% 13.49%,83.43% 13.19%,82.94% 12.95%,82.41% 12.72%,81.87% 12.53%,81.32% 12.38%,80.76% 12.26%,80.19% 12.19%,79.62% 12.15%,79.05% 12.15%,78.48% 12.20%,77.92% 12.28%,77.37% 12.40%,76.81% 12.53%,76.25% 12.67%,75.70% 12.81%,75.15% 12.95%,74.60% 13.09%,74.04% 13.23%,73.48% 13.36%,72.94% 13.50%,72.38% 13.65%,71.83% 13.78%,71.27% 13.92%,70.72% 14.06%,70.17% 14.19%,69.61% 14.31%,69.04% 14.38%,68.47% 14.42%,67.90% 14.41%,67.33% 14.37%,66.76% 14.29%,66.20% 14.17%,65.66% 14.01%,65.12% 13.82%,64.60% 13.60%,64.09% 13.33%,63.60% 13.04%,63.14% 12.71%,62.69% 12.35%,62.27% 11.96%,61.88% 11.54%,61.52% 11.10%,61.19% 10.64%,60.88% 10.15%,60.60% 9.67%,60.30% 9.18%,60.00% 8.68%,59.72% 8.19%,59.42% 7.71%,59.13% 7.22%,58.83% 6.73%,58.54% 6.24%,58.25% 5.75%,57.95% 5.26%,57.67% 4.77%,57.37% 4.29%,57.07% 3.80%,56.74% 3.33%,56.38% 2.89%,55.99% 2.47%,55.58% 2.08%,55.14% 1.71%,54.67% 1.39%,54.19% 1.09%,53.68% 1.00%,53.15% 1.00%,52.62% 1.00%,52.07% 1.00%,51.51% 1.00%,50.94% 1.00%,50.37% 1.00%,49.80% 1.00%"),
 };
 
-var _M3eLoadingIndicatorElement_shapes, _M3eLoadingIndicatorElement_shapeIndex, _M3eLoadingIndicatorElement_animationIterationHandler;
 /**
  * Shows indeterminate progress for a short wait time.
  *
@@ -141,25 +127,6 @@ var _M3eLoadingIndicatorElement_shapes, _M3eLoadingIndicatorElement_shapeIndex,
 let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends Role(LitElement, "progressbar") {
     constructor() {
         super(...arguments);
-        /** @private */
-        _M3eLoadingIndicatorElement_shapes.set(this, [
-            "soft-burst",
-            "7-sided-cookie",
-            "pentagon",
-            "pill",
-            "very-sunny",
-            "4-sided-cookie",
-            "oval",
-        ]);
-        /** @private */ _M3eLoadingIndicatorElement_shapeIndex.set(this, 1);
-        _M3eLoadingIndicatorElement_animationIterationHandler.set(this, (e) => {
-            if (e.animationName === "noop") {
-                if (this._activeIndicator) {
-                    this._activeIndicator?.style.setProperty("--_polygon", `polygon(${ShapePolygon[__classPrivateFieldGet(this, _M3eLoadingIndicatorElement_shapes, "f")[__classPrivateFieldGet(this, _M3eLoadingIndicatorElement_shapeIndex, "f")]]})`);
-                }
-                __classPrivateFieldSet(this, _M3eLoadingIndicatorElement_shapeIndex, (__classPrivateFieldGet(this, _M3eLoadingIndicatorElement_shapeIndex, "f") + 1) % __classPrivateFieldGet(this, _M3eLoadingIndicatorElement_shapes, "f").length, "f");
-            }
-        });
         /**
          * The appearance variant of the indicator.
          * @default "uncontained"
@@ -175,14 +142,11 @@ let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends Role(L
     /** @inheritdoc */
     disconnectedCallback() {
         super.disconnectedCallback();
-        this._activeIndicator?.removeEventListener("animationiteration", __classPrivateFieldGet(this, _M3eLoadingIndicatorElement_animationIterationHandler, "f"));
         this._activeIndicator?.classList.toggle("animate", false);
     }
     /** @inheritdoc */
     firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
-        this._activeIndicator?.style.setProperty("--_polygon", `polygon(${ShapePolygon[__classPrivateFieldGet(this, _M3eLoadingIndicatorElement_shapes, "f")[0]]})`);
-        this._activeIndicator?.addEventListener("animationiteration", __classPrivateFieldGet(this, _M3eLoadingIndicatorElement_animationIterationHandler, "f"));
         this._activeIndicator?.classList.toggle("animate", true);
     }
     /** @inheritdoc */
@@ -192,9 +156,6 @@ let M3eLoadingIndicatorElement = class M3eLoadingIndicatorElement extends Role(L
     </div>`;
     }
 };
-_M3eLoadingIndicatorElement_shapes = new WeakMap();
-_M3eLoadingIndicatorElement_shapeIndex = new WeakMap();
-_M3eLoadingIndicatorElement_animationIterationHandler = new WeakMap();
 /** The styles of the element. */
 M3eLoadingIndicatorElement.styles = css `
     :host {
@@ -232,53 +193,58 @@ M3eLoadingIndicatorElement.styles = css `
       aspect-ratio: 1 / 1;
       width: calc(${LoadingIndicatorToken.activeIndicatorSize} * 0.842);
       transform-origin: center;
-      clip-path: var(--_polygon);
       transition: clip-path ${DesignToken.motion.spring.slowEffects};
       will-change: transform, clip-path;
+
+      --_polygon-soft-burst: polygon(${ShapePolygon["soft-burst"]});
+      --_polygon-7-sided-cookie: polygon(${ShapePolygon["7-sided-cookie"]});
+      --_polygon-pentagon: polygon(${ShapePolygon["pentagon"]});
+      --_polygon-pill: polygon(${ShapePolygon["pill"]});
+      --_polygon-very-sunny: polygon(${ShapePolygon["very-sunny"]});
+      --_polygon-4-sided-cookie: polygon(${ShapePolygon["4-sided-cookie"]});
+      --_polygon-oval: polygon(${ShapePolygon["oval"]});
     }
     .active-indicator.animate {
-      animation:
-        rotate 4998ms infinite,
-        noop 714ms steps(1, end) infinite;
-    }
-    @keyframes noop {
-      from {
-        opacity: 1;
-      }
-      to {
-        opacity: 1;
-      }
+      animation: rotate 4998ms infinite;
     }
     @keyframes rotate {
       0% {
+        clip-path: var(--_polygon-soft-burst);
         transform: rotate(0deg);
         animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
       }
       14% {
+        clip-path: var(--_polygon-7-sided-cookie);
         transform: rotate(154deg);
         animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
       }
       29% {
+        clip-path: var(--_polygon-pentagon);
         transform: rotate(309deg);
         animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
       }
       43% {
+        clip-path: var(--_polygon-pill);
         transform: rotate(463deg);
         animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
       }
       57% {
+        clip-path: var(--_polygon-very-sunny);
         transform: rotate(617deg);
         animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
       }
       71% {
+        clip-path: var(--_polygon-4-sided-cookie);
         transform: rotate(771deg);
         animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
       }
       83% {
+        clip-path: var(--_polygon-oval);
         transform: rotate(926deg);
         animation-timing-function: cubic-bezier(0.5, 0.2, 0, 0.8);
       }
       100% {
+        clip-path: var(--_polygon-soft-burst);
         transform: rotate(1080deg);
       }
     }