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

package/dist/index-DKMxIBz_.js

@@ -0,0 +1,270 @@
+import { F as S } from "./Flag-BwTgCNHO.js";
+import { w as B } from "./CDropdownItem-Dmq5gYzA.js";
+import { a$ as L, $ as V, _ as b, b as a, o, d as i, s as n, e as h, ao as y, w as x, F as v, k, f as r, l as E, v as m, c as R, B as w, S as g } from "./main-Cb-nyil1.js";
+import { i as F } from "./dom-CkTGWrfu.js";
+import { d as q } from "./debounce-DNl99Gyo.js";
+import { t as P } from "./throttle-D-bUGaVh.js";
+/* empty css                       */
+const z = {
+  name: "BackgroundsModalList",
+  i18nOptions: {
+    namespaces: "backgroundsModalList",
+    messages: {
+      en: {
+        searchPlaceholder: "Search",
+        noMoreResults: "No more results"
+      },
+      sv: {
+        searchPlaceholder: "Sök efter en bild på engelska",
+        noMoreResults: "Inga fler resultat"
+      }
+    }
+  },
+  components: {
+    Simplebar: L,
+    Flag: S
+  },
+  emits: ["select", "save"],
+  mixins: [B],
+  props: {
+    /**
+    * @param {Object} options Input arguments
+    * @param {String} options.query Search/Query string
+    * @param {Number} options.page Current page number
+    *
+    * @returns {Object} containing:
+    * items {Array}
+      - item {Object}
+        - item.image {String} Url of image resource (REQUIRED)
+        - item.video {String} Url of video resource (OPTIONAL)
+        - item.lowQualityVideo {String} preview url of video file (OPTIONAL)
+    * total {Number} Number of results
+    */
+    fetch: {
+      type: Function,
+      required: !0
+    },
+    defaultQuery: {
+      type: String,
+      required: !0
+    },
+    creditText: {
+      type: String,
+      default: ""
+    }
+  },
+  setup() {
+    return { listElements: V("listElements") };
+  },
+  data() {
+    return {
+      hoverIndex: null,
+      query: null,
+      items: [],
+      page: 1,
+      isLoading: !1,
+      allowMoreResults: !0,
+      searchTimeout: null,
+      selectedIndex: null,
+      selectedUrl: null,
+      noOfResults: null
+    };
+  },
+  watch: {
+    query() {
+      this.page = 0, this.items = [], this.allowMoreResults = !0, this.isLoading = !1, this.debouncedHandleFetch();
+    }
+  },
+  created() {
+    this.handleFetch(), this.debouncedHandleFetch = q(this.handleFetch, 1e3);
+  },
+  mounted() {
+    this.$refs.scrollbar.scrollElement.addEventListener(
+      "scroll",
+      this.scrollHandler,
+      { passive: !0 }
+    );
+  },
+  beforeUnmount() {
+    this.$refs.scrollbar.scrollElement.removeEventListener(
+      "scroll",
+      this.scrollHandler,
+      { passive: !0 }
+    );
+  },
+  methods: {
+    async handleFetch() {
+      if (!this.allowMoreResults || this.isLoading) return;
+      this.isLoading = !0;
+      const s = this.query ? this.query : this.defaultQuery, { items: e, total: d } = await this.fetch({ query: s, page: this.page++ });
+      this.isLoading = !1, this.noOfResults = this.query ? d : null, this.items == null ? (this.selectedIndex = null, this.items = e) : this.items = [...this.items, ...e], this.allowMoreResults = d >= this.page * 12;
+    },
+    scrollHandler: P(async function() {
+      const e = this.listElements[this.listElements.length - 9 || 0];
+      e && F(e) && this.handleFetch();
+    }, 50),
+    selectItem(s, e) {
+      this.selectedIndex = e, this.$emit("select", s);
+    },
+    onSave() {
+      this.$emit("save");
+    },
+    playVideo(s) {
+      this.$refs.video[s] && this.$refs.video[s].play();
+    },
+    pauseVideo(s) {
+      const e = this.$refs.video[s];
+      e && (e.readyState === 4 ? e.pause() : e.addEventListener("playing", () => e.pause(), { once: !0 }));
+    }
+  }
+}, H = { style: { "min-height": "0", display: "flex", "flex-direction": "column", height: "100%" } }, N = { class: "relative flex w-full shrink-0 py-1" }, O = { style: { overflow: "hidden", flex: "1", height: "100%" } }, T = { style: { display: "grid", "grid-template-columns": "repeat(auto-fit, minmax(210px, 1fr))", gap: "2px" } }, j = ["onClick"], U = ["onMouseenterPassive", "onMouseleavePassive"], G = ["src"], Q = {
+  key: 1,
+  class: "select-wrapper"
+}, D = { class: "photo__credit" }, A = {
+  class: "flex w-full items-center justify-center",
+  style: { padding: "2em 1em" }
+}, J = {
+  key: 1,
+  class: "flex w-full flex-col items-center justify-center text-gray-400"
+}, K = {
+  key: 0,
+  class: "flex flex-col items-center text-center",
+  style: { "padding-top": "3.2rem" }
+}, W = {
+  class: "flex w-full items-center justify-end",
+  style: { padding: "4px 4px 4px 8px", "flex-shrink": "0" }
+}, X = { class: "flex-grow text-gray-400" }, Y = { key: 0 };
+function Z(s, e, d, C, t, c) {
+  const f = a("CInput"), p = a("CIcon"), I = a("Flag"), M = a("Simplebar"), $ = a("CButton");
+  return o(), i("div", H, [
+    n("div", N, [
+      h(f, {
+        modelValue: t.query,
+        "onUpdate:modelValue": e[0] || (e[0] = (l) => t.query = l),
+        placeholder: s.$t("searchPlaceholder"),
+        reset: !0,
+        icon: "search",
+        size: "medium",
+        class: "flex-grow",
+        style: { "border-bottom": "1px solid hsl(0, 0%, 92%)" },
+        onInput: e[1] || (e[1] = y(() => {
+        }, ["stop"]))
+      }, null, 8, ["modelValue", "placeholder"])
+    ]),
+    n("div", O, [
+      h(M, {
+        ref: "scrollbar",
+        style: { width: "100%", height: "100%", padding: "3px 4px" }
+      }, {
+        default: x(() => [
+          n("div", T, [
+            !t.items.length && t.isLoading ? (o(), i(v, { key: 0 }, k(12, (l) => n("div", {
+              ref_for: !0,
+              ref: "listElements",
+              key: l,
+              class: "photo"
+            })), 64)) : r("", !0),
+            (o(!0), i(v, null, k(t.items, (l, u) => (o(), i("div", {
+              ref_for: !0,
+              ref: "listElements",
+              key: u,
+              style: E({ backgroundImage: `url(${l.minImage})` }),
+              class: "photo",
+              onClick: (_) => c.selectItem(l, u)
+            }, [
+              l.minVideo || l.video ? (o(), i("div", {
+                key: 0,
+                class: "video-bg__media",
+                onMouseenterPassive: (_) => c.playVideo(u, l.minVideo || l.video),
+                onMouseleavePassive: (_) => c.pauseVideo(u)
+              }, [
+                n("video", {
+                  ref_for: !0,
+                  ref: "video",
+                  src: l.minVideo || l.video,
+                  loop: "",
+                  muted: "",
+                  playsInline: "",
+                  preload: "none"
+                }, null, 8, G)
+              ], 40, U)) : r("", !0),
+              t.selectedIndex === u ? (o(), i("div", Q)) : r("", !0),
+              n("div", D, m(l.userName), 1)
+            ], 12, j))), 128))
+          ]),
+          n("div", A, [
+            t.isLoading ? (o(), R(p, {
+              key: 0,
+              type: "loader",
+              class: "rotateSpin"
+            })) : t.allowMoreResults ? r("", !0) : (o(), i("div", J, [
+              n("div", null, m(s.$t("noMoreResults")), 1),
+              s.$i18n.lang !== "en" ? (o(), i("div", K, [
+                h(I, {
+                  region: "GB",
+                  class: "mb-1 h-8 w-8"
+                }),
+                e[2] || (e[2] = w(" Glöm inte att sökordet måste vara på engelska "))
+              ])) : r("", !0)
+            ]))
+          ])
+        ]),
+        _: 1
+      }, 512)
+    ]),
+    n("div", W, [
+      n("div", X, [
+        s.mq !== "sm" ? (o(), i(v, { key: 0 }, [
+          t.query && t.noOfResults && t.noOfResults > 0 ? (o(), i("div", Y, m(s.$tc("_common:result", { count: t.noOfResults })), 1)) : r("", !0),
+          n("div", null, m(d.creditText), 1)
+        ], 64)) : r("", !0)
+      ]),
+      g(s.$slots, "footer", {}, () => [
+        h($, {
+          style: { "margin-left": "0.5em" },
+          type: "secondary",
+          onClick: c.onSave
+        }, {
+          default: x(() => [
+            w(m(s.$t("_common:save")), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"])
+      ], !0)
+    ])
+  ]);
+}
+const ee = /* @__PURE__ */ b(z, [["render", Z], ["__scopeId", "data-v-03e5d6b0"]]), se = {
+  name: "BackgroundsModal",
+  emits: ["close"]
+};
+function te(s, e, d, C, t, c) {
+  const f = a("CButton");
+  return o(), i("div", {
+    class: "font-primary fixed inset-0 z-[1000] flex items-center justify-center overflow-auto bg-black bg-opacity-10 max-sm:block max-sm:min-h-full max-sm:w-full max-sm:overflow-auto",
+    onClick: e[2] || (e[2] = y((p) => s.$emit("close"), ["self"]))
+  }, [
+    n("div", {
+      class: "relative flex h-[90%] max-h-[700px] w-[90%] max-w-3xl flex-col rounded-lg bg-white max-sm:h-full max-sm:max-h-full max-sm:w-full max-sm:rounded-none",
+      onClick: e[1] || (e[1] = y(() => {
+      }, ["stop"]))
+    }, [
+      h(f, {
+        class: "absolute right-3 top-3 z-10",
+        pattern: "tertiary",
+        type: "none",
+        size: "small",
+        circle: "",
+        icon: "x",
+        onClick: e[0] || (e[0] = (p) => s.$emit("close"))
+      }),
+      g(s.$slots, "header"),
+      g(s.$slots, "default")
+    ])
+  ]);
+}
+const le = /* @__PURE__ */ b(se, [["render", te]]), ue = ee, me = le;
+export {
+  me as B,
+  ue as a
+};

package/dist/index-DKf5SGLD.js

@@ -0,0 +1,125 @@
+import { _ as u, ap as n, b as h, o as i, d as a, s as e, e as l, v as c, B as g, w as m, aj as b, F as k, k as f, l as v } from "./main-Cb-nyil1.js";
+const y = {
+  name: "DocumentGuide",
+  i18nOptions: {
+    namespaces: "documentGuide",
+    messages: {
+      en: {
+        title: "Quick tour",
+        steps: {
+          addBlocks: "Add document blocks from the left sidebar.",
+          textFormatting: "Select some text and formatting options will appear.",
+          editBlocks: `Adjust a block's appearance by clicking on the <span class="dg-button-icon appearance"></span> button.`,
+          changeProduct: `Change a product's quantity by clicking on the <span class="dg-button-icon cog"></span> button.`,
+          send: `Once you're done, hit <span class="dg-button-text">Send</span>`
+        }
+      },
+      sv: {
+        title: "Snabbguide",
+        steps: {
+          addBlocks: "Lägg till dokumentblock ifrån vänstra sidomenyn.",
+          textFormatting: "Markera en bit text för att få upp formateringsmenyn.",
+          editBlocks: 'Ändra utseendet på ett block genom att klicka på <span class="dg-button-icon appearance"></span> knappen.',
+          changeProduct: 'Ändra en varas antal genom att klicka på <span class="dg-button-icon cog"></span> knappen.',
+          send: 'När du är klar, klicka på <span class="dg-button-text">Skicka</span>'
+        }
+      }
+    }
+  },
+  emits: ["close"],
+  data() {
+    return {
+      step: 0,
+      steps: [
+        {
+          title: this.$t("steps.addBlocks"),
+          img: n("/account/onboarding/drag-block.png")
+        },
+        {
+          title: this.$t("steps.textFormatting"),
+          img: n("/account/onboarding/text-bubble.png")
+        },
+        {
+          title: this.$t("steps.editBlocks"),
+          img: n("/account/onboarding/block-options.png")
+        },
+        {
+          title: this.$t("steps.changeProduct"),
+          img: n("/account/onboarding/article-options.png")
+        },
+        {
+          title: this.$t("steps.send"),
+          img: n("/account/onboarding/doc-send.png")
+        }
+      ]
+    };
+  }
+}, _ = { style: { position: "fixed", left: "0", top: "0", right: "0", bottom: "0", "background-color": "hsla(0, 0%, 0%, 0.2)", padding: "calc(4 * var(--rem)) 0", display: "grid", "place-items": "center", "z-index": "9999" } }, x = {
+  class: "max-w-[95%] md:max-w-lg",
+  style: { "background-color": "hsl(212, 90%, 15%)", padding: `calc(3 * var(--rem)) calc(2.5 * var(--rem))
+          calc(2.5 * var(--rem)) calc(2.5 * var(--rem))`, "border-radius": "8px", color: "hsla(0, 0%, 100%, 0.8)", "font-size": "16px", position: "relative" }
+}, w = { style: { "padding-left": "calc(1 * var(--rem))" } }, B = { style: { "text-transform": "uppercase", "font-size": "0.75em", "padding-bottom": "0.7em", color: "hsl(321, 100%, 78%)" } }, C = { style: { "font-size": "1.5em", "padding-bottom": "1em", "line-height": "1.4", "font-weight": "500", color: "white", "min-height": "100px" } }, z = ["innerHTML"], S = { style: { width: "100%", "background-color": "hsla(0, 0%, 100%, 0.2)", "line-height": "0", "border-radius": "8px", overflow: "hidden", position: "relative", "padding-bottom": "60%" } }, F = ["src"], L = { style: { "margin-top": "calc(3 * var(--rem))", display: "flex", "justify-content": "flex-end", position: "relative" } }, N = { style: { position: "absolute", display: "grid", gap: "10px", "grid-template-columns": "repeat(5, 1fr)", top: "50%", left: "50%", transform: "translate(-50%, -50%)" } }, T = ["onClick"];
+function j(s, o, A, D, t, G) {
+  const p = h("CButton");
+  return i(), a("div", _, [
+    e("div", x, [
+      l(p, {
+        size: "small",
+        type: "none",
+        pattern: "tertiary",
+        circle: "",
+        icon: "x",
+        style: { position: "absolute", right: "calc(1 * var(--rem))", top: "calc(1 * var(--rem))" },
+        onClick: o[0] || (o[0] = (d) => s.$emit("close"))
+      }),
+      e("div", w, [
+        e("div", B, c(s.$t("title")), 1),
+        e("div", C, [
+          g(c(t.step + 1) + ". ", 1),
+          e("span", {
+            innerHTML: t.steps[t.step].title
+          }, null, 8, z)
+        ])
+      ]),
+      e("div", S, [
+        l(b, { name: "slide-prev" }, {
+          default: m(() => [
+            (i(), a("img", {
+              key: t.step,
+              src: t.steps[t.step].img,
+              style: { position: "absolute", left: "0", top: "0", width: "100%", height: "100%" }
+            }, null, 8, F))
+          ]),
+          _: 1
+        })
+      ]),
+      e("div", L, [
+        e("div", N, [
+          (i(!0), a(k, null, f(t.steps, (d, r) => (i(), a("div", {
+            key: r,
+            style: v([{
+              backgroundColor: t.step === r ? "white" : "hsla(0, 0%, 100%, 0.4)"
+            }, { width: "8px", height: "8px", "border-radius": "8px", cursor: "pointer" }]),
+            onClick: (M) => t.step = r
+          }, null, 12, T))), 128))
+        ]),
+        l(p, {
+          class: "pulse",
+          type: "secondary",
+          "icon-right": "arrow-right",
+          style: { "border-radius": "5px", "animation-duration": "0.2s" },
+          onClick: o[1] || (o[1] = (d) => t.step === t.steps.length - 1 ? s.$emit("close") : t.step++)
+        }, {
+          default: m(() => [
+            g(c(t.step === t.steps.length - 1 ? s.$t("_common:done").capitalize() : s.$t("_common:next").capitalize()), 1)
+          ]),
+          _: 1
+        })
+      ])
+    ])
+  ]);
+}
+const V = /* @__PURE__ */ u(y, [["render", j]]);
+export {
+  V as default
+};