@cling-se/widget 0.18.1 → 0.18.2

package/dist/DocDetails-DcVcUbpW.js

@@ -0,0 +1,509 @@
+import { D as A } from "./DocumentVoided-Bq5V4GhU.js";
+import { C as F, a as I, w as B } from "./CDropdownItem-B-lI5fj3.js";
+import { h as V, o as n, b as s, s as o, F as _, k as N, v as i, f as d, c as y, w as v, j as S, S as P, n as z, _ as $, b7 as j, a9 as q, e as p, d as b, B as w, b8 as O, b9 as E, aB as T, ba as M } from "./main-CC0euzp8.js";
+import { C as U } from "./CPhoneFormat-7-et0t62.js";
+const G = { style: { "margin-bottom": "1em", border: "1px solid hsl(0, 0%, 84%)", "border-radius": "3px" } }, H = { class: "flex items-center p-4" }, J = { class: "mb-1" }, K = { class: "flex flex-col space-y-1 text-sm" }, Q = ["href"], W = ["href"], R = /* @__PURE__ */ V({
+  __name: "PublicContactDetails",
+  props: {
+    name: {},
+    email: {},
+    cellphone: {},
+    cellphoneRegion: {},
+    companyName: {},
+    orgNo: {},
+    region: {}
+  },
+  setup(t) {
+    return (a, e) => (n(), s("div", G, [
+      o("div", H, [
+        o("div", null, [
+          o("div", J, [
+            (n(!0), s(_, null, N([a.name, a.companyName, a.orgNo], (m, l) => (n(), s("span", {
+              key: `${m}-${l}`,
+              class: z([l === 0 ? "font-medium" : "text-gray-600", "mr-1 inline-block"])
+            }, i(m && l > 0 ? "·" : "") + " " + i(m), 3))), 128))
+          ]),
+          o("div", K, [
+            a.email ? (n(), s("a", {
+              key: 0,
+              href: `mailto:${a.email}`,
+              target: "_blank"
+            }, i(a.email), 9, Q)) : d("", !0),
+            a.cellphone ? (n(), y(S(U), {
+              key: 1,
+              phone: a.cellphone,
+              region: a.cellphoneRegion ? a.cellphoneRegion : a.region
+            }, {
+              default: v(({ formattedValue: m }) => [
+                o("a", {
+                  href: `tel:${a.cellphone}`
+                }, i(m), 9, W)
+              ]),
+              _: 1
+            }, 8, ["phone", "region"])) : d("", !0)
+          ])
+        ])
+      ]),
+      P(a.$slots, "default")
+    ]));
+  }
+}), X = {
+  name: "PublicDocumentEvents",
+  props: {
+    document: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    events() {
+      const t = [], { acceptedAt: a } = this.document;
+      return this.document.events.filter(({ createdAt: e }) => a ? j(a, e) : !0).forEach((e) => {
+        const { code: m, createdAt: l, children: c = [] } = e;
+        let { data: g = {} } = e;
+        g === null && (g = {});
+        const { client: u = {}, clients: D = [], status: k, counter: x } = g, C = {
+          sent: () => D.map((f) => {
+            const r = this.getClientName(f.id);
+            return {
+              text: this.document.$t("event.sent", {
+                to: `${r ? r + ", " : ""}`
+              }),
+              email: f.email,
+              cellphone: f.cellphone,
+              region: f.cellphoneRegion,
+              time: l
+            };
+          }),
+          viewed: () => {
+            const f = x || c.length + 1;
+            return [
+              {
+                text: `${this.document.$t(
+                  `event.${u.name ? "viewedName" : "viewed"}`,
+                  { name: u.name }
+                )} ${f ? this.document.$tc("times", { count: f }) : ""}.`,
+                time: l
+              }
+            ];
+          },
+          accepted: () => [
+            {
+              text: this.document.$t("event.accepted", {
+                by: u.name || u.email || u.cellphone
+              }),
+              time: l
+            }
+          ],
+          denied: () => [
+            {
+              text: this.document.$t("event.denied", {
+                by: u.name || u.email || u.cellphone
+              }),
+              time: l
+            }
+          ],
+          statusChanged: () => [
+            {
+              text: this.document.$t("event.statusChanged", {
+                status: this.document.$t(`status.${k}`).toLowerCase()
+              }),
+              time: l
+            }
+          ],
+          requestChange: () => [
+            {
+              text: this.document.$t("event.requestChange", {
+                status: this.document.$t(`status.${k}`).toLowerCase()
+              }),
+              time: l
+            }
+          ],
+          expired: () => [
+            {
+              text: this.document.$t("event.expired"),
+              time: l
+            }
+          ]
+        };
+        C[m] && t.push(...C[m]());
+      }), t;
+    }
+  },
+  methods: {
+    getClientName(t) {
+      const a = this.document.clients.find(({ id: e }) => e === t);
+      return a ? a.name : "";
+    }
+  }
+};
+function Y(t, a, e, m, l, c) {
+  return P(t.$slots, "default", { events: c.events });
+}
+const Z = /* @__PURE__ */ $(X, [["render", Y]]), ee = {
+  name: "PublicRecipientItem",
+  i18nOptions: {
+    namespaces: "components",
+    keyPrefix: "document.myPagesDrawer"
+  },
+  components: {
+    PublicContactDetails: R
+  },
+  props: {
+    recipient: {
+      type: Object,
+      required: !0
+    }
+  },
+  methods: {
+    get: q,
+    getBrowserString({ browser: t, os: a, device: e }) {
+      return [t && t.name, a && a.name, e && e.model].filter((m) => !!m).join(", ");
+    }
+  }
+}, te = { style: { "background-color": "hsl(0, 0%, 94%)", padding: "0.75em 0.75em", "font-weight": "500", "font-size": "13px", "line-height": "1", color: "hsl(0, 0%, 40%)", position: "relative" } }, ne = { style: { position: "absolute", right: "1em", top: "0px", transform: "translate(0, -50%)" } }, oe = { style: { padding: "0" } }, ie = { style: { padding: "1em 1.5em" } }, se = {
+  key: 0,
+  style: { "padding-bottom": "0.5em" }
+}, ae = {
+  class: "has-text-grey",
+  style: { "padding-bottom": "1em" }
+}, ce = ["src"], le = {
+  key: 1,
+  style: { "font-size": "13px", "padding-top": "3px" }
+}, de = { style: { "font-weight": "500" } }, re = {
+  key: 1,
+  style: { "font-weight": "500" }
+}, me = { key: 1 }, ue = { key: 2 }, he = {
+  key: 0,
+  style: { padding: "8px 1.5em", "border-top": "1px solid hsl(0deg 0% 88%)", "background-color": "hsl(0deg 0% 95%)", "font-size": "13px", color: "hsl(0, 0%, 35%)", "font-weight": "500" }
+}, pe = { key: 0 }, ge = { key: 1 }, _e = { key: 2 };
+function fe(t, a, e, m, l, c) {
+  const g = p("CIcon"), u = p("VDropdown"), D = p("PublicContactDetails");
+  return n(), y(D, {
+    name: e.recipient.name,
+    email: e.recipient.email,
+    cellphone: e.recipient.cellphone,
+    cellphoneRegion: e.recipient.cellphoneRegion,
+    companyName: e.recipient.companyName,
+    orgNo: e.recipient.orgNo
+  }, {
+    default: v(() => [
+      o("div", te, [
+        o("div", null, i(t.$t(`_common:documentRole.${e.recipient.documentRole}.label`)), 1),
+        o("div", ne, [
+          b(u, {
+            "popper-class": "signee-popover",
+            triggers: ["hover"],
+            placement: "bottom-end"
+          }, {
+            popper: v(() => [
+              o("div", oe, [
+                o("div", ie, [
+                  e.recipient.answer && e.recipient.answer.didAccept ? (n(), s(_, { key: 0 }, [
+                    e.recipient.answer.signatureDataURL ? (n(), s("div", se, [
+                      o("div", ae, i(t.$t("_common:signature").capitalize()), 1),
+                      o("img", {
+                        src: e.recipient.answer.signatureDataURL,
+                        style: { width: "80%" }
+                      }, null, 8, ce)
+                    ])) : (n(), s("div", le, [
+                      c.get(e.recipient, "answerMethod.accept") === "bankId" ? (n(), s(_, { key: 0 }, [
+                        o("div", de, i(t.$t(
+                          "views:publicDocument.pdfVerification.recipient.signedBankId"
+                        )), 1),
+                        o("div", null, i(e.recipient.answer.response.name), 1),
+                        o("div", null, i(e.recipient.socialNo), 1)
+                      ], 64)) : c.get(e.recipient, "answerMethod.accept") === "login" ? (n(), s("div", re, i(t.$t(
+                        "views:publicDocument.pdfVerification.recipient.verifiedLogin"
+                      )), 1)) : d("", !0)
+                    ]))
+                  ], 64)) : e.recipient.answer ? (n(), s("div", me, i(t.$t("_common:denied").capitalize()), 1)) : (n(), s("div", ue, i(t.$t("pendingAnswer")), 1))
+                ]),
+                e.recipient.answer ? (n(), s("div", he, [
+                  e.recipient.answer.didAnswerAt ? (n(), s("div", pe, [
+                    o("div", null, i(t.$t("_common:date").capitalize()) + ": " + i(t.$formatDate(e.recipient.answer.didAnswerAt, "P")), 1),
+                    o("div", null, i(t.$t("_common:time").capitalize()) + ": " + i(t.$formatDate(e.recipient.answer.didAnswerAt, "p")), 1)
+                  ])) : d("", !0),
+                  e.recipient.answer.ip ? (n(), s("div", ge, " IP: " + i(e.recipient.answer.ip), 1)) : d("", !0),
+                  e.recipient.answer.browser ? (n(), s("div", _e, " Browser: " + i(c.getBrowserString(e.recipient.answer)), 1)) : d("", !0)
+                ])) : d("", !0)
+              ])
+            ]),
+            default: v(() => [
+              e.recipient.documentRole === "signee" ? (n(), s("div", {
+                key: 0,
+                style: { padding: "5px 0.75em", "border-radius": "4px", "font-size": "13px", color: "hsl(0, 0%, 100%)", cursor: "default", display: "inline-flex", "align-items": "center" },
+                class: z(
+                  e.recipient.answer ? e.recipient.answer.didAccept ? "bg-green-600" : "bg-red-600" : "bg-neutral-400"
+                )
+              }, [
+                b(g, {
+                  size: 15,
+                  type: "info",
+                  style: { "margin-right": "0.5ch" },
+                  "stroke-width": "2"
+                }),
+                e.recipient.answer && e.recipient.answer.didAccept ? (n(), s(_, { key: 0 }, [
+                  w(i(t.$t("_common:approved").capitalize()), 1)
+                ], 64)) : e.recipient.answer ? (n(), s(_, { key: 1 }, [
+                  w(i(t.$t("_common:denied").capitalize()), 1)
+                ], 64)) : (n(), s(_, { key: 2 }, [
+                  w(i(t.$t("views:publicDocument.pdfVerification.waitingForAnswer")), 1)
+                ], 64))
+              ], 2)) : d("", !0)
+            ]),
+            _: 1
+          })
+        ])
+      ])
+    ]),
+    _: 1
+  }, 8, ["name", "email", "cellphone", "cellphoneRegion", "companyName", "orgNo"]);
+}
+const ye = /* @__PURE__ */ $(ee, [["render", fe], ["__scopeId", "data-v-5be0d201"]]), ve = {
+  name: "DocumentDetails",
+  components: {
+    PublicDocumentEvents: Z,
+    PublicRecipientItem: ye,
+    PublicContactDetails: R,
+    CDropdown: F,
+    CDropdownItem: I
+  },
+  mixins: [B],
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    openPrintFunc: {
+      type: Function,
+      default: null
+    },
+    showLanguageSelect: {
+      type: Boolean,
+      default: !0
+    },
+    close: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      docLanguages: O,
+      nativeTranslations: E
+    };
+  },
+  computed: {
+    viewer() {
+      return this.document.viewer;
+    },
+    showActionNav() {
+      return !!(this.openPrintFunc || this.showLanguageSelect || this.close);
+    },
+    senderContactDetails() {
+      const { sender: t } = this.document || {};
+      return {
+        name: t.user.name,
+        email: t.user.email,
+        cellphone: t.user.cellphone,
+        cellphoneRegion: t.user.cellphoneRegion,
+        companyName: t.company.companyName,
+        orgNo: t.company.orgNo,
+        region: t.company.region
+      };
+    }
+  },
+  methods: {
+    changeLanguage(t) {
+      this.document.language = t, T.changeLanguage(M.includes(t) ? t : "en");
+    }
+  }
+}, we = { class: "relative flex h-full w-full flex-col overflow-hidden rounded-lg bg-white text-base" }, be = {
+  key: 0,
+  class: "z-10 flex w-full items-center justify-end px-6 py-4 shadow-sm"
+}, De = { class: "d-root h-full min-h-0 flex-1 overflow-auto px-6 py-8 md:px-12 md:py-16" }, ke = { class: "mb-[3em] flex justify-between" }, Ce = { style: { "font-size": "18px", "font-weight": "600" } }, Ne = {
+  class: "has-text-grey",
+  style: { "font-size": "14px" }
+}, Pe = {
+  class: "d-option",
+  style: { "margin-bottom": "3em" }
+}, $e = {
+  class: "d-option-title",
+  style: { "padding-bottom": "0.5rem" }
+}, xe = {
+  class: "d-option",
+  style: { "margin-bottom": "3em" }
+}, ze = {
+  class: "d-option-title",
+  style: { "padding-bottom": "0.5rem" }
+}, Re = {
+  key: 0,
+  class: "d-option"
+}, Le = { class: "d-option-title" }, Ae = { id: "timeline" }, Fe = { class: "e-data" }, Ie = { class: "e-text" }, Be = { key: 0 }, Ve = { class: "e-timestamp" }, Se = { class: "e-date" }, je = {
+  class: "e-time",
+  style: { "padding-left": "0.5ch" }
+}, qe = { key: 0 }, Oe = { key: 1 };
+function Ee(t, a, e, m, l, c) {
+  const g = p("CButton"), u = p("CDropdownItem"), D = p("CDropdown"), k = p("PublicContactDetails"), x = p("PublicRecipientItem"), C = p("CPhoneFormat"), f = p("PublicDocumentEvents");
+  return n(), s("div", we, [
+    c.showActionNav ? (n(), s("div", be, [
+      e.openPrintFunc ? (n(), s(_, { key: 0 }, [
+        b(g, {
+          "icon-left": "print",
+          type: "none",
+          pattern: "tertiary",
+          taller: "",
+          size: "small",
+          style: { "padding-left": "1em", "padding-right": "1em" },
+          onClick: e.openPrintFunc
+        }, {
+          default: v(() => [
+            w(i(e.document.$t("download", { thing: "PDF" })), 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"]),
+        a[0] || (a[0] = o("div", { style: { height: "2rem", width: "1px", "background-color": "hsl(0, 0%, 88%)", margin: "0 6px" } }, null, -1))
+      ], 64)) : d("", !0),
+      e.showLanguageSelect ? (n(), y(D, {
+        key: 1,
+        "model-value": e.document.language
+      }, {
+        trigger: v(() => [
+          b(g, {
+            "icon-props": { size: 18 },
+            size: "normal",
+            icon: "globe",
+            circle: "",
+            style: { color: "hsla(0, 0%, 45%, 1)" }
+          })
+        ]),
+        default: v(() => [
+          (n(!0), s(_, null, N(l.docLanguages, (r) => (n(), y(u, {
+            key: r,
+            value: r,
+            onClick: (h) => c.changeLanguage(r)
+          }, {
+            default: v(() => [
+              w(i(l.nativeTranslations[r]), 1)
+            ]),
+            _: 2
+          }, 1032, ["value", "onClick"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["model-value"])) : d("", !0),
+      e.close ? (n(), y(g, {
+        key: 2,
+        "icon-props": { size: 18 },
+        size: "normal",
+        icon: "x",
+        circle: "",
+        style: { "margin-left": "6px", color: "hsla(0, 0%, 45%, 1)" },
+        onClick: e.close
+      }, null, 8, ["onClick"])) : d("", !0)
+    ])) : d("", !0),
+    o("div", De, [
+      o("div", ke, [
+        o("div", null, [
+          o("div", Ce, i(e.document.$t("detail_plural").capitalize()), 1),
+          o("div", Ne, i(e.document.$t("documentDetails.subTitle")), 1)
+        ])
+      ]),
+      o("div", Pe, [
+        o("div", $e, i(e.document.$t("sender").capitalize()), 1),
+        b(k, {
+          name: c.senderContactDetails.name,
+          email: c.senderContactDetails.email,
+          cellphone: c.senderContactDetails.cellphone,
+          cellphoneRegion: c.senderContactDetails.cellphoneRegion,
+          companyName: c.senderContactDetails.companyName,
+          orgNo: c.senderContactDetails.orgNo,
+          region: c.senderContactDetails.region
+        }, null, 8, ["name", "email", "cellphone", "cellphoneRegion", "companyName", "orgNo", "region"])
+      ]),
+      o("div", xe, [
+        o("div", ze, i(e.document.$t("participant_plural").capitalize()), 1),
+        (n(!0), s(_, null, N(e.document.recipients, (r, h) => (n(), y(x, {
+          key: r._uniqueId + h,
+          recipient: r
+        }, null, 8, ["recipient"]))), 128))
+      ]),
+      b(f, { document: e.document }, {
+        default: v(({ events: r }) => [
+          r && r.length ? (n(), s("div", Re, [
+            o("div", Le, i(e.document.$t("event.event_plural").capitalize()), 1),
+            o("div", Ae, [
+              o("div", null, [
+                (n(!0), s(_, null, N(r, (h, L) => (n(), s("div", {
+                  key: L,
+                  class: "e-item"
+                }, [
+                  o("div", Fe, [
+                    o("div", Ie, [
+                      w(i(h.text) + " ", 1),
+                      h.email || h.cellphone ? (n(), s("span", Be, [
+                        w(i(h.email) + " " + i(h.email && h.cellphone && t.$t("_common:and")) + " ", 1),
+                        h.cellphone ? (n(), y(C, {
+                          key: 0,
+                          phone: h.cellphone,
+                          region: h.region
+                        }, null, 8, ["phone", "region"])) : d("", !0)
+                      ])) : d("", !0)
+                    ]),
+                    o("div", Ve, [
+                      o("div", Se, i(t.$formatDate(h.time, "P")), 1),
+                      o("div", je, i(t.$formatDate(h.time, "p")), 1)
+                    ])
+                  ])
+                ]))), 128))
+              ])
+            ])
+          ])) : d("", !0)
+        ]),
+        _: 1
+      }, 8, ["document"]),
+      t.mq === "sm" ? (n(), s("div", qe, [
+        P(t.$slots, "footer", {}, void 0, !0)
+      ])) : d("", !0)
+    ]),
+    t.mq !== "sm" ? (n(), s("div", Oe, [
+      P(t.$slots, "footer", {}, void 0, !0)
+    ])) : d("", !0)
+  ]);
+}
+const Te = /* @__PURE__ */ $(ve, [["render", Ee], ["__scopeId", "data-v-883387b4"]]), Me = {
+  components: {
+    DocumentDetails: Te,
+    DocumentVoided: A
+  },
+  props: {
+    document: {
+      type: Object,
+      required: !0
+    },
+    closeFunc: {
+      type: Function,
+      default: null
+    },
+    showLanguageSelect: {
+      type: Boolean,
+      default: !0
+    }
+  }
+};
+function Ue(t, a, e, m, l, c) {
+  const g = p("DocumentVoided"), u = p("DocumentDetails");
+  return e.document && e.document.status === "voided" ? (n(), y(g, {
+    key: 0,
+    document: e.document
+  }, null, 8, ["document"])) : (n(), y(u, {
+    key: 1,
+    document: e.document,
+    "show-language-select": e.showLanguageSelect,
+    close: e.closeFunc
+  }, null, 8, ["document", "show-language-select", "close"]));
+}
+const Qe = /* @__PURE__ */ $(Me, [["render", Ue]]);
+export {
+  Qe as default
+};