@dialpad/dialtone 9.70.1 → 9.71.0-beta.1

package/dist/vue3/dialtone-vue.cjs

@@ -23,7 +23,7 @@ const lib_collapsible = require("./lib/collapsible.cjs");
 const lib_combobox = require("./chunks/index-4qgKeErp.js");
 const lib_datepicker = require("./lib/datepicker.cjs");
 const lib_descriptionList = require("./lib/description-list.cjs");
-const dropdown = require("./chunks/dropdown-p-Azgwov.js");
+const dropdown = require("./chunks/dropdown-yF5Kg42u.js");
 const lib_dropdown = require("./lib/dropdown.cjs");
 const dropdown_constants = require("./chunks/dropdown_constants-2pGCXy7m.js");
 const lib_emoji = require("./lib/emoji.cjs");
@@ -47,7 +47,7 @@ const list_item_constants = require("./chunks/list_item_constants-EiqkqZvP.js");
 const lib_listItemGroup = require("./lib/list-item-group.cjs");
 const lib_modal = require("./lib/modal.cjs");
 const lib_notice = require("./lib/notice.cjs");
-const notice_action = require("./chunks/notice_action-WTucGhvr.js");
+const notice_action = require("./chunks/notice_action-i55KZMfG.js");
 const notice_constants = require("./chunks/notice_constants-UXo9e3bS.js");
 const lib_pagination = require("./lib/pagination.cjs");
 const lib_popover = require("./lib/popover.cjs");
@@ -96,11 +96,11 @@ const lib_topBannerInfo = require("./lib/top-banner-info.cjs");
 require("vue");
 require("date-fns");
 require("@dialpad/dialtone-emojis");
-require("@dialpad/dialtone-icons/icons.js");
 require("./chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 require("./chunks/modal-VgxXAQFP.js");
-require("./chunks/sr_only_close_button-xGrHFjwA.js");
+require("./chunks/sr_only_close_button-Gl43uI6m.js");
 require("@dialpad/dialtone-icons/vue3");
+require("@dialpad/dialtone-icons/icons.js");
 require("@dialpad/dialtone-icons/illustrations.js");
 require("tippy.js");
 require("@tiptap/vue-3");

package/dist/vue3/dialtone-vue.js

@@ -21,7 +21,7 @@ import { DtCollapsible } from "./lib/collapsible.js";
 import { DtCombobox, LABEL_SIZES } from "./chunks/index-b_MgDylR.js";
 import { DtDatepicker, formatLong, formatMedium, formatNoYear, formatNumerical, formatShort } from "./lib/datepicker.js";
 import { DT_DESCRIPTION_LIST_DIRECTION, DtDescriptionList } from "./lib/description-list.js";
-import { DtDropdown } from "./chunks/dropdown-oA-_Gotg.js";
+import { DtDropdown } from "./chunks/dropdown-h2VaPT4B.js";
 import { DtDropdownSeparator } from "./lib/dropdown.js";
 import { DROPDOWN_PADDING_CLASSES } from "./chunks/dropdown_constants-w1MXGC3Z.js";
 import { DtEmoji } from "./lib/emoji.js";
@@ -45,7 +45,7 @@ import { LIST_ITEM_NAVIGATION_TYPES, LIST_ITEM_TYPES } from "./chunks/list_item_
 import { DtListItemGroup } from "./lib/list-item-group.js";
 import { DtModal, MODAL_BANNER_KINDS, MODAL_KIND_MODIFIERS, MODAL_SIZE_MODIFIERS } from "./lib/modal.js";
 import { DtNotice } from "./lib/notice.js";
-import { DtNoticeAction, DtNoticeContent, DtNoticeIcon } from "./chunks/notice_action-p-ePanW_.js";
+import { DtNoticeAction, DtNoticeContent, DtNoticeIcon } from "./chunks/notice_action-5nPX2mSu.js";
 import { NOTICE_KINDS, NOTICE_ROLES } from "./chunks/notice_constants-7Qt2CQEY.js";
 import { DtPagination } from "./lib/pagination.js";
 import { DtPopover } from "./lib/popover.js";
@@ -94,11 +94,11 @@ import { COLOR_CODES, DtRecipeTopBannerInfo } from "./lib/top-banner-info.js";
 import "vue";
 import "date-fns";
 import "@dialpad/dialtone-emojis";
-import "@dialpad/dialtone-icons/icons.js";
 import "./chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import "./chunks/modal-XOr4kiNZ.js";
-import "./chunks/sr_only_close_button-3EdsV-dH.js";
+import "./chunks/sr_only_close_button-q23hJuAf.js";
 import "@dialpad/dialtone-icons/vue3";
+import "@dialpad/dialtone-icons/icons.js";
 import "@dialpad/dialtone-icons/illustrations.js";
 import "tippy.js";
 import "@tiptap/vue-3";

package/dist/vue3/lib/attachment-carousel.cjs

@@ -1,17 +1,14 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue3 = require("@dialpad/dialtone-icons/vue3");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_imageViewer = require("./image-viewer.cjs");
 const lib_button = require("./button.cjs");
-const lib_icon = require("./icon.cjs");
 require("../chunks/modal-VgxXAQFP.js");
 require("../common/constants.cjs");
 require("../common/utils.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
-require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/icons.js");
 const _sfc_main$2 = {
   name: "DtProgressBar",
   props: {
@@ -77,7 +74,7 @@ const _sfc_main$1 = {
   components: {
     DtImageViewer: lib_imageViewer.DtImageViewer,
     DtButton: lib_button.DtButton,
-    DtIcon: lib_icon.DtIcon,
+    DtIconClose: vue3.DtIconClose,
     DtProgressBar
   },
   props: {
@@ -122,7 +119,7 @@ const _hoisted_2 = { class: "dt-attachment-image__top-right" };
 function _sfc_render$1(_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 = vue.resolveComponent("dt-icon");
+  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
   const _component_dt_button = vue.resolveComponent("dt-button");
   return vue.openBlock(), vue.createElementBlock("li", _hoisted_1$1, [
     vue.createVNode(_component_dt_image_viewer, {
@@ -150,10 +147,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
       }, {
         icon: vue.withCtx(() => [
-          vue.createVNode(_component_dt_icon, {
-            name: "close",
-            size: "200"
-          })
+          vue.createVNode(_component_dt_icon_close, { size: "200" })
         ]),
         _: 1
       }, 8, ["id", "aria-label"])
@@ -166,7 +160,8 @@ const _sfc_main = {
   name: "DtRecipeAttachmentCarousel",
   components: {
     DtButton: lib_button.DtButton,
-    DtIcon: lib_icon.DtIcon,
+    DtIconArrowRight: vue3.DtIconArrowRight,
+    DtIconArrowLeft: vue3.DtIconArrowLeft,
     DtImageCarousel
   },
   mixins: [],
@@ -279,8 +274,9 @@ const _hoisted_1 = {
   role: "presentation"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_icon_arrow_left = vue.resolveComponent("dt-icon-arrow-left");
   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,
@@ -311,10 +307,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.leftScroll
     }, {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "arrow-left",
-          size: "100"
-        })
+        vue.createVNode(_component_dt_icon_arrow_left, { size: "100" })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [
@@ -330,10 +323,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.rightScroll
     }, {
       icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "arrow-right",
-          size: "100"
-        })
+        vue.createVNode(_component_dt_icon_arrow_right, { size: "100" })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [

package/dist/vue3/lib/attachment-carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"attachment-carousel.cjs","sources":["../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"progressbarAriaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"less\">\n.progress-bar {\n  width: var(--dt-size-550);\n  height: var(--dt-size-550);\n}\n\n.progress-bar__circle {\n  fill: none;\n  stroke-width: 2;\n  stroke-dasharray: var(--stroke-dasharray);\n}\n\n.progress-bar__circle:nth-child(1) {\n  stroke-dashoffset: 0;\n  stroke: var(--dt-color-black-100);\n}\n\n.progress-bar__circle:nth-child(2) {\n  stroke-dashoffset: var(--stroke-dashoffset);\n  stroke: var(--dt-color-purple-500);\n  transition: stroke-dashoffset 500ms linear;\n}\n</style>\n","<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","<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":["_sfc_main","_createElementVNode","_createElementBlock","_hoisted_2","DtImageViewer","DtButton","DtIcon","_hoisted_1","_openBlock","_createVNode","_createBlock","_Fragment","_renderList","_resolveDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"attachment-carousel.cjs","sources":["../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"progressbarAriaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"less\">\n.progress-bar {\n  width: var(--dt-size-550);\n  height: var(--dt-size-550);\n}\n\n.progress-bar__circle {\n  fill: none;\n  stroke-width: 2;\n  stroke-dasharray: var(--stroke-dasharray);\n}\n\n.progress-bar__circle:nth-child(1) {\n  stroke-dashoffset: 0;\n  stroke: var(--dt-color-black-100);\n}\n\n.progress-bar__circle:nth-child(2) {\n  stroke-dashoffset: var(--stroke-dashoffset);\n  stroke: var(--dt-color-purple-500);\n  transition: stroke-dashoffset 500ms linear;\n}\n</style>\n","<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","<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":["_sfc_main","_createElementVNode","_createElementBlock","_hoisted_2","DtImageViewer","DtButton","DtIconClose","_hoisted_1","_openBlock","_createVNode","_createBlock","DtIconArrowRight","DtIconArrowLeft","_Fragment","_renderList","_resolveDynamicComponent"],"mappings":";;;;;;;;;;;AACA,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,IACL,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,MAAM,OAAO;AAAA,IACX,qBAAqB;AAAA,EACvB;AAAA,EAEA,UAAU;AAAA,IACR,UAAW;AACT,aAAO;AAAA,QACL,uBACG,KAAK,sBAAuB,KAAK,sBAAsB,KAAK,WAAW;AAAA,QAE1E,sBAAsB,KAAK;AAAA;IAE9B;AAAA,EACF;AAAA,EAED,UAAW;AACT,SAAK,sBAAsB,KAAK,MAAM,kBAAkB,eAAc;AAAA,EACvE;AACH;;;EAiBQ,KAAI;AAAA,EACJ,GAAE;AAAA,EACF,IAAG;AAAA,EACH,IAAG;AAAA,EACH,OAAM;;mBAERC,oBAKE,mBAAA,UAAA;AAAA,EAJA,GAAE;AAAA,EACF,IAAG;AAAA,EACH,IAAG;AAAA,EACH,OAAM;;;0BAvBZC,IA0BM,mBAAA,OAAA;AAAA,IAzBJ,MAAK;AAAA,IACJ,cAAY,OAAoB;AAAA,IACjC,UAAS;AAAA,IACR,iBAAe,OAAQ;AAAA,IACxB,iBAAc;AAAA,IACd,iBAAc;AAAA;sBAEdA,IAiBM,mBAAA,OAAA;AAAA,MAhBJ,OAAM;AAAA,MACL,0BAAO,SAAO,OAAA;AAAA;MAEfD,IAAAA,mBAME,UANFE,cAME,MAAA,GAAA;AAAA,MACF;AAAA;;;;ACPN,MAAKH,cAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVI,gBAAa;AAAA,IACb,UAAAC,WAAQ;AAAA,iBACRC,KAAW;AAAA,IACX;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,MAAAC,eAAA,EAAA,OAAM,sBAAqB;AAYzB,MAAA,aAAA,EAAA,OAAM,iCAAgC;;;;;;AAb1C,SAAAC,cAAA,GAAAN,uBAsCK,MAtCLK,cAsCK;AAAA,IAnCHE,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;IAInCR,IAAA,mBAyBM,OAzBN,YAyBM;AAAA,MArBI,OAAA,UAAU,gCADlBS,IAKE,YAAA,4BAAA;AAAA;QAHA,OAAM;AAAA,QACL,UAAU,OAAS,UAAC;AAAA,QACpB,0BAAwB,OAAoB;AAAA;MAE/CD,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;;;;;;;ACkCtB,MAAM,mBAAmB;AAEzB,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAJ,WAAQ;AAAA,IACR,kBAAAM,KAAgB;AAAA,IAChB,iBAAAC,KAAe;AAAA,IACf;AAAA,EACD;AAAA,EAED,QAAQ,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQV,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,IAClB;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,IAED,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,iBAAiB,CAAE;AAAA,MACnB,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,oBAAqB;AACnB,aAAO,KAAK,UAAU,OAAO,CAAC,cAAc,UAAU,SAAS,WAAW,UAAU,SAAS,OAAO;AAAA,IACrG;AAAA,EACF;AAAA,EAED,SAAS,WAAY;AACnB,SAAK,gBAAgB,KAAK,MAAM,SAAS,aAAa;AACtD,SAAK,iBAAiB,KAAK,MAAM,SAAS,cAAc,KAAK,MAAM,SAAS;AAAA,EAC7E;AAAA,EAED,SAAS;AAAA,IACP,YAAa,GAAG;AACd,QAAE,cAAc,eAAe,EAAE,UAAU,SAAU,CAAA;AAAA,IACtD;AAAA,IAED,eAAgB,MAAM;AACpB,cAAQ,MAAI;AAAA,QACV,KAAK;AACH,iBAAO;AAAA,QACT;AAEE,iBAAO;AAAA,MACX;AAAA,IACD;AAAA,IAED,gBAAiB,OAAO;AAEtB,WAAK,iBAAiB,KAAK,MAAM,SAAS,cAAe,KAAK,MAAM,SAAS,cAAc;AAC3F,WAAK,MAAM,gBAAgB,KAAK;AAAA,IACjC;AAAA,IAED,YAAa,KAAK,OAAO;AACvB,WAAK,gBAAgB,KAAK,IAAI;AAAA,IAC/B;AAAA,IAED,eAAgB;AACd,YAAM,WAAW,KAAK,MAAM;AAC5B,WAAK,gBAAgB,SAAS,aAAa;AAC3C,WAAK,iBAAiB,EAAG,SAAS,aAAa,SAAS,gBAAiB,SAAS;AAAA,IACnF;AAAA,IAED,aAAc;AACZ,WAAK,MAAM,SAAS,SAAS;AAAA,QAC3B,MAAM,KAAK,MAAM,SAAS,aAAa;AAAA,QACvC,UAAU;AAAA,MACZ,CAAC;AAAA,IACF;AAAA,IAED,cAAe;AACb,WAAK,MAAM,SAAS,SAAS;AAAA,QAC3B,MAAM,KAAK,MAAM,SAAS,aAAa;AAAA,QACvC,UAAU;AAAA,MACZ,CAAC;AAAA,IACF;AAAA,EACF;AACH;;EA1MI,OAAM;AAAA,EACN,MAAK;;;;;;AAFP,SAAAJ,cAAA,GAAAN,uBA0DM,OA1DN,YA0DM;AAAA,IArDI,OAAA,UAAU,SAAM,sBADxBA,IAmBK,mBAAA,MAAA;AAAA;MAjBH,KAAI;AAAA,MACJ,OAAM;AAAA,MACL,iDAAQ,SAAY,gBAAA,SAAA,aAAA,GAAA,IAAA;AAAA;OAGrBM,IAAAA,UAAA,IAAA,GAAAN,IAAA,mBAWEW,cAT6B,MAAAC,IAAA,WAAA,SAAA,mBAArB,CAAA,WAAW,UAAK;AAF1B,eAAAN,IAAA,UAAA,GAAAE,IAAAA,YAWEK,IAVK,wBAAA,SAAA,eAAe,UAAU,IAAI,CAAA,GAAA;AAAA,UAEjC,cAAc,KAAK;AAAA,UACnB;AAAA,UACA,cAAY;AAAA,UACZ,oBAAkB,OAAc;AAAA,UAChC,4BAA0B,OAAoB;AAAA,UAC9C,0BAAwB,OAAoB;AAAA,UAC5C,eAAY,YAAE,SAAe,gBAAC,KAAK;AAAA,UACnC,WAAS,SAAW;AAAA;;;uBAKzBN,IAeY,YAAA,sBAAA;AAAA,MAbV,UAAS;AAAA,MACR,cAAY,OAAkB;AAAA,MAC/B,OAAM;AAAA,MACN,QAAA;AAAA,MACA,MAAK;AAAA,MACL,YAAW;AAAA,MACV,SAAO,SAAU;AAAA;MAEP,kBACT,MAEE;AAAA,QAFFA,IAAAA,YAEE,+BAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;kBAXN,MAAa,aAAA;AAAA;uBAevBA,IAeY,YAAA,sBAAA;AAAA,MAbV,UAAS;AAAA,MACR,cAAY,OAAmB;AAAA,MAChC,OAAM;AAAA,MACN,QAAA;AAAA,MACA,MAAK;AAAA,MACL,YAAW;AAAA,MACV,SAAO,SAAW;AAAA;MAER,kBACT,MAEE;AAAA,QAFFA,IAAAA,YAEE,gCAAA,EADA,MAAK,MAAK,CAAA;AAAA;;;kBAXN,MAAc,cAAA;AAAA;;;;;"}

package/dist/vue3/lib/attachment-carousel.js

@@ -1,15 +1,12 @@
+import { DtIconClose, DtIconArrowRight, DtIconArrowLeft } from "@dialpad/dialtone-icons/vue3";
 import { openBlock, createElementBlock, normalizeStyle, createElementVNode, resolveComponent, createVNode, createBlock, createCommentVNode, withCtx, Fragment, renderList, resolveDynamicComponent, withDirectives, vShow } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtImageViewer } from "./image-viewer.js";
 import { DtButton } from "./button.js";
-import { DtIcon } from "./icon.js";
 import "../chunks/modal-XOr4kiNZ.js";
 import "../common/constants.js";
 import "../common/utils.js";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-H9ahUVCG.js";
-import "@dialpad/dialtone-icons/icons.js";
 const _sfc_main$2 = {
   name: "DtProgressBar",
   props: {
@@ -75,7 +72,7 @@ const _sfc_main$1 = {
   components: {
     DtImageViewer,
     DtButton,
-    DtIcon,
+    DtIconClose,
     DtProgressBar
   },
   props: {
@@ -120,7 +117,7 @@ const _hoisted_2 = { class: "dt-attachment-image__top-right" };
 function _sfc_render$1(_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 = resolveComponent("dt-icon");
+  const _component_dt_icon_close = resolveComponent("dt-icon-close");
   const _component_dt_button = resolveComponent("dt-button");
   return openBlock(), createElementBlock("li", _hoisted_1$1, [
     createVNode(_component_dt_image_viewer, {
@@ -148,10 +145,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
       }, {
         icon: withCtx(() => [
-          createVNode(_component_dt_icon, {
-            name: "close",
-            size: "200"
-          })
+          createVNode(_component_dt_icon_close, { size: "200" })
         ]),
         _: 1
       }, 8, ["id", "aria-label"])
@@ -164,7 +158,8 @@ const _sfc_main = {
   name: "DtRecipeAttachmentCarousel",
   components: {
     DtButton,
-    DtIcon,
+    DtIconArrowRight,
+    DtIconArrowLeft,
     DtImageCarousel
   },
   mixins: [],
@@ -277,8 +272,9 @@ const _hoisted_1 = {
   role: "presentation"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_icon_arrow_left = resolveComponent("dt-icon-arrow-left");
   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,
@@ -309,10 +305,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.leftScroll
     }, {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon, {
-          name: "arrow-left",
-          size: "100"
-        })
+        createVNode(_component_dt_icon_arrow_left, { size: "100" })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [
@@ -328,10 +321,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onClick: $options.rightScroll
     }, {
       icon: withCtx(() => [
-        createVNode(_component_dt_icon, {
-          name: "arrow-right",
-          size: "100"
-        })
+        createVNode(_component_dt_icon_arrow_right, { size: "100" })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [

package/dist/vue3/lib/attachment-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"attachment-carousel.js","sources":["../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"progressbarAriaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"less\">\n.progress-bar {\n  width: var(--dt-size-550);\n  height: var(--dt-size-550);\n}\n\n.progress-bar__circle {\n  fill: none;\n  stroke-width: 2;\n  stroke-dasharray: var(--stroke-dasharray);\n}\n\n.progress-bar__circle:nth-child(1) {\n  stroke-dashoffset: 0;\n  stroke: var(--dt-color-black-100);\n}\n\n.progress-bar__circle:nth-child(2) {\n  stroke-dashoffset: var(--stroke-dashoffset);\n  stroke: var(--dt-color-purple-500);\n  transition: stroke-dashoffset 500ms linear;\n}\n</style>\n","<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","<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":["_sfc_main","_createElementVNode","_createElementBlock","_hoisted_2","_hoisted_1","_openBlock","_createVNode","_createBlock","_Fragment","_renderList","_resolveDynamicComponent"],"mappings":"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"}
+{"version":3,"file":"attachment-carousel.js","sources":["../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"progressbarAriaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"less\">\n.progress-bar {\n  width: var(--dt-size-550);\n  height: var(--dt-size-550);\n}\n\n.progress-bar__circle {\n  fill: none;\n  stroke-width: 2;\n  stroke-dasharray: var(--stroke-dasharray);\n}\n\n.progress-bar__circle:nth-child(1) {\n  stroke-dashoffset: 0;\n  stroke: var(--dt-color-black-100);\n}\n\n.progress-bar__circle:nth-child(2) {\n  stroke-dashoffset: var(--stroke-dashoffset);\n  stroke: var(--dt-color-purple-500);\n  transition: stroke-dashoffset 500ms linear;\n}\n</style>\n","<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","<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":["_sfc_main","_createElementVNode","_createElementBlock","_hoisted_2","_hoisted_1","_openBlock","_createVNode","_createBlock","_Fragment","_renderList","_resolveDynamicComponent"],"mappings":"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"}

package/dist/vue3/lib/avatar.cjs

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const common_utils = require("../common/utils.cjs");
-const iconNames = require("@dialpad/dialtone-icons/icons.js");
 const icon_constants = require("../chunks/icon_constants-da57m7BZ.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_presence = require("./presence.cjs");
-const lib_icon = require("./icon.cjs");
 require("../common/constants.cjs");
-require("@dialpad/dialtone-icons/vue3");
+require("@dialpad/dialtone-icons/icons.js");
 const AVATAR_SIZE_MODIFIERS = {
   xs: "d-avatar--xs",
   sm: "d-avatar--sm",
@@ -62,19 +60,15 @@ const AVATAR_COLORS = [
 ];
 const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);
 const AVATAR_GROUP_VALIDATOR = (group) => group > 1;
-function getIconNames() {
-  return [void 0, ...iconNames];
-}
 const extractInitialsFromName = (fullName) => {
   if (typeof fullName !== "string" || !fullName.trim())
     return "";
   const names = fullName.trim().split(/\s+/g);
   return names.length === 1 ? names.join("").substring(0, 2) : names.filter((_, index) => index === 0 || index === names.length - 1).map((name) => name.slice(0, 1).toUpperCase()).join("");
 };
-const ICONS_LIST = getIconNames();
 const _sfc_main = {
   name: "DtAvatar",
-  components: { DtPresence: lib_presence.DtPresence, DtIcon: lib_icon.DtIcon },
+  components: { DtPresence: lib_presence.DtPresence },
   inheritAttrs: false,
   props: {
     /**
@@ -162,13 +156,6 @@ const _sfc_main = {
       default: void 0,
       validator: (group) => AVATAR_GROUP_VALIDATOR(group)
     },
-    /**
-     * The icon that overlays the avatar
-     */
-    overlayIcon: {
-      type: String,
-      default: ""
-    },
     /**
      * The text that overlays the avatar
      */
@@ -199,14 +186,6 @@ const _sfc_main = {
       type: String,
       default: void 0
     },
-    /**
-     * Icon name to be displayed on the avatar
-     */
-    iconName: {
-      type: String,
-      default: void 0,
-      validator: (name) => ICONS_LIST.includes(name)
-    },
     /**
      * Icon size to be displayed on the avatar
      * @values 100, 200, 300, 400, 500, 600, 700, 800
@@ -257,12 +236,19 @@ const _sfc_main = {
       AVATAR_ICON_SIZES,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
-      initializing: false
+      initializing: false,
+      hasSlotContent: common_utils.hasSlotContent
     };
   },
   computed: {
-    isNotIconType() {
-      return !this.iconName;
+    isIconType() {
+      return common_utils.hasSlotContent(this.$slots.icon);
+    },
+    hasOverlayIcon() {
+      return common_utils.hasSlotContent(this.$slots.overlayIcon);
+    },
+    iconDataQa() {
+      return "dt-avatar-icon";
     },
     avatarClasses() {
       return [
@@ -271,7 +257,7 @@ const _sfc_main = {
         this.avatarClass,
         {
           "d-avatar--group": this.showGroup,
-          [`d-avatar--color-${this.getColor()}`]: this.isNotIconType,
+          [`d-avatar--color-${this.getColor()}`]: !this.isIconType,
           "d-avatar--clickable": this.clickable
         }
       ];
@@ -279,7 +265,8 @@ const _sfc_main = {
     overlayClasses() {
       return [
         "d-avatar__overlay",
-        this.overlayClass
+        this.overlayClass,
+        { "d-avatar__overlay-icon": this.hasOverlayIcon }
       ];
     },
     showGroup() {
@@ -369,17 +356,17 @@ const _sfc_main = {
   }
 };
 const _hoisted_1 = ["src", "alt"];
-const _hoisted_2 = {
+const _hoisted_2 = ["aria-label", "data-qa", "role"];
+const _hoisted_3 = {
   key: 1,
   class: "d-avatar__overlay-text"
 };
-const _hoisted_3 = {
+const _hoisted_4 = {
   key: 1,
   class: "d-avatar__count",
   "data-qa": "dt-avatar-count"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_presence = vue.resolveComponent("dt-presence");
   return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clickable ? "button" : "div"), {
     id: $props.id,
@@ -403,29 +390,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "data-qa": "dt-avatar-image",
           src: $props.imageSrc,
           alt: $props.imageAlt
-        }, null, 8, _hoisted_1)) : $props.iconName ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
+        }, null, 8, _hoisted_1)) : $options.isIconType ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
-          name: $props.iconName,
-          "aria-label": $props.iconAriaLabel,
-          size: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size],
           class: vue.normalizeClass([$props.iconClass, $data.AVATAR_KIND_MODIFIERS.icon]),
-          "data-qa": "dt-avatar-icon"
-        }, null, 8, ["name", "aria-label", "size", "class"])) : (vue.openBlock(), vue.createElementBlock("span", {
+          "aria-label": $props.clickable ? $props.iconAriaLabel : "",
+          "data-qa": $options.iconDataQa,
+          role: $props.clickable ? "button" : ""
+        }, [
+          vue.renderSlot(_ctx.$slots, "icon", {
+            iconSize: $props.iconSize || $data.AVATAR_ICON_SIZES[$props.size]
+          })
+        ], 10, _hoisted_2)) : (vue.openBlock(), vue.createElementBlock("span", {
           key: 2,
           class: vue.normalizeClass([$data.AVATAR_KIND_MODIFIERS.initials])
         }, vue.toDisplayString($data.formattedInitials), 3))
       ], 2),
-      $props.overlayIcon || $props.overlayText ? (vue.openBlock(), vue.createElementBlock("div", {
+      $options.hasOverlayIcon || $props.overlayText ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         class: vue.normalizeClass($options.overlayClasses)
       }, [
-        $props.overlayIcon ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
-          key: 0,
-          class: "d-avatar__overlay-icon",
-          name: $props.overlayIcon
-        }, null, 8, ["name"])) : $props.overlayText ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString($props.overlayText), 1)) : vue.createCommentVNode("", true)
+        $options.hasOverlayIcon ? vue.renderSlot(_ctx.$slots, "overlayIcon", { key: 0 }) : $props.overlayText ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3, vue.toDisplayString($props.overlayText), 1)) : vue.createCommentVNode("", true)
       ], 2)) : vue.createCommentVNode("", true),
-      $options.showGroup ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString($options.formattedGroup), 1)) : vue.createCommentVNode("", true),
+      $options.showGroup ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString($options.formattedGroup), 1)) : vue.createCommentVNode("", true),
       $props.presence && !$options.showGroup ? (vue.openBlock(), vue.createBlock(_component_dt_presence, vue.mergeProps({
         key: 2,
         presence: $props.presence,
@@ -435,7 +421,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]
       }, $props.presenceProps, { "data-qa": "dt-presence" }), null, 16, ["presence", "class"])) : vue.createCommentVNode("", true)
     ]),
-    _: 1
+    _: 3
   }, 8, ["id", "class", "onClick"]);
 }
 const DtAvatar = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);