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

package/dist/index-CFNv6OvX.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-Cb-nyil1.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
+};

package/dist/index-Cx71On5Z.js

@@ -0,0 +1,508 @@
+import { h as I, d5 as q, I as P, b as r, j as w, o, d as f, s as i, S as $, c as g, ao as k, bn as F, f as C, w as p, Z as V, _ as M, ar as N, ah as G, m as D, a as L, g as T, y as b, e as m, B as x, v as _, T as O, as as j, F as z, k as R, n as U } from "./main-Cb-nyil1.js";
+import { i as H } from "./DocumentLayout-CKSi42ev.js";
+import { _ as W } from "./CFormField.vue_vue_type_script_setup_true_lang-D_U9coAY.js";
+import { B as A } from "./DocTextEditor-Dm-cTZpA.js";
+import { u as Z } from "./index-kp-GC5I0.js";
+import { r as B, b as J } from "./index-BjiGCJPI.js";
+import { S as K } from "./SmartList-DqG7Q5t7.js";
+import { w as Q } from "./CDropdownItem-Dmq5gYzA.js";
+const X = { key: 0 }, Y = { class: "modal-container" }, ee = { class: "popover-container" }, te = /* @__PURE__ */ I({
+  __name: "ContextModal",
+  props: {
+    placement: { default: "top-start" }
+  },
+  emits: ["show", "hide"],
+  setup(e, { emit: t }) {
+    const v = t, { rootChild: u } = q(), s = P(!1), a = () => {
+      s.value = !0, v("show");
+    }, n = () => {
+      s.value = !1, v("hide");
+    };
+    return (d, c) => {
+      const h = r("VDropdown");
+      return w(H) ? (o(), f("div", X, [
+        i("div", { onClick: a }, [
+          $(d.$slots, "default", {}, void 0, !0)
+        ]),
+        s.value ? (o(), g(F, {
+          key: 0,
+          to: w(u)
+        }, [
+          i("div", {
+            class: "modal-overlay",
+            onClick: k(n, ["self"])
+          }, [
+            i("div", Y, [
+              $(d.$slots, "popper", { hide: n }, void 0, !0)
+            ])
+          ])
+        ], 8, ["to"])) : C("", !0)
+      ])) : (o(), g(h, V({ key: 1 }, d.$props, {
+        placement: d.placement,
+        shown: s.value,
+        "onUpdate:shown": c[0] || (c[0] = (y) => s.value = y),
+        "popper-class": "context-modal-popper",
+        onShow: a,
+        onHide: n,
+        "auto-hide": !1
+      }), {
+        popper: p(() => [
+          i("div", ee, [
+            s.value ? (o(), g(F, {
+              key: 0,
+              to: w(u)
+            }, [
+              i("div", {
+                class: "overlay",
+                onClick: k(n, ["self"])
+              })
+            ], 8, ["to"])) : C("", !0),
+            $(d.$slots, "popper", { hide: n }, void 0, !0)
+          ])
+        ]),
+        default: p(() => [
+          $(d.$slots, "default", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 16, ["placement", "shown"]));
+    };
+  }
+}), se = /* @__PURE__ */ M(te, [["__scopeId", "data-v-71def6ac"]]), { mapFields: oe } = N({
+  getterType: "forms/getField",
+  mutationType: "forms/updateField"
+}), ae = {
+  i18nOptions: {
+    namespaces: "TextTemplatesForm",
+    messages: {
+      en: {
+        textLabel: "Snippet",
+        name: {
+          label: "Template Name",
+          placeholder: "Name"
+        },
+        placeholderType: {
+          default: "Write here..."
+        },
+        validations: {
+          name: {
+            required: "Name is required",
+            maxLength: "Maximum length is 256 characters"
+          },
+          textContent: {
+            required: "Add some content"
+          }
+        }
+      },
+      sv: {
+        textLabel: "Mallens innehåll",
+        name: {
+          label: "Namn på mallen",
+          placeholder: "Mallens namn"
+        },
+        placeholderType: {
+          default: "Skriv här..."
+        },
+        validations: {
+          name: {
+            required: "Ge mallen ett namn",
+            maxLength: "Får max vara 256 tecken långt"
+          },
+          textContent: {
+            required: "Skriv vad mallen ska innehålla"
+          }
+        }
+      }
+    }
+  },
+  name: "TextTemplatesForm",
+  components: {
+    BaseTextEditor: A,
+    Spinner: G,
+    CField: W
+  },
+  expose: ["canLeave"],
+  emits: ["close"],
+  props: {
+    id: {
+      type: [String, Number],
+      default: null
+    },
+    predefinedTextContent: {
+      type: String,
+      default: null
+    },
+    onAfterSubmit: {
+      type: Function,
+      default: null
+    },
+    showFixedCloseButton: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup() {
+    return {
+      v$: Z()
+    };
+  },
+  validations: {
+    name: {
+      required: B,
+      maxLength: J(255)
+    },
+    textContent: {
+      required: B
+    }
+  },
+  computed: {
+    ...D({
+      isPosting: "templateMessages/isPosting",
+      isFetching: "templateMessages/isFetching",
+      checkFormChanged: "forms/hasChanged"
+    }),
+    ...oe({
+      templateMessage: "templateMessage",
+      name: "templateMessage.name",
+      textContent: "templateMessage.message"
+    }),
+    messages() {
+      return {
+        name: {
+          required: this.$t("validations.name.required"),
+          maxLength: this.$t("validations.name.maxLength")
+        },
+        textContent: {
+          required: this.$t("validations.textContent.required")
+        }
+      };
+    },
+    hasChanged() {
+      return this.checkFormChanged("templateMessage");
+    }
+  },
+  watch: {
+    id() {
+      this.load();
+    }
+  },
+  mounted() {
+    this.load(), this.predefinedTextContent && (this.textContent = this.predefinedTextContent);
+  },
+  methods: {
+    ...L({
+      loadTemplate: T.LOAD_TEMPLATE_MESSAGE,
+      deleteTemplate: T.DELETE_TEMPLATE_MESSAGE,
+      formNewTemplate: T.FORM_NEW_TEMPLATE_MESSAGE,
+      formEditTemplate: T.FORM_EDIT_TEMPLATE_MESSAGE,
+      formSubmitTemplate: T.FORM_SUBMIT_TEMPLATE_MESSAGE
+    }),
+    canLeave() {
+      return !this.hasChanged;
+    },
+    async load() {
+      try {
+        this.id ? (await this.loadTemplate({
+          id: this.id
+        }), await this.formEditTemplate({
+          id: this.id
+        })) : await this.formNewTemplate();
+      } catch (e) {
+        b(e);
+      }
+    },
+    validateBeforeSubmit() {
+      return this.v$.$touch(), this.v$.$invalid ? !1 : this.submit();
+    },
+    async submit() {
+      if (this.hasChanged)
+        try {
+          await this.formSubmitTemplate(), typeof this.onAfterSubmit == "function" && this.onAfterSubmit();
+        } catch (e) {
+          b(e);
+        }
+    },
+    async remove() {
+      try {
+        await this.deleteTemplate({ id: this.id }), typeof this.onAfterSubmit == "function" && this.onAfterSubmit();
+      } catch (e) {
+        b(e);
+      }
+    }
+  }
+}, ne = { style: { position: "relative" } }, le = {
+  key: 1,
+  class: "flex w-full items-center justify-center",
+  style: { padding: "calc(3 * var(--rem)) 0" }
+}, ie = { key: 2 };
+function re(e, t, v, u, s, a) {
+  const n = r("CButton"), d = r("Spinner"), c = r("CInput"), h = r("CField"), y = r("BaseTextEditor");
+  return o(), f("div", ne, [
+    v.showFixedCloseButton ? (o(), g(n, {
+      key: 0,
+      class: "fixed-close-button",
+      circle: "",
+      icon: "x",
+      onClick: t[0] || (t[0] = (l) => e.$emit("close"))
+    })) : C("", !0),
+    e.isFetching ? (o(), f("div", le, [
+      m(d)
+    ])) : e.templateMessage !== void 0 ? (o(), f("form", ie, [
+      m(h, {
+        validator: u.v$.name,
+        messages: a.messages.name,
+        label: e.$t("name.label")
+      }, {
+        default: p(() => [
+          m(c, {
+            modelValue: e.name,
+            "onUpdate:modelValue": t[1] || (t[1] = (l) => e.name = l),
+            placeholder: e.$t("name.placeholder"),
+            onBlur: t[2] || (t[2] = (l) => u.v$.name.$touch())
+          }, null, 8, ["modelValue", "placeholder"])
+        ]),
+        _: 1
+      }, 8, ["validator", "messages", "label"]),
+      m(h, {
+        validator: u.v$.textContent,
+        messages: a.messages.textContent,
+        label: e.$t("textLabel")
+      }, {
+        default: p(() => [
+          m(y, {
+            modelValue: e.textContent,
+            "onUpdate:modelValue": t[3] || (t[3] = (l) => e.textContent = l),
+            placeholder: e.$t("placeholderType.default"),
+            "class-list": "large",
+            onBlur: t[4] || (t[4] = (l) => u.v$.textContent.$touch())
+          }, null, 8, ["modelValue", "placeholder"])
+        ]),
+        _: 1
+      }, 8, ["validator", "messages", "label"]),
+      m(n, {
+        loading: e.isPosting,
+        disabled: !a.hasChanged,
+        type: "secondary",
+        style: { "margin-top": "calc(1 * var(--rem))" },
+        icon: "save",
+        wide: "",
+        onClick: t[5] || (t[5] = (l) => a.validateBeforeSubmit())
+      }, {
+        default: p(() => [
+          x(_(e.$t("_common:save")), 1)
+        ]),
+        _: 1
+      }, 8, ["loading", "disabled"]),
+      v.id ? (o(), g(n, {
+        key: 0,
+        loading: e.isPosting,
+        type: "secondary",
+        pattern: "tertiary",
+        style: { "margin-top": "calc(1 * var(--rem))" },
+        wide: "",
+        onClick: t[6] || (t[6] = (l) => a.remove())
+      }, {
+        default: p(() => [
+          x(_(e.$t("_common:remove")), 1)
+        ]),
+        _: 1
+      }, 8, ["loading"])) : C("", !0)
+    ])) : C("", !0)
+  ]);
+}
+const de = /* @__PURE__ */ M(ae, [["render", re], ["__scopeId", "data-v-286de2c9"]]), me = {
+  name: "TextTemplatesModal",
+  components: {
+    SmartList: K,
+    BaseTextEditor: A
+  },
+  emits: ["select", "close"],
+  mixins: [Q],
+  setup() {
+    return { viewContext: O };
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+      query: ""
+    };
+  },
+  computed: {
+    ...j("templateMessages", {
+      templateMessages: (e) => e.data
+    }),
+    templates() {
+      return Object.values(this.templateMessages);
+    }
+  },
+  methods: {
+    onSelect(e) {
+      this.$emit("select", e), this.close();
+    },
+    close() {
+      this.$emit("close");
+    },
+    openCreateModal() {
+      this.close(), this.$modal.show(
+        de,
+        {
+          predefinedTextContent: "",
+          showFixedCloseButton: !0,
+          onAfterSubmit: () => this.$modal.hide("saveTemplateModal")
+        },
+        {
+          name: "saveTemplateModal",
+          delay: 100,
+          adaptive: !0,
+          height: "auto",
+          width: "90%",
+          maxWidth: 500,
+          scrollable: !0,
+          classes: "overflow-visible default"
+        }
+      );
+    }
+  }
+}, pe = {
+  ref: "modal-container",
+  class: "font-inter t-modal"
+}, ue = { class: "t-nav" }, ce = { class: "t-main" }, he = { class: "t-list" }, fe = ["onMouseoverPassive", "onClick"], ve = {
+  key: 0,
+  class: "t-text quill-format"
+}, ge = { key: 1 }, Ce = { class: "t-footer flex w-full items-center justify-between" };
+function Te(e, t, v, u, s, a) {
+  const n = r("CInput"), d = r("BaseTextEditor"), c = r("CIcon"), h = r("CButton"), y = r("SmartList");
+  return o(), g(y, {
+    items: a.templates,
+    "sort-key": "position",
+    query: s.query
+  }, {
+    default: p(({ items: l }) => [
+      i("div", pe, [
+        i("div", ue, [
+          m(n, {
+            ref: "searchInput",
+            modelValue: s.query,
+            "onUpdate:modelValue": [
+              t[0] || (t[0] = (S) => s.query = S),
+              t[1] || (t[1] = (S) => s.selectedIndex = 0)
+            ],
+            placeholder: e.$t("search"),
+            class: "search-input focus:text-gray-500",
+            icon: "search"
+          }, null, 8, ["modelValue", "placeholder"])
+        ]),
+        i("div", ce, [
+          i("div", he, [
+            (o(!0), f(z, null, R(l, (S, E) => (o(), f("div", {
+              key: S.id,
+              class: U([{ selected: E === s.selectedIndex }, "t-list-item truncate-text"]),
+              onMouseoverPassive: () => s.selectedIndex = E,
+              onClick: (Me) => a.onSelect(l[s.selectedIndex].message || "")
+            }, _(S.name), 43, fe))), 128))
+          ]),
+          e.mq !== "sm" ? (o(), f("div", ve, [
+            l[s.selectedIndex] ? (o(), g(d, {
+              key: 0,
+              "model-value": l[s.selectedIndex].message || "",
+              editable: !1,
+              extensions: "all",
+              "class-list": "document-form",
+              unstyled: ""
+            }, null, 8, ["model-value"])) : (o(), f("div", ge, _(e.$t("noResults")), 1))
+          ])) : C("", !0)
+        ]),
+        i("div", Ce, [
+          t[2] || (t[2] = i("div", { style: { display: "inline-flex", "align-items": "center" } }, null, -1)),
+          i("div", null, [
+            u.viewContext !== "widget" ? (o(), g(h, {
+              key: 0,
+              to: { name: "settingsTemplates" },
+              class: "t-footer-button",
+              target: "_blank",
+              size: "small"
+            }, {
+              default: p(() => [
+                x(_(e.$t("handle")) + " ", 1),
+                m(c, {
+                  type: "new-window",
+                  size: "16",
+                  style: { "margin-left": "0.5em" }
+                })
+              ]),
+              _: 1
+            })) : C("", !0),
+            m(h, {
+              class: "t-footer-button",
+              size: "small",
+              onClick: a.openCreateModal
+            }, {
+              default: p(() => [
+                x(_(e.$t("create", { thing: e.$t("template") })), 1)
+              ]),
+              _: 1
+            }, 8, ["onClick"])
+          ])
+        ])
+      ], 512)
+    ]),
+    _: 1
+  }, 8, ["items", "query"]);
+}
+const _e = /* @__PURE__ */ M(me, [["render", Te], ["__scopeId", "data-v-f299b0c2"]]), ye = {
+  name: "TextTemplates",
+  components: {
+    ContextModal: se,
+    TextTemplatesModal: _e
+  },
+  emits: ["open", "close", "select"],
+  inject: {
+    viewSettings: {
+      default: () => ({ isPublicForm: !1 })
+    }
+  },
+  props: {
+    placement: {
+      type: String,
+      default: "left"
+    }
+  },
+  created() {
+    this.viewSettings.isPublicForm || this.loadTemplateMessages();
+  },
+  methods: {
+    ...L({
+      loadTemplateMessages: T.LOAD_TEMPLATE_MESSAGES
+    })
+  }
+}, Se = {
+  key: 0,
+  class: "t-list"
+}, $e = { class: "t-option main" };
+function xe(e, t, v, u, s, a) {
+  const n = r("TextTemplatesModal"), d = r("ContextModal");
+  return a.viewSettings.isPublicForm ? C("", !0) : (o(), f("div", Se, [
+    m(d, {
+      "break-point": 1e3,
+      placement: v.placement,
+      onShow: t[1] || (t[1] = (c) => e.$emit("open")),
+      onHide: t[2] || (t[2] = (c) => e.$emit("close"))
+    }, {
+      popper: p(({ hide: c }) => [
+        m(n, {
+          onClose: c,
+          onSelect: t[0] || (t[0] = (h) => e.$emit("select", h))
+        }, null, 8, ["onClose"])
+      ]),
+      default: p(() => [
+        i("div", $e, [
+          $(e.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 8, ["placement"])
+  ]));
+}
+const Ie = /* @__PURE__ */ M(ye, [["render", xe]]);
+export {
+  Ie as default
+};