@cling-se/widget 0.17.3 → 0.18.1

package/dist/Index-OcBnU480.js

@@ -0,0 +1,200 @@
+import { m as P } from "./mapFormMixin-Cgvwie9a.js";
+import { f as C } from "./focusDrawerMixin-r-OZchfV.js";
+import { z as c, X as S, _ as g, o as a, b as d, F as y, k as w, c as l, ap as h, w as f, l as _, d as k, f as z, $ as b, e as p } from "./main-DI0diChK.js";
+import { M as H, g as I } from "./splitpanes-BypKTSRL.js";
+const M = {
+  name: "HeaderItems",
+  components: {
+    MediaWrapper: c(() => import("./MediaWrapper-BYdVpmov.js")),
+    ContentWrapper: c(() => import("./ContentWrapper-CQtaGA2u.js")),
+    Splitpanes: H,
+    Pane: I
+  },
+  emits: ["input"],
+  mixins: [P(["layout", "items", "baseStyle"])],
+  props: {
+    showControls: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    forceHorizontal() {
+      return this.device === "mobile";
+    },
+    canResize() {
+      return this.device === "desktop" || this.device === "tablet";
+    },
+    useSplitPane() {
+      return this.canEdit && this.canResize;
+    }
+  },
+  created() {
+    ["layout", "useSplitPane"].forEach(
+      (e) => this.$watch(e, {
+        immediate: !0,
+        handler: this.addNoDragClass
+      })
+    );
+  },
+  methods: {
+    addNoDragClass() {
+      !this.useSplitPane || !["vertical", "horizontal"].includes(this.layout) || setTimeout(() => {
+        var s;
+        const e = ((s = this.$el) == null ? void 0 : s.nextElementSibling) || this.$el, t = e == null ? void 0 : e.querySelector(".splitpanes__splitter");
+        t && !t.classList.contains("no-drag") && t.classList.add("no-drag");
+      }, 0);
+    },
+    onResize: S(function([{ size: t }]) {
+      const s = Math.round(t), v = 100 - s;
+      this.items = this.items.map((r, o) => ({ ...r, size: [s, v][o] }));
+    }, 100)
+  }
+}, N = {
+  key: 0,
+  style: { position: "relative", "min-height": "calc(100 * var(--vh, 1vh))" }
+};
+function R(e, t, s, v, r, o) {
+  return e.layout === "center" ? (a(), d("div", N, [
+    (a(!0), d(y, null, w(e.items, (n, i) => (a(), l(h(`${n.type}Wrapper`), {
+      key: i,
+      size: n.size,
+      _document: e._document,
+      _value: { ...e._value, item: `${e._value.items}.${i}` },
+      "has-hover": s.showControls,
+      class: "item",
+      style: { position: "absolute", left: "0", top: "0", right: "0", bottom: "0" },
+      onInput: t[0] || (t[0] = (u) => e.$emit("input", u))
+    }, null, 40, ["size", "_document", "_value", "has-hover"]))), 128))
+  ])) : (a(), l(h(o.useSplitPane ? "splitpanes" : "div"), {
+    key: 1,
+    horizontal: o.forceHorizontal ? !0 : e.layout === "horizontal",
+    vertical: o.forceHorizontal ? !1 : e.layout === "vertical",
+    style: _(
+      !e.canEdit && {
+        "flex-direction": o.forceHorizontal || e.layout === "horizontal" ? "column" : "row"
+      }
+    ),
+    class: "layout-wrapper",
+    onResize: o.onResize
+  }, {
+    default: f(() => [
+      (a(!0), d(y, null, w(e.items, (n, i) => (a(), l(h(o.useSplitPane ? "pane" : "div"), {
+        key: i,
+        size: n.size,
+        style: _(
+          !o.useSplitPane && {
+            flex: `1 1 ${n.size}%`
+          }
+        )
+      }, {
+        default: f(() => [
+          (a(), l(h(`${n.type}Wrapper`), {
+            _document: e._document,
+            _value: { ...e._value, item: `${e._value.items}.${i}` },
+            "has-hover": s.showControls,
+            class: "item",
+            onInput: t[1] || (t[1] = (u) => e.$emit("input", u))
+          }, null, 40, ["_document", "_value", "has-hover"]))
+        ]),
+        _: 2
+      }, 1032, ["size", "style"]))), 128))
+    ]),
+    _: 1
+  }, 40, ["horizontal", "vertical", "style", "onResize"]));
+}
+const B = /* @__PURE__ */ g(M, [["render", R], ["__scopeId", "data-v-fe42e792"]]), D = {
+  name: "HeaderBlock",
+  components: {
+    PriceHeader: c(() => import("./PriceHeader-BSwv3mzc.js")),
+    HeaderSettings: c(() => import("./HeaderSettings-DWN0TjVD.js")),
+    HeaderItems: B
+  },
+  emits: ["input"],
+  mixins: [P(["header"]), C],
+  data() {
+    return {
+      showControls: !1
+    };
+  },
+  computed: {
+    layout() {
+      var e;
+      return (e = this.header) == null ? void 0 : e.layout;
+    },
+    items() {
+      var e;
+      return ((e = this.header) == null ? void 0 : e.items) || [];
+    },
+    mediaPath() {
+      const e = this.items.findIndex(({ type: t }) => t === "media");
+      return e !== -1 ? `${this._value.header}.items.${e}.media` : "";
+    },
+    contentPath() {
+      const e = this.items.findIndex(({ type: t }) => t === "content");
+      return e !== -1 ? `${this._value.header}.items.${e}` : "";
+    }
+  }
+};
+function E(e, t, s, v, r, o) {
+  const n = p("PriceHeader"), i = p("HeaderItems"), u = p("HeaderSettings"), $ = p("portal");
+  return a(), d("div", b(e.$attrs, {
+    class: [{
+      "has-parent-nav": e.viewSettings.isForm,
+      "has-hover": r.showControls
+    }, "header-root"],
+    onMouseoverPassive: t[2] || (t[2] = (m) => r.showControls = !0),
+    onMouseleavePassive: t[3] || (t[3] = (m) => r.showControls = !1)
+  }), [
+    o.layout === "price" ? (a(), l(n, {
+      key: 0,
+      _document: e._document,
+      _value: {
+        media: o.mediaPath,
+        backgroundColor: `${o.contentPath}.media.backgroundColor`,
+        documentName: `${o.contentPath}.value.documentName`,
+        showLogo: `${o.contentPath}.value.showLogo`,
+        logotype: `${o.contentPath}.value.logotype`,
+        showPriceSummary: `${e._value.header}.showPriceSummary`
+      },
+      "has-hover": r.showControls,
+      onInput: t[0] || (t[0] = (m) => e.$emit("input", m))
+    }, null, 8, ["_document", "_value", "has-hover"])) : (a(), l(i, {
+      key: 1,
+      _document: e._document,
+      _value: {
+        layout: `${e._value.header}.layout`,
+        items: `${e._value.header}.items`,
+        baseStyle: `${e._value.header}.baseStyle`
+      },
+      "show-controls": r.showControls,
+      onInput: t[1] || (t[1] = (m) => e.$emit("input", m))
+    }, null, 8, ["_document", "_value", "show-controls"])),
+    e.isForm ? (a(), d(y, { key: 2 }, [
+      e.showDrawer ? (a(), l($, {
+        key: 0,
+        to: "drawer-content"
+      }, {
+        default: f(() => [
+          k(u, {
+            _document: e._document,
+            _value: {
+              layout: `${e._value.header}.layout`,
+              items: `${e._value.header}.items`,
+              showPriceSummary: `${e._value.header}.showPriceSummary`,
+              media: o.mediaPath,
+              backgroundColor: `${o.contentPath}.media.backgroundColor`,
+              textAlign: `${e._value.header}.baseStyle.textAlign`,
+              textColor: `${e._value.header}.baseStyle.textColor`
+            }
+          }, null, 8, ["_document", "_value"])
+        ]),
+        _: 1
+      })) : z("", !0)
+    ], 64)) : z("", !0)
+  ], 16);
+}
+const V = /* @__PURE__ */ g(D, [["render", E]]);
+export {
+  V as default
+};