@dialpad/dialtone-vue 3.56.1 → 3.57.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [3.57.0](https://github.com/dialpad/dialtone-vue/compare/v3.56.2...v3.57.0) (2023-04-03)
+
+
+### Bug Fixes
+
+* **Avatar:** additional null protection ([4545721](https://github.com/dialpad/dialtone-vue/commit/4545721f1ea6ac16ae6430102b0865b1d5ab2d75))
+* **Avatar:** null protect firstElementChild ([1b2b949](https://github.com/dialpad/dialtone-vue/commit/1b2b9497ea951fff41bfb7d2fe6b067120dc6c49))
+
+
+### Features
+
+* **Recipe Leftbar Unread Chip:** add leftbar unread chip recipe - vue3 ([#878](https://github.com/dialpad/dialtone-vue/issues/878)) ([03b0b0c](https://github.com/dialpad/dialtone-vue/commit/03b0b0c690ffec643c45e6016a2a60d2bdf75e78))
+
+## [3.56.2](https://github.com/dialpad/dialtone-vue/compare/v3.56.1...v3.56.2) (2023-03-31)
+
+
+### Bug Fixes
+
+* **Image Viewer:** dt image viewer visual testing ([#874](https://github.com/dialpad/dialtone-vue/issues/874)) ([5400412](https://github.com/dialpad/dialtone-vue/commit/5400412963d2d3408e1556f6ca0f986a8bdc4c3d))
+* **Recipe Callbar Btn:** transparent background when btn is in disabled state ([#876](https://github.com/dialpad/dialtone-vue/issues/876)) ([1031e72](https://github.com/dialpad/dialtone-vue/commit/1031e72bcb8ee1d441a4b205bfbbca91536cd74b))
+
 ## [3.56.1](https://github.com/dialpad/dialtone-vue/compare/v3.56.0...v3.56.1) (2023-03-30)
 
 

package/dist/dialtone-vue.common.js

@@ -1201,6 +1201,7 @@ __webpack_require__.d(__webpack_exports__, {
   "DtRecipeGroupedChip": () => (/* reexport */ grouped_chip),
   "DtRecipeIvrNode": () => (/* reexport */ ivr_node),
   "DtRecipeTopBannerInfo": () => (/* reexport */ top_banner_info),
+  "DtRecipeUnreadChip": () => (/* reexport */ unread_chip),
   "DtRootLayout": () => (/* reexport */ root_layout),
   "DtScroller": () => (/* reexport */ DtScroller),
   "DtSelectMenu": () => (/* reexport */ select_menu),
@@ -1267,6 +1268,8 @@ __webpack_require__.d(__webpack_exports__, {
   "TOOLTIP_HIDE_ON_CLICK_VARIANTS": () => (/* reexport */ TOOLTIP_HIDE_ON_CLICK_VARIANTS),
   "TOOLTIP_KIND_MODIFIERS": () => (/* reexport */ TOOLTIP_KIND_MODIFIERS),
   "TOOLTIP_STICKY_VALUES": () => (/* reexport */ TOOLTIP_STICKY_VALUES),
+  "UNREAD_BADGE_DIRECTIONS": () => (/* reexport */ UNREAD_BADGE_DIRECTIONS),
+  "UNREAD_BADGE_KINDS": () => (/* reexport */ UNREAD_BADGE_KINDS),
   "VALIDATION_MESSAGE_TYPES": () => (/* reexport */ VALIDATION_MESSAGE_TYPES),
   "VALID_WIDTH_SIZE": () => (/* reexport */ VALID_WIDTH_SIZE),
   "filterFormattedMessages": () => (/* reexport */ filterFormattedMessages),
@@ -1295,7 +1298,7 @@ if (typeof window !== 'undefined') {
 
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=284ea17a
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=template&id=0694ee28
 
 const _hoisted_1 = ["id"];
 const _hoisted_2 = {
@@ -1327,7 +1330,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-qa": "dt-presence"
   }), null, 16, ["presence", "class"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 14, _hoisted_1);
 }
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=284ea17a
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=template&id=0694ee28
 
 ;// CONCATENATED MODULE: ./common/constants.js
 /* TODO: Move and sort these in a constants directory
@@ -1902,13 +1905,19 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 
   methods: {
     async init() {
+      var _this$$refs$canvas;
+
       if (this.initializing) return;
       this.kind = null;
       await this.$nextTick();
-      const firstChild = this.$refs.canvas.children[0] || this.$refs.canvas;
+      const firstChild = ((_this$$refs$canvas = this.$refs.canvas) === null || _this$$refs$canvas === void 0 ? void 0 : _this$$refs$canvas.children[0]) || this.$refs.canvas;
       this.formatInitials(this.initials);
-      this.setKind(firstChild);
-      this.kindHandler(firstChild);
+
+      if (firstChild) {
+        this.setKind(firstChild);
+        this.kindHandler(firstChild);
+      }
+
       this.initializing = true;
       await this.$nextTick();
       this.initializing = false;
@@ -2039,10 +2048,10 @@ const AVATAR_GROUP_VALIDATOR = group => group > 1;
 });
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=284ea17a&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/avatar/avatar.vue?vue&type=style&index=0&id=0694ee28&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=284ea17a&lang=less
+;// CONCATENATED MODULE: ./components/avatar/avatar.vue?vue&type=style&index=0&id=0694ee28&lang=less
 
 ;// CONCATENATED MODULE: ./components/avatar/avatar.vue
 
@@ -12762,18 +12771,18 @@ const dropdown_separator_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
 ;// CONCATENATED MODULE: ./components/dropdown/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=template&id=9b4c7502
 
-const image_viewervue_type_template_id_2229fad0_hoisted_1 = ["src", "alt"];
-const image_viewervue_type_template_id_2229fad0_hoisted_2 = ["aria-hidden"];
-const image_viewervue_type_template_id_2229fad0_hoisted_3 = {
+const image_viewervue_type_template_id_9b4c7502_hoisted_1 = ["src", "alt"];
+const image_viewervue_type_template_id_9b4c7502_hoisted_2 = ["aria-hidden"];
+const image_viewervue_type_template_id_9b4c7502_hoisted_3 = {
   "data-qa": "dt-image-viewer-full",
   class: "d-p0 d-bar0 d-wmx80p d-hmx80p",
   role: "dialog",
   "aria-modal": "true"
 };
-const image_viewervue_type_template_id_2229fad0_hoisted_4 = ["src", "alt"];
-function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props, $setup, $data, $options) {
+const image_viewervue_type_template_id_9b4c7502_hoisted_4 = ["src", "alt"];
+function image_viewervue_type_template_id_9b4c7502_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
@@ -12782,19 +12791,19 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     "data-qa": "dt-image-viewer-preview",
     "aria-label": $props.ariaLabel,
     importance: "clear",
-    onClick: $options.open
+    onClick: $options.openModal
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)($props.imageButtonClass),
       src: $props.imageSrc,
       alt: $props.imageAlt
-    }, null, 10, image_viewervue_type_template_id_2229fad0_hoisted_1)]),
+    }, null, 10, image_viewervue_type_template_id_9b4c7502_hoisted_1)]),
     _: 1
-  }, 8, ["aria-label", "onClick"]), $data.show ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
+  }, 8, ["aria-label", "onClick"]), $data.isOpen ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
     key: 0,
     to: "body"
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
-    "aria-hidden": $options.isOpen,
+    "aria-hidden": !$data.isOpen ? 'true' : 'false',
     class: "d-modal",
     "data-qa": "dt-modal"
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.modalListeners, true), {
@@ -12802,11 +12811,11 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     onMouseleave: _cache[1] || (_cache[1] = $event => $data.showCloseButton = false),
     onFocusin: _cache[2] || (_cache[2] = $event => $data.showCloseButton = true),
     onFocusout: _cache[3] || (_cache[3] = $event => $data.showCloseButton = false)
-  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_2229fad0_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+  }), [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", image_viewervue_type_template_id_9b4c7502_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
     class: "d-wmx100p d-hmx100p",
     src: $props.imageSrc,
     alt: $props.imageAlt
-  }, null, 8, image_viewervue_type_template_id_2229fad0_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
+  }, null, 8, image_viewervue_type_template_id_9b4c7502_hoisted_4)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Transition, {
     name: "fade"
   }, {
     default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.showCloseButton ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, {
@@ -12828,9 +12837,9 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
       _: 1
     }, 8, ["aria-label", "onClick"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 1
-  })], 16, image_viewervue_type_template_id_2229fad0_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
+  })], 16, image_viewervue_type_template_id_9b4c7502_hoisted_2)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=2229fad0
+;// CONCATENATED MODULE: ./components/image_viewer/image_viewer.vue?vue&type=template&id=9b4c7502
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/image_viewer/image_viewer.vue?vue&type=script&lang=js
 
@@ -12845,6 +12854,18 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
   },
   mixins: [modal],
   props: {
+    /**
+     * Controls whether the image modal is shown. Leaving this null will have the image modal
+     * trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+
     /**
      * URL of the image to be shown
      */
@@ -12886,19 +12907,28 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
       required: true
     }
   },
+  emits: [
+  /**
+   * Emitted when popover is shown or hidden
+   *
+   * @event opened
+   * @type {Boolean}
+   */
+  'opened',
+  /**
+   * Event fired to sync the open prop with the parent component
+   * @event update:open
+   */
+  'update:open'],
 
   data() {
     return {
-      show: false,
-      showCloseButton: true
+      showCloseButton: true,
+      isOpen: false
     };
   },
 
   computed: {
-    isOpen() {
-      return `${!this.show}`;
-    },
-
     modalListeners() {
       return {
         click: event => {
@@ -12921,7 +12951,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
 
   },
   watch: {
-    show: {
+    isOpen: {
       immediate: true,
 
       handler(isShowing) {
@@ -12937,19 +12967,38 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
         }
       }
 
+    },
+    open: {
+      handler: function (open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+      },
+      immediate: true
     }
   },
   methods: {
-    open() {
-      this.show = true;
+    openModal() {
+      // Has custom control passed in
+      if (this.open !== null) {
+        return;
+      }
+
+      this.isOpen = true;
       this.showCloseButton = true;
+      this.$emit('opened', true);
       setTimeout(() => {
         this.focusAfterOpen();
       });
     },
 
     close() {
-      this.show = false;
+      this.isOpen = false;
+      this.$emit('opened', false);
+
+      if (this.open !== null) {
+        this.$emit('update:open', false);
+      }
     },
 
     focusAfterOpen() {
@@ -12959,7 +13008,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
     },
 
     trapFocus(e) {
-      if (this.show) {
+      if (this.isOpen) {
         this.focusTrappedTabPress(e);
       }
     }
@@ -12974,7 +13023,7 @@ function image_viewervue_type_template_id_2229fad0_render(_ctx, _cache, $props,
 
 
 ;
-const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_2229fad0_render]])
+const image_viewer_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(image_viewervue_type_script_lang_js, [['render',image_viewervue_type_template_id_9b4c7502_render]])
 
 /* harmony default export */ const image_viewer = (image_viewer_exports_);
 ;// CONCATENATED MODULE: ./components/image_viewer/index.js
@@ -16720,27 +16769,27 @@ const checkbox_group_exports_ = checkbox_groupvue_type_script_lang_js;
 /* harmony default export */ const checkbox_group = (checkbox_group_exports_);
 ;// CONCATENATED MODULE: ./components/checkbox_group/index.js
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=42f677c2
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/chip/chip.vue?vue&type=template&id=790baeaf
 
-const chipvue_type_template_id_42f677c2_hoisted_1 = {
+const chipvue_type_template_id_790baeaf_hoisted_1 = {
   class: "d-chip"
 };
-const chipvue_type_template_id_42f677c2_hoisted_2 = {
+const chipvue_type_template_id_790baeaf_hoisted_2 = {
   key: 0,
   "data-qa": "dt-chip-icon",
   class: "d-chip__icon"
 };
-const chipvue_type_template_id_42f677c2_hoisted_3 = {
+const chipvue_type_template_id_790baeaf_hoisted_3 = {
   key: 1,
   "data-qa": "dt-chip-avatar"
 };
-const chipvue_type_template_id_42f677c2_hoisted_4 = ["id"];
-function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup, $data, $options) {
+const chipvue_type_template_id_790baeaf_hoisted_4 = ["id"];
+function chipvue_type_template_id_790baeaf_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
 
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
-  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveDynamicComponent)($props.interactive ? 'button' : 'span'), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     id: $props.id,
     type: $props.interactive && 'button',
     class: $options.chipClasses(),
@@ -16748,12 +16797,12 @@ function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup,
     "aria-labelledby": $props.ariaLabel ? undefined : `${$props.id}-content`,
     "aria-label": $props.ariaLabel
   }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.chipListeners)), {
-    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.hasSlotContent(_ctx.$slots.icon) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_42f677c2_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [$data.hasSlotContent(_ctx.$slots.icon) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_2, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon")])) : $data.hasSlotContent(_ctx.$slots.avatar) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", chipvue_type_template_id_790baeaf_hoisted_3, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "avatar")])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), $data.hasSlotContent(_ctx.$slots.default) ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
       key: 2,
       id: `${$props.id}-content`,
       "data-qa": "dt-chip-label",
       class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(['d-truncate', 'd-chip__text', $props.contentClass])
-    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_42f677c2_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
+    }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")], 10, chipvue_type_template_id_790baeaf_hoisted_4)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]),
     _: 3
   }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])), !$props.hideClose ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_button, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
     key: 0
@@ -16770,7 +16819,7 @@ function chipvue_type_template_id_42f677c2_render(_ctx, _cache, $props, $setup,
     _: 1
   }, 16, ["class", "aria-label"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]);
 }
-;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=42f677c2
+;// CONCATENATED MODULE: ./components/chip/chip.vue?vue&type=template&id=790baeaf
 
 ;// CONCATENATED MODULE: ./components/chip/chip_constants.js
 const CHIP_SIZE_MODIFIERS = {
@@ -16944,7 +16993,7 @@ const CHIP_ICON_SIZES = {
   },
   methods: {
     chipClasses() {
-      return [this.$attrs['grouped-chip'] ? ['d-chip', ...this.labelClass] : 'd-chip__label', CHIP_SIZE_MODIFIERS[this.size]];
+      return [this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label', CHIP_SIZE_MODIFIERS[this.size], this.labelClass];
     },
 
     chipCloseButtonClasses() {
@@ -16967,7 +17016,7 @@ const CHIP_ICON_SIZES = {
 
 
 ;
-const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_42f677c2_render]])
+const chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(chipvue_type_script_lang_js, [['render',chipvue_type_template_id_790baeaf_render]])
 
 /* harmony default export */ const chip = (chip_exports_);
 ;// CONCATENATED MODULE: ./components/chip/index.js
@@ -21494,9 +21543,9 @@ const combobox_multi_select_exports_ = /*#__PURE__*/(0,exportHelper/* default */
 ;// CONCATENATED MODULE: ./recipes/comboboxes/combobox_multi_select/index.js
 
 
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=a276c32c
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
 
-function callbar_buttonvue_type_template_id_a276c32c_render(_ctx, _cache, $props, $setup, $data, $options) {
+function callbar_buttonvue_type_template_id_b3920b20_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-button");
 
   const _component_dt_tooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-tooltip");
@@ -21526,7 +21575,7 @@ function callbar_buttonvue_type_template_id_a276c32c_render(_ctx, _cache, $props
     _: 3
   }, 8, ["id"]);
 }
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=a276c32c
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=template&id=b3920b20
 
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
 
@@ -21638,7 +21687,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
         'd-btn--icon-only': this.circle,
         'dt-recipe-callbar-button--active': this.active,
         'dt-recipe-callbar-button--danger': this.danger,
-        'd-btn--disabled': this.disabled,
+        'd-btn--disabled d-bgc-transparent': this.disabled,
         'd-fc-primary': !this.disabled
       }];
     },
@@ -21664,10 +21713,10 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 });
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=script&lang=js
  
-;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=a276c32c&lang=less
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
 // extracted by mini-css-extract-plugin
 
-;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=a276c32c&lang=less
+;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue?vue&type=style&index=0&id=b3920b20&lang=less
 
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/callbar_button.vue
 
@@ -21677,7 +21726,7 @@ const VALID_WIDTH_SIZE = ['sm', 'md', 'lg', 'xl'];
 ;
 
 
-const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_a276c32c_render]])
+const callbar_button_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(callbar_buttonvue_type_script_lang_js, [['render',callbar_buttonvue_type_template_id_b3920b20_render]])
 
 /* harmony default export */ const callbar_button = (callbar_button_exports_);
 ;// CONCATENATED MODULE: ./recipes/buttons/callbar_button/index.js
@@ -23990,6 +24039,107 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 /* harmony default export */ const contact_row = (contact_row_exports_);
 ;// CONCATENATED MODULE: ./recipes/leftbar/contact_row/index.js
 
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=template&id=46efd8e7
+
+const unread_chipvue_type_template_id_46efd8e7_hoisted_1 = {
+  "data-qa": "dt-leftbar-unread-chip__label"
+};
+function unread_chipvue_type_template_id_46efd8e7_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-icon");
+
+  const _component_dt_chip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.resolveComponent)("dt-chip");
+
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_dt_chip, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+    class: ['dt-leftbar-unread-chip', `dt-leftbar-unread-chip__${$props.kind}`],
+    "data-qa": "dt-leftbar-unread-chip",
+    "hide-close": true
+  }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toHandlers)($options.unreadChipListeners)), {
+    icon: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_dt_icon, {
+      name: `arrow-${$props.direction}`,
+      size: "300"
+    }, null, 8, ["name"])]),
+    default: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withCtx)(() => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", unread_chipvue_type_template_id_46efd8e7_hoisted_1, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "default")])]),
+    _: 3
+  }, 16, ["class"]);
+}
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=template&id=46efd8e7
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip_constants.js
+const UNREAD_BADGE_DIRECTIONS = ['up', 'down'];
+const UNREAD_BADGE_KINDS = ['mentions', 'messages'];
+/* harmony default export */ const unread_chip_constants = ({
+  UNREAD_BADGE_DIRECTIONS,
+  UNREAD_BADGE_KINDS
+});
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=script&lang=js
+
+
+
+/* harmony default export */ const unread_chipvue_type_script_lang_js = ({
+  name: 'DtRecipeUnreadChip',
+  components: {
+    DtIcon: icon,
+    DtChip: chip
+  },
+  props: {
+    /**
+     * The kind of unread chip which determines the styling
+     * @values 'mentions', 'messages'
+     **/
+    kind: {
+      type: String,
+      required: true,
+      validator: kind => UNREAD_BADGE_KINDS.includes(kind)
+    },
+
+    /**
+     * The direction of the arrow icon
+     * @values 'up', 'down'
+     **/
+    direction: {
+      type: String,
+      required: true,
+      validator: dir => UNREAD_BADGE_DIRECTIONS.includes(dir)
+    }
+  },
+  emits: [
+  /**
+   * Native click event
+   *
+   * @event click
+   * @type {PointerEvent | KeyboardEvent}
+   */
+  'click'],
+  computed: {
+    unreadChipListeners() {
+      return {
+        click: event => this.$emit('click', event)
+      };
+    }
+
+  }
+});
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=script&lang=js
+ 
+;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-32.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-32.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-32.use[2]!./node_modules/less-loader/dist/cjs.js??clonedRuleSet-32.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=style&index=0&id=46efd8e7&lang=less
+// extracted by mini-css-extract-plugin
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue?vue&type=style&index=0&id=46efd8e7&lang=less
+
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/unread_chip.vue
+
+
+
+
+;
+
+
+const unread_chip_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(unread_chipvue_type_script_lang_js, [['render',unread_chipvue_type_template_id_46efd8e7_render]])
+
+/* harmony default export */ const unread_chip = (unread_chip_exports_);
+;// CONCATENATED MODULE: ./recipes/leftbar/unread_chip/index.js
+
+
 ;// CONCATENATED MODULE: ./common/mixins/index.js
 
 
@@ -24048,6 +24198,7 @@ const contact_row_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(contac
 
 
 
+
  // Mixins
 
  // Constants

package/dist/dialtone-vue.css

@@ -1 +1 @@
-.d-avatar--image-loaded{background-color:initial;background-image:unset}.dt-default-list-item,.dt-default-list-item--left,.dt-default-list-item--right{min-height:28px}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--bgc-moderate-opaque)}.dt-list-item--highlighted:active{background-color:var(--bgc-bold-opaque)}.dt-list-item:focus-visible{outline:none;box-shadow:var(--bs-focus-ring)}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}50%{fill:var(--placeholder-to-color,var(--black-100));background:var(--placeholder-to-color,var(--black-100))}90%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--space-300) calc(var(--space-300)*3)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-quint)}.tippy-box[data-popper-escaped] .d-popover__dialog,.tippy-box[data-popper-reference-hidden] .d-popover__dialog{visibility:hidden;pointer-events:none}.d-context-menu-list{width:calc(var(--size-300)*48)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{border-top:var(--size-100) solid var(--bc-default);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.tippy-box[data-popper-escaped] .d-tooltip,.tippy-box[data-popper-reference-hidden] .d-tooltip{visibility:hidden;pointer-events:none}.root-layout__body{display:flex;flex-wrap:wrap;gap:0;box-shadow:none}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1;box-shadow:none}.root-layout__content{flex-basis:0;flex-grow:999;box-shadow:none}.root-layout__header--sticky{position:sticky;top:0}.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{margin-top:calc(var(--space-300)*3*-1);width:var(--size-500);height:var(--size-500);padding:var(--space-400);border-radius:var(--size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--bgc-moderate-opaque)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--bgc-contrast);color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc:var(--bgc-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-400);min-width:20%}.d-top-banner-info__middle{display:flex;align-items:center;gap:var(--size-300)}.d-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--size-300);margin:var(--space-300) var(--space-500) var(--space-300) 0;min-width:20%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base1);display:flex;justify-content:center;align-items:center;border-color:var(--purple-600);background-color:var(--purple-600)}.dt-leftbar-row{--leftbar-row-color-foreground:var(--theme-sidebar-color);--leftbar-row-color-background:var(--theme-sidebar-row-color-background);--leftbar-row-radius:100em;--leftbar-row-opacity:100%;--leftbar-row-alpha-color-foreground:var(--theme-sidebar-icon-color);--leftbar-row-alpha-width:calc(var(--size-300)*10);--leftbar-row-alpha-height:calc(var(--size-300)*9);--leftbar-row-omega-min-width:0;--leftbar-row-omega-height:var(--leftbar-row-alpha-height);--leftbar-row-omega-visibility:visible;--leftbar-row-description-font-weight:var(--fw-normal);--leftbar-row-description-font-size:var(--fs-200);--leftbar-row-description-line-height:var(--lh-200);--leftbar-row-status-color-foreground:var(--theme-sidebar-status-color);--leftbar-row-status-font-size:var(--fs-100);--leftbar-row-status-line-height:var(--lh-100);--leftbar-row-action-position-right:var(--size-400);--leftbar-row-action-position-bottom:50%;--leftbar-row-action-width:calc(var(--size-300)*6);--leftbar-row-action-height:var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity)}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-min-width:var(--leftbar-row-alpha-width)}.dt-leftbar-row:hover .d-presence{--presence-color-border-base:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row:hover .d-avatar__count{--avatar-count-color-shadow:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread{--leftbar-row-description-font-weight:var(--fw-bold);--leftbar-row-alpha-color-foreground:var(--leftbar-row-color-foreground)}.dt-leftbar-row--has-unread:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-visibility:hidden}.dt-leftbar-row--muted{--leftbar-row-opacity:50%}.dt-leftbar-row--selected{--leftbar-row-color-background:var(--theme-sidebar-selected-row-color-background);--leftbar-row-color-foreground:var(--theme-sidebar-selected-row-color)}.dt-leftbar-row--selected .d-avatar__count{--avatar-count-color-shadow:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--action-focused{--leftbar-row-omega-visibility:hidden;--leftbar-row-omega-min-width:var(--leftbar-row-alpha-width)}.dt-leftbar-row__is-typing{--is-typing-size-shape:calc(var(--size-300)*6);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--br-pill);opacity:.75}.dt-leftbar-row__is-typing span{transition:all .5s ease;background:var(--bgc-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--br-pill);animation:wave var(--td150) ease infinite}.dt-leftbar-row__is-typing span:first-child{animation-delay:0}.dt-leftbar-row__is-typing span:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary{display:flex;align-items:center;flex:1;width:100%;text-align:left;color:var(--leftbar-row-color-foreground);text-decoration:none;background-color:var(--leftbar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);-webkit-appearance:none;appearance:none;font-size:inhert;line-height:inherit;margin:0;border:0;padding:0;cursor:pointer}.dt-leftbar-row__primary:hover{--leftbar-row-color-background:var(--theme-sidebar-row-color-background-hover)}.dt-leftbar-row__primary:active{--leftbar-row-color-background:var(--theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary:focus-visible{box-shadow:var(--bs-focus-ring-inset)}.dt-leftbar-row__action{position:absolute;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom)*-1))}.dt-leftbar-row__action-button{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row:hover .dt-leftbar-row__action-button,.dt-leftbar-row__action-button:focus-visible{opacity:1}.dt-leftbar-row__alpha{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--space-400);padding-right:var(--space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height)}.dt-leftbar-row__label{flex:1;min-width:0}.dt-leftbar-row__omega{display:flex;gap:var(--space-300);justify-content:end;align-items:center;box-sizing:border-box;min-width:var(--leftbar-row-omega-min-width);height:var(--leftbar-row-omega-height);padding-left:var(--space-400);padding-right:var(--space-400);visibility:var(--leftbar-row-omega-visibility)}.dt-leftbar-row__active-voice{color:var(--fc-success);-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd{padding-top:var(--space-200);padding-right:var(--space-300);color:var(--fc-tertiary);font-size:var(--fs-100);line-height:var(--lh-400);font-weight:var(--fw-medium)}.dt-leftbar-row__description{font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height)}.dt-leftbar-row__description,.dt-leftbar-row__status{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__status{color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--space-100)}.dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--theme-sidebar-status-color)}.dt-leftbar-row__icon-cc{border-radius:var(--size-200);width:calc(var(--size-300)*3.5);height:calc(var(--size-300)*3.5)}.opacity-pulsate{-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}
+.d-avatar--image-loaded{background-color:initial;background-image:unset}.dt-default-list-item,.dt-default-list-item--left,.dt-default-list-item--right{min-height:28px}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--bgc-moderate-opaque)}.dt-list-item--highlighted:active{background-color:var(--bgc-bold-opaque)}.dt-list-item:focus-visible{outline:none;box-shadow:var(--bs-focus-ring)}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}50%{fill:var(--placeholder-to-color,var(--black-100));background:var(--placeholder-to-color,var(--black-100))}90%{fill:var(--placeholder-from-color,var(--black-300));background:var(--placeholder-from-color,var(--black-300))}}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--space-300) calc(var(--space-300)*3)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-quint)}.tippy-box[data-popper-escaped] .d-popover__dialog,.tippy-box[data-popper-reference-hidden] .d-popover__dialog{visibility:hidden;pointer-events:none}.d-context-menu-list{width:calc(var(--size-300)*48)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{border-top:var(--size-100) solid var(--bc-default);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.tippy-box[data-popper-escaped] .d-tooltip,.tippy-box[data-popper-reference-hidden] .d-tooltip{visibility:hidden;pointer-events:none}.root-layout__body{display:flex;flex-wrap:wrap;gap:0;box-shadow:none}.root-layout__body--invert{flex-direction:row-reverse}.root-layout__sidebar{flex-grow:1;box-shadow:none}.root-layout__content{flex-basis:0;flex-grow:999;box-shadow:none}.root-layout__header--sticky{position:sticky;top:0}.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{margin-top:calc(var(--space-300)*3*-1);width:var(--size-500);height:var(--size-500);padding:var(--space-400);border-radius:var(--size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--bgc-moderate-opaque)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--bgc-contrast);color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header button{color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc:var(--bgc-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-400);min-width:20%}.d-top-banner-info__middle{display:flex;align-items:center;gap:var(--size-300)}.d-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--size-300);margin:var(--space-300) var(--space-500) var(--space-300) 0;min-width:20%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base1);display:flex;justify-content:center;align-items:center;border-color:var(--purple-600);background-color:var(--purple-600)}.dt-leftbar-row{--leftbar-row-color-foreground:var(--theme-sidebar-color);--leftbar-row-color-background:var(--theme-sidebar-row-color-background);--leftbar-row-radius:100em;--leftbar-row-opacity:100%;--leftbar-row-alpha-color-foreground:var(--theme-sidebar-icon-color);--leftbar-row-alpha-width:calc(var(--size-300)*10);--leftbar-row-alpha-height:calc(var(--size-300)*9);--leftbar-row-omega-min-width:0;--leftbar-row-omega-height:var(--leftbar-row-alpha-height);--leftbar-row-omega-visibility:visible;--leftbar-row-description-font-weight:var(--fw-normal);--leftbar-row-description-font-size:var(--fs-200);--leftbar-row-description-line-height:var(--lh-200);--leftbar-row-status-color-foreground:var(--theme-sidebar-status-color);--leftbar-row-status-font-size:var(--fs-100);--leftbar-row-status-line-height:var(--lh-100);--leftbar-row-action-position-right:var(--size-400);--leftbar-row-action-position-bottom:50%;--leftbar-row-action-width:calc(var(--size-300)*6);--leftbar-row-action-height:var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity)}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-min-width:var(--leftbar-row-alpha-width)}.dt-leftbar-row:hover .d-presence{--presence-color-border-base:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row:hover .d-avatar__count{--avatar-count-color-shadow:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread{--leftbar-row-description-font-weight:var(--fw-bold);--leftbar-row-alpha-color-foreground:var(--leftbar-row-color-foreground)}.dt-leftbar-row--has-unread:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-visibility:hidden}.dt-leftbar-row--muted{--leftbar-row-opacity:50%}.dt-leftbar-row--selected{--leftbar-row-color-background:var(--theme-sidebar-selected-row-color-background);--leftbar-row-color-foreground:var(--theme-sidebar-selected-row-color)}.dt-leftbar-row--selected .d-avatar__count{--avatar-count-color-shadow:var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--action-focused{--leftbar-row-omega-visibility:hidden;--leftbar-row-omega-min-width:var(--leftbar-row-alpha-width)}.dt-leftbar-row__is-typing{--is-typing-size-shape:calc(var(--size-300)*6);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--br-pill);opacity:.75}.dt-leftbar-row__is-typing span{transition:all .5s ease;background:var(--bgc-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--br-pill);animation:wave var(--td150) ease infinite}.dt-leftbar-row__is-typing span:first-child{animation-delay:0}.dt-leftbar-row__is-typing span:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary{display:flex;align-items:center;flex:1;width:100%;text-align:left;color:var(--leftbar-row-color-foreground);text-decoration:none;background-color:var(--leftbar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);-webkit-appearance:none;appearance:none;font-size:inhert;line-height:inherit;margin:0;border:0;padding:0;cursor:pointer}.dt-leftbar-row__primary:hover{--leftbar-row-color-background:var(--theme-sidebar-row-color-background-hover)}.dt-leftbar-row__primary:active{--leftbar-row-color-background:var(--theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary:focus-visible{box-shadow:var(--bs-focus-ring-inset)}.dt-leftbar-row__action{position:absolute;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom)*-1))}.dt-leftbar-row__action-button{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row:hover .dt-leftbar-row__action-button,.dt-leftbar-row__action-button:focus-visible{opacity:1}.dt-leftbar-row__alpha{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--space-400);padding-right:var(--space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height)}.dt-leftbar-row__label{flex:1;min-width:0}.dt-leftbar-row__omega{display:flex;gap:var(--space-300);justify-content:end;align-items:center;box-sizing:border-box;min-width:var(--leftbar-row-omega-min-width);height:var(--leftbar-row-omega-height);padding-left:var(--space-400);padding-right:var(--space-400);visibility:var(--leftbar-row-omega-visibility)}.dt-leftbar-row__active-voice{color:var(--fc-success);-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd{padding-top:var(--space-200);padding-right:var(--space-300);color:var(--fc-tertiary);font-size:var(--fs-100);line-height:var(--lh-400);font-weight:var(--fw-medium)}.dt-leftbar-row__description{font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height)}.dt-leftbar-row__description,.dt-leftbar-row__status{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__status{color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--space-100)}.dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--theme-sidebar-status-color)}.dt-leftbar-row__icon-cc{border-radius:var(--size-200);width:calc(var(--size-300)*3.5);height:calc(var(--size-300)*3.5)}.opacity-pulsate{-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}.dt-leftbar-unread-chip__mentions .d-chip__label{font-weight:var(--fw-medium);background-color:var(--theme-mention-color-background);color:var(--theme-mention-color-foreground)}.dt-leftbar-unread-chip__messages .d-chip__label{background-color:var(--bgc-white)}.dt-leftbar-unread-chip .d-chip__label{padding:var(--space-300) var(--space-500) var(--space-300) var(--space-400);box-shadow:var(--bs-md)}