@dialpad/dialtone-vue 2.127.0 → 2.127.2

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

@@ -1,2 +1,520 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./combobox-with-popover.cjs"),u=require("./input.cjs"),h=require("./chip.cjs"),c=require("./validation-messages.cjs"),d=require("./validators.cjs"),f=require("../chunks/popover_constants-hOEhklvr.js"),g=require("../chunks/sr_only_close_button-ErijKGYR.js"),m=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js");require("../chunks/index-2jPosQBn.js");require("../chunks/keyboard_list_navigation-N74Bpdq7.js");require("./utils.cjs");require("./constants.cjs");require("vue");require("./list-item.cjs");require("../chunks/list_item_constants-Tsz5CO1m.js");require("./item-layout.cjs");require("./icon.cjs");require("@dialpad/dialtone-icons/vue2");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./skeleton.cjs");require("./popover.cjs");require("@linusborg/vue-simple-portal");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-o-fc1X4b.js");const r={EXTRA_SMALL:"xs",SMALL:"sm",DEFAULT:"md"},a={xs:"xs",sm:"xs",md:"sm"},l={xs:1.4,sm:.4,md:.2},b={name:"DtRecipeComboboxMultiSelect",components:{DtRecipeComboboxWithPopover:p.DtRecipeComboboxWithPopover,DtInput:u.DtInput,DtChip:h.DtChip,DtValidationMessages:c.DtValidationMessages},mixins:[g.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=>d.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(r).includes(e)},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>f.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:a}},computed:{inputPlaceHolder(){var e;return((e=this.selectedItems)==null?void 0:e.length)>0?"":this.placeholder},chipListeners(){return{...this.$listeners,keyup:e=>{this.onChipKeyup(e),this.$emit("keyup",e)}}},inputListeners(){return{...this.$listeners,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:{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 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()},beforeDestroy(){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 t;this.$emit("remove",e),(t=this.$refs.input)==null||t.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 i;const t=(i=e.code)==null?void 0:i.toLowerCase();t==="arrowleft"?this.navigateBetweenChips(e.target,!0):t==="arrowright"&&(e.target.id===this.getLastChipButton().id?this.moveFromChipToInput():this.navigateBetweenChips(e.target,!1))},onInputKeyup(e){var i;const t=(i=e.code)==null?void 0:i.toLowerCase();this.selectedItems.length>0&&e.target.selectionStart===0&&(t==="backspace"||t==="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,t){var o;const i=this.getChipButtons().indexOf(e),s=t?i-1:i+1;s<0||s>=((o=this.$refs.chips)==null?void 0:o.length)||(this.getChipButtons()[i].blur(),this.getChipButtons()[s].focus(),this.closeComboboxList())},setChipsTopPosition(){const e=this.getInput();if(!e)return;const t=this.$refs.inputSlotWrapper,i=e.getBoundingClientRect().top-t.getBoundingClientRect().top,s=this.$refs.chipsWrapper;s.style.top=i-l[this.size]+"px"},setInputPadding(){const e=this.getLastChip(),t=this.getInput(),i=this.$refs.chipsWrapper;if(!t||(this.revertInputPadding(t),this.popoverOffset=[0,4],!e))return;const s=e.offsetLeft+this.getFullWidth(e);t.style.paddingLeft=s+"px";const o=i.getBoundingClientRect().height-4,n=e.offsetTop+2;o>this.originalInputSize&&(t.style.paddingTop=`${n}px`)},revertInputPadding(e){e.style.paddingLeft="",e.style.paddingTop="",e.style.paddingBottom=""},getFullWidth(e){const t=window.getComputedStyle(e);return e.offsetWidth+parseInt(t.marginLeft)+parseInt(t.marginRight)},setInputMinWidth(){const 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)}}};var C=function(){var t=this,i=t._self._c;return i("dt-recipe-combobox-with-popover",{ref:"comboboxWithPopover",attrs:{label:t.label,"show-list":t.showList,"max-height":t.listMaxHeight,"popover-offset":t.popoverOffset,"has-suggestion-list":t.hasSuggestionList,"visually-hidden-close-label":t.visuallyHiddenCloseLabel,"visually-hidden-close":t.visuallyHiddenClose,"content-width":"anchor","append-to":t.appendTo,transition:t.transition},on:{select:t.onComboboxSelect},scopedSlots:t._u([{key:"input",fn:function({onInput:s}){return[i("span",{ref:"inputSlotWrapper",staticClass:"combobox__input-wrapper"},[i("span",{ref:"chipsWrapper",staticClass:"combobox__chip-wrapper"},t._l(t.selectedItems,function(o){return i("dt-chip",t._g({key:o,ref:"chips",refInFor:!0,staticClass:"combobox__chip",attrs:{"label-class":["d-chip__label"],"close-button-props":{ariaLabel:"close"},size:t.CHIP_SIZES[t.size]},on:{keyup:function(n){return!n.type.indexOf("key")&&t._k(n.keyCode,"backspace",void 0,n.key,void 0)?null:t.onChipRemove(o)},close:function(n){return t.onChipRemove(o)}}},t.chipListeners),[t._v(" "+t._s(o)+" ")])}),1),i("dt-input",t._g({ref:"input",staticClass:"combobox__input",attrs:{"aria-label":t.label,label:t.labelVisible?t.label:"",description:t.description,placeholder:t.inputPlaceHolder,"show-messages":t.showInputMessages,messages:t.inputMessages,size:t.size},on:{input:s},model:{value:t.value,callback:function(o){t.value=o},expression:"value"}},t.inputListeners)),i("dt-validation-messages",{attrs:{"validation-messages":t.maxSelectedMessage,"show-messages":t.showValidationMessages}})],1)]}},t.$slots.header?{key:"header",fn:function(){return[i("div",{ref:"header"},[t._t("header")],2)]},proxy:!0}:null,{key:"list",fn:function(){return[i("div",{ref:"list",on:{mousedown:function(s){s.preventDefault()}}},[t.loading?i("div",{staticClass:"combobox__list--loading"},[t._v(" "+t._s(t.loadingMessage)+" ")]):t._t("list")],2)]},proxy:!0},t.$slots.footer?{key:"footer",fn:function(){return[i("div",{ref:"footer"},[t._t("footer")],2)]},proxy:!0}:null],null,!0)})},y=[],_=m.n(b,C,y,!1,null,"e8b2c5a4",null,null);const v=_.exports;exports.CHIP_SIZES=a;exports.CHIP_TOP_POSITION=l;exports.DtRecipeComboboxMultiSelect=v;exports.MULTI_SELECT_SIZES=r;
+"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 popover_constants = require("../chunks/popover_constants-JwBF9h1Z.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-ZaGdAHz7.js");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+require("../chunks/index-gj1jEXP4.js");
+require("../chunks/keyboard_list_navigation-fJnl_Iox.js");
+require("../common/utils.cjs");
+require("../common/constants.cjs");
+require("vue");
+require("./list-item.cjs");
+require("../chunks/list_item_constants-EiqkqZvP.js");
+require("./item-layout.cjs");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue2");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("./skeleton.cjs");
+require("./popover.cjs");
+require("@linusborg/vue-simple-portal");
+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-Axw-wFj2.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
+    };
+  },
+  computed: {
+    inputPlaceHolder() {
+      var _a;
+      return ((_a = this.selectedItems) == null ? void 0 : _a.length) > 0 ? "" : this.placeholder;
+    },
+    chipListeners() {
+      return {
+        ...this.$listeners,
+        keyup: (event) => {
+          this.onChipKeyup(event);
+          this.$emit("keyup", event);
+        }
+      };
+    },
+    inputListeners() {
+      return {
+        ...this.$listeners,
+        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: {
+      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 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();
+  },
+  beforeDestroy() {
+    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;
+      }
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("dt-recipe-combobox-with-popover", { ref: "comboboxWithPopover", attrs: { "label": _vm.label, "show-list": _vm.showList, "max-height": _vm.listMaxHeight, "popover-offset": _vm.popoverOffset, "has-suggestion-list": _vm.hasSuggestionList, "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel, "visually-hidden-close": _vm.visuallyHiddenClose, "content-width": "anchor", "append-to": _vm.appendTo, "transition": _vm.transition }, on: { "select": _vm.onComboboxSelect }, scopedSlots: _vm._u([{ key: "input", fn: function({ onInput }) {
+    return [_c("span", { ref: "inputSlotWrapper", staticClass: "combobox__input-wrapper" }, [_c("span", { ref: "chipsWrapper", staticClass: "combobox__chip-wrapper" }, _vm._l(_vm.selectedItems, function(item) {
+      return _c("dt-chip", _vm._g({ key: item, ref: "chips", refInFor: true, staticClass: "combobox__chip", attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, "size": _vm.CHIP_SIZES[_vm.size] }, on: { "keyup": function($event) {
+        if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "backspace", void 0, $event.key, void 0))
+          return null;
+        return _vm.onChipRemove(item);
+      }, "close": function($event) {
+        return _vm.onChipRemove(item);
+      } } }, _vm.chipListeners), [_vm._v(" " + _vm._s(item) + " ")]);
+    }), 1), _c("dt-input", _vm._g({ ref: "input", staticClass: "combobox__input", attrs: { "aria-label": _vm.label, "label": _vm.labelVisible ? _vm.label : "", "description": _vm.description, "placeholder": _vm.inputPlaceHolder, "show-messages": _vm.showInputMessages, "messages": _vm.inputMessages, "size": _vm.size }, on: { "input": onInput }, model: { value: _vm.value, callback: function($$v) {
+      _vm.value = $$v;
+    }, expression: "value" } }, _vm.inputListeners)), _c("dt-validation-messages", { attrs: { "validation-messages": _vm.maxSelectedMessage, "show-messages": _vm.showValidationMessages } })], 1)];
+  } }, _vm.$slots.header ? { key: "header", fn: function() {
+    return [_c("div", { ref: "header" }, [_vm._t("header")], 2)];
+  }, proxy: true } : null, { key: "list", fn: function() {
+    return [_c("div", { ref: "list", on: { "mousedown": function($event) {
+      $event.preventDefault();
+    } } }, [!_vm.loading ? _vm._t("list") : _c("div", { staticClass: "combobox__list--loading" }, [_vm._v(" " + _vm._s(_vm.loadingMessage) + " ")])], 2)];
+  }, proxy: true }, _vm.$slots.footer ? { key: "footer", fn: function() {
+    return [_c("div", { ref: "footer" }, [_vm._t("footer")], 2)];
+  }, proxy: true } : null], null, true) });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  "e8b2c5a4",
+  null,
+  null
+);
+const combobox_multi_select = __component__.exports;
+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

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-multi-select.cjs","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"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","<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n    :visually-hidden-close=\"visuallyHiddenClose\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"combobox__input-wrapper\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          class=\"combobox__chip-wrapper\"\n        >\n          <dt-chip\n            v-for=\"item in selectedItems\"\n            ref=\"chips\"\n            :key=\"item\"\n            :label-class=\"['d-chip__label']\"\n            class=\"combobox__chip\"\n            :close-button-props=\"{ ariaLabel: 'close' }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.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=\"combobox__input\"\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-on=\"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=\"$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        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"combobox__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/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 {\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\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  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 keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      initialInputPadding: {},\n      resizeWindowObserver: null,\n      originalInputSize: null,\n      CHIP_SIZES,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: event => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        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.originalInputSize = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\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    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\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      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    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (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    onInputKeyup (event) {\n      const key = event.code?.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 (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\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      input.style.paddingLeft = left + 'px';\n\n      // Get the chip size minus the 4px padding\n      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = lastChip.offsetTop + 2;\n\n      // Add padding to Top only if the chips need more space\n      if (chipsSize > this.originalInputSize) {\n        input.style.paddingTop = `${top}px`;\n      }\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};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n  position: relative;\n  display: block;\n}\n\n.combobox__chip-wrapper {\n  position: absolute;\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  padding-left: var(--dt-space-100);\n  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n}\n\n.combobox__chip {\n  margin-top: var(--dt-space-300);\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  z-index: var(--zi-base1);\n  max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n  flex-grow: 1;\n}\n\n.combobox__list--loading {\n  text-align: center;\n  padding-top: var(--dt-space-500);\n  padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":["MULTI_SELECT_SIZES","CHIP_SIZES","CHIP_TOP_POSITION","_sfc_main","DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","inputMessages","validationMessageValidator","t","appendTo","POPOVER_APPEND_TO_VALUES","_a","event","input","item","i","chip","key","target","toLeft","from","to","inputSlotWrapper","top","chipsWrapper","lastChip","left","chipsSize","el","styles","firstChip"],"mappings":"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"}
+{"version":3,"file":"combobox-multi-select.cjs","sources":["../../recipes/comboboxes/combobox_multi_select/combobox_multi_select_constants.js","../../recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue"],"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","<template>\n  <dt-recipe-combobox-with-popover\n    ref=\"comboboxWithPopover\"\n    :label=\"label\"\n    :show-list=\"showList\"\n    :max-height=\"listMaxHeight\"\n    :popover-offset=\"popoverOffset\"\n    :has-suggestion-list=\"hasSuggestionList\"\n    :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n    :visually-hidden-close=\"visuallyHiddenClose\"\n    content-width=\"anchor\"\n    :append-to=\"appendTo\"\n    :transition=\"transition\"\n    @select=\"onComboboxSelect\"\n  >\n    <template #input=\"{ onInput }\">\n      <span\n        ref=\"inputSlotWrapper\"\n        class=\"combobox__input-wrapper\"\n      >\n        <span\n          ref=\"chipsWrapper\"\n          class=\"combobox__chip-wrapper\"\n        >\n          <dt-chip\n            v-for=\"item in selectedItems\"\n            ref=\"chips\"\n            :key=\"item\"\n            :label-class=\"['d-chip__label']\"\n            class=\"combobox__chip\"\n            :close-button-props=\"{ ariaLabel: 'close' }\"\n            :size=\"CHIP_SIZES[size]\"\n            v-on=\"chipListeners\"\n            @keyup.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=\"combobox__input\"\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-on=\"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=\"$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        @mousedown.prevent\n      >\n        <slot\n          v-if=\"!loading\"\n          name=\"list\"\n        />\n        <div\n          v-else\n          class=\"combobox__list--loading\"\n        >\n          {{ loadingMessage }}\n        </div>\n      </div>\n    </template>\n\n    <!-- @slot slot for popover footer -->\n    <template\n      v-if=\"$slots.footer\"\n      #footer\n    >\n      <div ref=\"footer\">\n        <slot name=\"footer\" />\n      </div>\n    </template>\n  </dt-recipe-combobox-with-popover>\n</template>\n\n<script>\nimport DtRecipeComboboxWithPopover from '@/recipes/comboboxes/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 {\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\nexport default {\n  name: 'DtRecipeComboboxMultiSelect',\n\n  components: {\n    DtRecipeComboboxWithPopover,\n    DtInput,\n    DtChip,\n    DtValidationMessages,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\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  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 keyup event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n      */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      value: '',\n      popoverOffset: [0, 4],\n      showValidationMessages: false,\n      initialInputPadding: {},\n      resizeWindowObserver: null,\n      originalInputSize: null,\n      CHIP_SIZES,\n    };\n  },\n\n  computed: {\n    inputPlaceHolder () {\n      return this.selectedItems?.length > 0 ? '' : this.placeholder;\n    },\n\n    chipListeners () {\n      return {\n        ...this.$listeners,\n        keyup: event => {\n          this.onChipKeyup(event);\n          this.$emit('keyup', event);\n        },\n      };\n    },\n\n    inputListeners () {\n      return {\n        ...this.$listeners,\n        input: event => {\n          this.$emit('input', event);\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n\n        keyup: event => {\n          this.onInputKeyup(event);\n          this.$emit('keyup', event);\n        },\n\n        click: event => {\n          if (this.hasSuggestionList) {\n            this.showComboboxList();\n          }\n        },\n      };\n    },\n  },\n\n  watch: {\n    selectedItems: {\n      async handler () {\n        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.originalInputSize = input.getBoundingClientRect().height;\n        this.setInputPadding();\n        this.setChipsTopPosition();\n      },\n    },\n  },\n\n  mounted () {\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    this.initSelectedItems();\n  },\n\n  beforeDestroy () {\n    this.resizeWindowObserver?.unobserve(document.body);\n  },\n\n  methods: {\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      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    getChipButtons () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));\n    },\n\n    getChips () {\n      return this.$refs.chips && this.$refs.chips.map(chip => chip.$el);\n    },\n\n    getLastChipButton () {\n      return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];\n    },\n\n    getLastChip () {\n      return this.$refs.chips && this.getChips()[this.getChips().length - 1];\n    },\n\n    getFirstChip () {\n      return this.$refs.chips && this.getChips()[0];\n    },\n\n    getInput () {\n      return this.$refs.input?.$refs.input;\n    },\n\n    onChipKeyup (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    onInputKeyup (event) {\n      const key = event.code?.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 (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\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      input.style.paddingLeft = left + 'px';\n\n      // Get the chip size minus the 4px padding\n      const chipsSize = chipsWrapper.getBoundingClientRect().height - 4;\n\n      // Get lastChip offsetTop plus 2px of the input padding.\n      const top = lastChip.offsetTop + 2;\n\n      // Add padding to Top only if the chips need more space\n      if (chipsSize > this.originalInputSize) {\n        input.style.paddingTop = `${top}px`;\n      }\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};\n</script>\n\n<style scoped lang=\"less\">\n.combobox__input-wrapper {\n  position: relative;\n  display: block;\n}\n\n.combobox__chip-wrapper {\n  position: absolute;\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  padding-left: var(--dt-space-100);\n  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));\n}\n\n.combobox__chip {\n  margin-top: var(--dt-space-300);\n  margin-left: var(--dt-space-200);\n  margin-right: var(--dt-space-200);\n  z-index: var(--zi-base1);\n  max-width: var(--dt-size-100-percent);\n}\n\n.combobox__input {\n  flex-grow: 1;\n}\n\n.combobox__list--loading {\n  text-align: center;\n  padding-top: var(--dt-space-500);\n  padding-bottom: var(--dt-space-500);\n}\n</style>\n"],"names":["DtRecipeComboboxWithPopover","DtInput","DtChip","DtValidationMessages","SrOnlyCloseButtonMixin","validationMessageValidator","POPOVER_APPEND_TO_VALUES"],"mappings":"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"}