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

package/dist/PriceHeader-C4XhnoA3.js

@@ -0,0 +1,488 @@
+import { m as v } from "./mapFormMixin-D3BihYWW.js";
+import { B as A } from "./BlockMedia-CW5wgipC.js";
+import { aa as u, A as C, _ as b, o as n, d as s, s as i, n as f, l as w, v as r, f as l, B as T, z as N, b as h, c as _, F as V, b2 as F, e as x, Z as P } from "./main-Cb-nyil1.js";
+import { u as B } from "./DocumentLayout-CKSi42ev.js";
+import { t as D } from "./template-BvaNnq-g.js";
+import { s as L } from "./dom-CkTGWrfu.js";
+import { T as j } from "./DocTextEditor-Dm-cTZpA.js";
+import { i as z } from "./i18nMessages-Chz_lxGG.js";
+const M = {
+  name: "SummaryBottom",
+  mixins: [v([])],
+  props: {
+    base: {
+      type: Object,
+      default: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    backgroundColor: {
+      type: String,
+      default: "#4c576d"
+    },
+    documentCurrency: {
+      type: String,
+      required: !0
+    },
+    vatType: {
+      type: String,
+      required: !0
+    }
+  },
+  setup() {
+    return { docWidth: B() };
+  },
+  data() {
+    return {
+      get: u,
+      tinycolor: D
+    };
+  },
+  computed: {
+    prices() {
+      return u(this, "base.prices") || {};
+    },
+    isIndivid() {
+      return u(this.prices, "helpers.isIndivid", !0);
+    },
+    showIncVat() {
+      return this.isIndivid;
+    },
+    priceTotal() {
+      return this.isIndivid ? u(this.prices, "total", null) : u(this.prices, "subTotal", null);
+    },
+    priceType() {
+      return this.prices.type || ["fixed"];
+    },
+    currency() {
+      return this.prices.currency || this.documentCurrency;
+    },
+    openAccMaxPrice() {
+      return this.prices.maxTotal || null;
+    },
+    houseWorkType() {
+      return u(this.prices, "region.houseWorkType", null);
+    },
+    isReverseVat() {
+      return u(this.prices, "region.reverseVat", !1);
+    },
+    priceTypeString() {
+      return this.priceType.includes("openAccMaxPrice") ? this._document.$t("price.openAccMaxPrice") : this.priceType.includes("openAcc") ? this._document.$t("price.openAcc") : this._document.$t("price.price").capitalize();
+    },
+    priceDeductionVatString() {
+      let e = "";
+      if (this.isReverseVat && !this.showIncVat) {
+        const o = this.priceFormat(0, {
+          currency: this.currency,
+          showZero: !0
+        });
+        return e = this._document.$t("summaryBottom.reverseVat", { amount: o }), e;
+      }
+      return this.houseWorkType && (e = this._document.$t("deduction.afterType", {
+        type: this.$t(`deduction.${this.houseWorkType}_percentage`)
+      })), this.showIncVat && (e += ` ${this._document.$t("vat.incVat", {
+        thing: this._document.$t(`vat.${this.vatType}`)
+      })}`), this.showIncVat || (e += ` ${this._document.$t("vat.exVat", {
+        thing: this._document.$t(`vat.${this.vatType}`)
+      })}`), e.capitalize();
+    },
+    backgroundSecondary() {
+      if (!this.isSmallScreen) return { backgroundColor: "transparent" };
+      const e = this.backgroundColor.match(/(\d*\.)?\d+/g)[0], o = this.backgroundColor.match(/(\d*\.)?\d+/g)[1], t = this.backgroundColor.match(/(\d*\.)?\d+/g)[2], c = this.backgroundColor.match(/(\d*\.)?\d+/g)[3];
+      return {
+        backgroundColor: `hsla(${e}, ${o ** 0.9}%, ${t ** 0.9}%, ${c})`
+      };
+    },
+    isSmallScreen() {
+      return this.docWidth <= 576;
+    }
+  },
+  methods: {
+    priceFormat: C,
+    scrollToPricing() {
+      const e = document.querySelector("#price");
+      e && L(e);
+    }
+  }
+}, I = { class: "summary-bottom-root" }, W = { class: "price-type-string data-text" }, H = {
+  key: 0,
+  class: "price-deduction-text"
+}, E = {
+  key: 0,
+  class: "open-acc-wrapper"
+}, $ = {
+  key: 0,
+  class: "open-acc-item"
+}, O = { class: "open-acc-link" }, U = {
+  class: "data-text",
+  style: { "font-size": "calc(2 * var(--rem))", "font-weight": "900", "letter-spacing": "1px", "line-height": "1", "padding-bottom": "calc(0.3 * var(--rem))" }
+}, q = {
+  key: 2,
+  class: "label-text caps price-deduction-text",
+  style: { "margin-top": "4px" }
+}, Z = {
+  key: 1,
+  class: "flex w-full items-center justify-end",
+  style: { height: "108px" }
+}, R = { style: { "text-align": "right", padding: "calc(2 * var(--rem))" } }, G = { style: { "font-size": "calc(1.5 * var(--rem))", "font-weight": "900" } }, J = { style: { "background-color": "hsla(0, 0%, 0%, 0.15)", paadding: "calc(1 * var(--rem)) calc(2 * var(--rem))", height: "100%", display: "inline-flex" } }, K = {
+  key: 0,
+  style: { padding: "calc(2 * var(--rem))", display: "inline-flex", "align-items": "center", "justify-content": "center", "font-weight": "900", "font-size": "calc(2.5 * var(--rem))" }
+}, Q = {
+  key: 1,
+  style: { display: "flex", "flex-direction": "column", "align-items": "flex-start", "justify-content": "center", padding: "calc(1 * var(--rem)) calc(1 * var(--rem))", "text-align": "left" }
+}, X = { style: { "font-weight": "900", "font-size": "calc(1.5 * var(--rem))" } };
+function Y(e, o, t, c, d, a) {
+  return n(), s("section", I, [
+    i("div", {
+      style: w([
+        {
+          backgroundColor: t.backgroundColor,
+          color: d.tinycolor.readability(t.backgroundColor, "#FFF") > 2.2 ? "#FFF" : "#000"
+        },
+        t.options.length && {
+          overflow: "hidden",
+          padding: 0
+        }
+      ]),
+      class: "summary-bottom"
+    }, [
+      t.options.length ? (n(), s("div", Z, [
+        i("div", R, [
+          i("div", G, r(e._document.$t("price.proposal")), 1),
+          i("div", null, r(e._document.$t("summaryBottom.chooseFrom")), 1)
+        ]),
+        i("div", J, [
+          t.base ? (n(), s("div", Q, [
+            i("div", X, r(a.priceFormat(t.base.prices.total, {
+              currency: a.currency,
+              decimals: 2,
+              hideZeroDecimals: !0
+            })), 1),
+            i("div", null, " + " + r(e._document.$tc("summaryBottom.option", { count: t.options.length })), 1)
+          ])) : (n(), s("div", K, r(e._document.$t("summaryBottom.noOfOptions", {
+            count: t.options.length
+          })), 1))
+        ]),
+        o[1] || (o[1] = i("div", { style: { "background-color": "hsla(0, 0%, 0%, 0.4)", overflow: "hidden", width: "calc(1.5 * var(--rem))", display: "flex", "flex-direction": "column", "justify-content": "center", "align-items": "center", height: "100%", color: "hsla(0, 0%, 100%, 0.2)" } }, null, -1))
+      ])) : (n(), s("div", {
+        key: 0,
+        class: f([[
+          {
+            column: a.isSmallScreen,
+            sm: a.isSmallScreen
+          }
+        ], "flex w-full justify-between"]),
+        style: { position: "relative" }
+      }, [
+        i("div", {
+          class: f(["flex w-full flex-col", [{ "fixed-price-type-string": a.isSmallScreen }]]),
+          style: w([{ "background-color": "hsl(224, 57%, 39%)" }, [a.backgroundSecondary]])
+        }, [
+          i("div", W, r(a.priceTypeString), 1),
+          a.isSmallScreen ? l("", !0) : (n(), s("div", H, r(a.priceDeductionVatString), 1))
+        ], 6),
+        a.priceType.some((m) => ["openAcc", "openAccMaxPrice"].includes(m)) ? (n(), s("div", E, [
+          a.openAccMaxPrice ? (n(), s("div", $, [
+            i("div", null, r(e._document.$t("price.maxPrice").capitalize()) + " " + r(e._document.$t("vat.exVat", {
+              thing: e._document.$t(`vat.${t.vatType}`)
+            })) + ": ", 1),
+            i("div", null, r(a.priceFormat(a.openAccMaxPrice, { currency: a.currency })), 1)
+          ])) : l("", !0),
+          i("div", O, [
+            T(r(e._document.$t("see").capitalize()) + " ", 1),
+            i("span", {
+              style: { color: "inherit", cursor: "pointer" },
+              onClick: o[0] || (o[0] = (...m) => a.scrollToPricing && a.scrollToPricing(...m))
+            }, [
+              i("u", null, r(e._document.$t("price.price_plural")), 1)
+            ]),
+            T(" " + r(e._document.$t("summaryBottom.forDetails")), 1)
+          ])
+        ])) : (n(), s("div", {
+          key: 1,
+          class: f([[{ "justify-end": !a.isSmallScreen }], "flex w-full items-center"])
+        }, [
+          i("div", U, r(a.priceType.includes("approx") ? e._document.$t("approx").capitalize() : "") + " " + r(a.priceFormat(a.priceTotal, {
+            currency: a.currency,
+            decimals: 2,
+            hideZeroDecimals: !0
+          })), 1)
+        ], 2)),
+        a.isSmallScreen ? (n(), s("div", q, r(a.priceDeductionVatString), 1)) : l("", !0)
+      ], 2))
+    ], 4)
+  ]);
+}
+const ee = /* @__PURE__ */ b(M, [["render", Y], ["__scopeId", "data-v-7ac386a1"]]), te = {
+  name: "SummaryTop",
+  i18nOptions: {
+    namespaces: "summaryTop",
+    messages: z
+  },
+  components: {
+    TextEditor: j,
+    DocumentLogotype: N(
+      () => import("./DocumentLogotype-DbQlvQ-y.js")
+    )
+  },
+  emits: ["update:logotype", "update:doc-name"],
+  mixins: [v([])],
+  props: {
+    showLogo: {
+      type: Boolean,
+      default: !0
+    },
+    logotype: {
+      type: String,
+      default: null
+    },
+    companyLogotype: {
+      type: String,
+      default: null
+    },
+    senderName: {
+      type: String,
+      default: null
+    },
+    docName: {
+      type: String,
+      default: null
+    },
+    docType: {
+      type: String,
+      required: !0
+    },
+    docNumber: {
+      type: [Number, String],
+      default: null
+    },
+    sentAt: {
+      type: [String, Number],
+      default: null
+      // required: true,
+    },
+    expiresAt: {
+      type: String,
+      default: null
+    },
+    estimatedTime: {
+      type: String,
+      default: null
+    },
+    validator: {
+      type: Object,
+      default: () => ({})
+    },
+    hasHover: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup() {
+    return { docWidth: B() };
+  }
+}, oe = { class: "summary-top flex w-full justify-center" }, ae = { class: "doc-summary-top-wrapper" }, ie = {
+  class: "flex w-full justify-between",
+  style: { "margin-bottom": "calc(2.5 * var(--rem))" }
+}, re = {
+  key: 1,
+  class: "company-name"
+}, ne = { class: "top-right-text-wrapper" }, se = { key: 0 }, ce = { key: 1 }, le = { class: "title-text" }, de = ["innerHTML"], me = { class: "flex w-full justify-between" }, ue = {
+  key: 0,
+  class: "data-group"
+}, pe = { class: "label-text caps" }, ye = { class: "data-text" }, he = {
+  key: 1,
+  class: "data-group"
+}, ge = { class: "label-text caps" }, fe = { class: "data-text" }, _e = {
+  key: 0,
+  class: "data-group"
+}, ve = { class: "label-text caps" }, be = { class: "data-text" };
+function ke(e, o, t, c, d, a) {
+  const m = h("DocumentLogotype"), g = h("TextEditor");
+  return n(), s("section", oe, [
+    i("div", ae, [
+      o[2] || (o[2] = i("div", { class: "doc-summary-top-wrapper__background" }, null, -1)),
+      i("div", ie, [
+        t.showLogo && (t.logotype || t.companyLogotype) || e.canEdit ? (n(), _(m, {
+          key: 0,
+          "model-value": t.logotype,
+          "show-logo": t.showLogo,
+          "company-logotype": t.companyLogotype,
+          "has-hover": t.hasHover,
+          "onUpdate:modelValue": o[0] || (o[0] = (p) => e.$emit("update:logotype", p))
+        }, null, 8, ["model-value", "show-logo", "company-logotype", "has-hover"])) : (n(), s("div", re, r(t.senderName), 1)),
+        i("div", ne, [
+          t.sentAt ? (n(), s("div", se, r(e.$formatDate(t.sentAt)), 1)) : l("", !0),
+          t.docNumber ? (n(), s("div", ce, " #" + r(t.docNumber), 1)) : l("", !0)
+        ])
+      ]),
+      i("div", le, [
+        e.canEdit ? (n(), _(g, {
+          key: 1,
+          ref: "editor",
+          "model-value": t.docName,
+          placeholder: e.$t("name.placeholder"),
+          extensions: {
+            bulletList: !1,
+            heading: [1, 2, 3],
+            bold: !1,
+            link: !1,
+            underline: !1,
+            blockquote: !0,
+            table: !1
+          },
+          unstyled: "",
+          class: "no-drag",
+          static: "",
+          style: { "will-change": "opacity" },
+          "onUpdate:modelValue": o[1] || (o[1] = (p) => e.$emit("update:doc-name", p))
+        }, null, 8, ["model-value", "placeholder"])) : (n(), s("div", {
+          key: 0,
+          class: "quill-custom",
+          innerHTML: t.docName
+        }, null, 8, de))
+      ]),
+      i("div", me, [
+        t.expiresAt ? (n(), s("div", ue, [
+          i("div", pe, r(e._document.$t("replyBy")), 1),
+          i("div", ye, r(e.$formatDate(t.expiresAt)), 1)
+        ])) : l("", !0),
+        t.docType !== "document" ? (n(), s("div", he, [
+          i("div", ge, r(e._document.$t("document").capitalize()), 1),
+          i("div", fe, r(e._document.$t(`series.${t.docType}`).capitalize()), 1)
+        ])) : l("", !0),
+        c.docWidth >= 576 ? (n(), s(V, { key: 2 }, [
+          t.estimatedTime ? (n(), s("div", _e, [
+            i("div", ve, r(e.$t("estimatedTime")), 1),
+            i("div", be, r(e._document.$t("approx")) + " " + r(t.estimatedTime), 1)
+          ])) : l("", !0)
+        ], 64)) : l("", !0)
+      ])
+    ])
+  ]);
+}
+const Se = /* @__PURE__ */ b(te, [["render", ke], ["__scopeId", "data-v-8f85211e"]]), we = {
+  name: "PriceHeader",
+  components: {
+    SummaryTop: Se,
+    SummaryBottom: ee,
+    BlockMedia: A
+  },
+  emits: ["input"],
+  mixins: [
+    v([
+      "media",
+      "backgroundColor",
+      "documentName",
+      "showPriceSummary",
+      "showLogo",
+      "logotype"
+    ])
+  ],
+  props: {
+    _document: {
+      type: Object,
+      default: () => ({})
+    },
+    _value: {
+      type: Object,
+      default: () => ({})
+    },
+    hasHover: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    internalName: {
+      get() {
+        var e;
+        return this.documentName || `<p data-typography="title">${((e = this._document.data) == null ? void 0 : e.name) || ""}</p>`;
+      },
+      set(e) {
+        this.documentName = e, this.$emit("input", {
+          key: "data.name",
+          value: F(e).trim().slice(0, 255)
+        });
+      }
+    },
+    company() {
+      return this._document.sender.company;
+    },
+    prices() {
+      return this._document.prices;
+    },
+    estimatedTimeString() {
+      var t, c;
+      const { value: e, unitType: o } = ((c = (t = this._document) == null ? void 0 : t.data) == null ? void 0 : c.estimatedTime) || {};
+      return !e || !o ? null : this.$tc(`${o}`, { count: e });
+    },
+    sendAtShowDate() {
+      const { sentAt: e, scheduledFirstDelivery: o } = this._document;
+      return e || (o ? o.sendAt : null);
+    },
+    summaryBottom() {
+      var c;
+      let e = {
+        show: !1,
+        backgroundColor: this.backgroundColor || this._document.theme.priceSummaryBackground,
+        documentCurrency: this._document.currency,
+        vatType: this._document.vatType
+      }, { showPriceSummary: o } = this;
+      typeof o != "boolean" && ({ showPriceSummary: o } = this._document.theme);
+      const t = ((c = this._document.packageGroups) == null ? void 0 : c.packages) || [];
+      return t.length > 1 ? e = {
+        ...e,
+        show: o,
+        base: { prices: this.prices },
+        options: t.filter(({ toggable: d }) => d).map(({ prices: d }) => ({ prices: d }))
+      } : e = {
+        ...e,
+        show: o && this._document.readPrices && (this.prices.total || this.prices.type.some(
+          (d) => ["openAccMaxPrice", "openAcc"].includes(d)
+        )),
+        base: { prices: this.prices }
+      }, this.canEdit && o && (e.show = !0), e.documentCurrency || (e.show = !1), e;
+    }
+  }
+}, Te = { class: "doc-jumbotron-wrapper" };
+function xe(e, o, t, c, d, a) {
+  var k, S;
+  const m = h("BlockMedia"), g = h("SummaryTop"), p = h("SummaryBottom");
+  return n(), s("div", null, [
+    i("div", Te, [
+      x(m, {
+        media: {
+          ...e.media,
+          resourceUrl: ((k = e.media) == null ? void 0 : k.resourceUrl) || t._document.theme.background,
+          overlayColor: ((S = e.media) == null ? void 0 : S.overlayColor) || t._document.theme.backgroundFilter
+        },
+        class: "price-media-wrapper"
+      }, null, 8, ["media"]),
+      x(g, {
+        "show-logo": e.showLogo,
+        "onUpdate:showLogo": o[0] || (o[0] = (y) => e.showLogo = y),
+        logotype: e.logotype,
+        "onUpdate:logotype": o[1] || (o[1] = (y) => e.logotype = y),
+        "doc-name": a.internalName,
+        "onUpdate:docName": o[2] || (o[2] = (y) => a.internalName = y),
+        _document: t._document,
+        "company-logotype": a.company.logotype,
+        "sender-name": a.company.name,
+        "doc-type": t._document.docNumber.series,
+        "doc-number": t._document.docNumber.value,
+        "sent-at": a.sendAtShowDate,
+        "expires-at": t._document.expiresAt,
+        "estimated-time": a.estimatedTimeString,
+        "has-hover": t.hasHover
+      }, null, 8, ["show-logo", "logotype", "doc-name", "_document", "company-logotype", "sender-name", "doc-type", "doc-number", "sent-at", "expires-at", "estimated-time", "has-hover"])
+    ]),
+    a.summaryBottom.show ? (n(), _(p, P({ key: 0 }, a.summaryBottom, { _document: t._document }), null, 16, ["_document"])) : l("", !0)
+  ]);
+}
+const Le = /* @__PURE__ */ b(we, [["render", xe], ["__scopeId", "data-v-3628151e"]]);
+export {
+  Le as default
+};

package/dist/SearchApi-B7lXgUY6.js

@@ -0,0 +1,137 @@
+import { m as u, U as h, V as f, W as d, _ as p, S as m } from "./main-Cb-nyil1.js";
+import { d as y } from "./debounce-DNl99Gyo.js";
+const g = {
+  name: "SearchApi",
+  props: {
+    customSearch: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      defaultSearch: {
+        project: !0,
+        endCustomer: !1,
+        article: !1,
+        extensionArticle: !1,
+        // Articles in any authenticated CRM
+        document: !1
+      },
+      isLoading: !1,
+      emptyQuery: null,
+      // String to track last query that was empty, if a new query starts with this string we do not have to search again
+      hasSearchedAll: !1
+      // Helper to keep track when some search types have not yet searched due min query length
+    };
+  },
+  computed: {
+    ...u({
+      allAuthenticatedCRMs: "settings/allAuthenticatedCRMs",
+      can: "application/can"
+    }),
+    typesToFetch() {
+      return Object.keys(this.customSearch).length ? Object.keys(this.customSearch).filter(
+        (t) => this.customSearch[t]
+      ) : Object.keys(this.defaultSearch).filter(
+        (t) => this.defaultSearch[t]
+      );
+    }
+  },
+  methods: {
+    canFetchType(t) {
+      return t === "endCustomer" ? this.can("endCustomers", "read") : !0;
+    },
+    async fetch({ query: t, start: a = null, end: r = null }) {
+      const e = this.typesToFetch.reduce(
+        (i, n) => ({ ...i, [n]: [] }),
+        {}
+      ), s = t.toLowerCase();
+      if (this.emptyQuery && s && s.startsWith(this.emptyQuery) || (this.emptyQuery = null, this.hasSearchedAll = !0, !s)) return e;
+      try {
+        const i = [], n = Object.keys(this.defaultSearch);
+        (this.typesToFetch || []).forEach((c) => {
+          n.includes(c) && i.push(
+            (async () => {
+              let o = [];
+              c === "document" ? o = await this.fetchDocuments(s, a, r) : c === "extensionArticle" ? o = await this.fetchExtensionArticles(s, a, r) : o = await this.fetchType(c, s, a, r), e[c] = o;
+            })()
+          );
+        }), await Promise.all(i);
+      } finally {
+        this.isLoading = !1;
+      }
+      return Object.keys(e).every(
+        (i) => e[i].length === 0
+      ) && this.hasSearchedAll && (this.emptyQuery = s), e;
+    },
+    async fetchType(t, a, r, e) {
+      if (!this.canFetchType(t)) return [];
+      const { data: s } = await h("search", {
+        type: t,
+        query: a,
+        ...r !== null && e !== null && { start: r, end: e }
+      });
+      return s;
+    },
+    async fetchDocuments(t, a, r) {
+      const e = t.replace(/[-[\]{}()*+?.,\\/^$|#]/g, "\\$&"), s = {
+        $or: [
+          { "data.name": { $regex: e, $options: "i" } },
+          { "docNumber.value": { $regex: e, $options: "i" } },
+          {
+            clients: {
+              $elemMatch: {
+                $or: ["name", "email", "socialNo", "orgNo"].map((n) => ({
+                  [n]: { $regex: e, $options: "i" }
+                }))
+              }
+            }
+          }
+        ]
+      }, { data: l } = await f("/document", {
+        params: {
+          lean: !0,
+          filter: encodeURIComponent(JSON.stringify(s)),
+          fields: "clients,data.name,projectId,docNumber,createdAt",
+          ...a !== null && r !== null && { skip: a, limit: r - a }
+        }
+      }), { items: i = [] } = l || {};
+      return i;
+    },
+    async fetchExtensionArticles(t) {
+      const a = [];
+      return await Promise.all(
+        this.allAuthenticatedCRMs.map(async (r) => {
+          try {
+            if (r === "pipedrive" && t.length < 2) {
+              this.hasSearchedAll = !1;
+              return;
+            }
+            const { data: e } = await d.search(r, {
+              query: t,
+              type: "article"
+            });
+            e && Array.isArray(e) && a.push(...e);
+          } catch {
+          }
+        })
+      ), a;
+    },
+    triggerSearch: y(async function({ q: a, cb: r, start: e, end: s }) {
+      this.isLoading = !0;
+      const l = await this.fetch({ query: a, start: e, end: s });
+      return this.isLoading = !1, r(l);
+    }, 500)
+  }
+};
+function S(t, a, r, e, s, l) {
+  return m(t.$slots, "default", {
+    fetch: ({ q: i, cb: n, start: c = null, end: o = null }) => (s.isLoading = !0, l.triggerSearch({ q: i, cb: n, start: c, end: o })),
+    isLoading: s.isLoading
+  });
+}
+const w = /* @__PURE__ */ p(g, [["render", S]]);
+export {
+  w as S
+};