@dialpad/dialtone-vue 3.219.0-next.2 → 3.219.1

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.js","sources":["../../../components/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-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    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    v-bind=\"extractNonListeners($attrs)\"\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, index) in selectedItems\"\n            ref=\"chips\"\n            :key=\"`${index}-${item}`\"\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            :size=\"CHIP_SIZES[String(size)]\"\n            :disabled=\"disabled\"\n            v-on=\"chipListeners\"\n            @keydown.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :disabled=\"disabled\"\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-bind=\"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        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"hasSlotContent($slots.footer)\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtComboboxWithPopover from '@/components/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 { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl } from '@/common/utils';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport { COMPONENT_SIZES } from '@/common/constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxMultiSelect',\n\n  components: {\n    DtComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  inheritAttrs: false,\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.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (t) => Object.keys(CHIP_SIZES).includes(String(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     * When true, disables the underlying input.\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\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     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n      */\n    'keydown',\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      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        keydown: event => {\n          this.onChipKeyDown(event);\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        onInput: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        onKeydown: event => {\n          this.onInputKeyDown(event);\n        },\n\n        onKeyup: event => {\n          this.$emit('keyup', event);\n        },\n\n        onClick: () => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${COMPONENT_SIZES[String(this.size)] || this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      deep: true,\n      handler: async function () {\n        await this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        await 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  async 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    await this.initSelectedItems();\n  },\n\n  beforeUnmount () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    extractNonListeners,\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    getChips () {\n      if (!this.selectedItems.length || !this.$refs.chips) return null;\n\n      // Use the order from selectedItems to not rely on DOM order which may be stale.\n      // Track matched indices to handle duplicate item names correctly.\n      const matched = new Set();\n      const chips = this.selectedItems.map(item => {\n        return this.$refs.chips.find((chip, index) => {\n          if (matched.has(index)) return false;\n          const chipLabel = returnFirstEl(chip.$el)?.querySelector('.d-chip__label')?.textContent?.trim();\n          if (chipLabel === item) {\n            matched.add(index);\n            return true;\n          }\n          return false;\n        });\n      });\n      return chips.filter(Boolean).map(chip => returnFirstEl(chip.$el));\n    },\n\n    getChipButtons () {\n      const chips = this.getChips();\n      return chips && chips.map(chip => returnFirstEl(chip).querySelector('button'));\n    },\n\n    getLastChipButton () {\n      const chipButtons = this.getChipButtons();\n      return chipButtons && chipButtons[chipButtons.length - 1];\n    },\n\n    getLastChip () {\n      const chips = this.getChips();\n      return chips && chips[chips.length - 1];\n    },\n\n    getFirstChip () {\n      const chips = this.getChips();\n      return chips && chips[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyDown (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    onInputKeyDown (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 there is selected text, do not focus the last chip\n        if (event.target.selectionEnd !== event.target.selectionStart) {\n          return;\n        }\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[String(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.paddingInlineStart = left + 'px';\n      } else {\n        input.style.paddingInlineStart = '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.paddingBlockStart = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingInlineStart = '';\n      input.style.paddingBlockStart = '';\n      input.style.paddingBlockEnd = '';\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        this.hideInputText = false;\n        await this.$nextTick();\n        this.setInputPadding();\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = true;\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.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtComboboxWithPopover","DtInput","DtChip","DtValidationMessages","inputMessages","validationMessageValidator","CHIP_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","hasSlotContent","_a","event","extractVueListeners","COMPONENT_SIZES","input","extractNonListeners","highlightIndex","item","i","matched","chip","index","_c","_b","returnFirstEl","chips","chipButtons","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip","_hoisted_1","_hoisted_3","_openBlock","_createBlock","_component_dt_combobox_with_popover","_mergeProps","$props","$data","$options","_ctx","_withCtx","onInput","_createElementVNode","args","_createElementBlock","_Fragment","_renderList","_component_dt_chip","_toHandlers","_withKeys","$event","_createVNode","_component_dt_input","_component_dt_validation_messages","_hoisted_2","_toDisplayString","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"combobox-multi-select.js","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-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    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    v-bind=\"extractNonListeners($attrs)\"\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, index) in selectedItems\"\n            ref=\"chips\"\n            :key=\"`${index}-${item}`\"\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            :size=\"CHIP_SIZES[size]\"\n            :disabled=\"disabled\"\n            v-on=\"chipListeners\"\n            @keydown.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :disabled=\"disabled\"\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-bind=\"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        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"hasSlotContent($slots.footer)\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtComboboxWithPopover from '@/components/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 { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl } 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';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxMultiSelect',\n\n  components: {\n    DtComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  inheritAttrs: false,\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     * When true, disables the underlying input.\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\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     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n      */\n    'keydown',\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      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        keydown: event => {\n          this.onChipKeyDown(event);\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        onInput: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        onKeydown: event => {\n          this.onInputKeyDown(event);\n        },\n\n        onKeyup: event => {\n          this.$emit('keyup', event);\n        },\n\n        onClick: () => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\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      deep: true,\n      handler: async function () {\n        await this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        await 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  async 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    await this.initSelectedItems();\n  },\n\n  beforeUnmount () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    extractNonListeners,\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    getChips () {\n      if (!this.selectedItems.length || !this.$refs.chips) return null;\n\n      // Use the order from selectedItems to not rely on DOM order which may be stale.\n      // Track matched indices to handle duplicate item names correctly.\n      const matched = new Set();\n      const chips = this.selectedItems.map(item => {\n        return this.$refs.chips.find((chip, index) => {\n          if (matched.has(index)) return false;\n          const chipLabel = returnFirstEl(chip.$el)?.querySelector('.d-chip__label')?.textContent?.trim();\n          if (chipLabel === item) {\n            matched.add(index);\n            return true;\n          }\n          return false;\n        });\n      });\n      return chips.filter(Boolean).map(chip => returnFirstEl(chip.$el));\n    },\n\n    getChipButtons () {\n      const chips = this.getChips();\n      return chips && chips.map(chip => returnFirstEl(chip).querySelector('button'));\n    },\n\n    getLastChipButton () {\n      const chipButtons = this.getChipButtons();\n      return chipButtons && chipButtons[chipButtons.length - 1];\n    },\n\n    getLastChip () {\n      const chips = this.getChips();\n      return chips && chips[chips.length - 1];\n    },\n\n    getFirstChip () {\n      const chips = this.getChips();\n      return chips && chips[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyDown (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    onInputKeyDown (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 there is selected text, do not focus the last chip\n        if (event.target.selectionEnd !== event.target.selectionStart) {\n          return;\n        }\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        this.hideInputText = false;\n        await this.$nextTick();\n        this.setInputPadding();\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = true;\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.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;;;;;AAuIA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,uBAAA;EACA,SAAA;EACA,QAAA;EACA,sBAAA;EACD;CAED,cAAc;CAEd,OAAO;EAIL,OAAO;GACL,MAAM;GACN,UAAU;GACX;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;GACN,eAAe,EAAE;GACjB,YAAW,MACF,EAA2B,EAAc;GAEnD;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAYD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAQD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;GACN,SAAS,WAAY;AAAE,WAAO,EAAE;;GACjC;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,oBAAoB;GAClB,MAAM;GACN,SAAS,WAAY;AAAE,WAAO,EAAE;;GACjC;EAMD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,OAAO,EAAmB,CAAC,SAAS,EAAE;GAChE;EAOD,UAAU;GACR,MAAM,CAAC,aAAa,OAAO;GAC3B,SAAS;GACT,YAAW,MACF,EAAyB,SAAS,EAAQ,IAC5C,aAAoB;GAE5B;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,oBAAoB;GAClB,MAAM;GACN,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAOD,oBAAoB;GAClB,MAAM;GACN,SAAS;GACV;EAOD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAOD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAOD,mBAAmB;GACjB,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO;EAOL;EAQA;EAQA;EAQA;EAQA;EAQA;EAQA;EACD;CAED,OAAQ;AACN,SAAO;GACL,OAAO;GACP,eAAe,CAAC,GAAG,EAAE;GACrB,wBAAwB;GACxB,sBAAsB;GACtB,oBAAoB;GACpB;GACA;GACA,cAAc;GACd,eAAe;GAChB;;CAGH,UAAU;EACR,mBAAoB;AAClB,UAAO,KAAK,eAAe,SAAS,IAAI,KAAK,KAAK;;EAGpD,gBAAiB;AACf,UAAO,EACL,UAAS,MAAS;AAEhB,IADA,KAAK,cAAc,EAAM,EACzB,KAAK,MAAM,WAAW,EAAM;MAE/B;;EAGH,iBAAkB;AAChB,UAAO;IACL,GAAG,EAAoB,KAAK,OAAO;IACnC,UAAS,MAAS;AAEhB,KADA,KAAK,MAAM,SAAS,EAAM,EACtB,KAAK,qBACP,KAAK,kBAAkB;;IAI3B,YAAW,MAAS;AAClB,UAAK,eAAe,EAAM;;IAG5B,UAAS,MAAS;AAChB,UAAK,MAAM,SAAS,EAAM;;IAG5B,eAAe;AACb,KAAI,KAAK,qBACP,KAAK,kBAAkB;;IAG5B;;EAGH,mBAAoB;AAClB,UAAO,GACJ,gDAAgD,KAAK,KAAK,eAAe,CAAC,KAAK,gBAAgB,KAAK,oBACtG;;EAEJ;CAED,OAAO;EACL,eAAe;GACb,MAAM;GACN,SAAS,iBAAkB;AACzB,UAAM,KAAK,mBAAmB;;GAEjC;EAED,cAAc,EACZ,MAAM,UAAW;AACf,SAAM,KAAK,mBAAmB;KAEjC;EAED,MAAM,QAAS;AAGb,GAFA,MAAM,KAAK,WAAW,EAEtB,KAAK,qBAAqB;;EAG5B,MAAM,cAAe;AAGnB,GAFA,MAAM,KAAK,WAAW,EAEtB,KAAK,qBAAqB;;EAG5B,MAAM,EACJ,MAAM,UAAW;AACf,SAAM,KAAK,WAAW;GACtB,IAAM,IAAQ,KAAK,UAAU;AAI7B,GAHA,KAAK,mBAAmB,EAAM,EAC9B,KAAK,qBAAqB,EAAM,uBAAuB,CAAC,QACxD,KAAK,iBAAiB,EACtB,KAAK,qBAAqB;KAE7B;EACF;CAED,MAAM,UAAW;AASf,EARA,KAAK,uBAAuB,EAE5B,KAAK,uBAAuB,IAAI,eAAe,YAAY;AAEzD,GADA,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB;IACtB,EACF,KAAK,qBAAqB,QAAQ,SAAS,KAAK,EAEhD,MAAM,KAAK,mBAAmB;;CAGhC,gBAAiB;AACf,OAAK,sBAAsB,UAAU,SAAS,KAAK;;CAGrD,SAAS;EACP;EACA,kBAAmB,GAAgB;AACjC,QAAK,MAAM,sBAAsB,EAAe;;EAGlD,MAAM,oBAAqB;AAKzB,GAJA,MAAM,KAAK,WAAW,EACtB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,kBAAkB;;EAGzB,aAAc,GAAM;AAElB,GADA,KAAK,MAAM,UAAU,EAAK,EAC1B,KAAK,MAAM,OAAO,OAAO;;EAG3B,iBAAkB,GAAG;AACf,QAAK,YACT,KAAK,QAAQ,IACb,KAAK,MAAM,UAAU,EAAE;;EAGzB,mBAAoB;AACd,QAAK,YACT,KAAK,MAAM,qBAAqB,kBAAkB;;EAGpD,oBAAqB;AACf,QAAK,YACT,KAAK,MAAM,qBAAqB,mBAAmB;;EAGrD,WAAY;AACV,OAAI,CAAC,KAAK,cAAc,UAAU,CAAC,KAAK,MAAM,MAAO,QAAO;GAI5D,IAAM,oBAAU,IAAI,KAAK;AAYzB,UAXc,KAAK,cAAc,KAAI,MAC5B,KAAK,MAAM,MAAM,MAAM,GAAM,MAC9B,EAAQ,IAAI,EAAM,GAAS,KACb,EAAc,EAAK,IAAI,EAAE,cAAc,iBAAiB,EAAE,aAAa,MAAM,KAC7E,KAChB,EAAQ,IAAI,EAAM,EACX,MAEF,GACP,CACF,CACW,OAAO,QAAQ,CAAC,KAAI,MAAQ,EAAc,EAAK,IAAI,CAAC;;EAGnE,iBAAkB;GAChB,IAAM,IAAQ,KAAK,UAAU;AAC7B,UAAO,KAAS,EAAM,KAAI,MAAQ,EAAc,EAAK,CAAC,cAAc,SAAS,CAAC;;EAGhF,oBAAqB;GACnB,IAAM,IAAc,KAAK,gBAAgB;AACzC,UAAO,KAAe,EAAY,EAAY,SAAS;;EAGzD,cAAe;GACb,IAAM,IAAQ,KAAK,UAAU;AAC7B,UAAO,KAAS,EAAM,EAAM,SAAS;;EAGvC,eAAgB;GACd,IAAM,IAAQ,KAAK,UAAU;AAC7B,UAAO,KAAS,EAAM;;EAGxB,WAAY;AACV,UAAO,KAAK,MAAM,OAAO,MAAM;;EAGjC,cAAe,GAAO;GACpB,IAAM,IAAM,EAAM,MAAM,aAAa;AACrC,GAAI,MAAQ,cAEV,KAAK,qBAAqB,EAAM,QAAQ,GAAK,GACpC,MAAQ,iBACb,EAAM,OAAO,OAAO,KAAK,mBAAmB,CAAC,KAE/C,KAAK,qBAAqB,GAG1B,KAAK,qBAAqB,EAAM,QAAQ,GAAM;;EAKpD,eAAgB,GAAO;GACrB,IAAM,IAAM,EAAM,MAAM,aAAa;AAGrC,OAAI,KAAK,cAAc,SAAS,KAAK,EAAM,OAAO,mBAAmB,GAAG;AAEtE,QAAI,EAAM,OAAO,iBAAiB,EAAM,OAAO,eAC7C;AAEF,KAAI,MAAQ,eAAe,MAAQ,gBACjC,KAAK,qBAAqB;;;EAKhC,sBAAuB;AAGrB,GAFA,KAAK,mBAAmB,CAAC,OAAO,EAChC,KAAK,MAAM,OAAO,MAAM,EACxB,KAAK,mBAAmB;;EAG1B,sBAAuB;AAGrB,GAFA,KAAK,mBAAmB,CAAC,MAAM,EAC/B,KAAK,MAAM,OAAO,OAAO,EACzB,KAAK,kBAAkB;;EAGzB,qBAAsB,GAAQ,GAAQ;GACpC,IAAM,IAAO,KAAK,gBAAgB,CAAC,QAAQ,EAAO,EAC5C,IAAK,IAAS,IAAO,IAAI,IAAO;AAClC,OAAK,KAAK,KAAM,KAAK,MAAM,OAAO,WAGtC,KAAK,gBAAgB,CAAC,GAAM,MAAM,EAClC,KAAK,gBAAgB,CAAC,GAAI,OAAO,EACjC,KAAK,mBAAmB;;EAG1B,sBAAuB;GAGrB,IAAM,IAAQ,KAAK,UAAU;AAC7B,OAAI,CAAC,EAAO;GACZ,IAAM,IAAmB,KAAK,MAAM,kBAC9B,IAAM,EAAM,uBAAuB,CAAC,MAC9B,EAAiB,uBAAuB,CAAC,KAC/C,IAAe,KAAK,MAAM;AAChC,KAAa,MAAM,MAAO,IAAM,EAAkB,KAAK,QAAS;;EAGlE,kBAAmB;GACjB,IAAM,IAAW,KAAK,aAAa,EAC7B,IAAQ,KAAK,UAAU,EACvB,IAAe,KAAK,MAAM;AAOhC,OANI,CAAC,MACL,KAAK,mBAAmB,EAAM,EAC9B,KAAK,gBAAgB,CAAC,GAAG,EAAE,EACvB,CAAC,MAGD,KAAK,sBAAsB,CAAC,KAAK,aAAc;GAInD,IAAM,IAAO,EAAS,aAAa,KAAK,aAAa,EAAS,EACxD,IAAY,EAAM,uBAAuB,CAAC,QAAQ;AAGxD,GAAI,IAAY,KAAK,qBACnB,EAAM,MAAM,cAAc,IAAO,OAEjC,EAAM,MAAM,cAAc;GAI5B,IAAM,IAAqB,EAAa,uBAAuB,CAAC,SAAS,GACnE,IAAiB,EAAS,uBAAuB,CAAC,SAAS,GAG3D,IAAM,IAAY,KAAK,qBACzB,EAAS,YAAY,IACpB,IAAqB,IAAiB;AAE3C,KAAM,MAAM,aAAa,GAAG,EAAI;;EAGlC,mBAAoB,GAAO;AAGzB,GAFA,EAAM,MAAM,cAAc,IAC1B,EAAM,MAAM,aAAa,IACzB,EAAM,MAAM,gBAAgB;;EAG9B,aAAc,GAAI;GAChB,IAAM,IAAS,OAAO,iBAAiB,EAAG;AAC1C,UAAO,EAAG,cAAc,SAAS,EAAO,WAAU,GAAI,SAAS,EAAO,YAAY;;EAGpF,mBAAoB;GAElB,IAAM,IAAY,KAAK,cAAc,EAC/B,IAAQ,KAAK,UAAU;AACxB,SACD,IAEF,EAAM,MAAM,WAAY,KAAK,aAAa,EAAS,GAAI,IAAK,OAE5D,EAAM,MAAM,WAAW;;EAI3B,mBAAoB;AACd,QAAK,gBAAgB,MACrB,KAAK,cAAc,SAAS,KAAK,eACnC,KAAK,yBAAyB,IAC9B,KAAK,MAAM,eAAe,IAE1B,KAAK,yBAAyB;;EAIlC,wBAAyB;GACvB,IAAM,IAAQ,KAAK,UAAU;AACxB,SACL,KAAK,qBAAqB,EAAM,uBAAuB,CAAC;;EAG1D,MAAM,qBAAsB;AAE1B,GADA,KAAK,eAAe,IAChB,KAAK,uBACP,KAAK,gBAAgB,IACrB,MAAM,KAAK,WAAW,EACtB,KAAK,iBAAiB;;EAI1B,MAAM,sBAAuB;AAE3B,OADA,KAAK,eAAe,IAChB,KAAK,oBAAoB;AAC3B,SAAK,gBAAgB;IACrB,IAAM,IAAQ,KAAK,UAAU;AAG7B,QAFI,CAAC,KAED,CAAC,EAAM,MAAM,WACf;AAEF,SAAK,mBAAmB,EAAM;;;EAGnC;CACF,QAzsBU,KAAI,UAAQ;;CAkBb,OAAM;SAYL,KAAI,UAAQ;;;aA7GrB,EAiH2B,GAjH3B,EAiH2B;EAhHzB,KAAI;EACH,OAAO,EAAA;EACP,aAAW,EAAA;EACX,cAAY,EAAA;EACZ,aAAW,EAAA;EACX,kBAAgB,EAAA;EAChB,uBAAqB,EAAA;EACtB,iBAAc;EACb,aAAW,EAAA;EACX,YAAY,EAAA;IACL,EAAA,oBAAoB,EAAA,OAAM,EAAA;EACjC,UAAQ,EAAA;EACR,aAAW,EAAA;;EAED,OAAK,GAwDP,EAxDW,iBAAO,CACzB,EAuDO,QAAA;GAtDL,KAAI;GACJ,OAAM;GACL,WAAO,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,sBAAA,EAAA,mBAAA,GAAA,EAAkB;GAC3B,YAAQ,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,uBAAA,EAAA,oBAAA,GAAA,EAAmB;;GAE9B,EAsBO,QAAA;IArBL,KAAI;IACH,OAAK,EAAA,CAAA,gDAAmD,EAAA,iBAAgB,CAAA;eAEzE,EAiBU,GAAA,MAAA,EAhBgB,EAAA,gBAAhB,GAAM,YADhB,EAiBU,GAjBV,EAiBU;;IAfR,KAAI;IACH,KAAG,GAAK,EAAK,GAAI;IACjB,eAAa,CAAA,gBAAiB;IAC9B,OAAK,CAAA,wCAAA,EAAA,kDAAA,CAAA,CAA8H,EAAA,cAAY,CAAA;IAI/I,OAAK,EAAA,UAAc,EAAA,cAAY;IAC/B,MAAM,EAAA,WAAW,EAAA;IACjB,UAAU,EAAA;MACX,EAAoB,EAAd,cAAa,EAAA;IAClB,WAAO,GAAA,MAAY,EAAA,aAAa,EAAI,EAAA,CAAA,YAAA,CAAA;IACpC,UAAK,MAAE,EAAA,aAAa,EAAI;;qBAEf,CAAA,EAAA,EAAP,EAAI,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;GAIX,EAmBE,GAnBF,EAmBE;IAlBA,KAAI;gBACK,EAAA;kDAAA,EAAA,QAAK;IACd,OAAM;IACL,eAAW,CAAgB,EAAA,YAAU,EAAA,iDAAmE,EAAA,eAAA,CAAA;IAIxG,uBAAqB,EAAA;IACrB,UAAU,EAAA;IACV,cAAY,EAAA;IACZ,OAAO,EAAA,eAAe,EAAA,QAAK;IAC3B,aAAa,EAAA;IACb,aAAa,EAAA;IACb,iBAAe,EAAA;IACf,UAAU,EAAA;IACV,MAAM,EAAA;MACC,EAAA,gBAAc,EACd,YAAO,CAAA,EAAA,MAAA,IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA,CAAA;GAGjB,EAGE,GAAA;IAFC,uBAAqB,EAAA;IACrB,iBAAe,EAAA;;;EAgBX,MAAI,QAgBP,CAfN,EAeM,OAAA;GAdJ,KAAI;GACJ,OAAM;GACL,aAAS,EAAA,OAAA,EAAA,KAAA,QAAV,IAAkB,CAAA,UAAA,CAAA;MAGT,EAAA,WAEP,GAAA,EACF,EAKM,OALN,GAKM,EADD,EAAA,eAAc,EAAA,EAAA,IARnB,EAGE,EAAA,QAAA,QAAA,EAAA,KAAA,GAAA,CAAA,CAKiB,EAAA,IAAA,CAAA,CAAA;;KAvBf,EAAA,eAAe,EAAA,OAAO,OAAM,GAAA;QACjC;cAIK,CAFN,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,EAAA,IAAA,CAAA,CAAA;;aA0BlB,EAAA,eAAe,EAAA,OAAO,OAAM,GAAA;QACjC;cAIK,CAFN,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,EAAA,IAAA,CAAA,CAAA"}

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

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

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

@@ -1,10 +1,3 @@
-import { default as t, default as S } from "./combobox-multi-select.js";
-import { CHIP_SIZES as l, CHIP_TOP_POSITION as C, MULTI_SELECT_SIZES as _ } from "./combobox-multi-select-constants.js";
-export {
-  l as CHIP_SIZES,
-  C as CHIP_TOP_POSITION,
-  t as DtComboboxMultiSelect,
-  S as DtRecipeComboboxMultiSelect,
-  _ as MULTI_SELECT_SIZES
-};
-//# sourceMappingURL=index.js.map
+import { CHIP_SIZES as e, CHIP_TOP_POSITION as t, MULTI_SELECT_SIZES as n } from "./combobox-multi-select-constants.js";
+import r from "./combobox-multi-select.js";
+export { e as CHIP_SIZES, t as CHIP_TOP_POSITION, r as DtComboboxMultiSelect, r as DtRecipeComboboxMultiSelect, n as MULTI_SELECT_SIZES };

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("../combobox/combobox-loading-list.cjs"),y=require("../combobox/combobox-empty-list.cjs"),u=require("../../common/utils/index.cjs"),_=require("../../mode_constants-DeLSnTcQ.cjs"),t=require("vue"),L=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),x=require("../popover/popover.cjs"),w=require("../combobox/combobox.cjs"),m=require("../dropdown/dropdown-constants.cjs"),h=require("../popover/popover-constants.cjs"),C=require("../combobox/combobox-constants.cjs"),O=require("../../common/constants/sizes.cjs"),v={compatConfig:{MODE:3},name:"DtComboboxWithPopover",components:{DtCombobox:w.default,DtPopover:x.default,ComboboxLoadingList:S.default,ComboboxEmptyList:y.default},props:{contentMode:_.C,label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:[String,Number],default:null,validator:e=>e===null||Object.values(C.COMBOBOX_LABEL_SIZES).includes(e)||Object.keys(O.COMPONENT_SIZES).includes(String(e))},description:{type:String,default:""},showList:{type:Boolean,default:null},listId:{type:String,default(){return u.getUniqueString()}},listClass:{type:[String,Array,Object],default:""},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},padding:{type:String,default:"small",validator:e=>Object.keys(m.DROPDOWN_PADDING_CLASSES).some(n=>n===e)},contentWidth:{type:String,default:null,validator:e=>h.POPOVER_CONTENT_WIDTHS.includes(e)},openWithArrowKeys:{type:Boolean,default:!1},popoverOffset:{type:Array,default:()=>[0,4]},popoverSticky:{type:[Boolean,String],default:!1},hasSuggestionList:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>h.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},transition:{type:String,default:"fade"}},emits:["select","escape","highlight","opened"],data(){return{DROPDOWN_PADDING_CLASSES:m.DROPDOWN_PADDING_CLASSES,isListShown:!1,isInputFocused:!1,isListFocused:!1,externalAnchor:u.getUniqueString(),hasSlotContent:u.hasSlotContent}},computed:{comboboxListeners(){return{...this.$attrs,onSelect:this.onSelect,onEscape:this.onEscape,onHighlight:this.onHighlight}}},watch:{showList:{handler:function(e){e!==null&&(this.isListShown=e)},immediate:!0},isListShown(e){e?window.addEventListener("mousedown",this.onFocusOut):window.removeEventListener("mousedown",this.onFocusOut),this.onOpened(e)}},methods:{handleDisplayList(e){!this.hasSuggestionList&&e&&this.showComboboxList(),!this.hasSuggestionList&&!e&&this.closeComboboxList()},showComboboxList(){this.showList==null&&(this.isListShown=!0)},closeComboboxList(){this.showList==null&&(this.isListShown=!1)},onSelect(e){this.loading||(this.$emit("select",e),this.hasSuggestionList||this.closeComboboxList())},onEscape(){this.$emit("escape"),this.closeComboboxList()},onHighlight(e){this.loading||this.$emit("highlight",e)},onOpened(e){this.$emit("opened",e)},onFocusIn(e){var n;this.hasSuggestionList&&e&&((n=this.$refs.input)==null?void 0:n.querySelector("input"))===e.target&&this.showComboboxList()},onFocusOut(e){var r,i,s;const n=(i=(r=this.$refs.popover)==null?void 0:r.tip)==null?void 0:i.popper,o=this.$refs.input;(s=e.composedPath())!=null&&s.some(a=>[n,o].includes(a))||this.closeComboboxList()},openOnArrowKeyPress(){this.showList!==null||this.isListShown||!this.openWithArrowKeys||this.showComboboxList()}}},E=["id"],P={ref:"header"},D=["onMouseleave","onFocusout"],A={ref:"footer"};function N(e,n,o,r,i,s){const a=t.resolveComponent("combobox-loading-list"),b=t.resolveComponent("combobox-empty-list"),p=t.resolveComponent("dt-popover"),f=t.resolveComponent("dt-combobox");return t.openBlock(),t.createBlock(f,t.mergeProps({ref:"combobox",loading:o.loading,label:o.label,"label-visible":o.labelVisible,size:o.size,description:o.description,"empty-list":o.emptyList,"empty-state-message":o.emptyStateMessage,"show-list":i.isListShown,"on-beginning-of-list":o.onBeginningOfList,"on-end-of-list":o.onEndOfList,"list-rendered-outside":!0,"list-id":o.listId,"data-qa":"dt-combobox"},s.comboboxListeners),{input:t.withCtx(({inputProps:d})=>[t.createElementVNode("div",{id:i.externalAnchor,ref:"input",onFocusin:n[0]||(n[0]=(...l)=>s.onFocusIn&&s.onFocusIn(...l)),onKeydown:[n[1]||(n[1]=t.withKeys(l=>s.openOnArrowKeyPress(l),["up"])),n[2]||(n[2]=t.withKeys(l=>s.openOnArrowKeyPress(l),["down"]))]},[t.renderSlot(e.$slots,"input",{inputProps:d,onInput:s.handleDisplayList})],40,E)]),list:t.withCtx(({opened:d,listProps:l,clearHighlightIndex:c})=>[t.createVNode(p,{ref:"popover",open:i.isListShown,"onUpdate:open":n[3]||(n[3]=g=>i.isListShown=g),"hide-on-click":!1,"max-height":o.maxHeight,"max-width":o.maxWidth,offset:o.popoverOffset,sticky:o.popoverSticky,"content-mode":o.contentMode,placement:"bottom-start","initial-focus-element":"none",padding:"none",role:"listbox","external-anchor":i.externalAnchor,"content-width":o.contentWidth,"content-appear":!0,"content-tabindex":null,modal:!1,"auto-focus":!1,"append-to":o.appendTo,transition:o.transition,onOpened:d},t.createSlots({content:t.withCtx(()=>[t.createElementVNode("div",{ref:"listWrapper",class:t.normalizeClass(["d-recipe-combobox-with-popover__list",i.DROPDOWN_PADDING_CLASSES[o.padding],o.listClass]),onMouseleave:c,onFocusout:c},[o.loading?(t.openBlock(),t.createBlock(a,t.normalizeProps(t.mergeProps({key:0},l)),null,16)):o.emptyList&&o.emptyStateMessage?(t.openBlock(),t.createBlock(b,t.mergeProps({key:1},l,{message:o.emptyStateMessage}),null,16,["message"])):t.renderSlot(e.$slots,"list",{key:2,listProps:l})],42,D)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:"headerContent",fn:t.withCtx(()=>[t.createElementVNode("div",P,[t.renderSlot(e.$slots,"header")],512)]),key:"0"}:void 0,i.hasSlotContent(e.$slots.footer)?{name:"footerContent",fn:t.withCtx(()=>[t.createElementVNode("div",A,[t.renderSlot(e.$slots,"footer")],512)]),key:"1"}:void 0]),1032,["open","max-height","max-width","offset","sticky","content-mode","external-anchor","content-width","append-to","transition","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"])}const k=L._(v,[["render",N]]);exports.default=k;
-//# sourceMappingURL=combobox-with-popover.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../combobox/combobox-loading-list.cjs`),r=require(`../combobox/combobox-empty-list.cjs`),i=require(`../../combobox-DhjZxfUw.cjs`),a=require(`../combobox/combobox-constants.cjs`),o=require(`../popover/popover-constants.cjs`),s=require(`../popover/popover.cjs`),c=require(`../dropdown/dropdown-constants.cjs`);let l=require(`vue`);var u={compatConfig:{MODE:3},name:`DtComboboxWithPopover`,components:{DtCombobox:i.t,DtPopover:s.default,ComboboxLoadingList:n.default,ComboboxEmptyList:r.default},props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:e=>Object.values(a.COMBOBOX_LABEL_SIZES).includes(e)},description:{type:String,default:``},showList:{type:Boolean,default:null},listId:{type:String,default(){return e.getUniqueString()}},listClass:{type:[String,Array,Object],default:``},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},maxHeight:{type:String,default:``},maxWidth:{type:String,default:``},padding:{type:String,default:`small`,validator:e=>Object.keys(c.DROPDOWN_PADDING_CLASSES).some(t=>t===e)},contentWidth:{type:String,default:null,validator:e=>o.POPOVER_CONTENT_WIDTHS.includes(e)},openWithArrowKeys:{type:Boolean,default:!1},popoverOffset:{type:Array,default:()=>[0,4]},popoverSticky:{type:[Boolean,String],default:!1},hasSuggestionList:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:``},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>o.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},transition:{type:String,default:`fade`}},emits:[`select`,`escape`,`highlight`,`opened`],data(){return{DROPDOWN_PADDING_CLASSES:c.DROPDOWN_PADDING_CLASSES,isListShown:!1,isInputFocused:!1,isListFocused:!1,externalAnchor:e.getUniqueString(),hasSlotContent:e.hasSlotContent}},computed:{comboboxListeners(){return{...this.$attrs,onSelect:this.onSelect,onEscape:this.onEscape,onHighlight:this.onHighlight}}},watch:{showList:{handler:function(e){e!==null&&(this.isListShown=e)},immediate:!0},isListShown(e){e?window.addEventListener(`mousedown`,this.onFocusOut):window.removeEventListener(`mousedown`,this.onFocusOut),this.onOpened(e)}},methods:{handleDisplayList(e){!this.hasSuggestionList&&e&&this.showComboboxList(),!this.hasSuggestionList&&!e&&this.closeComboboxList()},showComboboxList(){this.showList??(this.isListShown=!0)},closeComboboxList(){this.showList??(this.isListShown=!1)},onSelect(e){this.loading||(this.$emit(`select`,e),this.hasSuggestionList||this.closeComboboxList())},onEscape(){this.$emit(`escape`),this.closeComboboxList()},onHighlight(e){this.loading||this.$emit(`highlight`,e)},onOpened(e){this.$emit(`opened`,e)},onFocusIn(e){this.hasSuggestionList&&e&&this.$refs.input?.querySelector(`input`)===e.target&&this.showComboboxList()},onFocusOut(e){let t=this.$refs.popover?.tip?.popper,n=this.$refs.input;e.composedPath()?.some(e=>[t,n].includes(e))||this.closeComboboxList()},openOnArrowKeyPress(){this.showList!==null||this.isListShown||!this.openWithArrowKeys||this.showComboboxList()}}},d=[`id`],f={ref:`header`},p=[`onMouseleave`,`onFocusout`],m={ref:`footer`};function h(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`combobox-loading-list`),s=(0,l.resolveComponent)(`combobox-empty-list`),c=(0,l.resolveComponent)(`dt-popover`),u=(0,l.resolveComponent)(`dt-combobox`);return(0,l.openBlock)(),(0,l.createBlock)(u,(0,l.mergeProps)({ref:`combobox`,loading:n.loading,label:n.label,"label-visible":n.labelVisible,size:n.size,description:n.description,"empty-list":n.emptyList,"empty-state-message":n.emptyStateMessage,"show-list":i.isListShown,"on-beginning-of-list":n.onBeginningOfList,"on-end-of-list":n.onEndOfList,"list-rendered-outside":!0,"list-id":n.listId,"data-qa":`dt-combobox`},a.comboboxListeners),{input:(0,l.withCtx)(({inputProps:n})=>[(0,l.createElementVNode)(`div`,{id:i.externalAnchor,ref:`input`,onFocusin:t[0]||(t[0]=(...e)=>a.onFocusIn&&a.onFocusIn(...e)),onKeydown:[t[1]||(t[1]=(0,l.withKeys)(e=>a.openOnArrowKeyPress(e),[`up`])),t[2]||(t[2]=(0,l.withKeys)(e=>a.openOnArrowKeyPress(e),[`down`]))]},[(0,l.renderSlot)(e.$slots,`input`,{inputProps:n,onInput:a.handleDisplayList})],40,d)]),list:(0,l.withCtx)(({opened:r,listProps:a,clearHighlightIndex:u})=>[(0,l.createVNode)(c,{ref:`popover`,open:i.isListShown,"onUpdate:open":t[3]||(t[3]=e=>i.isListShown=e),"hide-on-click":!1,"max-height":n.maxHeight,"max-width":n.maxWidth,offset:n.popoverOffset,sticky:n.popoverSticky,placement:`bottom-start`,"initial-focus-element":`none`,padding:`none`,role:`listbox`,"external-anchor":i.externalAnchor,"content-width":n.contentWidth,"content-appear":!0,"content-tabindex":null,modal:!1,"auto-focus":!1,"append-to":n.appendTo,transition:n.transition,onOpened:r},(0,l.createSlots)({content:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,{ref:`listWrapper`,class:(0,l.normalizeClass)([`d-recipe-combobox-with-popover__list`,i.DROPDOWN_PADDING_CLASSES[n.padding],n.listClass]),onMouseleave:u,onFocusout:u},[n.loading?((0,l.openBlock)(),(0,l.createBlock)(o,(0,l.normalizeProps)((0,l.mergeProps)({key:0},a)),null,16)):n.emptyList&&n.emptyStateMessage?((0,l.openBlock)(),(0,l.createBlock)(s,(0,l.mergeProps)({key:1},a,{message:n.emptyStateMessage}),null,16,[`message`])):(0,l.renderSlot)(e.$slots,`list`,{key:2,listProps:a})],42,p)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`headerContent`,fn:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,f,[(0,l.renderSlot)(e.$slots,`header`)],512)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footerContent`,fn:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,m,[(0,l.renderSlot)(e.$slots,`footer`)],512)]),key:`1`}:void 0]),1032,[`open`,`max-height`,`max-width`,`offset`,`sticky`,`external-anchor`,`content-width`,`append-to`,`transition`,`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`])}var g=t.t(u,[[`render`,h]]);exports.default=g;
+//# sourceMappingURL=combobox-with-popover.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-with-popover.cjs","sources":["../../../components/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        :content-mode=\"contentMode\"\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        @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=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"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, COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { COMPONENT_SIZES } from '@/common/constants';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  props: {\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\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.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: null,\n      validator: (t) => t === null\n        || Object.values(COMBOBOX_LABEL_SIZES).includes(t)\n        || Object.keys(COMPONENT_SIZES).includes(String(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","DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","CONTENT_MODE_PROP","t","COMBOBOX_LABEL_SIZES","COMPONENT_SIZES","getUniqueString","padding","DROPDOWN_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","appendTo","POPOVER_APPEND_TO_VALUES","hasSlotContent","show","val","value","highlightIndex","opened","_a","popoverEl","_b","comboboxEl","_c","el","_hoisted_2","_hoisted_4","_openBlock","_createBlock","_component_dt_combobox","_mergeProps","$props","$data","$options","_withCtx","inputProps","_createElementVNode","args","_cache","_withKeys","$event","_renderSlot","_ctx","listProps","clearHighlightIndex","_createVNode","_component_dt_popover","_normalizeClass","_component_combobox_loading_list","_component_combobox_empty_list"],"mappings":"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"}
+{"version":3,"file":"combobox-with-popover.cjs","names":[],"sources":["../../../components/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        @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=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"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, COMBOBOX_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';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\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(COMBOBOX_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"],"mappings":"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"}