@dialpad/dialtone-vue 2.183.2 → 2.184.1

package/dist/lib/combobox/combobox-loading-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-loading-list.js","sources":["../../../components/combobox/combobox_loading-list.vue"],"sourcesContent":["<template>\n  <ol\n    class=\"d-combobox__loading-list\"\n    aria-busy=\"true\"\n  >\n    <dt-list-item\n      v-for=\"index in 7\"\n      :key=\"index\"\n      role=\"option\"\n      navigation-type=\"none\"\n    >\n      <dt-skeleton\n        :text-option=\"{ type: 'body' }\"\n        :offset=\"0\"\n      />\n    </dt-list-item>\n  </ol>\n</template>\n\n<script>\nimport { DtListItem } from '../list_item';\nimport { DtSkeleton } from '../skeleton';\n\nexport default {\n  name: 'ComboboxLoadingList',\n\n  components: { DtListItem, DtSkeleton },\n};\n</script>\n"],"names":["_sfc_main","DtListItem","DtSkeleton"],"mappings":";;;AAuBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,YAAAC,GAAA,YAAAC,EAAA;AACA;;;;;;;;;;;;"}

package/dist/lib/combobox/combobox.cjs

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("../../common/mixins/keyboard-list-navigation.cjs"),o=require("../../common/utils/index.cjs"),l=require("./combobox-loading-list.cjs"),r=require("./combobox-empty-list.cjs"),a=require("./combobox-constants.cjs"),d=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),h={name:"DtCombobox",components:{ComboboxLoadingList:l.default,ComboboxEmptyList:r.default},mixins:[n.default({indexKey:"highlightIndex",idKey:"highlightId",listElementKey:"getListElement",afterHighlightMethod:"afterHighlight",beginningOfListMethod:"beginningOfListMethod",endOfListMethod:"endOfListMethod",activeItemKey:"activeItemEl"})],props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:i=>Object.values(a.LABEL_SIZES).includes(i)},description:{type:String,default:""},listId:{type:String,default(){return o.getUniqueString()}},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},showList:{type:Boolean,default:!1},listRenderedOutside:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:""},emptyStateClass:{type:[String,Object,Array],default:""},clickOnSelect:{type:Boolean,default:!1}},emits:["select","escape","highlight","opened"],data(){return{outsideRenderedListRef:null}},computed:{inputProps(){return{label:this.label,labelVisible:this.labelVisible,size:this.size,description:this.description,role:"combobox","aria-label":this.label,"aria-expanded":this.showList.toString(),"aria-owns":this.listId,"aria-haspopup":"listbox","aria-activedescendant":this.activeItemId,"aria-controls":this.listId}},listProps(){return{role:"listbox",id:this.listId,class:"d-ps-relative","aria-label":this.label}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemId(){if(!(!this.showList||this.highlightIndex<0||this.loading))return this.highlightId},activeItemEl(){return this.highlightId?this.getListElement().querySelector("#"+this.highlightId):""}},watch:{showList(i){this.listRenderedOutside||(this.setInitialHighlightIndex(),this.$emit("opened",i)),!i&&this.outsideRenderedListRef&&(this.outsideRenderedListRef.removeEventListener("mousemove",this.onMouseHighlight),this.outsideRenderedListRef=null)},loading(i){this.$nextTick(()=>{this.setInitialHighlightIndex()})},$props:{deep:!0,immediate:!0,handler(){this.validateEmptyListProps()}}},created(){this.validateEmptyListProps()},methods:{onMouseHighlight(i){if(this.loading)return;const t=i.target.closest("li");t&&this.highlightId!==t.id&&this.setHighlightId(t.id)},getListElement(){var i;return this.outsideRenderedListRef??((i=this.$refs.listWrapper)==null?void 0:i.querySelector(`#${this.listId}`))},clearHighlightIndex(){this.showList&&this.setHighlightIndex(-1)},afterHighlight(){this.loading||this.$emit("highlight",this.highlightIndex)},onEnterKey(){var i;this.loading||this.emptyList||this.highlightIndex>=0&&(this.$emit("select",this.highlightIndex),this.clickOnSelect&&((i=this.activeItemEl)==null||i.click()))},onEscapeKey(){this.$emit("escape")},onOpen(i,t){var s;this.outsideRenderedListRef=t,(s=this.outsideRenderedListRef)==null||s.addEventListener("mousemove",this.onMouseHighlight),this.$emit("opened",i),i&&this.setInitialHighlightIndex()},onKeyValidation(i,t){!this.showList||!this.getListElement()||this[t](i)},setInitialHighlightIndex(){this.showList&&this.$nextTick(()=>{this.setHighlightIndex(this.loading?-1:0)})},validateEmptyListProps(){this.$slots.emptyListItem||this.emptyList&&!this.emptyStateMessage&&console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
+      empty message.`)}}};var u=function(){var t=this,s=t._self._c;return s("div",{on:{keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"])?null:(e.stopPropagation(),t.onKeyValidation(e,"onEscapeKey"))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")||e.ctrlKey||e.shiftKey||e.altKey||e.metaKey?null:t.onKeyValidation(e,"onEnterKey")},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.stopPropagation(),e.preventDefault(),t.onKeyValidation(e,"onUpKey"))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.stopPropagation(),e.preventDefault(),t.onKeyValidation(e,"onDownKey"))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"home",void 0,e.key,void 0)?null:(e.stopPropagation(),e.preventDefault(),t.onKeyValidation(e,"onHomeKey"))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"end",void 0,e.key,void 0)?null:(e.stopPropagation(),e.preventDefault(),t.onKeyValidation(e,"onEndKey"))}]}},[s("div",{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[t._t("input",null,{inputProps:t.inputProps})],2),t.showList?s("div",{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{mouseleave:t.clearHighlightIndex,focusout:t.clearHighlightIndex,"!mousemove":function(e){return t.onMouseHighlight.apply(null,arguments)}}},[t.loading&&!t.listRenderedOutside?s("combobox-loading-list",t._b({},"combobox-loading-list",t.listProps,!1)):t.emptyList&&(t.emptyStateMessage||t.$slots.emptyListItem)&&!t.listRenderedOutside?s("combobox-empty-list",t._b({attrs:{message:t.emptyStateMessage,"item-class":t.emptyStateClass}},"combobox-empty-list",t.listProps,!1),[t._t("emptyListItem")],2):t._t("list",null,{listProps:t.listProps,opened:t.onOpen,clearHighlightIndex:t.clearHighlightIndex})],2):t._e()])},p=[],g=d.n(h,u,p);const f=g.exports;exports.default=f;
+//# sourceMappingURL=combobox.cjs.map

package/dist/lib/combobox/combobox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.cjs","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 KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { getUniqueString } from '@/common/utils';\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { LABEL_SIZES } from '@/components/combobox/combobox_constants';\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    KeyboardNavigation({\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(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","KeyboardNavigation","t","LABEL_SIZES","getUniqueString","showList","loading","e","liElement","_a","open","contentRef","eventHandler"],"mappings":"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"}

package/dist/lib/combobox/combobox.js

@@ -0,0 +1,302 @@
+import n from "../../common/mixins/keyboard-list-navigation.js";
+import { getUniqueString as o } from "../../common/utils/index.js";
+import l from "./combobox-loading-list.js";
+import r from "./combobox-empty-list.js";
+import { LABEL_SIZES as a } from "./combobox-constants.js";
+import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+const h = {
+  name: "DtCombobox",
+  components: {
+    ComboboxLoadingList: l,
+    ComboboxEmptyList: r
+  },
+  mixins: [
+    n({
+      indexKey: "highlightIndex",
+      idKey: "highlightId",
+      listElementKey: "getListElement",
+      afterHighlightMethod: "afterHighlight",
+      beginningOfListMethod: "beginningOfListMethod",
+      endOfListMethod: "endOfListMethod",
+      activeItemKey: "activeItemEl"
+    })
+  ],
+  props: {
+    /**
+     * String to use for the input label.
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
+     * @values null, xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: null,
+      validator: (i) => Object.values(a).includes(i)
+    },
+    /**
+     * Description for the input
+     */
+    description: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Sets an ID on the list element of the component. Used by several aria attributes
+     * as well as when deriving the IDs for each item.
+     */
+    listId: {
+      type: String,
+      default() {
+        return o();
+      }
+    },
+    /**
+     * A method that will be called when the selection goes past the beginning of the list.
+     */
+    onBeginningOfList: {
+      type: Function,
+      default: null
+    },
+    /**
+     * A method that will be called when the selection goes past the end of the list.
+     */
+    onEndOfList: {
+      type: Function,
+      default: null
+    },
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * @values true, false
+     */
+    showList: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * If the list is rendered outside the component, like when using popover as the list wrapper.
+     * @values true, false
+     */
+    listRenderedOutside: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Determines when to show the skeletons and also controls aria-busy attribute.
+     * @values true, false
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
+     * @values true, false
+     */
+    emptyList: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Message to show when the list is empty
+     */
+    emptyStateMessage: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the empty list element.
+     * Can accept all of String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    emptyStateClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Programmatically click on the active list item element when a selection
+     * comes from keyboard navigation, i.e. pressing the "Enter" key.
+     * @values true, false
+     */
+    clickOnSelect: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    /**
+     * Event fired when item selected
+     *
+     * @event select
+     * @type {Number}
+     */
+    "select",
+    /**
+     * Event fired when pressing escape
+     *
+     * @event escape
+     */
+    "escape",
+    /**
+     * Event fired when the highlight changes
+     *
+     * @event highlight
+     * @type {Number}
+     */
+    "highlight",
+    /**
+     * Event fired when list is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean}
+     */
+    "opened"
+  ],
+  data() {
+    return {
+      // If the list is rendered at the root, rather than as a child
+      // of this component, this is the ref to that dom element. Set
+      // by the onOpen method.
+      outsideRenderedListRef: null
+    };
+  },
+  computed: {
+    inputProps() {
+      return {
+        label: this.label,
+        labelVisible: this.labelVisible,
+        size: this.size,
+        description: this.description,
+        role: "combobox",
+        "aria-label": this.label,
+        "aria-expanded": this.showList.toString(),
+        "aria-owns": this.listId,
+        "aria-haspopup": "listbox",
+        "aria-activedescendant": this.activeItemId,
+        "aria-controls": this.listId
+      };
+    },
+    listProps() {
+      return {
+        role: "listbox",
+        id: this.listId,
+        // The list has to be positioned relatively so that the auto-scroll can
+        // calculate the correct offset for the list items.
+        class: "d-ps-relative",
+        "aria-label": this.label
+      };
+    },
+    beginningOfListMethod() {
+      return this.onBeginningOfList || this.jumpToEnd;
+    },
+    endOfListMethod() {
+      return this.onEndOfList || this.jumpToBeginning;
+    },
+    activeItemId() {
+      if (!(!this.showList || this.highlightIndex < 0 || this.loading))
+        return this.highlightId;
+    },
+    activeItemEl() {
+      return this.highlightId ? this.getListElement().querySelector("#" + this.highlightId) : "";
+    }
+  },
+  watch: {
+    showList(i) {
+      this.listRenderedOutside || (this.setInitialHighlightIndex(), this.$emit("opened", i)), !i && this.outsideRenderedListRef && (this.outsideRenderedListRef.removeEventListener("mousemove", this.onMouseHighlight), this.outsideRenderedListRef = null);
+    },
+    loading(i) {
+      this.$nextTick(() => {
+        this.setInitialHighlightIndex();
+      });
+    },
+    $props: {
+      deep: !0,
+      immediate: !0,
+      handler() {
+        this.validateEmptyListProps();
+      }
+    }
+  },
+  created() {
+    this.validateEmptyListProps();
+  },
+  methods: {
+    onMouseHighlight(i) {
+      if (this.loading) return;
+      const t = i.target.closest("li");
+      t && this.highlightId !== t.id && this.setHighlightId(t.id);
+    },
+    getListElement() {
+      var i;
+      return this.outsideRenderedListRef ?? ((i = this.$refs.listWrapper) == null ? void 0 : i.querySelector(`#${this.listId}`));
+    },
+    clearHighlightIndex() {
+      this.showList && this.setHighlightIndex(-1);
+    },
+    afterHighlight() {
+      this.loading || this.$emit("highlight", this.highlightIndex);
+    },
+    onEnterKey() {
+      var i;
+      this.loading || this.emptyList || this.highlightIndex >= 0 && (this.$emit("select", this.highlightIndex), this.clickOnSelect && ((i = this.activeItemEl) == null || i.click()));
+    },
+    onEscapeKey() {
+      this.$emit("escape");
+    },
+    onOpen(i, t) {
+      var s;
+      this.outsideRenderedListRef = t, (s = this.outsideRenderedListRef) == null || s.addEventListener("mousemove", this.onMouseHighlight), this.$emit("opened", i), i && this.setInitialHighlightIndex();
+    },
+    onKeyValidation(i, t) {
+      !this.showList || !this.getListElement() || this[t](i);
+    },
+    setInitialHighlightIndex() {
+      this.showList && this.$nextTick(() => {
+        this.setHighlightIndex(this.loading ? -1 : 0);
+      });
+    },
+    validateEmptyListProps() {
+      this.$slots.emptyListItem || this.emptyList && !this.emptyStateMessage && console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
+      empty message.`);
+    }
+  }
+};
+var p = function() {
+  var t = this, s = t._self._c;
+  return s("div", { on: { keydown: [function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "esc", 27, e.key, ["Esc", "Escape"]) ? null : (e.stopPropagation(), t.onKeyValidation(e, "onEscapeKey"));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "enter", 13, e.key, "Enter") || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : t.onKeyValidation(e, "onEnterKey");
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "up", 38, e.key, ["Up", "ArrowUp"]) ? null : (e.stopPropagation(), e.preventDefault(), t.onKeyValidation(e, "onUpKey"));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "down", 40, e.key, ["Down", "ArrowDown"]) ? null : (e.stopPropagation(), e.preventDefault(), t.onKeyValidation(e, "onDownKey"));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "home", void 0, e.key, void 0) ? null : (e.stopPropagation(), e.preventDefault(), t.onKeyValidation(e, "onHomeKey"));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "end", void 0, e.key, void 0) ? null : (e.stopPropagation(), e.preventDefault(), t.onKeyValidation(e, "onEndKey"));
+  }] } }, [s("div", { attrs: { "data-qa": "dt-combobox-input-wrapper" } }, [t._t("input", null, { inputProps: t.inputProps })], 2), t.showList ? s("div", { ref: "listWrapper", attrs: { "data-qa": "dt-combobox-list-wrapper" }, on: { mouseleave: t.clearHighlightIndex, focusout: t.clearHighlightIndex, "!mousemove": function(e) {
+    return t.onMouseHighlight.apply(null, arguments);
+  } } }, [t.loading && !t.listRenderedOutside ? s("combobox-loading-list", t._b({}, "combobox-loading-list", t.listProps, !1)) : t.emptyList && (t.emptyStateMessage || t.$slots.emptyListItem) && !t.listRenderedOutside ? s("combobox-empty-list", t._b({ attrs: { message: t.emptyStateMessage, "item-class": t.emptyStateClass } }, "combobox-empty-list", t.listProps, !1), [t._t("emptyListItem")], 2) : t._t("list", null, { listProps: t.listProps, opened: t.onOpen, clearHighlightIndex: t.clearHighlightIndex })], 2) : t._e()]);
+}, u = [], g = /* @__PURE__ */ d(
+  h,
+  p,
+  u
+);
+const I = g.exports;
+export {
+  I as default
+};
+//# sourceMappingURL=combobox.js.map

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

@@ -0,0 +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 KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { getUniqueString } from '@/common/utils';\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { LABEL_SIZES } from '@/components/combobox/combobox_constants';\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    KeyboardNavigation({\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(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","KeyboardNavigation","t","LABEL_SIZES","getUniqueString","showList","loading","e","liElement","_a","open","contentRef","eventHandler"],"mappings":"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"}

package/dist/lib/combobox/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./combobox.cjs"),b=require("./combobox-constants.cjs");exports.DtCombobox=o.default;exports.LABEL_SIZES=b.LABEL_SIZES;
+//# sourceMappingURL=index.cjs.map

package/dist/lib/combobox/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/combobox/index.js

@@ -0,0 +1,7 @@
+import { default as t } from "./combobox.js";
+import { LABEL_SIZES as f } from "./combobox-constants.js";
+export {
+  t as DtCombobox,
+  f as LABEL_SIZES
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s={EXTRA_SMALL:"xs",SMALL:"sm",DEFAULT:"md"},t={xs:"xs",sm:"xs",md:"sm"},S={xs:1.4,sm:.4,md:.2},_={MULTI_SELECT_SIZES:s,CHIP_SIZES:t,CHIP_TOP_POSITION:S};exports.CHIP_SIZES=t;exports.CHIP_TOP_POSITION=S;exports.MULTI_SELECT_SIZES=s;exports.default=_;
+//# sourceMappingURL=combobox-multi-select-constants.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,25 @@
+const s = {
+  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.
+  EXTRA_SMALL: "xs",
+  SMALL: "sm",
+  DEFAULT: "md"
+}, t = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm"
+}, m = {
+  xs: 1.4,
+  sm: 0.4,
+  md: 0.2
+}, o = {
+  MULTI_SELECT_SIZES: s,
+  CHIP_SIZES: t,
+  CHIP_TOP_POSITION: m
+};
+export {
+  t as CHIP_SIZES,
+  m as CHIP_TOP_POSITION,
+  s as MULTI_SELECT_SIZES,
+  o as default
+};
+//# sourceMappingURL=combobox-multi-select-constants.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=[{id:"item1",value:"item1",type:"MAINLINE"},{id:"item2",value:"item2",type:"MAINLINE"},{id:"item3",value:"item3",type:"MAINLINE"},{id:"item4",value:"item4",type:"MAINLINE"},{id:"item5",value:"item5 this is a longer item for testing truncation",type:"MAINLINE"},{id:"item6",value:"item6",type:"MAINLINE"},{id:"item7",value:"item7",type:"MAINLINE"},{id:"item8",value:"item8",type:"Other"},{id:"item9",value:"item9",type:"MAINLINE"},{id:"item10",value:"item10 another longer item",type:"MAINLINE"},{id:"item11",value:"item11",type:"MAINLINE"},{id:"item12",value:"item12",type:"Other"},{id:"item13",value:"item13",type:"MAINLINE"},{id:"item14",value:"item14",type:"MAINLINE"},{id:"item15",value:"item15 one more slightly longer item",type:"MAINLINE"},{id:"item16",value:"item16",type:"MAINLINE"},{id:"item17",value:"item17",type:"MAINLINE"},{id:"item18",value:"item18",type:"Other"},{id:"item19",value:"item19",type:"MAINLINE"},{id:"item20",value:"item20",type:"MAINLINE"},{id:"item21",value:"item21",type:"MAINLINE"},{id:"item22",value:"item22",type:"Other"}];exports.ITEMS_LIST_DATA=e;
+//# sourceMappingURL=combobox-multi-select-story-constants.cjs.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,28 @@
+const e = [
+  { id: "item1", value: "item1", type: "MAINLINE" },
+  { id: "item2", value: "item2", type: "MAINLINE" },
+  { id: "item3", value: "item3", type: "MAINLINE" },
+  { id: "item4", value: "item4", type: "MAINLINE" },
+  { id: "item5", value: "item5 this is a longer item for testing truncation", type: "MAINLINE" },
+  { id: "item6", value: "item6", type: "MAINLINE" },
+  { id: "item7", value: "item7", type: "MAINLINE" },
+  { id: "item8", value: "item8", type: "Other" },
+  { id: "item9", value: "item9", type: "MAINLINE" },
+  { id: "item10", value: "item10 another longer item", type: "MAINLINE" },
+  { id: "item11", value: "item11", type: "MAINLINE" },
+  { id: "item12", value: "item12", type: "Other" },
+  { id: "item13", value: "item13", type: "MAINLINE" },
+  { id: "item14", value: "item14", type: "MAINLINE" },
+  { id: "item15", value: "item15 one more slightly longer item", type: "MAINLINE" },
+  { id: "item16", value: "item16", type: "MAINLINE" },
+  { id: "item17", value: "item17", type: "MAINLINE" },
+  { id: "item18", value: "item18", type: "Other" },
+  { id: "item19", value: "item19", type: "MAINLINE" },
+  { id: "item20", value: "item20", type: "MAINLINE" },
+  { id: "item21", value: "item21", type: "MAINLINE" },
+  { id: "item22", value: "item22", type: "Other" }
+];
+export {
+  e as ITEMS_LIST_DATA
+};
+//# sourceMappingURL=combobox-multi-select-story-constants.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("../combobox-with-popover/combobox-with-popover.cjs"),u=require("../input/input.cjs"),h=require("../chip/chip.cjs"),c=require("../validation-messages/validation-messages.cjs"),d=require("../../common/validators/index.cjs"),g=require("../popover/popover-constants.cjs"),l=require("./combobox-multi-select-constants.cjs"),f=require("../../common/mixins/sr-only-close-button.cjs"),m=require("../../common/utils/index.cjs"),b=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),y={name:"DtRecipeComboboxMultiSelect",components:{DtRecipeComboboxWithPopover:p.default,DtInput:u.default,DtChip:h.default,DtValidationMessages:c.default},mixins:[f.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(l.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:l.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:m.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-l.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&&(await this.$nextTick(),this.setInputPadding(),this.hideInputText=!1)},async handleInputFocusOut(){if(this.inputFocused=!1,this.collapseOnFocusOut){const t=this.getInput();if(!t||!t.style.paddingTop)return;this.hideInputText=!0,this.revertInputPadding(t)}}}};var C=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,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,"visually-hidden-close":e.visuallyHiddenClose,"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"],"close-button-props":{ariaLabel:"close"},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)})},x=[],_=b.n(y,C,x);const I=_.exports;exports.default=I;
+//# sourceMappingURL=combobox-multi-select.cjs.map

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

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