@dialpad/dialtone/dist/vue3/attachment_carousel-BHxR7A76.cjs

Dialpad's Dialtone design system monorepo

require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./localization/index.cjs`),n=require(`./lib/button/button.cjs`),r=require(`./lib/image-viewer/image-viewer.cjs`),i=require(`./lib/progress-circle/progress-circle.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue3`);var s={compatConfig:{MODE:3},name:`DtImageCarousel`,components:{DtImageViewer:r.default,DtButton:n.default,DtIconClose:o.DtIconClose,DtProgressCircle:i.default},props:{mediaItem:{type:Object,required:!0},index:{type:Number,required:!0}},emits:[`remove-media`],data(){return{i18n:new t.DialtoneLocalization}},computed:{closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},methods:{removeMediaItem(e){this.$emit(`remove-media`,e)}}},c={class:`d-recipe-attachment-carousel__image`},l={class:`d-recipe-attachment-carousel__image-top-right`},u={class:`d-recipe-attachment-carousel__image-progress-bar`};function d(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-image-viewer`),d=(0,a.resolveComponent)(`dt-progress-circle`),f=(0,a.resolveComponent)(`dt-icon-close`),p=(0,a.resolveComponent)(`dt-button`);return(0,a.openBlock)(),(0,a.createElementBlock)(`li`,c,[(0,a.createVNode)(s,{"image-button-class":`d-recipe-attachment-carousel__image-viewer`,"image-src":n.mediaItem.path,"image-alt":n.mediaItem.altText,"aria-label":i.i18n.$t(`DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL`)},null,8,[`image-src`,`image-alt`,`aria-label`]),(0,a.createElementVNode)(`div`,l,[(0,a.createElementVNode)(`span`,u,[n.mediaItem.isUploading?((0,a.openBlock)(),(0,a.createBlock)(d,{key:0,kind:`brand`,size:`400`,progress:n.mediaItem.progress,"aria-label":i.i18n.$t(`DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL`)},null,8,[`progress`,`aria-label`])):(0,a.createCommentVNode)(``,!0)]),(0,a.createVNode)(p,{id:`closeButton-${n.index}`,tabindex:`0`,class:`d-recipe-attachment-carousel__image-close-button`,circle:``,size:`xs`,importance:`clear`,"aria-label":o.closeButtonTitle,title:o.closeButtonTitle,onClick:t[0]||(t[0]=e=>o.removeMediaItem(n.index))},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(f,{size:`200`})]),_:1},8,[`id`,`aria-label`,`title`])])])}var f=e.t(s,[[`render`,d]]),p=64,m={compatConfig:{MODE:3},name:`DtRecipeAttachmentCarousel`,components:{DtButton:n.default,DtIconArrowRight:o.DtIconArrowRight,DtIconArrowLeft:o.DtIconArrowLeft,DtImageCarousel:f},props:{mediaList:{type:Array,default:()=>[]}},emits:[`remove-media`],data(){return{showCloseButton:{},showRightArrow:!0,showLeftArrow:!1,isMounted:!1,i18n:new t.DialtoneLocalization}},computed:{filteredMediaList(){return this.mediaList.filter(e=>e.type===`image`||e.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(e){switch(e){case`image`:return`dt-image-carousel`;default:return null}},removeMediaItem(e){this.showRightArrow=this.$refs.carousel.scrollWidth>this.$refs.carousel.clientWidth+p,this.$emit(`remove-media`,e)},closeButton(e,t){this.showCloseButton[t]=e},handleScroll(){let e=this.$refs.carousel;this.showLeftArrow=e.scrollLeft>0,this.showRightArrow=e.scrollLeft+e.clientWidth!==e.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`})}}},h={class:`d-recipe-attachment-carousel`,role:`presentation`};function g(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-icon-arrow-left`),c=(0,a.resolveComponent)(`dt-button`),l=(0,a.resolveComponent)(`dt-icon-arrow-right`);return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,h,[n.mediaList.length>0?((0,a.openBlock)(),(0,a.createElementBlock)(`ul`,{key:0,ref:`carousel`,class:`d-recipe-attachment-carousel__media-list`,onScroll:t[0]||(t[0]=(...e)=>o.handleScroll&&o.handleScroll(...e))},[((0,a.openBlock)(!0),(0,a.createElementBlock)(a.Fragment,null,(0,a.renderList)(o.filteredMediaList,(e,t)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(o.mediaComponent(e.type)),{key:`media-${t}`,index:t,"media-item":e,onRemoveMedia:e=>o.removeMediaItem(t),onFocusin:o.onItemFocus},null,40,[`index`,`media-item`,`onRemoveMedia`,`onFocusin`]))),128))],544)):(0,a.createCommentVNode)(``,!0),(0,a.withDirectives)((0,a.createVNode)(c,{tabindex:`-1`,"aria-label":i.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:o.leftScroll},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(s,{size:`100`})]),_:1},8,[`aria-label`,`onClick`]),[[a.vShow,i.showLeftArrow]]),(0,a.withDirectives)((0,a.createVNode)(c,{tabindex:`-1`,"aria-label":i.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:o.rightScroll},{icon:(0,a.withCtx)(()=>[(0,a.createVNode)(l,{size:`100`})]),_:1},8,[`aria-label`,`onClick`]),[[a.vShow,i.showRightArrow]])])}var _=e.t(m,[[`render`,g]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return _}});
//# sourceMappingURL=attachment_carousel-BHxR7A76.cjs.map