npm - @dialpad/dialtone-vue - Versions diffs - 3.218.3 → 3.219.0-next.2 - Mend

@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

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

Files changed (763) hide show

package/dist/dialtone-vue.js.map CHANGED Viewed

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"attachment-carousel.cjs","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<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 <span\n class=\"d-recipe-attachment-carousel__image-progress-bar\"\n >\n <dt-progress-circle\n v-if=\"mediaItem.isUploading\"\n kind=\"brand\"\n size=\"400\"\n :progress=\"mediaItem.progress\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n />\n </span>\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 { DtProgressCircle } from '@/components/progress_circle';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtImageCarousel',\n\n components: {\n DtImageViewer,\n DtButton,\n DtIconClose,\n DtProgressCircle,\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","DtImageViewer","DtButton","DtIconClose","DtProgressCircle","DialtoneLocalization","index","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createElementBlock","_createVNode","_component_dt_image_viewer","$props","$data","_createElementVNode","_createBlock","_component_dt_progress_circle","_component_dt_button","$options","_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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"}
1	+ {"version":3,"file":"attachment-carousel.cjs","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<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 <span\n class=\"d-recipe-attachment-carousel__image-progress-bar\"\n >\n <dt-progress-circle\n v-if=\"mediaItem.isUploading\"\n kind=\"brand\"\n size=\"400\"\n :progress=\"mediaItem.progress\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n />\n </span>\n <dt-button\n :id=\"`closeButton-${index}`\"\n tabindex=\"0\"\n class=\"d-recipe-attachment-carousel__image-close-button\"\n circle\n :size=\"100\"\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/vue';\nimport { DialtoneLocalization } from '@/localization';\n\nimport { DtProgressCircle } from '@/components/progress_circle';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtImageCarousel',\n\n components: {\n DtImageViewer,\n DtButton,\n DtIconClose,\n DtProgressCircle,\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=\"100\"\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=\"100\"\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/vue';\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","DtImageViewer","DtButton","DtIconClose","DtProgressCircle","DialtoneLocalization","index","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createElementBlock","_createVNode","_component_dt_image_viewer","$props","$data","_createElementVNode","_createBlock","_component_dt_progress_circle","_component_dt_button","$options","_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/lib/attachment-carousel/attachment-carousel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { DtIconClose as b, DtIconArrowLeft as v, DtIconArrowRight as R } from "@dialpad/dialtone-icons/vue3";
+import { DtIconClose as b, DtIconArrowLeft as v, DtIconArrowRight as R } from "@dialpad/dialtone-icons/vue";
 import { DialtoneLocalization as g } from "../../localization/index.js";
 import { resolveComponent as a, openBlock as l, createElementBlock as _, createVNode as s, createElementVNode as f, createBlock as w, createCommentVNode as L, withCtx as h, Fragment as T, renderList as D, resolveDynamicComponent as O, withDirectives as p, vShow as A } from "vue";
 import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
@@ -48,18 +48,18 @@ const S = {
       this.$emit("remove-media", e);
     }
   }
-}, x = { class: "d-recipe-attachment-carousel__image" }, N = { class: "d-recipe-attachment-carousel__image-top-right" }, k = { class: "d-recipe-attachment-carousel__image-progress-bar" };
+}, N = { class: "d-recipe-attachment-carousel__image" }, k = { class: "d-recipe-attachment-carousel__image-top-right" }, x = { class: "d-recipe-attachment-carousel__image-progress-bar" };
 function y(e, o, r, E, i, t) {
   const d = a("dt-image-viewer"), n = a("dt-progress-circle"), u = a("dt-icon-close"), c = a("dt-button");
-  return l(), _("li", x, [
+  return l(), _("li", N, [
     s(d, {
       "image-button-class": "d-recipe-attachment-carousel__image-viewer",
       "image-src": r.mediaItem.path,
       "image-alt": r.mediaItem.altText,
       "aria-label": i.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")
     }, null, 8, ["image-src", "image-alt", "aria-label"]),
-    f("div", N, [
-      f("span", k, [
+    f("div", k, [
+      f("span", x, [
         r.mediaItem.isUploading ? (l(), w(n, {
           key: 0,
           kind: "brand",
@@ -73,7 +73,7 @@ function y(e, o, r, E, i, t) {
         tabindex: "0",
         class: "d-recipe-attachment-carousel__image-close-button",
         circle: "",
-        size: "xs",
+        size: 100,
         importance: "clear",
         "aria-label": t.closeButtonTitle,
         title: t.closeButtonTitle,
@@ -203,7 +203,7 @@ function U(e, o, r, E, i, t) {
       "aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),
       class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",
       circle: "",
-      size: "xs",
+      size: 100,
       importance: "clear",
       onClick: t.leftScroll
     }, {
@@ -219,7 +219,7 @@ function U(e, o, r, E, i, t) {
       "aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),
       class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",
       circle: "",
-      size: "xs",
+      size: 100,
       importance: "clear",
       onClick: t.rightScroll
     }, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"attachment-carousel.js","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<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 <span\n class=\"d-recipe-attachment-carousel__image-progress-bar\"\n >\n <dt-progress-circle\n v-if=\"mediaItem.isUploading\"\n kind=\"brand\"\n size=\"400\"\n :progress=\"mediaItem.progress\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n />\n </span>\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 { DtProgressCircle } from '@/components/progress_circle';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtImageCarousel',\n\n components: {\n DtImageViewer,\n DtButton,\n DtIconClose,\n DtProgressCircle,\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","DtImageViewer","DtButton","DtIconClose","DtProgressCircle","DialtoneLocalization","index","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createElementBlock","_createVNode","_component_dt_image_viewer","$props","$data","_createElementVNode","_createBlock","_component_dt_progress_circle","_component_dt_button","$options","_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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"}
1	+ {"version":3,"file":"attachment-carousel.js","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<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 <span\n class=\"d-recipe-attachment-carousel__image-progress-bar\"\n >\n <dt-progress-circle\n v-if=\"mediaItem.isUploading\"\n kind=\"brand\"\n size=\"400\"\n :progress=\"mediaItem.progress\"\n :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n />\n </span>\n <dt-button\n :id=\"`closeButton-${index}`\"\n tabindex=\"0\"\n class=\"d-recipe-attachment-carousel__image-close-button\"\n circle\n :size=\"100\"\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/vue';\nimport { DialtoneLocalization } from '@/localization';\n\nimport { DtProgressCircle } from '@/components/progress_circle';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtImageCarousel',\n\n components: {\n DtImageViewer,\n DtButton,\n DtIconClose,\n DtProgressCircle,\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=\"100\"\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=\"100\"\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/vue';\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","DtImageViewer","DtButton","DtIconClose","DtProgressCircle","DialtoneLocalization","index","_hoisted_1","_hoisted_2","_hoisted_3","_openBlock","_createElementBlock","_createVNode","_component_dt_image_viewer","$props","$data","_createElementVNode","_createBlock","_component_dt_progress_circle","_component_dt_button","$options","_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/lib/avatar/avatar-constants.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const _={xs:"d-avatar--xs",sm:"d-avatar--sm",md:"d-avatar--md",lg:"d-avatar--lg",xl:"d-avatar--xl"},a={default:"",icon:"d-avatar__icon",initials:"d-avatar__initials"},R={md:"d-avatar__presence--md",lg:"d-avatar__presence--lg"},t={NONE:"",BUSY:"busy",AWAY:"away",OFFLINE:"offline",ACTIVE:"active"},E={xs:"100",sm:"200",md:"300",lg:"500",xl:"600"},A=["000","100","200","300","400","500","600","700","800","900","1000","1100","1200","1300","1400","1500","1600","1700","1800"],S=A.slice(1),s=I=>I>1,O={AVATAR_SIZE_MODIFIERS:_,AVATAR_KIND_MODIFIERS:a,AVATAR_PRESENCE_SIZE_MODIFIERS:R,AVATAR_PRESENCE_STATES:t,AVATAR_ICON_SIZES:E,AVATAR_COLORS:A,AVATAR_RANDOM_COLORS:S,AVATAR_GROUP_VALIDATOR:s};exports.AVATAR_COLORS=A;exports.AVATAR_GROUP_VALIDATOR=s;exports.AVATAR_ICON_SIZES=E;exports.AVATAR_KIND_MODIFIERS=a;exports.AVATAR_PRESENCE_SIZE_MODIFIERS=R;exports.AVATAR_PRESENCE_STATES=t;exports.AVATAR_RANDOM_COLORS=S;exports.AVATAR_SIZE_MODIFIERS=_;exports.default=O;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h={100:"d-avatar--size-100",150:"d-avatar--size-150",200:"d-avatar--size-200",250:"d-avatar--size-250",300:"d-avatar--size-300",400:"d-avatar--size-400",500:"d-avatar--size-500",600:"d-avatar--size-600",700:"d-avatar--size-700",800:"d-avatar--size-800",900:"d-avatar--size-900",xs:"d-avatar--xs",sm:"d-avatar--sm",md:"d-avatar--md",lg:"d-avatar--lg",xl:"d-avatar--xl"},O={default:"",icon:"d-avatar__icon",initials:"d-avatar__initials"},N={100:"d-avatar__presence--100",150:"d-avatar__presence--150",200:"d-avatar__presence--200",250:"d-avatar__presence--250",300:"d-avatar__presence--300",400:"d-avatar__presence--400",500:"d-avatar__presence--500",xs:"d-avatar__presence--100",sm:"d-avatar__presence--200",md:"d-avatar__presence--md",lg:"d-avatar__presence--lg"},f={NONE:"",BUSY:"busy",AWAY:"away",OFFLINE:"offline",ACTIVE:"active"},p={100:"100",150:"100",200:"200",250:"200",300:"300",400:"500",500:"600",600:"600",700:"700",800:"800",900:"800",xs:"100",sm:"200",md:"300",lg:"500",xl:"600"},m=[.45,.49,.54,.59,.64,.69,.74,.78,.82,.85],u=[.08,.12,.15,.17,.18,.17,.15,.12,.1,.08],V={1:0,2:30,3:60,4:90,5:120,6:150,7:180,8:210,9:240,10:270,11:300,12:330},l=12,d=10,F=t=>t>1;function g(t){const a=parseInt(t,10);if(isNaN(a))return null;const e=Math.floor(a/100),n=a%100/10;return e<1||e>l||!Number.isInteger(n)||n<0||n>=d?null:{family:e,variant:n}}function C(t){let a=0;if(t!=null)for(let A=0;A<t.length;A++)a=(a<<5)-a+t.charCodeAt(A),a=a&a;else a=Math.floor(Math.random()*1e6);const e=Math.abs(a),n=e%l+1,r=Math.floor(e/l)%d;return{family:n,variant:r}}function M(t,a,e){const n=e*Math.PI/180,r=a*Math.cos(n),A=a*Math.sin(n),s=t+.3963377774*r+.2158037573*A,T=t-.1055613458*r-.0638541728*A,R=t-.0894841775*r-1.291485548*A,v=s*s*s,S=T*T*T,E=R*R*R;let o=4.0767416621*v-3.3077115913*S+.2309699292*E,_=-1.2684380046*v+2.6097574011*S-.3413193965*E,c=-.0041960863*v-.7034186147*S+1.707614701*E;o=Math.max(0,Math.min(1,o)),_=Math.max(0,Math.min(1,_)),c=Math.max(0,Math.min(1,c));const I=i=>i<=.0031308?12.92*i:1.055*Math.pow(i,1/2.4)-.055;return o=Math.round(I(o)*255),_=Math.round(I(_)*255),c=Math.round(I(c)*255),"#"+[o,_,c].map(i=>i.toString(16).padStart(2,"0")).join("")}function x(t,a,e){const n=m[a],r=u[a],A=V[t]??0,s=(e+A)%360;return M(n,r,s)}const z={AVATAR_SIZE_MODIFIERS:h,AVATAR_KIND_MODIFIERS:O,AVATAR_PRESENCE_SIZE_MODIFIERS:N,AVATAR_PRESENCE_STATES:f,AVATAR_ICON_SIZES:p,AVATAR_LIGHTNESS:m,AVATAR_CHROMA:u,AVATAR_HUE_OFFSETS:V,AVATAR_FAMILY_COUNT:l,AVATAR_VARIANT_COUNT:d,AVATAR_GROUP_VALIDATOR:F,colorToFamilyVariant:g,getRandomFamilyVariant:C,oklchToHex:M,computeAvatarHex:x};exports.AVATAR_CHROMA=u;exports.AVATAR_FAMILY_COUNT=l;exports.AVATAR_GROUP_VALIDATOR=F;exports.AVATAR_HUE_OFFSETS=V;exports.AVATAR_ICON_SIZES=p;exports.AVATAR_KIND_MODIFIERS=O;exports.AVATAR_LIGHTNESS=m;exports.AVATAR_PRESENCE_SIZE_MODIFIERS=N;exports.AVATAR_PRESENCE_STATES=f;exports.AVATAR_SIZE_MODIFIERS=h;exports.AVATAR_VARIANT_COUNT=d;exports.colorToFamilyVariant=g;exports.computeAvatarHex=x;exports.default=z;exports.getRandomFamilyVariant=C;exports.oklchToHex=M;
 //# sourceMappingURL=avatar-constants.cjs.map

package/dist/lib/avatar/avatar-constants.cjs.map CHANGED Viewed

	@@ -1 +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,EAEzDC,EAAe,CACb,sBAAAT,EACA,sBAAAC,EACA,+BAAAC,EACA,uBAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF"}
1	+ {"version":3,"file":"avatar-constants.cjs","sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n // 11-size system: 100-500 support presence, 600-900 do not\n 100: 'd-avatar--size-100',\n 150: 'd-avatar--size-150',\n 200: 'd-avatar--size-200',\n 250: 'd-avatar--size-250',\n 300: 'd-avatar--size-300',\n 400: 'd-avatar--size-400',\n 500: 'd-avatar--size-500',\n 600: 'd-avatar--size-600',\n 700: 'd-avatar--size-700',\n 800: 'd-avatar--size-800',\n 900: 'd-avatar--size-900',\n // T-shirt sizes (deprecated aliases)\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 // 11-size system: Only sizes 100-500 support presence\n 100: 'd-avatar__presence--100',\n 150: 'd-avatar__presence--150',\n 200: 'd-avatar__presence--200',\n 250: 'd-avatar__presence--250',\n 300: 'd-avatar__presence--300',\n 400: 'd-avatar__presence--400',\n 500: 'd-avatar__presence--500',\n // T-shirt sizes (deprecated)\n xs: 'd-avatar__presence--100',\n sm: 'd-avatar__presence--200',\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 // 11-size system icon mappings\n 100: '100',\n 150: '100',\n 200: '200',\n 250: '200',\n 300: '300',\n 400: '500',\n 500: '600',\n 600: '600',\n 700: '700',\n 800: '800',\n 900: '800',\n // T-shirt sizes (deprecated aliases)\n xs: '100',\n sm: '200',\n md: '300',\n lg: '500',\n xl: '600',\n};\n\n// OKLCH Lightness scale (L) for avatar variants 0-9\n// Progresses from dark (0.45) to light (0.85)\nexport const AVATAR_LIGHTNESS = [\n 0.45, // variant 0\n 0.49, // variant 1\n 0.54, // variant 2\n 0.59, // variant 3\n 0.64, // variant 4\n 0.69, // variant 5\n 0.74, // variant 6\n 0.78, // variant 7\n 0.82, // variant 8\n 0.85, // variant 9\n];\n\n// OKLCH Chroma scale (C) for avatar variants 0-9\n// Bell curve: lower at extremes, peak in middle for best saturation\nexport const AVATAR_CHROMA = [\n 0.08, // variant 0\n 0.12, // variant 1\n 0.15, // variant 2\n 0.17, // variant 3\n 0.18, // variant 4\n 0.17, // variant 5\n 0.15, // variant 6\n 0.12, // variant 7\n 0.10, // variant 8\n 0.08, // variant 9\n];\n\n// Hue offsets for each family (1-12), 30° apart around the color wheel\nexport const AVATAR_HUE_OFFSETS = {\n 1: 0, // Red\n 2: 30, // Orange\n 3: 60, // Amber/Gold\n 4: 90, // Yellow-Green\n 5: 120, // Green\n 6: 150, // Teal\n 7: 180, // Cyan\n 8: 210, // Blue\n 9: 240, // Indigo\n 10: 270, // Purple\n 11: 300, // Magenta\n 12: 330, // Pink/Rose\n};\n\n// Number of families and variants\nexport const AVATAR_FAMILY_COUNT = 12;\nexport const AVATAR_VARIANT_COUNT = 10;\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\n/*\n Convert color code to family/variant\n * @param {string} colorCode - Color code (e.g., '540', '1020')\n * @returns {{ family: number, variant: number } \| null} - Family (1-12) and variant (0-9)\n /\nexport function colorToFamilyVariant (colorCode) {\n const num = parseInt(colorCode, 10);\n if (isNaN(num)) return null;\n const family = Math.floor(num / 100);\n const variant = (num % 100) / 10;\n if (family < 1 \|\| family > AVATAR_FAMILY_COUNT) return null;\n if (!Number.isInteger(variant) \|\| variant < 0 \|\| variant >= AVATAR_VARIANT_COUNT) return null;\n return { family, variant };\n}\n\n/\n Get a random family and variant\n * @param {string} [seed] - Optional seed for deterministic randomization\n * @returns {{ family: number, variant: number }}\n /\nexport function getRandomFamilyVariant (seed) {\n let hash = 0;\n if (seed != null) {\n for (let i = 0; i < seed.length; i++) {\n hash = ((hash << 5) - hash) + seed.charCodeAt(i);\n hash = hash & hash;\n }\n } else {\n hash = Math.floor(Math.random() 1000000);\n }\n\n // Use absolute value to handle negative hashes\n const absHash = Math.abs(hash);\n const family = (absHash % AVATAR_FAMILY_COUNT) + 1; // 1-12\n const variant = Math.floor(absHash / AVATAR_FAMILY_COUNT) % AVATAR_VARIANT_COUNT; // 0-9\n\n return { family, variant };\n}\n\n/*\n Convert OKLCH to hex color (for fallback browsers)\n * Uses sRGB approximation - may clip out-of-gamut colors\n * @param {number} l - Lightness (0-1)\n * @param {number} c - Chroma (0-0.4)\n * @param {number} h - Hue (0-360)\n * @returns {string} - Hex color string (e.g., '#ff5733')\n /\nexport function oklchToHex (l, c, h) {\n // Convert OKLCH to OKLab\n const hRad = (h Math.PI) / 180;\n const a = c * Math.cos(hRad);\n const b = c * Math.sin(hRad);\n\n // OKLab to linear sRGB\n const l_ = l + 0.3963377774 * a + 0.2158037573 * b;\n const m_ = l - 0.1055613458 * a - 0.0638541728 * b;\n const s_ = l - 0.0894841775 * a - 1.2914855480 * b;\n\n const l3 = l_ * l_ * l_;\n const m3 = m_ * m_ * m_;\n const s3 = s_ * s_ * s_;\n\n let r = +4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3;\n let g = -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3;\n let bl = -0.0041960863 * l3 - 0.7034186147 * m3 + 1.7076147010 * s3;\n\n // Clamp to [0, 1]\n r = Math.max(0, Math.min(1, r));\n g = Math.max(0, Math.min(1, g));\n bl = Math.max(0, Math.min(1, bl));\n\n // Linear to sRGB gamma\n const toSrgb = (x) => x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;\n\n r = Math.round(toSrgb(r) * 255);\n g = Math.round(toSrgb(g) * 255);\n bl = Math.round(toSrgb(bl) * 255);\n\n return '#' + [r, g, bl].map(x => x.toString(16).padStart(2, '0')).join('');\n}\n\n/*\n Compute fallback hex color for a given family, variant, and anchor hue\n * @param {number} family - Family number (1-12)\n * @param {number} variant - Variant number (0-9)\n * @param {number} anchorHue - Theme's anchor hue in degrees\n * @returns {string} - Hex color string\n */\nexport function computeAvatarHex (family, variant, anchorHue) {\n const l = AVATAR_LIGHTNESS[variant];\n const c = AVATAR_CHROMA[variant];\n const hueOffset = AVATAR_HUE_OFFSETS[family] ?? 0;\n const h = (anchorHue + hueOffset) % 360;\n return oklchToHex(l, c, h);\n}\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_LIGHTNESS,\n AVATAR_CHROMA,\n AVATAR_HUE_OFFSETS,\n AVATAR_FAMILY_COUNT,\n AVATAR_VARIANT_COUNT,\n AVATAR_GROUP_VALIDATOR,\n colorToFamilyVariant,\n getRandomFamilyVariant,\n oklchToHex,\n computeAvatarHex,\n};\n"],"names":["AVATAR_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_ICON_SIZES","AVATAR_LIGHTNESS","AVATAR_CHROMA","AVATAR_HUE_OFFSETS","AVATAR_FAMILY_COUNT","AVATAR_VARIANT_COUNT","AVATAR_GROUP_VALIDATOR","group","colorToFamilyVariant","colorCode","num","family","variant","getRandomFamilyVariant","seed","hash","i","absHash","oklchToHex","l","c","h","hRad","a","b","l_","m_","s_","l3","m3","s3","r","g","bl","toSrgb","x","computeAvatarHex","anchorHue","hueOffset","avatar_constants"],"mappings":"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"}

package/dist/lib/avatar/avatar-constants.js CHANGED Viewed

@@ -1,67 +1,193 @@
-const t = {
+const S = {
+  // 11-size system: 100-500 support presence, 600-900 do not
+  100: "d-avatar--size-100",
+  150: "d-avatar--size-150",
+  200: "d-avatar--size-200",
+  250: "d-avatar--size-250",
+  300: "d-avatar--size-300",
+  400: "d-avatar--size-400",
+  500: "d-avatar--size-500",
+  600: "d-avatar--size-600",
+  700: "d-avatar--size-700",
+  800: "d-avatar--size-800",
+  900: "d-avatar--size-900",
+  // T-shirt sizes (deprecated aliases)
   xs: "d-avatar--xs",
   sm: "d-avatar--sm",
   md: "d-avatar--md",
   lg: "d-avatar--lg",
   xl: "d-avatar--xl"
-}, _ = {
+}, p = {
   default: "",
   icon: "d-avatar__icon",
   initials: "d-avatar__initials"
-}, s = {
+}, V = {
+  // 11-size system: Only sizes 100-500 support presence
+  100: "d-avatar__presence--100",
+  150: "d-avatar__presence--150",
+  200: "d-avatar__presence--200",
+  250: "d-avatar__presence--250",
+  300: "d-avatar__presence--300",
+  400: "d-avatar__presence--400",
+  500: "d-avatar__presence--500",
+  // T-shirt sizes (deprecated)
+  xs: "d-avatar__presence--100",
+  sm: "d-avatar__presence--200",
   md: "d-avatar__presence--md",
   lg: "d-avatar__presence--lg"
-}, n = {
+}, N = {
   NONE: "",
   BUSY: "busy",
   AWAY: "away",
   OFFLINE: "offline",
   ACTIVE: "active"
-}, R = {
+}, O = {
+  // 11-size system icon mappings
+  100: "100",
+  150: "100",
+  200: "200",
+  250: "200",
+  300: "300",
+  400: "500",
+  500: "600",
+  600: "600",
+  700: "700",
+  800: "800",
+  900: "800",
+  // T-shirt sizes (deprecated aliases)
   xs: "100",
   sm: "200",
   md: "300",
   lg: "500",
   xl: "600"
-}, a = [
-  "000",
-  "100",
-  "200",
-  "300",
-  "400",
-  "500",
-  "600",
-  "700",
-  "800",
-  "900",
-  "1000",
-  "1100",
-  "1200",
-  "1300",
-  "1400",
-  "1500",
-  "1600",
-  "1700",
-  "1800"
-], c = a.slice(1), d = (A) => A > 1, E = {
-  AVATAR_SIZE_MODIFIERS: t,
-  AVATAR_KIND_MODIFIERS: _,
-  AVATAR_PRESENCE_SIZE_MODIFIERS: s,
-  AVATAR_PRESENCE_STATES: n,
-  AVATAR_ICON_SIZES: R,
-  AVATAR_COLORS: a,
-  AVATAR_RANDOM_COLORS: c,
-  AVATAR_GROUP_VALIDATOR: d
+}, T = [
+  0.45,
+  // variant 0
+  0.49,
+  // variant 1
+  0.54,
+  // variant 2
+  0.59,
+  // variant 3
+  0.64,
+  // variant 4
+  0.69,
+  // variant 5
+  0.74,
+  // variant 6
+  0.78,
+  // variant 7
+  0.82,
+  // variant 8
+  0.85
+  // variant 9
+], f = [
+  0.08,
+  // variant 0
+  0.12,
+  // variant 1
+  0.15,
+  // variant 2
+  0.17,
+  // variant 3
+  0.18,
+  // variant 4
+  0.17,
+  // variant 5
+  0.15,
+  // variant 6
+  0.12,
+  // variant 7
+  0.1,
+  // variant 8
+  0.08
+  // variant 9
+], I = {
+  1: 0,
+  // Red
+  2: 30,
+  // Orange
+  3: 60,
+  // Amber/Gold
+  4: 90,
+  // Yellow-Green
+  5: 120,
+  // Green
+  6: 150,
+  // Teal
+  7: 180,
+  // Cyan
+  8: 210,
+  // Blue
+  9: 240,
+  // Indigo
+  10: 270,
+  // Purple
+  11: 300,
+  // Magenta
+  12: 330
+  // Pink/Rose
+}, d = 12, R = 10, g = (t) => t > 1;
+function x(t) {
+  const a = parseInt(t, 10);
+  if (isNaN(a)) return null;
+  const s = Math.floor(a / 100), n = a % 100 / 10;
+  return s < 1 || s > d || !Number.isInteger(n) || n < 0 || n >= R ? null : { family: s, variant: n };
+}
+function z(t) {
+  let a = 0;
+  if (t != null)
+    for (let r = 0; r < t.length; r++)
+      a = (a << 5) - a + t.charCodeAt(r), a = a & a;
+  else
+    a = Math.floor(Math.random() * 1e6);
+  const s = Math.abs(a), n = s % d + 1, e = Math.floor(s / d) % R;
+  return { family: n, variant: e };
+}
+function E(t, a, s) {
+  const n = s * Math.PI / 180, e = a * Math.cos(n), r = a * Math.sin(n), o = t + 0.3963377774 * e + 0.2158037573 * r, l = t - 0.1055613458 * e - 0.0638541728 * r, v = t - 0.0894841775 * e - 1.291485548 * r, h = o * o * o, m = l * l * l, u = v * v * v;
+  let c = 4.0767416621 * h - 3.3077115913 * m + 0.2309699292 * u, _ = -1.2684380046 * h + 2.6097574011 * m - 0.3413193965 * u, i = -0.0041960863 * h - 0.7034186147 * m + 1.707614701 * u;
+  c = Math.max(0, Math.min(1, c)), _ = Math.max(0, Math.min(1, _)), i = Math.max(0, Math.min(1, i));
+  const M = (A) => A <= 31308e-7 ? 12.92 * A : 1.055 * Math.pow(A, 1 / 2.4) - 0.055;
+  return c = Math.round(M(c) * 255), _ = Math.round(M(_) * 255), i = Math.round(M(i) * 255), "#" + [c, _, i].map((A) => A.toString(16).padStart(2, "0")).join("");
+}
+function F(t, a, s) {
+  const n = T[a], e = f[a], r = I[t] ?? 0, o = (s + r) % 360;
+  return E(n, e, o);
+}
+const C = {
+  AVATAR_SIZE_MODIFIERS: S,
+  AVATAR_KIND_MODIFIERS: p,
+  AVATAR_PRESENCE_SIZE_MODIFIERS: V,
+  AVATAR_PRESENCE_STATES: N,
+  AVATAR_ICON_SIZES: O,
+  AVATAR_LIGHTNESS: T,
+  AVATAR_CHROMA: f,
+  AVATAR_HUE_OFFSETS: I,
+  AVATAR_FAMILY_COUNT: d,
+  AVATAR_VARIANT_COUNT: R,
+  AVATAR_GROUP_VALIDATOR: g,
+  colorToFamilyVariant: x,
+  getRandomFamilyVariant: z,
+  oklchToHex: E,
+  computeAvatarHex: F
 };
 export {
-  a as AVATAR_COLORS,
-  d as AVATAR_GROUP_VALIDATOR,
-  R as AVATAR_ICON_SIZES,
-  _ as AVATAR_KIND_MODIFIERS,
-  s as AVATAR_PRESENCE_SIZE_MODIFIERS,
-  n as AVATAR_PRESENCE_STATES,
-  c as AVATAR_RANDOM_COLORS,
-  t as AVATAR_SIZE_MODIFIERS,
-  E as default
+  f as AVATAR_CHROMA,
+  d as AVATAR_FAMILY_COUNT,
+  g as AVATAR_GROUP_VALIDATOR,
+  I as AVATAR_HUE_OFFSETS,
+  O as AVATAR_ICON_SIZES,
+  p as AVATAR_KIND_MODIFIERS,
+  T as AVATAR_LIGHTNESS,
+  V as AVATAR_PRESENCE_SIZE_MODIFIERS,
+  N as AVATAR_PRESENCE_STATES,
+  S as AVATAR_SIZE_MODIFIERS,
+  R as AVATAR_VARIANT_COUNT,
+  x as colorToFamilyVariant,
+  F as computeAvatarHex,
+  C as default,
+  z as getRandomFamilyVariant,
+  E as oklchToHex
 };
 //# sourceMappingURL=avatar-constants.js.map

package/dist/lib/avatar/avatar-constants.js.map CHANGED Viewed

	@@ -1 +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,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;"}
1	+ {"version":3,"file":"avatar-constants.js","sources":["../../../components/avatar/avatar_constants.js"],"sourcesContent":["export const AVATAR_SIZE_MODIFIERS = {\n // 11-size system: 100-500 support presence, 600-900 do not\n 100: 'd-avatar--size-100',\n 150: 'd-avatar--size-150',\n 200: 'd-avatar--size-200',\n 250: 'd-avatar--size-250',\n 300: 'd-avatar--size-300',\n 400: 'd-avatar--size-400',\n 500: 'd-avatar--size-500',\n 600: 'd-avatar--size-600',\n 700: 'd-avatar--size-700',\n 800: 'd-avatar--size-800',\n 900: 'd-avatar--size-900',\n // T-shirt sizes (deprecated aliases)\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 // 11-size system: Only sizes 100-500 support presence\n 100: 'd-avatar__presence--100',\n 150: 'd-avatar__presence--150',\n 200: 'd-avatar__presence--200',\n 250: 'd-avatar__presence--250',\n 300: 'd-avatar__presence--300',\n 400: 'd-avatar__presence--400',\n 500: 'd-avatar__presence--500',\n // T-shirt sizes (deprecated)\n xs: 'd-avatar__presence--100',\n sm: 'd-avatar__presence--200',\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 // 11-size system icon mappings\n 100: '100',\n 150: '100',\n 200: '200',\n 250: '200',\n 300: '300',\n 400: '500',\n 500: '600',\n 600: '600',\n 700: '700',\n 800: '800',\n 900: '800',\n // T-shirt sizes (deprecated aliases)\n xs: '100',\n sm: '200',\n md: '300',\n lg: '500',\n xl: '600',\n};\n\n// OKLCH Lightness scale (L) for avatar variants 0-9\n// Progresses from dark (0.45) to light (0.85)\nexport const AVATAR_LIGHTNESS = [\n 0.45, // variant 0\n 0.49, // variant 1\n 0.54, // variant 2\n 0.59, // variant 3\n 0.64, // variant 4\n 0.69, // variant 5\n 0.74, // variant 6\n 0.78, // variant 7\n 0.82, // variant 8\n 0.85, // variant 9\n];\n\n// OKLCH Chroma scale (C) for avatar variants 0-9\n// Bell curve: lower at extremes, peak in middle for best saturation\nexport const AVATAR_CHROMA = [\n 0.08, // variant 0\n 0.12, // variant 1\n 0.15, // variant 2\n 0.17, // variant 3\n 0.18, // variant 4\n 0.17, // variant 5\n 0.15, // variant 6\n 0.12, // variant 7\n 0.10, // variant 8\n 0.08, // variant 9\n];\n\n// Hue offsets for each family (1-12), 30° apart around the color wheel\nexport const AVATAR_HUE_OFFSETS = {\n 1: 0, // Red\n 2: 30, // Orange\n 3: 60, // Amber/Gold\n 4: 90, // Yellow-Green\n 5: 120, // Green\n 6: 150, // Teal\n 7: 180, // Cyan\n 8: 210, // Blue\n 9: 240, // Indigo\n 10: 270, // Purple\n 11: 300, // Magenta\n 12: 330, // Pink/Rose\n};\n\n// Number of families and variants\nexport const AVATAR_FAMILY_COUNT = 12;\nexport const AVATAR_VARIANT_COUNT = 10;\n\nexport const AVATAR_GROUP_VALIDATOR = (group) => group > 1;\n\n/*\n Convert color code to family/variant\n * @param {string} colorCode - Color code (e.g., '540', '1020')\n * @returns {{ family: number, variant: number } \| null} - Family (1-12) and variant (0-9)\n /\nexport function colorToFamilyVariant (colorCode) {\n const num = parseInt(colorCode, 10);\n if (isNaN(num)) return null;\n const family = Math.floor(num / 100);\n const variant = (num % 100) / 10;\n if (family < 1 \|\| family > AVATAR_FAMILY_COUNT) return null;\n if (!Number.isInteger(variant) \|\| variant < 0 \|\| variant >= AVATAR_VARIANT_COUNT) return null;\n return { family, variant };\n}\n\n/\n Get a random family and variant\n * @param {string} [seed] - Optional seed for deterministic randomization\n * @returns {{ family: number, variant: number }}\n /\nexport function getRandomFamilyVariant (seed) {\n let hash = 0;\n if (seed != null) {\n for (let i = 0; i < seed.length; i++) {\n hash = ((hash << 5) - hash) + seed.charCodeAt(i);\n hash = hash & hash;\n }\n } else {\n hash = Math.floor(Math.random() 1000000);\n }\n\n // Use absolute value to handle negative hashes\n const absHash = Math.abs(hash);\n const family = (absHash % AVATAR_FAMILY_COUNT) + 1; // 1-12\n const variant = Math.floor(absHash / AVATAR_FAMILY_COUNT) % AVATAR_VARIANT_COUNT; // 0-9\n\n return { family, variant };\n}\n\n/*\n Convert OKLCH to hex color (for fallback browsers)\n * Uses sRGB approximation - may clip out-of-gamut colors\n * @param {number} l - Lightness (0-1)\n * @param {number} c - Chroma (0-0.4)\n * @param {number} h - Hue (0-360)\n * @returns {string} - Hex color string (e.g., '#ff5733')\n /\nexport function oklchToHex (l, c, h) {\n // Convert OKLCH to OKLab\n const hRad = (h Math.PI) / 180;\n const a = c * Math.cos(hRad);\n const b = c * Math.sin(hRad);\n\n // OKLab to linear sRGB\n const l_ = l + 0.3963377774 * a + 0.2158037573 * b;\n const m_ = l - 0.1055613458 * a - 0.0638541728 * b;\n const s_ = l - 0.0894841775 * a - 1.2914855480 * b;\n\n const l3 = l_ * l_ * l_;\n const m3 = m_ * m_ * m_;\n const s3 = s_ * s_ * s_;\n\n let r = +4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3;\n let g = -1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3;\n let bl = -0.0041960863 * l3 - 0.7034186147 * m3 + 1.7076147010 * s3;\n\n // Clamp to [0, 1]\n r = Math.max(0, Math.min(1, r));\n g = Math.max(0, Math.min(1, g));\n bl = Math.max(0, Math.min(1, bl));\n\n // Linear to sRGB gamma\n const toSrgb = (x) => x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;\n\n r = Math.round(toSrgb(r) * 255);\n g = Math.round(toSrgb(g) * 255);\n bl = Math.round(toSrgb(bl) * 255);\n\n return '#' + [r, g, bl].map(x => x.toString(16).padStart(2, '0')).join('');\n}\n\n/*\n Compute fallback hex color for a given family, variant, and anchor hue\n * @param {number} family - Family number (1-12)\n * @param {number} variant - Variant number (0-9)\n * @param {number} anchorHue - Theme's anchor hue in degrees\n * @returns {string} - Hex color string\n */\nexport function computeAvatarHex (family, variant, anchorHue) {\n const l = AVATAR_LIGHTNESS[variant];\n const c = AVATAR_CHROMA[variant];\n const hueOffset = AVATAR_HUE_OFFSETS[family] ?? 0;\n const h = (anchorHue + hueOffset) % 360;\n return oklchToHex(l, c, h);\n}\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_LIGHTNESS,\n AVATAR_CHROMA,\n AVATAR_HUE_OFFSETS,\n AVATAR_FAMILY_COUNT,\n AVATAR_VARIANT_COUNT,\n AVATAR_GROUP_VALIDATOR,\n colorToFamilyVariant,\n getRandomFamilyVariant,\n oklchToHex,\n computeAvatarHex,\n};\n"],"names":["AVATAR_SIZE_MODIFIERS","AVATAR_KIND_MODIFIERS","AVATAR_PRESENCE_SIZE_MODIFIERS","AVATAR_PRESENCE_STATES","AVATAR_ICON_SIZES","AVATAR_LIGHTNESS","AVATAR_CHROMA","AVATAR_HUE_OFFSETS","AVATAR_FAMILY_COUNT","AVATAR_VARIANT_COUNT","AVATAR_GROUP_VALIDATOR","group","colorToFamilyVariant","colorCode","num","family","variant","getRandomFamilyVariant","seed","hash","i","absHash","oklchToHex","l","c","h","hRad","a","b","l_","m_","s_","l3","m3","s3","r","g","bl","toSrgb","x","computeAvatarHex","anchorHue","hueOffset","avatar_constants"],"mappings":"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"}

package/dist/lib/avatar/avatar.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../common/utils/index.cjs"),s=require("./avatar-constants.cjs"),o=require("../icon/icon-constants.cjs"),c=require("./utils.cjs"),e=require("vue"),d=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../presence/presence.cjs"),m={compatConfig:{MODE:3},name:"DtAvatar",components:{DtPresence:u.default},inheritAttrs:!1,props:{id:{type:String,default(){return l.getUniqueString()}},seed:{type:String,default:void 0},color:{type:String,default:void 0},size:{type:String,default:"md",validator:t=>Object.keys(s.AVATAR_SIZE_MODIFIERS).includes(t)},avatarClass:{type:[String,Array,Object],default:""},canvasClass:{type:[String,Array,Object],default:""},iconClass:{type:[String,Array,Object],default:""},presence:{type:String,default:s.AVATAR_PRESENCE_STATES.NONE,validator:t=>Object.values(s.AVATAR_PRESENCE_STATES).includes(t)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:t=>s.AVATAR_GROUP_VALIDATOR(t)},overlayText:{type:String,default:""},overlayClass:{type:[String,Array,Object],default:""},imageSrc:{type:String,default:""},imageAlt:{type:String,default:void 0},iconSize:{type:String,default:"",validator:t=>!t||Object.keys(o.ICON_SIZE_MODIFIERS).includes(t)},fullName:{type:String,default:""},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0}},emits:["click"],data(){return{AVATAR_SIZE_MODIFIERS:s.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:s.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:s.AVATAR_PRESENCE_SIZE_MODIFIERS,AVATAR_ICON_SIZES:s.AVATAR_ICON_SIZES,imageLoadedSuccessfully:null,formattedInitials:"",initializing:!1,hasSlotContent:l.hasSlotContent}},computed:{hasOverlayIcon(){return l.hasSlotContent(this.$slots.overlayIcon)},iconDataQa(){return"dt-avatar-icon"},avatarClasses(){return["d-avatar",this.$attrs.class,s.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&this.group>9&&this.group<100,"d-avatar--group-digits-3":this.showGroup&&this.group>99,[`d-avatar--color-${this.getColor()}`]:!this.isIconType(),"d-avatar--clickable":this.clickable,"d-avatar--presence":this.presence&&!this.showGroup}]},overlayClasses(){return["d-avatar__overlay",this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return s.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){return this.group>99?"99+":this.group},validatedSize(){return this.group?"xs":this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(t){this.imageLoadedSuccessfully=null,t&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners()},methods:{isIconType(){return l.hasSlotContent(this.$slots.icon)},async setImageListeners(){await this.$nextTick();const t=this.$refs.avatarImage;t&&(t.addEventListener("load",()=>this._loadedImageEventHandler(t),{once:!0}),t.addEventListener("error",()=>this._erroredImageEventHandler(t),{once:!0}))},formatInitials(){const t=c.extractInitialsFromName(this.fullName);this.validatedSize==="xs"?this.formattedInitials="":this.validatedSize==="sm"?this.formattedInitials=t[0]:this.formattedInitials=t},getColor(){return this.color??l.getRandomElement(s.AVATAR_RANDOM_COLORS,this.seed)},_loadedImageEventHandler(t){this.imageLoadedSuccessfully=!0,t.classList.remove("d-d-none")},_erroredImageEventHandler(t){this.imageLoadedSuccessfully=!1,t.classList.add("d-d-none")},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby')},handleClick(t){this.clickable&&this.$emit("click",t)}}},_=["src","alt"],h=["aria-label","data-qa","role"],S={key:1,class:"d-avatar__overlay-text"},v={key:1,class:"d-avatar__count","data-qa":"dt-avatar-count"};function g(t,I,a,y,i,r){const n=e.resolveComponent("dt-presence");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(a.clickable?"button":"div"),{id:a.id,class:e.normalizeClass(r.avatarClasses),style:e.normalizeStyle(t.$attrs.style),"data-qa":"dt-avatar",onClick:r.handleClick},{default:e.withCtx(()=>[e.createElementVNode("div",{ref:"canvas",class:e.normalizeClass([a.canvasClass,"d-avatar__canvas",{"d-avatar--image-loaded":i.imageLoadedSuccessfully}])},[r.showImage?(e.openBlock(),e.createElementBlock("img",{key:0,ref:"avatarImage",class:"d-avatar__image","data-qa":"dt-avatar-image",src:a.imageSrc,alt:a.imageAlt},null,8,_)):r.isIconType()?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass([a.iconClass,i.AVATAR_KIND_MODIFIERS.icon]),"aria-label":a.clickable?a.iconAriaLabel:"","data-qa":r.iconDataQa,role:a.clickable?"button":""},[e.renderSlot(t.$slots,"icon",{iconSize:a.iconSize||i.AVATAR_ICON_SIZES[a.size]})],10,h)):(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass([i.AVATAR_KIND_MODIFIERS.initials])},e.toDisplayString(i.formattedInitials),3))],2),r.hasOverlayIcon||a.overlayText?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(r.overlayClasses)},[r.hasOverlayIcon?e.renderSlot(t.$slots,"overlayIcon",{key:0}):a.overlayText?(e.openBlock(),e.createElementBlock("p",S,e.toDisplayString(a.overlayText),1)):e.createCommentVNode("",!0)],2)):e.createCommentVNode("",!0),r.showGroup?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(r.formattedGroup),1)):e.createCommentVNode("",!0),a.presence&&!r.showGroup?(e.openBlock(),e.createBlock(n,e.mergeProps({key:2,presence:a.presence,class:["d-avatar__presence",i.AVATAR_PRESENCE_SIZE_MODIFIERS[a.size]]},a.presenceProps,{"data-qa":"dt-presence"}),null,16,["presence","class"])):e.createCommentVNode("",!0)]),_:3},8,["id","class","style","onClick"])}const A=d._(m,[["render",g]]);exports.default=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../common/utils/index.cjs"),r=require("./avatar-constants.cjs"),u=require("./utils.cjs"),a=require("vue"),m=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),h=require("../presence/presence.cjs");var d;const o=typeof CSS<"u"&&((d=CSS.supports)==null?void 0:d.call(CSS,"background","oklch(0.5 0.1 0)")),f={compatConfig:{MODE:3},name:"DtAvatar",components:{DtPresence:h.default},inheritAttrs:!1,props:{id:{type:String,default(){return l.getUniqueString()}},seed:{type:String,default:void 0},family:{type:Number,default:void 0,validator:e=>e>=1&&e<=r.AVATAR_FAMILY_COUNT},variant:{type:Number,default:void 0,validator:e=>e>=0&&e<r.AVATAR_VARIANT_COUNT},color:{type:String,default:void 0},size:{type:[String,Number],default:300,validator:e=>Object.keys(r.AVATAR_SIZE_MODIFIERS).includes(String(e))},avatarClass:{type:[String,Array,Object],default:""},canvasClass:{type:[String,Array,Object],default:""},iconClass:{type:[String,Array,Object],default:""},presence:{type:String,default:r.AVATAR_PRESENCE_STATES.NONE,validator:e=>Object.values(r.AVATAR_PRESENCE_STATES).includes(e)},presenceProps:{type:Object,default:()=>({})},group:{type:Number,default:void 0,validator:e=>r.AVATAR_GROUP_VALIDATOR(e)},overlayText:{type:String,default:""},overlayClass:{type:[String,Array,Object],default:""},imageSrc:{type:String,default:""},imageAlt:{type:String,default:void 0},fullName:{type:String,default:""},clickable:{type:Boolean,default:!1},iconAriaLabel:{type:String,default:void 0},iconOnly:{type:Boolean,default:!1},deactivated:{type:Boolean,default:!1}},emits:["click"],data(){return{AVATAR_SIZE_MODIFIERS:r.AVATAR_SIZE_MODIFIERS,AVATAR_KIND_MODIFIERS:r.AVATAR_KIND_MODIFIERS,AVATAR_PRESENCE_SIZE_MODIFIERS:r.AVATAR_PRESENCE_SIZE_MODIFIERS,imageLoadedSuccessfully:null,formattedInitials:"",initializing:!1,hasSlotContent:l.hasSlotContent,anchorHue:0}},computed:{hasOverlayIcon(){return l.hasSlotContent(this.$slots.overlayIcon)},isIconType(){return l.hasSlotContent(this.$slots.icon)},iconDataQa(){return"dt-avatar-icon"},computedFamily(){if(this.isIconType)return;if(this.family!==void 0)return this.family;if(this.color!==void 0){const i=r.colorToFamilyVariant(this.color);if(i)return i.family}return r.getRandomFamilyVariant(this.seed).family},computedVariant(){if(this.isIconType)return;if(this.variant!==void 0)return this.variant;if(this.color!==void 0){const i=r.colorToFamilyVariant(this.color);if(i)return i.variant}return r.getRandomFamilyVariant(this.seed).variant},avatarClasses(){return["d-avatar",this.$attrs.class,r.AVATAR_SIZE_MODIFIERS[this.validatedSize],this.avatarClass,{"d-avatar--group":this.showGroup,"d-avatar--group-digits-2":this.showGroup&&String(this.formattedGroup).length===2,"d-avatar--group-digits-3":this.showGroup&&String(this.formattedGroup).length>=3,"d-avatar--clickable":this.clickable,"d-avatar--presence":this.presence&&!this.showGroup,"d-avatar--icon-only":this.iconOnly,"d-avatar--deactivated":this.deactivated}]},avatarStyles(){const e=this.$attrs.style,i=e!=null?[].concat(e):[];if(!o&&!this.isIconType&&this.computedFamily&&this.computedVariant!==void 0){const t=r.computeAvatarHex(this.computedFamily,this.computedVariant,this.anchorHue);i.push({"--avatar-color-background":t})}return i.length>0?i:void 0},overlayClasses(){return["d-avatar__overlay",this.overlayClass,{"d-avatar__overlay-icon":this.hasOverlayIcon}]},showGroup(){return r.AVATAR_GROUP_VALIDATOR(this.group)},formattedGroup(){const e=String(this.validatedSize);return(["xs","100","150","200","250"].includes(e)?2:3)===2?this.group>9?"9+":this.group:this.group>99?"99+":this.group},validatedSize(){return this.size},showImage(){return this.imageLoadedSuccessfully!==!1&&this.imageSrc}},watch:{fullName:{immediate:!0,handler(){this.formatInitials()}},size:{immediate:!0,handler(){this.formatInitials()}},group:{immediate:!0,handler(){this.formatInitials()}},imageSrc(e){this.imageLoadedSuccessfully=null,e&&(this.validateProps(),this.setImageListeners())}},mounted(){this.validateProps(),this.setImageListeners(),o||this.readAnchorHue()},methods:{async setImageListeners(){await this.$nextTick();const e=this.$refs.avatarImage;e&&(e.addEventListener("load",()=>this._loadedImageEventHandler(e),{once:!0}),e.addEventListener("error",()=>this._erroredImageEventHandler(e),{once:!0}))},formatInitials(){const e=u.extractInitialsFromName(this.fullName),i=String(this.validatedSize);i==="xs"||i==="100"?this.formattedInitials="":i==="sm"||i==="150"||i==="200"?this.formattedInitials=e[0]:this.formattedInitials=e},readAnchorHue(){try{const e=getComputedStyle(document.documentElement).getPropertyValue("--dt-avatar-anchor-hue").trim();this.anchorHue=parseFloat(e)||0}catch{this.anchorHue=0}},_loadedImageEventHandler(e){this.imageLoadedSuccessfully=!0,e.classList.remove("d-d-none")},_erroredImageEventHandler(e){this.imageLoadedSuccessfully=!1,e.classList.add("d-d-none")},validateProps(){this.imageSrc&&this.imageAlt===void 0&&console.error('image-alt required if image-src is provided. Can be set to "" (empty string) if the image is described in text nearby')},handleClick(e){this.clickable&&this.$emit("click",e)}}},y={class:"d-avatar__canvas-inner"},v=["src","alt"],_=["aria-label","data-qa"],g={key:1,class:"d-avatar__overlay-text"},S=["aria-label"];function A(e,i,t,p,s,n){const c=a.resolveComponent("dt-presence");return a.openBlock(),a.createBlock(a.resolveDynamicComponent(t.clickable?"button":"div"),{id:t.id,class:a.normalizeClass(n.avatarClasses),style:a.normalizeStyle(n.avatarStyles),"data-avatar-family":t.iconOnly?void 0:n.computedFamily,"data-avatar-variant":t.iconOnly?void 0:n.computedVariant,"data-qa":"dt-avatar",type:t.clickable?"button":void 0,onClick:n.handleClick},{default:a.withCtx(()=>[a.createElementVNode("div",{ref:"canvas",class:a.normalizeClass([t.canvasClass,"d-avatar__canvas",{"d-avatar--image-loaded":s.imageLoadedSuccessfully}])},[a.createElementVNode("div",y,[n.showImage?(a.openBlock(),a.createElementBlock("img",{key:0,ref:"avatarImage",class:"d-avatar__image","data-qa":"dt-avatar-image",src:t.imageSrc,alt:t.imageAlt},null,8,v)):n.isIconType?(a.openBlock(),a.createElementBlock("div",{key:1,class:a.normalizeClass([t.iconClass,s.AVATAR_KIND_MODIFIERS.icon]),"aria-label":t.clickable?t.iconAriaLabel:"","data-qa":n.iconDataQa},[a.renderSlot(e.$slots,"icon")],10,_)):(a.openBlock(),a.createElementBlock("span",{key:2,class:a.normalizeClass([s.AVATAR_KIND_MODIFIERS.initials])},a.toDisplayString(s.formattedInitials),3))])],2),n.hasOverlayIcon||t.overlayText?(a.openBlock(),a.createElementBlock("div",{key:0,class:a.normalizeClass(n.overlayClasses)},[n.hasOverlayIcon?a.renderSlot(e.$slots,"overlayIcon",{key:0}):t.overlayText?(a.openBlock(),a.createElementBlock("p",g,a.toDisplayString(t.overlayText),1)):a.createCommentVNode("",!0)],2)):a.createCommentVNode("",!0),n.showGroup?(a.openBlock(),a.createElementBlock("span",{key:1,class:"d-avatar__count","data-qa":"dt-avatar-count",role:"img","aria-label":`${t.group} participants`},a.toDisplayString(n.formattedGroup),9,S)):a.createCommentVNode("",!0),t.presence&&!n.showGroup&&s.AVATAR_PRESENCE_SIZE_MODIFIERS[t.size]?(a.openBlock(),a.createBlock(c,a.mergeProps({key:2,presence:t.presence,class:["d-avatar__presence",s.AVATAR_PRESENCE_SIZE_MODIFIERS[t.size]]},t.presenceProps,{"data-qa":"dt-presence"}),null,16,["presence","class"])):a.createCommentVNode("",!0)]),_:3},8,["id","class","style","data-avatar-family","data-avatar-variant","type","onClick"])}const I=m._(f,[["render",A]]);exports.default=I;
 //# sourceMappingURL=avatar.cjs.map