@dialpad/dialtone-vue 2.124.0 → 2.125.1-alpha.1

package/dist/lib/feed-item-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feed-item-row.js","sources":["../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js","../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n  NORMAL: '',\n  SEARCHED: 'dt-feed-item-row--state-searched',\n  ERROR: 'dt-feed-item-row--state-error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n  FEED_ROW_STATE_BACKGROUND_COLOR,\n  DEFAULT_FEED_ROW_STATE,\n};\n","<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"['dt-feed-item-row', listItemClasses]\"\n    data-qa=\"dt-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #left>\n      <div\n        v-if=\"showHeader\"\n        class=\"dt-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          />\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"dt-feed-item-row__left-time\"\n        data-qa=\"dt-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"dt-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-feed-item-row--header\"\n        class=\"dt-feed-item-row__header\"\n      >\n        <p class=\"dt-feed-item-row__header__name\">\n          {{ displayName }}\n        </p>\n        <time\n          class=\"dt-feed-item-row__header__time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"$slots.attachment\"\n        data-qa=\"dt-feed-item-row--attachment\"\n        class=\"dt-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #bottom>\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"dt-feed-item-row__reactions\"\n        data-qa=\"dt-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n      <div\n        v-if=\"$slots.threading\"\n        class=\"dt-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n    </template>\n\n    <!-- Action menu -->\n    <template #right>\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-feed-item-row--menu\"\n        class=\"dt-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\n\nexport default {\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        ...this.$listeners,\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'dt-feed-item-row',\n        { 'dt-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'dt-feed-item-row--state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState, oldState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-feed-item-row {\n\n  width: var(--dt-size-100-percent);\n  box-sizing: border-box;\n  position: relative;\n  padding: var(--dt-space-300) var(--dt-space-500);\n\n  &:focus-visible {\n    box-shadow: var(--dt-shadow-focus-inset);\n  }\n\n  &--state-searched {\n    background-color: var(--dt-color-surface-warning-subtle);\n  }\n\n  &--state-error {\n    background-color: var(--dt-color-surface-critical-subtle);\n  }\n\n  &--active {\n    background-color: var(--dt-color-surface-secondary-opaque);\n  }\n\n  &--state-transition {\n    transition-duration: 2s;\n    transition-delay: 0s;\n    transition-timing-function: var(--ttf-in-out);\n    transition-property: background-color;\n  }\n\n  &__avatar-container {\n    padding-top: var(--dt-space-300);\n    padding-bottom: var(--dt-space-300);\n  }\n\n  &__content {\n    padding-left: var(--dt-space-300);\n  }\n\n  &__attachment {\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-300);\n\n    &:deep(.dt-feed-item-row__image)  {\n      border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);\n      border-radius: var(--dt-size-radius-400);\n      display: block;\n      max-width: 30rem;\n      max-height: 30rem;\n      min-width: 5.6rem;\n      min-height: 5.6rem;\n    }\n\n    &:deep(.dt-feed-item-row__video)  {\n      display: block;\n      height: 25.0rem;\n    }\n  }\n\n  &__header {\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;\n    gap: var(--dt-space-300);\n    font-size: var(--dt-font-size-200);\n    line-height: var(--dt-font-line-height-300);\n\n    &__name {\n      font-weight: var(--dt-font-weight-bold);\n    }\n\n    &__time {\n      font-size: var(--dt-font-size-100);\n      color: var(--dt-color-foreground-tertiary);\n      flex-shrink: 0;\n    }\n  }\n\n  &__reactions {\n    display: flex;\n    flex-wrap: wrap;\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n    padding-left: var(--dt-space-300);\n  }\n\n  &__threading {\n    padding-top: var(--dt-space-200);\n    padding-bottom: var(--dt-space-200);\n  }\n\n  &__left-time {\n    color: var(--dt-color-foreground-tertiary);\n    font-size: var(--dt-font-size-100);\n    font-weight: var(--dt-font-weight-normal);\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  &__menu {\n    position: absolute;\n    top: var(--dt-space-550-negative);\n    right: var(--dt-space-450);\n  }\n\n  &:deep(> .dt-item-layout) {\n    font: var(--dt-typography-body-md-compact);\n    min-height: initial;\n    padding: 0px;\n  }\n\n  &:deep(> .dt-item-layout > .dt-item-layout--left) {\n    align-self: flex-start;\n    text-align: end;\n    display: block;\n    padding-right: var(--dt-space-300);\n    padding-left: var(--dt-space-0);\n    // min-width = avatar width + padding\n    min-width: calc(var(--dt-space-600) + var(--dt-space-300));\n  }\n\n  &:deep(> .dt-item-layout > .dt-item-layout--right) {\n    padding: 0;\n    min-width: initial;\n  }\n\n  &:deep(> .dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom) {\n    display: flex;\n    flex-direction: column;\n    margin-top: 0;\n  }\n}\n</style>\n"],"names":["FEED_ROW_STATE_BACKGROUND_COLOR","DEFAULT_FEED_ROW_STATE","_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","Modal","state","event","newState","oldState","e","bool"],"mappings":"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"}

package/dist/lib/feed-pill.js

@@ -0,0 +1,142 @@
+import { n as l } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtItemLayout as n } from "./item-layout.js";
+import { DtIcon as a } from "./icon.js";
+import { DtCollapsible as s } from "./collapsible.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+import "./utils.js";
+import "./constants.js";
+import "vue";
+import "./button.js";
+import "../chunks/link_constants-vIUB92L4.js";
+import "./lazy-show.js";
+const o = {
+  default: "dt-recipe-feed-item-pill__border-default",
+  ai: "dt-recipe-feed-item-pill__border-ai",
+  critical: "dt-recipe-feed-item-pill__border-critical"
+}, d = {
+  name: "DtRecipeFeedItemPill",
+  components: { DtItemLayout: n, DtIcon: a, DtCollapsible: s },
+  props: {
+    /**
+     * Accepts a DtIcon name to be shown in the left
+     */
+    iconName: {
+      type: String,
+      default: () => ""
+    },
+    /**
+     * Bolded primary text
+     */
+    title: {
+      type: String,
+      default: () => ""
+    },
+    /**
+     * Additional styling around the pill
+     */
+    wrapperClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional styling for the pill
+     */
+    buttonClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Aria label for feed pill
+     */
+    ariaLabel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)
+     */
+    toggleable: {
+      type: Boolean,
+      default: () => !0
+    },
+    defaultToggled: {
+      type: Boolean,
+      default: () => !1
+    },
+    /**
+     * Callbox border color
+     * @values default, ai, critical
+     */
+    borderColor: {
+      type: String,
+      default: "default",
+      validator: (i) => Object.keys(o).includes(i)
+    }
+  },
+  data() {
+    return {
+      hover: !1,
+      expanded: this.defaultToggled
+    };
+  },
+  computed: {
+    computedIcon() {
+      return this.toggleable && this.hover ? this.expanded ? "chevron-down" : "chevron-right" : this.iconName;
+    },
+    toggleableClass() {
+      return this.toggleable ? "d-c-pointer" : "";
+    },
+    borderClass() {
+      return o[this.borderColor];
+    }
+  },
+  methods: {
+    onClick() {
+      this.toggleable && (this.expanded = !this.expanded);
+    }
+  }
+};
+var p = function() {
+  var e = this, t = e._self._c;
+  return t("div", { class: ["dt-recipe-feed-item-pill__border", e.borderClass, e.wrapperClass] }, [t("div", { staticClass: "dt-recipe-feed-item-pill__wrapper" }, [t("dt-collapsible", { attrs: { open: e.expanded }, scopedSlots: e._u([{ key: "anchor", fn: function() {
+    return [t("button", { class: ["dt-recipe-feed-item-pill__button", e.toggleableClass, e.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": e.ariaLabel }, on: { focusin: function(r) {
+      e.hover = !0;
+    }, focusout: function(r) {
+      e.hover = !1;
+    }, mouseenter: function(r) {
+      e.hover = !0;
+    }, mouseleave: function(r) {
+      e.hover = !1;
+    }, click: e.onClick } }, [t("dt-item-layout", { staticClass: "dt-recipe-feed-item-pill__layout", scopedSlots: e._u([{ key: "left", fn: function() {
+      return [t("dt-icon", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon", size: "300", name: e.computedIcon } })];
+    }, proxy: !0 }, { key: "subtitle", fn: function() {
+      return [e._t("subtitle")];
+    }, proxy: !0 }, { key: "bottom", fn: function() {
+      return [e._t("bottom")];
+    }, proxy: !0 }, { key: "right", fn: function() {
+      return [e._t("right")];
+    }, proxy: !0 }], null, !0) }, [e._t("title", function() {
+      return [t("span", { staticClass: "dt-recipe-feed-item-pill__title" }, [e._v(e._s(e.title))])];
+    })], 2)], 1)];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [t("div", { staticClass: "dt-recipe-feed-item-pill__content" }, [e._t("content")], 2)];
+  }, proxy: !0 }], null, !0) })], 1)]);
+}, c = [], u = /* @__PURE__ */ l(
+  d,
+  p,
+  c,
+  !1,
+  null,
+  "dab5b252",
+  null,
+  null
+);
+const L = u.exports;
+export {
+  L as DtRecipeFeedItemPill,
+  o as FEED_ITEM_PILL_BORDER_COLORS
+};
+//# sourceMappingURL=feed-pill.js.map

package/dist/lib/feed-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feed-pill.js","sources":["../../recipes/conversation_view/feed_pill/feed_item_pill_constants.js","../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'dt-recipe-feed-item-pill__border-default',\n  ai: 'dt-recipe-feed-item-pill__border-ai',\n  critical: 'dt-recipe-feed-item-pill__border-critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n","<template>\n  <div :class=\"['dt-recipe-feed-item-pill__border', borderClass, wrapperClass]\">\n    <div class=\"dt-recipe-feed-item-pill__wrapper\">\n      <dt-collapsible :open=\"expanded\">\n        <template #anchor>\n          <button\n            data-qa=\"dt-recipe-feed-item-pill\"\n            :aria-label=\"ariaLabel\"\n            :class=\"['dt-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n            @focusin=\"hover = true\"\n            @focusout=\"hover = false\"\n            @mouseenter=\"hover = true\"\n            @mouseleave=\"hover = false\"\n            @click=\"onClick\"\n          >\n            <dt-item-layout class=\"dt-recipe-feed-item-pill__layout\">\n              <slot name=\"title\">\n                <span class=\"dt-recipe-feed-item-pill__title\">{{ title }}</span>\n              </slot>\n              <template #left>\n                <dt-icon\n                  data-qa=\"dt-recipe-feed-item-pill__icon\"\n                  size=\"300\"\n                  class=\"dt-recipe-feed-item-pill__icon\"\n                  :name=\"computedIcon\"\n                />\n              </template>\n              <template #subtitle>\n                <slot name=\"subtitle\" />\n              </template>\n              <template #bottom>\n                <slot name=\"bottom\" />\n              </template>\n              <template #right>\n                <slot name=\"right\" />\n              </template>\n            </dt-item-layout>\n          </button>\n        </template>\n        <template #content>\n          <div class=\"dt-recipe-feed-item-pill__content\">\n            <slot name=\"content\" />\n          </div>\n        </template>\n      </dt-collapsible>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\n\nexport default {\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtIcon, DtCollapsible },\n\n  props: {\n    /**\n     * Accepts a DtIcon name to be shown in the left\n     */\n    iconName: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling around the pill\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the pill\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n     */\n    toggleable: {\n      type: Boolean,\n      default: () => true,\n    },\n\n    defaultToggled: {\n      type: Boolean,\n      default: () => false,\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(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n    },\n  },\n\n  data () {\n    return {\n      hover: false,\n      expanded: this.defaultToggled,\n    };\n  },\n\n  computed: {\n    computedIcon () {\n      if (this.toggleable && this.hover) {\n        return this.expanded ? 'chevron-down' : 'chevron-right';\n      } else {\n        return this.iconName;\n      }\n    },\n\n    toggleableClass () {\n      return this.toggleable ? 'd-c-pointer' : '';\n    },\n\n    borderClass () {\n      return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n    },\n  },\n\n  methods: {\n    onClick () {\n      if (!this.toggleable) return;\n\n      this.expanded = !this.expanded;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-recipe-feed-item-pill {\n  &__wrapper {\n    background-color: var(--dt-color-surface-secondary);\n    padding: var(--dt-space-400);\n  }\n\n  &__button {\n    background-color: var(--dt-color-surface-moderate);\n    text-align: left;\n    width: 100%;\n    cursor: pointer;\n    border-width: 0;\n    border-radius: var(--dt-size-radius-600);\n    --button-padding-x: var(--button-padding-y-md);\n    --button-padding-y: var(--button-padding-y-md);\n    --button-color-text: var(--dt-action-color-foreground-muted-default);\n    --button-border-radius: var(--dt-size-radius-600);\n  }\n\n  &__layout {\n    padding: var(--dt-space-400);\n    gap: var(--dt-space-300);\n    width: 100%;\n\n    &:deep(> .dt-item-layout--left) {\n      padding-right: var(--dt-space-0);\n      justify-content: center;\n    }\n  }\n\n  &__icon {\n    animation: fade 0.15s ease-in;\n  }\n\n  &__content {\n    display: flex;\n    justify-content: center;\n  }\n\n  &__title {\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  // Gradient radius solution taken from https://stackoverflow.com/a/53037637\n  &__border {\n    border: double 1px transparent;\n    border-radius: var(--dt-size-radius-600);\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    overflow: hidden;\n  }\n\n  &__border-default {\n    background: var(--dt-color-border-default)\n  }\n\n  &__border-ai {\n    background-image:\n      linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)),\n      var(--dt-badge-color-background-ai);\n  }\n\n  &__border-critical {\n    background: var(--dt-color-foreground-critical);\n  }\n\n  @keyframes fade {\n    0%   {transform: scale(0);}\n    100% {transform: scale(1);}\n  }\n}\n</style>\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","_sfc_main","DtItemLayout","DtIcon","DtCollapsible","color"],"mappings":";;;;;;;;;;;;;;AAAY,MAACA,IAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ,GCmDAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAAC,GAAA,QAAAC,GAAA,eAAAC,EAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAL,CAAA,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,aAAA,KAAA,cAAA,KAAA,QACA,KAAA,WAAA,iBAAA,kBAEA,KAAA;AAAA,IAEA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAL,EAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,MAAA,KAAA,eAEA,KAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/general-row.js

@@ -0,0 +1,379 @@
+import { DtEmojiTextWrapper as _ } from "./emoji-text-wrapper.js";
+import { n as p } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtIcon as f } from "./icon.js";
+import { safeConcatStrings as h } from "./utils.js";
+import { DtBadge as b } from "./badge.js";
+import { DtButton as C } from "./button.js";
+import { DtTooltip as m } from "./tooltip.js";
+import "../chunks/index-o4OMWMuv.js";
+import "emoji-regex";
+import "emoji-toolkit/emoji_strategy.json";
+import "./skeleton.js";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "@dialpad/dialtone-icons/vue2";
+import "./constants.js";
+import "vue";
+import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/popover_constants-qjlEkroB.js";
+import "tippy.js";
+import "./lazy-show.js";
+const a = {
+  INBOX: "inbox",
+  CONTACTS: "contacts",
+  CHANNELS: "channels",
+  HOME: "home",
+  THREADS: "threads",
+  LOCKED_CHANNEL: "locked channel",
+  CONTACT_CENTER: "contact center",
+  QUICK_START: "quick start",
+  COACHING_GROUP: "coaching group",
+  COACHING_CENTER: "coaching center",
+  DIALBOT: "dialbot",
+  ASSIGNED: "assigned",
+  DIGITAL: "digital"
+}, g = {
+  [a.INBOX]: "inbox",
+  [a.CONTACTS]: "contacts",
+  [a.CHANNELS]: "hash",
+  [a.HOME]: "home",
+  [a.THREADS]: "thread",
+  [a.LOCKED_CHANNEL]: "lock",
+  [a.QUICK_START]: "sparkle",
+  [a.COACHING_GROUP]: "users",
+  [a.COACHING_CENTER]: "external-link",
+  "locked channel unread": "lock-filled",
+  "channel unread": "hash-bold",
+  [a.ASSIGNED]: "at-sign",
+  [a.DIGITAL]: "laptop-2"
+}, o = {
+  "magenta-200": "d-bgc-magenta-200",
+  "green-200": "d-bgc-green-200",
+  "gold-300": "d-bgc-gold-300",
+  "purple-600": "d-bgc-purple-600",
+  "magenta-300": "d-bgc-magenta-300",
+  "purple-300": "d-bgc-purple-300",
+  "green-500": "d-bgc-green-500",
+  "purple-100": "d-bgc-purple-100",
+  "magenta-400": "d-bgc-magenta-400",
+  "magenta-100": "d-bgc-magenta-100",
+  "black-300": "d-bgc-black-300"
+}, T = "If type is contact center, color must be oneof the following:" + Object.keys(o).join(", "), y = [
+  "300",
+  "200"
+], w = {
+  name: "DtRecipeLeftbarGeneralRowIcon",
+  components: { DtIcon: f },
+  props: {
+    type: {
+      type: String,
+      default: null
+    },
+    color: {
+      type: String,
+      default: null
+    },
+    iconSize: {
+      type: String,
+      default: "300"
+    }
+  },
+  computed: {
+    isIconType() {
+      return ![a.DIALBOT, a.CONTACT_CENTER].includes(this.type);
+    },
+    isContactCenterType() {
+      return this.type === a.CONTACT_CENTER;
+    },
+    isDialbotType() {
+      return this.type === a.DIALBOT;
+    },
+    getIconName() {
+      return g[this.type];
+    },
+    contactCenterIconClasses() {
+      return [
+        "dt-leftbar-row__icon-cc",
+        o[this.color]
+      ];
+    },
+    dialbotClasses() {
+      return [
+        "d-d-flex",
+        "d-ai-center",
+        "d-jc-center"
+      ];
+    }
+  }
+};
+var E = function() {
+  var t = this, e = t._self._c;
+  return t.isIconType ? e("dt-icon", { attrs: { name: t.getIconName, size: t.iconSize } }) : t.isContactCenterType ? e("div", { class: t.contactCenterIconClasses }) : t.isDialbotType ? e("div", { class: t.dialbotClasses, attrs: { "data-qa": "general-row-dialbot" } }, [e("dt-icon", { attrs: { name: "dialbot", size: "500" } })], 1) : t._e();
+}, A = [], N = /* @__PURE__ */ p(
+  w,
+  E,
+  A,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const R = N.exports, v = {
+  name: "DtRecipeGeneralRow",
+  components: {
+    DtEmojiTextWrapper: _,
+    DtBadge: b,
+    DtIcon: f,
+    DtButton: C,
+    DtTooltip: m,
+    DtRecipeLeftbarGeneralRowIcon: R
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Determines the icon to show.
+     * If type is contact center, the color prop must be provided and will determine the color of the icon
+     */
+    type: {
+      type: String,
+      default: "inbox",
+      validator: (r) => Object.values(a).includes(r)
+    },
+    /**
+     * Will be read out by a screen reader upon focus of this row. If not defined "description" will be read.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot
+     * you still must input this as it will be displayed as the "title" attribute for the row.
+     */
+    description: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Determines the color of the contact center icon
+     */
+    color: {
+      type: String,
+      default: null,
+      validator: (r) => Object.keys(o).includes(r)
+    },
+    /**
+     * Styles the row with an increased font weight to convey it has unreads. This must be true to see
+     * the unread count badge.
+     */
+    hasUnreads: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Number of unread messages
+     */
+    unreadCount: {
+      type: String,
+      default: null
+    },
+    /**
+     * Text shown when the unread count is hovered.
+     */
+    unreadCountTooltip: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines if the row is selected
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Gives a faded style to be used when muted
+     */
+    muted: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Shows styling to represent an active voice chat. This will display over unreadCount.
+     */
+    activeVoiceChat: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Acronym used to represent "Do not Disturb" state. If entered will display the entered text alongside
+     * unreadCount.
+     */
+    dndText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Text shown in tooltip when you hover the dndText
+     */
+    dndTextTooltip: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Whether the row should have a call button. Usually only applicable to individual contact rows.
+     */
+    hasCallButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Text shown when the call button is hovered.
+     */
+    callButtonTooltip: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Shows an "is typing" animation over the avatar when true.
+     */
+    isTyping: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Sets the size of the icon.
+     */
+    iconSize: {
+      type: String,
+      default: "300",
+      validator: (r) => y.includes(r)
+    }
+  },
+  emits: [
+    /**
+     * Native click event on the row itself
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Call button clicked
+     *
+     * @event call
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "call"
+  ],
+  data() {
+    return {
+      actionFocused: !1,
+      labelWidth: "100%"
+    };
+  },
+  computed: {
+    leftbarGeneralRowClasses() {
+      return [
+        "dt-leftbar-row",
+        {
+          "dt-leftbar-row--no-action": !this.hasCallButton,
+          "dt-leftbar-row--has-unread": this.hasUnreads,
+          "dt-leftbar-row--unread-count": this.showUnreadCount,
+          "dt-leftbar-row--selected": this.selected,
+          "dt-leftbar-row--muted": this.muted,
+          "dt-leftbar-row--action-focused": this.actionFocused
+        }
+      ];
+    },
+    getIcon() {
+      switch (this.type) {
+        case a.CHANNELS:
+          if (this.hasUnreads)
+            return "channel unread";
+          break;
+        case a.LOCKED_CHANNEL:
+          if (this.hasUnreads)
+            return "locked channel unread";
+          break;
+      }
+      return this.type;
+    },
+    getAriaLabel() {
+      return this.ariaLabel ? this.ariaLabel : h([this.description, this.unreadCountTooltip, this.dndTextTooltip]);
+    },
+    hasActions() {
+      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;
+    },
+    showUnreadCount() {
+      return !!this.unreadCount && this.hasUnreads;
+    }
+  },
+  watch: {
+    $props: {
+      immediate: !0,
+      deep: !0,
+      async handler() {
+        this.validateProps(), await this.$nextTick(), this.adjustLabelWidth();
+      }
+    }
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth), this.resizeObserver.observe(this.$el), this.adjustLabelWidth();
+  },
+  beforeDestroy: function() {
+    this.resizeObserver.disconnect();
+  },
+  methods: {
+    validateProps() {
+      this.type === a.CONTACT_CENTER && !Object.keys(o).includes(this.color) && console.error(T);
+    },
+    adjustLabelWidth() {
+      var s, i, l, c, d, u;
+      const r = ((i = (s = this.$el) == null ? void 0 : s.querySelector(".dt-leftbar-row__primary")) == null ? void 0 : i.clientWidth) || 0, t = ((c = (l = this.$el) == null ? void 0 : l.querySelector(".dt-leftbar-row__omega")) == null ? void 0 : c.clientWidth) || 0, e = ((u = (d = this.$el) == null ? void 0 : d.querySelector(".dt-leftbar-row__alpha")) == null ? void 0 : u.clientWidth) || 0, n = 16;
+      this.labelWidth = r - (t + e + n) + "px";
+    }
+  }
+};
+var O = function() {
+  var t = this, e = t._self._c;
+  return e("div", { class: t.leftbarGeneralRowClasses, attrs: { "data-qa": "dt-leftbar-row" } }, [e("a", t._g(t._b({ staticClass: "dt-leftbar-row__primary", attrs: { "data-qa": "data-qa" in t.$attrs ? t.$attrs["data-qa"] : "dt-leftbar-row-link", "aria-label": t.getAriaLabel, title: t.description, href: "href" in t.$attrs ? t.$attrs.href : "javascript:void(0)" } }, "a", t.$attrs, !1), t.$listeners), [e("div", { staticClass: "dt-leftbar-row__alpha" }, [t.isTyping ? e("div", { staticClass: "dt-leftbar-row__is-typing" }, [e("span"), e("span"), e("span")]) : t._t("left", function() {
+    return [e("dt-recipe-leftbar-general-row-icon", { attrs: { type: t.getIcon, color: t.color, "icon-size": t.iconSize, "data-qa": "dt-leftbar-row-icon" } })];
+  })], 2), e("div", { staticClass: "dt-leftbar-row__label", style: `flex-basis: ${t.labelWidth}` }, [t._t("label", function() {
+    return [e("dt-emoji-text-wrapper", { staticClass: "dt-leftbar-row__description", attrs: { "data-qa": "dt-leftbar-row-description", size: "200" } }, [t._v(" " + t._s(t.description) + " ")])];
+  })], 2)]), t.hasActions ? e("div", { staticClass: "dt-leftbar-row__omega" }, [t.dndText ? e("dt-tooltip", { attrs: { placement: "top", message: t.dndTextTooltip }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+    return [e("div", { ref: "dt-leftbar-row-dnd", staticClass: "dt-leftbar-row__dnd", attrs: { "data-qa": "dt-leftbar-row-dnd" } }, [t._v(" " + t._s(t.dndText) + " ")])];
+  }, proxy: !0 }], null, !1, 490758222) }) : t._e(), t.activeVoiceChat ? e("div", { staticClass: "dt-leftbar-row__active-voice" }, [e("dt-icon", { attrs: { size: "300", name: "waveform" } })], 1) : t.showUnreadCount ? e("dt-tooltip", { attrs: { message: t.unreadCountTooltip, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+    return [e("dt-badge", { staticClass: "dt-leftbar-row__unread-badge", attrs: { kind: "count", type: "bulletin", "data-qa": "dt-leftbar-row-unread-badge" } }, [t._v(" " + t._s(t.unreadCount) + " ")])];
+  }, proxy: !0 }], null, !1, 462525554) }) : t._e(), t.hasCallButton ? e("div", { staticClass: "dt-leftbar-row__action", attrs: { "data-qa": "dt-leftbar-row-action" } }, [e("dt-tooltip", { attrs: { message: t.callButtonTooltip, placement: "top" }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+    return [e("dt-button", { staticClass: "dt-leftbar-row__action-button", attrs: { "data-qa": "dt-leftbar-row-action-call-button", circle: !0, size: "xs", kind: "inverted", "aria-label": t.callButtonTooltip }, on: { focus: function(n) {
+      t.actionFocused = !0;
+    }, blur: function(n) {
+      t.actionFocused = !1;
+    }, click: function(n) {
+      return n.stopPropagation(), t.$emit("call", n);
+    } }, scopedSlots: t._u([{ key: "icon", fn: function() {
+      return [e("dt-icon", { attrs: { name: "phone", size: "200" } })];
+    }, proxy: !0 }], null, !1, 990728611) })];
+  }, proxy: !0 }], null, !1, 4239858356) })], 1) : t._e()], 1) : t._e()]);
+}, S = [], L = /* @__PURE__ */ p(
+  v,
+  O,
+  S,
+  !1,
+  null,
+  "ca5d7362",
+  null,
+  null
+);
+const Y = L.exports;
+export {
+  Y as DtRecipeGeneralRow,
+  o as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,
+  T as LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,
+  g as LEFTBAR_GENERAL_ROW_ICON_MAPPING,
+  y as LEFTBAR_GENERAL_ROW_ICON_SIZES,
+  a as LEFTBAR_GENERAL_ROW_TYPES
+};
+//# sourceMappingURL=general-row.js.map

package/dist/lib/general-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"general-row.js","sources":["../../recipes/leftbar/general_row/general_row_constants.js","../../recipes/leftbar/general_row/leftbar_general_row_icon.vue","../../recipes/leftbar/general_row/general_row.vue"],"sourcesContent":["export const LEFTBAR_GENERAL_ROW_TYPES = {\n  INBOX: 'inbox',\n  CONTACTS: 'contacts',\n  CHANNELS: 'channels',\n  HOME: 'home',\n  THREADS: 'threads',\n  LOCKED_CHANNEL: 'locked channel',\n  CONTACT_CENTER: 'contact center',\n  QUICK_START: 'quick start',\n  COACHING_GROUP: 'coaching group',\n  COACHING_CENTER: 'coaching center',\n  DIALBOT: 'dialbot',\n  ASSIGNED: 'assigned',\n  DIGITAL: 'digital',\n};\n\nexport const LEFTBAR_GENERAL_ROW_ICON_MAPPING = {\n  [LEFTBAR_GENERAL_ROW_TYPES.INBOX]: 'inbox',\n  [LEFTBAR_GENERAL_ROW_TYPES.CONTACTS]: 'contacts',\n  [LEFTBAR_GENERAL_ROW_TYPES.CHANNELS]: 'hash',\n  [LEFTBAR_GENERAL_ROW_TYPES.HOME]: 'home',\n  [LEFTBAR_GENERAL_ROW_TYPES.THREADS]: 'thread',\n  [LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL]: 'lock',\n  [LEFTBAR_GENERAL_ROW_TYPES.QUICK_START]: 'sparkle',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_GROUP]: 'users',\n  [LEFTBAR_GENERAL_ROW_TYPES.COACHING_CENTER]: 'external-link',\n  'locked channel unread': 'lock-filled',\n  'channel unread': 'hash-bold',\n  [LEFTBAR_GENERAL_ROW_TYPES.ASSIGNED]: 'at-sign',\n  [LEFTBAR_GENERAL_ROW_TYPES.DIGITAL]: 'laptop-2',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS = {\n  'magenta-200': 'd-bgc-magenta-200',\n  'green-200': 'd-bgc-green-200',\n  'gold-300': 'd-bgc-gold-300',\n  'purple-600': 'd-bgc-purple-600',\n  'magenta-300': 'd-bgc-magenta-300',\n  'purple-300': 'd-bgc-purple-300',\n  'green-500': 'd-bgc-green-500',\n  'purple-100': 'd-bgc-purple-100',\n  'magenta-400': 'd-bgc-magenta-400',\n  'magenta-100': 'd-bgc-magenta-100',\n  'black-300': 'd-bgc-black-300',\n};\n\nexport const LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR = 'If type is contact center, color must be one' +\n    'of the following:' + Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).join(', ');\n\nexport const LEFTBAR_GENERAL_ROW_ICON_SIZES = [\n  '300',\n  '200',\n];\n\nexport default {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n};\n","<template>\n  <dt-icon\n    v-if=\"isIconType\"\n    :name=\"getIconName\"\n    :size=\"iconSize\"\n  />\n  <div\n    v-else-if=\"isContactCenterType\"\n    :class=\"contactCenterIconClasses\"\n  />\n  <div\n    v-else-if=\"isDialbotType\"\n    :class=\"dialbotClasses\"\n    data-qa=\"general-row-dialbot\"\n  >\n    <dt-icon\n      name=\"dialbot\"\n      size=\"500\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport {\n  LEFTBAR_GENERAL_ROW_ICON_MAPPING as ICON_MAPPING,\n  LEFTBAR_GENERAL_ROW_TYPES as TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS as COLORS,\n} from '@/recipes/leftbar/general_row/general_row_constants';\n\nexport default {\n  name: 'DtRecipeLeftbarGeneralRowIcon',\n  components: { DtIcon },\n  props: {\n    type: {\n      type: String,\n      default: null,\n    },\n\n    color: {\n      type: String,\n      default: null,\n    },\n\n    iconSize: {\n      type: String,\n      default: '300',\n    },\n  },\n\n  computed: {\n    isIconType () {\n      return ![TYPES.DIALBOT, TYPES.CONTACT_CENTER].includes(this.type);\n    },\n\n    isContactCenterType () {\n      return this.type === TYPES.CONTACT_CENTER;\n    },\n\n    isDialbotType () {\n      return this.type === TYPES.DIALBOT;\n    },\n\n    getIconName () {\n      return ICON_MAPPING[this.type];\n    },\n\n    contactCenterIconClasses () {\n      return [\n        'dt-leftbar-row__icon-cc',\n        COLORS[this.color],\n      ];\n    },\n\n    dialbotClasses () {\n      return [\n        'd-d-flex',\n        'd-ai-center',\n        'd-jc-center',\n      ];\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    :class=\"leftbarGeneralRowClasses\"\n    data-qa=\"dt-leftbar-row\"\n  >\n    <a\n      class=\"dt-leftbar-row__primary\"\n      :data-qa=\"'data-qa' in $attrs ? $attrs['data-qa'] : 'dt-leftbar-row-link'\"\n      :aria-label=\"getAriaLabel\"\n      :title=\"description\"\n      :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n      v-bind=\"$attrs\"\n      v-on=\"$listeners\"\n    >\n      <div\n        class=\"dt-leftbar-row__alpha\"\n      >\n        <div\n          v-if=\"isTyping\"\n          class=\"dt-leftbar-row__is-typing\"\n        >\n          <span /><span /><span />\n        </div>\n        <slot\n          v-else\n          name=\"left\"\n        >\n          <dt-recipe-leftbar-general-row-icon\n            :type=\"getIcon\"\n            :color=\"color\"\n            :icon-size=\"iconSize\"\n            data-qa=\"dt-leftbar-row-icon\"\n          />\n        </slot>\n      </div>\n      <div\n        class=\"dt-leftbar-row__label\"\n        :style=\"`flex-basis: ${labelWidth}`\"\n      >\n        <slot name=\"label\">\n          <dt-emoji-text-wrapper\n            class=\"dt-leftbar-row__description\"\n            data-qa=\"dt-leftbar-row-description\"\n            size=\"200\"\n          >\n            {{ description }}\n          </dt-emoji-text-wrapper>\n        </slot>\n      </div>\n    </a>\n    <div\n      v-if=\"hasActions\"\n      class=\"dt-leftbar-row__omega\"\n    >\n      <dt-tooltip\n        v-if=\"dndText\"\n        placement=\"top\"\n        :message=\"dndTextTooltip\"\n      >\n        <template #anchor>\n          <div\n            ref=\"dt-leftbar-row-dnd\"\n            class=\"dt-leftbar-row__dnd\"\n            data-qa=\"dt-leftbar-row-dnd\"\n          >\n            {{ dndText }}\n          </div>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"activeVoiceChat\"\n        class=\"dt-leftbar-row__active-voice\"\n      >\n        <dt-icon\n          size=\"300\"\n          name=\"waveform\"\n        />\n      </div>\n      <dt-tooltip\n        v-else-if=\"showUnreadCount\"\n        :message=\"unreadCountTooltip\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-badge\n            kind=\"count\"\n            type=\"bulletin\"\n            data-qa=\"dt-leftbar-row-unread-badge\"\n            class=\"dt-leftbar-row__unread-badge\"\n          >\n            {{ unreadCount }}\n          </dt-badge>\n        </template>\n      </dt-tooltip>\n      <div\n        v-if=\"hasCallButton\"\n        class=\"dt-leftbar-row__action\"\n        data-qa=\"dt-leftbar-row-action\"\n      >\n        <dt-tooltip\n          :message=\"callButtonTooltip\"\n          placement=\"top\"\n        >\n          <template #anchor>\n            <dt-button\n              class=\"dt-leftbar-row__action-button\"\n              data-qa=\"dt-leftbar-row-action-call-button\"\n              :circle=\"true\"\n              size=\"xs\"\n              kind=\"inverted\"\n              :aria-label=\"callButtonTooltip\"\n              @focus=\"actionFocused = true\"\n              @blur=\"actionFocused = false\"\n              @click.stop=\"$emit('call', $event)\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"phone\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n        </dt-tooltip>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  LEFTBAR_GENERAL_ROW_TYPES,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS,\n  LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR,\n  LEFTBAR_GENERAL_ROW_ICON_SIZES,\n} from './general_row_constants';\nimport { DtBadge } from '@/components/badge';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport DtEmojiTextWrapper from '@/components/emoji_text_wrapper/emoji_text_wrapper.vue';\nimport DtRecipeLeftbarGeneralRowIcon from './leftbar_general_row_icon.vue';\nimport { safeConcatStrings } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGeneralRow',\n\n  components: {\n    DtEmojiTextWrapper,\n    DtBadge,\n    DtIcon,\n    DtButton,\n    DtTooltip,\n    DtRecipeLeftbarGeneralRowIcon,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Determines the icon to show.\n     * If type is contact center, the color prop must be provided and will determine the color of the icon\n     */\n    type: {\n      type: String,\n      default: 'inbox',\n      validator: (type) => {\n        return Object.values(LEFTBAR_GENERAL_ROW_TYPES).includes(type);\n      },\n    },\n\n    /**\n     * Will be read out by a screen reader upon focus of this row. If not defined \"description\" will be read.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text displayed next to the icon. Required. Even if you are overriding this field using the label slot\n     * you still must input this as it will be displayed as the \"title\" attribute for the row.\n     */\n    description: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines the color of the contact center icon\n     */\n    color: {\n      type: String,\n      default: null,\n      validator: (color) => {\n        return Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(color);\n      },\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Gives a faded style to be used when muted\n     */\n    muted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows styling to represent an active voice chat. This will display over unreadCount.\n     */\n    activeVoiceChat: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Acronym used to represent \"Do not Disturb\" state. If entered will display the entered text alongside\n     * unreadCount.\n     */\n    dndText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Text shown in tooltip when you hover the dndText\n     */\n    dndTextTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the row should have a call button. Usually only applicable to individual contact rows.\n     */\n    hasCallButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Text shown when the call button is hovered.\n     */\n    callButtonTooltip: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the size of the icon.\n     */\n    iconSize: {\n      type: String,\n      default: '300',\n      validator: (size) => {\n        return LEFTBAR_GENERAL_ROW_ICON_SIZES.includes(size);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event on the row itself\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Call button clicked\n     *\n     * @event call\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'call',\n  ],\n\n  data () {\n    return {\n      actionFocused: false,\n      labelWidth: '100%',\n    };\n  },\n\n  computed: {\n    leftbarGeneralRowClasses () {\n      return [\n        'dt-leftbar-row',\n        {\n          'dt-leftbar-row--no-action': !this.hasCallButton,\n          'dt-leftbar-row--has-unread': this.hasUnreads,\n          'dt-leftbar-row--unread-count': this.showUnreadCount,\n          'dt-leftbar-row--selected': this.selected,\n          'dt-leftbar-row--muted': this.muted,\n          'dt-leftbar-row--action-focused': this.actionFocused,\n        },\n      ];\n    },\n\n    getIcon () {\n      switch (this.type) {\n        case LEFTBAR_GENERAL_ROW_TYPES.CHANNELS:\n          if (this.hasUnreads) return 'channel unread';\n          break;\n        case LEFTBAR_GENERAL_ROW_TYPES.LOCKED_CHANNEL:\n          if (this.hasUnreads) return 'locked channel unread';\n          break;\n      }\n      return this.type;\n    },\n\n    getAriaLabel () {\n      return this.ariaLabel\n        ? this.ariaLabel\n        : safeConcatStrings([this.description, this.unreadCountTooltip, this.dndTextTooltip]);\n    },\n\n    hasActions () {\n      return this.dndText || this.activeVoiceChat || this.showUnreadCount || this.hasCallButton;\n    },\n\n    showUnreadCount () {\n      return !!this.unreadCount && this.hasUnreads;\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      async handler () {\n        this.validateProps();\n        await this.$nextTick();\n        this.adjustLabelWidth();\n      },\n    },\n  },\n\n  mounted () {\n    this.resizeObserver = new ResizeObserver(this.adjustLabelWidth);\n    this.resizeObserver.observe(this.$el);\n    this.adjustLabelWidth();\n  },\n\n  beforeDestroy: function () {\n    this.resizeObserver.disconnect();\n  },\n\n  methods: {\n    validateProps () {\n      if (this.type === LEFTBAR_GENERAL_ROW_TYPES.CONTACT_CENTER &&\n        !Object.keys(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS).includes(this.color)) {\n        console.error(LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR);\n      }\n    },\n\n    adjustLabelWidth () {\n      const labelWidth = this.$el?.querySelector('.dt-leftbar-row__primary')?.clientWidth || 0;\n      const omegaWidth = this.$el?.querySelector('.dt-leftbar-row__omega')?.clientWidth || 0;\n      const alphaWidth = this.$el?.querySelector('.dt-leftbar-row__alpha')?.clientWidth || 0;\n      const paddings = 16;\n      this.labelWidth = labelWidth - (omegaWidth + alphaWidth + paddings) + 'px';\n    },\n  },\n};\n</script>\n\n<style lang=\"less\" scoped>\n@import \"../style/leftbar_row.less\";\n</style>\n"],"names":["LEFTBAR_GENERAL_ROW_TYPES","LEFTBAR_GENERAL_ROW_ICON_MAPPING","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS","LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR","LEFTBAR_GENERAL_ROW_ICON_SIZES","_sfc_main","DtIcon","TYPES","ICON_MAPPING","COLORS","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","DtRecipeLeftbarGeneralRowIcon","type","color","size","safeConcatStrings","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAY,MAACA,IAA4B;AAAA,EACvC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAmC;AAAA,EAC9C,CAACD,EAA0B,KAAK,GAAG;AAAA,EACnC,CAACA,EAA0B,QAAQ,GAAG;AAAA,EACtC,CAACA,EAA0B,QAAQ,GAAG;AAAA,EACtC,CAACA,EAA0B,IAAI,GAAG;AAAA,EAClC,CAACA,EAA0B,OAAO,GAAG;AAAA,EACrC,CAACA,EAA0B,cAAc,GAAG;AAAA,EAC5C,CAACA,EAA0B,WAAW,GAAG;AAAA,EACzC,CAACA,EAA0B,cAAc,GAAG;AAAA,EAC5C,CAACA,EAA0B,eAAe,GAAG;AAAA,EAC7C,yBAAyB;AAAA,EACzB,kBAAkB;AAAA,EAClB,CAACA,EAA0B,QAAQ,GAAG;AAAA,EACtC,CAACA,EAA0B,OAAO,GAAG;AACvC,GAEaE,IAA4C;AAAA,EACvD,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,eAAe;AAAA,EACf,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AACf,GAEaC,IAAsD,kEACzC,OAAO,KAAKD,CAAyC,EAAE,KAAK,IAAI,GAE7EE,IAAiC;AAAA,EAC5C;AAAA,EACA;AACF,GCtBAC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,QAAAC,EAAA;AAAA,EACA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,CAAA,CAAAC,EAAA,SAAAA,EAAA,cAAA,EAAA,SAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,SAAAA,EAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,SAAAA,EAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAC,EAAA,KAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;qBC+DAJ,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,oBAAAK;AAAA,IACA,SAAAC;AAAA,IACA,QAAAL;AAAA,IACA,UAAAM;AAAA,IACA,WAAAC;AAAA,IACA,+BAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MACA,OAAA,OAAAf,CAAA,EAAA,SAAAe,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MACA,OAAA,KAAAd,CAAA,EAAA,SAAAc,CAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MACAb,EAAA,SAAAa,CAAA;AAAA,IAEA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,2BAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA;AAAA,UACA,6BAAA,CAAA,KAAA;AAAA,UACA,8BAAA,KAAA;AAAA,UACA,gCAAA,KAAA;AAAA,UACA,4BAAA,KAAA;AAAA,UACA,yBAAA,KAAA;AAAA,UACA,kCAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAAjB,EAAA;AACA,cAAA,KAAA;AAAA,mBAAA;AACA;AAAA,QACA,KAAAA,EAAA;AACA,cAAA,KAAA;AAAA,mBAAA;AACA;AAAA,MACA;AACA,aAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,YACA,KAAA,YACAkB,EAAA,CAAA,KAAA,aAAA,KAAA,oBAAA,KAAA,cAAA,CAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,WAAA,KAAA,mBAAA,KAAA,mBAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,CAAA,CAAA,KAAA,eAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,MAAA,UAAA;AACA,aAAA,cAAA,GACA,MAAA,KAAA,aACA,KAAA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,iBAAA,IAAA,eAAA,KAAA,gBAAA,GACA,KAAA,eAAA,QAAA,KAAA,GAAA,GACA,KAAA,iBAAA;AAAA,EACA;AAAA,EAEA,eAAA,WAAA;AACA,SAAA,eAAA;EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA;AACA,MAAA,KAAA,SAAAlB,EAAA,kBACA,CAAA,OAAA,KAAAE,CAAA,EAAA,SAAA,KAAA,KAAA,KACA,QAAA,MAAAC,CAAA;AAAA,IAEA;AAAA,IAEA,mBAAA;;AACA,YAAAgB,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,gCAAA,gBAAAD,EAAA,gBAAA,GACAE,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,8BAAA,gBAAAD,EAAA,gBAAA,GACAE,MAAAC,KAAAC,IAAA,KAAA,QAAA,gBAAAA,EAAA,cAAA,8BAAA,gBAAAD,EAAA,gBAAA,GACAE,IAAA;AACA,WAAA,aAAAT,KAAAG,IAAAG,IAAAG,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}