@dialpad/dialtone 9.130.0 → 9.131.1

package/dist/vue2/lib/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../../components/combobox/combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || $slots.emptyListItem) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { DtKeyboardListNavigationMixin } from '@/common/mixins';\nimport { getUniqueString } from '@/common/utils';\nimport { COMBOBOX_LABEL_SIZES } from '@/components/combobox';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    DtKeyboardListNavigationMixin({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\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     * 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     * 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 when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\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     * @values true, false\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     * Additional class name for the empty list 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    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\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 pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading (loading) {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","ComboboxLoadingList","ComboboxEmptyList","DtKeyboardListNavigationMixin","t","COMBOBOX_LABEL_SIZES","getUniqueString","showList","loading","e","liElement","_a","open","contentRef","eventHandler"],"mappings":"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"}
+{"version":3,"file":"combobox.js","sources":["../../../components/combobox/combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || $slots.emptyListItem) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { DtKeyboardListNavigationMixin } from '@/common/mixins';\nimport { getUniqueString } from '@/common/utils';\nimport { COMBOBOX_LABEL_SIZES } from '@/components/combobox';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    DtKeyboardListNavigationMixin({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\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     * 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     * 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 when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\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     * @values true, false\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     * Additional class name for the empty list 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    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\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 pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading () {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","ComboboxLoadingList","ComboboxEmptyList","DtKeyboardListNavigationMixin","t","COMBOBOX_LABEL_SIZES","getUniqueString","showList","e","liElement","_a","open","contentRef","eventHandler"],"mappings":"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"}

package/dist/vue2/lib/combobox-multi-select/combobox-multi-select-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select-constants.cjs","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n"],"names":["MULTI_SELECT_SIZES","CHIP_SIZES","CHIP_TOP_POSITION","combobox_multi_select_constants"],"mappings":"4GAAY,MAACA,EAAqB,CAEhC,YAAa,KACb,MAAO,KACP,QAAS,IACX,EAEaC,EAAa,CACxB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoB,CAC/B,GAAI,IACJ,GAAI,GACJ,GAAI,EACN,EAEeC,EAAA,CACb,mBAAAH,EACA,WAAAC,EACA,kBAAAC,CACF"}
+{"version":3,"file":"combobox-multi-select-constants.cjs","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n"],"names":["MULTI_SELECT_SIZES","CHIP_SIZES","CHIP_TOP_POSITION","combobox_multi_select_constants"],"mappings":"4GAAY,MAACA,EAAqB,CAEhC,YAAa,KACb,MAAO,KACP,QAAS,IACX,EAEaC,EAAa,CACxB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoB,CAC/B,GAAI,IACJ,GAAI,GACJ,GAAI,EACN,EAEAC,EAAe,CACb,mBAAAH,EACA,WAAAC,EACA,kBAAAC,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select-constants.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n"],"names":["MULTI_SELECT_SIZES","CHIP_SIZES","CHIP_TOP_POSITION","combobox_multi_select_constants"],"mappings":"AAAY,MAACA,IAAqB;AAAA;AAAA,EAEhC,aAAa;AAAA,EACb,OAAO;AAAA,EACP,SAAS;AACX,GAEaC,IAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEeC,IAAA;AAAA,EACb,oBAAAH;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AACF;"}
+{"version":3,"file":"combobox-multi-select-constants.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n"],"names":["MULTI_SELECT_SIZES","CHIP_SIZES","CHIP_TOP_POSITION","combobox_multi_select_constants"],"mappings":"AAAY,MAACA,IAAqB;AAAA;AAAA,EAEhC,aAAa;AAAA,EACb,OAAO;AAAA,EACP,SAAS;AACX,GAEaC,IAAa;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEAC,IAAe;AAAA,EACb,oBAAAH;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAC;AACF;"}

package/dist/vue2/lib/combobox-multi-select/combobox-multi-select-story-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select-story-constants.cjs","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js"],"sourcesContent":["// The item list for default story\nexport const ITEMS_LIST_DATA = [\n  { id: 'item1', value: 'item1', type: 'MAINLINE' },\n  { id: 'item2', value: 'item2', type: 'MAINLINE' },\n  { id: 'item3', value: 'item3', type: 'MAINLINE' },\n  { id: 'item4', value: 'item4', type: 'MAINLINE' },\n  { id: 'item5', value: 'item5 this is a longer item for testing truncation', type: 'MAINLINE' },\n  { id: 'item6', value: 'item6', type: 'MAINLINE' },\n  { id: 'item7', value: 'item7', type: 'MAINLINE' },\n  { id: 'item8', value: 'item8', type: 'Other' },\n  { id: 'item9', value: 'item9', type: 'MAINLINE' },\n  { id: 'item10', value: 'item10 another longer item', type: 'MAINLINE' },\n  { id: 'item11', value: 'item11', type: 'MAINLINE' },\n  { id: 'item12', value: 'item12', type: 'Other' },\n  { id: 'item13', value: 'item13', type: 'MAINLINE' },\n  { id: 'item14', value: 'item14', type: 'MAINLINE' },\n  { id: 'item15', value: 'item15 one more slightly longer item', type: 'MAINLINE' },\n  { id: 'item16', value: 'item16', type: 'MAINLINE' },\n  { id: 'item17', value: 'item17', type: 'MAINLINE' },\n  { id: 'item18', value: 'item18', type: 'Other' },\n  { id: 'item19', value: 'item19', type: 'MAINLINE' },\n  { id: 'item20', value: 'item20', type: 'MAINLINE' },\n  { id: 'item21', value: 'item21', type: 'MAINLINE' },\n  { id: 'item22', value: 'item22', type: 'Other' },\n];\n"],"names":["ITEMS_LIST_DATA"],"mappings":"gFACY,MAACA,EAAkB,CAC7B,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAY,EACjD,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAY,EACjD,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAY,EACjD,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAY,EACjD,CAAE,GAAI,QAAS,MAAO,qDAAsD,KAAM,UAAY,EAC9F,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAY,EACjD,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAY,EACjD,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,OAAS,EAC9C,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAY,EACjD,CAAE,GAAI,SAAU,MAAO,6BAA8B,KAAM,UAAY,EACvE,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAY,EACnD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,OAAS,EAChD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAY,EACnD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAY,EACnD,CAAE,GAAI,SAAU,MAAO,uCAAwC,KAAM,UAAY,EACjF,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAY,EACnD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAY,EACnD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,OAAS,EAChD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAY,EACnD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAY,EACnD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAY,EACnD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,OAAS,CAClD"}
+{"version":3,"file":"combobox-multi-select-story-constants.cjs","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js"],"sourcesContent":["// The item list for default story\nexport const ITEMS_LIST_DATA = [\n  { id: 'item1', value: 'item1', type: 'MAINLINE' },\n  { id: 'item2', value: 'item2', type: 'MAINLINE' },\n  { id: 'item3', value: 'item3', type: 'MAINLINE' },\n  { id: 'item4', value: 'item4', type: 'MAINLINE' },\n  { id: 'item5', value: 'item5 this is a longer item for testing truncation', type: 'MAINLINE' },\n  { id: 'item6', value: 'item6', type: 'MAINLINE' },\n  { id: 'item7', value: 'item7', type: 'MAINLINE' },\n  { id: 'item8', value: 'item8', type: 'Other' },\n  { id: 'item9', value: 'item9', type: 'MAINLINE' },\n  { id: 'item10', value: 'item10 another longer item', type: 'MAINLINE' },\n  { id: 'item11', value: 'item11', type: 'MAINLINE' },\n  { id: 'item12', value: 'item12', type: 'Other' },\n  { id: 'item13', value: 'item13', type: 'MAINLINE' },\n  { id: 'item14', value: 'item14', type: 'MAINLINE' },\n  { id: 'item15', value: 'item15 one more slightly longer item', type: 'MAINLINE' },\n  { id: 'item16', value: 'item16', type: 'MAINLINE' },\n  { id: 'item17', value: 'item17', type: 'MAINLINE' },\n  { id: 'item18', value: 'item18', type: 'Other' },\n  { id: 'item19', value: 'item19', type: 'MAINLINE' },\n  { id: 'item20', value: 'item20', type: 'MAINLINE' },\n  { id: 'item21', value: 'item21', type: 'MAINLINE' },\n  { id: 'item22', value: 'item22', type: 'Other' },\n];\n"],"names":["ITEMS_LIST_DATA"],"mappings":"gFACY,MAACA,EAAkB,CAC7B,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAU,EAC/C,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAU,EAC/C,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAU,EAC/C,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAU,EAC/C,CAAE,GAAI,QAAS,MAAO,qDAAsD,KAAM,UAAU,EAC5F,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAU,EAC/C,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAU,EAC/C,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,OAAO,EAC5C,CAAE,GAAI,QAAS,MAAO,QAAS,KAAM,UAAU,EAC/C,CAAE,GAAI,SAAU,MAAO,6BAA8B,KAAM,UAAU,EACrE,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAU,EACjD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,OAAO,EAC9C,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAU,EACjD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAU,EACjD,CAAE,GAAI,SAAU,MAAO,uCAAwC,KAAM,UAAU,EAC/E,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAU,EACjD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAU,EACjD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,OAAO,EAC9C,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAU,EACjD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAU,EACjD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,UAAU,EACjD,CAAE,GAAI,SAAU,MAAO,SAAU,KAAM,OAAO,CAChD"}

package/dist/vue2/lib/combobox-multi-select/combobox-multi-select-story-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select-story-constants.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js"],"sourcesContent":["// The item list for default story\nexport const ITEMS_LIST_DATA = [\n  { id: 'item1', value: 'item1', type: 'MAINLINE' },\n  { id: 'item2', value: 'item2', type: 'MAINLINE' },\n  { id: 'item3', value: 'item3', type: 'MAINLINE' },\n  { id: 'item4', value: 'item4', type: 'MAINLINE' },\n  { id: 'item5', value: 'item5 this is a longer item for testing truncation', type: 'MAINLINE' },\n  { id: 'item6', value: 'item6', type: 'MAINLINE' },\n  { id: 'item7', value: 'item7', type: 'MAINLINE' },\n  { id: 'item8', value: 'item8', type: 'Other' },\n  { id: 'item9', value: 'item9', type: 'MAINLINE' },\n  { id: 'item10', value: 'item10 another longer item', type: 'MAINLINE' },\n  { id: 'item11', value: 'item11', type: 'MAINLINE' },\n  { id: 'item12', value: 'item12', type: 'Other' },\n  { id: 'item13', value: 'item13', type: 'MAINLINE' },\n  { id: 'item14', value: 'item14', type: 'MAINLINE' },\n  { id: 'item15', value: 'item15 one more slightly longer item', type: 'MAINLINE' },\n  { id: 'item16', value: 'item16', type: 'MAINLINE' },\n  { id: 'item17', value: 'item17', type: 'MAINLINE' },\n  { id: 'item18', value: 'item18', type: 'Other' },\n  { id: 'item19', value: 'item19', type: 'MAINLINE' },\n  { id: 'item20', value: 'item20', type: 'MAINLINE' },\n  { id: 'item21', value: 'item21', type: 'MAINLINE' },\n  { id: 'item22', value: 'item22', type: 'Other' },\n];\n"],"names":["ITEMS_LIST_DATA"],"mappings":"AACY,MAACA,IAAkB;AAAA,EAC7B,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAY;AAAA,EACjD,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAY;AAAA,EACjD,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAY;AAAA,EACjD,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAY;AAAA,EACjD,EAAE,IAAI,SAAS,OAAO,sDAAsD,MAAM,WAAY;AAAA,EAC9F,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAY;AAAA,EACjD,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAY;AAAA,EACjD,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,QAAS;AAAA,EAC9C,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAY;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,8BAA8B,MAAM,WAAY;AAAA,EACvE,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAY;AAAA,EACnD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,QAAS;AAAA,EAChD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAY;AAAA,EACnD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAY;AAAA,EACnD,EAAE,IAAI,UAAU,OAAO,wCAAwC,MAAM,WAAY;AAAA,EACjF,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAY;AAAA,EACnD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAY;AAAA,EACnD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,QAAS;AAAA,EAChD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAY;AAAA,EACnD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAY;AAAA,EACnD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAY;AAAA,EACnD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,QAAS;AAClD;"}
+{"version":3,"file":"combobox-multi-select-story-constants.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js"],"sourcesContent":["// The item list for default story\nexport const ITEMS_LIST_DATA = [\n  { id: 'item1', value: 'item1', type: 'MAINLINE' },\n  { id: 'item2', value: 'item2', type: 'MAINLINE' },\n  { id: 'item3', value: 'item3', type: 'MAINLINE' },\n  { id: 'item4', value: 'item4', type: 'MAINLINE' },\n  { id: 'item5', value: 'item5 this is a longer item for testing truncation', type: 'MAINLINE' },\n  { id: 'item6', value: 'item6', type: 'MAINLINE' },\n  { id: 'item7', value: 'item7', type: 'MAINLINE' },\n  { id: 'item8', value: 'item8', type: 'Other' },\n  { id: 'item9', value: 'item9', type: 'MAINLINE' },\n  { id: 'item10', value: 'item10 another longer item', type: 'MAINLINE' },\n  { id: 'item11', value: 'item11', type: 'MAINLINE' },\n  { id: 'item12', value: 'item12', type: 'Other' },\n  { id: 'item13', value: 'item13', type: 'MAINLINE' },\n  { id: 'item14', value: 'item14', type: 'MAINLINE' },\n  { id: 'item15', value: 'item15 one more slightly longer item', type: 'MAINLINE' },\n  { id: 'item16', value: 'item16', type: 'MAINLINE' },\n  { id: 'item17', value: 'item17', type: 'MAINLINE' },\n  { id: 'item18', value: 'item18', type: 'Other' },\n  { id: 'item19', value: 'item19', type: 'MAINLINE' },\n  { id: 'item20', value: 'item20', type: 'MAINLINE' },\n  { id: 'item21', value: 'item21', type: 'MAINLINE' },\n  { id: 'item22', value: 'item22', type: 'Other' },\n];\n"],"names":["ITEMS_LIST_DATA"],"mappings":"AACY,MAACA,IAAkB;AAAA,EAC7B,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAU;AAAA,EAC/C,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAU;AAAA,EAC/C,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAU;AAAA,EAC/C,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAU;AAAA,EAC/C,EAAE,IAAI,SAAS,OAAO,sDAAsD,MAAM,WAAU;AAAA,EAC5F,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAU;AAAA,EAC/C,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAU;AAAA,EAC/C,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,QAAO;AAAA,EAC5C,EAAE,IAAI,SAAS,OAAO,SAAS,MAAM,WAAU;AAAA,EAC/C,EAAE,IAAI,UAAU,OAAO,8BAA8B,MAAM,WAAU;AAAA,EACrE,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAU;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,QAAO;AAAA,EAC9C,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAU;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAU;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,wCAAwC,MAAM,WAAU;AAAA,EAC/E,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAU;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAU;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,QAAO;AAAA,EAC9C,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAU;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAU;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,WAAU;AAAA,EACjD,EAAE,IAAI,UAAU,OAAO,UAAU,MAAM,QAAO;AAChD;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../combobox-with-popover/combobox-with-popover.cjs"),h=require("../input/input.cjs"),u=require("../chip/chip.cjs"),c=require("../validation-messages/validation-messages.cjs"),d=require("../../common/validators/index.cjs"),g=require("../popover/popover-constants.cjs"),p=require("./combobox-multi-select-constants.cjs"),f=require("../../common/utils/index.cjs"),m=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),b={name:"DtRecipeComboboxMultiSelect",components:{DtRecipeComboboxWithPopover:l.default,DtInput:h.default,DtChip:u.default,DtValidationMessages:c.default},props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},description:{type:String,default:""},placeholder:{type:String,default:"Select one or start typing"},inputMessages:{type:Array,default:()=>[],validator:t=>d.validationMessageValidator(t)},showInputMessages:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingMessage:{type:String,default:"loading..."},showList:{type:Boolean,default:null},listMaxHeight:{type:String,default:"300px"},selectedItems:{type:Array,default:function(){return[]}},maxSelected:{type:Number,default:0},maxSelectedMessage:{type:Array,default:function(){return[]}},hasSuggestionList:{type:Boolean,default:!0},size:{type:String,default:"md",validator:t=>Object.values(p.MULTI_SELECT_SIZES).includes(t)},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>g.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},transition:{type:String,default:"fade"},collapseOnFocusOut:{type:Boolean,default:!1},listMaxWidth:{type:String,default:""},reservedRightSpace:{type:Number,default:64},chipMaxWidth:{type:String,default:""},inputClass:{type:[String,Object,Array],default:""},inputWrapperClass:{type:[String,Object,Array],default:""}},emits:["input","select","remove","max-selected","keyup","combobox-highlight"],data(){return{value:"",popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,initialInputHeight:null,CHIP_SIZES:p.CHIP_SIZES,inputFocused:!1,hideInputText:!1}},computed:{inputPlaceHolder(){var t;return((t=this.selectedItems)==null?void 0:t.length)>0?"":this.placeholder},chipListeners(){return{...this.$listeners,keyup:t=>{this.onChipKeyup(t),this.$emit("keyup",t)}}},inputListeners(){return{...this.$listeners,input:t=>{this.$emit("input",t),this.hasSuggestionList&&this.showComboboxList()},keyup:t=>{this.onInputKeyup(t),this.$emit("keyup",t)},click:t=>{this.hasSuggestionList&&this.showComboboxList()}}},selectedItemsWithKeys(){return this.selectedItems.map(t=>({item:t,key:f.getUniqueString(t)}))},chipWrapperClass(){return{[`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]:!this.inputFocused&&this.collapseOnFocusOut}}},watch:{selectedItems:{async handler(){this.initSelectedItems()}},chipMaxWidth:{async handler(){this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();const t=this.getInput();this.revertInputPadding(t),this.initialInputHeight=t.getBoundingClientRect().height,this.setInputPadding(),this.setChipsTopPosition()}}},mounted(){this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),this.initSelectedItems()},beforeDestroy(){var t;(t=this.resizeWindowObserver)==null||t.unobserve(document.body)},methods:{comboboxHighlight(t){this.$emit("combobox-highlight",t)},async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(t){var e;this.$emit("remove",t),(e=this.$refs.input)==null||e.focus()},onComboboxSelect(t){this.loading||(this.value="",this.$emit("select",t))},showComboboxList(){var t;this.showList==null&&((t=this.$refs.comboboxWithPopover)==null||t.showComboboxList())},closeComboboxList(){var t;this.showList==null&&((t=this.$refs.comboboxWithPopover)==null||t.closeComboboxList())},getChipButtons(){return this.$refs.chips&&this.$refs.chips.map(t=>t.$el.querySelector("button"))},getChips(){return this.$refs.chips&&this.$refs.chips.map(t=>t.$el)},getLastChipButton(){return this.$refs.chips&&this.getChipButtons()[this.getChipButtons().length-1]},getLastChip(){return this.$refs.chips&&this.getChips()[this.getChips().length-1]},getFirstChip(){return this.$refs.chips&&this.getChips()[0]},getInput(){var t;return(t=this.$refs.input)==null?void 0:t.$refs.input},onChipKeyup(t){var i;const e=(i=t.code)==null?void 0:i.toLowerCase();e==="arrowleft"?this.navigateBetweenChips(t.target,!0):e==="arrowright"&&(t.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(t.target,!1))},onInputKeyup(t){var i;const e=(i=t.code)==null?void 0:i.toLowerCase();this.selectedItems.length>0&&t.target.selectionStart===0&&(e==="backspace"||e==="arrowleft")&&this.moveFromInputToChip()},moveFromInputToChip(){var t;this.getLastChipButton().focus(),(t=this.$refs.input)==null||t.blur(),this.closeComboboxList()},moveFromChipToInput(){var t;this.getLastChipButton().blur(),(t=this.$refs.input)==null||t.focus(),this.showComboboxList()},navigateBetweenChips(t,e){var o;const i=this.getChipButtons().indexOf(t),s=e?i-1:i+1;s<0||s>=((o=this.$refs.chips)==null?void 0:o.length)||(this.getChipButtons()[i].blur(),this.getChipButtons()[s].focus(),this.closeComboboxList())},setChipsTopPosition(){const t=this.getInput();if(!t)return;const e=this.$refs.inputSlotWrapper,i=t.getBoundingClientRect().top-e.getBoundingClientRect().top,s=this.$refs.chipsWrapper;s.style.top=i-p.CHIP_TOP_POSITION[this.size]+"px"},setInputPadding(){const t=this.getLastChip(),e=this.getInput(),i=this.$refs.chipsWrapper;if(!e||(this.revertInputPadding(e),this.popoverOffset=[0,4],!t)||this.collapseOnFocusOut&&!this.inputFocused)return;const s=t.offsetLeft+this.getFullWidth(t),o=e.getBoundingClientRect().width-s;o>this.reservedRightSpace?e.style.paddingLeft=s+"px":e.style.paddingLeft="4px";const r=i.getBoundingClientRect().height-4,n=t.getBoundingClientRect().height-4,a=o>this.reservedRightSpace?t.offsetTop+2:r+n-9;e.style.paddingTop=`${a}px`},revertInputPadding(t){t.style.paddingLeft="",t.style.paddingTop="",t.style.paddingBottom=""},getFullWidth(t){const e=window.getComputedStyle(t);return t.offsetWidth+parseInt(e.marginLeft)+parseInt(e.marginRight)},setInputMinWidth(){const t=this.getFirstChip(),e=this.getInput();e&&(t?e.style.minWidth=this.getFullWidth(t)+4+"px":e.style.minWidth="")},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit("max-selected")):this.showValidationMessages=!1)},setInitialInputHeight(){const t=this.getInput();t&&(this.initialInputHeight=t.getBoundingClientRect().height)},async handleInputFocusIn(){this.inputFocused=!0,this.collapseOnFocusOut&&(this.hideInputText=!1,await this.$nextTick(),this.setInputPadding())},async handleInputFocusOut(){if(this.inputFocused=!1,this.collapseOnFocusOut){this.hideInputText=!0;const t=this.getInput();if(!t||!t.style.paddingTop)return;this.revertInputPadding(t)}}}};var y=function(){var e=this,i=e._self._c;return i("dt-recipe-combobox-with-popover",{ref:"comboboxWithPopover",attrs:{label:e.label,"show-list":e.showList,"max-height":e.listMaxHeight,"max-width":e.listMaxWidth,"popover-offset":e.popoverOffset,"has-suggestion-list":e.hasSuggestionList,"content-width":"anchor","append-to":e.appendTo,transition:e.transition},on:{select:e.onComboboxSelect,highlight:e.comboboxHighlight},scopedSlots:e._u([{key:"input",fn:function({onInput:s}){return[i("span",{ref:"inputSlotWrapper",staticClass:"d-recipe-combobox-multi-select__input-wrapper",on:{focusin:e.handleInputFocusIn,focusout:e.handleInputFocusOut}},[i("span",{ref:"chipsWrapper",class:["d-recipe-combobox-multi-select__chip-wrapper",e.chipWrapperClass]},e._l(e.selectedItemsWithKeys,function({item:o,key:r}){return i("dt-chip",e._g({key:r,ref:"chips",refInFor:!0,class:["d-recipe-combobox-multi-select__chip",{"d-recipe-combobox-multi-select__chip--truncate":!!e.chipMaxWidth}],style:{maxWidth:e.chipMaxWidth},attrs:{"label-class":["d-chip__label"],size:e.CHIP_SIZES[e.size]},on:{keyup:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"backspace",void 0,n.key,void 0)?null:e.onChipRemove(o)},close:function(n){return e.onChipRemove(o)}}},e.chipListeners),[e._v(" "+e._s(o)+" ")])}),1),i("dt-input",e._g({ref:"input",staticClass:"d-recipe-combobox-multi-select__input",attrs:{"input-class":[e.inputClass,{"d-recipe-combobox-multi-select__input--hidden":e.hideInputText}],"input-wrapper-class":e.inputWrapperClass,"aria-label":e.label,label:e.labelVisible?e.label:"",description:e.description,placeholder:e.inputPlaceHolder,"show-messages":e.showInputMessages,messages:e.inputMessages,size:e.size},on:{input:s},model:{value:e.value,callback:function(o){e.value=o},expression:"value"}},e.inputListeners)),i("dt-validation-messages",{attrs:{"validation-messages":e.maxSelectedMessage,"show-messages":e.showValidationMessages}})],1)]}},e.$slots.header?{key:"header",fn:function(){return[i("div",{ref:"header"},[e._t("header")],2)]},proxy:!0}:null,{key:"list",fn:function(){return[i("div",{ref:"list",staticClass:"d-recipe-combobox-multi-select__list",on:{mousedown:function(s){s.preventDefault()}}},[e.loading?i("div",{staticClass:"d-recipe-combobox-multi-select__list--loading"},[e._v(" "+e._s(e.loadingMessage)+" ")]):e._t("list")],2)]},proxy:!0},e.$slots.footer?{key:"footer",fn:function(){return[i("div",{ref:"footer"},[e._t("footer")],2)]},proxy:!0}:null],null,!0)})},C=[],x=m.n(b,y,C);const _=x.exports;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../combobox-with-popover/combobox-with-popover.cjs"),h=require("../input/input.cjs"),u=require("../chip/chip.cjs"),c=require("../validation-messages/validation-messages.cjs"),d=require("../../common/validators/index.cjs"),g=require("../popover/popover-constants.cjs"),p=require("./combobox-multi-select-constants.cjs"),f=require("../../common/utils/index.cjs"),m=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),b={name:"DtRecipeComboboxMultiSelect",components:{DtRecipeComboboxWithPopover:l.default,DtInput:h.default,DtChip:u.default,DtValidationMessages:c.default},props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},description:{type:String,default:""},placeholder:{type:String,default:"Select one or start typing"},inputMessages:{type:Array,default:()=>[],validator:t=>d.validationMessageValidator(t)},showInputMessages:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingMessage:{type:String,default:"loading..."},showList:{type:Boolean,default:null},listMaxHeight:{type:String,default:"300px"},selectedItems:{type:Array,default:function(){return[]}},maxSelected:{type:Number,default:0},maxSelectedMessage:{type:Array,default:function(){return[]}},hasSuggestionList:{type:Boolean,default:!0},size:{type:String,default:"md",validator:t=>Object.values(p.MULTI_SELECT_SIZES).includes(t)},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>g.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},transition:{type:String,default:"fade"},collapseOnFocusOut:{type:Boolean,default:!1},listMaxWidth:{type:String,default:""},reservedRightSpace:{type:Number,default:64},chipMaxWidth:{type:String,default:""},inputClass:{type:[String,Object,Array],default:""},inputWrapperClass:{type:[String,Object,Array],default:""}},emits:["input","select","remove","max-selected","keyup","combobox-highlight"],data(){return{value:"",popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,initialInputHeight:null,CHIP_SIZES:p.CHIP_SIZES,inputFocused:!1,hideInputText:!1}},computed:{inputPlaceHolder(){var t;return((t=this.selectedItems)==null?void 0:t.length)>0?"":this.placeholder},chipListeners(){return{...this.$listeners,keyup:t=>{this.onChipKeyup(t),this.$emit("keyup",t)}}},inputListeners(){return{...this.$listeners,input:t=>{this.$emit("input",t),this.hasSuggestionList&&this.showComboboxList()},keyup:t=>{this.onInputKeyup(t),this.$emit("keyup",t)},click:()=>{this.hasSuggestionList&&this.showComboboxList()}}},selectedItemsWithKeys(){return this.selectedItems.map(t=>({item:t,key:f.getUniqueString(t)}))},chipWrapperClass(){return{[`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]:!this.inputFocused&&this.collapseOnFocusOut}}},watch:{selectedItems:{async handler(){this.initSelectedItems()}},chipMaxWidth:{async handler(){this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();const t=this.getInput();this.revertInputPadding(t),this.initialInputHeight=t.getBoundingClientRect().height,this.setInputPadding(),this.setChipsTopPosition()}}},mounted(){this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),this.initSelectedItems()},beforeDestroy(){var t;(t=this.resizeWindowObserver)==null||t.unobserve(document.body)},methods:{comboboxHighlight(t){this.$emit("combobox-highlight",t)},async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(t){var e;this.$emit("remove",t),(e=this.$refs.input)==null||e.focus()},onComboboxSelect(t){this.loading||(this.value="",this.$emit("select",t))},showComboboxList(){var t;this.showList==null&&((t=this.$refs.comboboxWithPopover)==null||t.showComboboxList())},closeComboboxList(){var t;this.showList==null&&((t=this.$refs.comboboxWithPopover)==null||t.closeComboboxList())},getChipButtons(){return this.$refs.chips&&this.$refs.chips.map(t=>t.$el.querySelector("button"))},getChips(){return this.$refs.chips&&this.$refs.chips.map(t=>t.$el)},getLastChipButton(){return this.$refs.chips&&this.getChipButtons()[this.getChipButtons().length-1]},getLastChip(){return this.$refs.chips&&this.getChips()[this.getChips().length-1]},getFirstChip(){return this.$refs.chips&&this.getChips()[0]},getInput(){var t;return(t=this.$refs.input)==null?void 0:t.$refs.input},onChipKeyup(t){var i;const e=(i=t.code)==null?void 0:i.toLowerCase();e==="arrowleft"?this.navigateBetweenChips(t.target,!0):e==="arrowright"&&(t.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(t.target,!1))},onInputKeyup(t){var i;const e=(i=t.code)==null?void 0:i.toLowerCase();this.selectedItems.length>0&&t.target.selectionStart===0&&(e==="backspace"||e==="arrowleft")&&this.moveFromInputToChip()},moveFromInputToChip(){var t;this.getLastChipButton().focus(),(t=this.$refs.input)==null||t.blur(),this.closeComboboxList()},moveFromChipToInput(){var t;this.getLastChipButton().blur(),(t=this.$refs.input)==null||t.focus(),this.showComboboxList()},navigateBetweenChips(t,e){var o;const i=this.getChipButtons().indexOf(t),s=e?i-1:i+1;s<0||s>=((o=this.$refs.chips)==null?void 0:o.length)||(this.getChipButtons()[i].blur(),this.getChipButtons()[s].focus(),this.closeComboboxList())},setChipsTopPosition(){const t=this.getInput();if(!t)return;const e=this.$refs.inputSlotWrapper,i=t.getBoundingClientRect().top-e.getBoundingClientRect().top,s=this.$refs.chipsWrapper;s.style.top=i-p.CHIP_TOP_POSITION[this.size]+"px"},setInputPadding(){const t=this.getLastChip(),e=this.getInput(),i=this.$refs.chipsWrapper;if(!e||(this.revertInputPadding(e),this.popoverOffset=[0,4],!t)||this.collapseOnFocusOut&&!this.inputFocused)return;const s=t.offsetLeft+this.getFullWidth(t),o=e.getBoundingClientRect().width-s;o>this.reservedRightSpace?e.style.paddingLeft=s+"px":e.style.paddingLeft="4px";const r=i.getBoundingClientRect().height-4,n=t.getBoundingClientRect().height-4,a=o>this.reservedRightSpace?t.offsetTop+2:r+n-9;e.style.paddingTop=`${a}px`},revertInputPadding(t){t.style.paddingLeft="",t.style.paddingTop="",t.style.paddingBottom=""},getFullWidth(t){const e=window.getComputedStyle(t);return t.offsetWidth+parseInt(e.marginLeft)+parseInt(e.marginRight)},setInputMinWidth(){const t=this.getFirstChip(),e=this.getInput();e&&(t?e.style.minWidth=this.getFullWidth(t)+4+"px":e.style.minWidth="")},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit("max-selected")):this.showValidationMessages=!1)},setInitialInputHeight(){const t=this.getInput();t&&(this.initialInputHeight=t.getBoundingClientRect().height)},async handleInputFocusIn(){this.inputFocused=!0,this.collapseOnFocusOut&&(this.hideInputText=!1,await this.$nextTick(),this.setInputPadding())},async handleInputFocusOut(){if(this.inputFocused=!1,this.collapseOnFocusOut){this.hideInputText=!0;const t=this.getInput();if(!t||!t.style.paddingTop)return;this.revertInputPadding(t)}}}};var y=function(){var e=this,i=e._self._c;return i("dt-recipe-combobox-with-popover",{ref:"comboboxWithPopover",attrs:{label:e.label,"show-list":e.showList,"max-height":e.listMaxHeight,"max-width":e.listMaxWidth,"popover-offset":e.popoverOffset,"has-suggestion-list":e.hasSuggestionList,"content-width":"anchor","append-to":e.appendTo,transition:e.transition},on:{select:e.onComboboxSelect,highlight:e.comboboxHighlight},scopedSlots:e._u([{key:"input",fn:function({onInput:s}){return[i("span",{ref:"inputSlotWrapper",staticClass:"d-recipe-combobox-multi-select__input-wrapper",on:{focusin:e.handleInputFocusIn,focusout:e.handleInputFocusOut}},[i("span",{ref:"chipsWrapper",class:["d-recipe-combobox-multi-select__chip-wrapper",e.chipWrapperClass]},e._l(e.selectedItemsWithKeys,function({item:o,key:r}){return i("dt-chip",e._g({key:r,ref:"chips",refInFor:!0,class:["d-recipe-combobox-multi-select__chip",{"d-recipe-combobox-multi-select__chip--truncate":!!e.chipMaxWidth}],style:{maxWidth:e.chipMaxWidth},attrs:{"label-class":["d-chip__label"],size:e.CHIP_SIZES[e.size]},on:{keyup:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"backspace",void 0,n.key,void 0)?null:e.onChipRemove(o)},close:function(n){return e.onChipRemove(o)}}},e.chipListeners),[e._v(" "+e._s(o)+" ")])}),1),i("dt-input",e._g({ref:"input",staticClass:"d-recipe-combobox-multi-select__input",attrs:{"input-class":[e.inputClass,{"d-recipe-combobox-multi-select__input--hidden":e.hideInputText}],"input-wrapper-class":e.inputWrapperClass,"aria-label":e.label,label:e.labelVisible?e.label:"",description:e.description,placeholder:e.inputPlaceHolder,"show-messages":e.showInputMessages,messages:e.inputMessages,size:e.size},on:{input:s},model:{value:e.value,callback:function(o){e.value=o},expression:"value"}},e.inputListeners)),i("dt-validation-messages",{attrs:{"validation-messages":e.maxSelectedMessage,"show-messages":e.showValidationMessages}})],1)]}},e.$slots.header?{key:"header",fn:function(){return[i("div",{ref:"header"},[e._t("header")],2)]},proxy:!0}:null,{key:"list",fn:function(){return[i("div",{ref:"list",staticClass:"d-recipe-combobox-multi-select__list",on:{mousedown:function(s){s.preventDefault()}}},[e.loading?i("div",{staticClass:"d-recipe-combobox-multi-select__list--loading"},[e._v(" "+e._s(e.loadingMessage)+" ")]):e._t("list")],2)]},proxy:!0},e.$slots.footer?{key:"footer",fn:function(){return[i("div",{ref:"footer"},[e._t("footer")],2)]},proxy:!0}:null],null,!0)})},C=[],x=m.n(b,y,C);const _=x.exports;exports.default=_;
 //# sourceMappingURL=combobox-multi-select.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.cjs","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\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     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String }\n     */\n    'input',\n\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when item removed\n     *\n     * @event remove\n     * @type {String}\n     */\n    'remove',\n\n    /**\n     * Event fired when max selected items limit is reached\n     *\n     * @event max-selected\n     * @type {Object}\n     */\n    'max-selected',\n\n    /**\n     * Native keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: event => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.initialInputHeight = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      const spaceLeft = input.getBoundingClientRect().width - left;\n      // input.style.paddingLeft = left + 'px';\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      // Get the chip wrapper height minus the 4px padding\n      const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n      const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = spaceLeft > this.reservedRightSpace\n        ? lastChip.offsetTop + 2\n        : (chipsWrapperHeight + lastChipHeight - 9);\n\n      input.style.paddingTop = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        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","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","inputMessages","validationMessageValidator","MULTI_SELECT_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","_a","event","selectedItem","getUniqueString","input","highlightIndex","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip"],"mappings":"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"}
+{"version":3,"file":"combobox-multi-select.cjs","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\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     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String }\n     */\n    'input',\n\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when item removed\n     *\n     * @event remove\n     * @type {String}\n     */\n    'remove',\n\n    /**\n     * Event fired when max selected items limit is reached\n     *\n     * @event max-selected\n     * @type {Object}\n     */\n    'max-selected',\n\n    /**\n     * Native keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: () => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.initialInputHeight = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      const spaceLeft = input.getBoundingClientRect().width - left;\n      // input.style.paddingLeft = left + 'px';\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      // Get the chip wrapper height minus the 4px padding\n      const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n      const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = spaceLeft > this.reservedRightSpace\n        ? lastChip.offsetTop + 2\n        : (chipsWrapperHeight + lastChipHeight - 9);\n\n      input.style.paddingTop = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        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","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","inputMessages","validationMessageValidator","MULTI_SELECT_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","_a","event","selectedItem","getUniqueString","input","highlightIndex","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ import l from "../chip/chip.js";
 import u from "../validation-messages/validation-messages.js";
 import { validationMessageValidator as c } from "../../common/validators/index.js";
 import { POPOVER_APPEND_TO_VALUES as d } from "../popover/popover-constants.js";
-import { MULTI_SELECT_SIZES as f, CHIP_SIZES as g, CHIP_TOP_POSITION as m } from "./combobox-multi-select-constants.js";
+import { CHIP_TOP_POSITION as f, CHIP_SIZES as g, MULTI_SELECT_SIZES as m } from "./combobox-multi-select-constants.js";
 import { getUniqueString as b } from "../../common/utils/index.js";
 import { n as y } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 const C = {
@@ -138,7 +138,7 @@ const C = {
     size: {
       type: String,
       default: "md",
-      validator: (t) => Object.values(f).includes(t)
+      validator: (t) => Object.values(m).includes(t)
     },
     /**
      * Sets the element to which the popover is going to append to.
@@ -289,7 +289,7 @@ const C = {
         keyup: (t) => {
           this.onInputKeyup(t), this.$emit("keyup", t);
         },
-        click: (t) => {
+        click: () => {
           this.hasSuggestionList && this.showComboboxList();
         }
       };
@@ -408,7 +408,7 @@ const C = {
       const t = this.getInput();
       if (!t) return;
       const e = this.$refs.inputSlotWrapper, i = t.getBoundingClientRect().top - e.getBoundingClientRect().top, s = this.$refs.chipsWrapper;
-      s.style.top = i - m[this.size] + "px";
+      s.style.top = i - f[this.size] + "px";
     },
     setInputPadding() {
       const t = this.getLastChip(), e = this.getInput(), i = this.$refs.chipsWrapper;

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\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     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String }\n     */\n    'input',\n\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when item removed\n     *\n     * @event remove\n     * @type {String}\n     */\n    'remove',\n\n    /**\n     * Event fired when max selected items limit is reached\n     *\n     * @event max-selected\n     * @type {Object}\n     */\n    'max-selected',\n\n    /**\n     * Native keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: event => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.initialInputHeight = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      const spaceLeft = input.getBoundingClientRect().width - left;\n      // input.style.paddingLeft = left + 'px';\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      // Get the chip wrapper height minus the 4px padding\n      const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n      const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = spaceLeft > this.reservedRightSpace\n        ? lastChip.offsetTop + 2\n        : (chipsWrapperHeight + lastChipHeight - 9);\n\n      input.style.paddingTop = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        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","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","inputMessages","validationMessageValidator","MULTI_SELECT_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","_a","event","selectedItem","getUniqueString","input","highlightIndex","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip"],"mappings":"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"}
+{"version":3,"file":"combobox-multi-select.js","sources":["../../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\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     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String }\n     */\n    'input',\n\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when item removed\n     *\n     * @event remove\n     * @type {String}\n     */\n    'remove',\n\n    /**\n     * Event fired when max selected items limit is reached\n     *\n     * @event max-selected\n     * @type {Object}\n     */\n    'max-selected',\n\n    /**\n     * Native keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: () => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.initialInputHeight = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      const spaceLeft = input.getBoundingClientRect().width - left;\n      // input.style.paddingLeft = left + 'px';\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      // Get the chip wrapper height minus the 4px padding\n      const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n      const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = spaceLeft > this.reservedRightSpace\n        ? lastChip.offsetTop + 2\n        : (chipsWrapperHeight + lastChipHeight - 9);\n\n      input.style.paddingTop = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        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","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","inputMessages","validationMessageValidator","MULTI_SELECT_SIZES","appendTo","POPOVER_APPEND_TO_VALUES","CHIP_SIZES","_a","event","selectedItem","getUniqueString","input","highlightIndex","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","CHIP_TOP_POSITION","lastChip","left","spaceLeft","chipsWrapperHeight","lastChipHeight","el","styles","firstChip"],"mappings":"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"}

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