@vergelijkdirect/comparison-forms 1.3.16 → 1.3.17-ver-8380.1

package/dist-rollup/Loader-_esX79Uz.js

@@ -0,0 +1,1105 @@
+var y = (i, e, s) => new Promise((t, l) => {
+  var r = (h) => {
+    try {
+      c(s.next(h));
+    } catch (d) {
+      l(d);
+    }
+  }, u = (h) => {
+    try {
+      c(s.throw(h));
+    } catch (d) {
+      l(d);
+    }
+  }, c = (h) => h.done ? t(h.value) : Promise.resolve(h.value).then(r, u);
+  c((s = s.apply(i, e)).next());
+});
+import { defineComponent as C, reactive as z, ref as f, computed as I, watch as U, onMounted as J } from "vue";
+import { n as O, i as g, j as V } from "./index-WjnHra7k.js";
+import { E as Q } from "./ErrorHandler-9Zxi6g3R.js";
+function w(i) {
+  return i === 0 ? !1 : Array.isArray(i) && i.length === 0 ? !0 : !i;
+}
+function Z(i) {
+  return (...e) => !i(...e);
+}
+function q(i, e) {
+  return i === void 0 && (i = "undefined"), i === null && (i = "null"), i === !1 && (i = "false"), i.toString().toLowerCase().indexOf(e.trim()) !== -1;
+}
+function B(i, e, s, t) {
+  return i.filter((l) => q(t(l, s), e));
+}
+function W(i) {
+  return i.filter((e) => !e.$isLabel);
+}
+function k(i, e) {
+  return (s) => s.reduce((t, l) => l[i] && l[i].length ? (t.push({
+    $groupLabel: l[e],
+    $isLabel: !0
+  }), t.concat(l[i])) : t, []);
+}
+function X(i, e, s, t, l) {
+  return (r) => r.map((u) => {
+    if (!u[s])
+      return console.warn("Options passed to vue-multiselect do not contain groups, despite the config."), [];
+    const c = B(u[s], i, e, l);
+    return c.length ? {
+      [t]: u[t],
+      [s]: c
+    } : [];
+  });
+}
+const D = (...i) => (e) => i.reduce((s, t) => t(s), e), Y = {
+  data() {
+    return {
+      search: "",
+      isOpen: !1,
+      preferredOpenDirection: "below",
+      optimizedHeight: this.maxHeight
+    };
+  },
+  props: {
+    /**
+     * Decide whether to filter the results based on search query.
+     * Useful for async filtering, where we search through more complex data.
+     * @type {Boolean}
+     */
+    internalSearch: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Array of available options: Objects, Strings or Integers.
+     * If array of objects, visible label will default to option.label.
+     * If `labal` prop is passed, label will equal option['label']
+     * @type {Array}
+     */
+    options: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Equivalent to the `multiple` attribute on a `<select>` input.
+     * @default false
+     * @type {Boolean}
+     */
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Presets the selected options value.
+     * @type {Object||Array||String||Integer}
+     */
+    value: {
+      type: null,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * Key to compare objects
+     * @default 'id'
+     * @type {String}
+     */
+    trackBy: {
+      type: String
+    },
+    /**
+     * Label to look for in option Object
+     * @default 'label'
+     * @type {String}
+     */
+    label: {
+      type: String
+    },
+    /**
+     * Enable/disable search in options
+     * @default true
+     * @type {Boolean}
+     */
+    searchable: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Clear the search input after `)
+     * @default true
+     * @type {Boolean}
+     */
+    clearOnSelect: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Hide already selected options
+     * @default false
+     * @type {Boolean}
+     */
+    hideSelected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Equivalent to the `placeholder` attribute on a `<select>` input.
+     * @default 'Select option'
+     * @type {String}
+     */
+    placeholder: {
+      type: String,
+      default: "Select option"
+    },
+    /**
+     * Allow to remove all selected values
+     * @default true
+     * @type {Boolean}
+     */
+    allowEmpty: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Reset this.internalValue, this.search after this.internalValue changes.
+     * Useful if want to create a stateless dropdown.
+     * @default false
+     * @type {Boolean}
+     */
+    resetAfter: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Enable/disable closing after selecting an option
+     * @default true
+     * @type {Boolean}
+     */
+    closeOnSelect: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Function to interpolate the custom label
+     * @default false
+     * @type {Function}
+     */
+    customLabel: {
+      type: Function,
+      default(i, e) {
+        return w(i) ? "" : e ? i[e] : i;
+      }
+    },
+    /**
+     * Disable / Enable tagging
+     * @default false
+     * @type {Boolean}
+     */
+    taggable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * String to show when highlighting a potential tag
+     * @default 'Press enter to create a tag'
+     * @type {String}
+    */
+    tagPlaceholder: {
+      type: String,
+      default: "Press enter to create a tag"
+    },
+    /**
+     * By default new tags will appear above the search results.
+     * Changing to 'bottom' will revert this behaviour
+     * and will proritize the search results
+     * @default 'top'
+     * @type {String}
+    */
+    tagPosition: {
+      type: String,
+      default: "top"
+    },
+    /**
+     * Number of allowed selected options. No limit if 0.
+     * @default 0
+     * @type {Number}
+    */
+    max: {
+      type: [Number, Boolean],
+      default: !1
+    },
+    /**
+     * Will be passed with all events as second param.
+     * Useful for identifying events origin.
+     * @default null
+     * @type {String|Integer}
+    */
+    id: {
+      default: null
+    },
+    /**
+     * Limits the options displayed in the dropdown
+     * to the first X options.
+     * @default 1000
+     * @type {Integer}
+    */
+    optionsLimit: {
+      type: Number,
+      default: 1e3
+    },
+    /**
+     * Name of the property containing
+     * the group values
+     * @default 1000
+     * @type {String}
+    */
+    groupValues: {
+      type: String
+    },
+    /**
+     * Name of the property containing
+     * the group label
+     * @default 1000
+     * @type {String}
+    */
+    groupLabel: {
+      type: String
+    },
+    /**
+     * Allow to select all group values
+     * by selecting the group label
+     * @default false
+     * @type {Boolean}
+     */
+    groupSelect: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Array of keyboard keys to block
+     * when selecting
+     * @default 1000
+     * @type {String}
+    */
+    blockKeys: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * Prevent from wiping up the search value
+     * @default false
+     * @type {Boolean}
+    */
+    preserveSearch: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Select 1st options if value is empty
+     * @default false
+     * @type {Boolean}
+    */
+    preselectFirst: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Prevent autofocus
+     * @default false
+     * @type {Boolean}
+    */
+    preventAutofocus: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  mounted() {
+    !this.multiple && this.max && console.warn("[Vue-Multiselect warn]: Max prop should not be used when prop Multiple equals false."), this.preselectFirst && !this.internalValue.length && this.options.length && this.select(this.filteredOptions[0]);
+  },
+  computed: {
+    internalValue() {
+      return this.value || this.value === 0 ? Array.isArray(this.value) ? this.value : [this.value] : [];
+    },
+    filteredOptions() {
+      const i = this.search || "", e = i.toLowerCase().trim();
+      let s = this.options.concat();
+      return this.internalSearch ? s = this.groupValues ? this.filterAndFlat(s, e, this.label) : B(s, e, this.label, this.customLabel) : s = this.groupValues ? k(this.groupValues, this.groupLabel)(s) : s, s = this.hideSelected ? s.filter(Z(this.isSelected)) : s, this.taggable && e.length && !this.isExistingOption(e) && (this.tagPosition === "bottom" ? s.push({ isTag: !0, label: i }) : s.unshift({ isTag: !0, label: i })), s.slice(0, this.optionsLimit);
+    },
+    valueKeys() {
+      return this.trackBy ? this.internalValue.map((i) => i[this.trackBy]) : this.internalValue;
+    },
+    optionKeys() {
+      return (this.groupValues ? this.flatAndStrip(this.options) : this.options).map((e) => this.customLabel(e, this.label).toString().toLowerCase());
+    },
+    currentOptionLabel() {
+      return this.multiple ? this.searchable ? "" : this.placeholder : this.internalValue.length ? this.getOptionLabel(this.internalValue[0]) : this.searchable ? "" : this.placeholder;
+    }
+  },
+  watch: {
+    internalValue() {
+      this.resetAfter && this.internalValue.length && (this.search = "", this.$emit("input", this.multiple ? [] : null));
+    },
+    search() {
+      this.$emit("search-change", this.search, this.id);
+    }
+  },
+  methods: {
+    /**
+     * Returns the internalValue in a way it can be emited to the parent
+     * @returns {Object||Array||String||Integer}
+     */
+    getValue() {
+      return this.multiple ? this.internalValue : this.internalValue.length === 0 ? null : this.internalValue[0];
+    },
+    /**
+     * Filters and then flattens the options list
+     * @param  {Array}
+     * @returns {Array} returns a filtered and flat options list
+     */
+    filterAndFlat(i, e, s) {
+      return D(
+        X(e, s, this.groupValues, this.groupLabel, this.customLabel),
+        k(this.groupValues, this.groupLabel)
+      )(i);
+    },
+    /**
+     * Flattens and then strips the group labels from the options list
+     * @param  {Array}
+     * @returns {Array} returns a flat options list without group labels
+     */
+    flatAndStrip(i) {
+      return D(
+        k(this.groupValues, this.groupLabel),
+        W
+      )(i);
+    },
+    /**
+     * Updates the search value
+     * @param  {String}
+     */
+    updateSearch(i) {
+      this.search = i;
+    },
+    /**
+     * Finds out if the given query is already present
+     * in the available options
+     * @param  {String}
+     * @returns {Boolean} returns true if element is available
+     */
+    isExistingOption(i) {
+      return this.options ? this.optionKeys.indexOf(i) > -1 : !1;
+    },
+    /**
+     * Finds out if the given element is already present
+     * in the result value
+     * @param  {Object||String||Integer} option passed element to check
+     * @returns {Boolean} returns true if element is selected
+     */
+    isSelected(i) {
+      const e = this.trackBy ? i[this.trackBy] : i;
+      return this.valueKeys.indexOf(e) > -1;
+    },
+    /**
+     * Finds out if the given option is disabled
+     * @param  {Object||String||Integer} option passed element to check
+     * @returns {Boolean} returns true if element is disabled
+     */
+    isOptionDisabled(i) {
+      return !!i.$isDisabled;
+    },
+    /**
+     * Returns empty string when options is null/undefined
+     * Returns tag query if option is tag.
+     * Returns the customLabel() results and casts it to string.
+     *
+     * @param  {Object||String||Integer} Passed option
+     * @returns {Object||String}
+     */
+    getOptionLabel(i) {
+      if (w(i))
+        return "";
+      if (i.isTag)
+        return i.label;
+      if (i.$isLabel)
+        return i.$groupLabel;
+      let e = this.customLabel(i, this.label);
+      return w(e) ? "" : e;
+    },
+    /**
+     * Add the given option to the list of selected options
+     * or sets the option as the selected option.
+     * If option is already selected -> remove it from the results.
+     *
+     * @param  {Object||String||Integer} option to select/deselect
+     * @param  {Boolean} block removing
+     */
+    select(i, e) {
+      if (i.$isLabel && this.groupSelect) {
+        this.selectGroup(i);
+        return;
+      }
+      if (!(this.blockKeys.indexOf(e) !== -1 || this.disabled || i.$isDisabled || i.$isLabel) && !(this.max && this.multiple && this.internalValue.length === this.max) && !(e === "Tab" && !this.pointerDirty)) {
+        if (i.isTag)
+          this.$emit("tag", i.label, this.id), this.search = "", this.closeOnSelect && !this.multiple && this.deactivate();
+        else {
+          if (this.isSelected(i)) {
+            e !== "Tab" && this.removeElement(i);
+            return;
+          }
+          this.multiple ? this.$emit("input", this.internalValue.concat([i]), this.id) : this.$emit("input", i, this.id), this.$emit("select", i, this.id), this.clearOnSelect && (this.search = "");
+        }
+        this.closeOnSelect && this.deactivate();
+      }
+    },
+    /**
+     * Add the given group options to the list of selected options
+     * If all group optiona are already selected -> remove it from the results.
+     *
+     * @param  {Object||String||Integer} group to select/deselect
+     */
+    selectGroup(i) {
+      const e = this.options.find((s) => s[this.groupLabel] === i.$groupLabel);
+      if (e) {
+        if (this.wholeGroupSelected(e)) {
+          this.$emit("remove", e[this.groupValues], this.id);
+          const s = this.trackBy ? e[this.groupValues].map((l) => l[this.trackBy]) : e[this.groupValues], t = this.internalValue.filter(
+            (l) => s.indexOf(this.trackBy ? l[this.trackBy] : l) === -1
+          );
+          this.$emit("input", t, this.id);
+        } else {
+          let s = e[this.groupValues].filter(
+            (t) => !(this.isOptionDisabled(t) || this.isSelected(t))
+          );
+          this.max && s.splice(this.max - this.internalValue.length), this.$emit("select", s, this.id), this.$emit(
+            "input",
+            this.internalValue.concat(s),
+            this.id
+          );
+        }
+        this.closeOnSelect && this.deactivate();
+      }
+    },
+    /**
+     * Helper to identify if all values in a group are selected
+     *
+     * @param {Object} group to validated selected values against
+     */
+    wholeGroupSelected(i) {
+      return i[this.groupValues].every(
+        (e) => this.isSelected(e) || this.isOptionDisabled(e)
+      );
+    },
+    /**
+     * Helper to identify if all values in a group are disabled
+     *
+     * @param {Object} group to check for disabled values
+     */
+    wholeGroupDisabled(i) {
+      return i[this.groupValues].every(this.isOptionDisabled);
+    },
+    /**
+     * Removes the given option from the selected options.
+     * Additionally checks this.allowEmpty prop if option can be removed when
+     * it is the last selected option.
+     *
+     * @param  {type} option description
+     * @returns {type}        description
+     */
+    removeElement(i, e = !0) {
+      if (this.disabled || i.$isDisabled)
+        return;
+      if (!this.allowEmpty && this.internalValue.length <= 1) {
+        this.deactivate();
+        return;
+      }
+      const s = typeof i == "object" ? this.valueKeys.indexOf(i[this.trackBy]) : this.valueKeys.indexOf(i);
+      if (this.multiple) {
+        const t = this.internalValue.slice(0, s).concat(this.internalValue.slice(s + 1));
+        this.$emit("input", t, this.id);
+      } else
+        this.$emit("input", null, this.id);
+      this.$emit("remove", i, this.id), this.closeOnSelect && e && this.deactivate();
+    },
+    /**
+     * Calls this.removeElement() with the last element
+     * from this.internalValue (selected element Array)
+     *
+     * @fires this#removeElement
+     */
+    removeLastElement() {
+      this.blockKeys.indexOf("Delete") === -1 && this.search.length === 0 && Array.isArray(this.internalValue) && this.internalValue.length && this.removeElement(this.internalValue[this.internalValue.length - 1], !1);
+    },
+    /**
+     * Opens the multiselect’s dropdown.
+     * Sets this.isOpen to TRUE
+     */
+    activate() {
+      this.isOpen || this.disabled || (this.adjustPosition(), this.groupValues && this.pointer === 0 && this.filteredOptions.length && (this.pointer = 1), this.isOpen = !0, this.searchable ? (this.preserveSearch || (this.search = ""), this.preventAutofocus || this.$nextTick(() => this.$refs.search && this.$refs.search.focus())) : this.preventAutofocus || typeof this.$el != "undefined" && this.$el.focus(), this.$emit("open", this.id));
+    },
+    /**
+     * Closes the multiselect’s dropdown.
+     * Sets this.isOpen to FALSE
+     */
+    deactivate() {
+      this.isOpen && (this.isOpen = !1, this.searchable ? this.$refs.search !== null && typeof this.$refs.search != "undefined" && this.$refs.search.blur() : typeof this.$el != "undefined" && this.$el.blur(), this.preserveSearch || (this.search = ""), this.$emit("close", this.getValue(), this.id));
+    },
+    /**
+     * Call this.activate() or this.deactivate()
+     * depending on this.isOpen value.
+     *
+     * @fires this#activate || this#deactivate
+     * @property {Boolean} isOpen indicates if dropdown is open
+     */
+    toggle() {
+      this.isOpen ? this.deactivate() : this.activate();
+    },
+    /**
+     * Updates the hasEnoughSpace variable used for
+     * detecting where to expand the dropdown
+     */
+    adjustPosition() {
+      if (typeof window == "undefined")
+        return;
+      const i = this.$el.getBoundingClientRect().top, e = window.innerHeight - this.$el.getBoundingClientRect().bottom;
+      e > this.maxHeight || e > i || this.openDirection === "below" || this.openDirection === "bottom" ? (this.preferredOpenDirection = "below", this.optimizedHeight = Math.min(e - 40, this.maxHeight)) : (this.preferredOpenDirection = "above", this.optimizedHeight = Math.min(i - 40, this.maxHeight));
+    }
+  }
+}, ee = {
+  data() {
+    return {
+      pointer: 0,
+      pointerDirty: !1
+    };
+  },
+  props: {
+    /**
+     * Enable/disable highlighting of the pointed value.
+     * @type {Boolean}
+     * @default true
+     */
+    showPointer: {
+      type: Boolean,
+      default: !0
+    },
+    optionHeight: {
+      type: Number,
+      default: 40
+    }
+  },
+  computed: {
+    pointerPosition() {
+      return this.pointer * this.optionHeight;
+    },
+    visibleElements() {
+      return this.optimizedHeight / this.optionHeight;
+    }
+  },
+  watch: {
+    filteredOptions() {
+      this.pointerAdjust();
+    },
+    isOpen() {
+      this.pointerDirty = !1;
+    },
+    pointer() {
+      this.$refs.search && this.$refs.search.setAttribute("aria-activedescendant", this.id + "-" + this.pointer.toString());
+    }
+  },
+  methods: {
+    optionHighlight(i, e) {
+      return {
+        "vd-multiselect__option--highlight": i === this.pointer && this.showPointer,
+        "vd-multiselect__option--selected": this.isSelected(e)
+      };
+    },
+    groupHighlight(i, e) {
+      if (!this.groupSelect)
+        return [
+          "vd-multiselect__option--disabled",
+          { "vd-multiselect__option--group": e.$isLabel }
+        ];
+      const s = this.options.find((t) => t[this.groupLabel] === e.$groupLabel);
+      return s && !this.wholeGroupDisabled(s) ? [
+        "vd-multiselect__option--group",
+        { "vd-multiselect__option--highlight": i === this.pointer && this.showPointer },
+        { "vd-multiselect__option--group-selected": this.wholeGroupSelected(s) }
+      ] : "vd-multiselect__option--disabled";
+    },
+    addPointerElement({ key: i } = "Enter") {
+      this.filteredOptions.length > 0 && this.select(this.filteredOptions[this.pointer], i), this.pointerReset();
+    },
+    pointerForward() {
+      this.pointer < this.filteredOptions.length - 1 && (this.pointer++, this.$refs.list.scrollTop <= this.pointerPosition - (this.visibleElements - 1) * this.optionHeight && (this.$refs.list.scrollTop = this.pointerPosition - (this.visibleElements - 1) * this.optionHeight), this.filteredOptions[this.pointer] && this.filteredOptions[this.pointer].$isLabel && !this.groupSelect && this.pointerForward()), this.pointerDirty = !0;
+    },
+    pointerBackward() {
+      this.pointer > 0 ? (this.pointer--, this.$refs.list.scrollTop >= this.pointerPosition && (this.$refs.list.scrollTop = this.pointerPosition), this.filteredOptions[this.pointer] && this.filteredOptions[this.pointer].$isLabel && !this.groupSelect && this.pointerBackward()) : this.filteredOptions[this.pointer] && this.filteredOptions[0].$isLabel && !this.groupSelect && this.pointerForward(), this.pointerDirty = !0;
+    },
+    pointerReset() {
+      this.closeOnSelect && (this.pointer = 0, this.$refs.list && (this.$refs.list.scrollTop = 0));
+    },
+    pointerAdjust() {
+      this.pointer >= this.filteredOptions.length - 1 && (this.pointer = this.filteredOptions.length ? this.filteredOptions.length - 1 : 0), this.filteredOptions.length > 0 && this.filteredOptions[this.pointer].$isLabel && !this.groupSelect && this.pointerForward();
+    },
+    pointerSet(i) {
+      this.pointer = i, this.pointerDirty = !0;
+    }
+  }
+}, te = {
+  name: "vue-multiselect",
+  mixins: [Y, ee],
+  props: {
+    /**
+     * name attribute to match optional label element
+     * @default ''
+     * @type {String}
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * String to show when pointing to an option
+     * @default 'Press enter to select'
+     * @type {String}
+     */
+    selectLabel: {
+      type: String,
+      default: "Press enter to select"
+    },
+    /**
+     * String to show when pointing to an option
+     * @default 'Press enter to select'
+     * @type {String}
+     */
+    selectGroupLabel: {
+      type: String,
+      default: "Press enter to select group"
+    },
+    /**
+     * String to show next to selected option
+     * @default 'Selected'
+     * @type {String}
+     */
+    selectedLabel: {
+      type: String,
+      default: "Selected"
+    },
+    /**
+     * String to show when pointing to an already selected option
+     * @default 'Press enter to remove'
+     * @type {String}
+     */
+    deselectLabel: {
+      type: String,
+      default: "Press enter to remove"
+    },
+    /**
+     * String to show when pointing to an already selected option
+     * @default 'Press enter to remove'
+     * @type {String}
+     */
+    deselectGroupLabel: {
+      type: String,
+      default: "Press enter to deselect group"
+    },
+    /**
+     * Decide whether to show pointer labels
+     * @default true
+     * @type {Boolean}
+     */
+    showLabels: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Limit the display of selected options. The rest will be hidden within the limitText string.
+     * @default 99999
+     * @type {Integer}
+     */
+    limit: {
+      type: Number,
+      default: 99999
+    },
+    /**
+     * Sets maxHeight style value of the dropdown
+     * @default 300
+     * @type {Integer}
+     */
+    maxHeight: {
+      type: Number,
+      default: 300
+    },
+    /**
+     * Function that process the message shown when selected
+     * elements pass the defined limit.
+     * @default 'and * more'
+     * @param {Int} count Number of elements more than limit
+     * @type {Function}
+     */
+    limitText: {
+      type: Function,
+      default: (i) => `and ${i} more`
+    },
+    /**
+     * Set true to trigger the loading spinner.
+     * @default False
+     * @type {Boolean}
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Disables the multiselect if true.
+     * @default false
+     * @type {Boolean}
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Fixed opening direction
+     * @default ''
+     * @type {String}
+     */
+    openDirection: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Shows slot with message about empty options
+     * @default true
+     * @type {Boolean}
+     */
+    showNoOptions: {
+      type: Boolean,
+      default: !0
+    },
+    showNoResults: {
+      type: Boolean,
+      default: !0
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    currentLabel() {
+      return this.selectedLabel ? this.selectedLabel : this.currentOptionLabel;
+    },
+    hasOptionGroup() {
+      return this.groupValues && this.groupLabel && this.groupSelect;
+    },
+    isSingleLabelVisible() {
+      return (this.singleValue || this.singleValue === 0) && (!this.isOpen || !this.searchable) && !this.visibleValues.length;
+    },
+    isPlaceholderVisible() {
+      return !this.internalValue.length && (!this.searchable || !this.isOpen) && !this.search;
+    },
+    visibleValues() {
+      return this.multiple ? this.internalValue.slice(0, this.limit) : [];
+    },
+    singleValue() {
+      return this.internalValue[0];
+    },
+    deselectLabelText() {
+      return this.showLabels ? this.deselectLabel : "";
+    },
+    deselectGroupLabelText() {
+      return this.showLabels ? this.deselectGroupLabel : "";
+    },
+    selectLabelText() {
+      return this.showLabels ? this.selectLabel : "";
+    },
+    selectGroupLabelText() {
+      return this.showLabels ? this.selectGroupLabel : "";
+    },
+    selectedLabelText() {
+      return this.showLabels ? this.selectedLabel : "";
+    },
+    inputStyle() {
+      return this.searchable || this.multiple && this.value && this.value.length ? this.search ? (this.internalValue.length && this.removeElement(this.internalValue[this.internalValue.length - 1], !1), "") : this.isOpen ? { width: "100%" } : { width: "0", position: "absolute" } : "";
+    },
+    contentStyle() {
+      return this.options.length ? { display: "inline-block" } : { display: "block" };
+    },
+    isAbove() {
+      return this.openDirection === "above" || this.openDirection === "top" ? !0 : this.openDirection === "below" || this.openDirection === "bottom" ? !1 : this.preferredOpenDirection === "above";
+    },
+    showSearchInput() {
+      return this.searchable && (this.hasSingleSelectedSlot && (this.visibleSingleValue || this.visibleSingleValue === 0) ? this.isOpen : !0);
+    }
+  }
+};
+var E = function() {
+  var e = this, s = e._self._c;
+  return s("div", { staticClass: "vd-multiselect", class: { "vd-multiselect--active": e.isOpen, "vd-multiselect--disabled": e.disabled, "vd-multiselect--above": e.isAbove, "vd-multiselect--has-options-group": e.hasOptionGroup }, attrs: { tabindex: e.searchable ? -1 : e.tabindex, role: "combobox", "aria-owns": "listbox-" + e.id }, on: { focus: function(t) {
+    return e.activate();
+  }, blur: function(t) {
+    e.searchable || e.deactivate();
+  }, keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) || t.target !== t.currentTarget ? null : (t.preventDefault(), e.pointerForward());
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "up", 38, t.key, ["Up", "ArrowUp"]) || t.target !== t.currentTarget ? null : (t.preventDefault(), e.pointerBackward());
+  }], keypress: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") && e._k(t.keyCode, "tab", 9, t.key, "Tab") || (t.stopPropagation(), t.target !== t.currentTarget) ? null : e.addPointerElement(t);
+  }, keyup: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : e.deactivate();
+  } } }, [e._t("caret", function() {
+    return [s("div", { staticClass: "vd-multiselect__select", on: { mousedown: function(t) {
+      return t.preventDefault(), t.stopPropagation(), e.toggle();
+    } } })];
+  }, { toggle: e.toggle }), e._t("clear", null, { search: e.search }), s("div", { ref: "tags", staticClass: "vd-multiselect__tags" }, [e._t("selection", function() {
+    return [s("div", { directives: [{ name: "show", rawName: "v-show", value: e.visibleValues.length > 0, expression: "visibleValues.length > 0" }], staticClass: "vd-multiselect__tags-wrap" }, [e._l(e.visibleValues, function(t, l) {
+      return [e._t("tag", function() {
+        return [s("span", { key: l, staticClass: "vd-multiselect__tag" }, [s("span", { domProps: { textContent: e._s(e.getOptionLabel(t)) } }), s("i", { staticClass: "vd-multiselect__tag-icon", attrs: { tabindex: "1" }, on: { keypress: function(r) {
+          return !r.type.indexOf("key") && e._k(r.keyCode, "enter", 13, r.key, "Enter") ? null : (r.preventDefault(), e.removeElement(t));
+        }, mousedown: function(r) {
+          return r.preventDefault(), e.removeElement(t);
+        } } })])];
+      }, { option: t, search: e.search, remove: e.removeElement })];
+    })], 2), e.internalValue && e.internalValue.length > e.limit ? [e._t("limit", function() {
+      return [s("strong", { staticClass: "vd-multiselect__strong", domProps: { textContent: e._s(e.limitText(e.internalValue.length - e.limit)) } })];
+    })] : e._e()];
+  }, { search: e.search, remove: e.removeElement, values: e.visibleValues, isOpen: e.isOpen }), s("transition", { attrs: { name: "vd-multiselect__loading" } }, [e._t("loading", function() {
+    return [s("div", { directives: [{ name: "show", rawName: "v-show", value: e.loading, expression: "loading" }], staticClass: "vd-multiselect__spinner" })];
+  })], 2), e.searchable ? s("input", { ref: "search", staticClass: "vd-multiselect__input", style: e.inputStyle, attrs: { name: e.name, id: e.id, type: "text", autocomplete: "off", spellcheck: "false", placeholder: e.placeholder, disabled: e.disabled, tabindex: e.tabindex, "aria-controls": "listbox-" + e.id }, domProps: { value: e.search }, on: { input: function(t) {
+    return e.updateSearch(t.target.value);
+  }, focus: function(t) {
+    return t.preventDefault(), e.activate();
+  }, blur: function(t) {
+    return t.preventDefault(), e.deactivate();
+  }, keyup: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : e.deactivate();
+  }, keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "down", 40, t.key, ["Down", "ArrowDown"]) ? null : (t.preventDefault(), e.pointerForward());
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "up", 38, t.key, ["Up", "ArrowUp"]) ? null : (t.preventDefault(), e.pointerBackward());
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "delete", [8, 46], t.key, ["Backspace", "Delete", "Del"]) ? null : (t.stopPropagation(), e.removeLastElement());
+  }], keypress: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") || (t.preventDefault(), t.stopPropagation(), t.target !== t.currentTarget) ? null : e.addPointerElement(t);
+  } } }) : e._e(), e.isSingleLabelVisible ? s("span", { staticClass: "vd-multiselect__single", on: { mousedown: function(t) {
+    return t.preventDefault(), e.toggle.apply(null, arguments);
+  } } }, [e._t("singleLabel", function() {
+    return [e._v(" " + e._s(e.currentLabel) + " ")];
+  }, { option: e.singleValue })], 2) : e._e(), e.isPlaceholderVisible ? s("span", { staticClass: "vd-multiselect__placeholder", on: { mousedown: function(t) {
+    return t.preventDefault(), e.toggle.apply(null, arguments);
+  } } }, [e._t("placeholder", function() {
+    return [e._v(" " + e._s(e.placeholder) + " ")];
+  })], 2) : e._e()], 2), s("transition", { attrs: { name: "multiselect" } }, [s("div", { directives: [{ name: "show", rawName: "v-show", value: e.isOpen && !e.loading, expression: "isOpen && !loading" }], staticClass: "vd-multiselect__tab-wrapper", style: {
+    borderColor: e.filteredOptions.length !== 0 || e.options.length !== 0 || e.showNoResults && e.filteredOptions.length === 0 && e.search && !e.loading || e.showNoOptions && (e.options.length === 0 || e.hasOptionGroup === !0 && e.filteredOptions.length === 0) && !e.search && !e.loading ? "" : "transparent"
+  } }, [s("div", { ref: "list", staticClass: "vd-multiselect__content-wrapper", attrs: { tabindex: "-1" }, on: { focus: e.activate, mousedown: function(t) {
+    t.preventDefault();
+  } } }, [s("ul", { staticClass: "vd-multiselect__content", style: e.contentStyle, attrs: { role: "listbox", id: "listbox-" + e.id } }, [e._t("beforeList"), e.multiple && e.max === e.internalValue.length ? s("li", [s("span", { staticClass: "vd-multiselect__option" }, [e._t("maxElements", function() {
+    return [e._v("Maximum of " + e._s(e.max) + " options selected. First remove a selected option to select another.")];
+  })], 2)]) : e._e(), !e.max || e.internalValue.length < e.max ? e._l(e.filteredOptions, function(t, l) {
+    return s("li", { key: l, staticClass: "vd-multiselect__element", attrs: { id: e.id + "-" + l, role: t && (t.$isLabel || t.$isDisabled) ? null : "option" } }, [t && (t.$isLabel || t.$isDisabled) ? e._e() : s("span", { staticClass: "vd-multiselect__option", class: e.optionHighlight(l, t), attrs: { "data-select": t && t.isTag ? e.tagPlaceholder : e.selectLabelText, "data-selected": e.selectedLabelText, "data-deselect": e.deselectLabelText }, on: { click: function(r) {
+      return r.stopPropagation(), e.select(t);
+    }, mouseenter: function(r) {
+      return r.target !== r.currentTarget ? null : e.pointerSet(l);
+    } } }, [e._t("option", function() {
+      return [s("span", [e._v(e._s(e.getOptionLabel(t)))])];
+    }, { option: t, search: e.search, index: l })], 2), t && (t.$isLabel || t.$isDisabled) ? s("span", { staticClass: "vd-multiselect__option", class: e.groupHighlight(l, t), attrs: { "data-select": e.groupSelect && e.selectGroupLabelText, "data-deselect": e.groupSelect && e.deselectGroupLabelText }, on: { mouseenter: function(r) {
+      if (r.target !== r.currentTarget)
+        return null;
+      e.groupSelect && e.pointerSet(l);
+    }, mousedown: function(r) {
+      return r.preventDefault(), e.selectGroup(t);
+    } } }, [e._t("option", function() {
+      return [s("span", [e._v(e._s(e.getOptionLabel(t)))])];
+    }, { option: t, search: e.search, index: l })], 2) : e._e()]);
+  }) : e._e(), s("li", { directives: [{ name: "show", rawName: "v-show", value: e.showNoResults && e.filteredOptions.length === 0 && e.search && !e.loading, expression: "showNoResults && (filteredOptions.length === 0 && search && !loading)" }] }, [s("span", { staticClass: "vd-multiselect__option" }, [e._t("noResult", function() {
+    return [e._v("No elements found. Consider changing the search query.")];
+  }, { search: e.search })], 2)]), s("li", { directives: [{ name: "show", rawName: "v-show", value: e.showNoOptions && (e.options.length === 0 || e.hasOptionGroup === !0 && e.filteredOptions.length === 0) && !e.search && !e.loading, expression: "showNoOptions && ((options.length === 0 || (hasOptionGroup === true && filteredOptions.length === 0)) && !search && !loading)" }] }, [s("span", { staticClass: "vd-multiselect__option" }, [e._t("noOptions", function() {
+    return [e._v("List is empty.")];
+  })], 2)]), e._t("afterList")], 2)])])])], 2);
+}, ie = [];
+E._withStripped = !0;
+var N = /* @__PURE__ */ O(
+  te,
+  E,
+  ie,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+N.options.__file = "/Users/vergelijkdirect/Documents/projects/comparison-forms/src/components/common/extended/Multiselect.vue";
+const se = N.exports, le = C({
+  name: "CompaniesListSelect",
+  components: {
+    ErrorHandler: Q,
+    Multiselect: se
+  },
+  props: {
+    hasCompaniesListValidationError: {
+      required: !1,
+      type: Boolean
+    },
+    companyData: {
+      required: !1,
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  setup(i, { attrs: e, listeners: s, emit: t }) {
+    var x;
+    let l = z({
+      kvk_number: "",
+      company_name: "",
+      legal_entity: "",
+      rsin: "",
+      branch_number: "",
+      postcode: "",
+      city: "",
+      street: "",
+      house_number: "",
+      house_number_addition: "",
+      full_address: "",
+      sbi_activities: ""
+    }), r = f((x = i.companyData) != null && x.kvkNummer ? i.companyData : null), u = f([]), c = f(!1), h = f(null), d = f(!1), b = f(!1), L = f(!1);
+    const j = I(
+      () => !d.value && !b.value && i.hasCompaniesListValidationError
+    ), H = () => {
+      Object.keys(l).map((n) => {
+        l[n] = "";
+      });
+    }, G = () => {
+      H(), t("update-company-data", l), d.value = !1;
+    }, _ = () => {
+      d.value = !0;
+    }, K = () => {
+      L.value = !1, b.value = !0;
+    }, F = () => {
+      b.value = !1;
+    };
+    U(r, (n) => y(this, null, function* () {
+      n && n.kvkNummer && (g.value = !0, yield V.dataService.getProfileInfo(n.kvkNummer).then((a) => {
+        _();
+        let o = a._embedded.hoofdvestiging.adressen.find((m) => m.type === "bezoekadres"), p = o.huisletter || o.toevoegingAdres || "";
+        p += o.huisnummerToevoeging || "", l.kvk_number = a.kvkNummer, l.company_name = a.naam, l.legal_entity = a._embedded.eigenaar.rechtsvorm, l.rsin = a._embedded.eigenaar.rsin || null, l.branch_number = a._embedded.hoofdvestiging.vestigingsnummer, l.postcode = o.postcode || null, l.city = o.plaats || null, l.street = o.straatnaam || null, l.house_number = o.huisnummer || null, l.house_number_addition = p || null, l.full_address = o.volledigAdres || null, l.sbi_activities = a.sbiActiviteiten.map((m) => ({
+          code: m.sbiCode,
+          description: m.sbiOmschrijving,
+          is_main: m.indHoofdactiviteit === "Ja"
+        })), t("update-company-data", a);
+      }).catch((a) => {
+        console.error("Error itcClient data service on getProfileInfo", a);
+      }).finally(() => {
+        g.value = !1;
+      }));
+    }));
+    const v = (n) => {
+      g.value = !0, c.value = !0, n.aantal = 30, V.dataService.searchBusinessInfoV2({ companyName: n.naam, kvkNumber: n.kvkNummer }, 1, n.aantal).then((a) => {
+        c.value = !1;
+        let o = a.resultaten;
+        o.length > 0 ? u.value = o.filter((p) => p.type === "hoofdvestiging" || p.type === "nevenvestiging").map((p) => (p.name = `${p.naam}`, p)) : u.value = [];
+      }).catch((a) => {
+        u.value = [], c.value = !1;
+      }).finally(() => {
+        g.value = !1;
+      });
+    }, M = (n) => {
+      !n.length && u.value.length && (u.value = []), n.length > 2 && (clearTimeout(h.value), h.value = setTimeout(() => {
+        n.length == 8 && /^\d+$/.test(n) ? v({ kvkNummer: n }) : S(n) ? v(S(n)) : v({ naam: n });
+      }, 700));
+    }, S = (n) => {
+      if (n.length > 7) {
+        let a = n.split(" ");
+        if (a.length > 1 && /^([0-9]{4}[A-Z]{2}|[0-9]{4}[a-z]{2})$/.test(a[0])) {
+          let o = {
+            postcode: a[0],
+            huisnummer: a[1]
+          };
+          return a[2] && (o.huisnummerToevoeging = a[2]), o;
+        }
+      }
+      return null;
+    }, R = () => i.companyData ? i.companyData.naam : "";
+    return J(() => y(this, null, function* () {
+      var n;
+      (n = i.companyData) != null && n.kvkNummer && (l.kvk_number = i.companyData.kvkNummer, l.full_address = `${i.companyData.streetName} ${i.companyData.houseNumber} ${i.companyData.zipCode} ${i.companyData.city}`, _());
+    })), {
+      isRequestIsHandling: g,
+      companyName: r,
+      companies: u,
+      businessInfoModel: l,
+      isOptionSelected: d,
+      isDropdownFocused: b,
+      isErrorShowed: L,
+      isLoading: c,
+      attrs: e,
+      listeners: s,
+      findCompanies: M,
+      selectOption: _,
+      removeOption: G,
+      setDropdownOpened: K,
+      setDropdownClosed: F,
+      selectedLabel: R,
+      hasValidationError: j
+    };
+  }
+});
+var A = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", [s("multiselect", { class: {
+    "vd-multiselect__chosen-option": e.isOptionSelected && !e.isDropdownFocused,
+    "vd-multiselect--error": e.hasValidationError
+  }, attrs: { options: e.companies, label: "name", "track-by": "name", multiple: !1, "options-limit": 30, placeholder: "Typ je bedrijfsnaam of KvK-nummer", "select-label": "Select", "preserve-search": !0, loading: e.isLoading, "internal-search": !1, deselectLabel: "", "selected-label": e.selectedLabel(), hideSelected: !0, openDirection: "bottom", showNoOptions: !1 }, on: { "search-change": e.findCompanies, remove: e.removeOption, open: e.setDropdownOpened, close: e.setDropdownClosed }, scopedSlots: e._u([{ key: "option", fn: function({ option: t }) {
+    return [s("div", { staticClass: "vd-multiselect__option-external-wrapper" }, [s("div", { staticClass: "vd-multiselect__option-wrapper" }, [s("p", [s("b", [e._v(e._s(t.naam))]), s("br")]), s("p", [e._v(e._s("Kvk: " + t.kvkNummer)), s("br")]), s("p", [e._v(e._s(t.adres.binnenlandsAdres.plaats + ", " + t.adres.binnenlandsAdres.straatnaam)), s("br")])])])];
+  } }]), model: { value: e.companyName, callback: function(t) {
+    e.companyName = t;
+  }, expression: "companyName" } }, [s("template", { slot: "noResult" }, [s("p", { staticClass: "vd-multiselect__option-non-result mb-0" }, [e._v("Helaas, we hebben geen resultaten gevonden. Probeer te zoeken op de naam waarmee je bedrijf is geregistreerd bij de Kamer van Koophandel, of gebruik je KvK-nummer.")])]), s("template", { slot: "noOptions" }, [s("p", { staticClass: "vd-multiselect__option-non-result mb-0" }, [e._v("Bedrijfsnaam of KVK-nummer")])])], 2), e.isOptionSelected && !e.isDropdownFocused ? s("div", { staticClass: "vd-multiselect__address-info mt-1" }, [s("i", { staticClass: "fas fa-info-circle vd-tip-icon vd-tip-icon_additional-text" }), s("span", [e._v("Kvk: " + e._s(e.businessInfoModel.kvk_number) + " " + e._s(e.businessInfoModel.full_address))])]) : e._e(), s("error-handler", { attrs: { "errors-data": [{ rule: e.hasValidationError, text: "Bedrijfsnaam of KVK-nummer is verplicht" }] } })], 1);
+}, ne = [];
+A._withStripped = !0;
+var P = /* @__PURE__ */ O(
+  le,
+  A,
+  ne,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+P.options.__file = "/Users/vergelijkdirect/Documents/projects/comparison-forms/src/components/common/inputs/CompaniesListSelect.vue";
+const pe = P.exports, re = C({
+  name: "Loader",
+  props: {
+    isActive: {
+      type: Boolean,
+      required: !1,
+      default: !0
+    },
+    small: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    }
+  }
+});
+var T = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, e.isActive ? s("div", { staticClass: "loader-container", class: { "loader-container--small": e.small } }, [s("div", { staticClass: "loader", class: { "loader--small": e.small } })]) : e._e();
+}, ae = [];
+T._withStripped = !0;
+var $ = /* @__PURE__ */ O(
+  re,
+  T,
+  ae,
+  !1,
+  null,
+  "3514e0e8",
+  null,
+  null
+);
+$.options.__file = "/Users/vergelijkdirect/Documents/projects/comparison-forms/src/components/common/Loader.vue";
+const de = $.exports;
+export {
+  pe as C,
+  de as L
+};