@nanoporetech-digital/components 6.0.1 → 6.2.0

package/dist/collection/components/animation/animation.js

@@ -0,0 +1,547 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { h, Host, } from '@stencil/core';
+import { animations, easings } from './animations';
+/**
+ * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.
+ * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+ *
+ * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple *nano-animation* elements.
+ */
+export class NanoAnimation {
+  constructor() {
+    this.hasStarted = false;
+    this.handleAnimationFinish = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.nanoFinish.emit();
+    };
+    this.handleAnimationCancel = () => {
+      this.play = false;
+      this.hasStarted = false;
+      this.nanoCancel.emit();
+    };
+    this.handleSlotChange = () => {
+      this.destroyAnimation();
+      this.createAnimation();
+    };
+    this.name = 'none';
+    this.play = false;
+    this.delay = 0;
+    this.direction = 'normal';
+    this.duration = 1000;
+    this.easing = 'ease';
+    this.endDelay = 0;
+    this.fill = 'auto';
+    this.iterations = Infinity;
+    this.iterationStart = 0;
+    this.keyframes = undefined;
+    this.playbackRate = 1;
+  }
+  /** Gets and sets the current animation time. */
+  get currentTime() {
+    return this.animation?.currentTime ?? 0;
+  }
+  set currentTime(time) {
+    if (this.animation) {
+      this.animation.currentTime = time;
+    }
+  }
+  connectedCallback() {
+    this.createAnimation();
+  }
+  disconnectedCallback() {
+    this.destroyAnimation();
+  }
+  async createAnimation() {
+    if (!this.defaultSlot)
+      return;
+    const easing = easings[this.easing] ?? this.easing;
+    const keyframes = this.keyframes ??
+      animations[this.name];
+    const slot = this.defaultSlot;
+    const element = slot.assignedElements()[0];
+    if (!element || !keyframes) {
+      return false;
+    }
+    this.destroyAnimation();
+    this.animation = element.animate(keyframes, {
+      delay: this.delay,
+      direction: this.direction,
+      duration: this.duration,
+      easing,
+      endDelay: this.endDelay,
+      fill: this.fill,
+      iterationStart: this.iterationStart,
+      iterations: this.iterations,
+    });
+    this.animation.playbackRate = this.playbackRate;
+    this.animation.addEventListener('cancel', this.handleAnimationCancel);
+    this.animation.addEventListener('finish', this.handleAnimationFinish);
+    if (this.play) {
+      this.hasStarted = true;
+      this.nanoStart.emit();
+    }
+    else {
+      this.animation.pause();
+    }
+    return true;
+  }
+  destroyAnimation() {
+    if (this.animation) {
+      this.animation.cancel();
+      this.animation.removeEventListener('cancel', this.handleAnimationCancel);
+      this.animation.removeEventListener('finish', this.handleAnimationFinish);
+      this.hasStarted = false;
+    }
+  }
+  handleAnimationChange() {
+    this.createAnimation();
+  }
+  handlePlayChange() {
+    if (this.animation) {
+      if (this.play && !this.hasStarted) {
+        this.hasStarted = true;
+        this.nanoStart.emit();
+      }
+      if (this.play) {
+        this.animation.play();
+      }
+      else {
+        this.animation.pause();
+      }
+      return true;
+    }
+    return false;
+  }
+  handlePlaybackRateChange() {
+    if (this.animation) {
+      this.animation.playbackRate = this.playbackRate;
+    }
+  }
+  /** Clears all keyframe effects caused by this animation and aborts its playback. */
+  async cancel() {
+    this.animation?.cancel();
+  }
+  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
+  async finish() {
+    this.animation?.finish();
+  }
+  render() {
+    return (h(Host, null, h("slot", { ref: (slot) => (this.defaultSlot = slot), onSlotchange: this.handleSlotChange })));
+  }
+  static get is() { return "nano-animation"; }
+  static get encapsulation() { return "shadow"; }
+  static get styles() { return ":host {\n      display: contents;\n    }"; }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AnimationName | 'none'",
+          "resolved": "\"flip\" | \"none\" | \"bounce\" | \"flash\" | \"headShake\" | \"heartBeat\" | \"jello\" | \"pulse\" | \"rubberBand\" | \"shake\" | \"shakeX\" | \"shakeY\" | \"swing\" | \"tada\" | \"wobble\" | \"backInDown\" | \"backInLeft\" | \"backInRight\" | \"backInUp\" | \"backOutDown\" | \"backOutLeft\" | \"backOutRight\" | \"backOutUp\" | \"bounceIn\" | \"bounceInDown\" | \"bounceInLeft\" | \"bounceInRight\" | \"bounceInUp\" | \"bounceOut\" | \"bounceOutDown\" | \"bounceOutLeft\" | \"bounceOutRight\" | \"bounceOutUp\" | \"fadeIn\" | \"fadeInBottomLeft\" | \"fadeInBottomRight\" | \"fadeInDown\" | \"fadeInDownBig\" | \"fadeInLeft\" | \"fadeInLeftBig\" | \"fadeInRight\" | \"fadeInRightBig\" | \"fadeInTopLeft\" | \"fadeInTopRight\" | \"fadeInUp\" | \"fadeInUpBig\" | \"fadeOut\" | \"fadeOutBottomLeft\" | \"fadeOutBottomRight\" | \"fadeOutDown\" | \"fadeOutDownBig\" | \"fadeOutLeft\" | \"fadeOutLeftBig\" | \"fadeOutRight\" | \"fadeOutRightBig\" | \"fadeOutTopLeft\" | \"fadeOutTopRight\" | \"fadeOutUp\" | \"fadeOutUpBig\" | \"flipInX\" | \"flipInY\" | \"flipOutX\" | \"flipOutY\" | \"lightSpeedInLeft\" | \"lightSpeedInRight\" | \"lightSpeedOutLeft\" | \"lightSpeedOutRight\" | \"rotateIn\" | \"rotateInDownLeft\" | \"rotateInDownRight\" | \"rotateInUpLeft\" | \"rotateInUpRight\" | \"rotateOut\" | \"rotateOutDownLeft\" | \"rotateOutDownRight\" | \"rotateOutUpLeft\" | \"rotateOutUpRight\" | \"slideInDown\" | \"slideInLeft\" | \"slideInRight\" | \"slideInUp\" | \"slideOutDown\" | \"slideOutLeft\" | \"slideOutRight\" | \"slideOutUp\" | \"hinge\" | \"jackInTheBox\" | \"rollIn\" | \"rollOut\" | \"zoomIn\" | \"zoomInDown\" | \"zoomInLeft\" | \"zoomInRight\" | \"zoomInUp\" | \"zoomOut\" | \"zoomOutDown\" | \"zoomOutLeft\" | \"zoomOutRight\" | \"zoomOutUp\"",
+          "references": {
+            "AnimationName": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the built-in animation to use. For custom animations, use the `keyframes` prop."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "'none'"
+      },
+      "play": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\nthe animation finishes or gets canceled."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "play",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "delay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of milliseconds to delay the start of the animation."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PlaybackDirection",
+          "resolved": "\"alternate\" | \"alternate-reverse\" | \"normal\" | \"reverse\"",
+          "references": {
+            "PlaybackDirection": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n[Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "direction",
+        "reflect": false,
+        "defaultValue": "'normal'"
+      },
+      "duration": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of milliseconds each iteration of the animation takes to complete."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "duration",
+        "reflect": false,
+        "defaultValue": "1000"
+      },
+      "easing": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "AnimationEasing",
+          "resolved": "\"linear\" | \"ease\" | \"easeIn\" | \"easeOut\" | \"easeInOut\" | \"easeInSine\" | \"easeOutSine\" | \"easeInOutSine\" | \"easeInQuad\" | \"easeOutQuad\" | \"easeInOutQuad\" | \"easeInCubic\" | \"easeOutCubic\" | \"easeInOutCubic\" | \"easeInQuart\" | \"easeOutQuart\" | \"easeInOutQuart\" | \"easeInQuint\" | \"easeOutQuint\" | \"easeInOutQuint\" | \"easeInExpo\" | \"easeOutExpo\" | \"easeInOutExpo\" | \"easeInCirc\" | \"easeOutCirc\" | \"easeInOutCirc\" | \"easeInBack\" | \"easeOutBack\" | \"easeInOutBack\"",
+          "references": {
+            "AnimationEasing": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The easing function to use for the animation. This can be a easing function or a custom easing function\nsuch as `cubic-bezier(0, 1, .76, 1.14)`."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "easing",
+        "reflect": false,
+        "defaultValue": "'ease'"
+      },
+      "endDelay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of milliseconds to delay after the active period of an animation sequence."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "end-delay",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "fill": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FillMode",
+          "resolved": "\"auto\" | \"backwards\" | \"both\" | \"forwards\" | \"none\"",
+          "references": {
+            "FillMode": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets how the animation applies styles to its target before and after its execution."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "fill",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "iterations": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "iterations",
+        "reflect": false,
+        "defaultValue": "Infinity"
+      },
+      "iterationStart": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The offset at which to start the animation, usually between 0 (start) and 1 (end)."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "iteration-start",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "keyframes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Keyframe[]",
+          "resolved": "Keyframe[]",
+          "references": {
+            "Keyframe": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The keyframes to use for the animation. If this is set, `name` will be ignored."
+        },
+        "getter": false,
+        "setter": false
+      },
+      "playbackRate": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\nto `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\nvalue can be changed without causing the animation to restart."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "playback-rate",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "currentTime": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "CSSNumberish",
+          "resolved": "number",
+          "references": {
+            "CSSNumberish": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Gets and sets the current animation time."
+        },
+        "getter": true,
+        "setter": true,
+        "attribute": "current-time",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "nanoCancel",
+        "name": "nanoCancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the animation is canceled."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "nanoFinish",
+        "name": "nanoFinish",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the animation finishes."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "nanoStart",
+        "name": "nanoStart",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the animation starts."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "cancel": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Clears all keyframe effects caused by this animation and aborts its playback.",
+          "tags": []
+        }
+      },
+      "finish": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the playback time to the end of the animation corresponding to the current playback direction.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "name",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "delay",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "direction",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "duration",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "easing",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "endDelay",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "fill",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "iterations",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "iterationStart",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "keyframes",
+        "methodName": "handleAnimationChange"
+      }, {
+        "propName": "play",
+        "methodName": "handlePlayChange"
+      }, {
+        "propName": "playbackRate",
+        "methodName": "handlePlaybackRateChange"
+      }];
+  }
+}
+//# sourceMappingURL=animation.js.map

package/dist/collection/components/animation/animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../../src/components/animation/animation.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EACL,CAAC,EAGD,KAAK,EACL,IAAI,EACJ,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAGnD;;;;;GAKG;AAUH,MAAM,OAAO,aAAa;;IAEhB,eAAU,GAAG,KAAK,CAAC;IAgFnB,0BAAqB,GAAG,GAAG,EAAE;MACnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,CAAC;IAEM,0BAAqB,GAAG,GAAG,EAAE;MACnC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MACxB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,gBAAgB,EAAE,CAAC;MACxB,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC,CAAC;gBA3FqC,MAAM;gBAME,KAAK;iBAGpC,CAAC;qBAMsB,QAAQ;oBAG5B,IAAI;kBAMW,MAAM;oBAGrB,CAAC;gBAGK,MAAM;sBAGV,QAAQ;0BAGJ,CAAC;;wBAUH,CAAC;;EAWxB,gDAAgD;EAChD,IACI,WAAW;IACb,OAAO,IAAI,CAAC,SAAS,EAAE,WAAW,IAAI,CAAC,CAAC;EAC1C,CAAC;EACD,IAAI,WAAW,CAAC,IAAY;IAC1B,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;KACnC;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAmBO,KAAK,CAAC,eAAe;IAC3B,IAAI,CAAC,IAAI,CAAC,WAAW;MAAE,OAAO;IAE9B,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC;IACnD,MAAM,SAAS,GACb,IAAI,CAAC,SAAS;MACb,UAA6D,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5E,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAA4B,CAAC;IAEtE,IAAI,CAAC,OAAO,IAAI,CAAC,SAAS,EAAE;MAC1B,OAAO,KAAK,CAAC;KACd;IAED,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACxB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE;MAC1C,KAAK,EAAE,IAAI,CAAC,KAAK;MACjB,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,MAAM;MACN,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,IAAI,EAAE,IAAI,CAAC,IAAI;MACf,cAAc,EAAE,IAAI,CAAC,cAAc;MACnC,UAAU,EAAE,IAAI,CAAC,UAAU;KAC5B,CAAC,CAAC;IACH,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;IAChD,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtE,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAEtE,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACvB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB;SAAM;MACL,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;KACxB;IAED,OAAO,IAAI,CAAC;EACd,CAAC;EAEO,gBAAgB;IACtB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;MACxB,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;MACzE,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;MACzE,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;EACH,CAAC;EAYD,qBAAqB;IACnB,IAAI,CAAC,eAAe,EAAE,CAAC;EACzB,CAAC;EAGD,gBAAgB;IACd,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QACjC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;OACvB;MAED,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;OACvB;WAAM;QACL,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC;OACxB;MAED,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;EACf,CAAC;EAGD,wBAAwB;IACtB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;KACjD;EACH,CAAC;EAED,oFAAoF;EAEpF,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;EAC3B,CAAC;EAED,0GAA0G;EAE1G,KAAK,CAAC,MAAM;IACV,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC;EAC3B,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,IAAuB,CAAC,EAC3D,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAC7B,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Prop,\n  Watch,\n  h,\n  ComponentInterface,\n  EventEmitter,\n  Event,\n  Host,\n  Method,\n} from '@stencil/core';\nimport { animations, easings } from './animations';\nimport type { AnimationEasing, AnimationName } from '../../interface';\n\n/**\n * Animate elements declaratively with [~100 baked-in presets](https://animate.style/), or make your own with custom keyframes.\n * Powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).\n *\n * @slot - The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple *nano-animation* elements.\n */\n@Component({\n  tag: 'nano-animation',\n  styles: /* css */ `\n    :host {\n      display: contents;\n    }\n  `,\n  shadow: true,\n})\nexport class NanoAnimation implements ComponentInterface {\n  private animation?: Animation;\n  private hasStarted = false;\n  private defaultSlot?: HTMLSlotElement;\n\n  /** The name of the built-in animation to use. For custom animations, use the `keyframes` prop. */\n  @Prop() name: AnimationName | 'none' = 'none';\n\n  /**\n   * Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when\n   * the animation finishes or gets canceled.\n   */\n  @Prop({ reflect: true, mutable: true }) play = false;\n\n  /** The number of milliseconds to delay the start of the animation. */\n  @Prop() delay = 0;\n\n  /**\n   * Determines the direction of playback as well as the behavior when reaching the end of an iteration.\n   * [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)\n   */\n  @Prop() direction: PlaybackDirection = 'normal';\n\n  /** The number of milliseconds each iteration of the animation takes to complete. */\n  @Prop() duration = 1000;\n\n  /**\n   * The easing function to use for the animation. This can be a easing function or a custom easing function\n   * such as `cubic-bezier(0, 1, .76, 1.14)`.\n   */\n  @Prop() easing: AnimationEasing = 'ease';\n\n  /** The number of milliseconds to delay after the active period of an animation sequence. */\n  @Prop() endDelay = 0;\n\n  /** Sets how the animation applies styles to its target before and after its execution. */\n  @Prop() fill: FillMode = 'auto';\n\n  /** The number of iterations to run before the animation completes. Defaults to `Infinity`, which loops. */\n  @Prop() iterations = Infinity;\n\n  /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */\n  @Prop() iterationStart = 0;\n\n  /** The keyframes to use for the animation. If this is set, `name` will be ignored. */\n  @Prop() keyframes?: Keyframe[];\n\n  /**\n   * Sets the animation's playback rate. The default is `1`, which plays the animation at a normal speed. Setting this\n   * to `2`, for example, will double the animation's speed. A negative value can be used to reverse the animation. This\n   * value can be changed without causing the animation to restart.\n   */\n  @Prop() playbackRate = 1;\n\n  /** Emitted when the animation is canceled. */\n  @Event() nanoCancel: EventEmitter;\n\n  /** Emitted when the animation finishes. */\n  @Event() nanoFinish: EventEmitter;\n\n  /** Emitted when the animation starts. */\n  @Event() nanoStart: EventEmitter;\n\n  /** Gets and sets the current animation time. */\n  @Prop()\n  get currentTime(): CSSNumberish {\n    return this.animation?.currentTime ?? 0;\n  }\n  set currentTime(time: number) {\n    if (this.animation) {\n      this.animation.currentTime = time;\n    }\n  }\n\n  connectedCallback() {\n    this.createAnimation();\n  }\n\n  disconnectedCallback() {\n    this.destroyAnimation();\n  }\n\n  private handleAnimationFinish = () => {\n    this.play = false;\n    this.hasStarted = false;\n    this.nanoFinish.emit();\n  };\n\n  private handleAnimationCancel = () => {\n    this.play = false;\n    this.hasStarted = false;\n    this.nanoCancel.emit();\n  };\n\n  private handleSlotChange = () => {\n    this.destroyAnimation();\n    this.createAnimation();\n  };\n\n  private async createAnimation() {\n    if (!this.defaultSlot) return;\n\n    const easing = easings[this.easing] ?? this.easing;\n    const keyframes =\n      this.keyframes ??\n      (animations as unknown as Partial<Record<string, Keyframe[]>>)[this.name];\n    const slot = this.defaultSlot;\n    const element = slot.assignedElements()[0] as HTMLElement | undefined;\n\n    if (!element || !keyframes) {\n      return false;\n    }\n\n    this.destroyAnimation();\n    this.animation = element.animate(keyframes, {\n      delay: this.delay,\n      direction: this.direction,\n      duration: this.duration,\n      easing,\n      endDelay: this.endDelay,\n      fill: this.fill,\n      iterationStart: this.iterationStart,\n      iterations: this.iterations,\n    });\n    this.animation.playbackRate = this.playbackRate;\n    this.animation.addEventListener('cancel', this.handleAnimationCancel);\n    this.animation.addEventListener('finish', this.handleAnimationFinish);\n\n    if (this.play) {\n      this.hasStarted = true;\n      this.nanoStart.emit();\n    } else {\n      this.animation.pause();\n    }\n\n    return true;\n  }\n\n  private destroyAnimation() {\n    if (this.animation) {\n      this.animation.cancel();\n      this.animation.removeEventListener('cancel', this.handleAnimationCancel);\n      this.animation.removeEventListener('finish', this.handleAnimationFinish);\n      this.hasStarted = false;\n    }\n  }\n\n  @Watch('name')\n  @Watch('delay')\n  @Watch('direction')\n  @Watch('duration')\n  @Watch('easing')\n  @Watch('endDelay')\n  @Watch('fill')\n  @Watch('iterations')\n  @Watch('iterationStart')\n  @Watch('keyframes')\n  handleAnimationChange() {\n    this.createAnimation();\n  }\n\n  @Watch('play')\n  handlePlayChange() {\n    if (this.animation) {\n      if (this.play && !this.hasStarted) {\n        this.hasStarted = true;\n        this.nanoStart.emit();\n      }\n\n      if (this.play) {\n        this.animation.play();\n      } else {\n        this.animation.pause();\n      }\n\n      return true;\n    }\n    return false;\n  }\n\n  @Watch('playbackRate')\n  handlePlaybackRateChange() {\n    if (this.animation) {\n      this.animation.playbackRate = this.playbackRate;\n    }\n  }\n\n  /** Clears all keyframe effects caused by this animation and aborts its playback. */\n  @Method()\n  async cancel() {\n    this.animation?.cancel();\n  }\n\n  /** Sets the playback time to the end of the animation corresponding to the current playback direction. */\n  @Method()\n  async finish() {\n    this.animation?.finish();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot\n          ref={(slot) => (this.defaultSlot = slot as HTMLSlotElement)}\n          onSlotchange={this.handleSlotChange}\n        ></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/animation/animations/attention_seekers/bounce.js

@@ -0,0 +1,43 @@
+export const bounce = [
+  {
+    offset: 0,
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0)',
+  },
+  {
+    offset: 0.2,
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0)',
+  },
+  {
+    offset: 0.4,
+    easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+    transform: 'translate3d(0, -30px, 0) scaleY(1.1)',
+  },
+  {
+    offset: 0.43,
+    easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+    transform: 'translate3d(0, -30px, 0) scaleY(1.1)',
+  },
+  {
+    offset: 0.53,
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0)',
+  },
+  {
+    offset: 0.7,
+    easing: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
+    transform: 'translate3d(0, -15px, 0) scaleY(1.05)',
+  },
+  {
+    offset: 0.8,
+    'transition-timing-function': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0) scaleY(0.95)',
+  },
+  { offset: 0.9, transform: 'translate3d(0, -4px, 0) scaleY(1.02)' },
+  {
+    offset: 1,
+    easing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+    transform: 'translate3d(0, 0, 0)',
+  },
+];

package/dist/collection/components/animation/animations/attention_seekers/flash.js

@@ -0,0 +1,7 @@
+export const flash = [
+  { offset: 0, opacity: '1' },
+  { offset: 0.25, opacity: '0' },
+  { offset: 0.5, opacity: '1' },
+  { offset: 0.75, opacity: '0' },
+  { offset: 1, opacity: '1' },
+];

package/dist/collection/components/animation/animations/attention_seekers/headShake.js

@@ -0,0 +1,8 @@
+export const headShake = [
+  { offset: 0, transform: 'translateX(0)' },
+  { offset: 0.065, transform: 'translateX(-6px) rotateY(-9deg)' },
+  { offset: 0.185, transform: 'translateX(5px) rotateY(7deg)' },
+  { offset: 0.315, transform: 'translateX(-3px) rotateY(-5deg)' },
+  { offset: 0.435, transform: 'translateX(2px) rotateY(3deg)' },
+  { offset: 0.5, transform: 'translateX(0)' },
+];

package/dist/collection/components/animation/animations/attention_seekers/heartBeat.js

@@ -0,0 +1,7 @@
+export const heartBeat = [
+  { offset: 0, transform: 'scale(1)' },
+  { offset: 0.14, transform: 'scale(1.3)' },
+  { offset: 0.28, transform: 'scale(1)' },
+  { offset: 0.42, transform: 'scale(1.3)' },
+  { offset: 0.7, transform: 'scale(1)' },
+];

package/dist/collection/components/animation/animations/attention_seekers/jello.js

@@ -0,0 +1,15 @@
+export const jello = [
+  { offset: 0, transform: 'translate3d(0, 0, 0)' },
+  { offset: 0.111, transform: 'translate3d(0, 0, 0)' },
+  { offset: 0.222, transform: 'skewX(-12.5deg) skewY(-12.5deg)' },
+  { offset: 0.33299999999999996, transform: 'skewX(6.25deg) skewY(6.25deg)' },
+  { offset: 0.444, transform: 'skewX(-3.125deg) skewY(-3.125deg)' },
+  { offset: 0.555, transform: 'skewX(1.5625deg) skewY(1.5625deg)' },
+  {
+    offset: 0.6659999999999999,
+    transform: 'skewX(-0.78125deg) skewY(-0.78125deg)',
+  },
+  { offset: 0.777, transform: 'skewX(0.390625deg) skewY(0.390625deg)' },
+  { offset: 0.888, transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)' },
+  { offset: 1, transform: 'translate3d(0, 0, 0)' },
+];

package/dist/collection/components/animation/animations/attention_seekers/pulse.js

@@ -0,0 +1,5 @@
+export const pulse = [
+  { offset: 0, transform: 'scale3d(1, 1, 1)' },
+  { offset: 0.5, transform: 'scale3d(1.05, 1.05, 1.05)' },
+  { offset: 1, transform: 'scale3d(1, 1, 1)' },
+];

package/dist/collection/components/animation/animations/attention_seekers/rubberBand.js

@@ -0,0 +1,9 @@
+export const rubberBand = [
+  { offset: 0, transform: 'scale3d(1, 1, 1)' },
+  { offset: 0.3, transform: 'scale3d(1.25, 0.75, 1)' },
+  { offset: 0.4, transform: 'scale3d(0.75, 1.25, 1)' },
+  { offset: 0.5, transform: 'scale3d(1.15, 0.85, 1)' },
+  { offset: 0.65, transform: 'scale3d(0.95, 1.05, 1)' },
+  { offset: 0.75, transform: 'scale3d(1.05, 0.95, 1)' },
+  { offset: 1, transform: 'scale3d(1, 1, 1)' },
+];