npm - @dialpad/dialtone - Versions diffs - 9.70.0-beta.1 → 9.70.0-beta.2 - Mend

@dialpad/dialtone 9.70.0-beta.1 → 9.70.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/dist/vue2/style.css CHANGED Viewed

@@ -1230,7 +1230,7 @@ body > .os-scrollbar {
 }
 }
 /* stylelint-disable selector-pseudo-class-no-unknown */
-.dt-leftbar-row[data-v-aeb8c657] {
+.dt-leftbar-row[data-v-17c77b19] {
   --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
   --leftbar-row-radius: var(--dt-size-radius-pill);
@@ -1261,49 +1261,49 @@ body > .os-scrollbar {
   transition-duration: var(--td200);
   transition-property: background-color, border, box-shadow;
 }
-.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):hover,
-.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):focus-within {
+.dt-leftbar-row[data-v-17c77b19]:not(.dt-leftbar-row--no-action):hover,
+.dt-leftbar-row[data-v-17c77b19]:not(.dt-leftbar-row--no-action):focus-within {
   --leftbar-row-unread-badge-display: none;
 }
-.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
-.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
+.dt-leftbar-row[data-v-17c77b19]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action,
+.dt-leftbar-row[data-v-17c77b19]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action {
   display: inline-flex;
 }
-.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
-.dt-leftbar-row[data-v-aeb8c657]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
+.dt-leftbar-row[data-v-17c77b19]:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action-button,
+.dt-leftbar-row[data-v-17c77b19]:not(.dt-leftbar-row--no-action):focus-within .dt-leftbar-row__action-button {
   opacity: 1;
 }
-.dt-leftbar-row[data-v-aeb8c657]:hover,
-.dt-leftbar-row[data-v-aeb8c657]:focus-within {
+.dt-leftbar-row[data-v-17c77b19]:hover,
+.dt-leftbar-row[data-v-17c77b19]:focus-within {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
 }
-.dt-leftbar-row[data-v-aeb8c657]:hover .d-presence,
-.dt-leftbar-row[data-v-aeb8c657]:focus-within .d-presence {
+.dt-leftbar-row[data-v-17c77b19]:hover .d-presence,
+.dt-leftbar-row[data-v-17c77b19]:focus-within .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row[data-v-aeb8c657]:hover .d-avatar__count,
-.dt-leftbar-row[data-v-aeb8c657]:focus-within .d-avatar__count {
+.dt-leftbar-row[data-v-17c77b19]:hover .d-avatar__count,
+.dt-leftbar-row[data-v-17c77b19]:focus-within .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row--has-unread[data-v-aeb8c657] {
+.dt-leftbar-row--has-unread[data-v-17c77b19] {
   --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
   --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
 }
-.dt-leftbar-row--muted[data-v-aeb8c657] {
+.dt-leftbar-row--muted[data-v-17c77b19] {
   --leftbar-row-opacity: 60%;
 }
-.dt-leftbar-row--selected[data-v-aeb8c657] {
+.dt-leftbar-row--selected[data-v-17c77b19] {
   --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
 }
-.dt-leftbar-row--selected[data-v-aeb8c657] .d-presence {
+.dt-leftbar-row--selected[data-v-17c77b19] .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-leftbar-row--selected[data-v-aeb8c657] .d-avatar__count {
+.dt-leftbar-row--selected[data-v-17c77b19] .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-leftbar-row__is-typing[data-v-aeb8c657] {
+.dt-leftbar-row__is-typing[data-v-17c77b19] {
   --is-typing-size-shape: var(--dt-size-550);
   position: absolute;
   display: flex;
@@ -1315,7 +1315,7 @@ body > .os-scrollbar {
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.75;
 }
-.dt-leftbar-row__is-typing span[data-v-aeb8c657] {
+.dt-leftbar-row__is-typing span[data-v-17c77b19] {
   display: inline-block;
   width: var(--dt-size-300);
   height: var(--dt-size-300);
@@ -1324,18 +1324,18 @@ body > .os-scrollbar {
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.3;
   transition: all 500ms ease;
-  animation: wave-aeb8c657 1.5s ease infinite;
+  animation: wave-17c77b19 1.5s ease infinite;
 }
-.dt-leftbar-row__is-typing span[data-v-aeb8c657]:nth-child(1) {
+.dt-leftbar-row__is-typing span[data-v-17c77b19]:nth-child(1) {
   animation-delay: 0ms;
 }
-.dt-leftbar-row__is-typing span[data-v-aeb8c657]:nth-child(2) {
+.dt-leftbar-row__is-typing span[data-v-17c77b19]:nth-child(2) {
   animation-delay: var(--td100);
 }
-.dt-leftbar-row__is-typing span[data-v-aeb8c657]:nth-child(3) {
+.dt-leftbar-row__is-typing span[data-v-17c77b19]:nth-child(3) {
   animation-delay: var(--td200);
 }
-.dt-leftbar-row__primary[data-v-aeb8c657] {
+.dt-leftbar-row__primary[data-v-17c77b19] {
   display: flex;
   flex: 1;
   align-items: center;
@@ -1352,18 +1352,18 @@ body > .os-scrollbar {
   border-radius: var(--leftbar-row-radius);
   appearance: none;
 }
-.dt-leftbar-row__primary[data-v-aeb8c657]:active {
+.dt-leftbar-row__primary[data-v-17c77b19]:active {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
 }
-.dt-leftbar-row__primary[data-v-aeb8c657]:focus-visible {
+.dt-leftbar-row__primary[data-v-17c77b19]:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-leftbar-row__action-button[data-v-aeb8c657] {
+.dt-leftbar-row__action-button[data-v-17c77b19] {
   width: var(--leftbar-row-action-width);
   height: var(--leftbar-row-action-height);
   opacity: 0;
 }
-.dt-leftbar-row__alpha[data-v-aeb8c657] {
+.dt-leftbar-row__alpha[data-v-17c77b19] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1375,11 +1375,11 @@ body > .os-scrollbar {
   color: var(--leftbar-row-alpha-color-foreground);
   border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
 }
-.dt-leftbar-row__label[data-v-aeb8c657] {
+.dt-leftbar-row__label[data-v-17c77b19] {
   flex: 0 1;
   min-width: 0;
 }
-.dt-leftbar-row__omega[data-v-aeb8c657] {
+.dt-leftbar-row__omega[data-v-17c77b19] {
   position: absolute;
   top: var(--leftbar-row-action-position-bottom);
   right: var(--leftbar-row-action-position-right);
@@ -1391,34 +1391,34 @@ body > .os-scrollbar {
   border-radius: var(--leftbar-row-radius);
   transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
 }
-.dt-leftbar-row__unread-badge[data-v-aeb8c657] {
+.dt-leftbar-row__unread-badge[data-v-17c77b19] {
   display: var(--leftbar-row-unread-badge-display);
   color: var(--dt-theme-mention-color-foreground);
   background-color: var(--dt-theme-mention-color-background);
 }
-.dt-leftbar-row--unread-count[data-v-aeb8c657] .dt-leftbar-row__action {
+.dt-leftbar-row--unread-count[data-v-17c77b19] .dt-leftbar-row__action {
   display: none;
 }
-.dt-leftbar-row__unread-count-badge[data-v-aeb8c657] {
+.dt-leftbar-row__unread-count-badge[data-v-17c77b19] {
   border-top-right-radius: var(--dt-size-radius-0);
   border-bottom-right-radius: var(--dt-size-radius-0);
 }
-.dt-leftbar-row__unread-mention-count-badge[data-v-aeb8c657] {
+.dt-leftbar-row__unread-mention-count-badge[data-v-17c77b19] {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
   border-top-left-radius: var(--dt-size-radius-0);
   border-bottom-left-radius: var(--dt-size-radius-0);
 }
-.dt-leftbar-row__unread-mention-only-count-badge[data-v-aeb8c657] {
+.dt-leftbar-row__unread-mention-only-count-badge[data-v-17c77b19] {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
 }
-.dt-leftbar-row__active-voice[data-v-aeb8c657] {
+.dt-leftbar-row__active-voice[data-v-17c77b19] {
   display: inline-flex;
   color: var(--dt-color-purple-400);
-  -webkit-animation-name: opacity-pulsate-aeb8c657;
-  -moz-animation-name: opacity-pulsate-aeb8c657;
-  animation-name: opacity-pulsate-aeb8c657;
+  -webkit-animation-name: opacity-pulsate-17c77b19;
+  -moz-animation-name: opacity-pulsate-17c77b19;
+  animation-name: opacity-pulsate-17c77b19;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   animation-duration: 1s;
@@ -1429,7 +1429,7 @@ body > .os-scrollbar {
   -moz-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-.dt-leftbar-row__dnd[data-v-aeb8c657] {
+.dt-leftbar-row__dnd[data-v-17c77b19] {
   padding-top: var(--dt-space-200);
   padding-right: var(--dt-space-300);
   color: var(--dt-color-foreground-tertiary);
@@ -1437,26 +1437,26 @@ body > .os-scrollbar {
   font-size: var(--dt-font-size-100);
   line-height: var(--dt-font-line-height-400);
 }
-.dt-leftbar-row__container--off-duty[data-v-aeb8c657] {
+.dt-leftbar-row__container--off-duty[data-v-17c77b19] {
   background-color: var(--dt-badge-color-background-critical);
   border: var(--dt-size-100) solid var(--dt-color-border-subtle);
   border-radius: var(--dt-size-radius-500);
 }
-.dt-leftbar-row__container--off-duty[data-v-aeb8c657] .dt-leftbar-row__primary {
+.dt-leftbar-row__container--off-duty[data-v-17c77b19] .dt-leftbar-row__primary {
   margin: calc(var(--dt-size-100) * -1);
 }
-.dt-leftbar-row--contact-centers[data-v-aeb8c657] .dt-leftbar-row__alpha {
+.dt-leftbar-row--contact-centers[data-v-17c77b19] .dt-leftbar-row__alpha {
   padding-right: var(--dt-space-450);
   padding-left: var(--dt-space-450);
 }
-.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-aeb8c657] {
+.dt-leftbar-row--contact-centers .dt-leftbar-row__action-container[data-v-17c77b19] {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   min-width: var(--dt-size-600);
   height: var(--dt-size-500);
 }
-.dt-leftbar-row[data-v-aeb8c657] .dt-leftbar-row__description {
+.dt-leftbar-row[data-v-17c77b19] .dt-leftbar-row__description {
   overflow: hidden;
   color: var(--leftbar-row-description-color-foreground);
   font-weight: var(--leftbar-row-description-font-weight);
@@ -1465,7 +1465,7 @@ body > .os-scrollbar {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-leftbar-row[data-v-aeb8c657] .dt-leftbar-row__status {
+.dt-leftbar-row[data-v-17c77b19] .dt-leftbar-row__status {
   padding-bottom: var(--dt-space-100);
   overflow: hidden;
   color: var(--leftbar-row-status-color-foreground);
@@ -1474,19 +1474,19 @@ body > .os-scrollbar {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-leftbar-row[data-v-aeb8c657] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
+.dt-leftbar-row[data-v-17c77b19] .dt-leftbar-row__meta-context ~ .dt-leftbar-row__meta-custom:not(:empty)::before {
   color: var(--dt-theme-sidebar-status-color-foreground);
   content: " • ";
 }
-.dt-leftbar-row__icon-cc[data-v-aeb8c657] {
+.dt-leftbar-row__icon-cc[data-v-17c77b19] {
   width: calc(var(--dt-size-300) * 3.5);
   height: calc(var(--dt-size-300) * 3.5);
   border-radius: var(--dt-size-200);
 }
-.opacity-pulsate[data-v-aeb8c657] {
-  -webkit-animation-name: opacity-pulsate-aeb8c657;
-  -moz-animation-name: opacity-pulsate-aeb8c657;
-  animation-name: opacity-pulsate-aeb8c657;
+.opacity-pulsate[data-v-17c77b19] {
+  -webkit-animation-name: opacity-pulsate-17c77b19;
+  -moz-animation-name: opacity-pulsate-17c77b19;
+  animation-name: opacity-pulsate-17c77b19;
   -webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
   animation-duration: 1s;
@@ -1497,7 +1497,7 @@ body > .os-scrollbar {
   -moz-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-@keyframes opacity-pulsate-aeb8c657 {
+@keyframes opacity-pulsate-17c77b19 {
 0%,
   100% {
     opacity: 0.2;
@@ -1506,7 +1506,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-aeb8c657 {
+@keyframes opacity-pulsate-17c77b19 {
 0%,
   100% {
     opacity: 0.2;
@@ -1515,7 +1515,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes opacity-pulsate-aeb8c657 {
+@keyframes opacity-pulsate-17c77b19 {
 0%,
   100% {
     opacity: 0.2;
@@ -1524,7 +1524,7 @@ body > .os-scrollbar {
     opacity: 1;
 }
 }
-@keyframes wave-aeb8c657 {
+@keyframes wave-17c77b19 {
 0%,
   50%,
   100% {

package/dist/vue2/types/recipes/leftbar/contact_centers_row/contact_centers_row.vue.d.ts CHANGED Viewed

@@ -28,11 +28,11 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     /**
-     * Number of unread messages
+     * Number of unread messages, could be a string to support '99+'
      */
     unreadCount: {
-        type: NumberConstructor;
-        default: number;
+        type: StringConstructor;
+        default: null;
     };
     /**
      * Aria label for the menu button.
@@ -82,11 +82,11 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     /**
-     * Number of unread messages
+     * Number of unread messages, could be a string to support '99+'
      */
     unreadCount: {
-        type: NumberConstructor;
-        default: number;
+        type: StringConstructor;
+        default: null;
     };
     /**
      * Aria label for the menu button.
@@ -99,7 +99,7 @@ declare const _default: import("vue").DefineComponent<{
     ariaLabel: string;
     selected: boolean;
     hideActions: boolean;
-    unreadCount: number;
+    unreadCount: string;
 }>;
 export default _default;
 //# sourceMappingURL=contact_centers_row.vue.d.ts.map

package/dist/vue2/types/recipes/leftbar/contact_row/contact_row.vue.d.ts CHANGED Viewed

@@ -25,6 +25,13 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
+    /**
+     * Avatar color to display if `avatarSrc` is empty.
+     */
+    avatarColor: {
+        type: StringConstructor;
+        default: null;
+    };
     /**
      * Text describing the user's presence, such as "in a meeting"
      */
@@ -141,6 +148,13 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: null;
     };
+    /**
+     * Avatar color to display if `avatarSrc` is empty.
+     */
+    avatarColor: {
+        type: StringConstructor;
+        default: null;
+    };
     /**
      * Text describing the user's presence, such as "in a meeting"
      */
@@ -232,6 +246,7 @@ declare const _default: import("vue").DefineComponent<{
     avatarSrc: string;
     avatarSeed: string;
     noInitials: boolean;
+    avatarColor: string;
     unreadCount: string;
     unreadCountTooltip: string;
     hasUnreads: boolean;

package/dist/vue2/types/recipes/leftbar/contact_row/contact_row.vue.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"contact_row.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/contact_row/contact_row.vue.js"],"names":[],"mappings":";IAmBI;;;OAGG;;;;;IAMH;;;;;;OAMG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;;;;;;~~IAxHH~~;;;OAGG;;;;;IAMH;;;;;;OAMG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG"}
1	+ {"version":3,"file":"contact_row.vue.d.ts","sourceRoot":"","sources":["../../../../../recipes/leftbar/contact_row/contact_row.vue.js"],"names":[],"mappings":";IAmBI;;;OAGG;;;;;IAMH;;;;;;OAMG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;;;;;;IAhIH;;;OAGG;;;;;IAMH;;;;;;OAMG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;;OAGG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG;;;;;IAMH;;OAEG"}

package/dist/vue3/lib/contact-centers-row.cjs CHANGED Viewed

@@ -58,11 +58,11 @@ const _sfc_main = {
       default: false
     },
     /**
-     * Number of unread messages
+     * Number of unread messages, could be a string to support '99+'
      */
     unreadCount: {
-      type: Number,
-      default: 0
+      type: String,
+      default: null
     },
     /**
      * Aria label for the menu button.
@@ -111,7 +111,7 @@ const _sfc_main = {
       return common_utils.extractVueListeners(this.$attrs);
     },
     showUnreadCount() {
-      return this.unreadCount > 0;
+      return !!this.unreadCount;
     }
   },
   watch: {
@@ -234,6 +234,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cc2f5ae8"]]);
+const contact_centers_row = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0f361db5"]]);
 exports.DtRecipeContactCentersRow = contact_centers_row;
 //# sourceMappingURL=contact-centers-row.cjs.map

package/dist/vue3/lib/contact-centers-row.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"contact-centers-row.cjs","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'dt-leftbar-row__container',\n { 'dt-leftbar-row__container--off-duty': $slots.timer },\n ]\"\n >\n <div\n :class=\"leftbarContactCentersRowClasses\"\n data-qa=\"dt-recipe-contact-centers-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"$attrs.href ?? 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"contactRowListeners\"\n @click=\"$emit('click', $event)\"\n >\n <div class=\"dt-leftbar-row__alpha\">\n <dt-icon-headphones\n size=\"300\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </div>\n </a>\n <div\n v-if=\"!hideActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <slot name=\"right\" />\n <div class=\"dt-leftbar-row__action-container\">\n <dt-badge\n v-if=\"showUnreadCount\"\n class=\"dt-leftbar-row__unread-badge\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n kind=\"count\"\n type=\"bulletin\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-button\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action-button\"\n :aria-label=\"menuButtonAriaLabel\"\n importance=\"clear\"\n size=\"xs\"\n circle\n @click.stop=\"$emit('click-menu', $event)\"\n >\n <template #icon>\n <dt-icon-chevron-down size=\"100\" />\n </template>\n </dt-button>\n </div>\n </div>\n </div>\n <div class=\"dt-leftbar-row__bottom\">\n <slot name=\"timer\" />\n </div>\n </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\n name: 'DtRecipeContactCentersRow',\n\n components: {\n DtButton,\n DtBadge,\n DtEmojiTextWrapper,\n DtIconHeadphones,\n DtIconChevronDown,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Text displayed next to the icon. Required.\n /\n description: {\n type: String,\n required: true,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Making this true will hide the unread count badge, the chevron button, and the right slot\n /\n hideActions: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: ~~Number~~,\n default: 0,\n },\n\n /\n Aria label for the menu button.\n /\n menuButtonAriaLabel: {\n type: String,\n required: true,\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Menu button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click-menu',\n ],\n\n data () {\n return {\n labelWidth: 'auto',\n };\n },\n\n computed: {\n leftbarContactCentersRowClasses () {\n return [\n 'dt-leftbar-row',\n 'dt-leftbar-row--contact-centers',\n {\n 'dt-leftbar-row--unread-count': this.showUnreadCount,\n 'dt-leftbar-row--selected': this.selected,\n },\n ];\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip]);\n },\n\n contactRowListeners () {\n return extractVueListeners(this.$attrs);\n },\n\n showUnreadCount () {\n return this.unreadCount ~~> 0~~;\n },\n },\n\n watch: {\n $props: {\n deep: true,\n async handler () {\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeUnmount: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 12;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtButton","DtBadge","DtEmojiTextWrapper","safeConcatStrings","extractVueListeners","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_openBlock","_renderSlot","_createBlock","_withModifiers"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqFA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAA,WAAQ;AAAA,IACR,SAAAC,UAAO;AAAA,IACP,oBAAAC,qBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,~~IAKA~~,aAAa;AAAA,~~MACZ~~,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA;EAEf;AAAA,EAED,UAAU;AAAA,IACR,kCAAmC;AACjC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,UACE,gCAAgC,KAAK;AAAA,UACrC,4BAA4B,KAAK;AAAA,QAClC;AAAA;IAEJ;AAAA,IAED,eAAgB;AACd,aAAO,KAAK,YACR,KAAK,YACLC,aAAiB,kBAAC,CAAC,KAAK,aAAa,KAAK,kBAAkB,CAAC;AAAA,IAClE;AAAA,IAED,sBAAuB;AACrB,aAAOC,aAAmB,oBAAC,KAAK,MAAM;AAAA,IACvC;AAAA,IAED,kBAAmB;AACjB,aAAO,KAAK~~,cAAc~~;AAAA,~~IAC3B~~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"}
1	+ {"version":3,"file":"contact-centers-row.cjs","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'dt-leftbar-row__container',\n { 'dt-leftbar-row__container--off-duty': $slots.timer },\n ]\"\n >\n <div\n :class=\"leftbarContactCentersRowClasses\"\n data-qa=\"dt-recipe-contact-centers-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"$attrs.href ?? 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"contactRowListeners\"\n @click=\"$emit('click', $event)\"\n >\n <div class=\"dt-leftbar-row__alpha\">\n <dt-icon-headphones\n size=\"300\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </div>\n </a>\n <div\n v-if=\"!hideActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <slot name=\"right\" />\n <div class=\"dt-leftbar-row__action-container\">\n <dt-badge\n v-if=\"showUnreadCount\"\n class=\"dt-leftbar-row__unread-badge\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n kind=\"count\"\n type=\"bulletin\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-button\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action-button\"\n :aria-label=\"menuButtonAriaLabel\"\n importance=\"clear\"\n size=\"xs\"\n circle\n @click.stop=\"$emit('click-menu', $event)\"\n >\n <template #icon>\n <dt-icon-chevron-down size=\"100\" />\n </template>\n </dt-button>\n </div>\n </div>\n </div>\n <div class=\"dt-leftbar-row__bottom\">\n <slot name=\"timer\" />\n </div>\n </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\n name: 'DtRecipeContactCentersRow',\n\n components: {\n DtButton,\n DtBadge,\n DtEmojiTextWrapper,\n DtIconHeadphones,\n DtIconChevronDown,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Text displayed next to the icon. Required.\n /\n description: {\n type: String,\n required: true,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Making this true will hide the unread count badge, the chevron button, and the right slot\n /\n hideActions: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages, could be a string to support '99+'\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Aria label for the menu button.\n /\n menuButtonAriaLabel: {\n type: String,\n required: true,\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Menu button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click-menu',\n ],\n\n data () {\n return {\n labelWidth: 'auto',\n };\n },\n\n computed: {\n leftbarContactCentersRowClasses () {\n return [\n 'dt-leftbar-row',\n 'dt-leftbar-row--contact-centers',\n {\n 'dt-leftbar-row--unread-count': this.showUnreadCount,\n 'dt-leftbar-row--selected': this.selected,\n },\n ];\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip]);\n },\n\n contactRowListeners () {\n return extractVueListeners(this.$attrs);\n },\n\n showUnreadCount () {\n return !!this.unreadCount;\n },\n },\n\n watch: {\n $props: {\n deep: true,\n async handler () {\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeUnmount: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 12;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtButton","DtBadge","DtEmojiTextWrapper","safeConcatStrings","extractVueListeners","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_openBlock","_renderSlot","_createBlock","_withModifiers"],"mappings":"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"}

package/dist/vue3/lib/contact-centers-row.js CHANGED Viewed

@@ -56,11 +56,11 @@ const _sfc_main = {
       default: false
     },
     /**
-     * Number of unread messages
+     * Number of unread messages, could be a string to support '99+'
      */
     unreadCount: {
-      type: Number,
-      default: 0
+      type: String,
+      default: null
     },
     /**
      * Aria label for the menu button.
@@ -109,7 +109,7 @@ const _sfc_main = {
       return extractVueListeners(this.$attrs);
     },
     showUnreadCount() {
-      return this.unreadCount > 0;
+      return !!this.unreadCount;
     }
   },
   watch: {
@@ -232,7 +232,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 2);
 }
-const contact_centers_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-cc2f5ae8"]]);
+const contact_centers_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-0f361db5"]]);
 export {
   contact_centers_row as DtRecipeContactCentersRow
 };

package/dist/vue3/lib/contact-centers-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"contact-centers-row.js","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'dt-leftbar-row__container',\n { 'dt-leftbar-row__container--off-duty': $slots.timer },\n ]\"\n >\n <div\n :class=\"leftbarContactCentersRowClasses\"\n data-qa=\"dt-recipe-contact-centers-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"$attrs.href ?? 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"contactRowListeners\"\n @click=\"$emit('click', $event)\"\n >\n <div class=\"dt-leftbar-row__alpha\">\n <dt-icon-headphones\n size=\"300\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </div>\n </a>\n <div\n v-if=\"!hideActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <slot name=\"right\" />\n <div class=\"dt-leftbar-row__action-container\">\n <dt-badge\n v-if=\"showUnreadCount\"\n class=\"dt-leftbar-row__unread-badge\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n kind=\"count\"\n type=\"bulletin\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-button\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action-button\"\n :aria-label=\"menuButtonAriaLabel\"\n importance=\"clear\"\n size=\"xs\"\n circle\n @click.stop=\"$emit('click-menu', $event)\"\n >\n <template #icon>\n <dt-icon-chevron-down size=\"100\" />\n </template>\n </dt-button>\n </div>\n </div>\n </div>\n <div class=\"dt-leftbar-row__bottom\">\n <slot name=\"timer\" />\n </div>\n </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\n name: 'DtRecipeContactCentersRow',\n\n components: {\n DtButton,\n DtBadge,\n DtEmojiTextWrapper,\n DtIconHeadphones,\n DtIconChevronDown,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Text displayed next to the icon. Required.\n /\n description: {\n type: String,\n required: true,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Making this true will hide the unread count badge, the chevron button, and the right slot\n /\n hideActions: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: ~~Number~~,\n default: 0,\n },\n\n /\n Aria label for the menu button.\n /\n menuButtonAriaLabel: {\n type: String,\n required: true,\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Menu button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click-menu',\n ],\n\n data () {\n return {\n labelWidth: 'auto',\n };\n },\n\n computed: {\n leftbarContactCentersRowClasses () {\n return [\n 'dt-leftbar-row',\n 'dt-leftbar-row--contact-centers',\n {\n 'dt-leftbar-row--unread-count': this.showUnreadCount,\n 'dt-leftbar-row--selected': this.selected,\n },\n ];\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip]);\n },\n\n contactRowListeners () {\n return extractVueListeners(this.$attrs);\n },\n\n showUnreadCount () {\n return this.unreadCount ~~> 0~~;\n },\n },\n\n watch: {\n $props: {\n deep: true,\n async handler () {\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeUnmount: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 12;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtEmojiTextWrapper","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_openBlock","_renderSlot","_createBlock","_withModifiers"],"mappings":";;;;;;;;;;;;;;;;;;AAqFA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA,oBAAAA;AAAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,~~IAKA~~,aAAa;AAAA,~~MACZ~~,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA;EAEf;AAAA,EAED,UAAU;AAAA,IACR,kCAAmC;AACjC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,UACE,gCAAgC,KAAK;AAAA,UACrC,4BAA4B,KAAK;AAAA,QAClC;AAAA;IAEJ;AAAA,IAED,eAAgB;AACd,aAAO,KAAK,YACR,KAAK,YACL,kBAAkB,CAAC,KAAK,aAAa,KAAK,kBAAkB,CAAC;AAAA,IAClE;AAAA,IAED,sBAAuB;AACrB,aAAO,oBAAoB,KAAK,MAAM;AAAA,IACvC;AAAA,IAED,kBAAmB;AACjB,aAAO,KAAK~~,cAAc~~;AAAA,~~IAC3B~~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"}
1	+ {"version":3,"file":"contact-centers-row.js","sources":["../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'dt-leftbar-row__container',\n { 'dt-leftbar-row__container--off-duty': $slots.timer },\n ]\"\n >\n <div\n :class=\"leftbarContactCentersRowClasses\"\n data-qa=\"dt-recipe-contact-centers-row\"\n >\n <a\n class=\"dt-leftbar-row__primary\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-leftbar-row-link'\"\n :aria-label=\"getAriaLabel\"\n :title=\"description\"\n :href=\"$attrs.href ?? 'javascript:void(0)'\"\n v-bind=\"$attrs\"\n v-on=\"contactRowListeners\"\n @click=\"$emit('click', $event)\"\n >\n <div class=\"dt-leftbar-row__alpha\">\n <dt-icon-headphones\n size=\"300\"\n data-qa=\"dt-leftbar-row-icon\"\n />\n </div>\n <div\n class=\"dt-leftbar-row__label\"\n :style=\"`flex-basis: ${labelWidth}`\"\n >\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ description }}\n </dt-emoji-text-wrapper>\n </div>\n </a>\n <div\n v-if=\"!hideActions\"\n class=\"dt-leftbar-row__omega\"\n >\n <slot name=\"right\" />\n <div class=\"dt-leftbar-row__action-container\">\n <dt-badge\n v-if=\"showUnreadCount\"\n class=\"dt-leftbar-row__unread-badge\"\n data-qa=\"dt-leftbar-row-unread-badge\"\n kind=\"count\"\n type=\"bulletin\"\n >\n {{ unreadCount }}\n </dt-badge>\n <dt-button\n class=\"dt-leftbar-row__action\"\n data-qa=\"dt-leftbar-row-action-button\"\n :aria-label=\"menuButtonAriaLabel\"\n importance=\"clear\"\n size=\"xs\"\n circle\n @click.stop=\"$emit('click-menu', $event)\"\n >\n <template #icon>\n <dt-icon-chevron-down size=\"100\" />\n </template>\n </dt-button>\n </div>\n </div>\n </div>\n <div class=\"dt-leftbar-row__bottom\">\n <slot name=\"timer\" />\n </div>\n </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtIconChevronDown from '@dialpad/dialtone-icons/vue3/chevron-down';\nimport DtIconHeadphones from '@dialpad/dialtone-icons/vue3/headphones';\n\nexport default {\n name: 'DtRecipeContactCentersRow',\n\n components: {\n DtButton,\n DtBadge,\n DtEmojiTextWrapper,\n DtIconHeadphones,\n DtIconChevronDown,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n Text displayed next to the icon. Required.\n /\n description: {\n type: String,\n required: true,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Making this true will hide the unread count badge, the chevron button, and the right slot\n /\n hideActions: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages, could be a string to support '99+'\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Aria label for the menu button.\n /\n menuButtonAriaLabel: {\n type: String,\n required: true,\n },\n },\n\n emits: [\n /\n Native click event on the row itself\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Menu button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'click-menu',\n ],\n\n data () {\n return {\n labelWidth: 'auto',\n };\n },\n\n computed: {\n leftbarContactCentersRowClasses () {\n return [\n 'dt-leftbar-row',\n 'dt-leftbar-row--contact-centers',\n {\n 'dt-leftbar-row--unread-count': this.showUnreadCount,\n 'dt-leftbar-row--selected': this.selected,\n },\n ];\n },\n\n getAriaLabel () {\n return this.ariaLabel\n ? this.ariaLabel\n : safeConcatStrings([this.description, this.unreadCountTooltip]);\n },\n\n contactRowListeners () {\n return extractVueListeners(this.$attrs);\n },\n\n showUnreadCount () {\n return !!this.unreadCount;\n },\n },\n\n watch: {\n $props: {\n deep: true,\n async handler () {\n await this.$nextTick();\n this.adjustLabelWidth();\n },\n },\n },\n\n mounted () {\n this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n this.resizeObserver.observe(this.$el);\n this.adjustLabelWidth();\n },\n\n beforeUnmount: function () {\n this.resizeObserver.disconnect();\n },\n\n methods: {\n adjustLabelWidth () {\n const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth \|\| 0;\n const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth \|\| 0;\n const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth \|\| 0;\n const paddings = 12;\n this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["DtEmojiTextWrapper","_createElementBlock","_normalizeClass","_createElementVNode","_mergeProps","_toHandlers","_createVNode","_openBlock","_renderSlot","_createBlock","_withModifiers"],"mappings":"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"}

package/dist/vue3/lib/contact-row.cjs CHANGED Viewed

@@ -58,6 +58,13 @@ const _sfc_main = {
       type: String,
       default: null
     },
+    /**
+     * Avatar color to display if `avatarSrc` is empty.
+     */
+    avatarColor: {
+      type: String,
+      default: null
+    },
     /**
      * Text describing the user's presence, such as "in a meeting"
      */
@@ -190,13 +197,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "is-typing": $props.isTyping,
     "call-button-tooltip": $props.callButtonTooltip,
     "unread-count-tooltip": $props.unreadCountTooltip
-  }, _ctx.$attrs, vue.toHandlers($options.contactRowListeners), {
+  }, _ctx.$attrs, { "data-qa": "contact-row" }, vue.toHandlers($options.contactRowListeners), {
     onCall: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("call", $event))
   }), {
     left: vue.withCtx(() => [
       vue.createVNode(_component_dt_avatar, {
         "full-name": $props.name,
         "image-src": $props.avatarSrc,
+        color: $props.avatarColor,
         "image-alt": "",
         size: "sm",
         seed: $props.avatarSeed,
@@ -209,7 +217,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["full-name", "image-src", "seed", "presence"])
+      ]), 1032, ["full-name", "image-src", "color", "seed", "presence"])
     ]),
     label: vue.withCtx(() => [
       vue.createVNode(_component_dt_emoji_text_wrapper, {

package/dist/vue3/lib/contact-row.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"contact-row.cjs","sources":["../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :unread-count=\"unreadCount\"\n :description=\"contactDescription\"\n :has-unreads=\"hasUnreads\"\n :selected=\"selected\"\n :has-call-button=\"hasCallButton\"\n :muted=\"muted\"\n :is-typing=\"isTyping\"\n :call-button-tooltip=\"callButtonTooltip\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n v-bind=\"$attrs\"\n v-on=\"contactRowListeners\"\n @call=\"$emit('call', $event)\"\n >\n <template #left>\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n image-alt=\"\"\n size=\"sm\"\n :seed=\"avatarSeed\"\n :presence=\"avatarPresence\"\n >\n <template\n v-if=\"noInitials\"\n #icon\n >\n <dt-icon-user\n :size=\"200\"\n />\n </template>\n </dt-avatar>\n </template>\n <template #label>\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ name }}\n </dt-emoji-text-wrapper>\n <div class=\"dt-leftbar-row__status\">\n <span\n v-if=\"presenceText\"\n data-qa=\"dt-leftbar-row-presence-text\"\n :class=\"['dt-leftbar-row__meta-context', presenceColorClass]\"\n >\n {{ presenceText }}\n </span>\n <dt-emoji-text-wrapper\n v-if=\"userStatus\"\n size=\"100\"\n element-type=\"span\"\n data-qa=\"dt-leftbar-row-user-status\"\n class=\"dt-leftbar-row__meta-custom\"\n >\n {{ userStatus }}\n </dt-emoji-text-wrapper>\n </div>\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n name: 'DtRecipeContactRow',\n\n components: {\n DtAvatar,\n DtRecipeGeneralRow,\n DtEmojiTextWrapper,\n DtIconUser,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Optional avatar image url.\n * If not provided it will use the initial of the name.\n /\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * defer validation to avatar component.\n * @values null, busy, away, offline, active\n /\n avatarPresence: {\n type: String,\n default: null,\n },\n\n /\n Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n /\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /\n Text describing the user's presence, such as \"in a meeting\"\n /\n presenceText: {\n type: String,\n default: '',\n },\n\n /\n Name of the contact\n /\n name: {\n type: String,\n required: true,\n },\n\n /\n Status as set by the user.\n /\n userStatus: {\n type: String,\n default: '',\n },\n\n /\n Gives a faded style to be used when muted\n /\n muted: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the contact row should display a call button when hovered.\n /\n hasCallButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Text shown when the call button is hovered.\n /\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /\n Call button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'call',\n ],\n\n computed: {\n presenceColorClass () {\n switch (this.avatarPresence) {\n case 'active':\n return 'd-fc-success';\n case 'busy':\n return 'd-fc-critical';\n case 'away':\n return 'd-fc-warning';\n default:\n return undefined;\n }\n },\n\n contactRowListeners () {\n return extractVueListeners(this.$attrs);\n },\n\n contactDescription () {\n return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n },\n },\n};\n</script>\n"],"names":["DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","extractVueListeners","safeConcatStrings","_openBlock","_createBlock","_mergeProps","_toHandlers","_createVNode","_createElementVNode","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;~~AAuEA~~,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAA,WAAQ;AAAA,IACR,oBAAAC,eAAkB;AAAA,IAClB,oBAAAC,qBAAkB;AAAA,gBAClBC,KAAU;AAAA,EACX;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACR,qBAAsB;AACpB,cAAQ,KAAK,gBAAc;AAAA,QACzB,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT;AACE,iBAAO;AAAA,MACX;AAAA,IACD;AAAA,IAED,sBAAuB;AACrB,aAAOC,aAAmB,oBAAC,KAAK,MAAM;AAAA,IACvC;AAAA,IAED,qBAAsB;AACpB,aAAOC,aAAiB,kBAAC,CAAC,KAAK,MAAM,KAAK,cAAc,KAAK,UAAU,CAAC;AAAA,IACzE;AAAA,EACF;AACH;~~AAzMW~~,MAAA,aAAA,EAAA,OAAM,yBAAwB;;;;;;~~AAzCvC~~,SAAAC,cAAA,GAAAC,~~gBA4DwB~~,~~kCA5DxBC~~,IAAAA,~~WA4DwB~~;AAAA,~~IA3DrB~~,gBAAc,OAAW;AAAA,IACzB,aAAa,SAAkB;AAAA,IAC/B,eAAa,OAAU;AAAA,IACvB,UAAU,OAAQ;AAAA,IAClB,mBAAiB,OAAa;AAAA,IAC9B,OAAO,OAAK;AAAA,IACZ,aAAW,OAAQ;AAAA,IACnB,uBAAqB,OAAiB;AAAA,IACtC,wBAAsB,OAAkB;AAAA,~~KACjC~~,~~KAAM~~,~~QACdC~~,~~IAAM~~,~~WAAoB~~,~~SAAD~~,mBAAA,GAAA;AAAA,IACxB,QAAI,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,KAAK,MAAA,QAAS,MAAM;AAAA;IAEhB,kBACT,~~MAgBY~~;AAAA,~~MAhBZC~~,IAAAA,~~YAgBY~~,sBAAA;AAAA,~~QAfT~~,aAAW,OAAI;AAAA,QACf,aAAW,OAAS;AAAA,~~QACrB~~,aAAU;AAAA,QACV,MAAK;AAAA,QACJ,MAAM,OAAU;AAAA,QAChB,UAAU,OAAc;AAAA;QAGjB,OAAU;gBACf;AAAA,0BAED,MAEE;AAAA,YAFFA,IAAAA,YAEE,yBAAA,EADC,MAAM,IAAG,CAAA;AAAA;;;;;IAKP,mBACT,MAMwB;AAAA,MANxBA,IAAAA,YAMwB,kCAAA;AAAA,QALtB,OAAM;AAAA,QACN,WAAQ;AAAA,QACR,MAAK;AAAA;6BAEL,MAAU;AAAA,kDAAP,OAAI,IAAA,GAAA,CAAA;AAAA;;;MAETC,IAAA,mBAiBM,OAjBN,YAiBM;AAAA,QAfI,OAAY,iCADpBC,IAMO,mBAAA,QAAA;AAAA;UAJL,WAAQ;AAAA,UACP,2DAAwC,SAAkB,kBAAA,CAAA;AAAA,+BAExD,OAAY,YAAA,GAAA,CAAA;QAGT,OAAU,+BADlBL,IAQwB,YAAA,kCAAA;AAAA;UANtB,MAAK;AAAA,UACL,gBAAa;AAAA,UACb,WAAQ;AAAA,UACR,OAAM;AAAA;+BAEN,MAAgB;AAAA,oDAAb,OAAU,UAAA,GAAA,CAAA;AAAA;;;;;;;;;;"}
1	+ {"version":3,"file":"contact-row.cjs","sources":["../../recipes/leftbar/contact_row/contact_row.vue"],"sourcesContent":["<template>\n <dt-recipe-general-row\n :unread-count=\"unreadCount\"\n :description=\"contactDescription\"\n :has-unreads=\"hasUnreads\"\n :selected=\"selected\"\n :has-call-button=\"hasCallButton\"\n :muted=\"muted\"\n :is-typing=\"isTyping\"\n :call-button-tooltip=\"callButtonTooltip\"\n :unread-count-tooltip=\"unreadCountTooltip\"\n v-bind=\"$attrs\"\n data-qa=\"contact-row\"\n v-on=\"contactRowListeners\"\n @call=\"$emit('call', $event)\"\n >\n <template #left>\n <dt-avatar\n :full-name=\"name\"\n :image-src=\"avatarSrc\"\n :color=\"avatarColor\"\n image-alt=\"\"\n size=\"sm\"\n :seed=\"avatarSeed\"\n :presence=\"avatarPresence\"\n >\n <template\n v-if=\"noInitials\"\n #icon\n >\n <dt-icon-user\n :size=\"200\"\n />\n </template>\n </dt-avatar>\n </template>\n <template #label>\n <dt-emoji-text-wrapper\n class=\"dt-leftbar-row__description\"\n data-qa=\"dt-leftbar-row-description\"\n size=\"200\"\n >\n {{ name }}\n </dt-emoji-text-wrapper>\n <div class=\"dt-leftbar-row__status\">\n <span\n v-if=\"presenceText\"\n data-qa=\"dt-leftbar-row-presence-text\"\n :class=\"['dt-leftbar-row__meta-context', presenceColorClass]\"\n >\n {{ presenceText }}\n </span>\n <dt-emoji-text-wrapper\n v-if=\"userStatus\"\n size=\"100\"\n element-type=\"span\"\n data-qa=\"dt-leftbar-row-user-status\"\n class=\"dt-leftbar-row__meta-custom\"\n >\n {{ userStatus }}\n </dt-emoji-text-wrapper>\n </div>\n </template>\n </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport { extractVueListeners, safeConcatStrings } from '@/common/utils';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\n\nexport default {\n name: 'DtRecipeContactRow',\n\n components: {\n DtAvatar,\n DtRecipeGeneralRow,\n DtEmojiTextWrapper,\n DtIconUser,\n },\n\n inheritAttrs: false,\n\n props: {\n /*\n Optional avatar image url.\n * If not provided it will use the initial of the name.\n /\n avatarSrc: {\n type: String,\n default: '',\n },\n\n /\n Determines whether to show the presence indicator for\n * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n * or 'active'. By default, it's null and nothing is shown.\n * defer validation to avatar component.\n * @values null, busy, away, offline, active\n /\n avatarPresence: {\n type: String,\n default: null,\n },\n\n /\n Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n /\n avatarSeed: {\n type: String,\n default: null,\n },\n\n /\n Avatar color to display if `avatarSrc` is empty.\n /\n avatarColor: {\n type: String,\n default: null,\n },\n\n /\n Text describing the user's presence, such as \"in a meeting\"\n /\n presenceText: {\n type: String,\n default: '',\n },\n\n /\n Name of the contact\n /\n name: {\n type: String,\n required: true,\n },\n\n /\n Status as set by the user.\n /\n userStatus: {\n type: String,\n default: '',\n },\n\n /\n Gives a faded style to be used when muted\n /\n muted: {\n type: Boolean,\n default: false,\n },\n\n /\n Number of unread messages\n /\n unreadCount: {\n type: String,\n default: null,\n },\n\n /\n Styles the row with an increased font weight to convey it has unreads. This must be true to see\n * the unread count badge.\n /\n hasUnreads: {\n type: Boolean,\n default: false,\n },\n\n /\n Determines if the row is selected\n /\n selected: {\n type: Boolean,\n default: false,\n },\n\n /\n Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n Shows an \"is typing\" animation over the avatar when true.\n /\n isTyping: {\n type: Boolean,\n default: false,\n },\n\n /\n Whether the contact row should display a call button when hovered.\n /\n hasCallButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Text shown when the call button is hovered.\n /\n callButtonTooltip: {\n type: String,\n default: '',\n },\n\n /\n Text shown when the unread count is hovered.\n /\n unreadCountTooltip: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /\n Call button clicked\n \n @event call\n * @type {PointerEvent \| KeyboardEvent}\n */\n 'call',\n ],\n\n computed: {\n presenceColorClass () {\n switch (this.avatarPresence) {\n case 'active':\n return 'd-fc-success';\n case 'busy':\n return 'd-fc-critical';\n case 'away':\n return 'd-fc-warning';\n default:\n return undefined;\n }\n },\n\n contactRowListeners () {\n return extractVueListeners(this.$attrs);\n },\n\n contactDescription () {\n return safeConcatStrings([this.name, this.presenceText, this.userStatus]);\n },\n },\n};\n</script>\n"],"names":["DtAvatar","DtRecipeGeneralRow","DtEmojiTextWrapper","DtIconUser","extractVueListeners","safeConcatStrings","_openBlock","_createBlock","_mergeProps","_toHandlers","_createVNode","_createElementVNode","_createElementBlock"],"mappings":"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"}