@cling-se/widget 0.17.3 → 0.18.0

package/dist/ClientAutocomplete-CZ55-DKe.js

@@ -1,438 +0,0 @@
-import { S as c } from "./SearchApi-G2Hvp0Dd.js";
-import { n as l, j as a, F as d, ab as h } from "./main-BL_yzf2r.js";
-import { c as u, r as p, g as f } from "./CDropdownItem-CN7gSfgY.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,
-  "b24e2ce6"
-);
-const b = $.exports;
-export {
-  b as C,
-  k as a
-};