@dialpad/dialtone-vue 3.146.0 → 3.147.0

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.js","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\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 in selectedItems\"\n            ref=\"chips\"\n            :key=\"item\"\n            :label-class=\"['d-chip__label']\"\n            class=\"combobox__chip\"\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          :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=\"hasSlotContent($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=\"hasSlotContent($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 { hasSlotContent } from '@/common/utils';\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';\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  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      hasSlotContent,\n      inputFocused: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\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    chipWrapperClass () {\n      return {\n        [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      deep: true,\n      handler: async function () {\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  beforeUnmount () {\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      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      input.style.paddingLeft = left + 'px';\n\n      // Get the chip size minus the 4px padding\n      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = lastChip.offsetTop + 2;\n\n      // Add padding to Top only if the chips need more space\n      if (chipsSize > this.initialInputHeight) {\n        input.style.paddingTop = `${top}px`;\n      }\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      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        const input = this.getInput();\n        if (!input) return;\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</style>\n"],"names":["MULTI_SELECT_SIZES","EXTRA_SMALL","SMALL","DEFAULT","CHIP_SIZES","xs","sm","md","CHIP_TOP_POSITION","_sfc_main","name","components","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","mixins","SrOnlyCloseButtonMixin","props","label","type","String","required","labelVisible","Boolean","default","description","placeholder","inputMessages","Array","validator","validationMessageValidator","showInputMessages","loading","loadingMessage","showList","listMaxHeight","selectedItems","maxSelected","Number","maxSelectedMessage","hasSuggestionList","size","t","Object","values","includes","appendTo","HTMLElement","POPOVER_APPEND_TO_VALUES","transition","collapseOnFocusOut","listMaxWidth","emits","data","value","popoverOffset","showValidationMessages","resizeWindowObserver","initialInputHeight","hasSlotContent","inputFocused","computed","inputPlaceHolder","length","chipListeners","keyup","event","onChipKeyup","$emit","inputListeners","input","showComboboxList","onInputKeyup","click","chipWrapperClass","watch","deep","handler","initSelectedItems","$nextTick","setChipsTopPosition","getInput","revertInputPadding","getBoundingClientRect","height","setInputPadding","mounted","setInitialInputHeight","ResizeObserver","observe","document","body","beforeUnmount","unobserve","methods","comboboxHighlight","highlightIndex","setInputMinWidth","checkMaxSelected","onChipRemove","item","$refs","focus","onComboboxSelect","i","comboboxWithPopover","closeComboboxList","getChipButtons","chips","map","chip","$el","querySelector","getChips","getLastChipButton","getLastChip","getFirstChip","key","code","toLowerCase","navigateBetweenChips","target","id","moveFromChipToInput","selectionStart","moveFromInputToChip","blur","toLeft","from","indexOf","to","inputSlotWrapper","top","chipsWrapper","style","lastChip","left","offsetLeft","getFullWidth","paddingLeft","chipsSize","offsetTop","paddingTop","paddingBottom","el","styles","window","getComputedStyle","offsetWidth","parseInt","marginLeft","marginRight","firstChip","minWidth","handleInputFocusIn","handleInputFocusOut","_hoisted_1","ref","class","_hoisted_3","_createBlock","_component_dt_recipe_combobox_with_popover","$props","$data","_ctx","visuallyHiddenCloseLabel","visuallyHiddenClose","onSelect","$options","onHighlight","_withCtx","onInput","_createElementVNode","onFocusin","args","onFocusout","_createElementBlock","_Fragment","_renderList","_openBlock","_component_dt_chip","_mergeProps","ariaLabel","_toHandlers","onKeyup","_withKeys","$event","onClose","_createVNode","_component_dt_input","messages","_component_dt_validation_messages","list","onMousedown","_renderSlot","$slots","undefined","_hoisted_2","_toDisplayString","header","footer"],"mappings":"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"}
+{"version":3,"file":"combobox-multi-select.js","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\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 in selectedItems\"\n            ref=\"chips\"\n            :key=\"item\"\n            :label-class=\"['d-chip__label']\"\n            class=\"combobox__chip\"\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          :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=\"hasSlotContent($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=\"hasSlotContent($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 { hasSlotContent } from '@/common/utils';\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';\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  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      hasSlotContent,\n      inputFocused: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\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    chipWrapperClass () {\n      return {\n        [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      deep: true,\n      handler: async function () {\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  beforeUnmount () {\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      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      input.style.paddingLeft = left + 'px';\n\n      // Get the chip size minus the 4px padding\n      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = lastChip.offsetTop + 2;\n\n      // Add padding to Top only if the chips need more space\n      if (chipsSize > this.initialInputHeight) {\n        input.style.paddingTop = `${top}px`;\n      }\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      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        const input = this.getInput();\n        if (!input) return;\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</style>\n"],"names":["_createBlock","_withCtx","_createElementVNode","_createElementBlock","_Fragment","_renderList","_openBlock","_mergeProps","_toHandlers","_withKeys","_createVNode","_renderSlot","_toDisplayString"],"mappings":"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"}

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

@@ -1,26 +1,26 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lib_combobox = require("../chunks/index-ouh7Bvm-.js");
+const lib_combobox = require("../chunks/index-4qgKeErp.js");
 const common_utils = require("../common/utils.cjs");
-const sr_only_close_button = require("../chunks/sr_only_close_button-gKr0Vlbz.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_popover = require("./popover.cjs");
 const dropdown_constants = require("../chunks/dropdown_constants-2pGCXy7m.js");
-const popover_constants = require("../chunks/popover_constants-h9MD6WUt.js");
-require("../chunks/keyboard_list_navigation-x3D6RcC7.js");
+const popover_constants = require("../chunks/popover_constants-XnGWXaxX.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
 require("./list-item.cjs");
 require("../chunks/list_item_constants-EiqkqZvP.js");
 require("./item-layout.cjs");
 require("../common/constants.cjs");
 require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("./skeleton.cjs");
 require("./button.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/modal-OaWxzqNt.js");
+require("../chunks/modal-VgxXAQFP.js");
 require("./lazy-show.cjs");
 require("tippy.js");
 const _sfc_main = {
@@ -344,13 +344,9 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["id"];
-const _hoisted_2 = {
-  ref: "header"
-};
+const _hoisted_2 = { ref: "header" };
 const _hoisted_3 = ["onMouseleave", "onFocusout"];
-const _hoisted_4 = {
-  ref: "footer"
-};
+const _hoisted_4 = { ref: "footer" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = vue.resolveComponent("combobox-loading-list");
   const _component_combobox_empty_list = vue.resolveComponent("combobox-empty-list");
@@ -372,71 +368,83 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "list-id": $props.listId,
     "data-qa": "dt-combobox"
   }, $options.comboboxListeners), {
-    input: vue.withCtx(({
-      inputProps
-    }) => [vue.createElementVNode("div", {
-      id: $data.externalAnchor,
-      ref: "input",
-      onFocusin: _cache[0] || (_cache[0] = (...args) => $options.onFocusIn && $options.onFocusIn(...args)),
-      onKeydown: [_cache[1] || (_cache[1] = vue.withKeys(($event) => $options.openOnArrowKeyPress($event), ["up"])), _cache[2] || (_cache[2] = vue.withKeys(($event) => $options.openOnArrowKeyPress($event), ["down"]))]
-    }, [vue.renderSlot(_ctx.$slots, "input", {
-      inputProps,
-      onInput: $options.handleDisplayList
-    })], 40, _hoisted_1)]),
-    list: vue.withCtx(({
-      opened,
-      listProps,
-      clearHighlightIndex
-    }) => [vue.createVNode(_component_dt_popover, {
-      ref: "popover",
-      open: $data.isListShown,
-      "onUpdate:open": _cache[3] || (_cache[3] = ($event) => $data.isListShown = $event),
-      "hide-on-click": false,
-      "max-height": $props.maxHeight,
-      "max-width": $props.maxWidth,
-      offset: $props.popoverOffset,
-      sticky: $props.popoverSticky,
-      placement: "bottom-start",
-      "initial-focus-element": "none",
-      padding: "none",
-      role: "listbox",
-      "external-anchor": $data.externalAnchor,
-      "content-width": $props.contentWidth,
-      "content-appear": true,
-      "content-tabindex": null,
-      modal: false,
-      "auto-focus": false,
-      "append-to": $props.appendTo,
-      transition: $props.transition,
-      "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-      "visually-hidden-close": _ctx.visuallyHiddenClose,
-      onOpened: opened
-    }, vue.createSlots({
-      content: vue.withCtx(() => [vue.createElementVNode("div", {
-        ref: "listWrapper",
-        class: vue.normalizeClass([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
-        onMouseleave: clearHighlightIndex,
-        onFocusout: clearHighlightIndex
-      }, [$props.loading ? (vue.openBlock(), vue.createBlock(_component_combobox_loading_list, vue.normalizeProps(vue.mergeProps({
-        key: 0
-      }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? (vue.openBlock(), vue.createBlock(_component_combobox_empty_list, vue.mergeProps({
-        key: 1
-      }, listProps, {
-        message: $props.emptyStateMessage
-      }), null, 16, ["message"])) : vue.renderSlot(_ctx.$slots, "list", {
-        key: 2,
-        listProps
-      })], 42, _hoisted_3)]),
-      _: 2
-    }, [$data.hasSlotContent(_ctx.$slots.header) ? {
-      name: "headerContent",
-      fn: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_2, [vue.renderSlot(_ctx.$slots, "header")], 512)]),
-      key: "0"
-    } : void 0, $data.hasSlotContent(_ctx.$slots.footer) ? {
-      name: "footerContent",
-      fn: vue.withCtx(() => [vue.createElementVNode("div", _hoisted_4, [vue.renderSlot(_ctx.$slots, "footer")], 512)]),
-      key: "1"
-    } : void 0]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "transition", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])]),
+    input: vue.withCtx(({ inputProps }) => [
+      vue.createElementVNode("div", {
+        id: $data.externalAnchor,
+        ref: "input",
+        onFocusin: _cache[0] || (_cache[0] = (...args) => $options.onFocusIn && $options.onFocusIn(...args)),
+        onKeydown: [
+          _cache[1] || (_cache[1] = vue.withKeys(($event) => $options.openOnArrowKeyPress($event), ["up"])),
+          _cache[2] || (_cache[2] = vue.withKeys(($event) => $options.openOnArrowKeyPress($event), ["down"]))
+        ]
+      }, [
+        vue.renderSlot(_ctx.$slots, "input", {
+          inputProps,
+          onInput: $options.handleDisplayList
+        })
+      ], 40, _hoisted_1)
+    ]),
+    list: vue.withCtx(({ opened, listProps, clearHighlightIndex }) => [
+      vue.createVNode(_component_dt_popover, {
+        ref: "popover",
+        open: $data.isListShown,
+        "onUpdate:open": _cache[3] || (_cache[3] = ($event) => $data.isListShown = $event),
+        "hide-on-click": false,
+        "max-height": $props.maxHeight,
+        "max-width": $props.maxWidth,
+        offset: $props.popoverOffset,
+        sticky: $props.popoverSticky,
+        placement: "bottom-start",
+        "initial-focus-element": "none",
+        padding: "none",
+        role: "listbox",
+        "external-anchor": $data.externalAnchor,
+        "content-width": $props.contentWidth,
+        "content-appear": true,
+        "content-tabindex": null,
+        modal: false,
+        "auto-focus": false,
+        "append-to": $props.appendTo,
+        transition: $props.transition,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        "visually-hidden-close": _ctx.visuallyHiddenClose,
+        onOpened: opened
+      }, vue.createSlots({
+        content: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            ref: "listWrapper",
+            class: vue.normalizeClass([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
+            onMouseleave: clearHighlightIndex,
+            onFocusout: clearHighlightIndex
+          }, [
+            $props.loading ? (vue.openBlock(), vue.createBlock(_component_combobox_loading_list, vue.normalizeProps(vue.mergeProps({ key: 0 }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? (vue.openBlock(), vue.createBlock(_component_combobox_empty_list, vue.mergeProps({ key: 1 }, listProps, { message: $props.emptyStateMessage }), null, 16, ["message"])) : vue.renderSlot(_ctx.$slots, "list", {
+              key: 2,
+              listProps
+            })
+          ], 42, _hoisted_3)
+        ]),
+        _: 2
+      }, [
+        $data.hasSlotContent(_ctx.$slots.header) ? {
+          name: "headerContent",
+          fn: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_2, [
+              vue.renderSlot(_ctx.$slots, "header")
+            ], 512)
+          ]),
+          key: "0"
+        } : void 0,
+        $data.hasSlotContent(_ctx.$slots.footer) ? {
+          name: "footerContent",
+          fn: vue.withCtx(() => [
+            vue.createElementVNode("div", _hoisted_4, [
+              vue.renderSlot(_ctx.$slots, "footer")
+            ], 512)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "transition", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])
+    ]),
     _: 3
   }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-with-popover.cjs","sources":["../../recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"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        v-model:open=\"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\"\n      >\n        <template\n          v-if=\"hasSlotContent($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=\"hasSlotContent($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, hasSlotContent } 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      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","mixins","SrOnlyCloseButtonMixin","props","label","type","String","required","labelVisible","Boolean","default","size","validator","t","Object","values","LABEL_SIZES","includes","description","showList","listId","getUniqueString","listClass","Array","onBeginningOfList","Function","onEndOfList","maxHeight","maxWidth","padding","keys","DROPDOWN_PADDING_CLASSES","some","item","contentWidth","POPOVER_CONTENT_WIDTHS","openWithArrowKeys","popoverOffset","popoverSticky","hasSuggestionList","loading","emptyList","emptyStateMessage","appendTo","HTMLElement","POPOVER_APPEND_TO_VALUES","transition","emits","data","isListShown","isInputFocused","isListFocused","externalAnchor","hasSlotContent","computed","comboboxListeners","$attrs","onSelect","onEscape","onHighlight","watch","handler","show","immediate","val","window","addEventListener","onFocusOut","removeEventListener","onOpened","methods","handleDisplayList","value","showComboboxList","closeComboboxList","highlightIndex","$emit","opened","onFocusIn","e","$refs","input","querySelector","target","popoverEl","popover","tip","popper","comboboxEl","composedPath","el","openOnArrowKeyPress","_hoisted_2","ref","_hoisted_4","_openBlock","_createBlock","_component_dt_combobox","_mergeProps","$props","$data","$options","_withCtx","inputProps","_createElementVNode","id","onFocusin","args","onKeydown","_cache","_withKeys","$event","_renderSlot","_ctx","$slots","onInput","list","listProps","clearHighlightIndex","_createVNode","_component_dt_popover","open","offset","sticky","placement","role","modal","visuallyHiddenCloseLabel","visuallyHiddenClose","content","class","_normalizeClass","onMouseleave","onFocusout","_component_combobox_loading_list","_component_combobox_empty_list","key","message","header","footer"],"mappings":"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"}
+{"version":3,"file":"combobox-with-popover.cjs","sources":["../../recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"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        v-model:open=\"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\"\n      >\n        <template\n          v-if=\"hasSlotContent($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=\"hasSlotContent($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, hasSlotContent } 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      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: 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","hasSlotContent","_openBlock","_createBlock","_mergeProps","_withCtx","_createElementVNode","_withKeys","_renderSlot","_createVNode","_normalizeClass"],"mappings":"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"}