npm - @dialpad/dialtone - Versions diffs - 9.73.0-beta.2 → 9.73.0 - Mend

@dialpad/dialtone 9.73.0-beta.2 → 9.73.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (444) hide show

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from "./feed_item_row_constants.js";
 import Modal from "../../../common/mixins/modal.js";
-import { DtIconUser } from "@dialpad/dialtone-icons/vue2";
 /* empty css                   */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtAvatar from "../../../components/avatar/avatar.vue.js";
@@ -13,8 +12,7 @@ const _sfc_main = {
     DtAvatar,
     DtLazyShow,
     DtListItem,
-    DtBadge,
-    DtIconUser
+    DtBadge
   },
   mixins: [Modal],
   inheritAttrs: false,
@@ -141,6 +139,9 @@ const _sfc_main = {
         }
       };
     },
+    iconName() {
+      return this.noInitials ? "user" : null;
+    },
     listItemClasses() {
       return [
         "dt-feed-item-row",
@@ -181,9 +182,7 @@ var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("dt-list-item", _vm._g(_vm._b({ ref: "FeedItemRef", class: ["dt-feed-item-row", _vm.listItemClasses], attrs: { "navigation-type": "none", "data-qa": "dt-feed-item-row" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
     return [_vm.showHeader ? _c("div", { staticClass: "dt-feed-item-row__avatar-container" }, [_vm._t("avatar", function() {
-      return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "seed": _vm.avatarSeed }, scopedSlots: _vm._u([_vm.noInitials ? { key: "icon", fn: function({ iconSize }) {
-        return [_c("dt-icon-user", { attrs: { "size": iconSize } })];
-      } } : null], null, true) })];
+      return [_c("dt-avatar", { attrs: { "full-name": _vm.displayName, "image-src": _vm.avatarImageUrl, "image-alt": "", "icon-name": _vm.iconName, "seed": _vm.avatarSeed } })];
     })], 2) : _vm._e(), !_vm.showHeader ? _c("span", { directives: [{ name: "show", rawName: "v-show", value: _vm.isActive, expression: "isActive" }], staticClass: "dt-feed-item-row__left-time", attrs: { "data-qa": "dt-feed-item-row--left-time" } }, [_vm._v(" " + _vm._s(_vm.shortTime) + " ")]) : _vm._e()];
   }, proxy: true }, { key: "bottom", fn: function() {
     return [_vm.$slots.reactions ? _c("div", { staticClass: "dt-feed-item-row__reactions", attrs: { "data-qa": "dt-feed-item-row--reactions" } }, [_vm._t("reactions")], 2) : _vm._e(), _vm.$slots.threading ? _c("div", { staticClass: "dt-feed-item-row__threading" }, [_vm._t("threading")], 2) : _vm._e()];
@@ -198,7 +197,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "90e0798e"
+  "047dcbe5"
 );
 const feed_item_row = __component__.exports;
 export {

package/dist/vue2/recipes/conversation_view/feed_item_row/feed_item_row.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feed_item_row.vue.js","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<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 <template\n v-if=\"noInitials\"\n #icon=\"{ iconSize }\"\n >\n <dt-icon-user\n :size=\"iconSize\"\n />\n </template>\n </dt-avatar>\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';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeFeedItemRow',\n\n components: {\n DtAvatar,\n DtLazyShow,\n DtListItem,\n DtBadge,\n DtIconUser,\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 Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n time string displayed as is.\n * Shown on the header when showHeader is true\n /\n time: {\n type: String,\n default: '',\n },\n\n /\n short time string without AM/PM displayed as is.\n * Shown on the left of feed item when showHeader is false and isActive is true\n /\n shortTime: {\n type: String,\n default: '',\n },\n\n /\n A label displayed next to the displayName. Will not show if empty.\n /\n labelText: {\n type: String,\n default: '',\n },\n\n /\n displays a darkened background on the row.\n /\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /\n state for the feed item row. Can be normal, searched & error\n /\n state: {\n type: String,\n default: DEFAULT_FEED_ROW_STATE,\n validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n },\n },\n\n emits: [\n /\n Fires when hovered over feed row\n \n @event hover\n * @type {Boolean}\n /\n 'hover',\n\n /\n Fires when focused over feed row\n \n @event focus\n * @type {Boolean}\n /\n 'focus',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n ],\n\n data () {\n return {\n transitionActive: false,\n };\n },\n\n computed: {\n feedListeners () {\n return {\n ...this.$listeners,\n mouseenter: () => this.setHover(true),\n mouseleave: () => this.setHover(false),\n focusin: () => this.setFocus(true),\n focusout: () => this.setFocus(false),\n transitionend: () => this.transitionComplete(),\n keydown: event => {\n switch (event.code) {\n case 'Tab':\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n };\n },\n\n listItemClasses () {\n return [\n 'dt-feed-item-row',\n { 'dt-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n { 'dt-feed-item-row--state-transition': this.transitionActive },\n FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n ];\n },\n },\n\n watch: {\n state: {\n immediate: true,\n handler: function (newState, oldState) {\n if (newState !== DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = true;\n }\n },\n },\n },\n\n methods: {\n transitionComplete () {\n if (this.state === DEFAULT_FEED_ROW_STATE) {\n this.transitionActive = false;\n }\n },\n\n trapFocus (e) {\n this.focusTrappedTabPress(e);\n },\n\n setFocus (bool) {\n this.$emit('focus', bool);\n },\n\n setHover (bool) {\n this.$emit('hover', bool);\n },\n },\n};\n</script>\n\n<style lang=\"less\" scoped>\n.dt-feed-item-row {\n\n width: var(--dt-size-100-percent);\n box-sizing: border-box;\n position: relative;\n padding: var(--dt-space-300) var(--dt-space-500);\n\n &:focus-visible {\n box-shadow: var(--dt-shadow-focus-inset);\n }\n\n &--state-searched {\n background-color: var(--dt-color-surface-warning-subtle);\n }\n\n &--state-error {\n background-color: var(--dt-color-surface-critical-subtle);\n }\n\n &--active {\n background-color: var(--dt-color-surface-secondary-opaque);\n }\n\n &--state-transition {\n transition-duration: 2s;\n transition-delay: 0s;\n transition-timing-function: var(--ttf-in-out);\n transition-property: background-color;\n }\n\n &__avatar-container {\n padding-top: var(--dt-space-300);\n padding-bottom: var(--dt-space-300);\n }\n\n &__content {\n padding-left: var(--dt-space-300);\n }\n\n &__attachment {\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-300);\n\n &:deep(.dt-feed-item-row__image) {\n border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);\n border-radius: var(--dt-size-radius-400);\n display: block;\n max-width: 30rem;\n max-height: 30rem;\n min-width: 5.6rem;\n min-height: 5.6rem;\n }\n\n &:deep(.dt-feed-item-row__video) {\n display: block;\n height: 25.0rem;\n }\n }\n\n &__header {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n gap: var(--dt-space-300);\n font-size: var(--dt-font-size-200);\n line-height: var(--dt-font-line-height-300);\n\n &__name {\n font-weight: var(--dt-font-weight-bold);\n }\n\n &__time {\n font-size: var(--dt-font-size-100);\n color: var(--dt-color-foreground-tertiary);\n flex-shrink: 0;\n }\n }\n\n &__reactions {\n display: flex;\n flex-wrap: wrap;\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n padding-left: var(--dt-space-300);\n }\n\n &__threading {\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n }\n\n &__left-time {\n color: var(--dt-color-foreground-tertiary);\n font-size: var(--dt-font-size-100);\n font-weight: var(--dt-font-weight-normal);\n vertical-align: middle;\n white-space: nowrap;\n }\n\n &__menu {\n position: absolute;\n top: var(--dt-space-550-negative);\n right: var(--dt-space-450);\n }\n\n &:deep(> .dt-item-layout) {\n font: var(--dt-typography-body-md-compact);\n min-height: initial;\n padding: 0px;\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--left) {\n align-self: flex-start;\n text-align: end;\n display: block;\n padding-right: var(--dt-space-300);\n padding-left: var(--dt-space-0);\n // min-width = avatar width + padding\n min-width: calc(var(--dt-space-600) + var(--dt-space-300));\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--right) {\n padding: 0;\n min-width: initial;\n }\n\n &:deep(> .dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom) {\n display: flex;\n flex-direction: column;\n margin-top: 0;\n }\n}\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"feed_item_row.vue.js","sources":["../../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<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 :icon-name=\"iconName\"\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 Initials will never be shown. Instead it will show a \"User\" icon.\n /\n noInitials: {\n type: Boolean,\n default: false,\n },\n\n /\n time string displayed as is.\n * Shown on the header when showHeader is true\n /\n time: {\n type: String,\n default: '',\n },\n\n /\n short time string without AM/PM displayed as is.\n * Shown on the left of feed item when showHeader is false and isActive is true\n /\n shortTime: {\n type: String,\n default: '',\n },\n\n /\n A label displayed next to the displayName. Will not show if empty.\n /\n labelText: {\n type: String,\n default: '',\n },\n\n /\n displays a darkened background on the row.\n /\n isActive: {\n type: Boolean,\n default: false,\n },\n\n /\n state for the feed item row. Can be normal, searched & error\n /\n state: {\n type: String,\n default: DEFAULT_FEED_ROW_STATE,\n validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n },\n },\n\n emits: [\n /\n Fires when hovered over feed row\n \n @event hover\n * @type {Boolean}\n /\n 'hover',\n\n /\n Fires when focused over feed row\n \n @event focus\n * @type {Boolean}\n /\n 'focus',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n */\n 'keydown',\n ],\n\n data () {\n return {\n transitionActive: false,\n };\n },\n\n computed: {\n feedListeners () {\n return {\n ...this.$listeners,\n mouseenter: () => this.setHover(true),\n mouseleave: () => this.setHover(false),\n focusin: () => this.setFocus(true),\n focusout: () => this.setFocus(false),\n transitionend: () => this.transitionComplete(),\n keydown: event => {\n switch (event.code) {\n case 'Tab':\n this.trapFocus(event);\n break;\n }\n this.$emit('keydown', event);\n },\n };\n },\n\n iconName () {\n return this.noInitials ? 'user' : null;\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":[],"mappings":"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"}

package/dist/vue2/recipes/conversation_view/feed_pill/feed_item_pill.vue.cjs CHANGED Viewed

@@ -1,14 +1,21 @@
 "use strict";
 const feed_item_pill_constants = require("./feed_item_pill_constants.cjs");
-const vue2 = require("@dialpad/dialtone-icons/vue2");
 ;/* empty css                      */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const item_layout = require("../../../components/item_layout/item_layout.vue.cjs");
+const icon = require("../../../components/icon/icon.vue.cjs");
 const collapsible = require("../../../components/collapsible/collapsible.vue.cjs");
 const _sfc_main = {
   name: "DtRecipeFeedItemPill",
-  components: { DtItemLayout: item_layout, DtCollapsible: collapsible },
+  components: { DtItemLayout: item_layout, DtIcon: icon, DtCollapsible: collapsible },
   props: {
+    /**
+     * Accepts a DtIcon name to be shown in the left
+     */
+    iconName: {
+      type: String,
+      default: () => ""
+    },
     /**
      * Bolded primary text
      */
@@ -65,11 +72,12 @@ const _sfc_main = {
     };
   },
   computed: {
-    toggleIcon() {
-      return this.expanded ? vue2.DtIconChevronDown : vue2.DtIconChevronRight;
-    },
-    showChevronIcon() {
-      return this.toggleable && this.hover;
+    computedIcon() {
+      if (this.toggleable && this.hover) {
+        return this.expanded ? "chevron-down" : "chevron-right";
+      } else {
+        return this.iconName;
+      }
     },
     toggleableClass() {
       return this.toggleable ? "d-c-pointer" : "";
@@ -97,7 +105,7 @@ var _sfc_render = function render() {
     }, "mouseleave": function($event) {
       _vm.hover = false;
     }, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "dt-recipe-feed-item-pill__layout", scopedSlots: _vm._u([{ key: "left", fn: function() {
-      return [_c("div", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [_vm.showChevronIcon ? _c(_vm.toggleIcon, { tag: "component", attrs: { "size": "300" } }) : _vm._t("leftIcon", null, { "iconSize": "300" })], 2)];
+      return [_c("dt-icon", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon", "size": "300", "name": _vm.computedIcon } })];
     }, proxy: true }, { key: "subtitle", fn: function() {
       return [_vm._t("subtitle")];
     }, proxy: true }, { key: "bottom", fn: function() {
@@ -118,7 +126,7 @@ var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
   _sfc_staticRenderFns,
   false,
   null,
-  "df943928"
+  "dab5b252"
 );
 const feed_item_pill = __component__.exports;
 module.exports = feed_item_pill;

package/dist/vue2/recipes/conversation_view/feed_pill/feed_item_pill.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feed_item_pill.vue.cjs","sources":["../../../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["<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 <~~div\n class=\"~~dt-~~recipe-feed-item-pill__icon~~\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n ~~>\n~~ ~~<component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n~~ size=\"300\"\n ~~/>\n <!-- @slot Slot for left icon, icon~~-~~size slot prop defaults to '300' -->\n <slot\n v~~-~~else~~\~~n name=\~~"~~leftIcon~~\"\n :~~icon-size~~=\"~~'300'~~\"\n />\n ~~</div>\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 { ~~DtItemLayout~~ } from '@/components/~~item_layout~~';\nimport { ~~DtCollapsible~~ } from '@/components/~~collapsible~~';\nimport { ~~DtIconChevronDown,~~ ~~DtIconChevronRight~~ } from '~~@dialpad~~/~~dialtone-icons/vue2~~';\n\nexport default {\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\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 ~~toggleIcon~~ () {\n return this.expanded ? ~~DtIconChevronDown~~ : ~~DtIconChevronRight~~;\n }~~,\n\n showChevronIcon~~ () {\n return this.~~toggleable && this.hover~~;\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 ~~display: flex;\n &:deep(svg) {\n~~ animation: fade 0.15s ease-in;\n ~~}\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":["DtItemLayout","~~DtCollapsible~~","~~FEED_ITEM_PILL_BORDER_COLORS~~","~~DtIconChevronDown~~"~~,"DtIconChevronRight"~~],"mappings":";;;;;;;~~AAiEA~~,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,~~EAAA~~,cAAAA,~~aAAA~~,eAAAC,YAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAAC,qDAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,~~aAAA~~;AACA,~~aAAA~~,KAAA,~~WAAAC~~,KAAA,~~oBAAAC~~;~~IACA~~;AAAA,~~IAEA~~,~~kBAAA~~;AACA,~~aAAA~~,KAAA,~~cAAA,KAAA~~;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,~~aAAAF~~,yBAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"feed_item_pill.vue.cjs","sources":["../../../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["<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":["DtItemLayout","DtIcon","DtCollapsible","FEED_ITEM_PILL_BORDER_COLORS"],"mappings":";;;;;;;AAuDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAAA,cAAAA,qBAAAC,MAAA,eAAAC,YAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAAC,qDAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,cAAA,KAAA,OAAA;AACA,eAAA,KAAA,WAAA,iBAAA;AAAA,MACA,OAAA;AACA,eAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAA,yBAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/feed_pill/feed_item_pill.vue.js CHANGED Viewed

@@ -1,13 +1,20 @@
 import { FEED_ITEM_PILL_BORDER_COLORS } from "./feed_item_pill_constants.js";
-import { DtIconChevronDown, DtIconChevronRight } from "@dialpad/dialtone-icons/vue2";
 /* empty css                    */
 import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
 import DtItemLayout from "../../../components/item_layout/item_layout.vue.js";
+import DtIcon from "../../../components/icon/icon.vue.js";
 import DtCollapsible from "../../../components/collapsible/collapsible.vue.js";
 const _sfc_main = {
   name: "DtRecipeFeedItemPill",
-  components: { DtItemLayout, DtCollapsible },
+  components: { DtItemLayout, DtIcon, DtCollapsible },
   props: {
+    /**
+     * Accepts a DtIcon name to be shown in the left
+     */
+    iconName: {
+      type: String,
+      default: () => ""
+    },
     /**
      * Bolded primary text
      */
@@ -64,11 +71,12 @@ const _sfc_main = {
     };
   },
   computed: {
-    toggleIcon() {
-      return this.expanded ? DtIconChevronDown : DtIconChevronRight;
-    },
-    showChevronIcon() {
-      return this.toggleable && this.hover;
+    computedIcon() {
+      if (this.toggleable && this.hover) {
+        return this.expanded ? "chevron-down" : "chevron-right";
+      } else {
+        return this.iconName;
+      }
     },
     toggleableClass() {
       return this.toggleable ? "d-c-pointer" : "";
@@ -96,7 +104,7 @@ var _sfc_render = function render() {
     }, "mouseleave": function($event) {
       _vm.hover = false;
     }, "click": _vm.onClick } }, [_c("dt-item-layout", { staticClass: "dt-recipe-feed-item-pill__layout", scopedSlots: _vm._u([{ key: "left", fn: function() {
-      return [_c("div", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [_vm.showChevronIcon ? _c(_vm.toggleIcon, { tag: "component", attrs: { "size": "300" } }) : _vm._t("leftIcon", null, { "iconSize": "300" })], 2)];
+      return [_c("dt-icon", { staticClass: "dt-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon", "size": "300", "name": _vm.computedIcon } })];
     }, proxy: true }, { key: "subtitle", fn: function() {
       return [_vm._t("subtitle")];
     }, proxy: true }, { key: "bottom", fn: function() {
@@ -117,7 +125,7 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  "df943928"
+  "dab5b252"
 );
 const feed_item_pill = __component__.exports;
 export {

package/dist/vue2/recipes/conversation_view/feed_pill/feed_item_pill.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feed_item_pill.vue.js","sources":["../../../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["<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 <~~div\n class=\"~~dt-~~recipe-feed-item-pill__icon~~\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n ~~>\n~~ ~~<component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n~~ size=\"300\"\n ~~/>\n <!-- @slot Slot for left icon, icon~~-~~size slot prop defaults to '300' -->\n <slot\n v~~-~~else~~\~~n name=\~~"~~leftIcon~~\"\n :~~icon-size~~=\"~~'300'~~\"\n />\n ~~</div>\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 { ~~DtItemLayout~~ } from '@/components/~~item_layout~~';\nimport { ~~DtCollapsible~~ } from '@/components/~~collapsible~~';\nimport { ~~DtIconChevronDown,~~ ~~DtIconChevronRight~~ } from '~~@dialpad~~/~~dialtone-icons/vue2~~';\n\nexport default {\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\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 ~~toggleIcon~~ () {\n return this.expanded ? ~~DtIconChevronDown~~ : ~~DtIconChevronRight~~;\n }~~,\n\n showChevronIcon~~ () {\n return this.~~toggleable && this.hover~~;\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 ~~display: flex;\n &:deep(svg) {\n~~ animation: fade 0.15s ease-in;\n ~~}\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":[],"mappings":";;;;;;~~AAiEA~~,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,4BAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,~~aAAA~~;AACA,~~aAAA~~,KAAA,~~WAAA~~,~~oBAAA~~;~~AAAA~~,~~IACA~~;AAAA,~~IAEA~~,~~kBAAA~~;AACA,~~aAAA~~,KAAA,~~cAAA,KAAA~~;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"feed_item_pill.vue.js","sources":["../../../../recipes/conversation_view/feed_pill/feed_item_pill.vue"],"sourcesContent":["<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":[],"mappings":";;;;;;AAuDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAA,QAAA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,UAAA,OAAA,KAAA,4BAAA,EAAA,SAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,eAAA;AACA,UAAA,KAAA,cAAA,KAAA,OAAA;AACA,eAAA,KAAA,WAAA,iBAAA;AAAA,MACA,OAAA;AACA,eAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,6BAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,UAAA,CAAA,KAAA,WAAA;AAEA,WAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.cjs CHANGED Viewed

@@ -1,18 +1,17 @@
 "use strict";
 const vue2 = require("@tiptap/vue-2");
-const vue2$1 = require("@dialpad/dialtone-icons/vue2");
 ;/* empty css                   */
 const _pluginVue2_normalizer = require("../../../../_virtual/_plugin-vue2_normalizer.cjs");
 const item_layout = require("../../../../components/item_layout/item_layout.vue.cjs");
+const icon = require("../../../../components/icon/icon.vue.cjs");
 const button = require("../../../../components/button/button.vue.cjs");
 const _sfc_main = {
   name: "MeetingPill",
   components: {
     NodeViewWrapper: vue2.NodeViewWrapper,
     DtItemLayout: item_layout,
-    DtIconClose: vue2$1.DtIconClose,
-    DtButton: button,
-    DtIconVideo: vue2$1.DtIconVideo
+    DtIcon: icon,
+    DtButton: button
   },
   props: vue2.nodeViewProps,
   emits: ["meeting-pill-close"],
@@ -25,10 +24,10 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("node-view-wrapper", { staticClass: "dt-message-input-meeting-pill" }, [_c("dt-item-layout", { staticClass: "dt-message-input-meeting-pill__layout", attrs: { "unstyled": "" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
-    return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon-video", { attrs: { "size": "400" } })], 1)];
+    return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon", { attrs: { "name": "video", "size": "400" } })], 1)];
   }, proxy: true }, { key: "right", fn: function() {
     return [_c("div", { staticClass: "dt-message-input-meeting-pill__close" }, [_c("dt-button", { attrs: { "circle": "", "aria-label": _vm.node.attrs["close-button-aria-label"], "size": "xs", "importance": "clear" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon-close", { attrs: { "size": "300" } })];
+      return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
     }, proxy: true }]) })], 1)];
   }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.node.attrs.text) + " ")])], 1);
 };

package/dist/vue2/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MeetingPill.vue.cjs","sources":["../../../../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n <dt-item-layout\n class=\"dt-message-input-meeting-pill__layout\"\n unstyled\n >\n <template #left>\n <div class=\"dt-message-input-meeting-pill__icon\">\n <dt-icon-video\n size=\"400\"\n />\n </div>\n </template>\n {{ node.attrs.text }}\n <template #right>\n <div class=\"dt-message-input-meeting-pill__close\">\n <dt-button\n circle\n :aria-label=\"node.attrs['close-button-aria-label']\"\n size=\"xs\"\n importance=\"clear\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon-close\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n </template>\n </dt-item-layout>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { ~~DtIconClose,~~ ~~DtIconVideo~~ } from '~~@dialpad~~/~~dialtone-icons/vue2~~';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'MeetingPill',\n\n components: {\n NodeViewWrapper,\n DtItemLayout,\n ~~DtIconClose~~,\n DtButton,\n ~~DtIconVideo,\n~~ },\n\n props: nodeViewProps,\n\n emits: ['meeting-pill-close'],\n\n methods: {\n close (e) {\n this.$parent.$emit('meeting-pill-close', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n display: inline-block;\n\n &__layout {\n gap: var(--dt-space-400);\n grid-template-areas: 'left content right';\n grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n align-items: center;\n max-width: var(--dt-size-905);\n padding-left: var(--dt-space-400);\n padding-right: var(--dt-space-400);\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n border-radius: var(--dt-size-radius-300);\n font: var(--dt-typography-headline-md);\n }\n\n &__icon {\n display: flex;\n align-items: center;\n padding: var(--dt-space-350);\n }\n\n &__close {\n display: flex;\n justify-content: flex-end;\n }\n}\n</style>\n"],"names":["NodeViewWrapper","DtItemLayout","~~DtIconClose~~","DtButton","~~DtIconVideo","~~nodeViewProps"],"mappings":";;;;;;;~~AAyCA~~,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,iBAAAA,KAAA;AAAA,IACA,cAAAC;AAAAA,IACA,~~aAAAC,OAAA~~;~~AAAA~~,IACA,UAAAC;AAAAA,~~IACA,aAAAC,OAAA;AAAA,~~EACA;AAAA,EAEA,OAAAC,KAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"MeetingPill.vue.cjs","sources":["../../../../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n <dt-item-layout\n class=\"dt-message-input-meeting-pill__layout\"\n unstyled\n >\n <template #left>\n <div class=\"dt-message-input-meeting-pill__icon\">\n <dt-icon\n name=\"video\"\n size=\"400\"\n />\n </div>\n </template>\n {{ node.attrs.text }}\n <template #right>\n <div class=\"dt-message-input-meeting-pill__close\">\n <dt-button\n circle\n :aria-label=\"node.attrs['close-button-aria-label']\"\n size=\"xs\"\n importance=\"clear\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n </template>\n </dt-item-layout>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'MeetingPill',\n\n components: {\n NodeViewWrapper,\n DtItemLayout,\n DtIcon,\n DtButton,\n },\n\n props: nodeViewProps,\n\n emits: ['meeting-pill-close'],\n\n methods: {\n close (e) {\n this.$parent.$emit('meeting-pill-close', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n display: inline-block;\n\n &__layout {\n gap: var(--dt-space-400);\n grid-template-areas: 'left content right';\n grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n align-items: center;\n max-width: var(--dt-size-905);\n padding-left: var(--dt-space-400);\n padding-right: var(--dt-space-400);\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n border-radius: var(--dt-size-radius-300);\n font: var(--dt-typography-headline-md);\n }\n\n &__icon {\n display: flex;\n align-items: center;\n padding: var(--dt-space-350);\n }\n\n &__close {\n display: flex;\n justify-content: flex-end;\n }\n}\n</style>\n"],"names":["NodeViewWrapper","DtItemLayout","DtIcon","DtButton","nodeViewProps"],"mappings":";;;;;;;AA2CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,iBAAAA,KAAA;AAAA,IACA,cAAAC;AAAAA,IACA,QAAAC;AAAAA,IACA,UAAAC;AAAAA,EACA;AAAA,EAEA,OAAAC,KAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.js CHANGED Viewed

@@ -1,17 +1,16 @@
 import { NodeViewWrapper, nodeViewProps } from "@tiptap/vue-2";
-import { DtIconClose, DtIconVideo } from "@dialpad/dialtone-icons/vue2";
 /* empty css                 */
 import normalizeComponent from "../../../../_virtual/_plugin-vue2_normalizer.js";
 import DtItemLayout from "../../../../components/item_layout/item_layout.vue.js";
+import DtIcon from "../../../../components/icon/icon.vue.js";
 import DtButton from "../../../../components/button/button.vue.js";
 const _sfc_main = {
   name: "MeetingPill",
   components: {
     NodeViewWrapper,
     DtItemLayout,
-    DtIconClose,
-    DtButton,
-    DtIconVideo
+    DtIcon,
+    DtButton
   },
   props: nodeViewProps,
   emits: ["meeting-pill-close"],
@@ -24,10 +23,10 @@ const _sfc_main = {
 var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _c("node-view-wrapper", { staticClass: "dt-message-input-meeting-pill" }, [_c("dt-item-layout", { staticClass: "dt-message-input-meeting-pill__layout", attrs: { "unstyled": "" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
-    return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon-video", { attrs: { "size": "400" } })], 1)];
+    return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon", { attrs: { "name": "video", "size": "400" } })], 1)];
   }, proxy: true }, { key: "right", fn: function() {
     return [_c("div", { staticClass: "dt-message-input-meeting-pill__close" }, [_c("dt-button", { attrs: { "circle": "", "aria-label": _vm.node.attrs["close-button-aria-label"], "size": "xs", "importance": "clear" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_c("dt-icon-close", { attrs: { "size": "300" } })];
+      return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
     }, proxy: true }]) })], 1)];
   }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.node.attrs.text) + " ")])], 1);
 };

package/dist/vue2/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MeetingPill.vue.js","sources":["../../../../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n <dt-item-layout\n class=\"dt-message-input-meeting-pill__layout\"\n unstyled\n >\n <template #left>\n <div class=\"dt-message-input-meeting-pill__icon\">\n <dt-icon-video\n size=\"400\"\n />\n </div>\n </template>\n {{ node.attrs.text }}\n <template #right>\n <div class=\"dt-message-input-meeting-pill__close\">\n <dt-button\n circle\n :aria-label=\"node.attrs['close-button-aria-label']\"\n size=\"xs\"\n importance=\"clear\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon-close\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n </template>\n </dt-item-layout>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { ~~DtIconClose,~~ ~~DtIconVideo~~ } from '~~@dialpad~~/~~dialtone-icons/vue2~~';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'MeetingPill',\n\n components: {\n NodeViewWrapper,\n DtItemLayout,\n ~~DtIconClose~~,\n DtButton,\n ~~DtIconVideo,\n~~ },\n\n props: nodeViewProps,\n\n emits: ['meeting-pill-close'],\n\n methods: {\n close (e) {\n this.$parent.$emit('meeting-pill-close', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n display: inline-block;\n\n &__layout {\n gap: var(--dt-space-400);\n grid-template-areas: 'left content right';\n grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n align-items: center;\n max-width: var(--dt-size-905);\n padding-left: var(--dt-space-400);\n padding-right: var(--dt-space-400);\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n border-radius: var(--dt-size-radius-300);\n font: var(--dt-typography-headline-md);\n }\n\n &__icon {\n display: flex;\n align-items: center;\n padding: var(--dt-space-350);\n }\n\n &__close {\n display: flex;\n justify-content: flex-end;\n }\n}\n</style>\n"],"names":[],"mappings":";;;;;;~~AAyCA~~,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,~~IACA;AAAA,~~EACA;AAAA,EAEA,OAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"MeetingPill.vue.js","sources":["../../../../../recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue"],"sourcesContent":["<template>\n <node-view-wrapper class=\"dt-message-input-meeting-pill\">\n <dt-item-layout\n class=\"dt-message-input-meeting-pill__layout\"\n unstyled\n >\n <template #left>\n <div class=\"dt-message-input-meeting-pill__icon\">\n <dt-icon\n name=\"video\"\n size=\"400\"\n />\n </div>\n </template>\n {{ node.attrs.text }}\n <template #right>\n <div class=\"dt-message-input-meeting-pill__close\">\n <dt-button\n circle\n :aria-label=\"node.attrs['close-button-aria-label']\"\n size=\"xs\"\n importance=\"clear\"\n @click=\"close\"\n >\n <template #icon>\n <dt-icon\n name=\"close\"\n size=\"300\"\n />\n </template>\n </dt-button>\n </div>\n </template>\n </dt-item-layout>\n </node-view-wrapper>\n</template>\n\n<script>\nimport { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-2';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n name: 'MeetingPill',\n\n components: {\n NodeViewWrapper,\n DtItemLayout,\n DtIcon,\n DtButton,\n },\n\n props: nodeViewProps,\n\n emits: ['meeting-pill-close'],\n\n methods: {\n close (e) {\n this.$parent.$emit('meeting-pill-close', e);\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-message-input-meeting-pill {\n display: inline-block;\n\n &__layout {\n gap: var(--dt-space-400);\n grid-template-areas: 'left content right';\n grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);\n align-items: center;\n max-width: var(--dt-size-905);\n padding-left: var(--dt-space-400);\n padding-right: var(--dt-space-400);\n padding-top: var(--dt-space-200);\n padding-bottom: var(--dt-space-200);\n border: var(--dt-size-border-100) solid var(--dt-color-border-default);\n border-radius: var(--dt-size-radius-300);\n font: var(--dt-typography-headline-md);\n }\n\n &__icon {\n display: flex;\n align-items: center;\n padding: var(--dt-space-350);\n }\n\n &__close {\n display: flex;\n justify-content: flex-end;\n }\n}\n</style>\n"],"names":[],"mappings":";;;;;;AA2CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,EAEA,OAAA,CAAA,oBAAA;AAAA,EAEA,SAAA;AAAA,IACA,MAAA,GAAA;AACA,WAAA,QAAA,MAAA,sBAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/message_input/message_input.vue.cjs CHANGED Viewed

@@ -1,10 +1,10 @@
 "use strict";
 const meeting_pill = require("./meeting_pill/meeting_pill.cjs");
-const vue2 = require("@dialpad/dialtone-icons/vue2");
 ;/* empty css                     */
 const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
 const button = require("../../../components/button/button.vue.cjs");
 const emoji_picker = require("../../../components/emoji_picker/emoji_picker.vue.cjs");
+const icon = require("../../../components/icon/icon.vue.cjs");
 const input = require("../../../components/input/input.vue.cjs");
 const popover = require("../../../components/popover/popover.vue.cjs");
 const rich_text_editor = require("../../../components/rich_text_editor/rich_text_editor.vue.cjs");
@@ -15,14 +15,11 @@ const _sfc_main = {
   components: {
     DtButton: button,
     DtEmojiPicker: emoji_picker,
+    DtIcon: icon,
     DtInput: input,
     DtPopover: popover,
     DtRichTextEditor: rich_text_editor,
-    DtTooltip: tooltip,
-    DtIconImage: vue2.DtIconImage,
-    DtIconVerySatisfied: vue2.DtIconVerySatisfied,
-    DtIconSatisfied: vue2.DtIconSatisfied,
-    DtIconSend: vue2.DtIconSend
+    DtTooltip: tooltip
   },
   mixins: [],
   inheritAttrs: false,
@@ -181,7 +178,7 @@ const _sfc_main = {
      */
     showSend: {
       type: [Boolean, Object],
-      default: () => ({})
+      default: () => ({ icon: "send" })
     },
     /**
      * Cancel button defaults.
@@ -369,9 +366,6 @@ const _sfc_main = {
     };
   },
   computed: {
-    showSendIcon() {
-      return !this.showSend.text;
-    },
     inputLength() {
       return this.internalInputValue.length;
     },
@@ -391,9 +385,6 @@ const _sfc_main = {
     },
     emojiPickerHovered() {
       return this.emojiPickerFocus || this.emojiPickerOpened;
-    },
-    sendIconSize() {
-      return "300";
     }
   },
   watch: {
@@ -491,8 +482,8 @@ var _sfc_render = function render() {
   }, "blur": function($event) {
     _vm.imagePickerFocus = false;
   } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-image", { attrs: { "size": "300" } })];
-  }, proxy: true }], null, false, 4195307205) }) : _vm._e(), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "dt-message-input__image-input", attrs: { "data-qa": "dt-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } }), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "update:open": function($event) {
+    return [_c("dt-icon", { attrs: { "name": "image", "size": "300" } })];
+  }, proxy: true }], null, false, 2561380377) }) : _vm._e(), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "dt-message-input__image-input", attrs: { "data-qa": "dt-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } }), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "update:open": function($event) {
     _vm.emojiPickerOpened = $event;
   } }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
     return [_c("dt-button", _vm._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.emojiTooltipMessage, expression: "emojiTooltipMessage" }], attrs: { "data-qa": "dt-message-input-emoji-picker-btn", "size": "sm", "circle": "", "kind": _vm.emojiPickerHovered ? "default" : "muted", "importance": "clear", "aria-label": _vm.emojiButtonAriaLabel }, on: { "click": _vm.toggleEmojiPicker, "mouseenter": function($event) {
@@ -504,26 +495,24 @@ var _sfc_render = function render() {
     }, "blur": function($event) {
       _vm.emojiPickerFocus = false;
     } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-      return [_vm.emojiPickerHovered ? _c("dt-icon-very-satisfied", { attrs: { "size": "300" } }) : _c("dt-icon-satisfied", { attrs: { "size": "300" } })];
+      return [_c("dt-icon", { attrs: { "name": !_vm.emojiPickerHovered ? "satisfied" : "very-satisfied", "size": "300" } })];
     }, proxy: true }], null, true) }, "dt-button", attrs, false))];
   } }, { key: "content", fn: function({ close }) {
     return [_c("dt-emoji-picker", _vm._b({ on: { "skin-tone": _vm.onSkinTone, "selected-emoji": (emoji) => {
       close();
       _vm.onSelectEmoji(emoji);
     } } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
-  } }], null, false, 4232841257) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "dt-message-input__bottom-section-right" }, [_c("div", { staticClass: "d-d-flex d-ai-center" }, [_vm._t("smsCount")], 2), Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input__remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, 8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+  } }], null, false, 3336317833) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "dt-message-input__bottom-section-right" }, [_c("div", { staticClass: "d-d-flex d-ai-center" }, [_vm._t("smsCount")], 2), Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input__remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, 8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
     return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "dt-message-input__remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
   }, proxy: true }], null, false, 3769616566) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input__cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm._t("sendButton", function() {
     var _a2;
     return [_vm.showSend ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: (_a2 = _vm.showSend) == null ? void 0 : _a2.tooltipLabel, expression: "showSend?.tooltipLabel", arg: "top-end" }], class: [
       {
         "dt-message-input__send-button--disabled": _vm.isSendDisabled,
-        "d-btn--circle": _vm.showSendIcon
+        "d-btn--circle": _vm.showSend.icon
       }
-    ], attrs: { "data-qa": "dt-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend }, scopedSlots: _vm._u([_vm.showSendIcon ? { key: "icon", fn: function() {
-      return [_vm._t("sendIcon", function() {
-        return [_c("dt-icon-send", { attrs: { "size": _vm.sendIconSize } })];
-      }, { "iconSize": _vm.sendIconSize })];
+    ], attrs: { "data-qa": "dt-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend }, scopedSlots: _vm._u([_vm.showSend.icon ? { key: "icon", fn: function() {
+      return [_c("dt-icon", { attrs: { "name": _vm.showSend.icon, "size": "300" } })];
     }, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2) : _vm._e()];
   })], 2)])], 2);
 };