@dialpad/dialtone-vue 2.76.0 → 2.77.1

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 +20 -0
  3. package/dist/dialtone-vue.common.js +73 -42
  4. package/dist/dialtone-vue.umd.js +73 -42
  5. package/dist/dialtone-vue.umd.min.js +1 -1
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,23 @@
1
+ ## [2.77.1](https://github.com/dialpad/dialtone-vue/compare/v2.77.0...v2.77.1) (2023-04-06)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **Popover:** losing focus ([#896](https://github.com/dialpad/dialtone-vue/issues/896)) ([28f6ccd](https://github.com/dialpad/dialtone-vue/commit/28f6ccd82a6b4ed904227baceb395dbd115b4d36))
7
+
8
+ # [2.77.0](https://github.com/dialpad/dialtone-vue/compare/v2.76.0...v2.77.0) (2023-04-06)
9
+
10
+
11
+ ### Documentation
12
+
13
+ * add rich text editor tech spec ([#893](https://github.com/dialpad/dialtone-vue/issues/893)) ([960bc92](https://github.com/dialpad/dialtone-vue/commit/960bc927d112102f7e7c0fe9903ed146f761134e))
14
+
15
+
16
+ ### Features
17
+
18
+ * **Callbar Button:** add importance prop ([#886](https://github.com/dialpad/dialtone-vue/issues/886)) ([6e24d74](https://github.com/dialpad/dialtone-vue/commit/6e24d746dd2601c8dd3e40063e56cc7088fb5900))
19
+ * **Feed Items:** create feed item time pill ([#885](https://github.com/dialpad/dialtone-vue/issues/885)) ([fe388a4](https://github.com/dialpad/dialtone-vue/commit/fe388a48a64fd007f840e728122f339b49ba6e1f))
20
+
1
21
  # [2.76.0](https://github.com/dialpad/dialtone-vue/compare/v2.75.1...v2.76.0) (2023-04-04)
2
22
 
3
23
 
package/dist/dialtone-vue.common.js CHANGED
@@ -8390,8 +8390,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
8390
8390
  var dropdownvue_type_template_id_b22f331a_staticRenderFns = []
8391
8391
 
8392
8392
 
8393
- ;// 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=432e3a72&
8394
- var popovervue_type_template_id_432e3a72_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":{
8393
+ ;// 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&
8394
+ 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":{
8395
8395
  'aria-expanded': _vm.isOpen.toString(),
8396
8396
  'aria-controls': _vm.id,
8397
8397
  'aria-haspopup': _vm.role,
@@ -8402,7 +8402,7 @@ var popovervue_type_template_id_432e3a72_render = function () {var _vm=this;var
8402
8402
  'd-popover__content',
8403
8403
  _vm.POPOVER_PADDING_CLASSES[_vm.padding],
8404
8404
  _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)}
8405
- var popovervue_type_template_id_432e3a72_staticRenderFns = []
8405
+ var popovervue_type_template_id_6d22723e_staticRenderFns = []
8406
8406
 
8407
8407
 
8408
8408
  ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13966,9 +13966,7 @@ var popover_header_footer_component = normalizeComponent(
13966
13966
  * - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
13967
13967
  * since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
13968
13968
  **/
13969
- async preventScrolling() {
13970
- await this.$nextTick();
13971
-
13969
+ preventScrolling() {
13972
13970
  if (this.modal) {
13973
13971
  const element = this.anchorEl.closest('body, .tippy-box');
13974
13972
 
@@ -13986,23 +13984,19 @@ var popover_header_footer_component = normalizeComponent(
13986
13984
  /*
13987
13985
  * Resets the prevent scrolling properties set in preventScrolling() back to normal.
13988
13986
  **/
13989
- async enableScrolling() {
13990
- await this.$nextTick();
13991
-
13992
- if (this.modal) {
13993
- var _element$tagName;
13987
+ enableScrolling() {
13988
+ var _element$tagName;
13994
13989
 
13995
- const element = this.anchorEl.closest('body, .tippy-box');
13996
- if (!element) return;
13990
+ const element = this.anchorEl.closest('body, .tippy-box');
13991
+ if (!element) return;
13997
13992
 
13998
- if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
13999
- element.classList.remove('d-of-hidden');
14000
- this.tip.setProps({
14001
- offset: this.offset
14002
- });
14003
- } else {
14004
- element.classList.remove('d-zi-popover');
14005
- }
13993
+ if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
13994
+ element.classList.remove('d-of-hidden');
13995
+ this.tip.setProps({
13996
+ offset: this.offset
13997
+ });
13998
+ } else {
13999
+ element.classList.remove('d-zi-popover');
14006
14000
  }
14007
14001
  },
14008
14002
 
@@ -14031,10 +14025,10 @@ var popover_header_footer_component = normalizeComponent(
14031
14025
  await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
14032
14026
 
14033
14027
  await this.$nextTick();
14028
+ this.enableScrolling();
14034
14029
  }
14035
14030
 
14036
14031
  (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
14037
- await this.enableScrolling();
14038
14032
  this.$emit('opened', false);
14039
14033
 
14040
14034
  if (this.open !== null) {
@@ -14043,10 +14037,10 @@ var popover_header_footer_component = normalizeComponent(
14043
14037
  },
14044
14038
 
14045
14039
  async onEnterTransitionComplete() {
14046
- this.focusInitialElement();
14047
- await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
14040
+ this.focusInitialElement(); // await next tick in case the user wants to change focus themselves.
14048
14041
 
14049
14042
  await this.$nextTick();
14043
+ this.preventScrolling();
14050
14044
  this.$emit('opened', true, this.$refs.popover__content);
14051
14045
 
14052
14046
  if (this.open !== null) {
@@ -14173,8 +14167,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(4230);
14173
14167
 
14174
14168
  var popover_component = normalizeComponent(
14175
14169
  popover_popovervue_type_script_lang_js_,
14176
- popovervue_type_template_id_432e3a72_render,
14177
- popovervue_type_template_id_432e3a72_staticRenderFns,
14170
+ popovervue_type_template_id_6d22723e_render,
14171
+ popovervue_type_template_id_6d22723e_staticRenderFns,
14178
14172
  false,
14179
14173
  null,
14180
14174
  null,
@@ -21483,15 +21477,15 @@ var stack_component = normalizeComponent(
21483
21477
  /* harmony default export */ const stack = (stack_component.exports);
21484
21478
  ;// CONCATENATED MODULE: ./components/stack/index.js
21485
21479
 
21486
- ;// 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=5bccf868&
21487
- var combobox_with_popovervue_type_template_id_5bccf868_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){
21480
+ ;// 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&
21481
+ 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){
21488
21482
  var inputProps = ref.inputProps;
21489
21483
  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){
21490
21484
  var opened = ref.opened;
21491
21485
  var listProps = ref.listProps;
21492
21486
  var clearHighlightIndex = ref.clearHighlightIndex;
21493
- 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,"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))}
21494
- var combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns = []
21487
+ 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))}
21488
+ var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
21495
21489
 
21496
21490
 
21497
21491
  ;// 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&
@@ -21601,6 +21595,7 @@ var combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns = []
21601
21595
  //
21602
21596
  //
21603
21597
  //
21598
+ //
21604
21599
 
21605
21600
 
21606
21601
 
@@ -21812,6 +21807,15 @@ var combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns = []
21812
21807
  validator: appendTo => {
21813
21808
  return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
21814
21809
  }
21810
+ },
21811
+
21812
+ /**
21813
+ * Named transition when the content display is toggled.
21814
+ * @see DtLazyShow
21815
+ */
21816
+ transition: {
21817
+ type: String,
21818
+ default: 'fade'
21815
21819
  }
21816
21820
  },
21817
21821
  emits: [
@@ -21976,8 +21980,8 @@ var combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns = []
21976
21980
  ;
21977
21981
  var combobox_with_popover_component = normalizeComponent(
21978
21982
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
21979
- combobox_with_popovervue_type_template_id_5bccf868_render,
21980
- combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns,
21983
+ combobox_with_popovervue_type_template_id_386059b2_render,
21984
+ combobox_with_popovervue_type_template_id_386059b2_staticRenderFns,
21981
21985
  false,
21982
21986
  null,
21983
21987
  null,
@@ -21988,11 +21992,11 @@ var combobox_with_popover_component = normalizeComponent(
21988
21992
  /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
21989
21993
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
21990
21994
 
21991
- ;// 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=40bca95e&
21992
- var combobox_multi_selectvue_type_template_id_40bca95e_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},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
21995
+ ;// 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&
21996
+ 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){
21993
21997
  var onInput = ref.onInput;
21994
21998
  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)})}
21995
- var combobox_multi_selectvue_type_template_id_40bca95e_staticRenderFns = []
21999
+ var combobox_multi_selectvue_type_template_id_42ee0c13_staticRenderFns = []
21996
22000
 
21997
22001
 
21998
22002
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -22209,6 +22213,7 @@ const CHIP_TOP_POSITION = {
22209
22213
  //
22210
22214
  //
22211
22215
  //
22216
+ //
22212
22217
 
22213
22218
 
22214
22219
 
@@ -22379,6 +22384,15 @@ const CHIP_TOP_POSITION = {
22379
22384
  validator: appendTo => {
22380
22385
  return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
22381
22386
  }
22387
+ },
22388
+
22389
+ /**
22390
+ * Named transition when the content display is toggled.
22391
+ * @see DtLazyShow
22392
+ */
22393
+ transition: {
22394
+ type: String,
22395
+ default: 'fade'
22382
22396
  }
22383
22397
  },
22384
22398
  emits: [
@@ -22709,8 +22723,8 @@ const CHIP_TOP_POSITION = {
22709
22723
  ;
22710
22724
  var combobox_multi_select_component = normalizeComponent(
22711
22725
  combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
22712
- combobox_multi_selectvue_type_template_id_40bca95e_render,
22713
- combobox_multi_selectvue_type_template_id_40bca95e_staticRenderFns,
22726
+ combobox_multi_selectvue_type_template_id_42ee0c13_render,
22727
+ combobox_multi_selectvue_type_template_id_42ee0c13_staticRenderFns,
22714
22728
  false,
22715
22729
  null,
22716
22730
  null,
@@ -22722,9 +22736,9 @@ var combobox_multi_select_component = normalizeComponent(
22722
22736
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
22723
22737
 
22724
22738
 
22725
- ;// 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/buttons/callbar_button/callbar_button.vue?vue&type=template&id=9499378e&
22726
- var callbar_buttonvue_type_template_id_9499378e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('span',{class:{ 'd-c-not-allowed': _vm.disabled }},[_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","aria-disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":_vm.callbarButtonTextClass,"width":_vm.buttonWidth}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)],1)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
22727
- var callbar_buttonvue_type_template_id_9499378e_staticRenderFns = []
22739
+ ;// 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/buttons/callbar_button/callbar_button.vue?vue&type=template&id=66e6b32c&
22740
+ var callbar_buttonvue_type_template_id_66e6b32c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('span',{class:{ 'd-c-not-allowed': _vm.disabled }},[_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.buttonImportance,"kind":"muted","icon-position":"top","aria-disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":_vm.callbarButtonTextClass,"width":_vm.buttonWidth}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)],1)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
22741
+ var callbar_buttonvue_type_template_id_66e6b32c_staticRenderFns = []
22728
22742
 
22729
22743
 
22730
22744
  ;// 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/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js&
@@ -22860,6 +22874,15 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
22860
22874
  type: String,
22861
22875
  default: 'xl',
22862
22876
  validator: size => VALID_WIDTH_SIZE.includes(size)
22877
+ },
22878
+
22879
+ /**
22880
+ * The fill and outline of the button associated with its visual importance.
22881
+ * @values clear, outlined, primary
22882
+ */
22883
+ importance: {
22884
+ type: String,
22885
+ default: ''
22863
22886
  }
22864
22887
  },
22865
22888
  emits: [
@@ -22896,6 +22919,14 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
22896
22919
  default:
22897
22920
  return '8.4rem';
22898
22921
  }
22922
+ },
22923
+
22924
+ buttonImportance() {
22925
+ if (this.importance) {
22926
+ return this.importance;
22927
+ }
22928
+
22929
+ return this.circle ? 'outlined' : 'clear';
22899
22930
  }
22900
22931
 
22901
22932
  }
@@ -22917,8 +22948,8 @@ var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(2759);
22917
22948
 
22918
22949
  var callbar_button_component = normalizeComponent(
22919
22950
  callbar_button_callbar_buttonvue_type_script_lang_js_,
22920
- callbar_buttonvue_type_template_id_9499378e_render,
22921
- callbar_buttonvue_type_template_id_9499378e_staticRenderFns,
22951
+ callbar_buttonvue_type_template_id_66e6b32c_render,
22952
+ callbar_buttonvue_type_template_id_66e6b32c_staticRenderFns,
22922
22953
  false,
22923
22954
  null,
22924
22955
  null,
package/dist/dialtone-vue.umd.js CHANGED
@@ -8400,8 +8400,8 @@ return [_c('ul',{ref:"listWrapper",class:_vm.listClasses,attrs:{"id":_vm.listId,
8400
8400
  var dropdownvue_type_template_id_b22f331a_staticRenderFns = []
8401
8401
 
8402
8402
 
8403
- ;// 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=432e3a72&
8404
- var popovervue_type_template_id_432e3a72_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":{
8403
+ ;// 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&
8404
+ 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":{
8405
8405
  'aria-expanded': _vm.isOpen.toString(),
8406
8406
  'aria-controls': _vm.id,
8407
8407
  'aria-haspopup': _vm.role,
@@ -8412,7 +8412,7 @@ var popovervue_type_template_id_432e3a72_render = function () {var _vm=this;var
8412
8412
  'd-popover__content',
8413
8413
  _vm.POPOVER_PADDING_CLASSES[_vm.padding],
8414
8414
  _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)}
8415
- var popovervue_type_template_id_432e3a72_staticRenderFns = []
8415
+ var popovervue_type_template_id_6d22723e_staticRenderFns = []
8416
8416
 
8417
8417
 
8418
8418
  ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js
@@ -13976,9 +13976,7 @@ var popover_header_footer_component = normalizeComponent(
13976
13976
  * - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
13977
13977
  * since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
13978
13978
  **/
13979
- async preventScrolling() {
13980
- await this.$nextTick();
13981
-
13979
+ preventScrolling() {
13982
13980
  if (this.modal) {
13983
13981
  const element = this.anchorEl.closest('body, .tippy-box');
13984
13982
 
@@ -13996,23 +13994,19 @@ var popover_header_footer_component = normalizeComponent(
13996
13994
  /*
13997
13995
  * Resets the prevent scrolling properties set in preventScrolling() back to normal.
13998
13996
  **/
13999
- async enableScrolling() {
14000
- await this.$nextTick();
14001
-
14002
- if (this.modal) {
14003
- var _element$tagName;
13997
+ enableScrolling() {
13998
+ var _element$tagName;
14004
13999
 
14005
- const element = this.anchorEl.closest('body, .tippy-box');
14006
- if (!element) return;
14000
+ const element = this.anchorEl.closest('body, .tippy-box');
14001
+ if (!element) return;
14007
14002
 
14008
- if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
14009
- element.classList.remove('d-of-hidden');
14010
- this.tip.setProps({
14011
- offset: this.offset
14012
- });
14013
- } else {
14014
- element.classList.remove('d-zi-popover');
14015
- }
14003
+ if (((_element$tagName = element.tagName) === null || _element$tagName === void 0 ? void 0 : _element$tagName.toLowerCase()) === 'body') {
14004
+ element.classList.remove('d-of-hidden');
14005
+ this.tip.setProps({
14006
+ offset: this.offset
14007
+ });
14008
+ } else {
14009
+ element.classList.remove('d-zi-popover');
14016
14010
  }
14017
14011
  },
14018
14012
 
@@ -14041,10 +14035,10 @@ var popover_header_footer_component = normalizeComponent(
14041
14035
  await this.focusFirstElement(this.$refs.anchor); // await next tick in case the user wants to change focus themselves.
14042
14036
 
14043
14037
  await this.$nextTick();
14038
+ this.enableScrolling();
14044
14039
  }
14045
14040
 
14046
14041
  (_this$tip8 = this.tip) === null || _this$tip8 === void 0 ? void 0 : _this$tip8.unmount();
14047
- await this.enableScrolling();
14048
14042
  this.$emit('opened', false);
14049
14043
 
14050
14044
  if (this.open !== null) {
@@ -14053,10 +14047,10 @@ var popover_header_footer_component = normalizeComponent(
14053
14047
  },
14054
14048
 
14055
14049
  async onEnterTransitionComplete() {
14056
- this.focusInitialElement();
14057
- await this.preventScrolling(); // await next tick in case the user wants to change focus themselves.
14050
+ this.focusInitialElement(); // await next tick in case the user wants to change focus themselves.
14058
14051
 
14059
14052
  await this.$nextTick();
14053
+ this.preventScrolling();
14060
14054
  this.$emit('opened', true, this.$refs.popover__content);
14061
14055
 
14062
14056
  if (this.open !== null) {
@@ -14183,8 +14177,8 @@ var popovervue_type_style_index_0_lang_less_ = __webpack_require__(2532);
14183
14177
 
14184
14178
  var popover_component = normalizeComponent(
14185
14179
  popover_popovervue_type_script_lang_js_,
14186
- popovervue_type_template_id_432e3a72_render,
14187
- popovervue_type_template_id_432e3a72_staticRenderFns,
14180
+ popovervue_type_template_id_6d22723e_render,
14181
+ popovervue_type_template_id_6d22723e_staticRenderFns,
14188
14182
  false,
14189
14183
  null,
14190
14184
  null,
@@ -21493,15 +21487,15 @@ var stack_component = normalizeComponent(
21493
21487
  /* harmony default export */ const stack = (stack_component.exports);
21494
21488
  ;// CONCATENATED MODULE: ./components/stack/index.js
21495
21489
 
21496
- ;// 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=5bccf868&
21497
- var combobox_with_popovervue_type_template_id_5bccf868_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){
21490
+ ;// 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&
21491
+ 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){
21498
21492
  var inputProps = ref.inputProps;
21499
21493
  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){
21500
21494
  var opened = ref.opened;
21501
21495
  var listProps = ref.listProps;
21502
21496
  var clearHighlightIndex = ref.clearHighlightIndex;
21503
- 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,"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))}
21504
- var combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns = []
21497
+ 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))}
21498
+ var combobox_with_popovervue_type_template_id_386059b2_staticRenderFns = []
21505
21499
 
21506
21500
 
21507
21501
  ;// 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&
@@ -21611,6 +21605,7 @@ var combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns = []
21611
21605
  //
21612
21606
  //
21613
21607
  //
21608
+ //
21614
21609
 
21615
21610
 
21616
21611
 
@@ -21822,6 +21817,15 @@ var combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns = []
21822
21817
  validator: appendTo => {
21823
21818
  return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
21824
21819
  }
21820
+ },
21821
+
21822
+ /**
21823
+ * Named transition when the content display is toggled.
21824
+ * @see DtLazyShow
21825
+ */
21826
+ transition: {
21827
+ type: String,
21828
+ default: 'fade'
21825
21829
  }
21826
21830
  },
21827
21831
  emits: [
@@ -21986,8 +21990,8 @@ var combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns = []
21986
21990
  ;
21987
21991
  var combobox_with_popover_component = normalizeComponent(
21988
21992
  combobox_with_popover_combobox_with_popovervue_type_script_lang_js_,
21989
- combobox_with_popovervue_type_template_id_5bccf868_render,
21990
- combobox_with_popovervue_type_template_id_5bccf868_staticRenderFns,
21993
+ combobox_with_popovervue_type_template_id_386059b2_render,
21994
+ combobox_with_popovervue_type_template_id_386059b2_staticRenderFns,
21991
21995
  false,
21992
21996
  null,
21993
21997
  null,
@@ -21998,11 +22002,11 @@ var combobox_with_popover_component = normalizeComponent(
21998
22002
  /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
21999
22003
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
22000
22004
 
22001
- ;// 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=40bca95e&
22002
- var combobox_multi_selectvue_type_template_id_40bca95e_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},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
22005
+ ;// 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&
22006
+ 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){
22003
22007
  var onInput = ref.onInput;
22004
22008
  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)})}
22005
- var combobox_multi_selectvue_type_template_id_40bca95e_staticRenderFns = []
22009
+ var combobox_multi_selectvue_type_template_id_42ee0c13_staticRenderFns = []
22006
22010
 
22007
22011
 
22008
22012
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -22219,6 +22223,7 @@ const CHIP_TOP_POSITION = {
22219
22223
  //
22220
22224
  //
22221
22225
  //
22226
+ //
22222
22227
 
22223
22228
 
22224
22229
 
@@ -22389,6 +22394,15 @@ const CHIP_TOP_POSITION = {
22389
22394
  validator: appendTo => {
22390
22395
  return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
22391
22396
  }
22397
+ },
22398
+
22399
+ /**
22400
+ * Named transition when the content display is toggled.
22401
+ * @see DtLazyShow
22402
+ */
22403
+ transition: {
22404
+ type: String,
22405
+ default: 'fade'
22392
22406
  }
22393
22407
  },
22394
22408
  emits: [
@@ -22719,8 +22733,8 @@ const CHIP_TOP_POSITION = {
22719
22733
  ;
22720
22734
  var combobox_multi_select_component = normalizeComponent(
22721
22735
  combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
22722
- combobox_multi_selectvue_type_template_id_40bca95e_render,
22723
- combobox_multi_selectvue_type_template_id_40bca95e_staticRenderFns,
22736
+ combobox_multi_selectvue_type_template_id_42ee0c13_render,
22737
+ combobox_multi_selectvue_type_template_id_42ee0c13_staticRenderFns,
22724
22738
  false,
22725
22739
  null,
22726
22740
  null,
@@ -22732,9 +22746,9 @@ var combobox_multi_select_component = normalizeComponent(
22732
22746
  ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
22733
22747
 
22734
22748
 
22735
- ;// 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/buttons/callbar_button/callbar_button.vue?vue&type=template&id=9499378e&
22736
- var callbar_buttonvue_type_template_id_9499378e_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('span',{class:{ 'd-c-not-allowed': _vm.disabled }},[_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","aria-disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":_vm.callbarButtonTextClass,"width":_vm.buttonWidth}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)],1)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
22737
- var callbar_buttonvue_type_template_id_9499378e_staticRenderFns = []
22749
+ ;// 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/buttons/callbar_button/callbar_button.vue?vue&type=template&id=66e6b32c&
22750
+ var callbar_buttonvue_type_template_id_66e6b32c_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-tooltip',{attrs:{"id":_vm.id,"offset":[0, -12]},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('span',{class:{ 'd-c-not-allowed': _vm.disabled }},[_c('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.buttonImportance,"kind":"muted","icon-position":"top","aria-disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":_vm.callbarButtonTextClass,"width":_vm.buttonWidth}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)],1)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
22751
+ var callbar_buttonvue_type_template_id_66e6b32c_staticRenderFns = []
22738
22752
 
22739
22753
 
22740
22754
  ;// 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/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js&
@@ -22870,6 +22884,15 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
22870
22884
  type: String,
22871
22885
  default: 'xl',
22872
22886
  validator: size => VALID_WIDTH_SIZE.includes(size)
22887
+ },
22888
+
22889
+ /**
22890
+ * The fill and outline of the button associated with its visual importance.
22891
+ * @values clear, outlined, primary
22892
+ */
22893
+ importance: {
22894
+ type: String,
22895
+ default: ''
22873
22896
  }
22874
22897
  },
22875
22898
  emits: [
@@ -22906,6 +22929,14 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
22906
22929
  default:
22907
22930
  return '8.4rem';
22908
22931
  }
22932
+ },
22933
+
22934
+ buttonImportance() {
22935
+ if (this.importance) {
22936
+ return this.importance;
22937
+ }
22938
+
22939
+ return this.circle ? 'outlined' : 'clear';
22909
22940
  }
22910
22941
 
22911
22942
  }
@@ -22927,8 +22958,8 @@ var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(736);
22927
22958
 
22928
22959
  var callbar_button_component = normalizeComponent(
22929
22960
  callbar_button_callbar_buttonvue_type_script_lang_js_,
22930
- callbar_buttonvue_type_template_id_9499378e_render,
22931
- callbar_buttonvue_type_template_id_9499378e_staticRenderFns,
22961
+ callbar_buttonvue_type_template_id_66e6b32c_render,
22962
+ callbar_buttonvue_type_template_id_66e6b32c_staticRenderFns,
22932
22963
  false,
22933
22964
  null,
22934
22965
  null,