@dso-toolkit/core 54.3.0 → 56.0.0

package/dist/components/expandable.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
-import { d as debounce_1 } from './index3.js';
+import { d as debounce_1 } from './index2.js';
 
 /*
  * anime.js v3.2.1
@@ -1317,7 +1317,7 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class Expandable extends HTM
     super();
     this.__registerHost();
     this.__attachShadow();
-    this._animationInstantiated = createEvent(this, "_animationInstantiated", 7);
+    this.dsoExpandableAnimationEnd = createEvent(this, "dsoExpandableAnimationEnd", 3);
     this.open = undefined;
     this.enableAnimation = false;
     this.minimumHeight = undefined;
@@ -1340,32 +1340,15 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class Expandable extends HTM
       this.host.removeAttribute("style");
     }
   }
-  /**
-   * @internal
-   */
-  async _getAnimeInstance() {
-    return this.animeInstance;
-  }
-  /**
-   * @internal
-   */
-  async _getBodyHeight() {
-    return this.bodyHeight;
-  }
-  componentWillLoad() {
+  componentDidLoad() {
     if (this.enableAnimation) {
       this.prepareAnimationResizeObserver();
     }
-  }
-  componentDidLoad() {
     this.activateObserver();
   }
   activateObserver() {
     var _a;
-    const bodyContentElement = this.host.querySelector(`[slot="expandable-content"]`);
-    if (bodyContentElement) {
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(bodyContentElement);
-    }
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
   }
   disconnectedCallback() {
     var _a;
@@ -1375,7 +1358,7 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class Expandable extends HTM
     return (h(Host, { "aria-hidden": this.open ? "false" : "true", class: clsx({
         "dso-animate-ready": this.enableAnimation && this.animationReady,
         "dso-hide": !this.enableAnimation && !this.open,
-      }) }, h("slot", { name: "expandable-content" })));
+      }) }, h("slot", null)));
   }
   prepareAnimationResizeObserver() {
     this.resizeObserver = new ResizeObserver(debounce_1(([entry]) => {
@@ -1387,8 +1370,8 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class Expandable extends HTM
       if (this.bodyHeight !== height) {
         this.bodyHeight = height;
       }
-      this.instantiateAnimation();
     }, 150));
+    this.instantiateAnimation();
   }
   instantiateAnimation() {
     var _a;
@@ -1400,24 +1383,23 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class Expandable extends HTM
       autoplay: false,
       direction: "normal",
       begin: () => {
-        if (this.host) {
-          if (this.open) {
-            this.host.style.visibility = "";
-            this.host.style.position = "";
-            this.host.style.bottom = "";
-          }
+        if (this.open) {
+          this.host.style.visibility = "";
+          this.host.style.position = "";
+          this.host.style.bottom = "";
         }
       },
       complete: () => {
-        if (this.host) {
-          this.host.style.height = "";
-          if (!this.open) {
-            this.host.style.visibility = "hidden";
-            this.host.style.position = "absolute";
-            this.host.style.bottom = "100%";
-          }
+        this.host.style.height = "";
+        if (!this.open) {
+          this.host.style.visibility = "hidden";
+          this.host.style.position = "absolute";
+          this.host.style.bottom = "100%";
         }
       },
+      changeComplete: () => {
+        this.dsoExpandableAnimationEnd.emit({ bodyHeight: this.bodyHeight });
+      },
     });
     if (!this.open) {
       this.animeInstance.reverse();
@@ -1427,7 +1409,6 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class Expandable extends HTM
       this.host.style.height = "";
     }
     this.animationReady = !!this.animeInstance;
-    this._animationInstantiated.emit();
   }
   activateAnimation() {
     if (this.animeInstance) {
@@ -1456,9 +1437,7 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class Expandable extends HTM
     "open": [516],
     "enableAnimation": [4, "enable-animation"],
     "minimumHeight": [2, "minimum-height"],
-    "animationReady": [32],
-    "_getAnimeInstance": [64],
-    "_getBodyHeight": [64]
+    "animationReady": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {