@cling-se/widget 0.9.4 → 0.9.6

package/dist/PriceHeader-cfb22169.js

@@ -0,0 +1,337 @@
+import { m as c } from "./mapFormMixin-4ac649c2.js";
+import { B as l } from "./BlockMedia-a3f00a2f.js";
+import { n, b as r, q as d, a0 as u } from "./main-2dc98356.js";
+import { T as m } from "./DocTextEditor-b07dd391.js";
+import { i as p } from "./i18nMessages-45c6bfd6.js";
+import { t as _ } from "./tinycolor-78c3e3d5.js";
+import { s as y } from "./dom-068d1a7b.js";
+import "./color-71c20583.js";
+import "./tippy.esm-d2a6f864.js";
+import "./ColorPicker-06b731b7.js";
+import "./DocumentLayout-ae49ac7a.js";
+import "./CDropdownItem-5532f8af.js";
+import "./CSlider.vue_vue_type_style_index_0_lang-d9c2f582.js";
+import "./CField.vue_vue_type_style_index_0_lang-4ed993c7.js";
+const h = {
+  name: "SummaryTop",
+  i18nOptions: {
+    namespaces: "summaryTop",
+    messages: p
+  },
+  components: {
+    TextEditor: m,
+    DocumentLogotype: () => import("./DocumentLogotype-91436523.js")
+  },
+  inject: ["parentSize"],
+  mixins: [c([])],
+  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
+    }
+  },
+  computed: {
+    logotypeListeners() {
+      return {
+        ...this.$listeners,
+        input: (i) => this.$emit("update:logotype", i)
+      };
+    }
+  }
+};
+var v = function() {
+  var e = this, t = e._self._c;
+  return t("section", { staticClass: "flex justify-center w-full summary-top" }, [t("div", { staticClass: "doc-summary-top-wrapper" }, [t("div", { staticClass: "doc-summary-top-wrapper__background" }), t("div", { staticClass: "flex justify-between w-full", staticStyle: { "margin-bottom": "calc(2.5 * var(--rem))" } }, [e.showLogo && (e.logotype || e.companyLogotype) || e.canEdit ? t("DocumentLogotype", e._g({ attrs: { value: e.logotype, "show-logo": e.showLogo, "company-logotype": e.companyLogotype, "has-hover": e.hasHover } }, e.logotypeListeners)) : t("div", { staticClass: "company-name" }, [e._v(" " + e._s(e.senderName) + " ")]), t("div", { staticClass: "top-right-text-wrapper" }, [e.sentAt ? t("div", [e._v(e._s(e.$formatDate(e.sentAt)))]) : e._e(), e.docNumber ? t("div", [e._v(" #" + e._s(e.docNumber))]) : e._e()])], 1), t("div", { staticClass: "title-text" }, [e.canEdit ? t("TextEditor", { ref: "editor", staticClass: "no-drag", staticStyle: { "will-change": "opacity" }, attrs: { value: e.docName, placeholder: e.$t("name.placeholder"), extensions: {
+    bulletList: !1,
+    heading: [1, 2, 3],
+    bold: !1,
+    link: !1,
+    underline: !1,
+    blockquote: !0,
+    table: !1
+  }, unstyled: "", static: "" }, on: { input: function(s) {
+    return e.$emit("update:doc-name", s);
+  } } }) : t("div", { staticClass: "quill-custom", domProps: { innerHTML: e._s(e.docName) } })], 1), t("div", { staticClass: "flex justify-between w-full" }, [e.expiresAt ? t("div", { staticClass: "data-group" }, [t("div", { staticClass: "label-text caps" }, [e._v(e._s(e._document.$t("replyBy")))]), t("div", { staticClass: "data-text" }, [e._v(e._s(e.$formatDate(e.expiresAt)))])]) : e._e(), e.docType !== "document" ? t("div", { staticClass: "data-group" }, [t("div", { staticClass: "label-text caps" }, [e._v(e._s(e._document.$t("document").capitalize()))]), t("div", { staticClass: "data-text" }, [e._v(e._s(e._document.$t(`series.${e.docType}`).capitalize()))])]) : e._e(), e.parentSize.width >= 576 ? [e.estimatedTime ? t("div", { staticClass: "data-group" }, [t("div", { staticClass: "label-text caps" }, [e._v(e._s(e.$t("time.estimatedTime")))]), t("div", { staticClass: "data-text" }, [e._v(e._s(e._document.$t("approx")) + " " + e._s(e.estimatedTime))])]) : e._e()] : e._e()], 2)])]);
+}, g = [], f = /* @__PURE__ */ n(
+  h,
+  v,
+  g,
+  !1,
+  null,
+  "ec3c14d9",
+  null,
+  null
+);
+const S = f.exports;
+const x = {
+  name: "SummaryBottom",
+  mixins: [c([])],
+  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
+    }
+  },
+  inject: ["parentSize"],
+  data() {
+    return {
+      get: r,
+      tinycolor: _
+    };
+  },
+  computed: {
+    prices() {
+      return r(this, "base.prices") || {};
+    },
+    isIndivid() {
+      return r(this.prices, "helpers.isIndivid", !0);
+    },
+    showIncVat() {
+      return this.isIndivid;
+    },
+    priceTotal() {
+      return this.isIndivid ? r(this.prices, "total", null) : r(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 r(this.prices, "region.houseWorkType", null);
+    },
+    isReverseVat() {
+      return r(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 i = "";
+      if (this.isReverseVat && !this.showIncVat) {
+        const e = this.priceFormat(0, { currency: this.currency, showZero: !0 });
+        return i = this._document.$t("summaryBottom.reverseVat", { amount: e }), i;
+      }
+      return this.houseWorkType && (i = this._document.$t("deduction.afterType", { type: `${this.houseWorkType}_percentage` })), this.showIncVat && (i += ` ${this._document.$t("vat.incVat", { thing: this._document.$t(`vat.${this.vatType}`) })}`), this.showIncVat || (i += ` ${this._document.$t("vat.exVat", { thing: this._document.$t(`vat.${this.vatType}`) })}`), i.capitalize();
+    },
+    backgroundSecondary() {
+      if (!this.isSmallScreen)
+        return { backgroundColor: "transparent" };
+      const i = this.backgroundColor.match(/(\d*\.)?\d+/g)[0], e = this.backgroundColor.match(/(\d*\.)?\d+/g)[1], t = this.backgroundColor.match(/(\d*\.)?\d+/g)[2], s = this.backgroundColor.match(/(\d*\.)?\d+/g)[3];
+      return {
+        backgroundColor: `hsla(${i}, ${e ** 0.9}%, ${t ** 0.9}%, ${s})`
+      };
+    },
+    isSmallScreen() {
+      return this.parentSize.width <= 576;
+    }
+  },
+  methods: {
+    priceFormat: d,
+    scrollToPricing() {
+      const i = document.querySelector("#price");
+      i && y(i);
+    }
+  }
+};
+var b = function() {
+  var e = this, t = e._self._c;
+  return t("section", { staticClass: "summary-bottom-root" }, [t("div", { staticClass: "summary-bottom", style: [
+    {
+      backgroundColor: e.backgroundColor,
+      color: e.tinycolor.readability(e.backgroundColor, "#FFF") > 2.2 ? "#FFF" : "#000"
+    },
+    e.options.length && {
+      overflow: "hidden",
+      padding: 0
+    }
+  ] }, [e.options.length ? t("div", { staticClass: "flex items-center justify-end w-full", staticStyle: { height: "108px" } }, [t("div", { staticStyle: { "text-align": "right", padding: "calc(2 * var(--rem))" } }, [t("div", { staticStyle: { "font-size": "calc(1.5 * var(--rem))", "font-weight": "900" } }, [e._v(e._s(e._document.$t("price.proposal")))]), t("div", [e._v(e._s(e._document.$t("summaryBottom.chooseFrom")))])]), t("div", { staticStyle: { "background-color": "hsla(0, 0%, 0%, 0.15)", paadding: "calc(1 * var(--rem)) calc(2 * var(--rem))", height: "100%", display: "inline-flex" } }, [e.base ? t("div", { staticStyle: { display: "flex", "flex-direction": "column", "align-items": "flex-start", "justify-content": "center", padding: "calc(1 * var(--rem)) calc(1 * var(--rem))", "text-align": "left" } }, [t("div", { staticStyle: { "font-weight": "900", "font-size": "calc(1.5 * var(--rem))" } }, [e._v(e._s(e.priceFormat(e.base.prices.total, { currency: e.currency, decimals: 2, hideZeroDecimals: !0 })))]), t("div", [e._v("+ " + e._s(e._document.$tc("summaryBottom.option", { count: e.options.length })))])]) : t("div", { staticStyle: { padding: "calc(2 * var(--rem))", display: "inline-flex", "align-items": "center", "justify-content": "center", "font-weight": "900", "font-size": "calc(2.5 * var(--rem))" } }, [e._v(" " + e._s(e._document.$t("summaryBottom.noOfOptions", { count: e.options.length })) + " ")])]), t("div", { staticStyle: { "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)" } })]) : t("div", { staticClass: "flex justify-between w-full", class: [
+    {
+      column: e.isSmallScreen,
+      sm: e.isSmallScreen
+    }
+  ], staticStyle: { position: "relative" } }, [t("div", { staticClass: "flex flex-col w-full", class: [{ "fixed-price-type-string": e.isSmallScreen }], staticStyle: { "background-color": "hsl(224, 57%, 39%)" }, style: [e.backgroundSecondary] }, [t("div", { staticClass: "price-type-string data-text" }, [e._v(" " + e._s(e.priceTypeString) + " ")]), e.isSmallScreen ? e._e() : t("div", { staticClass: "price-deduction-text" }, [e._v(" " + e._s(e.priceDeductionVatString) + " ")])]), e.priceType.some((s) => ["openAcc", "openAccMaxPrice"].includes(s)) ? t("div", { staticClass: "open-acc-wrapper" }, [e.openAccMaxPrice ? t("div", { staticClass: "open-acc-item" }, [t("div", [e._v(e._s(e._document.$t("price.maxPrice").capitalize()) + " " + e._s(e._document.$t("vat.exVat", { thing: e._document.$t(`vat.${e.vatType}`) })) + ":")]), t("div", [e._v(e._s(e.priceFormat(e.openAccMaxPrice, { currency: e.currency })))])]) : e._e(), t("div", { staticClass: "open-acc-link" }, [e._v(" " + e._s(e._document.$t("see").capitalize()) + " "), t("span", { staticStyle: { color: "inherit", cursor: "pointer" }, on: { click: e.scrollToPricing } }, [t("u", [e._v(e._s(e._document.$t("price.price_plural")))])]), e._v(" " + e._s(e._document.$t("summaryBottom.forDetails")) + " ")])]) : t("div", { staticClass: "flex items-center w-full", class: [{ "justify-end": !e.isSmallScreen }] }, [t("div", { staticClass: "data-text", staticStyle: { "font-size": "calc(2 * var(--rem))", "font-weight": "900", "letter-spacing": "1px", "line-height": "1", "padding-bottom": "calc(0.3 * var(--rem))" } }, [e._v(" " + e._s(e.priceType.includes("approx") ? e._document.$t("approx").capitalize() : "") + " " + e._s(e.priceFormat(e.priceTotal, { currency: e.currency, decimals: 2, hideZeroDecimals: !0 })) + " ")])]), e.isSmallScreen ? t("div", { staticClass: "label-text caps price-deduction-text", staticStyle: { "margin-top": "4px" } }, [e._v(" " + e._s(e.priceDeductionVatString) + " ")]) : e._e()])])]);
+}, C = [], $ = /* @__PURE__ */ n(
+  x,
+  b,
+  C,
+  !1,
+  null,
+  "8ace9bc8",
+  null,
+  null
+);
+const w = $.exports;
+const T = {
+  name: "PriceHeader",
+  components: {
+    SummaryTop: S,
+    SummaryBottom: w,
+    BlockMedia: l
+  },
+  mixins: [c([
+    "media",
+    "backgroundColor",
+    "documentName",
+    "showPriceSummary",
+    "showLogo",
+    "logotype"
+  ])],
+  props: {
+    _document: {
+      type: Object,
+      default: () => ({})
+    },
+    _value: {
+      type: Object,
+      default: () => ({})
+    },
+    hasHover: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  computed: {
+    internalName: {
+      get() {
+        return this.documentName;
+      },
+      set(i) {
+        this.documentName = i, this.$emit("input", { key: "data.name", value: u(i).trim().slice(0, 255) });
+      }
+    },
+    company() {
+      return this._document.sender.company;
+    },
+    prices() {
+      return this._document.prices;
+    },
+    estimatedTimeString() {
+      var t, s;
+      const { value: i, unitType: e } = ((s = (t = this._document) == null ? void 0 : t.data) == null ? void 0 : s.estimatedTime) || {};
+      return !i || !e ? null : this.$tc(`${e}`, { count: i });
+    },
+    sendAtShowDate() {
+      const { sentAt: i, scheduledFirstDelivery: e } = this._document;
+      return i || (e ? e.sendAt : null);
+    },
+    summaryBottom() {
+      var s;
+      let i = {
+        show: !1,
+        backgroundColor: this.backgroundColor || this._document.theme.priceSummaryBackground,
+        documentCurrency: this._document.currency,
+        vatType: this._document.vatType
+      }, { showPriceSummary: e } = this;
+      typeof e != "boolean" && ({ showPriceSummary: e } = this._document.theme);
+      const t = ((s = this._document.packageGroups) == null ? void 0 : s.packages) || [];
+      return t.length > 1 ? i = {
+        ...i,
+        show: e,
+        base: { prices: this.prices },
+        options: t.filter(({ toggable: a }) => a).map(({ prices: a }) => ({ prices: a }))
+      } : i = {
+        ...i,
+        show: e && this._document.readPrices && (this.prices.total || this.prices.type.some((a) => ["openAccMaxPrice", "openAcc"].includes(a))),
+        base: { prices: this.prices }
+      }, this.canEdit && e && (i.show = !0), i.documentCurrency || (i.show = !1), i;
+    }
+  }
+};
+var k = function() {
+  var s, a;
+  var e = this, t = e._self._c;
+  return t("div", [t("div", { staticClass: "doc-jumbotron-wrapper" }, [t("BlockMedia", { staticClass: "price-media-wrapper", attrs: { media: {
+    ...e.media,
+    resourceUrl: ((s = e.media) == null ? void 0 : s.resourceUrl) || e._document.theme.background,
+    overlayColor: ((a = e.media) == null ? void 0 : a.overlayColor) || e._document.theme.backgroundFilter
+  } } }), t("SummaryTop", { attrs: { _document: e._document, "show-logo": e.showLogo, logotype: e.logotype, "company-logotype": e.company.logotype, "sender-name": e.company.name, "doc-type": e._document.docNumber.series, "doc-name": e.internalName, "doc-number": e._document.docNumber.value, "sent-at": e.sendAtShowDate, "expires-at": e._document.expiresAt, "estimated-time": e.estimatedTimeString, "has-hover": e.hasHover }, on: { "update:showLogo": function(o) {
+    e.showLogo = o;
+  }, "update:show-logo": function(o) {
+    e.showLogo = o;
+  }, "update:logotype": function(o) {
+    e.logotype = o;
+  }, "update:docName": function(o) {
+    e.internalName = o;
+  }, "update:doc-name": function(o) {
+    e.internalName = o;
+  } } })], 1), e.summaryBottom.show ? t("SummaryBottom", e._b({ attrs: { _document: e._document } }, "SummaryBottom", e.summaryBottom, !1)) : e._e()], 1);
+}, A = [], B = /* @__PURE__ */ n(
+  T,
+  k,
+  A,
+  !1,
+  null,
+  "4a30cbe0",
+  null,
+  null
+);
+const R = B.exports;
+export {
+  R as default
+};

package/dist/{SearchApi-2e286be6.js → SearchApi-c0067742.js}

@@ -1,5 +1,5 @@
-import { g as u, p as h, d as f, e as d, n as m } from "./main-04025a56.js";
-import { d as p } from "./CDropdownItem-74672842.js";
+import { g as u, p as h, d as f, e as d, n as m } from "./main-2dc98356.js";
+import { d as p } from "./CDropdownItem-5532f8af.js";
 import { m as y, a as g } from "./vuex.esm-4a0fff7c.js";
 const A = {
   name: "SearchApi",

package/dist/{TermsSettings-c74eec79.js → TermsSettings-a0282ad7.js}

@@ -1,9 +1,9 @@
-import { d as m, w as o, n as v } from "./main-04025a56.js";
-import { m as c } from "./mapFormMixin-8d073f99.js";
-import g from "./Index-e749f6f1.js";
-import "./DocModalBase-f4915a62.js";
-import "./formValidationMixin-4920ab53.js";
-import "./CDropdownItem-74672842.js";
+import { d as m, y as o, n as v } from "./main-2dc98356.js";
+import { m as c } from "./mapFormMixin-4ac649c2.js";
+import g from "./Index-85e8119e.js";
+import "./DocModalBase-9eb0f26f.js";
+import "./DocumentLayout-ae49ac7a.js";
+import "./CDropdownItem-5532f8af.js";
 const p = {
   i18nOptions: {
     namespaces: "terms",
@@ -83,7 +83,7 @@ const p = {
 var u = function() {
   var t = this, e = t._self._c;
   return e("div", { staticClass: "d-root" }, [e("div", { staticClass: "d-option-title" }, [t._v(" " + t._s(t.$t("title")) + " "), e("svg", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: t.$t("tooltip"), expression: "$t('tooltip')" }], attrs: { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.5", "stroke-linecap": "square", "stroke-linejoin": "bevel" } }, [e("circle", { attrs: { cx: "12", cy: "12", r: "10" } }), e("line", { attrs: { x1: "12", y1: "16", x2: "12", y2: "12" } }), e("line", { attrs: { x1: "12", y1: "8", x2: "12", y2: "8" } })])]), e("CDropdown", { attrs: { value: t.term ? t.term.id : null, expanded: "" } }, [e("CButton", { staticClass: "is-left", staticStyle: { width: "100%" }, attrs: { slot: "trigger", "dropdown-icon": !0 }, slot: "trigger" }, [e("div", { staticClass: "truncate-text" }, [t._v(" " + t._s(t.truncate(t.term && t.terms.ids.length && t.terms.data[t.term.termId].name || t.$t("noneSelected"), 20)) + " ")])]), t._l(t.terms.ids, function(a) {
-    return e("CDropdownItem", { key: a, staticStyle: { "padding-right": "1rem" }, attrs: { value: a }, on: { click: function(n) {
+    return e("CDropdownItem", { key: a, staticStyle: { "padding-right": "calc(1 * var(--rem))" }, attrs: { value: a }, on: { click: function(n) {
       t.term = t.terms.data[a];
     } } }, [e("div", { staticClass: "truncate-text" }, [t._v(" " + t._s(t.terms.data[a].name) + " ")])]);
   }), e("CDropdownItem", { attrs: { value: null }, on: { click: function(a) {
@@ -91,17 +91,17 @@ var u = function() {
   } } }, [t._v(t._s(t.$t("notSet")))]), t.terms.ids.length ? t._e() : e("CDropdownItem", { attrs: { disabled: "" } }, [t._v(t._s(t.$t("noResults")))])], 2), t.viewSettings.isPublicForm ? e("CCallout", { staticStyle: { margin: "1em 0" }, attrs: { title: t.$t("publicFormCalloutTitle"), size: "small" } }, [t._v(" " + t._s(t.$t("publicFormCallout")) + " ")]) : t._e(), t.term ? e("TermsDisclaimer", { attrs: { _document: t._document, "term-type": t.term.type, href: t.term.href, text: t.term.text, file: t.term.file }, scopedSlots: t._u([{ key: "default", fn: function({ openTerms: a }) {
     return [e("CButton", { staticStyle: { "margin-top": "5px" }, attrs: { type: "none", pattern: "secondary", size: "small", "icon-left": "eye" }, on: { click: a } }, [t._v(" " + t._s(t.$t("show")) + " ")])];
   } }], null, !1, 1475186016) }) : t._e()], 1);
-}, h = [], f = /* @__PURE__ */ v(
+}, f = [], h = /* @__PURE__ */ v(
   p,
   u,
-  h,
+  f,
   !1,
   null,
-  "6915fec8",
+  "d64f938f",
   null,
   null
 );
-const C = f.exports;
+const C = h.exports;
 export {
   C as default
 };

package/dist/{ThemeColorRow-3558367b.js → ThemeColorRow-71af67bd.js}

@@ -1,6 +1,6 @@
 import { h as a } from "./color-71c20583.js";
-import { C as l } from "./ColorPicker-4f6b70af.js";
-import { n as i } from "./main-04025a56.js";
+import { C as l } from "./ColorPicker-06b731b7.js";
+import { n as i } from "./main-2dc98356.js";
 const f = (o, e = {}) => {
   if (!o || !o.startsWith("https://images.unsplash.com/") || !Object.keys(e || {}).length)
     return o;
@@ -61,7 +61,7 @@ var p = function() {
   u,
   !1,
   null,
-  "74d3d195",
+  "066e85b2",
   null,
   null
 );

package/dist/{ToggleBinding-6c9c1ac3.js → ToggleBinding-16c2879e.js}

@@ -1,6 +1,6 @@
-import { m as i } from "./mapFormMixin-8d073f99.js";
-import { I as t } from "./InputToggleRow-9d8a7da4.js";
-import { n as l } from "./main-04025a56.js";
+import { m as i } from "./mapFormMixin-4ac649c2.js";
+import { I as t } from "./InputToggleRow-483acc75.js";
+import { n as l } from "./main-2dc98356.js";
 const s = {
   name: "ToggleBinding",
   i18nOptions: {

package/dist/{UploadModal-6d0abd77.js → UploadModal-084e3c2e.js}

@@ -1,7 +1,7 @@
-import l from "./Index-6ef78b7a.js";
-import { d as o, x as c, y as d, n as p } from "./main-04025a56.js";
-import { m } from "./vuex.esm-4a0fff7c.js";
-import "./tinycolor-88fa380f.js";
+import l from "./Index-ecf93915.js";
+import { d as o, h as c, z as d, n as m } from "./main-2dc98356.js";
+import { m as p } from "./vuex.esm-4a0fff7c.js";
+import "./tinycolor-78c3e3d5.js";
 const u = {
   i18nOptions: {
     namespaces: "uploadModal",
@@ -27,7 +27,7 @@ const u = {
     };
   },
   computed: {
-    ...m({
+    ...p({
       user: "application/user"
     })
   },
@@ -48,15 +48,15 @@ const u = {
             _end: 20
           }
         });
-        this.recentFiles = (e || []).map(({ displayName: t, mime: s, id: n, createdAt: i, url: r }) => ({
+        this.recentFiles = (e || []).map(({ displayName: t, mime: s, id: r, createdAt: n, url: i }) => ({
           name: t,
           // TODO, could refactor to only 'displayName'
           displayName: t,
           // file-uploader-component uses displayName, therefore needed for select
           mime: s,
-          id: n,
-          createdAt: i,
-          url: r
+          id: r,
+          createdAt: n,
+          url: i
         }));
       } catch (e) {
         c(e);
@@ -71,26 +71,26 @@ const u = {
 };
 var _ = function() {
   var e = this, t = e._self._c;
-  return t("div", { staticClass: "up-root font-inter" }, [t("div", { staticStyle: { padding: "2em" } }, [t("div", { staticClass: "up-placeholder", on: { click: function(s) {
+  return t("div", { staticClass: "bg-white rounded-xl text-base max-h-[90%] w-[460px] max-w-full" }, [t("div", { staticClass: "p-6" }, [t("div", { staticClass: "p-8 text-center text-gray-700 border border-gray-200 rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 hover:border-primary-500/20 active:bg-gray-200", on: { click: function(s) {
     return e.$emit("open-picker");
-  } } }, [e._v(" " + e._s(e.$t("upPlaceholder")) + " "), t("span", { staticStyle: { "text-decoration": "underline", color: "#03f", cursor: "pointer" } }, [e._v(e._s(e.$t("_common:browse")))])])]), e.isLoading || e.recentFiles.length ? t("div", { staticClass: "up-recent" }, [t("div", { staticStyle: { "font-size": "15px", padding: "1em", margin: "0px 1em", color: "hsl(0, 0%, 30%)" } }, [e._v(" " + e._s(e.$t("recentlyUsed")) + " ")]), e.isLoading ? e._l(6, function(s) {
+  } } }, [e._v(" " + e._s(e.$t("upPlaceholder")) + " "), t("span", { staticClass: "underline text-primary-500" }, [e._v(e._s(e.$t("_common:browse")))])])]), e.isLoading || e.recentFiles.length ? t("div", { staticClass: "pb-4 text-left h-[400px] overflow-auto max-h-[50vh] border-t border-gray-200" }, [t("div", { staticStyle: { "font-size": "15px", padding: "1em", margin: "0px 1em", color: "hsl(0, 0%, 30%)" } }, [e._v(" " + e._s(e.$t("recentlyUsed")) + " ")]), e.isLoading ? e._l(6, function(s) {
     return t("ContentPlaceholders", { key: s, staticClass: "flex items-center w-full up-recent-item", attrs: { animated: !1 } }, [t("ContentPlaceholdersText", { staticStyle: { width: "37px", height: "38px", "font-size": "24px", "margin-right": "4px" }, attrs: { lines: 1 } }), t("div", { staticClass: "flex-grow" }, [t("ContentPlaceholdersText", { attrs: { lines: 1 } }), t("ContentPlaceholdersText", { staticClass: "up-recent-item-hint", staticStyle: { "max-width": "50%" }, attrs: { lines: 1 } })], 1)], 1);
   }) : e._l(e.recentFiles, function(s) {
-    return t("div", { key: s.id, staticClass: "flex items-center w-full up-recent-item", on: { click: function(n) {
+    return t("div", { key: s.id, staticClass: "flex items-center w-full up-recent-item", on: { click: function(r) {
       return e.onSelect(s);
     } } }, [t("FileIcon", { staticStyle: { "margin-right": "1em" }, attrs: { mime: s.mime, size: 30 } }), t("div", { staticClass: "truncate-text" }, [t("div", { staticClass: "truncate-text", staticStyle: { "font-weight": "500" } }, [e._v(" " + e._s(s.name) + " ")]), t("div", { staticClass: "up-recent-item-hint" }, [e._v(" " + e._s(e.$formatDate(s.createdAt)) + " ")])])], 1);
   })], 2) : e._e()]);
-}, f = [], h = /* @__PURE__ */ p(
+}, h = [], f = /* @__PURE__ */ m(
   u,
   _,
-  f,
+  h,
   !1,
   null,
-  "ac511cfd",
+  "a82ceaee",
   null,
   null
 );
-const C = h.exports;
+const C = f.exports;
 export {
   C as default
 };

package/dist/{VideoPlayerInput-77cd86aa.js → VideoPlayerInput-fe87698e.js}

@@ -1,6 +1,6 @@
-import { d as a } from "./CDropdownItem-74672842.js";
-import { v as l } from "./utils-6670dea6.js";
-import { n } from "./main-04025a56.js";
+import { d as a } from "./CDropdownItem-5532f8af.js";
+import { v as l } from "./utils-aab0bc31.js";
+import { n } from "./main-2dc98356.js";
 const r = {
   name: "VideoPlayerInput",
   i18nOptions: {

package/dist/{VideoPlayerSettings-b7eb781c.js → VideoPlayerSettings-06cfaccc.js}

@@ -1,7 +1,7 @@
-import n from "./VideoPlayerInput-77cd86aa.js";
-import { n as s } from "./main-04025a56.js";
-import "./CDropdownItem-74672842.js";
-import "./utils-6670dea6.js";
+import n from "./VideoPlayerInput-fe87698e.js";
+import { n as s } from "./main-2dc98356.js";
+import "./CDropdownItem-5532f8af.js";
+import "./utils-aab0bc31.js";
 const l = {
   i18nOptions: {
     namespaces: "components",
@@ -41,13 +41,13 @@ const l = {
   }
 };
 var r = function() {
-  var e = this, t = e._self._c;
-  return t("div", { staticClass: "d-root" }, [t("div", { staticClass: "d-option" }, [t("div", { staticClass: "d-option-title" }, [e._v(e._s(e.$t("_common:video").capitalize()))]), t("div", { staticClass: "has-text-grey-dark", staticStyle: { "padding-bottom": "1em", "font-size": "15px" } }, [e._v(" " + e._s(e.$t("subTitle")) + " ")]), t("VideoPlayerInput", { attrs: { value: e.video, "is-drawer-mode": !0 }, on: { input: function(i) {
-    return e.$emit("input", { key: "video", value: i });
-  } } })], 1), t("div", { staticClass: "d-option" }, [t("div", { staticClass: "d-option-title" }, [e._v(e._s(e.$t("_common:size").capitalize()))]), t("div", { staticStyle: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap" } }, e._l(e.sizeOptions, function({ value: i, svg: a }, o) {
-    return t("div", { key: o, staticClass: "size-option", on: { click: function(c) {
-      return e.$emit("input", { key: "size", value: i });
-    } } }, [t("svg", { staticClass: "size-option-image", class: { "is-active": e.size === i }, attrs: { viewBox: "0 0 99 65" }, domProps: { innerHTML: e._s(a) } })]);
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "d-root" }, [e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title" }, [t._v(t._s(t.$t("_common:video").capitalize()))]), e("div", { staticClass: "text-gray-600", staticStyle: { "padding-bottom": "1em", "font-size": "15px" } }, [t._v(" " + t._s(t.$t("subTitle")) + " ")]), e("VideoPlayerInput", { attrs: { value: t.video, "is-drawer-mode": !0 }, on: { input: function(i) {
+    return t.$emit("input", { key: "video", value: i });
+  } } })], 1), e("div", { staticClass: "d-option" }, [e("div", { staticClass: "d-option-title" }, [t._v(t._s(t.$t("_common:size").capitalize()))]), e("div", { staticStyle: { display: "flex", "flex-direction": "row", "flex-wrap": "wrap" } }, t._l(t.sizeOptions, function({ value: i, svg: a }, o) {
+    return e("div", { key: o, staticClass: "size-option", on: { click: function(c) {
+      return t.$emit("input", { key: "size", value: i });
+    } } }, [e("svg", { staticClass: "size-option-image", class: { "is-active": t.size === i }, attrs: { viewBox: "0 0 99 65" }, domProps: { innerHTML: t._s(a) } })]);
   }), 0)])]);
 }, d = [], v = /* @__PURE__ */ s(
   l,
@@ -55,7 +55,7 @@ var r = function() {
   d,
   !1,
   null,
-  "983d1df6",
+  "2190dbf6",
   null,
   null
 );