@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/dialtone-vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/attachment-carousel.cjs

@@ -1,2 +1,346 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),b=require("./image-viewer.cjs"),d=require("./button.cjs"),h=require("./icon.cjs");require("../chunks/modal-qEzlo0Sj.js");require("./constants.cjs");require("./utils.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const g={name:"DtProgressBar",props:{progressbarAriaLabel:{type:String,required:!0},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()}},p=["aria-label","aria-valuenow"],f={ref:"progressbarCircle",r:"8",cx:"12",cy:"12",class:"progress-bar__circle"},w=e.createElementVNode("circle",{r:"8",cx:"12",cy:"12",class:"progress-bar__circle"},null,-1);function v(r,o,t,u,s,a){return e.openBlock(),e.createElementBlock("div",{role:"progressbar","aria-label":t.progressbarAriaLabel,tabindex:"-1","aria-valuenow":t.progress,"aria-valuemin":"0","aria-valuemax":"100"},[(e.openBlock(),e.createElementBlock("svg",{class:"progress-bar",style:e.normalizeStyle(a.cssVars)},[e.createElementVNode("circle",f,null,512),w],4))],8,p)}const A=m._(g,[["render",v]]),L={name:"DtImageCarousel",components:{DtImageViewer:b.DtImageViewer,DtButton:d.DtButton,DtIcon:h.DtIcon,DtProgressBar:A},props:{mediaItem:{type:Object,required:!0},index:{type:Number,required:!0},closeAriaLabel:{type:String,required:!0},clickToOpenAriaLabel:{type:String,required:!0},progressbarAriaLabel:{type:String,required:!0}},emits:["remove-media"],methods:{removeMediaItem(r){this.$emit("remove-media",r)}}},k={class:"dt-attachment-image"},C={class:"dt-attachment-image__top-right"};function y(r,o,t,u,s,a){const c=e.resolveComponent("dt-image-viewer"),n=e.resolveComponent("dt-progress-bar"),i=e.resolveComponent("dt-icon"),l=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("li",k,[e.createVNode(c,{"image-button-class":"dt-attachment-image__image-viewer","image-src":t.mediaItem.path,"image-alt":t.mediaItem.altText,"close-aria-label":t.closeAriaLabel,"aria-label":t.clickToOpenAriaLabel},null,8,["image-src","image-alt","close-aria-label","aria-label"]),e.createElementVNode("div",C,[t.mediaItem.isUploading?(e.openBlock(),e.createBlock(n,{key:0,class:"dt-attachment-image__progress-bar",progress:t.mediaItem.progress,"progressbar-aria-label":t.progressbarAriaLabel},null,8,["progress","progressbar-aria-label"])):e.createCommentVNode("",!0),e.createVNode(l,{id:`closeButton-${t.index}`,tabindex:"0",class:"dt-attachment-image__close-button",circle:"",size:"xs",importance:"clear","aria-label":t.closeAriaLabel,onClick:o[0]||(o[0]=_=>a.removeMediaItem(t.index))},{icon:e.withCtx(()=>[e.createVNode(i,{name:"close",size:"200"})]),_:1},8,["id","aria-label"])])])}const B=m._(L,[["render",y]]),q=64,x={name:"DtRecipeAttachmentCarousel",components:{DtButton:d.DtButton,DtIcon:h.DtIcon,DtImageCarousel:B},mixins:[],props:{mediaList:{type:Array,default:()=>[]},closeAriaLabel:{type:String,required:!0},clickToOpenAriaLabel:{type:String,required:!0},progressbarAriaLabel:{type:String,required:!0},leftArrowAriaLabel:{type:String,required:!0},rightArrowAriaLabel:{type:String,required:!0}},emits:["remove-media"],data(){return{showCloseButton:{},showRightArrow:!0,showLeftArrow:!1,isMounted:!1}},computed:{filteredMediaList(){return this.mediaList.filter(r=>r.type==="image"||r.type==="video")}},mounted:function(){this.showLeftArrow=this.$refs.carousel.scrollLeft>0,this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth},methods:{onItemFocus(r){r.currentTarget.scrollIntoView({behavior:"smooth"})},mediaComponent(r){switch(r){case"image":return"dt-image-carousel";default:return null}},removeMediaItem(r){this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth+q,this.$emit("remove-media",r)},closeButton(r,o){this.showCloseButton[o]=r},handleScroll(){const r=this.$refs.carousel;this.showLeftArrow=r.scrollLeft>0,this.showRightArrow=r.scrollLeft+r.clientWidth!==r.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"})}}},S={class:"dt-attachment-carousel",role:"presentation"};function D(r,o,t,u,s,a){const c=e.resolveComponent("dt-icon"),n=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("div",S,[t.mediaList.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,ref:"carousel",class:"dt-attachment-carousel__media-list",onScroll:o[0]||(o[0]=(...i)=>a.handleScroll&&a.handleScroll(...i))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.filteredMediaList,(i,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.mediaComponent(i.type)),{key:`media-${l}`,index:l,"media-item":i,"close-aria-label":t.closeAriaLabel,"click-to-open-aria-label":t.clickToOpenAriaLabel,"progressbar-aria-label":t.progressbarAriaLabel,onRemoveMedia:_=>a.removeMediaItem(l),onFocusin:a.onItemFocus},null,40,["index","media-item","close-aria-label","click-to-open-aria-label","progressbar-aria-label","onRemoveMedia","onFocusin"]))),128))],544)):e.createCommentVNode("",!0),e.withDirectives(e.createVNode(n,{tabindex:"-1","aria-label":t.leftArrowAriaLabel,class:"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left",circle:"",size:"xs",importance:"clear",onClick:a.leftScroll},{icon:e.withCtx(()=>[e.createVNode(c,{name:"arrow-left",size:"100"})]),_:1},8,["aria-label","onClick"]),[[e.vShow,s.showLeftArrow]]),e.withDirectives(e.createVNode(n,{tabindex:"-1","aria-label":t.rightArrowAriaLabel,class:"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right",circle:"",size:"xs",importance:"clear",onClick:a.rightScroll},{icon:e.withCtx(()=>[e.createVNode(c,{name:"arrow-right",size:"100"})]),_:1},8,["aria-label","onClick"]),[[e.vShow,s.showRightArrow]])])}const I=m._(x,[["render",D]]);exports.DtRecipeAttachmentCarousel=I;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const _sfc_main$2 = {
+  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$2 = ["aria-label", "aria-valuenow"];
+const _hoisted_2$1 = {
+  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$2(_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$1, null, 512),
+      _hoisted_3
+    ], 4))
+  ], 8, _hoisted_1$2);
+}
+const DtProgressBar = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = {
+  name: "DtImageCarousel",
+  components: {
+    DtImageViewer: lib_imageViewer.DtImageViewer,
+    DtButton: lib_button.DtButton,
+    DtIcon: lib_icon.DtIcon,
+    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$1 = { class: "dt-attachment-image" };
+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_button = vue.resolveComponent("dt-button");
+  return vue.openBlock(), vue.createElementBlock("li", _hoisted_1$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, {
+            name: "close",
+            size: "200"
+          })
+        ]),
+        _: 1
+      }, 8, ["id", "aria-label"])
+    ])
+  ]);
+}
+const DtImageCarousel = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const MEDIA_ITEM_WIDTH = 64;
+const _sfc_main = {
+  name: "DtRecipeAttachmentCarousel",
+  components: {
+    DtButton: lib_button.DtButton,
+    DtIcon: lib_icon.DtIcon,
+    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 = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    $props.mediaList.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", {
+      key: 0,
+      ref: "carousel",
+      class: "dt-attachment-carousel__media-list",
+      onScroll: _cache[0] || (_cache[0] = (...args) => $options.handleScroll && $options.handleScroll(...args))
+    }, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.filteredMediaList, (mediaItem, index) => {
+        return vue.openBlock(), vue.createBlock(vue.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)) : vue.createCommentVNode("", true),
+    vue.withDirectives(vue.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: vue.withCtx(() => [
+        vue.createVNode(_component_dt_icon, {
+          name: "arrow-left",
+          size: "100"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "onClick"]), [
+      [vue.vShow, $data.showLeftArrow]
+    ]),
+    vue.withDirectives(vue.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: vue.withCtx(() => [
+        vue.createVNode(_component_dt_icon, {
+          name: "arrow-right",
+          size: "100"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "onClick"]), [
+      [vue.vShow, $data.showRightArrow]
+    ])
+  ]);
+}
+const attachment_carousel = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtRecipeAttachmentCarousel = attachment_carousel;
 //# sourceMappingURL=attachment-carousel.cjs.map

package/dist/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","$props","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIcon","DtProgressBar","index","_hoisted_1","_openBlock","_createVNode","_component_dt_image_viewer","_createBlock","_component_dt_progress_bar","_component_dt_button","_cache","$event","_component_dt_icon","MEDIA_ITEM_WIDTH","DtImageCarousel","mediaItem","e","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","$data"],"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\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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"}