@dialpad/dialtone-vue 3.225.0-next.8 → 3.225.0-next.9

package/dist/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/constants/sizes.cjs`),t=require(`../../common/constants/index.cjs`),n=require(`../../common/validators/index.cjs`),r=require(`../../common/utils/index.cjs`),i=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),a=require(`../validation-messages/validation-messages.cjs`),o=require(`../chip/chip.cjs`),s=require(`../popover/popover-constants.cjs`),c=require(`../input/input.cjs`),l=require(`../combobox-with-popover/combobox-with-popover.cjs`),u=require(`./combobox-multi-select-constants.cjs`);let d=require(`vue`);var f={name:`DtComboboxMultiSelect`,components:{DtComboboxWithPopover:l.default,DtInput:c.default,DtChip:o.default,DtValidationMessages:a.default},inheritAttrs:!1,props:{label:{type:String,required:!0},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},placeholder:{type:String,default:`Select one or start typing`},inputMessages:{type:Array,default:()=>[],validator:e=>n.validationMessageValidator(e)},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,Number],default:300,validator:n.ordinalSizeValidator(u.CHIP_SIZES)},appendTo:{type:[t.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>s.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},headerClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},listClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Object,Array],default:``}},emits:[`update:modelValue`,`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:u.CHIP_SIZES,hasSlotContent:r.hasSlotContent,inputFocused:!1,hideInputText:!1,messagesId:r.getUniqueString()}},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{...r.extractVueListeners(this.$attrs),onInput:e=>{this.$emit(`update:modelValue`,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()}}},ariaInvalid(){return r.getValidationState(this.maxSelectedMessage)===t.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showValidationMessages&&this.maxSelectedMessage.length>0?this.messagesId:void 0},inputHeightFloor(){return this.initialInputHeight&&this.size!==`xs`?`${this.initialInputHeight}px`:``},chipWrapperClass(){let t=e.COMPONENT_SIZES[String(this.size)]||this.size;return[`d-combobox-multi-select__chip-wrapper--${t}`,{[`d-combobox-multi-select__chip-wrapper-${t}--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:r.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(t=>this.$refs.chips.find((n,i)=>e.has(i)?!1:r.returnFirstEl(n.$el)?.querySelector(`.d-chip__label`)?.textContent?.trim()===t?(e.add(i),!0):!1)).filter(Boolean).map(e=>r.returnFirstEl(e.$el))},getChipButtons(){let e=this.getChips();return e&&e.map(e=>r.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(),t=this.$refs.chipsWrapper,n=this.getFirstChip();if(!e||!t||!n)return;let r=e.getBoundingClientRect().top-this.$refs.inputSlotWrapper.getBoundingClientRect().top,i=this.initialInputHeight||e.getBoundingClientRect().height,a=n.getBoundingClientRect(),o=a.top-t.getBoundingClientRect().top,s=r+(i-a.height)/2-o;t.style.top=s+`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=this.getComputedPx(t,`paddingTop`),r=e.offsetLeft+this.getFullWidth(e),i=t.getBoundingClientRect().width-r,a=this.getFirstChip(),o=a&&e.offsetTop>a.offsetTop;i>this.reservedRightSpace?t.style.paddingInlineStart=r+`px`:t.style.paddingInlineStart=`4px`;let s=this.getCaretRowTop(e,a,i>this.reservedRightSpace,o);s!=null&&(t.style.paddingTop=`${s+n}px`,this.growInputForWrappedRows(t,s))},growInputForWrappedRows(e,t){this.initialInputHeight&&(e.style.minHeight=`${t+this.initialInputHeight}px`)},getComputedPx(e,t){return parseFloat(getComputedStyle(e)[t])||0},getCaretRowTop(e,t,n,r){if(n&&!r)return null;let i=e.getBoundingClientRect().top-t.getBoundingClientRect().top;if(n)return i;let a=this.getComputedPx(this.$refs.chipsWrapper,`rowGap`);return i+e.getBoundingClientRect().height+a},revertInputPadding(e){e.style.paddingInlineStart=``,e.style.paddingTop=``,e.style.minHeight=this.inputHeightFloor},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)}}}},p={key:1,class:`d-combobox-multi-select__list--loading`};function m(e,t,n,r,i,a){let o=(0,d.resolveComponent)(`dt-chip`),s=(0,d.resolveComponent)(`dt-input`),c=(0,d.resolveComponent)(`dt-validation-messages`),l=(0,d.resolveComponent)(`dt-combobox-with-popover`);return(0,d.openBlock)(),(0,d.createBlock)(l,(0,d.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,d.createSlots)({input:(0,d.withCtx)(({onInput:e})=>[(0,d.createElementVNode)(`span`,{ref:`inputSlotWrapper`,class:`d-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,d.createElementVNode)(`span`,{ref:`chipsWrapper`,class:(0,d.normalizeClass)([`d-combobox-multi-select__chip-wrapper`,a.chipWrapperClass])},[((0,d.openBlock)(!0),(0,d.createElementBlock)(d.Fragment,null,(0,d.renderList)(n.selectedItems,(e,t)=>((0,d.openBlock)(),(0,d.createBlock)(o,(0,d.mergeProps)({ref_for:!0,ref:`chips`,key:`${t}-${e}`,interactive:!0,"label-class":[`d-chip__label--focus-always`],class:[`d-combobox-multi-select__chip`,{"d-combobox-multi-select__chip--truncate":!!n.chipMaxWidth}],style:{maxWidth:n.chipMaxWidth},size:i.CHIP_SIZES[String(n.size)],disabled:n.disabled},(0,d.toHandlers)(a.chipListeners),{onKeydown:(0,d.withKeys)(t=>a.onChipRemove(e),[`backspace`]),onClose:t=>a.onChipRemove(e)}),{default:(0,d.withCtx)(()=>[(0,d.createTextVNode)((0,d.toDisplayString)(e),1)]),_:2},1040,[`class`,`style`,`size`,`disabled`,`onKeydown`,`onClose`]))),128))],2),(0,d.createVNode)(s,(0,d.mergeProps)({ref:`input`,modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=e=>i.value=e),class:`d-combobox-multi-select__input`,"input-class":[n.inputClass,{"d-combobox-multi-select__input--hidden":i.hideInputText}],"input-wrapper-class":n.inputWrapperClass,disabled:n.disabled,"aria-label":n.label,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,label:n.showLabel?n.label:``,description:n.description,placeholder:a.inputPlaceHolder,"show-messages":n.showInputMessages,messages:n.inputMessages,size:n.size},a.inputListeners,{"onUpdate:modelValue":e}),null,16,[`modelValue`,`input-class`,`input-wrapper-class`,`disabled`,`aria-label`,`aria-invalid`,`aria-describedby`,`label`,`description`,`placeholder`,`show-messages`,`messages`,`size`,`onUpdate:modelValue`]),(0,d.createVNode)(c,{id:i.messagesId,"validation-messages":n.maxSelectedMessage,"show-messages":i.showValidationMessages},null,8,[`id`,`validation-messages`,`show-messages`])],544)]),list:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`list`,class:(0,d.normalizeClass)([`d-combobox-multi-select__list`,n.listClass]),onMousedown:t[3]||(t[3]=(0,d.withModifiers)(()=>{},[`prevent`]))},[n.loading?((0,d.openBlock)(),(0,d.createElementBlock)(`div`,p,(0,d.toDisplayString)(n.loadingMessage),1)):(0,d.renderSlot)(e.$slots,`list`,{key:0})],34)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`header`,fn:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`header`,class:(0,d.normalizeClass)(n.headerClass)},[(0,d.renderSlot)(e.$slots,`header`)],2)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footer`,fn:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`footer`,class:(0,d.normalizeClass)(n.footerClass)},[(0,d.renderSlot)(e.$slots,`footer`)],2)]),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=i.t(f,[[`render`,m]]);exports.default=h;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/sizes.cjs`),t=require(`../../common/constants/index.cjs`),n=require(`../../common/validators/index.cjs`),r=require(`../../common/utils/index.cjs`),i=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),a=require(`../validation-messages/validation-messages.cjs`),o=require(`../chip/chip.cjs`),s=require(`../popover/popover-constants.cjs`),c=require(`../input/input.cjs`),l=require(`../combobox-with-popover/combobox-with-popover.cjs`),u=require(`./combobox-multi-select-constants.cjs`);let d=require(`vue`);var f={name:`DtComboboxMultiSelect`,components:{DtComboboxWithPopover:l.default,DtInput:c.default,DtChip:o.default,DtValidationMessages:a.default},inheritAttrs:!1,props:{label:{type:String,required:!0},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},placeholder:{type:String,default:`Select one or start typing`},inputMessages:{type:Array,default:()=>[],validator:e=>n.validationMessageValidator(e)},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,Number],default:300,validator:n.ordinalSizeValidator(u.CHIP_SIZES)},appendTo:{type:[t.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>s.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},headerClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},listClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Object,Array],default:``}},emits:[`update:modelValue`,`select`,`remove`,`max-selected`,`keydown`,`chip-keydown`,`escape`,`enter`,`combobox-highlight`],data(){return{value:``,popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,inputVisibilityObserver:null,initialInputHeight:null,CHIP_SIZES:u.CHIP_SIZES,hasSlotContent:r.hasSlotContent,inputFocused:!1,hideInputText:!1,messagesId:r.getUniqueString()}},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{...r.extractVueListeners(this.$attrs),onInput:e=>{this.$emit(`update:modelValue`,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()}}},ariaInvalid(){return r.getValidationState(this.maxSelectedMessage)===t.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showValidationMessages&&this.maxSelectedMessage.length>0?this.messagesId:void 0},inputHeightFloor(){return this.initialInputHeight&&this.size!==`xs`?`${this.initialInputHeight}px`:``},chipWrapperClass(){let t=e.COMPONENT_SIZES[String(this.size)]||this.size;return[`d-combobox-multi-select__chip-wrapper--${t}`,{[`d-combobox-multi-select__chip-wrapper-${t}--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(){if(this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),!this.initialInputHeight){let e=this.getInput();e&&(this.inputVisibilityObserver=new ResizeObserver(()=>{this.initialInputHeight||(this.setInitialInputHeight(),this.initialInputHeight&&(this.setInputPadding(),this.setChipsTopPosition(),this.inputVisibilityObserver?.disconnect(),this.inputVisibilityObserver=null))}),this.inputVisibilityObserver.observe(e))}await this.initSelectedItems()},beforeUnmount(){this.resizeWindowObserver?.unobserve(document.body),this.inputVisibilityObserver?.disconnect()},methods:{extractNonListeners:r.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(t=>this.$refs.chips.find((n,i)=>e.has(i)?!1:r.returnFirstEl(n.$el)?.querySelector(`.d-chip__label`)?.textContent?.trim()===t?(e.add(i),!0):!1)).filter(Boolean).map(e=>r.returnFirstEl(e.$el))},getChipButtons(){let e=this.getChips();return e&&e.map(e=>r.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(),t=this.$refs.chipsWrapper,n=this.getFirstChip();if(!e||!t||!n)return;let r=e.getBoundingClientRect().top-this.$refs.inputSlotWrapper.getBoundingClientRect().top,i=this.initialInputHeight||e.getBoundingClientRect().height,a=n.getBoundingClientRect(),o=a.top-t.getBoundingClientRect().top,s=r+(i-a.height)/2-o;t.style.top=s+`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=this.getComputedPx(t,`paddingTop`),r=e.offsetLeft+this.getFullWidth(e),i=t.getBoundingClientRect().width-r,a=this.getFirstChip(),o=a&&e.offsetTop>a.offsetTop;i>this.reservedRightSpace?t.style.paddingInlineStart=r+`px`:t.style.paddingInlineStart=`4px`;let s=this.getCaretRowTop(e,a,i>this.reservedRightSpace,o);s!=null&&(t.style.paddingTop=`${s+n}px`,this.growInputForWrappedRows(t,s))},growInputForWrappedRows(e,t){this.initialInputHeight&&(e.style.minHeight=`${t+this.initialInputHeight}px`)},getComputedPx(e,t){return parseFloat(getComputedStyle(e)[t])||0},getCaretRowTop(e,t,n,r){if(n&&!r)return null;let i=e.getBoundingClientRect().top-t.getBoundingClientRect().top;if(n)return i;let a=this.getComputedPx(this.$refs.chipsWrapper,`rowGap`);return i+e.getBoundingClientRect().height+a},revertInputPadding(e){e.style.paddingInlineStart=``,e.style.paddingTop=``,e.style.minHeight=this.inputHeightFloor},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)}}}},p={key:1,class:`d-combobox-multi-select__list--loading`};function m(e,t,n,r,i,a){let o=(0,d.resolveComponent)(`dt-chip`),s=(0,d.resolveComponent)(`dt-input`),c=(0,d.resolveComponent)(`dt-validation-messages`),l=(0,d.resolveComponent)(`dt-combobox-with-popover`);return(0,d.openBlock)(),(0,d.createBlock)(l,(0,d.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,d.createSlots)({input:(0,d.withCtx)(({onInput:e})=>[(0,d.createElementVNode)(`span`,{ref:`inputSlotWrapper`,class:`d-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,d.createElementVNode)(`span`,{ref:`chipsWrapper`,class:(0,d.normalizeClass)([`d-combobox-multi-select__chip-wrapper`,a.chipWrapperClass])},[((0,d.openBlock)(!0),(0,d.createElementBlock)(d.Fragment,null,(0,d.renderList)(n.selectedItems,(e,t)=>((0,d.openBlock)(),(0,d.createBlock)(o,(0,d.mergeProps)({ref_for:!0,ref:`chips`,key:`${t}-${e}`,interactive:!0,"label-class":[`d-chip__label--focus-always`],class:[`d-combobox-multi-select__chip`,{"d-combobox-multi-select__chip--truncate":!!n.chipMaxWidth}],style:{maxWidth:n.chipMaxWidth},size:i.CHIP_SIZES[String(n.size)],disabled:n.disabled},(0,d.toHandlers)(a.chipListeners),{onKeydown:(0,d.withKeys)(t=>a.onChipRemove(e),[`backspace`]),onClose:t=>a.onChipRemove(e)}),{default:(0,d.withCtx)(()=>[(0,d.createTextVNode)((0,d.toDisplayString)(e),1)]),_:2},1040,[`class`,`style`,`size`,`disabled`,`onKeydown`,`onClose`]))),128))],2),(0,d.createVNode)(s,(0,d.mergeProps)({ref:`input`,modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=e=>i.value=e),class:`d-combobox-multi-select__input`,"input-class":[n.inputClass,{"d-combobox-multi-select__input--hidden":i.hideInputText}],"input-wrapper-class":n.inputWrapperClass,disabled:n.disabled,"aria-label":n.label,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,label:n.showLabel?n.label:``,description:n.description,placeholder:a.inputPlaceHolder,"show-messages":n.showInputMessages,messages:n.inputMessages,size:n.size},a.inputListeners,{"onUpdate:modelValue":e}),null,16,[`modelValue`,`input-class`,`input-wrapper-class`,`disabled`,`aria-label`,`aria-invalid`,`aria-describedby`,`label`,`description`,`placeholder`,`show-messages`,`messages`,`size`,`onUpdate:modelValue`]),(0,d.createVNode)(c,{id:i.messagesId,"validation-messages":n.maxSelectedMessage,"show-messages":i.showValidationMessages},null,8,[`id`,`validation-messages`,`show-messages`])],544)]),list:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`list`,class:(0,d.normalizeClass)([`d-combobox-multi-select__list`,n.listClass]),onMousedown:t[3]||(t[3]=(0,d.withModifiers)(()=>{},[`prevent`]))},[n.loading?((0,d.openBlock)(),(0,d.createElementBlock)(`div`,p,(0,d.toDisplayString)(n.loadingMessage),1)):(0,d.renderSlot)(e.$slots,`list`,{key:0})],34)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`header`,fn:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`header`,class:(0,d.normalizeClass)(n.headerClass)},[(0,d.renderSlot)(e.$slots,`header`)],2)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footer`,fn:(0,d.withCtx)(()=>[(0,d.createElementVNode)(`div`,{ref:`footer`,class:(0,d.normalizeClass)(n.footerClass)},[(0,d.renderSlot)(e.$slots,`footer`)],2)]),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=i.t(f,[[`render`,m]]);exports.default=h;
 //# sourceMappingURL=combobox-multi-select.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.cjs","names":[],"sources":["../../../components/ComboboxMultiSelect/ComboboxMultiSelect.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-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-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            :interactive=\"true\"\n            :label-class=\"['d-chip__label--focus-always']\"\n            :class=\"[\n              'd-combobox-multi-select__chip',\n              { 'd-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[String(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-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :disabled=\"disabled\"\n          :aria-label=\"label\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :label=\"showLabel ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-bind=\"inputListeners\"\n          @update:model-value=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :id=\"messagesId\"\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\n        ref=\"header\"\n        :class=\"headerClass\"\n      >\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-combobox-multi-select__list', listClass]\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-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\n        ref=\"footer\"\n        :class=\"footerClass\"\n      >\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/ComboboxWithPopover/ComboboxWithPopover.vue';\nimport DtInput from '@/components/Input/Input.vue';\nimport DtChip from '@/components/Chip/Chip.vue';\nimport DtValidationMessages from '@/components/ValidationMessages/ValidationMessages.vue';\nimport { validationMessageValidator, ordinalSizeValidator } from '@/common/validators';\nimport { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl, getUniqueString, getValidationState } from '@/common/utils';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/Popover/PopoverConstants';\nimport {\n  CHIP_SIZES,\n} from './ComboboxMultiSelectConstants';\nimport { COMPONENT_SIZES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\n\nexport default {\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    showLabel: {\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.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(CHIP_SIZES),\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', 'root', HTMLElement,\n     */\n    appendTo: {\n      type: [HTML_ELEMENT_TYPE, 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 name for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the footer wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the list wrapper element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\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     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String}\n     */\n    'update:modelValue',\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      messagesId: getUniqueString(),\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('update:modelValue', 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    ariaInvalid () {\n      return getValidationState(this.maxSelectedMessage) === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showValidationMessages && this.maxSelectedMessage.length > 0 ? this.messagesId : undefined;\n    },\n\n    // Sizes other than xs need a height floor so the box can grow for wrapped\n    // chip rows without collapsing back; xs renders correctly without one.\n    inputHeightFloor () {\n      return (this.initialInputHeight && this.size !== 'xs')\n        ? `${this.initialInputHeight}px`\n        : '';\n    },\n\n    chipWrapperClass () {\n      const size = COMPONENT_SIZES[String(this.size)] || this.size;\n      return [\n        // Always emitted so the CSS can size the row rhythm without reaching\n        // sideways into DtInput's markup to discover the size.\n        `d-combobox-multi-select__chip-wrapper--${size}`,\n        {\n          [`d-combobox-multi-select__chip-wrapper-${size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n        },\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      // Centers the first row of chips on the input box's first line.\n      // Two offsets have to be measured rather than derived: the input's\n      // position within the slot wrapper (label and description heights vary),\n      // and the chip's position within its own wrapper (the chips are atomic\n      // inline boxes, so line-box metrics — not just the chip margin — decide\n      // where the row starts).\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      const firstChip = this.getFirstChip();\n      if (!input || !chipsWrapper || !firstChip) return;\n\n      const inputTop = input.getBoundingClientRect().top -\n                       this.$refs.inputSlotWrapper.getBoundingClientRect().top;\n      // The empty-input height, so chips stay on the first line rather than\n      // recentering on the whole box once it grows to fit wrapped rows.\n      const inputRowHeight = this.initialInputHeight || input.getBoundingClientRect().height;\n      const chipRect = firstChip.getBoundingClientRect();\n      const chipOffsetInWrapper = chipRect.top - chipsWrapper.getBoundingClientRect().top;\n\n      const top = inputTop + (inputRowHeight - chipRect.height) / 2 - chipOffsetInWrapper;\n      chipsWrapper.style.top = top + '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      // Read while revertInputPadding() above has the inline override cleared,\n      // so this is the input's own padding rather than a previous run's value.\n      const inputPaddingTop = this.getComputedPx(input, 'paddingTop');\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.paddingInlineStart = left + 'px';\n      } else {\n        input.style.paddingInlineStart = '4px';\n      }\n\n      const caretRowTop = this.getCaretRowTop(lastChip, firstChip, spaceLeft > this.reservedRightSpace, isWrapped);\n      if (caretRowTop != null) {\n        // Adding the input's own padding reproduces the single-row layout on\n        // the caret's row, so the typed text keeps the same baseline relative\n        // to the chips beside it no matter how many rows have accumulated.\n        input.style.paddingTop = `${caretRowTop + inputPaddingTop}px`;\n        this.growInputForWrappedRows(input, caretRowTop);\n      }\n    },\n\n    growInputForWrappedRows (input, caretRowTop) {\n      // The grown box would otherwise end at the caret line, leaving the last\n      // chip row flush against the block-end border. Extend the height floor\n      // so the last row keeps the same breathing room the first row gets from\n      // centering: its row top plus the single-row envelope.\n      if (!this.initialInputHeight) return;\n      input.style.minHeight = `${caretRowTop + this.initialInputHeight}px`;\n    },\n\n    getComputedPx (el, property) {\n      return parseFloat(getComputedStyle(el)[property]) || 0;\n    },\n\n    // Distance from the first chip row to the row the caret belongs on.\n    getCaretRowTop (lastChip, firstChip, hasSpace, isWrapped) {\n      // Chip fits beside the cursor on the first row; CSS centers it already.\n      if (hasSpace && !isWrapped) return null;\n      // Measured rather than offsetTop, which rounds to whole pixels and drifts\n      // further out of alignment with every row added.\n      const rowTop = lastChip.getBoundingClientRect().top - firstChip.getBoundingClientRect().top;\n      // Chip wrapped onto a new row with space remaining; share that row.\n      if (hasSpace) return rowTop;\n      // No space left on that row — predict the next one. Row spacing belongs\n      // to the wrapper's row-gap, not to the chip.\n      const rowGap = this.getComputedPx(this.$refs.chipsWrapper, 'rowGap');\n      return rowTop + lastChip.getBoundingClientRect().height + rowGap;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingInlineStart = '';\n      // setInputPadding writes the physical paddingTop slot, so that is the\n      // slot to clear — the logical one is a different CSSOM property.\n      input.style.paddingTop = '';\n      // Restore the single-row height floor that setInitialInputHeight\n      // applies (setInputPadding grows it while rows are wrapped).\n      input.style.minHeight = this.inputHeightFloor;\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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"}
+{"version":3,"file":"combobox-multi-select.cjs","names":[],"sources":["../../../components/ComboboxMultiSelect/ComboboxMultiSelect.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-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-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            :interactive=\"true\"\n            :label-class=\"['d-chip__label--focus-always']\"\n            :class=\"[\n              'd-combobox-multi-select__chip',\n              { 'd-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[String(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-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :disabled=\"disabled\"\n          :aria-label=\"label\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :label=\"showLabel ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-bind=\"inputListeners\"\n          @update:model-value=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :id=\"messagesId\"\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\n        ref=\"header\"\n        :class=\"headerClass\"\n      >\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-combobox-multi-select__list', listClass]\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-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\n        ref=\"footer\"\n        :class=\"footerClass\"\n      >\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/ComboboxWithPopover/ComboboxWithPopover.vue';\nimport DtInput from '@/components/Input/Input.vue';\nimport DtChip from '@/components/Chip/Chip.vue';\nimport DtValidationMessages from '@/components/ValidationMessages/ValidationMessages.vue';\nimport { validationMessageValidator, ordinalSizeValidator } from '@/common/validators';\nimport { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl, getUniqueString, getValidationState } from '@/common/utils';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/Popover/PopoverConstants';\nimport {\n  CHIP_SIZES,\n} from './ComboboxMultiSelectConstants';\nimport { COMPONENT_SIZES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\n\nexport default {\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    showLabel: {\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.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(CHIP_SIZES),\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', 'root', HTMLElement,\n     */\n    appendTo: {\n      type: [HTML_ELEMENT_TYPE, 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 name for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the footer wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the list wrapper element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\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     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String}\n     */\n    'update:modelValue',\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      inputVisibilityObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      hasSlotContent,\n      inputFocused: false,\n      hideInputText: false,\n      messagesId: getUniqueString(),\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('update:modelValue', 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    ariaInvalid () {\n      return getValidationState(this.maxSelectedMessage) === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showValidationMessages && this.maxSelectedMessage.length > 0 ? this.messagesId : undefined;\n    },\n\n    // Sizes other than xs need a height floor so the box can grow for wrapped\n    // chip rows without collapsing back; xs renders correctly without one.\n    inputHeightFloor () {\n      return (this.initialInputHeight && this.size !== 'xs')\n        ? `${this.initialInputHeight}px`\n        : '';\n    },\n\n    chipWrapperClass () {\n      const size = COMPONENT_SIZES[String(this.size)] || this.size;\n      return [\n        // Always emitted so the CSS can size the row rhythm without reaching\n        // sideways into DtInput's markup to discover the size.\n        `d-combobox-multi-select__chip-wrapper--${size}`,\n        {\n          [`d-combobox-multi-select__chip-wrapper-${size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n        },\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    // The measurement above can land on a zero-size input — for example it's inside a collapsed\n    // panel or a not-yet-visible tab. Nothing else is guaranteed to react once the input later\n    // becomes visible: revealing it doesn't necessarily resize document.body, and with the\n    // default collapseOnFocusOut: false, focusing the input doesn't recompute anything either.\n    // Watch the input's own box directly so we can recover the instant it actually gets real\n    // layout, instead of depending on some other call site to happen to run again.\n    if (!this.initialInputHeight) {\n      const input = this.getInput();\n      if (input) {\n        this.inputVisibilityObserver = new ResizeObserver(() => {\n          if (this.initialInputHeight) return;\n          this.setInitialInputHeight();\n          if (!this.initialInputHeight) return;\n          this.setInputPadding();\n          this.setChipsTopPosition();\n          this.inputVisibilityObserver?.disconnect();\n          this.inputVisibilityObserver = null;\n        });\n        this.inputVisibilityObserver.observe(input);\n      }\n    }\n\n    await this.initSelectedItems();\n  },\n\n  beforeUnmount () {\n    this.resizeWindowObserver?.unobserve(document.body);\n    this.inputVisibilityObserver?.disconnect();\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      // Centers the first row of chips on the input box's first line.\n      // Two offsets have to be measured rather than derived: the input's\n      // position within the slot wrapper (label and description heights vary),\n      // and the chip's position within its own wrapper (the chips are atomic\n      // inline boxes, so line-box metrics — not just the chip margin — decide\n      // where the row starts).\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      const firstChip = this.getFirstChip();\n      if (!input || !chipsWrapper || !firstChip) return;\n\n      const inputTop = input.getBoundingClientRect().top -\n                       this.$refs.inputSlotWrapper.getBoundingClientRect().top;\n      // The empty-input height, so chips stay on the first line rather than\n      // recentering on the whole box once it grows to fit wrapped rows.\n      const inputRowHeight = this.initialInputHeight || input.getBoundingClientRect().height;\n      const chipRect = firstChip.getBoundingClientRect();\n      const chipOffsetInWrapper = chipRect.top - chipsWrapper.getBoundingClientRect().top;\n\n      const top = inputTop + (inputRowHeight - chipRect.height) / 2 - chipOffsetInWrapper;\n      chipsWrapper.style.top = top + '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      // Read while revertInputPadding() above has the inline override cleared,\n      // so this is the input's own padding rather than a previous run's value.\n      const inputPaddingTop = this.getComputedPx(input, 'paddingTop');\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.paddingInlineStart = left + 'px';\n      } else {\n        input.style.paddingInlineStart = '4px';\n      }\n\n      const caretRowTop = this.getCaretRowTop(lastChip, firstChip, spaceLeft > this.reservedRightSpace, isWrapped);\n      if (caretRowTop != null) {\n        // Adding the input's own padding reproduces the single-row layout on\n        // the caret's row, so the typed text keeps the same baseline relative\n        // to the chips beside it no matter how many rows have accumulated.\n        input.style.paddingTop = `${caretRowTop + inputPaddingTop}px`;\n        this.growInputForWrappedRows(input, caretRowTop);\n      }\n    },\n\n    growInputForWrappedRows (input, caretRowTop) {\n      // The grown box would otherwise end at the caret line, leaving the last\n      // chip row flush against the block-end border. Extend the height floor\n      // so the last row keeps the same breathing room the first row gets from\n      // centering: its row top plus the single-row envelope.\n      if (!this.initialInputHeight) return;\n      input.style.minHeight = `${caretRowTop + this.initialInputHeight}px`;\n    },\n\n    getComputedPx (el, property) {\n      return parseFloat(getComputedStyle(el)[property]) || 0;\n    },\n\n    // Distance from the first chip row to the row the caret belongs on.\n    getCaretRowTop (lastChip, firstChip, hasSpace, isWrapped) {\n      // Chip fits beside the cursor on the first row; CSS centers it already.\n      if (hasSpace && !isWrapped) return null;\n      // Measured rather than offsetTop, which rounds to whole pixels and drifts\n      // further out of alignment with every row added.\n      const rowTop = lastChip.getBoundingClientRect().top - firstChip.getBoundingClientRect().top;\n      // Chip wrapped onto a new row with space remaining; share that row.\n      if (hasSpace) return rowTop;\n      // No space left on that row — predict the next one. Row spacing belongs\n      // to the wrapper's row-gap, not to the chip.\n      const rowGap = this.getComputedPx(this.$refs.chipsWrapper, 'rowGap');\n      return rowTop + lastChip.getBoundingClientRect().height + rowGap;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingInlineStart = '';\n      // setInputPadding writes the physical paddingTop slot, so that is the\n      // slot to clear — the logical one is a different CSSOM property.\n      input.style.paddingTop = '';\n      // Restore the single-row height floor that setInitialInputHeight\n      // applies (setInputPadding grows it while rows are wrapped).\n      input.style.minHeight = this.inputHeightFloor;\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":"wqBAkJA,IAAK,EAAU,CACb,KAAM,wBAEN,WAAY,CACV,sBAAA,EAAA,QACA,QAAA,EAAA,QACA,OAAA,EAAA,QACA,qBAAA,EAAA,QACD,CAED,aAAc,GAEd,MAAO,CAIL,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,6BACV,CAKD,cAAe,CACb,KAAM,MACN,YAAe,EAAE,CACjB,UAAW,GACF,EAAA,2BAA2B,EAAc,CAEnD,CAKD,kBAAmB,CACjB,KAAM,QACN,QAAS,GACV,CAYD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAKD,eAAgB,CACd,KAAM,OACN,QAAS,aACV,CAQD,SAAU,CACR,KAAM,QACN,QAAS,KACV,CAMD,cAAe,CACb,KAAM,OACN,QAAS,QACV,CAKD,cAAe,CACb,KAAM,MACN,QAAS,UAAY,CAAE,MAAO,EAAE,EACjC,CAKD,YAAa,CACX,KAAM,OACN,QAAS,EACV,CAMD,mBAAoB,CAClB,KAAM,MACN,QAAS,UAAY,CAAE,MAAO,EAAE,EACjC,CAMD,kBAAmB,CACjB,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,WAAW,CAC5C,CAOD,SAAU,CACR,KAAM,CAAC,EAAA,kBAAmB,OAAO,CACjC,QAAS,OACT,UAAW,GACF,EAAA,yBAAyB,SAAS,EAAQ,EAC5C,aAAoB,YAE5B,CAMD,WAAY,CACV,KAAM,OACN,QAAS,OACV,CAMD,mBAAoB,CAClB,KAAM,QACN,QAAS,GACV,CAMD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CAOD,mBAAoB,CAClB,KAAM,OACN,QAAS,GACV,CAOD,aAAc,CACZ,KAAM,OACN,QAAS,GACV,CAOD,WAAY,CACV,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAOD,kBAAmB,CACjB,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CACF,CAED,MAAO,CAOL,oBAQA,SAQA,SAQA,eASA,UAQA,eASA,SASA,QAQA,qBACD,CAED,MAAQ,CACN,MAAO,CACL,MAAO,GACP,cAAe,CAAC,EAAG,EAAE,CACrB,uBAAwB,GACxB,qBAAsB,KACtB,wBAAyB,KACzB,mBAAoB,KACpB,WAAA,EAAA,WACA,eAAA,EAAA,eACA,aAAc,GACd,cAAe,GACf,WAAY,EAAA,iBAAiB,CAC9B,EAGH,SAAU,CACR,kBAAoB,CAClB,OAAO,KAAK,eAAe,OAAS,EAAI,GAAK,KAAK,aAGpD,eAAiB,CACf,MAAO,CACL,QAAS,GAAS,CACZ,KAAK,WACT,KAAK,cAAc,EAAM,CACzB,KAAK,MAAM,eAAgB,EAAM,GAEpC,EAGH,gBAAkB,CAChB,MAAO,CACL,GAAG,EAAA,oBAAoB,KAAK,OAAO,CACnC,QAAS,GAAS,CAChB,KAAK,MAAM,oBAAqB,EAAM,CAClC,KAAK,mBACP,KAAK,kBAAkB,EAI3B,UAAW,GAAS,CAClB,GAAI,KAAK,SAAU,OACnB,KAAK,eAAe,EAAM,CAC1B,KAAK,MAAM,UAAW,EAAM,CAG5B,IAAM,EAAM,EAAM,KAAK,aAAa,CAChC,IAAQ,SACV,KAAK,MAAM,SAAU,EAAM,CAClB,IAAQ,SACjB,KAAK,MAAM,QAAS,EAAM,EAI9B,YAAe,CACT,KAAK,mBACP,KAAK,kBAAkB,EAG5B,EAGH,aAAe,CACb,OAAO,EAAA,mBAAmB,KAAK,mBAAkB,GAAM,EAAA,yBAAyB,SAAW,OAAS,IAAA,IAGtG,iBAAmB,CACjB,OAAO,KAAK,wBAA0B,KAAK,mBAAmB,OAAS,EAAI,KAAK,WAAa,IAAA,IAK/F,kBAAoB,CAClB,OAAQ,KAAK,oBAAsB,KAAK,OAAS,KAC7C,GAAG,KAAK,mBAAmB,IAC3B,IAGN,kBAAoB,CAClB,IAAM,EAAO,EAAA,gBAAgB,OAAO,KAAK,KAAK,GAAK,KAAK,KACxD,MAAO,CAGL,0CAA0C,IAC1C,EACG,yCAAyC,EAAK,cAAe,CAAC,KAAK,cAAgB,KAAK,mBAC1F,CACF,EAEJ,CAED,MAAO,CACL,cAAe,CACb,KAAM,GACN,QAAS,gBAAkB,CACzB,MAAM,KAAK,mBAAmB,EAEjC,CAED,aAAc,CACZ,MAAM,SAAW,CACf,MAAM,KAAK,mBAAmB,EAEjC,CAED,MAAM,OAAS,CACb,MAAM,KAAK,WAAW,CAEtB,KAAK,qBAAqB,EAG5B,MAAM,aAAe,CACnB,MAAM,KAAK,WAAW,CAEtB,KAAK,qBAAqB,EAG5B,KAAM,CACJ,MAAM,SAAW,CACf,MAAM,KAAK,WAAW,CACtB,IAAM,EAAQ,KAAK,UAAU,CAC7B,KAAK,mBAAmB,EAAM,CAC9B,KAAK,uBAAuB,CAC5B,KAAK,iBAAiB,CACtB,KAAK,qBAAqB,EAE7B,CACF,CAED,MAAM,SAAW,CAef,GAdA,KAAK,uBAAuB,CAE5B,KAAK,qBAAuB,IAAI,eAAe,SAAY,CACzD,KAAK,qBAAqB,CAC1B,KAAK,iBAAiB,EACtB,CACF,KAAK,qBAAqB,QAAQ,SAAS,KAAK,CAQ5C,CAAC,KAAK,mBAAoB,CAC5B,IAAM,EAAQ,KAAK,UAAU,CACzB,IACF,KAAK,wBAA0B,IAAI,mBAAqB,CAClD,KAAK,qBACT,KAAK,uBAAuB,CACvB,KAAK,qBACV,KAAK,iBAAiB,CACtB,KAAK,qBAAqB,CAC1B,KAAK,yBAAyB,YAAY,CAC1C,KAAK,wBAA0B,QAC/B,CACF,KAAK,wBAAwB,QAAQ,EAAM,EAI/C,MAAM,KAAK,mBAAmB,EAGhC,eAAiB,CACf,KAAK,sBAAsB,UAAU,SAAS,KAAK,CACnD,KAAK,yBAAyB,YAAY,EAG5C,QAAS,CACP,oBAAA,EAAA,oBACA,kBAAmB,EAAgB,CACjC,KAAK,MAAM,qBAAsB,EAAe,EAGlD,MAAM,mBAAqB,CACzB,MAAM,KAAK,WAAW,CACtB,KAAK,iBAAiB,CACtB,KAAK,qBAAqB,CAC1B,KAAK,kBAAkB,CACvB,KAAK,kBAAkB,EAGzB,aAAc,EAAM,CAClB,KAAK,MAAM,SAAU,EAAK,CAC1B,KAAK,MAAM,OAAO,OAAO,EAG3B,iBAAkB,EAAG,CACf,KAAK,UACT,KAAK,MAAQ,GACb,KAAK,MAAM,SAAU,EAAE,GAGzB,kBAAoB,CACd,KAAK,UACT,KAAK,MAAM,qBAAqB,kBAAkB,EAGpD,mBAAqB,CACf,KAAK,UACT,KAAK,MAAM,qBAAqB,mBAAmB,EAGrD,UAAY,CACV,GAAI,CAAC,KAAK,cAAc,QAAU,CAAC,KAAK,MAAM,MAAO,OAAO,KAI5D,IAAM,EAAU,IAAI,IAYpB,OAXc,KAAK,cAAc,IAAI,GAC5B,KAAK,MAAM,MAAM,MAAM,EAAM,IAC9B,EAAQ,IAAI,EAAM,CAAS,GACb,EAAA,cAAc,EAAK,IAAI,EAAE,cAAc,iBAAiB,EAAE,aAAa,MAAM,GAC7E,GAChB,EAAQ,IAAI,EAAM,CACX,IAEF,GACP,CACF,CACW,OAAO,QAAQ,CAAC,IAAI,GAAQ,EAAA,cAAc,EAAK,IAAI,CAAC,EAGnE,gBAAkB,CAChB,IAAM,EAAQ,KAAK,UAAU,CAC7B,OAAO,GAAS,EAAM,IAAI,GAAQ,EAAA,cAAc,EAAK,CAAC,cAAc,SAAS,CAAC,EAGhF,mBAAqB,CACnB,IAAM,EAAc,KAAK,gBAAgB,CACzC,OAAO,GAAe,EAAY,EAAY,OAAS,IAGzD,aAAe,CACb,IAAM,EAAQ,KAAK,UAAU,CAC7B,OAAO,GAAS,EAAM,EAAM,OAAS,IAGvC,cAAgB,CACd,IAAM,EAAQ,KAAK,UAAU,CAC7B,OAAO,GAAS,EAAM,IAGxB,UAAY,CACV,OAAO,KAAK,MAAM,OAAO,MAAM,OAGjC,cAAe,EAAO,CACpB,IAAM,EAAM,EAAM,MAAM,aAAa,CACjC,IAAQ,YAEV,KAAK,qBAAqB,EAAM,OAAQ,GAAK,CACpC,IAAQ,eACb,EAAM,OAAO,KAAO,KAAK,mBAAmB,CAAC,GAE/C,KAAK,qBAAqB,CAG1B,KAAK,qBAAqB,EAAM,OAAQ,GAAM,GAKpD,eAAgB,EAAO,CACrB,IAAM,EAAM,EAAM,KAAK,aAAa,CAGpC,GAAI,KAAK,cAAc,OAAS,GAAK,EAAM,OAAO,iBAAmB,EAAG,CAEtE,GAAI,EAAM,OAAO,eAAiB,EAAM,OAAO,eAC7C,QAEE,IAAQ,aAAe,IAAQ,cACjC,KAAK,qBAAqB,GAKhC,qBAAuB,CACrB,KAAK,mBAAmB,CAAC,OAAO,CAChC,KAAK,MAAM,OAAO,MAAM,CACxB,KAAK,mBAAmB,EAG1B,qBAAuB,CACrB,KAAK,mBAAmB,CAAC,MAAM,CAC/B,KAAK,MAAM,OAAO,OAAO,CACzB,KAAK,kBAAkB,EAGzB,qBAAsB,EAAQ,EAAQ,CACpC,IAAM,EAAO,KAAK,gBAAgB,CAAC,QAAQ,EAAO,CAC5C,EAAK,EAAS,EAAO,EAAI,EAAO,EAClC,EAAK,GAAK,GAAM,KAAK,MAAM,OAAO,SAGtC,KAAK,gBAAgB,CAAC,GAAM,MAAM,CAClC,KAAK,gBAAgB,CAAC,GAAI,OAAO,CACjC,KAAK,mBAAmB,GAG1B,qBAAuB,CAOrB,IAAM,EAAQ,KAAK,UAAU,CACvB,EAAe,KAAK,MAAM,aAC1B,EAAY,KAAK,cAAc,CACrC,GAAI,CAAC,GAAS,CAAC,GAAgB,CAAC,EAAW,OAE3C,IAAM,EAAW,EAAM,uBAAuB,CAAC,IAC9B,KAAK,MAAM,iBAAiB,uBAAuB,CAAC,IAG/D,EAAiB,KAAK,oBAAsB,EAAM,uBAAuB,CAAC,OAC1E,EAAW,EAAU,uBAAuB,CAC5C,EAAsB,EAAS,IAAM,EAAa,uBAAuB,CAAC,IAE1E,EAAM,GAAY,EAAiB,EAAS,QAAU,EAAI,EAChE,EAAa,MAAM,IAAM,EAAM,MAGjC,iBAAmB,CACjB,IAAM,EAAW,KAAK,aAAa,CAC7B,EAAQ,KAAK,UAAU,CAO7B,GANI,CAAC,IACL,KAAK,mBAAmB,EAAM,CAC9B,KAAK,cAAgB,CAAC,EAAG,EAAE,CACvB,CAAC,IAGD,KAAK,oBAAsB,CAAC,KAAK,aAAc,OAInD,IAAM,EAAkB,KAAK,cAAc,EAAO,aAAa,CAIzD,EAAO,EAAS,WAAa,KAAK,aAAa,EAAS,CACxD,EAAY,EAAM,uBAAuB,CAAC,MAAQ,EAClD,EAAY,KAAK,cAAc,CAC/B,EAAY,GAAa,EAAS,UAAY,EAAU,UAE1D,EAAY,KAAK,mBACnB,EAAM,MAAM,mBAAqB,EAAO,KAExC,EAAM,MAAM,mBAAqB,MAGnC,IAAM,EAAc,KAAK,eAAe,EAAU,EAAW,EAAY,KAAK,mBAAoB,EAAU,CACxG,GAAe,OAIjB,EAAM,MAAM,WAAa,GAAG,EAAc,EAAgB,IAC1D,KAAK,wBAAwB,EAAO,EAAY,GAIpD,wBAAyB,EAAO,EAAa,CAKtC,KAAK,qBACV,EAAM,MAAM,UAAY,GAAG,EAAc,KAAK,mBAAmB,MAGnE,cAAe,EAAI,EAAU,CAC3B,OAAO,WAAW,iBAAiB,EAAG,CAAC,GAAS,EAAK,GAIvD,eAAgB,EAAU,EAAW,EAAU,EAAW,CAExD,GAAI,GAAY,CAAC,EAAW,OAAO,KAGnC,IAAM,EAAS,EAAS,uBAAuB,CAAC,IAAM,EAAU,uBAAuB,CAAC,IAExF,GAAI,EAAU,OAAO,EAGrB,IAAM,EAAS,KAAK,cAAc,KAAK,MAAM,aAAc,SAAS,CACpE,OAAO,EAAS,EAAS,uBAAuB,CAAC,OAAS,GAG5D,mBAAoB,EAAO,CACzB,EAAM,MAAM,mBAAqB,GAGjC,EAAM,MAAM,WAAa,GAGzB,EAAM,MAAM,UAAY,KAAK,kBAG/B,aAAc,EAAI,CAChB,IAAM,EAAS,OAAO,iBAAiB,EAAG,CAC1C,OAAO,EAAG,YAAc,SAAS,EAAO,WAAU,CAAI,SAAS,EAAO,YAAY,EAGpF,kBAAoB,CAElB,IAAM,EAAY,KAAK,cAAc,CAC/B,EAAQ,KAAK,UAAU,CACxB,IACD,EAEF,EAAM,MAAM,SAAY,KAAK,aAAa,EAAS,CAAI,EAAK,KAE5D,EAAM,MAAM,SAAW,KAI3B,kBAAoB,CACd,KAAK,cAAgB,IACrB,KAAK,cAAc,OAAS,KAAK,aACnC,KAAK,uBAAyB,GAC9B,KAAK,MAAM,eAAe,EAE1B,KAAK,uBAAyB,KAIlC,uBAAyB,CACvB,IAAM,EAAQ,KAAK,UAAU,CACxB,IACL,EAAM,MAAM,UAAY,GACxB,EAAM,MAAM,OAAS,GACrB,KAAK,mBAAqB,EAAM,uBAAuB,CAAC,OAEpD,KAAK,OAAS,OAChB,EAAM,MAAM,UAAY,GAAG,KAAK,mBAAmB,IACnD,EAAM,MAAM,OAAS,UAIzB,MAAM,oBAAsB,CAC1B,KAAK,aAAe,GAChB,KAAK,qBACP,KAAK,cAAgB,GACrB,MAAM,KAAK,WAAW,CACtB,KAAK,iBAAiB,GAI1B,MAAM,qBAAuB,CAE3B,GADA,KAAK,aAAe,GAChB,KAAK,mBAAoB,CAC3B,KAAK,cAAgB,GACrB,IAAM,EAAQ,KAAK,UAAU,CAG7B,GAFI,CAAC,GAED,CAAC,EAAM,MAAM,WACf,OAEF,KAAK,mBAAmB,EAAM,GAGnC,CACF,UAx1BS,MAAM,iSAmBa,GAAA,EAAA,EAAA,YAAA,CA3HzB,IAAI,sBACH,MAAO,EAAA,MACP,YAAW,EAAA,SACX,aAAY,EAAA,cACZ,YAAW,EAAA,aACX,iBAAgB,EAAA,cAChB,sBAAqB,EAAA,kBACtB,gBAAc,SACb,YAAW,EAAA,SACX,eAAc,EAAA,YACd,WAAY,EAAA,YACL,EAAA,oBAAoB,EAAA,OAAM,CAAA,CACjC,SAAQ,EAAA,iBACR,YAAW,EAAA,uCAED,OAAA,EAAA,EAAA,UA4DF,CA5DW,aAAO,EAAA,EAAA,EAAA,oBA4DlB,OAAA,CA1DL,IAAI,mBACJ,MAAM,yCACL,UAAO,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,oBAAA,EAAA,mBAAA,GAAA,EAAkB,EAC3B,WAAQ,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,qBAAA,EAAA,oBAAA,GAAA,EAAmB,6BAyBvB,OAAA,CAtBL,IAAI,eACH,OAAA,EAAA,EAAA,gBAAK,CAAA,wCAA4C,EAAA,iBAAgB,CAAA,iDAoBxD,EAAA,SAAA,MAAA,EAAA,EAAA,YAjBgB,EAAA,eAAhB,EAAM,yCAiBN,GAAA,EAAA,EAAA,YAAA,YAhBR,IAAI,QACH,IAAG,GAAK,EAAK,GAAI,IACjB,YAAa,GACb,cAAa,CAAA,8BAA+B,CAC5C,MAAK,CAAA,gCAAA,CAAA,0CAAA,CAAA,CAAgH,EAAA,aAAY,CAAA,CAIjI,MAAK,CAAA,SAAc,EAAA,aAAY,CAC/B,KAAM,EAAA,WAAW,OAAO,EAAA,KAAI,EAC5B,SAAU,EAAA,2BACS,EAAd,cAAa,CAAA,CAClB,WAAA,EAAA,EAAA,UAAO,GAAY,EAAA,aAAa,EAAI,CAAA,CAAA,YAAA,CAAA,CACpC,QAAK,GAAE,EAAA,aAAa,EAAI,8BAEf,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAP,EAAI,CAAA,EAAA,CAAA,CAAA,oGAyBT,GAAA,EAAA,EAAA,YAAA,CApBA,IAAI,mBACK,EAAA,2CAAA,EAAA,MAAK,GACd,MAAM,iCACL,cAAW,CAAgB,EAAA,WAAU,CAAA,yCAA4D,EAAA,cAAA,CAAA,CAIjG,sBAAqB,EAAA,kBACrB,SAAU,EAAA,SACV,aAAY,EAAA,MACZ,eAAc,EAAA,YACd,mBAAkB,EAAA,gBAClB,MAAO,EAAA,UAAY,EAAA,MAAK,GACxB,YAAa,EAAA,YACb,YAAa,EAAA,iBACb,gBAAe,EAAA,kBACf,SAAU,EAAA,cACV,KAAM,EAAA,MACC,EAAA,eAAc,CACrB,sBAAoB,EAAO,CAAA,CAAA,KAAA,GAAA,CAAA,aAAA,cAAA,sBAAA,WAAA,aAAA,eAAA,mBAAA,QAAA,cAAA,cAAA,gBAAA,WAAA,OAAA,sBAAA,CAAA,mBAO5B,EAAA,CAHC,GAAI,EAAA,WACJ,sBAAqB,EAAA,mBACrB,gBAAe,EAAA,qFAmBX,MAAA,EAAA,EAAA,aAgBH,EAAA,EAAA,EAAA,oBAAA,MAAA,CAdJ,IAAI,OACH,OAAA,EAAA,EAAA,gBAAK,CAAA,gCAAoC,EAAA,UAAS,CAAA,CAClD,YAAS,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,mBAAV,GAAkB,CAAA,UAAA,CAAA,IAGT,EAAA,UAEP,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAMI,MALN,GAAA,EAAA,EAAA,iBAIK,EAAA,eAAc,CAAA,EAAA,GAPV,EAAA,EAAA,YAEP,EAAA,OAAA,OAAA,CAAA,IAAA,EAAA,CAAA,CAKiB,CAAA,GAAA,CAAA,CAAA,OA1Bf,EAAA,eAAe,EAAA,OAAO,OAAM,CAAA,MACjC,8BAOK,EAAA,EAAA,EAAA,oBAAA,MAAA,CAJJ,IAAI,SACH,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,oBAEG,EAAA,OAAA,SAAA,CAAA,CAAA,EAAA,CAAA,CAAA,iBA0BlB,EAAA,eAAe,EAAA,OAAO,OAAM,CAAA,MACjC,8BAOK,EAAA,EAAA,EAAA,oBAAA,MAAA,CAJJ,IAAI,SACH,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,oBAEG,EAAA,OAAA,SAAA,CAAA,CAAA,EAAA,CAAA,CAAA"}

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

@@ -182,6 +182,7 @@ var I = {
 			popoverOffset: [0, 4],
 			showValidationMessages: !1,
 			resizeWindowObserver: null,
+			inputVisibilityObserver: null,
 			initialInputHeight: null,
 			CHIP_SIZES: _,
 			hasSlotContent: l,
@@ -253,12 +254,18 @@ var I = {
 		} }
 	},
 	async mounted() {
-		this.setInitialInputHeight(), this.resizeWindowObserver = new ResizeObserver(async () => {
+		if (this.setInitialInputHeight(), this.resizeWindowObserver = new ResizeObserver(async () => {
 			this.setChipsTopPosition(), this.setInputPadding();
-		}), this.resizeWindowObserver.observe(document.body), await this.initSelectedItems();
+		}), this.resizeWindowObserver.observe(document.body), !this.initialInputHeight) {
+			let e = this.getInput();
+			e && (this.inputVisibilityObserver = new ResizeObserver(() => {
+				this.initialInputHeight || (this.setInitialInputHeight(), this.initialInputHeight && (this.setInputPadding(), this.setChipsTopPosition(), this.inputVisibilityObserver?.disconnect(), this.inputVisibilityObserver = null));
+			}), this.inputVisibilityObserver.observe(e));
+		}
+		await this.initSelectedItems();
 	},
 	beforeUnmount() {
-		this.resizeWindowObserver?.unobserve(document.body);
+		this.resizeWindowObserver?.unobserve(document.body), this.inputVisibilityObserver?.disconnect();
 	},
 	methods: {
 		extractNonListeners: a,

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.js","names":[],"sources":["../../../components/ComboboxMultiSelect/ComboboxMultiSelect.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-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-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            :interactive=\"true\"\n            :label-class=\"['d-chip__label--focus-always']\"\n            :class=\"[\n              'd-combobox-multi-select__chip',\n              { 'd-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[String(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-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :disabled=\"disabled\"\n          :aria-label=\"label\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :label=\"showLabel ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-bind=\"inputListeners\"\n          @update:model-value=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :id=\"messagesId\"\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\n        ref=\"header\"\n        :class=\"headerClass\"\n      >\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-combobox-multi-select__list', listClass]\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-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\n        ref=\"footer\"\n        :class=\"footerClass\"\n      >\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/ComboboxWithPopover/ComboboxWithPopover.vue';\nimport DtInput from '@/components/Input/Input.vue';\nimport DtChip from '@/components/Chip/Chip.vue';\nimport DtValidationMessages from '@/components/ValidationMessages/ValidationMessages.vue';\nimport { validationMessageValidator, ordinalSizeValidator } from '@/common/validators';\nimport { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl, getUniqueString, getValidationState } from '@/common/utils';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/Popover/PopoverConstants';\nimport {\n  CHIP_SIZES,\n} from './ComboboxMultiSelectConstants';\nimport { COMPONENT_SIZES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\n\nexport default {\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    showLabel: {\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.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(CHIP_SIZES),\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', 'root', HTMLElement,\n     */\n    appendTo: {\n      type: [HTML_ELEMENT_TYPE, 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 name for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the footer wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the list wrapper element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\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     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String}\n     */\n    'update:modelValue',\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      messagesId: getUniqueString(),\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('update:modelValue', 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    ariaInvalid () {\n      return getValidationState(this.maxSelectedMessage) === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showValidationMessages && this.maxSelectedMessage.length > 0 ? this.messagesId : undefined;\n    },\n\n    // Sizes other than xs need a height floor so the box can grow for wrapped\n    // chip rows without collapsing back; xs renders correctly without one.\n    inputHeightFloor () {\n      return (this.initialInputHeight && this.size !== 'xs')\n        ? `${this.initialInputHeight}px`\n        : '';\n    },\n\n    chipWrapperClass () {\n      const size = COMPONENT_SIZES[String(this.size)] || this.size;\n      return [\n        // Always emitted so the CSS can size the row rhythm without reaching\n        // sideways into DtInput's markup to discover the size.\n        `d-combobox-multi-select__chip-wrapper--${size}`,\n        {\n          [`d-combobox-multi-select__chip-wrapper-${size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n        },\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      // Centers the first row of chips on the input box's first line.\n      // Two offsets have to be measured rather than derived: the input's\n      // position within the slot wrapper (label and description heights vary),\n      // and the chip's position within its own wrapper (the chips are atomic\n      // inline boxes, so line-box metrics — not just the chip margin — decide\n      // where the row starts).\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      const firstChip = this.getFirstChip();\n      if (!input || !chipsWrapper || !firstChip) return;\n\n      const inputTop = input.getBoundingClientRect().top -\n                       this.$refs.inputSlotWrapper.getBoundingClientRect().top;\n      // The empty-input height, so chips stay on the first line rather than\n      // recentering on the whole box once it grows to fit wrapped rows.\n      const inputRowHeight = this.initialInputHeight || input.getBoundingClientRect().height;\n      const chipRect = firstChip.getBoundingClientRect();\n      const chipOffsetInWrapper = chipRect.top - chipsWrapper.getBoundingClientRect().top;\n\n      const top = inputTop + (inputRowHeight - chipRect.height) / 2 - chipOffsetInWrapper;\n      chipsWrapper.style.top = top + '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      // Read while revertInputPadding() above has the inline override cleared,\n      // so this is the input's own padding rather than a previous run's value.\n      const inputPaddingTop = this.getComputedPx(input, 'paddingTop');\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.paddingInlineStart = left + 'px';\n      } else {\n        input.style.paddingInlineStart = '4px';\n      }\n\n      const caretRowTop = this.getCaretRowTop(lastChip, firstChip, spaceLeft > this.reservedRightSpace, isWrapped);\n      if (caretRowTop != null) {\n        // Adding the input's own padding reproduces the single-row layout on\n        // the caret's row, so the typed text keeps the same baseline relative\n        // to the chips beside it no matter how many rows have accumulated.\n        input.style.paddingTop = `${caretRowTop + inputPaddingTop}px`;\n        this.growInputForWrappedRows(input, caretRowTop);\n      }\n    },\n\n    growInputForWrappedRows (input, caretRowTop) {\n      // The grown box would otherwise end at the caret line, leaving the last\n      // chip row flush against the block-end border. Extend the height floor\n      // so the last row keeps the same breathing room the first row gets from\n      // centering: its row top plus the single-row envelope.\n      if (!this.initialInputHeight) return;\n      input.style.minHeight = `${caretRowTop + this.initialInputHeight}px`;\n    },\n\n    getComputedPx (el, property) {\n      return parseFloat(getComputedStyle(el)[property]) || 0;\n    },\n\n    // Distance from the first chip row to the row the caret belongs on.\n    getCaretRowTop (lastChip, firstChip, hasSpace, isWrapped) {\n      // Chip fits beside the cursor on the first row; CSS centers it already.\n      if (hasSpace && !isWrapped) return null;\n      // Measured rather than offsetTop, which rounds to whole pixels and drifts\n      // further out of alignment with every row added.\n      const rowTop = lastChip.getBoundingClientRect().top - firstChip.getBoundingClientRect().top;\n      // Chip wrapped onto a new row with space remaining; share that row.\n      if (hasSpace) return rowTop;\n      // No space left on that row — predict the next one. Row spacing belongs\n      // to the wrapper's row-gap, not to the chip.\n      const rowGap = this.getComputedPx(this.$refs.chipsWrapper, 'rowGap');\n      return rowTop + lastChip.getBoundingClientRect().height + rowGap;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingInlineStart = '';\n      // setInputPadding writes the physical paddingTop slot, so that is the\n      // slot to clear — the logical one is a different CSSOM property.\n      input.style.paddingTop = '';\n      // Restore the single-row height floor that setInitialInputHeight\n      // applies (setInputPadding grows it while rows are wrapped).\n      input.style.minHeight = this.inputHeightFloor;\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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"}
+{"version":3,"file":"combobox-multi-select.js","names":[],"sources":["../../../components/ComboboxMultiSelect/ComboboxMultiSelect.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-combobox-multi-select__input-wrapper\"\n        @focusin=\"handleInputFocusIn\"\n        @focusout=\"handleInputFocusOut\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          :class=\"['d-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            :interactive=\"true\"\n            :label-class=\"['d-chip__label--focus-always']\"\n            :class=\"[\n              'd-combobox-multi-select__chip',\n              { 'd-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n            ]\"\n            :style=\"{ maxWidth: chipMaxWidth }\"\n            :size=\"CHIP_SIZES[String(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-combobox-multi-select__input\"\n          :input-class=\"[\n            inputClass, {\n              'd-combobox-multi-select__input--hidden': hideInputText,\n            }]\"\n          :input-wrapper-class=\"inputWrapperClass\"\n          :disabled=\"disabled\"\n          :aria-label=\"label\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          :label=\"showLabel ? label : ''\"\n          :description=\"description\"\n          :placeholder=\"inputPlaceHolder\"\n          :show-messages=\"showInputMessages\"\n          :messages=\"inputMessages\"\n          :size=\"size\"\n          v-bind=\"inputListeners\"\n          @update:model-value=\"onInput\"\n        />\n\n        <dt-validation-messages\n          :id=\"messagesId\"\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\n        ref=\"header\"\n        :class=\"headerClass\"\n      >\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-combobox-multi-select__list', listClass]\"\n        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"d-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\n        ref=\"footer\"\n        :class=\"footerClass\"\n      >\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/ComboboxWithPopover/ComboboxWithPopover.vue';\nimport DtInput from '@/components/Input/Input.vue';\nimport DtChip from '@/components/Chip/Chip.vue';\nimport DtValidationMessages from '@/components/ValidationMessages/ValidationMessages.vue';\nimport { validationMessageValidator, ordinalSizeValidator } from '@/common/validators';\nimport { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl, getUniqueString, getValidationState } from '@/common/utils';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '@/components/Popover/PopoverConstants';\nimport {\n  CHIP_SIZES,\n} from './ComboboxMultiSelectConstants';\nimport { COMPONENT_SIZES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\n\nexport default {\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    showLabel: {\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.\n     * @values 100, 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: ordinalSizeValidator(CHIP_SIZES),\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', 'root', HTMLElement,\n     */\n    appendTo: {\n      type: [HTML_ELEMENT_TYPE, 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 name for the header wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the footer wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the list wrapper element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\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     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {String}\n     */\n    'update:modelValue',\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      inputVisibilityObserver: null,\n      initialInputHeight: null,\n      CHIP_SIZES,\n      hasSlotContent,\n      inputFocused: false,\n      hideInputText: false,\n      messagesId: getUniqueString(),\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('update:modelValue', 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    ariaInvalid () {\n      return getValidationState(this.maxSelectedMessage) === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showValidationMessages && this.maxSelectedMessage.length > 0 ? this.messagesId : undefined;\n    },\n\n    // Sizes other than xs need a height floor so the box can grow for wrapped\n    // chip rows without collapsing back; xs renders correctly without one.\n    inputHeightFloor () {\n      return (this.initialInputHeight && this.size !== 'xs')\n        ? `${this.initialInputHeight}px`\n        : '';\n    },\n\n    chipWrapperClass () {\n      const size = COMPONENT_SIZES[String(this.size)] || this.size;\n      return [\n        // Always emitted so the CSS can size the row rhythm without reaching\n        // sideways into DtInput's markup to discover the size.\n        `d-combobox-multi-select__chip-wrapper--${size}`,\n        {\n          [`d-combobox-multi-select__chip-wrapper-${size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n        },\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    // The measurement above can land on a zero-size input — for example it's inside a collapsed\n    // panel or a not-yet-visible tab. Nothing else is guaranteed to react once the input later\n    // becomes visible: revealing it doesn't necessarily resize document.body, and with the\n    // default collapseOnFocusOut: false, focusing the input doesn't recompute anything either.\n    // Watch the input's own box directly so we can recover the instant it actually gets real\n    // layout, instead of depending on some other call site to happen to run again.\n    if (!this.initialInputHeight) {\n      const input = this.getInput();\n      if (input) {\n        this.inputVisibilityObserver = new ResizeObserver(() => {\n          if (this.initialInputHeight) return;\n          this.setInitialInputHeight();\n          if (!this.initialInputHeight) return;\n          this.setInputPadding();\n          this.setChipsTopPosition();\n          this.inputVisibilityObserver?.disconnect();\n          this.inputVisibilityObserver = null;\n        });\n        this.inputVisibilityObserver.observe(input);\n      }\n    }\n\n    await this.initSelectedItems();\n  },\n\n  beforeUnmount () {\n    this.resizeWindowObserver?.unobserve(document.body);\n    this.inputVisibilityObserver?.disconnect();\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      // Centers the first row of chips on the input box's first line.\n      // Two offsets have to be measured rather than derived: the input's\n      // position within the slot wrapper (label and description heights vary),\n      // and the chip's position within its own wrapper (the chips are atomic\n      // inline boxes, so line-box metrics — not just the chip margin — decide\n      // where the row starts).\n      const input = this.getInput();\n      const chipsWrapper = this.$refs.chipsWrapper;\n      const firstChip = this.getFirstChip();\n      if (!input || !chipsWrapper || !firstChip) return;\n\n      const inputTop = input.getBoundingClientRect().top -\n                       this.$refs.inputSlotWrapper.getBoundingClientRect().top;\n      // The empty-input height, so chips stay on the first line rather than\n      // recentering on the whole box once it grows to fit wrapped rows.\n      const inputRowHeight = this.initialInputHeight || input.getBoundingClientRect().height;\n      const chipRect = firstChip.getBoundingClientRect();\n      const chipOffsetInWrapper = chipRect.top - chipsWrapper.getBoundingClientRect().top;\n\n      const top = inputTop + (inputRowHeight - chipRect.height) / 2 - chipOffsetInWrapper;\n      chipsWrapper.style.top = top + '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      // Read while revertInputPadding() above has the inline override cleared,\n      // so this is the input's own padding rather than a previous run's value.\n      const inputPaddingTop = this.getComputedPx(input, 'paddingTop');\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.paddingInlineStart = left + 'px';\n      } else {\n        input.style.paddingInlineStart = '4px';\n      }\n\n      const caretRowTop = this.getCaretRowTop(lastChip, firstChip, spaceLeft > this.reservedRightSpace, isWrapped);\n      if (caretRowTop != null) {\n        // Adding the input's own padding reproduces the single-row layout on\n        // the caret's row, so the typed text keeps the same baseline relative\n        // to the chips beside it no matter how many rows have accumulated.\n        input.style.paddingTop = `${caretRowTop + inputPaddingTop}px`;\n        this.growInputForWrappedRows(input, caretRowTop);\n      }\n    },\n\n    growInputForWrappedRows (input, caretRowTop) {\n      // The grown box would otherwise end at the caret line, leaving the last\n      // chip row flush against the block-end border. Extend the height floor\n      // so the last row keeps the same breathing room the first row gets from\n      // centering: its row top plus the single-row envelope.\n      if (!this.initialInputHeight) return;\n      input.style.minHeight = `${caretRowTop + this.initialInputHeight}px`;\n    },\n\n    getComputedPx (el, property) {\n      return parseFloat(getComputedStyle(el)[property]) || 0;\n    },\n\n    // Distance from the first chip row to the row the caret belongs on.\n    getCaretRowTop (lastChip, firstChip, hasSpace, isWrapped) {\n      // Chip fits beside the cursor on the first row; CSS centers it already.\n      if (hasSpace && !isWrapped) return null;\n      // Measured rather than offsetTop, which rounds to whole pixels and drifts\n      // further out of alignment with every row added.\n      const rowTop = lastChip.getBoundingClientRect().top - firstChip.getBoundingClientRect().top;\n      // Chip wrapped onto a new row with space remaining; share that row.\n      if (hasSpace) return rowTop;\n      // No space left on that row — predict the next one. Row spacing belongs\n      // to the wrapper's row-gap, not to the chip.\n      const rowGap = this.getComputedPx(this.$refs.chipsWrapper, 'rowGap');\n      return rowTop + lastChip.getBoundingClientRect().height + rowGap;\n    },\n\n    revertInputPadding (input) {\n      input.style.paddingInlineStart = '';\n      // setInputPadding writes the physical paddingTop slot, so that is the\n      // slot to clear — the logical one is a different CSSOM property.\n      input.style.paddingTop = '';\n      // Restore the single-row height floor that setInitialInputHeight\n      // applies (setInputPadding grows it while rows are wrapped).\n      input.style.minHeight = this.inputHeightFloor;\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone-vue",
-  "version": "3.225.0-next.8",
+  "version": "3.225.0-next.9",
   "description": "Vue component library for Dialpad's design system Dialtone",
   "files": [
     "dist"
@@ -61,12 +61,12 @@
     "react": "19.2.4",
     "storybook": "10.3.0",
     "vue": "^3.3.4",
-    "@dialpad/dialtone-css": "8.81.0-next.16",
+    "@dialpad/dialtone-css": "8.81.0-next.17",
     "@dialpad/generator-dialtone": "0.1.0"
   },
   "peerDependencies": {
     "vue": ">=3.2",
-    "@dialpad/dialtone-css": "^8.81.0-next.16"
+    "@dialpad/dialtone-css": "^8.81.0-next.17"
   },
   "bugs": {
     "email": "dialtone@dialpad.com"