@dialpad/dialtone-vue 2.78.0 → 2.78.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 (6) hide show
  1. package/CHANGELOG.json +1 -1
  2. package/CHANGELOG.md +14 -0
  3. package/dist/dialtone-vue.common.js +50 -30
  4. package/dist/dialtone-vue.umd.js +50 -30
  5. package/dist/dialtone-vue.umd.min.js +1 -1
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [2.78.2](https://github.com/dialpad/dialtone-vue/compare/v2.78.1...v2.78.2) (2023-04-11)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * null protection on some refs ([#903](https://github.com/dialpad/dialtone-vue/issues/903)) ([e1addd3](https://github.com/dialpad/dialtone-vue/commit/e1addd30be47f3d0bef1b0fba33822c0423bcc23))
7
+
8
+ ## [2.78.1](https://github.com/dialpad/dialtone-vue/compare/v2.78.0...v2.78.1) (2023-04-10)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * showing both image and initials issue ([#901](https://github.com/dialpad/dialtone-vue/issues/901)) ([b827e5e](https://github.com/dialpad/dialtone-vue/commit/b827e5ea08c5c8d0c91716190c716c6ccac74837))
14
+
1
15
  # [2.78.0](https://github.com/dialpad/dialtone-vue/compare/v2.77.2...v2.78.0) (2023-04-06)
2
16
 
3
17
 
package/dist/dialtone-vue.common.js CHANGED
@@ -2421,7 +2421,7 @@ if (typeof window !== 'undefined') {
2421
2421
  // Indicate to webpack that this file can be concatenated
2422
2422
  /* harmony default export */ const setPublicPath = (null);
2423
2423
 
2424
- ;// 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/avatar/avatar.vue?vue&type=template&id=5943554e&
2424
+ ;// 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/avatar/avatar.vue?vue&type=template&id=7a8c5449&
2425
2425
  var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.avatarClasses,style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_c('div',{ref:"canvas",class:[_vm.canvasClass, 'd-avatar__canvas']},[(_vm.showDefaultSlot)?_vm._t("default"):_vm._e(),(_vm.showInitials)?_c('span',{staticClass:"d-ps-absolute d-zi-base",class:_vm.AVATAR_KIND_MODIFIERS.initials},[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e()],2),(_vm.overlayIcon || _vm.overlayText)?_c('div',{staticClass:"d-bgc-black-900 d-o70 d-ps-absolute d-w100p d-h100p d-mn4 d-ba d-baw4 d-bc-white d-bar-pill d-d-flex d-ai-center d-zi-base"},[(_vm.overlayIcon)?_c('dt-icon',{staticClass:"d-fc-white d-w100p",attrs:{"name":_vm.overlayIcon}}):(_vm.overlayText)?_c('p',{staticClass:"d-fs-200 d-fw-bold d-fc-white d-w100p d-ta-center"},[_vm._v(" "+_vm._s(_vm.overlayText)+" ")]):_vm._e()],1):_vm._e(),(_vm.showGroup)?_c('span',{staticClass:"d-avatar__count d-zi-base1",attrs:{"data-qa":"dt-avatar-count"}},[_vm._v(_vm._s(_vm.formattedGroup))]):_vm._e(),(_vm.presence && !_vm.showGroup)?_c('dt-presence',_vm._b({staticClass:"d-zi-base1",class:[
2426
2426
  'd-avatar__presence',
2427
2427
  _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],1)}
@@ -3317,6 +3317,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
3317
3317
  kindHandler(el) {
3318
3318
  switch (this.kind) {
3319
3319
  case 'image':
3320
+ if (this.showInitials) {
3321
+ el.classList.add('d-avatar__image', 'd-zi-base1');
3322
+ }
3323
+
3320
3324
  this.validateImageAttrsPresence();
3321
3325
  this.setImageListeners(el);
3322
3326
  break;
@@ -8424,8 +8428,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
8424
8428
  var dropdownvue_type_template_id_c0aa082e_staticRenderFns = []
8425
8429
 
8426
8430
 
8427
- ;// 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/popover/popover.vue?vue&type=template&id=6d22723e&
8428
- var popovervue_type_template_id_6d22723e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
8431
+ ;// 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/popover/popover.vue?vue&type=template&id=01a6c752&
8432
+ var popovervue_type_template_id_01a6c752_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
8429
8433
  'aria-expanded': _vm.isOpen.toString(),
8430
8434
  'aria-controls': _vm.id,
8431
8435
  'aria-haspopup': _vm.role,
@@ -8436,7 +8440,7 @@ var popovervue_type_template_id_6d22723e_render = function () {var _vm=this;var
8436
8440
  'd-popover__content',
8437
8441
  _vm.POPOVER_PADDING_CLASSES[_vm.padding],
8438
8442
  _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
8439
- var popovervue_type_template_id_6d22723e_staticRenderFns = []
8443
+ var popovervue_type_template_id_01a6c752_staticRenderFns = []
8440
8444
 
8441
8445
 
8442
8446
  ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -14102,7 +14106,7 @@ var popover_header_footer_component = normalizeComponent(
14102
14106
  },
14103
14107
 
14104
14108
  focusInitialElementById() {
14105
- var _this$$refs$content, _this$$refs$content$$;
14109
+ var _this$$refs$content, _this$$refs$content$$, _this$$refs$content2;
14106
14110
 
14107
14111
  const result = (_this$$refs$content = this.$refs.content) === null || _this$$refs$content === void 0 ? void 0 : (_this$$refs$content$$ = _this$$refs$content.$el) === null || _this$$refs$content$$ === void 0 ? void 0 : _this$$refs$content$$.querySelector(this.initialFocusElement);
14108
14112
 
@@ -14112,7 +14116,7 @@ var popover_header_footer_component = normalizeComponent(
14112
14116
  console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". ' + 'Defaulting to focusing the dialog.');
14113
14117
  }
14114
14118
 
14115
- result ? result.focus() : this.$refs.content.$el.focus();
14119
+ result ? result.focus() : (_this$$refs$content2 = this.$refs.content) === null || _this$$refs$content2 === void 0 ? void 0 : _this$$refs$content2.$el.focus();
14116
14120
  },
14117
14121
 
14118
14122
  onResize() {
@@ -14156,8 +14160,10 @@ var popover_header_footer_component = normalizeComponent(
14156
14160
 
14157
14161
  (_this$$refs$popover__ = this.$refs.popover__header) === null || _this$$refs$popover__ === void 0 ? void 0 : _this$$refs$popover__.focusCloseButton();
14158
14162
  } else {
14163
+ var _this$$refs$content3;
14164
+
14159
14165
  // if there are no focusable elements at all focus the dialog itself
14160
- this.$refs.content.$el.focus();
14166
+ (_this$$refs$content3 = this.$refs.content) === null || _this$$refs$content3 === void 0 ? void 0 : _this$$refs$content3.$el.focus();
14161
14167
  }
14162
14168
  },
14163
14169
 
@@ -14201,8 +14207,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(4230);
14201
14207
 
14202
14208
  var popover_component = normalizeComponent(
14203
14209
  popover_popovervue_type_script_lang_js_,
14204
- popovervue_type_template_id_6d22723e_render,
14205
- popovervue_type_template_id_6d22723e_staticRenderFns,
14210
+ popovervue_type_template_id_01a6c752_render,
14211
+ popovervue_type_template_id_01a6c752_staticRenderFns,
14206
14212
  false,
14207
14213
  null,
14208
14214
  null,
@@ -21521,15 +21527,15 @@ var stack_component = normalizeComponent(
21521
21527
  /* harmony default export */ const stack = (stack_component.exports);
21522
21528
  ;// CONCATENATED MODULE: ./components/stack/index.js
21523
21529
 
21524
- ;// 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=386059b2&
21525
- var combobox_with_popovervue_type_template_id_386059b2_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,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"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-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
21530
+ ;// 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=1ab85920&
21531
+ var combobox_with_popovervue_type_template_id_1ab85920_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,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"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-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
21526
21532
  var inputProps = ref.inputProps;
21527
21533
  return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"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){
21528
21534
  var opened = ref.opened;
21529
21535
  var listProps = ref.listProps;
21530
21536
  var clearHighlightIndex = ref.clearHighlightIndex;
21531
21537
  return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":false,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"append-to":_vm.appendTo,"transition":_vm.transition,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},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"},[_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":clearHighlightIndex}},[(_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"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
21532
- var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
21538
+ var combobox_with_popovervue_type_template_id_1ab85920_staticRenderFns = []
21533
21539
 
21534
21540
 
21535
21541
  ;// 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&
@@ -21984,7 +21990,9 @@ var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
21984
21990
  },
21985
21991
 
21986
21992
  onFocusIn(e) {
21987
- if (this.hasSuggestionList && e && this.$refs.input.querySelector('input') === e.target) {
21993
+ var _this$$refs$input;
21994
+
21995
+ if (this.hasSuggestionList && e && ((_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.querySelector('input')) === e.target) {
21988
21996
  // only trigger if we show suggestion list when focused, and
21989
21997
  // it's the input specifically that was focused
21990
21998
  this.showComboboxList();
@@ -21992,10 +22000,10 @@ var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
21992
22000
  },
21993
22001
 
21994
22002
  onFocusOut(e) {
21995
- var _this$$refs$popover$t, _e$composedPath;
22003
+ var _this$$refs$popover, _this$$refs$popover$t, _e$composedPath;
21996
22004
 
21997
22005
  // Check if the focus change was to another target within the combobox component
21998
- const popoverEl = (_this$$refs$popover$t = this.$refs.popover.tip) === null || _this$$refs$popover$t === void 0 ? void 0 : _this$$refs$popover$t.popper;
22006
+ const popoverEl = (_this$$refs$popover = this.$refs.popover) === null || _this$$refs$popover === void 0 ? void 0 : (_this$$refs$popover$t = _this$$refs$popover.tip) === null || _this$$refs$popover$t === void 0 ? void 0 : _this$$refs$popover$t.popper;
21999
22007
  const comboboxEl = this.$refs.input;
22000
22008
  if ((_e$composedPath = e.composedPath()) !== null && _e$composedPath !== void 0 && _e$composedPath.some(el => [popoverEl, comboboxEl].includes(el))) return; // If outside the combobox then close
22001
22009
 
@@ -22024,8 +22032,8 @@ var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
22024
22032
  ;
22025
22033
  var combobox_with_popover_component = normalizeComponent(
22026
22034
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
22027
- combobox_with_popovervue_type_template_id_386059b2_render,
22028
- combobox_with_popovervue_type_template_id_386059b2_staticRenderFns,
22035
+ combobox_with_popovervue_type_template_id_1ab85920_render,
22036
+ combobox_with_popovervue_type_template_id_1ab85920_staticRenderFns,
22029
22037
  false,
22030
22038
  null,
22031
22039
  null,
@@ -22036,11 +22044,11 @@ var combobox_with_popover_component = normalizeComponent(
22036
22044
  /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
22037
22045
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
22038
22046
 
22039
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=42ee0c13&
22040
- var combobox_multi_selectvue_type_template_id_42ee0c13_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor","append-to":_vm.appendTo,"transition":_vm.transition},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
22047
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=4a2fe866&
22048
+ var combobox_multi_selectvue_type_template_id_4a2fe866_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor","append-to":_vm.appendTo,"transition":_vm.transition},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
22041
22049
  var onInput = ref.onInput;
22042
22050
  return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative d-d-block"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2 d-pl1"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.CHIP_SIZES[_vm.size]},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
22043
- var combobox_multi_selectvue_type_template_id_42ee0c13_staticRenderFns = []
22051
+ var combobox_multi_selectvue_type_template_id_4a2fe866_staticRenderFns = []
22044
22052
 
22045
22053
 
22046
22054
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -22576,8 +22584,10 @@ const CHIP_TOP_POSITION = {
22576
22584
 
22577
22585
  methods: {
22578
22586
  onChipRemove(item) {
22587
+ var _this$$refs$input;
22588
+
22579
22589
  this.$emit('remove', item);
22580
- this.$refs.input.focus();
22590
+ (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.focus();
22581
22591
  },
22582
22592
 
22583
22593
  onComboboxSelect(i) {
@@ -22586,19 +22596,23 @@ const CHIP_TOP_POSITION = {
22586
22596
  },
22587
22597
 
22588
22598
  showComboboxList() {
22599
+ var _this$$refs$comboboxW;
22600
+
22589
22601
  if (this.showList != null) {
22590
22602
  return;
22591
22603
  }
22592
22604
 
22593
- this.$refs.comboboxWithPopover.showComboboxList();
22605
+ (_this$$refs$comboboxW = this.$refs.comboboxWithPopover) === null || _this$$refs$comboboxW === void 0 ? void 0 : _this$$refs$comboboxW.showComboboxList();
22594
22606
  },
22595
22607
 
22596
22608
  closeComboboxList() {
22609
+ var _this$$refs$comboboxW2;
22610
+
22597
22611
  if (this.showList != null) {
22598
22612
  return;
22599
22613
  }
22600
22614
 
22601
- this.$refs.comboboxWithPopover.closeComboboxList();
22615
+ (_this$$refs$comboboxW2 = this.$refs.comboboxWithPopover) === null || _this$$refs$comboboxW2 === void 0 ? void 0 : _this$$refs$comboboxW2.closeComboboxList();
22602
22616
  },
22603
22617
 
22604
22618
  getChipButtons() {
@@ -22622,9 +22636,9 @@ const CHIP_TOP_POSITION = {
22622
22636
  },
22623
22637
 
22624
22638
  getInput() {
22625
- var _this$$refs$input;
22639
+ var _this$$refs$input2;
22626
22640
 
22627
- return (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.$refs.input;
22641
+ return (_this$$refs$input2 = this.$refs.input) === null || _this$$refs$input2 === void 0 ? void 0 : _this$$refs$input2.$refs.input;
22628
22642
  },
22629
22643
 
22630
22644
  onChipKeyup(event) {
@@ -22660,22 +22674,28 @@ const CHIP_TOP_POSITION = {
22660
22674
  },
22661
22675
 
22662
22676
  moveFromInputToChip() {
22677
+ var _this$$refs$input3;
22678
+
22663
22679
  this.getLastChipButton().focus();
22664
- this.$refs.input.blur();
22680
+ (_this$$refs$input3 = this.$refs.input) === null || _this$$refs$input3 === void 0 ? void 0 : _this$$refs$input3.blur();
22665
22681
  this.closeComboboxList();
22666
22682
  },
22667
22683
 
22668
22684
  moveFromChipToInput() {
22685
+ var _this$$refs$input4;
22686
+
22669
22687
  this.getLastChipButton().blur();
22670
- this.$refs.input.focus();
22688
+ (_this$$refs$input4 = this.$refs.input) === null || _this$$refs$input4 === void 0 ? void 0 : _this$$refs$input4.focus();
22671
22689
  this.showComboboxList();
22672
22690
  },
22673
22691
 
22674
22692
  navigateBetweenChips(target, toLeft) {
22693
+ var _this$$refs$chips;
22694
+
22675
22695
  const from = this.getChipButtons().indexOf(target);
22676
22696
  const to = toLeft ? from - 1 : from + 1;
22677
22697
 
22678
- if (to < 0 || to >= this.$refs.chips.length) {
22698
+ if (to < 0 || to >= ((_this$$refs$chips = this.$refs.chips) === null || _this$$refs$chips === void 0 ? void 0 : _this$$refs$chips.length)) {
22679
22699
  return;
22680
22700
  }
22681
22701
 
@@ -22767,8 +22787,8 @@ const CHIP_TOP_POSITION = {
22767
22787
  ;
22768
22788
  var combobox_multi_select_component = normalizeComponent(
22769
22789
  combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
22770
- combobox_multi_selectvue_type_template_id_42ee0c13_render,
22771
- combobox_multi_selectvue_type_template_id_42ee0c13_staticRenderFns,
22790
+ combobox_multi_selectvue_type_template_id_4a2fe866_render,
22791
+ combobox_multi_selectvue_type_template_id_4a2fe866_staticRenderFns,
22772
22792
  false,
22773
22793
  null,
22774
22794
  null,
package/dist/dialtone-vue.umd.js CHANGED
@@ -2431,7 +2431,7 @@ if (typeof window !== 'undefined') {
2431
2431
  // Indicate to webpack that this file can be concatenated
2432
2432
  /* harmony default export */ const setPublicPath = (null);
2433
2433
 
2434
- ;// 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/avatar/avatar.vue?vue&type=template&id=5943554e&
2434
+ ;// 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/avatar/avatar.vue?vue&type=template&id=7a8c5449&
2435
2435
  var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.avatarClasses,style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_c('div',{ref:"canvas",class:[_vm.canvasClass, 'd-avatar__canvas']},[(_vm.showDefaultSlot)?_vm._t("default"):_vm._e(),(_vm.showInitials)?_c('span',{staticClass:"d-ps-absolute d-zi-base",class:_vm.AVATAR_KIND_MODIFIERS.initials},[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e()],2),(_vm.overlayIcon || _vm.overlayText)?_c('div',{staticClass:"d-bgc-black-900 d-o70 d-ps-absolute d-w100p d-h100p d-mn4 d-ba d-baw4 d-bc-white d-bar-pill d-d-flex d-ai-center d-zi-base"},[(_vm.overlayIcon)?_c('dt-icon',{staticClass:"d-fc-white d-w100p",attrs:{"name":_vm.overlayIcon}}):(_vm.overlayText)?_c('p',{staticClass:"d-fs-200 d-fw-bold d-fc-white d-w100p d-ta-center"},[_vm._v(" "+_vm._s(_vm.overlayText)+" ")]):_vm._e()],1):_vm._e(),(_vm.showGroup)?_c('span',{staticClass:"d-avatar__count d-zi-base1",attrs:{"data-qa":"dt-avatar-count"}},[_vm._v(_vm._s(_vm.formattedGroup))]):_vm._e(),(_vm.presence && !_vm.showGroup)?_c('dt-presence',_vm._b({staticClass:"d-zi-base1",class:[
2436
2436
  'd-avatar__presence',
2437
2437
  _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],1)}
@@ -3327,6 +3327,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
3327
3327
  kindHandler(el) {
3328
3328
  switch (this.kind) {
3329
3329
  case 'image':
3330
+ if (this.showInitials) {
3331
+ el.classList.add('d-avatar__image', 'd-zi-base1');
3332
+ }
3333
+
3330
3334
  this.validateImageAttrsPresence();
3331
3335
  this.setImageListeners(el);
3332
3336
  break;
@@ -8434,8 +8438,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
8434
8438
  var dropdownvue_type_template_id_c0aa082e_staticRenderFns = []
8435
8439
 
8436
8440
 
8437
- ;// 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/popover/popover.vue?vue&type=template&id=6d22723e&
8438
- var popovervue_type_template_id_6d22723e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
8441
+ ;// 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/popover/popover.vue?vue&type=template&id=01a6c752&
8442
+ var popovervue_type_template_id_01a6c752_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.modal && _vm.isOpen)?_c('portal',[_c('div',{staticClass:"d-modal--transparent",attrs:{"aria-hidden":_vm.modal && _vm.isOpen ? 'false' : 'true'},on:{"click":function($event){$event.preventDefault();$event.stopPropagation();}}})]):_vm._e(),_c(_vm.elementType,_vm._g({ref:"popover",tag:"component",class:['d-popover', { 'd-popover__anchor--opened': _vm.isOpen }],attrs:{"data-qa":"dt-popover-container"}},_vm.$listeners),[_c('div',{ref:"anchor",attrs:{"id":!_vm.ariaLabelledby && _vm.labelledBy,"data-qa":"dt-popover-anchor","tabindex":_vm.openOnContext ? 0 : undefined},on:{"!click":function($event){return _vm.defaultToggleOpen.apply(null, arguments)},"contextmenu":_vm.onContext,"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"up",38,$event.key,["Up","ArrowUp"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"down",40,$event.key,["Down","ArrowDown"])){ return null; }$event.preventDefault();return _vm.onArrowKeyPress.apply(null, arguments)}],"!keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"escape",undefined,$event.key,undefined)){ return null; }return _vm.closePopover.apply(null, arguments)}}},[_vm._t("anchor",null,{"attrs":{
8439
8443
  'aria-expanded': _vm.isOpen.toString(),
8440
8444
  'aria-controls': _vm.id,
8441
8445
  'aria-haspopup': _vm.role,
@@ -8446,7 +8450,7 @@ var popovervue_type_template_id_6d22723e_render = function () {var _vm=this;var
8446
8450
  'd-popover__content',
8447
8451
  _vm.POPOVER_PADDING_CLASSES[_vm.padding],
8448
8452
  _vm.contentClass ],attrs:{"data-qa":"dt-popover-content"}},[_vm._t("content",null,{"close":_vm.closePopover})],2),(_vm.$slots.footerContent)?_c('popover-header-footer',{ref:"popover__footer",class:_vm.POPOVER_HEADER_FOOTER_PADDING_CLASSES[_vm.padding],attrs:{"type":"footer","content-class":_vm.footerClass},scopedSlots:_vm._u([{key:"content",fn:function(){return [_vm._t("footerContent",null,{"close":_vm.closePopover})]},proxy:true}],null,true)}):_vm._e(),(_vm.showVisuallyHiddenClose)?_c('sr-only-close-button',{attrs:{"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel},on:{"close":_vm.closePopover}}):_vm._e()],1)],1)],1)}
8449
- var popovervue_type_template_id_6d22723e_staticRenderFns = []
8453
+ var popovervue_type_template_id_01a6c752_staticRenderFns = []
8450
8454
 
8451
8455
 
8452
8456
  ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -14112,7 +14116,7 @@ var popover_header_footer_component = normalizeComponent(
14112
14116
  },
14113
14117
 
14114
14118
  focusInitialElementById() {
14115
- var _this$$refs$content, _this$$refs$content$$;
14119
+ var _this$$refs$content, _this$$refs$content$$, _this$$refs$content2;
14116
14120
 
14117
14121
  const result = (_this$$refs$content = this.$refs.content) === null || _this$$refs$content === void 0 ? void 0 : (_this$$refs$content$$ = _this$$refs$content.$el) === null || _this$$refs$content$$ === void 0 ? void 0 : _this$$refs$content$$.querySelector(this.initialFocusElement);
14118
14122
 
@@ -14122,7 +14126,7 @@ var popover_header_footer_component = normalizeComponent(
14122
14126
  console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". ' + 'Defaulting to focusing the dialog.');
14123
14127
  }
14124
14128
 
14125
- result ? result.focus() : this.$refs.content.$el.focus();
14129
+ result ? result.focus() : (_this$$refs$content2 = this.$refs.content) === null || _this$$refs$content2 === void 0 ? void 0 : _this$$refs$content2.$el.focus();
14126
14130
  },
14127
14131
 
14128
14132
  onResize() {
@@ -14166,8 +14170,10 @@ var popover_header_footer_component = normalizeComponent(
14166
14170
 
14167
14171
  (_this$$refs$popover__ = this.$refs.popover__header) === null || _this$$refs$popover__ === void 0 ? void 0 : _this$$refs$popover__.focusCloseButton();
14168
14172
  } else {
14173
+ var _this$$refs$content3;
14174
+
14169
14175
  // if there are no focusable elements at all focus the dialog itself
14170
- this.$refs.content.$el.focus();
14176
+ (_this$$refs$content3 = this.$refs.content) === null || _this$$refs$content3 === void 0 ? void 0 : _this$$refs$content3.$el.focus();
14171
14177
  }
14172
14178
  },
14173
14179
 
@@ -14211,8 +14217,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(2532);
14211
14217
 
14212
14218
  var popover_component = normalizeComponent(
14213
14219
  popover_popovervue_type_script_lang_js_,
14214
- popovervue_type_template_id_6d22723e_render,
14215
- popovervue_type_template_id_6d22723e_staticRenderFns,
14220
+ popovervue_type_template_id_01a6c752_render,
14221
+ popovervue_type_template_id_01a6c752_staticRenderFns,
14216
14222
  false,
14217
14223
  null,
14218
14224
  null,
@@ -21531,15 +21537,15 @@ var stack_component = normalizeComponent(
21531
21537
  /* harmony default export */ const stack = (stack_component.exports);
21532
21538
  ;// CONCATENATED MODULE: ./components/stack/index.js
21533
21539
 
21534
- ;// 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=386059b2&
21535
- var combobox_with_popovervue_type_template_id_386059b2_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,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"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-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
21540
+ ;// 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=1ab85920&
21541
+ var combobox_with_popovervue_type_template_id_1ab85920_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,"label":_vm.label,"label-visible":_vm.labelVisible,"size":_vm.size,"description":_vm.description,"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-rendered-outside":true,"list-id":_vm.listId,"data-qa":"dt-combobox"},scopedSlots:_vm._u([{key:"input",fn:function(ref){
21536
21542
  var inputProps = ref.inputProps;
21537
21543
  return [_c('div',{ref:"input",attrs:{"id":_vm.externalAnchor},on:{"focusin":_vm.onFocusIn,"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){
21538
21544
  var opened = ref.opened;
21539
21545
  var listProps = ref.listProps;
21540
21546
  var clearHighlightIndex = ref.clearHighlightIndex;
21541
21547
  return [_c('dt-popover',{ref:"popover",attrs:{"open":_vm.isListShown,"hide-on-click":false,"max-height":_vm.maxHeight,"max-width":_vm.maxWidth,"offset":_vm.popoverOffset,"sticky":_vm.popoverSticky,"placement":"bottom-start","initial-focus-element":"none","padding":"none","role":"listbox","external-anchor":_vm.externalAnchor,"content-width":_vm.contentWidth,"content-tabindex":null,"modal":false,"auto-focus":false,"append-to":_vm.appendTo,"transition":_vm.transition,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose},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"},[_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":clearHighlightIndex}},[(_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"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})]}}],null,true)},_vm.comboboxListeners))}
21542
- var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
21548
+ var combobox_with_popovervue_type_template_id_1ab85920_staticRenderFns = []
21543
21549
 
21544
21550
 
21545
21551
  ;// 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&
@@ -21994,7 +22000,9 @@ var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
21994
22000
  },
21995
22001
 
21996
22002
  onFocusIn(e) {
21997
- if (this.hasSuggestionList && e && this.$refs.input.querySelector('input') === e.target) {
22003
+ var _this$$refs$input;
22004
+
22005
+ if (this.hasSuggestionList && e && ((_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.querySelector('input')) === e.target) {
21998
22006
  // only trigger if we show suggestion list when focused, and
21999
22007
  // it's the input specifically that was focused
22000
22008
  this.showComboboxList();
@@ -22002,10 +22010,10 @@ var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
22002
22010
  },
22003
22011
 
22004
22012
  onFocusOut(e) {
22005
- var _this$$refs$popover$t, _e$composedPath;
22013
+ var _this$$refs$popover, _this$$refs$popover$t, _e$composedPath;
22006
22014
 
22007
22015
  // Check if the focus change was to another target within the combobox component
22008
- const popoverEl = (_this$$refs$popover$t = this.$refs.popover.tip) === null || _this$$refs$popover$t === void 0 ? void 0 : _this$$refs$popover$t.popper;
22016
+ const popoverEl = (_this$$refs$popover = this.$refs.popover) === null || _this$$refs$popover === void 0 ? void 0 : (_this$$refs$popover$t = _this$$refs$popover.tip) === null || _this$$refs$popover$t === void 0 ? void 0 : _this$$refs$popover$t.popper;
22009
22017
  const comboboxEl = this.$refs.input;
22010
22018
  if ((_e$composedPath = e.composedPath()) !== null && _e$composedPath !== void 0 && _e$composedPath.some(el => [popoverEl, comboboxEl].includes(el))) return; // If outside the combobox then close
22011
22019
 
@@ -22034,8 +22042,8 @@ var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
22034
22042
  ;
22035
22043
  var combobox_with_popover_component = normalizeComponent(
22036
22044
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
22037
- combobox_with_popovervue_type_template_id_386059b2_render,
22038
- combobox_with_popovervue_type_template_id_386059b2_staticRenderFns,
22045
+ combobox_with_popovervue_type_template_id_1ab85920_render,
22046
+ combobox_with_popovervue_type_template_id_1ab85920_staticRenderFns,
22039
22047
  false,
22040
22048
  null,
22041
22049
  null,
@@ -22046,11 +22054,11 @@ var combobox_with_popover_component = normalizeComponent(
22046
22054
  /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
22047
22055
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
22048
22056
 
22049
- ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=42ee0c13&
22050
- var combobox_multi_selectvue_type_template_id_42ee0c13_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor","append-to":_vm.appendTo,"transition":_vm.transition},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
22057
+ ;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/comboboxes/combobox_multi_select/combobox_multi_select.vue?vue&type=template&id=4a2fe866&
22058
+ var combobox_multi_selectvue_type_template_id_4a2fe866_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-recipe-combobox-with-popover',{ref:"comboboxWithPopover",attrs:{"label":_vm.label,"show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"visually-hidden-close-label":_vm.visuallyHiddenCloseLabel,"visually-hidden-close":_vm.visuallyHiddenClose,"content-width":"anchor","append-to":_vm.appendTo,"transition":_vm.transition},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
22051
22059
  var onInput = ref.onInput;
22052
22060
  return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative d-d-block"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2 d-pl1"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,class:['d-mt4', 'd-mx2', 'd-zi-base1'],attrs:{"label-class":['d-chip__label'],"close-button-props":{ ariaLabel: 'close' },"size":_vm.CHIP_SIZES[_vm.size]},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"backspace",undefined,$event.key,undefined)){ return null; }return _vm.onChipRemove(item)},"close":function($event){return _vm.onChipRemove(item)}}},_vm.chipListeners),[_vm._v(" "+_vm._s(item)+" ")])}),1),_c('dt-input',_vm._g({ref:"input",staticClass:"d-fl-grow1",attrs:{"aria-label":_vm.label,"label":_vm.labelVisible ? _vm.label : '',"description":_vm.description,"placeholder":_vm.inputPlaceHolder,"show-messages":_vm.showInputMessages,"messages":_vm.inputMessages,"size":_vm.size},on:{"input":onInput},model:{value:(_vm.value),callback:function ($$v) {_vm.value=$$v},expression:"value"}},_vm.inputListeners)),_c('dt-validation-messages',{attrs:{"validation-messages":_vm.maxSelectedMessage,"show-messages":_vm.showValidationMessages}})],1)]}},{key:"header",fn:function(){return [(_vm.$slots.header)?_c('div',{ref:"header"},[_vm._t("header")],2):_vm._e()]},proxy:true},{key:"list",fn:function(){return [_c('div',{ref:"list",on:{"mousedown":function($event){$event.preventDefault();}}},[(!_vm.loading)?_vm._t("list"):_c('div',{staticClass:"d-ta-center d-py16"},[_vm._v(" "+_vm._s(_vm.loadingMessage)+" ")])],2)]},proxy:true},{key:"footer",fn:function(){return [(_vm.$slots.footer)?_c('div',{ref:"footer"},[_vm._t("footer")],2):_vm._e()]},proxy:true}],null,true)})}
22053
- var combobox_multi_selectvue_type_template_id_42ee0c13_staticRenderFns = []
22061
+ var combobox_multi_selectvue_type_template_id_4a2fe866_staticRenderFns = []
22054
22062
 
22055
22063
 
22056
22064
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -22586,8 +22594,10 @@ const CHIP_TOP_POSITION = {
22586
22594
 
22587
22595
  methods: {
22588
22596
  onChipRemove(item) {
22597
+ var _this$$refs$input;
22598
+
22589
22599
  this.$emit('remove', item);
22590
- this.$refs.input.focus();
22600
+ (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.focus();
22591
22601
  },
22592
22602
 
22593
22603
  onComboboxSelect(i) {
@@ -22596,19 +22606,23 @@ const CHIP_TOP_POSITION = {
22596
22606
  },
22597
22607
 
22598
22608
  showComboboxList() {
22609
+ var _this$$refs$comboboxW;
22610
+
22599
22611
  if (this.showList != null) {
22600
22612
  return;
22601
22613
  }
22602
22614
 
22603
- this.$refs.comboboxWithPopover.showComboboxList();
22615
+ (_this$$refs$comboboxW = this.$refs.comboboxWithPopover) === null || _this$$refs$comboboxW === void 0 ? void 0 : _this$$refs$comboboxW.showComboboxList();
22604
22616
  },
22605
22617
 
22606
22618
  closeComboboxList() {
22619
+ var _this$$refs$comboboxW2;
22620
+
22607
22621
  if (this.showList != null) {
22608
22622
  return;
22609
22623
  }
22610
22624
 
22611
- this.$refs.comboboxWithPopover.closeComboboxList();
22625
+ (_this$$refs$comboboxW2 = this.$refs.comboboxWithPopover) === null || _this$$refs$comboboxW2 === void 0 ? void 0 : _this$$refs$comboboxW2.closeComboboxList();
22612
22626
  },
22613
22627
 
22614
22628
  getChipButtons() {
@@ -22632,9 +22646,9 @@ const CHIP_TOP_POSITION = {
22632
22646
  },
22633
22647
 
22634
22648
  getInput() {
22635
- var _this$$refs$input;
22649
+ var _this$$refs$input2;
22636
22650
 
22637
- return (_this$$refs$input = this.$refs.input) === null || _this$$refs$input === void 0 ? void 0 : _this$$refs$input.$refs.input;
22651
+ return (_this$$refs$input2 = this.$refs.input) === null || _this$$refs$input2 === void 0 ? void 0 : _this$$refs$input2.$refs.input;
22638
22652
  },
22639
22653
 
22640
22654
  onChipKeyup(event) {
@@ -22670,22 +22684,28 @@ const CHIP_TOP_POSITION = {
22670
22684
  },
22671
22685
 
22672
22686
  moveFromInputToChip() {
22687
+ var _this$$refs$input3;
22688
+
22673
22689
  this.getLastChipButton().focus();
22674
- this.$refs.input.blur();
22690
+ (_this$$refs$input3 = this.$refs.input) === null || _this$$refs$input3 === void 0 ? void 0 : _this$$refs$input3.blur();
22675
22691
  this.closeComboboxList();
22676
22692
  },
22677
22693
 
22678
22694
  moveFromChipToInput() {
22695
+ var _this$$refs$input4;
22696
+
22679
22697
  this.getLastChipButton().blur();
22680
- this.$refs.input.focus();
22698
+ (_this$$refs$input4 = this.$refs.input) === null || _this$$refs$input4 === void 0 ? void 0 : _this$$refs$input4.focus();
22681
22699
  this.showComboboxList();
22682
22700
  },
22683
22701
 
22684
22702
  navigateBetweenChips(target, toLeft) {
22703
+ var _this$$refs$chips;
22704
+
22685
22705
  const from = this.getChipButtons().indexOf(target);
22686
22706
  const to = toLeft ? from - 1 : from + 1;
22687
22707
 
22688
- if (to < 0 || to >= this.$refs.chips.length) {
22708
+ if (to < 0 || to >= ((_this$$refs$chips = this.$refs.chips) === null || _this$$refs$chips === void 0 ? void 0 : _this$$refs$chips.length)) {
22689
22709
  return;
22690
22710
  }
22691
22711
 
@@ -22777,8 +22797,8 @@ const CHIP_TOP_POSITION = {
22777
22797
  ;
22778
22798
  var combobox_multi_select_component = normalizeComponent(
22779
22799
  combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
22780
- combobox_multi_selectvue_type_template_id_42ee0c13_render,
22781
- combobox_multi_selectvue_type_template_id_42ee0c13_staticRenderFns,
22800
+ combobox_multi_selectvue_type_template_id_4a2fe866_render,
22801
+ combobox_multi_selectvue_type_template_id_4a2fe866_staticRenderFns,
22782
22802
  false,
22783
22803
  null,
22784
22804
  null,