@dialpad/dialtone-vue 3.7.0 → 3.10.0

package/dist/dialtone-vue.common.js

@@ -97,7 +97,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".dt-list-section[tabindex=\"-1\"]:focu
 
 /***/ }),
 
-/***/ 393:
+/***/ 515:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -193,7 +193,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".skeleton-placeholder{display:flex;str
 
 /***/ }),
 
-/***/ 71:
+/***/ 708:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -457,19 +457,19 @@ var update = add("69c9bdad", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 675:
+/***/ 683:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(393);
+var content = __webpack_require__(515);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("3123c041", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("85e99f52", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -521,19 +521,19 @@ var update = add("6f5d0b60", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 126:
+/***/ 408:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(71);
+var content = __webpack_require__(708);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(402)/* ["default"] */ .Z)
-var update = add("762f0436", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("6d7a0b20", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -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),
@@ -1187,9 +1188,11 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_DIRECTIONS": () => (/* reexport */ TOOLTIP_DIRECTIONS),
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
+  "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
   "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 +1201,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)
 });
 
@@ -2916,15 +2924,17 @@ const button_group_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(butto
 ;// CONCATENATED MODULE: ./components/button_group/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/combobox/combobox.vue?vue&type=template&id=1cf89689
+;// 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/combobox/combobox.vue?vue&type=template&id=83040a60
 
-const comboboxvue_type_template_id_1cf89689_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_1cf89689_hoisted_2 = {
+const comboboxvue_type_template_id_83040a60_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
+const comboboxvue_type_template_id_83040a60_hoisted_2 = {
   "data-qa": "dt-combobox-input-wrapper"
 };
-function comboboxvue_type_template_id_1cf89689_render(_ctx, _cache, $props, $setup, $data, $options) {
+function comboboxvue_type_template_id_83040a60_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
+  const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
+
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     role: "combobox",
     "aria-expanded": $props.showList.toString(),
@@ -2932,7 +2942,7 @@ function comboboxvue_type_template_id_1cf89689_render(_ctx, _cache, $props, $set
     "aria-owns": $props.listId,
     "aria-haspopup": "listbox",
     onKeydown: [_cache[3] || (_cache[3] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEscapeKey'), ["stop"]), ["esc"])), _cache[4] || (_cache[4] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEnterKey'), ["exact"]), ["enter"])), _cache[5] || (_cache[5] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onUpKey'), ["stop", "prevent"]), ["up"])), _cache[6] || (_cache[6] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onDownKey'), ["stop", "prevent"]), ["down"])), _cache[7] || (_cache[7] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onHomeKey'), ["stop", "prevent"]), ["home"])), _cache[8] || (_cache[8] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withKeys)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)($event => $options.onKeyValidation($event, 'onEndKey'), ["stop", "prevent"]), ["end"]))]
-  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_1cf89689_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
+  }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", comboboxvue_type_template_id_83040a60_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
     inputProps: $options.inputProps
   })]), $props.showList ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
     key: 0,
@@ -2947,16 +2957,22 @@ function comboboxvue_type_template_id_1cf89689_render(_ctx, _cache, $props, $set
     onMousemoveCapture: _cache[2] || (_cache[2] = function () {
       return $options.onMouseHighlight && $options.onMouseHighlight(...arguments);
     })
-  }, [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, [$data.isLoading && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0
-  }, $options.listProps)), null, 16)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
-    key: 1,
+  }, $options.listProps)), null, 16)) : $data.isListEmpty && !$props.listRenderedOutside ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    key: 1
+  }, $options.listProps, {
+    message: $props.emptyStateMessage
+  }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+    key: 2,
     listProps: $options.listProps,
     opened: $options.onOpen,
-    clearHighlightIndex: $options.clearHighlightIndex
-  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_1cf89689_hoisted_1);
+    clearHighlightIndex: $options.clearHighlightIndex,
+    isLoading: $data.isLoading,
+    isListEmpty: $data.isListEmpty
+  })], 544)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 40, comboboxvue_type_template_id_83040a60_hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=1cf89689
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=83040a60
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -3259,22 +3275,20 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
         this.setHighlightIndex(this._itemsLength() - 1);
       },
 
-      async setHighlightIndex(num) {
+      setHighlightIndex(num) {
         this[indexKey] = num;
         this[idKey] = this._getItemId(num);
 
         if (this._itemsLength() && afterHighlightMethod) {
-          await this.$nextTick();
           this[afterHighlightMethod](num);
         }
       },
 
-      async setHighlightId(id) {
+      setHighlightId(id) {
         this[idKey] = id;
         this[indexKey] = this._getItemIndex(id);
 
         if (this._itemsLength() && afterHighlightMethod) {
-          await this.$nextTick();
           this[afterHighlightMethod](this._getItemIndex(id));
         }
       },
@@ -3333,14 +3347,18 @@ const ERROR_INVALID_LIST_ELEMENT = 'listElementKey is required or the referenced
     }
   };
 });
-;// 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/combobox/combobox_loading-list.vue?vue&type=template&id=49c938eb
+;// 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/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d
 
-function combobox_loading_listvue_type_template_id_49c938eb_render(_ctx, _cache, $props, $setup, $data, $options) {
+const combobox_loading_listvue_type_template_id_07d9971d_hoisted_1 = {
+  class: "d-p0 d-mt8 d-hmx332 d-of-y-auto",
+  "aria-busy": "true"
+};
+function combobox_loading_listvue_type_template_id_07d9971d_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_skeleton = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-skeleton");
 
   const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", null, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (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)(7, index => {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ol", combobox_loading_listvue_type_template_id_07d9971d_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (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)(7, index => {
     return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_list_item, {
       key: index,
       role: "option",
@@ -3356,7 +3374,7 @@ function combobox_loading_listvue_type_template_id_49c938eb_render(_ctx, _cache,
     }, 1024);
   }), 64))]);
 }
-;// CONCATENATED MODULE: ./components/combobox/combobox_loading-list.vue?vue&type=template&id=49c938eb
+;// CONCATENATED MODULE: ./components/combobox/combobox_loading-list.vue?vue&type=template&id=07d9971d
 
 ;// 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/list_item/list_item.vue?vue&type=template&id=237d2c10
 
@@ -4250,17 +4268,64 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
 
 
 ;
-const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_loading_listvue_type_script_lang_js, [['render',combobox_loading_listvue_type_template_id_49c938eb_render]])
+const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_loading_listvue_type_script_lang_js, [['render',combobox_loading_listvue_type_template_id_07d9971d_render]])
 
 /* harmony default export */ const combobox_loading_list = (combobox_loading_list_exports_);
+;// 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/combobox/combobox_empty-list.vue?vue&type=template&id=85c21112
+
+const combobox_empty_listvue_type_template_id_85c21112_hoisted_1 = {
+  class: "d-p0",
+  "data-qa": "dt-combobox-empty-list"
+};
+function combobox_empty_listvue_type_template_id_85c21112_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_list_item = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-list-item");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("ol", combobox_empty_listvue_type_template_id_85c21112_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_list_item, {
+    class: "d-d-flex d-jc-center",
+    role: "option",
+    "navigation-type": "arrow-keys"
+  }, {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)($props.message), 1)]),
+    _: 1
+  })]);
+}
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=template&id=85c21112
+
+;// 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/combobox/combobox_empty-list.vue?vue&type=script&lang=js
+
+/* harmony default export */ const combobox_empty_listvue_type_script_lang_js = ({
+  name: 'ComboboxEmptyList',
+  components: {
+    DtListItem: list_item
+  },
+  props: {
+    message: {
+      type: String,
+      required: true
+    }
+  }
+});
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./components/combobox/combobox_empty-list.vue
+
+
+
+
+;
+const combobox_empty_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_empty_listvue_type_script_lang_js, [['render',combobox_empty_listvue_type_template_id_85c21112_render]])
+
+/* harmony default export */ const combobox_empty_list = (combobox_empty_list_exports_);
 ;// 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/combobox/combobox.vue?vue&type=script&lang=js
 
 
 
+
 /* harmony default export */ const comboboxvue_type_script_lang_js = ({
   name: 'DtCombobox',
   components: {
-    ComboboxLoadingList: combobox_loading_list
+    ComboboxLoadingList: combobox_loading_list,
+    ComboboxEmptyList: combobox_empty_list
   },
   mixins: [keyboard_list_navigation({
     indexKey: 'highlightIndex',
@@ -4331,6 +4396,14 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     loading: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Message to show when the list is empty
+     */
+    emptyStateMessage: {
+      type: String,
+      default: ''
     }
   },
   emits: ['select', 'escape', 'highlight', 'opened'],
@@ -4340,7 +4413,9 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       // If the list is rendered at the root, rather than as a child
       // of this component, this is the ref to that dom element. Set
       // by the onOpen method.
-      outsideRenderedListRef: null
+      outsideRenderedListRef: null,
+      isListEmpty: undefined,
+      isLoading: undefined
     };
   },
 
@@ -4391,22 +4466,38 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
   watch: {
     showList(showList) {
       // When the list's visibility changes reset the highlight index.
-      this.$nextTick(function () {
-        if (!this.listRenderedOutside) {
-          this.setInitialHighlightIndex();
-          this.$emit('opened', showList);
-        }
-      });
+      if (!this.listRenderedOutside) {
+        this.setInitialHighlightIndex();
+        this.$emit('opened', showList);
+      }
 
       if (!showList && this.outsideRenderedListRef) {
         this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);
         this.outsideRenderedListRef = null;
+        this.isListEmpty = undefined;
       }
+    },
+
+    loading(isLoading) {
+      this.isListEmpty = undefined;
+      this.isLoading = isLoading;
+      this.$nextTick(() => {
+        this.isListEmpty = this.checkItemsLength();
+        this.setInitialHighlightIndex();
+      });
     }
 
   },
+
+  async mounted() {
+    this.isLoading = this.loading;
+    await this.$nextTick();
+    this.isListEmpty = this.checkItemsLength();
+  },
+
   methods: {
     onMouseHighlight(e) {
+      if (this.loading) return;
       const liElement = e.target.closest('li');
 
       if (liElement && this.highlightId !== liElement.id) {
@@ -4427,10 +4518,13 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     afterHighlight() {
+      if (this.loading) return;
       this.$emit('highlight', this.highlightIndex);
     },
 
     onEnterKey() {
+      if (this.loading || this.isListEmpty) return;
+
       if (this.highlightIndex >= 0) {
         this.$emit('select', this.highlightIndex);
       }
@@ -4448,24 +4542,30 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       this.$emit('opened', open);
 
       if (open) {
+        this.isListEmpty = this.checkItemsLength();
         this.setInitialHighlightIndex();
       }
     },
 
     onKeyValidation(e, eventHandler) {
-      if (!this.showList || !this.getListElement() || this.loading) {
-        return;
-      }
-
+      if (!this.showList || !this.getListElement()) return;
       this[eventHandler](e);
     },
 
     setInitialHighlightIndex() {
-      if (this.showList) {
+      if (!this.showList) return;
+      this.$nextTick(() => {
         // 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);
-      }
+      });
+    },
+
+    checkItemsLength() {
+      if (!this.showList) return undefined;
+      const list = this.getListElement();
+      const options = list === null || list === void 0 ? void 0 : list.querySelectorAll("[role=\"option\"]");
+      return (options === null || options === void 0 ? void 0 : options.length) === 0;
     }
 
   }
@@ -4478,7 +4578,7 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
 
 ;
-const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_1cf89689_render]])
+const combobox_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(comboboxvue_type_script_lang_js, [['render',comboboxvue_type_template_id_83040a60_render]])
 
 /* harmony default export */ const combobox = (combobox_exports_);
 ;// CONCATENATED MODULE: ./components/combobox/index.js
@@ -4538,11 +4638,11 @@ function dropdownvue_type_template_id_b0e1f8ba_render(_ctx, _cache, $props, $set
 }
 ;// CONCATENATED MODULE: ./components/dropdown/dropdown.vue?vue&type=template&id=b0e1f8ba
 
-;// 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/popover/popover.vue?vue&type=template&id=0656612f
+;// 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/popover/popover.vue?vue&type=template&id=582f9c98
 
-const popovervue_type_template_id_0656612f_hoisted_1 = ["aria-hidden"];
-const popovervue_type_template_id_0656612f_hoisted_2 = ["id"];
-function popovervue_type_template_id_0656612f_render(_ctx, _cache, $props, $setup, $data, $options) {
+const popovervue_type_template_id_582f9c98_hoisted_1 = ["aria-hidden"];
+const popovervue_type_template_id_582f9c98_hoisted_2 = ["id"];
+function popovervue_type_template_id_582f9c98_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("popover-header-footer");
 
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
@@ -4554,7 +4654,7 @@ function popovervue_type_template_id_0656612f_render(_ctx, _cache, $props, $setu
     class: "d-modal--transparent",
     "aria-hidden": $props.modal && $data.isOpen ? 'false' : 'true',
     onClick: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(() => {}, ["prevent", "stop"]))
-  }, null, 8, popovervue_type_template_id_0656612f_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  }, null, 8, popovervue_type_template_id_582f9c98_hoisted_1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.elementType), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     ref: "popover",
     class: ['d-popover', {
       'd-popover__anchor--modal-opened': $props.modal && $data.isOpen
@@ -4583,7 +4683,7 @@ function popovervue_type_template_id_0656612f_render(_ctx, _cache, $props, $setu
         'aria-controls': $props.id,
         'aria-haspopup': $props.role
       }
-    })], 40, popovervue_type_template_id_0656612f_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    })], 40, popovervue_type_template_id_582f9c98_hoisted_2), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_lazy_show, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
       id: $props.id,
       ref: "content",
       role: $props.role,
@@ -4645,7 +4745,7 @@ function popovervue_type_template_id_0656612f_render(_ctx, _cache, $props, $setu
     _: 3
   }, 16, ["class"]))]);
 }
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=0656612f
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=template&id=582f9c98
 
 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js
 function getWindow(node) {
@@ -9097,6 +9197,7 @@ const getArrowDetected = fn => ({
 
 
 const BASE_TIPPY_DIRECTIONS = ['bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end', 'top', 'top-start', 'top-end'];
+const TIPPY_STICKY_VALUES = [true, false, 'reference', 'popper'];
 const tippy_utils_createTippy = (anchorElement, options) => {
   const {
     contentElement
@@ -9104,6 +9205,7 @@ const tippy_utils_createTippy = (anchorElement, options) => {
   };
   delete options.contentElement;
   return tippy_esm(anchorElement, { ...options,
+    plugins: [sticky],
     render: () => getContentWrapper(contentElement)
   });
 };
@@ -9179,6 +9281,7 @@ const POPOVER_HEADER_FOOTER_PADDING_CLASSES = {
 const POPOVER_ROLES = ['dialog', 'menu', 'listbox', 'tree', 'grid'];
 const POPOVER_CONTENT_WIDTHS = [null, 'anchor'];
 const POPOVER_INITIAL_FOCUS_STRINGS = ['none', 'dialog', 'first'];
+const POPOVER_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const POPOVER_DIRECTIONS = [...BASE_TIPPY_DIRECTIONS];
 ;// 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/lazy_show/lazy_show.vue?vue&type=template&id=7659d16a
 
@@ -9547,6 +9650,21 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       default: 'bottom-end'
     },
 
+    /**
+     * If the popover sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: false,
+      validator: sticky => {
+        return POPOVER_STICKY_VALUES.includes(sticky);
+      }
+    },
+
     /**
      * Determines maximum height for the popover before overflow.
      * Possible units rem|px|em
@@ -9660,14 +9778,20 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 
     offset(offset) {
       this.tip.setProps({
-        offset: offset
+        offset
+      });
+    },
+
+    sticky(sticky) {
+      this.tip.setProps({
+        sticky
       });
     },
 
     fallbackPlacements(fallbackPlacements) {
       this.tip.setProps({
         popperOptions: getPopperOptions({
-          fallbackPlacements: fallbackPlacements,
+          fallbackPlacements,
           hasHideModifierEnabled: true
         })
       });
@@ -9720,6 +9844,7 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
       contentElement: this.popoverContentEl,
       placement: this.placement,
       offset: this.offset,
+      sticky: this.sticky,
       appendTo: document.body,
       interactive: true,
       trigger: 'manual',
@@ -9932,9 +10057,9 @@ const popover_header_footer_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 });
 ;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=0656612f&lang=less
-var popovervue_type_style_index_0_id_0656612f_lang_less = __webpack_require__(675);
-;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=0656612f&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/popover/popover.vue?vue&type=style&index=0&id=582f9c98&lang=less
+var popovervue_type_style_index_0_id_582f9c98_lang_less = __webpack_require__(683);
+;// CONCATENATED MODULE: ./components/popover/popover.vue?vue&type=style&index=0&id=582f9c98&lang=less
 
 ;// CONCATENATED MODULE: ./components/popover/popover.vue
 
@@ -9944,7 +10069,7 @@ var popovervue_type_style_index_0_id_0656612f_lang_less = __webpack_require__(67
 ;
 
 
-const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_0656612f_render]])
+const popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(popovervue_type_script_lang_js, [['render',popovervue_type_template_id_582f9c98_render]])
 
 /* harmony default export */ const popover = (popover_exports_);
 ;// CONCATENATED MODULE: ./components/popover/index.js
@@ -10255,10 +10380,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 +10410,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 +10435,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 +10448,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 +10470,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 +10557,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 +10607,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 +10634,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 +10688,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 +10711,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 +10765,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 = {
@@ -14388,15 +14696,15 @@ const toggle_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(togglevue_t
 /* harmony default export */ const toggle = (toggle_exports_);
 ;// CONCATENATED MODULE: ./components/toggle/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/tooltip/tooltip.vue?vue&type=template&id=044c8b20
+;// 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/tooltip/tooltip.vue?vue&type=template&id=46955932
 
-const tooltipvue_type_template_id_044c8b20_hoisted_1 = {
+const tooltipvue_type_template_id_46955932_hoisted_1 = {
   "data-qa": "dt-tooltip-container"
 };
-function tooltipvue_type_template_id_044c8b20_render(_ctx, _cache, $props, $setup, $data, $options) {
+function tooltipvue_type_template_id_46955932_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_lazy_show = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-lazy-show");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_044c8b20_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", tooltipvue_type_template_id_46955932_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
     ref: "anchor",
     "data-qa": "dt-tooltip-anchor",
     onFocusin: _cache[0] || (_cache[0] = function () {
@@ -14433,7 +14741,7 @@ function tooltipvue_type_template_id_044c8b20_render(_ctx, _cache, $props, $setu
     _: 3
   }, 8, ["id", "show", "transition", "class", "onAfterLeave", "onAfterEnter"])]);
 }
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=044c8b20
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=template&id=46955932
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip_constants.js
 /*
@@ -14447,6 +14755,7 @@ const TOOLTIP_KIND_MODIFIERS = {
   inverted: "d-tooltip--inverted",
   hide: "d-tooltip--hide"
 };
+const TOOLTIP_STICKY_VALUES = [...TIPPY_STICKY_VALUES];
 const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 ;// 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/tooltip/tooltip.vue?vue&type=script&lang=js
 
@@ -14513,6 +14822,21 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 
     },
 
+    /**
+     * If the tooltip sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: false,
+      validator: sticky => {
+        return TOOLTIP_STICKY_VALUES.includes(sticky);
+      }
+    },
+
     /**
      * Additional css classes for the tooltip content element.
      * Can accept all of String, Object, and Array, i.e. has the
@@ -14574,6 +14898,7 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
         interactive: false,
         trigger: 'manual',
         placement: this.placement,
+        sticky: this.sticky,
         popperOptions: getPopperOptions({
           fallbackPlacements: this.fallbackPlacements,
           hasHideModifierEnabled: true,
@@ -14604,6 +14929,12 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
       } else {
         this.tip.hide();
       }
+    },
+
+    sticky(sticky) {
+      this.tip.setProps({
+        sticky
+      });
     }
 
   },
@@ -14709,9 +15040,9 @@ const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];
 });
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=script&lang=js
  
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
-var tooltipvue_type_style_index_0_id_044c8b20_lang_less = __webpack_require__(126);
-;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=044c8b20&lang=less
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[4]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/tooltip/tooltip.vue?vue&type=style&index=0&id=46955932&lang=less
+var tooltipvue_type_style_index_0_id_46955932_lang_less = __webpack_require__(408);
+;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue?vue&type=style&index=0&id=46955932&lang=less
 
 ;// CONCATENATED MODULE: ./components/tooltip/tooltip.vue
 
@@ -14721,7 +15052,7 @@ var tooltipvue_type_style_index_0_id_044c8b20_lang_less = __webpack_require__(12
 ;
 
 
-const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_044c8b20_render]])
+const tooltip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(tooltipvue_type_script_lang_js, [['render',tooltipvue_type_template_id_46955932_render]])
 
 /* harmony default export */ const tooltip = (tooltip_exports_);
 ;// CONCATENATED MODULE: ./components/tooltip/index.js
@@ -15286,19 +15617,22 @@ const root_layout_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(root_l
 ;// CONCATENATED MODULE: ./components/root_layout/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_with_popover/combobox_with_popover.vue?vue&type=template&id=250cf6fe
+;// 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_with_popover/combobox_with_popover.vue?vue&type=template&id=37048598
 
-const combobox_with_popovervue_type_template_id_250cf6fe_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_250cf6fe_hoisted_2 = ["onMouseleave", "onFocusout"];
-function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache, $props, $setup, $data, $options) {
+const combobox_with_popovervue_type_template_id_37048598_hoisted_1 = ["id"];
+const combobox_with_popovervue_type_template_id_37048598_hoisted_2 = ["onMouseleave", "onFocusout"];
+function combobox_with_popovervue_type_template_id_37048598_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_combobox_loading_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-loading-list");
 
+  const _component_combobox_empty_list = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("combobox-empty-list");
+
   const _component_dt_popover = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-popover");
 
   const _component_dt_combobox = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-combobox");
 
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_combobox, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     ref: "combobox",
+    loading: $props.loading,
     "show-list": $data.isListShown,
     "on-beginning-of-list": $props.onBeginningOfList,
     "on-end-of-list": $props.onEndOfList,
@@ -15324,22 +15658,25 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "input", {
         inputProps: inputProps,
         onInput: $options.handleDisplayList
-      })], 40, combobox_with_popovervue_type_template_id_250cf6fe_hoisted_1)];
+      })], 40, combobox_with_popovervue_type_template_id_37048598_hoisted_1)];
     }),
     list: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(_ref2 => {
       let {
         opened,
         listProps,
-        clearHighlightIndex
+        clearHighlightIndex,
+        isLoading,
+        isListEmpty
       } = _ref2;
       return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_popover, {
         ref: "popover",
         open: $data.isListShown,
         "onUpdate:open": _cache[6] || (_cache[6] = $event => $data.isListShown = $event),
-        "hide-on-click": true,
+        "hide-on-click": $props.showList === null,
         "max-height": $props.maxHeight,
         "max-width": $props.maxWidth,
         offset: $props.popoverOffset,
+        sticky: $props.popoverSticky,
         placement: "bottom-start",
         padding: "none",
         role: "listbox",
@@ -15350,12 +15687,7 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
         "auto-focus": false,
         onOpened: opened
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createSlots)({
-        content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-          key: 0
-        }, listProps, {
-          class: [$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]
-        }), null, 16, ["class"])) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
-          key: 1,
+        content: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
           ref: "listWrapper",
           class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
           onMouseleave: clearHighlightIndex,
@@ -15363,9 +15695,16 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
             clearHighlightIndex;
             $options.onFocusOut;
           }
-        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+        }, [isLoading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_loading_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+          key: 0
+        }, listProps)), null, 16)) : isListEmpty ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_combobox_empty_list, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+          key: 1
+        }, listProps, {
+          message: $props.emptyStateMessage
+        }), null, 16, ["message"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
+          key: 2,
           listProps: listProps
-        })], 42, combobox_with_popovervue_type_template_id_250cf6fe_hoisted_2))]),
+        })], 42, combobox_with_popovervue_type_template_id_37048598_hoisted_2)]),
         _: 2
       }, [_ctx.$slots.header ? {
         name: "headerContent",
@@ -15383,24 +15722,26 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
             return $options.onFocusOut && $options.onFocusOut(...arguments);
           })
         }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "footer")], 544)])
-      } : undefined]), 1032, ["open", "max-height", "max-width", "offset", "external-anchor", "content-width", "onOpened"])];
+      } : undefined]), 1032, ["open", "hide-on-click", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "onOpened"])];
     }),
     _: 3
-  }, 16, ["show-list", "on-beginning-of-list", "on-end-of-list", "list-aria-label", "list-id"]);
+  }, 16, ["loading", "show-list", "on-beginning-of-list", "on-end-of-list", "list-aria-label", "list-id"]);
 }
-;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=250cf6fe
+;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=37048598
 
 ;// 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]!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js
 
 
 
 
+
 /* harmony default export */ const combobox_with_popovervue_type_script_lang_js = ({
   name: 'DtRecipeComboboxWithPopover',
   components: {
     DtCombobox: combobox,
     DtPopover: popover,
-    ComboboxLoadingList: combobox_loading_list
+    ComboboxLoadingList: combobox_loading_list,
+    ComboboxEmptyList: combobox_empty_list
   },
   props: {
     /**
@@ -15516,6 +15857,14 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
       default: () => [0, 4]
     },
 
+    /**
+     * If the popover sticks to the input.
+     */
+    popoverSticky: {
+      type: [Boolean, String],
+      default: false
+    },
+
     /**
      * 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.
@@ -15531,6 +15880,14 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
     loading: {
       type: Boolean,
       default: false
+    },
+
+    /**
+     * Message to show when the list is empty
+     */
+    emptyStateMessage: {
+      type: String,
+      default: ''
     }
   },
   emits: ['select', 'escape', 'highlight', 'opened'],
@@ -15571,13 +15928,7 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
 
   },
   methods: {
-    async handleDisplayList(value) {
-      if (this.isListShown) {
-        // After the list is updated, hightlight the first item
-        await this.$nextTick();
-        this.$refs.combobox.setInitialHighlightIndex();
-      }
-
+    handleDisplayList(value) {
       if (!this.hasSuggestionList) {
         if (value) {
           // Displays the list after the user has typed anything
@@ -15667,35 +16018,35 @@ function combobox_with_popovervue_type_template_id_250cf6fe_render(_ctx, _cache,
 
 
 ;
-const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_250cf6fe_render]])
+const combobox_with_popover_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(combobox_with_popovervue_type_script_lang_js, [['render',combobox_with_popovervue_type_template_id_37048598_render]])
 
 /* 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 +16069,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 +16104,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 +16333,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 +16393,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 +16463,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 +16540,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 +16559,7 @@ const MULTI_SELECT_SIZES = {
 
       this.getChipButtons()[from].blur();
       this.getChipButtons()[to].focus();
-      this.$refs.comboboxWithPopover.closeComboboxList();
+      this.closeComboboxList();
     },
 
     setChipsTopPosition() {
@@ -16253,7 +16629,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 +16647,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 +16938,7 @@ const top_banner_info_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(to
 
 
 
+
 
 
  /// Recipes