@dialpad/dialtone 9.184.0 → 9.185.0

package/dist/vue3/components/modal/modal.vue.d.ts

@@ -130,7 +130,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     close(): void;
     setFocusAfterTransition(): Promise<void>;
     trapFocus(e: any): void;
-    handleModalClick(event: any): void;
+    _trapFocusGlobal(e: any): void;
 }, {
     methods: {
         getFirstFocusableElement(el: object): Promise<any>;

package/dist/vue3/components/modal/modal.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vue.d.ts","sourceRoot":"","sources":["../../../components/modal/modal.vue"],"names":[],"mappings":"AAwHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qEA+eA,IArXE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAqXF,GA5bkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA4blB,GA5bkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAocwF,gBAAgB"}
+{"version":3,"file":"modal.vue.d.ts","sourceRoot":"","sources":["../../../components/modal/modal.vue"],"names":[],"mappings":"AAwHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qEAsfA,IA5XE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA4XF,GAnckB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAmclB,GAnckB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BA2cwF,gBAAgB"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={EXTRA_SMALL:`xs`,SMALL:`sm`,DEFAULT:`md`},t={xs:`xs`,sm:`xs`,md:`sm`},n={xs:1.4,sm:.4,md:.2},r={MULTI_SELECT_SIZES:e,CHIP_SIZES:t,CHIP_TOP_POSITION:n};exports.CHIP_SIZES=t,exports.CHIP_TOP_POSITION=n,exports.MULTI_SELECT_SIZES=e,exports.default=r;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={EXTRA_SMALL:`xs`,SMALL:`sm`,DEFAULT:`md`},t={xs:`xs`,sm:`xs`,md:`sm`},n={xs:1.4,sm:-.1,md:-.3},r={MULTI_SELECT_SIZES:e,CHIP_SIZES:t,CHIP_TOP_POSITION:n};exports.CHIP_SIZES=t,exports.CHIP_TOP_POSITION=n,exports.MULTI_SELECT_SIZES=e,exports.default=r;
 //# sourceMappingURL=combobox-multi-select-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select-constants.cjs","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select_constants.js"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n"],"mappings":"+FAAA,IAAa,EAAqB,CAEhC,YAAa,KACb,MAAO,KACP,QAAS,KACV,CAEY,EAAa,CACxB,GAAI,KACJ,GAAI,KACJ,GAAI,KACL,CAEY,EAAoB,CAC/B,GAAI,IACJ,GAAI,GACJ,GAAI,GACL,CAED,EAAe,CACb,qBACA,aACA,oBACD"}
+{"version":3,"file":"combobox-multi-select-constants.cjs","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select_constants.js"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\n// Adjusted in DLT-3409 for sub-pixel offset for sizes sm and md\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: -0.1,\n  md: -0.3,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n"],"mappings":"+FAAA,IAAa,EAAqB,CAEhC,YAAa,KACb,MAAO,KACP,QAAS,KACV,CAEY,EAAa,CACxB,GAAI,KACJ,GAAI,KACJ,GAAI,KACL,CAGY,EAAoB,CAC/B,GAAI,IACJ,GAAI,IACJ,GAAI,IACL,CAED,EAAe,CACb,qBACA,aACA,oBACD"}

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

@@ -9,8 +9,8 @@ var e = {
 	md: "sm"
 }, n = {
 	xs: 1.4,
-	sm: .4,
-	md: .2
+	sm: -.1,
+	md: -.3
 }, r = {
 	MULTI_SELECT_SIZES: e,
 	CHIP_SIZES: t,

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select-constants.js","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select_constants.js"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: 0.4,\n  md: 0.2,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n"],"mappings":";AAAA,IAAa,IAAqB;CAEhC,aAAa;CACb,OAAO;CACP,SAAS;CACV,EAEY,IAAa;CACxB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACD"}
+{"version":3,"file":"combobox-multi-select-constants.js","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select_constants.js"],"sourcesContent":["export const MULTI_SELECT_SIZES = {\n  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n};\n\nexport const CHIP_SIZES = {\n  xs: 'xs',\n  sm: 'xs',\n  md: 'sm',\n};\n\n// Adjusted in DLT-3409 for sub-pixel offset for sizes sm and md\nexport const CHIP_TOP_POSITION = {\n  xs: 1.4,\n  sm: -0.1,\n  md: -0.3,\n};\n\nexport default {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n};\n"],"mappings":";AAAA,IAAa,IAAqB;CAEhC,aAAa;CACb,OAAO;CACP,SAAS;CACV,EAEY,IAAa;CACxB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAGY,IAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACD"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../validation-messages/validation-messages.cjs`),i=require(`../chip/chip.cjs`),a=require(`../popover/popover-constants.cjs`),o=require(`../input/input.cjs`),s=require(`../combobox-with-popover/combobox-with-popover.cjs`),c=require(`./combobox-multi-select-constants.cjs`);let l=require(`vue`);var u={compatConfig:{MODE:3},name:`DtComboboxMultiSelect`,components:{DtComboboxWithPopover:s.default,DtInput:o.default,DtChip:i.default,DtValidationMessages:r.default},inheritAttrs:!1,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=>e.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:e=>Object.values(c.MULTI_SELECT_SIZES).includes(e)},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>a.POPOVER_APPEND_TO_VALUES.includes(e)||e 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:``},disabled:{type:Boolean,default:!1},dialogClass:{type:[String,Object,Array],default:``}},emits:[`input`,`select`,`remove`,`max-selected`,`keydown`,`chip-keydown`,`escape`,`enter`,`combobox-highlight`],data(){return{value:``,popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,initialInputHeight:null,CHIP_SIZES:c.CHIP_SIZES,hasSlotContent:t.hasSlotContent,inputFocused:!1,hideInputText:!1}},computed:{inputPlaceHolder(){return this.selectedItems?.length>0?``:this.placeholder},chipListeners(){return{keydown:e=>{this.disabled||(this.onChipKeyDown(e),this.$emit(`chip-keydown`,e))}}},inputListeners(){return{...t.extractVueListeners(this.$attrs),onInput:e=>{this.$emit(`input`,e),this.hasSuggestionList&&this.showComboboxList()},onKeydown:e=>{if(this.disabled)return;this.onInputKeyDown(e),this.$emit(`keydown`,e);let t=e.key?.toLowerCase();t===`escape`?this.$emit(`escape`,e):t===`enter`&&this.$emit(`enter`,e)},onClick:()=>{this.hasSuggestionList&&this.showComboboxList()}}},chipWrapperClass(){return{[`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]:!this.inputFocused&&this.collapseOnFocusOut}}},watch:{selectedItems:{deep:!0,handler:async function(){await this.initSelectedItems()}},chipMaxWidth:{async handler(){await this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();let e=this.getInput();this.revertInputPadding(e),this.initialInputHeight=e.getBoundingClientRect().height,this.setInputPadding(),this.setChipsTopPosition()}}},async mounted(){this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),await this.initSelectedItems()},beforeUnmount(){this.resizeWindowObserver?.unobserve(document.body)},methods:{extractNonListeners:t.extractNonListeners,comboboxHighlight(e){this.$emit(`combobox-highlight`,e)},async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(e){this.$emit(`remove`,e),this.$refs.input?.focus()},onComboboxSelect(e){this.loading||(this.value=``,this.$emit(`select`,e))},showComboboxList(){this.showList??this.$refs.comboboxWithPopover?.showComboboxList()},closeComboboxList(){this.showList??this.$refs.comboboxWithPopover?.closeComboboxList()},getChips(){if(!this.selectedItems.length||!this.$refs.chips)return null;let e=new Set;return this.selectedItems.map(n=>this.$refs.chips.find((r,i)=>e.has(i)?!1:t.returnFirstEl(r.$el)?.querySelector(`.d-chip__label`)?.textContent?.trim()===n?(e.add(i),!0):!1)).filter(Boolean).map(e=>t.returnFirstEl(e.$el))},getChipButtons(){let e=this.getChips();return e&&e.map(e=>t.returnFirstEl(e).querySelector(`button`))},getLastChipButton(){let e=this.getChipButtons();return e&&e[e.length-1]},getLastChip(){let e=this.getChips();return e&&e[e.length-1]},getFirstChip(){let e=this.getChips();return e&&e[0]},getInput(){return this.$refs.input?.$refs.input},onChipKeyDown(e){let t=e.code?.toLowerCase();t===`arrowleft`?this.navigateBetweenChips(e.target,!0):t===`arrowright`&&(e.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(e.target,!1))},onInputKeyDown(e){let t=e.key?.toLowerCase();if(this.selectedItems.length>0&&e.target.selectionStart===0){if(e.target.selectionEnd!==e.target.selectionStart)return;(t===`backspace`||t===`arrowleft`)&&this.moveFromInputToChip()}},moveFromInputToChip(){this.getLastChipButton().focus(),this.$refs.input?.blur(),this.closeComboboxList()},moveFromChipToInput(){this.getLastChipButton().blur(),this.$refs.input?.focus(),this.showComboboxList()},navigateBetweenChips(e,t){let n=this.getChipButtons().indexOf(e),r=t?n-1:n+1;r<0||r>=this.$refs.chips?.length||(this.getChipButtons()[n].blur(),this.getChipButtons()[r].focus(),this.closeComboboxList())},setChipsTopPosition(){let e=this.getInput();if(!e)return;let t=this.$refs.inputSlotWrapper,n=e.getBoundingClientRect().top-t.getBoundingClientRect().top,r=this.$refs.chipsWrapper;r.style.top=n-c.CHIP_TOP_POSITION[this.size]+`px`},setInputPadding(){let e=this.getLastChip(),t=this.getInput(),n=this.$refs.chipsWrapper;if(!t||(this.revertInputPadding(t),this.popoverOffset=[0,4],!e)||this.collapseOnFocusOut&&!this.inputFocused)return;let r=e.offsetLeft+this.getFullWidth(e),i=t.getBoundingClientRect().width-r;i>this.reservedRightSpace?t.style.paddingLeft=r+`px`:t.style.paddingLeft=`4px`;let a=n.getBoundingClientRect().height-4,o=e.getBoundingClientRect().height-4,s=i>this.reservedRightSpace?e.offsetTop+2:a+o-9;t.style.paddingTop=`${s}px`},revertInputPadding(e){e.style.paddingLeft=``,e.style.paddingTop=``,e.style.paddingBottom=``},getFullWidth(e){let t=window.getComputedStyle(e);return e.offsetWidth+parseInt(t.marginLeft)+parseInt(t.marginRight)},setInputMinWidth(){let e=this.getFirstChip(),t=this.getInput();t&&(e?t.style.minWidth=this.getFullWidth(e)+4+`px`:t.style.minWidth=``)},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit(`max-selected`)):this.showValidationMessages=!1)},setInitialInputHeight(){let e=this.getInput();e&&(this.initialInputHeight=e.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;let e=this.getInput();if(!e||!e.style.paddingTop)return;this.revertInputPadding(e)}}}},d={ref:`header`},f={key:1,class:`d-recipe-combobox-multi-select__list--loading`},p={ref:`footer`};function m(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`dt-chip`),s=(0,l.resolveComponent)(`dt-input`),c=(0,l.resolveComponent)(`dt-validation-messages`),u=(0,l.resolveComponent)(`dt-combobox-with-popover`);return(0,l.openBlock)(),(0,l.createBlock)(u,(0,l.mergeProps)({ref:`comboboxWithPopover`,label:n.label,"show-list":n.showList,"max-height":n.listMaxHeight,"max-width":n.listMaxWidth,"popover-offset":i.popoverOffset,"has-suggestion-list":n.hasSuggestionList,"content-width":`anchor`,"append-to":n.appendTo,"dialog-class":n.dialogClass,transition:n.transition},a.extractNonListeners(e.$attrs),{onSelect:a.onComboboxSelect,onHighlight:a.comboboxHighlight}),(0,l.createSlots)({input:(0,l.withCtx)(({onInput:e})=>[(0,l.createElementVNode)(`span`,{ref:`inputSlotWrapper`,class:`d-recipe-combobox-multi-select__input-wrapper`,onFocusin:t[1]||(t[1]=(...e)=>a.handleInputFocusIn&&a.handleInputFocusIn(...e)),onFocusout:t[2]||(t[2]=(...e)=>a.handleInputFocusOut&&a.handleInputFocusOut(...e))},[(0,l.createElementVNode)(`span`,{ref:`chipsWrapper`,class:(0,l.normalizeClass)([`d-recipe-combobox-multi-select__chip-wrapper`,a.chipWrapperClass])},[((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)(n.selectedItems,(e,t)=>((0,l.openBlock)(),(0,l.createBlock)(o,(0,l.mergeProps)({ref_for:!0,ref:`chips`,key:`${t}-${e}`,"label-class":[`d-chip__label`],class:[`d-recipe-combobox-multi-select__chip`,{"d-recipe-combobox-multi-select__chip--truncate":!!n.chipMaxWidth}],style:{maxWidth:n.chipMaxWidth},size:i.CHIP_SIZES[n.size],disabled:n.disabled},(0,l.toHandlers)(a.chipListeners),{onKeydown:(0,l.withKeys)(t=>a.onChipRemove(e),[`backspace`]),onClose:t=>a.onChipRemove(e)}),{default:(0,l.withCtx)(()=>[(0,l.createTextVNode)((0,l.toDisplayString)(e),1)]),_:2},1040,[`class`,`style`,`size`,`disabled`,`onKeydown`,`onClose`]))),128))],2),(0,l.createVNode)(s,(0,l.mergeProps)({ref:`input`,modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=e=>i.value=e),class:`d-recipe-combobox-multi-select__input`,"input-class":[n.inputClass,{"d-recipe-combobox-multi-select__input--hidden":i.hideInputText}],"input-wrapper-class":n.inputWrapperClass,disabled:n.disabled,"aria-label":n.label,label:n.labelVisible?n.label:``,description:n.description,placeholder:a.inputPlaceHolder,"show-messages":n.showInputMessages,messages:n.inputMessages,size:n.size},a.inputListeners,{onInput:e}),null,16,[`modelValue`,`input-class`,`input-wrapper-class`,`disabled`,`aria-label`,`label`,`description`,`placeholder`,`show-messages`,`messages`,`size`,`onInput`]),(0,l.createVNode)(c,{"validation-messages":n.maxSelectedMessage,"show-messages":i.showValidationMessages},null,8,[`validation-messages`,`show-messages`])],544)]),list:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,{ref:`list`,class:`d-recipe-combobox-multi-select__list`,onMousedown:t[3]||(t[3]=(0,l.withModifiers)(()=>{},[`prevent`]))},[n.loading?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,f,(0,l.toDisplayString)(n.loadingMessage),1)):(0,l.renderSlot)(e.$slots,`list`,{key:0})],544)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`header`,fn:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,d,[(0,l.renderSlot)(e.$slots,`header`)],512)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footer`,fn:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,p,[(0,l.renderSlot)(e.$slots,`footer`)],512)]),key:`1`}:void 0]),1040,[`label`,`show-list`,`max-height`,`max-width`,`popover-offset`,`has-suggestion-list`,`append-to`,`dialog-class`,`transition`,`onSelect`,`onHighlight`])}var h=n.t(u,[[`render`,m]]);exports.default=h;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../validation-messages/validation-messages.cjs`),i=require(`../chip/chip.cjs`),a=require(`../popover/popover-constants.cjs`),o=require(`../input/input.cjs`),s=require(`../combobox-with-popover/combobox-with-popover.cjs`),c=require(`./combobox-multi-select-constants.cjs`);let l=require(`vue`);var u={compatConfig:{MODE:3},name:`DtComboboxMultiSelect`,components:{DtComboboxWithPopover:s.default,DtInput:o.default,DtChip:i.default,DtValidationMessages:r.default},inheritAttrs:!1,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=>e.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:e=>Object.values(c.MULTI_SELECT_SIZES).includes(e)},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>a.POPOVER_APPEND_TO_VALUES.includes(e)||e 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:``},disabled:{type:Boolean,default:!1},dialogClass:{type:[String,Object,Array],default:``}},emits:[`input`,`select`,`remove`,`max-selected`,`keydown`,`chip-keydown`,`escape`,`enter`,`combobox-highlight`],data(){return{value:``,popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,initialInputHeight:null,CHIP_SIZES:c.CHIP_SIZES,hasSlotContent:t.hasSlotContent,inputFocused:!1,hideInputText:!1}},computed:{inputPlaceHolder(){return this.selectedItems?.length>0?``:this.placeholder},chipListeners(){return{keydown:e=>{this.disabled||(this.onChipKeyDown(e),this.$emit(`chip-keydown`,e))}}},inputListeners(){return{...t.extractVueListeners(this.$attrs),onInput:e=>{this.$emit(`input`,e),this.hasSuggestionList&&this.showComboboxList()},onKeydown:e=>{if(this.disabled)return;this.onInputKeyDown(e),this.$emit(`keydown`,e);let t=e.key?.toLowerCase();t===`escape`?this.$emit(`escape`,e):t===`enter`&&this.$emit(`enter`,e)},onClick:()=>{this.hasSuggestionList&&this.showComboboxList()}}},chipWrapperClass(){return{[`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]:!this.inputFocused&&this.collapseOnFocusOut}}},watch:{selectedItems:{deep:!0,handler:async function(){await this.initSelectedItems()}},chipMaxWidth:{async handler(){await this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();let e=this.getInput();this.revertInputPadding(e),this.setInitialInputHeight(),this.setInputPadding(),this.setChipsTopPosition()}}},async mounted(){this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),await this.initSelectedItems()},beforeUnmount(){this.resizeWindowObserver?.unobserve(document.body)},methods:{extractNonListeners:t.extractNonListeners,comboboxHighlight(e){this.$emit(`combobox-highlight`,e)},async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(e){this.$emit(`remove`,e),this.$refs.input?.focus()},onComboboxSelect(e){this.loading||(this.value=``,this.$emit(`select`,e))},showComboboxList(){this.showList??this.$refs.comboboxWithPopover?.showComboboxList()},closeComboboxList(){this.showList??this.$refs.comboboxWithPopover?.closeComboboxList()},getChips(){if(!this.selectedItems.length||!this.$refs.chips)return null;let e=new Set;return this.selectedItems.map(n=>this.$refs.chips.find((r,i)=>e.has(i)?!1:t.returnFirstEl(r.$el)?.querySelector(`.d-chip__label`)?.textContent?.trim()===n?(e.add(i),!0):!1)).filter(Boolean).map(e=>t.returnFirstEl(e.$el))},getChipButtons(){let e=this.getChips();return e&&e.map(e=>t.returnFirstEl(e).querySelector(`button`))},getLastChipButton(){let e=this.getChipButtons();return e&&e[e.length-1]},getLastChip(){let e=this.getChips();return e&&e[e.length-1]},getFirstChip(){let e=this.getChips();return e&&e[0]},getInput(){return this.$refs.input?.$refs.input},onChipKeyDown(e){let t=e.code?.toLowerCase();t===`arrowleft`?this.navigateBetweenChips(e.target,!0):t===`arrowright`&&(e.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(e.target,!1))},onInputKeyDown(e){let t=e.key?.toLowerCase();if(this.selectedItems.length>0&&e.target.selectionStart===0){if(e.target.selectionEnd!==e.target.selectionStart)return;(t===`backspace`||t===`arrowleft`)&&this.moveFromInputToChip()}},moveFromInputToChip(){this.getLastChipButton().focus(),this.$refs.input?.blur(),this.closeComboboxList()},moveFromChipToInput(){this.getLastChipButton().blur(),this.$refs.input?.focus(),this.showComboboxList()},navigateBetweenChips(e,t){let n=this.getChipButtons().indexOf(e),r=t?n-1:n+1;r<0||r>=this.$refs.chips?.length||(this.getChipButtons()[n].blur(),this.getChipButtons()[r].focus(),this.closeComboboxList())},setChipsTopPosition(){let e=this.getInput();if(!e)return;let t=this.$refs.inputSlotWrapper,n=e.getBoundingClientRect().top-t.getBoundingClientRect().top,r=this.$refs.chipsWrapper;r.style.top=n-c.CHIP_TOP_POSITION[this.size]+`px`},setInputPadding(){let e=this.getLastChip(),t=this.getInput();if(!t||(this.revertInputPadding(t),this.popoverOffset=[0,4],!e)||this.collapseOnFocusOut&&!this.inputFocused)return;let n=e.offsetLeft+this.getFullWidth(e),r=t.getBoundingClientRect().width-n,i=this.getFirstChip(),a=i&&e.offsetTop>i.offsetTop;r>this.reservedRightSpace?t.style.paddingLeft=n+`px`:t.style.paddingLeft=`4px`;let o=this.getInputPaddingTop(e,r>this.reservedRightSpace,a);o!=null&&(t.style.paddingTop=`${o}px`)},getInputPaddingTop(e,t,n){if(t&&!n)return null;if(t)return e.offsetTop+2;let r=parseFloat(getComputedStyle(e).marginTop)||0,i=e.getBoundingClientRect().height;return e.offsetTop+i+r+2},revertInputPadding(e){e.style.paddingLeft=``,e.style.paddingTop=``,e.style.paddingBottom=``},getFullWidth(e){let t=window.getComputedStyle(e);return e.offsetWidth+parseInt(t.marginLeft)+parseInt(t.marginRight)},setInputMinWidth(){let e=this.getFirstChip(),t=this.getInput();t&&(e?t.style.minWidth=this.getFullWidth(e)+4+`px`:t.style.minWidth=``)},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit(`max-selected`)):this.showValidationMessages=!1)},setInitialInputHeight(){let e=this.getInput();e&&(e.style.minHeight=``,e.style.height=``,this.initialInputHeight=e.getBoundingClientRect().height,this.size!==`xs`&&(e.style.minHeight=`${this.initialInputHeight}px`,e.style.height=`auto`))},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;let e=this.getInput();if(!e||!e.style.paddingTop)return;this.revertInputPadding(e)}}}},d={ref:`header`},f={key:1,class:`d-recipe-combobox-multi-select__list--loading`},p={ref:`footer`};function m(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`dt-chip`),s=(0,l.resolveComponent)(`dt-input`),c=(0,l.resolveComponent)(`dt-validation-messages`),u=(0,l.resolveComponent)(`dt-combobox-with-popover`);return(0,l.openBlock)(),(0,l.createBlock)(u,(0,l.mergeProps)({ref:`comboboxWithPopover`,label:n.label,"show-list":n.showList,"max-height":n.listMaxHeight,"max-width":n.listMaxWidth,"popover-offset":i.popoverOffset,"has-suggestion-list":n.hasSuggestionList,"content-width":`anchor`,"append-to":n.appendTo,"dialog-class":n.dialogClass,transition:n.transition},a.extractNonListeners(e.$attrs),{onSelect:a.onComboboxSelect,onHighlight:a.comboboxHighlight}),(0,l.createSlots)({input:(0,l.withCtx)(({onInput:e})=>[(0,l.createElementVNode)(`span`,{ref:`inputSlotWrapper`,class:`d-recipe-combobox-multi-select__input-wrapper`,onFocusin:t[1]||(t[1]=(...e)=>a.handleInputFocusIn&&a.handleInputFocusIn(...e)),onFocusout:t[2]||(t[2]=(...e)=>a.handleInputFocusOut&&a.handleInputFocusOut(...e))},[(0,l.createElementVNode)(`span`,{ref:`chipsWrapper`,class:(0,l.normalizeClass)([`d-recipe-combobox-multi-select__chip-wrapper`,a.chipWrapperClass])},[((0,l.openBlock)(!0),(0,l.createElementBlock)(l.Fragment,null,(0,l.renderList)(n.selectedItems,(e,t)=>((0,l.openBlock)(),(0,l.createBlock)(o,(0,l.mergeProps)({ref_for:!0,ref:`chips`,key:`${t}-${e}`,"label-class":[`d-chip__label`],class:[`d-recipe-combobox-multi-select__chip`,{"d-recipe-combobox-multi-select__chip--truncate":!!n.chipMaxWidth}],style:{maxWidth:n.chipMaxWidth},size:i.CHIP_SIZES[n.size],disabled:n.disabled},(0,l.toHandlers)(a.chipListeners),{onKeydown:(0,l.withKeys)(t=>a.onChipRemove(e),[`backspace`]),onClose:t=>a.onChipRemove(e)}),{default:(0,l.withCtx)(()=>[(0,l.createTextVNode)((0,l.toDisplayString)(e),1)]),_:2},1040,[`class`,`style`,`size`,`disabled`,`onKeydown`,`onClose`]))),128))],2),(0,l.createVNode)(s,(0,l.mergeProps)({ref:`input`,modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=e=>i.value=e),class:`d-recipe-combobox-multi-select__input`,"input-class":[n.inputClass,{"d-recipe-combobox-multi-select__input--hidden":i.hideInputText}],"input-wrapper-class":n.inputWrapperClass,disabled:n.disabled,"aria-label":n.label,label:n.labelVisible?n.label:``,description:n.description,placeholder:a.inputPlaceHolder,"show-messages":n.showInputMessages,messages:n.inputMessages,size:n.size},a.inputListeners,{onInput:e}),null,16,[`modelValue`,`input-class`,`input-wrapper-class`,`disabled`,`aria-label`,`label`,`description`,`placeholder`,`show-messages`,`messages`,`size`,`onInput`]),(0,l.createVNode)(c,{"validation-messages":n.maxSelectedMessage,"show-messages":i.showValidationMessages},null,8,[`validation-messages`,`show-messages`])],544)]),list:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,{ref:`list`,class:`d-recipe-combobox-multi-select__list`,onMousedown:t[3]||(t[3]=(0,l.withModifiers)(()=>{},[`prevent`]))},[n.loading?((0,l.openBlock)(),(0,l.createElementBlock)(`div`,f,(0,l.toDisplayString)(n.loadingMessage),1)):(0,l.renderSlot)(e.$slots,`list`,{key:0})],544)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`header`,fn:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,d,[(0,l.renderSlot)(e.$slots,`header`)],512)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footer`,fn:(0,l.withCtx)(()=>[(0,l.createElementVNode)(`div`,p,[(0,l.renderSlot)(e.$slots,`footer`)],512)]),key:`1`}:void 0]),1040,[`label`,`show-list`,`max-height`,`max-width`,`popover-offset`,`has-suggestion-list`,`append-to`,`dialog-class`,`transition`,`onSelect`,`onHighlight`])}var h=n.t(u,[[`render`,m]]);exports.default=h;
 //# sourceMappingURL=combobox-multi-select.cjs.map

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

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

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

@@ -213,7 +213,7 @@ var M = {
 		size: { async handler() {
 			await this.$nextTick();
 			let e = this.getInput();
-			this.revertInputPadding(e), this.initialInputHeight = e.getBoundingClientRect().height, this.setInputPadding(), this.setChipsTopPosition();
+			this.revertInputPadding(e), this.setInitialInputHeight(), this.setInputPadding(), this.setChipsTopPosition();
 		} }
 	},
 	async mounted() {
@@ -296,12 +296,18 @@ var M = {
 			r.style.top = n - f[this.size] + "px";
 		},
 		setInputPadding() {
-			let e = this.getLastChip(), t = this.getInput(), n = this.$refs.chipsWrapper;
+			let e = this.getLastChip(), t = this.getInput();
 			if (!t || (this.revertInputPadding(t), this.popoverOffset = [0, 4], !e) || this.collapseOnFocusOut && !this.inputFocused) return;
-			let r = e.offsetLeft + this.getFullWidth(e), i = t.getBoundingClientRect().width - r;
-			i > this.reservedRightSpace ? t.style.paddingLeft = r + "px" : t.style.paddingLeft = "4px";
-			let a = n.getBoundingClientRect().height - 4, o = e.getBoundingClientRect().height - 4, s = i > this.reservedRightSpace ? e.offsetTop + 2 : a + o - 9;
-			t.style.paddingTop = `${s}px`;
+			let n = e.offsetLeft + this.getFullWidth(e), r = t.getBoundingClientRect().width - n, i = this.getFirstChip(), a = i && e.offsetTop > i.offsetTop;
+			r > this.reservedRightSpace ? t.style.paddingLeft = n + "px" : t.style.paddingLeft = "4px";
+			let o = this.getInputPaddingTop(e, r > this.reservedRightSpace, a);
+			o != null && (t.style.paddingTop = `${o}px`);
+		},
+		getInputPaddingTop(e, t, n) {
+			if (t && !n) return null;
+			if (t) return e.offsetTop + 2;
+			let r = parseFloat(getComputedStyle(e).marginTop) || 0, i = e.getBoundingClientRect().height;
+			return e.offsetTop + i + r + 2;
 		},
 		revertInputPadding(e) {
 			e.style.paddingLeft = "", e.style.paddingTop = "", e.style.paddingBottom = "";
@@ -319,7 +325,7 @@ var M = {
 		},
 		setInitialInputHeight() {
 			let e = this.getInput();
-			e && (this.initialInputHeight = e.getBoundingClientRect().height);
+			e && (e.style.minHeight = "", e.style.height = "", this.initialInputHeight = e.getBoundingClientRect().height, this.size !== "xs" && (e.style.minHeight = `${this.initialInputHeight}px`, e.style.height = "auto"));
 		},
 		async handleInputFocusIn() {
 			this.inputFocused = !0, this.collapseOnFocusOut && (this.hideInputText = !1, await this.$nextTick(), this.setInputPadding());

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.js","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :dialog-class=\"dialogClass\"\n    :transition=\"transition\"\n    v-bind=\"extractNonListeners($attrs)\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"(item, index) in selectedItems\"\n            ref=\"chips\"\n            :key=\"`${index}-${item}`\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[size]\"\n            :disabled=\"disabled\"\n            v-on=\"chipListeners\"\n            @keydown.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :disabled=\"disabled\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-bind=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"hasSlotContent($slots.header)\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"hasSlotContent($slots.footer)\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtComboboxWithPopover from '@/components/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl } from '@/common/utils';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxMultiSelect',\n\n  components: {\n    DtComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * When true, disables the underlying input.\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\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 keydown event fired when a key is pressed in the text input.\n     * For the common Escape and Enter cases, listen to `escape` / `enter` instead.\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native keydown event fired when a key is pressed while a chip is focused.\n     *\n     * @event chip-keydown\n     * @type {KeyboardEvent}\n     */\n    'chip-keydown',\n\n    /**\n     * Fired when Escape is pressed in the text input.\n     * Not fired when a chip is focused.\n     *\n     * @event escape\n     * @type {KeyboardEvent}\n     */\n    'escape',\n\n    /**\n     * Fired when Enter is pressed in the text input.\n     * Not fired when a chip is focused.\n     *\n     * @event enter\n     * @type {KeyboardEvent}\n     */\n    'enter',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      hasSlotContent,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        keydown: event => {\n          if (this.disabled) return;\n          this.onChipKeyDown(event);\n          this.$emit('chip-keydown', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        onInput: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        onKeydown: event => {\n          if (this.disabled) return;\n          this.onInputKeyDown(event);\n          this.$emit('keydown', event);\n          // Use event.key (not event.code) so NumpadEnter normalizes to 'Enter'\n          // and consumers don't have to special-case the numpad.\n          const key = event.key?.toLowerCase();\n          if (key === 'escape') {\n            this.$emit('escape', event);\n          } else if (key === 'enter') {\n            this.$emit('enter', event);\n          }\n        },\n\n        onClick: () => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      deep: true,\n      handler: async function () {\n        await this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        await this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.initialInputHeight = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  async mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    await this.initSelectedItems();\n  },\n\n  beforeUnmount () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    extractNonListeners,\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChips () {\n      if (!this.selectedItems.length || !this.$refs.chips) return null;\n\n      // Use the order from selectedItems to not rely on DOM order which may be stale.\n      // Track matched indices to handle duplicate item names correctly.\n      const matched = new Set();\n      const chips = this.selectedItems.map(item => {\n        return this.$refs.chips.find((chip, index) => {\n          if (matched.has(index)) return false;\n          const chipLabel = returnFirstEl(chip.$el)?.querySelector('.d-chip__label')?.textContent?.trim();\n          if (chipLabel === item) {\n            matched.add(index);\n            return true;\n          }\n          return false;\n        });\n      });\n      return chips.filter(Boolean).map(chip => returnFirstEl(chip.$el));\n    },\n\n    getChipButtons () {\n      const chips = this.getChips();\n      return chips && chips.map(chip => returnFirstEl(chip).querySelector('button'));\n    },\n\n    getLastChipButton () {\n      const chipButtons = this.getChipButtons();\n      return chipButtons && chipButtons[chipButtons.length - 1];\n    },\n\n    getLastChip () {\n      const chips = this.getChips();\n      return chips && chips[chips.length - 1];\n    },\n\n    getFirstChip () {\n      const chips = this.getChips();\n      return chips && chips[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyDown (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyDown (event) {\n      const key = event.key?.toLowerCase();\n      // If the cursor is at the start of the text,\n      // press 'backspace' or 'left' focuses the last chip\n      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n        // if there is selected text, do not focus the last chip\n        if (event.target.selectionEnd !== event.target.selectionStart) {\n          return;\n        }\n        if (key === 'backspace' || key === 'arrowleft') {\n          this.moveFromInputToChip();\n        }\n      }\n    },\n\n    moveFromInputToChip () {\n      this.getLastChipButton().focus();\n      this.$refs.input?.blur();\n      this.closeComboboxList();\n    },\n\n    moveFromChipToInput () {\n      this.getLastChipButton().blur();\n      this.$refs.input?.focus();\n      this.showComboboxList();\n    },\n\n    navigateBetweenChips (target, toLeft) {\n      const from = this.getChipButtons().indexOf(target);\n      const to = toLeft ? from - 1 : from + 1;\n      if (to < 0 || to >= this.$refs.chips?.length) {\n        return;\n      }\n      this.getChipButtons()[from].blur();\n      this.getChipButtons()[to].focus();\n      this.closeComboboxList();\n    },\n\n    setChipsTopPosition () {\n      // To place the chips in the input box\n      // The chip \"top\" position should be the same line as the input box\n      const input = this.getInput();\n      if (!input) return;\n      const inputSlotWrapper = this.$refs.inputSlotWrapper;\n      const top = input.getBoundingClientRect().top -\n                  inputSlotWrapper.getBoundingClientRect().top;\n      const chipsWrapper = this.$refs.chipsWrapper;\n      chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n    },\n\n    setInputPadding () {\n      const lastChip = this.getLastChip();\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      if (!input) return;\n      this.revertInputPadding(input);\n      this.popoverOffset = [0, 4];\n      if (!lastChip) return;\n      // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n      // This ensures the input returns to its original state when resizing\n      if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n      // Get the position of the last chip\n      // The input cursor should be the same \"top\" as that chip and next besides it\n      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n      const spaceLeft = input.getBoundingClientRect().width - left;\n      // input.style.paddingLeft = left + 'px';\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      // Get the chip wrapper height minus the 4px padding\n      const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n      const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = spaceLeft > this.reservedRightSpace\n        ? lastChip.offsetTop + 2\n        : (chipsWrapperHeight + lastChipHeight - 9);\n\n      input.style.paddingTop = `${top}px`;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingLeft = '';\n      input.style.paddingTop = '';\n      input.style.paddingBottom = '';\n    },\n\n    getFullWidth (el) {\n      const styles = window.getComputedStyle(el);\n      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n    },\n\n    setInputMinWidth () {\n      // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n      const firstChip = this.getFirstChip();\n      const input = this.getInput();\n      if (!input) return;\n      if (firstChip) {\n        // Add 4px buffer for typing room\n        input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n      } else {\n        input.style.minWidth = '';\n      }\n    },\n\n    checkMaxSelected () {\n      if (this.maxSelected === 0) return;\n      if (this.selectedItems.length > this.maxSelected) {\n        this.showValidationMessages = true;\n        this.$emit('max-selected');\n      } else {\n        this.showValidationMessages = false;\n      }\n    },\n\n    setInitialInputHeight () {\n      const input = this.getInput();\n      if (!input) return;\n      this.initialInputHeight = input.getBoundingClientRect().height;\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = false;\n        await this.$nextTick();\n        this.setInputPadding();\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = true;\n        const input = this.getInput();\n        if (!input) return;\n        // Hide the input text when is not on first line\n        if (!input.style.paddingTop) {\n          return;\n        }\n        this.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"combobox-multi-select.js","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n  <dt-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :max-width=\"listMaxWidth\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :dialog-class=\"dialogClass\"\n    :transition=\"transition\"\n    v-bind=\"extractNonListeners($attrs)\"\n    @select=\"onComboboxSelect\"\n    @highlight=\"comboboxHighlight\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"d-recipe-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n        >\n          <dt-chip\n            v-for=\"(item, index) in selectedItems\"\n            ref=\"chips\"\n            :key=\"`${index}-${item}`\"\n            :label-class=\"['d-chip__label']\"\n            :class=\"[\n              'd-recipe-combobox-multi-select__chip',\n              { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[size]\"\n            :disabled=\"disabled\"\n            v-on=\"chipListeners\"\n            @keydown.backspace=\"onChipRemove(item)\"\n            @close=\"onChipRemove(item)\"\n          >\n            {{ item }}\n          </dt-chip>\n        </span>\n\n        <dt-input\n          ref=\"input\"\n          v-model=\"value\"\n          class=\"d-recipe-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :disabled=\"disabled\"\n          :aria-label=\"label\"\n          :label=\"labelVisible ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-bind=\"inputListeners\"\n          @input=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :validation-messages=\"maxSelectedMessage\"\n          :show-messages=\"showValidationMessages\"\n        />\n      </span>\n    </template>\n\n    <!-- @slot slot for popover header -->\n    <template\n      v-if=\"hasSlotContent($slots.header)\"\n      #header\n    >\n      <div ref=\"header\">\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <!-- @slot slot for popover list -->\n    <template #list>\n      <div\n        ref=\"list\"\n        class=\"d-recipe-combobox-multi-select__list\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-recipe-combobox-multi-select__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"hasSlotContent($slots.footer)\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport DtComboboxWithPopover from '@/components/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl } from '@/common/utils';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n  MULTI_SELECT_SIZES,\n  CHIP_SIZES,\n  CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxMultiSelect',\n\n  components: {\n    DtComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Input placeholder\n     */\n    placeholder: {\n      type: String,\n      default: 'Select one or start typing',\n    },\n\n    /**\n     * Input validation messages\n     */\n    inputMessages: {\n      type: Array,\n      default: () => [],\n      validator: inputMessages => {\n        return validationMessageValidator(inputMessages);\n      },\n    },\n\n    /**\n     * Show input validation message\n     */\n    showInputMessages: {\n      type: Boolean,\n      default: true,\n    },\n\n    // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n    // type: {\n    //   type: String,\n    //   values: ['input', 'select'],\n    //   default: 'select',\n    // },\n\n    /**\n     * Determines if the list is loading\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The message when the list is loading\n     */\n    loadingMessage: {\n      type: String,\n      default: 'loading...',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxHeight: {\n      type: String,\n      default: '300px',\n    },\n\n    /**\n     * The selected items\n     */\n    selectedItems: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Would be the maximum number of selections you can make. 0 is unlimited\n     */\n    maxSelected: {\n      type: Number,\n      default: 0,\n    },\n\n    /**\n     * Max select message when the max selections is exceeded with the structure:\n     * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n     */\n    maxSelectedMessage: {\n      type: Array,\n      default: function () { return []; },\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the chip, one of `xs`, `sm`, `md`\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * Determines whether the combobox should collapse to a single when losing focus.\n     * @type {boolean}\n     */\n    collapseOnFocusOut: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    listMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n    * Amount of reserved space (in px) on the right side of the input\n    * before the chips and the input caret jump to the next line.\n    * default is 64\n    */\n    reservedRightSpace: {\n      type: Number,\n      default: 64,\n    },\n\n    /**\n     * Determines the maximum width of a single chip. If the text within this chip exceeds the value\n     * it will be truncated with ellipses.\n     * Possible units rem|px|em\n     */\n    chipMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * When true, disables the underlying input.\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\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 keydown event fired when a key is pressed in the text input.\n     * For the common Escape and Enter cases, listen to `escape` / `enter` instead.\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native keydown event fired when a key is pressed while a chip is focused.\n     *\n     * @event chip-keydown\n     * @type {KeyboardEvent}\n     */\n    'chip-keydown',\n\n    /**\n     * Fired when Escape is pressed in the text input.\n     * Not fired when a chip is focused.\n     *\n     * @event escape\n     * @type {KeyboardEvent}\n     */\n    'escape',\n\n    /**\n     * Fired when Enter is pressed in the text input.\n     * Not fired when a chip is focused.\n     *\n     * @event enter\n     * @type {KeyboardEvent}\n     */\n    'enter',\n\n    /**\n     * Event fired when combobox item is highlighted\n     *\n     * @event combobox-highlight\n     * @type {Object}\n     */\n    'combobox-highlight',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      resizeWindowObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      hasSlotContent,\n      inputFocused: false,\n      hideInputText: false,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        keydown: event => {\n          if (this.disabled) return;\n          this.onChipKeyDown(event);\n          this.$emit('chip-keydown', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        onInput: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        onKeydown: event => {\n          if (this.disabled) return;\n          this.onInputKeyDown(event);\n          this.$emit('keydown', event);\n          // Use event.key (not event.code) so NumpadEnter normalizes to 'Enter'\n          // and consumers don't have to special-case the numpad.\n          const key = event.key?.toLowerCase();\n          if (key === 'escape') {\n            this.$emit('escape', event);\n          } else if (key === 'enter') {\n            this.$emit('enter', event);\n          }\n        },\n\n        onClick: () => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n\n    chipWrapperClass () {\n      return {\n        [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      deep: true,\n      handler: async function () {\n        await this.initSelectedItems();\n      },\n    },\n\n    chipMaxWidth: {\n      async handler () {\n        await this.initSelectedItems();\n      },\n    },\n\n    async label () {\n      await this.$nextTick();\n      // Adjust the chips position if label changed\n      this.setChipsTopPosition();\n    },\n\n    async description () {\n      await this.$nextTick();\n      // Adjust the chips position if description changed\n      this.setChipsTopPosition();\n    },\n\n    size: {\n      async handler () {\n        await this.$nextTick();\n        const input = this.getInput();\n        this.revertInputPadding(input);\n        this.setInitialInputHeight();\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  async mounted () {\n    this.setInitialInputHeight();\n    // Recalculate chip position and input padding when resizing window\n    this.resizeWindowObserver = new ResizeObserver(async () => {\n      this.setChipsTopPosition();\n      this.setInputPadding();\n    });\n    this.resizeWindowObserver.observe(document.body);\n\n    await this.initSelectedItems();\n  },\n\n  beforeUnmount () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\n    extractNonListeners,\n    comboboxHighlight (highlightIndex) {\n      this.$emit('combobox-highlight', highlightIndex);\n    },\n\n    async initSelectedItems () {\n      await this.$nextTick();\n      this.setInputPadding();\n      this.setChipsTopPosition();\n      this.setInputMinWidth();\n      this.checkMaxSelected();\n    },\n\n    onChipRemove (item) {\n      this.$emit('remove', item);\n      this.$refs.input?.focus();\n    },\n\n    onComboboxSelect (i) {\n      if (this.loading) return;\n      this.value = '';\n      this.$emit('select', i);\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.showComboboxList();\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.$refs.comboboxWithPopover?.closeComboboxList();\n    },\n\n    getChips () {\n      if (!this.selectedItems.length || !this.$refs.chips) return null;\n\n      // Use the order from selectedItems to not rely on DOM order which may be stale.\n      // Track matched indices to handle duplicate item names correctly.\n      const matched = new Set();\n      const chips = this.selectedItems.map(item => {\n        return this.$refs.chips.find((chip, index) => {\n          if (matched.has(index)) return false;\n          const chipLabel = returnFirstEl(chip.$el)?.querySelector('.d-chip__label')?.textContent?.trim();\n          if (chipLabel === item) {\n            matched.add(index);\n            return true;\n          }\n          return false;\n        });\n      });\n      return chips.filter(Boolean).map(chip => returnFirstEl(chip.$el));\n    },\n\n    getChipButtons () {\n      const chips = this.getChips();\n      return chips && chips.map(chip => returnFirstEl(chip).querySelector('button'));\n    },\n\n    getLastChipButton () {\n      const chipButtons = this.getChipButtons();\n      return chipButtons && chipButtons[chipButtons.length - 1];\n    },\n\n    getLastChip () {\n      const chips = this.getChips();\n      return chips && chips[chips.length - 1];\n    },\n\n    getFirstChip () {\n      const chips = this.getChips();\n      return chips && chips[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyDown (event) {\n      const key = event.code?.toLowerCase();\n      if (key === 'arrowleft') {\n        // Move to the previous chip\n        this.navigateBetweenChips(event.target, true);\n      } else if (key === 'arrowright') {\n        if (event.target.id === this.getLastChipButton().id) {\n          // Move to the input if it's the last chip\n          this.moveFromChipToInput();\n        } else {\n          // Move to the next chip\n          this.navigateBetweenChips(event.target, false);\n        }\n      }\n    },\n\n    onInputKeyDown (event) {\n      const key = event.key?.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      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      const firstChip = this.getFirstChip();\n      const isWrapped = firstChip && lastChip.offsetTop > firstChip.offsetTop;\n\n      if (spaceLeft > this.reservedRightSpace) {\n        input.style.paddingLeft = left + 'px';\n      } else {\n        input.style.paddingLeft = '4px';\n      }\n\n      const paddingTop = this.getInputPaddingTop(lastChip, spaceLeft > this.reservedRightSpace, isWrapped);\n      if (paddingTop != null) input.style.paddingTop = `${paddingTop}px`;\n    },\n\n    getInputPaddingTop (lastChip, hasSpace, isWrapped) {\n      // Chip fits beside the cursor on its row; CSS handles vertical centering.\n      if (hasSpace && !isWrapped) return null;\n      // Chip wrapped onto a new row with space remaining; align cursor to it.\n      if (hasSpace) return lastChip.offsetTop + 2;\n      // No space on the chip's row — predict next-row offsetTop so paddingTop\n      // stays stable when a chip lands there.\n      const chipMarginTop = parseFloat(getComputedStyle(lastChip).marginTop) || 0;\n      const lastChipHeight = lastChip.getBoundingClientRect().height;\n      return lastChip.offsetTop + lastChipHeight + chipMarginTop + 2;\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      input.style.minHeight = '';\n      input.style.height = '';\n      this.initialInputHeight = input.getBoundingClientRect().height;\n      // xs renders correctly without a min-height floor; other sizes need it to grow when chips wrap.\n      if (this.size !== 'xs') {\n        input.style.minHeight = `${this.initialInputHeight}px`;\n        input.style.height = 'auto';\n      }\n    },\n\n    async handleInputFocusIn () {\n      this.inputFocused = true;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = false;\n        await this.$nextTick();\n        this.setInputPadding();\n      }\n    },\n\n    async handleInputFocusOut () {\n      this.inputFocused = false;\n      if (this.collapseOnFocusOut) {\n        this.hideInputText = true;\n        const input = this.getInput();\n        if (!input) return;\n        // Hide the input text when is not on first line\n        if (!input.style.paddingTop) {\n          return;\n        }\n        this.revertInputPadding(input);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;;;;;AAwIA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,uBAAA;EACA,SAAA;EACA,QAAA;EACA,sBAAA;EACD;CAED,cAAc;CAEd,OAAO;EAIL,OAAO;GACL,MAAM;GACN,UAAU;GACX;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;GACN,eAAe,EAAE;GACjB,YAAW,MACF,EAA2B,EAAc;GAEnD;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAYD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAKD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAQD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;GACN,SAAS,WAAY;AAAE,WAAO,EAAE;;GACjC;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,oBAAoB;GAClB,MAAM;GACN,SAAS,WAAY;AAAE,WAAO,EAAE;;GACjC;EAMD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,OAAO,EAAmB,CAAC,SAAS,EAAE;GAChE;EAOD,UAAU;GACR,MAAM,CAAC,aAAa,OAAO;GAC3B,SAAS;GACT,YAAW,MACF,EAAyB,SAAS,EAAQ,IAC5C,aAAoB;GAE5B;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,oBAAoB;GAClB,MAAM;GACN,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAOD,oBAAoB;GAClB,MAAM;GACN,SAAS;GACV;EAOD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAOD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAOD,mBAAmB;GACjB,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EACF;CAED,OAAO;EAOL;EAQA;EAQA;EAQA;EASA;EAQA;EASA;EASA;EAQA;EACD;CAED,OAAQ;AACN,SAAO;GACL,OAAO;GACP,eAAe,CAAC,GAAG,EAAE;GACrB,wBAAwB;GACxB,sBAAsB;GACtB,oBAAoB;GACpB;GACA;GACA,cAAc;GACd,eAAe;GAChB;;CAGH,UAAU;EACR,mBAAoB;AAClB,UAAO,KAAK,eAAe,SAAS,IAAI,KAAK,KAAK;;EAGpD,gBAAiB;AACf,UAAO,EACL,UAAS,MAAS;AACZ,SAAK,aACT,KAAK,cAAc,EAAM,EACzB,KAAK,MAAM,gBAAgB,EAAM;MAEpC;;EAGH,iBAAkB;AAChB,UAAO;IACL,GAAG,EAAoB,KAAK,OAAO;IACnC,UAAS,MAAS;AAEhB,KADA,KAAK,MAAM,SAAS,EAAM,EACtB,KAAK,qBACP,KAAK,kBAAkB;;IAI3B,YAAW,MAAS;AAClB,SAAI,KAAK,SAAU;AAEnB,KADA,KAAK,eAAe,EAAM,EAC1B,KAAK,MAAM,WAAW,EAAM;KAG5B,IAAM,IAAM,EAAM,KAAK,aAAa;AACpC,KAAI,MAAQ,WACV,KAAK,MAAM,UAAU,EAAM,GAClB,MAAQ,WACjB,KAAK,MAAM,SAAS,EAAM;;IAI9B,eAAe;AACb,KAAI,KAAK,qBACP,KAAK,kBAAkB;;IAG5B;;EAGH,mBAAoB;AAClB,UAAO,GACJ,gDAAgD,KAAK,KAAK,eAAe,CAAC,KAAK,gBAAgB,KAAK,oBACtG;;EAEJ;CAED,OAAO;EACL,eAAe;GACb,MAAM;GACN,SAAS,iBAAkB;AACzB,UAAM,KAAK,mBAAmB;;GAEjC;EAED,cAAc,EACZ,MAAM,UAAW;AACf,SAAM,KAAK,mBAAmB;KAEjC;EAED,MAAM,QAAS;AAGb,GAFA,MAAM,KAAK,WAAW,EAEtB,KAAK,qBAAqB;;EAG5B,MAAM,cAAe;AAGnB,GAFA,MAAM,KAAK,WAAW,EAEtB,KAAK,qBAAqB;;EAG5B,MAAM,EACJ,MAAM,UAAW;AACf,SAAM,KAAK,WAAW;GACtB,IAAM,IAAQ,KAAK,UAAU;AAI7B,GAHA,KAAK,mBAAmB,EAAM,EAC9B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,qBAAqB;KAE7B;EACF;CAED,MAAM,UAAW;AASf,EARA,KAAK,uBAAuB,EAE5B,KAAK,uBAAuB,IAAI,eAAe,YAAY;AAEzD,GADA,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB;IACtB,EACF,KAAK,qBAAqB,QAAQ,SAAS,KAAK,EAEhD,MAAM,KAAK,mBAAmB;;CAGhC,gBAAiB;AACf,OAAK,sBAAsB,UAAU,SAAS,KAAK;;CAGrD,SAAS;EACP;EACA,kBAAmB,GAAgB;AACjC,QAAK,MAAM,sBAAsB,EAAe;;EAGlD,MAAM,oBAAqB;AAKzB,GAJA,MAAM,KAAK,WAAW,EACtB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EACvB,KAAK,kBAAkB;;EAGzB,aAAc,GAAM;AAElB,GADA,KAAK,MAAM,UAAU,EAAK,EAC1B,KAAK,MAAM,OAAO,OAAO;;EAG3B,iBAAkB,GAAG;AACf,QAAK,YACT,KAAK,QAAQ,IACb,KAAK,MAAM,UAAU,EAAE;;EAGzB,mBAAoB;AACd,QAAK,YACT,KAAK,MAAM,qBAAqB,kBAAkB;;EAGpD,oBAAqB;AACf,QAAK,YACT,KAAK,MAAM,qBAAqB,mBAAmB;;EAGrD,WAAY;AACV,OAAI,CAAC,KAAK,cAAc,UAAU,CAAC,KAAK,MAAM,MAAO,QAAO;GAI5D,IAAM,oBAAU,IAAI,KAAK;AAYzB,UAXc,KAAK,cAAc,KAAI,MAC5B,KAAK,MAAM,MAAM,MAAM,GAAM,MAC9B,EAAQ,IAAI,EAAM,GAAS,KACb,EAAc,EAAK,IAAI,EAAE,cAAc,iBAAiB,EAAE,aAAa,MAAM,KAC7E,KAChB,EAAQ,IAAI,EAAM,EACX,MAEF,GACP,CACF,CACW,OAAO,QAAQ,CAAC,KAAI,MAAQ,EAAc,EAAK,IAAI,CAAC;;EAGnE,iBAAkB;GAChB,IAAM,IAAQ,KAAK,UAAU;AAC7B,UAAO,KAAS,EAAM,KAAI,MAAQ,EAAc,EAAK,CAAC,cAAc,SAAS,CAAC;;EAGhF,oBAAqB;GACnB,IAAM,IAAc,KAAK,gBAAgB;AACzC,UAAO,KAAe,EAAY,EAAY,SAAS;;EAGzD,cAAe;GACb,IAAM,IAAQ,KAAK,UAAU;AAC7B,UAAO,KAAS,EAAM,EAAM,SAAS;;EAGvC,eAAgB;GACd,IAAM,IAAQ,KAAK,UAAU;AAC7B,UAAO,KAAS,EAAM;;EAGxB,WAAY;AACV,UAAO,KAAK,MAAM,OAAO,MAAM;;EAGjC,cAAe,GAAO;GACpB,IAAM,IAAM,EAAM,MAAM,aAAa;AACrC,GAAI,MAAQ,cAEV,KAAK,qBAAqB,EAAM,QAAQ,GAAK,GACpC,MAAQ,iBACb,EAAM,OAAO,OAAO,KAAK,mBAAmB,CAAC,KAE/C,KAAK,qBAAqB,GAG1B,KAAK,qBAAqB,EAAM,QAAQ,GAAM;;EAKpD,eAAgB,GAAO;GACrB,IAAM,IAAM,EAAM,KAAK,aAAa;AAGpC,OAAI,KAAK,cAAc,SAAS,KAAK,EAAM,OAAO,mBAAmB,GAAG;AAEtE,QAAI,EAAM,OAAO,iBAAiB,EAAM,OAAO,eAC7C;AAEF,KAAI,MAAQ,eAAe,MAAQ,gBACjC,KAAK,qBAAqB;;;EAKhC,sBAAuB;AAGrB,GAFA,KAAK,mBAAmB,CAAC,OAAO,EAChC,KAAK,MAAM,OAAO,MAAM,EACxB,KAAK,mBAAmB;;EAG1B,sBAAuB;AAGrB,GAFA,KAAK,mBAAmB,CAAC,MAAM,EAC/B,KAAK,MAAM,OAAO,OAAO,EACzB,KAAK,kBAAkB;;EAGzB,qBAAsB,GAAQ,GAAQ;GACpC,IAAM,IAAO,KAAK,gBAAgB,CAAC,QAAQ,EAAO,EAC5C,IAAK,IAAS,IAAO,IAAI,IAAO;AAClC,OAAK,KAAK,KAAM,KAAK,MAAM,OAAO,WAGtC,KAAK,gBAAgB,CAAC,GAAM,MAAM,EAClC,KAAK,gBAAgB,CAAC,GAAI,OAAO,EACjC,KAAK,mBAAmB;;EAG1B,sBAAuB;GAGrB,IAAM,IAAQ,KAAK,UAAU;AAC7B,OAAI,CAAC,EAAO;GACZ,IAAM,IAAmB,KAAK,MAAM,kBAC9B,IAAM,EAAM,uBAAuB,CAAC,MAC9B,EAAiB,uBAAuB,CAAC,KAC/C,IAAe,KAAK,MAAM;AAChC,KAAa,MAAM,MAAO,IAAM,EAAkB,KAAK,QAAS;;EAGlE,kBAAmB;GACjB,IAAM,IAAW,KAAK,aAAa,EAC7B,IAAQ,KAAK,UAAU;AAO7B,OANI,CAAC,MACL,KAAK,mBAAmB,EAAM,EAC9B,KAAK,gBAAgB,CAAC,GAAG,EAAE,EACvB,CAAC,MAGD,KAAK,sBAAsB,CAAC,KAAK,aAAc;GAInD,IAAM,IAAO,EAAS,aAAa,KAAK,aAAa,EAAS,EACxD,IAAY,EAAM,uBAAuB,CAAC,QAAQ,GAClD,IAAY,KAAK,cAAc,EAC/B,IAAY,KAAa,EAAS,YAAY,EAAU;AAE9D,GAAI,IAAY,KAAK,qBACnB,EAAM,MAAM,cAAc,IAAO,OAEjC,EAAM,MAAM,cAAc;GAG5B,IAAM,IAAa,KAAK,mBAAmB,GAAU,IAAY,KAAK,oBAAoB,EAAU;AACpG,GAAI,KAAc,SAAM,EAAM,MAAM,aAAa,GAAG,EAAW;;EAGjE,mBAAoB,GAAU,GAAU,GAAW;AAEjD,OAAI,KAAY,CAAC,EAAW,QAAO;AAEnC,OAAI,EAAU,QAAO,EAAS,YAAY;GAG1C,IAAM,IAAgB,WAAW,iBAAiB,EAAS,CAAC,UAAS,IAAK,GACpE,IAAiB,EAAS,uBAAuB,CAAC;AACxD,UAAO,EAAS,YAAY,IAAiB,IAAgB;;EAG/D,mBAAoB,GAAO;AAGzB,GAFA,EAAM,MAAM,cAAc,IAC1B,EAAM,MAAM,aAAa,IACzB,EAAM,MAAM,gBAAgB;;EAG9B,aAAc,GAAI;GAChB,IAAM,IAAS,OAAO,iBAAiB,EAAG;AAC1C,UAAO,EAAG,cAAc,SAAS,EAAO,WAAU,GAAI,SAAS,EAAO,YAAY;;EAGpF,mBAAoB;GAElB,IAAM,IAAY,KAAK,cAAc,EAC/B,IAAQ,KAAK,UAAU;AACxB,SACD,IAEF,EAAM,MAAM,WAAY,KAAK,aAAa,EAAS,GAAI,IAAK,OAE5D,EAAM,MAAM,WAAW;;EAI3B,mBAAoB;AACd,QAAK,gBAAgB,MACrB,KAAK,cAAc,SAAS,KAAK,eACnC,KAAK,yBAAyB,IAC9B,KAAK,MAAM,eAAe,IAE1B,KAAK,yBAAyB;;EAIlC,wBAAyB;GACvB,IAAM,IAAQ,KAAK,UAAU;AACxB,SACL,EAAM,MAAM,YAAY,IACxB,EAAM,MAAM,SAAS,IACrB,KAAK,qBAAqB,EAAM,uBAAuB,CAAC,QAEpD,KAAK,SAAS,SAChB,EAAM,MAAM,YAAY,GAAG,KAAK,mBAAmB,KACnD,EAAM,MAAM,SAAS;;EAIzB,MAAM,qBAAsB;AAE1B,GADA,KAAK,eAAe,IAChB,KAAK,uBACP,KAAK,gBAAgB,IACrB,MAAM,KAAK,WAAW,EACtB,KAAK,iBAAiB;;EAI1B,MAAM,sBAAuB;AAE3B,OADA,KAAK,eAAe,IAChB,KAAK,oBAAoB;AAC3B,SAAK,gBAAgB;IACrB,IAAM,IAAQ,KAAK,UAAU;AAG7B,QAFI,CAAC,KAED,CAAC,EAAM,MAAM,WACf;AAEF,SAAK,mBAAmB,EAAM;;;EAGnC;CACF,QAtvBU,KAAI,UAAQ;;CAkBb,OAAM;SAYL,KAAI,UAAQ;;;aA9GrB,EAkH2B,GAlH3B,EAkH2B;EAjHzB,KAAI;EACH,OAAO,EAAA;EACP,aAAW,EAAA;EACX,cAAY,EAAA;EACZ,aAAW,EAAA;EACX,kBAAgB,EAAA;EAChB,uBAAqB,EAAA;EACtB,iBAAc;EACb,aAAW,EAAA;EACX,gBAAc,EAAA;EACd,YAAY,EAAA;IACL,EAAA,oBAAoB,EAAA,OAAM,EAAA;EACjC,UAAQ,EAAA;EACR,aAAW,EAAA;;EAED,OAAK,GAwDP,EAxDW,iBAAO,CACzB,EAuDO,QAAA;GAtDL,KAAI;GACJ,OAAM;GACL,WAAO,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,sBAAA,EAAA,mBAAA,GAAA,EAAkB;GAC3B,YAAQ,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,uBAAA,EAAA,oBAAA,GAAA,EAAmB;;GAE9B,EAsBO,QAAA;IArBL,KAAI;IACH,OAAK,EAAA,CAAA,gDAAmD,EAAA,iBAAgB,CAAA;eAEzE,EAiBU,GAAA,MAAA,EAhBgB,EAAA,gBAAhB,GAAM,YADhB,EAiBU,GAjBV,EAiBU;;IAfR,KAAI;IACH,KAAG,GAAK,EAAK,GAAI;IACjB,eAAa,CAAA,gBAAiB;IAC9B,OAAK,CAAA,wCAAA,EAAA,kDAAA,CAAA,CAA8H,EAAA,cAAY,CAAA;IAI/I,OAAK,EAAA,UAAc,EAAA,cAAY;IAC/B,MAAM,EAAA,WAAW,EAAA;IACjB,UAAU,EAAA;MACX,EAAoB,EAAd,cAAa,EAAA;IAClB,WAAO,GAAA,MAAY,EAAA,aAAa,EAAI,EAAA,CAAA,YAAA,CAAA;IACpC,UAAK,MAAE,EAAA,aAAa,EAAI;;qBAEf,CAAA,EAAA,EAAP,EAAI,EAAA,EAAA,CAAA,CAAA;;;;;;;;;;GAIX,EAmBE,GAnBF,EAmBE;IAlBA,KAAI;gBACK,EAAA;kDAAA,EAAA,QAAK;IACd,OAAM;IACL,eAAW,CAAgB,EAAA,YAAU,EAAA,iDAAmE,EAAA,eAAA,CAAA;IAIxG,uBAAqB,EAAA;IACrB,UAAU,EAAA;IACV,cAAY,EAAA;IACZ,OAAO,EAAA,eAAe,EAAA,QAAK;IAC3B,aAAa,EAAA;IACb,aAAa,EAAA;IACb,iBAAe,EAAA;IACf,UAAU,EAAA;IACV,MAAM,EAAA;MACC,EAAA,gBAAc,EACd,YAAO,CAAA,EAAA,MAAA,IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA,CAAA;GAGjB,EAGE,GAAA;IAFC,uBAAqB,EAAA;IACrB,iBAAe,EAAA;;;EAgBX,MAAI,QAgBP,CAfN,EAeM,OAAA;GAdJ,KAAI;GACJ,OAAM;GACL,aAAS,EAAA,OAAA,EAAA,KAAA,QAAV,IAAkB,CAAA,UAAA,CAAA;MAGT,EAAA,WAEP,GAAA,EACF,EAKM,OALN,GAKM,EADD,EAAA,eAAc,EAAA,EAAA,IARnB,EAGE,EAAA,QAAA,QAAA,EAAA,KAAA,GAAA,CAAA,CAKiB,EAAA,IAAA,CAAA,CAAA;;KAvBf,EAAA,eAAe,EAAA,OAAO,OAAM,GAAA;QACjC;cAIK,CAFN,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,EAAA,IAAA,CAAA,CAAA;;aA0BlB,EAAA,eAAe,EAAA,OAAO,OAAM,GAAA;QACjC;cAIK,CAFN,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,SAAA,CAAA,EAAA,IAAA,CAAA,CAAA"}

package/dist/vue3/lib/modal/modal.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../common/mixins/modal.cjs`),i=require(`../notice/notice-constants.cjs`),a=require(`../../localization/index.cjs`),o=require(`../button/button.cjs`),s=require(`../../shared/sr_only_close_button.cjs`),c=require(`../lazy-show/lazy-show.cjs`),l=require(`./modal-constants.cjs`);let u=require(`vue`),d=require(`@dialpad/dialtone-icons/vue3`);var f={compatConfig:{MODE:3},name:`DtModal`,components:{DtLazyShow:c.default,DtButton:o.default,DtIconClose:d.DtIconClose,SrOnlyCloseButton:s.default},mixins:[r.default],props:{copy:{type:String,default:``},describedById:{type:String,default:``},labelledById:{type:String,default:function(){return t.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:``},bannerTitle:{type:String,default:``},kind:{type:String,default:`default`,validator:e=>Object.keys(l.MODAL_KIND_MODIFIERS).includes(e)},size:{type:String,default:`default`,validator:e=>Object.keys(l.MODAL_SIZE_MODIFIERS).includes(e)},modalClass:{type:[String,Object,Array],default:``},dialogClass:{type:[String,Object,Array],default:``},contentClass:{type:[String,Object,Array],default:``},bannerKind:{type:String,default:`warning`,validate(e){return i.NOTICE_KINDS.includes(e)}},bannerClass:{type:[String,Object,Array],default:``},hideClose:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:`first`,validator:e=>e===`first`||e instanceof HTMLElement||e.startsWith(`#`)},appendTo:{type:String,default:void 0}},emits:[`click`,`keydown`,`update:show`],data(){return{MODAL_KIND_MODIFIERS:l.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:l.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:l.MODAL_BANNER_KINDS,EVENT_KEYNAMES:e.EVENT_KEYNAMES,hasSlotContent:t.hasSlotContent,i18n:new a.DialtoneLocalization}},computed:{modalListeners(){return{click:e=>{this.closeOnClick&&e.target===e.currentTarget?this.close():this.show&&e.target!==e.currentTarget&&this.handleModalClick(e),this.$emit(`click`,e)},keydown:t=>{switch(t.code){case e.EVENT_KEYNAMES.esc:case e.EVENT_KEYNAMES.escape:this.close();break;case e.EVENT_KEYNAMES.tab:this.trapFocus(t);break}this.$emit(`keydown`,t)},"after-enter":async()=>{this.$emit(`update:show`,!0),await this.setFocusAfterTransition()},focusin:e=>{let t=this.$refs.modalRoot?.$el||this.$el;this.show&&t&&!t.contains(e.target)&&(e.preventDefault(),this.focusFirstElement(t))}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return l.MODAL_BANNER_KINDS[this.bannerKind]},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},watch:{show:{handler(e){e?(this.previousActiveElement=document.activeElement,t.disableRootScrolling(t.returnFirstEl(this.$refs.modalRoot?.$el||this.$el).getRootNode().host)):(t.enableRootScrolling(t.returnFirstEl(this.$refs.modalRoot?.$el||this.$el).getRootNode().host),this.previousActiveElement?.focus(),this.previousActiveElement=null)}}},methods:{close(){this.$emit(`update:show`,!1)},async setFocusAfterTransition(){let e=this.$refs.modalRoot?.$el||this.$el;this.initialFocusElement===`first`?await this.focusFirstElement(e):this.initialFocusElement.startsWith(`#`)?await this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(e){if(this.show){let t=this.$refs.modalRoot?.$el||this.$el;this.focusTrappedTabPress(e,t)}},handleModalClick(e){let t=e.target,n=this.$refs.modalRoot?.$el||this.$el,r=this._getFocusableElements(n);r.length&&!r.includes(t)&&(r.includes(document.activeElement)||this.focusFirstElement(n))}}},p=[`aria-describedby`,`aria-labelledby`],m=[`id`],h=[`id`],g={key:4,class:`d-modal__footer`};function _(e,t,n,r,i,a){let o=(0,u.resolveComponent)(`sr-only-close-button`),s=(0,u.resolveComponent)(`dt-icon-close`),c=(0,u.resolveComponent)(`dt-button`),l=(0,u.resolveComponent)(`dt-lazy-show`);return(0,u.openBlock)(),(0,u.createBlock)(u.Teleport,{disabled:!n.appendTo,to:n.appendTo},[(0,u.createVNode)(l,(0,u.mergeProps)({ref:`modalRoot`,transition:`d-zoom`,show:n.show,class:[`d-modal`,i.MODAL_KIND_MODIFIERS[n.kind],i.MODAL_SIZE_MODIFIERS[n.size],n.modalClass],"data-qa":`dt-modal`,"aria-hidden":a.open},(0,u.toHandlers)(a.modalListeners)),{default:(0,u.withCtx)(()=>[n.show&&(i.hasSlotContent(e.$slots.banner)||n.bannerTitle)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:0,"data-qa":`dt-modal-banner`,class:(0,u.normalizeClass)([`d-modal__banner`,n.bannerClass,a.bannerKindClass])},[(0,u.renderSlot)(e.$slots,`banner`,{},()=>[(0,u.createTextVNode)((0,u.toDisplayString)(n.bannerTitle),1)])],2)):(0,u.createCommentVNode)(``,!0),(0,u.createVNode)(u.Transition,{appear:``,name:`d-modal__dialog`},{default:(0,u.withCtx)(()=>[(0,u.withDirectives)((0,u.createElementVNode)(`div`,{class:(0,u.normalizeClass)([`d-modal__dialog`,{"d-modal__dialog--scrollable":n.fixedHeaderFooter},n.dialogClass]),role:`dialog`,"aria-modal":`true`,"aria-describedby":n.describedById,"aria-labelledby":n.labelledById},[i.hasSlotContent(e.$slots.header)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:0,id:n.labelledById,class:`d-modal__header`,"data-qa":`dt-modal-title`},[(0,u.renderSlot)(e.$slots,`header`)],8,m)):((0,u.openBlock)(),(0,u.createElementBlock)(`h2`,{key:1,id:n.labelledById,class:`d-modal__header`,"data-qa":`dt-modal-title`},(0,u.toDisplayString)(n.title),9,h)),i.hasSlotContent(e.$slots.default)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:2,class:(0,u.normalizeClass)([`d-modal__content`,n.contentClass]),"data-qa":`dt-modal-copy`},[(0,u.renderSlot)(e.$slots,`default`)],2)):((0,u.openBlock)(),(0,u.createElementBlock)(`p`,{key:3,class:(0,u.normalizeClass)([`d-modal__content`,n.contentClass]),"data-qa":`dt-modal-copy`},(0,u.toDisplayString)(n.copy),3)),a.hasFooterSlot?((0,u.openBlock)(),(0,u.createElementBlock)(`footer`,g,[(0,u.renderSlot)(e.$slots,`footer`)])):(0,u.createCommentVNode)(``,!0),n.hideClose?((0,u.openBlock)(),(0,u.createBlock)(o,{key:5,onClose:a.close},null,8,[`onClose`])):((0,u.openBlock)(),(0,u.createBlock)(c,{key:6,class:`d-modal__close`,"data-qa":`dt-modal-close-button`,size:`md`,kind:`muted`,importance:`clear`,"aria-label":a.closeButtonTitle,title:a.closeButtonTitle,onClick:a.close},{icon:(0,u.withCtx)(({iconSize:e})=>[(0,u.createVNode)(s,{size:e},null,8,[`size`])]),_:1},8,[`aria-label`,`title`,`onClick`]))],10,p),[[u.vShow,n.show]])]),_:3})]),_:3},16,[`show`,`class`,`aria-hidden`])],8,[`disabled`,`to`])}var v=n.t(f,[[`render`,_]]);exports.default=v;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../common/mixins/modal.cjs`),i=require(`../notice/notice-constants.cjs`),a=require(`../../localization/index.cjs`),o=require(`../button/button.cjs`),s=require(`../../shared/sr_only_close_button.cjs`),c=require(`../lazy-show/lazy-show.cjs`),l=require(`./modal-constants.cjs`);let u=require(`vue`),d=require(`@dialpad/dialtone-icons/vue3`);var f={compatConfig:{MODE:3},name:`DtModal`,components:{DtLazyShow:c.default,DtButton:o.default,DtIconClose:d.DtIconClose,SrOnlyCloseButton:s.default},mixins:[r.default],props:{copy:{type:String,default:``},describedById:{type:String,default:``},labelledById:{type:String,default:function(){return t.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:``},bannerTitle:{type:String,default:``},kind:{type:String,default:`default`,validator:e=>Object.keys(l.MODAL_KIND_MODIFIERS).includes(e)},size:{type:String,default:`default`,validator:e=>Object.keys(l.MODAL_SIZE_MODIFIERS).includes(e)},modalClass:{type:[String,Object,Array],default:``},dialogClass:{type:[String,Object,Array],default:``},contentClass:{type:[String,Object,Array],default:``},bannerKind:{type:String,default:`warning`,validate(e){return i.NOTICE_KINDS.includes(e)}},bannerClass:{type:[String,Object,Array],default:``},hideClose:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:`first`,validator:e=>e===`first`||e instanceof HTMLElement||e.startsWith(`#`)},appendTo:{type:String,default:void 0}},emits:[`click`,`keydown`,`update:show`],data(){return{MODAL_KIND_MODIFIERS:l.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:l.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:l.MODAL_BANNER_KINDS,EVENT_KEYNAMES:e.EVENT_KEYNAMES,hasSlotContent:t.hasSlotContent,i18n:new a.DialtoneLocalization}},computed:{modalListeners(){return{click:e=>{this.closeOnClick&&e.target===e.currentTarget&&this.close(),this.$emit(`click`,e)},keydown:t=>{switch(t.code){case e.EVENT_KEYNAMES.esc:case e.EVENT_KEYNAMES.escape:this.close();break;case e.EVENT_KEYNAMES.tab:this.trapFocus(t);break}this.$emit(`keydown`,t)},"after-enter":async()=>{this.$emit(`update:show`,!0),await this.setFocusAfterTransition()},focusin:e=>{let t=this.$refs.modalRoot?.$el||this.$el;this.show&&t&&!t.contains(e.target)&&(e.preventDefault(),this.focusFirstElement(t))}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return l.MODAL_BANNER_KINDS[this.bannerKind]},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},watch:{show:{handler(e){e?(this.previousActiveElement=document.activeElement,t.disableRootScrolling(t.returnFirstEl(this.$refs.modalRoot?.$el||this.$el).getRootNode().host),document.addEventListener(`keydown`,this._trapFocusGlobalBound)):(t.enableRootScrolling(t.returnFirstEl(this.$refs.modalRoot?.$el||this.$el).getRootNode().host),this.previousActiveElement?.focus(),this.previousActiveElement=null,document.removeEventListener(`keydown`,this._trapFocusGlobalBound))}}},created(){this._trapFocusGlobalBound=e=>this._trapFocusGlobal(e)},mounted(){this.show&&document.addEventListener(`keydown`,this._trapFocusGlobalBound)},beforeUnmount(){document.removeEventListener(`keydown`,this._trapFocusGlobalBound)},methods:{close(){this.$emit(`update:show`,!1)},async setFocusAfterTransition(){let e=this.$refs.modalRoot?.$el||this.$el;this.initialFocusElement===`first`?await this.focusFirstElement(e):this.initialFocusElement.startsWith(`#`)?await this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(e){if(this.show){let t=this.$refs.modalRoot?.$el||this.$el;this.focusTrappedTabPress(e,t)}},_trapFocusGlobal(t){if(!this.show||t.code!==e.EVENT_KEYNAMES.tab)return;let n=this.$refs.modalRoot?.$el||this.$el;n&&!n.contains(document.activeElement)&&(t.preventDefault(),this.focusFirstElement(n))}}},p=[`aria-describedby`,`aria-labelledby`],m=[`id`],h=[`id`],g={key:4,class:`d-modal__footer`};function _(e,t,n,r,i,a){let o=(0,u.resolveComponent)(`sr-only-close-button`),s=(0,u.resolveComponent)(`dt-icon-close`),c=(0,u.resolveComponent)(`dt-button`),l=(0,u.resolveComponent)(`dt-lazy-show`);return(0,u.openBlock)(),(0,u.createBlock)(u.Teleport,{disabled:!n.appendTo,to:n.appendTo},[(0,u.createVNode)(l,(0,u.mergeProps)({ref:`modalRoot`,transition:`d-zoom`,show:n.show,class:[`d-modal`,i.MODAL_KIND_MODIFIERS[n.kind],i.MODAL_SIZE_MODIFIERS[n.size],n.modalClass],"data-qa":`dt-modal`,"aria-hidden":a.open},(0,u.toHandlers)(a.modalListeners)),{default:(0,u.withCtx)(()=>[n.show&&(i.hasSlotContent(e.$slots.banner)||n.bannerTitle)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:0,"data-qa":`dt-modal-banner`,class:(0,u.normalizeClass)([`d-modal__banner`,n.bannerClass,a.bannerKindClass])},[(0,u.renderSlot)(e.$slots,`banner`,{},()=>[(0,u.createTextVNode)((0,u.toDisplayString)(n.bannerTitle),1)])],2)):(0,u.createCommentVNode)(``,!0),(0,u.createVNode)(u.Transition,{appear:``,name:`d-modal__dialog`},{default:(0,u.withCtx)(()=>[(0,u.withDirectives)((0,u.createElementVNode)(`div`,{class:(0,u.normalizeClass)([`d-modal__dialog`,{"d-modal__dialog--scrollable":n.fixedHeaderFooter},n.dialogClass]),role:`dialog`,"aria-modal":`true`,"aria-describedby":n.describedById,"aria-labelledby":n.labelledById},[i.hasSlotContent(e.$slots.header)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:0,id:n.labelledById,class:`d-modal__header`,"data-qa":`dt-modal-title`},[(0,u.renderSlot)(e.$slots,`header`)],8,m)):((0,u.openBlock)(),(0,u.createElementBlock)(`h2`,{key:1,id:n.labelledById,class:`d-modal__header`,"data-qa":`dt-modal-title`},(0,u.toDisplayString)(n.title),9,h)),i.hasSlotContent(e.$slots.default)?((0,u.openBlock)(),(0,u.createElementBlock)(`div`,{key:2,class:(0,u.normalizeClass)([`d-modal__content`,n.contentClass]),"data-qa":`dt-modal-copy`},[(0,u.renderSlot)(e.$slots,`default`)],2)):((0,u.openBlock)(),(0,u.createElementBlock)(`p`,{key:3,class:(0,u.normalizeClass)([`d-modal__content`,n.contentClass]),"data-qa":`dt-modal-copy`},(0,u.toDisplayString)(n.copy),3)),a.hasFooterSlot?((0,u.openBlock)(),(0,u.createElementBlock)(`footer`,g,[(0,u.renderSlot)(e.$slots,`footer`)])):(0,u.createCommentVNode)(``,!0),n.hideClose?((0,u.openBlock)(),(0,u.createBlock)(o,{key:5,onClose:a.close},null,8,[`onClose`])):((0,u.openBlock)(),(0,u.createBlock)(c,{key:6,class:`d-modal__close`,"data-qa":`dt-modal-close-button`,size:`md`,kind:`muted`,importance:`clear`,"aria-label":a.closeButtonTitle,title:a.closeButtonTitle,onClick:a.close},{icon:(0,u.withCtx)(({iconSize:e})=>[(0,u.createVNode)(s,{size:e},null,8,[`size`])]),_:1},8,[`aria-label`,`title`,`onClick`]))],10,p),[[u.vShow,n.show]])]),_:3})]),_:3},16,[`show`,`class`,`aria-hidden`])],8,[`disabled`,`to`])}var v=n.t(f,[[`render`,_]]);exports.default=v;
 //# sourceMappingURL=modal.cjs.map