@ptcwebops/ptcw-design 1.0.5 → 1.0.7

package/dist/esm/lottie-player.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-40bc29fc.js';
+import { r as registerInstance, c as createEvent, h } from './index-8e63c32d.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -16411,360 +16411,360 @@ var PlayMode;
 
 const lottiePlayerCss = ":host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:transparent;--lottie-player-toolbar-icon-color:#999;--lottie-player-toolbar-icon-hover-color:#222;--lottie-player-toolbar-icon-active-color:#555;--lottie-player-seeker-track-color:#CCC;--lottie-player-seeker-thumb-color:rgba(0, 107, 120, 0.8);display:block;width:100%;height:100%}.main{box-sizing:border-box;display:inline-grid;grid-auto-columns:auto;grid-template-rows:auto;position:relative;height:inherit;width:inherit}.main.controls{grid-template-rows:1fr var(--lottie-player-toolbar-height)}.animation{overflow:hidden;height:calc(1fr - var(--lottie-player-toolbar-height))}.toolbar{display:grid;grid-template-columns:32px 32px 1fr 32px 32px;align-items:center;justify-items:center;background-color:var(--lottie-player-toolbar-background-color)}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);display:flex;background:none;border:0;padding:0;outline:none;height:100%}.toolbar button:hover{fill:var(--lottie-player-toolbar-icon-hover-color)}.toolbar button.active{fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button.disabled svg{display:none}.toolbar a{filter:grayscale(100%);display:flex;transition:filter .5s, opacity 0.5s;opacity:0.4;height:100%;align-items:center}.toolbar a:hover{filter:none;display:flex;opacity:1}.seeker{-webkit-appearance:none;width:95%;outline:none}.seeker::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-appearance:none;margin-top:-5px}.seeker:focus::-webkit-slider-runnable-track{background:#999}.seeker::-moz-range-track{width:100%;height:5px;cursor:pointer;background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}.seeker::-ms-fill-lower{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer}.seeker:focus::-ms-fill-lower{background:var(--lottie-player-seeker-track-color)}.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;justify-content:center;height:100%;align-items:center}";
 
-const LottiePlayer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.error = createEvent(this, "error", 7);
-    this.frame = createEvent(this, "frame", 7);
-    this.complete = createEvent(this, "complete", 7);
-    this.looped = createEvent(this, "looped", 7);
-    this.ready = createEvent(this, "ready", 7);
-    this.loaded = createEvent(this, "loaded", 7);
-    this.playing = createEvent(this, "playing", 7);
-    this.paused = createEvent(this, "paused", 7);
-    this.stopped = createEvent(this, "stopped", 7);
-    this.freezed = createEvent(this, "freezed", 7);
-    /**
-     * Play mode.
-     */
-    this.mode = PlayMode.Normal;
-    /**
-     * Autoplay animation on load
-     */
-    this.autoplay = false;
-    /**
-     * Background color.
-     */
-    this.background = 'transparent';
-    /**
-     * Show controls.
-     */
-    this.controls = false;
-    /**
-     * Direction of animation
-     */
-    this.direction = 1;
-    /**
-     * Whether to play on mouse hover
-     */
-    this.hover = false;
-    /**
-     * Whether to loop animation
-     */
-    this.loop = false;
-    /**
-     * Renderer to use.
-     */
-    this.renderer = 'svg';
-    /**
-     * Animation speed.
-     */
-    this.speed = 1;
-    /**
-     * Player state.
-     */
-    this.currentState = PlayerState.Loading;
-    this.intermission = 1;
-    this._counter = 0;
-  }
-  componentDidLoad() {
-    // Add intersection observer for detecting component being out-of-view.
-    if ('IntersectionObserver' in window) {
-      this._io = new IntersectionObserver((entries) => {
-        if (entries[0].isIntersecting) {
-          if (this.currentState === PlayerState.Frozen) {
-            this.play();
-          }
-        }
-        else if (this.currentState === PlayerState.Playing) {
-          this.freeze();
-        }
-      });
-      this._io.observe(this.container);
-    }
-    // Add listener for Visibility API's change event.
-    if (typeof document.hidden !== 'undefined') {
-      document.addEventListener('visibilitychange', () => this.onVisibilityChange());
-    }
-    // Setup lottie player
-    if (this.src) {
-      this.load(this.src);
-    }
-  }
-  load(src) {
-    const options = {
-      container: this.container,
-      loop: false,
-      autoplay: false,
-      renderer: this.renderer,
-      rendererSettings: {
-        scaleMode: 'noScale',
-        clearCanvas: false,
-        progressiveLoad: true,
-        hideOnTransparent: true,
-      },
-    };
-    try {
-      const srcParsed = parseSrc(src);
-      const srcAttrib = typeof srcParsed === 'string' ? 'path' : 'animationData';
-      // Clear previous animation, if any
-      if (this._lottie) {
-        this._lottie.destroy();
-      }
-      // Initialize lottie player and load animation
-      this._lottie = lottie_svg.loadAnimation(Object.assign(Object.assign({}, options), { [srcAttrib]: srcParsed }));
-    }
-    catch (err) {
-      this.currentState = PlayerState.Error;
-      this.error.emit();
-      return;
-    }
-    if (this._lottie) {
-      // Calculate and save the current progress of the animation
-      this._lottie.addEventListener('enterFrame', () => {
-        this.seeker = (this._lottie.currentFrame / this._lottie.totalFrames) * 100;
-        this.frame.emit({
-          frame: this._lottie.currentFrame,
-          seeker: this.seeker
-        });
-      });
-      // Handle animation play complete
-      this._lottie.addEventListener('complete', () => {
-        if (this.currentState !== PlayerState.Playing) {
-          this.complete.emit();
-          return;
-        }
-        if (!this.loop || (this.count && this._counter >= this.count)) {
-          this.complete.emit();
-          return;
-        }
-        if (this.mode === PlayMode.Bounce) {
-          if (this.count) {
-            this._counter += 0.5;
-          }
-          setTimeout(() => {
-            this.looped.emit();
-            if (this.currentState === PlayerState.Playing) {
-              this._lottie.setDirection(this._lottie.playDirection * -1);
-              this._lottie.play();
-            }
-          }, this.intermission);
-        }
-        else {
-          if (this.count) {
-            this._counter += 1;
-          }
-          window.setTimeout(() => {
-            this.looped.emit();
-            if (this.currentState === PlayerState.Playing) {
-              this._lottie.stop();
-              this._lottie.play();
-            }
-          }, this.intermission);
-        }
-      });
-      // Handle lottie-web ready event
-      this._lottie.addEventListener('DOMLoaded', () => {
-        this.ready.emit();
-      });
-      // Handle animation data load complete
-      this._lottie.addEventListener('data_ready', () => {
-        this.loaded.emit();
-      });
-      // Set error state when animation load fail event triggers
-      this._lottie.addEventListener('data_failed', () => {
-        this.currentState = PlayerState.Error;
-        this.error.emit();
-      });
-      // Set handlers to auto play animation on hover if enabled
-      this.container.addEventListener('mouseenter', () => {
-        if (this.hover && this.currentState !== PlayerState.Playing) {
-          this.play();
-        }
-      });
-      this.container.addEventListener('mouseleave', () => {
-        if (this.hover && this.currentState === PlayerState.Playing) {
-          this.stop();
-        }
-      });
-      // Set initial playback speed and direction
-      this.setSpeed(this.speed);
-      this.setDirection(this.direction);
-      // Start playing if autoplay is enabled
-      if (this.autoplay) {
-        this.play();
-      }
-    }
-  }
-  /**
-   * Start playing animation.
-   */
-  async play() {
-    if (!this._lottie) {
-      return;
-    }
-    this._lottie.play();
-    this.currentState = PlayerState.Playing;
-    this.playing.emit();
-  }
-  /**
-   * Stop playing animation.
-   */
-  async pause() {
-    if (!this._lottie) {
-      return;
-    }
-    this._lottie.pause();
-    this.currentState = PlayerState.Paused;
-    this.paused.emit();
-  }
-  /**
-   * Stops animation play.
-   */
-  async stop() {
-    if (!this._lottie) {
-      return;
-    }
-    this._counter = 0;
-    this._lottie.stop();
-    this.currentState = PlayerState.Stopped;
-    this.stopped.emit();
-  }
-  /**
-   * Seek to a given frame.
-   */
-  async seek(value) {
-    if (!this._lottie) {
-      return;
-    }
-    // Extract frame number from either number or percentage value
-    const matches = value.toString().match(/^([0-9]+)(%?)$/);
-    if (!matches) {
-      return;
-    }
-    // Calculate and set the frame number
-    const frame = matches[2] === '%'
-      ? this._lottie.totalFrames * Number(matches[1]) / 100
-      : matches[1];
-    // Set seeker to new frame number
-    this.seeker = frame;
-    // Send lottie player to the new frame
-    if (this.currentState === PlayerState.Playing) {
-      this._lottie.goToAndPlay(frame, true);
-    }
-    else {
-      this._lottie.goToAndStop(frame, true);
-      this._lottie.pause();
-    }
-  }
-  /**
-   * Freeze animation play.
-   * This internal state pauses animation and is used to differentiate between
-   * user requested pauses and component instigated pauses.
-   */
-  freeze() {
-    if (!this._lottie) {
-      return;
-    }
-    this.currentState = PlayerState.Frozen;
-    this.freezed.emit();
-  }
-  async getLottie() {
-    return this._lottie;
-  }
-  /**
-   * Sets animation play speed
-   * @param value Playback speed.
-   */
-  async setSpeed(value = 1) {
-    if (!this._lottie) {
-      return;
-    }
-    this._lottie.setSpeed(value);
-  }
-  /**
-   * Animation play direction.
-   * @param value Direction values.
-  */
-  async setDirection(value) {
-    if (!this._lottie) {
-      return;
-    }
-    this._lottie.setDirection(value);
-  }
-  /**
-   * Sets the looping of the animation.
-   *
-   * @param value Whether to enable looping. Boolean true enables looping.
-   */
-  async setLooping(value) {
-    if (this._lottie) {
-      this.loop = value;
-      this._lottie.loop = value;
-    }
-  }
-  /**
-   * Toggle playing state.
-   */
-  async togglePlay() {
-    return this.currentState === PlayerState.Playing
-      ? this.pause()
-      : this.play();
-  }
-  /**
-   * Toggles animation looping.
-   */
-  async toggleLooping() {
-    this.setLooping(!this.loop);
-  }
-  renderButtonIcon(isPlaying) {
-    if (isPlaying) {
-      return (h("svg", { width: "24", height: "24" }, h("path", { d: "M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" })));
-    }
-    return (h("svg", { width: "24", height: "24" }, h("path", { d: "M8.016 5.016L18.985 12 8.016 18.984V5.015z" })));
-  }
-  renderControls() {
-    const isPlaying = this.currentState === PlayerState.Playing;
-    const isPaused = this.currentState === PlayerState.Paused;
-    const isStopped = this.currentState === PlayerState.Stopped;
-    return (h("div", { class: 'toolbar' }, h("button", { class: {
-        active: isPlaying || isPaused
-      }, onClick: () => this.togglePlay() }, this.renderButtonIcon(isPlaying)), h("button", { class: {
-        active: isStopped
-      }, onClick: () => this.stop() }, h("svg", { width: "24", height: "24" }, h("path", { d: "M6 6h12v12H6V6z" }))), h("input", { class: "seeker", type: "range", min: "0", step: "1", max: "100", value: this.seeker, onInput: e => this.handleSeekChange(e), onMouseDown: () => { this._prevState = this.currentState; this.freeze(); }, onMouseUp: () => { this._prevState === PlayerState.Playing && this.play(); } }), h("button", { class: {
-        'active': this.loop
-      }, onClick: () => this.toggleLooping() }, h("svg", { width: "24", height: "24" }, h("path", { d: "M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z" }))), h("a", { href: "https://www.lottiefiles.com/", target: "_blank" }, h("svg", { width: "24", height: "24", viewBox: "0 0 320 320", "fill-rule": "nonzero" }, h("rect", { fill: "#adadad", x: ".5", y: ".5", width: "100%", height: "100%", rx: "26.73" }), h("path", { d: "M251.304 65.44a16.55 16.55 0 0 1 13.927 18.789c-1.333 9.04-9.73 15.292-18.762 13.954-15.992-2.37-39.95 22.534-66.77 73.74-34.24 65.37-66.113 96.517-99.667 94.032-9.102-.674-15.93-8.612-15.258-17.723s8.592-15.96 17.695-15.286c16.57 1.227 40.908-24.737 67.97-76.4 34.46-65.79 66.764-96.157 100.866-91.105z", fill: "#fff" })))));
-  }
-  render() {
-    return (h("div", { class: {
-        main: true,
-        controls: this.controls
-      } }, h("div", { class: "animation", style: {
-        background: this.background
-      }, ref: ref => this.container = ref }, this.currentState === PlayerState.Error ? h("div", { class: "error" }, "\u26A0\uFE0F") : undefined), this.controls ? this.renderControls() : undefined));
-  }
-  /**
-  * Handle visibility change events.
-  */
-  onVisibilityChange() {
-    if (document.hidden === true && this.currentState === PlayerState.Playing) {
-      this.freeze();
-    }
-    else if (this.currentState === PlayerState.Frozen) {
-      this.play();
-    }
-  }
-  /**
-  * Handles click and drag actions on the progress track.
-  */
-  handleSeekChange(e) {
-    if (!this._lottie || isNaN(e.target.value)) {
-      return;
-    }
-    const frame = ((e.target.value / 100) * this._lottie.totalFrames);
-    this.seek(frame);
-  }
-};
+const LottiePlayer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.error = createEvent(this, "error", 7);
+    this.frame = createEvent(this, "frame", 7);
+    this.complete = createEvent(this, "complete", 7);
+    this.looped = createEvent(this, "looped", 7);
+    this.ready = createEvent(this, "ready", 7);
+    this.loaded = createEvent(this, "loaded", 7);
+    this.playing = createEvent(this, "playing", 7);
+    this.paused = createEvent(this, "paused", 7);
+    this.stopped = createEvent(this, "stopped", 7);
+    this.freezed = createEvent(this, "freezed", 7);
+    /**
+     * Play mode.
+     */
+    this.mode = PlayMode.Normal;
+    /**
+     * Autoplay animation on load
+     */
+    this.autoplay = false;
+    /**
+     * Background color.
+     */
+    this.background = 'transparent';
+    /**
+     * Show controls.
+     */
+    this.controls = false;
+    /**
+     * Direction of animation
+     */
+    this.direction = 1;
+    /**
+     * Whether to play on mouse hover
+     */
+    this.hover = false;
+    /**
+     * Whether to loop animation
+     */
+    this.loop = false;
+    /**
+     * Renderer to use.
+     */
+    this.renderer = 'svg';
+    /**
+     * Animation speed.
+     */
+    this.speed = 1;
+    /**
+     * Player state.
+     */
+    this.currentState = PlayerState.Loading;
+    this.intermission = 1;
+    this._counter = 0;
+  }
+  componentDidLoad() {
+    // Add intersection observer for detecting component being out-of-view.
+    if ('IntersectionObserver' in window) {
+      this._io = new IntersectionObserver((entries) => {
+        if (entries[0].isIntersecting) {
+          if (this.currentState === PlayerState.Frozen) {
+            this.play();
+          }
+        }
+        else if (this.currentState === PlayerState.Playing) {
+          this.freeze();
+        }
+      });
+      this._io.observe(this.container);
+    }
+    // Add listener for Visibility API's change event.
+    if (typeof document.hidden !== 'undefined') {
+      document.addEventListener('visibilitychange', () => this.onVisibilityChange());
+    }
+    // Setup lottie player
+    if (this.src) {
+      this.load(this.src);
+    }
+  }
+  load(src) {
+    const options = {
+      container: this.container,
+      loop: false,
+      autoplay: false,
+      renderer: this.renderer,
+      rendererSettings: {
+        scaleMode: 'noScale',
+        clearCanvas: false,
+        progressiveLoad: true,
+        hideOnTransparent: true,
+      },
+    };
+    try {
+      const srcParsed = parseSrc(src);
+      const srcAttrib = typeof srcParsed === 'string' ? 'path' : 'animationData';
+      // Clear previous animation, if any
+      if (this._lottie) {
+        this._lottie.destroy();
+      }
+      // Initialize lottie player and load animation
+      this._lottie = lottie_svg.loadAnimation(Object.assign(Object.assign({}, options), { [srcAttrib]: srcParsed }));
+    }
+    catch (err) {
+      this.currentState = PlayerState.Error;
+      this.error.emit();
+      return;
+    }
+    if (this._lottie) {
+      // Calculate and save the current progress of the animation
+      this._lottie.addEventListener('enterFrame', () => {
+        this.seeker = (this._lottie.currentFrame / this._lottie.totalFrames) * 100;
+        this.frame.emit({
+          frame: this._lottie.currentFrame,
+          seeker: this.seeker
+        });
+      });
+      // Handle animation play complete
+      this._lottie.addEventListener('complete', () => {
+        if (this.currentState !== PlayerState.Playing) {
+          this.complete.emit();
+          return;
+        }
+        if (!this.loop || (this.count && this._counter >= this.count)) {
+          this.complete.emit();
+          return;
+        }
+        if (this.mode === PlayMode.Bounce) {
+          if (this.count) {
+            this._counter += 0.5;
+          }
+          setTimeout(() => {
+            this.looped.emit();
+            if (this.currentState === PlayerState.Playing) {
+              this._lottie.setDirection(this._lottie.playDirection * -1);
+              this._lottie.play();
+            }
+          }, this.intermission);
+        }
+        else {
+          if (this.count) {
+            this._counter += 1;
+          }
+          window.setTimeout(() => {
+            this.looped.emit();
+            if (this.currentState === PlayerState.Playing) {
+              this._lottie.stop();
+              this._lottie.play();
+            }
+          }, this.intermission);
+        }
+      });
+      // Handle lottie-web ready event
+      this._lottie.addEventListener('DOMLoaded', () => {
+        this.ready.emit();
+      });
+      // Handle animation data load complete
+      this._lottie.addEventListener('data_ready', () => {
+        this.loaded.emit();
+      });
+      // Set error state when animation load fail event triggers
+      this._lottie.addEventListener('data_failed', () => {
+        this.currentState = PlayerState.Error;
+        this.error.emit();
+      });
+      // Set handlers to auto play animation on hover if enabled
+      this.container.addEventListener('mouseenter', () => {
+        if (this.hover && this.currentState !== PlayerState.Playing) {
+          this.play();
+        }
+      });
+      this.container.addEventListener('mouseleave', () => {
+        if (this.hover && this.currentState === PlayerState.Playing) {
+          this.stop();
+        }
+      });
+      // Set initial playback speed and direction
+      this.setSpeed(this.speed);
+      this.setDirection(this.direction);
+      // Start playing if autoplay is enabled
+      if (this.autoplay) {
+        this.play();
+      }
+    }
+  }
+  /**
+   * Start playing animation.
+   */
+  async play() {
+    if (!this._lottie) {
+      return;
+    }
+    this._lottie.play();
+    this.currentState = PlayerState.Playing;
+    this.playing.emit();
+  }
+  /**
+   * Stop playing animation.
+   */
+  async pause() {
+    if (!this._lottie) {
+      return;
+    }
+    this._lottie.pause();
+    this.currentState = PlayerState.Paused;
+    this.paused.emit();
+  }
+  /**
+   * Stops animation play.
+   */
+  async stop() {
+    if (!this._lottie) {
+      return;
+    }
+    this._counter = 0;
+    this._lottie.stop();
+    this.currentState = PlayerState.Stopped;
+    this.stopped.emit();
+  }
+  /**
+   * Seek to a given frame.
+   */
+  async seek(value) {
+    if (!this._lottie) {
+      return;
+    }
+    // Extract frame number from either number or percentage value
+    const matches = value.toString().match(/^([0-9]+)(%?)$/);
+    if (!matches) {
+      return;
+    }
+    // Calculate and set the frame number
+    const frame = matches[2] === '%'
+      ? this._lottie.totalFrames * Number(matches[1]) / 100
+      : matches[1];
+    // Set seeker to new frame number
+    this.seeker = frame;
+    // Send lottie player to the new frame
+    if (this.currentState === PlayerState.Playing) {
+      this._lottie.goToAndPlay(frame, true);
+    }
+    else {
+      this._lottie.goToAndStop(frame, true);
+      this._lottie.pause();
+    }
+  }
+  /**
+   * Freeze animation play.
+   * This internal state pauses animation and is used to differentiate between
+   * user requested pauses and component instigated pauses.
+   */
+  freeze() {
+    if (!this._lottie) {
+      return;
+    }
+    this.currentState = PlayerState.Frozen;
+    this.freezed.emit();
+  }
+  async getLottie() {
+    return this._lottie;
+  }
+  /**
+   * Sets animation play speed
+   * @param value Playback speed.
+   */
+  async setSpeed(value = 1) {
+    if (!this._lottie) {
+      return;
+    }
+    this._lottie.setSpeed(value);
+  }
+  /**
+   * Animation play direction.
+   * @param value Direction values.
+  */
+  async setDirection(value) {
+    if (!this._lottie) {
+      return;
+    }
+    this._lottie.setDirection(value);
+  }
+  /**
+   * Sets the looping of the animation.
+   *
+   * @param value Whether to enable looping. Boolean true enables looping.
+   */
+  async setLooping(value) {
+    if (this._lottie) {
+      this.loop = value;
+      this._lottie.loop = value;
+    }
+  }
+  /**
+   * Toggle playing state.
+   */
+  async togglePlay() {
+    return this.currentState === PlayerState.Playing
+      ? this.pause()
+      : this.play();
+  }
+  /**
+   * Toggles animation looping.
+   */
+  async toggleLooping() {
+    this.setLooping(!this.loop);
+  }
+  renderButtonIcon(isPlaying) {
+    if (isPlaying) {
+      return (h("svg", { width: "24", height: "24" }, h("path", { d: "M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" })));
+    }
+    return (h("svg", { width: "24", height: "24" }, h("path", { d: "M8.016 5.016L18.985 12 8.016 18.984V5.015z" })));
+  }
+  renderControls() {
+    const isPlaying = this.currentState === PlayerState.Playing;
+    const isPaused = this.currentState === PlayerState.Paused;
+    const isStopped = this.currentState === PlayerState.Stopped;
+    return (h("div", { class: 'toolbar' }, h("button", { class: {
+        active: isPlaying || isPaused
+      }, onClick: () => this.togglePlay() }, this.renderButtonIcon(isPlaying)), h("button", { class: {
+        active: isStopped
+      }, onClick: () => this.stop() }, h("svg", { width: "24", height: "24" }, h("path", { d: "M6 6h12v12H6V6z" }))), h("input", { class: "seeker", type: "range", min: "0", step: "1", max: "100", value: this.seeker, onInput: e => this.handleSeekChange(e), onMouseDown: () => { this._prevState = this.currentState; this.freeze(); }, onMouseUp: () => { this._prevState === PlayerState.Playing && this.play(); } }), h("button", { class: {
+        'active': this.loop
+      }, onClick: () => this.toggleLooping() }, h("svg", { width: "24", height: "24" }, h("path", { d: "M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z" }))), h("a", { href: "https://www.lottiefiles.com/", target: "_blank" }, h("svg", { width: "24", height: "24", viewBox: "0 0 320 320", "fill-rule": "nonzero" }, h("rect", { fill: "#adadad", x: ".5", y: ".5", width: "100%", height: "100%", rx: "26.73" }), h("path", { d: "M251.304 65.44a16.55 16.55 0 0 1 13.927 18.789c-1.333 9.04-9.73 15.292-18.762 13.954-15.992-2.37-39.95 22.534-66.77 73.74-34.24 65.37-66.113 96.517-99.667 94.032-9.102-.674-15.93-8.612-15.258-17.723s8.592-15.96 17.695-15.286c16.57 1.227 40.908-24.737 67.97-76.4 34.46-65.79 66.764-96.157 100.866-91.105z", fill: "#fff" })))));
+  }
+  render() {
+    return (h("div", { class: {
+        main: true,
+        controls: this.controls
+      } }, h("div", { class: "animation", style: {
+        background: this.background
+      }, ref: ref => this.container = ref }, this.currentState === PlayerState.Error ? h("div", { class: "error" }, "\u26A0\uFE0F") : undefined), this.controls ? this.renderControls() : undefined));
+  }
+  /**
+  * Handle visibility change events.
+  */
+  onVisibilityChange() {
+    if (document.hidden === true && this.currentState === PlayerState.Playing) {
+      this.freeze();
+    }
+    else if (this.currentState === PlayerState.Frozen) {
+      this.play();
+    }
+  }
+  /**
+  * Handles click and drag actions on the progress track.
+  */
+  handleSeekChange(e) {
+    if (!this._lottie || isNaN(e.target.value)) {
+      return;
+    }
+    const frame = ((e.target.value / 100) * this._lottie.totalFrames);
+    this.seek(frame);
+  }
+};
 LottiePlayer.style = lottiePlayerCss;
 
 export { LottiePlayer as lottie_player };