energy-components 1.10.1 → 1.11.0

package/dist/components/collapsable.es.js

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

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

@@ -0,0 +1,86 @@
+import { defineComponent as w, ref as d, computed as r, watch as f, nextTick as c, createElementBlock as B, openBlock as m, normalizeClass as i, createElementVNode as a, withKeys as C, createBlock as S, createCommentVNode as $, createVNode as I, toDisplayString as v, renderSlot as N, createTextVNode as V } from "vue";
+import { R as h } from "./icon-svg-DuzOdbk1.js";
+import './style/collapsable.css';const H = ["id", "aria-expanded", "aria-controls", "disabled"], x = { class: "rds-e-collapsable__header-title" }, D = { class: "rds-e-collapsable__header-title-text" }, E = ["id", "aria-labelledby"], W = /* @__PURE__ */ w({
+  __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(y, { emit: g }) {
+    const o = y, k = g, l = d(o.open), t = d(null), s = d(null), p = r(() => o.id || `rds-collapsable-${Math.random().toString(36).substr(2, 9)}`), u = r(() => `${p.value}-panel`), b = r(() => `${p.value}-header`), n = () => {
+      if (!t.value || !s.value) return;
+      const e = s.value.scrollHeight;
+      t.value.style.maxHeight = l.value ? `${e}px` : "0px";
+    }, _ = () => {
+      o.disabled || (l.value = !l.value, k("update:open", l.value), c(() => {
+        n();
+      }));
+    };
+    return f(() => o.open, (e) => {
+      l.value = e, c(() => {
+        n();
+      });
+    }), f(l, () => {
+      c(() => {
+        n();
+      });
+    }, { immediate: !0 }), (e, K) => (m(), B("div", {
+      class: i(["rds-e-collapsable", {
+        "rds-e-collapsable--open": l.value,
+        "rds-e-collapsable--disabled": e.disabled,
+        "rds-e-collapsable--full-width": e.fullWidth
+      }])
+    }, [
+      a("button", {
+        id: b.value,
+        class: "rds-e-collapsable__header",
+        type: "button",
+        "aria-expanded": l.value,
+        "aria-controls": u.value,
+        disabled: e.disabled,
+        onClick: _,
+        onKeydown: C(_, ["enter", "space"])
+      }, [
+        e.icon ? (m(), S(h, {
+          key: 0,
+          name: e.icon,
+          class: "rds-e-collapsable__header-icon"
+        }, null, 8, ["name"])) : $("", !0),
+        a("span", x, [
+          a("span", D, v(e.title), 1)
+        ]),
+        I(h, {
+          class: i(["rds-e-collapsable__header-arrow", { "rds-e-collapsable__header-arrow--open": l.value }]),
+          name: "arrow_down"
+        }, null, 8, ["class"])
+      ], 40, H),
+      a("div", {
+        id: u.value,
+        ref_key: "panel",
+        ref: t,
+        class: i(["rds-e-collapsable__panel", { "rds-e-collapsable__panel--open": l.value }]),
+        role: "region",
+        "aria-labelledby": b.value
+      }, [
+        a("div", {
+          ref_key: "panelContent",
+          ref: s,
+          class: "rds-e-collapsable__panel-content"
+        }, [
+          N(e.$slots, "default", {}, () => [
+            V(v(e.content), 1)
+          ])
+        ], 512)
+      ], 10, E)
+    ], 2));
+  }
+});
+export {
+  W as _
+};