@dialpad/dialtone-vue 3.9.0 → 3.10.0

package/dist/dialtone-vue.common.js

@@ -2924,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=d0659498
+;// 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_d0659498_hoisted_1 = ["aria-expanded", "aria-controls", "aria-owns"];
-const comboboxvue_type_template_id_d0659498_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_d0659498_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(),
@@ -2940,7 +2942,7 @@ function comboboxvue_type_template_id_d0659498_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_d0659498_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,
@@ -2955,16 +2957,22 @@ function comboboxvue_type_template_id_d0659498_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_d0659498_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=d0659498
+;// CONCATENATED MODULE: ./components/combobox/combobox.vue?vue&type=template&id=83040a60
 
 ;// CONCATENATED MODULE: ./common/mixins/dom.js
 /* harmony default export */ const dom = ({
@@ -3267,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));
         }
       },
@@ -4265,14 +4271,61 @@ 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_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',
@@ -4343,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'],
@@ -4352,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
     };
   },
 
@@ -4403,20 +4466,35 @@ 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;
@@ -4445,7 +4523,7 @@ const combobox_loading_list_exports_ = /*#__PURE__*/(0,exportHelper/* default */
     },
 
     onEnterKey() {
-      if (this.loading) return;
+      if (this.loading || this.isListEmpty) return;
 
       if (this.highlightIndex >= 0) {
         this.$emit('select', this.highlightIndex);
@@ -4464,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()) {
-        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 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;
     }
 
   }
@@ -4494,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_d0659498_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
@@ -15533,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=b000d074
+;// 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_b000d074_hoisted_1 = ["id"];
-const combobox_with_popovervue_type_template_id_b000d074_hoisted_2 = ["onMouseleave", "onFocusout"];
-function combobox_with_popovervue_type_template_id_b000d074_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,
@@ -15571,19 +15658,21 @@ function combobox_with_popovervue_type_template_id_b000d074_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_b000d074_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,
@@ -15606,14 +15695,16 @@ function combobox_with_popovervue_type_template_id_b000d074_render(_ctx, _cache,
             clearHighlightIndex;
             $options.onFocusOut;
           }
-        }, [$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)({
+        }, [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, {
-          class: [$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]
-        }), null, 16, ["class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "list", {
-          key: 1,
+          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_b000d074_hoisted_2)]),
+        })], 42, combobox_with_popovervue_type_template_id_37048598_hoisted_2)]),
         _: 2
       }, [_ctx.$slots.header ? {
         name: "headerContent",
@@ -15631,24 +15722,26 @@ function combobox_with_popovervue_type_template_id_b000d074_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", "sticky", "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=b000d074
+;// 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: {
     /**
@@ -15787,6 +15880,14 @@ function combobox_with_popovervue_type_template_id_b000d074_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'],
@@ -15827,13 +15928,7 @@ function combobox_with_popovervue_type_template_id_b000d074_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
@@ -15923,7 +16018,7 @@ function combobox_with_popovervue_type_template_id_b000d074_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_b000d074_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