@nectary/assets 0.4.0 → 0.5.0

package/animations/create-animation-class.d.ts

@@ -0,0 +1 @@
+export declare const createAnimationClass: (animationData: object) => CustomElementConstructor;

package/animations/create-animation-class.js

@@ -0,0 +1,101 @@
+import lottie from 'lottie-web';
+import { attrValueToPixels, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>#svg{display:block}</style><div id="wrapper"></div>';
+const animationDirectionValues = ['forward', 'backward'];
+export const createAnimationClass = animationData => {
+  const template = document.createElement('template');
+  template.innerHTML = templateHTML;
+  return class extends NectaryElement {
+    #$wrapper;
+    #anim = null;
+    constructor() {
+      super();
+      const shadowRoot = this.attachShadow();
+      shadowRoot.appendChild(template.content.cloneNode(true));
+      this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    }
+    connectedCallback() {
+      const config = {
+        container: this.#$wrapper,
+        renderer: 'svg',
+        loop: this.loop,
+        autoplay: this.autoplay,
+        rendererSettings: {
+          id: 'svg',
+          progressiveLoad: true,
+          preserveAspectRatio: 'xMidYMid meet',
+          imagePreserveAspectRatio: 'xMidYMid meet'
+        },
+        animationData
+      };
+      this.#anim = lottie.loadAnimation(config);
+      this.#anim.setSubframe(false);
+      this.#updateDirection();
+    }
+    disconnectedCallback() {
+      this.#anim?.destroy();
+      this.#anim = null;
+    }
+    static get observedAttributes() {
+      return ['size'];
+    }
+    attributeChangedCallback(name, _, newVal) {
+      switch (name) {
+        case 'size':
+          {
+            this.#$wrapper.style.setProperty('height', attrValueToPixels(newVal));
+            break;
+          }
+        case 'direction':
+          {
+            this.#updateDirection();
+            break;
+          }
+        case 'loop':
+          {
+            this.#updateLoop();
+            break;
+          }
+      }
+    }
+    set size(value) {
+      updateAttribute(this, 'size', value);
+    }
+    get size() {
+      return getIntegerAttribute(this, 'size', null);
+    }
+    set loop(isEnabled) {
+      updateBooleanAttribute(this, 'loop', isEnabled);
+    }
+    get loop() {
+      return getBooleanAttribute(this, 'loop');
+    }
+    set autoplay(isEnabled) {
+      updateBooleanAttribute(this, 'autoplay', isEnabled);
+    }
+    get autoplay() {
+      return getBooleanAttribute(this, 'autoplay');
+    }
+    set direction(value) {
+      updateLiteralAttribute(this, animationDirectionValues, 'direction', value);
+    }
+    get direction() {
+      return getLiteralAttribute(this, animationDirectionValues, 'direction', 'forward');
+    }
+    play() {
+      this.#anim?.play();
+    }
+    stop() {
+      this.#anim?.stop();
+    }
+    pause() {
+      this.#anim?.pause();
+    }
+    #updateDirection() {
+      this.#anim?.setDirection(this.direction === 'forward' ? 1 : -1);
+    }
+    #updateLoop() {
+      this.#anim?.setLoop(this.loop);
+    }
+  };
+};

package/animations/engage-logo/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchAnimationElement, TSinchAnimationReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-animation-engage-logo': TSinchAnimationReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-animation-engage-logo': TSinchAnimationElement;
+    }
+}

package/animations/engage-logo/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createAnimationClass } from '../create-animation-class';
+import animationData from './lottie.json';
+defineCustomElement('sinch-animation-engage-logo', createAnimationClass(animationData));

package/animations/engage-logo/lottie.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.2.2","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":60.0000024438501,"w":140,"h":140,"nm":"engage_spinner_logo_animation_S","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":2,"ty":4,"nm":"revealing stroke small","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[70,70,0],"ix":2},"a":{"a":0,"k":[-275,-39,0],"ix":1},"s":{"a":0,"k":[68,68,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,17.182],[14.84,0.079],[0,-20.448],[-26.121,0],[-5.742,-0.017],[-17.262,0.092]],"o":[[0,-37.414],[-23.664,-0.126],[0,20.919],[5.644,0],[11.99,0.036],[32.704,-0.174]],"v":[[-285.461,16.613],[-323.184,-29.201],[-360.931,8.831],[-321.305,47.271],[-304.407,47.305],[-262.166,47.292]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.371],"y":[1]},"o":{"x":[0.172],"y":[0.133]},"t":29,"s":[0]},{"t":48.9997519958007,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.4],"y":[0.999]},"o":{"x":[0.194],"y":[0.16]},"t":20,"s":[0]},{"t":39.9997516292232,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.321568638086,0.364705890417,0.556862771511,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":22,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":95.8500039040505,"st":-0.05400000219947,"bm":0},{"ddd":0,"ind":3,"ty":1,"nm":"small_c 2","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[70,70,0],"ix":2},"a":{"a":0,"k":[70,70,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,18.011],[-18.012,0],[0,-18.012],[0,0],[0,0],[0,0],[10.298,0],[0,-10.298],[-10.298,0],[0,0]],"o":[[0,0],[-18.012,0],[0,-18.012],[18.011,0],[0,0],[0,0],[0,0],[0,-10.298],[-10.298,0],[0,10.298],[0,0],[0,0]],"v":[[70.141,135.328],[37.335,135.328],[4.664,102.657],[37.335,69.985],[70.006,102.657],[70.006,107.328],[56.006,107.328],[56.006,102.657],[37.335,83.985],[18.664,102.657],[37.335,121.328],[56.141,121.328]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 2"}],"sw":140,"sh":140,"sc":"#000000","ip":0,"op":105.000004276738,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"revealing stroke large 2","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[70,70,0],"ix":2},"a":{"a":0,"k":[-275,-39,0],"ix":1},"s":{"a":0,"k":[68,68,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-10.506,0],[0,36.567],[40.014,0],[0,-28.924]],"o":[[0,0],[41.332,0],[0,-33.47],[-40.133,0],[0,16.651]],"v":[[-280.069,5.002],[-254.935,5.03],[-189.59,-62.148],[-256.007,-125.488],[-319.652,-59.157]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.8],"y":[1.184]},"o":{"x":[0.6],"y":[0]},"t":0,"s":[100]},{"t":22.999750936799,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.8],"y":[1.235]},"o":{"x":[0.6],"y":[0]},"t":10,"s":[100]},{"t":31.9997513033765,"s":[0]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.321568638086,0.364705890417,0.556862771511,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":22,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":105.000004276738,"st":-0.05400000219947,"bm":0},{"ddd":0,"ind":6,"ty":1,"nm":"large_C 3","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[70,70,0],"ix":2},"a":{"a":0,"k":[70,70,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,-13.704],[9.692,-9.692],[13.704,0],[0,0],[0,0],[0,20.583],[20.582,0],[0,-20.583],[0,0],[2.773,0],[0,0],[1.158,-0.094],[0,0],[-9.692,9.692],[-13.704,0],[-9.692,-9.692]],"o":[[0,13.717],[-9.692,9.692],[0,0],[0,0],[20.582,0],[0,-20.583],[-20.583,0],[0,0],[-2.665,-0.485],[0,0],[-1.171,0],[0,0],[0,-13.717],[9.692,-9.692],[13.704,0],[9.692,9.692]],"v":[[135.336,56.001],[120.299,92.294],[84.007,107.33],[70.007,107.33],[84.007,93.33],[121.336,56.001],[84.007,18.672],[46.678,56.001],[46.678,56.728],[38.507,56.001],[36.178,56.001],[32.678,56.136],[32.678,56.001],[47.714,19.709],[84.007,4.672],[120.299,19.709]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"sw":140,"sh":140,"sc":"#000000","ip":0,"op":105.000004276738,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":2,"ty":0,"nm":"S-mid","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[70,70,0],"ix":2},"a":{"a":0,"k":[70,70,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":140,"h":140,"ip":0,"op":120.0000048877,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":1,"nm":"light_grey","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[70,70,0],"ix":2},"a":{"a":0,"k":[70,70,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,-13.704],[9.692,-9.692],[13.704,0],[0,0],[0,0],[0,20.583],[20.582,0],[0,-20.583],[0,0],[2.773,0],[0,0],[1.158,-0.094],[0,0],[-9.692,9.692],[-13.704,0],[-9.692,-9.692]],"o":[[0,13.717],[-9.692,9.692],[0,0],[0,0],[20.582,0],[0,-20.583],[-20.583,0],[0,0],[-2.665,-0.485],[0,0],[-1.171,0],[0,0],[0,-13.717],[9.692,-9.692],[13.704,0],[9.692,9.692]],"v":[[135.336,56.001],[120.299,92.294],[84.007,107.33],[70.007,107.33],[84.007,93.33],[121.336,56.001],[84.007,18.672],[46.678,56.001],[46.678,56.728],[38.507,56.001],[36.178,56.001],[32.678,56.136],[32.678,56.001],[47.714,19.709],[84.007,4.672],[120.299,19.709]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"},{"inv":false,"mode":"f","pt":{"a":0,"k":{"i":[[0,0],[0,0],[0,18.011],[-18.012,0],[0,-18.012],[0,0],[0,0],[0,0],[10.298,0],[0,-10.298],[-10.298,0],[0,0]],"o":[[0,0],[-18.012,0],[0,-18.012],[18.011,0],[0,0],[0,0],[0,0],[0,-10.298],[-10.298,0],[0,10.298],[0,0],[0,0]],"v":[[70.141,135.328],[37.335,135.328],[4.664,102.657],[37.335,69.985],[70.006,102.657],[70.006,107.328],[56.006,107.328],[56.006,102.657],[37.335,83.985],[18.664,102.657],[37.335,121.328],[56.141,121.328]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 2"}],"sw":140,"sh":140,"sc":"#e0e0e0","ip":0,"op":105.000004276738,"st":0,"bm":0}],"markers":[]}

package/animations/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchAnimationDirection = 'forward' | 'backward';
+export type TSinchAnimationElement = HTMLElement & {
+    size: number;
+    setAttribute(name: 'size', value: string): void;
+    play(): void;
+    stop(): void;
+    pause(): void;
+};
+export type TSinchAnimationReact = TSinchElementReact<TSinchAnimationElement> & {
+    size?: number;
+    loop?: boolean;
+    autoplay?: boolean;
+    direction?: TSinchAnimationDirection;
+};

package/animations/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/assets",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -12,7 +12,8 @@
     "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.0"
+    "@babel/runtime": "^7.21.0",
+    "lottie-web": "^5.11.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",