@dialpad/dialtone-vue 2.44.0 → 2.45.0

package/dist/dialtone-vue.umd.js

@@ -11,7 +11,7 @@
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 890:
+/***/ 555:
 /***/ ((module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
@@ -33,6 +33,30 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".enter-active,.leave-active{overflow:h
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ 67:
+/***/ ((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, ".d-avatar--image-loaded{background-color:initial;background-image:unset}", ""]);
+// Exports
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ 140:
@@ -522,7 +546,7 @@ module.exports = function (i) {
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(890);
+var content = __webpack_require__(555);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
@@ -532,6 +556,22 @@ var update = add("63ce6251", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
+/***/ 329:
+/***/ ((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__(67);
+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("b4bc460a", content, true, {"sourceMap":false,"shadowMode":false});
+
+/***/ }),
+
 /***/ 464:
 /***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
@@ -1120,7 +1160,6 @@ __webpack_require__.r(__webpack_exports__);
 
 // EXPORTS
 __webpack_require__.d(__webpack_exports__, {
-  "AVATAR_COLOR_MODIFIERS": () => (/* reexport */ AVATAR_COLOR_MODIFIERS),
   "AVATAR_KIND_MODIFIERS": () => (/* reexport */ AVATAR_KIND_MODIFIERS),
   "AVATAR_SIZE_MODIFIERS": () => (/* reexport */ AVATAR_SIZE_MODIFIERS),
   "BADGE_KIND_MODIFIERS": () => (/* reexport */ BADGE_KIND_MODIFIERS),
@@ -1259,13 +1298,12 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ const setPublicPath = (null);
 
-;// 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=8203a6da&
+;// 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=68159748&
 var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:[
     'd-avatar',
     _vm.AVATAR_KIND_MODIFIERS[_vm.kind],
     _vm.AVATAR_SIZE_MODIFIERS[_vm.size],
-    _vm.AVATAR_COLOR_MODIFIERS[_vm.color],
-    _vm.avatarClass ],attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[_vm._t("default"),(_vm.presence)?_c('dt-presence',_vm._b({class:[
+    _vm.avatarClass ],style:(_vm.initialKindStyle),attrs:{"id":_vm.id,"data-qa":"dt-avatar"}},[(_vm.showDefaultSlot)?_vm._t("default"):(_vm.showInitials)?_c('span',[_vm._v(" "+_vm._s(_vm.formattedInitials)+" ")]):_vm._e(),(_vm.presence)?_c('dt-presence',_vm._b({class:[
       'd-avatar__presence',
       _vm.AVATAR_PRESENCE_SIZE_MODIFIERS[_vm.size] ],attrs:{"presence":_vm.presence,"data-qa":"dt-presence"}},'dt-presence',_vm.presenceProps,false)):_vm._e()],2)}
 var staticRenderFns = []
@@ -1359,6 +1397,15 @@ function getUniqueString() {
   let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_PREFIX;
   return `${prefix}${UNIQUE_ID_COUNTER++}`;
 }
+/**
+ * Returns a random element from array
+ * @param array
+ * @returns {*}
+ */
+
+function getRandomElement(array) {
+  return array[Math.floor(Math.random() * array.length)];
+}
 function formatMessages(messages) {
   if (!messages) {
     return [];
@@ -1468,6 +1515,7 @@ const pascalCaseToKebabCase = string => {
 };
 /* harmony default export */ const utils = ({
   getUniqueString,
+  getRandomElement,
   formatMessages,
   filterFormattedMessages,
   hasFormattedMessageOfType,
@@ -1683,43 +1731,35 @@ const AVATAR_KIND_MODIFIERS = {
   initials: 'd-avatar--initials'
 };
 const AVATAR_SIZE_MODIFIERS = {
+  xs: 'd-avatar--xs',
   sm: 'd-avatar--sm',
   md: 'd-avatar--md',
-  lg: 'd-avatar--lg'
+  lg: 'd-avatar--lg',
+  xl: 'd-avatar--xl'
 };
 const AVATAR_PRESENCE_SIZE_MODIFIERS = {
   md: 'd-avatar__presence--md',
   lg: 'd-avatar__presence--lg'
 };
-const AVATAR_COLOR_MODIFIERS = {
-  base: '',
-  'orange-200': 'd-avatar--orange-200',
-  'orange-300': 'd-avatar--orange-300',
-  'orange-400': 'd-avatar--orange-400',
-  'orange-500': 'd-avatar--orange-500',
-  'magenta-100': 'd-avatar--magenta-100',
-  'magenta-200': 'd-avatar--magenta-200',
-  'magenta-300': 'd-avatar--magenta-300',
-  'magenta-400': 'd-avatar--magenta-400',
-  'purple-200': 'd-avatar--purple-200',
-  'purple-300': 'd-avatar--purple-300',
-  'purple-400': 'd-avatar--purple-400',
-  'purple-500': 'd-avatar--purple-500',
-  'gold-100': 'd-avatar--gold-100',
-  'gold-200': 'd-avatar--gold-200',
-  'gold-300': 'd-avatar--gold-300',
-  'gold-500': 'd-avatar--gold-500'
-};
 const AVATAR_ICON_SIZES = {
+  xs: '100',
   sm: '200',
   md: '400',
-  lg: '500'
+  lg: '500',
+  xl: '600'
+};
+const AVATAR_ANGLES = [45, -45, 90, -90, 135, -135, 180, -180];
+const GRADIENT_COLORS = {
+  with100: ['purple-100', 'magenta-100', 'gold-100', 'blue-100'],
+  with200: ['purple-200', 'magenta-200', 'gold-200', 'blue-200']
 };
+const MAX_GRADIENT_COLORS = 3;
+const MAX_GRADIENT_COLORS_100 = 2;
 /* harmony default export */ const avatar_constants = ({
   AVATAR_KIND_MODIFIERS,
   AVATAR_SIZE_MODIFIERS,
-  AVATAR_COLOR_MODIFIERS,
-  AVATAR_ICON_SIZES
+  AVATAR_ICON_SIZES,
+  AVATAR_ANGLES
 });
 ;// 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!./components/avatar/avatar.vue?vue&type=script&lang=js&
 //
@@ -1749,6 +1789,9 @@ const AVATAR_ICON_SIZES = {
 //
 //
 //
+//
+//
+//
 
 
 
@@ -1779,7 +1822,7 @@ const AVATAR_ICON_SIZES = {
 
     /**
      * The size of the avatar
-     * @values sm, md, lg
+     * @values xs, sm, md, lg, xl
      */
     size: {
       type: String,
@@ -1787,20 +1830,6 @@ const AVATAR_ICON_SIZES = {
       validator: size => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size)
     },
 
-    /**
-     * The color of the avatar
-     * @values base
-     * orange-200, orange-300, orange-400, orange-500,
-     * pink-300, pink-400, pink-500, pink-600,
-     * purple-200, purple-300, purple-500, purple-600,
-     * yellow-200, yellow-300, yellow-400, yellow-500
-     */
-    color: {
-      type: String,
-      default: 'base',
-      validator: color => Object.keys(AVATAR_COLOR_MODIFIERS).includes(color)
-    },
-
     /**
      * Used to customize the avatar container
      */
@@ -1825,26 +1854,60 @@ const AVATAR_ICON_SIZES = {
     presenceProps: {
       type: Object,
       default: () => ({})
+    },
+
+    /**
+     * Initials to be shown in the avatar. Used as fallback if image fails to load.
+     */
+    initials: {
+      type: String,
+      default: ''
     }
   },
 
   data() {
     return {
       // initials, image or icon
-      kind: 'initials',
+      kind: 'image',
       AVATAR_SIZE_MODIFIERS: AVATAR_SIZE_MODIFIERS,
-      AVATAR_COLOR_MODIFIERS: AVATAR_COLOR_MODIFIERS,
       AVATAR_KIND_MODIFIERS: AVATAR_KIND_MODIFIERS,
-      AVATAR_PRESENCE_SIZE_MODIFIERS: AVATAR_PRESENCE_SIZE_MODIFIERS
+      AVATAR_PRESENCE_SIZE_MODIFIERS: AVATAR_PRESENCE_SIZE_MODIFIERS,
+      imageLoadedSuccessfully: null,
+      slottedInitials: '',
+      formattedInitials: ''
     };
   },
 
+  computed: {
+    showDefaultSlot() {
+      return this.kind !== 'initials' && this.imageLoadedSuccessfully !== false;
+    },
+
+    showInitials() {
+      return this.kind === 'initials' || this.initials;
+    },
+
+    initialKindStyle() {
+      const randomGradientColorStops = this.randomizeGradientColorStops();
+      return {
+        '--avatar-gradient-angle': `${this.randomizeGradientAngle()}deg`,
+        '--avatar-gradient-stop-1': `var(--${randomGradientColorStops[0]})`,
+        '--avatar-gradient-stop-2': `var(--${randomGradientColorStops[1]})`,
+        '--avatar-gradient-stop-3': `var(--${randomGradientColorStops[2]})`
+      };
+    }
+
+  },
+
   mounted() {
     this.init();
   },
 
   updated() {
-    this.init();
+    if (this.kind === 'initials') {
+      this.slottedInitials = this.$slots.default[0].text || this.$slots.default[0].textContent;
+      this.formatInitials(this.slottedInitials);
+    }
   },
 
   methods: {
@@ -1856,9 +1919,33 @@ const AVATAR_ICON_SIZES = {
 
         if (this.kind === 'image') {
           firstChild.classList.add('d-avatar__image');
+          this.validateImageAttrsPresence();
+          firstChild.addEventListener('error', () => {
+            this.formatInitials(this.initials);
+            this.imageLoadedSuccessfully = false;
+          });
+          firstChild.addEventListener('load', () => {
+            firstChild.classList.add('d-avatar--image-loaded');
+            this.imageLoadedSuccessfully = true;
+          });
         }
 
-        this.validateImageAttrsPresence();
+        if (this.kind === 'initials') {
+          this.slottedInitials = firstChild.text || firstChild.textContent;
+          this.formatInitials(this.slottedInitials);
+        }
+      }
+    },
+
+    formatInitials(initials) {
+      if (!initials) return;
+
+      if (this.size === 'xs') {
+        this.formattedInitials = '';
+      } else if (this.size === 'sm') {
+        this.formattedInitials = initials.trim()[0];
+      } else {
+        this.formattedInitials = initials.trim().slice(0, 2);
       }
     },
 
@@ -1888,27 +1975,51 @@ const AVATAR_ICON_SIZES = {
       return (element === null || element === void 0 ? void 0 : (_element$tagName2 = element.tagName) === null || _element$tagName2 === void 0 ? void 0 : _element$tagName2.toUpperCase()) === 'IMG';
     },
 
-    validateImageAttrsPresence() {
-      if (this.kind === 'image') {
-        // Check that default slot image required attributes are provided
-        if (!this.$el.firstChild.getAttribute('src') || !this.$el.firstChild.getAttribute('alt')) {
-          external_commonjs_vue_commonjs2_vue_root_Vue_default().util.warn('src and alt attributes are required for image avatars', this);
+    randomizeGradientAngle() {
+      return getRandomElement(AVATAR_ANGLES);
+    },
+
+    randomizeGradientColorStops() {
+      const colors = new Set(); // get 3 unique colors, 2 from colorsWith100 and one from colorsWith200
+
+      while (colors.size < MAX_GRADIENT_COLORS) {
+        if (colors.size === MAX_GRADIENT_COLORS_100) {
+          colors.add(getRandomElement(GRADIENT_COLORS.with200));
+        } else {
+          colors.add(getRandomElement(GRADIENT_COLORS.with100));
         }
       }
+
+      const shuffledColors = Array.from(colors).sort(() => 0.5 - Math.random());
+      return shuffledColors;
+    },
+
+    validateImageAttrsPresence() {
+      const isSrcMissing = !this.$el.firstChild.getAttribute('src');
+      const isAltMissing = !this.$el.firstChild.getAttribute('alt');
+
+      if (isSrcMissing || isAltMissing) {
+        external_commonjs_vue_commonjs2_vue_root_Vue_default().util.warn('src and alt attributes are required for image avatars', this);
+      }
     }
 
   }
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js&
  /* harmony default export */ const avatar_avatarvue_type_script_lang_js_ = (avatarvue_type_script_lang_js_); 
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-72[0].rules[0].use[0]!./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??clonedRuleSet-72[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-72[0].rules[0].use[2]!./node_modules/@vue/cli-service/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-72[0].rules[0].use[3]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-72[0].rules[0].use[4]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./components/avatar/avatar.vue?vue&type=style&index=0&lang=less&
+var avatarvue_type_style_index_0_lang_less_ = __webpack_require__(329);
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&lang=less&
+
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
 
 
+;
 
 
 /* normalize component */
-;
+
 var avatar_component = normalizeComponent(
   avatar_avatarvue_type_script_lang_js_,
   render,
@@ -20818,8 +20929,8 @@ var callbar_button_with_popover_component = normalizeComponent(
 /* 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=c1f377a8&
-var contact_infovue_type_template_id_c1f377a8_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"}},[_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/list_items/contact_info/contact_info.vue?vue&type=template&id=9fe40f88&
+var contact_infovue_type_template_id_9fe40f88_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"}},[_c('img',{attrs:{"data-qa":"dt-contact-avatar","src":_vm.avatarSrc,"alt":_vm.avatarInitials}})]):(_vm.avatarInitials)?_c('dt-avatar',{attrs:{"size":"lg"}},[_vm._v(" "+_vm._s(_vm.avatarInitials)+" ")]):_vm._e(),(_vm.showUserStatus)?_c('div',{class:[
           'd-ba',
           'd-bc-white',
           'd-baw2',
@@ -20830,7 +20941,7 @@ var contact_infovue_type_template_id_c1f377a8_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_c1f377a8_staticRenderFns = []
+var contact_infovue_type_template_id_9fe40f88_staticRenderFns = []
 
 
 ;// CONCATENATED MODULE: ./recipes/list_items/contact_info/contact_info_constants.js
@@ -20922,9 +21033,6 @@ const USER_STATUS_COLOR_MODIFIERS = {
 //
 //
 //
-//
-//
-
 
 
 
@@ -20980,15 +21088,6 @@ const USER_STATUS_COLOR_MODIFIERS = {
       default: ''
     },
 
-    /**
-     * Background color of initials letters in avatar.
-     */
-    avatarColor: {
-      type: String,
-      default: 'base',
-      validator: color => Object.keys(AVATAR_COLOR_MODIFIERS).includes(color)
-    },
-
     /**
      * Status color of user from contact.
      */
@@ -21024,8 +21123,8 @@ const USER_STATUS_COLOR_MODIFIERS = {
 ;
 var contact_info_component = normalizeComponent(
   contact_info_contact_infovue_type_script_lang_js_,
-  contact_infovue_type_template_id_c1f377a8_render,
-  contact_infovue_type_template_id_c1f377a8_staticRenderFns,
+  contact_infovue_type_template_id_9fe40f88_render,
+  contact_infovue_type_template_id_9fe40f88_staticRenderFns,
   false,
   null,
   null,