@cling-se/widget 0.14.4 → 0.14.6

package/dist/DocTimeline-LcW4z3nC.js

@@ -0,0 +1,481 @@
+import { n as u, ac as f, ad as _, ae as b, b as S } from "./main-CQBEuZk9.js";
+import { m as D } from "./vuex.esm-DKGl8mcw.js";
+const w = {
+  name: "DynamicLink",
+  props: {
+    template: {
+      type: String,
+      required: !0
+    }
+  },
+  computed: {
+    transformed() {
+      return { template: this.template };
+    }
+  }
+};
+var k = function() {
+  var t = this, e = t._self._c;
+  return e(t.transformed, { tag: "component" });
+}, z = [], T = /* @__PURE__ */ u(
+  w,
+  k,
+  z,
+  !1,
+  null,
+  null
+);
+const I = T.exports, B = {
+  name: "EventItem",
+  components: {
+    DynamicLink: I
+  },
+  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: (s) => [
+        "blue",
+        "teal",
+        "orange",
+        "green",
+        "red",
+        "purple",
+        "gray",
+        "primary"
+      ].indexOf(s) !== -1
+    },
+    isFuture: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    date() {
+      return f(_(this.createdAt)) ? this.$formatDate(this.createdAt, "Pp") : null;
+    },
+    dayOfMonth() {
+      return f(_(this.createdAt)) ? this.$formatDate(this.createdAt, "d") : null;
+    },
+    month() {
+      return f(_(this.createdAt)) ? this.$formatDate(this.createdAt, "MMM") : null;
+    },
+    iconClasses() {
+      const s = {
+        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" : s[this.color] || s.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";
+    }
+  }
+};
+var O = function() {
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "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" }, [e("div", { staticClass: "relative m-0 h-[23px]", staticStyle: { "--bg": "#fff" } }, [e("div", { staticClass: "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", class: t.iconClasses, staticStyle: { transform: "translate(-50%, calc(-50% + 8px))", "box-shadow": "0 0 0 2px var(--bg)" } }, [t.loading ? t._e() : e("CIcon", { attrs: { type: t.icon, size: "14" } })], 1)]), e("div", { staticClass: "ml-7 flex min-w-0 flex-grow flex-col pt-1" }, [t.loading ? [e("CSkeleton", { staticClass: "max-w-md font-medium text-gray-900", class: t.titleSize, attrs: { width: "80%" } }), e("CSkeleton", { staticClass: "text-gray-600", class: t.textSize, attrs: { width: "40%" } }), e("CSkeleton", { staticClass: "inline-flex pt-0.5 text-center text-xs text-gray-500", class: t.dateSize, attrs: { hidden: "" } })] : t._e(), e("div", { staticClass: "max-w-md font-medium", class: [t.isFuture ? "text-gray-500" : "text-gray-700", t.titleSize] }, [t.template ? e("DynamicLink", { attrs: { template: t.template } }) : [t._v(t._s(t.title))]], 2), t.content ? e("div", { class: [t.isFuture ? "text-gray-400" : "text-gray-600", t.textSize] }, [e("div", { domProps: { innerHTML: t._s(t.content) } })]) : t._e(), e("div", { staticClass: "inline-flex pt-1 text-center text-gray-500", class: t.dateSize }, [e("div", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: t.date, expression: "date" }] }, [t._v(t._s(t.dayOfMonth) + " " + t._s(t.month))])])], 2)]);
+}, E = [], M = /* @__PURE__ */ u(
+  B,
+  O,
+  E,
+  !1,
+  null,
+  null
+);
+const N = M.exports, F = {
+  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}}"
+  }
+}, q = {
+  name: "DocumentTimeline",
+  i18nOptions: {
+    namespaces: "documentTimeline",
+    messages: F
+  },
+  components: {
+    EventItem: N
+  },
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    colors: {
+      type: Object,
+      default: () => ({})
+    },
+    size: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    ...D({
+      userById: "companyUsers/byId"
+    }),
+    events() {
+      var n, r;
+      const s = [
+        this.formatEvent({
+          code: "created",
+          createdAt: (n = this.document) == null ? void 0 : n.createdAt
+        })
+      ], { events: t, scheduledFirstDelivery: e } = this.document || {};
+      if ((e == null ? void 0 : e.status) === "active") {
+        const o = e.deliveryTypes.join(
+          ` ${this.$t("_common:and")} `
+        );
+        s.push({
+          title: this.$t("_common:scheduledDelivery"),
+          content: `${this.$t(
+            "_common:via"
+          )} ${o}, ${this.$formatDate(
+            e.sendAt
+          )}`,
+          isFuture: !0,
+          icon: "calendar",
+          color: ((r = this.colors) == null ? void 0 : r.scheduledDelivery) || "primary"
+        });
+      }
+      return t == null || t.forEach((o) => s.push(this.formatEvent(o))), s;
+    }
+  },
+  methods: {
+    formatEvent({ code: s, data: t, createdAt: e, children: n = [] }) {
+      var y;
+      const {
+        client: r = {},
+        clients: o,
+        email: d,
+        status: m,
+        counter: x,
+        sendSource: h,
+        companyUserId: $
+      } = t || {}, p = x || n.length + 1, c = r.name, C = {
+        created: () => ({
+          title: this.$t("_common:created"),
+          createdAt: e,
+          icon: "folder",
+          color: "primary"
+        }),
+        viewed: () => ({
+          title: this.$t("viewed"),
+          content: (c ? this.$t("viewedContent", { name: c }) : "") + (p ? ` ${this.$tc("_common:times", { count: p })}` : ""),
+          createdAt: e,
+          icon: "eye",
+          color: "primary"
+        }),
+        accepted: () => {
+          var a;
+          const i = {
+            title: this.$t("_common:status.signed"),
+            content: c ? this.$t("byName", { name: c }) : "",
+            createdAt: e,
+            icon: "check",
+            color: "primary"
+          };
+          return i.content && ((a = r.answerMethod) == null ? void 0 : a.accept) === "bankId" && (i.content += ` ${this.$t("withBankId")}`), i;
+        },
+        denied: () => ({
+          title: this.$t("_common:status.denied"),
+          content: c ? this.$t("byName", { name: c }) : "",
+          createdAt: e,
+          icon: "x",
+          color: "primary"
+        }),
+        sent: () => {
+          let i = this.$t("_common:sent");
+          return ["reminder", "propertyDesignation"].includes(h) && (i = this.$t("_common:sentThing", {
+            thing: h === "reminder" ? this.$t("_common:reminder") : this.$t("propertyDesignation")
+          })), {
+            title: i,
+            content: o == null ? void 0 : o.map(
+              (a) => ["email", "cellphone"].filter((l) => !!a[l]).map((l) => a[l]).join(` ${this.$t("_common:and")} `)
+            ).reduce(
+              (a, l) => a ? `${a}<div>${l}</div>` : `${this.$t("_common:to")}: ${l}`.capitalize(),
+              ""
+            ),
+            createdAt: e,
+            icon: h === "reminder" ? "bell" : "send",
+            color: "primary"
+          };
+        },
+        statusChanged: () => ["accepted", "denied"].includes(m) ? {
+          title: m === "accepted" ? this.$t("statusChangedAccepted") : this.$t("statusChangedDenied"),
+          createdAt: e,
+          icon: m === "accepted" ? "check" : "x",
+          color: m === "accepted" ? "green" : "red"
+        } : null,
+        requestChange: () => {
+          var a;
+          const i = ((a = this.userById($)) == null ? void 0 : a.fullName) || "";
+          return {
+            title: `${this.$t("requestChange")} ${this.$t(
+              `_common:status.${m}`
+            )}`,
+            content: i && this.$t("byName", { name: i }),
+            createdAt: e,
+            icon: "tool",
+            color: "primary"
+          };
+        },
+        mailDelivered: () => ({
+          title: this.$t("_common:sentThing", {
+            thing: this.$t("_common:email").capitalize()
+          }),
+          content: d ? `${this.$t("_common:to")}: ${d}`.capitalize() : "",
+          createdAt: e,
+          icon: "inbox",
+          color: "primary"
+        }),
+        mailOpened: () => ({
+          title: this.$t("mailOpened"),
+          content: `${this.$t("mailOpenedContent", { email: d })} ${p ? this.$tc("_common:times", { count: p }) : ""}`,
+          createdAt: e,
+          icon: "email",
+          color: "primary"
+        }),
+        mailDropped: () => ({
+          title: this.$t("mailDropped"),
+          content: d ? this.$t("toEmail", { email: d }) : null,
+          createdAt: e,
+          icon: "alert-triangle",
+          color: "orange"
+        }),
+        smsDropped: () => ({
+          title: this.$t("smsDropped"),
+          content: t ? `${this.$t("_common:to")}: ${t}`.capitalize() : "",
+          createdAt: e,
+          icon: "alert-triangle",
+          color: "orange"
+        }),
+        expired: () => ({
+          title: this.$t("expired"),
+          content: this.$t("expiredContent"),
+          createdAt: e,
+          icon: "moon",
+          color: "gray"
+        })
+      }, g = (y = this.colors) == null ? void 0 : y[s];
+      return {
+        ...C[s](),
+        ...g && { color: g }
+      };
+    }
+  }
+};
+var A = function() {
+  var t = this, e = t._self._c;
+  return e("div", [t._t("header"), t._l(t.events, function(n, r) {
+    return e("EventItem", { key: r, attrs: { title: n.title, content: n.content, "created-at": n.createdAt, icon: n.icon, color: n.color, "is-future": n.isFuture, size: t.size } });
+  })], 2);
+}, j = [], R = /* @__PURE__ */ u(
+  q,
+  A,
+  j,
+  !1,
+  null,
+  null
+);
+const L = R.exports, v = {
+  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"
+  }
+}, P = {
+  props: {
+    status: {
+      type: String,
+      default: ""
+    },
+    split: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    text() {
+      return this.status ? b.t(`_common:status.${this.status}`) : "";
+    },
+    className() {
+      const { statusClass: s = "" } = v[this.status] || {};
+      return s;
+    },
+    icon() {
+      return S(v, `${this.status}.icon`);
+    }
+  }
+};
+var G = function() {
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "c-badge_status inline-flex h-6 items-center rounded-full pl-1 pr-2 text-xs font-medium leading-none", class: t.className }, [t.icon ? e("CIcon", { staticClass: "status-icon mr-1", attrs: { type: t.icon, size: "16" } }) : t._e(), e("span", [t._v(t._s(t.text))])], 1);
+}, H = [], V = /* @__PURE__ */ u(
+  P,
+  G,
+  H,
+  !1,
+  null,
+  null
+);
+const U = V.exports, K = {
+  name: "DocTimeline",
+  components: {
+    StatusBadge: U,
+    DocumentTimeline: L
+  },
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    showHeader: {
+      type: Boolean,
+      default: !0
+    },
+    viewType: {
+      type: String,
+      default: "modal"
+    }
+  }
+};
+var J = function() {
+  var t = this, e = t._self._c;
+  return e("div", { class: { "p-8": t.viewType !== "mount" } }, [e("DocumentTimeline", { attrs: { document: t.document, size: "large" } }, [t.showHeader ? e("div", { staticClass: "mb-4 border-b pb-4", attrs: { slot: "header" }, slot: "header" }, [e("div", { staticClass: "mb-2" }, [e("div", { staticClass: "text-xs text-gray-600", domProps: { textContent: t._s(t.$t("_common:document").capitalize()) } }), e("div", { staticClass: "text-lg font-semibold" }, [t._v(t._s(t.document.name))])]), e("div", { staticClass: "-ml-2 inline-flex items-center" }, [e("div", { staticClass: "mr-1.5 py-1 pl-2 text-xs text-gray-600", domProps: { textContent: t._s(t.$t("_common:status.status")) } }), e("StatusBadge", { attrs: { status: t.document.status } })], 1)]) : t._e()])], 1);
+}, Q = [], W = /* @__PURE__ */ u(
+  K,
+  J,
+  Q,
+  !1,
+  null,
+  null
+);
+const Z = W.exports;
+export {
+  Z as default
+};

package/dist/DocumentClient-CqbTRdpB.js

@@ -0,0 +1,136 @@
+import { a as u } from "./answerDocumentMixin-BYZPU_R-.js";
+import { D as m } from "./DocumentLayout-Dbf8_01r.js";
+import { f as d } from "./formValidationMixin-D7zXxCpC.js";
+import { V as l, n as a } from "./main-CQBEuZk9.js";
+import { D as f } from "./DocumentVoided-vH1Ti5lZ.js";
+const p = (s) => {
+  var e;
+  return (e = window == null ? void 0 : window.parent) == null ? void 0 : e.postMessage(s, "*");
+}, o = (s) => typeof s == "object" && "event" in s;
+class _ {
+  constructor() {
+    this.observers = {}, this.registered = !0, window.addEventListener("message", this._onMessage.bind(this));
+  }
+  _onMessage(e) {
+    if (e.source === window.parent && o(e == null ? void 0 : e.data)) {
+      const { event: t, data: r } = e.data;
+      this.observers[t] && this.observers[t].forEach((c) => c(r));
+    }
+  }
+  on(e, t) {
+    this.registered || window.addEventListener("message", this._onMessage.bind(this)), this.observers[e] = this.observers[e] || [], this.observers[e].push(t);
+  }
+  off(e, t) {
+    if (this.observers[e]) {
+      if (!t) {
+        delete this.observers[e];
+        return;
+      }
+      this.observers[e] = this.observers[e].filter(
+        (r) => r !== t
+      );
+    }
+  }
+  emit(e) {
+    if (!o(e))
+      throw new Error(
+        "Invalid message, must be an object including an event property"
+      );
+    p(e);
+  }
+  destroy() {
+    window.removeEventListener("message", this._onMessage.bind(this)), this.registered = !1;
+  }
+}
+const n = new _(), i = l.observable({
+  canEdit: !1,
+  isForm: !1,
+  setFormValue: null
+}), h = {
+  components: {
+    DocumentLayout: m,
+    DocumentVoided: f
+  },
+  mixins: [d, u()],
+  provide: () => ({ viewSettings: i }),
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    setFormValue: {
+      type: Function,
+      required: !0
+    }
+  },
+  created() {
+    this.setFormValue && (i.setFormValue = this.setFormValue), n.on("answer", this.onAnswerMessage);
+  },
+  beforeDestroy() {
+    n.off("answer", this.onAnswerMessage);
+  },
+  methods: {
+    onAnswerMessage(s) {
+      this.onAnswer(s == null ? void 0 : s.mode);
+    }
+  }
+};
+var v = function() {
+  var r;
+  var e = this, t = e._self._c;
+  return t("div", [e._t("default"), ((r = e.document) == null ? void 0 : r.status) === "voided" ? t("DocumentVoided", { attrs: { document: e.document } }) : t("DocumentLayout", { attrs: { document: e.document } })], 2);
+}, w = [], b = /* @__PURE__ */ a(
+  h,
+  v,
+  w,
+  !1,
+  null,
+  null
+);
+const g = b.exports, y = {
+  name: "DocumentClient",
+  components: {
+    ClientView: g
+  },
+  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: ""
+    }
+  }
+};
+var M = function() {
+  var e = this, t = e._self._c;
+  return t("ClientView", { attrs: { document: e.document, "set-form-value": e.setFormValue } });
+}, V = [], D = /* @__PURE__ */ a(
+  y,
+  M,
+  V,
+  !1,
+  null,
+  null
+);
+const q = D.exports;
+export {
+  q as default
+};