@dialpad/dialtone-vue 2.152.1 → 2.153.0

package/dist/lib/collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.js","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n    v-on=\"$listeners\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"$listeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"$listeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { getUniqueString } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !this.$scopedSlots.anchor) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":"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"}
+{"version":3,"file":"collapsible.js","sources":["../../components/collapsible/collapsible_lazy_show.vue","../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n    v-on=\"$listeners\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-on=\"$listeners\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n","<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"$listeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"$listeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { getUniqueString } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  mounted () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !this.$scopedSlots.anchor) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","props","show","type","Boolean","default","appear","elementType","String","data","initialized","computed","isCSSEnabled","process","env","NODE_ENV","watch","newValue","methods","beforeEnter","element","requestAnimationFrame","style","height","enter","scrollHeight","afterEnter","beforeLeave","offsetHeight","leave","afterLeave","components","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIcon","anchorText","open","id","getUniqueString","contentElementType","anchorClass","Array","Object","contentClass","maxWidth","maxHeight","ariaLabel","ariaLabelledBy","emits","isOpen","labelledBy","handler","immediate","mounted","validateProperAnchor","onLeaveTransitionComplete","$emit","onEnterTransitionComplete","$refs","content","defaultToggleOpen","toggleOpen","$scopedSlots","anchor","console","error"],"mappings":"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"}

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

@@ -5,31 +5,31 @@ const lib_input = require("./input.cjs");
 const lib_chip = require("./chip.cjs");
 const lib_validationMessages = require("./validation-messages.cjs");
 const common_validators = require("../common/validators.cjs");
-const popover_constants = require("../chunks/popover_constants-XnGWXaxX.js");
-const sr_only_close_button = require("../chunks/sr_only_close_button-ZaGdAHz7.js");
+const popover_constants = require("../chunks/popover_constants-h9MD6WUt.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-2Q9Ny1Nc.js");
 const common_utils = require("../common/utils.cjs");
 const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-require("../chunks/index-gj1jEXP4.js");
-require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
+require("../chunks/index-DyqUqjvI.js");
+require("../chunks/keyboard_list_navigation-x3D6RcC7.js");
 require("./list-item.cjs");
 require("../chunks/list_item_constants-EiqkqZvP.js");
 require("./item-layout.cjs");
 require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-VEA0wI5C.js");
 require("@dialpad/dialtone-icons/icons.json");
 require("../common/constants.cjs");
 require("vue");
 require("./skeleton.cjs");
 require("./popover.cjs");
 require("@linusborg/vue-simple-portal");
-require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/modal-OaWxzqNt.js");
 require("./button.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("./lazy-show.cjs");
 require("tippy.js");
 require("../chunks/dropdown_constants-2pGCXy7m.js");
-require("../chunks/input-Axw-wFj2.js");
+require("../chunks/input-Hqw33WBe.js");
 const MULTI_SELECT_SIZES = {
   // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.
   EXTRA_SMALL: "xs",
@@ -541,39 +541,132 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-recipe-combobox-with-popover", { ref: "comboboxWithPopover", attrs: { "label": _vm.label, "show-list": _vm.showList, "max-height": _vm.listMaxHeight, "max-width": _vm.listMaxWidth, "popover-offset": _vm.popoverOffset, "has-suggestion-list": _vm.hasSuggestionList, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel, "visually-hidden-close": _vm.visuallyHiddenClose, "content-width": "anchor", "append-to": _vm.appendTo, "transition": _vm.transition }, on: { "select": _vm.onComboboxSelect, "highlight": _vm.comboboxHighlight }, scopedSlots: _vm._u([{ key: "input", fn: function({ onInput }) {
-    return [_c("span", { ref: "inputSlotWrapper", staticClass: "combobox__input-wrapper", on: { "focusin": _vm.handleInputFocusIn, "focusout": _vm.handleInputFocusOut } }, [_c("span", { ref: "chipsWrapper", class: ["combobox__chip-wrapper", _vm.chipWrapperClass] }, _vm._l(_vm.selectedItemsWithKeys, function({ item, key }) {
-      return _c("dt-chip", _vm._g({ key, ref: "chips", refInFor: true, staticClass: "combobox__chip", attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, "size": _vm.CHIP_SIZES[_vm.size] }, on: { "keyup": function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "backspace", void 0, $event.key, void 0))
-          return null;
-        return _vm.onChipRemove(item);
-      }, "close": function($event) {
-        return _vm.onChipRemove(item);
-      } } }, _vm.chipListeners), [_vm._v(" " + _vm._s(item) + " ")]);
-    }), 1), _c("dt-input", _vm._g({ ref: "input", staticClass: "combobox__input", attrs: { "aria-label": _vm.label, "label": _vm.labelVisible ? _vm.label : "", "description": _vm.description, "placeholder": _vm.inputPlaceHolder, "show-messages": _vm.showInputMessages, "messages": _vm.inputMessages, "size": _vm.size }, on: { "input": onInput }, model: { value: _vm.value, callback: function($$v) {
-      _vm.value = $$v;
-    }, expression: "value" } }, _vm.inputListeners)), _c("dt-validation-messages", { attrs: { "validation-messages": _vm.maxSelectedMessage, "show-messages": _vm.showValidationMessages } })], 1)];
-  } }, _vm.$slots.header ? { key: "header", fn: function() {
-    return [_c("div", { ref: "header" }, [_vm._t("header")], 2)];
-  }, proxy: true } : null, { key: "list", fn: function() {
-    return [_c("div", { ref: "list", on: { "mousedown": function($event) {
-      $event.preventDefault();
-    } } }, [!_vm.loading ? _vm._t("list") : _c("div", { staticClass: "combobox__list--loading" }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
-  }, proxy: true }, _vm.$slots.footer ? { key: "footer", fn: function() {
-    return [_c("div", { ref: "footer" }, [_vm._t("footer")], 2)];
-  }, proxy: true } : null], null, true) });
+  return _c("dt-recipe-combobox-with-popover", {
+    ref: "comboboxWithPopover",
+    attrs: {
+      "label": _vm.label,
+      "show-list": _vm.showList,
+      "max-height": _vm.listMaxHeight,
+      "max-width": _vm.listMaxWidth,
+      "popover-offset": _vm.popoverOffset,
+      "has-suggestion-list": _vm.hasSuggestionList,
+      "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel,
+      "visually-hidden-close": _vm.visuallyHiddenClose,
+      "content-width": "anchor",
+      "append-to": _vm.appendTo,
+      "transition": _vm.transition
+    },
+    on: {
+      "select": _vm.onComboboxSelect,
+      "highlight": _vm.comboboxHighlight
+    },
+    scopedSlots: _vm._u([{
+      key: "input",
+      fn: function({
+        onInput
+      }) {
+        return [_c("span", {
+          ref: "inputSlotWrapper",
+          staticClass: "combobox__input-wrapper",
+          on: {
+            "focusin": _vm.handleInputFocusIn,
+            "focusout": _vm.handleInputFocusOut
+          }
+        }, [_c("span", {
+          ref: "chipsWrapper",
+          class: ["combobox__chip-wrapper", _vm.chipWrapperClass]
+        }, _vm._l(_vm.selectedItemsWithKeys, function({
+          item,
+          key
+        }) {
+          return _c("dt-chip", _vm._g({
+            key,
+            ref: "chips",
+            refInFor: true,
+            staticClass: "combobox__chip",
+            attrs: {
+              "label-class": ["d-chip__label"],
+              "close-button-props": {
+                ariaLabel: "close"
+              },
+              "size": _vm.CHIP_SIZES[_vm.size]
+            },
+            on: {
+              "keyup": function($event) {
+                if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "backspace", void 0, $event.key, void 0))
+                  return null;
+                return _vm.onChipRemove(item);
+              },
+              "close": function($event) {
+                return _vm.onChipRemove(item);
+              }
+            }
+          }, _vm.chipListeners), [_vm._v(" " + _vm._s(item) + " ")]);
+        }), 1), _c("dt-input", _vm._g({
+          ref: "input",
+          staticClass: "combobox__input",
+          attrs: {
+            "aria-label": _vm.label,
+            "label": _vm.labelVisible ? _vm.label : "",
+            "description": _vm.description,
+            "placeholder": _vm.inputPlaceHolder,
+            "show-messages": _vm.showInputMessages,
+            "messages": _vm.inputMessages,
+            "size": _vm.size
+          },
+          on: {
+            "input": onInput
+          },
+          model: {
+            value: _vm.value,
+            callback: function($$v) {
+              _vm.value = $$v;
+            },
+            expression: "value"
+          }
+        }, _vm.inputListeners)), _c("dt-validation-messages", {
+          attrs: {
+            "validation-messages": _vm.maxSelectedMessage,
+            "show-messages": _vm.showValidationMessages
+          }
+        })], 1)];
+      }
+    }, _vm.$slots.header ? {
+      key: "header",
+      fn: function() {
+        return [_c("div", {
+          ref: "header"
+        }, [_vm._t("header")], 2)];
+      },
+      proxy: true
+    } : null, {
+      key: "list",
+      fn: function() {
+        return [_c("div", {
+          ref: "list",
+          on: {
+            "mousedown": function($event) {
+              $event.preventDefault();
+            }
+          }
+        }, [!_vm.loading ? _vm._t("list") : _c("div", {
+          staticClass: "combobox__list--loading"
+        }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
+      },
+      proxy: true
+    }, _vm.$slots.footer ? {
+      key: "footer",
+      fn: function() {
+        return [_c("div", {
+          ref: "footer"
+        }, [_vm._t("footer")], 2)];
+      },
+      proxy: true
+    } : null], null, true)
+  });
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "e9045f30",
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "e9045f30", null, null);
 const combobox_multi_select = __component__.exports;
 exports.CHIP_SIZES = CHIP_SIZES;
 exports.CHIP_TOP_POSITION = CHIP_TOP_POSITION;

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.cjs","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n","<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n    :visually-hidden-close=\"visuallyHiddenClose\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"combobox__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['combobox__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            class=\"combobox__chip\"\n            :close-button-props=\"{ ariaLabel: 'close' }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"combobox__input\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"combobox__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n  },\n\n  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    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: event => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    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      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      input.style.paddingLeft = left + 'px';\n\n      // Get the chip size minus the 4px padding\n      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = lastChip.offsetTop + 2;\n\n      // Add padding to Top only if the chips need more space\n      if (chipsSize > this.initialInputHeight) {\n        input.style.paddingTop = `${top}px`;\n      }\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        await this.$nextTick();\n        this.setInputPadding();\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        const input = this.getInput();\n        if (!input) return;\n        this.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n  position: relative;\n  display: block;\n}\n\n.combobox__chip-wrapper {\n  position: absolute;\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  padding-left: var(--dt-space-100);\n  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n  max-height: initial;\n  overflow-y: visible;\n}\n\n.combobox__chip-wrapper-md--collapsed {\n  max-height: 2.8rem;\n  overflow-y: hidden;\n}\n\n.combobox__chip-wrapper-sm--collapsed,\n.combobox__chip-wrapper-xs--collapsed {\n  max-height: 2.5rem;\n  overflow-y: hidden;\n}\n\n.combobox__chip {\n  margin-top: var(--dt-space-300);\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  z-index: var(--zi-base1);\n  max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n  flex-grow: 1;\n}\n\n.combobox__list--loading {\n  text-align: center;\n  padding-top: var(--dt-space-500);\n  padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":["DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","validationMessageValidator","POPOVER_APPEND_TO_VALUES","getUniqueString"],"mappings":"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"}
+{"version":3,"file":"combobox-multi-select.cjs","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n","<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n    :visually-hidden-close=\"visuallyHiddenClose\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"combobox__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['combobox__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"({ item, key }) in selectedItemsWithKeys\"\n            ref=\"chips\"\n            :key=\"key\"\n            :label-class=\"['d-chip__label']\"\n            class=\"combobox__chip\"\n            :close-button-props=\"{ ariaLabel: 'close' }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"combobox__input\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-on=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"$slots.header\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"combobox__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n  },\n\n  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    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: event => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    selectedItemsWithKeys () {\n      return this.selectedItems.map(selectedItem => ({\n        item: selectedItem,\n        key: getUniqueString(selectedItem),\n      }));\n    },\n\n    chipWrapperClass () {\n      return {\n        [`combobox__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        this.initSelectedItems();\n      },\n    },\n\n    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      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyup (event) {\n      const key = event.code?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      input.style.paddingLeft = left + 'px';\n\n      // Get the chip size minus the 4px padding\n      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = lastChip.offsetTop + 2;\n\n      // Add padding to Top only if the chips need more space\n      if (chipsSize > this.initialInputHeight) {\n        input.style.paddingTop = `${top}px`;\n      }\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        await this.$nextTick();\n        this.setInputPadding();\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        const input = this.getInput();\n        if (!input) return;\n        this.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n  position: relative;\n  display: block;\n}\n\n.combobox__chip-wrapper {\n  position: absolute;\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  padding-left: var(--dt-space-100);\n  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n  max-height: initial;\n  overflow-y: visible;\n}\n\n.combobox__chip-wrapper-md--collapsed {\n  max-height: 2.8rem;\n  overflow-y: hidden;\n}\n\n.combobox__chip-wrapper-sm--collapsed,\n.combobox__chip-wrapper-xs--collapsed {\n  max-height: 2.5rem;\n  overflow-y: hidden;\n}\n\n.combobox__chip {\n  margin-top: var(--dt-space-300);\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  z-index: var(--zi-base1);\n  max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n  flex-grow: 1;\n}\n\n.combobox__list--loading {\n  text-align: center;\n  padding-top: var(--dt-space-500);\n  padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":["MULTI_SELECT_SIZES","EXTRA_SMALL","SMALL","DEFAULT","CHIP_SIZES","xs","sm","md","CHIP_TOP_POSITION","_sfc_main","name","components","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","mixins","SrOnlyCloseButtonMixin","props","label","type","String","required","labelVisible","Boolean","default","description","placeholder","inputMessages","Array","validator","validationMessageValidator","showInputMessages","loading","loadingMessage","showList","listMaxHeight","selectedItems","maxSelected","Number","maxSelectedMessage","hasSuggestionList","size","t","Object","values","includes","appendTo","HTMLElement","POPOVER_APPEND_TO_VALUES","transition","collapseOnFocusOut","listMaxWidth","emits","data","value","popoverOffset","showValidationMessages","resizeWindowObserver","initialInputHeight","inputFocused","computed","inputPlaceHolder","length","chipListeners","$listeners","keyup","event","onChipKeyup","$emit","inputListeners","input","showComboboxList","onInputKeyup","click","selectedItemsWithKeys","map","selectedItem","item","key","getUniqueString","chipWrapperClass","watch","handler","initSelectedItems","$nextTick","setChipsTopPosition","getInput","revertInputPadding","getBoundingClientRect","height","setInputPadding","mounted","setInitialInputHeight","ResizeObserver","observe","document","body","beforeDestroy","unobserve","methods","comboboxHighlight","highlightIndex","setInputMinWidth","checkMaxSelected","onChipRemove","$refs","focus","onComboboxSelect","i","comboboxWithPopover","closeComboboxList","getChipButtons","chips","chip","$el","querySelector","getChips","getLastChipButton","getLastChip","getFirstChip","code","toLowerCase","navigateBetweenChips","target","id","moveFromChipToInput","selectionStart","moveFromInputToChip","blur","toLeft","from","indexOf","to","inputSlotWrapper","top","chipsWrapper","style","lastChip","left","offsetLeft","getFullWidth","paddingLeft","chipsSize","offsetTop","paddingTop","paddingBottom","el","styles","window","getComputedStyle","offsetWidth","parseInt","marginLeft","marginRight","firstChip","minWidth","handleInputFocusIn","handleInputFocusOut"],"mappings":"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"}

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

@@ -3,31 +3,31 @@ import { DtInput } from "./input.js";
 import { DtChip } from "./chip.js";
 import { DtValidationMessages } from "./validation-messages.js";
 import { validationMessageValidator } from "../common/validators.js";
-import { POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-WsOUIY-m.js";
-import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-81bHIpPu.js";
+import { POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-6YkPPbnk.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-IjMVfBDE.js";
 import { getUniqueString } from "../common/utils.js";
 import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import "../chunks/index-eJ-WWRdf.js";
-import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import "../chunks/index-mBWay1Qb.js";
+import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
 import "./list-item.js";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-TdxqLsS2.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../common/constants.js";
 import "vue";
 import "./skeleton.js";
 import "./popover.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-XOr4kiNZ.js";
+import "../chunks/modal-8X6poIZW.js";
 import "./button.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "./lazy-show.js";
 import "tippy.js";
 import "../chunks/dropdown_constants-w1MXGC3Z.js";
-import "../chunks/input-6kbd8Pju.js";
+import "../chunks/input-PhJeBN6r.js";
 const MULTI_SELECT_SIZES = {
   // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.
   EXTRA_SMALL: "xs",
@@ -539,39 +539,132 @@ const _sfc_main = {
 };
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("dt-recipe-combobox-with-popover", { ref: "comboboxWithPopover", attrs: { "label": _vm.label, "show-list": _vm.showList, "max-height": _vm.listMaxHeight, "max-width": _vm.listMaxWidth, "popover-offset": _vm.popoverOffset, "has-suggestion-list": _vm.hasSuggestionList, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel, "visually-hidden-close": _vm.visuallyHiddenClose, "content-width": "anchor", "append-to": _vm.appendTo, "transition": _vm.transition }, on: { "select": _vm.onComboboxSelect, "highlight": _vm.comboboxHighlight }, scopedSlots: _vm._u([{ key: "input", fn: function({ onInput }) {
-    return [_c("span", { ref: "inputSlotWrapper", staticClass: "combobox__input-wrapper", on: { "focusin": _vm.handleInputFocusIn, "focusout": _vm.handleInputFocusOut } }, [_c("span", { ref: "chipsWrapper", class: ["combobox__chip-wrapper", _vm.chipWrapperClass] }, _vm._l(_vm.selectedItemsWithKeys, function({ item, key }) {
-      return _c("dt-chip", _vm._g({ key, ref: "chips", refInFor: true, staticClass: "combobox__chip", attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, "size": _vm.CHIP_SIZES[_vm.size] }, on: { "keyup": function($event) {
-        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "backspace", void 0, $event.key, void 0))
-          return null;
-        return _vm.onChipRemove(item);
-      }, "close": function($event) {
-        return _vm.onChipRemove(item);
-      } } }, _vm.chipListeners), [_vm._v(" " + _vm._s(item) + " ")]);
-    }), 1), _c("dt-input", _vm._g({ ref: "input", staticClass: "combobox__input", attrs: { "aria-label": _vm.label, "label": _vm.labelVisible ? _vm.label : "", "description": _vm.description, "placeholder": _vm.inputPlaceHolder, "show-messages": _vm.showInputMessages, "messages": _vm.inputMessages, "size": _vm.size }, on: { "input": onInput }, model: { value: _vm.value, callback: function($$v) {
-      _vm.value = $$v;
-    }, expression: "value" } }, _vm.inputListeners)), _c("dt-validation-messages", { attrs: { "validation-messages": _vm.maxSelectedMessage, "show-messages": _vm.showValidationMessages } })], 1)];
-  } }, _vm.$slots.header ? { key: "header", fn: function() {
-    return [_c("div", { ref: "header" }, [_vm._t("header")], 2)];
-  }, proxy: true } : null, { key: "list", fn: function() {
-    return [_c("div", { ref: "list", on: { "mousedown": function($event) {
-      $event.preventDefault();
-    } } }, [!_vm.loading ? _vm._t("list") : _c("div", { staticClass: "combobox__list--loading" }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
-  }, proxy: true }, _vm.$slots.footer ? { key: "footer", fn: function() {
-    return [_c("div", { ref: "footer" }, [_vm._t("footer")], 2)];
-  }, proxy: true } : null], null, true) });
+  return _c("dt-recipe-combobox-with-popover", {
+    ref: "comboboxWithPopover",
+    attrs: {
+      "label": _vm.label,
+      "show-list": _vm.showList,
+      "max-height": _vm.listMaxHeight,
+      "max-width": _vm.listMaxWidth,
+      "popover-offset": _vm.popoverOffset,
+      "has-suggestion-list": _vm.hasSuggestionList,
+      "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel,
+      "visually-hidden-close": _vm.visuallyHiddenClose,
+      "content-width": "anchor",
+      "append-to": _vm.appendTo,
+      "transition": _vm.transition
+    },
+    on: {
+      "select": _vm.onComboboxSelect,
+      "highlight": _vm.comboboxHighlight
+    },
+    scopedSlots: _vm._u([{
+      key: "input",
+      fn: function({
+        onInput
+      }) {
+        return [_c("span", {
+          ref: "inputSlotWrapper",
+          staticClass: "combobox__input-wrapper",
+          on: {
+            "focusin": _vm.handleInputFocusIn,
+            "focusout": _vm.handleInputFocusOut
+          }
+        }, [_c("span", {
+          ref: "chipsWrapper",
+          class: ["combobox__chip-wrapper", _vm.chipWrapperClass]
+        }, _vm._l(_vm.selectedItemsWithKeys, function({
+          item,
+          key
+        }) {
+          return _c("dt-chip", _vm._g({
+            key,
+            ref: "chips",
+            refInFor: true,
+            staticClass: "combobox__chip",
+            attrs: {
+              "label-class": ["d-chip__label"],
+              "close-button-props": {
+                ariaLabel: "close"
+              },
+              "size": _vm.CHIP_SIZES[_vm.size]
+            },
+            on: {
+              "keyup": function($event) {
+                if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "backspace", void 0, $event.key, void 0))
+                  return null;
+                return _vm.onChipRemove(item);
+              },
+              "close": function($event) {
+                return _vm.onChipRemove(item);
+              }
+            }
+          }, _vm.chipListeners), [_vm._v(" " + _vm._s(item) + " ")]);
+        }), 1), _c("dt-input", _vm._g({
+          ref: "input",
+          staticClass: "combobox__input",
+          attrs: {
+            "aria-label": _vm.label,
+            "label": _vm.labelVisible ? _vm.label : "",
+            "description": _vm.description,
+            "placeholder": _vm.inputPlaceHolder,
+            "show-messages": _vm.showInputMessages,
+            "messages": _vm.inputMessages,
+            "size": _vm.size
+          },
+          on: {
+            "input": onInput
+          },
+          model: {
+            value: _vm.value,
+            callback: function($$v) {
+              _vm.value = $$v;
+            },
+            expression: "value"
+          }
+        }, _vm.inputListeners)), _c("dt-validation-messages", {
+          attrs: {
+            "validation-messages": _vm.maxSelectedMessage,
+            "show-messages": _vm.showValidationMessages
+          }
+        })], 1)];
+      }
+    }, _vm.$slots.header ? {
+      key: "header",
+      fn: function() {
+        return [_c("div", {
+          ref: "header"
+        }, [_vm._t("header")], 2)];
+      },
+      proxy: true
+    } : null, {
+      key: "list",
+      fn: function() {
+        return [_c("div", {
+          ref: "list",
+          on: {
+            "mousedown": function($event) {
+              $event.preventDefault();
+            }
+          }
+        }, [!_vm.loading ? _vm._t("list") : _c("div", {
+          staticClass: "combobox__list--loading"
+        }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
+      },
+      proxy: true
+    }, _vm.$slots.footer ? {
+      key: "footer",
+      fn: function() {
+        return [_c("div", {
+          ref: "footer"
+        }, [_vm._t("footer")], 2)];
+      },
+      proxy: true
+    } : null], null, true)
+  });
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  "e9045f30",
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, "e9045f30", null, null);
 const combobox_multi_select = __component__.exports;
 export {
   CHIP_SIZES,