@dialpad/dialtone 9.27.1 → 9.29.0

package/dist/vue3/lib/feed-item-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"feed-item-row.cjs","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        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","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_6","_openBlock","_createBlock","_component_dt_list_item","_mergeProps","_ctx","$options","_toHandlers","$props","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_component_dt_avatar","_hoisted_8","_hoisted_9","_withDirectives","_createElementVNode","_hoisted_10","_component_dt_lazy_show","_hoisted_3","_toDisplayString","_component_dt_badge","_hoisted_7"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { M as S } from "../chunks/modal-VuMFkZFH.js";
-import { resolveComponent as n, openBlock as a, createBlock as f, mergeProps as k, toHandlers as R, withCtx as r, createElementBlock as i, renderSlot as o, createVNode as _, createCommentVNode as s, withDirectives as u, toDisplayString as l, vShow as h, createElementVNode as d } from "vue";
+import { resolveComponent as n, openBlock as a, createBlock as f, mergeProps as k, toHandlers as R, withCtx as d, createElementBlock as i, renderSlot as o, createVNode as _, createCommentVNode as s, withDirectives as u, toDisplayString as l, vShow as h, createElementVNode as r } from "vue";
 import { _ as D } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
 import { DtAvatar as T } from "./avatar.js";
 import { DtLazyShow as E } from "./lazy-show.js";
@@ -12,7 +12,6 @@ import "../chunks/icon_constants-OpYAAKwF.js";
 import "./presence.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "./skeleton.js";
 import "../chunks/list_item_constants-LTUc74pD.js";
 import "./item-layout.js";
 const w = {
@@ -206,7 +205,7 @@ function V(e, v, t, P, W, c) {
     class: ["dt-feed-item-row", c.listItemClasses],
     "data-qa": "dt-feed-item-row"
   }, R(c.feedListeners)), {
-    left: r(() => [
+    left: d(() => [
       t.showHeader ? (a(), i("div", H, [
         o(e.$slots, "avatar", {}, () => [
           _(p, {
@@ -225,7 +224,7 @@ function V(e, v, t, P, W, c) {
         [h, t.isActive]
       ])
     ]),
-    bottom: r(() => [
+    bottom: d(() => [
       e.$slots.reactions ? (a(), i("div", M, [
         o(e.$slots, "reactions", {}, void 0, !0)
       ])) : s("", !0),
@@ -233,14 +232,14 @@ function V(e, v, t, P, W, c) {
         o(e.$slots, "threading", {}, void 0, !0)
       ])) : s("", !0)
     ]),
-    right: r(() => [
-      u(d("div", z, [
+    right: d(() => [
+      u(r("div", z, [
         _(g, {
           appear: !0,
           transition: "fade",
           show: t.isActive
         }, {
-          default: r(() => [
+          default: d(() => [
             o(e.$slots, "menu", {}, void 0, !0)
           ]),
           _: 3
@@ -249,17 +248,17 @@ function V(e, v, t, P, W, c) {
         [h, t.isActive]
       ])
     ]),
-    default: r(() => [
-      d("article", I, [
+    default: d(() => [
+      r("article", I, [
         t.showHeader ? (a(), i("div", N, [
-          d("p", O, l(t.displayName), 1),
-          d("time", L, l(t.time), 1),
+          r("p", O, l(t.displayName), 1),
+          r("time", L, l(t.time), 1),
           t.labelText ? (a(), f(y, {
             key: 0,
             text: t.labelText
           }, null, 8, ["text"])) : s("", !0)
         ])) : s("", !0),
-        d("span", q, [
+        r("span", q, [
           o(e.$slots, "default", {}, void 0, !0)
         ]),
         e.$slots.attachment ? (a(), i("div", B, [

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

@@ -1 +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        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","bool","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_6","_openBlock","_createBlock","_component_dt_list_item","_mergeProps","_ctx","$options","_toHandlers","$props","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_component_dt_avatar","_hoisted_8","_hoisted_9","_withDirectives","_createElementVNode","_hoisted_10","_component_dt_lazy_show","_hoisted_3","_toDisplayString","_component_dt_badge","_hoisted_7"],"mappings":"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"}
+{"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        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","bool","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_6","_openBlock","_createBlock","_component_dt_list_item","_mergeProps","_ctx","$options","_toHandlers","$props","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_component_dt_avatar","_hoisted_8","_hoisted_9","_withDirectives","_createElementVNode","_hoisted_10","_component_dt_lazy_show","_hoisted_3","_toDisplayString","_component_dt_badge","_hoisted_7"],"mappings":"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"}

package/dist/vue3/lib/feed-pill.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),c=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),p=require("./item-layout.cjs"),_=require("./icon.cjs"),m=require("./collapsible.cjs");require("./utils.cjs");require("./constants.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./lazy-show.cjs");const d={default:"dt-recipe-feed-item-pill__border-default",ai:"dt-recipe-feed-item-pill__border-ai",critical:"dt-recipe-feed-item-pill__border-critical"},b={name:"DtRecipeFeedItemPill",components:{DtItemLayout:p.DtItemLayout,DtIcon:_.DtIcon,DtCollapsible:m.DtCollapsible},props:{iconName:{type:String,default:()=>""},title:{type:String,default:()=>""},wrapperClass:{type:[String,Array,Object],default:""},buttonClass:{type:[String,Array,Object],default:""},ariaLabel:{type:String,required:!0},toggleable:{type:Boolean,default:()=>!0},defaultToggled:{type:Boolean,default:()=>!1},borderColor:{type:String,default:"default",validator:l=>Object.keys(d).includes(l)}},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 d[this.borderColor]}},methods:{onClick(){this.toggleable&&(this.expanded=!this.expanded)}}},f={class:"dt-recipe-feed-item-pill__wrapper"},C=["aria-label"],g={class:"dt-recipe-feed-item-pill__title"},h={class:"dt-recipe-feed-item-pill__content"};function v(l,t,n,q,r,i){const s=e.resolveComponent("dt-icon"),a=e.resolveComponent("dt-item-layout"),u=e.resolveComponent("dt-collapsible");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["dt-recipe-feed-item-pill__border",i.borderClass,n.wrapperClass])},[e.createElementVNode("div",f,[e.createVNode(u,{open:r.expanded},{anchor:e.withCtx(()=>[e.createElementVNode("button",{"data-qa":"dt-recipe-feed-item-pill","aria-label":n.ariaLabel,class:e.normalizeClass(["dt-recipe-feed-item-pill__button",i.toggleableClass,n.buttonClass]),onFocusin:t[0]||(t[0]=o=>r.hover=!0),onFocusout:t[1]||(t[1]=o=>r.hover=!1),onMouseenter:t[2]||(t[2]=o=>r.hover=!0),onMouseleave:t[3]||(t[3]=o=>r.hover=!1),onClick:t[4]||(t[4]=(...o)=>i.onClick&&i.onClick(...o))},[e.createVNode(a,{class:"dt-recipe-feed-item-pill__layout"},{left:e.withCtx(()=>[e.createVNode(s,{"data-qa":"dt-recipe-feed-item-pill__icon",size:"300",class:"dt-recipe-feed-item-pill__icon",name:i.computedIcon},null,8,["name"])]),subtitle:e.withCtx(()=>[e.renderSlot(l.$slots,"subtitle",{},void 0,!0)]),bottom:e.withCtx(()=>[e.renderSlot(l.$slots,"bottom",{},void 0,!0)]),right:e.withCtx(()=>[e.renderSlot(l.$slots,"right",{},void 0,!0)]),default:e.withCtx(()=>[e.renderSlot(l.$slots,"title",{},()=>[e.createElementVNode("span",g,e.toDisplayString(n.title),1)],!0)]),_:3})],42,C)]),content:e.withCtx(()=>[e.createElementVNode("div",h,[e.renderSlot(l.$slots,"content",{},void 0,!0)])]),_:3},8,["open"])])],2)}const y=c._(b,[["render",v],["__scopeId","data-v-dab5b252"]]);exports.DtRecipeFeedItemPill=y;exports.FEED_ITEM_PILL_BORDER_COLORS=d;
+//# sourceMappingURL=feed-pill.cjs.map

package/dist/vue3/lib/feed-pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"feed-pill.cjs","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","_hoisted_1","_hoisted_3","_hoisted_4","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createVNode","_component_dt_collapsible","$data","args","_component_dt_item_layout","_component_dt_icon","_renderSlot","_ctx","_toDisplayString"],"mappings":"qhBAAY,MAACA,EAA+B,CAC1C,QAAS,2CACT,GAAI,sCACJ,SAAU,2CACZ,ECmDKC,EAAU,CACb,KAAM,uBAEN,WAAY,CAAEC,aAAAA,EAAAA,oBAAcC,EAAM,OAAA,cAAEC,eAAe,EAEnD,MAAO,CAIL,SAAU,CACR,KAAM,OACN,QAAS,IAAM,EAChB,EAKD,MAAO,CACL,KAAM,OACN,QAAS,IAAM,EAChB,EAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAKD,UAAW,CACT,KAAM,OACN,SAAU,EACX,EAKD,WAAY,CACV,KAAM,QACN,QAAS,IAAM,EAChB,EAED,eAAgB,CACd,KAAM,QACN,QAAS,IAAM,EAChB,EAMD,YAAa,CACX,KAAM,OACN,QAAS,UACT,UAAYC,GAAU,OAAO,KAAKL,CAA4B,EAAE,SAASK,CAAK,CAC/E,CACF,EAED,MAAQ,CACN,MAAO,CACL,MAAO,GACP,SAAU,KAAK,eAElB,EAED,SAAU,CACR,cAAgB,CACd,OAAI,KAAK,YAAc,KAAK,MACnB,KAAK,SAAW,eAAiB,gBAEjC,KAAK,QAEf,EAED,iBAAmB,CACjB,OAAO,KAAK,WAAa,cAAgB,EAC1C,EAED,aAAe,CACb,OAAOL,EAA6B,KAAK,WAAW,CACrD,CACF,EAED,QAAS,CACP,SAAW,CACJ,KAAK,aAEV,KAAK,SAAW,CAAC,KAAK,SACvB,CACF,CACH,EA3JSM,EAAA,CAAA,MAAM,mCAAmC,mBAe5BC,EAAA,CAAA,MAAM,iCAAiC,EAuB9CC,EAAA,CAAA,MAAM,mCAAmC,mKAvCtDC,EA6CM,mBAAA,MAAA,CA7CA,MAAKC,EAAA,eAAA,CAAA,mCAAuCC,EAAW,YAAEC,EAAY,YAAA,CAAA,IACzEC,EAAA,mBA2CM,MA3CNP,EA2CM,CA1CJQ,EAAAA,YAyCiBC,EAAA,CAzCA,KAAMC,EAAQ,QAAA,EAAA,CAClB,iBACT,IAgCS,CAhCTH,EAAAA,mBAgCS,SAAA,CA/BP,UAAQ,2BACP,aAAYD,EAAS,UACrB,MAAKF,EAAA,eAAA,CAAA,mCAAuCC,EAAe,gBAAEC,EAAW,WAAA,CAAA,EACxE,yBAASI,EAAK,MAAA,IACd,0BAAUA,EAAK,MAAA,IACf,4BAAYA,EAAK,MAAA,IACjB,4BAAYA,EAAK,MAAA,IACjB,4BAAOL,EAAO,SAAAA,EAAA,QAAA,GAAAM,CAAA,KAEfH,EAAAA,YAqBiBI,EAAA,CArBD,MAAM,kCAAkC,EAAA,CAI3C,eACT,IAKE,CALFJ,EAAAA,YAKEK,EAAA,CAJA,UAAQ,iCACR,KAAK,MACL,MAAM,iCACL,KAAMR,EAAY,iCAGZ,mBACT,IAAwB,CAAxBS,EAAwB,WAAAC,EAAA,OAAA,WAAA,CAAA,EAAA,OAAA,EAAA,IAEf,iBACT,IAAsB,CAAtBD,EAAsB,WAAAC,EAAA,OAAA,SAAA,CAAA,EAAA,OAAA,EAAA,IAEb,gBACT,IAAqB,CAArBD,EAAqB,WAAAC,EAAA,OAAA,QAAA,CAAA,EAAA,OAAA,EAAA,sBAlBvB,IAEO,CAFPD,EAAAA,WAEOC,oBAFP,IAEO,CADLR,EAAgE,mBAAA,OAAhEN,EAAgEe,EAAAA,gBAAfV,EAAK,KAAA,EAAA,CAAA,wBAsBnD,kBACT,IAEM,CAFNC,EAAA,mBAEM,MAFNL,EAEM,CADJY,EAAuB,WAAAC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA"}

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

@@ -8,7 +8,6 @@ import "./constants.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 import "./button.js";
 import "../chunks/link_constants-vIUB92L4.js";
 import "./lazy-show.js";
@@ -154,9 +153,9 @@ function O(t, e, d, w, l, i) {
     ])
   ], 2);
 }
-const H = /* @__PURE__ */ v(S, [["render", O], ["__scopeId", "data-v-dab5b252"]]);
+const G = /* @__PURE__ */ v(S, [["render", O], ["__scopeId", "data-v-dab5b252"]]);
 export {
-  H as DtRecipeFeedItemPill,
+  G as DtRecipeFeedItemPill,
   m as FEED_ITEM_PILL_BORDER_COLORS
 };
 //# sourceMappingURL=feed-pill.js.map

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

@@ -1 +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","_hoisted_1","_hoisted_3","_hoisted_4","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createVNode","_component_dt_collapsible","$data","args","_component_dt_item_layout","_component_dt_icon","_renderSlot","_ctx","_toDisplayString"],"mappings":";;;;;;;;;;;;;;AAAY,MAACA,IAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ,GCmDKC,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,cAAAC,GAAc,QAAAC,GAAQ,eAAAC,EAAe;AAAA,EAEnD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,IAChB;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,IAChB;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,IAChB;AAAA,IAED,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS,MAAM;AAAA,IAChB;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAU,OAAO,KAAKL,CAA4B,EAAE,SAASK,CAAK;AAAA,IAC/E;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,OAAO;AAAA,MACP,UAAU,KAAK;AAAA;EAElB;AAAA,EAED,UAAU;AAAA,IACR,eAAgB;AACd,aAAI,KAAK,cAAc,KAAK,QACnB,KAAK,WAAW,iBAAiB,kBAEjC,KAAK;AAAA,IAEf;AAAA,IAED,kBAAmB;AACjB,aAAO,KAAK,aAAa,gBAAgB;AAAA,IAC1C;AAAA,IAED,cAAe;AACb,aAAOL,EAA6B,KAAK,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,UAAW;AACT,MAAK,KAAK,eAEV,KAAK,WAAW,CAAC,KAAK;AAAA,IACvB;AAAA,EACF;AACH,GA3JSM,IAAA,EAAA,OAAM,oCAAmC,uBAe5BC,IAAA,EAAA,OAAM,kCAAiC,GAuB9CC,IAAA,EAAA,OAAM,oCAAmC;;;cAvCtDC,EA6CM,OAAA;AAAA,IA7CA,OAAKC,EAAA,CAAA,oCAAuCC,EAAW,aAAEC,EAAY,YAAA,CAAA;AAAA;IACzEC,EA2CM,OA3CNP,GA2CM;AAAA,MA1CJQ,EAyCiBC,GAAA,EAzCA,MAAMC,EAAQ,SAAA,GAAA;AAAA,QAClB,UACT,MAgCS;AAAA,UAhCTH,EAgCS,UAAA;AAAA,YA/BP,WAAQ;AAAA,YACP,cAAYD,EAAS;AAAA,YACrB,OAAKF,EAAA,CAAA,oCAAuCC,EAAe,iBAAEC,EAAW,WAAA,CAAA;AAAA,YACxE,kCAASI,EAAK,QAAA;AAAA,YACd,mCAAUA,EAAK,QAAA;AAAA,YACf,qCAAYA,EAAK,QAAA;AAAA,YACjB,qCAAYA,EAAK,QAAA;AAAA,YACjB,mCAAOL,EAAO,WAAAA,EAAA,QAAA,GAAAM,CAAA;AAAA;YAEfH,EAqBiBI,GAAA,EArBD,OAAM,mCAAkC,GAAA;AAAA,cAI3C,QACT,MAKE;AAAA,gBALFJ,EAKEK,GAAA;AAAA,kBAJA,WAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,OAAM;AAAA,kBACL,MAAMR,EAAY;AAAA;;cAGZ,YACT,MAAwB;AAAA,gBAAxBS,EAAwBC,EAAA,QAAA,YAAA,CAAA,GAAA,QAAA,EAAA;AAAA;cAEf,UACT,MAAsB;AAAA,gBAAtBD,EAAsBC,EAAA,QAAA,UAAA,CAAA,GAAA,QAAA,EAAA;AAAA;cAEb,SACT,MAAqB;AAAA,gBAArBD,EAAqBC,EAAA,QAAA,SAAA,CAAA,GAAA,QAAA,EAAA;AAAA;yBAlBvB,MAEO;AAAA,gBAFPD,EAEOC,uBAFP,MAEO;AAAA,kBADLR,EAAgE,QAAhEN,GAAgEe,EAAfV,EAAK,KAAA,GAAA,CAAA;AAAA;;;;;;QAsBnD,WACT,MAEM;AAAA,UAFNC,EAEM,OAFNL,GAEM;AAAA,YADJY,EAAuBC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA;;;;;;;;"}
+{"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","_hoisted_1","_hoisted_3","_hoisted_4","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createVNode","_component_dt_collapsible","$data","args","_component_dt_item_layout","_component_dt_icon","_renderSlot","_ctx","_toDisplayString"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("./emoji-text-wrapper.cjs"),e=require("vue"),C=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),m=require("./icon.cjs"),b=require("./utils.cjs"),y=require("./badge.cjs"),w=require("./button.cjs"),A=require("./tooltip.cjs");require("../chunks/index-IBtQ5jRJ.js");require("emoji-regex");require("@dialpad/dialtone-emojis");require("./skeleton.cjs");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("@dialpad/dialtone-icons/vue3");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");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"},f={[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"},d={"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(d).join(", "),E=["300","200"],O={name:"DtRecipeLeftbarGeneralRowIcon",components:{DtIcon:m.DtIcon},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 f[this.type]},contactCenterIconClasses(){return["dt-leftbar-row__icon-cc",d[this.color]]},dialbotClasses(){return["d-d-flex","d-ai-center","d-jc-center"]}}};function B(t,r,o,_,l,n){const i=e.resolveComponent("dt-icon");return n.isIconType?(e.openBlock(),e.createBlock(i,{key:0,name:n.getIconName,size:o.iconSize},null,8,["name","size"])):n.isContactCenterType?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(n.contactCenterIconClasses)},null,2)):n.isDialbotType?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(n.dialbotClasses),"data-qa":"general-row-dialbot"},[e.createVNode(i,{name:"dialbot",size:"500"})],2)):e.createCommentVNode("",!0)}const S=C._(O,[["render",B]]),L={name:"DtRecipeGeneralRow",components:{DtEmojiTextWrapper:R.DtEmojiTextWrapper,DtBadge:y.DtBadge,DtIcon:m.DtIcon,DtButton:w.DtButton,DtTooltip:A.DtTooltip,DtRecipeLeftbarGeneralRowIcon:S},inheritAttrs:!1,props:{type:{type:String,default:"inbox",validator:t=>Object.values(a).includes(t)},ariaLabel:{type:String,default:""},description:{type:String,required:!0},color:{type:String,default:null,validator:t=>Object.keys(d).includes(t)},hasUnreads:{type:Boolean,default:!1},unreadCount:{type:String,default:null},unreadCountTooltip:{type:String,default:""},selected:{type:Boolean,default:!1},muted:{type:Boolean,default:!1},activeVoiceChat:{type:Boolean,default:!1},dndText:{type:String,default:""},dndTextTooltip:{type:String,default:""},hasCallButton:{type:Boolean,default:!1},callButtonTooltip:{type:String,default:""},isTyping:{type:Boolean,default:!1},iconSize:{type:String,default:"300",validator:t=>E.includes(t)}},emits:["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},generalRowListeners(){return b.extractVueListeners(this.$attrs)},getAriaLabel(){return this.ariaLabel?this.ariaLabel:b.safeConcatStrings([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()},beforeUnmount:function(){this.resizeObserver.disconnect()},methods:{validateProps(){this.type===a.CONTACT_CENTER&&!Object.keys(d).includes(this.color)&&console.error(T)},adjustLabelWidth(){var l,n,i,u,s,c;const t=((n=(l=this.$el)==null?void 0:l.querySelector(".dt-leftbar-row__primary"))==null?void 0:n.clientWidth)||0,r=((u=(i=this.$el)==null?void 0:i.querySelector(".dt-leftbar-row__omega"))==null?void 0:u.clientWidth)||0,o=((c=(s=this.$el)==null?void 0:s.querySelector(".dt-leftbar-row__alpha"))==null?void 0:c.clientWidth)||0,_=16;this.labelWidth=t-(r+o+_)+"px"}}},h=t=>(e.pushScopeId("data-v-49d75ce6"),t=t(),e.popScopeId(),t),k=["data-qa","aria-label","title","href"],I={class:"dt-leftbar-row__alpha"},v={key:0,class:"dt-leftbar-row__is-typing"},q=h(()=>e.createElementVNode("span",null,null,-1)),D=h(()=>e.createElementVNode("span",null,null,-1)),G=h(()=>e.createElementVNode("span",null,null,-1)),V=[q,D,G],W={key:0,class:"dt-leftbar-row__omega"},x={key:1,class:"dt-leftbar-row__active-voice"},z={key:3,class:"dt-leftbar-row__action","data-qa":"dt-leftbar-row-action"};function j(t,r,o,_,l,n){const i=e.resolveComponent("dt-recipe-leftbar-general-row-icon"),u=e.resolveComponent("dt-emoji-text-wrapper"),s=e.resolveComponent("dt-tooltip"),c=e.resolveComponent("dt-icon"),g=e.resolveComponent("dt-badge"),N=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(n.leftbarGeneralRowClasses),"data-qa":"dt-leftbar-row"},[e.createElementVNode("a",e.mergeProps({class:"dt-leftbar-row__primary","data-qa":"data-qa"in t.$attrs?t.$attrs["data-qa"]:"dt-leftbar-row-link","aria-label":n.getAriaLabel,title:o.description,href:"href"in t.$attrs?t.$attrs.href:"javascript:void(0)"},t.$attrs,e.toHandlers(n.generalRowListeners,!0)),[e.createElementVNode("div",I,[o.isTyping?(e.openBlock(),e.createElementBlock("div",v,V)):e.renderSlot(t.$slots,"left",{key:1},()=>[e.createVNode(i,{type:n.getIcon,color:o.color,"icon-size":o.iconSize,"data-qa":"dt-leftbar-row-icon"},null,8,["type","color","icon-size"])],!0)]),e.createElementVNode("div",{class:"dt-leftbar-row__label",style:e.normalizeStyle(`flex-basis: ${l.labelWidth}`)},[e.renderSlot(t.$slots,"label",{},()=>[e.createVNode(u,{class:"dt-leftbar-row__description","data-qa":"dt-leftbar-row-description",size:"200"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.description),1)]),_:1})],!0)],4)],16,k),n.hasActions?(e.openBlock(),e.createElementBlock("div",W,[o.dndText?(e.openBlock(),e.createBlock(s,{key:0,placement:"top",message:o.dndTextTooltip},{anchor:e.withCtx(()=>[e.createElementVNode("div",{ref:"dt-leftbar-row-dnd",class:"dt-leftbar-row__dnd","data-qa":"dt-leftbar-row-dnd"},e.toDisplayString(o.dndText),513)]),_:1},8,["message"])):e.createCommentVNode("",!0),o.activeVoiceChat?(e.openBlock(),e.createElementBlock("div",x,[e.createVNode(c,{size:"300",name:"waveform"})])):n.showUnreadCount?(e.openBlock(),e.createBlock(s,{key:2,message:o.unreadCountTooltip,placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(g,{kind:"count",type:"bulletin","data-qa":"dt-leftbar-row-unread-badge",class:"dt-leftbar-row__unread-badge"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.unreadCount),1)]),_:1})]),_:1},8,["message"])):e.createCommentVNode("",!0),o.hasCallButton?(e.openBlock(),e.createElementBlock("div",z,[e.createVNode(s,{message:o.callButtonTooltip,placement:"top"},{anchor:e.withCtx(()=>[e.createVNode(N,{class:"dt-leftbar-row__action-button","data-qa":"dt-leftbar-row-action-call-button",circle:!0,size:"xs",kind:"inverted","aria-label":o.callButtonTooltip,onFocus:r[0]||(r[0]=p=>l.actionFocused=!0),onBlur:r[1]||(r[1]=p=>l.actionFocused=!1),onClick:r[2]||(r[2]=e.withModifiers(p=>t.$emit("call",p),["stop"]))},{icon:e.withCtx(()=>[e.createVNode(c,{name:"phone",size:"200"})]),_:1},8,["aria-label"])]),_:1},8,["message"])])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)],2)}const H=C._(L,[["render",j],["__scopeId","data-v-49d75ce6"]]);exports.DtRecipeGeneralRow=H;exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_COLORS=d;exports.LEFTBAR_GENERAL_ROW_CONTACT_CENTER_VALIDATION_ERROR=T;exports.LEFTBAR_GENERAL_ROW_ICON_MAPPING=f;exports.LEFTBAR_GENERAL_ROW_ICON_SIZES=E;exports.LEFTBAR_GENERAL_ROW_TYPES=a;
+//# sourceMappingURL=general-row.cjs.map

package/dist/vue3/lib/general-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"general-row.cjs","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=\"generalRowListeners\"\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 { extractVueListeners, 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     * 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    generalRowListeners () {\n      return extractVueListeners(this.$attrs);\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  beforeUnmount: 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","$options","_createBlock","_component_dt_icon","$props","_createElementBlock","_createVNode","DtEmojiTextWrapper","DtBadge","DtButton","DtTooltip","DtRecipeLeftbarGeneralRowIcon","type","color","size","extractVueListeners","safeConcatStrings","labelWidth","_b","_a","omegaWidth","_d","_c","alphaWidth","_f","_e","paddings","_hoisted_2","_createElementVNode","_hoisted_4","_hoisted_5","_hoisted_6","_mergeProps","_ctx","_toHandlers","_openBlock","_hoisted_3","_hoisted_7","_renderSlot","_component_dt_recipe_leftbar_general_row_icon","$data","_component_dt_emoji_text_wrapper","_hoisted_8","_component_dt_tooltip","_hoisted_9","_component_dt_badge","_hoisted_10","_component_dt_button","_cache","_withModifiers","$event"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ import { extractVueListeners as x, safeConcatStrings as z } from "./utils.js";
 import { DtBadge as q } from "./badge.js";
 import { DtButton as j } from "./button.js";
 import { DtTooltip as H } from "./tooltip.js";
-import "../chunks/index-BK8b99k1.js";
+import "../chunks/index-mRmwpCBG.js";
 import "emoji-regex";
 import "@dialpad/dialtone-emojis";
 import "./skeleton.js";

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./icon.cjs"),n=require("./utils.cjs"),e=require("vue"),s=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),c=require("./general-row.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("./constants.cjs");require("./emoji-text-wrapper.cjs");require("../chunks/index-IBtQ5jRJ.js");require("emoji-regex");require("@dialpad/dialtone-emojis");require("./skeleton.cjs");require("./badge.cjs");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./tooltip.cjs");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("./lazy-show.cjs");const l={name:"DtRecipeGroupRow",components:{DtIcon:a.DtIcon,DtRecipeGeneralRow:c.DtRecipeGeneralRow},inheritAttrs:!1,props:{groupCountText:{type:String,default:""},names:{type:String,required:!0},unreadCount:{type:String,default:null},unreadCountTooltip:{type:String,default:null},hasUnreads:{type:Boolean,default:!1},selected:{type:Boolean,default:!1},isTyping:{type:Boolean,default:!1}},emits:[],computed:{ariaLabel(){return n.safeConcatStrings([this.groupCountText,this.names])},contactRowListeners(){return n.extractVueListeners(this.$attrs)}}};function d(o,q,r,_,g,t){const i=e.resolveComponent("dt-icon"),u=e.resolveComponent("dt-recipe-general-row");return e.openBlock(),e.createBlock(u,e.mergeProps({description:r.names,"aria-label":t.ariaLabel,"unread-count":r.unreadCount,"has-unreads":r.hasUnreads,"unread-count-tooltip":r.unreadCountTooltip,selected:r.selected,"is-typing":r.isTyping},o.$attrs,e.toHandlers(t.contactRowListeners)),{left:e.withCtx(()=>[e.createVNode(i,{name:"users",size:"300"})]),_:1},16,["description","aria-label","unread-count","has-unreads","unread-count-tooltip","selected","is-typing"])}const p=s._(l,[["render",d]]);exports.DtRecipeGroupRow=p;
+//# sourceMappingURL=group-row.cjs.map

package/dist/vue3/lib/group-row.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-row.cjs","sources":["../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #left>\n      <dt-icon\n        name=\"users\"\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport DtIcon from '@/components/icon/icon.vue';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIcon,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n     */\n    groupCountText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\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: null,\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     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\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  emits: [\n  ],\n\n  computed: {\n    ariaLabel () {\n      return safeConcatStrings([this.groupCountText, this.names]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIcon","DtRecipeGeneralRow","safeConcatStrings","extractVueListeners","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_createVNode","_component_dt_icon"],"mappings":"+wBA0BA,MAAKA,EAAU,CACb,KAAM,mBAEN,WAAY,CACV,OAAAC,EAAM,OACN,mBAAAC,EAAkB,kBACnB,EAED,aAAc,GAEd,MAAO,CAKL,eAAgB,CACd,KAAM,OACN,QAAS,EACV,EAKD,MAAO,CACL,KAAM,OACN,SAAU,EACX,EAKD,YAAa,CACX,KAAM,OACN,QAAS,IACV,EAKD,mBAAoB,CAClB,KAAM,OACN,QAAS,IACV,EAMD,WAAY,CACV,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,CACF,EAED,MAAO,CACN,EAED,SAAU,CACR,WAAa,CACX,OAAOC,EAAAA,kBAAkB,CAAC,KAAK,eAAgB,KAAK,KAAK,CAAC,CAC3D,EAED,qBAAuB,CACrB,OAAOC,EAAmB,oBAAC,KAAK,MAAM,CACvC,CACF,CACH,8GA3GE,OAAAC,YAAA,EAAAC,cAiBwBC,EAjBxBC,EAAAA,WAiBwB,CAhBrB,YAAaC,EAAK,MAClB,aAAYC,EAAS,UACrB,eAAcD,EAAW,YACzB,cAAaA,EAAU,WACvB,uBAAsBA,EAAkB,mBACxC,SAAUA,EAAQ,SAClB,YAAWA,EAAQ,UACZE,EAAM,OACdC,EAAAA,WAA0BF,EAAD,mBAAA,CAAA,EAAA,CAEd,eACT,IAGE,CAHFG,EAAAA,YAGEC,EAAA,CAFA,KAAK,QACL,KAAK"}

package/dist/vue3/lib/group-row.js

@@ -6,12 +6,12 @@ import { DtRecipeGeneralRow as g } from "./general-row.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 import "./constants.js";
 import "./emoji-text-wrapper.js";
-import "../chunks/index-BK8b99k1.js";
+import "../chunks/index-mRmwpCBG.js";
 import "emoji-regex";
 import "@dialpad/dialtone-emojis";
+import "./skeleton.js";
 import "./badge.js";
 import "./button.js";
 import "../chunks/link_constants-vIUB92L4.js";

package/dist/vue3/lib/grouped-chip.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./utils.cjs"),e=require("vue"),c=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),i=require("./chip.cjs");require("./constants.cjs");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const s={name:"DtRecipeGroupedChip",components:{DtChip:i.DtChip},data(){return{hasSlotContent:r.hasSlotContent}}},l={"data-qa":"grouped-chip",class:"dt-grouped-chip"},d={key:0,"data-qa":"left-grouped-chip-icon"},p={key:0,"data-qa":"left-grouped-chip-content"},h={key:0,"data-qa":"right-grouped-chip-icon"},a={key:0,"data-qa":"right-grouped-chip-content"};function u(t,f,m,g,o,_){const n=e.resolveComponent("dt-chip");return e.openBlock(),e.createElementBlock("div",l,[e.createVNode(n,{"hide-close":!0,interactive:!1,"content-class":"d-fs100",size:"xs","grouped-chip":!0,class:"dt-chip-content dt-chip-content--left"},e.createSlots({default:e.withCtx(()=>[o.hasSlotContent(t.$slots.leftContent)?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(t.$slots,"leftContent")])):e.createCommentVNode("",!0)]),_:2},[o.hasSlotContent(t.$slots.leftIcon)?{name:"icon",fn:e.withCtx(()=>[o.hasSlotContent(t.$slots.leftIcon)?(e.openBlock(),e.createElementBlock("div",d,[e.renderSlot(t.$slots,"leftIcon")])):e.createCommentVNode("",!0)]),key:"0"}:void 0]),1024),e.createVNode(n,{"hide-close":!0,interactive:!1,"content-class":"d-fs100",size:"xs","grouped-chip":!0,class:"dt-chip-content dt-chip-content--right"},{icon:e.withCtx(()=>[o.hasSlotContent(t.$slots.rightIcon)?(e.openBlock(),e.createElementBlock("div",h,[e.renderSlot(t.$slots,"rightIcon")])):e.createCommentVNode("",!0)]),default:e.withCtx(()=>[o.hasSlotContent(t.$slots.rightContent)?(e.openBlock(),e.createElementBlock("div",a,[e.renderSlot(t.$slots,"rightContent")])):e.createCommentVNode("",!0)]),_:3})])}const C=c._(s,[["render",u]]);exports.DtRecipeGroupedChip=C;
+//# sourceMappingURL=grouped-chip.cjs.map

package/dist/vue3/lib/grouped-chip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grouped-chip.cjs","sources":["../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"dt-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-grouped-chip {\n  display: inline-flex;\n  white-space: nowrap;\n  background-color: unset;\n  background-image: unset;\n}\n\n.dt-chip-content {\n  font-variant-numeric: tabular-nums;\n\n  &--left {\n    border-top-left-radius: var(--dt-size-radius-pill);\n    border-bottom-left-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-surface-moderate-opaque);\n    max-width: var(--dt-size-730);\n  }\n\n  &--right {\n    border-top-right-radius: var(--dt-size-radius-pill);\n    border-bottom-right-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-purple-200);\n    max-width: var(--dt-size-730);\n  }\n}\n</style>\n"],"names":["_sfc_main","DtChip","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_component_dt_chip","$data","_ctx","_hoisted_3","_renderSlot","_hoisted_2","_hoisted_4","_hoisted_5"],"mappings":"odAuEA,MAAKA,EAAU,CACb,KAAM,sBAEN,WAAY,CACV,OAAAC,EAAM,MACP,EAED,MAAQ,CACN,MAAO,CACL,eAAAC,EAAc,eAEjB,CACH,KAjFI,UAAQ,eACR,MAAM,4BAiBA,UAAQ,mCAQR,UAAQ,sCAoBR,UAAQ,oCASR,UAAQ,4FAxDhB,OAAAC,YAAA,EAAAC,qBA+DM,MA/DNC,EA+DM,CA3DJC,EAAAA,YA6BUC,EAAA,CA5BP,aAAY,GACZ,YAAa,GACd,gBAAc,UACd,KAAK,KACJ,eAAc,GACf,MAAM,wDAcK,kBACT,IAMM,CALEC,EAAc,eAACC,EAAM,OAAC,WAAW,GADzCN,EAAAA,YAAAC,EAAAA,mBAMM,MANNM,EAMM,CADJC,aAA2BF,EAAA,OAAA,aAAA,yCAjBvBD,EAAc,eAACC,EAAM,OAAC,QAAQ,QACnC,oBAGD,IAKM,CAJED,EAAc,eAACC,EAAM,OAAC,QAAQ,GADtCN,EAAAA,YAAAC,EAAAA,mBAKM,MALNQ,EAKM,CADJD,aAAwBF,EAAA,OAAA,UAAA,2DAe9BH,EAAAA,YA0BUC,EAAA,CAzBP,aAAY,GACZ,YAAa,GACd,gBAAc,UACd,KAAK,KACJ,eAAc,GACf,MAAM,2CAEK,eACT,IAMM,CALEC,EAAc,eAACC,EAAM,OAAC,SAAS,GADvCN,EAAAA,YAAAC,EAAAA,mBAMM,MANNS,EAMM,CADJF,aAAyBF,EAAA,OAAA,WAAA,mCAGlB,kBACT,IAMM,CALED,EAAc,eAACC,EAAM,OAAC,YAAY,GAD1CN,EAAAA,YAAAC,EAAAA,mBAMM,MANNU,EAMM,CADJH,aAA4BF,EAAA,OAAA,cAAA"}

package/dist/vue3/lib/grouped-chip.js

@@ -9,8 +9,7 @@ import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
-const m = {
+const f = {
   name: "DtRecipeGroupedChip",
   components: {
     DtChip: u
@@ -20,7 +19,7 @@ const m = {
       hasSlotContent: d
     };
   }
-}, f = {
+}, m = {
   "data-qa": "grouped-chip",
   class: "dt-grouped-chip"
 }, g = {
@@ -38,7 +37,7 @@ const m = {
 };
 function S(t, $, k, q, e, y) {
   const c = h("dt-chip");
-  return o(), n("div", f, [
+  return o(), n("div", m, [
     p(c, {
       "hide-close": !0,
       interactive: !1,
@@ -86,8 +85,8 @@ function S(t, $, k, q, e, y) {
     })
   ]);
 }
-const A = /* @__PURE__ */ a(m, [["render", S]]);
+const j = /* @__PURE__ */ a(f, [["render", S]]);
 export {
-  A as DtRecipeGroupedChip
+  j as DtRecipeGroupedChip
 };
 //# sourceMappingURL=grouped-chip.js.map

package/dist/vue3/lib/grouped-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"grouped-chip.js","sources":["../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"dt-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-grouped-chip {\n  display: inline-flex;\n  white-space: nowrap;\n  background-color: unset;\n  background-image: unset;\n}\n\n.dt-chip-content {\n  font-variant-numeric: tabular-nums;\n\n  &--left {\n    border-top-left-radius: var(--dt-size-radius-pill);\n    border-bottom-left-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-surface-moderate-opaque);\n    max-width: var(--dt-size-730);\n  }\n\n  &--right {\n    border-top-right-radius: var(--dt-size-radius-pill);\n    border-bottom-right-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-purple-200);\n    max-width: var(--dt-size-730);\n  }\n}\n</style>\n"],"names":["_sfc_main","DtChip","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_component_dt_chip","$data","_ctx","_hoisted_3","_renderSlot","_hoisted_2","_hoisted_4","_hoisted_5"],"mappings":";;;;;;;;;;;;AAuEA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC;AAAA;EAEH;AACH;EAjFI,WAAQ;AAAA,EACR,OAAM;;;EAiBA,WAAQ;;;EAQR,WAAQ;;;EAoBR,WAAQ;;;EASR,WAAQ;;;;AAxDhB,SAAAC,EAAA,GAAAC,EA+DM,OA/DNC,GA+DM;AAAA,IA3DJC,EA6BUC,GAAA;AAAA,MA5BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAcK,WACT,MAMM;AAAA,QALEC,EAAc,eAACC,EAAM,OAAC,WAAW,KADzCN,KAAAC,EAMM,OANNM,GAMM;AAAA,UADJC,EAA2BF,EAAA,QAAA,aAAA;AAAA;;;;MAjBvBD,EAAc,eAACC,EAAM,OAAC,QAAQ;cACnC;AAAA,cAGD,MAKM;AAAA,UAJED,EAAc,eAACC,EAAM,OAAC,QAAQ,KADtCN,KAAAC,EAKM,OALNQ,GAKM;AAAA,YADJD,EAAwBF,EAAA,QAAA,UAAA;AAAA;;;;;IAe9BH,EA0BUC,GAAA;AAAA,MAzBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,QACT,MAMM;AAAA,QALEC,EAAc,eAACC,EAAM,OAAC,SAAS,KADvCN,KAAAC,EAMM,OANNS,GAMM;AAAA,UADJF,EAAyBF,EAAA,QAAA,WAAA;AAAA;;MAGlB,WACT,MAMM;AAAA,QALED,EAAc,eAACC,EAAM,OAAC,YAAY,KAD1CN,KAAAC,EAMM,OANNU,GAMM;AAAA,UADJH,EAA4BF,EAAA,QAAA,cAAA;AAAA;;;;;;;"}
+{"version":3,"file":"grouped-chip.js","sources":["../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"dt-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-grouped-chip {\n  display: inline-flex;\n  white-space: nowrap;\n  background-color: unset;\n  background-image: unset;\n}\n\n.dt-chip-content {\n  font-variant-numeric: tabular-nums;\n\n  &--left {\n    border-top-left-radius: var(--dt-size-radius-pill);\n    border-bottom-left-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-surface-moderate-opaque);\n    max-width: var(--dt-size-730);\n  }\n\n  &--right {\n    border-top-right-radius: var(--dt-size-radius-pill);\n    border-bottom-right-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-purple-200);\n    max-width: var(--dt-size-730);\n  }\n}\n</style>\n"],"names":["_sfc_main","DtChip","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_component_dt_chip","$data","_ctx","_hoisted_3","_renderSlot","_hoisted_2","_hoisted_4","_hoisted_5"],"mappings":";;;;;;;;;;;AAuEA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC;AAAA;EAEH;AACH;EAjFI,WAAQ;AAAA,EACR,OAAM;;;EAiBA,WAAQ;;;EAQR,WAAQ;;;EAoBR,WAAQ;;;EASR,WAAQ;;;;AAxDhB,SAAAC,EAAA,GAAAC,EA+DM,OA/DNC,GA+DM;AAAA,IA3DJC,EA6BUC,GAAA;AAAA,MA5BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAcK,WACT,MAMM;AAAA,QALEC,EAAc,eAACC,EAAM,OAAC,WAAW,KADzCN,KAAAC,EAMM,OANNM,GAMM;AAAA,UADJC,EAA2BF,EAAA,QAAA,aAAA;AAAA;;;;MAjBvBD,EAAc,eAACC,EAAM,OAAC,QAAQ;cACnC;AAAA,cAGD,MAKM;AAAA,UAJED,EAAc,eAACC,EAAM,OAAC,QAAQ,KADtCN,KAAAC,EAKM,OALNQ,GAKM;AAAA,YADJD,EAAwBF,EAAA,QAAA,UAAA;AAAA;;;;;IAe9BH,EA0BUC,GAAA;AAAA,MAzBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,QACT,MAMM;AAAA,QALEC,EAAc,eAACC,EAAM,OAAC,SAAS,KADvCN,KAAAC,EAMM,OANNS,GAMM;AAAA,UADJF,EAAyBF,EAAA,QAAA,WAAA;AAAA;;MAGlB,WACT,MAMM;AAAA,QALED,EAAc,eAACC,EAAM,OAAC,YAAY,KAD1CN,KAAAC,EAMM,OANNU,GAMM;AAAA,UADJH,EAA4BF,EAAA,QAAA,cAAA;AAAA;;;;;;;"}

package/dist/vue3/lib/hovercard.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),f=require("./utils.cjs"),i=require("../chunks/popover_constants-hOEhklvr.js"),m=require("./popover.cjs");require("./constants.cjs");require("tippy.js");require("../chunks/modal-qEzlo0Sj.js");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("../chunks/sr_only_close_button-iD7s1Pbj.js");require("./lazy-show.cjs");const p=function(){const e=t.ref(null);let a,r,l=null,n=null;function c(o){if(n){const s=Date.now()-l+100;a&&clearTimeout(a),n!==o&&(a=setTimeout(()=>{e.value!==null&&(l=Date.now()),e.value=null},s),r&&clearTimeout(r),r=setTimeout(()=>{e.value=o,n=o},s))}else r=setTimeout(()=>{e.value=o,n=o},i.h)}function d(){r&&(clearTimeout(r),r=null),l=Date.now(),a=setTimeout(()=>{e.value=null,n=null},i.h)}let u=null;return()=>(u===null&&(u={current:e,enter:c,leave:d}),u)}(),v={__name:"hovercard",props:{transition:{type:Boolean,default:!1},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"top-start",validator(e){return i.T.includes(e)}},padding:{type:String,default:"large",validator:e=>Object.keys(i.P).some(a=>a===e)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return f.getUniqueString()}},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},contentClass:{type:[String,Array,Object],default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>i.e.includes(e)||e instanceof HTMLElement}},emits:["opened"],setup(e){const a=t.reactive(p());return(r,l)=>(t.openBlock(),t.createBlock(t.unref(m.DtPopover),{id:e.id,placement:e.placement,"content-class":e.contentClass,"fallback-placements":e.fallbackPlacements,padding:e.padding,transition:e.transition?"fade":null,offset:e.offset,modal:!1,"initial-focus-element":"none","header-class":e.headerClass,"footer-class":e.footerClass,"append-to":e.appendTo,hovercard:!0,timer:a,"data-qa":"dt-hovercard",onOpened:l[0]||(l[0]=n=>r.$emit("opened",n))},{anchor:t.withCtx(({attrs:n})=>[t.renderSlot(r.$slots,"anchor",t.normalizeProps(t.guardReactiveProps(n)))]),content:t.withCtx(()=>[t.renderSlot(r.$slots,"content")]),headerContent:t.withCtx(()=>[t.renderSlot(r.$slots,"headerContent")]),footerContent:t.withCtx(()=>[t.renderSlot(r.$slots,"footerContent")]),_:3},8,["id","placement","content-class","fallback-placements","padding","transition","offset","header-class","footer-class","append-to","timer"]))}};exports.DtHovercard=v;
+//# sourceMappingURL=hovercard.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hovercard.cjs","sources":["../../components/hovercard/timer.js","../../components/hovercard/hovercard.vue"],"sourcesContent":["import { ref } from 'vue';\nimport { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\n\nexport default (function () {\n  const current = ref(null);\n  let timerLeave, timerEnter;\n  let start = null;\n  let prevCard = null;\n\n  // Handles the timer for when the event that opens the hovercard\n  // is triggered.\n  // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.\n  // If there was an active hovercard, the delay depends on the time it takes\n  // to move from one anchor to the other.\n  function enter (id) {\n    if (prevCard) {\n      const time = Date.now() - start + 100;\n      if (timerLeave) clearTimeout(timerLeave);\n      if (prevCard !== id) {\n        timerLeave = setTimeout(\n          () => {\n            if (current.value !== null) {\n              start = Date.now();\n            }\n            current.value = null;\n          },\n          time,\n        );\n        if (timerEnter) clearTimeout(timerEnter);\n        timerEnter = setTimeout(\n          () => {\n            current.value = id;\n            prevCard = id;\n          },\n          time,\n        );\n      }\n    } else {\n      timerEnter = setTimeout(() => {\n        current.value = id;\n        prevCard = id;\n      }, TOOLTIP_DELAY_MS);\n    }\n  }\n\n  // Handles the timer for when the event that closes the hovercard\n  // is triggered.\n  function leave () {\n    if (timerEnter) {\n      clearTimeout(timerEnter);\n      timerEnter = null;\n    }\n    start = Date.now();\n    timerLeave = setTimeout(() => {\n      current.value = null;\n      prevCard = null;\n    }, TOOLTIP_DELAY_MS);\n  }\n\n  let instance = null;\n\n  return () => {\n    if (instance === null) {\n      instance = { current, enter, leave };\n    }\n    return instance;\n  };\n})();\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :hovercard=\"true\"\n    :timer=\"timer\"\n    data-qa=\"dt-hovercard\"\n    @opened=\"(e) => ($emit('opened', e))\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <slot name=\"content\" />\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { reactive } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport useTimer from './timer';\n\nconst timer = reactive(useTimer());\n\ndefineProps({\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n      * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n  placement: {\n    type: String,\n    default: 'top-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n  appendTo: {\n    type: [HTMLElement, String],\n    default: 'body',\n    validator: appendTo => {\n      return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n    },\n  },\n});\n\ndefineEmits(['opened']);\n</script>\n"],"names":["useTimer","current","ref","timerLeave","timerEnter","start","prevCard","enter","id","time","TOOLTIP_DELAY_MS","leave","instance","timer","reactive"],"mappings":"spBAGA,MAAAA,EAAgB,UAAY,CAC1B,MAAMC,EAAUC,MAAI,IAAI,EACxB,IAAIC,EAAYC,EACZC,EAAQ,KACRC,EAAW,KAOf,SAASC,EAAOC,EAAI,CAClB,GAAIF,EAAU,CACZ,MAAMG,EAAO,KAAK,IAAG,EAAKJ,EAAQ,IAC9BF,GAAY,aAAaA,CAAU,EACnCG,IAAaE,IACfL,EAAa,WACX,IAAM,CACAF,EAAQ,QAAU,OACpBI,EAAQ,KAAK,OAEfJ,EAAQ,MAAQ,IACjB,EACDQ,CACV,EACYL,GAAY,aAAaA,CAAU,EACvCA,EAAa,WACX,IAAM,CACJH,EAAQ,MAAQO,EAChBF,EAAWE,CACZ,EACDC,CACV,EAEA,MACML,EAAa,WAAW,IAAM,CAC5BH,EAAQ,MAAQO,EAChBF,EAAWE,CACZ,EAAEE,EAAgB,CAAA,CAEtB,CAID,SAASC,GAAS,CACZP,IACF,aAAaA,CAAU,EACvBA,EAAa,MAEfC,EAAQ,KAAK,MACbF,EAAa,WAAW,IAAM,CAC5BF,EAAQ,MAAQ,KAChBK,EAAW,IACZ,EAAEI,EAAgB,CAAA,CACpB,CAED,IAAIE,EAAW,KAEf,MAAO,KACDA,IAAa,OACfA,EAAW,CAAE,QAAAX,EAAS,MAAAM,EAAO,MAAAI,CAAK,GAE7BC,EAEX,EAAI,ktBCrBJ,MAAMC,EAAQC,EAAAA,SAASd,EAAQ,CAAE"}