@dialpad/dialtone-vue 2.183.2 → 2.184.1

package/dist/lib/combobox-multi-select/combobox-multi-select.js

@@ -0,0 +1,492 @@
+import a from "../combobox-with-popover/combobox-with-popover.js";
+import l from "../input/input.js";
+import h from "../chip/chip.js";
+import u from "../validation-messages/validation-messages.js";
+import { validationMessageValidator as c } from "../../common/validators/index.js";
+import { POPOVER_APPEND_TO_VALUES as d } from "../popover/popover-constants.js";
+import { MULTI_SELECT_SIZES as f, CHIP_SIZES as g, CHIP_TOP_POSITION as m } from "./combobox-multi-select-constants.js";
+import b from "../../common/mixins/sr-only-close-button.js";
+import { getUniqueString as y } from "../../common/utils/index.js";
+import { n as C } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const x = {
+  name: "DtRecipeComboboxMultiSelect",
+  components: {
+    DtRecipeComboboxWithPopover: a,
+    DtInput: l,
+    DtChip: h,
+    DtValidationMessages: u
+  },
+  mixins: [b],
+  props: {
+    /**
+     * String to use for the input label.
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Description for the input
+     */
+    description: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Input placeholder
+     */
+    placeholder: {
+      type: String,
+      default: "Select one or start typing"
+    },
+    /**
+     * Input validation messages
+     */
+    inputMessages: {
+      type: Array,
+      default: () => [],
+      validator: (t) => c(t)
+    },
+    /**
+     * Show input validation message
+     */
+    showInputMessages: {
+      type: Boolean,
+      default: !0
+    },
+    // @TODO: https://dialpad.atlassian.net/browse/DP-52324
+    // type: {
+    //   type: String,
+    //   values: ['input', 'select'],
+    //   default: 'select',
+    // },
+    /**
+     * Determines if the list is loading
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The message when the list is loading
+     */
+    loadingMessage: {
+      type: String,
+      default: "loading..."
+    },
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * Leaving this null will have the combobox trigger on input focus by default.
+     * If you set this value, the default trigger behavior will be disabled and you can
+     * control it as you need.
+     */
+    showList: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    listMaxHeight: {
+      type: String,
+      default: "300px"
+    },
+    /**
+     * The selected items
+     */
+    selectedItems: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    /**
+     * Would be the maximum number of selections you can make. 0 is unlimited
+     */
+    maxSelected: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Max select message when the max selections is exceeded with the structure:
+     * `[{"message": string, "type": VALIDATION_MESSAGE_TYPES }]`
+     */
+    maxSelectedMessage: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    /**
+     * Displays the list when the combobox is focused, before the user has typed anything.
+     * When this is enabled the list will not close after selection.
+     */
+    hasSuggestionList: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Size of the chip, one of `xs`, `sm`, `md`
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (t) => Object.values(f).includes(t)
+    },
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (t) => d.includes(t) || t instanceof HTMLElement
+    },
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+      type: String,
+      default: "fade"
+    },
+    /**
+     * Determines whether the combobox should collapse to a single when losing focus.
+     * @type {boolean}
+     */
+    collapseOnFocusOut: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    listMaxWidth: {
+      type: String,
+      default: ""
+    },
+    /**
+    * Amount of reserved space (in px) on the right side of the input
+    * before the chips and the input caret jump to the next line.
+    * default is 64
+    */
+    reservedRightSpace: {
+      type: Number,
+      default: 64
+    },
+    /**
+     * Determines the maximum width of a single chip. If the text within this chip exceeds the value
+     * it will be truncated with ellipses.
+     * Possible units rem|px|em
+     */
+    chipMaxWidth: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the input element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    inputClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Additional class name for the input wrapper element.
+     * Can accept all of String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    inputWrapperClass: {
+      type: [String, Object, Array],
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {String }
+     */
+    "input",
+    /**
+     * Event fired when item selected
+     *
+     * @event select
+     * @type {Number}
+     */
+    "select",
+    /**
+     * Event fired when item removed
+     *
+     * @event remove
+     * @type {String}
+     */
+    "remove",
+    /**
+     * Event fired when max selected items limit is reached
+     *
+     * @event max-selected
+     * @type {Object}
+     */
+    "max-selected",
+    /**
+     * Native keyup event
+     *
+     * @event keyup
+     * @type {KeyboardEvent}
+      */
+    "keyup",
+    /**
+     * Event fired when combobox item is highlighted
+     *
+     * @event combobox-highlight
+     * @type {Object}
+     */
+    "combobox-highlight"
+  ],
+  data() {
+    return {
+      value: "",
+      popoverOffset: [0, 4],
+      showValidationMessages: !1,
+      resizeWindowObserver: null,
+      initialInputHeight: null,
+      CHIP_SIZES: g,
+      inputFocused: !1,
+      hideInputText: !1
+    };
+  },
+  computed: {
+    inputPlaceHolder() {
+      var t;
+      return ((t = this.selectedItems) == null ? void 0 : t.length) > 0 ? "" : this.placeholder;
+    },
+    chipListeners() {
+      return {
+        ...this.$listeners,
+        keyup: (t) => {
+          this.onChipKeyup(t), this.$emit("keyup", t);
+        }
+      };
+    },
+    inputListeners() {
+      return {
+        ...this.$listeners,
+        input: (t) => {
+          this.$emit("input", t), this.hasSuggestionList && this.showComboboxList();
+        },
+        keyup: (t) => {
+          this.onInputKeyup(t), this.$emit("keyup", t);
+        },
+        click: (t) => {
+          this.hasSuggestionList && this.showComboboxList();
+        }
+      };
+    },
+    selectedItemsWithKeys() {
+      return this.selectedItems.map((t) => ({
+        item: t,
+        key: y(t)
+      }));
+    },
+    chipWrapperClass() {
+      return {
+        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut
+      };
+    }
+  },
+  watch: {
+    selectedItems: {
+      async handler() {
+        this.initSelectedItems();
+      }
+    },
+    chipMaxWidth: {
+      async handler() {
+        this.initSelectedItems();
+      }
+    },
+    async label() {
+      await this.$nextTick(), this.setChipsTopPosition();
+    },
+    async description() {
+      await this.$nextTick(), this.setChipsTopPosition();
+    },
+    size: {
+      async handler() {
+        await this.$nextTick();
+        const t = this.getInput();
+        this.revertInputPadding(t), this.initialInputHeight = t.getBoundingClientRect().height, this.setInputPadding(), this.setChipsTopPosition();
+      }
+    }
+  },
+  mounted() {
+    this.setInitialInputHeight(), this.resizeWindowObserver = new ResizeObserver(async () => {
+      this.setChipsTopPosition(), this.setInputPadding();
+    }), this.resizeWindowObserver.observe(document.body), this.initSelectedItems();
+  },
+  beforeDestroy() {
+    var t;
+    (t = this.resizeWindowObserver) == null || t.unobserve(document.body);
+  },
+  methods: {
+    comboboxHighlight(t) {
+      this.$emit("combobox-highlight", t);
+    },
+    async initSelectedItems() {
+      await this.$nextTick(), this.setInputPadding(), this.setChipsTopPosition(), this.setInputMinWidth(), this.checkMaxSelected();
+    },
+    onChipRemove(t) {
+      var e;
+      this.$emit("remove", t), (e = this.$refs.input) == null || e.focus();
+    },
+    onComboboxSelect(t) {
+      this.loading || (this.value = "", this.$emit("select", t));
+    },
+    showComboboxList() {
+      var t;
+      this.showList == null && ((t = this.$refs.comboboxWithPopover) == null || t.showComboboxList());
+    },
+    closeComboboxList() {
+      var t;
+      this.showList == null && ((t = this.$refs.comboboxWithPopover) == null || t.closeComboboxList());
+    },
+    getChipButtons() {
+      return this.$refs.chips && this.$refs.chips.map((t) => t.$el.querySelector("button"));
+    },
+    getChips() {
+      return this.$refs.chips && this.$refs.chips.map((t) => t.$el);
+    },
+    getLastChipButton() {
+      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];
+    },
+    getLastChip() {
+      return this.$refs.chips && this.getChips()[this.getChips().length - 1];
+    },
+    getFirstChip() {
+      return this.$refs.chips && this.getChips()[0];
+    },
+    getInput() {
+      var t;
+      return (t = this.$refs.input) == null ? void 0 : t.$refs.input;
+    },
+    onChipKeyup(t) {
+      var i;
+      const e = (i = t.code) == null ? void 0 : i.toLowerCase();
+      e === "arrowleft" ? this.navigateBetweenChips(t.target, !0) : e === "arrowright" && (t.target.id === this.getLastChipButton().id ? this.moveFromChipToInput() : this.navigateBetweenChips(t.target, !1));
+    },
+    onInputKeyup(t) {
+      var i;
+      const e = (i = t.code) == null ? void 0 : i.toLowerCase();
+      this.selectedItems.length > 0 && t.target.selectionStart === 0 && (e === "backspace" || e === "arrowleft") && this.moveFromInputToChip();
+    },
+    moveFromInputToChip() {
+      var t;
+      this.getLastChipButton().focus(), (t = this.$refs.input) == null || t.blur(), this.closeComboboxList();
+    },
+    moveFromChipToInput() {
+      var t;
+      this.getLastChipButton().blur(), (t = this.$refs.input) == null || t.focus(), this.showComboboxList();
+    },
+    navigateBetweenChips(t, e) {
+      var o;
+      const i = this.getChipButtons().indexOf(t), s = e ? i - 1 : i + 1;
+      s < 0 || s >= ((o = this.$refs.chips) == null ? void 0 : o.length) || (this.getChipButtons()[i].blur(), this.getChipButtons()[s].focus(), this.closeComboboxList());
+    },
+    setChipsTopPosition() {
+      const t = this.getInput();
+      if (!t) return;
+      const e = this.$refs.inputSlotWrapper, i = t.getBoundingClientRect().top - e.getBoundingClientRect().top, s = this.$refs.chipsWrapper;
+      s.style.top = i - m[this.size] + "px";
+    },
+    setInputPadding() {
+      const t = this.getLastChip(), e = this.getInput(), i = this.$refs.chipsWrapper;
+      if (!e || (this.revertInputPadding(e), this.popoverOffset = [0, 4], !t) || this.collapseOnFocusOut && !this.inputFocused) return;
+      const s = t.offsetLeft + this.getFullWidth(t), o = e.getBoundingClientRect().width - s;
+      o > this.reservedRightSpace ? e.style.paddingLeft = s + "px" : e.style.paddingLeft = "4px";
+      const r = i.getBoundingClientRect().height - 4, n = t.getBoundingClientRect().height - 4, p = o > this.reservedRightSpace ? t.offsetTop + 2 : r + n - 9;
+      e.style.paddingTop = `${p}px`;
+    },
+    revertInputPadding(t) {
+      t.style.paddingLeft = "", t.style.paddingTop = "", t.style.paddingBottom = "";
+    },
+    getFullWidth(t) {
+      const e = window.getComputedStyle(t);
+      return t.offsetWidth + parseInt(e.marginLeft) + parseInt(e.marginRight);
+    },
+    setInputMinWidth() {
+      const t = this.getFirstChip(), e = this.getInput();
+      e && (t ? e.style.minWidth = this.getFullWidth(t) + 4 + "px" : e.style.minWidth = "");
+    },
+    checkMaxSelected() {
+      this.maxSelected !== 0 && (this.selectedItems.length > this.maxSelected ? (this.showValidationMessages = !0, this.$emit("max-selected")) : this.showValidationMessages = !1);
+    },
+    setInitialInputHeight() {
+      const t = this.getInput();
+      t && (this.initialInputHeight = t.getBoundingClientRect().height);
+    },
+    async handleInputFocusIn() {
+      this.inputFocused = !0, this.collapseOnFocusOut && (await this.$nextTick(), this.setInputPadding(), this.hideInputText = !1);
+    },
+    async handleInputFocusOut() {
+      if (this.inputFocused = !1, this.collapseOnFocusOut) {
+        const t = this.getInput();
+        if (!t || !t.style.paddingTop)
+          return;
+        this.hideInputText = !0, this.revertInputPadding(t);
+      }
+    }
+  }
+};
+var I = function() {
+  var e = this, i = e._self._c;
+  return i("dt-recipe-combobox-with-popover", { ref: "comboboxWithPopover", attrs: { label: e.label, "show-list": e.showList, "max-height": e.listMaxHeight, "max-width": e.listMaxWidth, "popover-offset": e.popoverOffset, "has-suggestion-list": e.hasSuggestionList, "visually-hidden-close-label": e.visuallyHiddenCloseLabel, "visually-hidden-close": e.visuallyHiddenClose, "content-width": "anchor", "append-to": e.appendTo, transition: e.transition }, on: { select: e.onComboboxSelect, highlight: e.comboboxHighlight }, scopedSlots: e._u([{ key: "input", fn: function({ onInput: s }) {
+    return [i("span", { ref: "inputSlotWrapper", staticClass: "d-recipe-combobox-multi-select__input-wrapper", on: { focusin: e.handleInputFocusIn, focusout: e.handleInputFocusOut } }, [i("span", { ref: "chipsWrapper", class: ["d-recipe-combobox-multi-select__chip-wrapper", e.chipWrapperClass] }, e._l(e.selectedItemsWithKeys, function({ item: o, key: r }) {
+      return i("dt-chip", e._g({ key: r, ref: "chips", refInFor: !0, class: [
+        "d-recipe-combobox-multi-select__chip",
+        { "d-recipe-combobox-multi-select__chip--truncate": !!e.chipMaxWidth }
+      ], style: { maxWidth: e.chipMaxWidth }, attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, size: e.CHIP_SIZES[e.size] }, on: { keyup: function(n) {
+        return !n.type.indexOf("key") && e._k(n.keyCode, "backspace", void 0, n.key, void 0) ? null : e.onChipRemove(o);
+      }, close: function(n) {
+        return e.onChipRemove(o);
+      } } }, e.chipListeners), [e._v(" " + e._s(o) + " ")]);
+    }), 1), i("dt-input", e._g({ ref: "input", staticClass: "d-recipe-combobox-multi-select__input", attrs: { "input-class": [
+      e.inputClass,
+      {
+        "d-recipe-combobox-multi-select__input--hidden": e.hideInputText
+      }
+    ], "input-wrapper-class": e.inputWrapperClass, "aria-label": e.label, label: e.labelVisible ? e.label : "", description: e.description, placeholder: e.inputPlaceHolder, "show-messages": e.showInputMessages, messages: e.inputMessages, size: e.size }, on: { input: s }, model: { value: e.value, callback: function(o) {
+      e.value = o;
+    }, expression: "value" } }, e.inputListeners)), i("dt-validation-messages", { attrs: { "validation-messages": e.maxSelectedMessage, "show-messages": e.showValidationMessages } })], 1)];
+  } }, e.$slots.header ? { key: "header", fn: function() {
+    return [i("div", { ref: "header" }, [e._t("header")], 2)];
+  }, proxy: !0 } : null, { key: "list", fn: function() {
+    return [i("div", { ref: "list", staticClass: "d-recipe-combobox-multi-select__list", on: { mousedown: function(s) {
+      s.preventDefault();
+    } } }, [e.loading ? i("div", { staticClass: "d-recipe-combobox-multi-select__list--loading" }, [e._v(" " + e._s(e.loadingMessage) + " ")]) : e._t("list")], 2)];
+  }, proxy: !0 }, e.$slots.footer ? { key: "footer", fn: function() {
+    return [i("div", { ref: "footer" }, [e._t("footer")], 2)];
+  }, proxy: !0 } : null], null, !0) });
+}, v = [], _ = /* @__PURE__ */ C(
+  x,
+  I,
+  v
+);
+const B = _.exports;
+export {
+  B as default
+};
+//# sourceMappingURL=combobox-multi-select.js.map

package/dist/lib/combobox-multi-select/combobox-multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-multi-select.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n    :visually-hidden-close=\"visuallyHiddenClose\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :close-button-props=\"{ ariaLabel: 'close' }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String }\n     */\n    'input',\n\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when item removed\n     *\n     * @event remove\n     * @type {String}\n     */\n    'remove',\n\n    /**\n     * Event fired when max selected items limit is reached\n     *\n     * @event max-selected\n     * @type {Object}\n     */\n    'max-selected',\n\n    /**\n     * Native keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: event => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.initialInputHeight = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      const spaceLeft = input.getBoundingClientRect().width - left;\n      // input.style.paddingLeft = left + 'px';\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      // Get the chip wrapper height minus the 4px padding\n      const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n      const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = spaceLeft > this.reservedRightSpace\n        ? lastChip.offsetTop + 2\n        : (chipsWrapperHeight + lastChipHeight - 9);\n\n      input.style.paddingTop = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        await this.$nextTick();\n        this.setInputPadding();\n        this.hideInputText = false;\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        const input = this.getInput();\n        if (!input) return;\n        // Hide the input text when is not on first line\n        if (!input.style.paddingTop) {\n          return;\n        }\n        this.hideInputText = true;\n        this.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","inputMessages","validationMessageValidator","MULTI_SELECT_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","_a","event","selectedItem","getUniqueString","input","highlightIndex","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip"],"mappings":";;;;;;;;;;AAwIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,6BAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,sBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,CAAAC,MACAC,EAAAD,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAA,CAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAA,CAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,OAAAE,CAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,aAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MACAC,EAAA,SAAAD,CAAA,KACAA,aAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,mBAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,eAAA,CAAA,GAAA,CAAA;AAAA,MACA,wBAAA;AAAA,MACA,sBAAA;AAAA,MACA,oBAAA;AAAA,MACA,YAAAE;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;;AACA,eAAAC,IAAA,KAAA,kBAAA,gBAAAA,EAAA,UAAA,IAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,CAAAC,MAAA;AACA,eAAA,YAAAA,CAAA,GACA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,CAAAA,MAAA;AACA,eAAA,MAAA,SAAAA,CAAA,GACA,KAAA,qBACA,KAAA,iBAAA;AAAA,QAEA;AAAA,QAEA,OAAA,CAAAA,MAAA;AACA,eAAA,aAAAA,CAAA,GACA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,QAEA,OAAA,CAAAA,MAAA;AACA,UAAA,KAAA,qBACA,KAAA,iBAAA;AAAA,QAEA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,cAAA,IAAA,CAAAC,OAAA;AAAA,QACA,MAAAA;AAAA,QACA,KAAAC,EAAAD,CAAA;AAAA,MACA,EAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA;AAAA,QACA,CAAA,gDAAA,KAAA,IAAA,aAAA,GAAA,CAAA,KAAA,gBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,eAAA;AAAA,MACA,MAAA,UAAA;AACA,aAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,cAAA;AAAA,MACA,MAAA,UAAA;AACA,aAAA,kBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,MAAA,QAAA;AACA,YAAA,KAAA,aAEA,KAAA,oBAAA;AAAA,IACA;AAAA,IAEA,MAAA,cAAA;AACA,YAAA,KAAA,aAEA,KAAA,oBAAA;AAAA,IACA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA,UAAA;AACA,cAAA,KAAA;AACA,cAAAE,IAAA,KAAA;AACA,aAAA,mBAAAA,CAAA,GACA,KAAA,qBAAAA,EAAA,sBAAA,EAAA,QACA,KAAA,gBAAA,GACA,KAAA,oBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,sBAAA,GAEA,KAAA,uBAAA,IAAA,eAAA,YAAA;AACA,WAAA,oBAAA,GACA,KAAA,gBAAA;AAAA,IACA,CAAA,GACA,KAAA,qBAAA,QAAA,SAAA,IAAA,GAEA,KAAA,kBAAA;AAAA,EACA;AAAA,EAEA,gBAAA;;AACA,KAAAJ,IAAA,KAAA,yBAAA,QAAAA,EAAA,UAAA,SAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,kBAAAK,GAAA;AACA,WAAA,MAAA,sBAAAA,CAAA;AAAA,IACA;AAAA,IAEA,MAAA,oBAAA;AACA,YAAA,KAAA,aACA,KAAA,gBAAA,GACA,KAAA,oBAAA,GACA,KAAA,iBAAA,GACA,KAAA,iBAAA;AAAA,IACA;AAAA,IAEA,aAAAC,GAAA;;AACA,WAAA,MAAA,UAAAA,CAAA,IACAN,IAAA,KAAA,MAAA,UAAA,QAAAA,EAAA;AAAA,IACA;AAAA,IAEA,iBAAAO,GAAA;AACA,MAAA,KAAA,YACA,KAAA,QAAA,IACA,KAAA,MAAA,UAAAA,CAAA;AAAA,IACA;AAAA,IAEA,mBAAA;;AACA,MAAA,KAAA,YAAA,UACAP,IAAA,KAAA,MAAA,wBAAA,QAAAA,EAAA;AAAA,IACA;AAAA,IAEA,oBAAA;;AACA,MAAA,KAAA,YAAA,UACAA,IAAA,KAAA,MAAA,wBAAA,QAAAA,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,MAAA,MAAA,IAAA,CAAAQ,MAAAA,EAAA,IAAA,cAAA,QAAA,CAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,MAAA,MAAA,IAAA,CAAAA,MAAAA,EAAA,GAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,iBAAA,KAAA,eAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,WAAA,KAAA,SAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,MAAA,SAAA,KAAA,SAAA,EAAA,CAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,cAAAR,IAAA,KAAA,MAAA,UAAA,gBAAAA,EAAA,MAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;;AACA,YAAAQ,KAAAT,IAAAC,EAAA,SAAA,gBAAAD,EAAA;AACA,MAAAS,MAAA,cAEA,KAAA,qBAAAR,EAAA,QAAA,EAAA,IACAQ,MAAA,iBACAR,EAAA,OAAA,OAAA,KAAA,kBAAA,EAAA,KAEA,KAAA,oBAAA,IAGA,KAAA,qBAAAA,EAAA,QAAA,EAAA;AAAA,IAGA;AAAA,IAEA,aAAAA,GAAA;;AACA,YAAAQ,KAAAT,IAAAC,EAAA,SAAA,gBAAAD,EAAA;AAGA,MAAA,KAAA,cAAA,SAAA,KAAAC,EAAA,OAAA,mBAAA,MACAQ,MAAA,eAAAA,MAAA,gBACA,KAAA,oBAAA;AAAA,IAGA;AAAA,IAEA,sBAAA;;AACA,WAAA,oBAAA,UACAT,IAAA,KAAA,MAAA,UAAA,QAAAA,EAAA,QACA,KAAA,kBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;;AACA,WAAA,oBAAA,SACAA,IAAA,KAAA,MAAA,UAAA,QAAAA,EAAA,SACA,KAAA,iBAAA;AAAA,IACA;AAAA,IAEA,qBAAAU,GAAAC,GAAA;;AACA,YAAAC,IAAA,KAAA,eAAA,EAAA,QAAAF,CAAA,GACAG,IAAAF,IAAAC,IAAA,IAAAA,IAAA;AACA,MAAAC,IAAA,KAAAA,OAAAb,IAAA,KAAA,MAAA,UAAA,gBAAAA,EAAA,YAGA,KAAA,eAAA,EAAAY,CAAA,EAAA,KAAA,GACA,KAAA,eAAA,EAAAC,CAAA,EAAA,MAAA,GACA,KAAA,kBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAGA,YAAAT,IAAA,KAAA;AACA,UAAA,CAAAA,EAAA;AACA,YAAAU,IAAA,KAAA,MAAA,kBACAC,IAAAX,EAAA,sBAAA,EAAA,MACAU,EAAA,sBAAA,EAAA,KACAE,IAAA,KAAA,MAAA;AACA,MAAAA,EAAA,MAAA,MAAAD,IAAAE,EAAA,KAAA,IAAA,IAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAAC,IAAA,KAAA,eACAd,IAAA,KAAA,YACAY,IAAA,KAAA,MAAA;AAOA,UANA,CAAAZ,MACA,KAAA,mBAAAA,CAAA,GACA,KAAA,gBAAA,CAAA,GAAA,CAAA,GACA,CAAAc,MAGA,KAAA,sBAAA,CAAA,KAAA,aAAA;AAIA,YAAAC,IAAAD,EAAA,aAAA,KAAA,aAAAA,CAAA,GACAE,IAAAhB,EAAA,sBAAA,EAAA,QAAAe;AAGA,MAAAC,IAAA,KAAA,qBACAhB,EAAA,MAAA,cAAAe,IAAA,OAEAf,EAAA,MAAA,cAAA;AAIA,YAAAiB,IAAAL,EAAA,sBAAA,EAAA,SAAA,GACAM,IAAAJ,EAAA,sBAAA,EAAA,SAAA,GAGAH,IAAAK,IAAA,KAAA,qBACAF,EAAA,YAAA,IACAG,IAAAC,IAAA;AAEA,MAAAlB,EAAA,MAAA,aAAA,GAAAW,CAAA;AAAA,IACA;AAAA,IAEA,mBAAAX,GAAA;AACA,MAAAA,EAAA,MAAA,cAAA,IACAA,EAAA,MAAA,aAAA,IACAA,EAAA,MAAA,gBAAA;AAAA,IACA;AAAA,IAEA,aAAAmB,GAAA;AACA,YAAAC,IAAA,OAAA,iBAAAD,CAAA;AACA,aAAAA,EAAA,cAAA,SAAAC,EAAA,UAAA,IAAA,SAAAA,EAAA,WAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AAEA,YAAAC,IAAA,KAAA,gBACArB,IAAA,KAAA;AACA,MAAAA,MACAqB,IAEArB,EAAA,MAAA,WAAA,KAAA,aAAAqB,CAAA,IAAA,IAAA,OAEArB,EAAA,MAAA,WAAA;AAAA,IAEA;AAAA,IAEA,mBAAA;AACA,MAAA,KAAA,gBAAA,MACA,KAAA,cAAA,SAAA,KAAA,eACA,KAAA,yBAAA,IACA,KAAA,MAAA,cAAA,KAEA,KAAA,yBAAA;AAAA,IAEA;AAAA,IAEA,wBAAA;AACA,YAAAA,IAAA,KAAA;AACA,MAAAA,MACA,KAAA,qBAAAA,EAAA,sBAAA,EAAA;AAAA,IACA;AAAA,IAEA,MAAA,qBAAA;AACA,WAAA,eAAA,IACA,KAAA,uBACA,MAAA,KAAA,aACA,KAAA,gBAAA,GACA,KAAA,gBAAA;AAAA,IAEA;AAAA,IAEA,MAAA,sBAAA;AAEA,UADA,KAAA,eAAA,IACA,KAAA,oBAAA;AACA,cAAAA,IAAA,KAAA;AAGA,YAFA,CAAAA,KAEA,CAAAA,EAAA,MAAA;AACA;AAEA,aAAA,gBAAA,IACA,KAAA,mBAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/combobox-multi-select/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./combobox-multi-select.cjs"),e=require("./combobox-multi-select-constants.cjs");exports.DtRecipeComboboxMultiSelect=o.default;exports.CHIP_SIZES=e.CHIP_SIZES;exports.CHIP_TOP_POSITION=e.CHIP_TOP_POSITION;exports.MULTI_SELECT_SIZES=e.MULTI_SELECT_SIZES;
+//# sourceMappingURL=index.cjs.map

package/dist/lib/combobox-multi-select/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/combobox-multi-select/index.js

@@ -0,0 +1,9 @@
+import { default as I } from "./combobox-multi-select.js";
+import { CHIP_SIZES as t, CHIP_TOP_POSITION as _, MULTI_SELECT_SIZES as r } from "./combobox-multi-select-constants.js";
+export {
+  t as CHIP_SIZES,
+  _ as CHIP_TOP_POSITION,
+  I as DtRecipeComboboxMultiSelect,
+  r as MULTI_SELECT_SIZES
+};
+//# sourceMappingURL=index.js.map

package/dist/lib/combobox-multi-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/lib/combobox-with-popover/combobox-with-popover.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../combobox/combobox-loading-list.cjs"),p=require("../combobox/combobox-empty-list.cjs"),l=require("../../common/utils/index.cjs"),c=require("../../common/mixins/sr-only-close-button.cjs"),f=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),h=require("../combobox/combobox.cjs"),b=require("../popover/popover.cjs"),m=require("../combobox/combobox-constants.cjs"),a=require("../dropdown/dropdown-constants.cjs"),u=require("../popover/popover-constants.cjs"),y={name:"DtRecipeComboboxWithPopover",components:{DtCombobox:h.default,DtPopover:b.default,ComboboxLoadingList:d.default,ComboboxEmptyList:p.default},mixins:[c.default],props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:t=>Object.values(m.LABEL_SIZES).includes(t)},description:{type:String,default:""},showList:{type:Boolean,default:null},listId:{type:String,default(){return l.getUniqueString()}},listClass:{type:[String,Array,Object],default:""},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},padding:{type:String,default:"small",validator:t=>Object.keys(a.DROPDOWN_PADDING_CLASSES).some(e=>e===t)},contentWidth:{type:String,default:null,validator:t=>u.POPOVER_CONTENT_WIDTHS.includes(t)},openWithArrowKeys:{type:Boolean,default:!1},popoverOffset:{type:Array,default:()=>[0,4]},popoverSticky:{type:[Boolean,String],default:!1},hasSuggestionList:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>u.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},transition:{type:String,default:"fade"}},emits:["select","escape","highlight","opened"],data(){return{DROPDOWN_PADDING_CLASSES:a.DROPDOWN_PADDING_CLASSES,isListShown:!1,isInputFocused:!1,isListFocused:!1,externalAnchor:l.getUniqueString()}},computed:{comboboxListeners(){return{...this.$listeners,select:this.onSelect,escape:this.onEscape,highlight:this.onHighlight}}},watch:{showList:{handler:function(t){t!==null&&(this.isListShown=t)},immediate:!0},isListShown(t){t?window.addEventListener("mousedown",this.onFocusOut):window.removeEventListener("mousedown",this.onFocusOut),this.onOpened(t)}},methods:{handleDisplayList(t){!this.hasSuggestionList&&t&&this.showComboboxList(),!this.hasSuggestionList&&!t&&this.closeComboboxList()},showComboboxList(){this.showList==null&&(this.isListShown=!0)},closeComboboxList(){this.showList==null&&(this.isListShown=!1)},onSelect(t){this.loading||(this.$emit("select",t),this.hasSuggestionList||this.closeComboboxList())},onEscape(){this.$emit("escape"),this.closeComboboxList()},onHighlight(t){this.loading||this.$emit("highlight",t)},onOpened(t){this.$emit("opened",t)},onFocusIn(t){var e;this.hasSuggestionList&&t&&((e=this.$refs.input)==null?void 0:e.querySelector("input"))===t.target&&this.showComboboxList()},onFocusOut(t){var n,o,s;const e=(o=(n=this.$refs.popover)==null?void 0:n.tip)==null?void 0:o.popper,i=this.$refs.input;(s=t.composedPath())!=null&&s.some(r=>[e,i].includes(r))||this.closeComboboxList()},openOnArrowKeyPress(){this.showList!==null||this.isListShown||!this.openWithArrowKeys||this.showComboboxList()}}};var g=function(){var e=this,i=e._self._c;return i("dt-combobox",e._g({ref:"combobox",attrs:{loading:e.loading,label:e.label,"label-visible":e.labelVisible,size:e.size,description:e.description,"empty-list":e.emptyList,"empty-state-message":e.emptyStateMessage,"show-list":e.isListShown,"on-beginning-of-list":e.onBeginningOfList,"on-end-of-list":e.onEndOfList,"list-rendered-outside":!0,"list-id":e.listId,"data-qa":"dt-combobox"},scopedSlots:e._u([{key:"input",fn:function({inputProps:n}){return[i("div",{ref:"input",attrs:{id:e.externalAnchor},on:{focusin:e.onFocusIn,keydown:[function(o){return!o.type.indexOf("key")&&e._k(o.keyCode,"up",38,o.key,["Up","ArrowUp"])?null:e.openOnArrowKeyPress(o)},function(o){return!o.type.indexOf("key")&&e._k(o.keyCode,"down",40,o.key,["Down","ArrowDown"])?null:e.openOnArrowKeyPress(o)}]}},[e._t("input",null,{inputProps:n,onInput:e.handleDisplayList})],2)]}},{key:"list",fn:function({opened:n,listProps:o,clearHighlightIndex:s}){return[i("dt-popover",{ref:"popover",attrs:{open:e.isListShown,"hide-on-click":!1,"max-height":e.maxHeight,"max-width":e.maxWidth,offset:e.popoverOffset,sticky:e.popoverSticky,placement:"bottom-start","initial-focus-element":"none",padding:"none",role:"listbox","external-anchor":e.externalAnchor,"content-width":e.contentWidth,"content-appear":!0,"content-tabindex":null,modal:!1,"auto-focus":!1,"append-to":e.appendTo,transition:e.transition,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,"visually-hidden-close":e.visuallyHiddenClose},on:{"update:open":function(r){e.isListShown=r},opened:function(r){return n(r,arguments[1])}},scopedSlots:e._u([e.$slots.header?{key:"headerContent",fn:function(){return[i("div",{ref:"header"},[e._t("header")],2)]},proxy:!0}:null,{key:"content",fn:function(){return[i("div",{ref:"listWrapper",class:["d-recipe-combobox-with-popover__list",e.DROPDOWN_PADDING_CLASSES[e.padding],e.listClass],on:{mouseleave:s,focusout:s}},[e.loading?i("combobox-loading-list",e._b({},"combobox-loading-list",o,!1)):e.emptyList&&e.emptyStateMessage?i("combobox-empty-list",e._b({attrs:{message:e.emptyStateMessage}},"combobox-empty-list",o,!1)):e._t("list",null,{listProps:o})],2)]},proxy:!0},e.$slots.footer?{key:"footerContent",fn:function(){return[i("div",{ref:"footer"},[e._t("footer")],2)]},proxy:!0}:null],null,!0)})]}}],null,!0)},e.comboboxListeners))},_=[],L=f.n(y,g,_);const S=L.exports;exports.default=S;
+//# sourceMappingURL=combobox-with-popover.cjs.map

package/dist/lib/combobox-with-popover/combobox-with-popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-with-popover.cjs","sources":["../../../recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-on=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        :open.sync=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :transition=\"transition\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        @opened=\"opened($event, arguments[1]);\"\n      >\n        <template\n          v-if=\"$slots.header\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"$slots.footer\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString } from '@/common/utils';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\nexport default {\n  name: 'DtRecipeComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$listeners,\n\n        select: this.onSelect,\n\n        escape: this.onEscape,\n\n        highlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","SrOnlyCloseButtonMixin","LABEL_SIZES","getUniqueString","padding","DROPDOWN_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","appendTo","POPOVER_APPEND_TO_VALUES","show","val","value","highlightIndex","opened","e","_a","popoverEl","_b","comboboxEl","_c","el"],"mappings":"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"}