@dialpad/dialtone-vue 2.163.2 → 2.164.0

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.js

@@ -1,145 +0,0 @@
-import { DtIconArrowRight, DtIconArrowLeft } from "@dialpad/dialtone-icons/vue2";
-import DtImageCarousel from "./media_components/image_carousel.vue.js";
-/* empty css                         */
-import normalizeComponent from "../../../../../_virtual/_plugin-vue2_normalizer.js";
-import DtButton from "../../../components/button/button.vue.js";
-const MEDIA_ITEM_WIDTH = 64;
-const _sfc_main = {
-  name: "DtRecipeAttachmentCarousel",
-  components: {
-    DtButton,
-    DtIconArrowRight,
-    DtIconArrowLeft,
-    DtImageCarousel
-  },
-  mixins: [],
-  /* 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
-    more info: https://vuejs.org/v2/api/#inheritAttrs */
-  // inheritAttrs: false,
-  props: {
-    /**
-     * media - object array of media objects
-     * @type {Array}
-     *
-     * Object: {
-     *  path: String,
-     *  altText: String | null,
-     * }
-     */
-    mediaList: {
-      type: Array,
-      default: () => []
-    },
-    closeAriaLabel: {
-      type: String,
-      required: true
-    },
-    clickToOpenAriaLabel: {
-      type: String,
-      required: true
-    },
-    progressbarAriaLabel: {
-      type: String,
-      required: true
-    },
-    leftArrowAriaLabel: {
-      type: String,
-      required: true
-    },
-    rightArrowAriaLabel: {
-      type: String,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * Emitted when popover is shown or hidden
-     *
-     * @event remove-media
-     * @type {Number}
-     */
-    "remove-media"
-  ],
-  data() {
-    return {
-      showCloseButton: {},
-      showRightArrow: true,
-      showLeftArrow: false,
-      isMounted: false
-    };
-  },
-  computed: {
-    filteredMediaList() {
-      return this.mediaList.filter((mediaItem) => mediaItem.type === "image" || mediaItem.type === "video");
-    }
-  },
-  mounted: function() {
-    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;
-    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;
-  },
-  methods: {
-    onItemFocus(e) {
-      e.currentTarget.scrollIntoView({ behavior: "smooth" });
-    },
-    mediaComponent(type) {
-      switch (type) {
-        case "image":
-          return "dt-image-carousel";
-        default:
-          return null;
-      }
-    },
-    removeMediaItem(index) {
-      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH;
-      this.$emit("remove-media", index);
-    },
-    closeButton(val, index) {
-      this.showCloseButton[index] = val;
-    },
-    handleScroll() {
-      const carousel = this.$refs.carousel;
-      this.showLeftArrow = carousel.scrollLeft > 0;
-      this.showRightArrow = !(carousel.scrollLeft + carousel.clientWidth === carousel.scrollWidth);
-    },
-    leftScroll() {
-      this.$refs.carousel.scrollTo({
-        left: this.$refs.carousel.scrollLeft - 100,
-        behavior: "smooth"
-      });
-    },
-    rightScroll() {
-      this.$refs.carousel.scrollTo({
-        left: this.$refs.carousel.scrollLeft + 100,
-        behavior: "smooth"
-      });
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "dt-attachment-carousel", attrs: { "role": "presentation" } }, [_vm.mediaList.length > 0 ? _c("ul", { ref: "carousel", staticClass: "dt-attachment-carousel__media-list", on: { "scroll": _vm.handleScroll } }, _vm._l(_vm.filteredMediaList, function(mediaItem, index) {
-    return _c(_vm.mediaComponent(mediaItem.type), { key: `media-${index}`, tag: "component", attrs: { "index": index, "media-item": mediaItem, "close-aria-label": _vm.closeAriaLabel, "click-to-open-aria-label": _vm.clickToOpenAriaLabel, "progressbar-aria-label": _vm.progressbarAriaLabel }, on: { "remove-media": function($event) {
-      return _vm.removeMediaItem(index);
-    }, "focusin": _vm.onItemFocus } });
-  }), 1) : _vm._e(), _c("dt-button", { directives: [{ name: "show", rawName: "v-show", value: _vm.showLeftArrow, expression: "showLeftArrow" }], staticClass: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left", attrs: { "tabindex": "-1", "aria-label": _vm.leftArrowAriaLabel, "circle": "", "size": "xs", "importance": "clear" }, on: { "click": _vm.leftScroll }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-arrow-left", { attrs: { "size": "100" } })];
-  }, proxy: true }]) }), _c("dt-button", { directives: [{ name: "show", rawName: "v-show", value: _vm.showRightArrow, expression: "showRightArrow" }], staticClass: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right", attrs: { "tabindex": "-1", "aria-label": _vm.rightArrowAriaLabel, "circle": "", "size": "xs", "importance": "clear" }, on: { "click": _vm.rightScroll }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-arrow-right", { attrs: { "size": "100" } })];
-  }, proxy: true }]) })], 1);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const attachment_carousel = __component__.exports;
-export {
-  attachment_carousel as default
-};
-//# sourceMappingURL=attachment_carousel.vue.js.map

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.js.map

@@ -1 +0,0 @@
-{"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/vue2';\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":[],"mappings":";;;;;AAoEA,MAAA,mBAAA;AAEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,iBAAA,CAAA;AAAA,MACA,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA,KAAA,UAAA,OAAA,CAAA,cAAA,UAAA,SAAA,WAAA,UAAA,SAAA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA,WAAA;AACA,SAAA,gBAAA,KAAA,MAAA,SAAA,aAAA;AACA,SAAA,iBAAA,KAAA,MAAA,SAAA,cAAA,KAAA,MAAA,SAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA,GAAA;AACA,QAAA,cAAA,eAAA,EAAA,UAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA,MAAA;AACA,cAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AAEA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA,OAAA;AAEA,WAAA,iBAAA,KAAA,MAAA,SAAA,cAAA,KAAA,MAAA,SAAA,cAAA;AACA,WAAA,MAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA,KAAA,OAAA;AACA,WAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAA,WAAA,KAAA,MAAA;AACA,WAAA,gBAAA,SAAA,aAAA;AACA,WAAA,iBAAA,EAAA,SAAA,aAAA,SAAA,gBAAA,SAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,WAAA,MAAA,SAAA,SAAA;AAAA,QACA,MAAA,KAAA,MAAA,SAAA,aAAA;AAAA,QACA,UAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,MAAA,SAAA,SAAA;AAAA,QACA,MAAA,KAAA,MAAA,SAAA,aAAA;AAAA,QACA,UAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.cjs

@@ -1,72 +0,0 @@
-"use strict";
-const vue2 = require("@dialpad/dialtone-icons/vue2");
-const progress_bar = require("./progress_bar.vue.cjs");
-;/* empty css                      */
-const _pluginVue2_normalizer = require("../../../../../../_virtual/_plugin-vue2_normalizer.cjs");
-const image_viewer = require("../../../../components/image_viewer/image_viewer.vue.cjs");
-const button = require("../../../../components/button/button.vue.cjs");
-const _sfc_main = {
-  name: "DtImageCarousel",
-  components: {
-    DtImageViewer: image_viewer,
-    DtButton: button,
-    DtIconClose: vue2.DtIconClose,
-    DtProgressBar: progress_bar
-  },
-  props: {
-    mediaItem: {
-      type: Object,
-      required: true
-    },
-    index: {
-      type: Number,
-      required: true
-    },
-    closeAriaLabel: {
-      type: String,
-      required: true
-    },
-    clickToOpenAriaLabel: {
-      type: String,
-      required: true
-    },
-    progressbarAriaLabel: {
-      type: String,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * Emitted when media close button is clicked to remove the image
-     *
-     * @event remove-media
-     * @type {Number}
-     */
-    "remove-media"
-  ],
-  methods: {
-    removeMediaItem(index) {
-      this.$emit("remove-media", index);
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("li", { staticClass: "dt-attachment-image" }, [_c("dt-image-viewer", { attrs: { "image-button-class": "dt-attachment-image__image-viewer", "image-src": _vm.mediaItem.path, "image-alt": _vm.mediaItem.altText, "close-aria-label": _vm.closeAriaLabel, "aria-label": _vm.clickToOpenAriaLabel } }), _c("div", { staticClass: "dt-attachment-image__top-right" }, [_vm.mediaItem.isUploading ? _c("dt-progress-bar", { staticClass: "dt-attachment-image__progress-bar", attrs: { "progress": _vm.mediaItem.progress, "progressbar-aria-label": _vm.progressbarAriaLabel } }) : _vm._e(), _c("dt-button", { staticClass: "dt-attachment-image__close-button", attrs: { "id": `closeButton-${_vm.index}`, "tabindex": "0", "circle": "", "size": "xs", "importance": "clear", "aria-label": _vm.closeAriaLabel }, on: { "click": function($event) {
-    return _vm.removeMediaItem(_vm.index);
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-close", { attrs: { "size": "200" } })];
-  }, proxy: true }]) })], 1)], 1);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const DtImageCarousel = __component__.exports;
-module.exports = DtImageCarousel;
-//# sourceMappingURL=image_carousel.vue.cjs.map

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.cjs.map

@@ -1 +0,0 @@
-{"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/vue2';\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"],"mappings":";;;;;;;AAiDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,eAAAA;AAAAA,IACA,UAAAC;AAAAA,IACA,aAAAC,KAAA;AAAA,IACA,eAAAC;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA,OAAA;AACA,WAAA,MAAA,gBAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.js

@@ -1,73 +0,0 @@
-import { DtIconClose } from "@dialpad/dialtone-icons/vue2";
-import DtProgressBar from "./progress_bar.vue.js";
-/* empty css                    */
-import normalizeComponent from "../../../../../../_virtual/_plugin-vue2_normalizer.js";
-import DtImageViewer from "../../../../components/image_viewer/image_viewer.vue.js";
-import DtButton from "../../../../components/button/button.vue.js";
-const _sfc_main = {
-  name: "DtImageCarousel",
-  components: {
-    DtImageViewer,
-    DtButton,
-    DtIconClose,
-    DtProgressBar
-  },
-  props: {
-    mediaItem: {
-      type: Object,
-      required: true
-    },
-    index: {
-      type: Number,
-      required: true
-    },
-    closeAriaLabel: {
-      type: String,
-      required: true
-    },
-    clickToOpenAriaLabel: {
-      type: String,
-      required: true
-    },
-    progressbarAriaLabel: {
-      type: String,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * Emitted when media close button is clicked to remove the image
-     *
-     * @event remove-media
-     * @type {Number}
-     */
-    "remove-media"
-  ],
-  methods: {
-    removeMediaItem(index) {
-      this.$emit("remove-media", index);
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("li", { staticClass: "dt-attachment-image" }, [_c("dt-image-viewer", { attrs: { "image-button-class": "dt-attachment-image__image-viewer", "image-src": _vm.mediaItem.path, "image-alt": _vm.mediaItem.altText, "close-aria-label": _vm.closeAriaLabel, "aria-label": _vm.clickToOpenAriaLabel } }), _c("div", { staticClass: "dt-attachment-image__top-right" }, [_vm.mediaItem.isUploading ? _c("dt-progress-bar", { staticClass: "dt-attachment-image__progress-bar", attrs: { "progress": _vm.mediaItem.progress, "progressbar-aria-label": _vm.progressbarAriaLabel } }) : _vm._e(), _c("dt-button", { staticClass: "dt-attachment-image__close-button", attrs: { "id": `closeButton-${_vm.index}`, "tabindex": "0", "circle": "", "size": "xs", "importance": "clear", "aria-label": _vm.closeAriaLabel }, on: { "click": function($event) {
-    return _vm.removeMediaItem(_vm.index);
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon-close", { attrs: { "size": "200" } })];
-  }, proxy: true }]) })], 1)], 1);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const DtImageCarousel = __component__.exports;
-export {
-  DtImageCarousel as default
-};
-//# sourceMappingURL=image_carousel.vue.js.map

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.js.map

@@ -1 +0,0 @@
-{"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/vue2';\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":[],"mappings":";;;;;;AAiDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,gBAAA,OAAA;AACA,WAAA,MAAA,gBAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue.cjs

@@ -1,46 +0,0 @@
-"use strict";
-;/* empty css                    */
-const _pluginVue2_normalizer = require("../../../../../../_virtual/_plugin-vue2_normalizer.cjs");
-const _sfc_main = {
-  name: "DtProgressBar",
-  props: {
-    progressbarAriaLabel: {
-      type: String,
-      required: true
-    },
-    progress: {
-      type: Number,
-      default: 20
-    }
-  },
-  data: () => ({
-    circleCircumference: 50
-  }),
-  computed: {
-    cssVars() {
-      return {
-        "--stroke-dashoffset": this.circleCircumference - this.circleCircumference * this.progress / 100,
-        "--stroke-dasharray": this.circleCircumference
-      };
-    }
-  },
-  mounted() {
-    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { attrs: { "role": "progressbar", "aria-label": _vm.progressbarAriaLabel, "tabindex": "-1", "aria-valuenow": _vm.progress, "aria-valuemin": "0", "aria-valuemax": "100" } }, [_c("svg", { staticClass: "progress-bar", style: _vm.cssVars }, [_c("circle", { ref: "progressbarCircle", staticClass: "progress-bar__circle", attrs: { "r": "8", "cx": "12", "cy": "12" } }), _c("circle", { staticClass: "progress-bar__circle", attrs: { "r": "8", "cx": "12", "cy": "12" } })])]);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const DtProgressBar = __component__.exports;
-module.exports = DtProgressBar;
-//# sourceMappingURL=progress_bar.vue.cjs.map

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress_bar.vue.cjs","sources":["../../../../../../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.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"],"names":[],"mappings":";;;AACA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,IACA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,OAAA;AAAA,IACA,qBAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA;AAAA,QACA,uBACA,KAAA,sBAAA,KAAA,sBAAA,KAAA,WAAA;AAAA,QAEA,sBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,sBAAA,KAAA,MAAA,kBAAA,eAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue.js

@@ -1,47 +0,0 @@
-/* empty css                  */
-import normalizeComponent from "../../../../../../_virtual/_plugin-vue2_normalizer.js";
-const _sfc_main = {
-  name: "DtProgressBar",
-  props: {
-    progressbarAriaLabel: {
-      type: String,
-      required: true
-    },
-    progress: {
-      type: Number,
-      default: 20
-    }
-  },
-  data: () => ({
-    circleCircumference: 50
-  }),
-  computed: {
-    cssVars() {
-      return {
-        "--stroke-dashoffset": this.circleCircumference - this.circleCircumference * this.progress / 100,
-        "--stroke-dasharray": this.circleCircumference
-      };
-    }
-  },
-  mounted() {
-    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("div", { attrs: { "role": "progressbar", "aria-label": _vm.progressbarAriaLabel, "tabindex": "-1", "aria-valuenow": _vm.progress, "aria-valuemin": "0", "aria-valuemax": "100" } }, [_c("svg", { staticClass: "progress-bar", style: _vm.cssVars }, [_c("circle", { ref: "progressbarCircle", staticClass: "progress-bar__circle", attrs: { "r": "8", "cx": "12", "cy": "12" } }), _c("circle", { staticClass: "progress-bar__circle", attrs: { "r": "8", "cx": "12", "cy": "12" } })])]);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const DtProgressBar = __component__.exports;
-export {
-  DtProgressBar as default
-};
-//# sourceMappingURL=progress_bar.vue.js.map

package/dist/packages/dialtone-vue2/recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"progress_bar.vue.js","sources":["../../../../../../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.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"],"names":[],"mappings":";;AACA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,IACA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,OAAA;AAAA,IACA,qBAAA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA;AAAA,QACA,uBACA,KAAA,sBAAA,KAAA,sBAAA,KAAA,WAAA;AAAA,QAEA,sBAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,SAAA,sBAAA,KAAA,MAAA,kBAAA,eAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}