@dialpad/dialtone 9.19.0 → 9.20.0

package/dist/vue3/message_input.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./rich_text_editor-fciM1V1t.cjs"),c=require("./emoji-q4ZpxDOX.cjs"),b=require("./emoji_picker-i3y8jyyY.cjs"),h=require("./tooltip-px-Nxl4C.cjs"),e=require("vue"),C={name:"DtRecipeMessageInput",components:{DtButton:c.DtButton,DtEmojiPicker:b._sfc_main,DtIcon:c.DtIcon,DtInput:c.DtInput,DtPopover:l.DtPopover,DtRichTextEditor:l.DtRichTextEditor,DtTooltip:h.DtTooltip},mixins:[],inheritAttrs:!1,props:{modelValue:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(n){return typeof n=="string"?l.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(n):!0}},outputFormat:{type:String,default:"text",validator(n){return l.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(n)}},link:{type:[Boolean,Object],default:!1},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({}),validate(n){return["searchNoResultsLabel","searchResultsLabel","searchPlaceholderLabel","skinSelectorButtonTooltipLabel","tabSetLabels"].every(t=>n[t]!=null)}},emojiTooltipMessage:{type:String,default:"Emoji"},emojiButtonAriaLabel:{type:String,default:"emoji button"},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({tooltipLabel:"Attach Image",ariaLabel:"image button"})},showSend:{type:[Boolean,Object],default:()=>({icon:"send"})},showCancel:{type:[Boolean,Object],default:()=>({text:"Cancel"})},mentionSuggestion:{type:Object,default:null}},emits:["submit","select-media","add-media","cancel","skin-tone","selected-emoji","focus","blur","input"],data(){return{internalInputValue:this.modelValue,hasFocus:!1,imagePickerFocus:!1,emojiPickerFocus:!1,sendButtonFocus:!1,emojiPickerOpened:!1}},computed:{inputLength(){return this.internalInputValue.length},displayCharacterLimitWarning(){return!!this.showCharacterLimit&&this.showCharacterLimit.count-this.inputLength<=this.showCharacterLimit.warning},characterLimitTooltipEnabled(){return this.showCharacterLimit.message&&this.showCharacterLimit.count-this.inputLength<0},isSendDisabled(){return this.inputLength===0||this.disableSend||this.showCharacterLimit&&this.inputLength>this.showCharacterLimit.count},computedCloseButtonProps(){return{ariaLabel:"Close"}},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened},sendButtonKind(){return this.isSendDisabled?"muted":"default"}},watch:{modelValue(n){this.internalInputValue=n}},methods:{onDrag(n){n.stopPropagation(),n.preventDefault()},onDrop(n){n.stopPropagation(),n.preventDefault();const t=n.dataTransfer,m=Array.from(t.files).map(s=>s.name);this.$emit("add-media",m)},onSkinTone(n){this.$emit("skin-tone",n)},onSelectEmoji(n){if(!n){this.emojiPickerOpened=!1;return}this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:n.shortname}}),this.emojiPickerOpened=!1,this.$emit("selected-emoji",n)},onSelectImage(){this.$refs.messageInputImageUpload.$refs.input.click()},onImageUpload(n){this.$emit("select-media",n)},toggleEmojiPicker(){this.emojiPickerOpened=!this.emojiPickerOpened},onSend(){this.isSendDisabled||this.$emit("submit",this.internalInputValue)},onCancel(){this.$emit("cancel")},onFocus(n){this.hasFocus=!0,this.$refs.richTextEditor.focusEditor(),this.$emit("focus",n)},onBlur(n){this.hasFocus=!1,this.$emit("blur",n)},onInput(n){this.$emit("input",n)}}},S={class:"d-d-flex d-jc-space-between d-mx8 d-my4"},w={class:"d-d-flex"},T={class:"d-d-flex"},j={key:0};function P(n,t,o,m,s,i){const p=e.resolveComponent("dt-rich-text-editor"),u=e.resolveComponent("dt-icon"),r=e.resolveComponent("dt-button"),g=e.resolveComponent("dt-input"),d=e.resolveComponent("dt-tooltip"),f=e.resolveComponent("dt-emoji-picker"),k=e.resolveComponent("dt-popover");return e.openBlock(),e.createElementBlock("div",{"data-qa":"dt-message-input",role:"presentation",class:e.normalizeClass(["d-d-flex","d-fd-column","d-bar8","d-baw1","d-ba","d-c-text",{"d-bc-bold d-bs-sm":s.hasFocus,"d-bc-default":!s.hasFocus}]),onClick:t[15]||(t[15]=a=>n.$refs.richTextEditor.focusEditor()),onDragEnter:t[16]||(t[16]=(...a)=>i.onDrag&&i.onDrag(...a)),onDragOver:t[17]||(t[17]=(...a)=>i.onDrag&&i.onDrag(...a)),onDrop:t[18]||(t[18]=(...a)=>i.onDrop&&i.onDrop(...a)),onKeydown:t[19]||(t[19]=e.withKeys(e.withModifiers((...a)=>i.onSend&&i.onSend(...a),["exact"]),["enter"]))},[e.createElementVNode("div",{class:"d-of-auto d-mx16 d-mt8 d-mb4",style:e.normalizeStyle({"max-height":o.maxHeight})},[e.createVNode(p,e.mergeProps({ref:"richTextEditor",modelValue:s.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=a=>s.internalInputValue=a),editable:o.editable,"input-aria-label":o.inputAriaLabel,"input-class":o.inputClass,"output-format":o.outputFormat,"auto-focus":o.autoFocus,link:o.link,placeholder:o.placeholder,"mention-suggestion":o.mentionSuggestion},n.$attrs,{onFocus:i.onFocus,onBlur:i.onBlur,onInput:t[1]||(t[1]=a=>i.onInput(a))}),null,16,["modelValue","editable","input-aria-label","input-class","output-format","auto-focus","link","placeholder","mention-suggestion","onFocus","onBlur"])],4),e.renderSlot(n.$slots,"middle"),e.createElementVNode("section",S,[e.createElementVNode("div",w,[o.showImagePicker?(e.openBlock(),e.createBlock(d,{key:0,placement:"top-start",message:o.showImagePicker.tooltipLabel,offset:[-4,-4]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-image-btn",size:"sm",circle:"",kind:s.imagePickerFocus?"default":"muted",importance:"clear","aria-label":o.showImagePicker.ariaLabel,onClick:i.onSelectImage,onMouseenter:t[2]||(t[2]=a=>s.imagePickerFocus=!0),onMouseleave:t[3]||(t[3]=a=>s.imagePickerFocus=!1),onFocus:t[4]||(t[4]=a=>s.imagePickerFocus=!0),onBlur:t[5]||(t[5]=a=>s.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(u,{name:"image",size:"300"})]),_:1},8,["kind","aria-label","onClick"]),e.createVNode(g,{ref:"messageInputImageUpload","data-qa":"dt-message-input-image-input",type:"file",class:"d-ps-absolute",multiple:"",hidden:"",onInput:i.onImageUpload},null,8,["onInput"])]),_:1},8,["message"])):e.createCommentVNode("",!0),o.showEmojiPicker?(e.openBlock(),e.createBlock(k,{key:1,"data-qa":"dt-message-input-emoji-picker-popover",open:s.emojiPickerOpened,"initial-focus-element":"#searchInput",padding:"none",onOpened:t[10]||(t[10]=a=>{s.emojiPickerOpened=a})},{anchor:e.withCtx(()=>[e.createVNode(d,{message:o.emojiTooltipMessage,offset:[0,-4]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-emoji-picker-btn",size:"sm",circle:"",kind:i.emojiPickerHovered?"default":"muted",importance:"clear","aria-label":o.emojiButtonAriaLabel,offset:[0,0],onClick:i.toggleEmojiPicker,onMouseenter:t[6]||(t[6]=a=>s.emojiPickerFocus=!0),onMouseleave:t[7]||(t[7]=a=>s.emojiPickerFocus=!1),onFocus:t[8]||(t[8]=a=>s.emojiPickerFocus=!0),onBlur:t[9]||(t[9]=a=>s.emojiPickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(u,{name:i.emojiPickerHovered?"very-satisfied":"satisfied",size:"300"},null,8,["name"])]),_:1},8,["kind","aria-label","onClick"])]),_:1},8,["message"])]),content:e.withCtx(()=>[e.createVNode(f,e.mergeProps(o.emojiPickerProps,{onSkinTone:i.onSkinTone,onSelectedEmoji:i.onSelectEmoji}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1},8,["open"])):e.createCommentVNode("",!0)]),e.createElementVNode("div",T,[o.showCharacterLimit?(e.openBlock(),e.createBlock(d,{key:0,class:"dt-message-input--remaining-char-tooltip",placement:"top-end",enabled:i.characterLimitTooltipEnabled,message:o.showCharacterLimit.message,offset:[10,-8]},{anchor:e.withCtx(()=>[e.withDirectives(e.createElementVNode("p",{class:"d-fc-error d-mr16 dt-message-input--remaining-char","data-qa":"dt-message-input-character-limit"},e.toDisplayString(o.showCharacterLimit.count-i.inputLength),513),[[e.vShow,i.displayCharacterLimitWarning]])]),_:1},8,["enabled","message"])):e.createCommentVNode("",!0),o.showCancel?(e.openBlock(),e.createBlock(r,{key:1,"data-qa":"dt-message-input-cancel-button",class:"dt-message-input--cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":o.showCancel.ariaLabel,onClick:i.onCancel},{default:e.withCtx(()=>[e.createElementVNode("p",null,e.toDisplayString(o.showCancel.text),1)]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0),o.showSend?(e.openBlock(),e.createBlock(d,{key:2,placement:"top-end",enabled:!o.showSend,message:o.showSend.tooltipLabel,show:!i.isSendDisabled&&s.sendButtonFocus,offset:[6,-8]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-send-btn",size:"sm",kind:i.sendButtonKind,circle:!!o.showSend.icon,importance:"primary",class:e.normalizeClass({"message-input-button__disabled d-fc-muted":i.isSendDisabled}),"aria-label":o.showSend.ariaLabel,"aria-disabled":i.isSendDisabled,onClick:i.onSend,onMouseenter:t[11]||(t[11]=a=>s.sendButtonFocus=!0),onMouseleave:t[12]||(t[12]=a=>s.sendButtonFocus=!1),onFocus:t[13]||(t[13]=a=>s.sendButtonFocus=!0),onBlur:t[14]||(t[14]=a=>s.sendButtonFocus=!1)},e.createSlots({default:e.withCtx(()=>[o.showSend.text?(e.openBlock(),e.createElementBlock("p",j,e.toDisplayString(o.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[o.showSend.icon?{name:"icon",fn:e.withCtx(()=>[e.createVNode(u,{name:o.showSend.icon,size:"300"},null,8,["name"])]),key:"0"}:void 0]),1032,["kind","circle","class","aria-label","aria-disabled","onClick"])]),_:1},8,["enabled","message","show"])):e.createCommentVNode("",!0)])])],34)}const v=h._export_sfc(C,[["render",P]]);exports.DtRichTextEditor=l.DtRichTextEditor;exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES=l.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES;exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS=l.RICH_TEXT_EDITOR_OUTPUT_FORMATS;exports.DtRecipeMessageInput=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./rich_text_editor-m8DM-vOU.cjs"),c=require("./emoji-q4ZpxDOX.cjs"),b=require("./emoji_picker-i3y8jyyY.cjs"),h=require("./tooltip-px-Nxl4C.cjs"),e=require("vue"),C={name:"DtRecipeMessageInput",components:{DtButton:c.DtButton,DtEmojiPicker:b._sfc_main,DtIcon:c.DtIcon,DtInput:c.DtInput,DtPopover:l.DtPopover,DtRichTextEditor:l.DtRichTextEditor,DtTooltip:h.DtTooltip},mixins:[],inheritAttrs:!1,props:{modelValue:{type:[Object,String],default:""},editable:{type:Boolean,default:!0},inputAriaLabel:{type:String,required:!0,default:""},inputClass:{type:String,default:""},autoFocus:{type:[Boolean,String,Number],default:!1,validator(o){return typeof o=="string"?l.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(o):!0}},outputFormat:{type:String,default:"text",validator(o){return l.RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(o)}},link:{type:[Boolean,Object],default:!1},placeholder:{type:String,default:""},disableSend:{type:Boolean,default:!1},maxHeight:{type:String,default:"unset"},showEmojiPicker:{type:Boolean,default:!0},emojiPickerProps:{type:Object,default:()=>({}),validate(o){return["searchNoResultsLabel","searchResultsLabel","searchPlaceholderLabel","skinSelectorButtonTooltipLabel","tabSetLabels"].every(t=>o[t]!=null)}},emojiTooltipMessage:{type:String,default:"Emoji"},emojiButtonAriaLabel:{type:String,default:"emoji button"},showCharacterLimit:{type:[Boolean,Object],default:()=>({count:1500,warning:500,message:""})},showImagePicker:{type:[Boolean,Object],default:()=>({tooltipLabel:"Attach Image",ariaLabel:"image button"})},showSend:{type:[Boolean,Object],default:()=>({icon:"send"})},showCancel:{type:[Boolean,Object],default:()=>({text:"Cancel"})},mentionSuggestion:{type:Object,default:null}},emits:["submit","select-media","add-media","cancel","skin-tone","selected-emoji","focus","blur","input"],data(){return{internalInputValue:this.modelValue,hasFocus:!1,imagePickerFocus:!1,emojiPickerFocus:!1,sendButtonFocus:!1,emojiPickerOpened:!1}},computed:{inputLength(){return this.internalInputValue.length},displayCharacterLimitWarning(){return!!this.showCharacterLimit&&this.showCharacterLimit.count-this.inputLength<=this.showCharacterLimit.warning},characterLimitTooltipEnabled(){return this.showCharacterLimit.message&&this.showCharacterLimit.count-this.inputLength<0},isSendDisabled(){return this.inputLength===0||this.disableSend||this.showCharacterLimit&&this.inputLength>this.showCharacterLimit.count},computedCloseButtonProps(){return{ariaLabel:"Close"}},emojiPickerHovered(){return this.emojiPickerFocus||this.emojiPickerOpened},sendButtonKind(){return this.isSendDisabled?"muted":"default"}},watch:{modelValue(o){this.internalInputValue=o}},methods:{onDrag(o){o.stopPropagation(),o.preventDefault()},onDrop(o){o.stopPropagation(),o.preventDefault();const t=o.dataTransfer,m=Array.from(t.files).map(s=>s.name);this.$emit("add-media",m)},onSkinTone(o){this.$emit("skin-tone",o)},onSelectEmoji(o){if(!o){this.emojiPickerOpened=!1;return}this.$refs.richTextEditor.editor.commands.insertContent({type:"emoji",attrs:{code:o.shortname}}),this.emojiPickerOpened=!1,this.$emit("selected-emoji",o)},onSelectImage(){this.$refs.messageInputImageUpload.$refs.input.click()},onImageUpload(){this.$emit("select-media",this.$refs.messageInputImageUpload.$refs.input.files)},toggleEmojiPicker(){this.emojiPickerOpened=!this.emojiPickerOpened},onSend(){this.isSendDisabled||this.$emit("submit",this.internalInputValue)},onCancel(){this.$emit("cancel")},onFocus(o){this.hasFocus=!0,this.$refs.richTextEditor.focusEditor(),this.$emit("focus",o)},onBlur(o){this.hasFocus=!1,this.$emit("blur",o)},onInput(o){this.$emit("input",o)}}},S={class:"d-d-flex d-jc-space-between d-mx8 d-my4"},w={class:"d-d-flex"},T={class:"d-d-flex"},j={key:0};function P(o,t,n,m,s,i){const p=e.resolveComponent("dt-rich-text-editor"),u=e.resolveComponent("dt-icon"),r=e.resolveComponent("dt-button"),g=e.resolveComponent("dt-input"),d=e.resolveComponent("dt-tooltip"),f=e.resolveComponent("dt-emoji-picker"),k=e.resolveComponent("dt-popover");return e.openBlock(),e.createElementBlock("div",{"data-qa":"dt-message-input",role:"presentation",class:e.normalizeClass(["d-d-flex","d-fd-column","d-bar8","d-baw1","d-ba","d-c-text",{"d-bc-bold d-bs-sm":s.hasFocus,"d-bc-default":!s.hasFocus}]),onClick:t[15]||(t[15]=a=>o.$refs.richTextEditor.focusEditor()),onDragEnter:t[16]||(t[16]=(...a)=>i.onDrag&&i.onDrag(...a)),onDragOver:t[17]||(t[17]=(...a)=>i.onDrag&&i.onDrag(...a)),onDrop:t[18]||(t[18]=(...a)=>i.onDrop&&i.onDrop(...a)),onKeydown:t[19]||(t[19]=e.withKeys(e.withModifiers((...a)=>i.onSend&&i.onSend(...a),["exact"]),["enter"]))},[e.createElementVNode("div",{class:"d-of-auto d-mx16 d-mt8 d-mb4",style:e.normalizeStyle({"max-height":n.maxHeight})},[e.createVNode(p,e.mergeProps({ref:"richTextEditor",modelValue:s.internalInputValue,"onUpdate:modelValue":t[0]||(t[0]=a=>s.internalInputValue=a),editable:n.editable,"input-aria-label":n.inputAriaLabel,"input-class":n.inputClass,"output-format":n.outputFormat,"auto-focus":n.autoFocus,link:n.link,placeholder:n.placeholder,"mention-suggestion":n.mentionSuggestion},o.$attrs,{onFocus:i.onFocus,onBlur:i.onBlur,onInput:t[1]||(t[1]=a=>i.onInput(a))}),null,16,["modelValue","editable","input-aria-label","input-class","output-format","auto-focus","link","placeholder","mention-suggestion","onFocus","onBlur"])],4),e.renderSlot(o.$slots,"middle"),e.createElementVNode("section",S,[e.createElementVNode("div",w,[n.showImagePicker?(e.openBlock(),e.createBlock(d,{key:0,placement:"top-start",message:n.showImagePicker.tooltipLabel,offset:[-4,-4]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-image-btn",size:"sm",circle:"",kind:s.imagePickerFocus?"default":"muted",importance:"clear","aria-label":n.showImagePicker.ariaLabel,onClick:i.onSelectImage,onMouseenter:t[2]||(t[2]=a=>s.imagePickerFocus=!0),onMouseleave:t[3]||(t[3]=a=>s.imagePickerFocus=!1),onFocus:t[4]||(t[4]=a=>s.imagePickerFocus=!0),onBlur:t[5]||(t[5]=a=>s.imagePickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(u,{name:"image",size:"300"})]),_:1},8,["kind","aria-label","onClick"]),e.createVNode(g,{ref:"messageInputImageUpload","data-qa":"dt-message-input-image-input",type:"file",class:"d-ps-absolute",multiple:"",hidden:"",onInput:i.onImageUpload},null,8,["onInput"])]),_:1},8,["message"])):e.createCommentVNode("",!0),n.showEmojiPicker?(e.openBlock(),e.createBlock(k,{key:1,"data-qa":"dt-message-input-emoji-picker-popover",open:s.emojiPickerOpened,"initial-focus-element":"#searchInput",padding:"none",onOpened:t[10]||(t[10]=a=>{s.emojiPickerOpened=a})},{anchor:e.withCtx(()=>[e.createVNode(d,{message:n.emojiTooltipMessage,offset:[0,-4]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-emoji-picker-btn",size:"sm",circle:"",kind:i.emojiPickerHovered?"default":"muted",importance:"clear","aria-label":n.emojiButtonAriaLabel,offset:[0,0],onClick:i.toggleEmojiPicker,onMouseenter:t[6]||(t[6]=a=>s.emojiPickerFocus=!0),onMouseleave:t[7]||(t[7]=a=>s.emojiPickerFocus=!1),onFocus:t[8]||(t[8]=a=>s.emojiPickerFocus=!0),onBlur:t[9]||(t[9]=a=>s.emojiPickerFocus=!1)},{icon:e.withCtx(()=>[e.createVNode(u,{name:i.emojiPickerHovered?"very-satisfied":"satisfied",size:"300"},null,8,["name"])]),_:1},8,["kind","aria-label","onClick"])]),_:1},8,["message"])]),content:e.withCtx(()=>[e.createVNode(f,e.mergeProps(n.emojiPickerProps,{onSkinTone:i.onSkinTone,onSelectedEmoji:i.onSelectEmoji}),null,16,["onSkinTone","onSelectedEmoji"])]),_:1},8,["open"])):e.createCommentVNode("",!0)]),e.createElementVNode("div",T,[n.showCharacterLimit?(e.openBlock(),e.createBlock(d,{key:0,class:"dt-message-input--remaining-char-tooltip",placement:"top-end",enabled:i.characterLimitTooltipEnabled,message:n.showCharacterLimit.message,offset:[10,-8]},{anchor:e.withCtx(()=>[e.withDirectives(e.createElementVNode("p",{class:"d-fc-error d-mr16 dt-message-input--remaining-char","data-qa":"dt-message-input-character-limit"},e.toDisplayString(n.showCharacterLimit.count-i.inputLength),513),[[e.vShow,i.displayCharacterLimitWarning]])]),_:1},8,["enabled","message"])):e.createCommentVNode("",!0),n.showCancel?(e.openBlock(),e.createBlock(r,{key:1,"data-qa":"dt-message-input-cancel-button",class:"dt-message-input--cancel-button",size:"sm",kind:"muted",importance:"clear","aria-label":n.showCancel.ariaLabel,onClick:i.onCancel},{default:e.withCtx(()=>[e.createElementVNode("p",null,e.toDisplayString(n.showCancel.text),1)]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0),n.showSend?(e.openBlock(),e.createBlock(d,{key:2,placement:"top-end",enabled:!n.showSend,message:n.showSend.tooltipLabel,show:!i.isSendDisabled&&s.sendButtonFocus,offset:[6,-8]},{anchor:e.withCtx(()=>[e.createVNode(r,{"data-qa":"dt-message-input-send-btn",size:"sm",kind:i.sendButtonKind,circle:!!n.showSend.icon,importance:"primary",class:e.normalizeClass({"message-input-button__disabled d-fc-muted":i.isSendDisabled}),"aria-label":n.showSend.ariaLabel,"aria-disabled":i.isSendDisabled,onClick:i.onSend,onMouseenter:t[11]||(t[11]=a=>s.sendButtonFocus=!0),onMouseleave:t[12]||(t[12]=a=>s.sendButtonFocus=!1),onFocus:t[13]||(t[13]=a=>s.sendButtonFocus=!0),onBlur:t[14]||(t[14]=a=>s.sendButtonFocus=!1)},e.createSlots({default:e.withCtx(()=>[n.showSend.text?(e.openBlock(),e.createElementBlock("p",j,e.toDisplayString(n.showSend.text),1)):e.createCommentVNode("",!0)]),_:2},[n.showSend.icon?{name:"icon",fn:e.withCtx(()=>[e.createVNode(u,{name:n.showSend.icon,size:"300"},null,8,["name"])]),key:"0"}:void 0]),1032,["kind","circle","class","aria-label","aria-disabled","onClick"])]),_:1},8,["enabled","message","show"])):e.createCommentVNode("",!0)])])],34)}const v=h._export_sfc(C,[["render",P]]);exports.DtRichTextEditor=l.DtRichTextEditor;exports.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES=l.RICH_TEXT_EDITOR_AUTOFOCUS_TYPES;exports.RICH_TEXT_EDITOR_OUTPUT_FORMATS=l.RICH_TEXT_EDITOR_OUTPUT_FORMATS;exports.DtRecipeMessageInput=v;

package/dist/vue3/message_input.js

@@ -1,14 +1,14 @@
-import { D as v, a as L, R as B, b as F } from "./rich_text_editor-S31F6RAP.js";
-import { t as D, w as I, x as E } from "./emoji-ifbDMGtx.js";
+import { D as v, a as L, R as B, b as F } from "./rich_text_editor-PlDAAo2K.js";
+import { t as I, w as D, x as E } from "./emoji-ifbDMGtx.js";
 import { _ as T } from "./emoji_picker-G6QLC4uN.js";
 import { _ as x, D as O } from "./tooltip-FcHJcgMd.js";
-import { resolveComponent as r, openBlock as u, createElementBlock as k, normalizeClass as S, withKeys as _, withModifiers as V, createElementVNode as d, normalizeStyle as M, createVNode as l, mergeProps as j, renderSlot as R, createBlock as c, withCtx as s, createCommentVNode as m, withDirectives as q, toDisplayString as p, vShow as z, createSlots as A } from "vue";
-const U = {
+import { resolveComponent as r, openBlock as u, createElementBlock as k, normalizeClass as S, withKeys as _, withModifiers as V, createElementVNode as d, normalizeStyle as M, createVNode as l, mergeProps as j, renderSlot as R, createBlock as c, withCtx as s, createCommentVNode as m, withDirectives as U, toDisplayString as p, vShow as q, createSlots as z } from "vue";
+const A = {
   name: "DtRecipeMessageInput",
   components: {
-    DtButton: D,
+    DtButton: I,
     DtEmojiPicker: T,
-    DtIcon: I,
+    DtIcon: D,
     DtInput: E,
     DtPopover: v,
     DtRichTextEditor: L,
@@ -63,8 +63,8 @@ const U = {
     autoFocus: {
       type: [Boolean, String, Number],
       default: !1,
-      validator(t) {
-        return typeof t == "string" ? B.includes(t) : !0;
+      validator(n) {
+        return typeof n == "string" ? B.includes(n) : !0;
       }
     },
     /**
@@ -76,8 +76,8 @@ const U = {
     outputFormat: {
       type: String,
       default: "text",
-      validator(t) {
-        return F.includes(t);
+      validator(n) {
+        return F.includes(n);
       }
     },
     /**
@@ -120,14 +120,14 @@ const U = {
     emojiPickerProps: {
       type: Object,
       default: () => ({}),
-      validate(t) {
+      validate(n) {
         return [
           "searchNoResultsLabel",
           "searchResultsLabel",
           "searchPlaceholderLabel",
           "skinSelectorButtonTooltipLabel",
           "tabSetLabels"
-        ].every((e) => t[e] != null);
+        ].every((e) => n[e] != null);
       }
     },
     /**
@@ -285,39 +285,39 @@ const U = {
     }
   },
   watch: {
-    modelValue(t) {
-      this.internalInputValue = t;
+    modelValue(n) {
+      this.internalInputValue = n;
     }
   },
   methods: {
-    onDrag(t) {
-      t.stopPropagation(), t.preventDefault();
+    onDrag(n) {
+      n.stopPropagation(), n.preventDefault();
     },
-    onDrop(t) {
-      t.stopPropagation(), t.preventDefault();
-      const e = t.dataTransfer, b = Array.from(e.files).map((a) => a.name);
+    onDrop(n) {
+      n.stopPropagation(), n.preventDefault();
+      const e = n.dataTransfer, b = Array.from(e.files).map((a) => a.name);
       this.$emit("add-media", b);
     },
-    onSkinTone(t) {
-      this.$emit("skin-tone", t);
+    onSkinTone(n) {
+      this.$emit("skin-tone", n);
     },
-    onSelectEmoji(t) {
-      if (!t) {
+    onSelectEmoji(n) {
+      if (!n) {
         this.emojiPickerOpened = !1;
         return;
       }
       this.$refs.richTextEditor.editor.commands.insertContent({
         type: "emoji",
         attrs: {
-          code: t.shortname
+          code: n.shortname
         }
-      }), this.emojiPickerOpened = !1, this.$emit("selected-emoji", t);
+      }), this.emojiPickerOpened = !1, this.$emit("selected-emoji", n);
     },
     onSelectImage() {
       this.$refs.messageInputImageUpload.$refs.input.click();
     },
-    onImageUpload(t) {
-      this.$emit("select-media", t);
+    onImageUpload() {
+      this.$emit("select-media", this.$refs.messageInputImageUpload.$refs.input.files);
     },
     toggleEmojiPicker() {
       this.emojiPickerOpened = !this.emojiPickerOpened;
@@ -328,19 +328,19 @@ const U = {
     onCancel() {
       this.$emit("cancel");
     },
-    onFocus(t) {
-      this.hasFocus = !0, this.$refs.richTextEditor.focusEditor(), this.$emit("focus", t);
+    onFocus(n) {
+      this.hasFocus = !0, this.$refs.richTextEditor.focusEditor(), this.$emit("focus", n);
     },
-    onBlur(t) {
-      this.hasFocus = !1, this.$emit("blur", t);
+    onBlur(n) {
+      this.hasFocus = !1, this.$emit("blur", n);
     },
-    onInput(t) {
-      this.$emit("input", t);
+    onInput(n) {
+      this.$emit("input", n);
     }
   }
 }, H = { class: "d-d-flex d-jc-space-between d-mx8 d-my4" }, N = { class: "d-d-flex" }, K = { class: "d-d-flex" }, W = { key: 0 };
-function X(t, e, n, b, a, i) {
-  const w = r("dt-rich-text-editor"), g = r("dt-icon"), f = r("dt-button"), P = r("dt-input"), h = r("dt-tooltip"), y = r("dt-emoji-picker"), C = r("dt-popover");
+function X(n, e, t, b, a, i) {
+  const w = r("dt-rich-text-editor"), h = r("dt-icon"), f = r("dt-button"), P = r("dt-input"), g = r("dt-tooltip"), y = r("dt-emoji-picker"), C = r("dt-popover");
   return u(), k("div", {
     "data-qa": "dt-message-input",
     role: "presentation",
@@ -353,7 +353,7 @@ function X(t, e, n, b, a, i) {
       "d-c-text",
       { "d-bc-bold d-bs-sm": a.hasFocus, "d-bc-default": !a.hasFocus }
     ]),
-    onClick: e[15] || (e[15] = (o) => t.$refs.richTextEditor.focusEditor()),
+    onClick: e[15] || (e[15] = (o) => n.$refs.richTextEditor.focusEditor()),
     onDragEnter: e[16] || (e[16] = (...o) => i.onDrag && i.onDrag(...o)),
     onDragOver: e[17] || (e[17] = (...o) => i.onDrag && i.onDrag(...o)),
     onDrop: e[18] || (e[18] = (...o) => i.onDrop && i.onDrop(...o)),
@@ -361,33 +361,33 @@ function X(t, e, n, b, a, i) {
   }, [
     d("div", {
       class: "d-of-auto d-mx16 d-mt8 d-mb4",
-      style: M({ "max-height": n.maxHeight })
+      style: M({ "max-height": t.maxHeight })
     }, [
       l(w, j({
         ref: "richTextEditor",
         modelValue: a.internalInputValue,
         "onUpdate:modelValue": e[0] || (e[0] = (o) => a.internalInputValue = o),
-        editable: n.editable,
-        "input-aria-label": n.inputAriaLabel,
-        "input-class": n.inputClass,
-        "output-format": n.outputFormat,
-        "auto-focus": n.autoFocus,
-        link: n.link,
-        placeholder: n.placeholder,
-        "mention-suggestion": n.mentionSuggestion
-      }, t.$attrs, {
+        editable: t.editable,
+        "input-aria-label": t.inputAriaLabel,
+        "input-class": t.inputClass,
+        "output-format": t.outputFormat,
+        "auto-focus": t.autoFocus,
+        link: t.link,
+        placeholder: t.placeholder,
+        "mention-suggestion": t.mentionSuggestion
+      }, n.$attrs, {
         onFocus: i.onFocus,
         onBlur: i.onBlur,
         onInput: e[1] || (e[1] = (o) => i.onInput(o))
       }), null, 16, ["modelValue", "editable", "input-aria-label", "input-class", "output-format", "auto-focus", "link", "placeholder", "mention-suggestion", "onFocus", "onBlur"])
     ], 4),
-    R(t.$slots, "middle"),
+    R(n.$slots, "middle"),
     d("section", H, [
       d("div", N, [
-        n.showImagePicker ? (u(), c(h, {
+        t.showImagePicker ? (u(), c(g, {
           key: 0,
           placement: "top-start",
-          message: n.showImagePicker.tooltipLabel,
+          message: t.showImagePicker.tooltipLabel,
           offset: [-4, -4]
         }, {
           anchor: s(() => [
@@ -397,7 +397,7 @@ function X(t, e, n, b, a, i) {
               circle: "",
               kind: a.imagePickerFocus ? "default" : "muted",
               importance: "clear",
-              "aria-label": n.showImagePicker.ariaLabel,
+              "aria-label": t.showImagePicker.ariaLabel,
               onClick: i.onSelectImage,
               onMouseenter: e[2] || (e[2] = (o) => a.imagePickerFocus = !0),
               onMouseleave: e[3] || (e[3] = (o) => a.imagePickerFocus = !1),
@@ -405,7 +405,7 @@ function X(t, e, n, b, a, i) {
               onBlur: e[5] || (e[5] = (o) => a.imagePickerFocus = !1)
             }, {
               icon: s(() => [
-                l(g, {
+                l(h, {
                   name: "image",
                   size: "300"
                 })
@@ -424,7 +424,7 @@ function X(t, e, n, b, a, i) {
           ]),
           _: 1
         }, 8, ["message"])) : m("", !0),
-        n.showEmojiPicker ? (u(), c(C, {
+        t.showEmojiPicker ? (u(), c(C, {
           key: 1,
           "data-qa": "dt-message-input-emoji-picker-popover",
           open: a.emojiPickerOpened,
@@ -435,8 +435,8 @@ function X(t, e, n, b, a, i) {
           })
         }, {
           anchor: s(() => [
-            l(h, {
-              message: n.emojiTooltipMessage,
+            l(g, {
+              message: t.emojiTooltipMessage,
               offset: [0, -4]
             }, {
               anchor: s(() => [
@@ -446,7 +446,7 @@ function X(t, e, n, b, a, i) {
                   circle: "",
                   kind: i.emojiPickerHovered ? "default" : "muted",
                   importance: "clear",
-                  "aria-label": n.emojiButtonAriaLabel,
+                  "aria-label": t.emojiButtonAriaLabel,
                   offset: [0, 0],
                   onClick: i.toggleEmojiPicker,
                   onMouseenter: e[6] || (e[6] = (o) => a.emojiPickerFocus = !0),
@@ -455,7 +455,7 @@ function X(t, e, n, b, a, i) {
                   onBlur: e[9] || (e[9] = (o) => a.emojiPickerFocus = !1)
                 }, {
                   icon: s(() => [
-                    l(g, {
+                    l(h, {
                       name: i.emojiPickerHovered ? "very-satisfied" : "satisfied",
                       size: "300"
                     }, null, 8, ["name"])
@@ -467,7 +467,7 @@ function X(t, e, n, b, a, i) {
             }, 8, ["message"])
           ]),
           content: s(() => [
-            l(y, j(n.emojiPickerProps, {
+            l(y, j(t.emojiPickerProps, {
               onSkinTone: i.onSkinTone,
               onSelectedEmoji: i.onSelectEmoji
             }), null, 16, ["onSkinTone", "onSelectedEmoji"])
@@ -476,44 +476,44 @@ function X(t, e, n, b, a, i) {
         }, 8, ["open"])) : m("", !0)
       ]),
       d("div", K, [
-        n.showCharacterLimit ? (u(), c(h, {
+        t.showCharacterLimit ? (u(), c(g, {
           key: 0,
           class: "dt-message-input--remaining-char-tooltip",
           placement: "top-end",
           enabled: i.characterLimitTooltipEnabled,
-          message: n.showCharacterLimit.message,
+          message: t.showCharacterLimit.message,
           offset: [10, -8]
         }, {
           anchor: s(() => [
-            q(d("p", {
+            U(d("p", {
               class: "d-fc-error d-mr16 dt-message-input--remaining-char",
               "data-qa": "dt-message-input-character-limit"
-            }, p(n.showCharacterLimit.count - i.inputLength), 513), [
-              [z, i.displayCharacterLimitWarning]
+            }, p(t.showCharacterLimit.count - i.inputLength), 513), [
+              [q, i.displayCharacterLimitWarning]
             ])
           ]),
           _: 1
         }, 8, ["enabled", "message"])) : m("", !0),
-        n.showCancel ? (u(), c(f, {
+        t.showCancel ? (u(), c(f, {
           key: 1,
           "data-qa": "dt-message-input-cancel-button",
           class: "dt-message-input--cancel-button",
           size: "sm",
           kind: "muted",
           importance: "clear",
-          "aria-label": n.showCancel.ariaLabel,
+          "aria-label": t.showCancel.ariaLabel,
           onClick: i.onCancel
         }, {
           default: s(() => [
-            d("p", null, p(n.showCancel.text), 1)
+            d("p", null, p(t.showCancel.text), 1)
           ]),
           _: 1
         }, 8, ["aria-label", "onClick"])) : m("", !0),
-        n.showSend ? (u(), c(h, {
+        t.showSend ? (u(), c(g, {
           key: 2,
           placement: "top-end",
-          enabled: !n.showSend,
-          message: n.showSend.tooltipLabel,
+          enabled: !t.showSend,
+          message: t.showSend.tooltipLabel,
           show: !i.isSendDisabled && a.sendButtonFocus,
           offset: [6, -8]
         }, {
@@ -522,29 +522,29 @@ function X(t, e, n, b, a, i) {
               "data-qa": "dt-message-input-send-btn",
               size: "sm",
               kind: i.sendButtonKind,
-              circle: !!n.showSend.icon,
+              circle: !!t.showSend.icon,
               importance: "primary",
               class: S({
                 "message-input-button__disabled d-fc-muted": i.isSendDisabled
               }),
-              "aria-label": n.showSend.ariaLabel,
+              "aria-label": t.showSend.ariaLabel,
               "aria-disabled": i.isSendDisabled,
               onClick: i.onSend,
               onMouseenter: e[11] || (e[11] = (o) => a.sendButtonFocus = !0),
               onMouseleave: e[12] || (e[12] = (o) => a.sendButtonFocus = !1),
               onFocus: e[13] || (e[13] = (o) => a.sendButtonFocus = !0),
               onBlur: e[14] || (e[14] = (o) => a.sendButtonFocus = !1)
-            }, A({
+            }, z({
               default: s(() => [
-                n.showSend.text ? (u(), k("p", W, p(n.showSend.text), 1)) : m("", !0)
+                t.showSend.text ? (u(), k("p", W, p(t.showSend.text), 1)) : m("", !0)
               ]),
               _: 2
             }, [
-              n.showSend.icon ? {
+              t.showSend.icon ? {
                 name: "icon",
                 fn: s(() => [
-                  l(g, {
-                    name: n.showSend.icon,
+                  l(h, {
+                    name: t.showSend.icon,
                     size: "300"
                   }, null, 8, ["name"])
                 ]),
@@ -558,7 +558,7 @@ function X(t, e, n, b, a, i) {
     ])
   ], 34);
 }
-const $ = /* @__PURE__ */ x(U, [["render", X]]);
+const $ = /* @__PURE__ */ x(A, [["render", X]]);
 export {
   $ as DtRecipeMessageInput,
   L as DtRichTextEditor,

package/dist/vue3/{rich_text_editor-S31F6RAP.js → rich_text_editor-PlDAAo2K.js}

@@ -377,8 +377,7 @@ const Lc = (n) => {
       this.imageLoadedSuccessfully = !1, n.classList.add("d-d-none");
     },
     validateProps() {
-      if (this.imageSrc && this.imageAlt === void 0)
-        throw new Error("full-name or image-alt must be set if image-src is provided");
+      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(n) {
       this.clickable && this.$emit("click", n);
@@ -16312,6 +16311,7 @@ function oy(n, e, t, r, i, s) {
       nt(o, {
         "full-name": s.name,
         "image-src": s.avatarSrc,
+        "image-alt": "",
         size: "xs"
       }, null, 8, ["full-name", "image-src"]),
       Wi(" " + ut(s.name), 1)