@cling-se/widget 0.7.4 → 0.8.0

package/.env

@@ -6,7 +6,7 @@ VITE_APP_ROLLBAR_ENV=production
 VITE_APP_STRIPE_PUBLISHABLE_KEY=pk_live_srt9FB7WkzNiQGIP46ISVpag00bGlEZBT8
 
 # WIDGET DEV OVERRIDES
-VITE_APP_WEB_BASEURL_DEV=https://app.dev2.cling.se
+VITE_APP_WEB_BASEURL_DEV=https://app.dev.cling.se
 VITE_APP_CLINGAPI_BASEURL_DEV=https://api.dev.cling.se
 VITE_APP_ROLLBAR_CLIENT_TOKEN_DEV=cf75726b70174d4097505ae18d5f9600
 VITE_APP_ROLLBAR_ENV_DEV=staging

package/dist/{DocFormSend.f4aaed94.js → DocFormSend.950688d9.js}

@@ -1,4 +1,4 @@
-import { c as se, g as Se, a as zf, n as N, C as Va, s as Wf, e as Vf, i as Yf, r as Tc, b as Xs, m as Rc, d as Lt, f as mn, h as nt, _ as Uf, j as Ic, k as Hf, p as Gf, l as qf, o as Kf, q as Pc, V as Ya, t as Ac, A as Xf, u as Zf, v as Jf, w as Qf, x as eh, F as Fc, y as Nc, z as Ua, B as th, D as rh, E as Zs, G as nh, H as ih, I as ah } from "./main.f5dac5dd.js";
+import { c as se, g as Se, a as zf, n as N, C as Va, s as Wf, e as Vf, i as Yf, r as Tc, b as Xs, m as Rc, d as Lt, f as mn, h as nt, _ as Uf, j as Ic, k as Hf, p as Gf, l as qf, o as Kf, q as Pc, V as Ya, t as Ac, A as Xf, u as Zf, v as Jf, w as Qf, x as eh, F as Fc, y as Nc, z as Ua, B as th, D as rh, E as Zs, G as nh, H as ih, I as ah } from "./main.746fed94.js";
 const fe = {
   AD: {
     name: "Andorra",
@@ -8938,7 +8938,7 @@ const IM = {
     },
     async doSendDocument() {
       var t;
-      this.$v.$touch(), !this.$v.$invalid && (["denied", "expired"].includes((t = this._document) == null ? void 0 : t.status) && this.resetDeniedDocument(), await this.doSaveDocument({ doSend: !0 }));
+      this.$v.$touch(), !this.$v.$invalid && (["denied", "expired", "voided"].includes((t = this._document) == null ? void 0 : t.status) && this.resetDeniedDocument(), await this.doSaveDocument({ doSend: !0 }));
     },
     setDeliveryMethod(t, e) {
       const r = this.deliveryTypes;
@@ -9053,7 +9053,7 @@ var PM = function() {
   AM,
   !1,
   null,
-  "37014841",
+  "b2246c6c",
   null,
   null
 );
@@ -9774,6 +9774,10 @@ const uE = {
       type: Boolean,
       default: !1
     },
+    title: {
+      type: String,
+      default: ""
+    },
     tooltip: {
       type: [Object, String],
       default: null
@@ -9955,24 +9959,36 @@ const yE = {
     closable: {
       type: Boolean,
       default: !1
+    },
+    legacy: {
+      type: Boolean,
+      default: !0
+    },
+    icon: {
+      type: String,
+      default: null
     }
   }
 };
 var _E = function() {
   var e = this, r = e._self._c;
-  return r("transition", { attrs: { name: "fade" } }, [r("article", { staticClass: "message", class: [
+  return r("transition", { attrs: { name: "fade" } }, [e.legacy ? r("article", { staticClass: "message", class: [
     `is-${e.type}`,
     `is-${e.size}`
   ] }, [r("section", { staticClass: "message-body", style: { padding: e.padding } }, [e.title ? r("header", { staticClass: "message-header" }, [e._v(" " + e._s(e.title) + " ")]) : e._e(), r("div", { staticClass: "media" }, [r("div", { staticClass: "media-content" }, [e._t("default")], 2)])]), e.closable ? r("CButton", { staticStyle: { right: ".5rem", position: "absolute", top: ".5rem" }, attrs: { type: e.type, size: "small", pattern: "secondary", circle: "", icon: "x" }, on: { click: function(n) {
     return e.$emit("close");
-  } } }) : e._e()], 1)]);
+  } } }) : e._e()], 1) : r("div", { staticClass: "flex p-4 border border-gray-200 rounded-md bg-gray-50" }, [e.icon ? r("div", { staticClass: "mr-3 -mt-px" }, [r("BaseIcon", { attrs: { type: e.icon, size: "16" } })], 1) : e._e(), r("div", [r("div", [e._t("title", function() {
+    return [r("div", { staticClass: "font-medium" }, [e._v(e._s(e.title))])];
+  })], 2), r("div", { staticClass: "text-gray-800" }, [e._t("default", function() {
+    return [r("div", { staticClass: "mb-2 text-gray-500" }, [e._v(e._s(e.text))])];
+  })], 2)])])]);
 }, bE = [], SE = /* @__PURE__ */ N(
   yE,
   _E,
   bE,
   !1,
   null,
-  "6b8867ae",
+  "56f747ee",
   null,
   null
 );

package/dist/{DocReceipt.0bbe8781.js → DocReceipt.5cec2925.js}

@@ -1,4 +1,4 @@
-import { f as g, h as p, n as u } from "./main.f5dac5dd.js";
+import { f as g, h as p, n as u } from "./main.746fed94.js";
 const _ = {
   sv: {
     title: "Verifikat p\xE5 signering",

package/dist/{DocSendReminder.d8ca259a.js → DocSendReminder.bd5cef73.js}

@@ -1,4 +1,4 @@
-import { d as m, f as c, h as d, n as a } from "./main.f5dac5dd.js";
+import { d as m, f as c, h as d, n as a } from "./main.746fed94.js";
 const l = {
   name: "DocumentSendReminderModal",
   i18nOptions: {

package/dist/{DocTimeline.0a62cd2b.js → DocTimeline.bde4cf5b.js}

@@ -1,5 +1,5 @@
-import { n as m, J as v, g as $, i as _, K as f, d as C } from "./main.f5dac5dd.js";
-const g = {
+import { n as u, J as b, g as S, i as _, K as f, d as D, G as k } from "./main.746fed94.js";
+const v = {
   new: {
     statusClass: "draft",
     icon: "statusDraft"
@@ -36,6 +36,10 @@ const g = {
     statusClass: "expired",
     icon: "statusExpired"
   },
+  voided: {
+    statusClass: "voided",
+    icon: "statusVoided"
+  },
   active: {
     statusClass: "active",
     icon: "statusActive"
@@ -48,7 +52,7 @@ const g = {
     statusClass: "archived",
     icon: "statusArchive"
   }
-}, b = {
+}, w = {
   props: {
     status: {
       type: String,
@@ -61,31 +65,31 @@ const g = {
   },
   computed: {
     text() {
-      return this.status ? v.t(`_common:status.${this.status}`) : "";
+      return this.status ? b.t(`_common:status.${this.status}`) : "";
     },
     className() {
-      const { statusClass: s = "" } = g[this.status] || {};
+      const { statusClass: s = "" } = v[this.status] || {};
       return s;
     },
     icon() {
-      return $(g, `${this.status}.icon`);
+      return S(v, `${this.status}.icon`);
     }
   }
 };
-var S = function() {
+var z = function() {
   var t = this, e = t._self._c;
   return e("div", { staticClass: "inline-flex items-center h-6 pl-1 pr-2 text-xs font-medium leading-none rounded-full c-badge_status", class: t.className }, [t.icon ? e("BaseIcon", { staticClass: "mr-1 status-icon", attrs: { type: t.icon, size: "16" } }) : t._e(), e("span", [t._v(t._s(t.text))])], 1);
-}, D = [], k = /* @__PURE__ */ m(
-  b,
-  S,
-  D,
+}, B = [], I = /* @__PURE__ */ u(
+  w,
+  z,
+  B,
   !1,
   null,
   null,
   null,
   null
 );
-const w = k.exports, z = {
+const T = I.exports, E = {
   name: "DynamicLink",
   props: {
     template: {
@@ -99,23 +103,23 @@ const w = k.exports, z = {
     }
   }
 };
-var B = function() {
+var M = function() {
   var t = this, e = t._self._c;
   return e(t.transformed, { tag: "component" });
-}, I = [], T = /* @__PURE__ */ m(
-  z,
-  B,
-  I,
+}, O = [], N = /* @__PURE__ */ u(
+  E,
+  M,
+  O,
   !1,
   null,
   null,
   null,
   null
 );
-const M = T.exports, E = {
+const A = N.exports, F = {
   name: "EventItem",
   components: {
-    DynamicLink: M
+    DynamicLink: A
   },
   props: {
     title: {
@@ -194,20 +198,20 @@ const M = T.exports, E = {
     }
   }
 };
-var N = function() {
+var q = function() {
   var t = this, e = t._self._c;
   return e("div", { staticClass: "flex flex-nowrap relative text-primary-500 cursor-default pb-5 ml-4 event before:content-[''] before:absolute before:w-px before:h-full before:bg-gray-300 before:-left-px before:top-4 last:before:hidden" }, [e("div", { staticClass: "m-0 h-[23px] relative", staticStyle: { "--bg": "#fff" } }, [e("div", { staticClass: "rounded-full absolute left-1/2 top-1/2 z-[1] w-7 h-7 flex items-center justify-center 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("BaseIcon", { attrs: { type: t.icon, size: "14" } })], 1)]), e("div", { staticClass: "ml-7 min-w-0 flex-grow flex flex-col pt-1" }, [t.loading ? [e("CSkeleton", { staticClass: "max-w-md text-gray-900 font-medium", class: t.titleSize, attrs: { width: "80%" } }), e("CSkeleton", { staticClass: "text-gray-600", class: t.textSize, attrs: { width: "40%" } }), e("CSkeleton", { staticClass: "text-center text-gray-500 text-xs inline-flex pt-0.5", 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: "text-center text-gray-500 inline-flex pt-1", 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)]);
-}, O = [], A = /* @__PURE__ */ m(
-  E,
-  N,
-  O,
+}, R = [], j = /* @__PURE__ */ u(
+  F,
+  q,
+  R,
   !1,
   null,
   null,
   null,
   null
 );
-const F = A.exports, q = {
+const G = j.exports, L = {
   sv: {
     clientName: "Kunden",
     byName: "Av {{- name}}",
@@ -244,32 +248,35 @@ const F = A.exports, q = {
     expiredContent: "The expiration date has passed",
     toEmail: "To: {{email}}"
   }
-}, R = {
+}, P = {
   name: "DocumentTimeline",
   i18nOptions: {
     namespaces: "documentTimeline",
-    messages: q
+    messages: L
   },
   components: {
-    StatusBadge: w,
-    EventItem: F
+    EventItem: G
   },
   props: {
-    id: {
-      type: String,
+    document: {
+      type: Object,
       required: !0
+    },
+    colors: {
+      type: Object,
+      default: () => ({})
+    },
+    size: {
+      type: String,
+      default: ""
     }
   },
   computed: {
-    ...C({
-      docById: "documents2/byId",
+    ...D({
       userById: "companyUsers/byId"
     }),
-    document() {
-      return this.docById(this.id);
-    },
     events() {
-      var n;
+      var n, r;
       const s = [
         this.formatEvent({
           code: "created",
@@ -277,36 +284,36 @@ const F = A.exports, q = {
         })
       ], { events: t, scheduledFirstDelivery: e } = this.document || {};
       if ((e == null ? void 0 : e.status) === "active") {
-        const r = e.deliveryTypes.join(
+        const o = e.deliveryTypes.join(
           ` ${this.$t("_common:and")} `
         );
         s.push({
           title: this.$t("_common:scheduledDelivery"),
           content: `${this.$t(
             "_common:via"
-          )} ${r}, ${this.$formatDate(
+          )} ${o}, ${this.$formatDate(
             e.sendAt
           )}`,
           isFuture: !0,
           icon: "calendar",
-          color: "primary"
+          color: ((r = this.colors) == null ? void 0 : r.scheduledDelivery) || "primary"
         });
       }
-      return t == null || t.forEach((r) => s.push(this.formatEvent(r))), s;
+      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: p,
-        email: c,
-        status: d,
+        clients: o,
+        email: d,
+        status: m,
         counter: x,
         sendSource: h,
-        companyUserId: y
-      } = t || {}, u = x || n.length + 1, o = r.name;
-      return {
+        companyUserId: $
+      } = t || {}, p = x || n.length + 1, l = r.name, C = {
         created: () => ({
           title: this.$t("_common:created"),
           createdAt: e,
@@ -315,7 +322,7 @@ const F = A.exports, q = {
         }),
         viewed: () => ({
           title: this.$t("viewed"),
-          content: (o ? this.$t("viewedContent", { name: o }) : "") + (u ? ` ${this.$tc("_common:times", { count: u })}` : ""),
+          content: (l ? this.$t("viewedContent", { name: l }) : "") + (p ? ` ${this.$tc("_common:times", { count: p })}` : ""),
           createdAt: e,
           icon: "eye",
           color: "primary"
@@ -324,7 +331,7 @@ const F = A.exports, q = {
           var a;
           const i = {
             title: this.$t("_common:status.signed"),
-            content: o ? this.$t("byName", { name: o }) : "",
+            content: l ? this.$t("byName", { name: l }) : "",
             createdAt: e,
             icon: "check",
             color: "primary"
@@ -333,7 +340,7 @@ const F = A.exports, q = {
         },
         denied: () => ({
           title: this.$t("_common:status.denied"),
-          content: o ? this.$t("byName", { name: o }) : "",
+          content: l ? this.$t("byName", { name: l }) : "",
           createdAt: e,
           icon: "x",
           color: "primary"
@@ -344,10 +351,10 @@ const F = A.exports, q = {
             thing: h === "reminder" ? this.$t("_common:reminder") : this.$t("propertyDesignation")
           })), {
             title: i,
-            content: p == null ? void 0 : p.map(
-              (a) => ["email", "cellphone"].filter((l) => !!a[l]).map((l) => a[l]).join(` ${this.$t("_common:and")} `)
+            content: o == null ? void 0 : o.map(
+              (a) => ["email", "cellphone"].filter((c) => !!a[c]).map((c) => a[c]).join(` ${this.$t("_common:and")} `)
             ).reduce(
-              (a, l) => a ? `${a}<div>${l}</div>` : `${this.$t("_common:to")}: ${l}`.capitalize(),
+              (a, c) => a ? `${a}<div>${c}</div>` : `${this.$t("_common:to")}: ${c}`.capitalize(),
               ""
             ),
             createdAt: e,
@@ -355,18 +362,18 @@ const F = A.exports, q = {
             color: "primary"
           };
         },
-        statusChanged: () => ["accepted", "denied"].includes(d) ? {
-          title: d === "accepted" ? this.$t("statusChangedAccepted") : this.$t("statusChangedDenied"),
+        statusChanged: () => ["accepted", "denied"].includes(m) ? {
+          title: m === "accepted" ? this.$t("statusChangedAccepted") : this.$t("statusChangedDenied"),
           createdAt: e,
-          icon: d === "accepted" ? "check" : "x",
-          color: d === "accepted" ? "green" : "red"
+          icon: m === "accepted" ? "check" : "x",
+          color: m === "accepted" ? "green" : "red"
         } : null,
         requestChange: () => {
           var a;
-          const i = ((a = this.userById(y)) == null ? void 0 : a.fullName) || "";
+          const i = ((a = this.userById($)) == null ? void 0 : a.fullName) || "";
           return {
             title: `${this.$t("requestChange")} ${this.$t(
-              `_common:status.${d}`
+              `_common:status.${m}`
             )}`,
             content: i && this.$t("byName", { name: i }),
             createdAt: e,
@@ -378,21 +385,21 @@ const F = A.exports, q = {
           title: this.$t("_common:sentThing", {
             thing: this.$t("_common:email").capitalize()
           }),
-          content: c ? `${this.$t("_common:to")}: ${c}`.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: c })} ${u ? this.$tc("_common:times", { count: u }) : ""}`,
+          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: c ? this.$t("toEmail", { email: c }) : null,
+          content: d ? this.$t("toEmail", { email: d }) : null,
           createdAt: e,
           icon: "alert-triangle",
           color: "orange"
@@ -411,51 +418,64 @@ const F = A.exports, q = {
           icon: "moon",
           color: "gray"
         })
-      }[s]();
+      }, g = (y = this.colors) == null ? void 0 : y[s];
+      return {
+        ...C[s](),
+        ...g && { color: g }
+      };
     }
   }
 };
-var L = function() {
+var V = function() {
   var t = this, e = t._self._c;
-  return e("div", [e("div", { staticClass: "border-b mb-4 pb-4" }, [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: "font-semibold text-lg" }, [t._v(t._s(t.document.name))])]), e("div", { staticClass: "inline-flex items-center -ml-2" }, [e("div", { staticClass: "text-xs text-gray-600 mr-1.5 py-1 pl-2", domProps: { textContent: t._s(t.$t("_common:status.status")) } }), e("StatusBadge", { attrs: { status: t.document.status } })], 1)]), t._l(t.events, function(n, r) {
-    return e("EventItem", { key: r, attrs: { title: n.title, content: n.content, createdAt: n.createdAt, icon: n.icon, color: n.color, "is-future": n.isFuture, size: "large" } });
+  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, createdAt: n.createdAt, icon: n.icon, color: n.color, "is-future": n.isFuture, size: t.size } });
   })], 2);
-}, P = [], j = /* @__PURE__ */ m(
-  R,
-  L,
+}, K = [], U = /* @__PURE__ */ u(
   P,
+  V,
+  K,
   !1,
   null,
   null,
   null,
   null
 );
-const G = j.exports, K = {
+const H = U.exports, J = {
   name: "DocTimeline",
   components: {
-    DocumentTimeline: G
+    StatusBadge: T,
+    DocumentTimeline: H
   },
   props: {
     id: {
       type: String,
       required: !0
     }
+  },
+  computed: {
+    ...k({
+      docById: "documents2/byId"
+    }),
+    document() {
+      return this.docById(this.id);
+    }
   }
 };
-var U = function() {
+var Q = function() {
   var t = this, e = t._self._c;
-  return e("div", { staticClass: "p-8" }, [e("DocumentTimeline", { attrs: { id: t.id } })], 1);
-}, V = [], H = /* @__PURE__ */ m(
-  K,
-  U,
-  V,
+  return e("div", { staticClass: "p-8" }, [e("DocumentTimeline", { attrs: { document: t.document, size: "large" } }, [e("div", { staticClass: "border-b mb-4 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: "font-semibold text-lg" }, [t._v(t._s(t.document.name))])]), e("div", { staticClass: "inline-flex items-center -ml-2" }, [e("div", { staticClass: "text-xs text-gray-600 mr-1.5 py-1 pl-2", domProps: { textContent: t._s(t.$t("_common:status.status")) } }), e("StatusBadge", { attrs: { status: t.document.status } })], 1)])])], 1);
+}, W = [], X = /* @__PURE__ */ u(
+  J,
+  Q,
+  W,
   !1,
   null,
   null,
   null,
   null
 );
-const W = H.exports;
+const Z = X.exports;
 export {
-  W as default
+  Z as default
 };