@lottiefiles/dotlottie-wc/dist/base-dotlottie-wc.js

Web component wrapper around the dotlottie-web library

import{c as e,i as t,n,o as r,r as i,s as a,t as o}from"./decorate-C0oFmnNg.js";var s=class extends r{constructor(...e){super(...e),this.dotLottie=null}_init(){let e=document.createElement(`canvas`);this.shadowRoot?.appendChild(e),this.dotLottie=this._createDotLottieInstance({canvas:e,src:this.src,data:this.data,loop:this.loop,autoplay:this.autoplay,speed:this.speed,segment:this.segment,marker:this.marker,mode:this.mode,renderConfig:this.renderConfig,useFrameInterpolation:this.useFrameInterpolation,themeId:this.themeId,animationId:this.animationId,stateMachineConfig:this.stateMachineConfig,stateMachineId:this.stateMachineId,backgroundColor:this.backgroundColor,workerId:this.workerId})}connectedCallback(){super.connectedCallback(),this._init()}adoptedCallback(){this._init()}disconnectedCallback(){super.disconnectedCallback(),this.dotLottie?.destroy(),this.dotLottie=null,this.shadowRoot?.querySelector(`canvas`)?.remove()}attributeChangedCallback(e,t,n){if(super.attributeChangedCallback(e,t,n),!(!this.dotLottie||t===n)){if(e===`segment`){let e=JSON.parse(n??`[]`);Array.isArray(e)&&e.length===2&&typeof e[0]==`number`&&typeof e[1]==`number`?this.dotLottie.setSegment(e[0],e[1]):this.dotLottie.resetSegment()}e===`mode`&&this.dotLottie.setMode(n||`forward`),e===`speed`&&this.dotLottie.setSpeed(n?Number(n):1),e===`loop`&&this.dotLottie.setLoop(!!n),e===`useframeinterpolation`&&this.dotLottie.setUseFrameInterpolation(typeof n==`string`?JSON.parse(n):!0),e===`themeid`&&this.dotLottie.setTheme(n??``),e===`backgroundcolor`&&this.dotLottie.setBackgroundColor(n??``),e===`renderconfig`&&this.dotLottie.setRenderConfig(JSON.parse(n??`{}`)),e===`animationid`&&n&&this.dotLottie.loadAnimation(n),e===`marker`&&this.dotLottie.setMarker(n??``),e===`src`&&n&&this.dotLottie.load({src:n,data:this.data,loop:this.loop,autoplay:this.autoplay,speed:this.speed,segment:this.segment,marker:this.marker,mode:this.mode,renderConfig:this.renderConfig,useFrameInterpolation:this.useFrameInterpolation,themeId:this.themeId,stateMachineConfig:this.stateMachineConfig,stateMachineId:this.stateMachineId,backgroundColor:this.backgroundColor}),e===`data`&&n&&this.dotLottie.load({src:this.src,data:n,loop:this.loop,autoplay:this.autoplay,speed:this.speed,segment:this.segment,marker:this.marker,mode:this.mode,renderConfig:this.renderConfig,useFrameInterpolation:this.useFrameInterpolation,themeId:this.themeId,animationId:this.animationId,stateMachineConfig:this.stateMachineConfig,stateMachineId:this.stateMachineId,backgroundColor:this.backgroundColor}),e===`statemachineid`&&this.dotLottie.isLoaded&&(n?this.dotLottie.stateMachineLoad(n)&&this.dotLottie.stateMachineStart():this.dotLottie.stateMachineStop()),e===`statemachineconfig`&&this.dotLottie.stateMachineSetConfig(n?JSON.parse(n):null)}}render(){return a`<slot></slot>`}};s.styles=e`
    :host {
      display: block;
      position: relative;
    }

    :host > canvas {
      width: 100%;
      height: 100%;
    }
  `,o([t({type:String}),n(`design:type`,String)],s.prototype,`animationId`,void 0),o([t({type:String}),n(`design:type`,Object)],s.prototype,`src`,void 0),o([t({type:String}),n(`design:type`,Object)],s.prototype,`data`,void 0),o([t({type:Boolean}),n(`design:type`,Object)],s.prototype,`loop`,void 0),o([t({type:Boolean}),n(`design:type`,Object)],s.prototype,`autoplay`,void 0),o([t({type:Number}),n(`design:type`,Object)],s.prototype,`speed`,void 0),o([t({type:Array}),n(`design:type`,Object)],s.prototype,`segment`,void 0),o([t({type:String}),n(`design:type`,Object)],s.prototype,`mode`,void 0),o([t({type:String}),n(`design:type`,Object)],s.prototype,`marker`,void 0),o([t({type:String}),n(`design:type`,Object)],s.prototype,`backgroundColor`,void 0),o([t({type:Object}),n(`design:type`,Object)],s.prototype,`renderConfig`,void 0),o([t({type:Boolean,converter:{fromAttribute:e=>e!==null&&e!==`false`}}),n(`design:type`,Object)],s.prototype,`useFrameInterpolation`,void 0),o([t({type:String}),n(`design:type`,Object)],s.prototype,`themeId`,void 0),o([t({type:String}),n(`design:type`,String)],s.prototype,`workerId`,void 0),o([t({type:String}),n(`design:type`,Object)],s.prototype,`stateMachineId`,void 0),o([t({type:Object}),n(`design:type`,Object)],s.prototype,`stateMachineConfig`,void 0),o([i(),n(`design:type`,Object)],s.prototype,`dotLottie`,void 0);export{s as BaseDotLottieWC};
//# sourceMappingURL=base-dotlottie-wc.js.map