@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/callbar-button.cjs

@@ -7,15 +7,12 @@ const lib_button = require("./button.cjs");
 const lib_tooltip = require("./tooltip.cjs");
 require("../common/constants.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("../chunks/popover_constants-h9MD6WUt.js");
+require("../chunks/popover_constants-XnGWXaxX.js");
 require("tippy.js");
 const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ["sm", "md", "lg", "xl"];
 const _sfc_main = {
   name: "DtRecipeCallbarButton",
-  components: {
-    DtButton: lib_button.DtButton,
-    DtTooltip: lib_tooltip.DtTooltip
-  },
+  components: { DtButton: lib_button.DtButton, DtTooltip: lib_tooltip.DtTooltip },
   inheritAttrs: false,
   props: {
     /**
@@ -117,16 +114,24 @@ const _sfc_main = {
   ],
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, "dt-recipe-callbar-button", "d-px0", {
-        "dt-recipe-callbar-button--circle": this.circle,
-        "dt-recipe-callbar-button--active": this.active,
-        "dt-recipe-callbar-button--danger": this.danger,
-        "d-btn--disabled d-bgc-transparent": this.disabled,
-        "d-fc-primary": !this.disabled
-      }];
+      return [
+        this.buttonClass,
+        "dt-recipe-callbar-button",
+        "d-px0",
+        {
+          "dt-recipe-callbar-button--circle": this.circle,
+          "dt-recipe-callbar-button--active": this.active,
+          "dt-recipe-callbar-button--danger": this.danger,
+          "d-btn--disabled d-bgc-transparent": this.disabled,
+          "d-fc-primary": !this.disabled
+        }
+      ];
     },
     callbarButtonTextClass() {
-      return ["d-fs-100 lg:d-d-none md:d-d-none sm:d-d-none", this.textClass];
+      return [
+        "d-fs-100 lg:d-d-none md:d-d-none sm:d-d-none",
+        this.textClass
+      ];
     },
     buttonWidth() {
       switch (this.buttonWidthSize) {
@@ -159,25 +164,33 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     id: $props.id,
     offset: [0, 24]
   }, {
-    anchor: vue.withCtx(() => [vue.createElementVNode("span", {
-      class: vue.normalizeClass({
-        "dt-recipe-callbar-button--disabled": $props.disabled
-      })
-    }, [vue.createVNode(_component_dt_button, vue.mergeProps({
-      importance: $options.buttonImportance,
-      kind: "muted",
-      "icon-position": "top",
-      "aria-disabled": $props.disabled,
-      "aria-label": $props.ariaLabel,
-      "label-class": $options.callbarButtonTextClass,
-      width: $options.buttonWidth,
-      class: $options.callbarButtonClass
-    }, _ctx.$attrs, vue.toHandlers($options.callbarButtonListeners)), {
-      icon: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "icon")]),
-      default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
-      _: 3
-    }, 16, ["importance", "aria-disabled", "aria-label", "label-class", "width", "class"])], 2)]),
-    default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "tooltip")]),
+    anchor: vue.withCtx(() => [
+      vue.createElementVNode("span", {
+        class: vue.normalizeClass({ "dt-recipe-callbar-button--disabled": $props.disabled })
+      }, [
+        vue.createVNode(_component_dt_button, vue.mergeProps({
+          importance: $options.buttonImportance,
+          kind: "muted",
+          "icon-position": "top",
+          "aria-disabled": $props.disabled,
+          "aria-label": $props.ariaLabel,
+          "label-class": $options.callbarButtonTextClass,
+          width: $options.buttonWidth,
+          class: $options.callbarButtonClass
+        }, _ctx.$attrs, vue.toHandlers($options.callbarButtonListeners)), {
+          icon: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "icon")
+          ]),
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["importance", "aria-disabled", "aria-label", "label-class", "width", "class"])
+      ], 2)
+    ]),
+    default: vue.withCtx(() => [
+      vue.renderSlot(_ctx.$slots, "tooltip")
+    ]),
     _: 3
   }, 8, ["id"]);
 }

package/dist/vue3/lib/callbar-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callbar-button.cjs","sources":["../../recipes/buttons/callbar_button/callbar_button_constants.js","../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["export const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];\n\nexport default {\n  CALLBAR_BUTTON_VALID_WIDTH_SIZE,\n};\n","<template>\n  <dt-tooltip\n    :id=\"id\"\n    :offset=\"[0, 24]\"\n  >\n    <template #anchor>\n      <span\n        :class=\"{ 'dt-recipe-callbar-button--disabled': disabled }\"\n      >\n        <dt-button\n          :importance=\"buttonImportance\"\n          kind=\"muted\"\n          icon-position=\"top\"\n          :aria-disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :label-class=\"callbarButtonTextClass\"\n          :width=\"buttonWidth\"\n          :class=\"callbarButtonClass\"\n          v-bind=\"$attrs\"\n          v-on=\"callbarButtonListeners\"\n        >\n          <slot />\n          <template #icon>\n            <slot name=\"icon\" />\n          </template>\n        </dt-button>\n      </span>\n    </template>\n    <slot name=\"tooltip\" />\n  </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils, { extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButton',\n\n  components: { DtButton, DtTooltip },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: '',\n    },\n\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    callbarButtonClass () {\n      return [\n        this.buttonClass,\n        'dt-recipe-callbar-button',\n        'd-px0',\n        {\n          'dt-recipe-callbar-button--circle': this.circle,\n          'dt-recipe-callbar-button--active': this.active,\n          'dt-recipe-callbar-button--danger': this.danger,\n          'd-btn--disabled d-bgc-transparent': this.disabled,\n          'd-fc-primary': !this.disabled,\n        }];\n    },\n\n    callbarButtonTextClass () {\n      return [\n        'd-fs-100 lg:d-d-none md:d-d-none sm:d-d-none',\n        this.textClass,\n      ];\n    },\n\n    buttonWidth () {\n      switch (this.buttonWidthSize) {\n        case 'sm':\n          return '4.5rem';\n        case 'md':\n          return '6rem';\n        default:\n          return '8.4rem';\n      }\n    },\n\n    buttonImportance () {\n      if (this.importance) {\n        return this.importance;\n      }\n      return this.circle ? 'outlined' : 'clear';\n    },\n\n    callbarButtonListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        click: (event) => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {\n  line-height: var(--dt-font-line-height-300);\n}\n\n.dt-recipe-callbar-button--circle {\n  border-radius: var(--dt-size-radius-circle);\n}\n\n.dt-recipe-callbar-button.d-btn[disabled] {\n  background-color: unset;\n  opacity: .5;\n}\n\n.dt-recipe-callbar-button--circle.d-btn[disabled] {\n  border-color: unset;\n}\n\n.dt-recipe-callbar-button--active,\n.dt-recipe-callbar-button--active:hover {\n  .base-button__icon {\n    color: var(--primary-color);\n  }\n}\n\n.dt-recipe-callbar-button--disabled {\n  cursor: not-allowed;\n}\n</style>\n"],"names":["CALLBAR_BUTTON_VALID_WIDTH_SIZE","_sfc_main","name","components","DtButton","DtTooltip","inheritAttrs","props","id","type","String","default","utils","getUniqueString","active","Boolean","danger","disabled","circle","ariaLabel","validator","label","this","$slots","buttonClass","Array","Object","textClass","buttonWidthSize","size","includes","importance","emits","computed","callbarButtonClass","callbarButtonTextClass","buttonWidth","buttonImportance","callbarButtonListeners","extractVueListeners","$attrs","click","event","$emit","_createBlock","_component_dt_tooltip","$props","offset","anchor","_createElementVNode","class","_createVNode","_component_dt_button","_mergeProps","$options","kind","width","_ctx","_toHandlers","icon","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"callbar-button.cjs","sources":["../../recipes/buttons/callbar_button/callbar_button_constants.js","../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["export const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];\n\nexport default {\n  CALLBAR_BUTTON_VALID_WIDTH_SIZE,\n};\n","<template>\n  <dt-tooltip\n    :id=\"id\"\n    :offset=\"[0, 24]\"\n  >\n    <template #anchor>\n      <span\n        :class=\"{ 'dt-recipe-callbar-button--disabled': disabled }\"\n      >\n        <dt-button\n          :importance=\"buttonImportance\"\n          kind=\"muted\"\n          icon-position=\"top\"\n          :aria-disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :label-class=\"callbarButtonTextClass\"\n          :width=\"buttonWidth\"\n          :class=\"callbarButtonClass\"\n          v-bind=\"$attrs\"\n          v-on=\"callbarButtonListeners\"\n        >\n          <slot />\n          <template #icon>\n            <slot name=\"icon\" />\n          </template>\n        </dt-button>\n      </span>\n    </template>\n    <slot name=\"tooltip\" />\n  </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils, { extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButton',\n\n  components: { DtButton, DtTooltip },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: '',\n    },\n\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    callbarButtonClass () {\n      return [\n        this.buttonClass,\n        'dt-recipe-callbar-button',\n        'd-px0',\n        {\n          'dt-recipe-callbar-button--circle': this.circle,\n          'dt-recipe-callbar-button--active': this.active,\n          'dt-recipe-callbar-button--danger': this.danger,\n          'd-btn--disabled d-bgc-transparent': this.disabled,\n          'd-fc-primary': !this.disabled,\n        }];\n    },\n\n    callbarButtonTextClass () {\n      return [\n        'd-fs-100 lg:d-d-none md:d-d-none sm:d-d-none',\n        this.textClass,\n      ];\n    },\n\n    buttonWidth () {\n      switch (this.buttonWidthSize) {\n        case 'sm':\n          return '4.5rem';\n        case 'md':\n          return '6rem';\n        default:\n          return '8.4rem';\n      }\n    },\n\n    buttonImportance () {\n      if (this.importance) {\n        return this.importance;\n      }\n      return this.circle ? 'outlined' : 'clear';\n    },\n\n    callbarButtonListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        click: (event) => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {\n  line-height: var(--dt-font-line-height-300);\n}\n\n.dt-recipe-callbar-button--circle {\n  border-radius: var(--dt-size-radius-circle);\n}\n\n.dt-recipe-callbar-button.d-btn[disabled] {\n  background-color: unset;\n  opacity: .5;\n}\n\n.dt-recipe-callbar-button--circle.d-btn[disabled] {\n  border-color: unset;\n}\n\n.dt-recipe-callbar-button--active,\n.dt-recipe-callbar-button--active:hover {\n  .base-button__icon {\n    color: var(--primary-color);\n  }\n}\n\n.dt-recipe-callbar-button--disabled {\n  cursor: not-allowed;\n}\n</style>\n"],"names":["DtButton","DtTooltip","utils","this","extractVueListeners","_createBlock","_createElementVNode","_createVNode","_mergeProps","_toHandlers","_renderSlot"],"mappings":"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"}

package/dist/vue3/lib/callbar-button.js

@@ -5,15 +5,12 @@ import { DtButton } from "./button.js";
 import { DtTooltip } from "./tooltip.js";
 import "../common/constants.js";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/popover_constants-6YkPPbnk.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
 const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ["sm", "md", "lg", "xl"];
 const _sfc_main = {
   name: "DtRecipeCallbarButton",
-  components: {
-    DtButton,
-    DtTooltip
-  },
+  components: { DtButton, DtTooltip },
   inheritAttrs: false,
   props: {
     /**
@@ -115,16 +112,24 @@ const _sfc_main = {
   ],
   computed: {
     callbarButtonClass() {
-      return [this.buttonClass, "dt-recipe-callbar-button", "d-px0", {
-        "dt-recipe-callbar-button--circle": this.circle,
-        "dt-recipe-callbar-button--active": this.active,
-        "dt-recipe-callbar-button--danger": this.danger,
-        "d-btn--disabled d-bgc-transparent": this.disabled,
-        "d-fc-primary": !this.disabled
-      }];
+      return [
+        this.buttonClass,
+        "dt-recipe-callbar-button",
+        "d-px0",
+        {
+          "dt-recipe-callbar-button--circle": this.circle,
+          "dt-recipe-callbar-button--active": this.active,
+          "dt-recipe-callbar-button--danger": this.danger,
+          "d-btn--disabled d-bgc-transparent": this.disabled,
+          "d-fc-primary": !this.disabled
+        }
+      ];
     },
     callbarButtonTextClass() {
-      return ["d-fs-100 lg:d-d-none md:d-d-none sm:d-d-none", this.textClass];
+      return [
+        "d-fs-100 lg:d-d-none md:d-d-none sm:d-d-none",
+        this.textClass
+      ];
     },
     buttonWidth() {
       switch (this.buttonWidthSize) {
@@ -157,25 +162,33 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     id: $props.id,
     offset: [0, 24]
   }, {
-    anchor: withCtx(() => [createElementVNode("span", {
-      class: normalizeClass({
-        "dt-recipe-callbar-button--disabled": $props.disabled
-      })
-    }, [createVNode(_component_dt_button, mergeProps({
-      importance: $options.buttonImportance,
-      kind: "muted",
-      "icon-position": "top",
-      "aria-disabled": $props.disabled,
-      "aria-label": $props.ariaLabel,
-      "label-class": $options.callbarButtonTextClass,
-      width: $options.buttonWidth,
-      class: $options.callbarButtonClass
-    }, _ctx.$attrs, toHandlers($options.callbarButtonListeners)), {
-      icon: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
-      default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
-      _: 3
-    }, 16, ["importance", "aria-disabled", "aria-label", "label-class", "width", "class"])], 2)]),
-    default: withCtx(() => [renderSlot(_ctx.$slots, "tooltip")]),
+    anchor: withCtx(() => [
+      createElementVNode("span", {
+        class: normalizeClass({ "dt-recipe-callbar-button--disabled": $props.disabled })
+      }, [
+        createVNode(_component_dt_button, mergeProps({
+          importance: $options.buttonImportance,
+          kind: "muted",
+          "icon-position": "top",
+          "aria-disabled": $props.disabled,
+          "aria-label": $props.ariaLabel,
+          "label-class": $options.callbarButtonTextClass,
+          width: $options.buttonWidth,
+          class: $options.callbarButtonClass
+        }, _ctx.$attrs, toHandlers($options.callbarButtonListeners)), {
+          icon: withCtx(() => [
+            renderSlot(_ctx.$slots, "icon")
+          ]),
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["importance", "aria-disabled", "aria-label", "label-class", "width", "class"])
+      ], 2)
+    ]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "tooltip")
+    ]),
     _: 3
   }, 8, ["id"]);
 }

package/dist/vue3/lib/callbar-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"callbar-button.js","sources":["../../recipes/buttons/callbar_button/callbar_button_constants.js","../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["export const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];\n\nexport default {\n  CALLBAR_BUTTON_VALID_WIDTH_SIZE,\n};\n","<template>\n  <dt-tooltip\n    :id=\"id\"\n    :offset=\"[0, 24]\"\n  >\n    <template #anchor>\n      <span\n        :class=\"{ 'dt-recipe-callbar-button--disabled': disabled }\"\n      >\n        <dt-button\n          :importance=\"buttonImportance\"\n          kind=\"muted\"\n          icon-position=\"top\"\n          :aria-disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :label-class=\"callbarButtonTextClass\"\n          :width=\"buttonWidth\"\n          :class=\"callbarButtonClass\"\n          v-bind=\"$attrs\"\n          v-on=\"callbarButtonListeners\"\n        >\n          <slot />\n          <template #icon>\n            <slot name=\"icon\" />\n          </template>\n        </dt-button>\n      </span>\n    </template>\n    <slot name=\"tooltip\" />\n  </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils, { extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButton',\n\n  components: { DtButton, DtTooltip },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: '',\n    },\n\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    callbarButtonClass () {\n      return [\n        this.buttonClass,\n        'dt-recipe-callbar-button',\n        'd-px0',\n        {\n          'dt-recipe-callbar-button--circle': this.circle,\n          'dt-recipe-callbar-button--active': this.active,\n          'dt-recipe-callbar-button--danger': this.danger,\n          'd-btn--disabled d-bgc-transparent': this.disabled,\n          'd-fc-primary': !this.disabled,\n        }];\n    },\n\n    callbarButtonTextClass () {\n      return [\n        'd-fs-100 lg:d-d-none md:d-d-none sm:d-d-none',\n        this.textClass,\n      ];\n    },\n\n    buttonWidth () {\n      switch (this.buttonWidthSize) {\n        case 'sm':\n          return '4.5rem';\n        case 'md':\n          return '6rem';\n        default:\n          return '8.4rem';\n      }\n    },\n\n    buttonImportance () {\n      if (this.importance) {\n        return this.importance;\n      }\n      return this.circle ? 'outlined' : 'clear';\n    },\n\n    callbarButtonListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        click: (event) => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {\n  line-height: var(--dt-font-line-height-300);\n}\n\n.dt-recipe-callbar-button--circle {\n  border-radius: var(--dt-size-radius-circle);\n}\n\n.dt-recipe-callbar-button.d-btn[disabled] {\n  background-color: unset;\n  opacity: .5;\n}\n\n.dt-recipe-callbar-button--circle.d-btn[disabled] {\n  border-color: unset;\n}\n\n.dt-recipe-callbar-button--active,\n.dt-recipe-callbar-button--active:hover {\n  .base-button__icon {\n    color: var(--primary-color);\n  }\n}\n\n.dt-recipe-callbar-button--disabled {\n  cursor: not-allowed;\n}\n</style>\n"],"names":["CALLBAR_BUTTON_VALID_WIDTH_SIZE","_sfc_main","name","components","DtButton","DtTooltip","inheritAttrs","props","id","type","String","default","utils","getUniqueString","active","Boolean","danger","disabled","circle","ariaLabel","validator","label","this","$slots","buttonClass","Array","Object","textClass","buttonWidthSize","size","includes","importance","emits","computed","callbarButtonClass","callbarButtonTextClass","buttonWidth","buttonImportance","callbarButtonListeners","extractVueListeners","$attrs","click","event","$emit","_createBlock","_component_dt_tooltip","$props","offset","anchor","_createElementVNode","class","_createVNode","_component_dt_button","_mergeProps","$options","kind","width","_ctx","_toHandlers","icon","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"callbar-button.js","sources":["../../recipes/buttons/callbar_button/callbar_button_constants.js","../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["export const CALLBAR_BUTTON_VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];\n\nexport default {\n  CALLBAR_BUTTON_VALID_WIDTH_SIZE,\n};\n","<template>\n  <dt-tooltip\n    :id=\"id\"\n    :offset=\"[0, 24]\"\n  >\n    <template #anchor>\n      <span\n        :class=\"{ 'dt-recipe-callbar-button--disabled': disabled }\"\n      >\n        <dt-button\n          :importance=\"buttonImportance\"\n          kind=\"muted\"\n          icon-position=\"top\"\n          :aria-disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :label-class=\"callbarButtonTextClass\"\n          :width=\"buttonWidth\"\n          :class=\"callbarButtonClass\"\n          v-bind=\"$attrs\"\n          v-on=\"callbarButtonListeners\"\n        >\n          <slot />\n          <template #icon>\n            <slot name=\"icon\" />\n          </template>\n        </dt-button>\n      </span>\n    </template>\n    <slot name=\"tooltip\" />\n  </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils, { extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButton',\n\n  components: { DtButton, DtTooltip },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: '',\n    },\n\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    callbarButtonClass () {\n      return [\n        this.buttonClass,\n        'dt-recipe-callbar-button',\n        'd-px0',\n        {\n          'dt-recipe-callbar-button--circle': this.circle,\n          'dt-recipe-callbar-button--active': this.active,\n          'dt-recipe-callbar-button--danger': this.danger,\n          'd-btn--disabled d-bgc-transparent': this.disabled,\n          'd-fc-primary': !this.disabled,\n        }];\n    },\n\n    callbarButtonTextClass () {\n      return [\n        'd-fs-100 lg:d-d-none md:d-d-none sm:d-d-none',\n        this.textClass,\n      ];\n    },\n\n    buttonWidth () {\n      switch (this.buttonWidthSize) {\n        case 'sm':\n          return '4.5rem';\n        case 'md':\n          return '6rem';\n        default:\n          return '8.4rem';\n      }\n    },\n\n    buttonImportance () {\n      if (this.importance) {\n        return this.importance;\n      }\n      return this.circle ? 'outlined' : 'clear';\n    },\n\n    callbarButtonListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        click: (event) => this.$emit('click', event),\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {\n  line-height: var(--dt-font-line-height-300);\n}\n\n.dt-recipe-callbar-button--circle {\n  border-radius: var(--dt-size-radius-circle);\n}\n\n.dt-recipe-callbar-button.d-btn[disabled] {\n  background-color: unset;\n  opacity: .5;\n}\n\n.dt-recipe-callbar-button--circle.d-btn[disabled] {\n  border-color: unset;\n}\n\n.dt-recipe-callbar-button--active,\n.dt-recipe-callbar-button--active:hover {\n  .base-button__icon {\n    color: var(--primary-color);\n  }\n}\n\n.dt-recipe-callbar-button--disabled {\n  cursor: not-allowed;\n}\n</style>\n"],"names":["this","_createBlock","_createElementVNode","_createVNode","_mergeProps","_toHandlers","_renderSlot"],"mappings":"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"}

package/dist/vue3/lib/callbox.cjs

@@ -7,7 +7,7 @@ const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhn
 require("../common/utils.cjs");
 require("../common/constants.cjs");
 require("@dialpad/dialtone-icons/icons.json");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("./presence.cjs");
 require("./icon.cjs");
 require("@dialpad/dialtone-icons/vue3");
@@ -21,10 +21,7 @@ const CALLBOX_BORDER_COLORS = {
 };
 const _sfc_main = {
   name: "DtRecipeCallbox",
-  components: {
-    DtBadge: lib_badge.DtBadge,
-    DtAvatar: lib_avatar.DtAvatar
-  },
+  components: { DtBadge: lib_badge.DtBadge, DtAvatar: lib_avatar.DtAvatar },
   inheritAttrs: false,
   props: {
     /**
@@ -135,12 +132,8 @@ const _hoisted_2 = {
   "data-qa": "dt-recipe-callbox--video-wrapper",
   class: "dt-recipe-callbox--video"
 };
-const _hoisted_3 = {
-  class: "dt-recipe-callbox--main-content-top"
-};
-const _hoisted_4 = {
-  class: "dt-recipe-callbox--content"
-};
+const _hoisted_3 = { class: "dt-recipe-callbox--main-content-top" };
+const _hoisted_4 = { class: "dt-recipe-callbox--content" };
 const _hoisted_5 = {
   key: 0,
   "data-qa": "dt-recipe-callbox--badge-wrapper",
@@ -164,33 +157,59 @@ const _hoisted_8 = {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_avatar = vue.resolveComponent("dt-avatar");
   const _component_dt_badge = vue.resolveComponent("dt-badge");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [_ctx.$slots.video ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [vue.renderSlot(_ctx.$slots, "video", {}, void 0, true)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
-    "data-qa": "dt-recipe-callbox--main-content",
-    class: vue.normalizeClass(["dt-recipe-callbox--main-content", $options.borderClass, {
-      "dt-recipe-callbox--clickable": $props.clickable
-    }])
-  }, [vue.createElementVNode("div", _hoisted_3, [$options.shouldShowAvatar ? (vue.openBlock(), vue.createBlock(_component_dt_avatar, {
-    key: 0,
-    "avatar-class": "dt-recipe-callbox--avatar",
-    "image-src": $props.avatarSrc,
-    "image-alt": "",
-    "full-name": $props.avatarFullName,
-    seed: $props.avatarSeed,
-    clickable: $props.clickable,
-    "overlay-icon": $props.isOnHold ? "pause" : null,
-    size: "sm",
-    onClick: $options.handleClick
-  }, null, 8, ["image-src", "full-name", "seed", "clickable", "overlay-icon", "onClick"])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_4, [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
-    "data-qa": "dt-recipe-callbox--title",
-    class: "dt-recipe-callbox--content-title",
-    onClick: $options.handleClick
-  }, {
-    default: vue.withCtx(() => [vue.createTextVNode(vue.toDisplayString($props.title), 1)]),
-    _: 1
-  }, 8, ["onClick"])), _ctx.$slots.badge || $props.badgeText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [vue.renderSlot(_ctx.$slots, "badge", {}, () => [vue.createVNode(_component_dt_badge, {
-    class: vue.normalizeClass($options.badgeClass),
-    text: $props.badgeText
-  }, null, 8, ["class", "text"])], true)])) : vue.createCommentVNode("", true), _ctx.$slots.subtitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [vue.renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)])) : vue.createCommentVNode("", true)]), _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [vue.renderSlot(_ctx.$slots, "right", {}, void 0, true)])) : vue.createCommentVNode("", true)]), _ctx.$slots.bottom ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [vue.renderSlot(_ctx.$slots, "bottom", {}, void 0, true)])) : vue.createCommentVNode("", true)], 2)]);
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    _ctx.$slots.video ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+      vue.renderSlot(_ctx.$slots, "video", {}, void 0, true)
+    ])) : vue.createCommentVNode("", true),
+    vue.createElementVNode("div", {
+      "data-qa": "dt-recipe-callbox--main-content",
+      class: vue.normalizeClass(["dt-recipe-callbox--main-content", $options.borderClass, { "dt-recipe-callbox--clickable": $props.clickable }])
+    }, [
+      vue.createElementVNode("div", _hoisted_3, [
+        $options.shouldShowAvatar ? (vue.openBlock(), vue.createBlock(_component_dt_avatar, {
+          key: 0,
+          "avatar-class": "dt-recipe-callbox--avatar",
+          "image-src": $props.avatarSrc,
+          "image-alt": "",
+          "full-name": $props.avatarFullName,
+          seed: $props.avatarSeed,
+          clickable: $props.clickable,
+          "overlay-icon": $props.isOnHold ? "pause" : null,
+          size: "sm",
+          onClick: $options.handleClick
+        }, null, 8, ["image-src", "full-name", "seed", "clickable", "overlay-icon", "onClick"])) : vue.createCommentVNode("", true),
+        vue.createElementVNode("div", _hoisted_4, [
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "span"), {
+            "data-qa": "dt-recipe-callbox--title",
+            class: "dt-recipe-callbox--content-title",
+            onClick: $options.handleClick
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString($props.title), 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"])),
+          _ctx.$slots.badge || $props.badgeText ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+            vue.renderSlot(_ctx.$slots, "badge", {}, () => [
+              vue.createVNode(_component_dt_badge, {
+                class: vue.normalizeClass($options.badgeClass),
+                text: $props.badgeText
+              }, null, 8, ["class", "text"])
+            ], true)
+          ])) : vue.createCommentVNode("", true),
+          _ctx.$slots.subtitle ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+            vue.renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+          vue.renderSlot(_ctx.$slots, "right", {}, void 0, true)
+        ])) : vue.createCommentVNode("", true)
+      ]),
+      _ctx.$slots.bottom ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+        vue.renderSlot(_ctx.$slots, "bottom", {}, void 0, true)
+      ])) : vue.createCommentVNode("", true)
+    ], 2)
+  ]);
 }
 const callbox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-ef08f46e"]]);
 exports.CALLBOX_BADGE_COLORS = CALLBOX_BADGE_COLORS;

package/dist/vue3/lib/callbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callbox.cjs","sources":["../../recipes/leftbar/callbox/callbox_constants.js","../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["export const CALLBOX_BADGE_COLORS = {\n  warning: 'dt-recipe-callbox-badge--warning',\n};\n\nexport const CALLBOX_BORDER_COLORS = {\n  default: 'dt-recipe-callbox--border-default',\n  ai: 'dt-recipe-callbox--border-ai',\n  critical: 'dt-recipe-callbox--border-critical',\n};\n\nexport default {\n  CALLBOX_BADGE_COLORS,\n  CALLBOX_BORDER_COLORS,\n};\n","<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"dt-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox--video-wrapper\"\n      class=\"dt-recipe-callbox--video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox--main-content\"\n      :class=\"['dt-recipe-callbox--main-content', borderClass, { 'dt-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"dt-recipe-callbox--main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"dt-recipe-callbox--avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          :overlay-icon=\"isOnHold ? 'pause' : null\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        />\n        <div class=\"dt-recipe-callbox--content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox--title\"\n            class=\"dt-recipe-callbox--content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox--badge-wrapper\"\n            class=\"dt-recipe-callbox--content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox--subtitle-wrapper\"\n            class=\"dt-recipe-callbox--content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox--right-wrapper\"\n          class=\"dt-recipe-callbox--right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox--bottom-wrapper\"\n        class=\"dt-recipe-callbox--main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\n\nexport default {\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\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: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-callbox {\n  padding: 0;\n  color: var(--dt-color-foreground-primary);\n  background-color: var(--dt-color-surface-primary);\n  border-radius: var(--dt-size-radius-300);\n\n  &--video {\n    display: flex;\n    border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;\n    overflow: clip;\n    margin-bottom: var(--dt-space-300-negative);\n  }\n\n  &--main-content {\n    padding: 0;\n    border-radius: var(--dt-size-radius-300);\n    border: var(--dt-size-border-100) solid transparent;\n    align-items: stretch;\n\n    &.dt-recipe-callbox--border-default {\n      border-color: var(--dt-color-border-default);\n    }\n\n    &.dt-recipe-callbox--border-ai {\n      background:\n        linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;\n    }\n\n    &.dt-recipe-callbox--border-critical {\n      background:\n        radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        radial-gradient(circle, #E7301D, #F78B23) border-box;\n    }\n\n    &-top {\n      display: flex;\n      align-items: center;\n      padding: var(--dt-space-350) var(--dt-space-400);\n    }\n\n    &-bottom {\n      border-top: 1px solid var(--dt-color-border-subtle);\n    }\n  }\n\n  &--avatar {\n    margin-right: var(--dt-space-400);\n  }\n\n  &--content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 0 auto;\n    min-width: 0;\n\n    &-title {\n      overflow: clip;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      color: var(--dt-color-foreground-primary);\n      background-color: var(--dt-color-surface-primary);\n      font-weight: var(--dt-font-weight-bold);\n      border: none;\n      padding: 0;\n      width: 0;\n      min-width: 100%;\n      text-align: left;\n      user-select: text;\n      line-height: normal;\n    }\n\n    &-badge {\n      line-height: normal;\n    }\n\n    &-subtitle {\n      padding: 0;\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      line-height: normal;\n      overflow: hidden;\n      width: 0;\n      min-width: 100%;\n    }\n  }\n\n  &--right {\n    display: flex;\n    justify-content: right;\n  }\n\n  &--clickable {\n    .dt-recipe-callbox--content-title {\n      cursor: pointer;\n      user-select: none;\n      border-radius: var(--dt-size-100);\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: var(--dt-shadow-focus);\n      }\n\n      &:hover, &:active {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  .dt-recipe-callbox-badge--warning {\n    background-color: var(--dt-color-surface-warning);\n  }\n}\n</style>\n"],"names":["CALLBOX_BADGE_COLORS","warning","CALLBOX_BORDER_COLORS","default","ai","critical","_sfc_main","name","components","DtBadge","DtAvatar","inheritAttrs","props","badgeText","type","String","badgeColor","validator","color","Object","keys","includes","avatarSrc","avatarFullName","avatarSeed","title","borderColor","clickable","Boolean","isOnHold","emits","computed","shouldShowAvatar","badgeClass","borderClass","methods","handleClick","e","$emit","class","_hoisted_3","_hoisted_4","_openBlock","_createElementBlock","_hoisted_1","_ctx","$slots","video","_hoisted_2","_renderSlot","undefined","_createElementVNode","_normalizeClass","$options","$props","_createBlock","_component_dt_avatar","seed","size","onClick","_resolveDynamicComponent","badge","_hoisted_5","_createVNode","_component_dt_badge","text","subtitle","_hoisted_6","right","_hoisted_7","bottom","_hoisted_8"],"mappings":"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"}
+{"version":3,"file":"callbox.cjs","sources":["../../recipes/leftbar/callbox/callbox_constants.js","../../recipes/leftbar/callbox/callbox.vue"],"sourcesContent":["export const CALLBOX_BADGE_COLORS = {\n  warning: 'dt-recipe-callbox-badge--warning',\n};\n\nexport const CALLBOX_BORDER_COLORS = {\n  default: 'dt-recipe-callbox--border-default',\n  ai: 'dt-recipe-callbox--border-ai',\n  critical: 'dt-recipe-callbox--border-critical',\n};\n\nexport default {\n  CALLBOX_BADGE_COLORS,\n  CALLBOX_BORDER_COLORS,\n};\n","<template>\n  <div\n    data-qa=\"dt-recipe-callbox\"\n    class=\"dt-recipe-callbox\"\n  >\n    <div\n      v-if=\"$slots.video\"\n      data-qa=\"dt-recipe-callbox--video-wrapper\"\n      class=\"dt-recipe-callbox--video\"\n    >\n      <!-- @slot Slot for video stream -->\n      <slot name=\"video\" />\n    </div>\n    <div\n      data-qa=\"dt-recipe-callbox--main-content\"\n      :class=\"['dt-recipe-callbox--main-content', borderClass, { 'dt-recipe-callbox--clickable': clickable }]\"\n    >\n      <div\n        class=\"dt-recipe-callbox--main-content-top\"\n      >\n        <dt-avatar\n          v-if=\"shouldShowAvatar\"\n          avatar-class=\"dt-recipe-callbox--avatar\"\n          :image-src=\"avatarSrc\"\n          image-alt=\"\"\n          :full-name=\"avatarFullName\"\n          :seed=\"avatarSeed\"\n          :clickable=\"clickable\"\n          :overlay-icon=\"isOnHold ? 'pause' : null\"\n          size=\"sm\"\n          @click=\"handleClick\"\n        />\n        <div class=\"dt-recipe-callbox--content\">\n          <component\n            :is=\"clickable ? 'button' : 'span'\"\n            data-qa=\"dt-recipe-callbox--title\"\n            class=\"dt-recipe-callbox--content-title\"\n            @click=\"handleClick\"\n          >\n            {{ title }}\n          </component>\n          <div\n            v-if=\"$slots.badge || badgeText\"\n            data-qa=\"dt-recipe-callbox--badge-wrapper\"\n            class=\"dt-recipe-callbox--content-badge\"\n          >\n            <!-- @slot Slot for call center badge -->\n            <slot name=\"badge\">\n              <dt-badge\n                :class=\"badgeClass\"\n                :text=\"badgeText\"\n              />\n            </slot>\n          </div>\n          <div\n            v-if=\"$slots.subtitle\"\n            data-qa=\"dt-recipe-callbox--subtitle-wrapper\"\n            class=\"dt-recipe-callbox--content-subtitle\"\n          >\n            <!-- @slot Slot for subtitle -->\n            <slot name=\"subtitle\" />\n          </div>\n        </div>\n        <div\n          v-if=\"$slots.right\"\n          data-qa=\"dt-recipe-callbox--right-wrapper\"\n          class=\"dt-recipe-callbox--right\"\n        >\n          <!-- @slot Slot for right icons -->\n          <slot name=\"right\" />\n        </div>\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-recipe-callbox--bottom-wrapper\"\n        class=\"dt-recipe-callbox--main-content-bottom\"\n      >\n        <slot name=\"bottom\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { CALLBOX_BADGE_COLORS, CALLBOX_BORDER_COLORS } from './callbox_constants';\nimport DtAvatar from '@/components/avatar/avatar.vue';\nimport DtBadge from '@/components/badge/badge.vue';\n\nexport default {\n  name: 'DtRecipeCallbox',\n\n  components: { DtBadge, DtAvatar },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Text for the badge element\n     */\n    badgeText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Color for the badge element\n     * @values null, warning\n     */\n    badgeColor: {\n      type: String,\n      default: null,\n      validator: (color) => color === null || Object.keys(CALLBOX_BADGE_COLORS).includes(color),\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use the initial of the name.\n     */\n    avatarSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Avatar's full name, used to extract initials\n     * to display if `avatarSrc` is empty.\n     */\n    avatarFullName: {\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: '',\n    },\n\n    /**\n     * Callbox title\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Callbox border color\n     * @values default, ai, critical\n     */\n    borderColor: {\n      type: String,\n      default: 'default',\n      validator: (color) => Object.keys(CALLBOX_BORDER_COLORS).includes(color),\n    },\n\n    /**\n     * Makes the callbox avatar and title clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Controls the avatars overlay icon\n     */\n    isOnHold: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Callbox click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    shouldShowAvatar () {\n      return this.avatarFullName || this.avatarSrc;\n    },\n\n    badgeClass () {\n      return CALLBOX_BADGE_COLORS[this.badgeColor];\n    },\n\n    borderClass () {\n      return CALLBOX_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-callbox {\n  padding: 0;\n  color: var(--dt-color-foreground-primary);\n  background-color: var(--dt-color-surface-primary);\n  border-radius: var(--dt-size-radius-300);\n\n  &--video {\n    display: flex;\n    border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;\n    overflow: clip;\n    margin-bottom: var(--dt-space-300-negative);\n  }\n\n  &--main-content {\n    padding: 0;\n    border-radius: var(--dt-size-radius-300);\n    border: var(--dt-size-border-100) solid transparent;\n    align-items: stretch;\n\n    &.dt-recipe-callbox--border-default {\n      border-color: var(--dt-color-border-default);\n    }\n\n    &.dt-recipe-callbox--border-ai {\n      background:\n        linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;\n    }\n\n    &.dt-recipe-callbox--border-critical {\n      background:\n        radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,\n        radial-gradient(circle, #E7301D, #F78B23) border-box;\n    }\n\n    &-top {\n      display: flex;\n      align-items: center;\n      padding: var(--dt-space-350) var(--dt-space-400);\n    }\n\n    &-bottom {\n      border-top: 1px solid var(--dt-color-border-subtle);\n    }\n  }\n\n  &--avatar {\n    margin-right: var(--dt-space-400);\n  }\n\n  &--content {\n    display: flex;\n    flex-direction: column;\n    flex: 1 0 auto;\n    min-width: 0;\n\n    &-title {\n      overflow: clip;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      color: var(--dt-color-foreground-primary);\n      background-color: var(--dt-color-surface-primary);\n      font-weight: var(--dt-font-weight-bold);\n      border: none;\n      padding: 0;\n      width: 0;\n      min-width: 100%;\n      text-align: left;\n      user-select: text;\n      line-height: normal;\n    }\n\n    &-badge {\n      line-height: normal;\n    }\n\n    &-subtitle {\n      padding: 0;\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      line-height: normal;\n      overflow: hidden;\n      width: 0;\n      min-width: 100%;\n    }\n  }\n\n  &--right {\n    display: flex;\n    justify-content: right;\n  }\n\n  &--clickable {\n    .dt-recipe-callbox--content-title {\n      cursor: pointer;\n      user-select: none;\n      border-radius: var(--dt-size-100);\n\n      &:focus-visible {\n        outline: none;\n        box-shadow: var(--dt-shadow-focus);\n      }\n\n      &:hover, &:active {\n        text-decoration: underline;\n      }\n    }\n  }\n\n  .dt-recipe-callbox-badge--warning {\n    background-color: var(--dt-color-surface-warning);\n  }\n}\n</style>\n"],"names":["DtBadge","DtAvatar","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":"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"}