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

package/dist/DocTimeline-DCwofzuk.js

@@ -0,0 +1,537 @@
+import { _ as N } from "./CSkeleton.vue_vue_type_script_setup_true_lang-Ckl--dyv.js";
+import { _ as b, b3 as S, b4 as k, b as y, a3 as O, o as a, d as l, s as o, n as u, c as w, f as _, F as D, e as v, B, v as h, E as A, m as q, S as F, k as V, aK as j, aa as H, w as L } from "./main-Cb-nyil1.js";
+const G = {
+  name: "EventItem",
+  components: {
+    CSkeleton: N
+  },
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    template: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: [String, Array],
+      default: ""
+    },
+    createdAt: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: String,
+      default: "square"
+    },
+    compact: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    color: {
+      type: String,
+      default: "gray",
+      validator: (n) => [
+        "blue",
+        "teal",
+        "orange",
+        "green",
+        "red",
+        "purple",
+        "gray",
+        "primary"
+      ].indexOf(n) !== -1
+    },
+    isFuture: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    date() {
+      return S(k(this.createdAt)) ? this.$formatDate(this.createdAt, "Pp") : null;
+    },
+    dayOfMonth() {
+      return S(k(this.createdAt)) ? this.$formatDate(this.createdAt, "d") : null;
+    },
+    month() {
+      return S(k(this.createdAt)) ? this.$formatDate(this.createdAt, "MMM") : null;
+    },
+    iconClasses() {
+      const n = {
+        blue: "text-blue-600 bg-blue-50",
+        teal: "text-cyan-600 bg-cyan-50",
+        orange: "text-orange-600 bg-orange-50",
+        green: "text-green-600 bg-green-50",
+        red: "text-red-600 bg-red-50",
+        purple: "text-purple-600 bg-purple-50",
+        gray: "text-gray-500 bg-gray-100",
+        primary: "text-primary-500 bg-primary-50"
+      };
+      return this.isFuture ? "bg-purple-100 text-purple-500" : n[this.color] || n.gray;
+    },
+    titleSize() {
+      return this.size === "large" ? "text-base" : "text-sm";
+    },
+    textSize() {
+      return this.size === "large" ? "text-[15px]" : "text-[13px]";
+    },
+    dateSize() {
+      return this.size === "large" ? "text-sm" : "text-xs";
+    }
+  }
+}, K = { class: "text-primary-500 event relative ml-4 flex cursor-default flex-nowrap pb-5 before:absolute before:-left-px before:top-4 before:h-full before:w-px before:bg-gray-300 before:content-[''] last:before:hidden" }, U = {
+  style: { "--bg": "#fff" },
+  class: "relative m-0 h-[23px]"
+}, P = { class: "ml-7 flex min-w-0 flex-grow flex-col pt-1" }, R = ["innerHTML"], J = ["innerHTML"];
+function Q(n, r, e, p, m, t) {
+  const i = y("CIcon"), s = y("CSkeleton"), x = O("tooltip");
+  return a(), l("div", K, [
+    o("div", U, [
+      o("div", {
+        class: u([t.iconClasses, "absolute left-1/2 top-1/2 z-[1] flex h-7 w-7 items-center justify-center rounded-full border-none bg-gray-100"]),
+        style: { transform: "translate(-50%, calc(-50% + 8px))", "box-shadow": "0 0 0 2px var(--bg)" }
+      }, [
+        e.loading ? _("", !0) : (a(), w(i, {
+          key: 0,
+          type: e.icon,
+          size: "14"
+        }, null, 8, ["type"]))
+      ], 2)
+    ]),
+    o("div", P, [
+      e.loading ? (a(), l(D, { key: 0 }, [
+        v(s, {
+          class: u([t.titleSize, "max-w-md font-medium text-gray-900"]),
+          width: "80%"
+        }, null, 8, ["class"]),
+        v(s, {
+          class: u([t.textSize, "text-gray-600"]),
+          width: "40%"
+        }, null, 8, ["class"]),
+        v(s, {
+          class: u([t.dateSize, "inline-flex pt-0.5 text-center text-xs text-gray-500"]),
+          hidden: ""
+        }, null, 8, ["class"])
+      ], 64)) : _("", !0),
+      o("div", {
+        class: u([[e.isFuture ? "text-gray-500" : "text-gray-700", t.titleSize], "max-w-md font-medium"])
+      }, [
+        e.template ? (a(), l("div", {
+          key: 0,
+          innerHTML: e.template
+        }, null, 8, R)) : (a(), l(D, { key: 1 }, [
+          B(h(e.title), 1)
+        ], 64))
+      ], 2),
+      e.content ? (a(), l("div", {
+        key: 1,
+        class: u([e.isFuture ? "text-gray-400" : "text-gray-600", t.textSize])
+      }, [
+        o("div", { innerHTML: e.content }, null, 8, J)
+      ], 2)) : _("", !0),
+      o("div", {
+        class: u([t.dateSize, "inline-flex pt-1 text-center text-gray-500"])
+      }, [
+        A((a(), l("div", null, [
+          B(h(t.dayOfMonth) + " " + h(t.month), 1)
+        ])), [
+          [x, t.date]
+        ])
+      ], 2)
+    ])
+  ]);
+}
+const W = /* @__PURE__ */ b(G, [["render", Q]]), X = {
+  sv: {
+    clientName: "Kunden",
+    byName: "Av {{- name}}",
+    withBankId: "med BankID",
+    propertyDesignation: "Begäran om fastighetsbeteckning",
+    viewed: "Granskat",
+    viewedContent: "{{- name}} har visat dokumentet",
+    statusChangedAccepted: "Dokumentet har blivit signerat",
+    statusChangedDenied: "Dokumentet har blivit nekat",
+    requestChange: "Markerades manuellt som",
+    mailOpened: "Mail visat",
+    mailOpenedContent: "{{email}} visat",
+    mailDropped: "E-post kunde inte skickas",
+    smsDropped: "SMS kunde inte skickas",
+    expired: "Dokumentet har förfallit",
+    expiredContent: "Giltighetstiden har passerats",
+    toEmail: "Till: {{email}}"
+  },
+  en: {
+    clientName: "Client",
+    byName: "By {{- name}}",
+    withBankId: "with BankID",
+    propertyDesignation: "Request for property designation",
+    viewed: "Viewed",
+    viewedContent: "{{- name}} has viewed the document",
+    statusChangedAccepted: "The document has been signed",
+    statusChangedDenied: "The document has been declined",
+    requestChange: "Manually marked as",
+    mailOpened: "Email opened",
+    mailOpenedContent: "{{email}} viewed",
+    mailDropped: "Could not send email",
+    smsDropped: "Could not send SMS",
+    expired: "Expired",
+    expiredContent: "The expiration date has passed",
+    toEmail: "To: {{email}}"
+  }
+}, Y = {
+  name: "DocumentTimeline",
+  i18nOptions: {
+    namespaces: "documentTimeline",
+    messages: X
+  },
+  components: {
+    EventItem: W
+  },
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    colors: {
+      type: Object,
+      default: () => ({})
+    },
+    size: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    ...q({
+      userById: "companyUsers/byId"
+    }),
+    events() {
+      var p, m;
+      const n = [
+        this.formatEvent({
+          code: "created",
+          createdAt: (p = this.document) == null ? void 0 : p.createdAt
+        })
+      ], { events: r, scheduledFirstDelivery: e } = this.document || {};
+      if ((e == null ? void 0 : e.status) === "active") {
+        const t = e.deliveryTypes.join(
+          ` ${this.$t("_common:and")} `
+        );
+        n.push({
+          title: this.$t("_common:scheduledDelivery"),
+          content: `${this.$t(
+            "_common:via"
+          )} ${t}, ${this.$formatDate(
+            e.sendAt
+          )}`,
+          isFuture: !0,
+          icon: "calendar",
+          color: ((m = this.colors) == null ? void 0 : m.scheduledDelivery) || "primary"
+        });
+      }
+      return r == null || r.forEach((t) => n.push(this.formatEvent(t))), n;
+    }
+  },
+  methods: {
+    formatEvent({ code: n, data: r, createdAt: e, children: p = [] }) {
+      var T;
+      const {
+        client: m = {},
+        clients: t,
+        email: i,
+        status: s,
+        counter: x,
+        sendSource: C,
+        companyUserId: E
+      } = r || {}, $ = x || p.length + 1, g = m.name, M = {
+        created: () => ({
+          title: this.$t("_common:created"),
+          createdAt: e,
+          icon: "folder",
+          color: "primary"
+        }),
+        viewed: () => ({
+          title: this.$t("viewed"),
+          content: (g ? this.$t("viewedContent", { name: g }) : "") + ($ ? ` ${this.$tc("_common:times", { count: $ })}` : ""),
+          createdAt: e,
+          icon: "eye",
+          color: "primary"
+        }),
+        accepted: () => {
+          var c;
+          const d = {
+            title: this.$t("_common:status.signed"),
+            content: g ? this.$t("byName", { name: g }) : "",
+            createdAt: e,
+            icon: "check",
+            color: "primary"
+          };
+          return d.content && ((c = m.answerMethod) == null ? void 0 : c.accept) === "bankId" && (d.content += ` ${this.$t("withBankId")}`), d;
+        },
+        denied: () => ({
+          title: this.$t("_common:status.denied"),
+          content: g ? this.$t("byName", { name: g }) : "",
+          createdAt: e,
+          icon: "x",
+          color: "primary"
+        }),
+        sent: () => {
+          let d = this.$t("_common:sent");
+          return ["reminder", "propertyDesignation"].includes(C) && (d = this.$t("_common:sentThing", {
+            thing: C === "reminder" ? this.$t("_common:reminder") : this.$t("propertyDesignation")
+          })), {
+            title: d,
+            content: t == null ? void 0 : t.map(
+              (c) => ["email", "cellphone"].filter((f) => !!c[f]).map((f) => c[f]).join(` ${this.$t("_common:and")} `)
+            ).reduce(
+              (c, f) => c ? `${c}<div>${f}</div>` : `${this.$t("_common:to")}: ${f}`.capitalize(),
+              ""
+            ),
+            createdAt: e,
+            icon: C === "reminder" ? "bell" : "send",
+            color: "primary"
+          };
+        },
+        statusChanged: () => ["accepted", "denied"].includes(s) ? {
+          title: s === "accepted" ? this.$t("statusChangedAccepted") : this.$t("statusChangedDenied"),
+          createdAt: e,
+          icon: s === "accepted" ? "check" : "x",
+          color: s === "accepted" ? "green" : "red"
+        } : null,
+        requestChange: () => {
+          var c;
+          const d = ((c = this.userById(E)) == null ? void 0 : c.fullName) || "";
+          return {
+            title: `${this.$t("requestChange")} ${this.$t(
+              `_common:status.${s}`
+            )}`,
+            content: d && this.$t("byName", { name: d }),
+            createdAt: e,
+            icon: "tool",
+            color: "primary"
+          };
+        },
+        mailDelivered: () => ({
+          title: this.$t("_common:sentThing", {
+            thing: this.$t("_common:email").capitalize()
+          }),
+          content: i ? `${this.$t("_common:to")}: ${i}`.capitalize() : "",
+          createdAt: e,
+          icon: "inbox",
+          color: "primary"
+        }),
+        mailOpened: () => ({
+          title: this.$t("mailOpened"),
+          content: `${this.$t("mailOpenedContent", { email: i })} ${$ ? this.$tc("_common:times", { count: $ }) : ""}`,
+          createdAt: e,
+          icon: "email",
+          color: "primary"
+        }),
+        mailDropped: () => ({
+          title: this.$t("mailDropped"),
+          content: i ? this.$t("toEmail", { email: i }) : null,
+          createdAt: e,
+          icon: "alert-triangle",
+          color: "orange"
+        }),
+        smsDropped: () => ({
+          title: this.$t("smsDropped"),
+          content: r ? `${this.$t("_common:to")}: ${r}`.capitalize() : "",
+          createdAt: e,
+          icon: "alert-triangle",
+          color: "orange"
+        }),
+        expired: () => ({
+          title: this.$t("expired"),
+          content: this.$t("expiredContent"),
+          createdAt: e,
+          icon: "moon",
+          color: "gray"
+        })
+      }, z = (T = this.colors) == null ? void 0 : T[n];
+      return {
+        ...M[n](),
+        ...z && { color: z }
+      };
+    }
+  }
+};
+function Z(n, r, e, p, m, t) {
+  const i = y("EventItem");
+  return a(), l("div", null, [
+    F(n.$slots, "header"),
+    (a(!0), l(D, null, V(t.events, (s, x) => (a(), w(i, {
+      key: x,
+      title: s.title,
+      content: s.content,
+      "created-at": s.createdAt,
+      icon: s.icon,
+      color: s.color,
+      "is-future": s.isFuture,
+      size: e.size
+    }, null, 8, ["title", "content", "created-at", "icon", "color", "is-future", "size"]))), 128))
+  ]);
+}
+const ee = /* @__PURE__ */ b(Y, [["render", Z]]), I = {
+  new: {
+    statusClass: "draft",
+    icon: "statusDraft"
+  },
+  draft: {
+    statusClass: "draft",
+    icon: "statusDraft"
+  },
+  scheduled: {
+    statusClass: "scheduled",
+    icon: "statusScheduled"
+  },
+  sent: {
+    statusClass: "sent",
+    icon: "statusSent"
+  },
+  denied: {
+    statusClass: "denied",
+    icon: "statusDenied"
+  },
+  accepted: {
+    statusClass: "accepted",
+    icon: "statusAccepted"
+  },
+  signed: {
+    statusClass: "accepted",
+    icon: "statusAccepted"
+  },
+  semiSigned: {
+    statusClass: "accepted",
+    icon: "statusSemiSigned"
+  },
+  expired: {
+    statusClass: "expired",
+    icon: "statusExpired"
+  },
+  voided: {
+    statusClass: "voided",
+    icon: "statusVoided"
+  },
+  active: {
+    statusClass: "active",
+    icon: "statusActive"
+  },
+  completed: {
+    statusClass: "completed",
+    icon: "statusCompleted"
+  },
+  archived: {
+    statusClass: "archived",
+    icon: "statusArchive"
+  }
+}, te = {
+  props: {
+    status: {
+      type: String,
+      default: ""
+    },
+    split: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    text() {
+      return this.status ? j.t(`_common:status.${this.status}`) : "";
+    },
+    className() {
+      const { statusClass: n = "" } = I[this.status] || {};
+      return n;
+    },
+    icon() {
+      return H(I, `${this.status}.icon`);
+    }
+  }
+};
+function ne(n, r, e, p, m, t) {
+  const i = y("CIcon");
+  return a(), l("div", {
+    class: u([t.className, "c-badge_status inline-flex h-6 items-center rounded-full pl-1 pr-2 text-xs font-medium leading-none"])
+  }, [
+    t.icon ? (a(), w(i, {
+      key: 0,
+      type: t.icon,
+      size: "16",
+      class: "status-icon mr-1"
+    }, null, 8, ["type"])) : _("", !0),
+    o("span", null, h(t.text), 1)
+  ], 2);
+}
+const se = /* @__PURE__ */ b(te, [["render", ne]]), ae = {
+  name: "DocTimeline",
+  components: {
+    StatusBadge: se,
+    DocumentTimeline: ee
+  },
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    showHeader: {
+      type: Boolean,
+      default: !0
+    },
+    viewType: {
+      type: String,
+      default: "modal"
+    }
+  }
+}, ie = {
+  key: 0,
+  class: "mb-4 border-b pb-4"
+}, oe = { class: "mb-2" }, re = ["textContent"], ce = { class: "text-lg font-semibold" }, le = { class: "-ml-2 inline-flex items-center" }, de = ["textContent"];
+function me(n, r, e, p, m, t) {
+  const i = y("StatusBadge"), s = y("DocumentTimeline");
+  return a(), l("div", {
+    class: u({ "p-8": e.viewType !== "mount" })
+  }, [
+    v(s, {
+      document: e.document,
+      size: "large"
+    }, {
+      header: L(() => [
+        e.showHeader ? (a(), l("div", ie, [
+          o("div", oe, [
+            o("div", {
+              class: "text-xs text-gray-600",
+              textContent: h(n.$t("_common:document").capitalize())
+            }, null, 8, re),
+            o("div", ce, h(e.document.name), 1)
+          ]),
+          o("div", le, [
+            o("div", {
+              class: "mr-1.5 py-1 pl-2 text-xs text-gray-600",
+              textContent: h(n.$t("_common:status.status"))
+            }, null, 8, de),
+            v(i, {
+              status: e.document.status
+            }, null, 8, ["status"])
+          ])
+        ])) : _("", !0)
+      ]),
+      _: 1
+    }, 8, ["document"])
+  ], 2);
+}
+const he = /* @__PURE__ */ b(ae, [["render", me]]);
+export {
+  he as default
+};

package/dist/DocumentClient-vJdxCB53.js

@@ -0,0 +1,90 @@
+import { D as f } from "./DocumentLayout-CKSi42ev.js";
+import { r as _, _ as s, b as c, o, d as V, S as y, c as u } from "./main-Cb-nyil1.js";
+import "./template-BvaNnq-g.js";
+import { u as D } from "./validation-DOcUOoMe.js";
+import { D as F } from "./DocumentVoided-CRX2WxWO.js";
+const r = _({
+  canEdit: !1,
+  isForm: !1,
+  setFormValue: null
+}), v = {
+  components: {
+    DocumentLayout: f,
+    DocumentVoided: F
+  },
+  setup() {
+    const { isValid: t } = D();
+    return { isValid: t };
+  },
+  provide: () => ({ viewSettings: r }),
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    setFormValue: {
+      type: Function,
+      required: !0
+    }
+  },
+  created() {
+    this.setFormValue && (r.setFormValue = this.setFormValue);
+  }
+};
+function h(t, a, e, i, l, d) {
+  var m;
+  const n = c("DocumentVoided"), p = c("DocumentLayout");
+  return o(), V("div", null, [
+    y(t.$slots, "default"),
+    ((m = e.document) == null ? void 0 : m.status) === "voided" ? (o(), u(n, {
+      key: 0,
+      document: e.document
+    }, null, 8, ["document"])) : (o(), u(p, {
+      key: 1,
+      document: e.document
+    }, null, 8, ["document"]))
+  ]);
+}
+const C = /* @__PURE__ */ s(v, [["render", h]]), H = {
+  name: "DocumentClient",
+  components: {
+    ClientView: C
+  },
+  provide() {
+    return {
+      customHtmlAccept: this.customHtmlAccept,
+      customHtmlDeny: this.customHtmlDeny
+    };
+  },
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    setFormValue: {
+      type: Function,
+      default: null
+    },
+    customHtmlAccept: {
+      type: String,
+      required: "",
+      default: ""
+    },
+    customHtmlDeny: {
+      type: String,
+      required: "",
+      default: ""
+    }
+  }
+};
+function $(t, a, e, i, l, d) {
+  const n = c("ClientView");
+  return o(), u(n, {
+    document: e.document,
+    "set-form-value": e.setFormValue
+  }, null, 8, ["document", "set-form-value"]);
+}
+const g = /* @__PURE__ */ s(H, [["render", $]]);
+export {
+  g as default
+};