@dialpad/dialtone-vue 2.14.0 → 2.15.0

package/dist/dialtone-vue.umd.js

@@ -1117,6 +1117,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),
@@ -1188,6 +1189,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),
@@ -1196,17 +1198,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)
 });
 
@@ -3245,9 +3252,9 @@ var button_group_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/button_group/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=071e5acc&
-var comboboxvue_type_template_id_071e5acc_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
-var comboboxvue_type_template_id_071e5acc_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=0f032a37&
+var comboboxvue_type_template_id_0f032a37_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
+var comboboxvue_type_template_id_0f032a37_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -3621,9 +3628,9 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
     }
   };
 });
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox_loading-list.vue?vue&type=template&id=49c938eb&
-var combobox_loading_listvue_type_template_id_49c938eb_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((7),function(index){return _c('dt-list-item',{key:index,attrs:{"role":"option","navigation-type":"none"}},[_c('dt-skeleton',{attrs:{"text-option":{ type: 'body' },"offset":0}})],1)}),1)}
-var combobox_loading_listvue_type_template_id_49c938eb_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d&
+var combobox_loading_listvue_type_template_id_07d9971d_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('ol',{staticClass:"d-p0 d-mt8 d-hmx332 d-of-y-auto",attrs:{"aria-busy":"true"}},_vm._l((7),function(index){return _c('dt-list-item',{key:index,attrs:{"role":"option","navigation-type":"none"}},[_c('dt-skeleton',{attrs:{"text-option":{ type: 'body' },"offset":0}})],1)}),1)}
+var combobox_loading_listvue_type_template_id_07d9971d_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/list_item/list_item.vue?vue&type=template&id=5367188c&
@@ -4670,6 +4677,9 @@ var skeleton_component = normalizeComponent(
 //
 //
 //
+//
+//
+//
 
 
 /* harmony default export */ const combobox_loading_listvue_type_script_lang_js_ = ({
@@ -4691,8 +4701,8 @@ var skeleton_component = normalizeComponent(
 ;
 var combobox_loading_list_component = normalizeComponent(
   combobox_combobox_loading_listvue_type_script_lang_js_,
-  combobox_loading_listvue_type_template_id_49c938eb_render,
-  combobox_loading_listvue_type_template_id_49c938eb_staticRenderFns,
+  combobox_loading_listvue_type_template_id_07d9971d_render,
+  combobox_loading_listvue_type_template_id_07d9971d_staticRenderFns,
   false,
   null,
   null,
@@ -4895,6 +4905,7 @@ var combobox_loading_list_component = normalizeComponent(
   },
   methods: {
     onMouseHighlight(e) {
+      if (this.loading) return;
       const liElement = e.target.closest('li');
 
       if (liElement && this.highlightId !== liElement.id) {
@@ -4915,10 +4926,13 @@ var combobox_loading_list_component = normalizeComponent(
     },
 
     afterHighlight() {
+      if (this.loading) return;
       this.$emit('highlight', this.highlightIndex);
     },
 
     onEnterKey() {
+      if (this.loading) return;
+
       if (this.highlightIndex >= 0) {
         this.$emit('select', this.highlightIndex);
       }
@@ -4941,7 +4955,7 @@ var combobox_loading_list_component = normalizeComponent(
     },
 
     onKeyValidation(e, eventHandler) {
-      if (!this.showList || !this.getListElement() || this.loading) {
+      if (!this.showList || !this.getListElement()) {
         return;
       }
 
@@ -4951,7 +4965,7 @@ var combobox_loading_list_component = normalizeComponent(
     setInitialHighlightIndex() {
       if (this.showList) {
         // When the list's is shown, reset the highlight index.
-        // If the list is in loading state, set to -1
+        // If the list is loading, set to -1
         this.setHighlightIndex(this.loading ? -1 : 0);
       }
     }
@@ -4970,8 +4984,8 @@ var combobox_loading_list_component = normalizeComponent(
 ;
 var combobox_component = normalizeComponent(
   combobox_comboboxvue_type_script_lang_js_,
-  comboboxvue_type_template_id_071e5acc_render,
-  comboboxvue_type_template_id_071e5acc_staticRenderFns,
+  comboboxvue_type_template_id_0f032a37_render,
+  comboboxvue_type_template_id_0f032a37_staticRenderFns,
   false,
   null,
   null,
@@ -10981,9 +10995,9 @@ var dropdown_component = normalizeComponent(
 /* harmony default export */ const dropdown = (dropdown_component.exports);
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/emoji/emoji.vue?vue&type=template&id=010f8b36&
-var emojivue_type_template_id_010f8b36_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:_vm.skeletonSizeClass},[_c('dt-skeleton',{directives:[{name:"show",rawName:"v-show",value:(_vm.emojiDataLoading || _vm.imgLoading),expression:"emojiDataLoading || imgLoading"}],class:_vm.skeletonSizeClass,attrs:{"offset":0,"shape-option":{ shape: 'square', contentClass: _vm.skeletonSizeClass, size: 'auto' }}}),(!_vm.emojiDataLoading)?_c('img',{directives:[{name:"show",rawName:"v-show",value:(!_vm.imgLoading),expression:"!imgLoading"}],ref:"emojiImg",class:[_vm.size, _vm.imgClass],attrs:{"aria-label":_vm.emojiLabel,"alt":_vm.emojiAlt,"title":_vm.emojiLabel,"src":_vm.emojiSrc},on:{"load":_vm.imageLoaded,"error":_vm.imageErrored}}):_vm._e()],1)}
-var emojivue_type_template_id_010f8b36_staticRenderFns = []
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/emoji/emoji.vue?vue&type=template&id=85307cb0&
+var emojivue_type_template_id_85307cb0_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{class:_vm.skeletonSizeClass},[_c('dt-skeleton',{directives:[{name:"show",rawName:"v-show",value:(_vm.emojiDataLoading || _vm.imgLoading),expression:"emojiDataLoading || imgLoading"}],class:_vm.skeletonSizeClass,attrs:{"offset":0,"shape-option":{ shape: 'square', contentClass: _vm.skeletonSizeClass, size: 'auto' }}}),(!_vm.emojiDataLoading)?_c('img',{directives:[{name:"show",rawName:"v-show",value:(!_vm.imgLoading),expression:"!imgLoading"}],ref:"emojiImg",class:[_vm.size, _vm.imgClass],attrs:{"aria-label":_vm.emojiLabel,"alt":_vm.emojiAlt,"title":_vm.emojiLabel,"src":_vm.emojiSrc},on:{"load":_vm.imageLoaded,"error":_vm.imageErrored}}):_vm._e()],1)}
+var emojivue_type_template_id_85307cb0_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./components/emoji/emoji_constants.js
@@ -11007,7 +11021,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
@@ -11019,6 +11034,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';
 
@@ -11038,6 +11056,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.
 
@@ -11062,7 +11143,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
@@ -11112,8 +11193,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
@@ -11159,7 +11243,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,
@@ -11212,8 +11297,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)) {
@@ -11228,7 +11320,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() {
@@ -11286,8 +11378,8 @@ function findEmojis(textContent) {
 ;
 var emoji_component = normalizeComponent(
   emoji_emojivue_type_script_lang_js_,
-  emojivue_type_template_id_010f8b36_render,
-  emojivue_type_template_id_010f8b36_staticRenderFns,
+  emojivue_type_template_id_85307cb0_render,
+  emojivue_type_template_id_85307cb0_staticRenderFns,
   false,
   null,
   null,
@@ -11299,6 +11391,125 @@ var emoji_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/emoji/index.js
 
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./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 this.$createElement(emoji, {
+            attrs: {
+              class: 'd-mx4 d-d-inline-block'
+            },
+            props: {
+              code: item,
+              ...this.$attrs
+            }
+          });
+        }
+
+        return item;
+      });
+    },
+
+    /**
+     * Recursively search the Vue virtual DOM to find text
+     * @param VNode
+     * @returns {VNode|*}
+     */
+    searchVNodes(VNode) {
+      // If VNode has no tag, it is a text node
+      if (!VNode.tag && VNode.text) {
+        return this.searchCodes(VNode.text);
+      }
+
+      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];
+      return this.$createElement(VNode.tag, VNode.data, children);
+    },
+
+    // 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(h) {
+    const defaultSlotContent = this.$slots.default || [];
+    return h(this.elementType, this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map(VNode => this.searchVNodes(VNode)));
+  }
+
+});
+;// CONCATENATED MODULE: ./components/emoji_text_wrapper/emoji_text_wrapper.vue?vue&type=script&lang=js&
+ /* harmony default export */ const emoji_text_wrapper_emoji_text_wrappervue_type_script_lang_js_ = (emoji_text_wrappervue_type_script_lang_js_); 
+;// CONCATENATED MODULE: ./components/emoji_text_wrapper/emoji_text_wrapper.vue
+var emoji_text_wrapper_render, emoji_text_wrapper_staticRenderFns
+;
+
+
+
+/* normalize component */
+;
+var emoji_text_wrapper_component = normalizeComponent(
+  emoji_text_wrapper_emoji_text_wrappervue_type_script_lang_js_,
+  emoji_text_wrapper_render,
+  emoji_text_wrapper_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const emoji_text_wrapper = (emoji_text_wrapper_component.exports);
+;// CONCATENATED MODULE: ./components/emoji_text_wrapper/index.js
+
 ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/input/input.vue?vue&type=template&id=39fb0468&
 var inputvue_type_template_id_39fb0468_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"container",staticClass:"base-input",attrs:{"data-qa":"dt-input"}},[_c('label',{staticClass:"base-input__label",attrs:{"aria-details":_vm.$slots.description || _vm.description ? _vm.descriptionKey : undefined,"data-qa":"dt-input-label-wrapper"}},[_vm._t("labelSlot",function(){return [(_vm.label)?_c('div',{ref:"label",class:[
           'base-input__label-text',
@@ -16512,15 +16723,15 @@ var root_layout_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./components/root_layout/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=6f7d8b3c&
-var combobox_with_popovervue_type_template_id_6f7d8b3c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=0ce1b850&
+var combobox_with_popovervue_type_template_id_0ce1b850_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var inputProps = ref.inputProps;
 return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
 var opened = ref.opened;
 var listProps = ref.listProps;
 var clearHighlightIndex = ref.clearHighlightIndex;
-return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":true,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [(_vm.loading)?_c('combobox-loading-list',_vm._b({class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass]},'combobox-loading-list',listProps,false)):_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
-var combobox_with_popovervue_type_template_id_6f7d8b3c_staticRenderFns = []
+return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":true,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass]},'combobox-loading-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
+var combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -16896,8 +17107,8 @@ var combobox_with_popovervue_type_template_id_6f7d8b3c_staticRenderFns = []
 ;
 var combobox_with_popover_component = normalizeComponent(
   combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
-  combobox_with_popovervue_type_template_id_6f7d8b3c_render,
-  combobox_with_popovervue_type_template_id_6f7d8b3c_staticRenderFns,
+  combobox_with_popovervue_type_template_id_0ce1b850_render,
+  combobox_with_popovervue_type_template_id_0ce1b850_staticRenderFns,
   false,
   null,
   null,
@@ -16908,11 +17119,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=1ff44929&
-var combobox_multi_selectvue_type_template_id_1ff44929_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=b69c13e6&
+var combobox_multi_selectvue_type_template_id_b69c13e6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_vm.size},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ 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:"d-fl-grow1 d-mb4",attrs:{"label":_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)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list"},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
-var combobox_multi_selectvue_type_template_id_1ff44929_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_b69c13e6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -17229,7 +17440,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: {
@@ -17502,7 +17713,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 {
@@ -17524,8 +17735,8 @@ const MULTI_SELECT_SIZES = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_1ff44929_render,
-  combobox_multi_selectvue_type_template_id_1ff44929_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_b69c13e6_render,
+  combobox_multi_selectvue_type_template_id_b69c13e6_staticRenderFns,
   false,
   null,
   null,
@@ -17882,6 +18093,7 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
 
 
  /// Recipes