@dialpad/dialtone 9.124.0 → 9.126.0

package/dist/vue2/dialtone-vue.js.map

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

package/dist/vue2/lib/attachment-carousel/attachment-carousel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue2"),o=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l=require("../image-viewer/image-viewer.cjs"),c=require("../button/button.cjs"),n={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()}};var u=function(){var e=this,t=e._self._c;return t("div",{attrs:{role:"progressbar","aria-label":e.progressbarAriaLabel,tabindex:"-1","aria-valuenow":e.progress,"aria-valuemin":"0","aria-valuemax":"100"}},[t("svg",{staticClass:"d-recipe-attachment-carousel__progress-bar",style:e.cssVars},[t("circle",{ref:"progressbarCircle",staticClass:"d-recipe-attachment-carousel__progress-bar-circle",attrs:{r:"8",cx:"12",cy:"12"}}),t("circle",{staticClass:"d-recipe-attachment-carousel__progress-bar-circle",attrs:{r:"8",cx:"12",cy:"12"}})])])},m=[],d=o.n(n,u,m);const h=d.exports,p={name:"DtImageCarousel",components:{DtImageViewer:l.default,DtButton:c.default,DtIconClose:i.DtIconClose,DtProgressBar:h},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)}}};var _=function(){var e=this,t=e._self._c;return t("li",{staticClass:"d-recipe-attachment-carousel__image"},[t("dt-image-viewer",{attrs:{"image-button-class":"d-recipe-attachment-carousel__image-viewer","image-src":e.mediaItem.path,"image-alt":e.mediaItem.altText,"close-aria-label":e.closeAriaLabel,"aria-label":e.clickToOpenAriaLabel}}),t("div",{staticClass:"d-recipe-attachment-carousel__image-top-right"},[e.mediaItem.isUploading?t("dt-progress-bar",{staticClass:"d-recipe-attachment-carousel__image-progress-bar",attrs:{progress:e.mediaItem.progress,"progressbar-aria-label":e.progressbarAriaLabel}}):e._e(),t("dt-button",{staticClass:"d-recipe-attachment-carousel__image-close-button",attrs:{id:`closeButton-${e.index}`,tabindex:"0",circle:"",size:"xs",importance:"clear","aria-label":e.closeAriaLabel},on:{click:function(a){return e.removeMediaItem(e.index)}},scopedSlots:e._u([{key:"icon",fn:function(){return[t("dt-icon-close",{attrs:{size:"200"}})]},proxy:!0}])})],1)],1)},f=[],g=o.n(p,_,f);const b=g.exports,w=64,v={name:"DtRecipeAttachmentCarousel",components:{DtButton:c.default,DtIconArrowRight:i.DtIconArrowRight,DtIconArrowLeft:i.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+w,this.$emit("remove-media",r)},closeButton(r,e){this.showCloseButton[e]=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"})}}};var A=function(){var e=this,t=e._self._c;return t("div",{staticClass:"d-recipe-attachment-carousel",attrs:{role:"presentation"}},[e.mediaList.length>0?t("ul",{ref:"carousel",staticClass:"d-recipe-attachment-carousel__media-list",on:{scroll:e.handleScroll}},e._l(e.filteredMediaList,function(a,s){return t(e.mediaComponent(a.type),{key:`media-${s}`,tag:"component",attrs:{index:s,"media-item":a,"close-aria-label":e.closeAriaLabel,"click-to-open-aria-label":e.clickToOpenAriaLabel,"progressbar-aria-label":e.progressbarAriaLabel},on:{"remove-media":function($){return e.removeMediaItem(s)},focusin:e.onItemFocus}})}),1):e._e(),t("dt-button",{directives:[{name:"show",rawName:"v-show",value:e.showLeftArrow,expression:"showLeftArrow"}],staticClass:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",attrs:{tabindex:"-1","aria-label":e.leftArrowAriaLabel,circle:"",size:"xs",importance:"clear"},on:{click:e.leftScroll},scopedSlots:e._u([{key:"icon",fn:function(){return[t("dt-icon-arrow-left",{attrs:{size:"100"}})]},proxy:!0}])}),t("dt-button",{directives:[{name:"show",rawName:"v-show",value:e.showRightArrow,expression:"showRightArrow"}],staticClass:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",attrs:{tabindex:"-1","aria-label":e.rightArrowAriaLabel,circle:"",size:"xs",importance:"clear"},on:{click:e.rightScroll},scopedSlots:e._u([{key:"icon",fn:function(){return[t("dt-icon-arrow-right",{attrs:{size:"100"}})]},proxy:!0}])})],1)},L=[],y=o.n(v,A,L);const C=y.exports;exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l=require("../image-viewer/image-viewer.cjs"),c=require("../button/button.cjs"),n=require("../../common/mixins/localization.cjs"),u={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()}};var m=function(){var e=this,r=e._self._c;return r("div",{attrs:{role:"progressbar","aria-label":e.ariaLabel,tabindex:"-1","aria-valuenow":e.progress,"aria-valuemin":"0","aria-valuemax":"100"}},[r("svg",{staticClass:"d-recipe-attachment-carousel__progress-bar",style:e.cssVars},[r("circle",{ref:"progressbarCircle",staticClass:"d-recipe-attachment-carousel__progress-bar-circle",attrs:{r:"8",cx:"12",cy:"12"}}),r("circle",{staticClass:"d-recipe-attachment-carousel__progress-bar-circle",attrs:{r:"8",cx:"12",cy:"12"}})])])},_=[],d=i.n(u,m,_);const h=d.exports,f={name:"DtImageCarousel",components:{DtImageViewer:l.default,DtButton:c.default,DtIconClose:o.DtIconClose,DtProgressBar:h},mixins:[n.default],props:{mediaItem:{type:Object,required:!0},index:{type:Number,required:!0}},emits:["remove-media"],computed:{closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{removeMediaItem(t){this.$emit("remove-media",t)}}};var p=function(){var e=this,r=e._self._c;return r("li",{staticClass:"d-recipe-attachment-carousel__image"},[r("dt-image-viewer",{attrs:{"image-button-class":"d-recipe-attachment-carousel__image-viewer","image-src":e.mediaItem.path,"image-alt":e.mediaItem.altText,"aria-label":e.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")}}),r("div",{staticClass:"d-recipe-attachment-carousel__image-top-right"},[e.mediaItem.isUploading?r("dt-progress-bar",{staticClass:"d-recipe-attachment-carousel__image-progress-bar",attrs:{progress:e.mediaItem.progress,"aria-label":e.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")}}):e._e(),r("dt-button",{staticClass:"d-recipe-attachment-carousel__image-close-button",attrs:{id:`closeButton-${e.index}`,tabindex:"0",circle:"",size:"xs",importance:"clear","aria-label":e.closeButtonTitle,title:e.closeButtonTitle},on:{click:function(s){return e.removeMediaItem(e.index)}},scopedSlots:e._u([{key:"icon",fn:function(){return[r("dt-icon-close",{attrs:{size:"200"}})]},proxy:!0}])})],1)],1)},g=[],v=i.n(f,p,g);const w=v.exports,A=64,L={name:"DtRecipeAttachmentCarousel",components:{DtButton:c.default,DtIconArrowRight:o.DtIconArrowRight,DtIconArrowLeft:o.DtIconArrowLeft,DtImageCarousel:w},mixins:[n.default],props:{mediaList:{type:Array,default:()=>[]}},emits:["remove-media"],data(){return{showCloseButton:{},showRightArrow:!0,showLeftArrow:!1,isMounted:!1}},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+A,this.$emit("remove-media",t)},closeButton(t,e){this.showCloseButton[e]=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"})}}};var b=function(){var e=this,r=e._self._c;return r("div",{staticClass:"d-recipe-attachment-carousel",attrs:{role:"presentation"}},[e.mediaList.length>0?r("ul",{ref:"carousel",staticClass:"d-recipe-attachment-carousel__media-list",on:{scroll:e.handleScroll}},e._l(e.filteredMediaList,function(s,a){return r(e.mediaComponent(s.type),{key:`media-${a}`,tag:"component",attrs:{index:a,"media-item":s},on:{"remove-media":function(R){return e.removeMediaItem(a)},focusin:e.onItemFocus}})}),1):e._e(),r("dt-button",{directives:[{name:"show",rawName:"v-show",value:e.showLeftArrow,expression:"showLeftArrow"}],staticClass:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",attrs:{tabindex:"-1","aria-label":e.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),circle:"",size:"xs",importance:"clear"},on:{click:e.leftScroll},scopedSlots:e._u([{key:"icon",fn:function(){return[r("dt-icon-arrow-left",{attrs:{size:"100"}})]},proxy:!0}])}),r("dt-button",{directives:[{name:"show",rawName:"v-show",value:e.showRightArrow,expression:"showRightArrow"}],staticClass:"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",attrs:{tabindex:"-1","aria-label":e.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),circle:"",size:"xs",importance:"clear"},on:{click:e.rightScroll},scopedSlots:e._u([{key:"icon",fn:function(){return[r("dt-icon-arrow-right",{attrs:{size:"100"}})]},proxy:!0}])})],1)},C=[],I=i.n(L,b,C);const $=I.exports;exports.default=$;
 //# sourceMappingURL=attachment-carousel.cjs.map

package/dist/vue2/lib/attachment-carousel/attachment-carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"attachment-carousel.cjs","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"progressbarAriaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"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/vue2';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\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/vue2';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    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","DtImageViewer","DtButton","DtIconClose","DtProgressBar","index","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel"],"mappings":"oSACAA,EAAA,CACA,KAAA,gBACA,MAAA,CACA,qBAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,SAAA,CACA,KAAA,OACA,QAAA,EACA,CACA,EAEA,KAAA,KAAA,CACA,oBAAA,EACA,GAEA,SAAA,CACA,SAAA,CACA,MAAA,CACA,sBACA,KAAA,oBAAA,KAAA,oBAAA,KAAA,SAAA,IAEA,qBAAA,KAAA,mBACA,CACA,CACA,EAEA,SAAA,CACA,KAAA,oBAAA,KAAA,MAAA,kBAAA,eAAA,CACA,CACA,4jBCgBAA,EAAA,CACA,KAAA,kBAEA,WAAA,CACA,cAAAC,EAAA,QACA,SAAAC,EAAA,QACA,YAAAC,EAAA,YACA,cAAAC,CACA,EAEA,MAAA,CACA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,MAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,eAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,qBAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,qBAAA,CACA,KAAA,OACA,SAAA,EACA,CACA,EAEA,MAAA,CAOA,cACA,EAEA,QAAA,CACA,gBAAAC,EAAA,CACA,KAAA,MAAA,eAAAA,CAAA,CACA,CACA,CACA,4/BCjCAC,EAAA,GAEAN,EAAA,CACA,KAAA,6BAEA,WAAA,CACA,SAAAE,EAAA,QACA,iBAAAK,EAAA,iBACA,gBAAAC,EAAA,gBACA,gBAAAC,CACA,EAEA,OAAA,CAAA,EAQA,MAAA,CAUA,UAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,EAEA,eAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,qBAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,qBAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,mBAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,oBAAA,CACA,KAAA,OACA,SAAA,EACA,CACA,EAEA,MAAA,CAOA,cACA,EAEA,MAAA,CACA,MAAA,CACA,gBAAA,CAAA,EACA,eAAA,GACA,cAAA,GACA,UAAA,EACA,CACA,EAEA,SAAA,CACA,mBAAA,CACA,OAAA,KAAA,UAAA,OAAAC,GAAAA,EAAA,OAAA,SAAAA,EAAA,OAAA,OAAA,CACA,CACA,EAEA,QAAA,UAAA,CACA,KAAA,cAAA,KAAA,MAAA,SAAA,WAAA,EACA,KAAA,eAAA,KAAA,MAAA,SAAA,YAAA,KAAA,MAAA,SAAA,WACA,EAEA,QAAA,CACA,YAAAC,EAAA,CACAA,EAAA,cAAA,eAAA,CAAA,SAAA,QAAA,CAAA,CACA,EAEA,eAAAC,EAAA,CACA,OAAAA,EAAA,CACA,IAAA,QACA,MAAA,oBACA,QAEA,OAAA,IACA,CACA,EAEA,gBAAAP,EAAA,CAEA,KAAA,eAAA,KAAA,MAAA,SAAA,YAAA,KAAA,MAAA,SAAA,YAAAC,EACA,KAAA,MAAA,eAAAD,CAAA,CACA,EAEA,YAAAQ,EAAAR,EAAA,CACA,KAAA,gBAAAA,CAAA,EAAAQ,CACA,EAEA,cAAA,CACA,MAAAC,EAAA,KAAA,MAAA,SACA,KAAA,cAAAA,EAAA,WAAA,EACA,KAAA,eAAAA,EAAA,WAAAA,EAAA,cAAAA,EAAA,WACA,EAEA,YAAA,CACA,KAAA,MAAA,SAAA,SAAA,CACA,KAAA,KAAA,MAAA,SAAA,WAAA,IACA,SAAA,QACA,CAAA,CACA,EAEA,aAAA,CACA,KAAA,MAAA,SAAA,SAAA,CACA,KAAA,KAAA,MAAA,SAAA,WAAA,IACA,SAAA,QACA,CAAA,CACA,CACA,CACA"}
+{"version":3,"file":"attachment-carousel.cjs","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    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/vue2';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  mixins: [DtLocalizationMixin],\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  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/vue2';\nimport { DtButton } from '@/components/button';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  mixins: [DtLocalizationMixin],\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    };\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","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DtLocalizationMixin","index","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel"],"mappings":"sVACAA,EAAA,CACA,KAAA,gBACA,MAAA,CACA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,SAAA,CACA,KAAA,OACA,QAAA,EACA,CACA,EAEA,KAAA,KAAA,CACA,oBAAA,EACA,GAEA,SAAA,CACA,SAAA,CACA,MAAA,CACA,sBACA,KAAA,oBAAA,KAAA,oBAAA,KAAA,SAAA,IAEA,qBAAA,KAAA,mBACA,CACA,CACA,EAEA,SAAA,CACA,KAAA,oBAAA,KAAA,MAAA,kBAAA,eAAA,CACA,CACA,ijBCiBAA,EAAA,CACA,KAAA,kBAEA,WAAA,CACA,cAAAC,EAAA,QACA,SAAAC,EAAA,QACA,YAAAC,EAAA,YACA,cAAAC,CACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,MAAA,CACA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,MAAA,CACA,KAAA,OACA,SAAA,EACA,CACA,EAEA,MAAA,CAOA,cACA,EAEA,SAAA,CACA,kBAAA,CACA,OAAA,KAAA,KAAA,GAAA,uBAAA,CACA,CACA,EAEA,QAAA,CACA,gBAAAC,EAAA,CACA,KAAA,MAAA,eAAAA,CAAA,CACA,CACA,CACA,ojCC7BAC,EAAA,GAEAP,EAAA,CACA,KAAA,6BAEA,WAAA,CACA,SAAAE,EAAA,QACA,iBAAAM,EAAA,iBACA,gBAAAC,EAAA,gBACA,gBAAAC,CACA,EAEA,OAAA,CAAAL,EAAAA,OAAA,EAQA,MAAA,CAUA,UAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,CACA,EAEA,MAAA,CAOA,cACA,EAEA,MAAA,CACA,MAAA,CACA,gBAAA,CAAA,EACA,eAAA,GACA,cAAA,GACA,UAAA,EACA,CACA,EAEA,SAAA,CACA,mBAAA,CACA,OAAA,KAAA,UAAA,OAAAM,GAAAA,EAAA,OAAA,SAAAA,EAAA,OAAA,OAAA,CACA,CACA,EAEA,QAAA,UAAA,CACA,KAAA,cAAA,KAAA,MAAA,SAAA,WAAA,EACA,KAAA,eAAA,KAAA,MAAA,SAAA,YAAA,KAAA,MAAA,SAAA,WACA,EAEA,QAAA,CACA,YAAAC,EAAA,CACAA,EAAA,cAAA,eAAA,CAAA,SAAA,QAAA,CAAA,CACA,EAEA,eAAAC,EAAA,CACA,OAAAA,EAAA,CACA,IAAA,QACA,MAAA,oBACA,QAEA,OAAA,IACA,CACA,EAEA,gBAAAP,EAAA,CAEA,KAAA,eAAA,KAAA,MAAA,SAAA,YAAA,KAAA,MAAA,SAAA,YAAAC,EACA,KAAA,MAAA,eAAAD,CAAA,CACA,EAEA,YAAAQ,EAAAR,EAAA,CACA,KAAA,gBAAAA,CAAA,EAAAQ,CACA,EAEA,cAAA,CACA,MAAAC,EAAA,KAAA,MAAA,SACA,KAAA,cAAAA,EAAA,WAAA,EACA,KAAA,eAAAA,EAAA,WAAAA,EAAA,cAAAA,EAAA,WACA,EAEA,YAAA,CACA,KAAA,MAAA,SAAA,SAAA,CACA,KAAA,KAAA,MAAA,SAAA,WAAA,IACA,SAAA,QACA,CAAA,CACA,EAEA,aAAA,CACA,KAAA,MAAA,SAAA,SAAA,CACA,KAAA,KAAA,MAAA,SAAA,WAAA,IACA,SAAA,QACA,CAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/attachment-carousel/attachment-carousel.js

@@ -1,11 +1,12 @@
-import { DtIconClose as c, DtIconArrowRight as l, DtIconArrowLeft as n } from "@dialpad/dialtone-icons/vue2";
-import { n as i } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import m from "../image-viewer/image-viewer.js";
-import o from "../button/button.js";
-const u = {
+import { DtIconClose as n, DtIconArrowRight as l, DtIconArrowLeft as m } from "@dialpad/dialtone-icons/vue2";
+import { n as o } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import u from "../image-viewer/image-viewer.js";
+import i from "../button/button.js";
+import c from "../../common/mixins/localization.js";
+const _ = {
   name: "DtProgressBar",
   props: {
-    progressbarAriaLabel: {
+    ariaLabel: {
       type: String,
       required: !0
     },
@@ -30,21 +31,22 @@ const u = {
   }
 };
 var d = function() {
-  var e = this, t = e._self._c;
-  return t("div", { attrs: { role: "progressbar", "aria-label": e.progressbarAriaLabel, tabindex: "-1", "aria-valuenow": e.progress, "aria-valuemin": "0", "aria-valuemax": "100" } }, [t("svg", { staticClass: "d-recipe-attachment-carousel__progress-bar", style: e.cssVars }, [t("circle", { ref: "progressbarCircle", staticClass: "d-recipe-attachment-carousel__progress-bar-circle", attrs: { r: "8", cx: "12", cy: "12" } }), t("circle", { staticClass: "d-recipe-attachment-carousel__progress-bar-circle", attrs: { r: "8", cx: "12", cy: "12" } })])]);
-}, h = [], p = /* @__PURE__ */ i(
-  u,
+  var e = this, r = e._self._c;
+  return r("div", { attrs: { role: "progressbar", "aria-label": e.ariaLabel, tabindex: "-1", "aria-valuenow": e.progress, "aria-valuemin": "0", "aria-valuemax": "100" } }, [r("svg", { staticClass: "d-recipe-attachment-carousel__progress-bar", style: e.cssVars }, [r("circle", { ref: "progressbarCircle", staticClass: "d-recipe-attachment-carousel__progress-bar-circle", attrs: { r: "8", cx: "12", cy: "12" } }), r("circle", { staticClass: "d-recipe-attachment-carousel__progress-bar-circle", attrs: { r: "8", cx: "12", cy: "12" } })])]);
+}, h = [], p = /* @__PURE__ */ o(
+  _,
   d,
   h
 );
-const f = p.exports, _ = {
+const f = p.exports, g = {
   name: "DtImageCarousel",
   components: {
-    DtImageViewer: m,
-    DtButton: o,
-    DtIconClose: c,
+    DtImageViewer: u,
+    DtButton: i,
+    DtIconClose: n,
     DtProgressBar: f
   },
+  mixins: [c],
   props: {
     mediaItem: {
       type: Object,
@@ -53,18 +55,6 @@ const f = p.exports, _ = {
     index: {
       type: Number,
       required: !0
-    },
-    closeAriaLabel: {
-      type: String,
-      required: !0
-    },
-    clickToOpenAriaLabel: {
-      type: String,
-      required: !0
-    },
-    progressbarAriaLabel: {
-      type: String,
-      required: !0
     }
   },
   emits: [
@@ -76,33 +66,38 @@ const f = p.exports, _ = {
      */
     "remove-media"
   ],
+  computed: {
+    closeButtonTitle() {
+      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
+    }
+  },
   methods: {
-    removeMediaItem(r) {
-      this.$emit("remove-media", r);
+    removeMediaItem(t) {
+      this.$emit("remove-media", t);
     }
   }
 };
-var g = function() {
-  var e = this, t = e._self._c;
-  return t("li", { staticClass: "d-recipe-attachment-carousel__image" }, [t("dt-image-viewer", { attrs: { "image-button-class": "d-recipe-attachment-carousel__image-viewer", "image-src": e.mediaItem.path, "image-alt": e.mediaItem.altText, "close-aria-label": e.closeAriaLabel, "aria-label": e.clickToOpenAriaLabel } }), t("div", { staticClass: "d-recipe-attachment-carousel__image-top-right" }, [e.mediaItem.isUploading ? t("dt-progress-bar", { staticClass: "d-recipe-attachment-carousel__image-progress-bar", attrs: { progress: e.mediaItem.progress, "progressbar-aria-label": e.progressbarAriaLabel } }) : e._e(), t("dt-button", { staticClass: "d-recipe-attachment-carousel__image-close-button", attrs: { id: `closeButton-${e.index}`, tabindex: "0", circle: "", size: "xs", importance: "clear", "aria-label": e.closeAriaLabel }, on: { click: function(a) {
+var A = function() {
+  var e = this, r = e._self._c;
+  return r("li", { staticClass: "d-recipe-attachment-carousel__image" }, [r("dt-image-viewer", { attrs: { "image-button-class": "d-recipe-attachment-carousel__image-viewer", "image-src": e.mediaItem.path, "image-alt": e.mediaItem.altText, "aria-label": e.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL") } }), r("div", { staticClass: "d-recipe-attachment-carousel__image-top-right" }, [e.mediaItem.isUploading ? r("dt-progress-bar", { staticClass: "d-recipe-attachment-carousel__image-progress-bar", attrs: { progress: e.mediaItem.progress, "aria-label": e.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL") } }) : e._e(), r("dt-button", { staticClass: "d-recipe-attachment-carousel__image-close-button", attrs: { id: `closeButton-${e.index}`, tabindex: "0", circle: "", size: "xs", importance: "clear", "aria-label": e.closeButtonTitle, title: e.closeButtonTitle }, on: { click: function(s) {
     return e.removeMediaItem(e.index);
   } }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("dt-icon-close", { attrs: { size: "200" } })];
+    return [r("dt-icon-close", { attrs: { size: "200" } })];
   }, proxy: !0 }]) })], 1)], 1);
-}, b = [], w = /* @__PURE__ */ i(
-  _,
+}, v = [], w = /* @__PURE__ */ o(
   g,
-  b
+  A,
+  v
 );
-const v = w.exports, A = 64, L = {
+const L = w.exports, C = 64, I = {
   name: "DtRecipeAttachmentCarousel",
   components: {
-    DtButton: o,
+    DtButton: i,
     DtIconArrowRight: l,
-    DtIconArrowLeft: n,
-    DtImageCarousel: v
+    DtIconArrowLeft: m,
+    DtImageCarousel: L
   },
-  mixins: [],
+  mixins: [c],
   /* 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
@@ -121,26 +116,6 @@ const v = w.exports, A = 64, L = {
     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: [
@@ -162,33 +137,33 @@ const v = w.exports, A = 64, L = {
   },
   computed: {
     filteredMediaList() {
-      return this.mediaList.filter((r) => r.type === "image" || r.type === "video");
+      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(r) {
-      r.currentTarget.scrollIntoView({ behavior: "smooth" });
+    onItemFocus(t) {
+      t.currentTarget.scrollIntoView({ behavior: "smooth" });
     },
-    mediaComponent(r) {
-      switch (r) {
+    mediaComponent(t) {
+      switch (t) {
         case "image":
           return "dt-image-carousel";
         default:
           return null;
       }
     },
-    removeMediaItem(r) {
-      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + A, this.$emit("remove-media", r);
+    removeMediaItem(t) {
+      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + C, this.$emit("remove-media", t);
     },
-    closeButton(r, e) {
-      this.showCloseButton[e] = r;
+    closeButton(t, e) {
+      this.showCloseButton[e] = t;
     },
     handleScroll() {
-      const r = this.$refs.carousel;
-      this.showLeftArrow = r.scrollLeft > 0, this.showRightArrow = r.scrollLeft + r.clientWidth !== r.scrollWidth;
+      const t = this.$refs.carousel;
+      this.showLeftArrow = t.scrollLeft > 0, this.showRightArrow = t.scrollLeft + t.clientWidth !== t.scrollWidth;
     },
     leftScroll() {
       this.$refs.carousel.scrollTo({
@@ -204,24 +179,24 @@ const v = w.exports, A = 64, L = {
     }
   }
 };
-var y = function() {
-  var e = this, t = e._self._c;
-  return t("div", { staticClass: "d-recipe-attachment-carousel", attrs: { role: "presentation" } }, [e.mediaList.length > 0 ? t("ul", { ref: "carousel", staticClass: "d-recipe-attachment-carousel__media-list", on: { scroll: e.handleScroll } }, e._l(e.filteredMediaList, function(a, s) {
-    return t(e.mediaComponent(a.type), { key: `media-${s}`, tag: "component", attrs: { index: s, "media-item": a, "close-aria-label": e.closeAriaLabel, "click-to-open-aria-label": e.clickToOpenAriaLabel, "progressbar-aria-label": e.progressbarAriaLabel }, on: { "remove-media": function(x) {
-      return e.removeMediaItem(s);
+var b = function() {
+  var e = this, r = e._self._c;
+  return r("div", { staticClass: "d-recipe-attachment-carousel", attrs: { role: "presentation" } }, [e.mediaList.length > 0 ? r("ul", { ref: "carousel", staticClass: "d-recipe-attachment-carousel__media-list", on: { scroll: e.handleScroll } }, e._l(e.filteredMediaList, function(s, a) {
+    return r(e.mediaComponent(s.type), { key: `media-${a}`, tag: "component", attrs: { index: a, "media-item": s }, on: { "remove-media": function(T) {
+      return e.removeMediaItem(a);
     }, focusin: e.onItemFocus } });
-  }), 1) : e._e(), t("dt-button", { directives: [{ name: "show", rawName: "v-show", value: e.showLeftArrow, expression: "showLeftArrow" }], staticClass: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left", attrs: { tabindex: "-1", "aria-label": e.leftArrowAriaLabel, circle: "", size: "xs", importance: "clear" }, on: { click: e.leftScroll }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("dt-icon-arrow-left", { attrs: { size: "100" } })];
-  }, proxy: !0 }]) }), t("dt-button", { directives: [{ name: "show", rawName: "v-show", value: e.showRightArrow, expression: "showRightArrow" }], staticClass: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right", attrs: { tabindex: "-1", "aria-label": e.rightArrowAriaLabel, circle: "", size: "xs", importance: "clear" }, on: { click: e.rightScroll }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("dt-icon-arrow-right", { attrs: { size: "100" } })];
+  }), 1) : e._e(), r("dt-button", { directives: [{ name: "show", rawName: "v-show", value: e.showLeftArrow, expression: "showLeftArrow" }], staticClass: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left", attrs: { tabindex: "-1", "aria-label": e.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"), circle: "", size: "xs", importance: "clear" }, on: { click: e.leftScroll }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [r("dt-icon-arrow-left", { attrs: { size: "100" } })];
+  }, proxy: !0 }]) }), r("dt-button", { directives: [{ name: "show", rawName: "v-show", value: e.showRightArrow, expression: "showRightArrow" }], staticClass: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right", attrs: { tabindex: "-1", "aria-label": e.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"), circle: "", size: "xs", importance: "clear" }, on: { click: e.rightScroll }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [r("dt-icon-arrow-right", { attrs: { size: "100" } })];
   }, proxy: !0 }]) })], 1);
-}, C = [], $ = /* @__PURE__ */ i(
-  L,
-  y,
-  C
+}, $ = [], R = /* @__PURE__ */ o(
+  I,
+  b,
+  $
 );
-const q = $.exports;
+const S = R.exports;
 export {
-  q as default
+  S as default
 };
 //# sourceMappingURL=attachment-carousel.js.map

package/dist/vue2/lib/attachment-carousel/attachment-carousel.js.map

@@ -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  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/vue2';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\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/vue2';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    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","DtImageViewer","DtButton","DtIconClose","DtProgressBar","index","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel"],"mappings":"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"}
+{"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  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/vue2';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  mixins: [DtLocalizationMixin],\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  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/vue2';\nimport { DtButton } from '@/components/button';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  mixins: [DtLocalizationMixin],\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    };\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","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DtLocalizationMixin","index","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel"],"mappings":"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"}

package/dist/vue2/lib/banner/banner.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../common/mixins/modal.cjs"),o=require("../../common/utils/index.cjs"),a=require("../../common/mixins/sr-only-close-button.cjs"),s=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l=require("../notice/notice-icon.cjs"),d=require("../notice/notice-content.cjs"),c=require("../notice/notice-action.cjs"),u=require("../notice/notice-constants.cjs"),f={name:"DtBanner",components:{DtNoticeIcon:l.default,DtNoticeContent:d.default,DtNoticeAction:c.default},mixins:[r.default,a.default],props:{titleId:{type:String,default(){return o.default.getUniqueString()}},contentId:{type:String,default(){return o.default.getUniqueString()}},title:{type:String,default:""},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:"base",validate(t){return u.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)}}};var _=function(){var e=this,n=e._self._c;return n("aside",{class:e.bannerClass,style:e.bannerBackgroundImage,on:{keydown:function(i){return!i.type.indexOf("key")&&e._k(i.keyCode,"tab",9,i.key,"Tab")?null:e.trapFocus.apply(null,arguments)}}},[n("div",{staticClass:"d-banner__dialog",class:e.dialogClass,attrs:{role:e.role,"aria-labelledby":e.titleId,"aria-describedby":e.contentId}},[e.hideIcon?e._e():n("dt-notice-icon",e._g({attrs:{kind:e.kind}},e.$listeners),[e._t("icon")],2),n("dt-notice-content",e._g({attrs:{"title-id":e.titleId,"content-id":e.contentId,title:e.title},scopedSlots:e._u([{key:"titleOverride",fn:function(){return[e._t("titleOverride")]},proxy:!0}],null,!0)},e.$listeners),[e._t("default")],2),n("dt-notice-action",e._g({attrs:{"hide-action":e.hideAction,"hide-close":e.hideClose,"close-button-props":e.closeButtonProps,"visually-hidden-close":e.visuallyHiddenClose,"visually-hidden-close-label":e.visuallyHiddenCloseLabel}},e.$listeners),[e._t("action")],2)],1)])},p=[],b=s.n(f,_,p);const g=b.exports;exports.default=g;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../common/mixins/modal.cjs"),r=require("../../common/utils/index.cjs"),o=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s=require("../notice/notice-icon.cjs"),d=require("../notice/notice-content.cjs"),l=require("../notice/notice-action.cjs"),c=require("../notice/notice-constants.cjs"),u={name:"DtBanner",components:{DtNoticeIcon:s.default,DtNoticeContent:d.default,DtNoticeAction:l.default},mixins:[a.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 c.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)}}};var f=function(){var e=this,n=e._self._c;return n("aside",{class:e.bannerClass,style:e.bannerBackgroundImage,on:{keydown:function(i){return!i.type.indexOf("key")&&e._k(i.keyCode,"tab",9,i.key,"Tab")?null:e.trapFocus.apply(null,arguments)}}},[n("div",{staticClass:"d-banner__dialog",class:e.dialogClass,attrs:{role:e.role,"aria-labelledby":e.titleId,"aria-describedby":e.contentId}},[e.hideIcon?e._e():n("dt-notice-icon",e._g({attrs:{kind:e.kind}},e.$listeners),[e._t("icon")],2),n("dt-notice-content",e._g({attrs:{"title-id":e.titleId,"content-id":e.contentId,title:e.title},scopedSlots:e._u([{key:"titleOverride",fn:function(){return[e._t("titleOverride")]},proxy:!0}],null,!0)},e.$listeners),[e._t("default")],2),n("dt-notice-action",e._g({attrs:{"hide-action":e.hideAction,"hide-close":e.hideClose}},e.$listeners),[e._t("action")],2)],1)])},_=[],g=o.n(u,f,_);const p=g.exports;exports.default=p;
 //# sourceMappingURL=banner.cjs.map

package/dist/vue2/lib/banner/banner.cjs.map

@@ -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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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  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"],"mappings":"+dA8DAA,EAAA,CACA,KAAA,WAEA,WAAA,CACA,aAAAC,EAAA,QACA,gBAAAC,EAAA,QACA,eAAAC,EAAA,OACA,EAEA,OAAA,CAAAC,EAAA,QAAAC,SAAA,EAEA,MAAA,CAKA,QAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,UAAA,gBAAA,CAAA,CACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAA,UAAA,gBAAA,CAAA,CACA,EAKA,MAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,OACA,SAAAC,EAAA,CACA,OAAAC,EAAA,aAAA,SAAAD,CAAA,CACA,CACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,KAAA,CAAA,EACA,EAMA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,gBAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,eAAA,CACA,KAAA,OACA,QAAA,OACA,CACA,EAEA,MAAA,CAMA,OACA,EAEA,SAAA,CACA,MAAA,CACA,OAAA,KAAA,UAAA,cAAA,QACA,EAEA,aAAA,CASA,MAAA,CACA,WATA,CACA,MAAA,kBACA,KAAA,iBACA,QAAA,oBACA,QAAA,oBACA,KAAA,gBACA,EAIA,KAAA,IAAA,EACA,CACA,sBAAA,KAAA,UACA,mBAAA,KAAA,MACA,CACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,kBAAA,GAAA,KAEA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA,GACA,CACA,EAEA,SAAA,CACA,KAAA,WACA,KAAA,kBAAA,CAEA,EAEA,QAAA,CACA,UAAAE,EAAA,CACA,KAAA,WACA,KAAA,qBAAAA,CAAA,CAEA,CACA,CACA"}
+{"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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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  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"],"mappings":"qaA0DAA,EAAA,CACA,KAAA,WAEA,WAAA,CACA,aAAAC,EAAA,QACA,gBAAAC,EAAA,QACA,eAAAC,EAAA,OACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,MAAA,CAKA,QAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,UAAA,gBAAA,CAAA,CACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAA,UAAA,gBAAA,CAAA,CACA,EAKA,MAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,OAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,OACA,SAAAC,EAAA,CACA,OAAAC,EAAA,aAAA,SAAAD,CAAA,CACA,CACA,EAMA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,gBAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,eAAA,CACA,KAAA,OACA,QAAA,OACA,CACA,EAEA,MAAA,CAMA,OACA,EAEA,SAAA,CACA,MAAA,CACA,OAAA,KAAA,UAAA,cAAA,QACA,EAEA,aAAA,CASA,MAAA,CACA,WATA,CACA,MAAA,kBACA,KAAA,iBACA,QAAA,oBACA,QAAA,oBACA,KAAA,gBACA,EAIA,KAAA,IAAA,EACA,CACA,sBAAA,KAAA,UACA,mBAAA,KAAA,MACA,CACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,kBAAA,GAAA,KAEA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA,GACA,CACA,EAEA,SAAA,CACA,KAAA,WACA,KAAA,kBAAA,CAEA,EAEA,QAAA,CACA,UAAAE,EAAA,CACA,KAAA,WACA,KAAA,qBAAAA,CAAA,CAEA,CACA,CACA"}

package/dist/vue2/lib/banner/banner.js

@@ -1,19 +1,18 @@
-import o from "../../common/mixins/modal.js";
+import a from "../../common/mixins/modal.js";
 import i from "../../common/utils/index.js";
-import a from "../../common/mixins/sr-only-close-button.js";
-import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import l from "../notice/notice-icon.js";
+import { n as o } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import s from "../notice/notice-icon.js";
 import d from "../notice/notice-content.js";
-import c from "../notice/notice-action.js";
-import { NOTICE_KINDS as u } from "../notice/notice-constants.js";
-const p = {
+import l from "../notice/notice-action.js";
+import { NOTICE_KINDS as c } from "../notice/notice-constants.js";
+const u = {
   name: "DtBanner",
   components: {
-    DtNoticeIcon: l,
+    DtNoticeIcon: s,
     DtNoticeContent: d,
-    DtNoticeAction: c
+    DtNoticeAction: l
   },
-  mixins: [o, a],
+  mixins: [a],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -67,17 +66,10 @@ const p = {
     kind: {
       type: String,
       default: "base",
-      validate(t) {
-        return u.includes(t);
+      validate(e) {
+        return c.includes(e);
       }
     },
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
     /**
      * Hides the close button from the notice
      * @values true, false
@@ -164,25 +156,25 @@ const p = {
     this.important && this.focusFirstElement();
   },
   methods: {
-    trapFocus(t) {
-      this.important && this.focusTrappedTabPress(t);
+    trapFocus(e) {
+      this.important && this.focusTrappedTabPress(e);
     }
   }
 };
-var f = function() {
-  var e = this, n = e._self._c;
-  return n("aside", { class: e.bannerClass, style: e.bannerBackgroundImage, on: { keydown: function(r) {
-    return !r.type.indexOf("key") && e._k(r.keyCode, "tab", 9, r.key, "Tab") ? null : e.trapFocus.apply(null, arguments);
-  } } }, [n("div", { staticClass: "d-banner__dialog", class: e.dialogClass, attrs: { role: e.role, "aria-labelledby": e.titleId, "aria-describedby": e.contentId } }, [e.hideIcon ? e._e() : n("dt-notice-icon", e._g({ attrs: { kind: e.kind } }, e.$listeners), [e._t("icon")], 2), n("dt-notice-content", e._g({ attrs: { "title-id": e.titleId, "content-id": e.contentId, title: e.title }, scopedSlots: e._u([{ key: "titleOverride", fn: function() {
-    return [e._t("titleOverride")];
-  }, proxy: !0 }], null, !0) }, e.$listeners), [e._t("default")], 2), n("dt-notice-action", e._g({ attrs: { "hide-action": e.hideAction, "hide-close": e.hideClose, "close-button-props": e.closeButtonProps, "visually-hidden-close": e.visuallyHiddenClose, "visually-hidden-close-label": e.visuallyHiddenCloseLabel } }, e.$listeners), [e._t("action")], 2)], 1)]);
-}, m = [], g = /* @__PURE__ */ s(
+var p = function() {
+  var t = this, n = t._self._c;
+  return n("aside", { class: t.bannerClass, style: t.bannerBackgroundImage, on: { keydown: function(r) {
+    return !r.type.indexOf("key") && t._k(r.keyCode, "tab", 9, r.key, "Tab") ? null : t.trapFocus.apply(null, arguments);
+  } } }, [n("div", { staticClass: "d-banner__dialog", class: t.dialogClass, attrs: { role: t.role, "aria-labelledby": t.titleId, "aria-describedby": t.contentId } }, [t.hideIcon ? t._e() : n("dt-notice-icon", t._g({ attrs: { kind: t.kind } }, t.$listeners), [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
+    return [t._t("titleOverride")];
+  }, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default")], 2), n("dt-notice-action", t._g({ attrs: { "hide-action": t.hideAction, "hide-close": t.hideClose } }, t.$listeners), [t._t("action")], 2)], 1)]);
+}, f = [], m = /* @__PURE__ */ o(
+  u,
   p,
-  f,
-  m
+  f
 );
-const v = g.exports;
+const C = m.exports;
 export {
-  v as default
+  C as default
 };
 //# sourceMappingURL=banner.js.map

package/dist/vue2/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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  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"],"mappings":";;;;;;;;AA8DA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,GAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,EAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,EAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AASA,aAAA;AAAA,QACA;AAAA,QATA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,SAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,QACA,EAIA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,oBAAA,KAAA,OAEA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,KAAA,aACA,KAAA,kBAAA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA,IACA,UAAAE,GAAA;AACA,MAAA,KAAA,aACA,KAAA,qBAAAA,CAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}
+{"version":3,"file":"banner.js","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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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        v-on=\"$listeners\"\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  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"],"mappings":";;;;;;;AA0DA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,EAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,EAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,OAAA;AACA,aAAA,KAAA,YAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA;AASA,aAAA;AAAA,QACA;AAAA,QATA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,SAAA;AAAA,UACA,SAAA;AAAA,UACA,MAAA;AAAA,QACA,EAIA,KAAA,IAAA;AAAA,QACA;AAAA,UACA,uBAAA,KAAA;AAAA,UACA,oBAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,oBAAA,KAAA,OAEA,yBAAA,KAAA,eAAA;AAAA,iCACA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,KAAA,aACA,KAAA,kBAAA;AAAA,EAEA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA,GAAA;AACA,MAAA,KAAA,aACA,KAAA,qBAAA,CAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}