@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/general-row.js

@@ -1,24 +1,25 @@
-import { DtEmojiTextWrapper as I } from "./emoji-text-wrapper.js";
-import { resolveComponent as d, openBlock as n, createBlock as y, createElementBlock as c, normalizeClass as w, createVNode as l, createCommentVNode as b, createElementVNode as u, mergeProps as v, toHandlers as k, renderSlot as N, normalizeStyle as B, withCtx as _, createTextVNode as A, toDisplayString as T, withModifiers as D, pushScopeId as G, popScopeId as W } from "vue";
-import { _ as R } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtIcon as S } from "./icon.js";
-import { extractVueListeners as x, safeConcatStrings as z } from "./utils.js";
-import { DtBadge as q } from "./badge.js";
-import { DtButton as j } from "./button.js";
-import { DtTooltip as H } from "./tooltip.js";
-import "../chunks/index-mRmwpCBG.js";
+import { DtEmojiTextWrapper as _sfc_main$2 } from "./emoji-text-wrapper.js";
+import { resolveComponent, openBlock, createBlock, createElementBlock, normalizeClass, createVNode, createCommentVNode, createElementVNode, mergeProps, toHandlers, renderSlot, normalizeStyle, withCtx, createTextVNode, toDisplayString, withModifiers, pushScopeId, popScopeId } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtIcon } from "./icon.js";
+import { extractVueListeners, safeConcatStrings } from "../common/utils.js";
+import { DtBadge } from "./badge.js";
+import { DtButton } from "./button.js";
+import { DtTooltip } from "./tooltip.js";
+import "../common/emoji.js";
 import "emoji-regex";
 import "@dialpad/dialtone-emojis";
-import "./skeleton.js";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
+import "./emoji.js";
+import "./skeleton.js";
 import "@dialpad/dialtone-icons/vue3";
-import "./constants.js";
-import "../chunks/link_constants-vIUB92L4.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import "../common/constants.js";
+import "../chunks/link_constants-nWVlXQBs.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
 import "./lazy-show.js";
-const t = {
+const LEFTBAR_GENERAL_ROW_TYPES = {
   INBOX: "inbox",
   CONTACTS: "contacts",
   CHANNELS: "channels",
@@ -32,21 +33,23 @@ const t = {
   DIALBOT: "dialbot",
   ASSIGNED: "assigned",
   DIGITAL: "digital"
-}, U = {
-  [t.INBOX]: "inbox",
-  [t.CONTACTS]: "contacts",
-  [t.CHANNELS]: "hash",
-  [t.HOME]: "home",
-  [t.THREADS]: "thread",
-  [t.LOCKED_CHANNEL]: "lock",
-  [t.QUICK_START]: "sparkle",
-  [t.COACHING_GROUP]: "users",
-  [t.COACHING_CENTER]: "external-link",
+};
+const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {
+  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: "inbox",
+  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: "contacts",
+  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: "hash",
+  [LEFTBAR_GENERAL_ROW_TYPES.HOME]: "home",
+  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: "thread",
+  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: "lock",
+  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: "sparkle",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: "users",
+  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: "external-link",
   "locked channel unread": "lock-filled",
   "channel unread": "hash-bold",
-  [t.ASSIGNED]: "at-sign",
-  [t.DIGITAL]: "laptop-2"
-}, m = {
+  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: "at-sign",
+  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: "laptop-2"
+};
+const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {
   "magenta-200": "d-bgc-magenta-200",
   "green-200": "d-bgc-green-200",
   "gold-300": "d-bgc-gold-300",
@@ -58,12 +61,15 @@ const t = {
   "magenta-400": "d-bgc-magenta-400",
   "magenta-100": "d-bgc-magenta-100",
   "black-300": "d-bgc-black-300"
-}, F = "If type is contact center, color must be oneof the following:" + Object.keys(m).join(", "), V = [
+};
+const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = "If type is contact center, color must be oneof the following:" + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(", ");
+const LEFTBAR_GENERAL_ROW_ICON_SIZES = [
   "300",
   "200"
-], P = {
+];
+const _sfc_main$1 = {
   name: "DtRecipeLeftbarGeneralRowIcon",
-  components: { DtIcon: S },
+  components: { DtIcon },
   props: {
     type: {
       type: String,
@@ -80,21 +86,21 @@ const t = {
   },
   computed: {
     isIconType() {
-      return ![t.DIALBOT, t.CONTACT_CENTER].includes(this.type);
+      return ![LEFTBAR_GENERAL_ROW_TYPES.DIALBOT, LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER].includes(this.type);
     },
     isContactCenterType() {
-      return this.type === t.CONTACT_CENTER;
+      return this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER;
     },
     isDialbotType() {
-      return this.type === t.DIALBOT;
+      return this.type === LEFTBAR_GENERAL_ROW_TYPES.DIALBOT;
     },
     getIconName() {
-      return U[this.type];
+      return LEFTBAR_GENERAL_ROW_ICON_MAPPING[this.type];
     },
     contactCenterIconClasses() {
       return [
         "dt-leftbar-row__icon-cc",
-        m[this.color]
+        LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS[this.color]
       ];
     },
     dialbotClasses() {
@@ -106,37 +112,38 @@ const t = {
     }
   }
 };
-function K(e, r, a, C, i, o) {
-  const s = d("dt-icon");
-  return o.isIconType ? (n(), y(s, {
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
+  return $options.isIconType ? (openBlock(), createBlock(_component_dt_icon, {
     key: 0,
-    name: o.getIconName,
-    size: a.iconSize
-  }, null, 8, ["name", "size"])) : o.isContactCenterType ? (n(), c("div", {
+    name: $options.getIconName,
+    size: $props.iconSize
+  }, null, 8, ["name", "size"])) : $options.isContactCenterType ? (openBlock(), createElementBlock("div", {
     key: 1,
-    class: w(o.contactCenterIconClasses)
-  }, null, 2)) : o.isDialbotType ? (n(), c("div", {
+    class: normalizeClass($options.contactCenterIconClasses)
+  }, null, 2)) : $options.isDialbotType ? (openBlock(), createElementBlock("div", {
     key: 2,
-    class: w(o.dialbotClasses),
+    class: normalizeClass($options.dialbotClasses),
     "data-qa": "general-row-dialbot"
   }, [
-    l(s, {
+    createVNode(_component_dt_icon, {
       name: "dialbot",
       size: "500"
     })
-  ], 2)) : b("", !0);
+  ], 2)) : createCommentVNode("", true);
 }
-const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
+const DtRecipeLeftbarGeneralRowIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
   name: "DtRecipeGeneralRow",
   components: {
-    DtEmojiTextWrapper: I,
-    DtBadge: q,
-    DtIcon: S,
-    DtButton: j,
-    DtTooltip: H,
-    DtRecipeLeftbarGeneralRowIcon: M
+    DtEmojiTextWrapper: _sfc_main$2,
+    DtBadge,
+    DtIcon,
+    DtButton,
+    DtTooltip,
+    DtRecipeLeftbarGeneralRowIcon
   },
-  inheritAttrs: !1,
+  inheritAttrs: false,
   props: {
     /**
      * Determines the icon to show.
@@ -145,7 +152,9 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
     type: {
       type: String,
       default: "inbox",
-      validator: (e) => Object.values(t).includes(e)
+      validator: (type) => {
+        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);
+      }
     },
     /**
      * Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
@@ -160,7 +169,7 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
      */
     description: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Determines the color of the contact center icon
@@ -168,7 +177,9 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
     color: {
       type: String,
       default: null,
-      validator: (e) => Object.keys(m).includes(e)
+      validator: (color) => {
+        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);
+      }
     },
     /**
      * Styles the row with an increased font weight to convey it has unreads. This must be true to see
@@ -176,7 +187,7 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
      */
     hasUnreads: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Number of unread messages
@@ -197,21 +208,21 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
      */
     selected: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Gives a faded style to be used when muted
      */
     muted: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Shows styling to represent an active voice chat. This will display over unreadCount.
      */
     activeVoiceChat: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Acronym used to represent "Do not Disturb" state. If entered will display the entered text alongside
@@ -233,7 +244,7 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
      */
     hasCallButton: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Text shown when the call button is hovered.
@@ -247,7 +258,7 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
      */
     isTyping: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Sets the size of the icon.
@@ -255,7 +266,9 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
     iconSize: {
       type: String,
       default: "300",
-      validator: (e) => V.includes(e)
+      validator: (size) => {
+        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);
+      }
     }
   },
   emits: [
@@ -269,7 +282,7 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
   ],
   data() {
     return {
-      actionFocused: !1,
+      actionFocused: false,
       labelWidth: "100%"
     };
   },
@@ -289,11 +302,11 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
     },
     getIcon() {
       switch (this.type) {
-        case t.CHANNELS:
+        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:
           if (this.hasUnreads)
             return "channel unread";
           break;
-        case t.LOCKED_CHANNEL:
+        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:
           if (this.hasUnreads)
             return "locked channel unread";
           break;
@@ -301,10 +314,10 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
       return this.type;
     },
     generalRowListeners() {
-      return x(this.$attrs);
+      return extractVueListeners(this.$attrs);
     },
     getAriaLabel() {
-      return this.ariaLabel ? this.ariaLabel : z([this.description, this.unreadCountTooltip, this.dndTextTooltip]);
+      return this.ariaLabel ? this.ariaLabel : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);
     },
     hasActions() {
       return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;
@@ -315,147 +328,172 @@ const M = /* @__PURE__ */ R(P, [["render", K]]), Q = {
   },
   watch: {
     $props: {
-      immediate: !0,
-      deep: !0,
+      immediate: true,
+      deep: true,
       async handler() {
-        this.validateProps(), await this.$nextTick(), this.adjustLabelWidth();
+        this.validateProps();
+        await this.$nextTick();
+        this.adjustLabelWidth();
       }
     }
   },
   mounted() {
-    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(this.$el), this.adjustLabelWidth();
+    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);
+    this.resizeObserver.observe(this.$el);
+    this.adjustLabelWidth();
   },
   beforeUnmount: function() {
     this.resizeObserver.disconnect();
   },
   methods: {
     validateProps() {
-      this.type === t.CONTACT_CENTER && !Object.keys(m).includes(this.color) && console.error(F);
+      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER && !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {
+        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);
+      }
     },
     adjustLabelWidth() {
-      var i, o, s, f, p, h;
-      const e = ((o = (i = this.$el) == null ? void 0 : i.querySelector(".dt-leftbar-row__primary")) == null ? void 0 : o.clientWidth) || 0, r = ((f = (s = this.$el) == null ? void 0 : s.querySelector(".dt-leftbar-row__omega")) == null ? void 0 : f.clientWidth) || 0, a = ((h = (p = this.$el) == null ? void 0 : p.querySelector(".dt-leftbar-row__alpha")) == null ? void 0 : h.clientWidth) || 0, C = 16;
-      this.labelWidth = e - (r + a + C) + "px";
+      var _a, _b, _c, _d, _e, _f;
+      const labelWidth = ((_b = (_a = this.$el) == null ? void 0 : _a.querySelector(".dt-leftbar-row__primary")) == null ? void 0 : _b.clientWidth) || 0;
+      const omegaWidth = ((_d = (_c = this.$el) == null ? void 0 : _c.querySelector(".dt-leftbar-row__omega")) == null ? void 0 : _d.clientWidth) || 0;
+      const alphaWidth = ((_f = (_e = this.$el) == null ? void 0 : _e.querySelector(".dt-leftbar-row__alpha")) == null ? void 0 : _f.clientWidth) || 0;
+      const paddings = 16;
+      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + "px";
     }
   }
-}, E = (e) => (G("data-v-49d75ce6"), e = e(), W(), e), X = ["data-qa", "aria-label", "title", "href"], Y = { class: "dt-leftbar-row__alpha" }, Z = {
+};
+const _withScopeId = (n) => (pushScopeId("data-v-49d75ce6"), n = n(), popScopeId(), n);
+const _hoisted_1 = ["data-qa", "aria-label", "title", "href"];
+const _hoisted_2 = { class: "dt-leftbar-row__alpha" };
+const _hoisted_3 = {
   key: 0,
   class: "dt-leftbar-row__is-typing"
-}, J = /* @__PURE__ */ E(() => /* @__PURE__ */ u("span", null, null, -1)), $ = /* @__PURE__ */ E(() => /* @__PURE__ */ u("span", null, null, -1)), ee = /* @__PURE__ */ E(() => /* @__PURE__ */ u("span", null, null, -1)), te = [
-  J,
-  $,
-  ee
-], ae = {
+};
+const _hoisted_4 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, null, -1));
+const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, null, -1));
+const _hoisted_6 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("span", null, null, -1));
+const _hoisted_7 = [
+  _hoisted_4,
+  _hoisted_5,
+  _hoisted_6
+];
+const _hoisted_8 = {
   key: 0,
   class: "dt-leftbar-row__omega"
-}, oe = {
+};
+const _hoisted_9 = {
   key: 1,
   class: "dt-leftbar-row__active-voice"
-}, ne = {
+};
+const _hoisted_10 = {
   key: 3,
   class: "dt-leftbar-row__action",
   "data-qa": "dt-leftbar-row-action"
 };
-function re(e, r, a, C, i, o) {
-  const s = d("dt-recipe-leftbar-general-row-icon"), f = d("dt-emoji-text-wrapper"), p = d("dt-tooltip"), h = d("dt-icon"), O = d("dt-badge"), L = d("dt-button");
-  return n(), c("div", {
-    class: w(o.leftbarGeneralRowClasses),
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_recipe_leftbar_general_row_icon = resolveComponent("dt-recipe-leftbar-general-row-icon");
+  const _component_dt_emoji_text_wrapper = resolveComponent("dt-emoji-text-wrapper");
+  const _component_dt_tooltip = resolveComponent("dt-tooltip");
+  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_badge = resolveComponent("dt-badge");
+  const _component_dt_button = resolveComponent("dt-button");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass($options.leftbarGeneralRowClasses),
     "data-qa": "dt-leftbar-row"
   }, [
-    u("a", v({
+    createElementVNode("a", mergeProps({
       class: "dt-leftbar-row__primary",
-      "data-qa": "data-qa" in e.$attrs ? e.$attrs["data-qa"] : "dt-leftbar-row-link",
-      "aria-label": o.getAriaLabel,
-      title: a.description,
-      href: "href" in e.$attrs ? e.$attrs.href : "javascript:void(0)"
-    }, e.$attrs, k(o.generalRowListeners, !0)), [
-      u("div", Y, [
-        a.isTyping ? (n(), c("div", Z, te)) : N(e.$slots, "left", { key: 1 }, () => [
-          l(s, {
-            type: o.getIcon,
-            color: a.color,
-            "icon-size": a.iconSize,
+      "data-qa": "data-qa" in _ctx.$attrs ? _ctx.$attrs["data-qa"] : "dt-leftbar-row-link",
+      "aria-label": $options.getAriaLabel,
+      title: $props.description,
+      href: "href" in _ctx.$attrs ? _ctx.$attrs.href : "javascript:void(0)"
+    }, _ctx.$attrs, toHandlers($options.generalRowListeners, true)), [
+      createElementVNode("div", _hoisted_2, [
+        $props.isTyping ? (openBlock(), createElementBlock("div", _hoisted_3, _hoisted_7)) : renderSlot(_ctx.$slots, "left", { key: 1 }, () => [
+          createVNode(_component_dt_recipe_leftbar_general_row_icon, {
+            type: $options.getIcon,
+            color: $props.color,
+            "icon-size": $props.iconSize,
             "data-qa": "dt-leftbar-row-icon"
           }, null, 8, ["type", "color", "icon-size"])
-        ], !0)
+        ], true)
       ]),
-      u("div", {
+      createElementVNode("div", {
         class: "dt-leftbar-row__label",
-        style: B(`flex-basis: ${i.labelWidth}`)
+        style: normalizeStyle(`flex-basis: ${$data.labelWidth}`)
       }, [
-        N(e.$slots, "label", {}, () => [
-          l(f, {
+        renderSlot(_ctx.$slots, "label", {}, () => [
+          createVNode(_component_dt_emoji_text_wrapper, {
             class: "dt-leftbar-row__description",
             "data-qa": "dt-leftbar-row-description",
             size: "200"
           }, {
-            default: _(() => [
-              A(T(a.description), 1)
+            default: withCtx(() => [
+              createTextVNode(toDisplayString($props.description), 1)
             ]),
             _: 1
           })
-        ], !0)
+        ], true)
       ], 4)
-    ], 16, X),
-    o.hasActions ? (n(), c("div", ae, [
-      a.dndText ? (n(), y(p, {
+    ], 16, _hoisted_1),
+    $options.hasActions ? (openBlock(), createElementBlock("div", _hoisted_8, [
+      $props.dndText ? (openBlock(), createBlock(_component_dt_tooltip, {
         key: 0,
         placement: "top",
-        message: a.dndTextTooltip
+        message: $props.dndTextTooltip
       }, {
-        anchor: _(() => [
-          u("div", {
+        anchor: withCtx(() => [
+          createElementVNode("div", {
             ref: "dt-leftbar-row-dnd",
             class: "dt-leftbar-row__dnd",
             "data-qa": "dt-leftbar-row-dnd"
-          }, T(a.dndText), 513)
+          }, toDisplayString($props.dndText), 513)
         ]),
         _: 1
-      }, 8, ["message"])) : b("", !0),
-      a.activeVoiceChat ? (n(), c("div", oe, [
-        l(h, {
+      }, 8, ["message"])) : createCommentVNode("", true),
+      $props.activeVoiceChat ? (openBlock(), createElementBlock("div", _hoisted_9, [
+        createVNode(_component_dt_icon, {
           size: "300",
           name: "waveform"
         })
-      ])) : o.showUnreadCount ? (n(), y(p, {
+      ])) : $options.showUnreadCount ? (openBlock(), createBlock(_component_dt_tooltip, {
         key: 2,
-        message: a.unreadCountTooltip,
+        message: $props.unreadCountTooltip,
         placement: "top"
       }, {
-        anchor: _(() => [
-          l(O, {
+        anchor: withCtx(() => [
+          createVNode(_component_dt_badge, {
             kind: "count",
             type: "bulletin",
             "data-qa": "dt-leftbar-row-unread-badge",
             class: "dt-leftbar-row__unread-badge"
           }, {
-            default: _(() => [
-              A(T(a.unreadCount), 1)
+            default: withCtx(() => [
+              createTextVNode(toDisplayString($props.unreadCount), 1)
             ]),
             _: 1
           })
         ]),
         _: 1
-      }, 8, ["message"])) : b("", !0),
-      a.hasCallButton ? (n(), c("div", ne, [
-        l(p, {
-          message: a.callButtonTooltip,
+      }, 8, ["message"])) : createCommentVNode("", true),
+      $props.hasCallButton ? (openBlock(), createElementBlock("div", _hoisted_10, [
+        createVNode(_component_dt_tooltip, {
+          message: $props.callButtonTooltip,
           placement: "top"
         }, {
-          anchor: _(() => [
-            l(L, {
+          anchor: withCtx(() => [
+            createVNode(_component_dt_button, {
               class: "dt-leftbar-row__action-button",
               "data-qa": "dt-leftbar-row-action-call-button",
-              circle: !0,
+              circle: true,
               size: "xs",
               kind: "inverted",
-              "aria-label": a.callButtonTooltip,
-              onFocus: r[0] || (r[0] = (g) => i.actionFocused = !0),
-              onBlur: r[1] || (r[1] = (g) => i.actionFocused = !1),
-              onClick: r[2] || (r[2] = D((g) => e.$emit("call", g), ["stop"]))
+              "aria-label": $props.callButtonTooltip,
+              onFocus: _cache[0] || (_cache[0] = ($event) => $data.actionFocused = true),
+              onBlur: _cache[1] || (_cache[1] = ($event) => $data.actionFocused = false),
+              onClick: _cache[2] || (_cache[2] = withModifiers(($event) => _ctx.$emit("call", $event), ["stop"]))
             }, {
-              icon: _(() => [
-                l(h, {
+              icon: withCtx(() => [
+                createVNode(_component_dt_icon, {
                   name: "phone",
                   size: "200"
                 })
@@ -465,17 +503,17 @@ function re(e, r, a, C, i, o) {
           ]),
           _: 1
         }, 8, ["message"])
-      ])) : b("", !0)
-    ])) : b("", !0)
+      ])) : createCommentVNode("", true)
+    ])) : createCommentVNode("", true)
   ], 2);
 }
-const Re = /* @__PURE__ */ R(Q, [["render", re], ["__scopeId", "data-v-49d75ce6"]]);
+const DtRecipeGeneralRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-49d75ce6"]]);
 export {
-  Re as DtRecipeGeneralRow,
-  m as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
-  F as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
-  U as LEFTBAR_GENERAL_ROW_ICON_MAPPING,
-  V as LEFTBAR_GENERAL_ROW_ICON_SIZES,
-  t as LEFTBAR_GENERAL_ROW_TYPES
+  DtRecipeGeneralRow,
+  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
+  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
+  LEFTBAR_GENERAL_ROW_ICON_MAPPING,
+  LEFTBAR_GENERAL_ROW_ICON_SIZES,
+  LEFTBAR_GENERAL_ROW_TYPES
 };
 //# sourceMappingURL=general-row.js.map