@dialpad/dialtone-vue 2.22.3 → 2.23.0

package/dist/dialtone-vue.common.js

@@ -239,6 +239,54 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".tippy-box[data-popper-escaped] .d-too
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 41:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){width:8rem;height:6.2rem;letter-spacing:-.011rem;line-height:1.6rem}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn .d-btn__icon .d-svg{width:2.4rem;height:2.4rem}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--active{--button--fc:var(--muted-color-hover);--button--bgc:hsla(var(--muted-color-hsl)/15%)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active{--button--bgc:hsla(var(--error-color-hsl)/10%);--button--fc:var(--error-color-hover)}.dt-recipe-callbar-button--danger.dt-recipe-callbar-button--active:hover{--button--bgc:hsla(var(--error-color-hsl)/20%);--button--fc:var(--error-color-hover)}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
+/***/ }),
+
+/***/ 489:
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(481);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(400);
+/* harmony import */ var _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+var ___CSS_LOADER_EXPORT___ = _node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_vue_cli_service_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".dt-recipe--callbar-button-with-popover--button{position:relative;display:inline-block}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{position:absolute;top:2rem;right:0;width:var(--su16);height:var(--su16);padding:var(--su8);border-radius:var(--su4)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--black-025)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--black-900);color:var(--white)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--white)}.d-tab--selected:after,.d-tab--selected:hover:after{--tab--bgc:var(--black-900)}.tab-group{display:flex;flex-direction:column;height:100%}.tab-content{flex:1 1 100%;overflow-y:auto}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 3:
@@ -546,6 +594,38 @@ var update = add("0a135999", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 759:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(41);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("326eb2ad", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
+/***/ 545:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(489);
+if(content.__esModule) content = content.default;
+if(typeof content === 'string') content = [[module.id, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var add = (__webpack_require__(402)/* ["default"] */ .Z)
+var update = add("6de67338", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 9:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -952,6 +1032,8 @@ __webpack_require__.d(__webpack_exports__, {
   "DtPopover": () => (/* reexport */ popover),
   "DtRadio": () => (/* reexport */ radio_radio),
   "DtRadioGroup": () => (/* reexport */ radio_group),
+  "DtRecipeCallbarButton": () => (/* reexport */ callbar_button),
+  "DtRecipeCallbarButtonWithPopover": () => (/* reexport */ callbar_button_with_popover),
   "DtRecipeComboboxMultiSelect": () => (/* reexport */ combobox_multi_select),
   "DtRecipeComboboxWithPopover": () => (/* reexport */ combobox_with_popover),
   "DtRecipeContactInfo": () => (/* reexport */ contact_info),
@@ -17766,11 +17848,11 @@ var combobox_with_popover_component = normalizeComponent(
 /* harmony default export */ const combobox_with_popover = (combobox_with_popover_component.exports);
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_with_popover/index.js
 
-;// 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=50e5c78d&
-var combobox_multi_selectvue_type_template_id_50e5c78d_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:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
+;// 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=14e17b26&
+var combobox_multi_selectvue_type_template_id_14e17b26_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:{"list-aria-label":"listAriaLabel","show-list":_vm.showList,"max-height":_vm.listMaxHeight,"popover-offset":_vm.popoverOffset,"has-suggestion-list":_vm.hasSuggestionList,"content-width":"anchor"},on:{"select":_vm.onComboboxSelect},scopedSlots:_vm._u([{key:"input",fn:function(ref){
 var onInput = ref.onInput;
 return [_c('span',{ref:"inputSlotWrapper",staticClass:"d-ps-relative"},[_c('span',{ref:"chipsWrapper",staticClass:"d-ps-absolute d-mx2"},_vm._l((_vm.selectedItems),function(item){return _c('dt-chip',_vm._g({key:item.id,ref:"chips",refInFor:true,staticClass:"d-mt4 d-mx2 d-zi-base1",attrs:{"close-button-props":{ ariaLabel: 'close' },"size":_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 d-mb4",attrs:{"label":_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"},[(!_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)})}
-var combobox_multi_selectvue_type_template_id_50e5c78d_staticRenderFns = []
+var combobox_multi_selectvue_type_template_id_14e17b26_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/combobox_multi_select_story_constants.js
@@ -17974,6 +18056,9 @@ const MULTI_SELECT_SIZES = {
 
 
 
+
+
+
 /* harmony default export */ const combobox_multi_selectvue_type_script_lang_js_ = ({
   name: 'DtRecipeComboboxMultiSelect',
   components: {
@@ -18406,8 +18491,8 @@ const MULTI_SELECT_SIZES = {
 ;
 var combobox_multi_select_component = normalizeComponent(
   combobox_multi_select_combobox_multi_selectvue_type_script_lang_js_,
-  combobox_multi_selectvue_type_template_id_50e5c78d_render,
-  combobox_multi_selectvue_type_template_id_50e5c78d_staticRenderFns,
+  combobox_multi_selectvue_type_template_id_14e17b26_render,
+  combobox_multi_selectvue_type_template_id_14e17b26_staticRenderFns,
   false,
   null,
   null,
@@ -18419,8 +18504,438 @@ var combobox_multi_select_component = normalizeComponent(
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// 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/list_items/contact_info/contact_info.vue?vue&type=template&id=3f590359&
-var contact_infovue_type_template_id_3f590359_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-list-item',{attrs:{"id":_vm.id,"role":_vm.role,"element-type":"div","data-qa":"contact-info"},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('div',{staticClass:"d-ps-relative",attrs:{"data-qa":"contact-info-left"}},[(_vm.avatarSrc)?_c('dt-avatar',{attrs:{"size":"lg","avatar-class":"d-bar2"}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"kind":"initials","size":"lg","color":_vm.avatarColor}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e(),(_vm.showUserStatus)?_c('div',{class:[
+;// 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=0421e5c4&
+var callbar_buttonvue_type_template_id_0421e5c4_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('dt-button',_vm._g({class:_vm.callbarButtonClass,attrs:{"importance":_vm.circle ? 'outlined' : 'clear',"kind":"muted","icon-position":"top","disabled":_vm.disabled,"aria-label":_vm.ariaLabel,"label-class":"d-fs11"}},_vm.$listeners),[_vm._t("default"),_vm._t("icon",null,{"slot":"icon"})],2)]},proxy:true}],null,true)},[_vm._t("tooltip")],2)}
+var callbar_buttonvue_type_template_id_0421e5c4_staticRenderFns = []
+
+
+;// 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&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+/* harmony default export */ const callbar_buttonvue_type_script_lang_js_ = ({
+  name: 'DtRecipeCallbarButton',
+  components: {
+    DtButton: button_button,
+    DtTooltip: tooltip
+  },
+  inheritAttrs: true,
+  props: {
+    /**
+     * Id for the item.
+     */
+    id: {
+      type: String,
+
+      default() {
+        return utils.getUniqueString();
+      }
+
+    },
+
+    /**
+     * Determines whether the button should have active styling
+     * default is false.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    active: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines whether the button should have danger styling
+     * default is false.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    danger: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines whether the button should be disabled
+     * default is false.
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Whether the button is a circle or not.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    circle: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Aria label for the button. If empty, it takes its value from the default slot.
+     */
+    ariaLabel: {
+      type: String,
+      default: null,
+      validator: label => {
+        return label || undefined.$slots.default;
+      }
+    }
+  },
+  emits: ['click'],
+  computed: {
+    callbarButtonClass() {
+      return ['dt-recipe-callbar-button', 'd-stack4', {
+        'dt-recipe-callbar-button--circle': this.circle,
+        'dt-recipe-callbar-button--active': this.active,
+        'dt-recipe-callbar-button--danger': this.danger
+      }];
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js&
+ /* harmony default export */ const callbar_button_callbar_buttonvue_type_script_lang_js_ = (callbar_buttonvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./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=style&index=0&lang=less&
+var callbar_buttonvue_type_style_index_0_lang_less_ = __webpack_require__(759);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&lang=less&
+
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var callbar_button_component = normalizeComponent(
+  callbar_button_callbar_buttonvue_type_script_lang_js_,
+  callbar_buttonvue_type_template_id_0421e5c4_render,
+  callbar_buttonvue_type_template_id_0421e5c4_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const callbar_button = (callbar_button_component.exports);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
+
+;// 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_with_popover/callbar_button_with_popover.vue?vue&type=template&id=d1e0f278&
+var callbar_button_with_popovervue_type_template_id_d1e0f278_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"dt-recipe--callbar-button-with-popover--button"},[_c('dt-recipe-callbar-button',{staticClass:"dt-recipe--callbar-button-with-popover--main-button",attrs:{"aria-label":_vm.ariaLabel,"disabled":_vm.disabled,"active":_vm.active,"danger":_vm.danger},on:{"click":_vm.buttonClick}},[_vm._t("icon",null,{"slot":"icon"}),_vm._t("tooltip",null,{"slot":"tooltip"}),_vm._t("default")],2),(!_vm.disabled)?_c('dt-popover',_vm._b({staticClass:"dt-recipe--callbar-button-with-popover--popover-wrapper",attrs:{"id":_vm.id,"disabled":_vm.disabled,"open":_vm.open,"placement":_vm.placement,"initial-focus-element":_vm.initialFocusElement,"show-close-button":_vm.showCloseButton,"padding":"none","dialog-class":"d-h464 d-w512 dt-recipe--callbar-button-with-popover--popover","header-class":"d-d-flex d-ai-center d-fw-normal d-px12"},on:{"opened":_vm.onModalIsOpened},scopedSlots:_vm._u([{key:"anchor",fn:function(){return [_c('dt-button',{staticClass:"dt-recipe--callbar-button-with-popover--arrow",attrs:{"circle":"","importance":"clear","size":"lg","aria-label":_vm.arrowButtonLabel,"active":_vm.open},on:{"click":_vm.arrowClick},scopedSlots:_vm._u([{key:"icon",fn:function(){return [_c('icon-arrow-drop-up',{staticClass:"d-svg--size-16"})]},proxy:true}],null,false,2876394386)})]},proxy:true}],null,false,4054443748)},'dt-popover',_vm.$attrs,false),[_vm._t("content",null,{"slot":"content"}),_vm._t("headerContent",null,{"slot":"headerContent"}),_vm._t("footerContent",null,{"slot":"footerContent"})],2):_vm._e()],1)}
+var callbar_button_with_popovervue_type_template_id_d1e0f278_staticRenderFns = []
+
+
+;// 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!./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue?vue&type=template&id=35fc0e49&
+var IconArrowDropUpvue_type_template_id_35fc0e49_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('svg',{staticClass:"d-svg d-svg--system d-svg__arrowDropUp",attrs:{"aria-hidden":"true","aria-label":"Arrow Drop Up","viewBox":"0 0 24 24"}},[_c('path',{attrs:{"d":"M7 14l5-5 5 5H7z"}})])}
+var IconArrowDropUpvue_type_template_id_35fc0e49_staticRenderFns = []
+
+
+;// CONCATENATED MODULE: ./node_modules/@dialpad/dialtone/lib/dist/vue/icons/IconArrowDropUp.vue
+
+var IconArrowDropUp_script = {}
+
+
+/* normalize component */
+;
+var IconArrowDropUp_component = normalizeComponent(
+  IconArrowDropUp_script,
+  IconArrowDropUpvue_type_template_id_35fc0e49_render,
+  IconArrowDropUpvue_type_template_id_35fc0e49_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const IconArrowDropUp = (IconArrowDropUp_component.exports);
+;// 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_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js&
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+
+
+
+
+
+/* harmony default export */ const callbar_button_with_popovervue_type_script_lang_js_ = ({
+  name: 'DtRecipeCallbarButtonWithPopover',
+  components: {
+    DtRecipeCallbarButton: callbar_button,
+    DtPopover: popover,
+    DtButton: button_button,
+    IconArrowDropUp: IconArrowDropUp
+  },
+
+  /* inheritAttrs: false is generally an option we want to set on library
+    components. This allows any attributes passed in that are not recognized
+    as props to be passed down to another element or component using v-bind:$attrs
+    more info: https://vuejs.org/v2/api/#inheritAttrs */
+  inheritAttrs: false,
+  props: {
+    /**
+     * Id for the item.
+     */
+    id: {
+      type: String,
+
+      default() {
+        return utils.getUniqueString();
+      }
+
+    },
+
+    /**
+     * Aria label for the button. If empty, it takes its value from the default slot.
+     */
+    ariaLabel: {
+      type: String,
+      default: null,
+      validator: label => {
+        return label || undefined.$slots.default;
+      }
+    },
+
+    /**
+     * Aria label for the arrow. Cannot be empty.
+     */
+    arrowButtonLabel: {
+      type: String,
+      required: true,
+      validator: label => {
+        return !!label;
+      }
+    },
+
+    /**
+     * The direction the popover displays relative to the anchor.
+     * @values 'bottom', 'bottom-start', 'bottom-end',
+     *         'right', 'right-start', 'right-end',
+     *         'left', 'left-start', 'left-end',
+     *         'top', 'top-start', 'top-end'
+     * @default 'top'
+     */
+    placement: {
+      type: String,
+      default: 'top'
+    },
+
+    /**
+     * The element that is focused when the popover is opened. This can be an
+     * HTMLElement within the popover, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     */
+    initialFocusElement: {
+      type: String,
+      default: 'first'
+    },
+
+    /**
+     * Determines visibility for close button
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: true
+    },
+
+    /**
+     * Determines whether the button should be disabled
+     * default is false.
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines whether the button should have active styling
+     * default is false.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    active: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Determines whether the button should have danger styling
+     * default is false.
+     * @values true, false
+     * @see https://dialpad.design/components/button/
+     */
+    danger: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+  /**
+   * Emitted when the arrow is clicked
+   */
+  'arrowClick', 'click'],
+
+  data() {
+    return {
+      open: false
+    };
+  },
+
+  methods: {
+    arrowClick(ev) {
+      this.$emit('arrowClick', ev);
+      return this.open = !this.open;
+    },
+
+    buttonClick(ev) {
+      // If no listener for the click event, the button click opens the popover
+      // the same as if the arrow was clicked.
+      if (!this.$listeners.click) {
+        this.arrowClick(ev);
+      } else {
+        this.$emit('click', ev);
+      }
+    },
+
+    onModalIsOpened(isOpened) {
+      this.open = isOpened;
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=script&lang=js&
+ /* harmony default export */ const callbar_button_with_popover_callbar_button_with_popovervue_type_script_lang_js_ = (callbar_button_with_popovervue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-32[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&lang=less&
+var callbar_button_with_popovervue_type_style_index_0_lang_less_ = __webpack_require__(545);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue?vue&type=style&index=0&lang=less&
+
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue
+
+
+
+;
+
+
+/* normalize component */
+
+var callbar_button_with_popover_component = normalizeComponent(
+  callbar_button_with_popover_callbar_button_with_popovervue_type_script_lang_js_,
+  callbar_button_with_popovervue_type_template_id_d1e0f278_render,
+  callbar_button_with_popovervue_type_template_id_d1e0f278_staticRenderFns,
+  false,
+  null,
+  null,
+  null
+  
+)
+
+/* harmony default export */ const callbar_button_with_popover = (callbar_button_with_popover_component.exports);
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button_with_popover/index.js
+
+;// 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/list_items/contact_info/contact_info.vue?vue&type=template&id=2ea57cf6&
+var contact_infovue_type_template_id_2ea57cf6_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('dt-list-item',{attrs:{"id":_vm.id,"role":_vm.role,"element-type":"div","data-qa":"contact-info"},scopedSlots:_vm._u([{key:"left",fn:function(){return [_c('div',{staticClass:"d-ps-relative",attrs:{"data-qa":"contact-info-left"}},[(_vm.avatarSrc)?_c('dt-avatar',{attrs:{"size":"lg","avatar-class":"d-bar2"}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"kind":"initials","size":"lg","color":_vm.avatarColor}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e(),(_vm.showUserStatus)?_c('div',{class:[
           'd-ba',
           'd-bc-white',
           'd-baw2',
@@ -18431,7 +18946,7 @@ var contact_infovue_type_template_id_3f590359_render = function () {var _vm=this
           'd-w20p',
           'd-h20p',
           _vm.USER_STATUS_COLOR_MODIFIERS[_vm.userStatusColor] ],attrs:{"data-qa":"contact-info-user-status"}},[_vm._v("   ")]):_vm._e()],1)]},proxy:true},{key:"default",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-header"}},[_vm._t("header")],2)]},proxy:true},{key:"subtitle",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-subtitle"}},[_vm._t("subtitle")],2)]},proxy:true},{key:"bottom",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-bottom"}},[_vm._t("bottom")],2)]},proxy:true},{key:"right",fn:function(){return [_c('div',{attrs:{"data-qa":"contact-info-right"}},[_vm._t("right")],2)]},proxy:true}],null,true)})}
-var contact_infovue_type_template_id_3f590359_staticRenderFns = []
+var contact_infovue_type_template_id_2ea57cf6_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
@@ -18529,6 +19044,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 
 
 
+
+
 /* harmony default export */ const contact_infovue_type_script_lang_js_ = ({
   name: 'DtRecipeContactInfo',
   components: {
@@ -18622,8 +19139,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 ;
 var contact_info_component = normalizeComponent(
   contact_info_contact_infovue_type_script_lang_js_,
-  contact_infovue_type_template_id_3f590359_render,
-  contact_infovue_type_template_id_3f590359_staticRenderFns,
+  contact_infovue_type_template_id_2ea57cf6_render,
+  contact_infovue_type_template_id_2ea57cf6_staticRenderFns,
   false,
   null,
   null,
@@ -18771,6 +19288,8 @@ var top_banner_info_component = normalizeComponent(
 
 
 
+
+
  // Mixins
 
  // Constants