@dialpad/dialtone 9.133.0-next.2 → 9.134.0

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

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

package/dist/vue3/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  compatConfig: { MODE: 3 },\n  name: 'DtProgressBar',\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"d-recipe-attachment-carousel__progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n    </svg>\n  </div>\n</template>\n","<template>\n  <li\n    class=\"d-recipe-attachment-carousel__image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"d-recipe-attachment-carousel__image-top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"d-recipe-attachment-carousel__image-progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"d-recipe-attachment-carousel__image-close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeButtonTitle\"\n        :title=\"closeButtonTitle\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    class=\"d-recipe-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"d-recipe-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","_component_dt_icon_arrow_right"],"mappings":"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"}
+{"version":3,"file":"attachment-carousel.cjs","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtProgressBar',\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"d-recipe-attachment-carousel__progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n    </svg>\n  </div>\n</template>\n","<template>\n  <li\n    class=\"d-recipe-attachment-carousel__image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"d-recipe-attachment-carousel__image-top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"d-recipe-attachment-carousel__image-progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"d-recipe-attachment-carousel__image-close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeButtonTitle\"\n        :title=\"closeButtonTitle\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    class=\"d-recipe-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"d-recipe-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","_component_dt_icon_arrow_right"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import { DtIconClose as v, DtIconArrowRight as E, DtIconArrowLeft as T } from "@dialpad/dialtone-icons/vue3";
+import { DtIconClose as v, DtIconArrowLeft as E, DtIconArrowRight as T } from "@dialpad/dialtone-icons/vue3";
 import { DialtoneLocalization as L } from "../../localization/index.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as R, createElementVNode as f, resolveComponent as s, createVNode as c, createBlock as b, createCommentVNode as C, withCtx as h, Fragment as D, renderList as x, resolveDynamicComponent as O, withDirectives as A, vShow as w } from "vue";
+import { createElementBlock as n, openBlock as i, normalizeStyle as R, createElementVNode as f, resolveComponent as s, createVNode as c, createBlock as b, createCommentVNode as C, withCtx as h, withDirectives as A, Fragment as D, renderList as x, resolveDynamicComponent as O, vShow as w } from "vue";
 import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import B from "../image-viewer/image-viewer.js";
 import I from "../button/button.js";
+import B from "../image-viewer/image-viewer.js";
 const y = {
   compatConfig: { MODE: 3 },
   name: "DtProgressBar",
@@ -145,8 +145,8 @@ const U = /* @__PURE__ */ p(W, [["render", F]]), G = 64, H = {
   name: "DtRecipeAttachmentCarousel",
   components: {
     DtButton: I,
-    DtIconArrowRight: E,
-    DtIconArrowLeft: T,
+    DtIconArrowRight: T,
+    DtIconArrowLeft: E,
     DtImageCarousel: U
   },
   /* inheritAttrs: false is generally an option we want to set on library

package/dist/vue3/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  compatConfig: { MODE: 3 },\n  name: 'DtProgressBar',\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"d-recipe-attachment-carousel__progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n    </svg>\n  </div>\n</template>\n","<template>\n  <li\n    class=\"d-recipe-attachment-carousel__image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"d-recipe-attachment-carousel__image-top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"d-recipe-attachment-carousel__image-progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"d-recipe-attachment-carousel__image-close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeButtonTitle\"\n        :title=\"closeButtonTitle\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    class=\"d-recipe-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"d-recipe-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","_component_dt_icon_arrow_right"],"mappings":"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"}
+{"version":3,"file":"attachment-carousel.js","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtProgressBar',\n  props: {\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"d-recipe-attachment-carousel__progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n    </svg>\n  </div>\n</template>\n","<template>\n  <li\n    class=\"d-recipe-attachment-carousel__image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"d-recipe-attachment-carousel__image-top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"d-recipe-attachment-carousel__image-progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"d-recipe-attachment-carousel__image-close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeButtonTitle\"\n        :title=\"closeButtonTitle\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-close\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    class=\"d-recipe-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"d-recipe-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","_component_dt_icon_arrow_right"],"mappings":"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"}

package/dist/vue3/lib/avatar/avatar-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-constants.cjs","sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '000',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n"],"names":["AVATAR_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_ICON_SIZES","AVATAR_COLORS","AVATAR_RANDOM_COLORS","AVATAR_GROUP_VALIDATOR","group","avatar_constants"],"mappings":"4GAAY,MAACA,EAAwB,CACnC,GAAI,eACJ,GAAI,eACJ,GAAI,eACJ,GAAI,eACJ,GAAI,cACN,EAEaC,EAAwB,CACnC,QAAS,GACT,KAAM,iBACN,SAAU,oBACZ,EAEaC,EAAiC,CAC5C,GAAI,yBACJ,GAAI,wBACN,EAEaC,EAAyB,CACpC,KAAM,GACN,KAAM,OACN,KAAM,OACN,QAAS,UACT,OAAQ,QACV,EAEaC,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEaC,EAAgB,CAC3B,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,MACF,EAGaC,EAAuBD,EAAc,MAAM,CAAC,EAE5CE,EAA0BC,GAAUA,EAAQ,EAE1CC,EAAA,CACb,sBAAAT,EACA,sBAAAC,EACA,+BAAAC,EACA,uBAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF"}
+{"version":3,"file":"avatar-constants.cjs","sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '000',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n"],"names":["AVATAR_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_ICON_SIZES","AVATAR_COLORS","AVATAR_RANDOM_COLORS","AVATAR_GROUP_VALIDATOR","group","avatar_constants"],"mappings":"4GAAY,MAACA,EAAwB,CACnC,GAAI,eACJ,GAAI,eACJ,GAAI,eACJ,GAAI,eACJ,GAAI,cACN,EAEaC,EAAwB,CACnC,QAAS,GACT,KAAM,iBACN,SAAU,oBACZ,EAEaC,EAAiC,CAC5C,GAAI,yBACJ,GAAI,wBACN,EAEaC,EAAyB,CACpC,KAAM,GACN,KAAM,OACN,KAAM,OACN,QAAS,UACT,OAAQ,QACV,EAEaC,EAAoB,CAC/B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEaC,EAAgB,CAC3B,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,MACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,OACA,MACF,EAGaC,EAAuBD,EAAc,MAAM,CAAC,EAE5CE,EAA0BC,GAAUA,EAAQ,EAEzDC,EAAe,CACb,sBAAAT,EACA,sBAAAC,EACA,+BAAAC,EACA,uBAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF"}

package/dist/vue3/lib/avatar/avatar-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-constants.js","sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '000',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n"],"names":["AVATAR_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_ICON_SIZES","AVATAR_COLORS","AVATAR_RANDOM_COLORS","AVATAR_GROUP_VALIDATOR","group","avatar_constants"],"mappings":"AAAY,MAACA,IAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAwB;AAAA,EACnC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AACZ,GAEaC,IAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAyB;AAAA,EACpC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AACV,GAEaC,IAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAAuBD,EAAc,MAAM,CAAC,GAE5CE,IAAyB,CAACC,MAAUA,IAAQ,GAE1CC,IAAA;AAAA,EACb,uBAAAT;AAAA,EACA,uBAAAC;AAAA,EACA,gCAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,wBAAAC;AACF;"}
+{"version":3,"file":"avatar-constants.js","sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n  xs: 'd-avatar--xs',\n  sm: 'd-avatar--sm',\n  md: 'd-avatar--md',\n  lg: 'd-avatar--lg',\n  xl: 'd-avatar--xl',\n};\n\nexport const AVATAR_KIND_MODIFIERS = {\n  default: '',\n  icon: 'd-avatar__icon',\n  initials: 'd-avatar__initials',\n};\n\nexport const AVATAR_PRESENCE_SIZE_MODIFIERS = {\n  md: 'd-avatar__presence--md',\n  lg: 'd-avatar__presence--lg',\n};\n\nexport const AVATAR_PRESENCE_STATES = {\n  NONE: '',\n  BUSY: 'busy',\n  AWAY: 'away',\n  OFFLINE: 'offline',\n  ACTIVE: 'active',\n};\n\nexport const AVATAR_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '300',\n  lg: '500',\n  xl: '600',\n};\n\nexport const AVATAR_COLORS = [\n  '000',\n  '100',\n  '200',\n  '300',\n  '400',\n  '500',\n  '600',\n  '700',\n  '800',\n  '900',\n  '1000',\n  '1100',\n  '1200',\n  '1300',\n  '1400',\n  '1500',\n  '1600',\n  '1700',\n  '1800',\n];\n\n// We do not use the color '000' (grey) in the randomized avatar colors, but it can still be set manually.\nexport const AVATAR_RANDOM_COLORS = AVATAR_COLORS.slice(1);\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\nexport default {\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_ICON_SIZES,\n  AVATAR_COLORS,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n};\n"],"names":["AVATAR_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_ICON_SIZES","AVATAR_COLORS","AVATAR_RANDOM_COLORS","AVATAR_GROUP_VALIDATOR","group","avatar_constants"],"mappings":"AAAY,MAACA,IAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAwB;AAAA,EACnC,SAAS;AAAA,EACT,MAAM;AAAA,EACN,UAAU;AACZ,GAEaC,IAAiC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAyB;AAAA,EACpC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AACV,GAEaC,IAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAAuBD,EAAc,MAAM,CAAC,GAE5CE,IAAyB,CAACC,MAAUA,IAAQ,GAEzDC,IAAe;AAAA,EACb,uBAAAT;AAAA,EACA,uBAAAC;AAAA,EACA,gCAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,wBAAAC;AACF;"}

package/dist/vue3/lib/avatar/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","e","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}

package/dist/vue3/lib/avatar/avatar.js

@@ -1,8 +1,8 @@
-import { getUniqueString as y, hasSlotContent as d, getRandomElement as g } from "../../common/utils/index.js";
-import { AVATAR_SIZE_MODIFIERS as o, AVATAR_PRESENCE_STATES as u, AVATAR_GROUP_VALIDATOR as m, AVATAR_KIND_MODIFIERS as _, AVATAR_PRESENCE_SIZE_MODIFIERS as S, AVATAR_ICON_SIZES as I, AVATAR_RANDOM_COLORS as A } from "./avatar-constants.js";
+import { getRandomElement as y, hasSlotContent as d, getUniqueString as g } from "../../common/utils/index.js";
+import { AVATAR_GROUP_VALIDATOR as u, AVATAR_PRESENCE_STATES as m, AVATAR_SIZE_MODIFIERS as o, AVATAR_ICON_SIZES as _, AVATAR_PRESENCE_SIZE_MODIFIERS as S, AVATAR_KIND_MODIFIERS as I, AVATAR_RANDOM_COLORS as A } from "./avatar-constants.js";
 import { ICON_SIZE_MODIFIERS as E } from "../icon/icon-constants.js";
 import { extractInitialsFromName as C } from "./utils.js";
-import { resolveComponent as p, openBlock as r, createBlock as f, resolveDynamicComponent as O, normalizeClass as l, normalizeStyle as k, withCtx as R, createElementVNode as b, createElementBlock as s, renderSlot as v, toDisplayString as c, createCommentVNode as n, mergeProps as T } from "vue";
+import { resolveComponent as p, createBlock as f, openBlock as r, resolveDynamicComponent as O, normalizeStyle as k, normalizeClass as l, withCtx as R, createElementVNode as b, createElementBlock as s, createCommentVNode as n, renderSlot as v, toDisplayString as c, mergeProps as T } from "vue";
 import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import N from "../presence/presence.js";
 const L = {
@@ -17,7 +17,7 @@ const L = {
     id: {
       type: String,
       default() {
-        return y();
+        return g();
       }
     },
     /**
@@ -74,8 +74,8 @@ const L = {
      */
     presence: {
       type: String,
-      default: u.NONE,
-      validator: (e) => Object.values(u).includes(e)
+      default: m.NONE,
+      validator: (e) => Object.values(m).includes(e)
     },
     /**
      * A set of props to be passed into the presence component.
@@ -92,7 +92,7 @@ const L = {
     group: {
       type: Number,
       default: void 0,
-      validator: (e) => m(e)
+      validator: (e) => u(e)
     },
     /**
      * The text that overlays the avatar
@@ -169,9 +169,9 @@ const L = {
   data() {
     return {
       AVATAR_SIZE_MODIFIERS: o,
-      AVATAR_KIND_MODIFIERS: _,
+      AVATAR_KIND_MODIFIERS: I,
       AVATAR_PRESENCE_SIZE_MODIFIERS: S,
-      AVATAR_ICON_SIZES: I,
+      AVATAR_ICON_SIZES: _,
       imageLoadedSuccessfully: null,
       formattedInitials: "",
       initializing: !1,
@@ -206,7 +206,7 @@ const L = {
       ];
     },
     showGroup() {
-      return m(this.group);
+      return u(this.group);
     },
     formattedGroup() {
       return this.group > 99 ? "99+" : this.group;
@@ -258,7 +258,7 @@ const L = {
       this.validatedSize === "xs" ? this.formattedInitials = "" : this.validatedSize === "sm" ? this.formattedInitials = e[0] : this.formattedInitials = e;
     },
     getColor() {
-      return this.color ?? g(A, this.seed);
+      return this.color ?? y(A, this.seed);
     },
     _loadedImageEventHandler(e) {
       this.imageLoadedSuccessfully = !0, e.classList.remove("d-d-none");

package/dist/vue3/lib/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../components/avatar/avatar.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"clickable ? 'button' : 'div'\"\n    :id=\"id\"\n    :class=\"avatarClasses\"\n    :style=\"$attrs.style\"\n    data-qa=\"dt-avatar\"\n    @click=\"handleClick\"\n  >\n    <div\n      ref=\"canvas\"\n      :class=\"[\n        canvasClass,\n        'd-avatar__canvas',\n        { 'd-avatar--image-loaded': imageLoadedSuccessfully },\n      ]\"\n    >\n      <img\n        v-if=\"showImage\"\n        ref=\"avatarImage\"\n        class=\"d-avatar__image\"\n        data-qa=\"dt-avatar-image\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n      <div\n        v-else-if=\"isIconType()\"\n        :class=\"[iconClass, AVATAR_KIND_MODIFIERS.icon]\"\n        :aria-label=\"clickable ? iconAriaLabel : ''\"\n        :data-qa=\"iconDataQa\"\n        :role=\"clickable ? 'button' : ''\"\n      >\n        <!-- @slot Slot for avatar icon. It will display if no imageSrc is provided -->\n        <slot\n          name=\"icon\"\n          :icon-size=\"iconSize || AVATAR_ICON_SIZES[size]\"\n        />\n      </div>\n      <span\n        v-else\n        :class=\"[AVATAR_KIND_MODIFIERS.initials]\"\n      >\n        {{ formattedInitials }}\n      </span>\n    </div>\n    <div\n      v-if=\"hasOverlayIcon || overlayText\"\n      :class=\"overlayClasses\"\n    >\n      <!-- @slot Slot for overlay icon. -->\n      <slot\n        v-if=\"hasOverlayIcon\"\n        name=\"overlayIcon\"\n      />\n      <p\n        v-else-if=\"overlayText\"\n        class=\"d-avatar__overlay-text\"\n      >\n        {{ overlayText }}\n      </p>\n    </div>\n    <span\n      v-if=\"showGroup\"\n      class=\"d-avatar__count\"\n      data-qa=\"dt-avatar-count\"\n    >{{ formattedGroup }}</span>\n    <dt-presence\n      v-if=\"presence && !showGroup\"\n      :presence=\"presence\"\n      :class=\"[\n        'd-avatar__presence',\n        AVATAR_PRESENCE_SIZE_MODIFIERS[size],\n      ]\"\n      v-bind=\"presenceProps\"\n      data-qa=\"dt-presence\"\n    />\n  </component>\n</template>\n\n<script>\nimport { getUniqueString, getRandomElement, hasSlotContent } from '@/common/utils';\nimport { DtPresence } from '../presence';\nimport {\n  AVATAR_KIND_MODIFIERS,\n  AVATAR_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_SIZE_MODIFIERS,\n  AVATAR_PRESENCE_STATES,\n  AVATAR_RANDOM_COLORS,\n  AVATAR_GROUP_VALIDATOR,\n  AVATAR_ICON_SIZES,\n} from './avatar_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants.js';\nimport { extractInitialsFromName } from './utils';\n\n/**\n * An avatar is a visual representation of a user or object.\n * @see https://dialtone.dialpad.com/components/avatar.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtAvatar',\n  components: { DtPresence },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id of the avatar content wrapper element\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Pass in a seed to get the random color generation based on that string. For example if you pass in a\n     * user ID as the string it will return the same randomly generated colors every time for that user.\n     */\n    seed: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the avatar background to a specific color. If undefined will randomize the color which can be deterministic\n     * if the seed prop is set.\n     */\n    color: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * The size of the avatar\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (size) => Object.keys(AVATAR_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Used to customize the avatar container\n     */\n    avatarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set classes on the avatar canvas. Wrapper around the core avatar image.\n     */\n    canvasClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Pass through classes. Used to customize the avatar icon\n     */\n    iconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines whether to show the presence indicator for\n     * Avatar - accepts PRESENCE_STATES values: 'busy', 'away', 'offline',\n     * or 'active'. By default, it's null and nothing is shown.\n     * @values null, busy, away, offline, active\n     */\n    presence: {\n      type: String,\n      default: AVATAR_PRESENCE_STATES.NONE,\n      validator: (state) => {\n        return Object.values(AVATAR_PRESENCE_STATES).includes(state);\n      },\n    },\n\n    /**\n     * A set of props to be passed into the presence component.\n     */\n    presenceProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Determines whether to show a group avatar.\n     * Limit to 2 digits max, more than 99 will be rendered as “99+”.\n     * if the number is 1 or less it would just show the regular avatar as if group had not been set.\n     */\n    group: {\n      type: Number,\n      default: undefined,\n      validator: (group) => AVATAR_GROUP_VALIDATOR(group),\n    },\n\n    /**\n     * The text that overlays the avatar\n     */\n    overlayText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Used to customize the avatar overlay\n     */\n    overlayClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Source of the image\n     */\n    imageSrc: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Alt attribute of the image, required if imageSrc is provided.\n     * Can be set to '' (empty string) if the image is described\n     * in text nearby\n     */\n    imageAlt: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Icon size to be displayed on the avatar\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '',\n      validator: (size) => !size || Object.keys(ICON_SIZE_MODIFIERS).includes(size),\n    },\n\n    /**\n     * Full name used to extract initials.\n     */\n    fullName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Makes the avatar focusable and clickable,\n     * emits a click event when clicked.\n     */\n    clickable: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the icon.\n     * To avoid a11y issues, set this prop if clickable and iconName are set.\n     */\n    iconAriaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Avatar click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      AVATAR_SIZE_MODIFIERS,\n      AVATAR_KIND_MODIFIERS,\n      AVATAR_PRESENCE_SIZE_MODIFIERS,\n      AVATAR_ICON_SIZES,\n      imageLoadedSuccessfully: null,\n      formattedInitials: '',\n      initializing: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    hasOverlayIcon () {\n      return hasSlotContent(this.$slots.overlayIcon);\n    },\n\n    iconDataQa () {\n      return 'dt-avatar-icon';\n    },\n\n    avatarClasses () {\n      return [\n        'd-avatar',\n        this.$attrs.class,\n        AVATAR_SIZE_MODIFIERS[this.validatedSize],\n        this.avatarClass,\n        {\n          'd-avatar--group': this.showGroup,\n          [`d-avatar--color-${this.getColor()}`]: !this.isIconType(),\n          'd-avatar--clickable': this.clickable,\n        },\n      ];\n    },\n\n    overlayClasses () {\n      return [\n        'd-avatar__overlay',\n        this.overlayClass,\n        { 'd-avatar__overlay-icon': this.hasOverlayIcon },\n      ];\n    },\n\n    showGroup () {\n      return AVATAR_GROUP_VALIDATOR(this.group);\n    },\n\n    formattedGroup () {\n      return this.group > 99 ? '99+' : this.group;\n    },\n\n    validatedSize () {\n      // TODO: Group only supports xs size for now. Remove this when we support other sizes.\n      return this.group ? 'xs' : this.size;\n    },\n\n    showImage () {\n      return this.imageLoadedSuccessfully !== false && this.imageSrc;\n    },\n  },\n\n  watch: {\n    fullName: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    size: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    group: {\n      immediate: true,\n      handler () {\n        this.formatInitials();\n      },\n    },\n\n    imageSrc (newSrc) {\n      this.imageLoadedSuccessfully = null;\n      if (!newSrc) return;\n\n      this.validateProps();\n      this.setImageListeners();\n    },\n  },\n\n  mounted () {\n    this.validateProps();\n    this.setImageListeners();\n  },\n\n  methods: {\n    isIconType () {\n      return hasSlotContent(this.$slots.icon);\n    },\n\n    async setImageListeners () {\n      await this.$nextTick();\n      const el = this.$refs.avatarImage;\n      if (!el) return;\n\n      el.addEventListener('load', () => this._loadedImageEventHandler(el), { once: true });\n      el.addEventListener('error', () => this._erroredImageEventHandler(el), { once: true });\n    },\n\n    formatInitials () {\n      const initials = extractInitialsFromName(this.fullName);\n\n      if (this.validatedSize === 'xs') {\n        this.formattedInitials = '';\n      } else if (this.validatedSize === 'sm') {\n        this.formattedInitials = initials[0];\n      } else {\n        this.formattedInitials = initials;\n      }\n    },\n\n    getColor () {\n      return this.color ?? getRandomElement(AVATAR_RANDOM_COLORS, this.seed);\n    },\n\n    _loadedImageEventHandler (el) {\n      this.imageLoadedSuccessfully = true;\n      el.classList.remove('d-d-none');\n    },\n\n    _erroredImageEventHandler (el) {\n      this.imageLoadedSuccessfully = false;\n      el.classList.add('d-d-none');\n    },\n\n    validateProps () {\n      if (this.imageSrc && this.imageAlt === undefined) {\n        console.error('image-alt required if image-src is provided. Can be set to \"\" (empty string) if the image is described in text nearby');\n      }\n    },\n\n    handleClick (e) {\n      if (!this.clickable) return;\n      this.$emit('click', e);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPresence","getUniqueString","size","AVATAR_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","state","group","AVATAR_GROUP_VALIDATOR","ICON_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_ICON_SIZES","hasSlotContent","newSrc","el","initials","extractInitialsFromName","getRandomElement","AVATAR_RANDOM_COLORS","_hoisted_1","_hoisted_2","_createBlock","_resolveDynamicComponent","$props","_normalizeClass","$options","_normalizeStyle","_ctx","_withCtx","_createElementVNode","$data","_createElementBlock","_renderSlot","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_4","_openBlock","_component_dt_presence","_mergeProps"],"mappings":"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"}

package/dist/vue3/lib/avatar/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../../components/avatar/utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n"],"names":["extractInitialsFromName","fullName","names","_","index","name"],"mappings":"gFAAY,MAACA,EAA2BC,GAAa,CACnD,GAAI,OAAOA,GAAa,UAAY,CAACA,EAAS,KAAI,EAAI,MAAO,GAE7D,MAAMC,EAAQD,EAAS,KAAM,EAAC,MAAM,MAAM,EAE1C,OAAOC,EAAM,SAAW,EACpBA,EAAM,KAAK,EAAE,EAAE,UAAU,EAAG,CAAC,EAC7BA,EAAM,OAAO,CAACC,EAAGC,IAAWA,IAAU,GAAKA,IAAUF,EAAM,OAAS,CAAE,EACrE,IAAIG,GAAQA,EAAK,MAAM,EAAG,CAAC,EAAE,aAAa,EAC1C,KAAK,EAAE,CACd"}
+{"version":3,"file":"utils.cjs","sources":["../../../components/avatar/utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n"],"names":["extractInitialsFromName","fullName","names","_","index","name"],"mappings":"gFAAY,MAACA,EAA2BC,GAAa,CACnD,GAAI,OAAOA,GAAa,UAAY,CAACA,EAAS,KAAI,EAAI,MAAO,GAE7D,MAAMC,EAAQD,EAAS,KAAI,EAAG,MAAM,MAAM,EAE1C,OAAOC,EAAM,SAAW,EACpBA,EAAM,KAAK,EAAE,EAAE,UAAU,EAAG,CAAC,EAC7BA,EAAM,OAAO,CAACC,EAAGC,IAAWA,IAAU,GAAKA,IAAUF,EAAM,OAAS,CAAE,EACrE,IAAIG,GAAQA,EAAK,MAAM,EAAG,CAAC,EAAE,YAAW,CAAE,EAC1C,KAAK,EAAE,CACd"}

package/dist/vue3/lib/avatar/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../components/avatar/utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n"],"names":["extractInitialsFromName","fullName","names","_","index","name"],"mappings":"AAAY,MAACA,IAA0B,CAACC,MAAa;AACnD,MAAI,OAAOA,KAAa,YAAY,CAACA,EAAS,KAAI,EAAI,QAAO;AAE7D,QAAMC,IAAQD,EAAS,KAAM,EAAC,MAAM,MAAM;AAE1C,SAAOC,EAAM,WAAW,IACpBA,EAAM,KAAK,EAAE,EAAE,UAAU,GAAG,CAAC,IAC7BA,EAAM,OAAO,CAACC,GAAGC,MAAWA,MAAU,KAAKA,MAAUF,EAAM,SAAS,CAAE,EACrE,IAAI,CAAAG,MAAQA,EAAK,MAAM,GAAG,CAAC,EAAE,aAAa,EAC1C,KAAK,EAAE;AACd;"}
+{"version":3,"file":"utils.js","sources":["../../../components/avatar/utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n  if (typeof fullName !== 'string' || !fullName.trim()) return '';\n\n  const names = fullName.trim().split(/\\s+/g);\n\n  return names.length === 1\n    ? names.join('').substring(0, 2)\n    : names.filter((_, index) => (index === 0 || index === names.length - 1))\n      .map(name => name.slice(0, 1).toUpperCase())\n      .join('');\n};\n"],"names":["extractInitialsFromName","fullName","names","_","index","name"],"mappings":"AAAY,MAACA,IAA0B,CAACC,MAAa;AACnD,MAAI,OAAOA,KAAa,YAAY,CAACA,EAAS,KAAI,EAAI,QAAO;AAE7D,QAAMC,IAAQD,EAAS,KAAI,EAAG,MAAM,MAAM;AAE1C,SAAOC,EAAM,WAAW,IACpBA,EAAM,KAAK,EAAE,EAAE,UAAU,GAAG,CAAC,IAC7BA,EAAM,OAAO,CAACC,GAAGC,MAAWA,MAAU,KAAKA,MAAUF,EAAM,SAAS,CAAE,EACrE,IAAI,CAAAG,MAAQA,EAAK,MAAM,GAAG,CAAC,EAAE,YAAW,CAAE,EAC1C,KAAK,EAAE;AACd;"}

package/dist/vue3/lib/badge/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      class=\"d-badge__icon-left\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","_createCommentVNode","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_createTextVNode","_toDisplayString","_hoisted_3"],"mappings":"kTAuDKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,CAC9D,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,EACV,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,CACrE,EAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,CACrE,EASD,WAAY,CACV,KAAM,OACN,QAAS,OACT,UAAYA,GAAS,OAAO,KAAKE,4BAA0B,EAAE,SAASF,CAAI,CAC3E,EAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,EACV,EAMD,OAAQ,CACN,KAAM,QACN,QAAS,EACV,EAKD,SAAU,CACR,KAAM,QACN,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,qBAAAC,EAAoB,qBACpB,qBAAAF,EAAoB,gDACpBG,EAA0B,2BAE7B,EAED,SAAU,CACR,aAAe,CACb,OAAOC,iBAAe,KAAK,OAAO,QAAQ,CAC3C,EAED,cAAgB,CACd,OAAOA,iBAAe,KAAK,OAAO,SAAS,CAC5C,EAED,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,YACjC,CACF,EAED,SAAW,CACT,KAAK,cAAa,CACnB,EAED,QAAS,CACP,eAAiB,CACf,KAAK,4BAA2B,EAChC,KAAK,kCAAiC,CACvC,EAED,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,yEAA6E,EAEzF,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,6DAA+D,CAEhF,EAED,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,yFAA6F,EAGzG,KAAK,UACP,QAAQ,MAAM,2EAA2E,EAE5F,CACF,CACH,KA9LA,IAAA,EAcM,MAAM,0BAdZ,IAAA,EAkBM,MAAM,yBAlBZ,IAAA,EAkCM,MAAM,oEAjCVC,EAyCO,mBAAA,OAAA,CAxCJ,MAFLC,EAAAA,eAAA,WAEqCC,EAAA,qBAAqBC,EAAI,IAAA,EAASD,EAAA,qBAAqBC,EAAI,IAAA,EAASD,EAAA,2BAA2BC,EAAU,UAAA,qBAA8BA,EAAM,MAAA,uBAAiCA,EAAQ,QAAA,IAQvN,UAAQ,aAGAA,EAAU,YADlBC,EAAAA,YAAAJ,EAAAA,mBAGE,OAHFK,CAGE,GAfNC,EAAA,mBAAA,GAAA,EAAA,EAiBYC,EAAW,aADnBH,EAAAA,YAAAJ,EAAAA,mBASO,OATPQ,EASO,CAJLC,EAGE,WAAAC,EAAA,OAAA,WAAA,CADC,SAAWP,EAAQ,SAAA,KAvB5BG,EAAA,mBAAA,GAAA,EAAA,EA0BIK,EAAAA,mBAKO,OAAA,CALA,MA1BXV,EAAAA,iCA0BqCE,EAAU,UAAA,CAAA,IAEzCM,EAAAA,WAEOC,sBAFP,IAEO,CA9BbE,EAAAA,gBAAAC,EAAAA,gBA6BWV,EAAI,IAAA,EAAA,CAAA,QAIHI,EAAY,cADpBH,EAAAA,YAAAJ,EAAAA,mBASO,OATPc,EASO,CAJLL,EAGE,WAAAC,EAAA,OAAA,YAAA,CADC,SAAWP,EAAQ,SAAA,KAvC5BG,EAAA,mBAAA,GAAA,EAAA"}
+{"version":3,"file":"badge.cjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n  <span\n    :class=\"[\n      'd-badge',\n      BADGE_TYPE_MODIFIERS[type],\n      BADGE_KIND_MODIFIERS[kind],\n      BADGE_DECORATION_MODIFIERS[decoration],\n      { 'd-badge--subtle': subtle },\n      { 'd-badge--outlined': outlined },\n    ]\"\n    data-qa=\"dt-badge\"\n  >\n    <span\n      v-if=\"decoration\"\n      class=\"d-badge__decorative\"\n    />\n    <span\n      v-if=\"hasLeftIcon\"\n      class=\"d-badge__icon-left\"\n    >\n      <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"leftIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span :class=\"['d-badge__label', labelClass]\">\n      <!-- @slot Slot for badge content, defaults to text prop -->\n      <slot>\n        {{ text }}\n      </slot>\n    </span>\n    <span\n      v-if=\"hasRightIcon\"\n      class=\"d-badge__icon-right\"\n    >\n      <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n      <slot\n        name=\"rightIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n  </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/**\n * A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBadge',\n\n  props: {\n    /**\n     * The size of the left and right icons.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    iconSize: {\n      type: String,\n      default: '200',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Text for the badge content\n     */\n    text: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The kind of badge which determines the styling\n     * @values label, count\n     */\n    kind: {\n      type: String,\n      default: 'label',\n      validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n    },\n\n    /**\n     * Color for the badge background\n     * @values default, info, success, warning, critical, bulletin, ai\n     */\n    type: {\n      type: String,\n      default: 'default',\n      validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Decoration for the badge. This can be only used with kind: label and type: default\n     * with no left and right icons\n     * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n     * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n     * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n     */\n    decoration: {\n      type: String,\n      default: undefined,\n      validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Shows a subtle appearance for the badge\n     * Currently only affects the badge when type is bulletin.\n     */\n    subtle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Outlines the badge with a border\n     */\n    outlined: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      BADGE_TYPE_MODIFIERS,\n      BADGE_KIND_MODIFIERS,\n      BADGE_DECORATION_MODIFIERS,\n    };\n  },\n\n  computed: {\n    hasLeftIcon () {\n      return hasSlotContent(this.$slots.leftIcon);\n    },\n\n    hasRightIcon () {\n      return hasSlotContent(this.$slots.rightIcon);\n    },\n\n    hasIcons () {\n      return this.hasLeftIcon || this.hasRightIcon;\n    },\n  },\n\n  updated () {\n    this.validateProps();\n  },\n\n  methods: {\n    validateProps () {\n      this.validateTypePropCombination();\n      this.validateDecorationPropCombination();\n    },\n\n    validateTypePropCombination () {\n      if (this.type === 'ai' && this.kind === 'count') {\n        console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n      }\n      if (this.type !== 'bulletin' && this.subtle) {\n        console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n      }\n    },\n\n    validateDecorationPropCombination () {\n      if (!this.decoration) return;\n\n      if (this.kind !== 'label' || this.type !== 'default') {\n        console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n      }\n\n      if (this.hasIcons) {\n        console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","kind","BADGE_KIND_MODIFIERS","type","BADGE_TYPE_MODIFIERS","BADGE_DECORATION_MODIFIERS","hasSlotContent","_createElementBlock","_normalizeClass","$data","$props","_openBlock","_hoisted_1","_createCommentVNode","$options","_hoisted_2","_renderSlot","_ctx","_createElementVNode","_createTextVNode","_toDisplayString","_hoisted_3"],"mappings":"kTAuDKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,GAM/D,KAAM,CACJ,KAAM,OACN,QAAS,IAOX,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,GAOtE,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAYE,GAAS,OAAO,KAAKC,sBAAoB,EAAE,SAASD,CAAI,GAUtE,WAAY,CACV,KAAM,OACN,QAAS,OACT,UAAYA,GAAS,OAAO,KAAKE,4BAA0B,EAAE,SAASF,CAAI,GAM5E,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,MAAM,EAC5B,QAAS,IAOX,OAAQ,CACN,KAAM,QACN,QAAS,IAMX,SAAU,CACR,KAAM,QACN,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,qBAAAC,EAAAA,qBACA,qBAAAF,EAAAA,gDACAG,EAAAA,2BAEJ,EAEA,SAAU,CACR,aAAe,CACb,OAAOC,iBAAe,KAAK,OAAO,QAAQ,CAC5C,EAEA,cAAgB,CACd,OAAOA,iBAAe,KAAK,OAAO,SAAS,CAC7C,EAEA,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,YAClC,GAGF,SAAW,CACT,KAAK,cAAa,CACpB,EAEA,QAAS,CACP,eAAiB,CACf,KAAK,4BAA2B,EAChC,KAAK,kCAAiC,CACxC,EAEA,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,yEAA6E,EAEzF,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,6DAA+D,CAEjF,EAEA,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,yFAA6F,EAGzG,KAAK,UACP,QAAQ,MAAM,2EAA2E,EAE7F,EAEJ,KA9LA,IAAA,EAcM,MAAM,0BAdZ,IAAA,EAkBM,MAAM,yBAlBZ,IAAA,EAkCM,MAAM,oEAjCVC,EAAAA,mBAyCO,OAAA,CAxCJ,MAFLC,EAAAA,eAAA,WAEqCC,EAAA,qBAAqBC,EAAA,IAAI,EAASD,EAAA,qBAAqBC,EAAA,IAAI,EAASD,EAAA,2BAA2BC,EAAA,UAAU,qBAA8BA,EAAA,MAAM,uBAAiCA,EAAA,QAAQ,IAQvN,UAAQ,aAGAA,EAAA,YADRC,EAAAA,YAAAJ,EAAAA,mBAGE,OAHFK,CAGE,GAfNC,EAAAA,mBAAA,GAAA,EAAA,EAiBYC,EAAA,aADRH,EAAAA,YAAAJ,EAAAA,mBASO,OATPQ,EASO,CAJLC,EAAAA,WAGEC,EAAA,OAAA,WAAA,CADC,SAAWP,EAAA,QAAQ,CAAA,KAvB5BG,EAAAA,mBAAA,GAAA,EAAA,EA0BIK,EAAAA,mBAKO,OAAA,CALA,MA1BXV,EAAAA,iCA0BqCE,EAAA,UAAU,CAAA,IAEzCM,EAAAA,WAEOC,sBAFP,IAEO,CA9BbE,EAAAA,gBAAAC,EAAAA,gBA6BWV,EAAA,IAAI,EAAA,CAAA,QAIHI,EAAA,cADRH,EAAAA,YAAAJ,EAAAA,mBASO,OATPc,EASO,CAJLL,EAAAA,WAGEC,EAAA,OAAA,YAAA,CADC,SAAWP,EAAA,QAAQ,CAAA,KAvC5BG,EAAAA,mBAAA,GAAA,EAAA"}