@designbasekorea/ui-wc 0.8.2 → 0.8.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,20 +0,0 @@
1
- declare class DbLottie extends HTMLElement {
2
- private container?;
3
- private animation?;
4
- private loadToken;
5
- static get observedAttributes(): string[];
6
- connectedCallback(): void;
7
- disconnectedCallback(): void;
8
- attributeChangedCallback(): void;
9
- private getBool;
10
- private getSizeStyle;
11
- private destroyAnimation;
12
- private renderAnimation;
13
- }
14
- declare global {
15
- interface HTMLElementTagNameMap {
16
- 'db-lottie': DbLottie;
17
- }
18
- }
19
-
20
- export { DbLottie };
@@ -1 +0,0 @@
1
- const t="designbase-wc-lottie";class DbLottie extends HTMLElement{constructor(){super(...arguments),this.loadToken=0}static get observedAttributes(){return["src","animation-data","loop","autoplay","speed","width","height","renderer"]}connectedCallback(){this.style.display="inline-block",this.renderAnimation()}disconnectedCallback(){this.destroyAnimation(),this.container?.remove(),this.container=void 0}attributeChangedCallback(){this.isConnected&&this.renderAnimation()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}getSizeStyle(t){if(!t)return;const e=Number(t);return Number.isFinite(e)?`${e}px`:t}destroyAnimation(){this.animation?.destroy(),this.animation=void 0}async renderAnimation(){const e=++this.loadToken;this.destroyAnimation(),this.container?this.container.replaceChildren():(this.container=document.createElement("div"),this.container.className=`${t}__container`,this.appendChild(this.container));const i=this.getSizeStyle(this.getAttribute("width")),n=this.getSizeStyle(this.getAttribute("height"));if(i&&(this.style.width=i),n&&(this.style.height=n),e!==this.loadToken||!this.container)return;const o=this.getBool("loop",!0),s=!this.hasAttribute("autoplay")||this.getBool("autoplay",!0),a=Number(this.getAttribute("speed")||1),r=this.getAttribute("renderer")||"svg";let h;const c=this.getAttribute("animation-data");if(c)try{h=JSON.parse(c)}catch{h=void 0}const d=this.getAttribute("src");if(!h&&!d){const e=document.createElement("div");return e.className=`${t}__fallback`,e.textContent="src 또는 animation-data 속성이 필요합니다.",void this.container.appendChild(e)}const l=await import("lottie-web"),u=l.default??l;e===this.loadToken&&this.container&&(this.animation=u.loadAnimation({container:this.container,renderer:r,loop:o,autoplay:s,...h?{animationData:h}:{path:d}}),Number.isFinite(a)&&a>0&&this.animation.setSpeed(a))}}customElements.get("db-lottie")||customElements.define("db-lottie",DbLottie);export{DbLottie};