@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.1

package/dist/lib/contact-centers-row/contact-centers-row.js

@@ -1,7 +1,7 @@
-import { addClassStyleAttrs as S, removeClassStyleAttrs as A, returnFirstEl as u, extractVueListeners as E, safeConcatStrings as N } from "../../common/utils/index.js";
-import { DtIconChevronDown as W, DtIconHeadphones as k } from "@dialpad/dialtone-icons/vue3";
-import { DialtoneLocalization as D } from "../../localization/index.js";
-import { resolveComponent as i, openBlock as h, createElementBlock as f, mergeProps as w, createElementVNode as o, normalizeClass as T, toHandlers as q, createVNode as _, normalizeStyle as B, withCtx as b, createTextVNode as C, toDisplayString as y, renderSlot as v, createBlock as $, createCommentVNode as L, withModifiers as z } from "vue";
+import { addClassStyleAttrs as S, removeClassStyleAttrs as k, returnFirstEl as u, extractVueListeners as A, safeConcatStrings as E } from "../../common/utils/index.js";
+import { DtIconChevronDown as N, DtIconHeadphones as W } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as $ } from "../../localization/index.js";
+import { resolveComponent as i, openBlock as h, createElementBlock as w, mergeProps as C, createElementVNode as o, normalizeClass as D, toHandlers as T, createVNode as p, normalizeStyle as q, withCtx as b, createTextVNode as y, toDisplayString as v, renderSlot as m, createBlock as B, createCommentVNode as L, withModifiers as z } from "vue";
 import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import R from "../emoji-text-wrapper/emoji-text-wrapper.js";
 import j from "../badge/badge.js";
@@ -13,8 +13,8 @@ const V = {
     DtButton: U,
     DtBadge: j,
     DtEmojiTextWrapper: R,
-    DtIconHeadphones: k,
-    DtIconChevronDown: W
+    DtIconHeadphones: W,
+    DtIconChevronDown: N
   },
   inheritAttrs: !1,
   props: {
@@ -76,7 +76,7 @@ const V = {
   data() {
     return {
       labelWidth: "auto",
-      i18n: new D()
+      i18n: new $()
     };
   },
   computed: {
@@ -92,13 +92,13 @@ const V = {
     },
     getAriaLabel() {
       const e = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
-      return this.ariaLabel ? this.ariaLabel : N([
+      return this.ariaLabel ? this.ariaLabel : E([
         this.description,
         this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: e })
       ]);
     },
     contactRowListeners() {
-      return E(this.$attrs);
+      return A(this.$attrs);
     },
     showUnreadCount() {
       return !!this.unreadCount;
@@ -122,65 +122,65 @@ const V = {
     this.resizeObserver.disconnect();
   },
   methods: {
-    removeClassStyleAttrs: A,
+    removeClassStyleAttrs: k,
     addClassStyleAttrs: S,
     adjustLabelWidth() {
       var n, t, s, l, d, c;
-      const e = ((t = (n = u(this.$el)) == null ? void 0 : n.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : t.clientWidth) || 0, r = ((l = (s = u(this.$el)) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, a = ((c = (d = u(this.$el)) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : c.clientWidth) || 0, m = 12;
-      this.labelWidth = e - (r + a + m) + "px";
+      const e = ((t = (n = u(this.$el)) == null ? void 0 : n.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : t.clientWidth) || 0, r = ((l = (s = u(this.$el)) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, a = ((c = (d = u(this.$el)) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : c.clientWidth) || 0, f = 12;
+      this.labelWidth = e - (r + a + f) + "px";
     }
   }
-}, x = ["data-qa", "aria-label", "title", "href"], I = { class: "d-recipe-leftbar-row__alpha" }, M = {
+}, I = ["data-qa", "aria-label", "title", "href"], M = { class: "d-recipe-leftbar-row__alpha" }, x = {
   key: 0,
   class: "d-recipe-leftbar-row__omega"
 }, H = { class: "d-recipe-leftbar-row__action-container" }, F = { class: "d-recipe-leftbar-row__bottom" };
-function G(e, r, a, m, n, t) {
+function G(e, r, a, f, n, t) {
   const s = i("dt-icon-headphones"), l = i("dt-emoji-text-wrapper"), d = i("dt-badge"), c = i("dt-icon-chevron-down"), g = i("dt-button");
-  return h(), f("div", w({
+  return h(), w("div", C({
     class: [
       "d-recipe-leftbar-row__container",
       { "d-recipe-leftbar-row__container--off-duty": e.$slots.timer }
     ]
   }, t.addClassStyleAttrs(e.$attrs)), [
     o("div", {
-      class: T(t.leftbarContactCentersRowClasses),
+      class: D(t.leftbarContactCentersRowClasses),
       "data-qa": "dt-recipe-contact-centers-row"
     }, [
-      o("a", w({
+      o("a", C({
         class: "d-recipe-leftbar-row__primary",
         "data-qa": e.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
         "aria-label": t.getAriaLabel,
         title: a.description,
         href: e.$attrs.href ?? "javascript:void(0)"
-      }, t.removeClassStyleAttrs(e.$attrs), q(t.contactRowListeners, !0), {
-        onClick: r[0] || (r[0] = (p) => e.$emit("click", p))
+      }, t.removeClassStyleAttrs(e.$attrs), T(t.contactRowListeners, !0), {
+        onClick: r[0] || (r[0] = (_) => e.$emit("click", _))
       }), [
-        o("div", I, [
-          _(s, {
+        o("div", M, [
+          p(s, {
             size: "300",
             "data-qa": "dt-recipe-leftbar-row-icon"
           })
         ]),
         o("div", {
           class: "d-recipe-leftbar-row__label",
-          style: B(`flex-basis: ${n.labelWidth}`)
+          style: q(`flex-basis: ${n.labelWidth}`)
         }, [
-          _(l, {
+          p(l, {
             class: "d-recipe-leftbar-row__description",
             "data-qa": "dt-recipe-leftbar-row-description",
             size: "200"
           }, {
             default: b(() => [
-              C(y(a.description), 1)
+              y(v(a.description), 1)
             ]),
             _: 1
           })
         ], 4)
-      ], 16, x),
-      a.hideActions ? L("", !0) : (h(), f("div", M, [
-        v(e.$slots, "right"),
+      ], 16, I),
+      a.hideActions ? L("", !0) : (h(), w("div", x, [
+        e.$slots.end ? m(e.$slots, "end", { key: 0 }) : m(e.$slots, "right", { key: 1 }),
         o("div", H, [
-          t.showUnreadCount ? (h(), $(d, {
+          t.showUnreadCount ? (h(), B(d, {
             key: 0,
             class: "d-recipe-leftbar-row__unread-badge",
             "data-qa": "dt-recipe-leftbar-row-unread-badge",
@@ -188,11 +188,11 @@ function G(e, r, a, m, n, t) {
             type: "bulletin"
           }, {
             default: b(() => [
-              C(y(a.unreadCount), 1)
+              y(v(a.unreadCount), 1)
             ]),
             _: 1
           })) : L("", !0),
-          _(g, {
+          p(g, {
             class: "d-recipe-leftbar-row__action",
             "data-qa": "dt-recipe-leftbar-row-action-button",
             "aria-label": t.menuButtonLabel,
@@ -200,10 +200,10 @@ function G(e, r, a, m, n, t) {
             importance: "clear",
             size: "xs",
             circle: "",
-            onClick: r[1] || (r[1] = z((p) => e.$emit("click-menu", p), ["stop"]))
+            onClick: r[1] || (r[1] = z((_) => e.$emit("click-menu", _), ["stop"]))
           }, {
             icon: b(() => [
-              _(c, { size: "100" })
+              p(c, { size: "100" })
             ]),
             _: 1
           }, 8, ["aria-label", "title"])
@@ -211,7 +211,7 @@ function G(e, r, a, m, n, t) {
       ]))
     ], 2),
     o("div", F, [
-      v(e.$slots, "timer")
+      m(e.$slots, "timer")
     ])
   ], 16);
 }

package/dist/lib/contact-centers-row/contact-centers-row.js.map

@@ -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      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-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=\"d-recipe-leftbar-row__omega\"\n      >\n        <slot name=\"right\" />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\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=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\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      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\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      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\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(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","value","DialtoneLocalization","count","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","$data","_component_dt_emoji_text_wrapper","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":";;;;;;;;AAuFA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,oBAAAC;AAAAA,IACA,kBAAAC;AAAA,IACA,mBAAAC;AAAA;EAGF,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,UAAU;AAAA;;;;IAMZ,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAWC,GAAO;AAChB,eAAKA,IACE,WAAW,KAAKA,CAAK,IADT;AAAA,MAErB;AAAA;;EAIJ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;EAGF,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA,MACZ,MAAM,IAAIC,EAAoB;AAAA;EAElC;AAAA,EAEA,UAAU;AAAA,IACR,kCAAmC;AACjC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,UACE,sCAAsC,KAAK;AAAA,UAC3C,kCAAkC,KAAK;AAAA;;IAG7C;AAAA,IAEA,eAAgB;AACd,YAAMC,IAAQ,MAAM,KAAK,WAAW,IAAI,KAAK,cAAc,OAAO,KAAK,WAAW;AAClF,aAAO,KAAK,YACR,KAAK,YACLC,EAAkB;AAAA,QAClB,KAAK;AAAA,QACL,KAAK,KAAK,GAAG,sCAAsC,EAAE,aAAaD,GAAO;AAAA,MAC3E,CAAC;AAAA,IACL;AAAA,IAEA,sBAAuB;AACrB,aAAOE,EAAoB,KAAK,MAAM;AAAA,IACxC;AAAA,IAEA,kBAAmB;AACjB,aAAO,CAAC,CAAC,KAAK;AAAA,IAChB;AAAA,IAEA,kBAAmB;AACjB,aAAO,KAAK,KAAK,GAAG,gDAAgD;AAAA,IACtE;AAAA;EAGF,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,MAAM,UAAW;AACf,cAAM,KAAK,UAAS,GACpB,KAAK,iBAAgB;AAAA,MACvB;AAAA;;EAIJ,UAAW;AACT,SAAK,iBAAiB,IAAI,eAAe,KAAK,gBAAgB,GAC9D,KAAK,eAAe,QAAQC,EAAc,KAAK,GAAG,CAAC,GACnD,KAAK,iBAAgB;AAAA,EACvB;AAAA,EAEA,eAAe,WAAY;AACzB,SAAK,eAAe,WAAU;AAAA,EAChC;AAAA,EAEA,SAAS;AAAA,IACP,uBAAAC;AAAA,IACA,oBAAAC;AAAA,IAEA,mBAAoB;;AAClB,YAAMC,MAAaC,KAAAC,IAAAL,EAAc,KAAK,GAAG,MAAtB,gBAAAK,EAAyB,cAAc,sCAAvC,gBAAAD,EAA0E,gBAAe,GACtGE,MAAaC,KAAAC,IAAAR,EAAc,KAAK,GAAG,MAAtB,gBAAAQ,EAAyB,cAAc,oCAAvC,gBAAAD,EAAwE,gBAAe,GACpGE,MAAaC,KAAAC,IAAAX,EAAc,KAAK,GAAG,MAAtB,gBAAAW,EAAyB,cAAc,oCAAvC,gBAAAD,EAAwE,gBAAe,GACpGE,IAAW;AACjB,WAAK,aAAaT,KAAcG,IAAaG,IAAaG,KAAY;AAAA,IACxE;AAAA;AAEJ,mDAzNaC,IAAA,EAAA,OAAM,8BAA6B;;EAqBxC,OAAM;GAGDC,IAAA,EAAA,OAAM,yCAAwC,GA2BlDC,IAAA,EAAA,OAAM,+BAA8B;;;AAxE3C,SAAAC,EAAA,GAAAC,EA2EM,OA3ENC,EA2EM;AAAA,IA1EH,OAAK;AAAA;MAAkG,EAAA,6CAAAC,EAAA,OAAO,MAAK;AAAA;EAI5G,GAAAC,EAAA,mBAAmBD,EAAA,MAAM,CAAA,GAAA;AAAA,IAEjCE,EAgEM,OAAA;AAAA,MA/DH,SAAOD,EAAA,+BAA+B;AAAA,MACvC,WAAQ;AAAA;MAERC,EA4BI,KA5BJH,EA4BI;AAAA,QA3BF,OAAM;AAAA,QACL,WAASC,EAAA,OAAM,SAAA,KAAA;AAAA,QACf,cAAYC,EAAA;AAAA,QACZ,OAAOE,EAAA;AAAA,QACP,MAAMH,EAAA,OAAO,QAAI;AAAA,MACV,GAAAC,EAAA,sBAAsBD,EAAA,MAAM,GACpCI,EAA0BH,EAApB,qBAAmB,EAAA,GAAA;AAAA,QACxB,SAAKI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEN,EAAA,MAAK,SAAUM,CAAM;AAAA;QAE7BJ,EAKM,OALNR,GAKM;AAAA,UAJJa,EAGEC,GAAA;AAAA,YAFA,MAAK;AAAA,YACL,WAAQ;AAAA;;QAGZN,EAWM,OAAA;AAAA,UAVJ,OAAM;AAAA,UACL,wBAAsBO,EAAA,UAAU,EAAA;AAAA;UAEjCF,EAMwBG,GAAA;AAAA,YALtB,OAAM;AAAA,YACN,WAAQ;AAAA,YACR,MAAK;AAAA;uBAEL,MAAiB;AAAA,kBAAdP,EAAA,WAAW,GAAA,CAAA;AAAA;;;;;MAKXA,EAAA,2BADTN,KAAAC,EA8BM,OA9BNa,GA8BM;AAAA,QA1BJC,EAAqBZ,EAAA,QAAA,OAAA;AAAA,QACrBE,EAwBM,OAxBNP,GAwBM;AAAA,UAtBIM,EAAA,wBADRY,EAQWC,GAAA;AAAA;YANT,OAAM;AAAA,YACN,WAAQ;AAAA,YACR,MAAK;AAAA,YACL,MAAK;AAAA;uBAEL,MAAiB;AAAA,kBAAdX,EAAA,WAAW,GAAA,CAAA;AAAA;;;UAEhBI,EAaYQ,GAAA;AAAA,YAZV,OAAM;AAAA,YACN,WAAQ;AAAA,YACP,cAAYd,EAAA;AAAA,YACZ,OAAOA,EAAA;AAAA,YACR,YAAW;AAAA,YACX,MAAK;AAAA,YACL,QAAA;AAAA,YACC,SAAKI,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAW,EAAA,CAAAV,MAAON,EAAA,MAAK,cAAeM,CAAM,GAAA,CAAA,MAAA,CAAA;AAAA;YAE5B,QACT,MAAmC;AAAA,cAAnCC,EAAmCU,GAAA,EAAb,MAAK,MAAK,CAAA;AAAA;;;;;;IAM1Cf,EAEM,OAFNN,GAEM;AAAA,MADJgB,EAAqBZ,EAAA,QAAA,OAAA;AAAA;;;;"}
+{"version":3,"file":"contact-centers-row.js","sources":["../../../recipes/leftbar/contact_centers_row/contact_centers_row.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-leftbar-row__container',\n      { 'd-recipe-leftbar-row__container--off-duty': $slots.timer },\n    ]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <div\n      :class=\"leftbarContactCentersRowClasses\"\n      data-qa=\"dt-recipe-contact-centers-row\"\n    >\n      <a\n        class=\"d-recipe-leftbar-row__primary\"\n        :data-qa=\"$attrs['data-qa'] ?? 'd-recipe-leftbar-row-link'\"\n        :aria-label=\"getAriaLabel\"\n        :title=\"description\"\n        :href=\"$attrs.href ?? 'javascript:void(0)'\"\n        v-bind=\"removeClassStyleAttrs($attrs)\"\n        v-on=\"contactRowListeners\"\n        @click=\"$emit('click', $event)\"\n      >\n        <div class=\"d-recipe-leftbar-row__alpha\">\n          <dt-icon-headphones\n            size=\"300\"\n            data-qa=\"dt-recipe-leftbar-row-icon\"\n          />\n        </div>\n        <div\n          class=\"d-recipe-leftbar-row__label\"\n          :style=\"`flex-basis: ${labelWidth}`\"\n        >\n          <dt-emoji-text-wrapper\n            class=\"d-recipe-leftbar-row__description\"\n            data-qa=\"dt-recipe-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=\"d-recipe-leftbar-row__omega\"\n      >\n        <!-- @slot Slot for end content -->\n        <slot\n          v-if=\"$slots.end\"\n          name=\"end\"\n        />\n        <!-- @slot @deprecated Use end -->\n        <slot\n          v-else\n          name=\"right\"\n        />\n        <div class=\"d-recipe-leftbar-row__action-container\">\n          <dt-badge\n            v-if=\"showUnreadCount\"\n            class=\"d-recipe-leftbar-row__unread-badge\"\n            data-qa=\"dt-recipe-leftbar-row-unread-badge\"\n            kind=\"count\"\n            type=\"bulletin\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n          <dt-button\n            class=\"d-recipe-leftbar-row__action\"\n            data-qa=\"dt-recipe-leftbar-row-action-button\"\n            :aria-label=\"menuButtonLabel\"\n            :title=\"menuButtonLabel\"\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=\"d-recipe-leftbar-row__bottom\">\n      <slot name=\"timer\" />\n    </div>\n  </div>\n</template>\n\n<script>\nimport { extractVueListeners, safeConcatStrings, removeClassStyleAttrs, returnFirstEl, addClassStyleAttrs } from '@/common/utils';\nimport { DtBadge } from '@/components/badge';\nimport { DtButton } from '@/components/button';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DtIconChevronDown, DtIconHeadphones } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\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      validator (value) {\n        if (!value) return true;\n        return /^\\d+\\+?$/.test(value);\n      },\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      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    leftbarContactCentersRowClasses () {\n      return [\n        'd-recipe-leftbar-row',\n        'd-recipe-leftbar-row--contact-centers',\n        {\n          'd-recipe-leftbar-row__unread-count': this.showUnreadCount,\n          'd-recipe-leftbar-row--selected': this.selected,\n        },\n      ];\n    },\n\n    getAriaLabel () {\n      const count = isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([\n          this.description,\n          this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: count }),\n        ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount;\n    },\n\n    menuButtonLabel () {\n      return this.i18n.$t('DIALTONE_CONTACT_CENTERS_ROW_MENU_BUTTON_LABEL');\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(returnFirstEl(this.$el));\n    this.adjustLabelWidth();\n  },\n\n  beforeUnmount: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n\n    adjustLabelWidth () {\n      const labelWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = returnFirstEl(this.$el)?.querySelector('.d-recipe-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 12;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtBadge","DtEmojiTextWrapper","DtIconHeadphones","DtIconChevronDown","value","DialtoneLocalization","count","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","$data","_component_dt_emoji_text_wrapper","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":"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"}

package/dist/lib/contact-info/contact-info.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../item-layout/item-layout.cjs"),u=require("../avatar/avatar.cjs"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m={compatConfig:{MODE:3},name:"DtRecipeContactInfo",components:{DtAvatar:u.default,DtItemLayout:d.default},props:{role:{type:String,default:""},showAvatar:{type:Boolean,default:!0},avatarSrc:{type:String,default:""},avatarSeed:{type:String,default:null},avatarFullName:{type:String,default:""},avatarSize:{type:String,default:"lg"},avatarLabelledBy:{type:String,default:""},avatarColor:{type:String,default:null},presence:{type:String,default:null},avatarList:{type:Array,default:null}},emits:["avatar-click"],methods:{avatarClick(){this.$emit("avatar-click")}}},_=["aria-labelledby"],v={key:0,class:"d-recipe-contact-info__avatars"},y={class:"d-recipe-contact-info__header","data-qa":"contact-info-header"},h={class:"d-recipe-contact-info__subtitle","data-qa":"contact-info-subtitle"},S={class:"d-recipe-contact-info__bottom","data-qa":"contact-info-bottom"},g={"data-qa":"contact-info-right"};function k(o,n,t,b,C,l){const c=e.resolveComponent("dt-avatar"),i=e.resolveComponent("dt-item-layout");return e.openBlock(),e.createBlock(i,{role:t.role,"data-qa":"contact-info",class:"d-recipe-contact-info","content-class":"d-recipe-contact-info__content","right-class":"d-recipe-contact-info__right",unstyled:""},e.createSlots({default:e.withCtx(()=>[e.createElementVNode("div",y,[e.renderSlot(o.$slots,"header")])]),subtitle:e.withCtx(()=>[e.createElementVNode("div",h,[e.renderSlot(o.$slots,"subtitle")])]),_:2},[t.showAvatar?{name:"left",fn:e.withCtx(()=>[e.createElementVNode("button",{class:"d-recipe-contact-info__left","data-qa":"contact-info-left","aria-labelledby":t.avatarLabelledBy,onClick:n[0]||(n[0]=(...a)=>l.avatarClick&&l.avatarClick(...a))},[t.avatarList?(e.openBlock(),e.createElementBlock("span",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.avatarList,(a,r)=>(e.openBlock(),e.createBlock(c,{key:r,size:t.avatarSize,seed:a.seed,"full-name":a.fullName,"image-src":a.src,"image-alt":"","overlay-text":a.text,"avatar-class":[{"d-recipe-contact-info__avatar-stacked":r>0,"d-recipe-contact-info__avatar-halo":!!a.halo}]},e.createSlots({icon:e.withCtx(({iconSize:s})=>[e.renderSlot(o.$slots,"avatarIcon",{iconSize:s})]),_:2},[a.icon?{name:"overlayIcon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.icon)))]),key:"0"}:void 0]),1032,["size","seed","full-name","image-src","overlay-text","avatar-class"]))),128))])):(e.openBlock(),e.createBlock(c,{key:1,size:t.avatarSize,"full-name":t.avatarFullName,"image-src":t.avatarSrc,"image-alt":"",seed:t.avatarSeed,color:t.avatarColor,presence:t.presence},{icon:e.withCtx(({iconSize:a})=>[e.renderSlot(o.$slots,"avatarIcon",{iconSize:a})]),_:3},8,["size","full-name","image-src","seed","color","presence"]))],8,_)]),key:"0"}:void 0,o.$slots.bottom?{name:"bottom",fn:e.withCtx(()=>[e.createElementVNode("div",S,[e.renderSlot(o.$slots,"bottom")])]),key:"1"}:void 0,o.$slots.right?{name:"right",fn:e.withCtx(()=>[e.createElementVNode("div",g,[e.renderSlot(o.$slots,"right")])]),key:"2"}:void 0]),1032,["role"])}const p=f._(m,[["render",k]]);exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../item-layout/item-layout.cjs"),u=require("../avatar/avatar.cjs"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m={compatConfig:{MODE:3},name:"DtRecipeContactInfo",components:{DtAvatar:u.default,DtItemLayout:d.default},props:{role:{type:String,default:""},showAvatar:{type:Boolean,default:!0},avatarSrc:{type:String,default:""},avatarSeed:{type:String,default:null},avatarFullName:{type:String,default:""},avatarSize:{type:String,default:"lg"},avatarLabelledBy:{type:String,default:""},avatarColor:{type:String,default:null},presence:{type:String,default:null},avatarList:{type:Array,default:null}},emits:["avatar-click"],methods:{avatarClick(){this.$emit("avatar-click")}}},v=["aria-labelledby"],_={key:0,class:"d-recipe-contact-info__avatars"},y={class:"d-recipe-contact-info__header","data-qa":"contact-info-header"},k={class:"d-recipe-contact-info__subtitle","data-qa":"contact-info-subtitle"},S={class:"d-recipe-contact-info__bottom","data-qa":"contact-info-bottom"},h={"data-qa":"contact-info-right"};function g(t,n,a,p,C,l){const r=e.resolveComponent("dt-avatar"),i=e.resolveComponent("dt-item-layout");return e.openBlock(),e.createBlock(i,{role:a.role,"data-qa":"contact-info",class:"d-recipe-contact-info","content-class":"d-recipe-contact-info__content","end-class":"d-recipe-contact-info__right",unstyled:""},e.createSlots({default:e.withCtx(()=>[e.createElementVNode("div",y,[e.renderSlot(t.$slots,"header")])]),subtitle:e.withCtx(()=>[e.createElementVNode("div",k,[e.renderSlot(t.$slots,"subtitle")])]),_:2},[a.showAvatar?{name:"start",fn:e.withCtx(()=>[e.createElementVNode("button",{class:"d-recipe-contact-info__left","data-qa":"contact-info-left","aria-labelledby":a.avatarLabelledBy,onClick:n[0]||(n[0]=(...o)=>l.avatarClick&&l.avatarClick(...o))},[a.avatarList?(e.openBlock(),e.createElementBlock("span",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.avatarList,(o,c)=>(e.openBlock(),e.createBlock(r,{key:c,size:a.avatarSize,seed:o.seed,"full-name":o.fullName,"image-src":o.src,"image-alt":"","overlay-text":o.text,"avatar-class":[{"d-recipe-contact-info__avatar-stacked":c>0,"d-recipe-contact-info__avatar-halo":!!o.halo}]},e.createSlots({icon:e.withCtx(({iconSize:s})=>[e.renderSlot(t.$slots,"avatarIcon",{iconSize:s})]),_:2},[o.icon?{name:"overlayIcon",fn:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon)))]),key:"0"}:void 0]),1032,["size","seed","full-name","image-src","overlay-text","avatar-class"]))),128))])):(e.openBlock(),e.createBlock(r,{key:1,size:a.avatarSize,"full-name":a.avatarFullName,"image-src":a.avatarSrc,"image-alt":"",seed:a.avatarSeed,color:a.avatarColor,presence:a.presence},{icon:e.withCtx(({iconSize:o})=>[e.renderSlot(t.$slots,"avatarIcon",{iconSize:o})]),_:3},8,["size","full-name","image-src","seed","color","presence"]))],8,v)]),key:"0"}:void 0,t.$slots.blockEnd||t.$slots.bottom?{name:"blockEnd",fn:e.withCtx(()=>[e.createElementVNode("div",S,[t.$slots.blockEnd?e.renderSlot(t.$slots,"blockEnd",{key:0}):e.renderSlot(t.$slots,"bottom",{key:1})])]),key:"1"}:void 0,t.$slots.end||t.$slots.right?{name:"end",fn:e.withCtx(()=>[e.createElementVNode("div",h,[t.$slots.end?e.renderSlot(t.$slots,"end",{key:0}):e.renderSlot(t.$slots,"right",{key:1})])]),key:"2"}:void 0]),1032,["role"])}const b=f._(m,[["render",g]]);exports.default=b;
 //# sourceMappingURL=contact-info.cjs.map

package/dist/lib/contact-info/contact-info.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"contact-info.cjs","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    right-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\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's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\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     * 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     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","_withCtx","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"2QA2HKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,sBAEN,WAAY,CACV,SAAAC,EAAAA,qBACAC,EAAAA,SASF,MAAO,CAIL,KAAM,CACJ,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,MAOX,eAAgB,CACd,KAAM,OACN,QAAS,IAOX,WAAY,CACV,KAAM,OACN,QAAS,MAMX,iBAAkB,CAChB,KAAM,OACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,MASX,SAAU,CACR,KAAM,OACN,QAAS,MAcX,WAAY,CACV,KAAM,MACN,QAAS,OAIb,MAAO,CAAC,cAAc,EAEtB,QAAS,CACP,aAAe,CACb,KAAK,MAAM,cAAc,CAC3B,EAEJ,iCA3NU,MAAM,qCAuDR,MAAM,gCACN,UAAQ,0BASR,MAAM,kCACN,UAAQ,4BAYR,MAAM,gCACN,UAAQ,uBAWLC,EAAA,CAAA,UAAQ,oBAAoB,8HA9GrCC,EAAAA,YAmHiBC,EAAA,CAlHd,KAAMC,EAAA,KACP,UAAQ,eACR,MAAM,wBACN,gBAAc,iCACd,cAAY,+BACZ,SAAA,mBAmEW,kBACT,IAMM,CANNC,EAAAA,mBAMM,MANNC,EAMM,CADJC,aAAsBC,EAAA,OAAA,QAAA,MAIf,mBACT,IAMM,CANNH,EAAAA,mBAMM,MANNI,EAMM,CADJF,aAAwBC,EAAA,OAAA,UAAA,YAhFpBJ,EAAA,iBACL,oBAED,IA2DS,CA3DTC,EAAAA,mBA2DS,SAAA,CA1DP,MAAM,8BACN,UAAQ,oBACP,kBAAiBD,EAAA,iBACjB,4BAAOM,EAAA,aAAAA,EAAA,YAAA,GAAAC,CAAA,KAGAP,EAAA,YADRQ,EAAAA,YAAAC,EAAAA,mBAkCO,OAlCPC,EAkCO,EA9BLF,EAAAA,UAAA,EAAA,EAAAC,EAAAA,mBA6BYE,WAAA,KAAAC,EAAAA,WA5BgBZ,EAAA,WAAU,CAA5Ba,EAAQC,mBADlBhB,EAAAA,YA6BYiB,EAAA,CA3BT,IAAKD,EACL,KAAMd,EAAA,WACN,KAAMa,EAAO,KACb,YAAWA,EAAO,SAClB,YAAWA,EAAO,IACnB,YAAU,GACT,eAAcA,EAAO,KACrB,eAAY,0CAA6EC,EAAK,EAA8D,qCAAA,CAAA,CAAAD,EAAO,uBAOzJ,KAAIG,EAAAA,QAEb,CAGE,CALe,SAAAC,KAAQ,CAEzBd,EAAAA,WAGEC,EAAA,OAAA,aAAA,CADC,SAAWa,CAAQ,CAAA,UAIhBJ,EAAO,WACZ,2BAED,IAA+B,gBAA/Bf,EAAAA,YAA+BoB,EAAAA,wBAAfL,EAAO,IAAI,CAAA,6HAIjCf,EAAAA,YAiBYiB,EAAA,OAfT,KAAMf,EAAA,WACN,YAAWA,EAAA,eACX,YAAWA,EAAA,UACZ,YAAU,GACT,KAAMA,EAAA,WACN,MAAOA,EAAA,YACP,SAAUA,EAAA,WAEA,KAAIgB,EAAAA,QAEb,CAGE,CALe,SAAAC,KAAQ,CAEzBd,EAAAA,WAGEC,EAAA,OAAA,aAAA,CADC,SAAWa,CAAQ,CAAA,gGA2BtBb,EAAA,OAAO,aACZ,sBAED,IAMM,CANNH,EAAAA,mBAMM,MANNkB,EAMM,CADJhB,aAAsBC,EAAA,OAAA,QAAA,sBAKlBA,EAAA,OAAO,YACZ,qBAED,IAGM,CAHNH,EAAAA,mBAGM,MAHNJ,EAGM,CADJM,aAAqBC,EAAA,OAAA,OAAA"}
+{"version":3,"file":"contact-info.cjs","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    end-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #start\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.blockEnd || $slots.bottom\"\n      #blockEnd\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for block-end content -->\n        <slot\n          v-if=\"$slots.blockEnd\"\n          name=\"blockEnd\"\n        />\n        <!-- @slot @deprecated Use blockEnd -->\n        <slot\n          v-else\n          name=\"bottom\"\n        />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.end || $slots.right\"\n      #end\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the end content -->\n        <slot\n          v-if=\"$slots.end\"\n          name=\"end\"\n        />\n        <!-- @slot @deprecated Use end -->\n        <slot\n          v-else\n          name=\"right\"\n        />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\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's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\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     * 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     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","_withCtx","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}

package/dist/lib/contact-info/contact-info.js

@@ -1,13 +1,13 @@
-import g from "../item-layout/item-layout.js";
-import h from "../avatar/avatar.js";
-import { resolveComponent as m, openBlock as n, createBlock as i, createSlots as u, withCtx as o, createElementVNode as l, renderSlot as c, createElementBlock as _, Fragment as p, renderList as S, resolveDynamicComponent as k } from "vue";
-import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import k from "../item-layout/item-layout.js";
+import g from "../avatar/avatar.js";
+import { resolveComponent as m, openBlock as l, createBlock as i, createSlots as u, withCtx as o, createElementVNode as c, renderSlot as n, createElementBlock as v, Fragment as b, renderList as h, resolveDynamicComponent as p } from "vue";
+import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const C = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeContactInfo",
   components: {
-    DtAvatar: h,
-    DtItemLayout: g
+    DtAvatar: g,
+    DtItemLayout: k
   },
   /* inheritAttrs: false is generally an option we want to set on library
     components. This allows any attributes passed in that are not recognized
@@ -105,91 +105,91 @@ const C = {
       this.$emit("avatar-click");
     }
   }
-}, z = ["aria-labelledby"], L = {
+}, z = ["aria-labelledby"], E = {
   key: 0,
   class: "d-recipe-contact-info__avatars"
-}, q = {
+}, L = {
   class: "d-recipe-contact-info__header",
   "data-qa": "contact-info-header"
-}, B = {
+}, q = {
   class: "d-recipe-contact-info__subtitle",
   "data-qa": "contact-info-subtitle"
-}, D = {
+}, B = {
   class: "d-recipe-contact-info__bottom",
   "data-qa": "contact-info-bottom"
-}, I = { "data-qa": "contact-info-right" };
-function A(a, r, t, N, w, s) {
-  const d = m("dt-avatar"), v = m("dt-item-layout");
-  return n(), i(v, {
-    role: t.role,
+}, D = { "data-qa": "contact-info-right" };
+function I(t, r, e, $, A, s) {
+  const d = m("dt-avatar"), y = m("dt-item-layout");
+  return l(), i(y, {
+    role: e.role,
     "data-qa": "contact-info",
     class: "d-recipe-contact-info",
     "content-class": "d-recipe-contact-info__content",
-    "right-class": "d-recipe-contact-info__right",
+    "end-class": "d-recipe-contact-info__right",
     unstyled: ""
   }, u({
     default: o(() => [
-      l("div", q, [
-        c(a.$slots, "header")
+      c("div", L, [
+        n(t.$slots, "header")
       ])
     ]),
     subtitle: o(() => [
-      l("div", B, [
-        c(a.$slots, "subtitle")
+      c("div", q, [
+        n(t.$slots, "subtitle")
       ])
     ]),
     _: 2
   }, [
-    t.showAvatar ? {
-      name: "left",
+    e.showAvatar ? {
+      name: "start",
       fn: o(() => [
-        l("button", {
+        c("button", {
           class: "d-recipe-contact-info__left",
           "data-qa": "contact-info-left",
-          "aria-labelledby": t.avatarLabelledBy,
-          onClick: r[0] || (r[0] = (...e) => s.avatarClick && s.avatarClick(...e))
+          "aria-labelledby": e.avatarLabelledBy,
+          onClick: r[0] || (r[0] = (...a) => s.avatarClick && s.avatarClick(...a))
         }, [
-          t.avatarList ? (n(), _("span", L, [
-            (n(!0), _(p, null, S(t.avatarList, (e, f) => (n(), i(d, {
+          e.avatarList ? (l(), v("span", E, [
+            (l(!0), v(b, null, h(e.avatarList, (a, f) => (l(), i(d, {
               key: f,
-              size: t.avatarSize,
-              seed: e.seed,
-              "full-name": e.fullName,
-              "image-src": e.src,
+              size: e.avatarSize,
+              seed: a.seed,
+              "full-name": a.fullName,
+              "image-src": a.src,
               "image-alt": "",
-              "overlay-text": e.text,
+              "overlay-text": a.text,
               "avatar-class": [
                 {
                   "d-recipe-contact-info__avatar-stacked": f > 0,
-                  "d-recipe-contact-info__avatar-halo": !!e.halo
+                  "d-recipe-contact-info__avatar-halo": !!a.halo
                 }
               ]
             }, u({
-              icon: o(({ iconSize: y }) => [
-                c(a.$slots, "avatarIcon", { iconSize: y })
+              icon: o(({ iconSize: _ }) => [
+                n(t.$slots, "avatarIcon", { iconSize: _ })
               ]),
               _: 2
             }, [
-              e.icon ? {
+              a.icon ? {
                 name: "overlayIcon",
                 fn: o(() => [
-                  (n(), i(k(e.icon)))
+                  (l(), i(p(a.icon)))
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["size", "seed", "full-name", "image-src", "overlay-text", "avatar-class"]))), 128))
-          ])) : (n(), i(d, {
+          ])) : (l(), i(d, {
             key: 1,
-            size: t.avatarSize,
-            "full-name": t.avatarFullName,
-            "image-src": t.avatarSrc,
+            size: e.avatarSize,
+            "full-name": e.avatarFullName,
+            "image-src": e.avatarSrc,
             "image-alt": "",
-            seed: t.avatarSeed,
-            color: t.avatarColor,
-            presence: t.presence
+            seed: e.avatarSeed,
+            color: e.avatarColor,
+            presence: e.presence
           }, {
-            icon: o(({ iconSize: e }) => [
-              c(a.$slots, "avatarIcon", { iconSize: e })
+            icon: o(({ iconSize: a }) => [
+              n(t.$slots, "avatarIcon", { iconSize: a })
             ]),
             _: 3
           }, 8, ["size", "full-name", "image-src", "seed", "color", "presence"]))
@@ -197,28 +197,28 @@ function A(a, r, t, N, w, s) {
       ]),
       key: "0"
     } : void 0,
-    a.$slots.bottom ? {
-      name: "bottom",
+    t.$slots.blockEnd || t.$slots.bottom ? {
+      name: "blockEnd",
       fn: o(() => [
-        l("div", D, [
-          c(a.$slots, "bottom")
+        c("div", B, [
+          t.$slots.blockEnd ? n(t.$slots, "blockEnd", { key: 0 }) : n(t.$slots, "bottom", { key: 1 })
         ])
       ]),
       key: "1"
     } : void 0,
-    a.$slots.right ? {
-      name: "right",
+    t.$slots.end || t.$slots.right ? {
+      name: "end",
       fn: o(() => [
-        l("div", I, [
-          c(a.$slots, "right")
+        c("div", D, [
+          t.$slots.end ? n(t.$slots, "end", { key: 0 }) : n(t.$slots, "right", { key: 1 })
         ])
       ]),
       key: "2"
     } : void 0
   ]), 1032, ["role"]);
 }
-const R = /* @__PURE__ */ b(C, [["render", A]]);
+const O = /* @__PURE__ */ S(C, [["render", I]]);
 export {
-  R as default
+  O as default
 };
 //# sourceMappingURL=contact-info.js.map

package/dist/lib/contact-info/contact-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"contact-info.js","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    right-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #left\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.bottom\"\n      #bottom\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for information at the bottom -->\n        <slot name=\"bottom\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.right\"\n      #right\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the right content -->\n        <slot name=\"right\" />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\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's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\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     * 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     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","_withCtx","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}
+{"version":3,"file":"contact-info.js","sources":["../../../recipes/item_layout/contact_info/contact_info.vue"],"sourcesContent":["<template>\n  <dt-item-layout\n    :role=\"role\"\n    data-qa=\"contact-info\"\n    class=\"d-recipe-contact-info\"\n    content-class=\"d-recipe-contact-info__content\"\n    end-class=\"d-recipe-contact-info__right\"\n    unstyled\n  >\n    <template\n      v-if=\"showAvatar\"\n      #start\n    >\n      <button\n        class=\"d-recipe-contact-info__left\"\n        data-qa=\"contact-info-left\"\n        :aria-labelledby=\"avatarLabelledBy\"\n        @click=\"avatarClick\"\n      >\n        <span\n          v-if=\"avatarList\"\n          class=\"d-recipe-contact-info__avatars\"\n        >\n          <dt-avatar\n            v-for=\"(avatar, index) in avatarList\"\n            :key=\"index\"\n            :size=\"avatarSize\"\n            :seed=\"avatar.seed\"\n            :full-name=\"avatar.fullName\"\n            :image-src=\"avatar.src\"\n            image-alt=\"\"\n            :overlay-text=\"avatar.text\"\n            :avatar-class=\"[\n              {\n                'd-recipe-contact-info__avatar-stacked': index > 0,\n                'd-recipe-contact-info__avatar-halo': !!avatar.halo,\n              },\n            ]\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <!-- @slot Slot for avatar icon in a list -->\n              <slot\n                name=\"avatarIcon\"\n                :icon-size=\"iconSize\"\n              />\n            </template>\n            <template\n              v-if=\"avatar.icon\"\n              #overlayIcon\n            >\n              <component :is=\"avatar.icon\" />\n            </template>\n          </dt-avatar>\n        </span>\n        <dt-avatar\n          v-else\n          :size=\"avatarSize\"\n          :full-name=\"avatarFullName\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :seed=\"avatarSeed\"\n          :color=\"avatarColor\"\n          :presence=\"presence\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <!-- @slot Slot for avatar icon in a list -->\n            <slot\n              name=\"avatarIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n        </dt-avatar>\n      </button>\n    </template>\n    <template #default>\n      <div\n        class=\"d-recipe-contact-info__header\"\n        data-qa=\"contact-info-header\"\n      >\n        <!-- @slot Slot for header information -->\n        <slot name=\"header\" />\n      </div>\n    </template>\n\n    <template #subtitle>\n      <div\n        class=\"d-recipe-contact-info__subtitle\"\n        data-qa=\"contact-info-subtitle\"\n      >\n        <!-- @slot Slot for subtitle information -->\n        <slot name=\"subtitle\" />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.blockEnd || $slots.bottom\"\n      #blockEnd\n    >\n      <div\n        class=\"d-recipe-contact-info__bottom\"\n        data-qa=\"contact-info-bottom\"\n      >\n        <!-- @slot Slot for block-end content -->\n        <slot\n          v-if=\"$slots.blockEnd\"\n          name=\"blockEnd\"\n        />\n        <!-- @slot @deprecated Use blockEnd -->\n        <slot\n          v-else\n          name=\"bottom\"\n        />\n      </div>\n    </template>\n\n    <template\n      v-if=\"$slots.end || $slots.right\"\n      #end\n    >\n      <div data-qa=\"contact-info-right\">\n        <!-- @slot Slot for the end content -->\n        <slot\n          v-if=\"$slots.end\"\n          name=\"end\"\n        />\n        <!-- @slot @deprecated Use end -->\n        <slot\n          v-else\n          name=\"right\"\n        />\n      </div>\n    </template>\n  </dt-item-layout>\n</template>\n\n<script>\nimport DtItemLayout from '@/components/item_layout/item_layout.vue';\nimport DtAvatar from '@/components/avatar/avatar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeContactInfo',\n\n  components: {\n    DtAvatar,\n    DtItemLayout,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Display avatar if `showAvatar` property is true.\n     */\n    showAvatar: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Optional avatar image url.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\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's full name, used to extract initials\n     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.\n     */\n    avatarFullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    avatarSize: {\n      type: String,\n      default: 'lg',\n    },\n\n    /**\n     * The aria-labelledby of the button containing avatars\n     */\n    avatarLabelledBy: {\n      type: String,\n      default: '',\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     * 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     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Showing multiple avatars in contact info.\n     * The props of array items are: <br>\n     * `src` - avatar image url (optional) <br>\n     * `fullName` - full name, used to extract initials to display in avatar<br>\n     *  if `avatarSrc` and `avatarIcon` are empty<br>\n     * `seed` - determines uniqueness of avatar background <br>\n     * `text` - text that overlays the avatar (optional) <br>\n     * `icon` - icon that overlays the avatar (optional) <br>\n     * `halo` - halo highlight around the avatar. boolean true/false\n     */\n    avatarList: {\n      type: Array,\n      default: null,\n    },\n  },\n\n  emits: ['avatar-click'],\n\n  methods: {\n    avatarClick () {\n      this.$emit('avatar-click');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtItemLayout","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","_withCtx","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}

package/dist/lib/contact-row/contact-row.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),_=require("../general-row/general-row.cjs"),f=require("../avatar/avatar.cjs"),y={compatConfig:{MODE:3},name:"DtRecipeContactRow",components:{DtAvatar:f.default,DtRecipeGeneralRow:_.default,DtEmojiTextWrapper:m.default,DtIconUser:d.DtIconUser},inheritAttrs:!1,props:{avatarSrc:{type:String,default:""},avatarPresence:{type:String,default:null},avatarSeed:{type:String,default:null},avatarColor:{type:String,default:null},presenceText:{type:String,default:""},name:{type:String,required:!0},userStatus:{type:String,default:""},muted:{type:Boolean,default:!1},unreadCount:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},noInitials:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},hasCallButton:{type:Boolean,default:!0}},emits:["call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactRowListeners(){return s.extractVueListeners(this.$attrs)},contactDescription(){return s.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}},w={class:"d-recipe-leftbar-row__status"};function g(a,n,t,v,S,r){const c=e.resolveComponent("dt-icon-user"),l=e.resolveComponent("dt-avatar"),o=e.resolveComponent("dt-emoji-text-wrapper"),i=e.resolveComponent("dt-recipe-general-row");return e.openBlock(),e.createBlock(i,e.mergeProps({"unread-count":t.unreadCount,description:r.contactDescription,"has-unreads":t.hasUnreads,selected:t.selected,"has-call-button":t.hasCallButton,muted:t.muted,"is-typing":t.isTyping},a.$attrs,{"data-qa":"contact-row"},e.toHandlers(r.contactRowListeners),{onCall:n[0]||(n[0]=u=>a.$emit("call",u))}),{left:e.withCtx(()=>[e.createVNode(l,{"full-name":t.name,"image-src":t.avatarSrc,color:t.avatarColor,"image-alt":"",size:"sm",seed:t.avatarSeed,presence:t.avatarPresence},e.createSlots({_:2},[t.noInitials?{name:"icon",fn:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),key:"0"}:void 0]),1032,["full-name","image-src","color","seed","presence"])]),label:e.withCtx(()=>[e.createVNode(o,{class:"d-recipe-leftbar-row__description","data-qa":"dt-recipe-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.name),1)]),_:1}),e.createElementVNode("div",w,[t.presenceText?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-recipe-leftbar-row-presence-text",class:e.normalizeClass(["d-recipe-leftbar-row__meta-context",r.presenceFontColorClass])},e.toDisplayString(t.presenceText),3)):e.createCommentVNode("",!0),t.userStatus?(e.openBlock(),e.createBlock(o,{key:1,size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status",class:"d-recipe-leftbar-row__meta-custom"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.userStatus),1)]),_:1})):e.createCommentVNode("",!0)])]),_:1},16,["unread-count","description","has-unreads","selected","has-call-button","muted","is-typing"])}const C=p._(y,[["render",g]]);exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../common/utils/index.cjs"),d=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),_=require("../general-row/general-row.cjs"),f=require("../avatar/avatar.cjs"),y={compatConfig:{MODE:3},name:"DtRecipeContactRow",components:{DtAvatar:f.default,DtRecipeGeneralRow:_.default,DtEmojiTextWrapper:m.default,DtIconUser:d.DtIconUser},inheritAttrs:!1,props:{avatarSrc:{type:String,default:""},avatarPresence:{type:String,default:null},avatarSeed:{type:String,default:null},avatarColor:{type:String,default:null},presenceText:{type:String,default:""},name:{type:String,required:!0},userStatus:{type:String,default:""},muted:{type:Boolean,default:!1},unreadCount:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},noInitials:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1},hasCallButton:{type:Boolean,default:!0}},emits:["call"],computed:{presenceFontColorClass(){return{active:"d-recipe-contact-row--active",busy:"d-recipe-contact-row--busy",away:"d-recipe-contact-row--away"}[this.avatarPresence]},contactRowListeners(){return s.extractVueListeners(this.$attrs)},contactDescription(){return s.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}},w={class:"d-recipe-leftbar-row__status"};function g(a,n,t,v,S,r){const c=e.resolveComponent("dt-icon-user"),l=e.resolveComponent("dt-avatar"),o=e.resolveComponent("dt-emoji-text-wrapper"),i=e.resolveComponent("dt-recipe-general-row");return e.openBlock(),e.createBlock(i,e.mergeProps({"unread-count":t.unreadCount,description:r.contactDescription,"has-unreads":t.hasUnreads,selected:t.selected,"has-call-button":t.hasCallButton,muted:t.muted,"is-typing":t.isTyping},a.$attrs,{"data-qa":"contact-row"},e.toHandlers(r.contactRowListeners),{onCall:n[0]||(n[0]=u=>a.$emit("call",u))}),{start:e.withCtx(()=>[e.createVNode(l,{"full-name":t.name,"image-src":t.avatarSrc,color:t.avatarColor,"image-alt":"",size:"sm",seed:t.avatarSeed,presence:t.avatarPresence},e.createSlots({_:2},[t.noInitials?{name:"icon",fn:e.withCtx(()=>[e.createVNode(c,{size:"200"})]),key:"0"}:void 0]),1032,["full-name","image-src","color","seed","presence"])]),label:e.withCtx(()=>[e.createVNode(o,{class:"d-recipe-leftbar-row__description","data-qa":"dt-recipe-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.name),1)]),_:1}),e.createElementVNode("div",w,[t.presenceText?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-recipe-leftbar-row-presence-text",class:e.normalizeClass(["d-recipe-leftbar-row__meta-context",r.presenceFontColorClass])},e.toDisplayString(t.presenceText),3)):e.createCommentVNode("",!0),t.userStatus?(e.openBlock(),e.createBlock(o,{key:1,size:"100","element-type":"span","data-qa":"dt-recipe-leftbar-row-user-status",class:"d-recipe-leftbar-row__meta-custom"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.userStatus),1)]),_:1})):e.createCommentVNode("",!0)])]),_:1},16,["unread-count","description","has-unreads","selected","has-call-button","muted","is-typing"])}const C=p._(y,[["render",g]]);exports.default=C;
 //# sourceMappingURL=contact-row.cjs.map