@cling-se/widget 0.15.2 → 0.15.5

package/dist/CSelect-BmP1UsQA.js

@@ -0,0 +1,91 @@
+import { n as r, F as c } from "./main-U22_wtg0.js";
+const u = {
+  name: "CSelect",
+  mixins: [c],
+  inheritAttrs: !1,
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object, Array, Function],
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    multiple: Boolean,
+    selectClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    nativeSize: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  data() {
+    return {
+      selected: this.value,
+      _elementRef: "select"
+    };
+  },
+  computed: {
+    computedValue: {
+      get() {
+        return this.selected;
+      },
+      set(l) {
+        this.selected = l, this.$emit("input", l), !this.isValid && this.checkHtml5Validity();
+      }
+    },
+    spanClasses() {
+      return [
+        this.size,
+        this.statusType,
+        {
+          "is-fullwidth": this.expanded,
+          "is-loading": this.loading,
+          "is-multiple": this.multiple,
+          "is-rounded": this.rounded,
+          "is-empty": this.selected === null
+        }
+      ];
+    }
+  },
+  watch: {
+    /**
+     * When v-model is changed:
+     *   1. Set the selected option.
+     *   2. If it's invalid, validate again.
+     */
+    value(l) {
+      this.selected = l, !this.isValid && this.checkHtml5Validity();
+    }
+  }
+};
+var d = function() {
+  var e = this, i = e._self._c;
+  return i("div", { staticClass: "control", class: { "is-expanded": e.expanded, "has-icons-left": e.icon } }, [i("span", { staticClass: "select", class: e.spanClasses }, [i("select", e._b({ directives: [{ name: "model", rawName: "v-model", value: e.computedValue, expression: "computedValue" }], ref: "select", class: e.selectClass, attrs: { multiple: e.multiple, size: e.nativeSize }, on: { blur: function(t) {
+    e.$emit("blur", t) && e.checkHtml5Validity();
+  }, focus: function(t) {
+    return e.$emit("focus", t);
+  }, change: function(t) {
+    var a = Array.prototype.filter.call(t.target.options, function(s) {
+      return s.selected;
+    }).map(function(s) {
+      var n = "_value" in s ? s._value : s.value;
+      return n;
+    });
+    e.computedValue = t.target.multiple ? a : a[0];
+  } } }, "select", e.$attrs, !1), [e.placeholder && e.computedValue == null ? i("option", { attrs: { disabled: "", hidden: "" }, domProps: { value: null } }, [e._v(" " + e._s(e.placeholder) + " ")]) : e._e(), e._t("default")], 2)])]);
+}, o = [], p = /* @__PURE__ */ r(
+  u,
+  d,
+  o,
+  !1,
+  null,
+  "5cf2c0d1"
+);
+const h = p.exports;
+export {
+  h as C
+};

package/dist/CSkeleton-BNbft-NE.js

@@ -0,0 +1,55 @@
+import { u as m, w as y, x as u, y as h, n as C } from "./main-U22_wtg0.js";
+const k = /* @__PURE__ */ m({
+  __name: "CSkeleton",
+  props: {
+    active: { type: Boolean, default: !0 },
+    animated: { type: Boolean, default: !1 },
+    width: { default: "" },
+    height: { default: "" },
+    circle: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 },
+    count: { default: 1 },
+    hidden: { type: Boolean, default: !1 },
+    color: { default: "" }
+  },
+  setup(i) {
+    const t = i, {
+      active: s,
+      animated: e,
+      width: a,
+      height: l,
+      circle: c,
+      rounded: d,
+      count: r,
+      hidden: f,
+      color: n
+    } = y(t), v = u(() => ({
+      height: l.value === void 0 ? null : isNaN(Number(l.value)) ? l.value : `${l.value}px`,
+      width: a.value === void 0 ? null : isNaN(Number(a.value)) ? a.value : `${a.value}px`,
+      borderRadius: c.value ? "50%" : null,
+      background: n.value ? n.value : null
+    })), o = h(), _ = u(() => o.style), p = u(() => o.class);
+    return { __sfc: !0, props: t, active: s, animated: e, width: a, height: l, circle: c, rounded: d, count: r, hidden: f, color: n, itemStyle: v, attrs: o, staticStyle: _, staticClass: p };
+  }
+});
+var x = function() {
+  var t = this, s = t._self._c, e = t._self._setupProxy;
+  return e.active ? s("div", { class: [
+    "c-skeleton",
+    { "is-animated": e.animated, "is-invisible": e.hidden },
+    e.staticClass
+  ], style: e.staticStyle }, t._l(e.count, function(a) {
+    return s("div", { key: a, staticClass: "c-skeleton-item", class: { "is-rounded": e.rounded }, style: e.itemStyle });
+  }), 0) : t._e();
+}, N = [], S = /* @__PURE__ */ C(
+  k,
+  x,
+  N,
+  !1,
+  null,
+  null
+);
+const B = S.exports;
+export {
+  B as C
+};

package/dist/ClientAutocomplete-BnredOme.js

@@ -0,0 +1,438 @@
+import { S as c } from "./SearchApi-Bw5E9IPj.js";
+import { n as l, j as a, F as d, ab as h } from "./main-U22_wtg0.js";
+import { c as u, r as p, g as f } from "./CDropdownItem-DiLisSei.js";
+const m = {
+  name: "CAutocomplete",
+  components: {
+    CInput: a
+  },
+  mixins: [d],
+  inheritAttrs: !1,
+  props: {
+    value: {
+      type: [Number, String],
+      default: null
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    field: {
+      type: String,
+      default: "value"
+    },
+    keepFirst: Boolean,
+    clearOnSelect: Boolean,
+    openOnFocus: Boolean,
+    customFormatter: {
+      type: Function,
+      default: () => {
+      }
+    },
+    checkInfiniteScroll: Boolean,
+    keepOpen: Boolean,
+    clearable: Boolean,
+    maxHeight: {
+      type: [String, Number],
+      default: null
+    },
+    dropdownPosition: {
+      type: String,
+      default: "auto"
+    },
+    iconRight: {
+      type: String,
+      default: null
+    },
+    iconRightClickable: Boolean,
+    appendToBody: Boolean
+  },
+  data() {
+    return {
+      selected: null,
+      hovered: null,
+      isActive: !1,
+      newValue: this.value,
+      newAutocomplete: this.autocomplete || "off",
+      isListInViewportVertically: !0,
+      hasFocus: !1,
+      style: {},
+      _isAutocomplete: !0,
+      _elementRef: "input",
+      _bodyEl: void 0
+      // Used to append to body
+    };
+  },
+  computed: {
+    /**
+     * White-listed items to not close when clicked.
+     * Add input, dropdown and all children.
+     */
+    whiteList() {
+      const t = [];
+      if (t.push(this.$refs.input.$el.querySelector("input")), t.push(this.$refs.dropdown), this.$refs.dropdown !== void 0) {
+        const e = this.$refs.dropdown.querySelectorAll("*");
+        for (const s of e)
+          t.push(s);
+      }
+      if (this.$parent.$data._isTaginput) {
+        t.push(this.$parent.$el);
+        const e = this.$parent.$el.querySelectorAll("*");
+        for (const s of e)
+          t.push(s);
+      }
+      return t;
+    },
+    /**
+     * Check if exists default slot
+     */
+    hasDefaultSlot() {
+      return !!this.$scopedSlots.default;
+    },
+    /**
+     * Check if exists "empty" slot
+     */
+    hasEmptySlot() {
+      return !!this.$slots.empty;
+    },
+    /**
+     * Check if exists "header" slot
+     */
+    hasHeaderSlot() {
+      return !!this.$slots.header;
+    },
+    /**
+     * Check if exists "footer" slot
+     */
+    hasFooterSlot() {
+      return !!this.$slots.footer;
+    },
+    /**
+     * Apply dropdownPosition property
+     */
+    isOpenedTop() {
+      return this.dropdownPosition === "top" || this.dropdownPosition === "auto" && !this.isListInViewportVertically;
+    },
+    newIconRight() {
+      return this.clearable && this.newValue ? "close-circle" : this.iconRight;
+    },
+    newIconRightClickable() {
+      return this.clearable ? !0 : this.iconRightClickable;
+    },
+    contentStyle() {
+      return {
+        maxHeight: this.maxHeight === void 0 ? null : isNaN(this.maxHeight) ? this.maxHeight : `${this.maxHeight}px`
+      };
+    },
+    isDropdownOpen() {
+      return this.isActive && (this.data.length > 0 || this.hasEmptySlot || this.hasHeaderSlot);
+    }
+  },
+  watch: {
+    /**
+     * When dropdown is toggled, check the visibility to know when
+     * to open upwards.
+     */
+    isActive(t) {
+      this.dropdownPosition === "auto" && (t ? this.calcDropdownInViewportVertical() : setTimeout(() => {
+        this.calcDropdownInViewportVertical();
+      }, 100)), t && this.$nextTick(() => this.setHovered(null));
+    },
+    /**
+     * When updating input's value
+     *   1. Emit changes
+     *   2. If value isn't the same as selected, set null
+     *   3. Close dropdown if value is clear or else open it
+     */
+    newValue(t) {
+      this.$emit("input", t);
+      const e = this.getValue(this.selected);
+      e && e !== t && this.setSelected(null, !1), this.hasFocus && (!this.openOnFocus || t) && (this.isActive = !!t);
+    },
+    /**
+     * When v-model is changed:
+     *   1. Update internal value.
+     *   2. If it's invalid, validate again.
+     */
+    value(t) {
+      this.newValue = t;
+    },
+    /**
+     * Select first option if "keep-first
+     */
+    data(t) {
+      this.keepFirst && this.selectFirstOption(t);
+    }
+  },
+  created() {
+    typeof window < "u" && (document.addEventListener("click", this.clickedOutside), this.dropdownPosition === "auto" && window.addEventListener("resize", this.calcDropdownInViewportVertical));
+  },
+  mounted() {
+    if (this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content")) {
+      const t = this.$refs.dropdown.querySelector(".dropdown-content");
+      t.addEventListener(
+        "scroll",
+        () => this.checkIfReachedTheEndOfScroll(t)
+      );
+    }
+    this.appendToBody && (this.$data._bodyEl = u(this.$refs.dropdown), this.updateAppendToBody());
+  },
+  beforeDestroy() {
+    typeof window < "u" && (document.removeEventListener("click", this.clickedOutside), this.dropdownPosition === "auto" && window.removeEventListener(
+      "resize",
+      this.calcDropdownInViewportVertical
+    )), this.checkInfiniteScroll && this.$refs.dropdown && this.$refs.dropdown.querySelector(".dropdown-content") && this.$refs.dropdown.querySelector(".dropdown-content").removeEventListener("scroll", this.checkIfReachedTheEndOfScroll), this.appendToBody && p(this.$data._bodyEl);
+  },
+  methods: {
+    /**
+     * Set which option is currently hovered.
+     */
+    setHovered(t) {
+      t !== void 0 && (this.hovered = t);
+    },
+    /**
+     * Set which option is currently selected, update v-model,
+     * update input value and close dropdown.
+     */
+    setSelected(t, e = !0) {
+      t !== void 0 && (this.selected = t, this.$emit("select", this.selected), this.selected !== null && (this.newValue = this.clearOnSelect ? "" : this.getValue(this.selected), this.setHovered(this.clearOnSelect ? null : this.hovered)), e && this.$nextTick(() => {
+        this.isActive = !1;
+      }), this.checkValidity());
+    },
+    /**
+     * Select first option
+     */
+    selectFirstOption(t) {
+      this.$nextTick(() => {
+        t.length ? (this.openOnFocus || this.newValue !== "" && this.hovered !== t[0]) && this.setHovered(t[0]) : this.setHovered(null);
+      });
+    },
+    /**
+     * Enter key listener.
+     * Select the hovered option.
+     */
+    enterPressed(t) {
+      this.isDropdownOpen && (t.preventDefault(), this.hovered !== null && this.setSelected(this.hovered, !this.keepOpen));
+    },
+    /**
+     * Tab key listener.
+     * Select hovered option if it exists, close dropdown, then allow
+     * native handling to move to next tabbable element.
+     */
+    tabPressed() {
+      if (this.hovered === null) {
+        this.isActive = !1;
+        return;
+      }
+      this.setSelected(this.hovered, !this.keepOpen);
+    },
+    /**
+     * Close dropdown if clicked outside.
+     */
+    clickedOutside(t) {
+      var s;
+      const e = ((s = t.path) == null ? void 0 : s[0]) || t.target;
+      this.whiteList.indexOf(e) < 0 && (this.isActive = !1);
+    },
+    /**
+     * Return display text for the input.
+     * If object, get value from path, or else just the value.
+     */
+    getValue(t) {
+      if (t !== null)
+        return typeof this.customFormatter < "u" ? this.customFormatter(t) : typeof t == "object" ? f(t, this.field) : t;
+    },
+    /**
+     * Check if the scroll list inside the dropdown
+     * reached it's end.
+     */
+    checkIfReachedTheEndOfScroll(t) {
+      t.clientHeight !== t.scrollHeight && t.scrollTop + t.clientHeight >= t.scrollHeight && this.$emit("infinite-scroll");
+    },
+    /**
+     * Calculate if the dropdown is vertically visible when activated,
+     * otherwise it is openened upwards.
+     */
+    calcDropdownInViewportVertical() {
+      this.$nextTick(() => {
+        if (this.$refs.dropdown === void 0)
+          return;
+        const t = this.$refs.dropdown.getBoundingClientRect();
+        this.isListInViewportVertically = t.top >= 0 && t.bottom <= (window.innerHeight || document.documentElement.clientHeight), this.appendToBody && this.updateAppendToBody();
+      });
+    },
+    /**
+     * Arrows keys listener.
+     * If dropdown is active, set hovered option, or else just open.
+     */
+    keyArrows(t) {
+      const e = t === "down" ? 1 : -1;
+      if (this.isActive) {
+        let s = this.data.indexOf(this.hovered) + e;
+        s = s > this.data.length - 1 ? this.data.length : s, s = s < 0 ? 0 : s, this.setHovered(this.data[s]);
+        const i = this.$refs.dropdown.querySelector(".dropdown-content"), o = i.querySelectorAll(
+          "a.dropdown-item:not(.is-disabled)"
+        )[s];
+        if (!o)
+          return;
+        const n = i.scrollTop, r = i.scrollTop + i.clientHeight - o.clientHeight;
+        o.offsetTop < n ? i.scrollTop = o.offsetTop : o.offsetTop >= r && (i.scrollTop = o.offsetTop - i.clientHeight + o.clientHeight);
+      } else
+        this.isActive = !0;
+    },
+    /**
+     * Focus listener.
+     * If value is the same as selected, select all text.
+     */
+    focused(t) {
+      this.getValue(this.selected) === this.newValue && this.$el.querySelector("input").select(), this.openOnFocus && (this.isActive = !0, this.keepFirst && this.selectFirstOption(this.data)), this.hasFocus = !0, this.$emit("focus", t);
+    },
+    /**
+     * Blur listener.
+     */
+    onBlur(t) {
+      this.hasFocus = !1, this.$emit("blur", t);
+    },
+    onInput() {
+      const t = this.getValue(this.selected);
+      t && t === this.newValue || (this.$emit("typing", this.newValue), this.checkValidity());
+    },
+    rightIconClick(t) {
+      this.clearable ? this.newValue = "" : this.$emit("icon-right-click", t);
+    },
+    checkValidity() {
+      this.useHtml5Validation && this.$nextTick(() => {
+        this.checkHtml5Validity();
+      });
+    },
+    updateAppendToBody() {
+      const t = this.$refs.dropdown, e = this.$refs.input.$el;
+      if (t && e) {
+        const s = this.$data._bodyEl;
+        s.classList.forEach((r) => s.classList.remove(r)), s.classList.add("autocomplete"), s.classList.add("control"), this.expandend && s.classList.add("is-expandend");
+        const i = e.getBoundingClientRect();
+        let o = i.top + window.scrollY;
+        const n = i.left + window.scrollX;
+        this.isOpenedTop ? o -= t.clientHeight : o += e.clientHeight, this.style = {
+          position: "absolute",
+          top: `${o}px`,
+          left: `${n}px`,
+          width: `${e.clientWidth}px`,
+          maxWidth: `${e.clientWidth}px`,
+          zIndex: "99"
+        };
+      }
+    }
+  }
+};
+var w = function() {
+  var e = this, s = e._self._c;
+  return s("div", { staticClass: "autocomplete control", class: { "is-expanded": e.expanded } }, [s("CInput", e._b({ ref: "input", attrs: { size: e.size, loading: e.loading, rounded: e.rounded, icon: e.icon, "icon-right": e.newIconRight, "icon-right-clickable": e.newIconRightClickable, "icon-pack": e.iconPack, maxlength: e.maxlength, autocomplete: e.newAutocomplete, "use-html5-validation": !1, type: "text" }, on: { input: e.onInput, focus: e.focused, blur: e.onBlur, "icon-right-click": e.rightIconClick, "icon-click": (i) => e.$emit("icon-click", i) }, nativeOn: { keyup: function(i) {
+    if (!i.type.indexOf("key") && e._k(i.keyCode, "esc", 27, i.key, ["Esc", "Escape"]))
+      return null;
+    i.preventDefault(), e.isActive = !1;
+  }, keydown: [function(i) {
+    return !i.type.indexOf("key") && e._k(i.keyCode, "tab", 9, i.key, "Tab") ? null : e.tabPressed.apply(null, arguments);
+  }, function(i) {
+    return !i.type.indexOf("key") && e._k(i.keyCode, "enter", 13, i.key, "Enter") ? null : e.enterPressed.apply(null, arguments);
+  }, function(i) {
+    return !i.type.indexOf("key") && e._k(i.keyCode, "up", 38, i.key, ["Up", "ArrowUp"]) ? null : (i.preventDefault(), e.keyArrows("up"));
+  }, function(i) {
+    return !i.type.indexOf("key") && e._k(i.keyCode, "down", 40, i.key, ["Down", "ArrowDown"]) ? null : (i.preventDefault(), e.keyArrows("down"));
+  }] }, model: { value: e.newValue, callback: function(i) {
+    e.newValue = i;
+  }, expression: "newValue" } }, "CInput", e.$attrs, !1)), s("transition", { attrs: { name: "fade" } }, [s("div", { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], ref: "dropdown", staticClass: "dropdown-menu", class: { "is-opened-top": e.isOpenedTop && !e.appendToBody }, style: e.style }, [s("div", { directives: [{ name: "show", rawName: "v-show", value: e.isActive, expression: "isActive" }], staticClass: "dropdown-content", style: e.contentStyle }, [e.hasHeaderSlot ? s("div", { staticClass: "dropdown-item" }, [e._t("header")], 2) : e._e(), e._l(e.data, function(i, o) {
+    return s("a", { key: o, staticClass: "dropdown-item", class: { "is-hovered": i === e.hovered }, on: { click: function(n) {
+      return e.setSelected(i, void 0, n);
+    } } }, [e.hasDefaultSlot ? e._t("default", null, { option: i, index: o }) : s("span", [e._v(" " + e._s(e.getValue(i, !0)) + " ")])], 2);
+  }), e.data.length === 0 && e.hasEmptySlot ? s("div", { staticClass: "dropdown-item is-disabled" }, [e._t("empty")], 2) : e._e(), e.hasFooterSlot ? s("div", { staticClass: "dropdown-item" }, [e._t("footer")], 2) : e._e()], 2)])])], 1);
+}, y = [], g = /* @__PURE__ */ l(
+  m,
+  w,
+  y,
+  !1,
+  null,
+  null
+);
+const k = g.exports, v = {
+  i18nOptions: {
+    namespaces: "components",
+    keyPrefix: "account.documentForm.clients"
+  },
+  name: "ClientAutocomplete",
+  components: {
+    SearchApi: c,
+    CAutocomplete: k
+  },
+  props: {
+    searchEnabled: {
+      type: Boolean,
+      default: !0
+    },
+    showLoading: {
+      type: Boolean,
+      default: !1
+    },
+    showEmpty: {
+      type: Boolean,
+      default: !1
+    },
+    filled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      convertToNewClient: h,
+      results: [],
+      // results when searching for existing endCustomer
+      searchQuery: ""
+      // query used to search for endCustomers
+    };
+  },
+  methods: {
+    search(t, e) {
+      this.$emit("input", e), this.searchEnabled && (this.searchQuery = e, t({
+        q: e,
+        cb: ({ endCustomer: s }) => {
+          this.results = s;
+        }
+      }));
+    }
+  }
+};
+var _ = function() {
+  var e = this, s = e._self._c;
+  return s("SearchApi", { attrs: { "custom-search": { endCustomer: !0 } }, scopedSlots: e._u([{ key: "default", fn: function({ fetch: i, isLoading: o }) {
+    return [s("CAutocomplete", e._b({ attrs: { data: e.results, loading: e.showLoading && o, filled: e.filled, expanded: "", "keep-first": "" }, on: { typing: function(n) {
+      return e.search(i, n);
+    }, select: function(n) {
+      e.$emit("setClient", e.convertToNewClient(n));
+    } }, scopedSlots: e._u([{ key: "default", fn: function({ option: n }) {
+      return [s("div", { staticStyle: { "line-height": "1.5" } }, [s("div", { staticStyle: { "font-weight": "500" } }, [e._v(e._s(n.name || n.email))]), s("div", { staticClass: "text-gray-600", staticStyle: { "font-size": "14px" } }, [e._v(" " + e._s(n.reference ? `${n.reference} · ` : "") + " " + e._s(n.workStreet || n.street || " ") + " ")])])];
+    } }, { key: "footer", fn: function() {
+      return [e.searchEnabled && e.showEmpty ? s("div", [e.searchQuery && !e.results.length ? s("CButton", { staticStyle: { "font-weight": "600" }, attrs: { type: "secondary", pattern: "tertiary", size: "small" }, on: { click: function(n) {
+        return e.$emit("add");
+      } } }, [e._v(" " + e._s(e.$t("_common:add")) + " ")]) : e._e()], 1) : e._e()];
+    }, proxy: !0 }, { key: "empty", fn: function() {
+      return [e.searchEnabled && e.showEmpty ? s("div", [e._v(" " + e._s(e.$t("search.empty")) + " " + e._s(e.searchQuery) + " ")]) : e._e()];
+    }, proxy: !0 }], null, !0) }, "CAutocomplete", {
+      placeholder: e.$t("search.placeholder"),
+      ...e.$attrs,
+      ...e.$props
+    }, !1))];
+  } }]) });
+}, S = [], $ = /* @__PURE__ */ l(
+  v,
+  _,
+  S,
+  !1,
+  null,
+  "94f7a2c5"
+);
+const A = $.exports;
+export {
+  A as C,
+  k as a
+};