@dialpad/dialtone-vue 2.22.2-alpha.1 → 2.22.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/component-documentation.json +1 -1
  2. package/dist/dialtone-vue.common.js +43 -38
  3. package/dist/dialtone-vue.umd.js +43 -38
  4. package/dist/dialtone-vue.umd.min.js +1 -1
  5. package/package.json +1 -1
package/dist/dialtone-vue.common.js CHANGED
@@ -3103,9 +3103,9 @@ var button_group_component = normalizeComponent(
3103
3103
  ;// CONCATENATED MODULE: ./components/button_group/index.js
3104
3104
 
3105
3105
 
3106
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=27af1d14&
3107
- var comboboxvue_type_template_id_27af1d14_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.isLoading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.isEmpty && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex,"isLoading":_vm.isLoading,"isListEmpty":_vm.isListEmpty})],2):_vm._e()])}
3108
- var comboboxvue_type_template_id_27af1d14_staticRenderFns = []
3106
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=f9b55a7e&
3107
+ var comboboxvue_type_template_id_f9b55a7e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
3108
+ var comboboxvue_type_template_id_f9b55a7e_staticRenderFns = []
3109
3109
 
3110
3110
 
3111
3111
  ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -4690,8 +4690,6 @@ var combobox_empty_list_component = normalizeComponent(
4690
4690
  //
4691
4691
  //
4692
4692
  //
4693
- //
4694
- //
4695
4693
 
4696
4694
 
4697
4695
 
@@ -4774,11 +4772,11 @@ var combobox_empty_list_component = normalizeComponent(
4774
4772
  },
4775
4773
 
4776
4774
  /**
4777
- * If the list has no options as result.
4775
+ * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
4778
4776
  */
4779
- isEmpty: {
4777
+ emptyList: {
4780
4778
  type: Boolean,
4781
- default: true
4779
+ default: false
4782
4780
  },
4783
4781
 
4784
4782
  /**
@@ -4823,9 +4821,7 @@ var combobox_empty_list_component = normalizeComponent(
4823
4821
  // If the list is rendered at the root, rather than as a child
4824
4822
  // of this component, this is the ref to that dom element. Set
4825
4823
  // by the onOpen method.
4826
- outsideRenderedListRef: null,
4827
- isListEmpty: undefined,
4828
- isLoading: undefined
4824
+ outsideRenderedListRef: null
4829
4825
  };
4830
4826
  },
4831
4827
 
@@ -4885,25 +4881,28 @@ var combobox_empty_list_component = normalizeComponent(
4885
4881
  if (!showList && this.outsideRenderedListRef) {
4886
4882
  this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);
4887
4883
  this.outsideRenderedListRef = null;
4888
- this.isListEmpty = undefined;
4889
4884
  }
4890
4885
  },
4891
4886
 
4892
- loading(isLoading) {
4893
- this.isListEmpty = undefined;
4894
- this.isLoading = isLoading;
4887
+ loading(loading) {
4895
4888
  this.$nextTick(() => {
4896
- this.isListEmpty = this.checkItemsLength();
4897
4889
  this.setInitialHighlightIndex();
4898
4890
  });
4899
- }
4891
+ },
4892
+
4893
+ $props: {
4894
+ deep: true,
4895
+ immediate: true,
4896
+
4897
+ handler() {
4898
+ this.validateEmptyListProps();
4899
+ }
4900
4900
 
4901
+ }
4901
4902
  },
4902
4903
 
4903
- async mounted() {
4904
- this.isLoading = this.loading;
4905
- await this.$nextTick();
4906
- this.isListEmpty = this.checkItemsLength();
4904
+ created() {
4905
+ this.validateEmptyListProps();
4907
4906
  },
4908
4907
 
4909
4908
  methods: {
@@ -4934,7 +4933,7 @@ var combobox_empty_list_component = normalizeComponent(
4934
4933
  },
4935
4934
 
4936
4935
  onEnterKey() {
4937
- if (this.loading || this.isListEmpty) return;
4936
+ if (this.loading || this.emptyList) return;
4938
4937
 
4939
4938
  if (this.highlightIndex >= 0) {
4940
4939
  this.$emit('select', this.highlightIndex);
@@ -4953,7 +4952,6 @@ var combobox_empty_list_component = normalizeComponent(
4953
4952
  this.$emit('opened', open);
4954
4953
 
4955
4954
  if (open) {
4956
- this.isListEmpty = this.checkItemsLength();
4957
4955
  this.setInitialHighlightIndex();
4958
4956
  }
4959
4957
  },
@@ -4972,11 +4970,10 @@ var combobox_empty_list_component = normalizeComponent(
4972
4970
  });
4973
4971
  },
4974
4972
 
4975
- checkItemsLength() {
4976
- if (!this.showList) return undefined;
4977
- const list = this.getListElement();
4978
- const options = list === null || list === void 0 ? void 0 : list.querySelectorAll("[role=\"option\"]");
4979
- return (options === null || options === void 0 ? void 0 : options.length) === 0;
4973
+ validateEmptyListProps() {
4974
+ if (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) {
4975
+ console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n empty message.");
4976
+ }
4980
4977
  }
4981
4978
 
4982
4979
  }
@@ -4993,8 +4990,8 @@ var combobox_empty_list_component = normalizeComponent(
4993
4990
  ;
4994
4991
  var combobox_component = normalizeComponent(
4995
4992
  combobox_comboboxvue_type_script_lang_js_,
4996
- comboboxvue_type_template_id_27af1d14_render,
4997
- comboboxvue_type_template_id_27af1d14_staticRenderFns,
4993
+ comboboxvue_type_template_id_f9b55a7e_render,
4994
+ comboboxvue_type_template_id_f9b55a7e_staticRenderFns,
4998
4995
  false,
4999
4996
  null,
5000
4997
  null,
@@ -17346,17 +17343,15 @@ var root_layout_component = normalizeComponent(
17346
17343
  ;// CONCATENATED MODULE: ./components/root_layout/index.js
17347
17344
 
17348
17345
 
17349
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=5ee1c401&
17350
- var combobox_with_popovervue_type_template_id_5ee1c401_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
17346
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=58cb1065&
17347
+ var combobox_with_popovervue_type_template_id_58cb1065_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
17351
17348
  var inputProps = ref.inputProps;
17352
17349
  return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
17353
17350
  var opened = ref.opened;
17354
17351
  var listProps = ref.listProps;
17355
17352
  var clearHighlightIndex = ref.clearHighlightIndex;
17356
- var isLoading = ref.isLoading;
17357
- var isListEmpty = ref.isListEmpty;
17358
- return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(isLoading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(isListEmpty)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
17359
- var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17353
+ return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
17354
+ var combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns = []
17360
17355
 
17361
17356
 
17362
17357
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -17458,6 +17453,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17458
17453
  //
17459
17454
  //
17460
17455
  //
17456
+ //
17457
+ //
17461
17458
 
17462
17459
 
17463
17460
 
@@ -17611,6 +17608,14 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17611
17608
  default: false
17612
17609
  },
17613
17610
 
17611
+ /**
17612
+ * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
17613
+ */
17614
+ emptyList: {
17615
+ type: Boolean,
17616
+ default: false
17617
+ },
17618
+
17614
17619
  /**
17615
17620
  * Message to show when the list is empty
17616
17621
  */
@@ -17751,8 +17756,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17751
17756
  ;
17752
17757
  var combobox_with_popover_component = normalizeComponent(
17753
17758
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
17754
- combobox_with_popovervue_type_template_id_5ee1c401_render,
17755
- combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns,
17759
+ combobox_with_popovervue_type_template_id_58cb1065_render,
17760
+ combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns,
17756
17761
  false,
17757
17762
  null,
17758
17763
  null,
package/dist/dialtone-vue.umd.js CHANGED
@@ -3121,9 +3121,9 @@ var button_group_component = normalizeComponent(
3121
3121
  ;// CONCATENATED MODULE: ./components/button_group/index.js
3122
3122
 
3123
3123
 
3124
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=27af1d14&
3125
- var comboboxvue_type_template_id_27af1d14_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.isLoading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.isEmpty && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex,"isLoading":_vm.isLoading,"isListEmpty":_vm.isListEmpty})],2):_vm._e()])}
3126
- var comboboxvue_type_template_id_27af1d14_staticRenderFns = []
3124
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/combobox/combobox.vue?vue&type=template&id=f9b55a7e&
3125
+ var comboboxvue_type_template_id_f9b55a7e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{on:{"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }$event.stopPropagation();return _vm.onKeyValidation($event, 'onEscapeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }return _vm.onKeyValidation($event, 'onEnterKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onUpKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onDownKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"home",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onHomeKey')},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"end",undefined,$event.key,undefined)){ return null; }$event.stopPropagation();$event.preventDefault();return _vm.onKeyValidation($event, 'onEndKey')}]}},[_c('div',{attrs:{"data-qa":"dt-combobox-input-wrapper"}},[_vm._t("input",null,{"inputProps":_vm.inputProps})],2),(_vm.showList)?_c('div',{ref:"listWrapper",attrs:{"data-qa":"dt-combobox-list-wrapper"},on:{"mouseleave":_vm.clearHighlightIndex,"focusout":_vm.clearHighlightIndex,"!mousemove":function($event){return _vm.onMouseHighlight.apply(null, arguments)}}},[(_vm.loading && !_vm.listRenderedOutside)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',_vm.listProps,false)):(_vm.emptyList && _vm.emptyStateMessage && !_vm.listRenderedOutside)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',_vm.listProps,false)):_vm._t("list",null,{"listProps":_vm.listProps,"opened":_vm.onOpen,"clearHighlightIndex":_vm.clearHighlightIndex})],2):_vm._e()])}
3126
+ var comboboxvue_type_template_id_f9b55a7e_staticRenderFns = []
3127
3127
 
3128
3128
 
3129
3129
  ;// CONCATENATED MODULE: ./common/mixins/dom.js
@@ -4708,8 +4708,6 @@ var combobox_empty_list_component = normalizeComponent(
4708
4708
  //
4709
4709
  //
4710
4710
  //
4711
- //
4712
- //
4713
4711
 
4714
4712
 
4715
4713
 
@@ -4792,11 +4790,11 @@ var combobox_empty_list_component = normalizeComponent(
4792
4790
  },
4793
4791
 
4794
4792
  /**
4795
- * If the list has no options as result.
4793
+ * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
4796
4794
  */
4797
- isEmpty: {
4795
+ emptyList: {
4798
4796
  type: Boolean,
4799
- default: true
4797
+ default: false
4800
4798
  },
4801
4799
 
4802
4800
  /**
@@ -4841,9 +4839,7 @@ var combobox_empty_list_component = normalizeComponent(
4841
4839
  // If the list is rendered at the root, rather than as a child
4842
4840
  // of this component, this is the ref to that dom element. Set
4843
4841
  // by the onOpen method.
4844
- outsideRenderedListRef: null,
4845
- isListEmpty: undefined,
4846
- isLoading: undefined
4842
+ outsideRenderedListRef: null
4847
4843
  };
4848
4844
  },
4849
4845
 
@@ -4903,25 +4899,28 @@ var combobox_empty_list_component = normalizeComponent(
4903
4899
  if (!showList && this.outsideRenderedListRef) {
4904
4900
  this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);
4905
4901
  this.outsideRenderedListRef = null;
4906
- this.isListEmpty = undefined;
4907
4902
  }
4908
4903
  },
4909
4904
 
4910
- loading(isLoading) {
4911
- this.isListEmpty = undefined;
4912
- this.isLoading = isLoading;
4905
+ loading(loading) {
4913
4906
  this.$nextTick(() => {
4914
- this.isListEmpty = this.checkItemsLength();
4915
4907
  this.setInitialHighlightIndex();
4916
4908
  });
4917
- }
4909
+ },
4910
+
4911
+ $props: {
4912
+ deep: true,
4913
+ immediate: true,
4914
+
4915
+ handler() {
4916
+ this.validateEmptyListProps();
4917
+ }
4918
4918
 
4919
+ }
4919
4920
  },
4920
4921
 
4921
- async mounted() {
4922
- this.isLoading = this.loading;
4923
- await this.$nextTick();
4924
- this.isListEmpty = this.checkItemsLength();
4922
+ created() {
4923
+ this.validateEmptyListProps();
4925
4924
  },
4926
4925
 
4927
4926
  methods: {
@@ -4952,7 +4951,7 @@ var combobox_empty_list_component = normalizeComponent(
4952
4951
  },
4953
4952
 
4954
4953
  onEnterKey() {
4955
- if (this.loading || this.isListEmpty) return;
4954
+ if (this.loading || this.emptyList) return;
4956
4955
 
4957
4956
  if (this.highlightIndex >= 0) {
4958
4957
  this.$emit('select', this.highlightIndex);
@@ -4971,7 +4970,6 @@ var combobox_empty_list_component = normalizeComponent(
4971
4970
  this.$emit('opened', open);
4972
4971
 
4973
4972
  if (open) {
4974
- this.isListEmpty = this.checkItemsLength();
4975
4973
  this.setInitialHighlightIndex();
4976
4974
  }
4977
4975
  },
@@ -4990,11 +4988,10 @@ var combobox_empty_list_component = normalizeComponent(
4990
4988
  });
4991
4989
  },
4992
4990
 
4993
- checkItemsLength() {
4994
- if (!this.showList) return undefined;
4995
- const list = this.getListElement();
4996
- const options = list === null || list === void 0 ? void 0 : list.querySelectorAll("[role=\"option\"]");
4997
- return (options === null || options === void 0 ? void 0 : options.length) === 0;
4991
+ validateEmptyListProps() {
4992
+ if (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) {
4993
+ console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n empty message.");
4994
+ }
4998
4995
  }
4999
4996
 
5000
4997
  }
@@ -5011,8 +5008,8 @@ var combobox_empty_list_component = normalizeComponent(
5011
5008
  ;
5012
5009
  var combobox_component = normalizeComponent(
5013
5010
  combobox_comboboxvue_type_script_lang_js_,
5014
- comboboxvue_type_template_id_27af1d14_render,
5015
- comboboxvue_type_template_id_27af1d14_staticRenderFns,
5011
+ comboboxvue_type_template_id_f9b55a7e_render,
5012
+ comboboxvue_type_template_id_f9b55a7e_staticRenderFns,
5016
5013
  false,
5017
5014
  null,
5018
5015
  null,
@@ -17364,17 +17361,15 @@ var root_layout_component = normalizeComponent(
17364
17361
  ;// CONCATENATED MODULE: ./components/root_layout/index.js
17365
17362
 
17366
17363
 
17367
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=5ee1c401&
17368
- var combobox_with_popovervue_type_template_id_5ee1c401_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
17364
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=template&id=58cb1065&
17365
+ var combobox_with_popovervue_type_template_id_58cb1065_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-combobox',_vm._g({ref:"combobox",attrs:{"loading":_vm.loading,"empty-list":_vm.emptyList,"empty-state-message":_vm.emptyStateMessage,"show-list":_vm.isListShown,"on-beginning-of-list":_vm.onBeginningOfList,"on-end-of-list":_vm.onEndOfList,"list-aria-label":_vm.listAriaLabel,"list-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
17369
17366
  var inputProps = ref.inputProps;
17370
17367
  return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"focusout":_vm.onFocusOut,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }return _vm.openOnArrowKeyPress($event)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }return _vm.openOnArrowKeyPress($event)}]}},[_vm._t("input",null,{"inputProps":inputProps,"onInput":_vm.handleDisplayList})],2)]}},{key:"list",fn:function(ref){
17371
17368
  var opened = ref.opened;
17372
17369
  var listProps = ref.listProps;
17373
17370
  var clearHighlightIndex = ref.clearHighlightIndex;
17374
- var isLoading = ref.isLoading;
17375
- var isListEmpty = ref.isListEmpty;
17376
- return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(isLoading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(isListEmpty)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
17377
- var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17371
+ return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":_vm.showList === null,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false},on:{"update:open":function($event){_vm.isListShown=$event},"opened":function($event){return opened($event, arguments[1]);}},scopedSlots:_vm._u([{key:"headerContent",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header",on:{"focusout":_vm.onFocusOut}},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"content",fn:function(){return [_c('div',{ref:"listWrapper",class:[_vm.DROPDOWN_PADDING_CLASSES[_vm.padding], _vm.listClass],on:{"mouseleave":clearHighlightIndex,"focusout":function($event){clearHighlightIndex; _vm.onFocusOut;}}},[(_vm.loading)?_c('combobox-loading-list',_vm._b({},'combobox-loading-list',listProps,false)):(_vm.emptyList && _vm.emptyStateMessage)?_c('combobox-empty-list',_vm._b({attrs:{"message":_vm.emptyStateMessage}},'combobox-empty-list',listProps,false)):_vm._t("list",null,{"listProps":listProps})],2)]},proxy:true},{key:"footerContent",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer",on:{"focusout":_vm.onFocusOut}},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
17372
+ var combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns = []
17378
17373
 
17379
17374
 
17380
17375
  ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-80[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue?vue&type=script&lang=js&
@@ -17476,6 +17471,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17476
17471
  //
17477
17472
  //
17478
17473
  //
17474
+ //
17475
+ //
17479
17476
 
17480
17477
 
17481
17478
 
@@ -17629,6 +17626,14 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17629
17626
  default: false
17630
17627
  },
17631
17628
 
17629
+ /**
17630
+ * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
17631
+ */
17632
+ emptyList: {
17633
+ type: Boolean,
17634
+ default: false
17635
+ },
17636
+
17632
17637
  /**
17633
17638
  * Message to show when the list is empty
17634
17639
  */
@@ -17769,8 +17774,8 @@ var combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns = []
17769
17774
  ;
17770
17775
  var combobox_with_popover_component = normalizeComponent(
17771
17776
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
17772
- combobox_with_popovervue_type_template_id_5ee1c401_render,
17773
- combobox_with_popovervue_type_template_id_5ee1c401_staticRenderFns,
17777
+ combobox_with_popovervue_type_template_id_58cb1065_render,
17778
+ combobox_with_popovervue_type_template_id_58cb1065_staticRenderFns,
17774
17779
  false,
17775
17780
  null,
17776
17781
  null,