@dialpad/dialtone 9.110.0 → 9.110.1-beta.2

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../common/utils/index.cjs"),b=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),h=require("@dialpad/dialtone-icons/vue3/chevron-down"),m=require("@dialpad/dialtone-icons/vue3/headphones"),e=require("vue"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),w=require("../button/button.cjs"),C=require("../badge/badge.cjs"),v={compatConfig:{MODE:3},name:"DtRecipeContactCentersRow",components:{DtButton:w.default,DtBadge:C.default,DtEmojiTextWrapper:b.default,DtIconHeadphones:m,DtIconChevronDown:h},inheritAttrs:!1,props:{ariaLabel:{type:String,default:""},description:{type:String,required:!0},selected:{type:Boolean,default:!1},hideActions:{type:Boolean,default:!1},unreadCount:{type:String,default:null},menuButtonAriaLabel:{type:String,required:!0}},emits:["click","click-menu"],data(){return{labelWidth:"auto"}},computed:{leftbarContactCentersRowClasses(){return["d-recipe-leftbar-row","d-recipe-leftbar-row--contact-centers",{"d-recipe-leftbar-row__unread-count":this.showUnreadCount,"d-recipe-leftbar-row--selected":this.selected}]},getAriaLabel(){return this.ariaLabel?this.ariaLabel:a.safeConcatStrings([this.description,this.unreadCountTooltip])},contactRowListeners(){return a.extractVueListeners(this.$attrs)},showUnreadCount(){return!!this.unreadCount}},watch:{$props:{deep:!0,async handler(){await this.$nextTick(),this.adjustLabelWidth()}}},mounted(){this.resizeObserver=new ResizeObserver(this.adjustLabelWidth),this.resizeObserver.observe(a.returnFirstEl(this.$el)),this.adjustLabelWidth()},beforeUnmount:function(){this.resizeObserver.disconnect()},methods:{removeClassStyleAttrs:a.removeClassStyleAttrs,addClassStyleAttrs:a.addClassStyleAttrs,adjustLabelWidth(){var n,r,s,l,d,c;const t=((r=(n=a.returnFirstEl(this.$el))==null?void 0:n.querySelector(".d-recipe-leftbar-row__primary"))==null?void 0:r.clientWidth)||0,i=((l=(s=a.returnFirstEl(this.$el))==null?void 0:s.querySelector(".d-recipe-leftbar-row__omega"))==null?void 0:l.clientWidth)||0,o=((c=(d=a.returnFirstEl(this.$el))==null?void 0:d.querySelector(".d-recipe-leftbar-row__alpha"))==null?void 0:c.clientWidth)||0,p=12;this.labelWidth=t-(i+o+p)+"px"}}},g=["data-qa","aria-label","title","href"],y={class:"d-recipe-leftbar-row__alpha"},q={key:0,class:"d-recipe-leftbar-row__omega"},S={class:"d-recipe-leftbar-row__action-container"},k={class:"d-recipe-leftbar-row__bottom"};function V(t,i,o,p,n,r){const s=e.resolveComponent("dt-icon-headphones"),l=e.resolveComponent("dt-emoji-text-wrapper"),d=e.resolveComponent("dt-badge"),c=e.resolveComponent("dt-icon-chevron-down"),_=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("div",e.mergeProps({class:["d-recipe-leftbar-row__container",{"d-recipe-leftbar-row__container--off-duty":t.$slots.timer}]},r.addClassStyleAttrs(t.$attrs)),[e.createElementVNode("div",{class:e.normalizeClass(r.leftbarContactCentersRowClasses),"data-qa":"dt-recipe-contact-centers-row"},[e.createElementVNode("a",e.mergeProps({class:"d-recipe-leftbar-row__primary","data-qa":t.$attrs["data-qa"]??"d-recipe-leftbar-row-link","aria-label":r.getAriaLabel,title:o.description,href:t.$attrs.href??"javascript:void(0)"},r.removeClassStyleAttrs(t.$attrs),e.toHandlers(r.contactRowListeners,!0),{onClick:i[0]||(i[0]=u=>t.$emit("click",u))}),[e.createElementVNode("div",y,[e.createVNode(s,{size:"300","data-qa":"dt-recipe-leftbar-row-icon"})]),e.createElementVNode("div",{class:"d-recipe-leftbar-row__label",style:e.normalizeStyle(`flex-basis: ${n.labelWidth}`)},[e.createVNode(l,{class:"d-recipe-leftbar-row__description","data-qa":"dt-recipe-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.description),1)]),_:1})],4)],16,g),o.hideActions?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(t.$slots,"right"),e.createElementVNode("div",S,[r.showUnreadCount?(e.openBlock(),e.createBlock(d,{key:0,class:"d-recipe-leftbar-row__unread-badge","data-qa":"dt-recipe-leftbar-row-unread-badge",kind:"count",type:"bulletin"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.unreadCount),1)]),_:1})):e.createCommentVNode("",!0),e.createVNode(_,{class:"d-recipe-leftbar-row__action","data-qa":"dt-recipe-leftbar-row-action-button","aria-label":o.menuButtonAriaLabel,importance:"clear",size:"xs",circle:"",onClick:i[1]||(i[1]=e.withModifiers(u=>t.$emit("click-menu",u),["stop"]))},{icon:e.withCtx(()=>[e.createVNode(c,{size:"100"})]),_:1},8,["aria-label"])])]))],2),e.createElementVNode("div",k,[e.renderSlot(t.$slots,"timer")])],16)}const W=f._(v,[["render",V]]);exports.default=W;
+//# sourceMappingURL=contact-centers-row.cjs.map

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

@@ -0,0 +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      '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=\"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=\"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/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  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    },\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        '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      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(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","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","omegaWidth","alphaWidth","paddings","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","_normalizeClass","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","_normalizeStyle","$data","_component_dt_emoji_text_wrapper","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":"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"}

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

@@ -0,0 +1,217 @@
+import { safeConcatStrings as k, extractVueListeners as L, returnFirstEl as p, removeClassStyleAttrs as W, addClassStyleAttrs as q } from "../../common/utils/index.js";
+import A from "../emoji-text-wrapper/emoji-text-wrapper.js";
+import z from "@dialpad/dialtone-icons/vue3/chevron-down";
+import $ from "@dialpad/dialtone-icons/vue3/headphones";
+import { resolveComponent as i, openBlock as b, createElementBlock as m, mergeProps as w, createElementVNode as o, normalizeClass as B, toHandlers as D, createVNode as u, normalizeStyle as j, withCtx as h, createTextVNode as C, toDisplayString as y, renderSlot as g, createBlock as R, createCommentVNode as v, withModifiers as E } from "vue";
+import { _ as O } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import V from "../button/button.js";
+import x from "../badge/badge.js";
+const N = {
+  compatConfig: { MODE: 3 },
+  name: "DtRecipeContactCentersRow",
+  components: {
+    DtButton: V,
+    DtBadge: x,
+    DtEmojiTextWrapper: A,
+    DtIconHeadphones: $,
+    DtIconChevronDown: z
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text displayed next to the icon. Required.
+     */
+    description: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Making this true will hide the unread count badge, the chevron button, and the right slot
+     */
+    hideActions: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Number of unread messages, could be a string to support '99+'
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+    /**
+     * Aria label for the menu button.
+     */
+    menuButtonAriaLabel: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [
+    /**
+     * Native click event on the row itself
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Menu button clicked
+     *
+     * @event call
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click-menu"
+  ],
+  data() {
+    return {
+      labelWidth: "auto"
+    };
+  },
+  computed: {
+    leftbarContactCentersRowClasses() {
+      return [
+        "d-recipe-leftbar-row",
+        "d-recipe-leftbar-row--contact-centers",
+        {
+          "d-recipe-leftbar-row__unread-count": this.showUnreadCount,
+          "d-recipe-leftbar-row--selected": this.selected
+        }
+      ];
+    },
+    getAriaLabel() {
+      return this.ariaLabel ? this.ariaLabel : k([this.description, this.unreadCountTooltip]);
+    },
+    contactRowListeners() {
+      return L(this.$attrs);
+    },
+    showUnreadCount() {
+      return !!this.unreadCount;
+    }
+  },
+  watch: {
+    $props: {
+      deep: !0,
+      async handler() {
+        await this.$nextTick(), this.adjustLabelWidth();
+      }
+    }
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(p(this.$el)), this.adjustLabelWidth();
+  },
+  beforeUnmount: function() {
+    this.resizeObserver.disconnect();
+  },
+  methods: {
+    removeClassStyleAttrs: W,
+    addClassStyleAttrs: q,
+    adjustLabelWidth() {
+      var s, t, n, l, d, c;
+      const e = ((t = (s = p(this.$el)) == null ? void 0 : s.querySelector(".d-recipe-leftbar-row__primary")) == null ? void 0 : t.clientWidth) || 0, a = ((l = (n = p(this.$el)) == null ? void 0 : n.querySelector(".d-recipe-leftbar-row__omega")) == null ? void 0 : l.clientWidth) || 0, r = ((c = (d = p(this.$el)) == null ? void 0 : d.querySelector(".d-recipe-leftbar-row__alpha")) == null ? void 0 : c.clientWidth) || 0, f = 12;
+      this.labelWidth = e - (a + r + f) + "px";
+    }
+  }
+}, T = ["data-qa", "aria-label", "title", "href"], U = { class: "d-recipe-leftbar-row__alpha" }, H = {
+  key: 0,
+  class: "d-recipe-leftbar-row__omega"
+}, I = { class: "d-recipe-leftbar-row__action-container" }, M = { class: "d-recipe-leftbar-row__bottom" };
+function F(e, a, r, f, s, t) {
+  const n = i("dt-icon-headphones"), l = i("dt-emoji-text-wrapper"), d = i("dt-badge"), c = i("dt-icon-chevron-down"), S = i("dt-button");
+  return b(), m("div", w({
+    class: [
+      "d-recipe-leftbar-row__container",
+      { "d-recipe-leftbar-row__container--off-duty": e.$slots.timer }
+    ]
+  }, t.addClassStyleAttrs(e.$attrs)), [
+    o("div", {
+      class: B(t.leftbarContactCentersRowClasses),
+      "data-qa": "dt-recipe-contact-centers-row"
+    }, [
+      o("a", w({
+        class: "d-recipe-leftbar-row__primary",
+        "data-qa": e.$attrs["data-qa"] ?? "d-recipe-leftbar-row-link",
+        "aria-label": t.getAriaLabel,
+        title: r.description,
+        href: e.$attrs.href ?? "javascript:void(0)"
+      }, t.removeClassStyleAttrs(e.$attrs), D(t.contactRowListeners, !0), {
+        onClick: a[0] || (a[0] = (_) => e.$emit("click", _))
+      }), [
+        o("div", U, [
+          u(n, {
+            size: "300",
+            "data-qa": "dt-recipe-leftbar-row-icon"
+          })
+        ]),
+        o("div", {
+          class: "d-recipe-leftbar-row__label",
+          style: j(`flex-basis: ${s.labelWidth}`)
+        }, [
+          u(l, {
+            class: "d-recipe-leftbar-row__description",
+            "data-qa": "dt-recipe-leftbar-row-description",
+            size: "200"
+          }, {
+            default: h(() => [
+              C(y(r.description), 1)
+            ]),
+            _: 1
+          })
+        ], 4)
+      ], 16, T),
+      r.hideActions ? v("", !0) : (b(), m("div", H, [
+        g(e.$slots, "right"),
+        o("div", I, [
+          t.showUnreadCount ? (b(), R(d, {
+            key: 0,
+            class: "d-recipe-leftbar-row__unread-badge",
+            "data-qa": "dt-recipe-leftbar-row-unread-badge",
+            kind: "count",
+            type: "bulletin"
+          }, {
+            default: h(() => [
+              C(y(r.unreadCount), 1)
+            ]),
+            _: 1
+          })) : v("", !0),
+          u(S, {
+            class: "d-recipe-leftbar-row__action",
+            "data-qa": "dt-recipe-leftbar-row-action-button",
+            "aria-label": r.menuButtonAriaLabel,
+            importance: "clear",
+            size: "xs",
+            circle: "",
+            onClick: a[1] || (a[1] = E((_) => e.$emit("click-menu", _), ["stop"]))
+          }, {
+            icon: h(() => [
+              u(c, { size: "100" })
+            ]),
+            _: 1
+          }, 8, ["aria-label"])
+        ])
+      ]))
+    ], 2),
+    o("div", M, [
+      g(e.$slots, "timer")
+    ])
+  ], 16);
+}
+const ee = /* @__PURE__ */ O(N, [["render", F]]);
+export {
+  ee as default
+};
+//# sourceMappingURL=contact-centers-row.js.map

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

@@ -0,0 +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=\"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=\"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/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  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    },\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        '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      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(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","safeConcatStrings","extractVueListeners","returnFirstEl","removeClassStyleAttrs","addClassStyleAttrs","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_mergeProps","_ctx","$options","_createElementVNode","_normalizeClass","$props","_toHandlers","_cache","$event","_createVNode","_component_dt_icon_headphones","_normalizeStyle","$data","_component_dt_emoji_text_wrapper","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_3","_renderSlot","_createBlock","_component_dt_badge","_component_dt_button","_withModifiers","_component_dt_icon_chevron_down"],"mappings":"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"}

package/dist/vue3/lib/contact-centers-row/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./contact-centers-row.cjs");exports.DtRecipeContactCentersRow=e.default;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+import { default as o } from "./contact-centers-row.js";
+export {
+  o as DtRecipeContactCentersRow
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +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;
+//# sourceMappingURL=contact-info.cjs.map

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

@@ -0,0 +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_1","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createSlots","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_withCtx","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":"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"}

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

@@ -0,0 +1,224 @@
+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";
+const C = {
+  compatConfig: { MODE: 3 },
+  name: "DtRecipeContactInfo",
+  components: {
+    DtAvatar: h,
+    DtItemLayout: g
+  },
+  /* inheritAttrs: false is generally an option we want to set on library
+    components. This allows any attributes passed in that are not recognized
+    as props to be passed down to another element or component using v-bind:$attrs
+    more info: https://vuejs.org/v2/api/#inheritAttrs */
+  // inheritAttrs: false,
+  props: {
+    /**
+     * String to use for the item's role.
+     */
+    role: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Display avatar if `showAvatar` property is true.
+     */
+    showAvatar: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Optional avatar image url.
+     */
+    avatarSrc: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: null
+    },
+    /**
+     * Avatar's full name, used to extract initials
+     * to display in avatar if `avatarSrc` and `avatarIcon` are empty.
+     */
+    avatarFullName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The size of the avatar
+     * @values xs, sm, md, lg, xl
+     */
+    avatarSize: {
+      type: String,
+      default: "lg"
+    },
+    /**
+     * The aria-labelledby of the button containing avatars
+     */
+    avatarLabelledBy: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Avatar color to display if `avatarSrc` is empty.
+     */
+    avatarColor: {
+      type: String,
+      default: null
+    },
+    /**
+     * Determines whether to show the presence indicator for
+     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',
+     * or 'active'. By default, it's null and nothing is shown.
+     * @values null, busy, away, offline, active
+     */
+    presence: {
+      type: String,
+      default: null
+    },
+    /**
+     * Showing multiple avatars in contact info.
+     * The props of array items are: <br>
+     * `src` - avatar image url (optional) <br>
+     * `fullName` - full name, used to extract initials to display in avatar<br>
+     *  if `avatarSrc` and `avatarIcon` are empty<br>
+     * `seed` - determines uniqueness of avatar background <br>
+     * `text` - text that overlays the avatar (optional) <br>
+     * `icon` - icon that overlays the avatar (optional) <br>
+     * `halo` - halo highlight around the avatar. boolean true/false
+     */
+    avatarList: {
+      type: Array,
+      default: null
+    }
+  },
+  emits: ["avatar-click"],
+  methods: {
+    avatarClick() {
+      this.$emit("avatar-click");
+    }
+  }
+}, z = ["aria-labelledby"], L = {
+  key: 0,
+  class: "d-recipe-contact-info__avatars"
+}, q = {
+  class: "d-recipe-contact-info__header",
+  "data-qa": "contact-info-header"
+}, B = {
+  class: "d-recipe-contact-info__subtitle",
+  "data-qa": "contact-info-subtitle"
+}, D = {
+  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,
+    "data-qa": "contact-info",
+    class: "d-recipe-contact-info",
+    "content-class": "d-recipe-contact-info__content",
+    "right-class": "d-recipe-contact-info__right",
+    unstyled: ""
+  }, u({
+    default: o(() => [
+      l("div", q, [
+        c(a.$slots, "header")
+      ])
+    ]),
+    subtitle: o(() => [
+      l("div", B, [
+        c(a.$slots, "subtitle")
+      ])
+    ]),
+    _: 2
+  }, [
+    t.showAvatar ? {
+      name: "left",
+      fn: o(() => [
+        l("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))
+        }, [
+          t.avatarList ? (n(), _("span", L, [
+            (n(!0), _(p, null, S(t.avatarList, (e, f) => (n(), i(d, {
+              key: f,
+              size: t.avatarSize,
+              seed: e.seed,
+              "full-name": e.fullName,
+              "image-src": e.src,
+              "image-alt": "",
+              "overlay-text": e.text,
+              "avatar-class": [
+                {
+                  "d-recipe-contact-info__avatar-stacked": f > 0,
+                  "d-recipe-contact-info__avatar-halo": !!e.halo
+                }
+              ]
+            }, u({
+              icon: o(({ iconSize: y }) => [
+                c(a.$slots, "avatarIcon", { iconSize: y })
+              ]),
+              _: 2
+            }, [
+              e.icon ? {
+                name: "overlayIcon",
+                fn: o(() => [
+                  (n(), i(k(e.icon)))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["size", "seed", "full-name", "image-src", "overlay-text", "avatar-class"]))), 128))
+          ])) : (n(), i(d, {
+            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: o(({ iconSize: e }) => [
+              c(a.$slots, "avatarIcon", { iconSize: e })
+            ]),
+            _: 3
+          }, 8, ["size", "full-name", "image-src", "seed", "color", "presence"]))
+        ], 8, z)
+      ]),
+      key: "0"
+    } : void 0,
+    a.$slots.bottom ? {
+      name: "bottom",
+      fn: o(() => [
+        l("div", D, [
+          c(a.$slots, "bottom")
+        ])
+      ]),
+      key: "1"
+    } : void 0,
+    a.$slots.right ? {
+      name: "right",
+      fn: o(() => [
+        l("div", I, [
+          c(a.$slots, "right")
+        ])
+      ]),
+      key: "2"
+    } : void 0
+  ]), 1032, ["role"]);
+}
+const R = /* @__PURE__ */ b(C, [["render", A]]);
+export {
+  R as default
+};
+//# sourceMappingURL=contact-info.js.map

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

@@ -0,0 +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_1","_hoisted_6","_createBlock","_component_dt_item_layout","$props","_createSlots","_createElementVNode","_hoisted_3","_renderSlot","_ctx","_hoisted_4","_withCtx","$options","args","_openBlock","_createElementBlock","_hoisted_2","_Fragment","_renderList","avatar","index","_component_dt_avatar","iconSize","_resolveDynamicComponent","_hoisted_5"],"mappings":";;;;AA2HA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,cAAAC;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,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,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,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,kBAAkB;AAAA,MAChB,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;AAAA;AAAA,IAQD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CAAC,cAAc;AAAA,EAEtB,SAAS;AAAA,IACP,cAAe;AACb,WAAK,MAAM,cAAc;AAAA,IAC1B;AAAA,EACF;AACH,GAhPAC,IAAA,CAAA,iBAAA;EAAA,KAAA;AAAA,EAqBU,OAAM;;EAuDR,OAAM;AAAA,EACN,WAAQ;;EASR,OAAM;AAAA,EACN,WAAQ;;EAYR,OAAM;AAAA,EACN,WAAQ;GAWLC,IAAA,EAAA,WAAQ,qBAAoB;;;cA9GrCC,EAmHiBC,GAAA;AAAA,IAlHd,MAAMC,EAAI;AAAA,IACX,WAAQ;AAAA,IACR,OAAM;AAAA,IACN,iBAAc;AAAA,IACd,eAAY;AAAA,IACZ,UAAA;AAAA,EAPJ,GAAAC,EAAA;AAAA,IA0Ee,WACT,MAMM;AAAA,MANNC,EAMM,OANNC,GAMM;AAAA,QADJC,EAAsBC,EAAA,QAAA,QAAA;AAAA;;IAIf,YACT,MAMM;AAAA,MANNH,EAMM,OANNI,GAMM;AAAA,QADJF,EAAwBC,EAAA,QAAA,UAAA;AAAA;;IA1FhC,GAAA;AAAA;IAUYL,EAAU;MAVtB,MAWO;AAAA,MAXP,IAAAO,EAaM,MA2DS;AAAA,QA3DTL,EA2DS,UAAA;AAAA,UA1DP,OAAM;AAAA,UACN,WAAQ;AAAA,UACP,mBAAiBF,EAAgB;AAAA,UACjC,mCAAOQ,EAAW,eAAAA,EAAA,YAAA,GAAAC,CAAA;AAAA;UAGXT,EAAU,cADlBU,KAAAC,EAkCO,QAlCPC,GAkCO;AAAA,aA9BLF,EAAA,EAAA,GAAAC,EA6BYE,SApDtBC,EAwBsCd,EAAA,YAxBtC,CAwBoBe,GAAQC,YADlBlB,EA6BYmB,GAAA;AAAA,cA3BT,KAAKD;AAAA,cACL,MAAMhB,EAAU;AAAA,cAChB,MAAMe,EAAO;AAAA,cACb,aAAWA,EAAO;AAAA,cAClB,aAAWA,EAAO;AAAA,cACnB,aAAU;AAAA,cACT,gBAAcA,EAAO;AAAA,cACrB,gBAAY;AAAA;2DAA6EC,IAAK;AAAA,kBAA8D,sCAAA,CAAA,CAAAD,EAAO;AAAA;;YAhChL,GAAAd,EAAA;AAAA,cAuCuB,MAAIM,EAEb,CAGE,EALe,UAAAW,QAAQ;AAAA,gBAEzBd,EAGEC,EAAA,QAAA,cAAA,EADC,UAAWa,GAAQ;AAAA;cA3CpC,GAAA;AAAA;cA+CoBH,EAAO;gBA/C3B,MAgDe;AAAA,gBAhDf,IAAAR,EAkDc,MAA+B;AAAA,mBAA/BG,EAAA,GAAAZ,EAA+BqB,EAAfJ,EAAO,IAAI,CAAA;AAAA;gBAlDzC,KAAA;AAAA,kBAAA;AAAA;sBAsDQjB,EAiBYmB,GAAA;AAAA,YAvEpB,KAAA;AAAA,YAwDW,MAAMjB,EAAU;AAAA,YAChB,aAAWA,EAAc;AAAA,YACzB,aAAWA,EAAS;AAAA,YACrB,aAAU;AAAA,YACT,MAAMA,EAAU;AAAA,YAChB,OAAOA,EAAW;AAAA,YAClB,UAAUA,EAAQ;AAAA;YAER,MAAIO,EAEb,CAGE,EALe,UAAAW,QAAQ;AAAA,cAEzBd,EAGEC,EAAA,QAAA,cAAA,EADC,UAAWa,GAAQ;AAAA;YApElC,GAAA;AAAA;QAAA,GAAA,GAAAtB,CAAA;AAAA;MAAA,KAAA;AAAA,QAAA;AAAA,IA+FYS,EAAA,OAAO;MA/FnB,MAgGO;AAAA,MAhGP,IAAAE,EAkGM,MAMM;AAAA,QANNL,EAMM,OANNkB,GAMM;AAAA,UADJhB,EAAsBC,EAAA,QAAA,QAAA;AAAA;;MAvG9B,KAAA;AAAA,QAAA;AAAA,IA4GYA,EAAA,OAAO;MA5GnB,MA6GO;AAAA,MA7GP,IAAAE,EA+GM,MAGM;AAAA,QAHNL,EAGM,OAHNL,GAGM;AAAA,UADJO,EAAqBC,EAAA,QAAA,OAAA;AAAA;;MAjH7B,KAAA;AAAA,QAAA;AAAA;;;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./contact-info.cjs");exports.DtRecipeContactInfo=t.default;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+import { default as o } from "./contact-info.js";
+export {
+  o as DtRecipeContactInfo
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={};exports.default=e;
+//# sourceMappingURL=contact-row-constants.cjs.map

package/dist/vue3/lib/contact-row/contact-row-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-row-constants.cjs","sources":["../../../recipes/leftbar/contact_row/contact_row_constants.js"],"sourcesContent":["export default {\n};\n"],"names":["contact_row_constants"],"mappings":"4GAAA,MAAeA,EAAA,CACf"}

package/dist/vue3/lib/contact-row/contact-row-constants.js

@@ -0,0 +1,5 @@
+const t = {};
+export {
+  t as default
+};
+//# sourceMappingURL=contact-row-constants.js.map

package/dist/vue3/lib/contact-row/contact-row-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contact-row-constants.js","sources":["../../../recipes/leftbar/contact_row/contact_row_constants.js"],"sourcesContent":["export default {\n};\n"],"names":["contact_row_constants"],"mappings":"AAAA,MAAeA,IAAA,CACf;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../emoji-text-wrapper/emoji-text-wrapper.cjs"),p=require("../avatar/avatar.cjs"),l=require("../../common/utils/index.cjs"),m=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),_=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),f=require("../general-row/general-row.cjs"),y={compatConfig:{MODE:3},name:"DtRecipeContactRow",components:{DtAvatar:p.default,DtRecipeGeneralRow:f.default,DtEmojiTextWrapper:d.default,DtIconUser:m.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},callButtonTooltip:{type:String,default:""},unreadCountTooltip:{type:String,default:""}},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 l.extractVueListeners(this.$attrs)},contactDescription(){return l.safeConcatStrings([this.name,this.presenceText,this.userStatus])}}},g={class:"d-recipe-leftbar-row__status"};function C(a,r,t,v,S,n){const c=e.resolveComponent("dt-icon-user"),s=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:n.contactDescription,"has-unreads":t.hasUnreads,selected:t.selected,"has-call-button":t.hasCallButton,muted:t.muted,"is-typing":t.isTyping,"call-button-tooltip":t.callButtonTooltip,"unread-count-tooltip":t.unreadCountTooltip},a.$attrs,{"data-qa":"contact-row"},e.toHandlers(n.contactRowListeners),{onCall:r[0]||(r[0]=u=>a.$emit("call",u))}),{left:e.withCtx(()=>[e.createVNode(s,{"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",g,[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",n.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","call-button-tooltip","unread-count-tooltip"])}const w=_._(y,[["render",C]]);exports.default=w;
+//# sourceMappingURL=contact-row.cjs.map