@dialpad/dialtone-vue/dist/lib/combobox-multi-select/combobox-multi-select.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-with-popover/combobox-with-popover.cjs"),h=require("../input/input.cjs"),u=require("../chip/chip.cjs"),c=require("../validation-messages/validation-messages.cjs"),d=require("../../common/validators/index.cjs"),g=require("../popover/popover-constants.cjs"),a=require("./combobox-multi-select-constants.cjs"),f=require("../../common/utils/index.cjs"),m=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),b={name:"DtRecipeComboboxMultiSelect",components:{DtRecipeComboboxWithPopover:p.default,DtInput:h.default,DtChip:u.default,DtValidationMessages:c.default},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=>d.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:t=>Object.values(a.MULTI_SELECT_SIZES).includes(t)},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>g.POPOVER_APPEND_TO_VALUES.includes(t)||t 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}},emits:["input","select","remove","max-selected","keyup","keydown","combobox-highlight"],data(){return{value:"",popoverOffset:[0,4],showValidationMessages:!1,resizeWindowObserver:null,initialInputHeight:null,CHIP_SIZES:a.CHIP_SIZES,inputFocused:!1,hideInputText:!1}},computed:{inputPlaceHolder(){var t;return((t=this.selectedItems)==null?void 0:t.length)>0?"":this.placeholder},chipListeners(){return{...this.$listeners,keydown:t=>{this.onChipKeyDown(t),this.$emit("keydown",t)}}},inputListeners(){return{...this.$listeners,input:t=>{this.$emit("input",t),this.hasSuggestionList&&this.showComboboxList()},keydown:t=>{this.onInputKeyDown(t)},keyup:t=>{this.$emit("keyup",t)},click:()=>{this.hasSuggestionList&&this.showComboboxList()}}},selectedItemsWithKeys(){return this.selectedItems.map(t=>({item:t,key:f.getUniqueString(t)}))},chipWrapperClass(){return{[`d-recipe-combobox-multi-select__chip-wrapper-${this.size}--collapsed`]:!this.inputFocused&&this.collapseOnFocusOut}}},watch:{selectedItems:{async handler(){this.initSelectedItems()}},chipMaxWidth:{async handler(){this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();const t=this.getInput();this.revertInputPadding(t),this.initialInputHeight=t.getBoundingClientRect().height,this.setInputPadding(),this.setChipsTopPosition()}}},mounted(){this.setInitialInputHeight(),this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),this.initSelectedItems()},beforeDestroy(){var t;(t=this.resizeWindowObserver)==null||t.unobserve(document.body)},methods:{comboboxHighlight(t){this.$emit("combobox-highlight",t)},async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(t){var e;this.$emit("remove",t),(e=this.$refs.input)==null||e.focus()},onComboboxSelect(t){this.loading||(this.value="",this.$emit("select",t))},showComboboxList(){var t;this.showList==null&&((t=this.$refs.comboboxWithPopover)==null||t.showComboboxList())},closeComboboxList(){var t;this.showList==null&&((t=this.$refs.comboboxWithPopover)==null||t.closeComboboxList())},getChipButtons(){return this.$refs.chips&&this.$refs.chips.map(t=>t.$el.querySelector("button"))},getChips(){return this.$refs.chips&&this.$refs.chips.map(t=>t.$el)},getLastChipButton(){return this.$refs.chips&&this.getChipButtons()[this.getChipButtons().length-1]},getLastChip(){return this.$refs.chips&&this.getChips()[this.getChips().length-1]},getFirstChip(){return this.$refs.chips&&this.getChips()[0]},getInput(){var t;return(t=this.$refs.input)==null?void 0:t.$refs.input},onChipKeyDown(t){var i;const e=(i=t.code)==null?void 0:i.toLowerCase();e==="arrowleft"?this.navigateBetweenChips(t.target,!0):e==="arrowright"&&(t.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(t.target,!1))},onInputKeyDown(t){var i;const e=(i=t.code)==null?void 0:i.toLowerCase();if(this.selectedItems.length>0&&t.target.selectionStart===0){if(t.target.selectionEnd!==t.target.selectionStart)return;(e==="backspace"||e==="arrowleft")&&this.moveFromInputToChip()}},moveFromInputToChip(){var t;this.getLastChipButton().focus(),(t=this.$refs.input)==null||t.blur(),this.closeComboboxList()},moveFromChipToInput(){var t;this.getLastChipButton().blur(),(t=this.$refs.input)==null||t.focus(),this.showComboboxList()},navigateBetweenChips(t,e){var s;const i=this.getChipButtons().indexOf(t),o=e?i-1:i+1;o<0||o>=((s=this.$refs.chips)==null?void 0:s.length)||(this.getChipButtons()[i].blur(),this.getChipButtons()[o].focus(),this.closeComboboxList())},setChipsTopPosition(){const t=this.getInput();if(!t)return;const e=this.$refs.inputSlotWrapper,i=t.getBoundingClientRect().top-e.getBoundingClientRect().top,o=this.$refs.chipsWrapper;o.style.top=i-a.CHIP_TOP_POSITION[this.size]+"px"},setInputPadding(){const t=this.getLastChip(),e=this.getInput(),i=this.$refs.chipsWrapper;if(!e||(this.revertInputPadding(e),this.popoverOffset=[0,4],!t)||this.collapseOnFocusOut&&!this.inputFocused)return;const o=t.offsetLeft+this.getFullWidth(t),s=e.getBoundingClientRect().width-o;s>this.reservedRightSpace?e.style.paddingLeft=o+"px":e.style.paddingLeft="4px";const r=i.getBoundingClientRect().height-4,n=t.getBoundingClientRect().height-4,l=s>this.reservedRightSpace?t.offsetTop+2:r+n-9;e.style.paddingTop=`${l}px`},revertInputPadding(t){t.style.paddingLeft="",t.style.paddingTop="",t.style.paddingBottom=""},getFullWidth(t){const e=window.getComputedStyle(t);return t.offsetWidth+parseInt(e.marginLeft)+parseInt(e.marginRight)},setInputMinWidth(){const t=this.getFirstChip(),e=this.getInput();e&&(t?e.style.minWidth=this.getFullWidth(t)+4+"px":e.style.minWidth="")},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit("max-selected")):this.showValidationMessages=!1)},setInitialInputHeight(){const t=this.getInput();t&&(this.initialInputHeight=t.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;const t=this.getInput();if(!t||!t.style.paddingTop)return;this.revertInputPadding(t)}}}};var y=function(){var e=this,i=e._self._c;return i("dt-recipe-combobox-with-popover",{ref:"comboboxWithPopover",attrs:{label:e.label,"show-list":e.showList,"max-height":e.listMaxHeight,"max-width":e.listMaxWidth,"popover-offset":e.popoverOffset,"has-suggestion-list":e.hasSuggestionList,"content-width":"anchor","append-to":e.appendTo,transition:e.transition},on:{select:e.onComboboxSelect,highlight:e.comboboxHighlight},scopedSlots:e._u([{key:"input",fn:function({onInput:o}){return[i("span",{ref:"inputSlotWrapper",staticClass:"d-recipe-combobox-multi-select__input-wrapper",on:{focusin:e.handleInputFocusIn,focusout:e.handleInputFocusOut}},[i("span",{ref:"chipsWrapper",class:["d-recipe-combobox-multi-select__chip-wrapper",e.chipWrapperClass]},e._l(e.selectedItemsWithKeys,function({item:s,key:r}){return i("dt-chip",e._g({key:r,ref:"chips",refInFor:!0,class:["d-recipe-combobox-multi-select__chip",{"d-recipe-combobox-multi-select__chip--truncate":!!e.chipMaxWidth}],style:{maxWidth:e.chipMaxWidth},attrs:{"label-class":["d-chip__label"],size:e.CHIP_SIZES[e.size],disabled:e.disabled},on:{keydown:function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"backspace",void 0,n.key,void 0)?null:e.onChipRemove(s)},close:function(n){return e.onChipRemove(s)}}},e.chipListeners),[e._v(" "+e._s(s)+" ")])}),1),i("dt-input",e._g({ref:"input",staticClass:"d-recipe-combobox-multi-select__input",attrs:{"input-class":[e.inputClass,{"d-recipe-combobox-multi-select__input--hidden":e.hideInputText}],"input-wrapper-class":e.inputWrapperClass,disabled:e.disabled,"aria-label":e.label,label:e.labelVisible?e.label:"",description:e.description,placeholder:e.inputPlaceHolder,"show-messages":e.showInputMessages,messages:e.inputMessages,size:e.size},on:{input:o,select:function(s){s.stopPropagation()}},model:{value:e.value,callback:function(s){e.value=s},expression:"value"}},e.inputListeners)),i("dt-validation-messages",{attrs:{"validation-messages":e.maxSelectedMessage,"show-messages":e.showValidationMessages}})],1)]}},e.$slots.header?{key:"header",fn:function(){return[i("div",{ref:"header"},[e._t("header")],2)]},proxy:!0}:null,{key:"list",fn:function(){return[i("div",{ref:"list",staticClass:"d-recipe-combobox-multi-select__list",on:{mousedown:function(o){o.preventDefault()}}},[e.loading?i("div",{staticClass:"d-recipe-combobox-multi-select__list--loading"},[e._v(" "+e._s(e.loadingMessage)+" ")]):e._t("list")],2)]},proxy:!0},e.$slots.footer?{key:"footer",fn:function(){return[i("div",{ref:"footer"},[e._t("footer")],2)]},proxy:!0}:null],null,!0)})},C=[],x=m.n(b,y,C);const _=x.exports;exports.default=_;
//# sourceMappingURL=combobox-multi-select.cjs.map