energy-components 1.24.0 → 1.25.0

package/dist/components/collapsable.es.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./collapsable.scss_vue_type_style_index_0_src_true_lang-f-OHx-l3.js";
+import { _ as f } from "./collapsable.scss_vue_type_style_index_0_src_true_lang-Crh76VTR.js";
 export {
   f as default
 };

package/dist/components/collapsable.scss_vue_type_style_index_0_src_true_lang-Crh76VTR.js

@@ -0,0 +1,105 @@
+import { defineComponent as N, ref as r, computed as c, watch as y, nextTick as s, onMounted as R, onBeforeUnmount as S, createElementBlock as $, openBlock as g, normalizeClass as u, createElementVNode as d, withKeys as I, createBlock as L, createCommentVNode as V, createVNode as z, toDisplayString as x, renderSlot as H, createTextVNode as D } from "vue";
+import { R as k } from "./icon-svg-K8-vLJgV.js";
+import './style/collapsable.css';const K = ["id", "aria-expanded", "aria-controls", "disabled"], M = { class: "rds-e-collapsable__header-title" }, T = { class: "rds-e-collapsable__header-title-text" }, W = ["id", "aria-labelledby"], j = /* @__PURE__ */ N({
+  __name: "collapsable",
+  props: {
+    title: {},
+    content: { default: "" },
+    icon: { default: "" },
+    open: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    fullWidth: { type: Boolean, default: !1 },
+    id: { default: "" }
+  },
+  emits: ["update:open"],
+  setup(a, { emit: B }) {
+    const i = a, E = B, e = r(i.open), p = r(null), t = r(null);
+    let n = null;
+    const v = () => {
+      e.value && s(() => o());
+    }, f = c(() => i.id || `rds-collapsable-${Math.random().toString(36).substr(2, 9)}`), b = c(() => `${f.value}-panel`), m = c(() => `${f.value}-header`);
+    function o() {
+      const l = p.value;
+      if (!l || !t.value) return;
+      const _ = t.value.scrollHeight;
+      l.style.overflow = "hidden";
+      const w = (C) => {
+        C.propertyName === "max-height" && (l.removeEventListener("transitionend", w), l.style.overflow = e.value ? "visible" : "hidden");
+      };
+      l.addEventListener("transitionend", w, { once: !0 }), l.style.maxHeight = e.value ? `${_}px` : "0px";
+    }
+    const h = () => {
+      i.disabled || (e.value = !e.value, E("update:open", e.value), s(() => {
+        o();
+      }));
+    };
+    return y(() => i.open, (l) => {
+      e.value = l, s(() => {
+        o();
+      });
+    }), y(e, () => {
+      s(() => {
+        o();
+      });
+    }, { immediate: !0 }), R(() => {
+      "ResizeObserver" in window && (n = new ResizeObserver(() => {
+        e.value && o();
+      }), s(() => {
+        t.value && (n == null || n.observe(t.value));
+      })), window.addEventListener("resize", v, { passive: !0 });
+    }), S(() => {
+      window.removeEventListener("resize", v), n == null || n.disconnect(), n = null;
+    }), (l, _) => (g(), $("div", {
+      class: u(["rds-e-collapsable", {
+        "rds-e-collapsable--open": e.value,
+        "rds-e-collapsable--disabled": a.disabled,
+        "rds-e-collapsable--full-width": a.fullWidth
+      }])
+    }, [
+      d("button", {
+        id: m.value,
+        class: "rds-e-collapsable__header",
+        type: "button",
+        "aria-expanded": e.value,
+        "aria-controls": b.value,
+        disabled: a.disabled,
+        onClick: h,
+        onKeydown: I(h, ["enter", "space"])
+      }, [
+        a.icon ? (g(), L(k, {
+          key: 0,
+          name: a.icon,
+          class: "rds-e-collapsable__header-icon"
+        }, null, 8, ["name"])) : V("", !0),
+        d("span", M, [
+          d("span", T, x(a.title), 1)
+        ]),
+        z(k, {
+          class: u(["rds-e-collapsable__header-arrow", { "rds-e-collapsable__header-arrow--open": e.value }]),
+          name: "arrow_down"
+        }, null, 8, ["class"])
+      ], 40, K),
+      d("div", {
+        id: b.value,
+        ref_key: "panel",
+        ref: p,
+        class: u(["rds-e-collapsable__panel", { "rds-e-collapsable__panel--open": e.value }]),
+        role: "region",
+        "aria-labelledby": m.value
+      }, [
+        d("div", {
+          ref_key: "panelContent",
+          ref: t,
+          class: "rds-e-collapsable__panel-content"
+        }, [
+          H(l.$slots, "default", {}, () => [
+            D(x(a.content), 1)
+          ])
+        ], 512)
+      ], 10, W)
+    ], 2));
+  }
+});
+export {
+  j as _
+};