@dialpad/dialtone 9.86.1 → 9.87.0

package/dist/vue2/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs

@@ -9,7 +9,6 @@ const popover_constants = require("../../../components/popover/popover_constants
 const combobox_multi_select_constants = require("./combobox_multi_select_constants.cjs");
 const sr_only_close_button = require("../../../common/mixins/sr_only_close_button.cjs");
 const common_utils = require("../../../common/utils.cjs");
-;/* empty css                             */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const _sfc_main = {
   name: "DtRecipeComboboxMultiSelect",
@@ -318,7 +317,7 @@ const _sfc_main = {
     },
     chipWrapperClass() {
       return {
-        [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut
+        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut
       };
     }
   },
@@ -551,14 +550,17 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-recipe-combobox-with-popover", { ref: "comboboxWithPopover", attrs: { "label": _vm.label, "show-list": _vm.showList, "max-height": _vm.listMaxHeight, "max-width": _vm.listMaxWidth, "popover-offset": _vm.popoverOffset, "has-suggestion-list": _vm.hasSuggestionList, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel, "visually-hidden-close": _vm.visuallyHiddenClose, "content-width": "anchor", "append-to": _vm.appendTo, "transition": _vm.transition }, on: { "select": _vm.onComboboxSelect, "highlight": _vm.comboboxHighlight }, scopedSlots: _vm._u([{ key: "input", fn: function({ onInput }) {
-    return [_c("span", { ref: "inputSlotWrapper", staticClass: "combobox__input-wrapper", on: { "focusin": _vm.handleInputFocusIn, "focusout": _vm.handleInputFocusOut } }, [_c("span", { ref: "chipsWrapper", class: ["combobox__chip-wrapper", _vm.chipWrapperClass] }, _vm._l(_vm.selectedItemsWithKeys, function({ item, key }) {
-      return _c("dt-chip", _vm._g({ key, ref: "chips", refInFor: true, class: ["combobox__chip", { "combobox__chip--truncate": !!_vm.chipMaxWidth }], style: { maxWidth: _vm.chipMaxWidth }, attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, "size": _vm.CHIP_SIZES[_vm.size] }, on: { "keyup": function($event) {
+    return [_c("span", { ref: "inputSlotWrapper", staticClass: "d-recipe-combobox-multi-select__input-wrapper", on: { "focusin": _vm.handleInputFocusIn, "focusout": _vm.handleInputFocusOut } }, [_c("span", { ref: "chipsWrapper", class: ["d-recipe-combobox-multi-select__chip-wrapper", _vm.chipWrapperClass] }, _vm._l(_vm.selectedItemsWithKeys, function({ item, key }) {
+      return _c("dt-chip", _vm._g({ key, ref: "chips", refInFor: true, class: [
+        "d-recipe-combobox-multi-select__chip",
+        { "d-recipe-combobox-multi-select__chip--truncate": !!_vm.chipMaxWidth }
+      ], style: { maxWidth: _vm.chipMaxWidth }, attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, "size": _vm.CHIP_SIZES[_vm.size] }, on: { "keyup": function($event) {
         if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "backspace", void 0, $event.key, void 0)) return null;
         return _vm.onChipRemove(item);
       }, "close": function($event) {
         return _vm.onChipRemove(item);
       } } }, _vm.chipListeners), [_vm._v(" " + _vm._s(item) + " ")]);
-    }), 1), _c("dt-input", _vm._g({ ref: "input", staticClass: "combobox__input", attrs: { "input-class": [_vm.inputClass, { "d-fc-transparent": _vm.hideInputText }], "input-wrapper-class": _vm.inputWrapperClass, "aria-label": _vm.label, "label": _vm.labelVisible ? _vm.label : "", "description": _vm.description, "placeholder": _vm.inputPlaceHolder, "show-messages": _vm.showInputMessages, "messages": _vm.inputMessages, "size": _vm.size }, on: { "input": onInput }, model: { value: _vm.value, callback: function($$v) {
+    }), 1), _c("dt-input", _vm._g({ ref: "input", staticClass: "d-recipe-combobox-multi-select__input", attrs: { "input-class": [_vm.inputClass, { "d-fc-transparent": _vm.hideInputText }], "input-wrapper-class": _vm.inputWrapperClass, "aria-label": _vm.label, "label": _vm.labelVisible ? _vm.label : "", "description": _vm.description, "placeholder": _vm.inputPlaceHolder, "show-messages": _vm.showInputMessages, "messages": _vm.inputMessages, "size": _vm.size }, on: { "input": onInput }, model: { value: _vm.value, callback: function($$v) {
       _vm.value = $$v;
     }, expression: "value" } }, _vm.inputListeners)), _c("dt-validation-messages", { attrs: { "validation-messages": _vm.maxSelectedMessage, "show-messages": _vm.showValidationMessages } })], 1)];
   } }, _vm.$slots.header ? { key: "header", fn: function() {
@@ -566,7 +568,7 @@ var _sfc_render = function render() {
   }, proxy: true } : null, { key: "list", fn: function() {
     return [_c("div", { ref: "list", on: { "mousedown": function($event) {
       $event.preventDefault();
-    } } }, [!_vm.loading ? _vm._t("list") : _c("div", { staticClass: "combobox__list--loading" }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
+    } } }, [!_vm.loading ? _vm._t("list") : _c("div", { staticClass: "d-recipe-combobox-multi-select__list--loading" }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
   }, proxy: true }, _vm.$slots.footer ? { key: "footer", fn: function() {
     return [_c("div", { ref: "footer" }, [_vm._t("footer")], 2)];
   }, proxy: true } : null], null, true) });
@@ -575,10 +577,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "7eac7e22"
+  _sfc_staticRenderFns
 );
 const combobox_multi_select = __component__.exports;
 exports.default = combobox_multi_select;

package/dist/vue2/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox_multi_select.vue.cjs","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=\"combobox__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['combobox__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=\"['combobox__chip', { 'combobox__chip--truncate': !!chipMaxWidth }]\"\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=\"combobox__input\"\n          :input-class=\"[inputClass, { 'd-fc-transparent': hideInputText }]\"\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        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"combobox__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        [`combobox__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\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n  position: relative;\n  display: block;\n}\n\n.combobox__chip-wrapper {\n  position: absolute;\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  padding-left: var(--dt-space-100);\n  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n  max-height: initial;\n  overflow-y: visible;\n}\n\n.combobox__chip-wrapper-md--collapsed {\n  max-height: 2.8rem;\n  overflow-y: hidden;\n}\n\n.combobox__chip-wrapper-sm--collapsed,\n.combobox__chip-wrapper-xs--collapsed {\n  max-height: 2.5rem;\n  overflow-y: hidden;\n}\n\n.combobox__chip {\n  margin-top: var(--dt-space-300);\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  z-index: var(--zi-base1);\n  max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n  flex-grow: 1;\n}\n\n.combobox__list--loading {\n  text-align: center;\n  padding-top: var(--dt-space-500);\n  padding-bottom: var(--dt-space-500);\n}\n\n.combobox__chip--truncate {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n</style>\n"],"names":["DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","validationMessageValidator","MULTI_SELECT_SIZES","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","getUniqueString","input","chip","CHIP_TOP_POSITION"],"mappings":"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"}
+{"version":3,"file":"combobox_multi_select.vue.cjs","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=\"[inputClass, { 'd-fc-transparent': hideInputText }]\"\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        @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":["DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","validationMessageValidator","MULTI_SELECT_SIZES","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","getUniqueString","input","chip","CHIP_TOP_POSITION"],"mappings":"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"}

package/dist/vue2/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js

@@ -7,7 +7,6 @@ import { POPOVER_APPEND_TO_VALUES } from "../../../components/popover/popover_co
 import { MULTI_SELECT_SIZES, CHIP_SIZES, CHIP_TOP_POSITION } from "./combobox_multi_select_constants.js";
 import SrOnlyCloseButtonMixin from "../../../common/mixins/sr_only_close_button.js";
 import { getUniqueString } from "../../../common/utils.js";
-/* empty css                           */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 const _sfc_main = {
   name: "DtRecipeComboboxMultiSelect",
@@ -316,7 +315,7 @@ const _sfc_main = {
     },
     chipWrapperClass() {
       return {
-        [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut
+        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut
       };
     }
   },
@@ -549,14 +548,17 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-recipe-combobox-with-popover", { ref: "comboboxWithPopover", attrs: { "label": _vm.label, "show-list": _vm.showList, "max-height": _vm.listMaxHeight, "max-width": _vm.listMaxWidth, "popover-offset": _vm.popoverOffset, "has-suggestion-list": _vm.hasSuggestionList, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel, "visually-hidden-close": _vm.visuallyHiddenClose, "content-width": "anchor", "append-to": _vm.appendTo, "transition": _vm.transition }, on: { "select": _vm.onComboboxSelect, "highlight": _vm.comboboxHighlight }, scopedSlots: _vm._u([{ key: "input", fn: function({ onInput }) {
-    return [_c("span", { ref: "inputSlotWrapper", staticClass: "combobox__input-wrapper", on: { "focusin": _vm.handleInputFocusIn, "focusout": _vm.handleInputFocusOut } }, [_c("span", { ref: "chipsWrapper", class: ["combobox__chip-wrapper", _vm.chipWrapperClass] }, _vm._l(_vm.selectedItemsWithKeys, function({ item, key }) {
-      return _c("dt-chip", _vm._g({ key, ref: "chips", refInFor: true, class: ["combobox__chip", { "combobox__chip--truncate": !!_vm.chipMaxWidth }], style: { maxWidth: _vm.chipMaxWidth }, attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, "size": _vm.CHIP_SIZES[_vm.size] }, on: { "keyup": function($event) {
+    return [_c("span", { ref: "inputSlotWrapper", staticClass: "d-recipe-combobox-multi-select__input-wrapper", on: { "focusin": _vm.handleInputFocusIn, "focusout": _vm.handleInputFocusOut } }, [_c("span", { ref: "chipsWrapper", class: ["d-recipe-combobox-multi-select__chip-wrapper", _vm.chipWrapperClass] }, _vm._l(_vm.selectedItemsWithKeys, function({ item, key }) {
+      return _c("dt-chip", _vm._g({ key, ref: "chips", refInFor: true, class: [
+        "d-recipe-combobox-multi-select__chip",
+        { "d-recipe-combobox-multi-select__chip--truncate": !!_vm.chipMaxWidth }
+      ], style: { maxWidth: _vm.chipMaxWidth }, attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, "size": _vm.CHIP_SIZES[_vm.size] }, on: { "keyup": function($event) {
         if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "backspace", void 0, $event.key, void 0)) return null;
         return _vm.onChipRemove(item);
       }, "close": function($event) {
         return _vm.onChipRemove(item);
       } } }, _vm.chipListeners), [_vm._v(" " + _vm._s(item) + " ")]);
-    }), 1), _c("dt-input", _vm._g({ ref: "input", staticClass: "combobox__input", attrs: { "input-class": [_vm.inputClass, { "d-fc-transparent": _vm.hideInputText }], "input-wrapper-class": _vm.inputWrapperClass, "aria-label": _vm.label, "label": _vm.labelVisible ? _vm.label : "", "description": _vm.description, "placeholder": _vm.inputPlaceHolder, "show-messages": _vm.showInputMessages, "messages": _vm.inputMessages, "size": _vm.size }, on: { "input": onInput }, model: { value: _vm.value, callback: function($$v) {
+    }), 1), _c("dt-input", _vm._g({ ref: "input", staticClass: "d-recipe-combobox-multi-select__input", attrs: { "input-class": [_vm.inputClass, { "d-fc-transparent": _vm.hideInputText }], "input-wrapper-class": _vm.inputWrapperClass, "aria-label": _vm.label, "label": _vm.labelVisible ? _vm.label : "", "description": _vm.description, "placeholder": _vm.inputPlaceHolder, "show-messages": _vm.showInputMessages, "messages": _vm.inputMessages, "size": _vm.size }, on: { "input": onInput }, model: { value: _vm.value, callback: function($$v) {
       _vm.value = $$v;
     }, expression: "value" } }, _vm.inputListeners)), _c("dt-validation-messages", { attrs: { "validation-messages": _vm.maxSelectedMessage, "show-messages": _vm.showValidationMessages } })], 1)];
   } }, _vm.$slots.header ? { key: "header", fn: function() {
@@ -564,7 +566,7 @@ var _sfc_render = function render() {
   }, proxy: true } : null, { key: "list", fn: function() {
     return [_c("div", { ref: "list", on: { "mousedown": function($event) {
       $event.preventDefault();
-    } } }, [!_vm.loading ? _vm._t("list") : _c("div", { staticClass: "combobox__list--loading" }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
+    } } }, [!_vm.loading ? _vm._t("list") : _c("div", { staticClass: "d-recipe-combobox-multi-select__list--loading" }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
   }, proxy: true }, _vm.$slots.footer ? { key: "footer", fn: function() {
     return [_c("div", { ref: "footer" }, [_vm._t("footer")], 2)];
   }, proxy: true } : null], null, true) });
@@ -573,10 +575,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "7eac7e22"
+  _sfc_staticRenderFns
 );
 const combobox_multi_select = __component__.exports;
 export {

package/dist/vue2/recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox_multi_select.vue.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=\"combobox__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['combobox__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=\"['combobox__chip', { 'combobox__chip--truncate': !!chipMaxWidth }]\"\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=\"combobox__input\"\n          :input-class=\"[inputClass, { 'd-fc-transparent': hideInputText }]\"\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        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"combobox__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        [`combobox__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\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n  position: relative;\n  display: block;\n}\n\n.combobox__chip-wrapper {\n  position: absolute;\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  padding-left: var(--dt-space-100);\n  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n  max-height: initial;\n  overflow-y: visible;\n}\n\n.combobox__chip-wrapper-md--collapsed {\n  max-height: 2.8rem;\n  overflow-y: hidden;\n}\n\n.combobox__chip-wrapper-sm--collapsed,\n.combobox__chip-wrapper-xs--collapsed {\n  max-height: 2.5rem;\n  overflow-y: hidden;\n}\n\n.combobox__chip {\n  margin-top: var(--dt-space-300);\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  z-index: var(--zi-base1);\n  max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n  flex-grow: 1;\n}\n\n.combobox__list--loading {\n  text-align: center;\n  padding-top: var(--dt-space-500);\n  padding-bottom: var(--dt-space-500);\n}\n\n.combobox__chip--truncate {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n</style>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox_multi_select.vue.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=\"[inputClass, { 'd-fc-transparent': hideInputText }]\"\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        @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":[],"mappings":"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"}

package/dist/vue2/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.cjs

@@ -354,10 +354,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtRecipeComboboxWithPopover = __component__.exports;
 exports.default = DtRecipeComboboxWithPopover;

package/dist/vue2/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox_with_popover.vue.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=\"[DROPDOWN_PADDING_CLASSES[padding], listClass]\"\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":["DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","SrOnlyCloseButtonMixin","LABEL_SIZES","getUniqueString","DROPDOWN_PADDING_CLASSES","POPOVER_CONTENT_WIDTHS","POPOVER_APPEND_TO_VALUES"],"mappings":"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"}
+{"version":3,"file":"combobox_with_popover.vue.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=\"[DROPDOWN_PADDING_CLASSES[padding], listClass]\"\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":["DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","SrOnlyCloseButtonMixin","LABEL_SIZES","getUniqueString","DROPDOWN_PADDING_CLASSES","POPOVER_CONTENT_WIDTHS","POPOVER_APPEND_TO_VALUES"],"mappings":"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"}

package/dist/vue2/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js

@@ -352,10 +352,7 @@ var _sfc_staticRenderFns = [];
 var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_main,
   _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
+  _sfc_staticRenderFns
 );
 const DtRecipeComboboxWithPopover = __component__.exports;
 export {