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

package/dist/HeaderSettings-BqczIOsG.js

@@ -1,392 +0,0 @@
-import { m as x } from "./mapFormMixin-QbevCwJK.js";
-import { T as w } from "./ThemeColorRow-DYJNgk6S.js";
-import C from "./VideoPlayerInput-8szEX_8L.js";
-import _ from "./ImageUploadWrapper-Dv43rGdb.js";
-import { B as k, a as b } from "./index-BgJ05dYc.js";
-import { c as v, n as y, o as d, H as S } from "./main-WKzC-Dnu.js";
-import { t as A } from "./tinycolor-kTl0yxzz.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-Cd-HhKnH.js

@@ -1,84 +0,0 @@
-import r from "./ImageUploadWrapper-Dv43rGdb.js";
-import { B as l, a as i } from "./index-BgJ05dYc.js";
-import { c, n as m, o as n, H as d } from "./main-WKzC-Dnu.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
-};