@dialpad/dialtone 9.29.1 → 9.30.0

package/dist/vue2/lib/combobox-multi-select.js

@@ -1,62 +1,65 @@
-import { DtRecipeComboboxWithPopover as r } from "./combobox-with-popover.js";
-import { DtInput as p } from "./input.js";
-import { DtChip as a } from "./chip.js";
-import { DtValidationMessages as l } from "./validation-messages.js";
-import { validationMessageValidator as h } from "./validators.js";
-import { e as u } from "../chunks/popover_constants-qjlEkroB.js";
-import { a as c } from "../chunks/sr_only_close_button-JGole5Xi.js";
-import { n as d } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import "../chunks/index-nIyl_PL6.js";
-import "../chunks/keyboard_list_navigation-F0O8nht0.js";
-import "./utils.js";
-import "./constants.js";
+import { DtRecipeComboboxWithPopover } from "./combobox-with-popover.js";
+import { DtInput } from "./input.js";
+import { DtChip } from "./chip.js";
+import { DtValidationMessages } from "./validation-messages.js";
+import { validationMessageValidator } from "../common/validators.js";
+import { POPOVER_APPEND_TO_VALUES } from "../chunks/popover_constants-Qkpb0yh2.js";
+import { SrOnlyCloseButtonMixin } from "../chunks/sr_only_close_button-81bHIpPu.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import "../chunks/index-DUr1xHR0.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import "../common/utils.js";
+import "../common/constants.js";
 import "vue";
 import "./list-item.js";
-import "../chunks/list_item_constants-LTUc74pD.js";
+import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./skeleton.js";
 import "./popover.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-VuMFkZFH.js";
+import "../chunks/modal-XOr4kiNZ.js";
 import "./button.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "./lazy-show.js";
 import "tippy.js";
-import "../chunks/dropdown_constants-EUcDxBrX.js";
-import "../chunks/input-1tm09l_-.js";
-const m = {
+import "../chunks/dropdown_constants-w1MXGC3Z.js";
+import "../chunks/input-6kbd8Pju.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"
-}, f = {
+};
+const CHIP_SIZES = {
   xs: "xs",
   sm: "xs",
   md: "sm"
-}, g = {
+};
+const CHIP_TOP_POSITION = {
   xs: 1.4,
   sm: 0.4,
   md: 0.2
-}, b = {
+};
+const _sfc_main = {
   name: "DtRecipeComboboxMultiSelect",
   components: {
-    DtRecipeComboboxWithPopover: r,
-    DtInput: p,
-    DtChip: a,
-    DtValidationMessages: l
+    DtRecipeComboboxWithPopover,
+    DtInput,
+    DtChip,
+    DtValidationMessages
   },
-  mixins: [c],
+  mixins: [SrOnlyCloseButtonMixin],
   props: {
     /**
      * String to use for the input label.
      */
     label: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Determines visibility of input label.
@@ -64,7 +67,7 @@ const m = {
      */
     labelVisible: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Description for the input
@@ -86,14 +89,16 @@ const m = {
     inputMessages: {
       type: Array,
       default: () => [],
-      validator: (t) => h(t)
+      validator: (inputMessages) => {
+        return validationMessageValidator(inputMessages);
+      }
     },
     /**
      * Show input validation message
      */
     showInputMessages: {
       type: Boolean,
-      default: !0
+      default: true
     },
     // @TODO: https://dialpad.atlassian.net/browse/DP-52324
     // type: {
@@ -106,7 +111,7 @@ const m = {
      */
     loading: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * The message when the list is loading
@@ -165,7 +170,7 @@ const m = {
      */
     hasSuggestionList: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Size of the chip, one of `xs`, `sm`, `md`
@@ -173,7 +178,7 @@ const m = {
     size: {
       type: String,
       default: "md",
-      validator: (t) => Object.values(m).includes(t)
+      validator: (t) => Object.values(MULTI_SELECT_SIZES).includes(t)
     },
     /**
      * Sets the element to which the popover is going to append to.
@@ -183,7 +188,9 @@ const m = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (t) => u.includes(t) || t instanceof HTMLElement
+      validator: (appendTo) => {
+        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
     },
     /**
      * Named transition when the content display is toggled.
@@ -235,37 +242,44 @@ const m = {
     return {
       value: "",
       popoverOffset: [0, 4],
-      showValidationMessages: !1,
+      showValidationMessages: false,
       initialInputPadding: {},
       resizeWindowObserver: null,
       originalInputSize: null,
-      CHIP_SIZES: f
+      CHIP_SIZES
     };
   },
   computed: {
     inputPlaceHolder() {
-      var t;
-      return ((t = this.selectedItems) == null ? void 0 : t.length) > 0 ? "" : this.placeholder;
+      var _a;
+      return ((_a = this.selectedItems) == null ? void 0 : _a.length) > 0 ? "" : this.placeholder;
     },
     chipListeners() {
       return {
         ...this.$listeners,
-        keyup: (t) => {
-          this.onChipKeyup(t), this.$emit("keyup", t);
+        keyup: (event) => {
+          this.onChipKeyup(event);
+          this.$emit("keyup", event);
         }
       };
     },
     inputListeners() {
       return {
         ...this.$listeners,
-        input: (t) => {
-          this.$emit("input", t), this.hasSuggestionList && this.showComboboxList();
+        input: (event) => {
+          this.$emit("input", event);
+          if (this.hasSuggestionList) {
+            this.showComboboxList();
+          }
         },
-        keyup: (t) => {
-          this.onInputKeyup(t), this.$emit("keyup", t);
+        keyup: (event) => {
+          this.onInputKeyup(event);
+          this.$emit("keyup", event);
         },
-        click: (t) => {
-          this.hasSuggestionList && this.showComboboxList();
+        click: (event) => {
+          if (this.hasSuggestionList) {
+            this.showComboboxList();
+          }
         }
       };
     }
@@ -277,52 +291,72 @@ const m = {
       }
     },
     async label() {
-      await this.$nextTick(), this.setChipsTopPosition();
+      await this.$nextTick();
+      this.setChipsTopPosition();
     },
     async description() {
-      await this.$nextTick(), this.setChipsTopPosition();
+      await this.$nextTick();
+      this.setChipsTopPosition();
     },
     size: {
       async handler() {
         await this.$nextTick();
-        const t = this.getInput();
-        this.revertInputPadding(t), this.originalInputSize = t.getBoundingClientRect().height, this.setInputPadding(), this.setChipsTopPosition();
+        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();
+      this.setChipsTopPosition();
+      this.setInputPadding();
+    });
+    this.resizeWindowObserver.observe(document.body);
+    this.initSelectedItems();
   },
   beforeDestroy() {
-    var t;
-    (t = this.resizeWindowObserver) == null || t.unobserve(document.body);
+    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();
+      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();
+    onChipRemove(item) {
+      var _a;
+      this.$emit("remove", item);
+      (_a = this.$refs.input) == null ? void 0 : _a.focus();
     },
-    onComboboxSelect(t) {
-      this.value = "", this.$emit("select", t);
+    onComboboxSelect(i) {
+      this.value = "";
+      this.$emit("select", i);
     },
     showComboboxList() {
-      var t;
-      this.showList == null && ((t = this.$refs.comboboxWithPopover) == null || t.showComboboxList());
+      var _a;
+      if (this.showList != null) {
+        return;
+      }
+      (_a = this.$refs.comboboxWithPopover) == null ? void 0 : _a.showComboboxList();
     },
     closeComboboxList() {
-      var t;
-      this.showList == null && ((t = this.$refs.comboboxWithPopover) == null || t.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((t) => t.$el.querySelector("button"));
+      return this.$refs.chips && this.$refs.chips.map((chip) => chip.$el.querySelector("button"));
     },
     getChips() {
-      return this.$refs.chips && this.$refs.chips.map((t) => t.$el);
+      return this.$refs.chips && this.$refs.chips.map((chip) => chip.$el);
     },
     getLastChipButton() {
       return this.$refs.chips && this.getChipButtons()[this.getChipButtons().length - 1];
@@ -334,100 +368,153 @@ const m = {
       return this.$refs.chips && this.getChips()[0];
     },
     getInput() {
-      var t;
-      return (t = this.$refs.input) == null ? void 0 : t.$refs.input;
-    },
-    onChipKeyup(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));
+      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(t) {
-      var i;
-      const e = (i = t.code) == null ? void 0 : i.toLowerCase();
-      this.selectedItems.length > 0 && t.target.selectionStart === 0 && (e === "backspace" || e === "arrowleft") && this.moveFromInputToChip();
+    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 t;
-      this.getLastChipButton().focus(), (t = this.$refs.input) == null || t.blur(), this.closeComboboxList();
+      var _a;
+      this.getLastChipButton().focus();
+      (_a = this.$refs.input) == null ? void 0 : _a.blur();
+      this.closeComboboxList();
     },
     moveFromChipToInput() {
-      var t;
-      this.getLastChipButton().blur(), (t = this.$refs.input) == null || t.focus(), this.showComboboxList();
-    },
-    navigateBetweenChips(t, e) {
-      var o;
-      const i = this.getChipButtons().indexOf(t), s = e ? 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());
+      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 t = this.getInput();
-      if (!t)
+      const input = this.getInput();
+      if (!input)
         return;
-      const e = this.$refs.inputSlotWrapper, i = t.getBoundingClientRect().top - e.getBoundingClientRect().top, s = this.$refs.chipsWrapper;
-      s.style.top = i - g[this.size] + "px";
+      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 t = this.getLastChip(), e = this.getInput(), i = this.$refs.chipsWrapper;
-      if (!e || (this.revertInputPadding(e), this.popoverOffset = [0, 4], !t))
+      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 s = t.offsetLeft + this.getFullWidth(t);
-      e.style.paddingLeft = s + "px";
-      const o = i.getBoundingClientRect().height - 4, n = t.offsetTop + 2;
-      o > this.originalInputSize && (e.style.paddingTop = `${n}px`);
+      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(t) {
-      t.style.paddingLeft = "", t.style.paddingTop = "", t.style.paddingBottom = "";
+    revertInputPadding(input) {
+      input.style.paddingLeft = "";
+      input.style.paddingTop = "";
+      input.style.paddingBottom = "";
     },
-    getFullWidth(t) {
-      const e = window.getComputedStyle(t);
-      return t.offsetWidth + parseInt(e.marginLeft) + parseInt(e.marginRight);
+    getFullWidth(el) {
+      const styles = window.getComputedStyle(el);
+      return el.offsetWidth + parseInt(styles.marginLeft) + parseInt(styles.marginRight);
     },
     setInputMinWidth() {
-      const t = this.getFirstChip(), e = this.getInput();
-      e && (t ? e.style.minWidth = this.getFullWidth(t) + 4 + "px" : e.style.minWidth = "");
+      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() {
-      this.maxSelected !== 0 && (this.selectedItems.length > this.maxSelected ? (this.showValidationMessages = !0, this.$emit("max-selected")) : this.showValidationMessages = !1);
+      if (this.maxSelected === 0)
+        return;
+      if (this.selectedItems.length > this.maxSelected) {
+        this.showValidationMessages = true;
+        this.$emit("max-selected");
+      } else {
+        this.showValidationMessages = false;
+      }
     }
   }
 };
-var C = 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, "popover-offset": e.popoverOffset, "has-suggestion-list": e.hasSuggestionList, "visually-hidden-close-label": e.visuallyHiddenCloseLabel, "visually-hidden-close": e.visuallyHiddenClose, "content-width": "anchor", "append-to": e.appendTo, transition: e.transition }, on: { select: e.onComboboxSelect }, scopedSlots: e._u([{ key: "input", fn: function({ onInput: s }) {
-    return [i("span", { ref: "inputSlotWrapper", staticClass: "combobox__input-wrapper" }, [i("span", { ref: "chipsWrapper", staticClass: "combobox__chip-wrapper" }, e._l(e.selectedItems, function(o) {
-      return i("dt-chip", e._g({ key: o, ref: "chips", refInFor: !0, staticClass: "combobox__chip", attrs: { "label-class": ["d-chip__label"], "close-button-props": { ariaLabel: "close" }, size: e.CHIP_SIZES[e.size] }, on: { keyup: function(n) {
-        return !n.type.indexOf("key") && e._k(n.keyCode, "backspace", void 0, n.key, void 0) ? null : e.onChipRemove(o);
-      }, close: function(n) {
-        return e.onChipRemove(o);
-      } } }, e.chipListeners), [e._v(" " + e._s(o) + " ")]);
-    }), 1), i("dt-input", e._g({ ref: "input", staticClass: "combobox__input", attrs: { "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: s }, model: { value: e.value, callback: function(o) {
-      e.value = o;
-    }, 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", on: { mousedown: function(s) {
-      s.preventDefault();
-    } } }, [e.loading ? i("div", { staticClass: "combobox__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) });
-}, y = [], x = /* @__PURE__ */ d(
-  b,
-  C,
-  y,
-  !1,
+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__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   "e8b2c5a4",
   null,
   null
 );
-const J = x.exports;
+const combobox_multi_select = __component__.exports;
 export {
-  f as CHIP_SIZES,
-  g as CHIP_TOP_POSITION,
-  J as DtRecipeComboboxMultiSelect,
-  m as MULTI_SELECT_SIZES
+  CHIP_SIZES,
+  CHIP_TOP_POSITION,
+  combobox_multi_select as DtRecipeComboboxMultiSelect,
+  MULTI_SELECT_SIZES
 };
 //# sourceMappingURL=combobox-multi-select.js.map