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

package/dist/index-HXiq8Yxs.js

@@ -0,0 +1,270 @@
+import { F as S } from "./Flag-CE3K7-8a.js";
+import { w as B } from "./CDropdownItem-DvaU14-V.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-C4OdoeS2.js";
+import { i as F } from "./dom-CkTGWrfu.js";
+import { d as q } from "./debounce-CBRJalZI.js";
+import { t as P } from "./throttle-WWMDZKby.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-jOufDnZ8.js

@@ -0,0 +1,188 @@
+import { m as C, a as f, g as b, az as $, aA as w, _ as T, b as h, a3 as D, o as i, d as s, s as n, e as d, v as a, F as L, k as B, B as N, f as l, E, aB as u } from "./main-C4OdoeS2.js";
+const I = {
+  name: "ClientLinks",
+  emits: ["close"],
+  props: {
+    id: {
+      type: String,
+      required: !0
+    }
+  },
+  i18nOptions: {
+    namespaces: "ClientLinks",
+    messages: {
+      en: {
+        title: "Document links",
+        text: "Share the document links below with your recipients. Each recipient has their own unique link.",
+        copied: "Link copied to clipboard",
+        tooltip: "Copy link",
+        placeholder: "No links available.",
+        hint: "Note that visting a link will trigger a viewed event in the events timeline."
+      },
+      sv: {
+        title: "Dokumentlänkar",
+        text: "Dela dokumentlänkarna nedan med dina mottagare. Varje mottagare har sin egen unika länk.",
+        copied: "Länk kopierat till urklipp",
+        tooltip: "Kopiera länk",
+        placeholder: "Inga länkar finns tillgängliga.",
+        hint: "Notera att ett sidbesök på en länk kommer att skapa en visad-händelse i tidslinjen."
+      }
+    }
+  },
+  computed: {
+    ...C({
+      docById: "documents2/byId"
+    }),
+    document() {
+      return this.docById(this.id);
+    },
+    clients() {
+      if (!this.document) return [];
+      const { clients: t } = this.document;
+      return t.map((o) => ({
+        ...o,
+        primaryTitle: o.name,
+        secondaryTitle: o.type === "company" ? o.companyName : ""
+      }));
+    }
+  },
+  created() {
+    this.loadDocument({ id: this.id });
+  },
+  methods: {
+    ...f({
+      loadDocument: b.LOAD_DOCUMENT2
+    }),
+    async copyToClipboard(t) {
+      var c, p;
+      (c = t.target.previousElementSibling) == null || c.select();
+      const o = (p = t.target.previousElementSibling) == null ? void 0 : p.value;
+      if (!o) return;
+      await $(o) && w("info", this.$t("copied"));
+    }
+  }
+}, S = {
+  class: "font-inter",
+  style: { "background-color": "white", "border-radius": "10px", overflow: "hidden" }
+}, z = { style: { padding: "40px 30px", position: "relative" } }, V = { style: { padding: "0 0 2.5em" } }, F = ["textContent"], M = ["textContent"], O = ["textContent"], R = { style: { padding: "4px 6px 8px 6px" } }, j = { class: "client-title truncate-text" }, q = {
+  key: 0,
+  style: { opacity: "0.5", "padding-left": "0.125ch" }
+}, A = ["textContent"], P = ["href"], G = {
+  key: 1,
+  style: { padding: "0 0.5ch" }
+}, K = ["href"], U = { style: { display: "flex", position: "relative" } }, W = ["value", "placeholder"], H = { class: "x-hint" }, J = ["textContent"];
+function Q(t, o, y, c, p, r) {
+  const k = h("CButton"), _ = h("CPhoneFormat"), m = h("CIcon"), g = D("tooltip");
+  return i(), s("div", S, [
+    n("div", z, [
+      d(k, {
+        icon: "x",
+        circle: "",
+        size: "normal",
+        style: { position: "absolute", right: "1em", top: "1em", color: "hsl(0, 0%, 55%)" },
+        onClick: o[0] || (o[0] = (e) => t.$emit("close"))
+      }),
+      n("div", V, [
+        n("div", {
+          class: "x-title",
+          textContent: a(t.$t("title"))
+        }, null, 8, F),
+        n("div", {
+          class: "x-text",
+          textContent: a(t.$t("text"))
+        }, null, 8, M)
+      ]),
+      r.clients.length ? (i(!0), s(L, { key: 1 }, B(r.clients, (e, v) => (i(), s("div", {
+        key: v,
+        class: "client-card"
+      }, [
+        n("div", R, [
+          n("div", j, [
+            N(a(e.primaryTitle) + " ", 1),
+            e.secondaryTitle ? (i(), s("span", q, "· " + a(e.secondaryTitle), 1)) : l("", !0)
+          ]),
+          e.documentRole ? (i(), s("div", {
+            key: 0,
+            textContent: a(t.$t(`_common:documentRole.${e.documentRole}.label`))
+          }, null, 8, A)) : l("", !0),
+          n("div", null, [
+            e.email ? (i(), s("a", {
+              key: 0,
+              href: `mailto:${e.email}?&body=${e.docLink}`
+            }, a(e.email), 9, P)) : l("", !0),
+            e.email && e.cellphone ? (i(), s("span", G, "·")) : l("", !0),
+            e.cellphone ? (i(), s("a", {
+              key: 2,
+              href: `sms:${e.cellphone}?&body=${e.docLink}`
+            }, [
+              d(_, {
+                phone: e.cellphone,
+                region: e.cellphoneRegion
+              }, null, 8, ["phone", "region"])
+            ], 8, K)) : l("", !0)
+          ])
+        ]),
+        n("div", U, [
+          n("input", {
+            ref_for: !0,
+            ref: "key",
+            value: e.docLink,
+            placeholder: t.$t("placeholder"),
+            type: "text",
+            readonly: "readonly",
+            class: "link-field truncate-text"
+          }, null, 8, W),
+          E((i(), s("div", {
+            class: "clipboard-button",
+            onClick: o[1] || (o[1] = (...x) => r.copyToClipboard && r.copyToClipboard(...x))
+          }, [
+            d(m, {
+              type: "copy",
+              size: "17",
+              style: { "pointer-events": "none" }
+            })
+          ])), [
+            [g, t.$t("tooltip")]
+          ])
+        ])
+      ]))), 128)) : (i(), s("div", {
+        key: 0,
+        style: { padding: "2em", "font-size": "14px", "text-align": "center", color: "hsl(0, 0%, 55%)", border: "1px solid hsl(0, 0%, 88%)", "border-radius": "6px" },
+        textContent: a(t.$t("placeholder"))
+      }, null, 8, O)),
+      n("div", H, [
+        d(m, {
+          type: "info",
+          size: "16",
+          style: { flex: "0 0 auto", "margin-right": "8px", "margin-top": "3px" },
+          class: "text-primary-500"
+        }),
+        n("div", {
+          textContent: a(t.$t("hint"))
+        }, null, 8, J)
+      ])
+    ])
+  ]);
+}
+const X = /* @__PURE__ */ T(I, [["render", Q], ["__scopeId", "data-v-cb2f0c7a"]]), Y = X, ee = ({ id: t }) => {
+  var o;
+  if (!u.$modal)
+    throw Error("Open client modal requires plugin vue-js-modal");
+  (o = u.$modal) == null || o.show(
+    Y,
+    {
+      id: t
+    },
+    {
+      adaptive: !0,
+      maxWidth: 400,
+      width: "90%",
+      height: "auto",
+      scrollable: !0
+    }
+  );
+};
+export {
+  Y as C,
+  ee as o
+};