@dialpad/dialtone 9.166.0 → 9.167.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/css/dialtone-default-theme.css +88 -32
  2. package/dist/css/dialtone-default-theme.min.css +1 -1
  3. package/dist/css/dialtone.css +88 -32
  4. package/dist/css/dialtone.min.css +1 -1
  5. package/dist/css/tokens-docs.json +1 -1
  6. package/dist/tokens/doc.json +110841 -110841
  7. package/dist/vue3/common/mixins/keyboard-list-navigation.cjs +1 -1
  8. package/dist/vue3/common/mixins/keyboard-list-navigation.cjs.map +1 -1
  9. package/dist/vue3/common/mixins/keyboard-list-navigation.js +7 -7
  10. package/dist/vue3/common/mixins/keyboard-list-navigation.js.map +1 -1
  11. package/dist/vue3/component-documentation.json +1 -1
  12. package/dist/vue3/dialtone-vue.cjs +1 -1
  13. package/dist/vue3/dialtone-vue.js +244 -237
  14. package/dist/vue3/dialtone-vue.js.map +1 -1
  15. package/dist/vue3/lib/attachment-carousel/attachment-carousel.cjs +1 -1
  16. package/dist/vue3/lib/attachment-carousel/attachment-carousel.cjs.map +1 -1
  17. package/dist/vue3/lib/attachment-carousel/attachment-carousel.js +64 -117
  18. package/dist/vue3/lib/attachment-carousel/attachment-carousel.js.map +1 -1
  19. package/dist/vue3/lib/editor/editor.cjs +1 -1
  20. package/dist/vue3/lib/editor/editor.cjs.map +1 -1
  21. package/dist/vue3/lib/editor/editor.js +52 -36
  22. package/dist/vue3/lib/editor/editor.js.map +1 -1
  23. package/dist/vue3/lib/loader/loader.cjs +13 -1
  24. package/dist/vue3/lib/loader/loader.cjs.map +1 -1
  25. package/dist/vue3/lib/loader/loader.js +31 -20
  26. package/dist/vue3/lib/loader/loader.js.map +1 -1
  27. package/dist/vue3/lib/progress-circle/index.cjs +2 -0
  28. package/dist/vue3/lib/progress-circle/index.cjs.map +1 -0
  29. package/dist/vue3/lib/progress-circle/index.js +10 -0
  30. package/dist/vue3/lib/progress-circle/index.js.map +1 -0
  31. package/dist/vue3/lib/progress-circle/progress-circle-constants.cjs +2 -0
  32. package/dist/vue3/lib/progress-circle/progress-circle-constants.cjs.map +1 -0
  33. package/dist/vue3/lib/progress-circle/progress-circle-constants.js +25 -0
  34. package/dist/vue3/lib/progress-circle/progress-circle-constants.js.map +1 -0
  35. package/dist/vue3/lib/progress-circle/progress-circle.cjs +2 -0
  36. package/dist/vue3/lib/progress-circle/progress-circle.cjs.map +1 -0
  37. package/dist/vue3/lib/progress-circle/progress-circle.js +151 -0
  38. package/dist/vue3/lib/progress-circle/progress-circle.js.map +1 -0
  39. package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs +3 -3
  40. package/dist/vue3/lib/rich-text-editor/rich-text-editor.cjs.map +1 -1
  41. package/dist/vue3/lib/rich-text-editor/rich-text-editor.js +17 -3
  42. package/dist/vue3/lib/rich-text-editor/rich-text-editor.js.map +1 -1
  43. package/dist/vue3/lib/tooltip/tooltip.cjs +2 -2
  44. package/dist/vue3/lib/tooltip/tooltip.cjs.map +1 -1
  45. package/dist/vue3/lib/tooltip/tooltip.js +28 -19
  46. package/dist/vue3/lib/tooltip/tooltip.js.map +1 -1
  47. package/dist/vue3/lib/tooltip-directive/tooltip.cjs +1 -1
  48. package/dist/vue3/lib/tooltip-directive/tooltip.cjs.map +1 -1
  49. package/dist/vue3/lib/tooltip-directive/tooltip.js +45 -45
  50. package/dist/vue3/lib/tooltip-directive/tooltip.js.map +1 -1
  51. package/dist/vue3/localization/es-LA.cjs +1 -1
  52. package/dist/vue3/localization/es-LA.cjs.map +1 -1
  53. package/dist/vue3/localization/es-LA.js +1 -1
  54. package/dist/vue3/localization/es-LA.js.map +1 -1
  55. package/dist/vue3/localization/it-IT.cjs +3 -3
  56. package/dist/vue3/localization/it-IT.cjs.map +1 -1
  57. package/dist/vue3/localization/it-IT.js +3 -3
  58. package/dist/vue3/localization/it-IT.js.map +1 -1
  59. package/dist/vue3/localization/nl-NL.cjs +2 -2
  60. package/dist/vue3/localization/nl-NL.cjs.map +1 -1
  61. package/dist/vue3/localization/nl-NL.js +2 -2
  62. package/dist/vue3/localization/nl-NL.js.map +1 -1
  63. package/dist/vue3/localization/ru-RU.cjs +1 -1
  64. package/dist/vue3/localization/ru-RU.cjs.map +1 -1
  65. package/dist/vue3/localization/ru-RU.js +1 -1
  66. package/dist/vue3/localization/ru-RU.js.map +1 -1
  67. package/dist/vue3/localization/zh-CN.cjs +1 -1
  68. package/dist/vue3/localization/zh-CN.cjs.map +1 -1
  69. package/dist/vue3/localization/zh-CN.js +1 -1
  70. package/dist/vue3/localization/zh-CN.js.map +1 -1
  71. package/dist/vue3/types/common/mixins/keyboard_list_navigation.d.ts.map +1 -1
  72. package/dist/vue3/types/components/loader/loader.vue.d.ts +1 -32
  73. package/dist/vue3/types/components/loader/loader.vue.d.ts.map +1 -1
  74. package/dist/vue3/types/components/progress_circle/index.d.ts +3 -0
  75. package/dist/vue3/types/components/progress_circle/index.d.ts.map +1 -0
  76. package/dist/vue3/types/components/progress_circle/progress_circle.vue.d.ts +70 -0
  77. package/dist/vue3/types/components/progress_circle/progress_circle.vue.d.ts.map +1 -0
  78. package/dist/vue3/types/components/progress_circle/progress_circle_constants.d.ts +23 -0
  79. package/dist/vue3/types/components/progress_circle/progress_circle_constants.d.ts.map +1 -0
  80. package/dist/vue3/types/components/tooltip/tooltip.vue.d.ts +15 -0
  81. package/dist/vue3/types/components/tooltip/tooltip.vue.d.ts.map +1 -1
  82. package/dist/vue3/types/directives/tooltip_directive/tooltip.d.ts.map +1 -1
  83. package/dist/vue3/types/index.d.ts +1 -0
  84. package/dist/vue3/types/recipes/buttons/callbar_button/callbar_button.vue.d.ts +15 -0
  85. package/dist/vue3/types/recipes/buttons/callbar_button/callbar_button.vue.d.ts.map +1 -1
  86. package/dist/vue3/types/recipes/buttons/callbar_button_with_dropdown/callbar_button_with_dropdown.vue.d.ts +15 -0
  87. package/dist/vue3/types/recipes/buttons/callbar_button_with_dropdown/callbar_button_with_dropdown.vue.d.ts.map +1 -1
  88. package/dist/vue3/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts +15 -0
  89. package/dist/vue3/types/recipes/buttons/callbar_button_with_popover/callbar_button_with_popover.vue.d.ts.map +1 -1
  90. package/dist/vue3/types/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.d.ts +44 -4
  91. package/dist/vue3/types/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.d.ts +44 -4
  92. package/dist/vue3/types/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.d.ts.map +1 -1
  93. package/dist/vue3/types/recipes/conversation_view/emoji_row/emoji_row.vue.d.ts +15 -0
  94. package/dist/vue3/types/recipes/conversation_view/emoji_row/emoji_row.vue.d.ts.map +1 -1
  95. package/dist/vue3/types/recipes/conversation_view/message_input/message_input_button.vue.d.ts +15 -0
  96. package/dist/vue3/types/recipes/conversation_view/message_input/message_input_button.vue.d.ts.map +1 -1
  97. package/dist/vue3/types/recipes/conversation_view/message_input/message_input_link.vue.d.ts +15 -0
  98. package/dist/vue3/types/recipes/conversation_view/message_input/message_input_link.vue.d.ts.map +1 -1
  99. package/dist/vue3/types/recipes/conversation_view/message_input/message_input_topbar.vue.d.ts +15 -0
  100. package/dist/vue3/types/recipes/conversation_view/message_input/message_input_topbar.vue.d.ts.map +1 -1
  101. package/dist/vue3/types/recipes/leftbar/contact_row/contact_row.vue.d.ts +15 -0
  102. package/dist/vue3/types/recipes/leftbar/contact_row/contact_row.vue.d.ts.map +1 -1
  103. package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts +15 -0
  104. package/dist/vue3/types/recipes/leftbar/general_row/general_row.vue.d.ts.map +1 -1
  105. package/dist/vue3/types/recipes/leftbar/group_row/group_row.vue.d.ts +15 -0
  106. package/dist/vue3/types/recipes/leftbar/group_row/group_row.vue.d.ts.map +1 -1
  107. package/package.json +4 -4
  108. package/dist/vue3/types/recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue.d.ts +0 -30
  109. package/dist/vue3/types/recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue.d.ts.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,2 +1,2 @@
1
- "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"};function C(t,a,o,_,c,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),a[0]||(a[0]=e.createElementVNode("circle",{r:"8",cx:"12",cy:"12",class:"d-recipe-attachment-carousel__progress-bar-circle"},null,-1))],4))],8,w)}const b=d._(g,[["render",C]]),v={compatConfig:{MODE:3},name:"DtImageCarousel",components:{DtImageViewer:f.default,DtButton:p.default,DtIconClose:u.DtIconClose,DtProgressBar:b},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)}}},L={class:"d-recipe-attachment-carousel__image"},E={class:"d-recipe-attachment-carousel__image-top-right"};function I(t,a,o,_,c,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",L,[e.createVNode(n,{"image-button-class":"d-recipe-attachment-carousel__image-viewer","image-src":o.mediaItem.path,"image-alt":o.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",E,[o.mediaItem.isUploading?(e.openBlock(),e.createBlock(s,{key:0,class:"d-recipe-attachment-carousel__image-progress-bar",progress:o.mediaItem.progress,"aria-label":c.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:a[0]||(a[0]=l=>r.removeMediaItem(o.index))},{icon:e.withCtx(()=>[e.createVNode(m,{size:"200"})]),_:1},8,["id","aria-label","title"])])])}const B=d._(v,[["render",I]]),D=64,T={compatConfig:{MODE:3},name:"DtRecipeAttachmentCarousel",components:{DtButton:p.default,DtIconArrowRight:u.DtIconArrowRight,DtIconArrowLeft:u.DtIconArrowLeft,DtImageCarousel:B},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+D,this.$emit("remove-media",t)},closeButton(t,a){this.showCloseButton[a]=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"})}}},k={class:"d-recipe-attachment-carousel",role:"presentation"};function R(t,a,o,_,c,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",k,[o.mediaList.length>0?(e.openBlock(),e.createElementBlock("ul",{key:0,ref:"carousel",class:"d-recipe-attachment-carousel__media-list",onScroll:a[0]||(a[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:x=>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":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:r.leftScroll},{icon:e.withCtx(()=>[e.createVNode(n,{size:"100"})]),_:1},8,["aria-label","onClick"]),[[e.vShow,c.showLeftArrow]]),e.withDirectives(e.createVNode(s,{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:r.rightScroll},{icon:e.withCtx(()=>[e.createVNode(m,{size:"100"})]),_:1},8,["aria-label","onClick"]),[[e.vShow,c.showRightArrow]])])}const N=d._(T,[["render",R]]);exports.default=N;
1
+ "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;
2
2
  //# sourceMappingURL=attachment-carousel.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"attachment-carousel.cjs","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtProgressBar',\n props: {\n 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","_createElementBlock","$props","$options","_createElementVNode","_hoisted_2","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_hoisted_1","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_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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"}
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,74 +1,18 @@
1
- import { DtIconClose as v, DtIconArrowLeft as E, DtIconArrowRight as T } from "@dialpad/dialtone-icons/vue3";
2
- import { DialtoneLocalization as L } from "../../localization/index.js";
3
- import { openBlock as i, createElementBlock as n, normalizeStyle as R, createElementVNode as h, resolveComponent as s, createVNode as c, createBlock as b, createCommentVNode as C, withCtx as f, Fragment as D, renderList as x, resolveDynamicComponent as O, withDirectives as A, vShow as w } from "vue";
4
- import { _ as p } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
5
- import I from "../button/button.js";
6
- import B from "../image-viewer/image-viewer.js";
7
- const y = {
8
- compatConfig: { MODE: 3 },
9
- name: "DtProgressBar",
10
- props: {
11
- ariaLabel: {
12
- type: String,
13
- required: !0
14
- },
15
- progress: {
16
- type: Number,
17
- default: 20
18
- }
19
- },
20
- data: () => ({
21
- circleCircumference: 50
22
- }),
23
- computed: {
24
- cssVars() {
25
- return {
26
- "--stroke-dashoffset": this.circleCircumference - this.circleCircumference * this.progress / 100,
27
- "--stroke-dasharray": this.circleCircumference
28
- };
29
- }
30
- },
31
- mounted() {
32
- this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
33
- }
34
- }, M = ["aria-label", "aria-valuenow"], S = {
35
- ref: "progressbarCircle",
36
- r: "8",
37
- cx: "12",
38
- cy: "12",
39
- class: "d-recipe-attachment-carousel__progress-bar-circle"
40
- };
41
- function N(e, o, r, g, a, t) {
42
- return i(), n("div", {
43
- role: "progressbar",
44
- "aria-label": r.ariaLabel,
45
- tabindex: "-1",
46
- "aria-valuenow": r.progress,
47
- "aria-valuemin": "0",
48
- "aria-valuemax": "100"
49
- }, [
50
- (i(), n("svg", {
51
- class: "d-recipe-attachment-carousel__progress-bar",
52
- style: R(t.cssVars)
53
- }, [
54
- h("circle", S, null, 512),
55
- o[0] || (o[0] = h("circle", {
56
- r: "8",
57
- cx: "12",
58
- cy: "12",
59
- class: "d-recipe-attachment-carousel__progress-bar-circle"
60
- }, null, -1))
61
- ], 4))
62
- ], 8, M);
63
- }
64
- const $ = /* @__PURE__ */ p(y, [["render", N]]), k = {
1
+ import { DtIconClose as b, DtIconArrowLeft as v, DtIconArrowRight as R } from "@dialpad/dialtone-icons/vue3";
2
+ import { DialtoneLocalization as g } from "../../localization/index.js";
3
+ 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";
4
+ import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
5
+ import B from "../progress-circle/progress-circle.js";
6
+ import C from "../button/button.js";
7
+ import M from "../image-viewer/image-viewer.js";
8
+ const S = {
65
9
  compatConfig: { MODE: 3 },
66
10
  name: "DtImageCarousel",
67
11
  components: {
68
- DtImageViewer: B,
69
- DtButton: I,
70
- DtIconClose: v,
71
- DtProgressBar: $
12
+ DtImageViewer: M,
13
+ DtButton: C,
14
+ DtIconClose: b,
15
+ DtProgressCircle: B
72
16
  },
73
17
  props: {
74
18
  mediaItem: {
@@ -91,7 +35,7 @@ const $ = /* @__PURE__ */ p(y, [["render", N]]), k = {
91
35
  ],
92
36
  data() {
93
37
  return {
94
- i18n: new L()
38
+ i18n: new g()
95
39
  };
96
40
  },
97
41
  computed: {
@@ -104,24 +48,27 @@ const $ = /* @__PURE__ */ p(y, [["render", N]]), k = {
104
48
  this.$emit("remove-media", e);
105
49
  }
106
50
  }
107
- }, W = { class: "d-recipe-attachment-carousel__image" }, z = { class: "d-recipe-attachment-carousel__image-top-right" };
108
- function V(e, o, r, g, a, t) {
109
- const d = s("dt-image-viewer"), m = s("dt-progress-bar"), u = s("dt-icon-close"), l = s("dt-button");
110
- return i(), n("li", W, [
111
- c(d, {
51
+ }, 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" };
52
+ function y(e, o, r, E, i, t) {
53
+ const d = a("dt-image-viewer"), n = a("dt-progress-circle"), u = a("dt-icon-close"), c = a("dt-button");
54
+ return l(), _("li", x, [
55
+ s(d, {
112
56
  "image-button-class": "d-recipe-attachment-carousel__image-viewer",
113
57
  "image-src": r.mediaItem.path,
114
58
  "image-alt": r.mediaItem.altText,
115
- "aria-label": a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")
59
+ "aria-label": i.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL")
116
60
  }, null, 8, ["image-src", "image-alt", "aria-label"]),
117
- h("div", z, [
118
- r.mediaItem.isUploading ? (i(), b(m, {
119
- key: 0,
120
- class: "d-recipe-attachment-carousel__image-progress-bar",
121
- progress: r.mediaItem.progress,
122
- "aria-label": a.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")
123
- }, null, 8, ["progress", "aria-label"])) : C("", !0),
124
- c(l, {
61
+ f("div", N, [
62
+ f("span", k, [
63
+ r.mediaItem.isUploading ? (l(), w(n, {
64
+ key: 0,
65
+ kind: "brand",
66
+ size: "400",
67
+ progress: r.mediaItem.progress,
68
+ "aria-label": i.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL")
69
+ }, null, 8, ["progress", "aria-label"])) : L("", !0)
70
+ ]),
71
+ s(c, {
125
72
  id: `closeButton-${r.index}`,
126
73
  tabindex: "0",
127
74
  class: "d-recipe-attachment-carousel__image-close-button",
@@ -130,24 +77,24 @@ function V(e, o, r, g, a, t) {
130
77
  importance: "clear",
131
78
  "aria-label": t.closeButtonTitle,
132
79
  title: t.closeButtonTitle,
133
- onClick: o[0] || (o[0] = (_) => t.removeMediaItem(r.index))
80
+ onClick: o[0] || (o[0] = (m) => t.removeMediaItem(r.index))
134
81
  }, {
135
- icon: f(() => [
136
- c(u, { size: "200" })
82
+ icon: h(() => [
83
+ s(u, { size: "200" })
137
84
  ]),
138
85
  _: 1
139
86
  }, 8, ["id", "aria-label", "title"])
140
87
  ])
141
88
  ]);
142
89
  }
143
- const F = /* @__PURE__ */ p(k, [["render", V]]), U = 64, G = {
90
+ const W = /* @__PURE__ */ I(S, [["render", y]]), z = 64, $ = {
144
91
  compatConfig: { MODE: 3 },
145
92
  name: "DtRecipeAttachmentCarousel",
146
93
  components: {
147
- DtButton: I,
148
- DtIconArrowRight: T,
149
- DtIconArrowLeft: E,
150
- DtImageCarousel: F
94
+ DtButton: C,
95
+ DtIconArrowRight: R,
96
+ DtIconArrowLeft: v,
97
+ DtImageCarousel: W
151
98
  },
152
99
  /* inheritAttrs: false is generally an option we want to set on library
153
100
  components. This allows any attributes passed in that are not recognized
@@ -184,7 +131,7 @@ const F = /* @__PURE__ */ p(k, [["render", V]]), U = 64, G = {
184
131
  showRightArrow: !0,
185
132
  showLeftArrow: !1,
186
133
  isMounted: !1,
187
- i18n: new L()
134
+ i18n: new g()
188
135
  };
189
136
  },
190
137
  computed: {
@@ -208,7 +155,7 @@ const F = /* @__PURE__ */ p(k, [["render", V]]), U = 64, G = {
208
155
  }
209
156
  },
210
157
  removeMediaItem(e) {
211
- this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + U, this.$emit("remove-media", e);
158
+ this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + z, this.$emit("remove-media", e);
212
159
  },
213
160
  closeButton(e, o) {
214
161
  this.showCloseButton[o] = e;
@@ -230,63 +177,63 @@ const F = /* @__PURE__ */ p(k, [["render", V]]), U = 64, G = {
230
177
  });
231
178
  }
232
179
  }
233
- }, H = {
180
+ }, F = {
234
181
  class: "d-recipe-attachment-carousel",
235
182
  role: "presentation"
236
183
  };
237
- function P(e, o, r, g, a, t) {
238
- const d = s("dt-icon-arrow-left"), m = s("dt-button"), u = s("dt-icon-arrow-right");
239
- return i(), n("div", H, [
240
- r.mediaList.length > 0 ? (i(), n("ul", {
184
+ function U(e, o, r, E, i, t) {
185
+ const d = a("dt-icon-arrow-left"), n = a("dt-button"), u = a("dt-icon-arrow-right");
186
+ return l(), _("div", F, [
187
+ r.mediaList.length > 0 ? (l(), _("ul", {
241
188
  key: 0,
242
189
  ref: "carousel",
243
190
  class: "d-recipe-attachment-carousel__media-list",
244
- onScroll: o[0] || (o[0] = (...l) => t.handleScroll && t.handleScroll(...l))
191
+ onScroll: o[0] || (o[0] = (...c) => t.handleScroll && t.handleScroll(...c))
245
192
  }, [
246
- (i(!0), n(D, null, x(t.filteredMediaList, (l, _) => (i(), b(O(t.mediaComponent(l.type)), {
247
- key: `media-${_}`,
248
- index: _,
249
- "media-item": l,
250
- onRemoveMedia: (q) => t.removeMediaItem(_),
193
+ (l(!0), _(T, null, D(t.filteredMediaList, (c, m) => (l(), w(O(t.mediaComponent(c.type)), {
194
+ key: `media-${m}`,
195
+ index: m,
196
+ "media-item": c,
197
+ onRemoveMedia: (V) => t.removeMediaItem(m),
251
198
  onFocusin: t.onItemFocus
252
199
  }, null, 40, ["index", "media-item", "onRemoveMedia", "onFocusin"]))), 128))
253
- ], 544)) : C("", !0),
254
- A(c(m, {
200
+ ], 544)) : L("", !0),
201
+ p(s(n, {
255
202
  tabindex: "-1",
256
- "aria-label": a.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),
203
+ "aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"),
257
204
  class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left",
258
205
  circle: "",
259
206
  size: "xs",
260
207
  importance: "clear",
261
208
  onClick: t.leftScroll
262
209
  }, {
263
- icon: f(() => [
264
- c(d, { size: "100" })
210
+ icon: h(() => [
211
+ s(d, { size: "100" })
265
212
  ]),
266
213
  _: 1
267
214
  }, 8, ["aria-label", "onClick"]), [
268
- [w, a.showLeftArrow]
215
+ [A, i.showLeftArrow]
269
216
  ]),
270
- A(c(m, {
217
+ p(s(n, {
271
218
  tabindex: "-1",
272
- "aria-label": a.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),
219
+ "aria-label": i.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"),
273
220
  class: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right",
274
221
  circle: "",
275
222
  size: "xs",
276
223
  importance: "clear",
277
224
  onClick: t.rightScroll
278
225
  }, {
279
- icon: f(() => [
280
- c(u, { size: "100" })
226
+ icon: h(() => [
227
+ s(u, { size: "100" })
281
228
  ]),
282
229
  _: 1
283
230
  }, 8, ["aria-label", "onClick"]), [
284
- [w, a.showRightArrow]
231
+ [A, i.showRightArrow]
285
232
  ])
286
233
  ]);
287
234
  }
288
- const Z = /* @__PURE__ */ p(G, [["render", P]]);
235
+ const Q = /* @__PURE__ */ I($, [["render", U]]);
289
236
  export {
290
- Z as default
237
+ Q as default
291
238
  };
292
239
  //# sourceMappingURL=attachment-carousel.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"attachment-carousel.js","sources":["../../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtProgressBar',\n props: {\n 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","_createElementBlock","$props","$options","_createElementVNode","_hoisted_2","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_hoisted_1","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_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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"}
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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"}