@dialpad/dialtone/dist/vue3/lib/attachment-carousel/attachment-carousel.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),g=require("../image-viewer/image-viewer.cjs"),_=require("../button/button.cjs"),b={compatConfig:{MODE:3},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:"d-recipe-attachment-carousel__progress-bar-circle"},w=e.createElementVNode("circle",{r:"8",cx:"12",cy:"12",class:"d-recipe-attachment-carousel__progress-bar-circle"},null,-1);function v(r,o,t,h,c,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:"d-recipe-attachment-carousel__progress-bar",style:e.normalizeStyle(a.cssVars)},[e.createElementVNode("circle",f,null,512),w],4))],8,p)}const A=d._(b,[["render",v]]),C={compatConfig:{MODE:3},name:"DtImageCarousel",components:{DtImageViewer:g.default,DtButton:_.default,DtIconClose:u.DtIconClose,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)}}},L={class:"d-recipe-attachment-carousel__image"},k={class:"d-recipe-attachment-carousel__image-top-right"};function y(r,o,t,h,c,a){const n=e.resolveComponent("dt-image-viewer"),l=e.resolveComponent("dt-progress-bar"),m=e.resolveComponent("dt-icon-close"),i=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("li",L,[e.createVNode(n,{"image-button-class":"d-recipe-attachment-carousel__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",k,[t.mediaItem.isUploading?(e.openBlock(),e.createBlock(l,{key:0,class:"d-recipe-attachment-carousel__image-progress-bar",progress:t.mediaItem.progress,"progressbar-aria-label":t.progressbarAriaLabel},null,8,["progress","progressbar-aria-label"])):e.createCommentVNode("",!0),e.createVNode(i,{id:`closeButton-${t.index}`,tabindex:"0",class:"d-recipe-attachment-carousel__image-close-button",circle:"",size:"xs",importance:"clear","aria-label":t.closeAriaLabel,onClick:o[0]||(o[0]=s=>a.removeMediaItem(t.index))},{icon:e.withCtx(()=>[e.createVNode(m,{size:"200"})]),_:1},8,["id","aria-label"])])])}const B=d._(C,[["render",y]]),x=64,D={compatConfig:{MODE:3},name:"DtRecipeAttachmentCarousel",components:{DtButton:_.default,DtIconArrowRight:u.DtIconArrowRight,DtIconArrowLeft:u.DtIconArrowLeft,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+x,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"})}}},I={class:"d-recipe-attachment-carousel",role:"presentation"};function S(r,o,t,h,c,a){const n=e.resolveComponent("dt-icon-arrow-left"),l=e.resolveComponent("dt-button"),m=e.resolveComponent("dt-icon-arrow-right");return e.openBlock(),e.createElementBlock("div",I,[t.mediaList.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,ref:"carousel",class:"d-recipe-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,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.mediaComponent(i.type)),{key:`media-${s}`,index:s,"media-item":i,"close-aria-label":t.closeAriaLabel,"click-to-open-aria-label":t.clickToOpenAriaLabel,"progressbar-aria-label":t.progressbarAriaLabel,onRemoveMedia:q=>a.removeMediaItem(s),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(l,{tabindex:"-1","aria-label":t.leftArrowAriaLabel,class:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",circle:"",size:"xs",importance:"clear",onClick:a.leftScroll},{icon:e.withCtx(()=>[e.createVNode(n,{size:"100"})]),_:1},8,["aria-label","onClick"]),[[e.vShow,c.showLeftArrow]]),e.withDirectives(e.createVNode(l,{tabindex:"-1","aria-label":t.rightArrowAriaLabel,class:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",circle:"",size:"xs",importance:"clear",onClick:a.rightScroll},{icon:e.withCtx(()=>[e.createVNode(m,{size:"100"})]),_:1},8,["aria-label","onClick"]),[[e.vShow,c.showRightArrow]])])}const V=d._(D,[["render",S]]);exports.default=V;
//# sourceMappingURL=attachment-carousel.cjs.map