@justeattakeaway/pie-lottie-player 0.1.1 → 0.2.1

package/custom-elements.json

@@ -26,7 +26,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    loopDisabled: false,\n    autoPlayDisabled: false,\n    speed: 1,\n    direction: 'forward',\n}"
+          "default": "{\r\n    loopDisabled: false,\r\n    autoPlayDisabled: false,\r\n    speed: 1,\r\n    direction: 'forward',\r\n}"
         }
       ],
       "exports": [

package/dist/index.js

@@ -1,36 +1,30 @@
-import { LitElement as m, isServer as _, html as u, unsafeCSS as f } from "lit";
-import { property as o, query as y } from "lit/decorators.js";
-import { defineCustomElement as D } from "@justeattakeaway/pie-webc-core";
-var b = Object.defineProperty, I = (l, t, i, s) => {
-  for (var e = void 0, n = l.length - 1, d; n >= 0; n--)
-    (d = l[n]) && (e = d(t, i, e) || e);
-  return e && b(t, i, e), e;
-};
-class h extends m {
-  constructor() {
-    super(...arguments), this.v = "0.1.1";
+import { LitElement as m, unsafeCSS as u, isServer as _, html as y } from "lit";
+import { query as f, property as o } from "lit/decorators.js";
+import { safeCustomElement as D } from "@justeattakeaway/pie-webc-core";
+const d = class d extends m {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", d.v);
   }
-}
-I([
-  o({ type: String, reflect: !0 })
-], h.prototype, "v");
-const E = ["forward", "reverse"], c = {
+};
+d.v = "0.2.1";
+let p = d;
+const v = ["forward", "reverse"], l = {
   loopDisabled: !1,
   autoPlayDisabled: !1,
   speed: 1,
   direction: "forward"
 };
-var P = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (l, t, i, s) => {
-  for (var e = s > 1 ? void 0 : s ? S(t, i) : t, n = l.length - 1, d; n >= 0; n--)
-    (d = l[n]) && (e = (s ? d(t, i, e) : d(e)) || e);
-  return s && e && P(t, i, e), e;
+var b = Object.defineProperty, P = Object.getOwnPropertyDescriptor, s = (t, e, r, n) => {
+  for (var a = n > 1 ? void 0 : n ? P(e, r) : e, c = t.length - 1, h; c >= 0; c--)
+    (h = t[c]) && (a = (n ? h(e, r, a) : h(a)) || a);
+  return n && a && b(e, r, a), a;
 };
-const g = "pie-lottie-player", p = class p extends h {
+let i = class extends p {
   constructor() {
-    super(...arguments), this._animationSrc = "", this._autoPlayDisabled = c.autoPlayDisabled, this._loopDisabled = c.loopDisabled, this._speed = c.speed, this._direction = c.direction;
+    super(...arguments), this._animationSrc = "", this._autoPlayDisabled = l.autoPlayDisabled, this._loopDisabled = l.loopDisabled, this._speed = l.speed, this._direction = l.direction;
   }
   async firstUpdated() {
-    const t = await import("./lottie_light_canvas.min-Dwyz9L-n.js").then((i) => i.l);
+    const t = await import("./lottie_light_canvas.min-Dwyz9L-n.js").then((e) => e.l);
     t && t.default && (this._lottie = t.default, this._loadAnimation());
   }
   disconnectedCallback() {
@@ -38,7 +32,7 @@ const g = "pie-lottie-player", p = class p extends h {
   }
   _loadAnimation() {
     if (_ || !this._hostElement || !this._lottie || (this._destroyAnimation(), !this.animationSrc && !this.animationData)) return;
-    const t = window.matchMedia("(prefers-reduced-motion: reduce)").matches, i = t === !0 ? !t : !this.autoPlayDisabled;
+    const t = window.matchMedia("(prefers-reduced-motion: reduce)").matches, e = t === !0 ? !t : !this.autoPlayDisabled;
     try {
       this._animationInstance = this._lottie.loadAnimation({
         container: this._hostElement,
@@ -47,11 +41,11 @@ const g = "pie-lottie-player", p = class p extends h {
         loop: !this.loopDisabled,
         animationData: this.animationData,
         path: this.animationSrc,
-        autoplay: i
+        autoplay: e
       }), this._animationInstance.setSpeed(this.speed), this._updateDirection();
-    } catch (s) {
-      const e = s, n = e && e.message && `Error: "${e.message}"`;
-      console.error(`PieLottiePlayer: the animation couldn't be played. ${n}`);
+    } catch (r) {
+      const n = r, a = n && n.message && `Error: "${n.message}"`;
+      console.error(`PieLottiePlayer: the animation couldn't be played. ${a}`);
     }
   }
   _destroyAnimation() {
@@ -118,36 +112,37 @@ const g = "pie-lottie-player", p = class p extends h {
     this._animationInstance && this._animationInstance.stop();
   }
   render() {
-    return u`<div aria-hidden="true" data-test-id="pie-lottie-player"></div>`;
+    return y`<div aria-hidden="true" data-test-id="pie-lottie-player"></div>`;
   }
   // Kept as empty to ensure it will be present during SSR testing
 };
-p.styles = f("");
-let a = p;
-r([
-  y("div")
-], a.prototype, "_hostElement", 2);
-r([
+i.styles = u("");
+s([
+  f("div")
+], i.prototype, "_hostElement", 2);
+s([
   o({ type: String, reflect: !0 })
-], a.prototype, "animationSrc", 1);
-r([
+], i.prototype, "animationSrc", 1);
+s([
   o({ type: Object })
-], a.prototype, "animationData", 1);
-r([
+], i.prototype, "animationData", 1);
+s([
   o({ type: Boolean })
-], a.prototype, "autoPlayDisabled", 1);
-r([
+], i.prototype, "autoPlayDisabled", 1);
+s([
   o({ type: Boolean })
-], a.prototype, "loopDisabled", 1);
-r([
+], i.prototype, "loopDisabled", 1);
+s([
   o({ type: Number, reflect: !0 })
-], a.prototype, "speed", 1);
-r([
+], i.prototype, "speed", 1);
+s([
   o({ type: String, reflect: !0 })
-], a.prototype, "direction", 1);
-D(g, a);
+], i.prototype, "direction", 1);
+i = s([
+  D("pie-lottie-player")
+], i);
 export {
-  a as PieLottiePlayer,
-  c as defaultProps,
-  E as directions
+  i as PieLottiePlayer,
+  l as defaultProps,
+  v as directions
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-lottie-player",
   "description": "PIE Design System Lottie Player built using Web Components",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,13 +31,13 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.19.1",
+    "@justeattakeaway/pie-components-config": "0.20.1",
     "@justeattakeaway/pie-css": "0.16.0",
-    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.25.1",
+    "@justeattakeaway/pie-webc-core": "1.0.0",
     "lottie-web": "5.12.2"
   },
   "volta": {

package/src/index.ts

@@ -5,7 +5,7 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 import { property, query } from 'lit/decorators.js';
 import { type LottiePlayer, type AnimationItem } from 'lottie-web';
 
-import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { safeCustomElement } from '@justeattakeaway/pie-webc-core';
 import { type LottiePlayerProps, defaultProps } from './defs';
 
 // Valid values available to consumers
@@ -16,6 +16,7 @@ const componentSelector = 'pie-lottie-player';
 /**
  * @tagname pie-lottie-player
  */
+@safeCustomElement('pie-lottie-player')
 export class PieLottiePlayer extends PieElement implements LottiePlayerProps {
     @query('div')
     private _hostElement!: HTMLDivElement;
@@ -200,8 +201,6 @@ export class PieLottiePlayer extends PieElement implements LottiePlayerProps {
     static styles = unsafeCSS(''); // Kept as empty to ensure it will be present during SSR testing
 }
 
-defineCustomElement(componentSelector, PieLottiePlayer);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieLottiePlayer;