npm - @dialpad/dialtone-vue - Versions diffs - 3.221.0 → 3.221.1 - Mend

@dialpad/dialtone-vue 3.221.0 → 3.221.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/components/modal/modal.vue.d.ts CHANGED Viewed

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

package/dist/components/modal/modal.vue.d.ts.map CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-multi-select.cjs","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n <dt-combobox-with-popover\n ref=\"comboboxWithPopover\"\n :label=\"label\"\n :show-list=\"showList\"\n :max-height=\"listMaxHeight\"\n :max-width=\"listMaxWidth\"\n :popover-offset=\"popoverOffset\"\n :has-suggestion-list=\"hasSuggestionList\"\n content-width=\"anchor\"\n :append-to=\"appendTo\"\n :dialog-class=\"dialogClass\"\n :transition=\"transition\"\n v-bind=\"extractNonListeners($attrs)\"\n @select=\"onComboboxSelect\"\n @highlight=\"comboboxHighlight\"\n >\n <template #input=\"{ onInput }\">\n <span\n ref=\"inputSlotWrapper\"\n class=\"d-recipe-combobox-multi-select__input-wrapper\"\n @focusin=\"handleInputFocusIn\"\n @focusout=\"handleInputFocusOut\"\n >\n <span\n ref=\"chipsWrapper\"\n :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n >\n <dt-chip\n v-for=\"(item, index) in selectedItems\"\n ref=\"chips\"\n :key=\"`${index}-${item}`\"\n :label-class=\"['d-chip__label']\"\n :class=\"[\n 'd-recipe-combobox-multi-select__chip',\n { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n ]\"\n :style=\"{ maxWidth: chipMaxWidth }\"\n :size=\"CHIP_SIZES[size]\"\n :disabled=\"disabled\"\n v-on=\"chipListeners\"\n @keydown.backspace=\"onChipRemove(item)\"\n @close=\"onChipRemove(item)\"\n >\n {{ item }}\n </dt-chip>\n </span>\n\n <dt-input\n ref=\"input\"\n v-model=\"value\"\n class=\"d-recipe-combobox-multi-select__input\"\n :input-class=\"[\n inputClass, {\n 'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n }]\"\n :input-wrapper-class=\"inputWrapperClass\"\n :disabled=\"disabled\"\n :aria-label=\"label\"\n :label=\"labelVisible ? label : ''\"\n :description=\"description\"\n :placeholder=\"inputPlaceHolder\"\n :show-messages=\"showInputMessages\"\n :messages=\"inputMessages\"\n :size=\"size\"\n v-bind=\"inputListeners\"\n @input=\"onInput\"\n />\n\n <dt-validation-messages\n :validation-messages=\"maxSelectedMessage\"\n :show-messages=\"showValidationMessages\"\n />\n </span>\n </template>\n\n <!-- @slot slot for popover header -->\n <template\n v-if=\"hasSlotContent($slots.header)\"\n #header\n >\n <div ref=\"header\">\n <slot name=\"header\" />\n </div>\n </template>\n\n <!-- @slot slot for popover list -->\n <template #list>\n <div\n ref=\"list\"\n class=\"d-recipe-combobox-multi-select__list\"\n @mousedown.prevent\n >\n <slot\n v-if=\"!loading\"\n name=\"list\"\n />\n <div\n v-else\n class=\"d-recipe-combobox-multi-select__list--loading\"\n >\n {{ loadingMessage }}\n </div>\n </div>\n </template>\n\n <!-- @slot slot for popover footer -->\n <template\n v-if=\"hasSlotContent($slots.footer)\"\n #footer\n >\n <div ref=\"footer\">\n <slot name=\"footer\" />\n </div>\n </template>\n </dt-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport DtComboboxWithPopover from '@/components/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl } from '@/common/utils';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtComboboxMultiSelect',\n\n components: {\n DtComboboxWithPopover,\n DtInput,\n DtChip,\n DtValidationMessages,\n },\n\n inheritAttrs: false,\n\n props: {\n /\n String to use for the input label.\n /\n label: {\n type: String,\n required: true,\n },\n\n /\n Determines visibility of input label.\n * @values true, false\n /\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /\n Description for the input\n /\n description: {\n type: String,\n default: '',\n },\n\n /\n Input placeholder\n /\n placeholder: {\n type: String,\n default: 'Select one or start typing',\n },\n\n /\n Input validation messages\n /\n inputMessages: {\n type: Array,\n default: () => [],\n validator: inputMessages => {\n return validationMessageValidator(inputMessages);\n },\n },\n\n /\n Show input validation message\n /\n showInputMessages: {\n type: Boolean,\n default: true,\n },\n\n // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n // type: {\n // type: String,\n // values: ['input', 'select'],\n // default: 'select',\n // },\n\n /\n Determines if the list is loading\n /\n loading: {\n type: Boolean,\n default: false,\n },\n\n /\n The message when the list is loading\n /\n loadingMessage: {\n type: String,\n default: 'loading...',\n },\n\n /\n Determines when to show the list element and also controls the aria-expanded attribute.\n * Leaving this null will have the combobox trigger on input focus by default.\n * If you set this value, the default trigger behavior will be disabled and you can\n * control it as you need.\n /\n showList: {\n type: Boolean,\n default: null,\n },\n\n /\n Determines maximum height for the popover before overflow.\n * Possible units rem\|px\|em\n /\n listMaxHeight: {\n type: String,\n default: '300px',\n },\n\n /\n The selected items\n /\n selectedItems: {\n type: Array,\n default: function () { return []; },\n },\n\n /\n Would be the maximum number of selections you can make. 0 is unlimited\n /\n maxSelected: {\n type: Number,\n default: 0,\n },\n\n /\n Max select message when the max selections is exceeded with the structure:\n * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n /\n maxSelectedMessage: {\n type: Array,\n default: function () { return []; },\n },\n\n /\n Displays the list when the combobox is focused, before the user has typed anything.\n * When this is enabled the list will not close after selection.\n /\n hasSuggestionList: {\n type: Boolean,\n default: true,\n },\n\n /\n Size of the chip, one of `xs`, `sm`, `md`\n /\n size: {\n type: String,\n default: 'md',\n validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n },\n\n /\n Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n /\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) \|\|\n (appendTo instanceof HTMLElement);\n },\n },\n\n /\n Named transition when the content display is toggled.\n * @see DtLazyShow\n /\n transition: {\n type: String,\n default: 'fade',\n },\n\n /\n Determines whether the combobox should collapse to a single when losing focus.\n * @type {boolean}\n /\n collapseOnFocusOut: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines maximum width for the popover before overflow.\n * Possible units rem\|px\|em\n /\n listMaxWidth: {\n type: String,\n default: '',\n },\n\n /\n Amount of reserved space (in px) on the right side of the input\n * before the chips and the input caret jump to the next line.\n * default is 64\n /\n reservedRightSpace: {\n type: Number,\n default: 64,\n },\n\n /\n Determines the maximum width of a single chip. If the text within this chip exceeds the value\n * it will be truncated with ellipses.\n * Possible units rem\|px\|em\n /\n chipMaxWidth: {\n type: String,\n default: '',\n },\n\n /\n Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n /\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n /\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n When true, disables the underlying input.\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Additional class for the popover dialog element.\n /\n dialogClass: {\n type: [String, Object, Array],\n default: '',\n },\n },\n\n emits: [\n /\n Native input event\n \n @event input\n * @type {String }\n /\n 'input',\n\n /\n Event fired when item selected\n \n @event select\n * @type {Number}\n /\n 'select',\n\n /\n Event fired when item removed\n \n @event remove\n * @type {String}\n /\n 'remove',\n\n /\n Event fired when max selected items limit is reached\n \n @event max-selected\n * @type {Object}\n /\n 'max-selected',\n\n /\n Native keydown event fired when a key is pressed in the text input.\n * For the common Escape and Enter cases, listen to `escape` / `enter` instead.\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n Native keydown event fired when a key is pressed while a chip is focused.\n \n @event chip-keydown\n * @type {KeyboardEvent}\n /\n 'chip-keydown',\n\n /\n Fired when Escape is pressed in the text input.\n * Not fired when a chip is focused.\n \n @event escape\n * @type {KeyboardEvent}\n /\n 'escape',\n\n /\n Fired when Enter is pressed in the text input.\n * Not fired when a chip is focused.\n \n @event enter\n * @type {KeyboardEvent}\n /\n 'enter',\n\n /\n Event fired when combobox item is highlighted\n \n @event combobox-highlight\n * @type {Object}\n */\n 'combobox-highlight',\n ],\n\n data () {\n return {\n value: '',\n popoverOffset: [0, 4],\n showValidationMessages: false,\n resizeWindowObserver: null,\n initialInputHeight: null,\n CHIP_SIZES,\n hasSlotContent,\n inputFocused: false,\n hideInputText: false,\n };\n },\n\n computed: {\n inputPlaceHolder () {\n return this.selectedItems?.length > 0 ? '' : this.placeholder;\n },\n\n chipListeners () {\n return {\n keydown: event => {\n if (this.disabled) return;\n this.onChipKeyDown(event);\n this.$emit('chip-keydown', event);\n },\n };\n },\n\n inputListeners () {\n return {\n ...extractVueListeners(this.$attrs),\n onInput: event => {\n this.$emit('input', event);\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n\n onKeydown: event => {\n if (this.disabled) return;\n this.onInputKeyDown(event);\n this.$emit('keydown', event);\n // Use event.key (not event.code) so NumpadEnter normalizes to 'Enter'\n // and consumers don't have to special-case the numpad.\n const key = event.key?.toLowerCase();\n if (key === 'escape') {\n this.$emit('escape', event);\n } else if (key === 'enter') {\n this.$emit('enter', event);\n }\n },\n\n onClick: () => {\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n };\n },\n\n chipWrapperClass () {\n return {\n [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n };\n },\n },\n\n watch: {\n selectedItems: {\n deep: true,\n handler: async function () {\n await this.initSelectedItems();\n },\n },\n\n chipMaxWidth: {\n async handler () {\n await this.initSelectedItems();\n },\n },\n\n async label () {\n await this.$nextTick();\n // Adjust the chips position if label changed\n this.setChipsTopPosition();\n },\n\n async description () {\n await this.$nextTick();\n // Adjust the chips position if description changed\n this.setChipsTopPosition();\n },\n\n size: {\n async handler () {\n await this.$nextTick();\n const input = this.getInput();\n this.revertInputPadding(input);\n this.initialInputHeight = input.getBoundingClientRect().height;\n this.setInputPadding();\n this.setChipsTopPosition();\n },\n },\n },\n\n async mounted () {\n this.setInitialInputHeight();\n // Recalculate chip position and input padding when resizing window\n this.resizeWindowObserver = new ResizeObserver(async () => {\n this.setChipsTopPosition();\n this.setInputPadding();\n });\n this.resizeWindowObserver.observe(document.body);\n\n await this.initSelectedItems();\n },\n\n beforeUnmount () {\n this.resizeWindowObserver?.unobserve(document.body);\n },\n\n methods: {\n extractNonListeners,\n comboboxHighlight (highlightIndex) {\n this.$emit('combobox-highlight', highlightIndex);\n },\n\n async initSelectedItems () {\n await this.$nextTick();\n this.setInputPadding();\n this.setChipsTopPosition();\n this.setInputMinWidth();\n this.checkMaxSelected();\n },\n\n onChipRemove (item) {\n this.$emit('remove', item);\n this.$refs.input?.focus();\n },\n\n onComboboxSelect (i) {\n if (this.loading) return;\n this.value = '';\n this.$emit('select', i);\n },\n\n showComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.showComboboxList();\n },\n\n closeComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.closeComboboxList();\n },\n\n getChips () {\n if (!this.selectedItems.length \|\| !this.$refs.chips) return null;\n\n // Use the order from selectedItems to not rely on DOM order which may be stale.\n // Track matched indices to handle duplicate item names correctly.\n const matched = new Set();\n const chips = this.selectedItems.map(item => {\n return this.$refs.chips.find((chip, index) => {\n if (matched.has(index)) return false;\n const chipLabel = returnFirstEl(chip.$el)?.querySelector('.d-chip__label')?.textContent?.trim();\n if (chipLabel === item) {\n matched.add(index);\n return true;\n }\n return false;\n });\n });\n return chips.filter(Boolean).map(chip => returnFirstEl(chip.$el));\n },\n\n getChipButtons () {\n const chips = this.getChips();\n return chips && chips.map(chip => returnFirstEl(chip).querySelector('button'));\n },\n\n getLastChipButton () {\n const chipButtons = this.getChipButtons();\n return chipButtons && chipButtons[chipButtons.length - 1];\n },\n\n getLastChip () {\n const chips = this.getChips();\n return chips && chips[chips.length - 1];\n },\n\n getFirstChip () {\n const chips = this.getChips();\n return chips && chips[0];\n },\n\n getInput () {\n return this.$refs.input?.$refs.input;\n },\n\n onChipKeyDown (event) {\n const key = event.code?.toLowerCase();\n if (key === 'arrowleft') {\n // Move to the previous chip\n this.navigateBetweenChips(event.target, true);\n } else if (key === 'arrowright') {\n if (event.target.id === this.getLastChipButton().id) {\n // Move to the input if it's the last chip\n this.moveFromChipToInput();\n } else {\n // Move to the next chip\n this.navigateBetweenChips(event.target, false);\n }\n }\n },\n\n onInputKeyDown (event) {\n const key = event.key?.toLowerCase();\n // If the cursor is at the start of the text,\n // press 'backspace' or 'left' focuses the last chip\n if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n // if there is selected text, do not focus the last chip\n if (event.target.selectionEnd !== event.target.selectionStart) {\n return;\n }\n if (key === 'backspace' \|\| key === 'arrowleft') {\n this.moveFromInputToChip();\n }\n }\n },\n\n moveFromInputToChip () {\n this.getLastChipButton().focus();\n this.$refs.input?.blur();\n this.closeComboboxList();\n },\n\n moveFromChipToInput () {\n this.getLastChipButton().blur();\n this.$refs.input?.focus();\n this.showComboboxList();\n },\n\n navigateBetweenChips (target, toLeft) {\n const from = this.getChipButtons().indexOf(target);\n const to = toLeft ? from - 1 : from + 1;\n if (to < 0 \|\| to >= this.$refs.chips?.length) {\n return;\n }\n this.getChipButtons()[from].blur();\n this.getChipButtons()[to].focus();\n this.closeComboboxList();\n },\n\n setChipsTopPosition () {\n // To place the chips in the input box\n // The chip \"top\" position should be the same line as the input box\n const input = this.getInput();\n if (!input) return;\n const inputSlotWrapper = this.$refs.inputSlotWrapper;\n const top = input.getBoundingClientRect().top -\n inputSlotWrapper.getBoundingClientRect().top;\n const chipsWrapper = this.$refs.chipsWrapper;\n chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n },\n\n setInputPadding () {\n const lastChip = this.getLastChip();\n const input = this.getInput();\n const chipsWrapper = this.$refs.chipsWrapper;\n if (!input) return;\n this.revertInputPadding(input);\n this.popoverOffset = [0, 4];\n if (!lastChip) return;\n // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n // This ensures the input returns to its original state when resizing\n if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n // Get the position of the last chip\n // The input cursor should be the same \"top\" as that chip and next besides it\n const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n const spaceLeft = input.getBoundingClientRect().width - left;\n // input.style.paddingLeft = left + 'px';\n\n if (spaceLeft > this.reservedRightSpace) {\n input.style.paddingLeft = left + 'px';\n } else {\n input.style.paddingLeft = '4px';\n }\n\n // Get the chip wrapper height minus the 4px padding\n const chipsWrapperHeight = chipsWrapper.getBoundingClientRect().height - 4;\n const lastChipHeight = lastChip.getBoundingClientRect().height - 4;\n\n // Get lastChip offsetTop plus 2px of the input padding.\n const top = spaceLeft > this.reservedRightSpace\n ? lastChip.offsetTop + 2\n : (chipsWrapperHeight + lastChipHeight - 9);\n\n input.style.paddingTop = `${top}px`;\n },\n\n revertInputPadding (input) {\n input.style.paddingLeft = '';\n input.style.paddingTop = '';\n input.style.paddingBottom = '';\n },\n\n getFullWidth (el) {\n const styles = window.getComputedStyle(el);\n return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n },\n\n setInputMinWidth () {\n // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n const firstChip = this.getFirstChip();\n const input = this.getInput();\n if (!input) return;\n if (firstChip) {\n // Add 4px buffer for typing room\n input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n } else {\n input.style.minWidth = '';\n }\n },\n\n checkMaxSelected () {\n if (this.maxSelected === 0) return;\n if (this.selectedItems.length > this.maxSelected) {\n this.showValidationMessages = true;\n this.$emit('max-selected');\n } else {\n this.showValidationMessages = false;\n }\n },\n\n setInitialInputHeight () {\n const input = this.getInput();\n if (!input) return;\n this.initialInputHeight = input.getBoundingClientRect().height;\n },\n\n async handleInputFocusIn () {\n this.inputFocused = true;\n if (this.collapseOnFocusOut) {\n this.hideInputText = false;\n await this.$nextTick();\n this.setInputPadding();\n }\n },\n\n async handleInputFocusOut () {\n this.inputFocused = false;\n if (this.collapseOnFocusOut) {\n this.hideInputText = true;\n const input = this.getInput();\n if (!input) return;\n // Hide the input text when is not on first line\n if (!input.style.paddingTop) {\n return;\n }\n this.revertInputPadding(input);\n }\n },\n },\n};\n</script>\n"],"mappings":"4kBAwIA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,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,aAAc,CACZ,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,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAY,GAAM,OAAO,OAAO,EAAA,mBAAmB,CAAC,SAAS,EAAE,CAChE,CAOD,SAAU,CACR,KAAM,CAAC,YAAa,OAAO,CAC3B,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,OAAQ,MAAM,CAC7B,QAAS,GACV,CACF,CAED,MAAO,CAOL,QAQA,SAQA,SAQA,eASA,UAQA,eASA,SASA,QAQA,qBACD,CAED,MAAQ,CACN,MAAO,CACL,MAAO,GACP,cAAe,CAAC,EAAG,EAAE,CACrB,uBAAwB,GACxB,qBAAsB,KACtB,mBAAoB,KACpB,WAAA,EAAA,WACA,eAAA,EAAA,eACA,aAAc,GACd,cAAe,GAChB,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,QAAS,EAAM,CACtB,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,kBAAoB,CAClB,MAAO,EACJ,gDAAgD,KAAK,KAAK,cAAe,CAAC,KAAK,cAAgB,KAAK,mBACtG,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,mBAAqB,EAAM,uBAAuB,CAAC,OACxD,KAAK,iBAAiB,CACtB,KAAK,qBAAqB,EAE7B,CACF,CAED,MAAM,SAAW,CACf,KAAK,uBAAuB,CAE5B,KAAK,qBAAuB,IAAI,eAAe,SAAY,CACzD,KAAK,qBAAqB,CAC1B,KAAK,iBAAiB,EACtB,CACF,KAAK,qBAAqB,QAAQ,SAAS,KAAK,CAEhD,MAAM,KAAK,mBAAmB,EAGhC,eAAiB,CACf,KAAK,sBAAsB,UAAU,SAAS,KAAK,EAGrD,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,CAGrB,IAAM,EAAQ,KAAK,UAAU,CAC7B,GAAI,CAAC,EAAO,OACZ,IAAM,EAAmB,KAAK,MAAM,iBAC9B,EAAM,EAAM,uBAAuB,CAAC,IAC9B,EAAiB,uBAAuB,CAAC,IAC/C,EAAe,KAAK,MAAM,aAChC,EAAa,MAAM,IAAO,EAAM,EAAA,kBAAkB,KAAK,MAAS,MAGlE,iBAAmB,CACjB,IAAM,EAAW,KAAK,aAAa,CAC7B,EAAQ,KAAK,UAAU,CACvB,EAAe,KAAK,MAAM,aAOhC,GANI,CAAC,IACL,KAAK,mBAAmB,EAAM,CAC9B,KAAK,cAAgB,CAAC,EAAG,EAAE,CACvB,CAAC,IAGD,KAAK,oBAAsB,CAAC,KAAK,aAAc,OAInD,IAAM,EAAO,EAAS,WAAa,KAAK,aAAa,EAAS,CACxD,EAAY,EAAM,uBAAuB,CAAC,MAAQ,EAGpD,EAAY,KAAK,mBACnB,EAAM,MAAM,YAAc,EAAO,KAEjC,EAAM,MAAM,YAAc,MAI5B,IAAM,EAAqB,EAAa,uBAAuB,CAAC,OAAS,EACnE,EAAiB,EAAS,uBAAuB,CAAC,OAAS,EAG3D,EAAM,EAAY,KAAK,mBACzB,EAAS,UAAY,EACpB,EAAqB,EAAiB,EAE3C,EAAM,MAAM,WAAa,GAAG,EAAI,KAGlC,mBAAoB,EAAO,CACzB,EAAM,MAAM,YAAc,GAC1B,EAAM,MAAM,WAAa,GACzB,EAAM,MAAM,cAAgB,IAG9B,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,KAAK,mBAAqB,EAAM,uBAAuB,CAAC,SAG1D,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,IA3uBU,IAAI,SAAQ,UAkBb,MAAM,oDAYL,IAAI,SAAQ,wPAIM,GAAA,EAAA,EAAA,YAAA,CAjHzB,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,UAwDF,CAxDW,aAAO,EAAA,EAAA,EAAA,oBAwDlB,OAAA,CAtDL,IAAI,mBACJ,MAAM,gDACL,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,6BAwBvB,OAAA,CArBL,IAAI,eACH,OAAA,EAAA,EAAA,gBAAK,CAAA,+CAAmD,EAAA,iBAAgB,CAAA,iDAmB/D,EAAA,SAAA,MAAA,EAAA,EAAA,YAhBgB,EAAA,eAAhB,EAAM,yCAgBN,GAAA,EAAA,EAAA,YAAA,YAfR,IAAI,QACH,IAAG,GAAK,EAAK,GAAI,IACjB,cAAa,CAAA,gBAAiB,CAC9B,MAAK,CAAA,uCAAA,CAAA,iDAAA,CAAA,CAA8H,EAAA,aAAY,CAAA,CAI/I,MAAK,CAAA,SAAc,EAAA,aAAY,CAC/B,KAAM,EAAA,WAAW,EAAA,MACjB,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,oGAuBT,GAAA,EAAA,EAAA,YAAA,CAlBA,IAAI,mBACK,EAAA,2CAAA,EAAA,MAAK,GACd,MAAM,wCACL,cAAW,CAAgB,EAAA,WAAU,CAAA,gDAAmE,EAAA,cAAA,CAAA,CAIxG,sBAAqB,EAAA,kBACrB,SAAU,EAAA,SACV,aAAY,EAAA,MACZ,MAAO,EAAA,aAAe,EAAA,MAAK,GAC3B,YAAa,EAAA,YACb,YAAa,EAAA,iBACb,gBAAe,EAAA,kBACf,SAAU,EAAA,cACV,KAAM,EAAA,MACC,EAAA,eAAc,CACd,UAAO,CAAA,CAAA,KAAA,GAAA,CAAA,aAAA,cAAA,sBAAA,WAAA,aAAA,QAAA,cAAA,cAAA,gBAAA,WAAA,OAAA,UAAA,CAAA,mBAMf,EAAA,CAFC,sBAAqB,EAAA,mBACrB,gBAAe,EAAA,gFAgBX,MAAA,EAAA,EAAA,aAgBH,EAAA,EAAA,EAAA,oBAAA,MAAA,CAdJ,IAAI,OACJ,MAAM,uCACL,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,IAAA,CAAA,CAAA,OAvBf,EAAA,eAAe,EAAA,OAAO,OAAM,CAAA,MACjC,8BAIK,EAAA,EAAA,EAAA,oBAAA,MAFN,EAEM,EAAA,EAAA,EAAA,YADkB,EAAA,OAAA,SAAA,CAAA,CAAA,IAAA,CAAA,CAAA,iBA0BlB,EAAA,eAAe,EAAA,OAAO,OAAM,CAAA,MACjC,8BAIK,EAAA,EAAA,EAAA,oBAAA,MAFN,EAEM,EAAA,EAAA,EAAA,YADkB,EAAA,OAAA,SAAA,CAAA,CAAA,IAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"combobox-multi-select.cjs","names":[],"sources":["../../../components/combobox_multi_select/combobox_multi_select.vue"],"sourcesContent":["<!-- eslint-disable vue/no-static-inline-styles -->\n<template>\n <dt-combobox-with-popover\n ref=\"comboboxWithPopover\"\n :label=\"label\"\n :show-list=\"showList\"\n :max-height=\"listMaxHeight\"\n :max-width=\"listMaxWidth\"\n :popover-offset=\"popoverOffset\"\n :has-suggestion-list=\"hasSuggestionList\"\n content-width=\"anchor\"\n :append-to=\"appendTo\"\n :dialog-class=\"dialogClass\"\n :transition=\"transition\"\n v-bind=\"extractNonListeners($attrs)\"\n @select=\"onComboboxSelect\"\n @highlight=\"comboboxHighlight\"\n >\n <template #input=\"{ onInput }\">\n <span\n ref=\"inputSlotWrapper\"\n class=\"d-recipe-combobox-multi-select__input-wrapper\"\n @focusin=\"handleInputFocusIn\"\n @focusout=\"handleInputFocusOut\"\n >\n <span\n ref=\"chipsWrapper\"\n :class=\"['d-recipe-combobox-multi-select__chip-wrapper', chipWrapperClass]\"\n >\n <dt-chip\n v-for=\"(item, index) in selectedItems\"\n ref=\"chips\"\n :key=\"`${index}-${item}`\"\n :label-class=\"['d-chip__label']\"\n :class=\"[\n 'd-recipe-combobox-multi-select__chip',\n { 'd-recipe-combobox-multi-select__chip--truncate': !!chipMaxWidth },\n ]\"\n :style=\"{ maxWidth: chipMaxWidth }\"\n :size=\"CHIP_SIZES[size]\"\n :disabled=\"disabled\"\n v-on=\"chipListeners\"\n @keydown.backspace=\"onChipRemove(item)\"\n @close=\"onChipRemove(item)\"\n >\n {{ item }}\n </dt-chip>\n </span>\n\n <dt-input\n ref=\"input\"\n v-model=\"value\"\n class=\"d-recipe-combobox-multi-select__input\"\n :input-class=\"[\n inputClass, {\n 'd-recipe-combobox-multi-select__input--hidden': hideInputText,\n }]\"\n :input-wrapper-class=\"inputWrapperClass\"\n :disabled=\"disabled\"\n :aria-label=\"label\"\n :label=\"labelVisible ? label : ''\"\n :description=\"description\"\n :placeholder=\"inputPlaceHolder\"\n :show-messages=\"showInputMessages\"\n :messages=\"inputMessages\"\n :size=\"size\"\n v-bind=\"inputListeners\"\n @input=\"onInput\"\n />\n\n <dt-validation-messages\n :validation-messages=\"maxSelectedMessage\"\n :show-messages=\"showValidationMessages\"\n />\n </span>\n </template>\n\n <!-- @slot slot for popover header -->\n <template\n v-if=\"hasSlotContent($slots.header)\"\n #header\n >\n <div ref=\"header\">\n <slot name=\"header\" />\n </div>\n </template>\n\n <!-- @slot slot for popover list -->\n <template #list>\n <div\n ref=\"list\"\n class=\"d-recipe-combobox-multi-select__list\"\n @mousedown.prevent\n >\n <slot\n v-if=\"!loading\"\n name=\"list\"\n />\n <div\n v-else\n class=\"d-recipe-combobox-multi-select__list--loading\"\n >\n {{ loadingMessage }}\n </div>\n </div>\n </template>\n\n <!-- @slot slot for popover footer -->\n <template\n v-if=\"hasSlotContent($slots.footer)\"\n #footer\n >\n <div ref=\"footer\">\n <slot name=\"footer\" />\n </div>\n </template>\n </dt-combobox-with-popover>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport DtComboboxWithPopover from '@/components/combobox_with_popover/combobox_with_popover.vue';\nimport DtInput from '@/components/input/input.vue';\nimport DtChip from '@/components/chip/chip.vue';\nimport DtValidationMessages from '@/components/validation_messages/validation_messages.vue';\nimport { validationMessageValidator } from '@/common/validators';\nimport { extractVueListeners, extractNonListeners, hasSlotContent, returnFirstEl } from '@/common/utils';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '@/components/popover/popover_constants';\nimport {\n MULTI_SELECT_SIZES,\n CHIP_SIZES,\n CHIP_TOP_POSITION,\n} from './combobox_multi_select_constants';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtComboboxMultiSelect',\n\n components: {\n DtComboboxWithPopover,\n DtInput,\n DtChip,\n DtValidationMessages,\n },\n\n inheritAttrs: false,\n\n props: {\n /\n String to use for the input label.\n /\n label: {\n type: String,\n required: true,\n },\n\n /\n Determines visibility of input label.\n * @values true, false\n /\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /\n Description for the input\n /\n description: {\n type: String,\n default: '',\n },\n\n /\n Input placeholder\n /\n placeholder: {\n type: String,\n default: 'Select one or start typing',\n },\n\n /\n Input validation messages\n /\n inputMessages: {\n type: Array,\n default: () => [],\n validator: inputMessages => {\n return validationMessageValidator(inputMessages);\n },\n },\n\n /\n Show input validation message\n /\n showInputMessages: {\n type: Boolean,\n default: true,\n },\n\n // @TODO: https://dialpad.atlassian.net/browse/DP-52324\n // type: {\n // type: String,\n // values: ['input', 'select'],\n // default: 'select',\n // },\n\n /\n Determines if the list is loading\n /\n loading: {\n type: Boolean,\n default: false,\n },\n\n /\n The message when the list is loading\n /\n loadingMessage: {\n type: String,\n default: 'loading...',\n },\n\n /\n Determines when to show the list element and also controls the aria-expanded attribute.\n * Leaving this null will have the combobox trigger on input focus by default.\n * If you set this value, the default trigger behavior will be disabled and you can\n * control it as you need.\n /\n showList: {\n type: Boolean,\n default: null,\n },\n\n /\n Determines maximum height for the popover before overflow.\n * Possible units rem\|px\|em\n /\n listMaxHeight: {\n type: String,\n default: '300px',\n },\n\n /\n The selected items\n /\n selectedItems: {\n type: Array,\n default: function () { return []; },\n },\n\n /\n Would be the maximum number of selections you can make. 0 is unlimited\n /\n maxSelected: {\n type: Number,\n default: 0,\n },\n\n /\n Max select message when the max selections is exceeded with the structure:\n * `[{\"message\": string, \"type\": VALIDATION_MESSAGE_TYPES }]`\n /\n maxSelectedMessage: {\n type: Array,\n default: function () { return []; },\n },\n\n /\n Displays the list when the combobox is focused, before the user has typed anything.\n * When this is enabled the list will not close after selection.\n /\n hasSuggestionList: {\n type: Boolean,\n default: true,\n },\n\n /\n Size of the chip, one of `xs`, `sm`, `md`\n /\n size: {\n type: String,\n default: 'md',\n validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t),\n },\n\n /\n Sets the element to which the popover is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * @values 'body', 'parent', HTMLElement,\n /\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) \|\|\n (appendTo instanceof HTMLElement);\n },\n },\n\n /\n Named transition when the content display is toggled.\n * @see DtLazyShow\n /\n transition: {\n type: String,\n default: 'fade',\n },\n\n /\n Determines whether the combobox should collapse to a single when losing focus.\n * @type {boolean}\n /\n collapseOnFocusOut: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines maximum width for the popover before overflow.\n * Possible units rem\|px\|em\n /\n listMaxWidth: {\n type: String,\n default: '',\n },\n\n /\n Amount of reserved space (in px) on the right side of the input\n * before the chips and the input caret jump to the next line.\n * default is 64\n /\n reservedRightSpace: {\n type: Number,\n default: 64,\n },\n\n /\n Determines the maximum width of a single chip. If the text within this chip exceeds the value\n * it will be truncated with ellipses.\n * Possible units rem\|px\|em\n /\n chipMaxWidth: {\n type: String,\n default: '',\n },\n\n /\n Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n /\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n /\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n When true, disables the underlying input.\n /\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /\n Additional class for the popover dialog element.\n /\n dialogClass: {\n type: [String, Object, Array],\n default: '',\n },\n },\n\n emits: [\n /\n Native input event\n \n @event input\n * @type {String }\n /\n 'input',\n\n /\n Event fired when item selected\n \n @event select\n * @type {Number}\n /\n 'select',\n\n /\n Event fired when item removed\n \n @event remove\n * @type {String}\n /\n 'remove',\n\n /\n Event fired when max selected items limit is reached\n \n @event max-selected\n * @type {Object}\n /\n 'max-selected',\n\n /\n Native keydown event fired when a key is pressed in the text input.\n * For the common Escape and Enter cases, listen to `escape` / `enter` instead.\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n Native keydown event fired when a key is pressed while a chip is focused.\n \n @event chip-keydown\n * @type {KeyboardEvent}\n /\n 'chip-keydown',\n\n /\n Fired when Escape is pressed in the text input.\n * Not fired when a chip is focused.\n \n @event escape\n * @type {KeyboardEvent}\n /\n 'escape',\n\n /\n Fired when Enter is pressed in the text input.\n * Not fired when a chip is focused.\n \n @event enter\n * @type {KeyboardEvent}\n /\n 'enter',\n\n /\n Event fired when combobox item is highlighted\n \n @event combobox-highlight\n * @type {Object}\n */\n 'combobox-highlight',\n ],\n\n data () {\n return {\n value: '',\n popoverOffset: [0, 4],\n showValidationMessages: false,\n resizeWindowObserver: null,\n initialInputHeight: null,\n CHIP_SIZES,\n hasSlotContent,\n inputFocused: false,\n hideInputText: false,\n };\n },\n\n computed: {\n inputPlaceHolder () {\n return this.selectedItems?.length > 0 ? '' : this.placeholder;\n },\n\n chipListeners () {\n return {\n keydown: event => {\n if (this.disabled) return;\n this.onChipKeyDown(event);\n this.$emit('chip-keydown', event);\n },\n };\n },\n\n inputListeners () {\n return {\n ...extractVueListeners(this.$attrs),\n onInput: event => {\n this.$emit('input', event);\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n\n onKeydown: event => {\n if (this.disabled) return;\n this.onInputKeyDown(event);\n this.$emit('keydown', event);\n // Use event.key (not event.code) so NumpadEnter normalizes to 'Enter'\n // and consumers don't have to special-case the numpad.\n const key = event.key?.toLowerCase();\n if (key === 'escape') {\n this.$emit('escape', event);\n } else if (key === 'enter') {\n this.$emit('enter', event);\n }\n },\n\n onClick: () => {\n if (this.hasSuggestionList) {\n this.showComboboxList();\n }\n },\n };\n },\n\n chipWrapperClass () {\n return {\n [`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]: !this.inputFocused && this.collapseOnFocusOut,\n };\n },\n },\n\n watch: {\n selectedItems: {\n deep: true,\n handler: async function () {\n await this.initSelectedItems();\n },\n },\n\n chipMaxWidth: {\n async handler () {\n await this.initSelectedItems();\n },\n },\n\n async label () {\n await this.$nextTick();\n // Adjust the chips position if label changed\n this.setChipsTopPosition();\n },\n\n async description () {\n await this.$nextTick();\n // Adjust the chips position if description changed\n this.setChipsTopPosition();\n },\n\n size: {\n async handler () {\n await this.$nextTick();\n const input = this.getInput();\n this.revertInputPadding(input);\n this.setInitialInputHeight();\n this.setInputPadding();\n this.setChipsTopPosition();\n },\n },\n },\n\n async mounted () {\n this.setInitialInputHeight();\n // Recalculate chip position and input padding when resizing window\n this.resizeWindowObserver = new ResizeObserver(async () => {\n this.setChipsTopPosition();\n this.setInputPadding();\n });\n this.resizeWindowObserver.observe(document.body);\n\n await this.initSelectedItems();\n },\n\n beforeUnmount () {\n this.resizeWindowObserver?.unobserve(document.body);\n },\n\n methods: {\n extractNonListeners,\n comboboxHighlight (highlightIndex) {\n this.$emit('combobox-highlight', highlightIndex);\n },\n\n async initSelectedItems () {\n await this.$nextTick();\n this.setInputPadding();\n this.setChipsTopPosition();\n this.setInputMinWidth();\n this.checkMaxSelected();\n },\n\n onChipRemove (item) {\n this.$emit('remove', item);\n this.$refs.input?.focus();\n },\n\n onComboboxSelect (i) {\n if (this.loading) return;\n this.value = '';\n this.$emit('select', i);\n },\n\n showComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.showComboboxList();\n },\n\n closeComboboxList () {\n if (this.showList != null) { return; }\n this.$refs.comboboxWithPopover?.closeComboboxList();\n },\n\n getChips () {\n if (!this.selectedItems.length \|\| !this.$refs.chips) return null;\n\n // Use the order from selectedItems to not rely on DOM order which may be stale.\n // Track matched indices to handle duplicate item names correctly.\n const matched = new Set();\n const chips = this.selectedItems.map(item => {\n return this.$refs.chips.find((chip, index) => {\n if (matched.has(index)) return false;\n const chipLabel = returnFirstEl(chip.$el)?.querySelector('.d-chip__label')?.textContent?.trim();\n if (chipLabel === item) {\n matched.add(index);\n return true;\n }\n return false;\n });\n });\n return chips.filter(Boolean).map(chip => returnFirstEl(chip.$el));\n },\n\n getChipButtons () {\n const chips = this.getChips();\n return chips && chips.map(chip => returnFirstEl(chip).querySelector('button'));\n },\n\n getLastChipButton () {\n const chipButtons = this.getChipButtons();\n return chipButtons && chipButtons[chipButtons.length - 1];\n },\n\n getLastChip () {\n const chips = this.getChips();\n return chips && chips[chips.length - 1];\n },\n\n getFirstChip () {\n const chips = this.getChips();\n return chips && chips[0];\n },\n\n getInput () {\n return this.$refs.input?.$refs.input;\n },\n\n onChipKeyDown (event) {\n const key = event.code?.toLowerCase();\n if (key === 'arrowleft') {\n // Move to the previous chip\n this.navigateBetweenChips(event.target, true);\n } else if (key === 'arrowright') {\n if (event.target.id === this.getLastChipButton().id) {\n // Move to the input if it's the last chip\n this.moveFromChipToInput();\n } else {\n // Move to the next chip\n this.navigateBetweenChips(event.target, false);\n }\n }\n },\n\n onInputKeyDown (event) {\n const key = event.key?.toLowerCase();\n // If the cursor is at the start of the text,\n // press 'backspace' or 'left' focuses the last chip\n if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {\n // if there is selected text, do not focus the last chip\n if (event.target.selectionEnd !== event.target.selectionStart) {\n return;\n }\n if (key === 'backspace' \|\| key === 'arrowleft') {\n this.moveFromInputToChip();\n }\n }\n },\n\n moveFromInputToChip () {\n this.getLastChipButton().focus();\n this.$refs.input?.blur();\n this.closeComboboxList();\n },\n\n moveFromChipToInput () {\n this.getLastChipButton().blur();\n this.$refs.input?.focus();\n this.showComboboxList();\n },\n\n navigateBetweenChips (target, toLeft) {\n const from = this.getChipButtons().indexOf(target);\n const to = toLeft ? from - 1 : from + 1;\n if (to < 0 \|\| to >= this.$refs.chips?.length) {\n return;\n }\n this.getChipButtons()[from].blur();\n this.getChipButtons()[to].focus();\n this.closeComboboxList();\n },\n\n setChipsTopPosition () {\n // To place the chips in the input box\n // The chip \"top\" position should be the same line as the input box\n const input = this.getInput();\n if (!input) return;\n const inputSlotWrapper = this.$refs.inputSlotWrapper;\n const top = input.getBoundingClientRect().top -\n inputSlotWrapper.getBoundingClientRect().top;\n const chipsWrapper = this.$refs.chipsWrapper;\n chipsWrapper.style.top = (top - CHIP_TOP_POSITION[this.size]) + 'px';\n },\n\n setInputPadding () {\n const lastChip = this.getLastChip();\n const input = this.getInput();\n if (!input) return;\n this.revertInputPadding(input);\n this.popoverOffset = [0, 4];\n if (!lastChip) return;\n // Avoid adding extra padding when the input is not focused if collapseOnFocusOut is true\n // This ensures the input returns to its original state when resizing\n if (this.collapseOnFocusOut && !this.inputFocused) return;\n\n // Get the position of the last chip\n // The input cursor should be the same \"top\" as that chip and next besides it\n const left = lastChip.offsetLeft + this.getFullWidth(lastChip);\n const spaceLeft = input.getBoundingClientRect().width - left;\n const firstChip = this.getFirstChip();\n const isWrapped = firstChip && lastChip.offsetTop > firstChip.offsetTop;\n\n if (spaceLeft > this.reservedRightSpace) {\n input.style.paddingLeft = left + 'px';\n } else {\n input.style.paddingLeft = '4px';\n }\n\n const paddingTop = this.getInputPaddingTop(lastChip, spaceLeft > this.reservedRightSpace, isWrapped);\n if (paddingTop != null) input.style.paddingTop = `${paddingTop}px`;\n },\n\n getInputPaddingTop (lastChip, hasSpace, isWrapped) {\n // Chip fits beside the cursor on its row; CSS handles vertical centering.\n if (hasSpace && !isWrapped) return null;\n // Chip wrapped onto a new row with space remaining; align cursor to it.\n if (hasSpace) return lastChip.offsetTop + 2;\n // No space on the chip's row — predict next-row offsetTop so paddingTop\n // stays stable when a chip lands there.\n const chipMarginTop = parseFloat(getComputedStyle(lastChip).marginTop) \|\| 0;\n const lastChipHeight = lastChip.getBoundingClientRect().height;\n return lastChip.offsetTop + lastChipHeight + chipMarginTop + 2;\n },\n\n revertInputPadding (input) {\n input.style.paddingLeft = '';\n input.style.paddingTop = '';\n input.style.paddingBottom = '';\n },\n\n getFullWidth (el) {\n const styles = window.getComputedStyle(el);\n return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);\n },\n\n setInputMinWidth () {\n // Ensure the width of the input is \"slightly bigger\" than the width of a single chip\n const firstChip = this.getFirstChip();\n const input = this.getInput();\n if (!input) return;\n if (firstChip) {\n // Add 4px buffer for typing room\n input.style.minWidth = (this.getFullWidth(firstChip) + 4) + 'px';\n } else {\n input.style.minWidth = '';\n }\n },\n\n checkMaxSelected () {\n if (this.maxSelected === 0) return;\n if (this.selectedItems.length > this.maxSelected) {\n this.showValidationMessages = true;\n this.$emit('max-selected');\n } else {\n this.showValidationMessages = false;\n }\n },\n\n setInitialInputHeight () {\n const input = this.getInput();\n if (!input) return;\n input.style.minHeight = '';\n input.style.height = '';\n this.initialInputHeight = input.getBoundingClientRect().height;\n // xs renders correctly without a min-height floor; other sizes need it to grow when chips wrap.\n if (this.size !== 'xs') {\n input.style.minHeight = `${this.initialInputHeight}px`;\n input.style.height = 'auto';\n }\n },\n\n async handleInputFocusIn () {\n this.inputFocused = true;\n if (this.collapseOnFocusOut) {\n this.hideInputText = false;\n await this.$nextTick();\n this.setInputPadding();\n }\n },\n\n async handleInputFocusOut () {\n this.inputFocused = false;\n if (this.collapseOnFocusOut) {\n this.hideInputText = true;\n const input = this.getInput();\n if (!input) return;\n // Hide the input text when is not on first line\n if (!input.style.paddingTop) {\n return;\n }\n this.revertInputPadding(input);\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}

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

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

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

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

package/dist/lib/modal/modal.cjs CHANGED Viewed

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

package/dist/lib/modal/modal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.cjs","names":[],"sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n <teleport\n :disabled=\"!appendTo\"\n :to=\"appendTo\"\n >\n <dt-lazy-show\n ref=\"modalRoot\"\n transition=\"d-zoom\"\n :show=\"show\"\n :class=\"[\n 'd-modal',\n MODAL_KIND_MODIFIERS[kind],\n MODAL_SIZE_MODIFIERS[size],\n modalClass,\n ]\"\n data-qa=\"dt-modal\"\n :aria-hidden=\"open\"\n v-on=\"modalListeners\"\n >\n <div\n v-if=\"show && (hasSlotContent($slots.banner) \|\| bannerTitle)\"\n data-qa=\"dt-modal-banner\"\n :class=\"[\n 'd-modal__banner',\n bannerClass,\n bannerKindClass,\n ]\"\n >\n <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n <slot name=\"banner\">\n {{ bannerTitle }}\n </slot>\n </div>\n <transition\n appear\n name=\"d-modal__dialog\"\n >\n <div\n v-show=\"show\"\n :class=\"[\n 'd-modal__dialog',\n { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n dialogClass,\n ]\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-describedby=\"describedById\"\n :aria-labelledby=\"labelledById\"\n >\n <div\n v-if=\"hasSlotContent($slots.header)\"\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n <slot name=\"header\" />\n </div>\n <h2\n v-else\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n {{ title }}\n </h2>\n <div\n v-if=\"hasSlotContent($slots.default)\"\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n <slot />\n </div>\n <p\n v-else\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n {{ copy }}\n </p>\n <footer\n v-if=\"hasFooterSlot\"\n class=\"d-modal__footer\"\n >\n <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n <slot name=\"footer\" />\n </footer>\n <sr-only-close-button\n v-if=\"hideClose\"\n @close=\"close\"\n />\n <dt-button\n v-else\n class=\"d-modal__close\"\n data-qa=\"dt-modal-close-button\"\n size=\"md\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\n @click=\"close\"\n >\n <template #icon=\"{ iconSize }\">\n <dt-icon-close\n :size=\"iconSize\"\n />\n </template>\n </dt-button>\n </div>\n </transition>\n </dt-lazy-show>\n </teleport>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n MODAL_BANNER_KINDS,\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\n\n/\n Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtModal',\n\n components: {\n DtLazyShow,\n DtButton,\n DtIconClose,\n SrOnlyCloseButton,\n },\n\n mixins: [Modal],\n\n props: {\n /\n Body text to display as the modal's main content.\n /\n copy: {\n type: String,\n default: '',\n },\n\n /\n Id to use for the dialog's aria-describedby.\n * Recommended only if the dialog content itself isn't enough to give full context,\n * as screen readers should recite the dialog contents by default before any aria-description.\n /\n describedById: {\n type: String,\n default: '',\n },\n\n /\n Id to use for the dialog's aria-labelledby.\n /\n labelledById: {\n type: String,\n default: function () { return getUniqueString(); },\n },\n\n /\n Whether the modal should be shown.\n * Parent component can sync on this value to control the modal's visibility.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n Title text to display in the modal header.\n /\n title: {\n type: String,\n default: '',\n },\n\n /\n Title text to display in the modal banner.\n /\n bannerTitle: {\n type: String,\n default: '',\n },\n\n /\n The theme of the modal. kind - default or danger,\n * @values default, danger\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n },\n\n /\n The size of the modal. size - default or full,\n * @values default, full\n /\n size: {\n type: String,\n default: 'default',\n validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Additional class name for the root modal 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 modalClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the dialog element within the modal.\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 dialogClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the content element within the modal.\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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Sets the color of the banner.\n * @values base, error, info, success, warning\n /\n bannerKind: {\n type: String,\n default: 'warning',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /\n Additional class name for the banner element within the modal.\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 bannerClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Hides the close button on the modal\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the modal will close when you click outside of the dialog on the overlay.\n * @values true, false\n /\n closeOnClick: {\n type: Boolean,\n default: true,\n },\n\n /\n Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n * @values true, false\n /\n fixedHeaderFooter: {\n type: Boolean,\n default: true,\n },\n\n /\n The element that is focused when the modal is opened. This can be an\n * HTMLElement within the modal, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n /\n initialFocusElement: {\n type: [String, HTMLElement],\n default: 'first',\n validator: initialFocusElement => {\n return initialFocusElement === 'first' \|\|\n (initialFocusElement instanceof HTMLElement) \|\|\n initialFocusElement.startsWith('#');\n },\n },\n\n /\n A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n /\n appendTo: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Native button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Native keydown event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n \n @event update:show\n * @type {Boolean}\n */\n 'update:show',\n ],\n\n data () {\n return {\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n MODAL_BANNER_KINDS,\n EVENT_KEYNAMES,\n hasSlotContent,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n modalListeners () {\n return {\n click: event => {\n // Handle backdrop clicks for closing modal\n if (this.closeOnClick && event.target === event.currentTarget) {\n this.close();\n } else if (this.show && event.target !== event.currentTarget) {\n // Ensure focus stays within modal when clicking inside it\n this.handleModalClick(event);\n }\n\n this.$emit('click', event);\n },\n\n keydown: event => {\n switch (event.code) {\n case EVENT_KEYNAMES.esc:\n case EVENT_KEYNAMES.escape:\n this.close();\n break;\n case EVENT_KEYNAMES.tab:\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n\n 'after-enter': async () => {\n this.$emit('update:show', true);\n await this.setFocusAfterTransition();\n },\n\n focusin: event => {\n // Ensure focus stays within modal\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (this.show && modalEl && !modalEl.contains(event.target)) {\n event.preventDefault();\n this.focusFirstElement(modalEl);\n }\n },\n };\n },\n\n open () {\n return `${!this.show}`;\n },\n\n hasFooterSlot () {\n return !!this.$slots.footer;\n },\n\n bannerKindClass () {\n return MODAL_BANNER_KINDS[this.bannerKind];\n },\n\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n watch: {\n show: {\n handler (isShowing) {\n if (isShowing) {\n // Set a reference to the previously-active element, to which we'll return focus on modal close.\n this.previousActiveElement = document.activeElement;\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n disableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n } else {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n enableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n this.previousActiveElement?.focus();\n this.previousActiveElement = null;\n }\n },\n },\n },\n\n methods: {\n close () {\n this.$emit('update:show', false);\n },\n\n async setFocusAfterTransition () {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (this.initialFocusElement === 'first') {\n await this.focusFirstElement(modalEl);\n } else if (this.initialFocusElement.startsWith('#')) {\n await this.focusElementById(this.initialFocusElement);\n } else if (this.initialFocusElement instanceof HTMLElement) {\n this.initialFocusElement.focus();\n }\n },\n\n trapFocus (e) {\n if (this.show) {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n this.focusTrappedTabPress(e, modalEl);\n }\n },\n\n handleModalClick (event) {\n // Ensure focus stays within modal when clicking inside it\n const clickedElement = event.target;\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n const focusableElements = this._getFocusableElements(modalEl);\n\n // If the clicked element is not focusable, ensure focus stays in modal\n if (focusableElements.length && !focusableElements.includes(clickedElement)) {\n // Check if current active element is still within the modal\n if (!focusableElements.includes(document.activeElement)) {\n this.focusFirstElement(modalEl);\n }\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"modal.cjs","names":[],"sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n <teleport\n :disabled=\"!appendTo\"\n :to=\"appendTo\"\n >\n <dt-lazy-show\n ref=\"modalRoot\"\n transition=\"d-zoom\"\n :show=\"show\"\n :class=\"[\n 'd-modal',\n MODAL_KIND_MODIFIERS[kind],\n MODAL_SIZE_MODIFIERS[size],\n modalClass,\n ]\"\n data-qa=\"dt-modal\"\n :aria-hidden=\"open\"\n v-on=\"modalListeners\"\n >\n <div\n v-if=\"show && (hasSlotContent($slots.banner) \|\| bannerTitle)\"\n data-qa=\"dt-modal-banner\"\n :class=\"[\n 'd-modal__banner',\n bannerClass,\n bannerKindClass,\n ]\"\n >\n <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n <slot name=\"banner\">\n {{ bannerTitle }}\n </slot>\n </div>\n <transition\n appear\n name=\"d-modal__dialog\"\n >\n <div\n v-show=\"show\"\n :class=\"[\n 'd-modal__dialog',\n { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n dialogClass,\n ]\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-describedby=\"describedById\"\n :aria-labelledby=\"labelledById\"\n >\n <div\n v-if=\"hasSlotContent($slots.header)\"\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n <slot name=\"header\" />\n </div>\n <h2\n v-else\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n {{ title }}\n </h2>\n <div\n v-if=\"hasSlotContent($slots.default)\"\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n <slot />\n </div>\n <p\n v-else\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n {{ copy }}\n </p>\n <footer\n v-if=\"hasFooterSlot\"\n class=\"d-modal__footer\"\n >\n <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n <slot name=\"footer\" />\n </footer>\n <sr-only-close-button\n v-if=\"hideClose\"\n @close=\"close\"\n />\n <dt-button\n v-else\n class=\"d-modal__close\"\n data-qa=\"dt-modal-close-button\"\n size=\"md\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\n @click=\"close\"\n >\n <template #icon=\"{ iconSize }\">\n <dt-icon-close\n :size=\"iconSize\"\n />\n </template>\n </dt-button>\n </div>\n </transition>\n </dt-lazy-show>\n </teleport>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n MODAL_BANNER_KINDS,\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\n\n/\n Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtModal',\n\n components: {\n DtLazyShow,\n DtButton,\n DtIconClose,\n SrOnlyCloseButton,\n },\n\n mixins: [Modal],\n\n props: {\n /\n Body text to display as the modal's main content.\n /\n copy: {\n type: String,\n default: '',\n },\n\n /\n Id to use for the dialog's aria-describedby.\n * Recommended only if the dialog content itself isn't enough to give full context,\n * as screen readers should recite the dialog contents by default before any aria-description.\n /\n describedById: {\n type: String,\n default: '',\n },\n\n /\n Id to use for the dialog's aria-labelledby.\n /\n labelledById: {\n type: String,\n default: function () { return getUniqueString(); },\n },\n\n /\n Whether the modal should be shown.\n * Parent component can sync on this value to control the modal's visibility.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n Title text to display in the modal header.\n /\n title: {\n type: String,\n default: '',\n },\n\n /\n Title text to display in the modal banner.\n /\n bannerTitle: {\n type: String,\n default: '',\n },\n\n /\n The theme of the modal. kind - default or danger,\n * @values default, danger\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n },\n\n /\n The size of the modal. size - default or full,\n * @values default, full\n /\n size: {\n type: String,\n default: 'default',\n validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Additional class name for the root modal 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 modalClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the dialog element within the modal.\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 dialogClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the content element within the modal.\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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Sets the color of the banner.\n * @values base, error, info, success, warning\n /\n bannerKind: {\n type: String,\n default: 'warning',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /\n Additional class name for the banner element within the modal.\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 bannerClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Hides the close button on the modal\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the modal will close when you click outside of the dialog on the overlay.\n * @values true, false\n /\n closeOnClick: {\n type: Boolean,\n default: true,\n },\n\n /\n Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n * @values true, false\n /\n fixedHeaderFooter: {\n type: Boolean,\n default: true,\n },\n\n /\n The element that is focused when the modal is opened. This can be an\n * HTMLElement within the modal, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n /\n initialFocusElement: {\n type: [String, HTMLElement],\n default: 'first',\n validator: initialFocusElement => {\n return initialFocusElement === 'first' \|\|\n (initialFocusElement instanceof HTMLElement) \|\|\n initialFocusElement.startsWith('#');\n },\n },\n\n /\n A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n /\n appendTo: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Native button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Native keydown event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n \n @event update:show\n * @type {Boolean}\n */\n 'update:show',\n ],\n\n data () {\n return {\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n MODAL_BANNER_KINDS,\n EVENT_KEYNAMES,\n hasSlotContent,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n modalListeners () {\n return {\n click: event => {\n // Handle backdrop clicks for closing modal\n if (this.closeOnClick && event.target === event.currentTarget) {\n this.close();\n }\n\n this.$emit('click', event);\n },\n\n keydown: event => {\n switch (event.code) {\n case EVENT_KEYNAMES.esc:\n case EVENT_KEYNAMES.escape:\n this.close();\n break;\n case EVENT_KEYNAMES.tab:\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n\n 'after-enter': async () => {\n this.$emit('update:show', true);\n await this.setFocusAfterTransition();\n },\n\n focusin: event => {\n // Ensure focus stays within modal\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (this.show && modalEl && !modalEl.contains(event.target)) {\n event.preventDefault();\n this.focusFirstElement(modalEl);\n }\n },\n };\n },\n\n open () {\n return `${!this.show}`;\n },\n\n hasFooterSlot () {\n return !!this.$slots.footer;\n },\n\n bannerKindClass () {\n return MODAL_BANNER_KINDS[this.bannerKind];\n },\n\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n watch: {\n show: {\n handler (isShowing) {\n if (isShowing) {\n // Set a reference to the previously-active element, to which we'll return focus on modal close.\n this.previousActiveElement = document.activeElement;\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n disableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n document.addEventListener('keydown', this._trapFocusGlobalBound);\n } else {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n enableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n this.previousActiveElement?.focus();\n this.previousActiveElement = null;\n document.removeEventListener('keydown', this._trapFocusGlobalBound);\n }\n },\n },\n },\n\n created () {\n this._trapFocusGlobalBound = (e) => this._trapFocusGlobal(e);\n },\n\n mounted () {\n if (this.show) {\n document.addEventListener('keydown', this._trapFocusGlobalBound);\n }\n },\n\n beforeUnmount () {\n document.removeEventListener('keydown', this._trapFocusGlobalBound);\n },\n\n methods: {\n close () {\n this.$emit('update:show', false);\n },\n\n async setFocusAfterTransition () {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (this.initialFocusElement === 'first') {\n await this.focusFirstElement(modalEl);\n } else if (this.initialFocusElement.startsWith('#')) {\n await this.focusElementById(this.initialFocusElement);\n } else if (this.initialFocusElement instanceof HTMLElement) {\n this.initialFocusElement.focus();\n }\n },\n\n trapFocus (e) {\n if (this.show) {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n this.focusTrappedTabPress(e, modalEl);\n }\n },\n\n _trapFocusGlobal (e) {\n if (!this.show \|\| e.code !== EVENT_KEYNAMES.tab) return;\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (modalEl && !modalEl.contains(document.activeElement)) {\n e.preventDefault();\n this.focusFirstElement(modalEl);\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/modal/modal.js CHANGED Viewed

@@ -138,7 +138,7 @@ var F = {
 		modalListeners() {
 			return {
 				click: (e) => {
-					this.closeOnClick && e.target === e.currentTarget ? this.close() : this.show && e.target !== e.currentTarget && this.handleModalClick(e), this.$emit("click", e);
+					this.closeOnClick && e.target === e.currentTarget && this.close(), this.$emit("click", e);
 				},
 				keydown: (t) => {
 					switch (t.code) {
@@ -175,8 +175,17 @@ var F = {
 		}
 	},
 	watch: { show: { handler(e) {
-		e ? (this.previousActiveElement = document.activeElement, t(a(this.$refs.modalRoot?.$el || this.$el).getRootNode().host)) : (n(a(this.$refs.modalRoot?.$el || this.$el).getRootNode().host), this.previousActiveElement?.focus(), this.previousActiveElement = null);
+		e ? (this.previousActiveElement = document.activeElement, t(a(this.$refs.modalRoot?.$el || this.$el).getRootNode().host), document.addEventListener("keydown", this._trapFocusGlobalBound)) : (n(a(this.$refs.modalRoot?.$el || this.$el).getRootNode().host), this.previousActiveElement?.focus(), this.previousActiveElement = null, document.removeEventListener("keydown", this._trapFocusGlobalBound));
 	} } },
+	created() {
+		this._trapFocusGlobalBound = (e) => this._trapFocusGlobal(e);
+	},
+	mounted() {
+		this.show && document.addEventListener("keydown", this._trapFocusGlobalBound);
+	},
+	beforeUnmount() {
+		document.removeEventListener("keydown", this._trapFocusGlobalBound);
+	},
 	methods: {
 		close() {
 			this.$emit("update:show", !1);
@@ -191,9 +200,10 @@ var F = {
 				this.focusTrappedTabPress(e, t);
 			}
 		},
-		handleModalClick(e) {
-			let t = e.target, n = this.$refs.modalRoot?.$el || this.$el, r = this._getFocusableElements(n);
-			r.length && !r.includes(t) && (r.includes(document.activeElement) || this.focusFirstElement(n));
+		_trapFocusGlobal(t) {
+			if (!this.show || t.code !== e.tab) return;
+			let n = this.$refs.modalRoot?.$el || this.$el;
+			n && !n.contains(document.activeElement) && (t.preventDefault(), this.focusFirstElement(n));
 		}
 	}
 }, I = ["aria-describedby", "aria-labelledby"], L = ["id"], R = ["id"], z = {

package/dist/lib/modal/modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.js","names":[],"sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n <teleport\n :disabled=\"!appendTo\"\n :to=\"appendTo\"\n >\n <dt-lazy-show\n ref=\"modalRoot\"\n transition=\"d-zoom\"\n :show=\"show\"\n :class=\"[\n 'd-modal',\n MODAL_KIND_MODIFIERS[kind],\n MODAL_SIZE_MODIFIERS[size],\n modalClass,\n ]\"\n data-qa=\"dt-modal\"\n :aria-hidden=\"open\"\n v-on=\"modalListeners\"\n >\n <div\n v-if=\"show && (hasSlotContent($slots.banner) \|\| bannerTitle)\"\n data-qa=\"dt-modal-banner\"\n :class=\"[\n 'd-modal__banner',\n bannerClass,\n bannerKindClass,\n ]\"\n >\n <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n <slot name=\"banner\">\n {{ bannerTitle }}\n </slot>\n </div>\n <transition\n appear\n name=\"d-modal__dialog\"\n >\n <div\n v-show=\"show\"\n :class=\"[\n 'd-modal__dialog',\n { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n dialogClass,\n ]\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-describedby=\"describedById\"\n :aria-labelledby=\"labelledById\"\n >\n <div\n v-if=\"hasSlotContent($slots.header)\"\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n <slot name=\"header\" />\n </div>\n <h2\n v-else\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n {{ title }}\n </h2>\n <div\n v-if=\"hasSlotContent($slots.default)\"\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n <slot />\n </div>\n <p\n v-else\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n {{ copy }}\n </p>\n <footer\n v-if=\"hasFooterSlot\"\n class=\"d-modal__footer\"\n >\n <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n <slot name=\"footer\" />\n </footer>\n <sr-only-close-button\n v-if=\"hideClose\"\n @close=\"close\"\n />\n <dt-button\n v-else\n class=\"d-modal__close\"\n data-qa=\"dt-modal-close-button\"\n size=\"md\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\n @click=\"close\"\n >\n <template #icon=\"{ iconSize }\">\n <dt-icon-close\n :size=\"iconSize\"\n />\n </template>\n </dt-button>\n </div>\n </transition>\n </dt-lazy-show>\n </teleport>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n MODAL_BANNER_KINDS,\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\n\n/\n Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtModal',\n\n components: {\n DtLazyShow,\n DtButton,\n DtIconClose,\n SrOnlyCloseButton,\n },\n\n mixins: [Modal],\n\n props: {\n /\n Body text to display as the modal's main content.\n /\n copy: {\n type: String,\n default: '',\n },\n\n /\n Id to use for the dialog's aria-describedby.\n * Recommended only if the dialog content itself isn't enough to give full context,\n * as screen readers should recite the dialog contents by default before any aria-description.\n /\n describedById: {\n type: String,\n default: '',\n },\n\n /\n Id to use for the dialog's aria-labelledby.\n /\n labelledById: {\n type: String,\n default: function () { return getUniqueString(); },\n },\n\n /\n Whether the modal should be shown.\n * Parent component can sync on this value to control the modal's visibility.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n Title text to display in the modal header.\n /\n title: {\n type: String,\n default: '',\n },\n\n /\n Title text to display in the modal banner.\n /\n bannerTitle: {\n type: String,\n default: '',\n },\n\n /\n The theme of the modal. kind - default or danger,\n * @values default, danger\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n },\n\n /\n The size of the modal. size - default or full,\n * @values default, full\n /\n size: {\n type: String,\n default: 'default',\n validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Additional class name for the root modal 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 modalClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the dialog element within the modal.\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 dialogClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the content element within the modal.\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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Sets the color of the banner.\n * @values base, error, info, success, warning\n /\n bannerKind: {\n type: String,\n default: 'warning',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /\n Additional class name for the banner element within the modal.\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 bannerClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Hides the close button on the modal\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the modal will close when you click outside of the dialog on the overlay.\n * @values true, false\n /\n closeOnClick: {\n type: Boolean,\n default: true,\n },\n\n /\n Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n * @values true, false\n /\n fixedHeaderFooter: {\n type: Boolean,\n default: true,\n },\n\n /\n The element that is focused when the modal is opened. This can be an\n * HTMLElement within the modal, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n /\n initialFocusElement: {\n type: [String, HTMLElement],\n default: 'first',\n validator: initialFocusElement => {\n return initialFocusElement === 'first' \|\|\n (initialFocusElement instanceof HTMLElement) \|\|\n initialFocusElement.startsWith('#');\n },\n },\n\n /\n A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n /\n appendTo: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Native button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Native keydown event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n \n @event update:show\n * @type {Boolean}\n */\n 'update:show',\n ],\n\n data () {\n return {\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n MODAL_BANNER_KINDS,\n EVENT_KEYNAMES,\n hasSlotContent,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n modalListeners () {\n return {\n click: event => {\n // Handle backdrop clicks for closing modal\n if (this.closeOnClick && event.target === event.currentTarget) {\n this.close();\n } else if (this.show && event.target !== event.currentTarget) {\n // Ensure focus stays within modal when clicking inside it\n this.handleModalClick(event);\n }\n\n this.$emit('click', event);\n },\n\n keydown: event => {\n switch (event.code) {\n case EVENT_KEYNAMES.esc:\n case EVENT_KEYNAMES.escape:\n this.close();\n break;\n case EVENT_KEYNAMES.tab:\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n\n 'after-enter': async () => {\n this.$emit('update:show', true);\n await this.setFocusAfterTransition();\n },\n\n focusin: event => {\n // Ensure focus stays within modal\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (this.show && modalEl && !modalEl.contains(event.target)) {\n event.preventDefault();\n this.focusFirstElement(modalEl);\n }\n },\n };\n },\n\n open () {\n return `${!this.show}`;\n },\n\n hasFooterSlot () {\n return !!this.$slots.footer;\n },\n\n bannerKindClass () {\n return MODAL_BANNER_KINDS[this.bannerKind];\n },\n\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n watch: {\n show: {\n handler (isShowing) {\n if (isShowing) {\n // Set a reference to the previously-active element, to which we'll return focus on modal close.\n this.previousActiveElement = document.activeElement;\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n disableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n } else {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n enableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n this.previousActiveElement?.focus();\n this.previousActiveElement = null;\n }\n },\n },\n },\n\n methods: {\n close () {\n this.$emit('update:show', false);\n },\n\n async setFocusAfterTransition () {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (this.initialFocusElement === 'first') {\n await this.focusFirstElement(modalEl);\n } else if (this.initialFocusElement.startsWith('#')) {\n await this.focusElementById(this.initialFocusElement);\n } else if (this.initialFocusElement instanceof HTMLElement) {\n this.initialFocusElement.focus();\n }\n },\n\n trapFocus (e) {\n if (this.show) {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n this.focusTrappedTabPress(e, modalEl);\n }\n },\n\n handleModalClick (event) {\n // Ensure focus stays within modal when clicking inside it\n const clickedElement = event.target;\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n const focusableElements = this._getFocusableElements(modalEl);\n\n // If the clicked element is not focusable, ensure focus stays in modal\n if (focusableElements.length && !focusableElements.includes(clickedElement)) {\n // Check if current active element is still within the modal\n if (!focusableElements.includes(document.activeElement)) {\n this.focusFirstElement(modalEl);\n }\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"modal.js","names":[],"sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n <teleport\n :disabled=\"!appendTo\"\n :to=\"appendTo\"\n >\n <dt-lazy-show\n ref=\"modalRoot\"\n transition=\"d-zoom\"\n :show=\"show\"\n :class=\"[\n 'd-modal',\n MODAL_KIND_MODIFIERS[kind],\n MODAL_SIZE_MODIFIERS[size],\n modalClass,\n ]\"\n data-qa=\"dt-modal\"\n :aria-hidden=\"open\"\n v-on=\"modalListeners\"\n >\n <div\n v-if=\"show && (hasSlotContent($slots.banner) \|\| bannerTitle)\"\n data-qa=\"dt-modal-banner\"\n :class=\"[\n 'd-modal__banner',\n bannerClass,\n bannerKindClass,\n ]\"\n >\n <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n <slot name=\"banner\">\n {{ bannerTitle }}\n </slot>\n </div>\n <transition\n appear\n name=\"d-modal__dialog\"\n >\n <div\n v-show=\"show\"\n :class=\"[\n 'd-modal__dialog',\n { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n dialogClass,\n ]\"\n role=\"dialog\"\n aria-modal=\"true\"\n :aria-describedby=\"describedById\"\n :aria-labelledby=\"labelledById\"\n >\n <div\n v-if=\"hasSlotContent($slots.header)\"\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n <slot name=\"header\" />\n </div>\n <h2\n v-else\n :id=\"labelledById\"\n class=\"d-modal__header\"\n data-qa=\"dt-modal-title\"\n >\n {{ title }}\n </h2>\n <div\n v-if=\"hasSlotContent($slots.default)\"\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n <slot />\n </div>\n <p\n v-else\n :class=\"[\n 'd-modal__content',\n contentClass,\n ]\"\n data-qa=\"dt-modal-copy\"\n >\n {{ copy }}\n </p>\n <footer\n v-if=\"hasFooterSlot\"\n class=\"d-modal__footer\"\n >\n <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n <slot name=\"footer\" />\n </footer>\n <sr-only-close-button\n v-if=\"hideClose\"\n @close=\"close\"\n />\n <dt-button\n v-else\n class=\"d-modal__close\"\n data-qa=\"dt-modal-close-button\"\n size=\"md\"\n kind=\"muted\"\n importance=\"clear\"\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\n @click=\"close\"\n >\n <template #icon=\"{ iconSize }\">\n <dt-icon-close\n :size=\"iconSize\"\n />\n </template>\n </dt-button>\n </div>\n </transition>\n </dt-lazy-show>\n </teleport>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n MODAL_BANNER_KINDS,\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { returnFirstEl, getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\n\n/\n Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtModal',\n\n components: {\n DtLazyShow,\n DtButton,\n DtIconClose,\n SrOnlyCloseButton,\n },\n\n mixins: [Modal],\n\n props: {\n /\n Body text to display as the modal's main content.\n /\n copy: {\n type: String,\n default: '',\n },\n\n /\n Id to use for the dialog's aria-describedby.\n * Recommended only if the dialog content itself isn't enough to give full context,\n * as screen readers should recite the dialog contents by default before any aria-description.\n /\n describedById: {\n type: String,\n default: '',\n },\n\n /\n Id to use for the dialog's aria-labelledby.\n /\n labelledById: {\n type: String,\n default: function () { return getUniqueString(); },\n },\n\n /\n Whether the modal should be shown.\n * Parent component can sync on this value to control the modal's visibility.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n Title text to display in the modal header.\n /\n title: {\n type: String,\n default: '',\n },\n\n /\n Title text to display in the modal banner.\n /\n bannerTitle: {\n type: String,\n default: '',\n },\n\n /\n The theme of the modal. kind - default or danger,\n * @values default, danger\n /\n kind: {\n type: String,\n default: 'default',\n validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n },\n\n /\n The size of the modal. size - default or full,\n * @values default, full\n /\n size: {\n type: String,\n default: 'default',\n validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Additional class name for the root modal 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 modalClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the dialog element within the modal.\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 dialogClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Additional class name for the content element within the modal.\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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Sets the color of the banner.\n * @values base, error, info, success, warning\n /\n bannerKind: {\n type: String,\n default: 'warning',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /\n Additional class name for the banner element within the modal.\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 bannerClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n Hides the close button on the modal\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the modal will close when you click outside of the dialog on the overlay.\n * @values true, false\n /\n closeOnClick: {\n type: Boolean,\n default: true,\n },\n\n /\n Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n * @values true, false\n /\n fixedHeaderFooter: {\n type: Boolean,\n default: true,\n },\n\n /\n The element that is focused when the modal is opened. This can be an\n * HTMLElement within the modal, a string starting with '#' which will\n * find the element by ID. 'first' which will automatically focus\n * the first element, or 'dialog' which will focus the dialog window itself.\n * If the dialog is modal this prop cannot be 'none'.\n /\n initialFocusElement: {\n type: [String, HTMLElement],\n default: 'first',\n validator: initialFocusElement => {\n return initialFocusElement === 'first' \|\|\n (initialFocusElement instanceof HTMLElement) \|\|\n initialFocusElement.startsWith('#');\n },\n },\n\n /\n A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n /\n appendTo: {\n type: String,\n default: undefined,\n },\n },\n\n emits: [\n /\n Native button click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Native keydown event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n \n @event update:show\n * @type {Boolean}\n */\n 'update:show',\n ],\n\n data () {\n return {\n MODAL_KIND_MODIFIERS,\n MODAL_SIZE_MODIFIERS,\n MODAL_BANNER_KINDS,\n EVENT_KEYNAMES,\n hasSlotContent,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n modalListeners () {\n return {\n click: event => {\n // Handle backdrop clicks for closing modal\n if (this.closeOnClick && event.target === event.currentTarget) {\n this.close();\n }\n\n this.$emit('click', event);\n },\n\n keydown: event => {\n switch (event.code) {\n case EVENT_KEYNAMES.esc:\n case EVENT_KEYNAMES.escape:\n this.close();\n break;\n case EVENT_KEYNAMES.tab:\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n\n 'after-enter': async () => {\n this.$emit('update:show', true);\n await this.setFocusAfterTransition();\n },\n\n focusin: event => {\n // Ensure focus stays within modal\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (this.show && modalEl && !modalEl.contains(event.target)) {\n event.preventDefault();\n this.focusFirstElement(modalEl);\n }\n },\n };\n },\n\n open () {\n return `${!this.show}`;\n },\n\n hasFooterSlot () {\n return !!this.$slots.footer;\n },\n\n bannerKindClass () {\n return MODAL_BANNER_KINDS[this.bannerKind];\n },\n\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n watch: {\n show: {\n handler (isShowing) {\n if (isShowing) {\n // Set a reference to the previously-active element, to which we'll return focus on modal close.\n this.previousActiveElement = document.activeElement;\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n disableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n document.addEventListener('keydown', this._trapFocusGlobalBound);\n } else {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n enableRootScrolling(returnFirstEl(modalEl).getRootNode().host);\n // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n this.previousActiveElement?.focus();\n this.previousActiveElement = null;\n document.removeEventListener('keydown', this._trapFocusGlobalBound);\n }\n },\n },\n },\n\n created () {\n this._trapFocusGlobalBound = (e) => this._trapFocusGlobal(e);\n },\n\n mounted () {\n if (this.show) {\n document.addEventListener('keydown', this._trapFocusGlobalBound);\n }\n },\n\n beforeUnmount () {\n document.removeEventListener('keydown', this._trapFocusGlobalBound);\n },\n\n methods: {\n close () {\n this.$emit('update:show', false);\n },\n\n async setFocusAfterTransition () {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (this.initialFocusElement === 'first') {\n await this.focusFirstElement(modalEl);\n } else if (this.initialFocusElement.startsWith('#')) {\n await this.focusElementById(this.initialFocusElement);\n } else if (this.initialFocusElement instanceof HTMLElement) {\n this.initialFocusElement.focus();\n }\n },\n\n trapFocus (e) {\n if (this.show) {\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n this.focusTrappedTabPress(e, modalEl);\n }\n },\n\n _trapFocusGlobal (e) {\n if (!this.show \|\| e.code !== EVENT_KEYNAMES.tab) return;\n const modalEl = this.$refs.modalRoot?.$el \|\| this.$el;\n if (modalEl && !modalEl.contains(document.activeElement)) {\n e.preventDefault();\n this.focusFirstElement(modalEl);\n }\n },\n },\n};\n</script>\n"],"mappings":";;;;;;;;;;;;;AA+IA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,YAAA;EACA,UAAA;EACA;EACA,mBAAA;EACD;CAED,QAAQ,CAAC,EAAM;CAEf,OAAO;EAIL,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAOD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS,WAAY;AAAE,WAAO,GAAiB;;GAChD;EAOD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAE;GAChE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAE;GAChE;EAOD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAOD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAOD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACT,SAAU,GAAM;AACd,WAAO,EAAa,SAAS,EAAK;;GAErC;EAOD,aAAa;GACX,MAAM;IAAC;IAAQ;IAAQ;IAAM;GAC7B,SAAS;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAMD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EASD,qBAAqB;GACnB,MAAM,CAAC,QAAQ,YAAY;GAC3B,SAAS;GACT,YAAW,MACF,MAAwB,WAC5B,aAA+B,eAChC,EAAoB,WAAW,IAAI;GAExC;EAKD,UAAU;GACR,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAO;EAOL;EAQA;EASA;EACD;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACA;GACA;GACA,MAAM,IAAI,GAAsB;GACjC;;CAGH,UAAU;EACR,iBAAkB;AAChB,UAAO;IACL,QAAO,MAAS;AAMd,KAJI,KAAK,gBAAgB,EAAM,WAAW,EAAM,iBAC9C,KAAK,OAAO,EAGd,KAAK,MAAM,SAAS,EAAM;;IAG5B,UAAS,MAAS;AAChB,aAAQ,EAAM,MAAd;MACE,KAAK,EAAe;MACpB,KAAK,EAAe;AAClB,YAAK,OAAO;AACZ;MACF,KAAK,EAAe;AAClB,YAAK,UAAU,EAAM;AACrB;;AAEJ,UAAK,MAAM,WAAW,EAAM;;IAG9B,eAAe,YAAY;AAEzB,KADA,KAAK,MAAM,eAAe,GAAK,EAC/B,MAAM,KAAK,yBAAyB;;IAGtC,UAAS,MAAS;KAEhB,IAAM,IAAU,KAAK,MAAM,WAAW,OAAO,KAAK;AAClD,KAAI,KAAK,QAAQ,KAAW,CAAC,EAAQ,SAAS,EAAM,OAAO,KACzD,EAAM,gBAAgB,EACtB,KAAK,kBAAkB,EAAQ;;IAGpC;;EAGH,OAAQ;AACN,UAAO,GAAG,CAAC,KAAK;;EAGlB,gBAAiB;AACf,UAAO,CAAC,CAAC,KAAK,OAAO;;EAGvB,kBAAmB;AACjB,UAAO,EAAmB,KAAK;;EAGjC,mBAAoB;AAClB,UAAO,KAAK,KAAK,GAAG,wBAAwB;;EAE/C;CAED,OAAO,EACL,MAAM,EACJ,QAAS,GAAW;AAClB,EAAI,KAEF,KAAK,wBAAwB,SAAS,eAEtC,EAAqB,EADL,KAAK,MAAM,WAAW,OAAO,KAAK,IACP,CAAC,aAAa,CAAC,KAAK,EAC/D,SAAS,iBAAiB,WAAW,KAAK,sBAAsB,KAGhE,EAAoB,EADJ,KAAK,MAAM,WAAW,OAAO,KAAK,IACR,CAAC,aAAa,CAAC,KAAK,EAE9D,KAAK,uBAAuB,OAAO,EACnC,KAAK,wBAAwB,MAC7B,SAAS,oBAAoB,WAAW,KAAK,sBAAsB;IAGxE,EACF;CAED,UAAW;AACT,OAAK,yBAAyB,MAAM,KAAK,iBAAiB,EAAE;;CAG9D,UAAW;AACT,EAAI,KAAK,QACP,SAAS,iBAAiB,WAAW,KAAK,sBAAsB;;CAIpE,gBAAiB;AACf,WAAS,oBAAoB,WAAW,KAAK,sBAAsB;;CAGrE,SAAS;EACP,QAAS;AACP,QAAK,MAAM,eAAe,GAAM;;EAGlC,MAAM,0BAA2B;GAC/B,IAAM,IAAU,KAAK,MAAM,WAAW,OAAO,KAAK;AAClD,GAAI,KAAK,wBAAwB,UAC/B,MAAM,KAAK,kBAAkB,EAAQ,GAC5B,KAAK,oBAAoB,WAAW,IAAI,GACjD,MAAM,KAAK,iBAAiB,KAAK,oBAAoB,GAC5C,KAAK,+BAA+B,eAC7C,KAAK,oBAAoB,OAAO;;EAIpC,UAAW,GAAG;AACZ,OAAI,KAAK,MAAM;IACb,IAAM,IAAU,KAAK,MAAM,WAAW,OAAO,KAAK;AAClD,SAAK,qBAAqB,GAAG,EAAQ;;;EAIzC,iBAAkB,GAAG;AACnB,OAAI,CAAC,KAAK,QAAQ,EAAE,SAAS,EAAe,IAAK;GACjD,IAAM,IAAU,KAAK,MAAM,WAAW,OAAO,KAAK;AAClD,GAAI,KAAW,CAAC,EAAQ,SAAS,SAAS,cAAc,KACtD,EAAE,gBAAgB,EAClB,KAAK,kBAAkB,EAAQ;;EAGpC;CACF;;CAxZW,OAAM;;;;aAxFhB,EAqHW,GAAA;EApHR,UAAQ,CAAG,EAAA;EACX,IAAI,EAAA;KAEL,EAgHe,GAhHf,EAgHe;EA/Gb,KAAI;EACJ,YAAW;EACV,MAAM,EAAA;EACN,OAAK;;GAA+B,EAAA,qBAAqB,EAAA;GAAe,EAAA,qBAAqB,EAAA;GAAe,EAAA;;EAM7G,WAAQ;EACP,eAAa,EAAA;IACd,EAAqB,EAAf,eAAc,CAAA,EAAA;mBAed,CAZE,EAAA,SAAS,EAAA,eAAe,EAAA,OAAO,OAAM,IAAK,EAAA,gBAAA,GAAA,EADlD,EAaM,OAAA;;GAXJ,WAAQ;GACP,OAAK,EAAA;;IAA2C,EAAA;IAAuB,EAAA;;MAOxE,EAEO,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,YAAW,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAGlB,EAmFa,GAAA;GAlFX,QAAA;GACA,MAAK;;oBAgFC,CAAA,EA9EN,EA8EM,OAAA;IA5EH,OAAK,EAAA;;sCAAgF,EAAA,mBAAiB;KAAgB,EAAA;;IAKvH,MAAK;IACL,cAAW;IACV,oBAAkB,EAAA;IAClB,mBAAiB,EAAA;;IAGV,EAAA,eAAe,EAAA,OAAO,OAAM,IAAA,GAAA,EADpC,EAQM,OAAA;;KANH,IAAI,EAAA;KACL,OAAM;KACN,WAAQ;QAGR,EAAsB,EAAA,QAAA,SAAA,CAAA,EAAA,GAAA,EAAA,KAAA,GAAA,EAExB,EAOK,MAAA;;KALF,IAAI,EAAA;KACL,OAAM;KACN,WAAQ;SAEL,EAAA,MAAK,EAAA,GAAA,EAAA;IAGF,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EAUM,OAAA;;KARH,OAAK,EAAA,CAAA,oBAAoD,EAAA,aAAA,CAAA;KAI1D,WAAQ;QAGR,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,KAAA,GAAA,EAEV,EASI,KAAA;;KAPD,OAAK,EAAA,CAAA,oBAAoD,EAAA,aAAA,CAAA;KAI1D,WAAQ;SAEL,EAAA,KAAI,EAAA,EAAA;IAGD,EAAA,iBAAA,GAAA,EADR,EAMS,UANT,GAMS,CADP,EAAsB,EAAA,QAAA,SAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAGhB,EAAA,aAAA,GAAA,EADR,EAGE,GAAA;;KADC,SAAO,EAAA;sCAEV,EAgBY,GAAA;;KAdV,OAAM;KACN,WAAQ;KACR,MAAK;KACL,MAAK;KACL,YAAW;KACV,cAAY,EAAA;KACZ,OAAO,EAAA;KACP,SAAO,EAAA;;KAEG,MAAI,GAGX,EAHe,kBAAQ,CACzB,EAEE,GAAA,EADC,MAAM,GAAQ,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA;;;;;;;mBAzEb,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone-vue",
-  "version": "3.221.0",
+  "version": "3.221.1",
   "description": "Vue component library for Dialpad's design system Dialtone",
   "files": [
     "dist"