@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
3 lines (2 loc) • 6.22 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("@dialpad/dialtone-icons/vue3"),h=require("../../localization/index.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),p=require("../button/button.cjs"),f=require("../image-viewer/image-viewer.cjs"),g={compatConfig:{MODE:3},name:"DtProgressBar",props:{ariaLabel:{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()}},w=["aria-label","aria-valuenow"],A={ref:"progressbarCircle",r:"8",cx:"12",cy:"12",class:"d-recipe-attachment-carousel__progress-bar-circle"},C=e.createElementVNode("circle",{r:"8",cx:"12",cy:"12",class:"d-recipe-attachment-carousel__progress-bar-circle"},null,-1);function b(t,c,o,_,a,r){return e.openBlock(),e.createElementBlock("div",{role:"progressbar","aria-label":o.ariaLabel,tabindex:"-1","aria-valuenow":o.progress,"aria-valuemin":"0","aria-valuemax":"100"},[(e.openBlock(),e.createElementBlock("svg",{class:"d-recipe-attachment-carousel__progress-bar",style:e.normalizeStyle(r.cssVars)},[e.createElementVNode("circle",A,null,512),C],4))],8,w)}const v=d._(g,[["render",b]]),L={compatConfig:{MODE:3},name:"DtImageCarousel",components:{DtImageViewer:f.default,DtButton:p.default,DtIconClose:u.DtIconClose,DtProgressBar:v},props:{mediaItem:{type:Object,required:!0},index:{type:Number,required:!0}},emits:["remove-media"],data(){return{i18n:new h.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{removeMediaItem(t){this.$emit("remove-media",t)}}},E={class:"d-recipe-attachment-carousel__image"},I={class:"d-recipe-attachment-carousel__image-top-right"};function B(t,c,o,_,a,r){const n=e.resolveComponent("dt-image-viewer"),s=e.resolveComponent("dt-progress-bar"),m=e.resolveComponent("dt-icon-close"),i=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("li",E,[e.createVNode(n,{"image-button-class":"d-recipe-attachment-carousel__image-viewer","image-src":o.mediaItem.path,"image-alt":o.mediaItem.altText,"aria-label":a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")},null,8,["image-src","image-alt","aria-label"]),e.createElementVNode("div",I,[o.mediaItem.isUploading?(e.openBlock(),e.createBlock(s,{key:0,class:"d-recipe-attachment-carousel__image-progress-bar",progress:o.mediaItem.progress,"aria-label":a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")},null,8,["progress","aria-label"])):e.createCommentVNode("",!0),e.createVNode(i,{id:`closeButton-${o.index}`,tabindex:"0",class:"d-recipe-attachment-carousel__image-close-button",circle:"",size:"xs",importance:"clear","aria-label":r.closeButtonTitle,title:r.closeButtonTitle,onClick:c[0]||(c[0]=l=>r.removeMediaItem(o.index))},{icon:e.withCtx(()=>[e.createVNode(m,{size:"200"})]),_:1},8,["id","aria-label","title"])])])}const D=d._(L,[["render",B]]),T=64,k={compatConfig:{MODE:3},name:"DtRecipeAttachmentCarousel",components:{DtButton:p.default,DtIconArrowRight:u.DtIconArrowRight,DtIconArrowLeft:u.DtIconArrowLeft,DtImageCarousel:D},props:{mediaList:{type:Array,default:()=>[]}},emits:["remove-media"],data(){return{showCloseButton:{},showRightArrow:!0,showLeftArrow:!1,isMounted:!1,i18n:new h.DialtoneLocalization}},computed:{filteredMediaList(){return this.mediaList.filter(t=>t.type==="image"||t.type==="video")}},mounted:function(){this.showLeftArrow=this.$refs.carousel.scrollLeft>0,this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth},methods:{onItemFocus(t){t.currentTarget.scrollIntoView({behavior:"smooth"})},mediaComponent(t){switch(t){case"image":return"dt-image-carousel";default:return null}},removeMediaItem(t){this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth+T,this.$emit("remove-media",t)},closeButton(t,c){this.showCloseButton[c]=t},handleScroll(){const t=this.$refs.carousel;this.showLeftArrow=t.scrollLeft>0,this.showRightArrow=t.scrollLeft+t.clientWidth!==t.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"})}}},R={class:"d-recipe-attachment-carousel",role:"presentation"};function N(t,c,o,_,a,r){const n=e.resolveComponent("dt-icon-arrow-left"),s=e.resolveComponent("dt-button"),m=e.resolveComponent("dt-icon-arrow-right");return e.openBlock(),e.createElementBlock("div",R,[o.mediaList.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,ref:"carousel",class:"d-recipe-attachment-carousel__media-list",onScroll:c[0]||(c[0]=(...i)=>r.handleScroll&&r.handleScroll(...i))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.filteredMediaList,(i,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.mediaComponent(i.type)),{key:`media-${l}`,index:l,"media-item":i,onRemoveMedia:O=>r.removeMediaItem(l),onFocusin:r.onItemFocus},null,40,["index","media-item","onRemoveMedia","onFocusin"]))),128))],544)):e.createCommentVNode("",!0),e.withDirectives(e.createVNode(s,{tabindex:"-1","aria-label":a.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),class:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",circle:"",size:"xs",importance:"clear",onClick:r.leftScroll},{icon:e.withCtx(()=>[e.createVNode(n,{size:"100"})]),_:1},8,["aria-label","onClick"]),[[e.vShow,a.showLeftArrow]]),e.withDirectives(e.createVNode(s,{tabindex:"-1","aria-label":a.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),class:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",circle:"",size:"xs",importance:"clear",onClick:r.rightScroll},{icon:e.withCtx(()=>[e.createVNode(m,{size:"100"})]),_:1},8,["aria-label","onClick"]),[[e.vShow,a.showRightArrow]])])}const x=d._(k,[["render",N]]);exports.default=x;
//# sourceMappingURL=attachment-carousel.cjs.map