@dialpad/dialtone 9.131.1 → 9.132.1

package/dist/vue2/lib/chip/chip.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@dialpad/dialtone-icons/vue2"),s=require("./chip-constants.cjs"),n=require("../../common/utils/index.cjs"),l=require("../../localization/index.cjs"),o=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),c=require("../button/button.cjs"),r={name:"DtChip",components:{DtButton:c.default,DtIconClose:a.DtIconClose},props:{hideClose:{type:Boolean,default:!1},size:{type:String,default:"md",validator:e=>Object.keys(s.CHIP_SIZE_MODIFIERS).includes(e)},interactive:{type:Boolean,default:!0},id:{type:String,default:function(){return n.getUniqueString()}},ariaLabel:{type:String,default:""},contentClass:{type:[String,Array,Object],default:""},labelClass:{type:[String,Array,Object],default:""}},emits:["click","close","keyup"],data(){return{isActive:!1,i18n:new l.DialtoneLocalization}},computed:{chipListeners(){return{...this.$listeners,click:e=>{this.interactive&&this.$emit("click",e)},keyup:e=>{var t;((t=e.code)==null?void 0:t.toLowerCase())==="delete"?this.onClose():this.$emit("keyup",e)}}},closeButtonIconSize(){return s.CHIP_ICON_SIZES[this.size]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{chipClasses(){return[this.$attrs["grouped-chip"]?"d-chip":"d-chip__label",s.CHIP_SIZE_MODIFIERS[this.size],this.labelClass]},chipCloseButtonClasses(){return["d-chip__close",s.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]]},onClose(){this.hideClose||this.$emit("close")}}};var u=function(){var t=this,i=t._self._c;return i("span",{staticClass:"d-chip"},[i(t.interactive?"button":"span",t._g({tag:"component",class:t.chipClasses(),attrs:{id:t.id,"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabel?void 0:`${t.id}-content`,type:t.interactive&&"button","data-qa":"dt-chip"}},t.chipListeners),[t.$slots.icon?i("span",{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[t._t("icon")],2):t.$slots.avatar?i("span",{attrs:{"data-qa":"dt-chip-avatar"}},[t._t("avatar")],2):t._e(),t.$slots.default?i("span",{class:["d-chip__text",t.contentClass],attrs:{id:`${t.id}-content`,"data-qa":"dt-chip-label"}},[t._t("default")],2):t._e()]),t.hideClose?t._e():i("dt-button",{class:t.chipCloseButtonClasses(),attrs:{"data-qa":"dt-chip-close","aria-label":t.closeButtonTitle,title:t.closeButtonTitle},on:{click:function(h){return t.$emit("close")}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-close",{attrs:{size:t.closeButtonIconSize}})]},proxy:!0}],null,!1,1341282633)})],1)},d=[],_=o.n(r,u,d);const p=_.exports;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@dialpad/dialtone-icons/vue2"),s=require("./chip-constants.cjs"),n=require("../../common/utils/index.cjs"),o=require("../../localization/index.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),c=require("../button/button.cjs"),r={name:"DtChip",components:{DtButton:c.default,DtIconClose:a.DtIconClose},props:{hideClose:{type:Boolean,default:!1},size:{type:String,default:"md",validator:e=>Object.keys(s.CHIP_SIZE_MODIFIERS).includes(e)},interactive:{type:Boolean,default:!0},id:{type:String,default:function(){return n.getUniqueString()}},ariaLabel:{type:String,default:""},contentClass:{type:[String,Array,Object],default:""},labelClass:{type:[String,Array,Object],default:""}},emits:["click","close","keyup","keydown"],data(){return{isActive:!1,i18n:new o.DialtoneLocalization}},computed:{chipListeners(){return{...this.$listeners,click:e=>{this.interactive&&this.$emit("click",e)},keydown:e=>{var t;((t=e.code)==null?void 0:t.toLowerCase())==="delete"?this.onClose():this.$emit("keydown",e)},keyup:e=>{this.$emit("keyup",e)}}},closeButtonIconSize(){return s.CHIP_ICON_SIZES[this.size]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{chipClasses(){return[this.$attrs["grouped-chip"]?"d-chip":"d-chip__label",s.CHIP_SIZE_MODIFIERS[this.size],this.labelClass]},chipCloseButtonClasses(){return["d-chip__close",s.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]]},onClose(){this.hideClose||this.$emit("close")}}};var u=function(){var t=this,i=t._self._c;return i("span",{staticClass:"d-chip"},[i(t.interactive?"button":"span",t._g({tag:"component",class:t.chipClasses(),attrs:{id:t.id,"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabel?void 0:`${t.id}-content`,type:t.interactive&&"button","data-qa":"dt-chip"}},t.chipListeners),[t.$slots.icon?i("span",{staticClass:"d-chip__icon",attrs:{"data-qa":"dt-chip-icon"}},[t._t("icon")],2):t.$slots.avatar?i("span",{attrs:{"data-qa":"dt-chip-avatar"}},[t._t("avatar")],2):t._e(),t.$slots.default?i("span",{class:["d-chip__text",t.contentClass],attrs:{id:`${t.id}-content`,"data-qa":"dt-chip-label"}},[t._t("default")],2):t._e()]),t.hideClose?t._e():i("dt-button",{class:t.chipCloseButtonClasses(),attrs:{"data-qa":"dt-chip-close","aria-label":t.closeButtonTitle,title:t.closeButtonTitle},on:{click:function(h){return t.$emit("close")}},scopedSlots:t._u([{key:"icon",fn:function(){return[i("dt-icon-close",{attrs:{size:t.closeButtonIconSize}})]},proxy:!0}],null,!1,1341282633)})],1)},d=[],_=l.n(r,u,d);const p=_.exports;exports.default=p;
 //# sourceMappingURL=chip.cjs.map

package/dist/vue2/lib/chip/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chip.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"$slots.icon\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"$slots.avatar\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"$slots.default\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS"],"mappings":"4WAuEAA,EAAA,CACA,KAAA,SAEA,WAAA,CACA,SAAAC,EAAAA,QACA,YAAAC,EAAAA,WACA,EAEA,MAAA,CAKA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,GAAA,OAAA,KAAAC,qBAAA,EAAA,SAAAD,CAAA,CACA,EAOA,YAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,GAAA,CACA,KAAA,OACA,QAAA,UAAA,CAAA,OAAAE,EAAAA,gBAAA,CAAA,CACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAOA,QAQA,OACA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,GACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,MAAAC,GAAA,CACA,KAAA,aAAA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,MAAAA,GAAA,SACAC,EAAAD,EAAA,OAAA,YAAAC,EAAA,iBAAA,SACA,KAAA,QAAA,EAEA,KAAA,MAAA,QAAAD,CAAA,CAEA,CACA,CACA,EAEA,qBAAA,CACA,OAAAE,EAAAA,gBAAA,KAAA,IAAA,CACA,EAEA,kBAAA,CACA,OAAA,KAAA,KAAA,GAAA,uBAAA,CACA,CACA,EAEA,QAAA,CACA,aAAA,CACA,MAAA,CACA,KAAA,OAAA,cAAA,EAAA,SAAA,gBACAL,EAAAA,oBAAA,KAAA,IAAA,EACA,KAAA,UACA,CACA,EAEA,wBAAA,CACA,MAAA,CACA,gBACAM,EAAAA,iCAAA,KAAA,IAAA,CACA,CACA,EAEA,SAAA,CACA,KAAA,WACA,KAAA,MAAA,OAAA,CAEA,CACA,CACA"}
+{"version":3,"file":"chip.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"$slots.icon\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"$slots.avatar\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"$slots.default\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS"],"mappings":"4WAuEAA,EAAA,CACA,KAAA,SAEA,WAAA,CACA,SAAAC,EAAAA,QACA,YAAAC,EAAAA,WACA,EAEA,MAAA,CAKA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAC,GAAA,OAAA,KAAAC,qBAAA,EAAA,SAAAD,CAAA,CACA,EAOA,YAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,GAAA,CACA,KAAA,OACA,QAAA,UAAA,CAAA,OAAAE,EAAAA,gBAAA,CAAA,CACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAOA,QAQA,QAQA,SACA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,GACA,KAAA,IAAAC,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,MAAAC,GAAA,CACA,KAAA,aAAA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,QAAAA,GAAA,SACAC,EAAAD,EAAA,OAAA,YAAAC,EAAA,iBAAA,SACA,KAAA,QAAA,EAEA,KAAA,MAAA,UAAAD,CAAA,CAEA,EAEA,MAAAA,GAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,CACA,CACA,EAEA,qBAAA,CACA,OAAAE,EAAAA,gBAAA,KAAA,IAAA,CACA,EAEA,kBAAA,CACA,OAAA,KAAA,KAAA,GAAA,uBAAA,CACA,CACA,EAEA,QAAA,CACA,aAAA,CACA,MAAA,CACA,KAAA,OAAA,cAAA,EAAA,SAAA,gBACAL,EAAAA,oBAAA,KAAA,IAAA,EACA,KAAA,UACA,CACA,EAEA,wBAAA,CACA,MAAA,CACA,gBACAM,EAAAA,iCAAA,KAAA,IAAA,CACA,CACA,EAEA,SAAA,CACA,KAAA,WACA,KAAA,MAAA,OAAA,CAEA,CACA,CACA"}

package/dist/vue2/lib/chip/chip.js

@@ -3,11 +3,11 @@ import { CHIP_CLOSE_BUTTON_SIZE_MODIFIERS as n, CHIP_SIZE_MODIFIERS as s, CHIP_I
 import { getUniqueString as l } from "../../common/utils/index.js";
 import { DialtoneLocalization as r } from "../../localization/index.js";
 import { n as c } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import p from "../button/button.js";
-const d = {
+import d from "../button/button.js";
+const p = {
   name: "DtChip",
   components: {
-    DtButton: p,
+    DtButton: d,
     DtIconClose: a
   },
   props: {
@@ -89,7 +89,14 @@ const d = {
      * @event keyup
      * @type {KeyboardEvent}
      */
-    "keyup"
+    "keyup",
+    /**
+     * Native chip key down event
+     *
+     * @event keydown
+     * @type {KeyboardEvent}
+     */
+    "keydown"
   ],
   data() {
     return {
@@ -104,9 +111,12 @@ const d = {
         click: (e) => {
           this.interactive && this.$emit("click", e);
         },
-        keyup: (e) => {
+        keydown: (e) => {
           var t;
-          ((t = e.code) == null ? void 0 : t.toLowerCase()) === "delete" ? this.onClose() : this.$emit("keyup", e);
+          ((t = e.code) == null ? void 0 : t.toLowerCase()) === "delete" ? this.onClose() : this.$emit("keydown", e);
+        },
+        keyup: (e) => {
+          this.$emit("keyup", e);
         }
       };
     },
@@ -144,7 +154,7 @@ var u = function() {
     return [i("dt-icon-close", { attrs: { size: t.closeButtonIconSize } })];
   }, proxy: !0 }], null, !1, 1341282633) })], 1);
 }, _ = [], h = /* @__PURE__ */ c(
-  d,
+  p,
   u,
   _
 );

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

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"$slots.icon\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"$slots.avatar\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"$slots.default\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS"],"mappings":";;;;;;AAuEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAAE,EAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA,IAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,CAAAC,MAAA;AACA,UAAA,KAAA,eAAA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,QAEA,OAAA,CAAAA,MAAA;;AACA,YAAAC,IAAAD,EAAA,SAAA,gBAAAC,EAAA,mBAAA,WACA,KAAA,QAAA,IAEA,KAAA,MAAA,SAAAD,CAAA;AAAA,QAEA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAAE,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,KAAA,GAAA,uBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA;AACA,aAAA;AAAA,QACA,KAAA,OAAA,cAAA,IAAA,WAAA;AAAA,QACAL,EAAA,KAAA,IAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAM,EAAA,KAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,MAAA,KAAA,aACA,KAAA,MAAA,OAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}
+{"version":3,"file":"chip.js","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :aria-label=\"ariaLabel\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :class=\"chipClasses()\"\n      :type=\"interactive && 'button'\"\n      data-qa=\"dt-chip\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"$slots.icon\"\n        class=\"d-chip__icon\"\n        data-qa=\"dt-chip-icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"$slots.avatar\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"$slots.default\"\n        :id=\"`${id}-content`\"\n        :class=\"['d-chip__text', contentClass]\"\n        data-qa=\"dt-chip-label\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n\n    /**\n     * Native chip key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keydown: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keydown', event);\n          }\n        },\n\n        keyup: event => {\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","s","CHIP_SIZE_MODIFIERS","getUniqueString","DialtoneLocalization","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS"],"mappings":";;;;;;AAuEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,WAAA;AAAA,eAAAE,EAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,MAAA,IAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,OAAA,CAAAC,MAAA;AACA,UAAA,KAAA,eAAA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,QAEA,SAAA,CAAAA,MAAA;;AACA,YAAAC,IAAAD,EAAA,SAAA,gBAAAC,EAAA,mBAAA,WACA,KAAA,QAAA,IAEA,KAAA,MAAA,WAAAD,CAAA;AAAA,QAEA;AAAA,QAEA,OAAA,CAAAA,MAAA;AACA,eAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAAE,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,KAAA,GAAA,uBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAA;AACA,aAAA;AAAA,QACA,KAAA,OAAA,cAAA,IAAA,WAAA;AAAA,QACAL,EAAA,KAAA,IAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAM,EAAA,KAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,MAAA,KAAA,aACA,KAAA,MAAA,OAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}

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

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

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

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

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

@@ -247,6 +247,13 @@ const C = {
      * @type {KeyboardEvent}
       */
     "keyup",
+    /**
+     * Native keydown event
+     *
+     * @event keydown
+     * @type {KeyboardEvent}
+      */
+    "keydown",
     /**
      * Event fired when combobox item is highlighted
      *
@@ -275,8 +282,8 @@ const C = {
     chipListeners() {
       return {
         ...this.$listeners,
-        keyup: (t) => {
-          this.onChipKeyup(t), this.$emit("keyup", t);
+        keydown: (t) => {
+          this.onChipKeyDown(t), this.$emit("keydown", t);
         }
       };
     },
@@ -286,8 +293,11 @@ const C = {
         input: (t) => {
           this.$emit("input", t), this.hasSuggestionList && this.showComboboxList();
         },
+        keydown: (t) => {
+          this.onInputKeyDown(t);
+        },
         keyup: (t) => {
-          this.onInputKeyup(t), this.$emit("keyup", t);
+          this.$emit("keyup", t);
         },
         click: () => {
           this.hasSuggestionList && this.showComboboxList();
@@ -381,15 +391,19 @@ const C = {
       var t;
       return (t = this.$refs.input) == null ? void 0 : t.$refs.input;
     },
-    onChipKeyup(t) {
+    onChipKeyDown(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) {
+    onInputKeyDown(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();
+      if (this.selectedItems.length > 0 && t.target.selectionStart === 0) {
+        if (t.target.selectionEnd !== t.target.selectionStart)
+          return;
+        (e === "backspace" || e === "arrowleft") && this.moveFromInputToChip();
+      }
     },
     moveFromInputToChip() {
       var t;
@@ -400,22 +414,22 @@ const C = {
       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());
+      var s;
+      const i = this.getChipButtons().indexOf(t), o = e ? i - 1 : i + 1;
+      o < 0 || o >= ((s = this.$refs.chips) == null ? void 0 : s.length) || (this.getChipButtons()[i].blur(), this.getChipButtons()[o].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 - f[this.size] + "px";
+      const e = this.$refs.inputSlotWrapper, i = t.getBoundingClientRect().top - e.getBoundingClientRect().top, o = this.$refs.chipsWrapper;
+      o.style.top = i - f[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, p = o > this.reservedRightSpace ? t.offsetTop + 2 : r + n - 9;
+      const o = t.offsetLeft + this.getFullWidth(t), s = e.getBoundingClientRect().width - o;
+      s > this.reservedRightSpace ? e.style.paddingLeft = o + "px" : e.style.paddingLeft = "4px";
+      const r = i.getBoundingClientRect().height - 4, n = t.getBoundingClientRect().height - 4, p = s > this.reservedRightSpace ? t.offsetTop + 2 : r + n - 9;
       e.style.paddingTop = `${p}px`;
     },
     revertInputPadding(t) {
@@ -452,40 +466,42 @@ const C = {
 };
 var x = function() {
   var e = this, i = e._self._c;
-  return i("dt-recipe-combobox-with-popover", { ref: "comboboxWithPopover", attrs: { label: e.label, "show-list": e.showList, "max-height": e.listMaxHeight, "max-width": e.listMaxWidth, "popover-offset": e.popoverOffset, "has-suggestion-list": e.hasSuggestionList, "content-width": "anchor", "append-to": e.appendTo, transition: e.transition }, on: { select: e.onComboboxSelect, highlight: e.comboboxHighlight }, scopedSlots: e._u([{ key: "input", fn: function({ onInput: s }) {
-    return [i("span", { ref: "inputSlotWrapper", staticClass: "d-recipe-combobox-multi-select__input-wrapper", on: { focusin: e.handleInputFocusIn, focusout: e.handleInputFocusOut } }, [i("span", { ref: "chipsWrapper", class: ["d-recipe-combobox-multi-select__chip-wrapper", e.chipWrapperClass] }, e._l(e.selectedItemsWithKeys, function({ item: o, key: r }) {
+  return i("dt-recipe-combobox-with-popover", { ref: "comboboxWithPopover", attrs: { label: e.label, "show-list": e.showList, "max-height": e.listMaxHeight, "max-width": e.listMaxWidth, "popover-offset": e.popoverOffset, "has-suggestion-list": e.hasSuggestionList, "content-width": "anchor", "append-to": e.appendTo, transition: e.transition }, on: { select: e.onComboboxSelect, highlight: e.comboboxHighlight }, scopedSlots: e._u([{ key: "input", fn: function({ onInput: o }) {
+    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: s, key: r }) {
       return i("dt-chip", e._g({ key: r, ref: "chips", refInFor: !0, class: [
         "d-recipe-combobox-multi-select__chip",
         { "d-recipe-combobox-multi-select__chip--truncate": !!e.chipMaxWidth }
-      ], style: { maxWidth: e.chipMaxWidth }, attrs: { "label-class": ["d-chip__label"], size: e.CHIP_SIZES[e.size] }, on: { keyup: function(n) {
-        return !n.type.indexOf("key") && e._k(n.keyCode, "backspace", void 0, n.key, void 0) ? null : e.onChipRemove(o);
+      ], style: { maxWidth: e.chipMaxWidth }, attrs: { "label-class": ["d-chip__label"], size: e.CHIP_SIZES[e.size] }, on: { keydown: function(n) {
+        return !n.type.indexOf("key") && e._k(n.keyCode, "backspace", void 0, n.key, void 0) ? null : e.onChipRemove(s);
       }, close: function(n) {
-        return e.onChipRemove(o);
-      } } }, e.chipListeners), [e._v(" " + e._s(o) + " ")]);
+        return e.onChipRemove(s);
+      } } }, e.chipListeners), [e._v(" " + e._s(s) + " ")]);
     }), 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;
+    ], "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: o, select: function(s) {
+      s.stopPropagation();
+    } }, model: { value: e.value, callback: function(s) {
+      e.value = s;
     }, 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();
+    return [i("div", { ref: "list", staticClass: "d-recipe-combobox-multi-select__list", on: { mousedown: function(o) {
+      o.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) });
-}, I = [], _ = /* @__PURE__ */ y(
+}, I = [], w = /* @__PURE__ */ y(
   C,
   x,
   I
 );
-const P = _.exports;
+const T = w.exports;
 export {
-  P as default
+  T as default
 };
 //# sourceMappingURL=combobox-multi-select.js.map