@cling-se/widget 0.14.4 → 0.14.5

package/dist/HeaderSettings-BGpkzcbj.js

@@ -0,0 +1,392 @@
+import { m as x } from "./mapFormMixin-ETYhBLl2.js";
+import { T as w } from "./ThemeColorRow-DMWVlFRU.js";
+import C from "./VideoPlayerInput-5KybfY7N.js";
+import _ from "./ImageUploadWrapper-qJDHCf8T.js";
+import { B as k, a as b } from "./index-B4aiQXsr.js";
+import { c as v, n as y, o as d, H as S } from "./main-B9t0ybqW.js";
+import { t as A } from "./tinycolor-CMC8Xp7x.js";
+const g = v.unsplash.id, L = v.pexels.id, z = {
+  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: k,
+    BackgroundList: b,
+    VideoPlayerInput: C,
+    ImageUploadWrapper: _
+  },
+  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: i, page: t }) {
+      const { data: e } = await d.get(
+        "https://api.unsplash.com/search/photos",
+        {
+          params: {
+            page: t,
+            per_page: 12,
+            client_id: g,
+            query: i
+          }
+        }
+      );
+      return {
+        items: (e.results || []).map((o) => ({
+          ...o,
+          image: o.urls.regular,
+          minImage: o.urls.thumb
+        })),
+        total: e.total
+      };
+    },
+    async fetchVideo({ query: i, page: t }) {
+      const { data: e } = await d.get("https://api.pexels.com/videos/search", {
+        headers: {
+          Authorization: L
+        },
+        params: {
+          page: t,
+          per_page: 12,
+          query: i
+        }
+      }), o = (s, a) => s.height < a.height || s.width < a.width ? -1 : 1, r = (s) => (s.find(({ height: a }) => a > 1e3 && a < 1200) || {}).link;
+      return {
+        items: (e.videos || []).map(
+          ({ id: s, image: a, video_files: u = [], user: m }) => {
+            const { sd: h, hd: p } = (u || []).sort(o).reduce(
+              (n, l) => (n[l.quality] && l.link && n[l.quality].push(l.link), n),
+              { sd: [], hd: [] }
+            ), [f] = h;
+            let c = r(u);
+            return c || ([c] = p.length ? p : h.slice(-1)), {
+              id: `${s}`,
+              image: a,
+              minImage: a,
+              video: c,
+              minVideo: f,
+              userName: m.name,
+              userLink: m.link
+            };
+          }
+        ),
+        total: e.total_results
+      };
+    },
+    selectImage({ image: i, links: t, color: e }) {
+      this.selectedImage = S(i, { w: 1800 }), e && (this.preferredColor = e);
+      const o = new Image();
+      o.src = this.selectedImage, d.get(t.download_location, {
+        params: {
+          client_id: g
+        }
+      });
+    },
+    setCustomBackground({ response: i }) {
+      this.customImage = i.url;
+    },
+    selectVideo({ id: i, image: t, video: e }) {
+      this.selectedVideo = {
+        id: i,
+        url: e,
+        thumbnail: t,
+        provider: "pexels"
+      };
+    },
+    onSave() {
+      let i;
+      this.isImage ? i = {
+        type: "image",
+        value: this.activeTab === "unsplash" ? this.selectedImage : this.customImage
+      } : i = {
+        type: "video",
+        value: this.activeTab === "pexels" ? this.selectedVideo : this.customVideo
+      }, this.preferredColor && (i.preferredColor = this.preferredColor), this.$emit("input", i), this.$parent && this.$parent.$emit("input", i), this.$emit("close");
+    }
+  }
+};
+var I = function() {
+  var t = this, e = t._self._c;
+  return e("BackgroundModal", t._g({}, t.$listeners), [e("div", { staticClass: "flex w-full items-center justify-center", staticStyle: { padding: "calc(0.25 * var(--rem)) calc(1 * var(--rem))", "border-bottom": "1px solid hsl(0, 0%, 88%)" }, attrs: { slot: "header" }, slot: "header" }, t._l(t.tabs, function(o, r) {
+    return e("CButton", { key: r, staticStyle: { "font-size": "15px", "font-weight": "700", opacity: "0.5", "box-shadow": "none" }, style: t.activeTab === o.value && { opacity: 1 }, on: { click: function(s) {
+      t.activeTab = o.value;
+    } } }, [e("span", { staticClass: "inline-flex items-center justify-center" }, [e("div", { domProps: { innerHTML: t._s(o.icon) } }), e("span", { staticClass: "max-md:!hidden" }, [t._v(t._s(o.label))])])]);
+  }), 1), ["unsplash", "pexels"].includes(t.activeTab) ? e("BackgroundList", { key: t.activeTab, attrs: { fetch: t.isImage ? t.fetchImage : t.fetchVideo, "credit-text": t.$t("creditVideos", { thing: t.activeTab.capitalize() }), "default-query": "nature" }, on: { select: function(o) {
+    t.isImage ? t.selectImage(o) : t.selectVideo(o);
+  } } }, [e("CButton", { staticStyle: { "margin-left": "0.5em" }, attrs: { slot: "footer", disabled: t.isImage ? !t.selectedImage : !t.selectedVideo, type: "secondary" }, on: { click: t.onSave }, slot: "footer" }, [t._v(" " + t._s(t.$t("_common:save")) + " ")])], 1) : t.activeTab === "customVideo" ? e("div", { staticClass: "flex w-full flex-col items-center justify-center" }, [e("div", { staticStyle: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, [e("div", { staticStyle: { 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))" } }, [t.customVideo ? e("iframe", { staticClass: "custom-video-preview", attrs: { src: t.customVideo.url } }) : t._e()]), e("VideoPlayerInput", { attrs: { filled: !0, "video-options": { background: !0 } }, model: { value: t.customVideo, callback: function(o) {
+    t.customVideo = o;
+  }, expression: "customVideo" } }, [e("CButton", { attrs: { disabled: !t.customVideo, type: "secondary" }, on: { click: t.onSave } }, [t._v(" " + t._s(t.$t("_common:save")) + " ")])], 1)], 1)]) : e("div", { staticClass: "flex flex-col items-center justify-center" }, [e("div", { staticStyle: { "max-width": "500px", width: "100%", margin: "0 auto", "padding-top": "calc(3 * var(--rem))" } }, [e("ImageUploadWrapper", { ref: "uploadWrapper", attrs: { "on-image-upload": t.setCustomBackground }, scopedSlots: t._u([{ key: "default", fn: function({ progress: o }) {
+    return [e("div", { staticClass: "relative mb-6 w-full" }, [t.customImage ? e("img", { staticClass: "h-full w-full object-cover object-scale-down object-top", staticStyle: { "max-height": "500px" }, attrs: { src: t.customImage, alt: t.customImage } }) : e("div", { staticClass: "flex aspect-video flex-col items-center justify-center rounded-md bg-gray-100" }, [e("CButton", { style: t.customImage && { opacity: 0.5 }, attrs: { loading: !!o && o < 100, "icon-left": "upload", type: "none" } }, [t._v(" " + t._s(t.$t("_common:upload")) + " ")]), e("div", { staticClass: "text-center text-gray-600", staticStyle: { "padding-top": "calc(1 * var(--rem))", "font-size": "14px", "max-width": "40ch" } }, [t._v(" " + t._s(t.$t("minWidth")) + " ")])], 1)])];
+  } }]) }), e("div", { staticClass: "flex items-center justify-center" }, [e("CButton", { attrs: { disabled: !t.customImage, type: "secondary" }, on: { click: t.onSave } }, [t._v(" " + t._s(t.$t("_common:save")) + " ")])], 1)], 1)])], 1);
+}, V = [], M = /* @__PURE__ */ y(
+  z,
+  I,
+  V,
+  !1,
+  null,
+  "459dc015"
+);
+const T = M.exports, $ = {
+  name: "HeaderSettings",
+  components: {
+    ThemeColorRow: w
+  },
+  mixins: [
+    x(
+      [
+        "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: i } = ((t = this.items) == null ? void 0 : t[0]) || {};
+      return [
+        {
+          // left
+          isActive: this.layout === "vertical" && i === "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" && i === "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" && i === "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" && i === "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 i;
+        return ((i = this.media) == null ? void 0 : i.overlayColor) || "";
+      },
+      set(i) {
+        this.media = { ...this.media, overlay: !0, overlayColor: i };
+      }
+    },
+    background() {
+      let i = "";
+      const { type: t, resourceUrl: e, video: o = {} } = this.media || {};
+      return t === "image" && e ? i = e : t === "video" && o.thumbnail && (i = o.thumbnail), i;
+    },
+    theme() {
+      var i;
+      return ((i = this._document) == null ? void 0 : i.theme) || {};
+    },
+    showPriceToggle: {
+      get() {
+        return !!(typeof this.showPriceSummary == "boolean" ? this.showPriceSummary : this.theme.showPriceSummary);
+      },
+      set(i) {
+        this.showPriceSummary = i;
+      }
+    }
+  },
+  watch: {
+    layout(i) {
+      this._document.isDirty(this._value.textAlign) || (this.textAlign = i === "center" ? i : "left");
+    },
+    backgroundColor(i) {
+      this._document.isDirty(this._value.textColor) || (this.textColor = A.readability(i, "#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: i, type: t = "" }) {
+      const e = (o) => (r) => r.type === o ? -1 : 1;
+      t && (this.items = [...this.items].sort(e(t))), this.layout = i;
+    },
+    openBgModal() {
+      const { type: i = "image" } = this.media || {};
+      this.$modal.show(
+        T,
+        {
+          currentType: i
+        },
+        {},
+        {
+          input: ({ type: t, value: e, preferredColor: o }) => {
+            const r = t === "image" ? "resourceUrl" : "video";
+            this.media = {
+              ...this.media,
+              type: t,
+              [r]: e
+            }, o && !this._document.isDirty(this._value.backgroundColor) && (this.backgroundColor = o);
+          }
+        }
+      );
+    }
+  }
+};
+var B = function() {
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "d-root" }, [e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title", staticStyle: { "padding-bottom": "calc(0.5 * var(--rem))" } }, [t._v(" Layouts ")]), e("div", { staticClass: "grid grid-cols-3 gap-2 p-1" }, t._l(t.layoutOptions, function({ isActive: o, onClick: r, icon: s }, a) {
+    return e("CButton", { key: a, staticStyle: { padding: "6px 10px", "border-radius": "3px", height: "initial" }, attrs: { type: o ? "secondary" : "none", pattern: o ? "primary" : "secondary", size: "normal" }, on: { click: r } }, [e("svg", { attrs: { 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" }, domProps: { innerHTML: t._s(s) } })]);
+  }), 1)]), e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title", staticStyle: { "padding-bottom": "calc(0.5 * var(--rem))" } }, [t._v(" " + t._s(t.$t("_common:background").capitalize()) + " ")]), e("div", { staticClass: "d-option-button-image", style: {
+    backgroundImage: `url(${t.background || t.theme.background})`
+  }, on: { click: t.openBgModal } })]), e("div", { staticClass: "d-option", staticStyle: { "padding-bottom": "0.5em" } }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.overlayColor || t.theme.backgroundFilter || "", placement: "auto" }, on: { change: function(o) {
+    t.overlayColor = o;
+  } } }, [t._v(" " + t._s(t.$t("components:account.documentForm.settings.backgroundFilter")) + " ")])], 1), t.layout === "price" ? e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title" }, [e("div", { staticStyle: { flex: "1 1 auto" } }, [t._v(" " + t._s(t.$t("components:account.documentForm.settings.priceSummaryBackground")) + " ")]), e("CSwitch", { staticStyle: { "margin-right": "0" }, attrs: { size: "small", type: "secondary" }, model: { value: t.showPriceToggle, callback: function(o) {
+    t.showPriceToggle = o;
+  }, expression: "showPriceToggle" } })], 1), t.showPriceToggle ? e("div", { staticClass: "d-option-row", staticStyle: { "padding-top": "1em" } }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.backgroundColor || t.theme.priceSummaryBackground || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(o) {
+    t.backgroundColor = o;
+  } } }, [t._v(" " + t._s(t.$t("_common:backgroundColor").capitalize()) + " ")])], 1) : t._e()]) : [t.layout !== "center" ? e("div", { staticClass: "d-option" }, [e("ThemeColorRow", { staticClass: "d-option-title", attrs: { value: t.backgroundColor || t.theme.priceSummaryBackground || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(o) {
+    t.backgroundColor = o, t._document.setDirty(t._value.backgroundColor);
+  } } }, [t._v(" " + t._s(t.$t("_common:backgroundColor").capitalize()) + " ")])], 1) : t._e(), e("div", { staticClass: "d-option" }, [e("ThemeColorRow", { staticClass: "d-option-title", staticStyle: { "margin-top": "calc(0.5 * var(--rem))" }, attrs: { value: t.textColor || "", "picker-options": { disableAlpha: !0 }, placement: "auto" }, on: { change: function(o) {
+    t.textColor = o, t._document.setDirty(t._value.textColor);
+  } } }, [t._v(" " + t._s(t.$t("_common:textColor").capitalize()) + " ")])], 1), e("div", { staticClass: "d-option flex w-full" }, [e("div", { staticClass: "d-option-title", staticStyle: { "margin-top": "calc(0.5 * var(--rem))" } }, [t._v(" " + t._s(t.$t("_common:textAlign").capitalize()) + " ")]), e("CField", { staticStyle: { "margin-left": "auto" } }, t._l(t.alignOptions, function({ value: o, icon: r }, s) {
+    return e("CRadioButton", { key: s, class: !t.textAlign && "text-gray-400", attrs: { "native-value": o, type: t.textAlign ? "secondary" : "none", size: "small" }, on: { input: function(a) {
+      return t._document.setDirty(t._value.textAlign);
+    } }, model: { value: t.textAlign, callback: function(a) {
+      t.textAlign = a;
+    }, expression: "textAlign" } }, [e("svg", { staticStyle: { margin: "0" }, attrs: { 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" }, domProps: { innerHTML: t._s(r) } })]);
+  }), 1)], 1)]], 2);
+}, P = [], F = /* @__PURE__ */ y(
+  $,
+  B,
+  P,
+  !1,
+  null,
+  "adcf8352"
+);
+const q = F.exports;
+export {
+  q as default
+};

package/dist/ImageSelectModal-Cimviyuy.js

@@ -0,0 +1,84 @@
+import r from "./ImageUploadWrapper-qJDHCf8T.js";
+import { B as l, a as i } from "./index-B4aiQXsr.js";
+import { c, n as m, o as n, H as d } from "./main-B9t0ybqW.js";
+const o = c.unsplash.id, p = {
+  name: "ImageSelectModal",
+  i18nOptions: {
+    namespaces: "imageSelectModal",
+    messages: {
+      en: {
+        creditImages: "Images from {{thing}}"
+      },
+      sv: {
+        creditImages: "Bilder från {{thing}}"
+      }
+    }
+  },
+  components: {
+    BackgroundModal: l,
+    BackgroundList: i,
+    ImageUploadWrapper: r
+  },
+  data() {
+    return {
+      selectedUrl: null
+    };
+  },
+  methods: {
+    async fetch({ query: a, page: e }) {
+      const { data: t } = await n.get(
+        "https://api.unsplash.com/search/photos",
+        {
+          params: {
+            page: e,
+            per_page: 12,
+            client_id: o,
+            query: a
+          }
+        }
+      );
+      return {
+        items: (t.results || []).map((s) => ({
+          ...s,
+          image: s.urls.regular,
+          minImage: s.urls.thumb
+        })),
+        total: t.total
+      };
+    },
+    selectImage(a) {
+      this.selectedUrl = d(a.image, { w: 1800 });
+      const e = new Image();
+      e.src = this.selectedUrl, n.get(a.links.download_location, {
+        params: {
+          client_id: o
+        }
+      });
+    },
+    setCustomBackground({ response: a }) {
+      this.selectedUrl = a.url, this.onSave();
+    },
+    onSave() {
+      this.$emit("change"), this.$emit("input", this.selectedUrl), this.$parent && (this.$parent.$emit("change"), this.$parent.$emit("input", this.selectedUrl)), this.$emit("close");
+    }
+  }
+};
+var u = function() {
+  var e = this, t = e._self._c;
+  return t("BackgroundModal", e._g({}, e.$listeners), [t("BackgroundList", { attrs: { fetch: e.fetch, "credit-text": e.$t("creditImages", { thing: "Unsplash" }), "default-query": "architecture" }, on: { select: e.selectImage } }, [t("template", { slot: "footer" }, [t("ImageUploadWrapper", { ref: "uploadWrapper", attrs: { "on-image-upload": e.setCustomBackground }, on: { upload: function(s) {
+    e.isUploadingImage = !0;
+  } }, scopedSlots: e._u([{ key: "default", fn: function({ progress: s }) {
+    return [t("CButton", { attrs: { loading: !!s, "icon-left": "upload", type: "none" } }, [e._v(" " + e._s(e.$t("_common:upload")) + " ")])];
+  } }]) }), t("CButton", { staticStyle: { "margin-left": "0.5em" }, attrs: { type: "secondary" }, on: { click: e.onSave } }, [e._v(" " + e._s(e.$t("_common:save")) + " ")])], 1)], 2)], 1);
+}, g = [], h = /* @__PURE__ */ m(
+  p,
+  u,
+  g,
+  !1,
+  null,
+  "d3705339"
+);
+const v = h.exports;
+export {
+  v as default
+};