npm - @dialpad/dialtone - Versions diffs - 9.126.6 → 9.127.0 - Mend

@dialpad/dialtone 9.126.6 → 9.127.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (449) hide show

package/dist/vue3/lib/attachment-carousel/attachment-carousel.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"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;
+"use strict";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"),f=require("../image-viewer/image-viewer.cjs"),p=require("../button/button.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

package/dist/vue3/lib/attachment-carousel/attachment-carousel.cjs.map CHANGED Viewed

	@@ -1 +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 compatConfig: { MODE: 3 },\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=\"d-recipe-attachment-carousel__progress-bar\"\n :style=\"cssVars\"\n >\n <circle\n ref=\"progressbarCircle\"\n r=\"8\"\n cx=\"12\"\n cy=\"12\"\n class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n />\n <circle\n r=\"8\"\n cx=\"12\"\n cy=\"12\"\n class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n />\n </svg>\n </div>\n</template>\n","<template>\n <li\n class=\"d-recipe-attachment-carousel__image\"\n >\n <dt-image-viewer\n image-button-class=\"d-recipe-attachment-carousel__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=\"d-recipe-attachment-carousel__image-top-right\"\n >\n <dt-progress-bar\n v-if=\"mediaItem.isUploading\"\n class=\"d-recipe-attachment-carousel__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=\"d-recipe-attachment-carousel__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 compatConfig: { MODE: 3 },\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","<template>\n <div\n class=\"d-recipe-attachment-carousel\"\n role=\"presentation\"\n >\n <ul\n v-if=\"mediaList.length > 0\"\n ref=\"carousel\"\n class=\"d-recipe-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=\"d-recipe-attachment-carousel__arrow d-recipe-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=\"d-recipe-attachment-carousel__arrow d-recipe-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 compatConfig: { MODE: 3 },\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"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","index","_openBlock","_createVNode","_component_dt_image_viewer","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","$data","_component_dt_icon_arrow_right"],"mappings":"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"}
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 compatConfig: { MODE: 3 },\n name: 'DtProgressBar',\n props: {\n ariaLabel: {\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=\"ariaLabel\"\n tabindex=\"-1\"\n :aria-valuenow=\"progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <svg\n class=\"d-recipe-attachment-carousel__progress-bar\"\n :style=\"cssVars\"\n >\n <circle\n ref=\"progressbarCircle\"\n r=\"8\"\n cx=\"12\"\n cy=\"12\"\n class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n />\n <circle\n r=\"8\"\n cx=\"12\"\n cy=\"12\"\n class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n />\n </svg>\n </div>\n</template>\n","<template>\n <li\n class=\"d-recipe-attachment-carousel__image\"\n >\n <dt-image-viewer\n image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n :image-src=\"mediaItem.path\"\n :image-alt=\"mediaItem.altText\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n />\n\n <!-- Loader / Close button -->\n <div\n class=\"d-recipe-attachment-carousel__image-top-right\"\n >\n <dt-progress-bar\n v-if=\"mediaItem.isUploading\"\n class=\"d-recipe-attachment-carousel__image-progress-bar\"\n :progress=\"mediaItem.progress\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n />\n <dt-button\n :id=\"`closeButton-${index}`\"\n tabindex=\"0\"\n class=\"d-recipe-attachment-carousel__image-close-button\"\n circle\n size=\"xs\"\n importance=\"clear\"\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\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';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n compatConfig: { MODE: 3 },\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\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 data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n methods: {\n removeMediaItem (index) {\n this.$emit('remove-media', index);\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-recipe-attachment-carousel\"\n role=\"presentation\"\n >\n <ul\n v-if=\"mediaList.length > 0\"\n ref=\"carousel\"\n class=\"d-recipe-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 @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=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n class=\"d-recipe-attachment-carousel__arrow d-recipe-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=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n class=\"d-recipe-attachment-carousel__arrow d-recipe-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';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeAttachmentCarousel',\n\n components: {\n DtButton,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtImageCarousel,\n },\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\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 i18n: new DialtoneLocalization(),\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"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","_component_dt_icon_arrow_right"],"mappings":"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"}

package/dist/vue3/lib/attachment-carousel/attachment-carousel.js CHANGED Viewed

@@ -1,13 +1,14 @@
-import { DtIconClose as C, DtIconArrowRight as y, DtIconArrowLeft as x } from "@dialpad/dialtone-icons/vue3";
-import { openBlock as i, createElementBlock as l, normalizeStyle as k, createElementVNode as g, resolveComponent as o, createVNode as s, createBlock as A, createCommentVNode as L, withCtx as _, Fragment as I, renderList as S, resolveDynamicComponent as D, withDirectives as p, vShow as w } from "vue";
-import { _ as b } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import M from "../image-viewer/image-viewer.js";
-import v from "../button/button.js";
-const q = {
+import { DtIconClose as v, DtIconArrowRight as E, DtIconArrowLeft as T } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as L } from "../../localization/index.js";
+import { openBlock as i, createElementBlock as n, normalizeStyle as R, createElementVNode as f, resolveComponent as s, createVNode as c, createBlock as b, createCommentVNode as C, withCtx as h, Fragment as D, renderList as x, resolveDynamicComponent as O, withDirectives as A, vShow as w } from "vue";
+import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import B from "../image-viewer/image-viewer.js";
+import I from "../button/button.js";
+const y = {
   compatConfig: { MODE: 3 },
   name: "DtProgressBar",
   props: {
-    progressbarAriaLabel: {
+    ariaLabel: {
       type: String,
       required: !0
     },
@@ -30,44 +31,44 @@ const q = {
   mounted() {
     this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
   }
-}, T = ["aria-label", "aria-valuenow"], B = {
+}, M = ["aria-label", "aria-valuenow"], S = {
   ref: "progressbarCircle",
   r: "8",
   cx: "12",
   cy: "12",
   class: "d-recipe-attachment-carousel__progress-bar-circle"
-}, R = /* @__PURE__ */ g("circle", {
+}, N = /* @__PURE__ */ f("circle", {
   r: "8",
   cx: "12",
   cy: "12",
   class: "d-recipe-attachment-carousel__progress-bar-circle"
 }, null, -1);
-function O(e, a, r, f, n, t) {
-  return i(), l("div", {
+function $(e, o, r, g, a, t) {
+  return i(), n("div", {
     role: "progressbar",
-    "aria-label": r.progressbarAriaLabel,
+    "aria-label": r.ariaLabel,
     tabindex: "-1",
     "aria-valuenow": r.progress,
     "aria-valuemin": "0",
     "aria-valuemax": "100"
   }, [
-    (i(), l("svg", {
+    (i(), n("svg", {
       class: "d-recipe-attachment-carousel__progress-bar",
-      style: k(t.cssVars)
+      style: R(t.cssVars)
     }, [
-      g("circle", B, null, 512),
-      R
+      f("circle", S, null, 512),
+      N
     ], 4))
-  ], 8, T);
+  ], 8, M);
 }
-const z = /* @__PURE__ */ b(q, [["render", O]]), E = {
+const k = /* @__PURE__ */ p(y, [["render", $]]), W = {
   compatConfig: { MODE: 3 },
   name: "DtImageCarousel",
   components: {
-    DtImageViewer: M,
-    DtButton: v,
-    DtIconClose: C,
-    DtProgressBar: z
+    DtImageViewer: B,
+    DtButton: I,
+    DtIconClose: v,
+    DtProgressBar: k
   },
   props: {
     mediaItem: {
@@ -77,18 +78,6 @@ const z = /* @__PURE__ */ b(q, [["render", O]]), E = {
     index: {
       type: Number,
       required: !0
-    },
-    closeAriaLabel: {
-      type: String,
-      required: !0
-    },
-    clickToOpenAriaLabel: {
-      type: String,
-      required: !0
-    },
-    progressbarAriaLabel: {
-      type: String,
-      required: !0
     }
   },
   emits: [
@@ -100,57 +89,66 @@ const z = /* @__PURE__ */ b(q, [["render", O]]), E = {
      */
     "remove-media"
   ],
+  data() {
+    return {
+      i18n: new L()
+    };
+  },
+  computed: {
+    closeButtonTitle() {
+      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
+    }
+  },
   methods: {
     removeMediaItem(e) {
       this.$emit("remove-media", e);
     }
   }
-}, V = { class: "d-recipe-attachment-carousel__image" }, W = { class: "d-recipe-attachment-carousel__image-top-right" };
-function $(e, a, r, f, n, t) {
-  const u = o("dt-image-viewer"), m = o("dt-progress-bar"), h = o("dt-icon-close"), c = o("dt-button");
-  return i(), l("li", V, [
-    s(u, {
+}, z = { class: "d-recipe-attachment-carousel__image" }, V = { class: "d-recipe-attachment-carousel__image-top-right" };
+function F(e, o, r, g, a, t) {
+  const d = s("dt-image-viewer"), m = s("dt-progress-bar"), u = s("dt-icon-close"), l = s("dt-button");
+  return i(), n("li", z, [
+    c(d, {
       "image-button-class": "d-recipe-attachment-carousel__image-viewer",
       "image-src": r.mediaItem.path,
       "image-alt": r.mediaItem.altText,
-      "close-aria-label": r.closeAriaLabel,
-      "aria-label": r.clickToOpenAriaLabel
-    }, null, 8, ["image-src", "image-alt", "close-aria-label", "aria-label"]),
-    g("div", W, [
-      r.mediaItem.isUploading ? (i(), A(m, {
+      "aria-label": a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")
+    }, null, 8, ["image-src", "image-alt", "aria-label"]),
+    f("div", V, [
+      r.mediaItem.isUploading ? (i(), b(m, {
         key: 0,
         class: "d-recipe-attachment-carousel__image-progress-bar",
         progress: r.mediaItem.progress,
-        "progressbar-aria-label": r.progressbarAriaLabel
-      }, null, 8, ["progress", "progressbar-aria-label"])) : L("", !0),
-      s(c, {
+        "aria-label": a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")
+      }, null, 8, ["progress", "aria-label"])) : C("", !0),
+      c(l, {
         id: `closeButton-${r.index}`,
         tabindex: "0",
         class: "d-recipe-attachment-carousel__image-close-button",
         circle: "",
         size: "xs",
         importance: "clear",
-        "aria-label": r.closeAriaLabel,
-        onClick: a[0] || (a[0] = (d) => t.removeMediaItem(r.index))
+        "aria-label": t.closeButtonTitle,
+        title: t.closeButtonTitle,
+        onClick: o[0] || (o[0] = (_) => t.removeMediaItem(r.index))
       }, {
-        icon: _(() => [
-          s(h, { size: "200" })
+        icon: h(() => [
+          c(u, { size: "200" })
         ]),
         _: 1
-      }, 8, ["id", "aria-label"])
+      }, 8, ["id", "aria-label", "title"])
     ])
   ]);
 }
-const F = /* @__PURE__ */ b(E, [["render", $]]), N = 64, P = {
+const U = /* @__PURE__ */ p(W, [["render", F]]), G = 64, H = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeAttachmentCarousel",
   components: {
-    DtButton: v,
-    DtIconArrowRight: y,
-    DtIconArrowLeft: x,
-    DtImageCarousel: F
+    DtButton: I,
+    DtIconArrowRight: E,
+    DtIconArrowLeft: T,
+    DtImageCarousel: U
   },
-  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
@@ -169,26 +167,6 @@ const F = /* @__PURE__ */ b(E, [["render", $]]), N = 64, P = {
     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: [
@@ -205,7 +183,8 @@ const F = /* @__PURE__ */ b(E, [["render", $]]), N = 64, P = {
       showCloseButton: {},
       showRightArrow: !0,
       showLeftArrow: !1,
-      isMounted: !1
+      isMounted: !1,
+      i18n: new L()
     };
   },
   computed: {
@@ -229,10 +208,10 @@ const F = /* @__PURE__ */ b(E, [["render", $]]), N = 64, P = {
       }
     },
     removeMediaItem(e) {
-      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + N, this.$emit("remove-media", e);
+      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + G, this.$emit("remove-media", e);
     },
-    closeButton(e, a) {
-      this.showCloseButton[a] = e;
+    closeButton(e, o) {
+      this.showCloseButton[o] = e;
     },
     handleScroll() {
       const e = this.$refs.carousel;
@@ -251,66 +230,63 @@ const F = /* @__PURE__ */ b(E, [["render", $]]), N = 64, P = {
       });
     }
   }
-}, j = {
+}, P = {
   class: "d-recipe-attachment-carousel",
   role: "presentation"
 };
-function H(e, a, r, f, n, t) {
-  const u = o("dt-icon-arrow-left"), m = o("dt-button"), h = o("dt-icon-arrow-right");
-  return i(), l("div", j, [
-    r.mediaList.length > 0 ? (i(), l("ul", {
+function q(e, o, r, g, a, t) {
+  const d = s("dt-icon-arrow-left"), m = s("dt-button"), u = s("dt-icon-arrow-right");
+  return i(), n("div", P, [
+    r.mediaList.length > 0 ? (i(), n("ul", {
       key: 0,
       ref: "carousel",
       class: "d-recipe-attachment-carousel__media-list",
-      onScroll: a[0] || (a[0] = (...c) => t.handleScroll && t.handleScroll(...c))
+      onScroll: o[0] || (o[0] = (...l) => t.handleScroll && t.handleScroll(...l))
     }, [
-      (i(!0), l(I, null, S(t.filteredMediaList, (c, d) => (i(), A(D(t.mediaComponent(c.type)), {
-        key: `media-${d}`,
-        index: d,
-        "media-item": c,
-        "close-aria-label": r.closeAriaLabel,
-        "click-to-open-aria-label": r.clickToOpenAriaLabel,
-        "progressbar-aria-label": r.progressbarAriaLabel,
-        onRemoveMedia: (U) => t.removeMediaItem(d),
+      (i(!0), n(D, null, x(t.filteredMediaList, (l, _) => (i(), b(O(t.mediaComponent(l.type)), {
+        key: `media-${_}`,
+        index: _,
+        "media-item": l,
+        onRemoveMedia: (j) => t.removeMediaItem(_),
         onFocusin: t.onItemFocus
-      }, null, 40, ["index", "media-item", "close-aria-label", "click-to-open-aria-label", "progressbar-aria-label", "onRemoveMedia", "onFocusin"]))), 128))
-    ], 544)) : L("", !0),
-    p(s(m, {
+      }, null, 40, ["index", "media-item", "onRemoveMedia", "onFocusin"]))), 128))
+    ], 544)) : C("", !0),
+    A(c(m, {
       tabindex: "-1",
-      "aria-label": r.leftArrowAriaLabel,
+      "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: t.leftScroll
     }, {
-      icon: _(() => [
-        s(u, { size: "100" })
+      icon: h(() => [
+        c(d, { size: "100" })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [
-      [w, n.showLeftArrow]
+      [w, a.showLeftArrow]
     ]),
-    p(s(m, {
+    A(c(m, {
       tabindex: "-1",
-      "aria-label": r.rightArrowAriaLabel,
+      "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: t.rightScroll
     }, {
-      icon: _(() => [
-        s(h, { size: "100" })
+      icon: h(() => [
+        c(u, { size: "100" })
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]), [
-      [w, n.showRightArrow]
+      [w, a.showRightArrow]
     ])
   ]);
 }
-const Y = /* @__PURE__ */ b(P, [["render", H]]);
+const ee = /* @__PURE__ */ p(H, [["render", q]]);
 export {
-  Y as default
+  ee as default
 };
 //# sourceMappingURL=attachment-carousel.js.map

package/dist/vue3/lib/attachment-carousel/attachment-carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"attachment-carousel.js","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 compatConfig: { MODE: 3 },\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=\"d-recipe-attachment-carousel__progress-bar\"\n :style=\"cssVars\"\n >\n <circle\n ref=\"progressbarCircle\"\n r=\"8\"\n cx=\"12\"\n cy=\"12\"\n class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n />\n <circle\n r=\"8\"\n cx=\"12\"\n cy=\"12\"\n class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n />\n </svg>\n </div>\n</template>\n","<template>\n <li\n class=\"d-recipe-attachment-carousel__image\"\n >\n <dt-image-viewer\n image-button-class=\"d-recipe-attachment-carousel__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=\"d-recipe-attachment-carousel__image-top-right\"\n >\n <dt-progress-bar\n v-if=\"mediaItem.isUploading\"\n class=\"d-recipe-attachment-carousel__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=\"d-recipe-attachment-carousel__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 compatConfig: { MODE: 3 },\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","<template>\n <div\n class=\"d-recipe-attachment-carousel\"\n role=\"presentation\"\n >\n <ul\n v-if=\"mediaList.length > 0\"\n ref=\"carousel\"\n class=\"d-recipe-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=\"d-recipe-attachment-carousel__arrow d-recipe-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=\"d-recipe-attachment-carousel__arrow d-recipe-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 compatConfig: { MODE: 3 },\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"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","index","_openBlock","_createVNode","_component_dt_image_viewer","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","$data","_component_dt_icon_arrow_right"],"mappings":"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"}
1	+ {"version":3,"file":"attachment-carousel.js","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 compatConfig: { MODE: 3 },\n name: 'DtProgressBar',\n props: {\n ariaLabel: {\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=\"ariaLabel\"\n tabindex=\"-1\"\n :aria-valuenow=\"progress\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n >\n <svg\n class=\"d-recipe-attachment-carousel__progress-bar\"\n :style=\"cssVars\"\n >\n <circle\n ref=\"progressbarCircle\"\n r=\"8\"\n cx=\"12\"\n cy=\"12\"\n class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n />\n <circle\n r=\"8\"\n cx=\"12\"\n cy=\"12\"\n class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n />\n </svg>\n </div>\n</template>\n","<template>\n <li\n class=\"d-recipe-attachment-carousel__image\"\n >\n <dt-image-viewer\n image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n :image-src=\"mediaItem.path\"\n :image-alt=\"mediaItem.altText\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n />\n\n <!-- Loader / Close button -->\n <div\n class=\"d-recipe-attachment-carousel__image-top-right\"\n >\n <dt-progress-bar\n v-if=\"mediaItem.isUploading\"\n class=\"d-recipe-attachment-carousel__image-progress-bar\"\n :progress=\"mediaItem.progress\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n />\n <dt-button\n :id=\"`closeButton-${index}`\"\n tabindex=\"0\"\n class=\"d-recipe-attachment-carousel__image-close-button\"\n circle\n size=\"xs\"\n importance=\"clear\"\n :aria-label=\"closeButtonTitle\"\n :title=\"closeButtonTitle\"\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';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n compatConfig: { MODE: 3 },\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\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 data () {\n return {\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n closeButtonTitle () {\n return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n },\n },\n\n methods: {\n removeMediaItem (index) {\n this.$emit('remove-media', index);\n },\n },\n};\n</script>\n","<template>\n <div\n class=\"d-recipe-attachment-carousel\"\n role=\"presentation\"\n >\n <ul\n v-if=\"mediaList.length > 0\"\n ref=\"carousel\"\n class=\"d-recipe-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 @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=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n class=\"d-recipe-attachment-carousel__arrow d-recipe-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=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n class=\"d-recipe-attachment-carousel__arrow d-recipe-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';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeAttachmentCarousel',\n\n components: {\n DtButton,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtImageCarousel,\n },\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\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 i18n: new DialtoneLocalization(),\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"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","_component_dt_icon_arrow_right"],"mappings":"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"}

package/dist/vue3/lib/banner/banner.cjs CHANGED Viewed

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../../common/mixins/modal.cjs"),a=require("../../common/utils/index.cjs"),u=require("../../common/mixins/sr-only-close-button.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../notice/notice-icon.cjs"),f=require("../notice/notice-content.cjs"),g=require("../notice/notice-action.cjs"),_=require("../notice/notice-constants.cjs"),y={compatConfig:{MODE:3},name:"DtBanner",components:{DtNoticeIcon:m.default,DtNoticeContent:f.default,DtNoticeAction:g.default},mixins:[c.default,u.default],props:{titleId:{type:String,default(){return a.default.getUniqueString()}},contentId:{type:String,default(){return a.default.getUniqueString()}},title:{type:String,default:""},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return _.NOTICE_KINDS.includes(t)}},closeButtonProps:{type:Object,default:()=>({})},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},dialogClass:{type:String,default:""},backgroundImage:{type:String,default:""},backgroundSize:{type:String,default:"cover"}},emits:["close"],computed:{role(){return this.important?"alertdialog":"status"},bannerClass(){return["d-banner",{error:"d-banner--error",info:"d-banner--info",success:"d-banner--success",warning:"d-banner--warning",base:"d-banner--base"}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){return this.backgroundImage===""?null:`background-image: url(${this.backgroundImage});
-              background-size: ${this.backgroundSize};`}},mounted(){this.important&&this.focusFirstElement()},methods:{trapFocus(t){this.important&&this.focusTrappedTabPress(t)}}},h=["role","aria-labelledby","aria-describedby"];function p(t,i,n,k,S,o){const r=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),s=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(o.bannerClass),style:e.normalizeStyle(o.bannerBackgroundImage),onKeydown:i[1]||(i[1]=e.withKeys((...l)=>o.trapFocus&&o.trapFocus(...l),["tab"]))},[e.createElementVNode("div",{class:e.normalizeClass(["d-banner__dialog",n.dialogClass]),role:o.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r,{key:0,kind:n.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title"]),e.createVNode(s,{"hide-action":n.hideAction,"hide-close":n.hideClose,"close-button-props":n.closeButtonProps,"visually-hidden-close":t.visuallyHiddenClose,"visually-hidden-close-label":t.visuallyHiddenCloseLabel,onClose:i[0]||(i[0]=l=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close","close-button-props","visually-hidden-close","visually-hidden-close-label"])],10,h)],38)}const C=b._(y,[["render",p]]);exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../../common/mixins/modal.cjs"),r=require("../../common/utils/index.cjs"),e=require("vue"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../notice/notice-icon.cjs"),b=require("../notice/notice-content.cjs"),f=require("../notice/notice-action.cjs"),g=require("../notice/notice-constants.cjs"),_={compatConfig:{MODE:3},name:"DtBanner",components:{DtNoticeIcon:m.default,DtNoticeContent:b.default,DtNoticeAction:f.default},mixins:[c.default],props:{titleId:{type:String,default(){return r.default.getUniqueString()}},contentId:{type:String,default(){return r.default.getUniqueString()}},title:{type:String,default:""},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return g.NOTICE_KINDS.includes(t)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},dialogClass:{type:String,default:""},backgroundImage:{type:String,default:""},backgroundSize:{type:String,default:"cover"}},emits:["close"],computed:{role(){return this.important?"alertdialog":"status"},bannerClass(){return["d-banner",{error:"d-banner--error",info:"d-banner--info",success:"d-banner--success",warning:"d-banner--warning",base:"d-banner--base"}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){return this.backgroundImage===""?null:`background-image: url(${this.backgroundImage});
+              background-size: ${this.backgroundSize};`}},mounted(){this.important&&this.focusFirstElement()},methods:{trapFocus(t){this.important&&this.focusTrappedTabPress(t)}}},h=["role","aria-labelledby","aria-describedby"];function C(t,o,n,y,k,i){const l=e.resolveComponent("dt-notice-icon"),d=e.resolveComponent("dt-notice-content"),s=e.resolveComponent("dt-notice-action");return e.openBlock(),e.createElementBlock("aside",{class:e.normalizeClass(i.bannerClass),style:e.normalizeStyle(i.bannerBackgroundImage),onKeydown:o[1]||(o[1]=e.withKeys((...a)=>i.trapFocus&&i.trapFocus(...a),["tab"]))},[e.createElementVNode("div",{class:e.normalizeClass(["d-banner__dialog",n.dialogClass]),role:i.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(l,{key:0,kind:n.kind},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon")]),_:3},8,["kind"])),e.createVNode(d,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:e.withCtx(()=>[e.renderSlot(t.$slots,"titleOverride")]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["title-id","content-id","title"]),e.createVNode(s,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:o[0]||(o[0]=a=>t.$emit("close"))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"action")]),_:3},8,["hide-action","hide-close"])],10,h)],38)}const p=u._(_,[["render",C]]);exports.default=p;
 //# sourceMappingURL=banner.cjs.map

package/dist/vue3/lib/banner/banner.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner.cjs","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n <aside\n :class=\"bannerClass\"\n :style=\"bannerBackgroundImage\"\n @keydown.tab=\"trapFocus\"\n >\n <div\n class=\"d-banner__dialog\"\n :class=\"dialogClass\"\n :role=\"role\"\n :aria-labelledby=\"titleId\"\n :aria-describedby=\"contentId\"\n >\n <dt-notice-icon\n v-if=\"!hideIcon\"\n :kind=\"kind\"\n >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :title-id=\"titleId\"\n :content-id=\"contentId\"\n :title=\"title\"\n >\n <template #titleOverride>\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n ~~:close-button-props=\"closeButtonProps\"\n :visually-hidden-close=\"visuallyHiddenClose\"\n :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n~~ @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\~~nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\~~n\n/*\n Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal~~, SrOnlyCloseButtonMixin~~],\n\n props: {\n /\n Sets an ID on the title element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the title.\n /\n titleId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n Sets an ID on the content element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the content.\n /\n contentId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n Title header of the notice. This can be left blank to remove the title from the notice entirely.\n /\n title: {\n type: String,\n default: '',\n },\n\n /\n Used in scenarios where the message needs to visually dominate the screen.\n * This will also change the aria role from status to alertdialog.\n * and will modally trap the keyboard focus in the dialog as soon as it displays.\n * @values true, false\n /\n important: {\n type: Boolean,\n default: false,\n },\n\n /\n Pins the banner to the top of the window and pushes all app content down.\n * @values true, false\n /\n pinned: {\n type: Boolean,\n default: false,\n },\n\n /\n Severity level of the notice, sets the icon and background\n * @values base, error, info, success, warning\n /\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /\n Props for the notice close button.\n /\n closeButtonProps: {\n type: Object,\n default: () => ({}),\n },\n\n /\n Hides the close button from the notice\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n Hides the icon from the notice\n * @values true, false\n /\n hideIcon: {\n type: Boolean,\n default: false,\n },\n\n /\n Hides the action from the notice\n * @values true, false\n /\n hideAction: {\n type: Boolean,\n default: false,\n },\n\n /\n Inner dialog class\n /\n dialogClass: {\n type: String,\n default: '',\n },\n\n /\n Banner background image\n /\n backgroundImage: {\n type: String,\n default: '',\n },\n\n /\n Background image size, follows the background-size CSS property values\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n * CSS background-sizes\n * </a>\n /\n backgroundSize: {\n type: String,\n default: 'cover',\n },\n },\n\n emits: [\n /\n Close button click event\n \n @event close\n */\n 'close',\n ],\n\n computed: {\n role () {\n return this.important ? 'alertdialog' : 'status';\n },\n\n bannerClass () {\n const kindClasses = {\n error: 'd-banner--error',\n info: 'd-banner--info',\n success: 'd-banner--success',\n warning: 'd-banner--warning',\n base: 'd-banner--base',\n };\n\n return [\n 'd-banner',\n kindClasses[this.kind],\n {\n 'd-banner--important': this.important,\n 'd-banner--pinned': this.pinned,\n },\n ];\n },\n\n bannerBackgroundImage () {\n if (this.backgroundImage === '') return null;\n\n return `background-image: url(${this.backgroundImage});\n background-size: ${this.backgroundSize};`;\n },\n },\n\n mounted () {\n if (this.important) {\n this.focusFirstElement();\n }\n },\n\n methods: {\n trapFocus (e) {\n if (this.important) {\n this.focusTrappedTabPress(e);\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","~~SrOnlyCloseButtonMixin","~~utils","kind","NOTICE_KINDS","e","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"~~kfA4DKA~~,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,WAEN,WAAY,cACVC,EAAY,QACZ,gBAAAC,EAAe,QACf,eAAAC,EAAc,OACf,EAED,OAAQ,CAACC,~~EAAK~~,~~QAAEC~~,~~SAAsB~~,~~EAEtC,~~MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAOC,UAAM,gBAAiB,CAAG,CAC/C,EAMD,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAOA,UAAM,gBAAiB,CAAG,CAC/C,EAKD,MAAO,CACL,KAAM,OACN,QAAS,EACV,EAQD,UAAW,CACT,KAAM,QACN,QAAS,EACV,EAMD,OAAQ,CACN,KAAM,QACN,QAAS,EACV,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAUC,EAAM,CACd,OAAOC,EAAY,aAAC,SAASD,CAAI,CAClC,CACF,~~EAKD,iBAAkB,CAChB,KAAM,OACN,QAAS,KAAO,CAAA,EACjB,~~EAMD,UAAW,CACT,KAAM,QACN,QAAS,EACV,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAMD,WAAY,CACV,KAAM,QACN,QAAS,EACV,EAKD,YAAa,CACX,KAAM,OACN,QAAS,EACV,EAKD,gBAAiB,CACf,KAAM,OACN,QAAS,EACV,EAQD,eAAgB,CACd,KAAM,OACN,QAAS,OACV,CACF,EAED,MAAO,CAML,OACD,EAED,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,QACzC,EAED,aAAe,CASb,MAAO,CACL,WATkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,kBAKM,KAAK,IAAI,EACrB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,MAC1B,EAEJ,EAED,uBAAyB,CACvB,OAAI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,eAAe;AAAA,iCACzB,KAAK,cAAc,GAC/C,CACF,EAED,SAAW,CACL,KAAK,WACP,KAAK,kBAAiB,CAEzB,EAED,QAAS,CACP,UAAWE,EAAG,CACR,KAAK,WACP,KAAK,qBAAqBA,CAAC,CAE9B,CACF,CACH,~~EAxPAC~~,EAAA,CAAA,OAAA,kBAAA,kBAAA,+KAEEC,~~EA4CQ~~,mBAAA,QAAA,~~CA3CL~~,MAHLC,EAAAA,eAGYC,EAAW,WAAA,EAClB,MAJLC,EAAAA,eAIYD,EAAqB,qBAAA,EAC5B,UAAOE,EAAA,CAAA,IAAAA,EAAA,CAAA,EALZC,mBAKkBH,EAAS,WAAAA,EAAA,UAAA,GAAAI,CAAA,EAAA,CAAA,KAAA,CAAA,KAEvBC,EAAAA,~~mBAsCM~~,MAAA,~~CArCJ~~,MARNN,EAAAA,eAAA,CAQY,mBACEO,EAAW,WAAA,CAAA,EAClB,KAAMN,EAAI,KACV,kBAAiBM,EAAO,QACxB,mBAAkBA,EAAS,YAGnBA,EAAQ,SAfvBC,EAAA,mBAAA,GAAA,EAAA,iBAcMC,EAMiB,YAAAC,EAAA,CApBvB,IAAA,EAgBS,KAAMH,EAAI,OAhBnB,QAAAI,EAAA,QAmBQ,IAAoB,CAApBC,aAAoBC,EAAA,OAAA,MAAA,IAnB5B,EAAA,gBAqBMC,EAAAA,YAYoBC,EAAA,CAXjB,WAAUR,EAAO,QACjB,aAAYA,EAAS,UACrB,MAAOA,EAAK,QAEF,wBAGT,IAA6B,CAA7BK,aAA6BC,EAAA,OAAA,eAAA,IA7BvC,QAAAF,EAAA,QAgCQ,IAAQ,CAARC,aAAQC,EAAA,OAAA,SAAA,IAhChB,EAAA,wCAkCMC,EAAAA,~~YAUmBE~~,EAAA,~~CAThB~~,cAAaT,EAAU,WACvB,aAAYA,EAAS,UACrB,~~qBAAoBA~~,~~EAAgB,iBACpC,wBAAuBM,EAAmB,oBAC1C,8BAA6BA,EAAwB,yBACrD,uBAAOA,~~EAAK,MAAA,OAAA,~~KAxCrB~~,QAAAF,EAAA,~~QA2CQ~~,IAAsB,CAAtBC,aAAsBC,EAAA,OAAA,QAAA,~~IA3C9B~~,EAAA,~~6GAAA~~,EAAA,GAAAf,CAAA"}
1	+ {"version":3,"file":"banner.cjs","sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n <aside\n :class=\"bannerClass\"\n :style=\"bannerBackgroundImage\"\n @keydown.tab=\"trapFocus\"\n >\n <div\n class=\"d-banner__dialog\"\n :class=\"dialogClass\"\n :role=\"role\"\n :aria-labelledby=\"titleId\"\n :aria-describedby=\"contentId\"\n >\n <dt-notice-icon\n v-if=\"!hideIcon\"\n :kind=\"kind\"\n >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :title-id=\"titleId\"\n :content-id=\"contentId\"\n :title=\"title\"\n >\n <template #titleOverride>\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/*\n Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal],\n\n props: {\n /\n Sets an ID on the title element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the title.\n /\n titleId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n Sets an ID on the content element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the content.\n /\n contentId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n Title header of the notice. This can be left blank to remove the title from the notice entirely.\n /\n title: {\n type: String,\n default: '',\n },\n\n /\n Used in scenarios where the message needs to visually dominate the screen.\n * This will also change the aria role from status to alertdialog.\n * and will modally trap the keyboard focus in the dialog as soon as it displays.\n * @values true, false\n /\n important: {\n type: Boolean,\n default: false,\n },\n\n /\n Pins the banner to the top of the window and pushes all app content down.\n * @values true, false\n /\n pinned: {\n type: Boolean,\n default: false,\n },\n\n /\n Severity level of the notice, sets the icon and background\n * @values base, error, info, success, warning\n /\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /\n Hides the close button from the notice\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n Hides the icon from the notice\n * @values true, false\n /\n hideIcon: {\n type: Boolean,\n default: false,\n },\n\n /\n Hides the action from the notice\n * @values true, false\n /\n hideAction: {\n type: Boolean,\n default: false,\n },\n\n /\n Inner dialog class\n /\n dialogClass: {\n type: String,\n default: '',\n },\n\n /\n Banner background image\n /\n backgroundImage: {\n type: String,\n default: '',\n },\n\n /\n Background image size, follows the background-size CSS property values\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n * CSS background-sizes\n * </a>\n /\n backgroundSize: {\n type: String,\n default: 'cover',\n },\n },\n\n emits: [\n /\n Close button click event\n \n @event close\n */\n 'close',\n ],\n\n computed: {\n role () {\n return this.important ? 'alertdialog' : 'status';\n },\n\n bannerClass () {\n const kindClasses = {\n error: 'd-banner--error',\n info: 'd-banner--info',\n success: 'd-banner--success',\n warning: 'd-banner--warning',\n base: 'd-banner--base',\n };\n\n return [\n 'd-banner',\n kindClasses[this.kind],\n {\n 'd-banner--important': this.important,\n 'd-banner--pinned': this.pinned,\n },\n ];\n },\n\n bannerBackgroundImage () {\n if (this.backgroundImage === '') return null;\n\n return `background-image: url(${this.backgroundImage});\n background-size: ${this.backgroundSize};`;\n },\n },\n\n mounted () {\n if (this.important) {\n this.focusFirstElement();\n }\n },\n\n methods: {\n trapFocus (e) {\n if (this.important) {\n this.focusTrappedTabPress(e);\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","e","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}