@dialpad/dialtone 9.124.0 → 9.125.0

package/dist/vue2/lib/message-input/message-input.js

@@ -2,63 +2,69 @@ import l from "./last-active-nodes.js";
 import { Node as c, mergeAttributes as u } from "@tiptap/core";
 import { NodeViewWrapper as d, nodeViewProps as p, VueNodeViewRenderer as m } from "../../node_modules/@tiptap/vue-2.js";
 import { DtIconClose as h, DtIconVideo as f, DtIconImage as g, DtIconVerySatisfied as b, DtIconSatisfied as k, DtIconSend as _ } from "@dialpad/dialtone-icons/vue2";
-import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import x from "../item-layout/item-layout.js";
-import r from "../button/button.js";
-import T from "./message-input-topbar.js";
-import v from "./message-input-link.js";
-import { EDITOR_SUPPORTED_LINK_PROTOCOLS as L, EDITOR_DEFAULT_LINK_PREFIX as y } from "../editor/editor-constants.js";
-import S from "../emoji-picker/emoji-picker.js";
-import w from "../input/input.js";
-import O from "../popover/popover.js";
-import I from "../rich-text-editor/rich-text-editor.js";
-import C from "../tooltip/tooltip.js";
-import j from "../stack/stack.js";
-import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as B, RICH_TEXT_EDITOR_OUTPUT_FORMATS as P } from "../rich-text-editor/rich-text-editor-constants.js";
-const D = {
+import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import T from "../item-layout/item-layout.js";
+import a from "../button/button.js";
+import r from "../../common/mixins/localization.js";
+import v from "./message-input-topbar.js";
+import L from "./message-input-link.js";
+import { EDITOR_SUPPORTED_LINK_PROTOCOLS as S, EDITOR_DEFAULT_LINK_PREFIX as x } from "../editor/editor-constants.js";
+import y from "../emoji-picker/emoji-picker.js";
+import O from "../input/input.js";
+import I from "../popover/popover.js";
+import B from "../rich-text-editor/rich-text-editor.js";
+import E from "../tooltip/tooltip.js";
+import P from "../stack/stack.js";
+import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as w, RICH_TEXT_EDITOR_OUTPUT_FORMATS as C } from "../rich-text-editor/rich-text-editor-constants.js";
+const j = {
   name: "MeetingPill",
   components: {
     NodeViewWrapper: d,
-    DtItemLayout: x,
+    DtItemLayout: T,
     DtIconClose: h,
-    DtButton: r,
+    DtButton: a,
     DtIconVideo: f
   },
+  mixins: [r],
   props: p,
   emits: ["meeting-pill-close"],
+  computed: {
+    closeButtonTitle() {
+      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
+    }
+  },
   methods: {
     close(t) {
       this.$parent.$emit("meeting-pill-close", t);
     }
   }
 };
-var $ = function() {
+var D = function() {
   var e = this, i = e._self._c;
   return i("node-view-wrapper", { staticClass: "d-recipe-message-input-meeting-pill" }, [i("dt-item-layout", { staticClass: "d-recipe-message-input-meeting-pill__layout", attrs: { unstyled: "" }, scopedSlots: e._u([{ key: "left", fn: function() {
     return [i("div", { staticClass: "d-recipe-message-input-meeting-pill__icon" }, [i("dt-icon-video", { attrs: { size: "400" } })], 1)];
   }, proxy: !0 }, { key: "right", fn: function() {
-    return [i("div", { staticClass: "d-recipe-message-input-meeting-pill__close" }, [i("dt-button", { attrs: { circle: "", "aria-label": e.node.attrs["close-button-aria-label"], size: "xs", importance: "clear" }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [i("div", { staticClass: "d-recipe-message-input-meeting-pill__close" }, [i("dt-button", { attrs: { circle: "", importance: "clear", size: "xs", "aria-label": e.closeButtonTitle, title: e.closeButtonTitle }, on: { click: e.close }, scopedSlots: e._u([{ key: "icon", fn: function() {
       return [i("dt-icon-close", { attrs: { size: "300" } })];
     }, proxy: !0 }]) })], 1)];
   }, proxy: !0 }]) }, [e._v(" " + e._s(e.node.attrs.text) + " ")])], 1);
-}, E = [], M = /* @__PURE__ */ a(
+}, $ = [], A = /* @__PURE__ */ s(
+  j,
   D,
-  $,
-  E
+  $
 );
-const F = M.exports, A = c.create({
+const M = A.exports, N = c.create({
   atom: !0,
   group: "inline",
   inline: !0,
   addNodeView() {
-    return m(F);
+    return m(M);
   },
   addAttributes() {
     return {
       text: {
         default: 'Please pass in "text" attribute'
-      },
-      "close-button-aria-label": {}
+      }
     };
   },
   parseHTML() {
@@ -74,24 +80,24 @@ const F = M.exports, A = c.create({
   renderHTML({ HTMLAttributes: t }) {
     return ["meeting-pill", u(t)];
   }
-}), R = {
+}), F = {
   name: "DtRecipeMessageInput",
   components: {
-    DtButton: r,
-    DtEmojiPicker: S,
-    DtInput: w,
-    DtPopover: O,
-    DtRecipeMessageInputTopbar: T,
-    DtRecipeMessageInputLink: v,
-    DtRichTextEditor: I,
-    DtTooltip: C,
-    DtStack: j,
+    DtButton: a,
+    DtEmojiPicker: y,
+    DtInput: O,
+    DtPopover: I,
+    DtRecipeMessageInputTopbar: v,
+    DtRecipeMessageInputLink: L,
+    DtRichTextEditor: B,
+    DtTooltip: E,
+    DtStack: P,
     DtIconImage: g,
     DtIconVerySatisfied: b,
     DtIconSatisfied: k,
     DtIconSend: _
   },
-  mixins: [],
+  mixins: [r],
   inheritAttrs: !1,
   props: {
     /**
@@ -160,7 +166,7 @@ const F = M.exports, A = c.create({
       type: [Boolean, String, Number],
       default: !1,
       validator(t) {
-        return typeof t == "string" ? B.includes(t) : !0;
+        return typeof t == "string" ? w.includes(t) : !0;
       }
     },
     /**
@@ -173,7 +179,7 @@ const F = M.exports, A = c.create({
       type: String,
       default: "json",
       validator(t) {
-        return P.includes(t);
+        return C.includes(t);
       }
     },
     /**
@@ -208,31 +214,7 @@ const F = M.exports, A = c.create({
      */
     emojiPickerProps: {
       type: Object,
-      default: () => ({}),
-      validate(t) {
-        return [
-          "searchNoResultsLabel",
-          "searchResultsLabel",
-          "searchPlaceholderLabel",
-          "skinSelectorButtonTooltipLabel",
-          "tabSetLabels"
-        ].every((e) => t[e] != null);
-      }
-    },
-    /**
-     * Emoji button tooltip label
-     */
-    emojiTooltipMessage: {
-      type: String,
-      default: "Emoji"
-    },
-    // Aria label for buttons
-    /**
-     * Emoji button aria label
-     */
-    emojiButtonAriaLabel: {
-      type: String,
-      default: "emoji button"
+      default: () => ({})
     },
     /**
      * Enable character Limit warning
@@ -243,21 +225,28 @@ const F = M.exports, A = c.create({
     },
     showImagePicker: {
       type: [Boolean, Object],
-      default: () => ({ tooltipLabel: "Attach Image", ariaLabel: "image button" })
+      default: () => ({})
     },
     /**
      * Send button defaults.
+     * TODO (Dialtone 10):
+     * - Change to `showSendButton`, boolean only.
      */
     showSend: {
       type: [Boolean, Object],
       default: () => ({})
     },
+    /**
+     * TODO (Dialtone 10):
+     * - Add a prop `iconOnly` default: true to control if localized send button text should be shown
+     */
     /**
      * Cancel button defaults.
+     * TODO (Dialtone 10): Change to `showCancelButton`, boolean only.
      */
     showCancel: {
       type: [Boolean, Object],
-      default: () => ({ text: "Cancel" })
+      default: () => ({})
     },
     /**
      * suggestion object containing the items query function.
@@ -310,13 +299,11 @@ const F = M.exports, A = c.create({
      * descriptive text fields for the bold button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     boldButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle bold on selected text",
-        tooltipText: "Bold",
         keyboardShortcutText: "Mod + B"
       })
     },
@@ -324,13 +311,11 @@ const F = M.exports, A = c.create({
      * descriptive text fields for the italic button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     italicButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle italic on selected text",
-        tooltipText: "Italic",
         keyboardShortcutText: "Mod + I"
       })
     },
@@ -338,13 +323,11 @@ const F = M.exports, A = c.create({
      * descriptive text fields for the strikethrough button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     strikeButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle strikethrough on selected text",
-        tooltipText: "Strikethrough",
         keyboardShortcutText: "Mod + Shift + S"
       })
     },
@@ -352,36 +335,25 @@ const F = M.exports, A = c.create({
      * descriptive text fields for the link button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     linkButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Create or edit link on selected text",
-        tooltipText: "Link",
         // TODO: implement mod k
         keyboardShortcutText: "Mod + K",
-        dialogTitle: "Add a link",
-        textLabel: "Text to display (optional)",
-        linkLabel: "Link",
-        linkPlaceholder: "e.g. https://www.dialpad.com",
-        removeLabel: "Remove",
-        cancelLabel: "Cancel",
-        confirmLabel: "Done",
-        visuallyHiddenCloseText: "Close link dialog"
+        linkPlaceholder: "e.g. https://www.dialpad.com"
       })
     },
     /**
      * descriptive text fields for the bullet list button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     bulletListButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle bullet list on selected text",
-        tooltipText: "Bullet list",
         keyboardShortcutText: "Mod + Shift + 8"
       })
     },
@@ -389,13 +361,11 @@ const F = M.exports, A = c.create({
      * descriptive text fields for the ordered list button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     orderedListButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle ordered list on selected text",
-        tooltipText: "Ordered list",
         keyboardShortcutText: "Mod + Shift + 7"
       })
     },
@@ -403,13 +373,11 @@ const F = M.exports, A = c.create({
      * descriptive text fields for the italic button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     blockQuoteButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle Blockquote on selected text",
-        tooltipText: "Blockquote",
         keyboardShortcutText: "Mod + Shift + B"
       })
     },
@@ -417,13 +385,11 @@ const F = M.exports, A = c.create({
      * descriptive text fields for the code button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     codeButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle code tag on selected text",
-        tooltipText: "Code",
         keyboardShortcutText: "Mod + E"
       })
     },
@@ -431,13 +397,11 @@ const F = M.exports, A = c.create({
      * descriptive text fields for the code block button
      *
      * object format:
-     * { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
+     * { keyboardShortcutText: string }
      */
     codeBlockButtonOptions: {
       type: Object,
       default: () => ({
-        ariaLabel: "Toggle code block on selected text",
-        tooltipText: "Code block",
         keyboardShortcutText: "Mod + Alt + C"
       })
     }
@@ -530,7 +494,7 @@ const F = M.exports, A = c.create({
       // If an ordered list is nested within an unordered list, we only want to show the currently selected list as
       // active. This function performs the logic to determine the farthest active node from the root.
       lastActiveNodes: l,
-      additionalExtensions: [A],
+      additionalExtensions: [N],
       internalInputValue: this.value,
       // internal input content
       imagePickerFocus: !1,
@@ -562,16 +526,23 @@ const F = M.exports, A = c.create({
     isSendDisabled() {
       return this.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
     },
-    computedCloseButtonProps() {
-      return {
-        ariaLabel: "Close"
-      };
-    },
     emojiPickerHovered() {
       return this.emojiPickerFocus || this.emojiPickerOpened;
     },
     sendIconSize() {
       return "300";
+    },
+    sendButtonLabel() {
+      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_SEND_BUTTON_ARIA_LABEL");
+    },
+    imagePickerButtonLabel() {
+      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_IMAGE_PICKER_BUTTON_ARIA_LABEL");
+    },
+    emojiPickerButtonLabel() {
+      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_EMOJI_PICKER_BUTTON_ARIA_LABEL");
+    },
+    cancelButtonLabel() {
+      return this.i18n.$t("DIALTONE_MESSAGE_INPUT_CANCEL_BUTTON_ARIA_LABEL");
     }
   },
   watch: {
@@ -624,8 +595,8 @@ const F = M.exports, A = c.create({
         e,
         t,
         this.linkOptions,
-        L,
-        y
+        S,
+        x
       ), this.linkDialogOpen = !1;
     },
     // Mousedown instead of click because it fires before the blur event.
@@ -677,72 +648,70 @@ const F = M.exports, A = c.create({
     }
   }
 };
-var q = function() {
-  var n;
+var R = function() {
   var e = this, i = e._self._c;
-  return i("div", { staticClass: "d-recipe-message-input", attrs: { "data-qa": "dt-recipe-message-input", role: "presentation" }, on: { dragover: function(o) {
-    o.preventDefault();
-  }, drop: function(o) {
-    return o.preventDefault(), e.onDrop.apply(null, arguments);
+  return i("div", { staticClass: "d-recipe-message-input", attrs: { "data-qa": "dt-recipe-message-input", role: "presentation" }, on: { dragover: function(n) {
+    n.preventDefault();
+  }, drop: function(n) {
+    return n.preventDefault(), e.onDrop.apply(null, arguments);
   }, paste: e.onPaste, mousedown: e.onMousedown } }, [e._t("top"), e.richText ? i("dt-recipe-message-input-topbar", { key: e.selectedText, attrs: { "bold-button-options": e.boldButtonOptions, "italic-button-options": e.italicButtonOptions, "strike-button-options": e.strikeButtonOptions, "bullet-list-button-options": e.bulletListButtonOptions, "ordered-list-button-options": e.orderedListButtonOptions, "block-quote-button-options": e.blockQuoteButtonOptions, "code-button-options": e.codeButtonOptions, "code-block-button-options": e.codeBlockButtonOptions, "is-selection-active": e.isSelectionActive }, on: { click: e.handleTopbarClick }, scopedSlots: e._u([{ key: "link", fn: function() {
     return [i("dt-recipe-message-input-link", { ref: "link", attrs: { open: e.linkDialogOpen, "link-button-options": e.linkButtonOptions, "is-selection-active": e.isSelectionActive }, on: { opened: e.linkDialogOpened, "set-link": e.setLink, "remove-link": e.removeLink } })];
-  }, proxy: !0 }], null, !1, 1527282285) }) : e._e(), i("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "d-recipe-message-input__editor-wrapper", style: { "max-height": e.maxHeight } }, [i("dt-rich-text-editor", e._g(e._b({ ref: "richTextEditor", attrs: { editable: e.editable, "input-aria-label": e.inputAriaLabel, "input-class": e.inputClass, "output-format": e.outputFormat, "auto-focus": e.autoFocus, link: e.richText, placeholder: e.placeholder, "prevent-typing": e.preventTyping, "mention-suggestion": e.mentionSuggestion, "channel-suggestion": e.channelSuggestion, "slash-command-suggestion": e.slashCommandSuggestion, "allow-blockquote": e.richText, "allow-bold": e.richText, "allow-bullet-list": e.richText, "allow-code": e.richText, "allow-codeblock": e.richText, "allow-italic": e.richText, "allow-strike": e.richText, "allow-underline": e.richText, "additional-extensions": e.additionalExtensions, "hide-link-bubble-menu": e.hideLinkBubbleMenu }, on: { input: e.onInput, "text-input": e.onTextInput, enter: e.onSend, selected: function(o) {
-    e.selectedText = o;
-  }, "edit-link": e.initLinkDialog, focus: function(o) {
+  }, proxy: !0 }], null, !1, 1527282285) }) : e._e(), i("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "d-recipe-message-input__editor-wrapper", style: { "max-height": e.maxHeight } }, [i("dt-rich-text-editor", e._g(e._b({ ref: "richTextEditor", attrs: { editable: e.editable, "input-aria-label": e.inputAriaLabel, "input-class": e.inputClass, "output-format": e.outputFormat, "auto-focus": e.autoFocus, link: e.richText, placeholder: e.placeholder, "prevent-typing": e.preventTyping, "mention-suggestion": e.mentionSuggestion, "channel-suggestion": e.channelSuggestion, "slash-command-suggestion": e.slashCommandSuggestion, "paste-rich-text": e.richText, "allow-blockquote": e.richText, "allow-bold": e.richText, "allow-bullet-list": e.richText, "allow-code": e.richText, "allow-codeblock": e.richText, "allow-italic": e.richText, "allow-strike": e.richText, "allow-underline": e.richText, "additional-extensions": e.additionalExtensions, "hide-link-bubble-menu": e.hideLinkBubbleMenu }, on: { input: e.onInput, "text-input": e.onTextInput, enter: e.onSend, selected: function(n) {
+    e.selectedText = n;
+  }, "edit-link": e.initLinkDialog, focus: function(n) {
     e.isFocused = !0;
-  }, blur: function(o) {
+  }, blur: function(n) {
     e.isFocused = !1;
-  } }, model: { value: e.internalInputValue, callback: function(o) {
-    e.internalInputValue = o;
-  }, expression: "internalInputValue" } }, "dt-rich-text-editor", e.$attrs, !1), e.$listeners))], 1), e._t("middle"), i("section", { staticClass: "d-recipe-message-input__bottom-section" }, [i("div", { staticClass: "d-recipe-message-input__bottom-section-left" }, [i("dt-stack", { attrs: { direction: "row", gap: "200" } }, [e.showImagePicker ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-start", value: (n = e.showImagePicker) == null ? void 0 : n.tooltipLabel, expression: "showImagePicker?.tooltipLabel", arg: "top-start" }], staticClass: "d-recipe-message-input__button", attrs: { "data-qa": "dt-recipe-message-input-image-btn", size: "sm", kind: "muted", importance: "clear", "aria-label": e.showImagePicker.ariaLabel }, on: { click: e.onSelectImage, mouseenter: function(o) {
+  } }, model: { value: e.internalInputValue, callback: function(n) {
+    e.internalInputValue = n;
+  }, expression: "internalInputValue" } }, "dt-rich-text-editor", e.$attrs, !1), e.$listeners))], 1), e._t("middle"), i("section", { staticClass: "d-recipe-message-input__bottom-section" }, [i("div", { staticClass: "d-recipe-message-input__bottom-section-left" }, [i("dt-stack", { attrs: { direction: "row", gap: "200" } }, [e.showImagePicker ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-start", value: e.imagePickerButtonLabel, expression: "imagePickerButtonLabel", arg: "top-start" }], staticClass: "d-recipe-message-input__button", attrs: { "data-qa": "dt-recipe-message-input-image-btn", size: "sm", kind: "muted", importance: "clear", "aria-label": e.imagePickerButtonLabel }, on: { click: e.onSelectImage, mouseenter: function(n) {
     e.imagePickerFocus = !0;
-  }, mouseleave: function(o) {
+  }, mouseleave: function(n) {
     e.imagePickerFocus = !1;
-  }, focus: function(o) {
+  }, focus: function(n) {
     e.imagePickerFocus = !0;
-  }, blur: function(o) {
+  }, blur: function(n) {
     e.imagePickerFocus = !1;
   } }, scopedSlots: e._u([{ key: "icon", fn: function() {
     return [i("dt-icon-image", { attrs: { size: "300" } })];
-  }, proxy: !0 }], null, !1, 4195307205) }) : e._e(), i("dt-input", { ref: "messageInputImageUpload", staticClass: "d-recipe-message-input__image-input", attrs: { "data-qa": "dt-recipe-message-input-image-input", accept: "image/*, video/*", type: "file", multiple: "", hidden: "" }, on: { input: e.onImageUpload } }), e.showEmojiPicker ? i("dt-popover", { attrs: { "open.sync": "emojiPickerOpened", "data-qa": "dt-recipe-message-input-emoji-picker-popover", "initial-focus-element": "#searchInput", padding: "none" }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: o }) {
-    return [i("dt-button", e._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: e.emojiTooltipMessage, expression: "emojiTooltipMessage" }], staticClass: "d-recipe-message-input__button", attrs: { "data-qa": "dt-recipe-message-input-emoji-picker-btn", size: "sm", kind: "muted", importance: "clear", "aria-label": e.emojiButtonAriaLabel }, on: { click: e.toggleEmojiPicker, mouseenter: function(s) {
+  }, proxy: !0 }], null, !1, 4195307205) }) : e._e(), i("dt-input", { ref: "messageInputImageUpload", staticClass: "d-recipe-message-input__image-input", attrs: { "data-qa": "dt-recipe-message-input-image-input", accept: "image/*, video/*", type: "file", multiple: "", hidden: "" }, on: { input: e.onImageUpload } }), e.showEmojiPicker ? i("dt-popover", { attrs: { "open.sync": "emojiPickerOpened", "data-qa": "dt-recipe-message-input-emoji-picker-popover", "initial-focus-element": "#searchInput", padding: "none" }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: n }) {
+    return [i("dt-button", e._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: e.emojiPickerButtonLabel, expression: "emojiPickerButtonLabel" }], staticClass: "d-recipe-message-input__button", attrs: { "data-qa": "dt-recipe-message-input-emoji-picker-btn", size: "sm", kind: "muted", importance: "clear", "aria-label": e.emojiPickerButtonLabel }, on: { click: e.toggleEmojiPicker, mouseenter: function(o) {
       e.emojiPickerFocus = !0;
-    }, mouseleave: function(s) {
+    }, mouseleave: function(o) {
       e.emojiPickerFocus = !1;
-    }, focus: function(s) {
+    }, focus: function(o) {
       e.emojiPickerFocus = !0;
-    }, blur: function(s) {
+    }, blur: function(o) {
       e.emojiPickerFocus = !1;
     } }, scopedSlots: e._u([{ key: "icon", fn: function() {
       return [e.emojiPickerHovered ? i("dt-icon-very-satisfied", { attrs: { size: "300" } }) : i("dt-icon-satisfied", { attrs: { size: "300" } })];
-    }, proxy: !0 }], null, !0) }, "dt-button", o, !1))];
-  } }, { key: "content", fn: function({ close: o }) {
-    return [i("dt-emoji-picker", e._b({ on: { "add-emoji": function(s) {
+    }, proxy: !0 }], null, !0) }, "dt-button", n, !1))];
+  } }, { key: "content", fn: function({ close: n }) {
+    return [i("dt-emoji-picker", e._b({ on: { "add-emoji": function(o) {
       return e.$emit("add-emoji");
-    }, "skin-tone": e.onSkinTone, "selected-emoji": (s) => e.onSelectEmoji(s, o) } }, "dt-emoji-picker", e.emojiPickerProps, !1))];
-  } }], null, !1, 4220830595) }) : e._e(), e._t("emojiGiphyPicker"), e._t("customActionIcons")], 2)], 1), i("div", { staticClass: "d-recipe-message-input__bottom-section-right" }, [i("dt-stack", { attrs: { direction: "row", gap: "300" } }, [i("div", { staticClass: "d-recipe-message-input__sms-count" }, [e._t("smsCount")], 2), e.showCharacterLimit ? i("dt-tooltip", { staticClass: "d-recipe-message-input__remaining-char-tooltip", attrs: { placement: "top-end", enabled: e.characterLimitTooltipEnabled, message: e.showCharacterLimit.message, offset: [10, 8] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
+    }, "skin-tone": e.onSkinTone, "selected-emoji": (o) => e.onSelectEmoji(o, n) } }, "dt-emoji-picker", e.emojiPickerProps, !1))];
+  } }], null, !1, 2292511006) }) : e._e(), e._t("emojiGiphyPicker"), e._t("customActionIcons")], 2)], 1), i("div", { staticClass: "d-recipe-message-input__bottom-section-right" }, [i("dt-stack", { attrs: { direction: "row", gap: "300" } }, [i("div", { staticClass: "d-recipe-message-input__sms-count" }, [e._t("smsCount")], 2), e.showCharacterLimit ? i("dt-tooltip", { staticClass: "d-recipe-message-input__remaining-char-tooltip", attrs: { placement: "top-end", enabled: e.characterLimitTooltipEnabled, message: e.showCharacterLimit.message, offset: [10, 8] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
     return [i("p", { directives: [{ name: "show", rawName: "v-show", value: e.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "d-recipe-message-input__remaining-char", attrs: { "data-qa": "dt-recipe-message-input-character-limit" } }, [e._v(" " + e._s(e.showCharacterLimit.count - e.inputLength) + " ")])];
-  }, proxy: !0 }], null, !1, 1021505058) }) : e._e(), e.showCancel ? i("dt-button", { staticClass: "d-recipe-message-input__button d-recipe-message-input__cancel-button", attrs: { "data-qa": "dt-recipe-message-input-cancel-button", size: "sm", kind: "muted", importance: "clear", "aria-label": e.showCancel.ariaLabel }, on: { click: e.onCancel } }, [i("p", [e._v(e._s(e.showCancel.text))])]) : e._e(), e._t("sendButton", function() {
-    var o;
-    return [e.showSend ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: (o = e.showSend) == null ? void 0 : o.tooltipLabel, expression: "showSend?.tooltipLabel", arg: "top-end" }], class: [
+  }, proxy: !0 }], null, !1, 1021505058) }) : e._e(), e.showCancel ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: e.cancelButtonLabel, expression: "cancelButtonLabel" }], staticClass: "d-recipe-message-input__button d-recipe-message-input__cancel-button", attrs: { "data-qa": "dt-recipe-message-input-cancel-button", size: "sm", kind: "muted", importance: "clear", "aria-label": e.cancelButtonLabel }, on: { click: e.onCancel } }, [i("p", [e._v(e._s(e.cancelButtonLabel))])]) : e._e(), e._t("sendButton", function() {
+    return [e.showSend ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: e.sendButtonLabel, expression: "sendButtonLabel", arg: "top-end" }], class: [
       "d-recipe-message-input__button d-recipe-message-input__send-button",
       {
         "d-recipe-message-input__send-button--disabled": e.isSendDisabled,
         "d-btn--icon-only": e.showSendIcon
       }
-    ], attrs: { "data-qa": "dt-recipe-message-input-send-btn", size: "sm", kind: "default", importance: "primary", "aria-label": e.showSend.ariaLabel, "aria-disabled": e.isSendDisabled }, on: { click: e.onSend }, scopedSlots: e._u([e.showSendIcon ? { key: "icon", fn: function() {
+    ], attrs: { "data-qa": "dt-recipe-message-input-send-btn", size: "sm", kind: "default", importance: "primary", "aria-label": e.sendButtonLabel, "aria-disabled": e.isSendDisabled }, on: { click: e.onSend }, scopedSlots: e._u([e.showSendIcon ? { key: "icon", fn: function() {
       return [e._t("sendIcon", function() {
         return [i("dt-icon-send", { attrs: { size: e.sendIconSize } })];
       }, { iconSize: e.sendIconSize })];
     }, proxy: !0 } : null], null, !0) }, [e.showSend.text ? [i("p", [e._v(e._s(e.showSend.text))])] : e._e()], 2) : e._e()];
   })], 2)], 1)])], 2);
-}, z = [], V = /* @__PURE__ */ a(
+}, U = [], z = /* @__PURE__ */ s(
+  F,
   R,
-  q,
-  z
+  U
 );
-const ae = V.exports;
+const re = z.exports;
 export {
-  ae as default
+  re as default
 };
 //# sourceMappingURL=message-input.js.map