@dialpad/dialtone-vue/dist/lib/combobox-with-popover/combobox-with-popover.cjs

Vue component library for Dialpad's design system Dialtone

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(`../combobox/combobox-loading-list.cjs`),i=require(`../combobox/combobox-empty-list.cjs`),a=require(`../../combobox-CTHgn0Ym.cjs`),o=require(`../combobox/combobox-constants.cjs`),s=require(`../popover/popover-constants.cjs`),c=require(`../popover/popover.cjs`),l=require(`../dropdown/dropdown-constants.cjs`);let u=require(`vue`);var d={compatConfig:{MODE:3},name:`DtComboboxWithPopover`,components:{DtCombobox:a.t,DtPopover:c.default,ComboboxLoadingList:r.default,ComboboxEmptyList:i.default},props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:e=>Object.values(o.COMBOBOX_LABEL_SIZES).includes(e)},description:{type:String,default:``},showList:{type:Boolean,default:null},listId:{type:String,default(){return t.getUniqueString()}},listClass:{type:[String,Array,Object],default:``},dialogClass:{type:[String,Array,Object],default:``},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},maxHeight:{type:String,default:``},maxWidth:{type:String,default:``},padding:{type:String,default:`small`,validator:e=>Object.keys(l.DROPDOWN_PADDING_CLASSES).some(t=>t===e)},contentWidth:{type:String,default:null,validator:e=>s.POPOVER_CONTENT_WIDTHS.includes(e)},openWithArrowKeys:{type:Boolean,default:!1},popoverOffset:{type:Array,default:()=>[0,4]},popoverSticky:{type:[Boolean,String],default:!1},hasSuggestionList:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:``},appendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>s.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},transition:{type:String,default:`fade`}},emits:[`select`,`escape`,`highlight`,`opened`],data(){return{DROPDOWN_PADDING_CLASSES:l.DROPDOWN_PADDING_CLASSES,isListShown:!1,isInputFocused:!1,isListFocused:!1,externalAnchor:t.getUniqueString(),hasSlotContent:t.hasSlotContent}},computed:{comboboxListeners(){return{...this.$attrs,onSelect:this.onSelect,onEscape:this.onEscape,onHighlight:this.onHighlight}}},watch:{showList:{handler:function(e){e!==null&&(this.isListShown=e)},immediate:!0},isListShown(e){e?window.addEventListener(`mousedown`,this.onFocusOut):window.removeEventListener(`mousedown`,this.onFocusOut),this.onOpened(e)}},methods:{handleDisplayList(e){!this.hasSuggestionList&&e&&this.showComboboxList(),!this.hasSuggestionList&&!e&&this.closeComboboxList()},showComboboxList(){this.showList??(this.isListShown=!0)},closeComboboxList(){this.showList??(this.isListShown=!1)},onSelect(e){this.loading||(this.$emit(`select`,e),this.hasSuggestionList||this.closeComboboxList())},onEscape(){this.$emit(`escape`),this.closeComboboxList()},onHighlight(e){this.loading||this.$emit(`highlight`,e)},onOpened(e){this.$emit(`opened`,e)},onFocusIn(e){this.hasSuggestionList&&e&&this.$refs.input?.querySelector(`input`)===e.target&&this.showComboboxList()},onFocusOut(e){let t=this.$refs.popover?.tip?.popper,n=this.$refs.input;e.composedPath()?.some(e=>[t,n].includes(e))||this.closeComboboxList()},openOnArrowKeyPress(){this.showList!==null||this.isListShown||!this.openWithArrowKeys||this.showComboboxList()}}},f=[`id`],p={ref:`header`},m=[`onMouseleave`,`onFocusout`],h={ref:`footer`};function g(e,t,n,r,i,a){let o=(0,u.resolveComponent)(`combobox-loading-list`),s=(0,u.resolveComponent)(`combobox-empty-list`),c=(0,u.resolveComponent)(`dt-popover`),l=(0,u.resolveComponent)(`dt-combobox`);return(0,u.openBlock)(),(0,u.createBlock)(l,(0,u.mergeProps)({ref:`combobox`,loading:n.loading,label:n.label,"label-visible":n.labelVisible,size:n.size,description:n.description,"empty-list":n.emptyList,"empty-state-message":n.emptyStateMessage,"show-list":i.isListShown,"on-beginning-of-list":n.onBeginningOfList,"on-end-of-list":n.onEndOfList,"list-rendered-outside":!0,"list-id":n.listId,"data-qa":`dt-combobox`},a.comboboxListeners),{input:(0,u.withCtx)(({inputProps:n})=>[(0,u.createElementVNode)(`div`,{id:i.externalAnchor,ref:`input`,onFocusin:t[0]||(t[0]=(...e)=>a.onFocusIn&&a.onFocusIn(...e)),onKeydown:[t[1]||(t[1]=(0,u.withKeys)(e=>a.openOnArrowKeyPress(e),[`up`])),t[2]||(t[2]=(0,u.withKeys)(e=>a.openOnArrowKeyPress(e),[`down`]))]},[(0,u.renderSlot)(e.$slots,`input`,{inputProps:n,onInput:a.handleDisplayList})],40,f)]),list:(0,u.withCtx)(({opened:r,listProps:a,clearHighlightIndex:l})=>[(0,u.createVNode)(c,{ref:`popover`,open:i.isListShown,"onUpdate:open":t[3]||(t[3]=e=>i.isListShown=e),"hide-on-click":!1,"max-height":n.maxHeight,"max-width":n.maxWidth,offset:n.popoverOffset,sticky:n.popoverSticky,placement:`bottom-start`,"initial-focus-element":`none`,padding:`none`,role:`listbox`,"external-anchor":i.externalAnchor,"content-width":n.contentWidth,"content-appear":!0,"content-tabindex":null,modal:!1,"auto-focus":!1,"append-to":n.appendTo,"dialog-class":n.dialogClass,transition:n.transition,onOpened:r},(0,u.createSlots)({content:(0,u.withCtx)(()=>[(0,u.createElementVNode)(`div`,{ref:`listWrapper`,class:(0,u.normalizeClass)([`d-recipe-combobox-with-popover__list`,i.DROPDOWN_PADDING_CLASSES[n.padding],n.listClass]),onMouseleave:l,onFocusout:l},[n.loading?((0,u.openBlock)(),(0,u.createBlock)(o,(0,u.normalizeProps)((0,u.mergeProps)({key:0},a)),null,16)):n.emptyList&&n.emptyStateMessage?((0,u.openBlock)(),(0,u.createBlock)(s,(0,u.mergeProps)({key:1},a,{message:n.emptyStateMessage}),null,16,[`message`])):(0,u.renderSlot)(e.$slots,`list`,{key:2,listProps:a})],42,m)]),_:2},[i.hasSlotContent(e.$slots.header)?{name:`headerContent`,fn:(0,u.withCtx)(()=>[(0,u.createElementVNode)(`div`,p,[(0,u.renderSlot)(e.$slots,`header`)],512)]),key:`0`}:void 0,i.hasSlotContent(e.$slots.footer)?{name:`footerContent`,fn:(0,u.withCtx)(()=>[(0,u.createElementVNode)(`div`,h,[(0,u.renderSlot)(e.$slots,`footer`)],512)]),key:`1`}:void 0]),1032,[`open`,`max-height`,`max-width`,`offset`,`sticky`,`external-anchor`,`content-width`,`append-to`,`dialog-class`,`transition`,`onOpened`])]),_:3},16,[`loading`,`label`,`label-visible`,`size`,`description`,`empty-list`,`empty-state-message`,`show-list`,`on-beginning-of-list`,`on-end-of-list`,`list-id`])}var _=n.t(d,[[`render`,g]]);exports.default=_;
//# sourceMappingURL=combobox-with-popover.cjs.map