@sula-tech/webcomponents 0.17.4 → 0.17.5

package/dist/types/components/sula-loader/sula-loader.d.ts

@@ -1,15 +1,19 @@
 import { AnimationItem } from 'lottie-web';
 import { SulaLoaderSize } from './model/sula-loader.model';
 export declare class SulaLoader {
-    el: HTMLElement;
+    el?: HTMLElement;
     /**
      * Tamanho predefinido (small, medium, large)
      */
     size: SulaLoaderSize;
-    animationInstance: AnimationItem;
-    containerRef: HTMLDivElement;
+    animationInstance: AnimationItem | null;
+    containerRef?: HTMLDivElement;
+    connectedCallback(): void;
     componentDidLoad(): void;
+    componentDidRender(): void;
     disconnectedCallback(): void;
+    private destroyAnimation;
+    private tryInitLottie;
     initLottie(): void;
     getDimensions(): {
         width: string;

package/dist/webcomponents/{p-f62433bd.entry.js → p-342be8e3.entry.js}

@@ -21029,17 +21029,29 @@ const SulaLoader = class {
     /**
          * Tamanho predefinido (small, medium, large)
          */    this.size = SulaLoaderSize.Medium;
+    this.animationInstance = null;
+  }
+  connectedCallback() {
+    this.tryInitLottie();
   }
   componentDidLoad() {
-    this.initLottie();
+    this.tryInitLottie();
+  }
+  componentDidRender() {
+    this.tryInitLottie();
   }
   disconnectedCallback() {
-    if (this.animationInstance) {
-      this.animationInstance.destroy();
+    this.destroyAnimation();
+  }
+  destroyAnimation() {
+    if (!this.animationInstance) {
+      return;
     }
+    this.animationInstance.destroy();
+    this.animationInstance = null;
   }
-  initLottie() {
-    if (!this.containerRef) return;
+  tryInitLottie() {
+    if (!this.containerRef || this.animationInstance) return;
     try {
       const e = loaderAnimation;
       this.animationInstance = lottie.loadAnimation({
@@ -21054,6 +21066,9 @@ const SulaLoader = class {
       console.error("Erro ao carregar animação Lottie:", e);
     }
   }
+  initLottie() {
+    this.tryInitLottie();
+  }
   getDimensions() {
     const e = {
       small: "24px",
@@ -21068,9 +21083,9 @@ const SulaLoader = class {
   render() {
     const {width: e, height: t} = this.getDimensions();
     return h$1(Host, {
-      key: "abd6665256f4e7173603ccc791b20f884bf9e9b6"
+      key: "4d73099f19f4e81ed2cd83ee1402e0f06f71f7ca"
     }, h$1("div", {
-      key: "41f9fb073388d7fc2a1585231fb8c257e5996847",
+      key: "2593fe1c91bf4c7f167caa55fdc476d0a9d73841",
       ref: e => this.containerRef = e,
       style: {
         width: e,
@@ -25097,4 +25112,4 @@ SulaTooltip.style = sulaTooltipCss;
 
 export { SulaAvatar as sula_avatar, SulaBadge as sula_badge, SulaBreadcrumb as sula_breadcrumb, SulaButton as sula_button, SulaCheckbox as sula_checkbox, SulaChip as sula_chip, SulaDropdown as sula_dropdown, SulaIcon as sula_icon, SulaLoader as sula_loader, SulaMenuSelectList as sula_menu_select_list, SulaModal as sula_modal, SulaProgressBar as sula_progress_bar, SulaRadioButton as sula_radio_button, SulaSearchBar as sula_search_bar, SulaSegmentedControl as sula_segmented_control, SulaSwitch as sula_switch, SulaTable as sula_table, SulaTableBody as sula_table_body, SulaTableCell as sula_table_cell, SulaTableHeadCell as sula_table_head_cell, SulaTableHeader as sula_table_header, SulaTableRow as sula_table_row, SulaTag as sula_tag, SulaTextarea as sula_textarea, SulaTextfield as sula_textfield, SulaTiles as sula_tiles, SulaTimelineList as sula_timeline_list, SulaToggle as sula_toggle, SulaTooltip as sula_tooltip };
 //# sourceMappingURL=sula-avatar.sula-badge.sula-breadcrumb.sula-button.sula-checkbox.sula-chip.sula-dropdown.sula-icon.sula-loader.sula-menu-select-list.sula-modal.sula-progress-bar.sula-radio-button.sula-search-bar.sula-segmented-control.sula-switch.sula-table.sula-table-body.sula-table-cell.sula-table-head-cell.sula-table-header.sula-table-row.sula-tag.sula-textarea.sula-textfield.sula-tiles.sula-timeline-list.sula-toggle.sula-tooltip.entry.esm.js.map
-//# sourceMappingURL=p-f62433bd.entry.js.map
+//# sourceMappingURL=p-342be8e3.entry.js.map