@cling-se/widget 0.17.0 → 1.0.0-beta.2

package/dist/HeaderSettings-DvC7nlyY.js

@@ -0,0 +1,720 @@
+import { m as F } from "./mapFormMixin-D3BihYWW.js";
+import { T as U } from "./ThemeColorRow-sjGdMzGN.js";
+import P from "./VideoPlayerInput-BsUcmpl4.js";
+import j from "./ImageUploadWrapper-RWNa-yIq.js";
+import { B as H, a as $ } from "./index-DKMxIBz_.js";
+import { p as S, _ as A, a4 as V, av as R, b as g, o as a, c as x, w as c, s as l, d as u, F as _, k as L, l as B, v as h, e as p, B as w, f as z, Y as O, b5 as D, S as W, E as q, ao as M, b6 as N, n as I, af as E } from "./main-Cb-nyil1.js";
+import { _ as K } from "./CFormField.vue_vue_type_script_setup_true_lang-D_U9coAY.js";
+import { b as Y } from "./CDropdownItem-Dmq5gYzA.js";
+import { t as G } from "./template-BvaNnq-g.js";
+const T = S.unsplash.id, J = S.pexels.id, Q = {
+  name: "MediaSelectModal",
+  i18nOptions: {
+    namespaces: "mediaSelectModal",
+    messages: {
+      en: {
+        title: "Choose background",
+        creditVideos: "Videos from {{thing}}",
+        tabLink: "Use link",
+        minWidth: "Recommended minimum image width is 1200 pixels or greater."
+      },
+      sv: {
+        title: "Välj bakgrundsbild",
+        creditVideos: "Videor från {{thing}}",
+        tabLink: "Egen länk",
+        minWidth: "Rekommenderad minimum bredd på bilden är 1200 pixlar eller större."
+      }
+    }
+  },
+  components: {
+    BackgroundModal: H,
+    BackgroundList: $,
+    VideoPlayerInput: P,
+    ImageUploadWrapper: j
+  },
+  emits: ["input", "close"],
+  props: {
+    currentType: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      tabs: [
+        {
+          value: "unsplash",
+          label: "Unsplash",
+          icon: '<svg style="margin-right: calc(0.5 * var(--rem));" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z"/></svg>'
+        },
+        {
+          value: "customImage",
+          label: this.$t("_common:upload"),
+          icon: '<svg style="margin-right: calc(0.5 * var(--rem));" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M20.4 14.5L16 10 4 20"/></svg>'
+        },
+        {
+          value: "pexels",
+          label: "Pexels",
+          icon: '<svg style="margin-right: calc(0.5 * var(--rem));" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 32 32"><path d="M2 0h28a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z" fill="#05A081"></path><path d="M13 21h3.863v-3.752h1.167a3.124 3.124 0 1 0 0-6.248H13v10zm5.863 2H11V9h7.03a5.124 5.124 0 0 1 .833 10.18V23z" fill="#fff"></path></svg>'
+        },
+        {
+          value: "customVideo",
+          label: this.$t("tabLink"),
+          icon: '<svg style="margin-right: calc(0.5 * var(--rem));" width="28" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" xml:space="preserve" viewBox="0 0 71.412 50"><g transform="scale(.58824)"><path d="M118.9 13.3c-1.4-5.2-5.5-9.3-10.7-10.7C98.7 0 60.7 0 60.7 0s-38 0-47.5 2.5C8.1 3.9 3.9 8.1 2.5 13.3 0 22.8 0 42.5 0 42.5s0 19.8 2.5 29.2C3.9 76.9 8 81 13.2 82.4 22.8 85 60.7 85 60.7 85s38 0 47.5-2.5c5.2-1.4 9.3-5.5 10.7-10.7 2.5-9.5 2.5-29.2 2.5-29.2s.1-19.8-2.5-29.3z" fill="red" fill-opacity="1"/><path fill="#fff" d="M80.2 42.5L48.6 24.3v36.4z"/></g></svg>'
+        }
+      ],
+      activeTab: "unsplash",
+      selectedImage: null,
+      preferredColor: null,
+      customImage: null,
+      selectedVideo: null,
+      customVideo: null
+    };
+  },
+  computed: {
+    isImage() {
+      return ["unsplash", "customImage"].includes(this.activeTab);
+    }
+  },
+  created() {
+    this.currentType === "video" && (this.activeTab = "pexels");
+  },
+  methods: {
+    async fetchImage({ query: e, page: t }) {
+      const { data: r } = await V.get(
+        "https://api.unsplash.com/search/photos",
+        {
+          params: {
+            page: t,
+            per_page: 12,
+            client_id: T,
+            query: e
+          }
+        }
+      );
+      return {
+        items: (r.results || []).map((n) => ({
+          ...n,
+          image: n.urls.regular,
+          minImage: n.urls.thumb
+        })),
+        total: r.total
+      };
+    },
+    async fetchVideo({ query: e, page: t }) {
+      const { data: r } = await V.get("https://api.pexels.com/videos/search", {
+        headers: {
+          Authorization: J
+        },
+        params: {
+          page: t,
+          per_page: 12,
+          query: e
+        }
+      }), n = (o, d) => o.height < d.height || o.width < d.width ? -1 : 1, s = (o) => (o.find(({ height: d }) => d > 1e3 && d < 1200) || {}).link;
+      return {
+        items: (r.videos || []).map(
+          ({ id: o, image: d, video_files: m = [], user: C }) => {
+            const { sd: k, hd: b } = (m || []).sort(n).reduce(
+              (f, v) => (f[v.quality] && v.link && f[v.quality].push(v.link), f),
+              { sd: [], hd: [] }
+            ), [i] = k;
+            let y = s(m);
+            return y || ([y] = b.length ? b : k.slice(-1)), {
+              id: `${o}`,
+              image: d,
+              minImage: d,
+              video: y,
+              minVideo: i,
+              userName: C.name,
+              userLink: C.link
+            };
+          }
+        ),
+        total: r.total_results
+      };
+    },
+    selectImage({ image: e, links: t, color: r }) {
+      this.selectedImage = R(e, { w: 1800 }), r && (this.preferredColor = r);
+      const n = new Image();
+      n.src = this.selectedImage, V.get(t.download_location, {
+        params: {
+          client_id: T
+        }
+      });
+    },
+    setCustomBackground({ response: e }) {
+      this.customImage = e.url;
+    },
+    selectVideo({ id: e, image: t, video: r }) {
+      this.selectedVideo = {
+        id: e,
+        url: r,
+        thumbnail: t,
+        provider: "pexels"
+      };
+    },
+    onSave() {
+      let e;
+      this.isImage ? e = {
+        type: "image",
+        value: this.activeTab === "unsplash" ? this.selectedImage : this.customImage
+      } : e = {
+        type: "video",
+        value: this.activeTab === "pexels" ? this.selectedVideo : this.customVideo
+      }, this.preferredColor && (e.preferredColor = this.preferredColor), this.$emit("input", e), this.$emit("close");
+    }
+  }
+}, X = {
+  class: "flex w-full items-center justify-center",
+  style: { padding: "calc(0.25 * var(--rem)) calc(1 * var(--rem))", "border-bottom": "1px solid hsl(0, 0%, 88%)" }
+}, Z = { class: "inline-flex items-center justify-center" }, ee = ["innerHTML"], te = { class: "max-md:!hidden" }, oe = {
+  key: 1,
+  class: "flex w-full flex-col items-center justify-center"
+}, ie = { style: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, se = { style: { position: "relative", width: "100%", "padding-top": "56.25%", "background-color": "hsl(var(--gray-color-100) / 1)", "border-radius": "0.5em", "margin-bottom": "calc(1.5 * var(--rem))" } }, le = ["src"], re = {
+  key: 2,
+  class: "flex flex-col items-center justify-center"
+}, ae = { style: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, ne = { class: "relative mb-6 w-full" }, de = ["src", "alt"], ce = {
+  key: 1,
+  class: "flex aspect-video flex-col items-center justify-center rounded-md bg-gray-100"
+}, ue = {
+  style: { "padding-top": "calc(1 * var(--rem))", "font-size": "14px", "max-width": "40ch" },
+  class: "text-center text-gray-600"
+}, me = { class: "flex items-center justify-center" };
+function he(e, t, r, n, s, o) {
+  const d = g("CButton"), m = g("BackgroundList"), C = g("VideoPlayerInput"), k = g("ImageUploadWrapper"), b = g("BackgroundModal");
+  return a(), x(b, {
+    onClose: t[2] || (t[2] = (i) => e.$emit("close"))
+  }, {
+    header: c(() => [
+      l("div", X, [
+        (a(!0), u(_, null, L(s.tabs, (i, y) => (a(), x(d, {
+          key: y,
+          style: B([s.activeTab === i.value && { opacity: 1 }, { "font-size": "15px", "font-weight": "700", opacity: "0.5", "box-shadow": "none" }]),
+          onClick: (f) => s.activeTab = i.value
+        }, {
+          default: c(() => [
+            l("span", Z, [
+              l("div", {
+                innerHTML: i.icon
+              }, null, 8, ee),
+              l("span", te, h(i.label), 1)
+            ])
+          ]),
+          _: 2
+        }, 1032, ["style", "onClick"]))), 128))
+      ])
+    ]),
+    default: c(() => [
+      ["unsplash", "pexels"].includes(s.activeTab) ? (a(), x(m, {
+        key: s.activeTab,
+        fetch: o.isImage ? o.fetchImage : o.fetchVideo,
+        "credit-text": e.$t("creditVideos", { thing: s.activeTab.capitalize() }),
+        "default-query": "nature",
+        onSelect: t[0] || (t[0] = (i) => o.isImage ? o.selectImage(i) : o.selectVideo(i))
+      }, {
+        footer: c(() => [
+          p(d, {
+            disabled: o.isImage ? !s.selectedImage : !s.selectedVideo,
+            style: { "margin-left": "0.5em" },
+            type: "secondary",
+            onClick: o.onSave
+          }, {
+            default: c(() => [
+              w(h(e.$t("_common:save")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled", "onClick"])
+        ]),
+        _: 1
+      }, 8, ["fetch", "credit-text"])) : s.activeTab === "customVideo" ? (a(), u("div", oe, [
+        l("div", ie, [
+          l("div", se, [
+            s.customVideo ? (a(), u("iframe", {
+              key: 0,
+              src: s.customVideo.url,
+              class: "custom-video-preview"
+            }, null, 8, le)) : z("", !0)
+          ]),
+          p(C, {
+            modelValue: s.customVideo,
+            "onUpdate:modelValue": t[1] || (t[1] = (i) => s.customVideo = i),
+            filled: !0,
+            "video-options": { background: !0 }
+          }, {
+            default: c(() => [
+              p(d, {
+                disabled: !s.customVideo,
+                type: "secondary",
+                onClick: o.onSave
+              }, {
+                default: c(() => [
+                  w(h(e.$t("_common:save")), 1)
+                ]),
+                _: 1
+              }, 8, ["disabled", "onClick"])
+            ]),
+            _: 1
+          }, 8, ["modelValue"])
+        ])
+      ])) : (a(), u("div", re, [
+        l("div", ae, [
+          p(k, {
+            ref: "uploadWrapper",
+            "on-image-upload": o.setCustomBackground
+          }, {
+            default: c(({ progress: i }) => [
+              l("div", ne, [
+                s.customImage ? (a(), u("img", {
+                  key: 0,
+                  src: s.customImage,
+                  alt: s.customImage,
+                  class: "h-full w-full object-cover object-scale-down object-top",
+                  style: { "max-height": "500px" }
+                }, null, 8, de)) : (a(), u("div", ce, [
+                  p(d, {
+                    loading: !!i && i < 100,
+                    style: B(s.customImage && { opacity: 0.5 }),
+                    "icon-left": "upload",
+                    type: "none"
+                  }, {
+                    default: c(() => [
+                      w(h(e.$t("_common:upload")), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["loading", "style"]),
+                  l("div", ue, h(e.$t("minWidth")), 1)
+                ]))
+              ])
+            ]),
+            _: 1
+          }, 8, ["on-image-upload"]),
+          l("div", me, [
+            p(d, {
+              disabled: !s.customImage,
+              type: "secondary",
+              onClick: o.onSave
+            }, {
+              default: c(() => [
+                w(h(e.$t("_common:save")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled", "onClick"])
+          ])
+        ])
+      ]))
+    ]),
+    _: 1
+  });
+}
+const pe = /* @__PURE__ */ A(Q, [["render", he], ["__scopeId", "data-v-0a5b68e1"]]), ge = {
+  name: "CRadioButton",
+  components: {
+    CButton: O
+  },
+  mixins: [D],
+  props: {
+    type: {
+      type: String,
+      default: "primary"
+    },
+    expanded: Boolean
+  },
+  data() {
+    return {
+      isFocused: !1
+    };
+  }
+}, ye = ["disabled", "required", "name", "value"];
+function ve(e, t, r, n, s, o) {
+  const d = g("CButton");
+  return a(), u("div", {
+    class: I([{ "is-expanded": r.expanded }, "control"])
+  }, [
+    p(d, {
+      ref: "label",
+      tag: "label",
+      type: e.newValue === e.nativeValue ? r.type : null,
+      size: e.size,
+      class: I([[{ "is-disabled": e.disabled, "is-focused": s.isFocused }], "c-radio radio button"]),
+      disabled: e.disabledOrUndefined,
+      onClick: e.focus,
+      onKeydown: t[4] || (t[4] = E(M((m) => e.$refs.$el.label.click(), ["prevent"]), ["enter"]))
+    }, {
+      default: c(() => [
+        W(e.$slots, "default"),
+        q(l("input", {
+          ref: "input",
+          "onUpdate:modelValue": t[0] || (t[0] = (m) => e.computedValue = m),
+          disabled: e.disabledOrUndefined,
+          required: e.requiredOrUndefined,
+          name: e.name,
+          value: e.nativeValue,
+          type: "radio",
+          onClick: t[1] || (t[1] = M(() => {
+          }, ["stop"])),
+          onFocus: t[2] || (t[2] = (m) => s.isFocused = !0),
+          onBlur: t[3] || (t[3] = (m) => s.isFocused = !1)
+        }, null, 40, ye), [
+          [N, e.computedValue]
+        ])
+      ]),
+      _: 3
+    }, 8, ["type", "size", "class", "disabled", "onClick"])
+  ], 2);
+}
+const fe = /* @__PURE__ */ A(ge, [["render", ve]]), we = {
+  name: "HeaderSettings",
+  components: {
+    ThemeColorRow: U,
+    CRadioButton: fe,
+    CSwitch: Y,
+    CField: K
+  },
+  mixins: [
+    F(
+      [
+        "layout",
+        "items",
+        "media",
+        "showPriceSummary",
+        "backgroundColor",
+        "textAlign",
+        "textColor"
+      ],
+      { useEmit: !1 }
+    )
+  ],
+  data() {
+    return {
+      type: "image",
+      layoutOptions2: [
+        {
+          value: "left",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="6" width="8" height="14" rx="1" fill="currentColor"></rect>'
+        },
+        {
+          value: "right",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="13" y="6" width="8" height="14" rx="1" fill="currentColor"></rect>'
+        },
+        {
+          value: "top",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="6" width="18" height="7" rx="1" fill="currentColor"></rect>'
+        },
+        {
+          value: "bottom",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="14" width="18" height="5" rx="1" fill="currentColor"></rect>'
+        },
+        {
+          value: "center",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="8" y="12" width="8" height="2" rx="0" fill="currentColor"></rect>'
+        },
+        {
+          value: "price",
+          icon: '<rect x="4" y="6" width="16" height="7"></rect><rect x="4" y="16" width="16" height="3" style="fill: currentColor;"></rect>'
+        }
+      ],
+      alignOptions: [
+        {
+          value: "left",
+          icon: '<path d="M 6 9 A 2.0002 2.0002 0 1 0 6 13 L 34 13 A 2.0002 2.0002 0 1 0 34 9 L 6 9 z M 6 22 A 2.0002 2.0002 0 1 0 6 26 L 42 26 A 2.0002 2.0002 0 1 0 42 22 L 6 22 z M 7 35 A 2.0002 2.0002 0 1 0 7 39 L 27 39 A 2.0002 2.0002 0 1 0 27 35 L 7 35 z" />'
+        },
+        {
+          value: "center",
+          icon: '<path d="M 10 9 A 2.0002 2.0002 0 1 0 10 13 L 38 13 A 2.0002 2.0002 0 1 0 38 9 L 10 9 z M 6 22 A 2.0002 2.0002 0 1 0 6 26 L 42 26 A 2.0002 2.0002 0 1 0 42 22 L 6 22 z M 14 35 A 2.0002 2.0002 0 1 0 14 39 L 34 39 A 2.0002 2.0002 0 1 0 34 35 L 14 35 z" />'
+        },
+        {
+          value: "right",
+          icon: '<path d="M 14 9 A 2.0002 2.0002 0 1 0 14 13 L 42 13 A 2.0002 2.0002 0 1 0 42 9 L 14 9 z M 6 22 A 2.0002 2.0002 0 1 0 6 26 L 42 26 A 2.0002 2.0002 0 1 0 42 22 L 6 22 z M 22 35 A 2.0002 2.0002 0 1 0 22 39 L 42 39 A 2.0002 2.0002 0 1 0 42 35 L 22 35 z" />'
+        }
+      ]
+    };
+  },
+  computed: {
+    layoutOptions() {
+      var t;
+      const { type: e } = ((t = this.items) == null ? void 0 : t[0]) || {};
+      return [
+        {
+          // left
+          isActive: this.layout === "vertical" && e === "media",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="6" width="8" height="14" rx="1" fill="currentColor"></rect>',
+          onClick: () => this.setLayout({ layout: "vertical", type: "media" })
+        },
+        {
+          // right
+          isActive: this.layout === "vertical" && e === "content",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="13" y="6" width="8" height="14" rx="1" fill="currentColor"></rect>',
+          onClick: () => this.setLayout({ layout: "vertical", type: "content" })
+        },
+        {
+          // top
+          isActive: this.layout === "horizontal" && e === "media",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="6" width="18" height="7" rx="1" fill="currentColor"></rect>',
+          onClick: () => this.setLayout({ layout: "horizontal", type: "media" })
+        },
+        {
+          // bottom
+          isActive: this.layout === "horizontal" && e === "content",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="3" y="14" width="18" height="5" rx="1" fill="currentColor"></rect>',
+          onClick: () => this.setLayout({ layout: "horizontal", type: "content" })
+        },
+        {
+          // center
+          isActive: this.layout === "center",
+          icon: '<rect x="3" y="6" width="18" height="14" rx="1"></rect><rect x="8" y="12" width="8" height="2" rx="0" fill="currentColor"></rect>',
+          onClick: () => this.setLayout({ layout: "center", type: "media" })
+        },
+        {
+          // price
+          isActive: this.layout === "price",
+          icon: '<rect x="4" y="6" width="16" height="7"></rect><rect x="4" y="16" width="16" height="3" style="fill: currentColor;"></rect>',
+          onClick: () => this.setLayout({ layout: "price" })
+        }
+      ];
+    },
+    overlayColor: {
+      get() {
+        var e;
+        return ((e = this.media) == null ? void 0 : e.overlayColor) || "";
+      },
+      set(e) {
+        this.media = { ...this.media, overlay: !0, overlayColor: e };
+      }
+    },
+    background() {
+      let e = "";
+      const { type: t, resourceUrl: r, video: n = {} } = this.media || {};
+      return t === "image" && r ? e = r : t === "video" && n.thumbnail && (e = n.thumbnail), e;
+    },
+    theme() {
+      var e;
+      return ((e = this._document) == null ? void 0 : e.theme) || {};
+    },
+    showPriceToggle: {
+      get() {
+        return !!(typeof this.showPriceSummary == "boolean" ? this.showPriceSummary : this.theme.showPriceSummary);
+      },
+      set(e) {
+        this.showPriceSummary = e;
+      }
+    }
+  },
+  watch: {
+    layout(e) {
+      this._document.isDirty(this._value.textAlign) || (this.textAlign = e === "center" ? e : "left");
+    },
+    backgroundColor(e) {
+      this._document.isDirty(this._value.textColor) || (this.textColor = G.readability(e, "#fff") < 1.8 ? "#111111" : "#FFFFFF");
+    }
+  },
+  methods: {
+    // Used for setting the correct array item order for specific layouts
+    // will place the given item type first in items
+    setLayout({ layout: e, type: t = "" }) {
+      const r = (n) => (s) => s.type === n ? -1 : 1;
+      t && (this.items = [...this.items].sort(r(t))), this.layout = e;
+    },
+    openBgModal() {
+      const { type: e = "image" } = this.media || {};
+      this.$modal.show(
+        pe,
+        {
+          currentType: e
+        },
+        {},
+        {
+          input: ({ type: t, value: r, preferredColor: n }) => {
+            const s = t === "image" ? "resourceUrl" : "video";
+            this.media = {
+              ...this.media,
+              type: t,
+              [s]: r
+            }, n && !this._document.isDirty(this._value.backgroundColor) && (this.backgroundColor = n);
+          }
+        }
+      );
+    }
+  }
+}, Ce = { class: "d-root" }, ke = { class: "d-option" }, be = { class: "grid grid-cols-3 gap-2 p-1" }, xe = ["innerHTML"], _e = { class: "d-option" }, Ve = {
+  class: "d-option-title",
+  style: { "padding-bottom": "calc(0.5 * var(--rem))" }
+}, Le = {
+  class: "d-option",
+  style: { "padding-bottom": "0.5em" }
+}, Be = {
+  key: 0,
+  class: "d-option"
+}, ze = { class: "d-option-title" }, Ie = { style: { flex: "1 1 auto" } }, Ae = {
+  key: 0,
+  class: "d-option-row",
+  style: { "padding-top": "1em" }
+}, Me = {
+  key: 0,
+  class: "d-option"
+}, Te = { class: "d-option" }, Se = { class: "d-option flex w-full" }, Fe = {
+  class: "d-option-title",
+  style: { "margin-top": "calc(0.5 * var(--rem))" }
+}, Ue = ["innerHTML"];
+function Pe(e, t, r, n, s, o) {
+  const d = g("CButton"), m = g("ThemeColorRow"), C = g("CSwitch"), k = g("CRadioButton"), b = g("CField");
+  return a(), u("div", Ce, [
+    l("div", ke, [
+      t[8] || (t[8] = l("div", {
+        class: "d-option-title",
+        style: { "padding-bottom": "calc(0.5 * var(--rem))" }
+      }, " Layouts ", -1)),
+      l("div", be, [
+        (a(!0), u(_, null, L(o.layoutOptions, ({ isActive: i, onClick: y, icon: f }, v) => (a(), x(d, {
+          key: v,
+          type: i ? "secondary" : "none",
+          pattern: i ? "primary" : "secondary",
+          size: "normal",
+          style: { padding: "6px 10px", "border-radius": "3px", height: "initial" },
+          onClick: y
+        }, {
+          default: c(() => [
+            (a(), u("svg", {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "30",
+              height: "30",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "1.75",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              innerHTML: f
+            }, null, 8, xe))
+          ]),
+          _: 2
+        }, 1032, ["type", "pattern", "onClick"]))), 128))
+      ])
+    ]),
+    l("div", _e, [
+      l("div", Ve, h(e.$t("_common:background").capitalize()), 1),
+      l("div", {
+        style: B({
+          backgroundImage: `url(${o.background || o.theme.background})`
+        }),
+        class: "d-option-button-image",
+        onClick: t[0] || (t[0] = (...i) => o.openBgModal && o.openBgModal(...i))
+      }, null, 4)
+    ]),
+    l("div", Le, [
+      p(m, {
+        value: o.overlayColor || o.theme.backgroundFilter || "",
+        placement: "auto",
+        class: "d-option-title",
+        onChange: t[1] || (t[1] = (i) => o.overlayColor = i)
+      }, {
+        default: c(() => [
+          w(h(e.$t("components:account.documentForm.settings.backgroundFilter")), 1)
+        ]),
+        _: 1
+      }, 8, ["value"])
+    ]),
+    e.layout === "price" ? (a(), u("div", Be, [
+      l("div", ze, [
+        l("div", Ie, h(e.$t(
+          "components:account.documentForm.settings.priceSummaryBackground"
+        )), 1),
+        p(C, {
+          modelValue: o.showPriceToggle,
+          "onUpdate:modelValue": t[2] || (t[2] = (i) => o.showPriceToggle = i),
+          size: "small",
+          type: "secondary",
+          style: { "margin-right": "0" }
+        }, null, 8, ["modelValue"])
+      ]),
+      o.showPriceToggle ? (a(), u("div", Ae, [
+        p(m, {
+          value: e.backgroundColor || o.theme.priceSummaryBackground || "",
+          "picker-options": { disableAlpha: !0 },
+          placement: "auto",
+          class: "d-option-title",
+          onChange: t[3] || (t[3] = (i) => e.backgroundColor = i)
+        }, {
+          default: c(() => [
+            w(h(e.$t("_common:backgroundColor").capitalize()), 1)
+          ]),
+          _: 1
+        }, 8, ["value"])
+      ])) : z("", !0)
+    ])) : (a(), u(_, { key: 1 }, [
+      e.layout !== "center" ? (a(), u("div", Me, [
+        p(m, {
+          value: e.backgroundColor || o.theme.priceSummaryBackground || "",
+          "picker-options": { disableAlpha: !0 },
+          placement: "auto",
+          class: "d-option-title",
+          onChange: t[4] || (t[4] = (i) => {
+            e.backgroundColor = i, e._document.setDirty(e._value.backgroundColor);
+          })
+        }, {
+          default: c(() => [
+            w(h(e.$t("_common:backgroundColor").capitalize()), 1)
+          ]),
+          _: 1
+        }, 8, ["value"])
+      ])) : z("", !0),
+      l("div", Te, [
+        p(m, {
+          value: e.textColor || "",
+          "picker-options": { disableAlpha: !0 },
+          placement: "auto",
+          class: "d-option-title",
+          style: { "margin-top": "calc(0.5 * var(--rem))" },
+          onChange: t[5] || (t[5] = (i) => {
+            e.textColor = i, e._document.setDirty(e._value.textColor);
+          })
+        }, {
+          default: c(() => [
+            w(h(e.$t("_common:textColor").capitalize()), 1)
+          ]),
+          _: 1
+        }, 8, ["value"])
+      ]),
+      l("div", Se, [
+        l("div", Fe, h(e.$t("_common:textAlign").capitalize()), 1),
+        p(b, { style: { "margin-left": "auto" } }, {
+          default: c(() => [
+            (a(!0), u(_, null, L(s.alignOptions, ({ value: i, icon: y }, f) => (a(), x(k, {
+              key: f,
+              modelValue: e.textAlign,
+              "onUpdate:modelValue": [
+                t[6] || (t[6] = (v) => e.textAlign = v),
+                t[7] || (t[7] = (v) => e._document.setDirty(e._value.textAlign))
+              ],
+              "native-value": i,
+              type: e.textAlign ? "secondary" : "none",
+              class: I(!e.textAlign && "text-gray-400"),
+              size: "small"
+            }, {
+              default: c(() => [
+                (a(), u("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 48 48",
+                  fill: "currentColor",
+                  stroke: "currentColor",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  style: { margin: "0" },
+                  innerHTML: y
+                }, null, 8, Ue))
+              ]),
+              _: 2
+            }, 1032, ["modelValue", "native-value", "type", "class"]))), 128))
+          ]),
+          _: 1
+        })
+      ])
+    ], 64))
+  ]);
+}
+const Ee = /* @__PURE__ */ A(we, [["render", Pe], ["__scopeId", "data-v-bccd31d9"]]);
+export {
+  Ee as default
+};