@dialpad/dialtone 9.71.0-beta.2 → 9.71.0

package/dist/vue3/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js

@@ -1,4 +1,3 @@
-import { DtIconChevronUp } from "@dialpad/dialtone-icons/vue3";
 import utils from "../../../common/utils.js";
 import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, renderSlot, createBlock, mergeProps, normalizeClass, createCommentVNode } from "vue";
 /* empty css                                 */
@@ -6,10 +5,11 @@ import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 import DtRecipeCallbarButton from "../callbar_button/callbar_button.vue.js";
 import DtPopover from "../../../components/popover/popover.vue.js";
 import DtButton from "../../../components/button/button.vue.js";
+import DtIcon from "../../../components/icon/icon.vue.js";
 import { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from "../callbar_button/callbar_button_constants.js";
 const _sfc_main = {
   name: "DtRecipeCallbarButtonWithPopover",
-  components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },
+  components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIcon },
   /* inheritAttrs: false is generally an option we want to set on library
     components. This allows any attributes passed in that are not recognized
     as props to be passed down to another element or component using v-bind:$attrs
@@ -242,7 +242,7 @@ const _sfc_main = {
 const _hoisted_1 = { class: "dt-recipe--callbar-button-with-popover" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_recipe_callbar_button = resolveComponent("dt-recipe-callbar-button");
-  const _component_dt_icon_chevron_up = resolveComponent("dt-icon-chevron-up");
+  const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
   const _component_dt_popover = resolveComponent("dt-popover");
   return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -300,7 +300,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: $options.arrowClick
         }, {
           icon: withCtx(() => [
-            createVNode(_component_dt_icon_chevron_up, {
+            createVNode(_component_dt_icon, {
+              name: "chevron-up",
               class: "dt-recipe--callbar-button-with-popover--arrow__icon",
               size: "200"
             })

package/dist/vue3/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"callbar_button_with_popover.vue.js","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-recipe--callbar-button-with-popover\"\n  >\n    <dt-recipe-callbar-button\n      :aria-label=\"ariaLabel\"\n      :disabled=\"disabled\"\n      :active=\"active\"\n      :danger=\"danger\"\n      :button-class=\"buttonClass\"\n      :button-width-size=\"buttonWidthSize\"\n      :text-class=\"textClass\"\n      class=\"dt-recipe--callbar-button-with-popover--main-button\"\n      @click=\"buttonClick\"\n    >\n      <template #icon>\n        <slot name=\"icon\" />\n      </template>\n      <template #tooltip>\n        <slot name=\"tooltip\" />\n      </template>\n      <slot />\n    </dt-recipe-callbar-button>\n    <dt-popover\n      v-if=\"showArrowButton\"\n      :id=\"id\"\n      :modal=\"false\"\n      :open=\"open\"\n      :placement=\"placement\"\n      :initial-focus-element=\"initialFocusElement\"\n      :show-close-button=\"showCloseButton\"\n      :offset=\"offset\"\n      padding=\"none\"\n      class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n      :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n      header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n      v-bind=\"$attrs\"\n      :open-popover=\"showPopover\"\n      @opened=\"onModalIsOpened\"\n    >\n      <template #anchor>\n        <dt-button\n          circle\n          importance=\"clear\"\n          size=\"lg\"\n          :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n                   { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n          width=\"2rem\"\n          :aria-label=\"arrowButtonLabel\"\n          :active=\"open\"\n          @click=\"arrowClick\"\n        >\n          <template #icon>\n            <dt-icon-chevron-up\n              class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n      <template #headerContent>\n        <slot name=\"headerContent\" />\n      </template>\n      <template #footerContent>\n        <slot name=\"footerContent\" />\n      </template>\n    </dt-popover>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIconChevronUp } from '@dialpad/dialtone-icons/vue3';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButtonWithPopover',\n\n  components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIconChevronUp },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Aria label for the arrow. Cannot be empty.\n     */\n    arrowButtonLabel: {\n      type: String,\n      required: true,\n      validator: (label) => {\n        return !!label;\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * @values 'bottom', 'bottom-start', 'bottom-end',\n     *         'right', 'right-start', 'right-end',\n     *         'left', 'left-start', 'left-end',\n     *         'top', 'top-start', 'top-end'\n     * @default 'top'\n     */\n    placement: {\n      type: String,\n      default: 'top',\n    },\n\n    /**\n     *  Displaces the content box from its anchor element\n     *  by the specified number of pixels.\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n     * The element that is focused when the popover is opened. This can be an\n     * HTMLElement within the popover, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: String,\n      default: 'first',\n    },\n\n    /**\n     * Determines visibility for close button\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Forces showing the arrow, even if the button is disabled.\n     * default is false\n     * @values true, false\n     */\n    forceShowArrow: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * We need this declaration because of how Vue3 informs the component about a listener.\n     * Spoiler alert: it doesn't.\n     * Vue3 intends to work as a real pub-sub, meaning the publisher has not a clue of who the subscribers are.\n     * This makes it impossible from the regular declaration (emits: ['click']) to check whether\n     * we actually have a click handler or not.\n     * We're hacking it by adding an onClick prop: https://github.com/vuejs/core/issues/5220\n    */\n    /* eslint-disable-next-line vue/no-unused-properties */\n    onClick: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * Additional class name for the popover content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * To auto open the modal popover.\n     */\n    openPopover: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the arrow is clicked\n     */\n    'arrow-click',\n\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Emitted when modal popover is opened or closed.\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      open: false,\n    };\n  },\n\n  computed: {\n    showArrowButton () {\n      return this.forceShowArrow || !this.disabled;\n    },\n\n    isCompactMode () {\n      return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n    },\n\n    showPopover () {\n      if (!this.openPopover || this.open) {\n        this.syncOpenState();\n        return false;\n      }\n\n      return this.toggleOpen();\n    },\n  },\n\n  methods: {\n    arrowClick (ev) {\n      this.$emit('arrow-click', ev);\n      return this.toggleOpen();\n    },\n\n    toggleOpen () {\n      return (this.open = !this.open);\n    },\n\n    syncOpenState () {\n      this.open = this.openPopover;\n    },\n\n    buttonClick (ev) {\n      // If no listener for the click event, the button click opens the popover\n      // the same as if the arrow was clicked.\n      if (!this.$props.onClick) {\n        this.arrowClick(ev);\n      } else {\n        this.$emit('click', ev);\n      }\n    },\n\n    onModalIsOpened (isOpened) {\n      this.open = isOpened;\n      this.$emit('opened', isOpened);\n    },\n  },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n  margin-top: var(--dt-space-350-negative);\n  margin-left: calc(var(--dt-space-300-negative) * 5);\n  width: var(--dt-size-500);\n  height: var(--dt-size-500);\n  padding: var(--dt-space-400);\n  border-radius: var(--dt-size-300);\n\n  &.d-btn--active {\n    background: var(--dt-color-surface-moderate-opaque);\n  }\n\n  &--large {\n    margin-left: var(--dt-space-550-negative);\n  }\n\n  &__icon {\n    color: var(--dt-color-black-800);\n  }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n  .d-popover__header {\n    background: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-primary-inverted);\n\n    .d-btn {\n      color: var(--dt-color-foreground-primary-inverted);\n    }\n  }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n  --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n  flex: 1 1 100%;\n  overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n  display: flex;\n  align-items: center;\n}\n</style>\n"],"names":["this","_openBlock","_createElementBlock","_createVNode","_renderSlot","_createBlock","_mergeProps","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"callbar_button_with_popover.vue.js","sources":["../../../../recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-recipe--callbar-button-with-popover\"\n  >\n    <dt-recipe-callbar-button\n      :aria-label=\"ariaLabel\"\n      :disabled=\"disabled\"\n      :active=\"active\"\n      :danger=\"danger\"\n      :button-class=\"buttonClass\"\n      :button-width-size=\"buttonWidthSize\"\n      :text-class=\"textClass\"\n      class=\"dt-recipe--callbar-button-with-popover--main-button\"\n      @click=\"buttonClick\"\n    >\n      <template #icon>\n        <slot name=\"icon\" />\n      </template>\n      <template #tooltip>\n        <slot name=\"tooltip\" />\n      </template>\n      <slot />\n    </dt-recipe-callbar-button>\n    <dt-popover\n      v-if=\"showArrowButton\"\n      :id=\"id\"\n      :modal=\"false\"\n      :open=\"open\"\n      :placement=\"placement\"\n      :initial-focus-element=\"initialFocusElement\"\n      :show-close-button=\"showCloseButton\"\n      :offset=\"offset\"\n      padding=\"none\"\n      class=\"dt-recipe--callbar-button-with-popover--popover-wrapper\"\n      :dialog-class=\"['dt-recipe--callbar-button-with-popover--popover', contentClass]\"\n      header-class=\"d-d-flex d-ai-center d-fw-normal d-px12\"\n      v-bind=\"$attrs\"\n      :open-popover=\"showPopover\"\n      @opened=\"onModalIsOpened\"\n    >\n      <template #anchor>\n        <dt-button\n          circle\n          importance=\"clear\"\n          size=\"lg\"\n          :class=\"['dt-recipe--callbar-button-with-popover--arrow',\n                   { 'dt-recipe--callbar-button-with-popover--arrow--large': !isCompactMode }]\"\n          width=\"2rem\"\n          :aria-label=\"arrowButtonLabel\"\n          :active=\"open\"\n          @click=\"arrowClick\"\n        >\n          <template #icon>\n            <dt-icon\n              name=\"chevron-up\"\n              class=\"dt-recipe--callbar-button-with-popover--arrow__icon\"\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n      <template #headerContent>\n        <slot name=\"headerContent\" />\n      </template>\n      <template #footerContent>\n        <slot name=\"footerContent\" />\n      </template>\n    </dt-popover>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtIcon } from '@/components/icon';\nimport { DtRecipeCallbarButton, CALLBAR_BUTTON_VALID_WIDTH_SIZE } from '../callbar_button';\nimport utils from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeCallbarButtonWithPopover',\n\n  components: { DtRecipeCallbarButton, DtPopover, DtButton, DtIcon },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Aria label for the arrow. Cannot be empty.\n     */\n    arrowButtonLabel: {\n      type: String,\n      required: true,\n      validator: (label) => {\n        return !!label;\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * @values 'bottom', 'bottom-start', 'bottom-end',\n     *         'right', 'right-start', 'right-end',\n     *         'left', 'left-start', 'left-end',\n     *         'top', 'top-start', 'top-end'\n     * @default 'top'\n     */\n    placement: {\n      type: String,\n      default: 'top',\n    },\n\n    /**\n     *  Displaces the content box from its anchor element\n     *  by the specified number of pixels.\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 16],\n    },\n\n    /**\n     * The element that is focused when the popover is opened. This can be an\n     * HTMLElement within the popover, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: String,\n      default: 'first',\n    },\n\n    /**\n     * Determines visibility for close button\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Forces showing the arrow, even if the button is disabled.\n     * default is false\n     * @values true, false\n     */\n    forceShowArrow: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * We need this declaration because of how Vue3 informs the component about a listener.\n     * Spoiler alert: it doesn't.\n     * Vue3 intends to work as a real pub-sub, meaning the publisher has not a clue of who the subscribers are.\n     * This makes it impossible from the regular declaration (emits: ['click']) to check whether\n     * we actually have a click handler or not.\n     * We're hacking it by adding an onClick prop: https://github.com/vuejs/core/issues/5220\n    */\n    /* eslint-disable-next-line vue/no-unused-properties */\n    onClick: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * Additional class name for the popover content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * To auto open the modal popover.\n     */\n    openPopover: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when the arrow is clicked\n     */\n    'arrow-click',\n\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Emitted when modal popover is opened or closed.\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      open: false,\n    };\n  },\n\n  computed: {\n    showArrowButton () {\n      return this.forceShowArrow || !this.disabled;\n    },\n\n    isCompactMode () {\n      return this.buttonWidthSize === 'sm' || this.buttonWidthSize === 'md';\n    },\n\n    showPopover () {\n      if (!this.openPopover || this.open) {\n        this.syncOpenState();\n        return false;\n      }\n\n      return this.toggleOpen();\n    },\n  },\n\n  methods: {\n    arrowClick (ev) {\n      this.$emit('arrow-click', ev);\n      return this.toggleOpen();\n    },\n\n    toggleOpen () {\n      return (this.open = !this.open);\n    },\n\n    syncOpenState () {\n      this.open = this.openPopover;\n    },\n\n    buttonClick (ev) {\n      // If no listener for the click event, the button click opens the popover\n      // the same as if the arrow was clicked.\n      if (!this.$props.onClick) {\n        this.arrowClick(ev);\n      } else {\n        this.$emit('click', ev);\n      }\n    },\n\n    onModalIsOpened (isOpened) {\n      this.open = isOpened;\n      this.$emit('opened', isOpened);\n    },\n  },\n\n};\n</script>\n\n<style lang=\"less\">\n.dt-recipe--callbar-button-with-popover--arrow {\n  margin-top: var(--dt-space-350-negative);\n  margin-left: calc(var(--dt-space-300-negative) * 5);\n  width: var(--dt-size-500);\n  height: var(--dt-size-500);\n  padding: var(--dt-space-400);\n  border-radius: var(--dt-size-300);\n\n  &.d-btn--active {\n    background: var(--dt-color-surface-moderate-opaque);\n  }\n\n  &--large {\n    margin-left: var(--dt-space-550-negative);\n  }\n\n  &__icon {\n    color: var(--dt-color-black-800);\n  }\n}\n\n.dt-recipe--callbar-button-with-popover--popover {\n  .d-popover__header {\n    background: var(--dt-color-surface-contrast);\n    color: var(--dt-color-foreground-primary-inverted);\n\n    .d-btn {\n      color: var(--dt-color-foreground-primary-inverted);\n    }\n  }\n}\n\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected::after,\n.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover::after {\n  --tab--bgc: var(--dt-color-surface-contrast);\n}\n.dt-recipe--callbar-button-with-popover--button .tab-group {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dt-recipe--callbar-button-with-popover--button .tab-content {\n  flex: 1 1 100%;\n  overflow-y: auto;\n}\n\n.dt-recipe--callbar-button-with-popover {\n  display: flex;\n  align-items: center;\n}\n</style>\n"],"names":["this","_openBlock","_createElementBlock","_createVNode","_renderSlot","_createBlock","_mergeProps","_normalizeClass"],"mappings":"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"}

package/dist/vue3/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.cjs

@@ -1,17 +1,16 @@
 "use strict";
-const vue3 = require("@dialpad/dialtone-icons/vue3");
 const image_carousel = require("./media_components/image_carousel.vue.cjs");
 const vue = require("vue");
 ;/* empty css                           */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
 const button = require("../../../components/button/button.vue.cjs");
+const icon = require("../../../components/icon/icon.vue.cjs");
 const MEDIA_ITEM_WIDTH = 64;
 const _sfc_main = {
   name: "DtRecipeAttachmentCarousel",
   components: {
     DtButton: button,
-    DtIconArrowRight: vue3.DtIconArrowRight,
-    DtIconArrowLeft: vue3.DtIconArrowLeft,
+    DtIcon: icon,
     DtImageCarousel: image_carousel
   },
   mixins: [],
@@ -124,9 +123,8 @@ const _hoisted_1 = {
   role: "presentation"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_arrow_left = vue.resolveComponent("dt-icon-arrow-left");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
-  const _component_dt_icon_arrow_right = vue.resolveComponent("dt-icon-arrow-right");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
     $props.mediaList.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", {
       key: 0,
@@ -157,7 +155,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.leftScroll
     }, {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon_arrow_left, { size: "100" })
+        vue.createVNode(_component_dt_icon, {
+          name: "arrow-left",
+          size: "100"
+        })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [
@@ -173,7 +174,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.rightScroll
     }, {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon_arrow_right, { size: "100" })
+        vue.createVNode(_component_dt_icon, {
+          name: "arrow-right",
+          size: "100"
+        })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [

package/dist/vue3/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"attachment_carousel.vue.cjs","sources":["../../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"dt-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        :close-aria-label=\"closeAriaLabel\"\n        :click-to-open-aria-label=\"clickToOpenAriaLabel\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"leftArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"rightArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  mixins: [],\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    leftArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    rightArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-carousel {\n  position: relative;\n  max-height: 100px;\n  width: var(--dt-space-1000);\n}\n\n.dt-attachment-carousel__media-list {\n  display: flex;\n  flex-direction: row;\n  padding-left: 0px;\n  overflow-x: scroll;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.dt-attachment-carousel__arrow {\n  position: absolute;\n  opacity: 0;\n\n  .dt-attachment-carousel:hover & {\n    opacity: 1;\n  }\n  background-color: var(--dt-color-neutral-white);\n  top: var(--dt-space-30-percent);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-100);\n  border-color: var(--bc-default);\n}\n.dt-attachment-carousel__arrow--left {\n  left: var(--dt-space-300);\n}\n.dt-attachment-carousel__arrow--right {\n  right: var(--dt-space-300);\n}\n\n.dt-attachment-carousel__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border-radius: var(--br4);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["DtButton","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":"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"}
+{"version":3,"file":"attachment_carousel.vue.cjs","sources":["../../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"dt-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        :close-aria-label=\"closeAriaLabel\"\n        :click-to-open-aria-label=\"clickToOpenAriaLabel\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"leftArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-left\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"rightArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-right\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIcon,\n    DtImageCarousel,\n  },\n\n  mixins: [],\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    leftArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    rightArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-carousel {\n  position: relative;\n  max-height: 100px;\n  width: var(--dt-space-1000);\n}\n\n.dt-attachment-carousel__media-list {\n  display: flex;\n  flex-direction: row;\n  padding-left: 0px;\n  overflow-x: scroll;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.dt-attachment-carousel__arrow {\n  position: absolute;\n  opacity: 0;\n\n  .dt-attachment-carousel:hover & {\n    opacity: 1;\n  }\n  background-color: var(--dt-color-neutral-white);\n  top: var(--dt-space-30-percent);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-100);\n  border-color: var(--bc-default);\n}\n.dt-attachment-carousel__arrow--left {\n  left: var(--dt-space-300);\n}\n.dt-attachment-carousel__arrow--right {\n  right: var(--dt-space-300);\n}\n\n.dt-attachment-carousel__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border-radius: var(--br4);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["DtButton","DtIcon","DtImageCarousel","_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":"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"}

package/dist/vue3/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.js

@@ -1,16 +1,15 @@
-import { DtIconArrowRight, DtIconArrowLeft } from "@dialpad/dialtone-icons/vue3";
 import DtImageCarousel from "./media_components/image_carousel.vue.js";
 import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, withDirectives, createVNode, withCtx, vShow } from "vue";
 /* empty css                         */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
 import DtButton from "../../../components/button/button.vue.js";
+import DtIcon from "../../../components/icon/icon.vue.js";
 const MEDIA_ITEM_WIDTH = 64;
 const _sfc_main = {
   name: "DtRecipeAttachmentCarousel",
   components: {
     DtButton,
-    DtIconArrowRight,
-    DtIconArrowLeft,
+    DtIcon,
     DtImageCarousel
   },
   mixins: [],
@@ -123,9 +122,8 @@ const _hoisted_1 = {
   role: "presentation"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_arrow_left = resolveComponent("dt-icon-arrow-left");
+  const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
-  const _component_dt_icon_arrow_right = resolveComponent("dt-icon-arrow-right");
   return openBlock(), createElementBlock("div", _hoisted_1, [
     $props.mediaList.length > 0 ? (openBlock(), createElementBlock("ul", {
       key: 0,
@@ -156,7 +154,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.leftScroll
     }, {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon_arrow_left, { size: "100" })
+        createVNode(_component_dt_icon, {
+          name: "arrow-left",
+          size: "100"
+        })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [
@@ -172,7 +173,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.rightScroll
     }, {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon_arrow_right, { size: "100" })
+        createVNode(_component_dt_icon, {
+          name: "arrow-right",
+          size: "100"
+        })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [

package/dist/vue3/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"attachment_carousel.vue.js","sources":["../../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"dt-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        :close-aria-label=\"closeAriaLabel\"\n        :click-to-open-aria-label=\"clickToOpenAriaLabel\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"leftArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"rightArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  mixins: [],\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    leftArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    rightArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-carousel {\n  position: relative;\n  max-height: 100px;\n  width: var(--dt-space-1000);\n}\n\n.dt-attachment-carousel__media-list {\n  display: flex;\n  flex-direction: row;\n  padding-left: 0px;\n  overflow-x: scroll;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.dt-attachment-carousel__arrow {\n  position: absolute;\n  opacity: 0;\n\n  .dt-attachment-carousel:hover & {\n    opacity: 1;\n  }\n  background-color: var(--dt-color-neutral-white);\n  top: var(--dt-space-30-percent);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-100);\n  border-color: var(--bc-default);\n}\n.dt-attachment-carousel__arrow--left {\n  left: var(--dt-space-300);\n}\n.dt-attachment-carousel__arrow--right {\n  right: var(--dt-space-300);\n}\n\n.dt-attachment-carousel__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border-radius: var(--br4);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":"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"}
+{"version":3,"file":"attachment_carousel.vue.js","sources":["../../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<template>\n  <div\n    class=\"dt-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"dt-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        :close-aria-label=\"closeAriaLabel\"\n        :click-to-open-aria-label=\"clickToOpenAriaLabel\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"leftArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-left\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"rightArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-right\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIcon,\n    DtImageCarousel,\n  },\n\n  mixins: [],\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    leftArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    rightArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-carousel {\n  position: relative;\n  max-height: 100px;\n  width: var(--dt-space-1000);\n}\n\n.dt-attachment-carousel__media-list {\n  display: flex;\n  flex-direction: row;\n  padding-left: 0px;\n  overflow-x: scroll;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.dt-attachment-carousel__arrow {\n  position: absolute;\n  opacity: 0;\n\n  .dt-attachment-carousel:hover & {\n    opacity: 1;\n  }\n  background-color: var(--dt-color-neutral-white);\n  top: var(--dt-space-30-percent);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-100);\n  border-color: var(--bc-default);\n}\n.dt-attachment-carousel__arrow--left {\n  left: var(--dt-space-300);\n}\n.dt-attachment-carousel__arrow--right {\n  right: var(--dt-space-300);\n}\n\n.dt-attachment-carousel__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border-radius: var(--br4);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_createVNode"],"mappings":"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"}

package/dist/vue3/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.cjs

@@ -1,17 +1,17 @@
 "use strict";
-const vue3 = require("@dialpad/dialtone-icons/vue3");
 const progress_bar = require("./progress_bar.vue.cjs");
 const vue = require("vue");
 ;/* empty css                      */
 const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
 const image_viewer = require("../../../../components/image_viewer/image_viewer.vue.cjs");
 const button = require("../../../../components/button/button.vue.cjs");
+const icon = require("../../../../components/icon/icon.vue.cjs");
 const _sfc_main = {
   name: "DtImageCarousel",
   components: {
     DtImageViewer: image_viewer,
     DtButton: button,
-    DtIconClose: vue3.DtIconClose,
+    DtIcon: icon,
     DtProgressBar: progress_bar
   },
   props: {
@@ -56,7 +56,7 @@ const _hoisted_2 = { class: "dt-attachment-image__top-right" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_image_viewer = vue.resolveComponent("dt-image-viewer");
   const _component_dt_progress_bar = vue.resolveComponent("dt-progress-bar");
-  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
   return vue.openBlock(), vue.createElementBlock("li", _hoisted_1, [
     vue.createVNode(_component_dt_image_viewer, {
@@ -84,7 +84,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
       }, {
         icon: vue.withCtx(() => [
-          vue.createVNode(_component_dt_icon_close, { size: "200" })
+          vue.createVNode(_component_dt_icon, {
+            name: "close",
+            size: "200"
+          })
         ]),
         _: 1
       }, 8, ["id", "aria-label"])

package/dist/vue3/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"image_carousel.vue.cjs","sources":["../../../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue"],"sourcesContent":["<template>\n  <li\n    class=\"dt-attachment-image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"dt-attachment-image__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :close-aria-label=\"closeAriaLabel\"\n      :aria-label=\"clickToOpenAriaLabel\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"dt-attachment-image__top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"dt-attachment-image__progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"dt-attachment-image__close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeAriaLabel\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-image {\n  position: relative;\n\n  &:focus-within .dt-attachment-image__close-button, &:hover .dt-attachment-image__close-button {\n    opacity: 1;\n  }\n}\n.dt-attachment-image__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border: var(--dt-space-100) solid;\n  border-radius: var(--br4);\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n  object-fit: cover;\n}\n.dt-attachment-image__top-right {\n  position: absolute;\n  top: var(--dt-size-100);\n  right: var(--dt-size-100);\n}\n.dt-attachment-image__close-button {\n  opacity: 0;\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  color: var(--dt-color-neutral-white);\n  background-color: var(--dt-color-black-400);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-neutral-white);\n}\n.dt-attachment-image__progress-bar {\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  background-color: var(--dt-color-neutral-white);\n  border-radius: 50%;\n  display: flex;\n  transform: rotate(-90deg);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["DtImageViewer","DtButton","DtIconClose","DtProgressBar","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_createBlock"],"mappings":";;;;;;;;AAiDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVA;AAAAA,IACA,UAAAC;AAAAA,iBACAC,KAAW;AAAA,mBACXC;AAAAA,EACD;AAAA,EAED,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB,OAAO;AACtB,WAAK,MAAM,gBAAgB,KAAK;AAAA,IACjC;AAAA,EACF;AACH;AAnGI,MAAA,aAAA,EAAA,OAAM,sBAAqB;AAYzB,MAAA,aAAA,EAAA,OAAM,iCAAgC;;;;;;AAb1C,SAAAC,cAAA,GAAAC,uBAsCK,MAtCL,YAsCK;AAAA,IAnCHC,IAAAA,YAME,4BAAA;AAAA,MALA,sBAAmB;AAAA,MAClB,aAAW,OAAS,UAAC;AAAA,MACrB,aAAW,OAAS,UAAC;AAAA,MACrB,oBAAkB,OAAc;AAAA,MAChC,cAAY,OAAoB;AAAA;IAInCC,IAAA,mBAyBM,OAzBN,YAyBM;AAAA,MArBI,OAAA,UAAU,gCADlBC,IAKE,YAAA,4BAAA;AAAA;QAHA,OAAM;AAAA,QACL,UAAU,OAAS,UAAC;AAAA,QACpB,0BAAwB,OAAoB;AAAA;MAE/CF,IAAAA,YAeY,sBAAA;AAAA,QAdT,mBAAmB,OAAK,KAAA;AAAA,QACzB,UAAS;AAAA,QACT,OAAM;AAAA,QACN,QAAA;AAAA,QACA,MAAK;AAAA,QACL,YAAW;AAAA,QACV,cAAY,OAAc;AAAA,QAC1B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,SAAe,gBAAC,OAAK,KAAA;AAAA;QAElB,kBACT,MAEE;AAAA,UAFFA,IAAAA,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;;;;"}
+{"version":3,"file":"image_carousel.vue.cjs","sources":["../../../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue"],"sourcesContent":["<template>\n  <li\n    class=\"dt-attachment-image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"dt-attachment-image__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :close-aria-label=\"closeAriaLabel\"\n      :aria-label=\"clickToOpenAriaLabel\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"dt-attachment-image__top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"dt-attachment-image__progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"dt-attachment-image__close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeAriaLabel\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon\n            name=\"close\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIcon,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-image {\n  position: relative;\n\n  &:focus-within .dt-attachment-image__close-button, &:hover .dt-attachment-image__close-button {\n    opacity: 1;\n  }\n}\n.dt-attachment-image__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border: var(--dt-space-100) solid;\n  border-radius: var(--br4);\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n  object-fit: cover;\n}\n.dt-attachment-image__top-right {\n  position: absolute;\n  top: var(--dt-size-100);\n  right: var(--dt-size-100);\n}\n.dt-attachment-image__close-button {\n  opacity: 0;\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  color: var(--dt-color-neutral-white);\n  background-color: var(--dt-color-black-400);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-neutral-white);\n}\n.dt-attachment-image__progress-bar {\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  background-color: var(--dt-color-neutral-white);\n  border-radius: 50%;\n  display: flex;\n  transform: rotate(-90deg);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["DtImageViewer","DtButton","DtIcon","DtProgressBar","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_createBlock"],"mappings":";;;;;;;;AAkDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVA;AAAAA,IACA,UAAAC;AAAAA,IACA,QAAAC;AAAAA,mBACAC;AAAAA,EACD;AAAA,EAED,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB,OAAO;AACtB,WAAK,MAAM,gBAAgB,KAAK;AAAA,IACjC;AAAA,EACF;AACH;AApGI,MAAA,aAAA,EAAA,OAAM,sBAAqB;AAYzB,MAAA,aAAA,EAAA,OAAM,iCAAgC;;;;;;AAb1C,SAAAC,cAAA,GAAAC,uBAuCK,MAvCL,YAuCK;AAAA,IApCHC,IAAAA,YAME,4BAAA;AAAA,MALA,sBAAmB;AAAA,MAClB,aAAW,OAAS,UAAC;AAAA,MACrB,aAAW,OAAS,UAAC;AAAA,MACrB,oBAAkB,OAAc;AAAA,MAChC,cAAY,OAAoB;AAAA;IAInCC,IAAA,mBA0BM,OA1BN,YA0BM;AAAA,MAtBI,OAAA,UAAU,gCADlBC,IAKE,YAAA,4BAAA;AAAA;QAHA,OAAM;AAAA,QACL,UAAU,OAAS,UAAC;AAAA,QACpB,0BAAwB,OAAoB;AAAA;MAE/CF,IAAAA,YAgBY,sBAAA;AAAA,QAfT,mBAAmB,OAAK,KAAA;AAAA,QACzB,UAAS;AAAA,QACT,OAAM;AAAA,QACN,QAAA;AAAA,QACA,MAAK;AAAA,QACL,YAAW;AAAA,QACV,cAAY,OAAc;AAAA,QAC1B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,SAAe,gBAAC,OAAK,KAAA;AAAA;QAElB,kBACT,MAGE;AAAA,UAHFA,IAAAA,YAGE,oBAAA;AAAA,YAFA,MAAK;AAAA,YACL,MAAK;AAAA;;;;;;;;;"}

package/dist/vue3/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.js

@@ -1,16 +1,16 @@
-import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
 import DtProgressBar from "./progress_bar.vue.js";
 import { resolveComponent, openBlock, createElementBlock, createVNode, createElementVNode, createBlock, createCommentVNode, withCtx } from "vue";
 /* empty css                    */
 import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
 import DtImageViewer from "../../../../components/image_viewer/image_viewer.vue.js";
 import DtButton from "../../../../components/button/button.vue.js";
+import DtIcon from "../../../../components/icon/icon.vue.js";
 const _sfc_main = {
   name: "DtImageCarousel",
   components: {
     DtImageViewer,
     DtButton,
-    DtIconClose,
+    DtIcon,
     DtProgressBar
   },
   props: {
@@ -55,7 +55,7 @@ const _hoisted_2 = { class: "dt-attachment-image__top-right" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_image_viewer = resolveComponent("dt-image-viewer");
   const _component_dt_progress_bar = resolveComponent("dt-progress-bar");
-  const _component_dt_icon_close = resolveComponent("dt-icon-close");
+  const _component_dt_icon = resolveComponent("dt-icon");
   const _component_dt_button = resolveComponent("dt-button");
   return openBlock(), createElementBlock("li", _hoisted_1, [
     createVNode(_component_dt_image_viewer, {
@@ -83,7 +83,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
       }, {
         icon: withCtx(() => [
-          createVNode(_component_dt_icon_close, { size: "200" })
+          createVNode(_component_dt_icon, {
+            name: "close",
+            size: "200"
+          })
         ]),
         _: 1
       }, 8, ["id", "aria-label"])

package/dist/vue3/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"image_carousel.vue.js","sources":["../../../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue"],"sourcesContent":["<template>\n  <li\n    class=\"dt-attachment-image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"dt-attachment-image__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :close-aria-label=\"closeAriaLabel\"\n      :aria-label=\"clickToOpenAriaLabel\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"dt-attachment-image__top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"dt-attachment-image__progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"dt-attachment-image__close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeAriaLabel\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-image {\n  position: relative;\n\n  &:focus-within .dt-attachment-image__close-button, &:hover .dt-attachment-image__close-button {\n    opacity: 1;\n  }\n}\n.dt-attachment-image__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border: var(--dt-space-100) solid;\n  border-radius: var(--br4);\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n  object-fit: cover;\n}\n.dt-attachment-image__top-right {\n  position: absolute;\n  top: var(--dt-size-100);\n  right: var(--dt-size-100);\n}\n.dt-attachment-image__close-button {\n  opacity: 0;\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  color: var(--dt-color-neutral-white);\n  background-color: var(--dt-color-black-400);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-neutral-white);\n}\n.dt-attachment-image__progress-bar {\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  background-color: var(--dt-color-neutral-white);\n  border-radius: 50%;\n  display: flex;\n  transform: rotate(-90deg);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_createElementVNode","_createBlock"],"mappings":";;;;;;;AAiDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB,OAAO;AACtB,WAAK,MAAM,gBAAgB,KAAK;AAAA,IACjC;AAAA,EACF;AACH;AAnGI,MAAA,aAAA,EAAA,OAAM,sBAAqB;AAYzB,MAAA,aAAA,EAAA,OAAM,iCAAgC;;;;;;AAb1C,SAAAA,UAAA,GAAAC,mBAsCK,MAtCL,YAsCK;AAAA,IAnCHC,YAME,4BAAA;AAAA,MALA,sBAAmB;AAAA,MAClB,aAAW,OAAS,UAAC;AAAA,MACrB,aAAW,OAAS,UAAC;AAAA,MACrB,oBAAkB,OAAc;AAAA,MAChC,cAAY,OAAoB;AAAA;IAInCC,mBAyBM,OAzBN,YAyBM;AAAA,MArBI,OAAA,UAAU,4BADlBC,YAKE,4BAAA;AAAA;QAHA,OAAM;AAAA,QACL,UAAU,OAAS,UAAC;AAAA,QACpB,0BAAwB,OAAoB;AAAA;MAE/CF,YAeY,sBAAA;AAAA,QAdT,mBAAmB,OAAK,KAAA;AAAA,QACzB,UAAS;AAAA,QACT,OAAM;AAAA,QACN,QAAA;AAAA,QACA,MAAK;AAAA,QACL,YAAW;AAAA,QACV,cAAY,OAAc;AAAA,QAC1B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,SAAe,gBAAC,OAAK,KAAA;AAAA;QAElB,cACT,MAEE;AAAA,UAFFA,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;;;;;"}
+{"version":3,"file":"image_carousel.vue.js","sources":["../../../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue"],"sourcesContent":["<template>\n  <li\n    class=\"dt-attachment-image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"dt-attachment-image__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :close-aria-label=\"closeAriaLabel\"\n      :aria-label=\"clickToOpenAriaLabel\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"dt-attachment-image__top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"dt-attachment-image__progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"dt-attachment-image__close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeAriaLabel\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon\n            name=\"close\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIcon,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-image {\n  position: relative;\n\n  &:focus-within .dt-attachment-image__close-button, &:hover .dt-attachment-image__close-button {\n    opacity: 1;\n  }\n}\n.dt-attachment-image__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border: var(--dt-space-100) solid;\n  border-radius: var(--br4);\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n  object-fit: cover;\n}\n.dt-attachment-image__top-right {\n  position: absolute;\n  top: var(--dt-size-100);\n  right: var(--dt-size-100);\n}\n.dt-attachment-image__close-button {\n  opacity: 0;\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  color: var(--dt-color-neutral-white);\n  background-color: var(--dt-color-black-400);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-neutral-white);\n}\n.dt-attachment-image__progress-bar {\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  background-color: var(--dt-color-neutral-white);\n  border-radius: 50%;\n  display: flex;\n  transform: rotate(-90deg);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_createElementVNode","_createBlock"],"mappings":";;;;;;;AAkDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB,OAAO;AACtB,WAAK,MAAM,gBAAgB,KAAK;AAAA,IACjC;AAAA,EACF;AACH;AApGI,MAAA,aAAA,EAAA,OAAM,sBAAqB;AAYzB,MAAA,aAAA,EAAA,OAAM,iCAAgC;;;;;;AAb1C,SAAAA,UAAA,GAAAC,mBAuCK,MAvCL,YAuCK;AAAA,IApCHC,YAME,4BAAA;AAAA,MALA,sBAAmB;AAAA,MAClB,aAAW,OAAS,UAAC;AAAA,MACrB,aAAW,OAAS,UAAC;AAAA,MACrB,oBAAkB,OAAc;AAAA,MAChC,cAAY,OAAoB;AAAA;IAInCC,mBA0BM,OA1BN,YA0BM;AAAA,MAtBI,OAAA,UAAU,4BADlBC,YAKE,4BAAA;AAAA;QAHA,OAAM;AAAA,QACL,UAAU,OAAS,UAAC;AAAA,QACpB,0BAAwB,OAAoB;AAAA;MAE/CF,YAgBY,sBAAA;AAAA,QAfT,mBAAmB,OAAK,KAAA;AAAA,QACzB,UAAS;AAAA,QACT,OAAM;AAAA,QACN,QAAA;AAAA,QACA,MAAK;AAAA,QACL,YAAW;AAAA,QACV,cAAY,OAAc;AAAA,QAC1B,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,YAAE,SAAe,gBAAC,OAAK,KAAA;AAAA;QAElB,cACT,MAGE;AAAA,UAHFA,YAGE,oBAAA;AAAA,YAFA,MAAK;AAAA,YACL,MAAK;AAAA;;;;;;;;"}

package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs

@@ -1,7 +1,6 @@
 "use strict";
 const feed_item_row_constants = require("./feed_item_row_constants.cjs");
 const modal = require("../../../common/mixins/modal.cjs");
-const vue3 = require("@dialpad/dialtone-icons/vue3");
 const vue = require("vue");
 ;/* empty css                     */
 const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
@@ -15,8 +14,7 @@ const _sfc_main = {
     DtAvatar: avatar,
     DtLazyShow: lazy_show,
     DtListItem: list_item,
-    DtBadge: badge,
-    DtIconUser: vue3.DtIconUser
+    DtBadge: badge
   },
   mixins: [modal],
   inheritAttrs: false,
@@ -142,6 +140,9 @@ const _sfc_main = {
         }
       };
     },
+    iconName() {
+      return this.noInitials ? "user" : null;
+    },
     listItemClasses() {
       return [
         "dt-feed-item-row",
@@ -210,7 +211,6 @@ const _hoisted_10 = {
   class: "dt-feed-item-row__menu"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_user = vue.resolveComponent("dt-icon-user");
   const _component_dt_avatar = vue.resolveComponent("dt-avatar");
   const _component_dt_badge = vue.resolveComponent("dt-badge");
   const _component_dt_lazy_show = vue.resolveComponent("dt-lazy-show");
@@ -229,16 +229,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "full-name": $props.displayName,
             "image-src": $props.avatarImageUrl,
             "image-alt": "",
+            "icon-name": $options.iconName,
             seed: $props.avatarSeed
-          }, vue.createSlots({ _: 2 }, [
-            $props.noInitials ? {
-              name: "icon",
-              fn: vue.withCtx(({ iconSize }) => [
-                vue.createVNode(_component_dt_icon_user, { size: iconSize }, null, 8, ["size"])
-              ]),
-              key: "0"
-            } : void 0
-          ]), 1032, ["full-name", "image-src", "seed"])
+          }, null, 8, ["full-name", "image-src", "icon-name", "seed"])
         ], true)
       ])) : vue.createCommentVNode("", true),
       !$props.showHeader ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
@@ -294,6 +287,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["class"]);
 }
-const feed_item_row = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-731d32a0"]]);
+const feed_item_row = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-418199f0"]]);
 module.exports = feed_item_row;
 //# sourceMappingURL=feed_item_row.vue.cjs.map

package/dist/vue3/recipes/conversation_view/feed_item_row/feed_item_row.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"feed_item_row.vue.cjs","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/vue3';\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        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":["DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","FEED_ROW_STATE_BACKGROUND_COLOR","_openBlock","_createBlock","_mergeProps","_toHandlers","_createElementBlock","_renderSlot","_createVNode","_withCtx","_withDirectives","_createElementVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"feed_item_row.vue.cjs","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        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":["DtAvatar","DtLazyShow","DtListItem","DtBadge","Modal","DEFAULT_FEED_ROW_STATE","FEED_ROW_STATE_BACKGROUND_COLOR","_openBlock","_createBlock","_mergeProps","_toHandlers","_createElementBlock","_renderSlot","_createVNode","_withDirectives","_createElementVNode","_toDisplayString"],"mappings":"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"}