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

package/dist/CompanyModal-CjzwQU4B.js

@@ -0,0 +1,250 @@
+import { _ as b } from "./CFormField.vue_vue_type_script_setup_true_lang-B4s_Zfsp.js";
+import { C as U } from "./CPhoneInput-Dw_LJDgc.js";
+import { w as v } from "./CDropdownItem-DvaU14-V.js";
+import { _ as F, ar as P, m as S, as as f, a as M, g as l, b as r, o as y, d as N, s as d, c as V, f as z, v as h, e as i, w as m, B as I, l as _, n as $, ao as O } from "./main-C4OdoeS2.js";
+import { u as E } from "./index-8g2jwLJx.js";
+import { r as k, e as w } from "./index-FRHGChx1.js";
+import { s as C, a as B } from "./publicSenderState-C-7OMKKW.js";
+const { mapFields: R } = P({
+  getterType: "forms/getField",
+  mutationType: "forms/updateField"
+}), q = {
+  name: "CompanyModal",
+  components: {
+    CPhoneInput: U,
+    CField: b
+  },
+  emits: ["close"],
+  mixins: [v],
+  props: {
+    inputFocusOnMount: {
+      type: String,
+      default: ""
+    },
+    isPublicForm: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup() {
+    return {
+      v$: E()
+    };
+  },
+  data() {
+    return {
+      isLoading: !1
+    };
+  },
+  validations: {
+    name: {
+      required: k
+    },
+    email: {
+      email: w
+    }
+  },
+  computed: {
+    ...S({
+      isPostingCompany: "companies/isPosting",
+      isPostingUser: "companyUsers/isPosting",
+      hasChanged: "forms/hasChanged",
+      companyRegion: "application/companyRegion",
+      can: "application/can"
+    }),
+    ...R({
+      company: "company",
+      user: "companyUser",
+      name: "company.name",
+      email: "companyUser.email",
+      firstName: "companyUser.firstname",
+      lastName: "companyUser.lastname",
+      cellphone: "companyUser.cellphone"
+    }),
+    ...f("application", {
+      currentUserId: (e) => e.user.userId
+    }),
+    ...f("forms", {
+      documentCompanyUserId: ({ document2: e }) => e && e.companyUserId
+    }),
+    isFullScreen() {
+      return this.mq === "sm";
+    },
+    isPosting() {
+      return this.isPostingCompany || this.isPostingUser;
+    },
+    notCurrentUser() {
+      return this.currentUserId !== this.documentCompanyUserId && !this.isPublicForm;
+    },
+    messages() {
+      const e = (a) => this.$t(`views:account.settings.company.validations.${a}`);
+      return {
+        name: {
+          required: e("name.required")
+        },
+        email: {
+          required: e("email.required"),
+          email: e("email.email")
+        }
+      };
+    }
+  },
+  created() {
+    this.loadForm();
+  },
+  mounted() {
+    this.$refs[this.inputFocusOnMount] ? this.$refs[this.inputFocusOnMount].$el.querySelector("input").focus() : this.$refs.name.$el.querySelector("input").focus();
+  },
+  methods: {
+    ...M({
+      formEditCompany: l.FORM_EDIT_COMPANY,
+      formEditCompanyUser: l.FORM_EDIT_COMPANY_USER,
+      formSubmitCompany: l.FORM_SUBMIT_COMPANY,
+      formSubmitCompanyUser: l.FORM_SUBMIT_COMPANY_USER,
+      setForm: l.SET_FORM,
+      showMessage: l.SHOW_MESSAGE
+    }),
+    loadForm() {
+      this.isPublicForm ? (this.setForm({ key: "company", formData: C.company }), this.setForm({ key: "companyUser", formData: C.user })) : (this.formEditCompany({ props: ["name"] }), this.formEditCompanyUser({
+        id: this.documentCompanyUserId,
+        props: ["id", "firstname", "lastname", "cellphone", "email"]
+      }));
+    },
+    async save() {
+      this.v$.$touch(), !this.v$.$invalid && (this.isLoading = !0, this.isPublicForm ? B({ company: this.company, user: this.user }) : await Promise.all([
+        ...this.hasChanged("company") ? [this.formSubmitCompany()] : [],
+        ...this.hasChanged("companyUser") && this.currentUserId === this.documentCompanyUserId ? [this.formSubmitCompanyUser()] : []
+      ]), this.$emit("close"), this.isLoading = !1);
+    },
+    close() {
+      this.$emit("close");
+    }
+  }
+}, T = { class: "form-client" }, A = { style: { "font-weight": "600", "font-size": "21px", "padding-bottom": "calc(2.5 * var(--rem))" } };
+function D(e, a, c, p, Y, s) {
+  const u = r("CButton"), n = r("CInput"), t = r("CField"), g = r("CPhoneInput");
+  return y(), N("div", {
+    class: $([{
+      "full-screen": s.isFullScreen,
+      "modal-overlay": !0
+    }, "font-inter"]),
+    onClickPassive: a[5] || (a[5] = O((...o) => s.close && s.close(...o), ["self"]))
+  }, [
+    d("div", {
+      style: _(!s.isFullScreen && { padding: "calc(3 * var(--rem))" }),
+      class: "modal-container"
+    }, [
+      s.isFullScreen ? (y(), V(u, {
+        key: 0,
+        class: "modal-close",
+        pattern: "tertiary",
+        type: "none",
+        circle: "",
+        icon: "x",
+        onClick: s.close
+      }, null, 8, ["onClick"])) : z("", !0),
+      d("div", T, [
+        d("div", A, h(e.$t("_common:edit", { thing: e.$t("_common:company") })), 1),
+        i(t, {
+          label: e.$t("_common:companyName").capitalize(),
+          validator: p.v$.name,
+          messages: s.messages.name,
+          "label-position": "inside",
+          style: { "margin-bottom": "calc(1.5 * var(--rem))" }
+        }, {
+          default: m(() => [
+            i(n, {
+              ref: "name",
+              modelValue: e.name,
+              "onUpdate:modelValue": a[0] || (a[0] = (o) => e.name = o),
+              disabled: c.isPublicForm ? !1 : !e.can("company", "modify"),
+              placeholder: e.$t("_common:companyName").capitalize(),
+              size: "medium"
+            }, null, 8, ["modelValue", "disabled", "placeholder"])
+          ]),
+          _: 1
+        }, 8, ["label", "validator", "messages"]),
+        i(t, {
+          label: e.$t("_common:firstName").capitalize(),
+          "label-position": "inside",
+          style: { "margin-bottom": "calc(1.5 * var(--rem))" }
+        }, {
+          default: m(() => [
+            i(n, {
+              ref: "reference",
+              modelValue: e.firstName,
+              "onUpdate:modelValue": a[1] || (a[1] = (o) => e.firstName = o),
+              disabled: s.notCurrentUser,
+              placeholder: e.$t("_common:firstName").capitalize(),
+              size: "medium",
+              "custom-class": "!rounded-l-[7px]"
+            }, null, 8, ["modelValue", "disabled", "placeholder"]),
+            i(t, {
+              label: e.$t("_common:lastName").capitalize(),
+              "label-position": "inside"
+            }, {
+              default: m(() => [
+                i(n, {
+                  modelValue: e.lastName,
+                  "onUpdate:modelValue": a[2] || (a[2] = (o) => e.lastName = o),
+                  disabled: s.notCurrentUser,
+                  placeholder: e.$t("_common:lastName").capitalize(),
+                  size: "medium"
+                }, null, 8, ["modelValue", "disabled", "placeholder"])
+              ]),
+              _: 1
+            }, 8, ["label"])
+          ]),
+          _: 1
+        }, 8, ["label"]),
+        i(t, {
+          validator: p.v$.email,
+          messages: s.messages.email,
+          label: e.$t("_common:email").capitalize(),
+          "label-position": "inside",
+          style: { "margin-bottom": "calc(1.5 * var(--rem))" }
+        }, {
+          default: m(() => [
+            i(n, {
+              ref: "email",
+              modelValue: e.email,
+              "onUpdate:modelValue": a[3] || (a[3] = (o) => e.email = o),
+              modelModifiers: { trim: !0 },
+              disabled: !c.isPublicForm,
+              placeholder: e.$t("_common:email").capitalize(),
+              size: "medium"
+            }, null, 8, ["modelValue", "disabled", "placeholder"])
+          ]),
+          _: 1
+        }, 8, ["validator", "messages", "label"]),
+        i(g, {
+          ref: "cellphone",
+          modelValue: e.cellphone,
+          "onUpdate:modelValue": a[4] || (a[4] = (o) => e.cellphone = o),
+          "default-region": e.companyRegion,
+          disabled: s.notCurrentUser,
+          label: e.$t("_common:cellphone").capitalize(),
+          "label-position": "inside",
+          size: "medium"
+        }, null, 8, ["modelValue", "default-region", "disabled", "label"]),
+        i(u, {
+          loading: s.isPosting,
+          type: "secondary",
+          wide: "",
+          size: "medium",
+          style: { "margin-top": "calc(3 * var(--rem))" },
+          onClick: s.save
+        }, {
+          default: m(() => [
+            I(h(e.$t("_common:save", { thing: e.$t("_common:company") })), 1)
+          ]),
+          _: 1
+        }, 8, ["loading", "onClick"])
+      ])
+    ], 4)
+  ], 34);
+}
+const Q = /* @__PURE__ */ F(q, [["render", D], ["__scopeId", "data-v-cfd3117b"]]);
+export {
+  Q as default
+};

package/dist/ContentWrapper-DrmiaFOz.js

@@ -0,0 +1,265 @@
+import { m as T } from "./mapFormMixin-v-nbaWcx.js";
+import { B as k } from "./BlockMedia-DbVE3vsb.js";
+import { t as w } from "./template-m1V22cUt.js";
+import { T as L } from "./DocTextEditor-Cw-Skmd4.js";
+import { _ as h, o as l, d, S as s, s as p, n as b, z as S, b2 as $, ab as C, ad as x, ac as N, b as i, e as f, w as m, c as u, f as _, Z as E } from "./main-C4OdoeS2.js";
+import { i as F } from "./i18nMessages-Chz_lxGG.js";
+const M = {
+  name: "StaticComboLayout",
+  props: {
+    layout: {
+      type: String,
+      required: !0
+    }
+  }
+}, B = {
+  key: 0,
+  class: "flex w-full flex-col",
+  style: { flex: "1 1 auto", "min-height": "100%" }
+}, V = {
+  class: "flex w-full flex-col justify-end",
+  style: { flex: "1 1 auto" }
+}, H = {
+  class: "flex w-full flex-col justify-center",
+  style: { flex: "1 1 auto" }
+};
+function z(e, t, n, v, g, o) {
+  return ["horizontal"].includes(n.layout) ? (l(), d("div", B, [
+    s(e.$slots, "logo"),
+    p("div", V, [
+      s(e.$slots, "preText"),
+      s(e.$slots, "documentName"),
+      s(e.$slots, "postText")
+    ])
+  ])) : (l(), d("div", {
+    key: 1,
+    class: b([{
+      "items-center": n.layout === "center"
+    }, "flex w-full flex-col justify-between"]),
+    style: { flex: "1 1 auto", "min-height": "100%" }
+  }, [
+    s(e.$slots, "logo"),
+    p("div", H, [
+      s(e.$slots, "preText"),
+      s(e.$slots, "documentName")
+    ]),
+    s(e.$slots, "postText")
+  ], 2));
+}
+const j = /* @__PURE__ */ h(M, [["render", z]]), A = {
+  name: "StaticLayout",
+  i18nOptions: {
+    namespaces: "staticLayout",
+    messages: F
+  },
+  components: {
+    DocumentLogotype: S(
+      () => import("./DocumentLogotype-CUNzyewq.js")
+    ),
+    StaticComboLayout: j,
+    TextEditor: L
+  },
+  emits: ["input"],
+  mixins: [
+    T([
+      "layout",
+      "preText",
+      "documentName",
+      "postText",
+      "showLogo",
+      "logotype"
+    ])
+  ],
+  props: {
+    validator: {
+      type: Object,
+      default: () => ({})
+    },
+    hasHover: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    companyLogotype() {
+      var e, t;
+      return ((t = (e = this._document.sender) == null ? void 0 : e.company) == null ? void 0 : t.logotype) || "";
+    },
+    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: $(e).trim().slice(0, 255)
+        });
+      }
+    },
+    mentions() {
+      return () => this._document.textTemplateItems || [];
+    }
+  },
+  methods: {
+    mustacheToSpan: C,
+    spanToMustache: x,
+    interpolateString: N
+  }
+}, I = { style: { "font-size": "calc(2 * var(--rem))", "font-weight": "700", margin: "calc(1 * var(--rem)) 0" } }, U = ["innerHTML"];
+function D(e, t, n, v, g, o) {
+  const c = i("DocumentLogotype"), r = i("TextEditor"), y = i("StaticComboLayout");
+  return l(), d("div", {
+    class: b([[`is-layout-${e.layout}`], "dont-break-out hyphens-auto flex w-full flex-col break-words"]),
+    style: { "word-wrap": "break-word", "word-break": "break-word" }
+  }, [
+    f(y, { layout: e.layout }, {
+      logo: m(() => [
+        f(c, {
+          modelValue: e.logotype,
+          "onUpdate:modelValue": t[0] || (t[0] = (a) => e.logotype = a),
+          "show-logo": e.showLogo,
+          "onUpdate:showLogo": t[1] || (t[1] = (a) => e.showLogo = a),
+          "company-logotype": o.companyLogotype,
+          "has-hover": n.hasHover
+        }, null, 8, ["modelValue", "show-logo", "company-logotype", "has-hover"])
+      ]),
+      preText: m(() => [
+        (l(), u(r, {
+          ref: "preTextEditor",
+          key: "preText" + e.canEdit,
+          "model-value": e.canEdit ? o.mustacheToSpan(
+            e.preText,
+            e._document.textTemplateMap,
+            e._document._doc
+          ) : o.interpolateString(e.preText, e._document._doc),
+          mentions: o.mentions,
+          snippets: !0,
+          placeholder: e.$t("optional").capitalize(),
+          class: "no-drag header-text",
+          static: "",
+          unstyled: "",
+          "onUpdate:modelValue": t[2] || (t[2] = (a) => e.preText = o.spanToMustache(a))
+        }, null, 8, ["model-value", "mentions", "placeholder"]))
+      ]),
+      documentName: m(() => [
+        p("div", I, [
+          e.canEdit ? (l(), u(r, {
+            key: 0,
+            ref: "nameEditor",
+            "model-value": o.internalName,
+            extensions: {
+              bulletList: !0,
+              heading: [1, 2, 3],
+              bold: !0,
+              link: !0,
+              underline: !0,
+              blockquote: !0,
+              table: !1
+            },
+            placeholder: e.$t("name.placeholder"),
+            unstyled: "",
+            class: "no-drag header-text",
+            static: "",
+            "onUpdate:modelValue": t[3] || (t[3] = (a) => o.internalName = a)
+          }, null, 8, ["model-value", "placeholder"])) : (l(), d("div", {
+            key: 1,
+            class: "header-text",
+            innerHTML: o.internalName
+          }, null, 8, U))
+        ])
+      ]),
+      postText: m(() => [
+        (l(), u(r, {
+          ref: "postTextEditor",
+          key: "postText" + e.canEdit,
+          "model-value": e.canEdit ? o.mustacheToSpan(
+            e.postText,
+            e._document.textTemplateMap,
+            e._document._doc
+          ) : o.interpolateString(e.postText, e._document._doc),
+          editable: e.canEdit,
+          mentions: o.mentions,
+          snippets: !0,
+          placeholder: e.$t("optional").capitalize(),
+          class: "no-drag header-text",
+          style: { width: "100%" },
+          static: "",
+          unstyled: "",
+          "onUpdate:modelValue": t[4] || (t[4] = (a) => e.postText = o.spanToMustache(a))
+        }, null, 8, ["model-value", "editable", "mentions", "placeholder"]))
+      ]),
+      _: 1
+    }, 8, ["layout"])
+  ], 2);
+}
+const O = /* @__PURE__ */ h(A, [["render", D], ["__scopeId", "data-v-9c0b02ef"]]), q = {
+  name: "ContentWrapper",
+  components: {
+    StaticCombo: O,
+    BlockMedia: k
+  },
+  emits: ["input"],
+  mixins: [T(["layout", "item", "baseStyle"])],
+  props: {
+    hasHover: {
+      type: Boolean,
+      default: !1
+    },
+    validator: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      hoverIndex: null
+    };
+  },
+  computed: {
+    color() {
+      var e;
+      return ((e = this.baseStyle) == null ? void 0 : e.textColor) || this.fallbackTextColor;
+    },
+    textAlign() {
+      var e;
+      return ((e = this.baseStyle) == null ? void 0 : e.textAlign) || "left";
+    },
+    fallbackTextColor() {
+      return this.backgroundColor && w.readability(this.backgroundColor, "#fff") < 1.8 ? "#111111" : "#FFFFFF";
+    }
+  }
+}, W = { class: "content-spacing" };
+function P(e, t, n, v, g, o) {
+  const c = i("BlockMedia"), r = i("StaticCombo");
+  return l(), d("div", E(e.$attrs, {
+    style: { color: o.color, textAlign: o.textAlign },
+    class: [{ "has-hover": n.hasHover }, "content-root"]
+  }), [
+    e.layout !== "center" ? (l(), u(c, {
+      key: 0,
+      media: e.item.media,
+      class: "content-media"
+    }, null, 8, ["media"])) : _("", !0),
+    p("div", W, [
+      f(r, {
+        "has-hover": n.hasHover,
+        _document: e._document,
+        _value: {
+          layout: e._value.layout,
+          preText: `${e._value.item}.value.preText`,
+          documentName: `${e._value.item}.value.documentName`,
+          postText: `${e._value.item}.value.postText`,
+          showLogo: `${e._value.item}.value.showLogo`,
+          logotype: `${e._value.item}.value.logotype`
+        },
+        validator: n.validator,
+        onInput: t[0] || (t[0] = (y) => e.$emit("input", y))
+      }, null, 8, ["has-hover", "_document", "_value", "validator"])
+    ])
+  ], 16);
+}
+const X = /* @__PURE__ */ h(q, [["render", P], ["__scopeId", "data-v-22ef2030"]]);
+export {
+  X as default
+};