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

Vue component library for Dialpad's design system Dialtone

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("../combobox/combobox-loading-list.cjs"),d=require("../combobox/combobox-empty-list.cjs"),l=require("../../common/utils/index.cjs"),c=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a=require("../popover/popover-constants.cjs"),f=require("../popover/popover.cjs"),h=require("../combobox/combobox.cjs"),u=require("../dropdown/dropdown-constants.cjs"),b=require("../combobox/combobox-constants.cjs"),m={name:"DtRecipeComboboxWithPopover",components:{DtCombobox:h.default,DtPopover:f.default,ComboboxLoadingList:p.default,ComboboxEmptyList:d.default},props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:e=>Object.values(b.COMBOBOX_LABEL_SIZES).includes(e)},description:{type:String,default:""},showList:{type:Boolean,default:null},listId:{type:String,default(){return l.getUniqueString()}},listClass:{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(u.DROPDOWN_PADDING_CLASSES).some(t=>t===e)},contentWidth:{type:String,default:null,validator:e=>a.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:[HTMLElement,String],default:"body",validator:e=>a.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},transition:{type:String,default:"fade"}},emits:["select","escape","highlight","opened"],data(){return{DROPDOWN_PADDING_CLASSES:u.DROPDOWN_PADDING_CLASSES,isListShown:!1,isInputFocused:!1,isListFocused:!1,externalAnchor:l.getUniqueString()}},computed:{comboboxListeners(){return{...this.$listeners,select:this.onSelect,escape:this.onEscape,highlight: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==null&&(this.isListShown=!0)},closeComboboxList(){this.showList==null&&(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){var t;this.hasSuggestionList&&e&&((t=this.$refs.input)==null?void 0:t.querySelector("input"))===e.target&&this.showComboboxList()},onFocusOut(e){var n,o,s;const t=(o=(n=this.$refs.popover)==null?void 0:n.tip)==null?void 0:o.popper,i=this.$refs.input;(s=e.composedPath())!=null&&s.some(r=>[t,i].includes(r))||this.closeComboboxList()},openOnArrowKeyPress(){this.showList!==null||this.isListShown||!this.openWithArrowKeys||this.showComboboxList()}}};var g=function(){var t=this,i=t._self._c;return i("dt-combobox",t._g({ref:"combobox",attrs:{loading:t.loading,label:t.label,"label-visible":t.labelVisible,size:t.size,description:t.description,"empty-list":t.emptyList,"empty-state-message":t.emptyStateMessage,"show-list":t.isListShown,"on-beginning-of-list":t.onBeginningOfList,"on-end-of-list":t.onEndOfList,"list-rendered-outside":!0,"list-id":t.listId,"data-qa":"dt-combobox"},scopedSlots:t._u([{key:"input",fn:function({inputProps:n}){return[i("div",{ref:"input",attrs:{id:t.externalAnchor},on:{focusin:t.onFocusIn,keydown:[function(o){return!o.type.indexOf("key")&&t._k(o.keyCode,"up",38,o.key,["Up","ArrowUp"])?null:t.openOnArrowKeyPress(o)},function(o){return!o.type.indexOf("key")&&t._k(o.keyCode,"down",40,o.key,["Down","ArrowDown"])?null:t.openOnArrowKeyPress(o)}]}},[t._t("input",null,{inputProps:n,onInput:t.handleDisplayList})],2)]}},{key:"list",fn:function({opened:n,listProps:o,clearHighlightIndex:s}){return[i("dt-popover",{ref:"popover",attrs:{open:t.isListShown,"hide-on-click":!1,"max-height":t.maxHeight,"max-width":t.maxWidth,offset:t.popoverOffset,sticky:t.popoverSticky,placement:"bottom-start","initial-focus-element":"none",padding:"none",role:"listbox","external-anchor":t.externalAnchor,"content-width":t.contentWidth,"content-appear":!0,"content-tabindex":null,modal:!1,"auto-focus":!1,"append-to":t.appendTo,transition:t.transition},on:{"update:open":function(r){t.isListShown=r},opened:function(r){return n(r,arguments[1])}},scopedSlots:t._u([t.$slots.header?{key:"headerContent",fn:function(){return[i("div",{ref:"header"},[t._t("header")],2)]},proxy:!0}:null,{key:"content",fn:function(){return[i("div",{ref:"listWrapper",class:["d-recipe-combobox-with-popover__list",t.DROPDOWN_PADDING_CLASSES[t.padding],t.listClass],on:{mouseleave:s,focusout:s}},[t.loading?i("combobox-loading-list",t._b({},"combobox-loading-list",o,!1)):t.emptyList&&t.emptyStateMessage?i("combobox-empty-list",t._b({attrs:{message:t.emptyStateMessage}},"combobox-empty-list",o,!1)):t._t("list",null,{listProps:o})],2)]},proxy:!0},t.$slots.footer?{key:"footerContent",fn:function(){return[i("div",{ref:"footer"},[t._t("footer")],2)]},proxy:!0}:null],null,!0)})]}}],null,!0)},t.comboboxListeners))},y=[],_=c.n(m,g,y);const S=_.exports;exports.default=S;
//# sourceMappingURL=combobox-with-popover.cjs.map