@dialpad/dialtone-vue 3.158.0 → 3.159.1

package/dist/packages/dialtone-vue3/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.cjs.map

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

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

@@ -0,0 +1,187 @@
+import { DtIconArrowRight, DtIconArrowLeft } from "@dialpad/dialtone-icons/vue3";
+import DtImageCarousel from "./media_components/image_carousel.vue.js";
+import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, createCommentVNode, withDirectives, createVNode, withCtx, vShow } from "vue";
+/* empty css                         */
+import _export_sfc from "../../../../../_virtual/_plugin-vue_export-helper.js";
+import DtButton from "../../../components/button/button.vue.js";
+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"
+      });
+    }
+  }
+};
+const _hoisted_1 = {
+  class: "dt-attachment-carousel",
+  role: "presentation"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon_arrow_left = resolveComponent("dt-icon-arrow-left");
+  const _component_dt_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,
+      ref: "carousel",
+      class: "dt-attachment-carousel__media-list",
+      onScroll: _cache[0] || (_cache[0] = (...args) => $options.handleScroll && $options.handleScroll(...args))
+    }, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList($options.filteredMediaList, (mediaItem, index) => {
+        return openBlock(), createBlock(resolveDynamicComponent($options.mediaComponent(mediaItem.type)), {
+          key: `media-${index}`,
+          index,
+          "media-item": mediaItem,
+          "close-aria-label": $props.closeAriaLabel,
+          "click-to-open-aria-label": $props.clickToOpenAriaLabel,
+          "progressbar-aria-label": $props.progressbarAriaLabel,
+          onRemoveMedia: ($event) => $options.removeMediaItem(index),
+          onFocusin: $options.onItemFocus
+        }, null, 40, ["index", "media-item", "close-aria-label", "click-to-open-aria-label", "progressbar-aria-label", "onRemoveMedia", "onFocusin"]);
+      }), 128))
+    ], 544)) : createCommentVNode("", true),
+    withDirectives(createVNode(_component_dt_button, {
+      tabindex: "-1",
+      "aria-label": $props.leftArrowAriaLabel,
+      class: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left",
+      circle: "",
+      size: "xs",
+      importance: "clear",
+      onClick: $options.leftScroll
+    }, {
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon_arrow_left, { size: "100" })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "onClick"]), [
+      [vShow, $data.showLeftArrow]
+    ]),
+    withDirectives(createVNode(_component_dt_button, {
+      tabindex: "-1",
+      "aria-label": $props.rightArrowAriaLabel,
+      class: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right",
+      circle: "",
+      size: "xs",
+      importance: "clear",
+      onClick: $options.rightScroll
+    }, {
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon_arrow_right, { size: "100" })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "onClick"]), [
+      [vShow, $data.showRightArrow]
+    ])
+  ]);
+}
+const attachment_carousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  attachment_carousel as default
+};
+//# sourceMappingURL=attachment_carousel.vue.js.map

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

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

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue3 = require("@dialpad/dialtone-icons/vue3");
+const progress_bar = require("./progress_bar.vue.cjs");
+const vue = require("vue");
+;/* empty css                      */
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.cjs");
+const image_viewer = require("../../../../components/image_viewer/image_viewer.vue.cjs");
+const button = require("../../../../components/button/button.vue.cjs");
+const _sfc_main = {
+  name: "DtImageCarousel",
+  components: {
+    DtImageViewer: image_viewer.default,
+    DtButton: button.default,
+    DtIconClose: vue3.DtIconClose,
+    DtProgressBar: progress_bar.default
+  },
+  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);
+    }
+  }
+};
+const _hoisted_1 = { class: "dt-attachment-image" };
+const _hoisted_2 = { class: "dt-attachment-image__top-right" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_image_viewer = vue.resolveComponent("dt-image-viewer");
+  const _component_dt_progress_bar = vue.resolveComponent("dt-progress-bar");
+  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  return vue.openBlock(), vue.createElementBlock("li", _hoisted_1, [
+    vue.createVNode(_component_dt_image_viewer, {
+      "image-button-class": "dt-attachment-image__image-viewer",
+      "image-src": $props.mediaItem.path,
+      "image-alt": $props.mediaItem.altText,
+      "close-aria-label": $props.closeAriaLabel,
+      "aria-label": $props.clickToOpenAriaLabel
+    }, null, 8, ["image-src", "image-alt", "close-aria-label", "aria-label"]),
+    vue.createElementVNode("div", _hoisted_2, [
+      $props.mediaItem.isUploading ? (vue.openBlock(), vue.createBlock(_component_dt_progress_bar, {
+        key: 0,
+        class: "dt-attachment-image__progress-bar",
+        progress: $props.mediaItem.progress,
+        "progressbar-aria-label": $props.progressbarAriaLabel
+      }, null, 8, ["progress", "progressbar-aria-label"])) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_dt_button, {
+        id: `closeButton-${$props.index}`,
+        tabindex: "0",
+        class: "dt-attachment-image__close-button",
+        circle: "",
+        size: "xs",
+        importance: "clear",
+        "aria-label": $props.closeAriaLabel,
+        onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
+      }, {
+        icon: vue.withCtx(() => [
+          vue.createVNode(_component_dt_icon_close, { size: "200" })
+        ]),
+        _: 1
+      }, 8, ["id", "aria-label"])
+    ])
+  ]);
+}
+const DtImageCarousel = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = DtImageCarousel;
+//# sourceMappingURL=image_carousel.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image_carousel.vue.cjs","sources":["../../../../../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue"],"sourcesContent":["<template>\n  <li\n    class=\"dt-attachment-image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"dt-attachment-image__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :close-aria-label=\"closeAriaLabel\"\n      :aria-label=\"clickToOpenAriaLabel\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"dt-attachment-image__top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"dt-attachment-image__progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"dt-attachment-image__close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeAriaLabel\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-image {\n  position: relative;\n\n  &:focus-within .dt-attachment-image__close-button, &:hover .dt-attachment-image__close-button {\n    opacity: 1;\n  }\n}\n.dt-attachment-image__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border: var(--dt-space-100) solid;\n  border-radius: var(--br4);\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n  object-fit: cover;\n}\n.dt-attachment-image__top-right {\n  position: absolute;\n  top: var(--dt-size-100);\n  right: var(--dt-size-100);\n}\n.dt-attachment-image__close-button {\n  opacity: 0;\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  color: var(--dt-color-neutral-white);\n  background-color: var(--dt-color-black-400);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-neutral-white);\n}\n.dt-attachment-image__progress-bar {\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  background-color: var(--dt-color-neutral-white);\n  border-radius: 50%;\n  display: flex;\n  transform: rotate(-90deg);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["DtImageViewer","DtButton","DtIconClose","DtProgressBar","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_createBlock","_createCommentVNode"],"mappings":";;;;;;;;;AAiDA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,mBACVA,aAAa;AAAA,IACb,UAAAC,OAAQ;AAAA,iBACRC,KAAW;AAAA,mBACXC,aAAa;AAAA,EACd;AAAA,EAED,OAAO;AAAA,IACL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IAED,sBAAsB;AAAA,MACpB,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,gBAAiB,OAAO;AACtB,WAAK,MAAM,gBAAgB,KAAK;AAAA,IACjC;AAAA,EACF;AACH;AAnGI,MAAA,aAAA,EAAA,OAAM,sBAAqB;AAYzB,MAAA,aAAA,EAAA,OAAM,iCAAgC;;;;;;AAb1C,SAAAC,cAAA,GAAAC,uBAsCK,MAtCL,YAsCK;AAAA,IAnCHC,IAAAA,YAME,4BAAA;AAAA,MALA,sBAAmB;AAAA,MAClB,aAAW,OAAS,UAAC;AAAA,MACrB,aAAW,OAAS,UAAC;AAAA,MACrB,oBAAkB,OAAc;AAAA,MAChC,cAAY,OAAoB;AAAA;IAInCC,IAAA,mBAyBM,OAzBN,YAyBM;AAAA,MArBI,OAAA,UAAU,gCADlBC,IAKE,YAAA,4BAAA;AAAA,QArBR,KAAA;AAAA,QAkBQ,OAAM;AAAA,QACL,UAAU,OAAS,UAAC;AAAA,QACpB,0BAAwB,OAAoB;AAAA,6DApBrDC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAsBMH,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;QAlCtB,GAAA;AAAA;;;;;;"}

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

@@ -0,0 +1,97 @@
+import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
+import DtProgressBar from "./progress_bar.vue.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, createElementVNode, createBlock, createCommentVNode, withCtx } from "vue";
+/* empty css                    */
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+import DtImageViewer from "../../../../components/image_viewer/image_viewer.vue.js";
+import DtButton from "../../../../components/button/button.vue.js";
+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);
+    }
+  }
+};
+const _hoisted_1 = { class: "dt-attachment-image" };
+const _hoisted_2 = { class: "dt-attachment-image__top-right" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_image_viewer = resolveComponent("dt-image-viewer");
+  const _component_dt_progress_bar = resolveComponent("dt-progress-bar");
+  const _component_dt_icon_close = resolveComponent("dt-icon-close");
+  const _component_dt_button = resolveComponent("dt-button");
+  return openBlock(), createElementBlock("li", _hoisted_1, [
+    createVNode(_component_dt_image_viewer, {
+      "image-button-class": "dt-attachment-image__image-viewer",
+      "image-src": $props.mediaItem.path,
+      "image-alt": $props.mediaItem.altText,
+      "close-aria-label": $props.closeAriaLabel,
+      "aria-label": $props.clickToOpenAriaLabel
+    }, null, 8, ["image-src", "image-alt", "close-aria-label", "aria-label"]),
+    createElementVNode("div", _hoisted_2, [
+      $props.mediaItem.isUploading ? (openBlock(), createBlock(_component_dt_progress_bar, {
+        key: 0,
+        class: "dt-attachment-image__progress-bar",
+        progress: $props.mediaItem.progress,
+        "progressbar-aria-label": $props.progressbarAriaLabel
+      }, null, 8, ["progress", "progressbar-aria-label"])) : createCommentVNode("", true),
+      createVNode(_component_dt_button, {
+        id: `closeButton-${$props.index}`,
+        tabindex: "0",
+        class: "dt-attachment-image__close-button",
+        circle: "",
+        size: "xs",
+        importance: "clear",
+        "aria-label": $props.closeAriaLabel,
+        onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
+      }, {
+        icon: withCtx(() => [
+          createVNode(_component_dt_icon_close, { size: "200" })
+        ]),
+        _: 1
+      }, 8, ["id", "aria-label"])
+    ])
+  ]);
+}
+const DtImageCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtImageCarousel as default
+};
+//# sourceMappingURL=image_carousel.vue.js.map

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

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

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+;/* empty css                    */
+const _pluginVue_exportHelper = require("../../../../../../_virtual/_plugin-vue_export-helper.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();
+  }
+};
+const _hoisted_1 = ["aria-label", "aria-valuenow"];
+const _hoisted_2 = {
+  ref: "progressbarCircle",
+  r: "8",
+  cx: "12",
+  cy: "12",
+  class: "progress-bar__circle"
+};
+const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode("circle", {
+  r: "8",
+  cx: "12",
+  cy: "12",
+  class: "progress-bar__circle"
+}, null, -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    role: "progressbar",
+    "aria-label": $props.progressbarAriaLabel,
+    tabindex: "-1",
+    "aria-valuenow": $props.progress,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100"
+  }, [
+    (vue.openBlock(), vue.createElementBlock("svg", {
+      class: "progress-bar",
+      style: vue.normalizeStyle($options.cssVars)
+    }, [
+      vue.createElementVNode("circle", _hoisted_2, null, 512),
+      _hoisted_3
+    ], 4))
+  ], 8, _hoisted_1);
+}
+const DtProgressBar = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = DtProgressBar;
+//# sourceMappingURL=progress_bar.vue.cjs.map

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

@@ -0,0 +1 @@
+{"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":["_createElementVNode","_createElementBlock","_normalizeStyle"],"mappings":";;;;;AACA,MAAK,YAAU;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;AAjCA,MAAA,aAAA,CAAA,cAAA,eAAA;;EAkDQ,KAAI;AAAA,EACJ,GAAE;AAAA,EACF,IAAG;AAAA,EACH,IAAG;AAAA,EACH,OAAM;;mBAERA,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,OA/CPC,IAAAA,eA+Cc,SAAO,OAAA;AAAA;MAEfF,IAAAA,mBAME,UANF,YAME,MAAA,GAAA;AAAA,MACF;AAAA;EAxDN,GAAA,GAAA,UAAA;;;;"}

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

@@ -0,0 +1,67 @@
+import { openBlock, createElementBlock, normalizeStyle, createElementVNode } from "vue";
+/* empty css                  */
+import _export_sfc from "../../../../../../_virtual/_plugin-vue_export-helper.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();
+  }
+};
+const _hoisted_1 = ["aria-label", "aria-valuenow"];
+const _hoisted_2 = {
+  ref: "progressbarCircle",
+  r: "8",
+  cx: "12",
+  cy: "12",
+  class: "progress-bar__circle"
+};
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("circle", {
+  r: "8",
+  cx: "12",
+  cy: "12",
+  class: "progress-bar__circle"
+}, null, -1);
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    role: "progressbar",
+    "aria-label": $props.progressbarAriaLabel,
+    tabindex: "-1",
+    "aria-valuenow": $props.progress,
+    "aria-valuemin": "0",
+    "aria-valuemax": "100"
+  }, [
+    (openBlock(), createElementBlock("svg", {
+      class: "progress-bar",
+      style: normalizeStyle($options.cssVars)
+    }, [
+      createElementVNode("circle", _hoisted_2, null, 512),
+      _hoisted_3
+    ], 4))
+  ], 8, _hoisted_1);
+}
+const DtProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtProgressBar as default
+};
+//# sourceMappingURL=progress_bar.vue.js.map

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

@@ -0,0 +1 @@
+{"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":["_createElementVNode","_createElementBlock","_normalizeStyle"],"mappings":";;;AACA,MAAK,YAAU;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;AAjCA,MAAA,aAAA,CAAA,cAAA,eAAA;;EAkDQ,KAAI;AAAA,EACJ,GAAE;AAAA,EACF,IAAG;AAAA,EACH,IAAG;AAAA,EACH,OAAM;;mBAERA,mCAKE,UAAA;AAAA,EAJA,GAAE;AAAA,EACF,IAAG;AAAA,EACH,IAAG;AAAA,EACH,OAAM;;;sBAvBZC,mBA0BM,OAAA;AAAA,IAzBJ,MAAK;AAAA,IACJ,cAAY,OAAoB;AAAA,IACjC,UAAS;AAAA,IACR,iBAAe,OAAQ;AAAA,IACxB,iBAAc;AAAA,IACd,iBAAc;AAAA;kBAEdA,mBAiBM,OAAA;AAAA,MAhBJ,OAAM;AAAA,MACL,OA/CPC,eA+Cc,SAAO,OAAA;AAAA;MAEfF,mBAME,UANF,YAME,MAAA,GAAA;AAAA,MACF;AAAA;EAxDN,GAAA,GAAA,UAAA;;;"}