@dialpad/dialtone-vue 3.7.0 → 3.8.0

package/dist/dialtone-vue.common.js

@@ -1119,6 +1119,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtCombobox": () => (/* reexport */ combobox),
   "DtDropdown": () => (/* reexport */ dropdown),
   "DtEmoji": () => (/* reexport */ emoji),
+  "DtEmojiTextWrapper": () => (/* reexport */ emoji_text_wrapper),
   "DtGroupableInputMixin": () => (/* reexport */ GroupableMixin),
   "DtInput": () => (/* reexport */ input_input),
   "DtInputGroup": () => (/* reexport */ input_group_input_group),
@@ -1190,6 +1191,7 @@ __webpack_require__.d(__webpack_exports__, {
   "USER_STATUS_COLOR_MODIFIERS": () => (/* reexport */ USER_STATUS_COLOR_MODIFIERS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "codeToEmojiData": () => (/* reexport */ codeToEmojiData),
+  "customEmojiAssetUrl": () => (/* reexport */ customEmojiAssetUrl),
   "defaultEmojiAssetUrl": () => (/* reexport */ defaultEmojiAssetUrl),
   "emojiFileExtensionLarge": () => (/* reexport */ emojiFileExtensionLarge),
   "emojiFileExtensionSmall": () => (/* reexport */ emojiFileExtensionSmall),
@@ -1198,17 +1200,22 @@ __webpack_require__.d(__webpack_exports__, {
   "emojiJson": () => (/* reexport */ emojiJson),
   "emojiVersion": () => (/* reexport */ emojiVersion),
   "filterFormattedMessages": () => (/* reexport */ filterFormattedMessages),
+  "filterValidShortCodes": () => (/* reexport */ filterValidShortCodes),
   "findEmojis": () => (/* reexport */ findEmojis),
   "findShortCodes": () => (/* reexport */ findShortCodes),
   "formatMessages": () => (/* reexport */ formatMessages),
+  "getEmojiData": () => (/* reexport */ getEmojiData),
   "getEmojiJson": () => (/* reexport */ getEmojiJson),
   "getUniqueString": () => (/* reexport */ getUniqueString),
   "getValidationState": () => (/* reexport */ getValidationState),
+  "setCustomEmojiJson": () => (/* reexport */ setCustomEmojiJson),
+  "setCustomEmojiUrl": () => (/* reexport */ setCustomEmojiUrl),
   "setEmojiAssetUrlLarge": () => (/* reexport */ setEmojiAssetUrlLarge),
   "setEmojiAssetUrlSmall": () => (/* reexport */ setEmojiAssetUrlSmall),
   "shortcodeToEmojiData": () => (/* reexport */ shortcodeToEmojiData),
   "stringToUnicode": () => (/* reexport */ stringToUnicode),
   "unicodeToString": () => (/* reexport */ unicodeToString),
+  "validateCustomEmojiJson": () => (/* reexport */ validateCustomEmojiJson),
   "validationMessageValidator": () => (/* reexport */ validationMessageValidator)
 });
 
@@ -10255,10 +10262,10 @@ const dropdown_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(dropdownv
 /* harmony default export */ const dropdown = (dropdown_exports_);
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=010f8b36
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=85307cb0
 
-const emojivue_type_template_id_010f8b36_hoisted_1 = ["aria-label", "alt", "title", "src"];
-function emojivue_type_template_id_010f8b36_render(_ctx, _cache, $props, $setup, $data, $options) {
+const emojivue_type_template_id_85307cb0_hoisted_1 = ["aria-label", "alt", "title", "src"];
+function emojivue_type_template_id_85307cb0_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_skeleton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-skeleton");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
@@ -10285,9 +10292,9 @@ function emojivue_type_template_id_010f8b36_render(_ctx, _cache, $props, $setup,
     onError: _cache[1] || (_cache[1] = function () {
       return $options.imageErrored && $options.imageErrored(...arguments);
     })
-  }, null, 42, emojivue_type_template_id_010f8b36_hoisted_1)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$data.imgLoading]]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+  }, null, 42, emojivue_type_template_id_85307cb0_hoisted_1)), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$data.imgLoading]]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
 }
-;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=010f8b36
+;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=85307cb0
 
 ;// CONCATENATED MODULE: ./components/emoji/emoji_constants.js
 const EMOJI_SIZES = {
@@ -10310,7 +10317,8 @@ var emoji_regex_default = /*#__PURE__*/__webpack_require__.n(emoji_regex);
 ;// CONCATENATED MODULE: ./common/emoji.js
 
 const emojiVersion = '6.6';
-const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/'; // Used for emoji 16px and smaller
+const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';
+let customEmojiAssetUrl = null; // Used for emoji 16px and smaller
 
 let emojiImageUrlSmall = defaultEmojiAssetUrl;
 let emojiFileExtensionSmall = '.png'; // Used for emoji larger than 16px
@@ -10322,6 +10330,9 @@ async function getEmojiJson() {
   if (emojiJson) return;
   emojiJson = await __webpack_require__.e(/* import() */ 370).then(__webpack_require__.t.bind(__webpack_require__, 370, 19));
 }
+function getEmojiData() {
+  return emojiJson;
+}
 function setEmojiAssetUrlSmall(url) {
   let fileExtension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '.png';
 
@@ -10341,6 +10352,69 @@ function setEmojiAssetUrlLarge(url) {
 
   emojiImageUrlLarge = url;
   emojiFileExtensionLarge = fileExtension;
+}
+function setCustomEmojiUrl(url) {
+  customEmojiAssetUrl = url;
+}
+function setCustomEmojiJson(json) {
+  validateCustomEmojiJson(json);
+}
+/**
+ * Validate custom emoji json
+ */
+
+async function validateCustomEmojiJson(json) {
+  await getEmojiJson();
+  const customEmojiProps = ['extension', 'custom'];
+  const customEmojiRequiredProps = ['name', 'category', 'shortname', 'extension', 'custom'];
+  /**
+   * Update single emoji properties.
+   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.
+   * If not exists, will add the property to the emojiData object.
+   */
+
+  const _updateNativeEmojiData = (emojiData, propName, propValue) => {
+    if (emojiData[propName] === undefined) {
+      if (!customEmojiProps.includes(propName)) {
+        return;
+      } // new property to add
+
+
+      emojiData[propName] = propValue;
+    } else {
+      if (Array.isArray(emojiData[propName])) {
+        emojiData[propName] = emojiData[propName].concat(propValue);
+      } else {
+        emojiData[propName] = propValue;
+      }
+    }
+  };
+
+  Object.entries(json).forEach(item => {
+    const [customEmojiKey, customEmojiValue] = item;
+
+    if (customEmojiKey in emojiJson) {
+      // custom emoji exists in emoji json which means to update some data in the native emoji
+      const emojiData = emojiJson[customEmojiKey];
+
+      for (const customEmojiPropertyName in customEmojiValue) {
+        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];
+
+        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);
+      }
+    } else {
+      // new custom emoji
+      const _validateRequiredProps = () => customEmojiRequiredProps.every(val => {
+        return customEmojiValue[val] !== undefined;
+      });
+
+      if (_validateRequiredProps()) {
+        emojiJson[customEmojiKey] = customEmojiValue;
+      } else {
+        console.error('The following custom emoji doesn\'t contain the required properties:', customEmojiValue);
+      }
+    }
+  });
 } // recursively searches the emoji data object containing data for all emojis
 // and returns the object with the specified shortcode.
 
@@ -10365,7 +10439,7 @@ function shortcodeToEmojiData(shortcode) {
   }
 
   let reference;
-  f(emojiJson, null);
+  f(getEmojiData(), null);
   return reference;
 } // Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects
 // as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender
@@ -10415,8 +10489,11 @@ async function codeToEmojiData(code) {
 // @returns {string[]}
 
 function findShortCodes(textContent) {
-  const shortCodes = textContent.match(/:\w+:/g);
-  const filtered = shortCodes ? shortCodes.filter(code => shortcodeToEmojiData(code)) : [];
+  const shortcodes = textContent.match(/:\w+:/g);
+  return filterValidShortCodes(shortcodes);
+}
+function filterValidShortCodes(shortcodes) {
+  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 } // Finds every emoji in slot text
 // removes duplicates
@@ -10439,7 +10516,8 @@ function findEmojis(textContent) {
   props: {
     /**
       * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
-      * See https://emojipedia.org/joypixels/ for all supported shortcode/unicode.
+      * See https://emojipedia.org/joypixels/ for all supported shortcode/unicode or the docs
+      * for setting up custom emojis.
       */
     code: {
       type: String,
@@ -10492,8 +10570,15 @@ function findEmojis(textContent) {
     },
 
     emojiSrc() {
+      var _this$emojiData;
+
       if (!this.emojiDataValid) {
         return 'invalid';
+      } // custom emoji
+
+
+      if ((_this$emojiData = this.emojiData) !== null && _this$emojiData !== void 0 && _this$emojiData.custom) {
+        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
       }
 
       if (['d-svg--size14', 'd-svg--size16'].includes(this.size)) {
@@ -10508,7 +10593,7 @@ function findEmojis(textContent) {
         return undefined;
       }
 
-      return stringToUnicode(this.emojiData.unicode_output);
+      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;
     },
 
     emojiLabel() {
@@ -10562,12 +10647,117 @@ function findEmojis(textContent) {
 
 
 ;
-const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_type_script_lang_js, [['render',emojivue_type_template_id_010f8b36_render]])
+const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_type_script_lang_js, [['render',emojivue_type_template_id_85307cb0_render]])
 
 /* harmony default export */ const emoji = (emoji_exports_);
 ;// CONCATENATED MODULE: ./components/emoji/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji_text_wrapper/emoji_text_wrapper.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ const emoji_text_wrappervue_type_script_lang_js = ({
+  name: 'DtEmojiTextWrapper',
+  components: {
+    DtEmoji: emoji
+  },
+  inheritAttrs: false,
+  props: {
+    /**
+     * The type of element to use for the wrapper.
+     */
+    elementType: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  data() {
+    return {
+      loadingEmojiJson: true
+    };
+  },
+
+  async created() {
+    await getEmojiJson();
+    this.loadingEmojiJson = false;
+  },
+
+  methods: {
+    /**
+     * Replaces the valid codes from the text content with a DtEmoji component.
+     * @returns {Array<VNode|string>}
+     */
+    replaceDtEmojis(replaceList, textContent) {
+      const regexp = new RegExp("(".concat(replaceList.join('|'), ")"), 'g');
+      const split = textContent.split(regexp);
+      return split.map(item => {
+        if (replaceList.includes(item)) {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.h)(emoji, { ...this.$attrs,
+            class: 'd-mx4 d-d-inline-block',
+            code: item
+          });
+        }
+
+        return item;
+      });
+    },
+
+    /**
+     * Recursively search the Vue virtual DOM to find text
+     * @param VNode
+     * @returns {VNode|*}
+     */
+    searchVNodes(VNode) {
+      var _VNode$props;
+
+      if (typeof VNode === 'string') return this.searchCodes(VNode);
+      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);
+      if ((_VNode$props = VNode.props) !== null && _VNode$props !== void 0 && _VNode$props.innerHTML) return this.searchVNodes(VNode.props.innerHTML);
+      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.h)(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));
+    },
+
+    // TODO: Find a way to crawl vue components
+    replaceVueComponentVNodeContent(VNode) {//
+    },
+
+    /**
+     * Find codes in text.
+     * @param textContent string
+     * @returns {Array<VNode|string>|string}
+     */
+    searchCodes(textContent) {
+      const shortcodes = findShortCodes(textContent);
+      const emojis = findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
+      if (replaceList.length === 0) return textContent;
+      return this.replaceDtEmojis(replaceList, textContent);
+    }
+
+  },
+
+  render() {
+    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];
+    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.h)(this.elementType, {
+      'data-qa': 'emoji-text-wrapper',
+      class: this.$attrs.class
+    }, this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map(VNode => this.searchVNodes(VNode)));
+  }
+
+});
+;// CONCATENATED MODULE: ./components/emoji_text_wrapper/emoji_text_wrapper.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/emoji_text_wrapper/emoji_text_wrapper.vue
+
+
+
+const emoji_text_wrapper_exports_ = emoji_text_wrappervue_type_script_lang_js;
+
+/* harmony default export */ const emoji_text_wrapper = (emoji_text_wrapper_exports_);
+;// CONCATENATED MODULE: ./components/emoji_text_wrapper/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/input/input.vue?vue&type=template&id=1204d99d
 
 const inputvue_type_template_id_1204d99d_hoisted_1 = {
@@ -15672,30 +15862,30 @@ const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=4f85e207
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=d29708fc
 
-const combobox_multi_selectvue_type_template_id_4f85e207_hoisted_1 = {
+const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_1 = {
   ref: "inputSlotWrapper",
   class: "d-ps-relative"
 };
-const combobox_multi_selectvue_type_template_id_4f85e207_hoisted_2 = {
+const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_2 = {
   ref: "chipsWrapper",
   class: "d-ps-absolute d-mx2"
 };
-const combobox_multi_selectvue_type_template_id_4f85e207_hoisted_3 = {
+const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_3 = {
   ref: "header"
 };
-const combobox_multi_selectvue_type_template_id_4f85e207_hoisted_4 = {
+const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_4 = {
   ref: "list"
 };
-const combobox_multi_selectvue_type_template_id_4f85e207_hoisted_5 = {
+const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_5 = {
   key: 1,
   class: "d-ta-center d-py16"
 };
-const combobox_multi_selectvue_type_template_id_4f85e207_hoisted_6 = {
+const combobox_multi_selectvue_type_template_id_d29708fc_hoisted_6 = {
   ref: "footer"
 };
-function combobox_multi_selectvue_type_template_id_4f85e207_render(_ctx, _cache, $props, $setup, $data, $options) {
+function combobox_multi_selectvue_type_template_id_d29708fc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
 
   const _component_dt_input = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-input");
@@ -15718,7 +15908,7 @@ function combobox_multi_selectvue_type_template_id_4f85e207_render(_ctx, _cache,
       let {
         onInput
       } = _ref;
-      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_4f85e207_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_4f85e207_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_2, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)($props.selectedItems, item => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
           ref_for: true,
           ref: "chips",
@@ -15753,19 +15943,19 @@ function combobox_multi_selectvue_type_template_id_4f85e207_render(_ctx, _cache,
         "show-messages": $data.showValidationMessages
       }, null, 8, ["validation-messages", "show-messages"])], 512)];
     }),
-    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_4f85e207_hoisted_4, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+    list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_4, [!$props.loading ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
       key: 0
-    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_4f85e207_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 512)]),
+    }) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_5, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.loadingMessage), 1))], 512)]),
     _: 2
   }, [_ctx.$slots.header ? {
     name: "header",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_4f85e207_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)])
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "header")], 512)])
   } : undefined, _ctx.$slots.footer ? {
     name: "footer",
-    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_4f85e207_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)])
+    fn: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", combobox_multi_selectvue_type_template_id_d29708fc_hoisted_6, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 512)])
   } : undefined]), 1032, ["show-list", "max-height", "popover-offset", "has-suggestion-list", "onSelect"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=4f85e207
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=d29708fc
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
 // The item list for default story
@@ -15982,7 +16172,7 @@ const MULTI_SELECT_SIZES = {
     },
 
     /**
-     * Max select message when the max selections has been reached with the structure:
+     * Max select message when the max selections is exceeded with the structure:
      * `[{"message": string, "type": VALIDATION_MESSAGE_TYPES }]`
      */
     maxSelectedMessage: {
@@ -16042,10 +16232,19 @@ const MULTI_SELECT_SIZES = {
       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();
+          }
         }
       };
     }
@@ -16103,6 +16302,22 @@ const MULTI_SELECT_SIZES = {
       this.$emit('select', i);
     },
 
+    showComboboxList() {
+      if (this.showList != null) {
+        return;
+      }
+
+      this.$refs.comboboxWithPopover.showComboboxList();
+    },
+
+    closeComboboxList() {
+      if (this.showList != null) {
+        return;
+      }
+
+      this.$refs.comboboxWithPopover.closeComboboxList();
+    },
+
     getChipButtons() {
       return this.$refs.chips && this.$refs.chips.map(chip => chip.$el.querySelector('button'));
     },
@@ -16164,13 +16379,13 @@ const MULTI_SELECT_SIZES = {
     moveFromInputToChip() {
       this.getLastChipButton().focus();
       this.$refs.input.blur();
-      this.$refs.comboboxWithPopover.closeComboboxList();
+      this.closeComboboxList();
     },
 
     moveFromChipToInput() {
       this.getLastChipButton().blur();
       this.$refs.input.focus();
-      this.$refs.comboboxWithPopover.showComboboxList();
+      this.showComboboxList();
     },
 
     navigateBetweenChips(target, toLeft) {
@@ -16183,7 +16398,7 @@ const MULTI_SELECT_SIZES = {
 
       this.getChipButtons()[from].blur();
       this.getChipButtons()[to].focus();
-      this.$refs.comboboxWithPopover.closeComboboxList();
+      this.closeComboboxList();
     },
 
     setChipsTopPosition() {
@@ -16253,7 +16468,7 @@ const MULTI_SELECT_SIZES = {
     checkMaxSelected() {
       if (this.maxSelected === 0) return;
 
-      if (this.selectedItems.length >= this.maxSelected) {
+      if (this.selectedItems.length > this.maxSelected) {
         this.showValidationMessages = true;
         this.$emit('max-selected');
       } else {
@@ -16271,7 +16486,7 @@ const MULTI_SELECT_SIZES = {
 
 
 ;
-const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_4f85e207_render]])
+const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_multi_selectvue_type_script_lang_js, [['render',combobox_multi_selectvue_type_template_id_d29708fc_render]])
 
 /* harmony default export */ const combobox_multi_select = (combobox_multi_select_exports_);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
@@ -16562,6 +16777,7 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 
 
 
+
 
 
  /// Recipes