@dialpad/dialtone-vue 3.120.0 → 3.120.2

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

@@ -1,2 +1,590 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("./combobox-with-popover.cjs"),C=require("./input.cjs"),y=require("./chip.cjs"),S=require("./validation-messages.cjs"),v=require("./validators.cjs"),_=require("./utils.cjs"),I=require("../chunks/popover_constants-hOEhklvr.js"),x=require("../chunks/sr_only_close_button-iD7s1Pbj.js"),t=require("vue"),w=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("../chunks/index-6tYeqbgP.js");require("../chunks/keyboard_list_navigation-N74Bpdq7.js");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./item-layout.cjs");require("./constants.cjs");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./skeleton.cjs");require("./popover.cjs");require("../chunks/modal-qEzlo0Sj.js");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./lazy-show.cjs");require("tippy.js");require("../chunks/dropdown_constants-KHFvVI2L.js");require("../chunks/input-0Uksk4DP.js");const a={EXTRA_SMALL:"xs",SMALL:"sm",DEFAULT:"md"},h={xs:"xs",sm:"xs",md:"sm"},u={xs:1.4,sm:.4,md:.2},L={name:"DtRecipeComboboxMultiSelect",components:{DtRecipeComboboxWithPopover:b.DtRecipeComboboxWithPopover,DtInput:C.DtInput,DtChip:y.DtChip,DtValidationMessages:S.DtValidationMessages},mixins:[x.a],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:e=>v.validationMessageValidator(e)},showInputMessages:{type:Boolean,default:!0},loading:{type:Boolean,default:!1},loadingMessage:{type:String,default:"loading..."},showList:{type:Boolean,default:null},listMaxHeight:{type:String,default:"300px"},selectedItems:{type:Array,default:function(){return[]}},maxSelected:{type:Number,default:0},maxSelectedMessage:{type:Array,default:function(){return[]}},hasSuggestionList:{type:Boolean,default:!0},size:{type:String,default:"md",validator:e=>Object.values(a).includes(e)},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>I.e.includes(e)||e instanceof HTMLElement},transition:{type:String,default:"fade"}},emits:["input","select","remove","max-selected","keyup"],data(){return{value:"",popoverOffset:[0,4],showValidationMessages:!1,initialInputPadding:{},resizeWindowObserver:null,originalInputSize:null,CHIP_SIZES:h,hasSlotContent:_.hasSlotContent}},computed:{inputPlaceHolder(){var e;return((e=this.selectedItems)==null?void 0:e.length)>0?"":this.placeholder},chipListeners(){return{keyup:e=>{this.onChipKeyup(e),this.$emit("keyup",e)}}},inputListeners(){return{input:e=>{this.$emit("input",e),this.hasSuggestionList&&this.showComboboxList()},keyup:e=>{this.onInputKeyup(e),this.$emit("keyup",e)},click:e=>{this.hasSuggestionList&&this.showComboboxList()}}}},watch:{selectedItems:{deep:!0,handler:async function(){this.initSelectedItems()}},async label(){await this.$nextTick(),this.setChipsTopPosition()},async description(){await this.$nextTick(),this.setChipsTopPosition()},size:{async handler(){await this.$nextTick();const e=this.getInput();this.revertInputPadding(e),this.originalInputSize=e.getBoundingClientRect().height,this.setInputPadding(),this.setChipsTopPosition()}}},mounted(){this.resizeWindowObserver=new ResizeObserver(async()=>{this.setChipsTopPosition(),this.setInputPadding()}),this.resizeWindowObserver.observe(document.body),this.initSelectedItems()},beforeUnmount(){var e;(e=this.resizeWindowObserver)==null||e.unobserve(document.body)},methods:{async initSelectedItems(){await this.$nextTick(),this.setInputPadding(),this.setChipsTopPosition(),this.setInputMinWidth(),this.checkMaxSelected()},onChipRemove(e){var i;this.$emit("remove",e),(i=this.$refs.input)==null||i.focus()},onComboboxSelect(e){this.value="",this.$emit("select",e)},showComboboxList(){var e;this.showList==null&&((e=this.$refs.comboboxWithPopover)==null||e.showComboboxList())},closeComboboxList(){var e;this.showList==null&&((e=this.$refs.comboboxWithPopover)==null||e.closeComboboxList())},getChipButtons(){return this.$refs.chips&&this.$refs.chips.map(e=>e.$el.querySelector("button"))},getChips(){return this.$refs.chips&&this.$refs.chips.map(e=>e.$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 e;return(e=this.$refs.input)==null?void 0:e.$refs.input},onChipKeyup(e){var s;const i=(s=e.code)==null?void 0:s.toLowerCase();i==="arrowleft"?this.navigateBetweenChips(e.target,!0):i==="arrowright"&&(e.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(e.target,!1))},onInputKeyup(e){var s;const i=(s=e.code)==null?void 0:s.toLowerCase();this.selectedItems.length>0&&e.target.selectionStart===0&&(i==="backspace"||i==="arrowleft")&&this.moveFromInputToChip()},moveFromInputToChip(){var e;this.getLastChipButton().focus(),(e=this.$refs.input)==null||e.blur(),this.closeComboboxList()},moveFromChipToInput(){var e;this.getLastChipButton().blur(),(e=this.$refs.input)==null||e.focus(),this.showComboboxList()},navigateBetweenChips(e,i){var o;const s=this.getChipButtons().indexOf(e),n=i?s-1:s+1;n<0||n>=((o=this.$refs.chips)==null?void 0:o.length)||(this.getChipButtons()[s].blur(),this.getChipButtons()[n].focus(),this.closeComboboxList())},setChipsTopPosition(){const e=this.getInput();if(!e)return;const i=this.$refs.inputSlotWrapper,s=e.getBoundingClientRect().top-i.getBoundingClientRect().top,n=this.$refs.chipsWrapper;n.style.top=s-u[this.size]+"px"},setInputPadding(){const e=this.getLastChip(),i=this.getInput(),s=this.$refs.chipsWrapper;if(!i||(this.revertInputPadding(i),this.popoverOffset=[0,4],!e))return;const n=e.offsetLeft+this.getFullWidth(e);i.style.paddingLeft=n+"px";const o=s.getBoundingClientRect().height-4,r=e.offsetTop+2;o>this.originalInputSize&&(i.style.paddingTop=`${r}px`)},revertInputPadding(e){e.style.paddingLeft="",e.style.paddingTop="",e.style.paddingBottom=""},getFullWidth(e){const i=window.getComputedStyle(e);return e.offsetWidth+parseInt(i.marginLeft)+parseInt(i.marginRight)},setInputMinWidth(){const e=this.getFirstChip(),i=this.getInput();i&&(e?i.style.minWidth=this.getFullWidth(e)+4+"px":i.style.minWidth="")},checkMaxSelected(){this.maxSelected!==0&&(this.selectedItems.length>this.maxSelected?(this.showValidationMessages=!0,this.$emit("max-selected")):this.showValidationMessages=!1)}}},P={ref:"inputSlotWrapper",class:"combobox__input-wrapper"},M={ref:"chipsWrapper",class:"combobox__chip-wrapper"},T={ref:"header"},q={key:1,class:"combobox__list--loading"},B={ref:"footer"};function k(e,i,s,n,o,r){const p=t.resolveComponent("dt-chip"),d=t.resolveComponent("dt-input"),c=t.resolveComponent("dt-validation-messages"),g=t.resolveComponent("dt-recipe-combobox-with-popover");return t.openBlock(),t.createBlock(g,{ref:"comboboxWithPopover",label:s.label,"show-list":s.showList,"max-height":s.listMaxHeight,"popover-offset":o.popoverOffset,"has-suggestion-list":s.hasSuggestionList,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,"visually-hidden-close":e.visuallyHiddenClose,"content-width":"anchor","append-to":s.appendTo,transition:s.transition,onSelect:r.onComboboxSelect},t.createSlots({input:t.withCtx(({onInput:m})=>[t.createElementVNode("span",P,[t.createElementVNode("span",M,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(s.selectedItems,l=>(t.openBlock(),t.createBlock(p,t.mergeProps({ref_for:!0,ref:"chips",key:l,"label-class":["d-chip__label"],class:"combobox__chip","close-button-props":{ariaLabel:"close"},size:o.CHIP_SIZES[s.size]},t.toHandlers(r.chipListeners),{onKeyup:t.withKeys(f=>r.onChipRemove(l),["backspace"]),onClose:f=>r.onChipRemove(l)}),{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(l),1)]),_:2},1040,["size","onKeyup","onClose"]))),128))],512),t.createVNode(d,t.mergeProps({ref:"input",modelValue:o.value,"onUpdate:modelValue":i[0]||(i[0]=l=>o.value=l),class:"combobox__input","aria-label":s.label,label:s.labelVisible?s.label:"",description:s.description,placeholder:r.inputPlaceHolder,"show-messages":s.showInputMessages,messages:s.inputMessages,size:s.size},t.toHandlers(r.inputListeners),{onInput:m}),null,16,["modelValue","aria-label","label","description","placeholder","show-messages","messages","size","onInput"]),t.createVNode(c,{"validation-messages":s.maxSelectedMessage,"show-messages":o.showValidationMessages},null,8,["validation-messages","show-messages"])],512)]),list:t.withCtx(()=>[t.createElementVNode("div",{ref:"list",onMousedown:i[1]||(i[1]=t.withModifiers(()=>{},["prevent"]))},[s.loading?(t.openBlock(),t.createElementBlock("div",q,t.toDisplayString(s.loadingMessage),1)):t.renderSlot(e.$slots,"list",{key:0},void 0,!0)],544)]),_:2},[o.hasSlotContent(e.$slots.header)?{name:"header",fn:t.withCtx(()=>[t.createElementVNode("div",T,[t.renderSlot(e.$slots,"header",{},void 0,!0)],512)]),key:"0"}:void 0,o.hasSlotContent(e.$slots.footer)?{name:"footer",fn:t.withCtx(()=>[t.createElementVNode("div",B,[t.renderSlot(e.$slots,"footer",{},void 0,!0)],512)]),key:"1"}:void 0]),1032,["label","show-list","max-height","popover-offset","has-suggestion-list","visually-hidden-close-label","visually-hidden-close","append-to","transition","onSelect"])}const W=w._(L,[["render",k],["__scopeId","data-v-d1f21523"]]);exports.CHIP_SIZES=h;exports.CHIP_TOP_POSITION=u;exports.DtRecipeComboboxMultiSelect=W;exports.MULTI_SELECT_SIZES=a;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lib_comboboxWithPopover = require("./combobox-with-popover.cjs");
+const lib_input = require("./input.cjs");
+const lib_chip = require("./chip.cjs");
+const lib_validationMessages = require("./validation-messages.cjs");
+const common_validators = require("../common/validators.cjs");
+const common_utils = require("../common/utils.cjs");
+const popover_constants = require("../chunks/popover_constants-JwBF9h1Z.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+require("../chunks/index-4qgKeErp.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
+require("./list-item.cjs");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+require("./item-layout.cjs");
+require("../common/constants.cjs");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("./skeleton.cjs");
+require("./popover.cjs");
+require("../chunks/modal-VgxXAQFP.js");
+require("./button.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("./lazy-show.cjs");
+require("tippy.js");
+require("../chunks/dropdown_constants-2pGCXy7m.js");
+require("../chunks/input-ttnte8zB.js");
+const MULTI_SELECT_SIZES = {
+  // Chip has no 'lg' and 'xl' size. So we don't support that in multi-select.
+  EXTRA_SMALL: "xs",
+  SMALL: "sm",
+  DEFAULT: "md"
+};
+const CHIP_SIZES = {
+  xs: "xs",
+  sm: "xs",
+  md: "sm"
+};
+const CHIP_TOP_POSITION = {
+  xs: 1.4,
+  sm: 0.4,
+  md: 0.2
+};
+const _sfc_main = {
+  name: "DtRecipeComboboxMultiSelect",
+  components: {
+    DtRecipeComboboxWithPopover: lib_comboboxWithPopover.DtRecipeComboboxWithPopover,
+    DtInput: lib_input.DtInput,
+    DtChip: lib_chip.DtChip,
+    DtValidationMessages: lib_validationMessages.DtValidationMessages
+  },
+  mixins: [sr_only_close_button.SrOnlyCloseButtonMixin],
+  props: {
+    /**
+     * String to use for the input label.
+     */
+    label: {
+      type: String,
+      required: true
+    },
+    /**
+     * Determines visibility of input label.
+     * @values true, false
+     */
+    labelVisible: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Description for the input
+     */
+    description: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Input placeholder
+     */
+    placeholder: {
+      type: String,
+      default: "Select one or start typing"
+    },
+    /**
+     * Input validation messages
+     */
+    inputMessages: {
+      type: Array,
+      default: () => [],
+      validator: (inputMessages) => {
+        return common_validators.validationMessageValidator(inputMessages);
+      }
+    },
+    /**
+     * Show input validation message
+     */
+    showInputMessages: {
+      type: Boolean,
+      default: true
+    },
+    // @TODO: https://dialpad.atlassian.net/browse/DP-52324
+    // type: {
+    //   type: String,
+    //   values: ['input', 'select'],
+    //   default: 'select',
+    // },
+    /**
+     * Determines if the list is loading
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The message when the list is loading
+     */
+    loadingMessage: {
+      type: String,
+      default: "loading..."
+    },
+    /**
+     * Determines when to show the list element and also controls the aria-expanded attribute.
+     * Leaving this null will have the combobox trigger on input focus by default.
+     * If you set this value, the default trigger behavior will be disabled and you can
+     * control it as you need.
+     */
+    showList: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    listMaxHeight: {
+      type: String,
+      default: "300px"
+    },
+    /**
+     * The selected items
+     */
+    selectedItems: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    /**
+     * Would be the maximum number of selections you can make. 0 is unlimited
+     */
+    maxSelected: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Max select message when the max selections is exceeded with the structure:
+     * `[{"message": string, "type": VALIDATION_MESSAGE_TYPES }]`
+     */
+    maxSelectedMessage: {
+      type: Array,
+      default: function() {
+        return [];
+      }
+    },
+    /**
+     * Displays the list when the combobox is focused, before the user has typed anything.
+     * When this is enabled the list will not close after selection.
+     */
+    hasSuggestionList: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Size of the chip, one of `xs`, `sm`, `md`
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t)
+    },
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (appendTo) => {
+        return popover_constants.POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
+    },
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+      type: String,
+      default: "fade"
+    }
+  },
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {String }
+     */
+    "input",
+    /**
+     * Event fired when item selected
+     *
+     * @event select
+     * @type {Number}
+     */
+    "select",
+    /**
+     * Event fired when item removed
+     *
+     * @event remove
+     * @type {String}
+     */
+    "remove",
+    /**
+     * Event fired when max selected items limit is reached
+     *
+     * @event max-selected
+     * @type {Object}
+     */
+    "max-selected",
+    /**
+     * Native keyup event
+     *
+     * @event keyup
+     * @type {KeyboardEvent}
+      */
+    "keyup"
+  ],
+  data() {
+    return {
+      value: "",
+      popoverOffset: [0, 4],
+      showValidationMessages: false,
+      initialInputPadding: {},
+      resizeWindowObserver: null,
+      originalInputSize: null,
+      CHIP_SIZES,
+      hasSlotContent: common_utils.hasSlotContent
+    };
+  },
+  computed: {
+    inputPlaceHolder() {
+      var _a;
+      return ((_a = this.selectedItems) == null ? void 0 : _a.length) > 0 ? "" : this.placeholder;
+    },
+    chipListeners() {
+      return {
+        keyup: (event) => {
+          this.onChipKeyup(event);
+          this.$emit("keyup", event);
+        }
+      };
+    },
+    inputListeners() {
+      return {
+        input: (event) => {
+          this.$emit("input", event);
+          if (this.hasSuggestionList) {
+            this.showComboboxList();
+          }
+        },
+        keyup: (event) => {
+          this.onInputKeyup(event);
+          this.$emit("keyup", event);
+        },
+        click: (event) => {
+          if (this.hasSuggestionList) {
+            this.showComboboxList();
+          }
+        }
+      };
+    }
+  },
+  watch: {
+    selectedItems: {
+      deep: true,
+      handler: async function() {
+        this.initSelectedItems();
+      }
+    },
+    async label() {
+      await this.$nextTick();
+      this.setChipsTopPosition();
+    },
+    async description() {
+      await this.$nextTick();
+      this.setChipsTopPosition();
+    },
+    size: {
+      async handler() {
+        await this.$nextTick();
+        const input = this.getInput();
+        this.revertInputPadding(input);
+        this.originalInputSize = input.getBoundingClientRect().height;
+        this.setInputPadding();
+        this.setChipsTopPosition();
+      }
+    }
+  },
+  mounted() {
+    this.resizeWindowObserver = new ResizeObserver(async () => {
+      this.setChipsTopPosition();
+      this.setInputPadding();
+    });
+    this.resizeWindowObserver.observe(document.body);
+    this.initSelectedItems();
+  },
+  beforeUnmount() {
+    var _a;
+    (_a = this.resizeWindowObserver) == null ? void 0 : _a.unobserve(document.body);
+  },
+  methods: {
+    async initSelectedItems() {
+      await this.$nextTick();
+      this.setInputPadding();
+      this.setChipsTopPosition();
+      this.setInputMinWidth();
+      this.checkMaxSelected();
+    },
+    onChipRemove(item) {
+      var _a;
+      this.$emit("remove", item);
+      (_a = this.$refs.input) == null ? void 0 : _a.focus();
+    },
+    onComboboxSelect(i) {
+      this.value = "";
+      this.$emit("select", i);
+    },
+    showComboboxList() {
+      var _a;
+      if (this.showList != null) {
+        return;
+      }
+      (_a = this.$refs.comboboxWithPopover) == null ? void 0 : _a.showComboboxList();
+    },
+    closeComboboxList() {
+      var _a;
+      if (this.showList != null) {
+        return;
+      }
+      (_a = this.$refs.comboboxWithPopover) == null ? void 0 : _a.closeComboboxList();
+    },
+    getChipButtons() {
+      return this.$refs.chips && this.$refs.chips.map((chip) => chip.$el.querySelector("button"));
+    },
+    getChips() {
+      return this.$refs.chips && this.$refs.chips.map((chip) => chip.$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 _a;
+      return (_a = this.$refs.input) == null ? void 0 : _a.$refs.input;
+    },
+    onChipKeyup(event) {
+      var _a;
+      const key = (_a = event.code) == null ? void 0 : _a.toLowerCase();
+      if (key === "arrowleft") {
+        this.navigateBetweenChips(event.target, true);
+      } else if (key === "arrowright") {
+        if (event.target.id === this.getLastChipButton().id) {
+          this.moveFromChipToInput();
+        } else {
+          this.navigateBetweenChips(event.target, false);
+        }
+      }
+    },
+    onInputKeyup(event) {
+      var _a;
+      const key = (_a = event.code) == null ? void 0 : _a.toLowerCase();
+      if (this.selectedItems.length > 0 && event.target.selectionStart === 0) {
+        if (key === "backspace" || key === "arrowleft") {
+          this.moveFromInputToChip();
+        }
+      }
+    },
+    moveFromInputToChip() {
+      var _a;
+      this.getLastChipButton().focus();
+      (_a = this.$refs.input) == null ? void 0 : _a.blur();
+      this.closeComboboxList();
+    },
+    moveFromChipToInput() {
+      var _a;
+      this.getLastChipButton().blur();
+      (_a = this.$refs.input) == null ? void 0 : _a.focus();
+      this.showComboboxList();
+    },
+    navigateBetweenChips(target, toLeft) {
+      var _a;
+      const from = this.getChipButtons().indexOf(target);
+      const to = toLeft ? from - 1 : from + 1;
+      if (to < 0 || to >= ((_a = this.$refs.chips) == null ? void 0 : _a.length)) {
+        return;
+      }
+      this.getChipButtons()[from].blur();
+      this.getChipButtons()[to].focus();
+      this.closeComboboxList();
+    },
+    setChipsTopPosition() {
+      const input = this.getInput();
+      if (!input)
+        return;
+      const inputSlotWrapper = this.$refs.inputSlotWrapper;
+      const top = input.getBoundingClientRect().top - inputSlotWrapper.getBoundingClientRect().top;
+      const chipsWrapper = this.$refs.chipsWrapper;
+      chipsWrapper.style.top = top - CHIP_TOP_POSITION[this.size] + "px";
+    },
+    setInputPadding() {
+      const lastChip = this.getLastChip();
+      const input = this.getInput();
+      const chipsWrapper = this.$refs.chipsWrapper;
+      if (!input)
+        return;
+      this.revertInputPadding(input);
+      this.popoverOffset = [0, 4];
+      if (!lastChip)
+        return;
+      const left = lastChip.offsetLeft + this.getFullWidth(lastChip);
+      input.style.paddingLeft = left + "px";
+      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;
+      const top = lastChip.offsetTop + 2;
+      if (chipsSize > this.originalInputSize) {
+        input.style.paddingTop = `${top}px`;
+      }
+    },
+    revertInputPadding(input) {
+      input.style.paddingLeft = "";
+      input.style.paddingTop = "";
+      input.style.paddingBottom = "";
+    },
+    getFullWidth(el) {
+      const styles = window.getComputedStyle(el);
+      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);
+    },
+    setInputMinWidth() {
+      const firstChip = this.getFirstChip();
+      const input = this.getInput();
+      if (!input)
+        return;
+      if (firstChip) {
+        input.style.minWidth = this.getFullWidth(firstChip) + 4 + "px";
+      } else {
+        input.style.minWidth = "";
+      }
+    },
+    checkMaxSelected() {
+      if (this.maxSelected === 0)
+        return;
+      if (this.selectedItems.length > this.maxSelected) {
+        this.showValidationMessages = true;
+        this.$emit("max-selected");
+      } else {
+        this.showValidationMessages = false;
+      }
+    }
+  }
+};
+const _hoisted_1 = {
+  ref: "inputSlotWrapper",
+  class: "combobox__input-wrapper"
+};
+const _hoisted_2 = {
+  ref: "chipsWrapper",
+  class: "combobox__chip-wrapper"
+};
+const _hoisted_3 = { ref: "header" };
+const _hoisted_4 = {
+  key: 1,
+  class: "combobox__list--loading"
+};
+const _hoisted_5 = { ref: "footer" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_chip = vue.resolveComponent("dt-chip");
+  const _component_dt_input = vue.resolveComponent("dt-input");
+  const _component_dt_validation_messages = vue.resolveComponent("dt-validation-messages");
+  const _component_dt_recipe_combobox_with_popover = vue.resolveComponent("dt-recipe-combobox-with-popover");
+  return vue.openBlock(), vue.createBlock(_component_dt_recipe_combobox_with_popover, {
+    ref: "comboboxWithPopover",
+    label: $props.label,
+    "show-list": $props.showList,
+    "max-height": $props.listMaxHeight,
+    "popover-offset": $data.popoverOffset,
+    "has-suggestion-list": $props.hasSuggestionList,
+    "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+    "visually-hidden-close": _ctx.visuallyHiddenClose,
+    "content-width": "anchor",
+    "append-to": $props.appendTo,
+    transition: $props.transition,
+    onSelect: $options.onComboboxSelect
+  }, vue.createSlots({
+    input: vue.withCtx(({ onInput }) => [
+      vue.createElementVNode("span", _hoisted_1, [
+        vue.createElementVNode("span", _hoisted_2, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.selectedItems, (item) => {
+            return vue.openBlock(), vue.createBlock(_component_dt_chip, vue.mergeProps({
+              ref_for: true,
+              ref: "chips",
+              key: item,
+              "label-class": ["d-chip__label"],
+              class: "combobox__chip",
+              "close-button-props": { ariaLabel: "close" },
+              size: $data.CHIP_SIZES[$props.size]
+            }, vue.toHandlers($options.chipListeners), {
+              onKeyup: vue.withKeys(($event) => $options.onChipRemove(item), ["backspace"]),
+              onClose: ($event) => $options.onChipRemove(item)
+            }), {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(item), 1)
+              ]),
+              _: 2
+            }, 1040, ["size", "onKeyup", "onClose"]);
+          }), 128))
+        ], 512),
+        vue.createVNode(_component_dt_input, vue.mergeProps({
+          ref: "input",
+          modelValue: $data.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => $data.value = $event),
+          class: "combobox__input",
+          "aria-label": $props.label,
+          label: $props.labelVisible ? $props.label : "",
+          description: $props.description,
+          placeholder: $options.inputPlaceHolder,
+          "show-messages": $props.showInputMessages,
+          messages: $props.inputMessages,
+          size: $props.size
+        }, vue.toHandlers($options.inputListeners), { onInput }), null, 16, ["modelValue", "aria-label", "label", "description", "placeholder", "show-messages", "messages", "size", "onInput"]),
+        vue.createVNode(_component_dt_validation_messages, {
+          "validation-messages": $props.maxSelectedMessage,
+          "show-messages": $data.showValidationMessages
+        }, null, 8, ["validation-messages", "show-messages"])
+      ], 512)
+    ]),
+    list: vue.withCtx(() => [
+      vue.createElementVNode("div", {
+        ref: "list",
+        onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+        }, ["prevent"]))
+      }, [
+        !$props.loading ? vue.renderSlot(_ctx.$slots, "list", { key: 0 }, void 0, true) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, vue.toDisplayString($props.loadingMessage), 1))
+      ], 544)
+    ]),
+    _: 2
+  }, [
+    $data.hasSlotContent(_ctx.$slots.header) ? {
+      name: "header",
+      fn: vue.withCtx(() => [
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
+        ], 512)
+      ]),
+      key: "0"
+    } : void 0,
+    $data.hasSlotContent(_ctx.$slots.footer) ? {
+      name: "footer",
+      fn: vue.withCtx(() => [
+        vue.createElementVNode("div", _hoisted_5, [
+          vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+        ], 512)
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1032, ["label", "show-list", "max-height", "popover-offset", "has-suggestion-list", "visually-hidden-close-label", "visually-hidden-close", "append-to", "transition", "onSelect"]);
+}
+const combobox_multi_select = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-d1f21523"]]);
+exports.CHIP_SIZES = CHIP_SIZES;
+exports.CHIP_TOP_POSITION = CHIP_TOP_POSITION;
+exports.DtRecipeComboboxMultiSelect = combobox_multi_select;
+exports.MULTI_SELECT_SIZES = MULTI_SELECT_SIZES;
 //# sourceMappingURL=combobox-multi-select.cjs.map