@dialpad/dialtone-vue 2.127.0 → 2.127.1

package/dist/lib/message-input.js

@@ -1,29 +1,29 @@
-import { n } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtButton as r } from "./button.js";
-import { DtEmojiPicker as s } from "./emoji-picker.js";
-import { DtIcon as l } from "./icon.js";
-import { DtInput as u } from "./input.js";
-import { DtPopover as c } from "./popover.js";
-import { DtRichTextEditor as m, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as p, RICH_TEXT_EDITOR_OUTPUT_FORMATS as d } from "./rich-text-editor.js";
-import { DtTooltip as f } from "./tooltip.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtButton } from "./button.js";
+import { DtEmojiPicker } from "./emoji-picker.js";
+import { DtIcon } from "./icon.js";
+import { DtInput } from "./input.js";
+import { DtPopover } from "./popover.js";
+import { DtRichTextEditor, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, RICH_TEXT_EDITOR_OUTPUT_FORMATS } from "./rich-text-editor.js";
+import { DtTooltip } from "./tooltip.js";
 import "vue";
-import "../chunks/link_constants-vIUB92L4.js";
-import "../chunks/tab-Qm9LVkYj.js";
+import "../chunks/link_constants-nWVlXQBs.js";
+import "../chunks/tab-V4cb44Ry.js";
 import "@dialpad/dialtone-emojis";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./constants.js";
-import "./utils.js";
-import "../chunks/input-1tm09l_-.js";
-import "./validators.js";
+import "../common/constants.js";
+import "../common/utils.js";
+import "../chunks/input-6kbd8Pju.js";
+import "../common/validators.js";
 import "./validation-messages.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
 import "./lazy-show.js";
 import "@linusborg/vue-simple-portal";
-import "../chunks/modal-VuMFkZFH.js";
-import "../chunks/sr_only_close_button-JGole5Xi.js";
+import "../chunks/modal-XOr4kiNZ.js";
+import "../chunks/sr_only_close_button-81bHIpPu.js";
 import "@tiptap/vue-2";
 import "@tiptap/extension-blockquote";
 import "@tiptap/extension-code-block";
@@ -42,34 +42,35 @@ import "@tiptap/extension-underline";
 import "@tiptap/extension-text";
 import "@tiptap/extension-text-align";
 import "@tiptap/core";
-import "../chunks/index-YkSDT8-g.js";
+import "./emoji.js";
+import "../common/emoji.js";
 import "emoji-regex";
 import "emoji-toolkit/emoji_strategy.json";
 import "./skeleton.js";
 import "@tiptap/pm/state";
 import "@tiptap/suggestion";
 import "./list-item.js";
-import "../chunks/list_item_constants-LTUc74pD.js";
+import "../chunks/list_item_constants-u1xcN9Dd.js";
 import "./item-layout.js";
 import "./stack.js";
-import "../chunks/stack_constants-u7tNqGtc.js";
+import "../chunks/stack_constants-HraCekPm.js";
 import "@tiptap/extension-mention";
 import "./link.js";
 import "./avatar.js";
 import "./presence.js";
-const h = {
+const _sfc_main = {
   name: "DtRecipeMessageInput",
   components: {
-    DtButton: r,
-    DtEmojiPicker: s,
-    DtIcon: l,
-    DtInput: u,
-    DtPopover: c,
-    DtRichTextEditor: m,
-    DtTooltip: f
+    DtButton,
+    DtEmojiPicker,
+    DtIcon,
+    DtInput,
+    DtPopover,
+    DtRichTextEditor,
+    DtTooltip
   },
   mixins: [],
-  inheritAttrs: !1,
+  inheritAttrs: false,
   props: {
     /**
      * Value of the input. The object format should match TipTap's JSON
@@ -84,14 +85,14 @@ const h = {
      */
     editable: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Descriptive label for the input element
      */
     inputAriaLabel: {
       type: String,
-      required: !0,
+      required: true,
       default: ""
     },
     /**
@@ -116,9 +117,12 @@ const h = {
      */
     autoFocus: {
       type: [Boolean, String, Number],
-      default: !1,
-      validator(t) {
-        return typeof t == "string" ? p.includes(t) : !0;
+      default: false,
+      validator(autoFocus) {
+        if (typeof autoFocus === "string") {
+          return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
+        }
+        return true;
       }
     },
     /**
@@ -130,8 +134,8 @@ const h = {
     outputFormat: {
       type: String,
       default: "text",
-      validator(t) {
-        return d.includes(t);
+      validator(outputFormat) {
+        return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
       }
     },
     /**
@@ -139,7 +143,7 @@ const h = {
      */
     link: {
       type: [Boolean, Object],
-      default: !1
+      default: false
     },
     /**
      * Placeholder text
@@ -153,7 +157,7 @@ const h = {
      */
     disableSend: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Content area needs to dynamically adjust height based on the conversation area height.
@@ -166,7 +170,7 @@ const h = {
     // Emoji picker props
     showEmojiPicker: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Props to pass into the emoji picker.
@@ -174,14 +178,14 @@ const h = {
     emojiPickerProps: {
       type: Object,
       default: () => ({}),
-      validate(t) {
+      validate(emojiPickerProps) {
         return [
           "searchNoResultsLabel",
           "searchResultsLabel",
           "searchPlaceholderLabel",
           "skinSelectorButtonTooltipLabel",
           "tabSetLabels"
-        ].every((e) => t[e] != null);
+        ].every((prop) => emojiPickerProps[prop] != null);
       }
     },
     /**
@@ -244,42 +248,42 @@ const h = {
      */
     allowBlockquote: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for bold to be introduced in the text.
      */
     allowBold: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for bullet list to be introduced in the text.
     */
     allowBulletList: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for italic to be introduced in the text.
      */
     allowItalic: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for strike to be introduced in the text.
      */
     allowStrike: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Whether the input allows for underline to be introduced in the text.
      */
     allowUnderline: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
   emits: [
@@ -355,11 +359,11 @@ const h = {
     return {
       internalInputValue: this.value,
       // internal input content
-      hasFocus: !1,
-      imagePickerFocus: !1,
-      emojiPickerFocus: !1,
-      sendButtonFocus: !1,
-      emojiPickerOpened: !1
+      hasFocus: false,
+      imagePickerFocus: false,
+      emojiPickerFocus: false,
+      sendButtonFocus: false,
+      emojiPickerOpened: false
     };
   },
   computed: {
@@ -367,7 +371,7 @@ const h = {
       return this.internalInputValue.length;
     },
     displayCharacterLimitWarning() {
-      return !!this.showCharacterLimit && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
+      return Boolean(this.showCharacterLimit) && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
     },
     characterLimitTooltipEnabled() {
       return this.showCharacterLimit.message && this.showCharacterLimit.count - this.inputLength < 0;
@@ -385,40 +389,46 @@ const h = {
     }
   },
   watch: {
-    value(t) {
-      this.internalInputValue = t;
+    value(newValue) {
+      this.internalInputValue = newValue;
     }
   },
   methods: {
-    onDrag(t) {
-      t.stopPropagation(), t.preventDefault();
-    },
-    onDrop(t) {
-      t.stopPropagation(), t.preventDefault();
-      const e = t.dataTransfer, i = Array.from(e.files);
-      this.$emit("add-media", i);
-    },
-    onPaste(t) {
-      if (t.clipboardData.files.length) {
-        t.stopPropagation(), t.preventDefault();
-        const e = [...t.clipboardData.files];
-        this.$emit("paste-media", e);
+    onDrag(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+    onDrop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      const dt = e.dataTransfer;
+      const files = Array.from(dt.files);
+      this.$emit("add-media", files);
+    },
+    onPaste(e) {
+      if (e.clipboardData.files.length) {
+        e.stopPropagation();
+        e.preventDefault();
+        const files = [...e.clipboardData.files];
+        this.$emit("paste-media", files);
       }
     },
-    onSkinTone(t) {
-      this.$emit("skin-tone", t);
+    onSkinTone(skinTone) {
+      this.$emit("skin-tone", skinTone);
     },
-    onSelectEmoji(t) {
-      if (!t) {
-        this.emojiPickerOpened = !1;
+    onSelectEmoji(emoji) {
+      if (!emoji) {
+        this.emojiPickerOpened = false;
         return;
       }
       this.$refs.richTextEditor.editor.commands.insertContent({
         type: "emoji",
         attrs: {
-          code: t.shortname
+          code: emoji.shortname
         }
-      }), this.emojiPickerOpened = !1, this.$emit("selected-emoji", t);
+      });
+      this.emojiPickerOpened = false;
+      this.$emit("selected-emoji", emoji);
     },
     onSelectImage() {
       this.$refs.messageInputImageUpload.$refs.input.click();
@@ -430,104 +440,116 @@ const h = {
       this.emojiPickerOpened = !this.emojiPickerOpened;
     },
     onSend() {
-      this.isSendDisabled || this.$emit("submit", this.internalInputValue);
+      if (this.isSendDisabled) {
+        return;
+      }
+      this.$emit("submit", this.internalInputValue);
     },
     onCancel() {
       this.$emit("cancel");
     },
-    onFocus(t) {
-      var e;
-      this.hasFocus = !0, (e = this.$refs.richTextEditor) == null || e.focusEditor(), this.$emit("focus", t);
+    onFocus(event) {
+      var _a;
+      this.hasFocus = true;
+      (_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+      this.$emit("focus", event);
     },
-    onBlur(t) {
-      this.hasFocus = !1, this.$emit("blur", t);
+    onBlur(event) {
+      this.hasFocus = false;
+      this.$emit("blur", event);
     },
-    onInput(t) {
-      this.$emit("input", t);
+    onInput(event) {
+      this.$emit("input", event);
     }
   }
 };
-var g = function() {
-  var e = this, i = e._self._c;
-  return i("div", { class: [
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
     "d-d-flex",
     "d-fd-column",
     "d-bar8",
     "d-baw1",
     "d-ba",
     "d-c-text",
-    { "d-bc-bold d-bs-sm": e.hasFocus, "d-bc-default": !e.hasFocus }
-  ], attrs: { "data-qa": "dt-message-input", role: "presentation" }, on: { click: function(o) {
-    var a;
-    (a = e.$refs.richTextEditor) == null || a.focusEditor();
-  }, "drag-enter": e.onDrag, "drag-over": e.onDrag, drop: e.onDrop, keydown: function(o) {
-    return !o.type.indexOf("key") && e._k(o.keyCode, "enter", 13, o.key, "Enter") || o.ctrlKey || o.shiftKey || o.altKey || o.metaKey ? null : e.onSend.apply(null, arguments);
-  }, paste: e.onPaste } }, [i("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb4", style: { "max-height": e.maxHeight } }, [i("dt-rich-text-editor", 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.link, placeholder: e.placeholder, "mention-suggestion": e.mentionSuggestion, "allow-blockquote": e.allowBlockquote, "allow-bold": e.allowBold, "allow-bullet-list": e.allowBulletList, "allow-italic": e.allowItalic, "allow-strike": e.allowStrike, "allow-underline": e.allowUnderline }, on: { focus: e.onFocus, blur: e.onBlur, input: function(o) {
-    return e.onInput(o);
-  } }, model: { value: e.internalInputValue, callback: function(o) {
-    e.internalInputValue = o;
-  }, expression: "internalInputValue" } }, "dt-rich-text-editor", e.$attrs, !1))], 1), e._t("middle"), i("section", { staticClass: "d-d-flex d-jc-space-between d-mx8 d-my4" }, [i("div", { staticClass: "d-d-flex" }, [e.showImagePicker ? i("dt-tooltip", { attrs: { placement: "top-start", message: e.showImagePicker.tooltipLabel, offset: [-4, -4] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [i("dt-button", { attrs: { "data-qa": "dt-message-input-image-btn", size: "sm", circle: "", kind: e.imagePickerFocus ? "default" : "muted", importance: "clear", "aria-label": e.showImagePicker.ariaLabel }, on: { click: e.onSelectImage, mouseenter: function(o) {
-      e.imagePickerFocus = !0;
-    }, mouseleave: function(o) {
-      e.imagePickerFocus = !1;
-    }, focus: function(o) {
-      e.imagePickerFocus = !0;
-    }, blur: function(o) {
-      e.imagePickerFocus = !1;
-    } }, scopedSlots: e._u([{ key: "icon", fn: function() {
-      return [i("dt-icon", { attrs: { name: "image", size: "300" } })];
-    }, proxy: !0 }], null, !1, 2561380377) }), i("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", type: "file", multiple: "", hidden: "" }, on: { input: e.onImageUpload } })];
-  }, proxy: !0 }], null, !1, 3687934814) }) : e._e(), e.showEmojiPicker ? i("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", open: e.emojiPickerOpened, "initial-focus-element": "#searchInput", padding: "none" }, on: { opened: (o) => {
-    e.emojiPickerOpened = o;
-  } }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [i("dt-tooltip", { attrs: { message: e.emojiTooltipMessage, offset: [0, -4] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-      return [i("dt-button", { attrs: { "data-qa": "dt-message-input-emoji-picker-btn", size: "sm", circle: "", kind: e.emojiPickerHovered ? "default" : "muted", importance: "clear", "aria-label": e.emojiButtonAriaLabel, offset: [0, 0] }, on: { click: e.toggleEmojiPicker, mouseenter: function(o) {
-        e.emojiPickerFocus = !0;
-      }, mouseleave: function(o) {
-        e.emojiPickerFocus = !1;
-      }, focus: function(o) {
-        e.emojiPickerFocus = !0;
-      }, blur: function(o) {
-        e.emojiPickerFocus = !1;
-      } }, scopedSlots: e._u([{ key: "icon", fn: function() {
-        return [i("dt-icon", { attrs: { name: e.emojiPickerHovered ? "very-satisfied" : "satisfied", size: "300" } })];
-      }, proxy: !0 }], null, !1, 352772906) })];
-    }, proxy: !0 }], null, !1, 3933528398) })];
-  }, proxy: !0 }, { key: "content", fn: function() {
-    return [i("dt-emoji-picker", e._b({ on: { "skin-tone": e.onSkinTone, "selected-emoji": e.onSelectEmoji } }, "dt-emoji-picker", e.emojiPickerProps, !1))];
-  }, proxy: !0 }], null, !1, 1278205067) }) : e._e()], 1), i("div", { staticClass: "d-d-flex" }, [e.showCharacterLimit ? i("dt-tooltip", { staticClass: "dt-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-fc-error d-mr16 dt-message-input--remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [e._v(" " + e._s(e.showCharacterLimit.count - e.inputLength) + " ")])];
-  }, proxy: !0 }], null, !1, 2591914334) }) : e._e(), e.showCancel ? i("dt-button", { staticClass: "dt-message-input--cancel-button", attrs: { "data-qa": "dt-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.showSend ? i("dt-tooltip", { attrs: { placement: "top-end", enabled: !e.showSend, message: e.showSend.tooltipLabel, show: !e.isSendDisabled && e.sendButtonFocus, offset: [6, -8] }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    return [i("dt-button", { class: [
+    { "d-bc-bold d-bs-sm": _vm.hasFocus, "d-bc-default": !_vm.hasFocus }
+  ], attrs: { "data-qa": "dt-message-input", "role": "presentation" }, on: { "click": function($event) {
+    var _a;
+    (_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
+  }, "drag-enter": _vm.onDrag, "drag-over": _vm.onDrag, "drop": _vm.onDrop, "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+      return null;
+    if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
+      return null;
+    return _vm.onSend.apply(null, arguments);
+  }, "paste": _vm.onPaste } }, [_c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb4", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "mention-suggestion": _vm.mentionSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
+    return _vm.onInput($event);
+  } }, model: { value: _vm.internalInputValue, callback: function($$v) {
+    _vm.internalInputValue = $$v;
+  }, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false))], 1), _vm._t("middle"), _c("section", { staticClass: "d-d-flex d-jc-space-between d-mx8 d-my4" }, [_c("div", { staticClass: "d-d-flex" }, [_vm.showImagePicker ? _c("dt-tooltip", { attrs: { "placement": "top-start", "message": _vm.showImagePicker.tooltipLabel, "offset": [-4, -4] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { attrs: { "data-qa": "dt-message-input-image-btn", "size": "sm", "circle": "", "kind": _vm.imagePickerFocus ? "default" : "muted", "importance": "clear", "aria-label": _vm.showImagePicker.ariaLabel }, on: { "click": _vm.onSelectImage, "mouseenter": function($event) {
+      _vm.imagePickerFocus = true;
+    }, "mouseleave": function($event) {
+      _vm.imagePickerFocus = false;
+    }, "focus": function($event) {
+      _vm.imagePickerFocus = true;
+    }, "blur": function($event) {
+      _vm.imagePickerFocus = false;
+    } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+      return [_c("dt-icon", { attrs: { "name": "image", "size": "300" } })];
+    }, proxy: true }], null, false, 2561380377) }), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } })];
+  }, proxy: true }], null, false, 3687934814) }) : _vm._e(), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "opened": (open) => {
+    _vm.emojiPickerOpened = open;
+  } }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-tooltip", { attrs: { "message": _vm.emojiTooltipMessage, "offset": [0, -4] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+      return [_c("dt-button", { attrs: { "data-qa": "dt-message-input-emoji-picker-btn", "size": "sm", "circle": "", "kind": _vm.emojiPickerHovered ? "default" : "muted", "importance": "clear", "aria-label": _vm.emojiButtonAriaLabel, "offset": [0, 0] }, on: { "click": _vm.toggleEmojiPicker, "mouseenter": function($event) {
+        _vm.emojiPickerFocus = true;
+      }, "mouseleave": function($event) {
+        _vm.emojiPickerFocus = false;
+      }, "focus": function($event) {
+        _vm.emojiPickerFocus = true;
+      }, "blur": function($event) {
+        _vm.emojiPickerFocus = false;
+      } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
+        return [_c("dt-icon", { attrs: { "name": !_vm.emojiPickerHovered ? "satisfied" : "very-satisfied", "size": "300" } })];
+      }, proxy: true }], null, false, 352772906) })];
+    }, proxy: true }], null, false, 3933528398) })];
+  }, proxy: true }, { key: "content", fn: function() {
+    return [_c("dt-emoji-picker", _vm._b({ on: { "skin-tone": _vm.onSkinTone, "selected-emoji": _vm.onSelectEmoji } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
+  }, proxy: true }], null, false, 1278205067) }) : _vm._e()], 1), _c("div", { staticClass: "d-d-flex" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input--remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "d-fc-error d-mr16 dt-message-input--remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
+  }, proxy: true }], null, false, 2591914334) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input--cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm.showSend ? _c("dt-tooltip", { attrs: { "placement": "top-end", "enabled": !_vm.showSend, "message": _vm.showSend.tooltipLabel, "show": !_vm.isSendDisabled && _vm.sendButtonFocus, "offset": [6, -8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    return [_c("dt-button", { class: [
       {
-        "message-input-button__disabled d-fc-muted": e.isSendDisabled,
-        "d-btn--circle": e.showSend.icon
+        "message-input-button__disabled d-fc-muted": _vm.isSendDisabled,
+        "d-btn--circle": _vm.showSend.icon
       }
-    ], attrs: { "data-qa": "dt-message-input-send-btn", size: "sm", kind: "default", importance: "primary", "aria-label": e.showSend.ariaLabel, "aria-disabled": e.isSendDisabled }, on: { click: e.onSend, mouseenter: function(o) {
-      e.sendButtonFocus = !0;
-    }, mouseleave: function(o) {
-      e.sendButtonFocus = !1;
-    }, focus: function(o) {
-      e.sendButtonFocus = !0;
-    }, blur: function(o) {
-      e.sendButtonFocus = !1;
-    } }, scopedSlots: e._u([e.showSend.icon ? { key: "icon", fn: function() {
-      return [i("dt-icon", { attrs: { name: e.showSend.icon, size: "300" } })];
-    }, proxy: !0 } : null], null, !0) }, [e.showSend.text ? [i("p", [e._v(e._s(e.showSend.text))])] : e._e()], 2)];
-  }, proxy: !0 }], null, !1, 2570122596) }) : e._e()], 1)])], 2);
-}, b = [], k = /* @__PURE__ */ n(
-  h,
-  g,
-  b,
-  !1,
+    ], attrs: { "data-qa": "dt-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend, "mouseenter": function($event) {
+      _vm.sendButtonFocus = true;
+    }, "mouseleave": function($event) {
+      _vm.sendButtonFocus = false;
+    }, "focus": function($event) {
+      _vm.sendButtonFocus = true;
+    }, "blur": function($event) {
+      _vm.sendButtonFocus = false;
+    } }, scopedSlots: _vm._u([_vm.showSend.icon ? { key: "icon", fn: function() {
+      return [_c("dt-icon", { attrs: { "name": _vm.showSend.icon, "size": "300" } })];
+    }, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2)];
+  }, proxy: true }], null, false, 2570122596) }) : _vm._e()], 1)])], 2);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const Pe = k.exports;
+const message_input = __component__.exports;
 export {
-  Pe as DtRecipeMessageInput
+  message_input as DtRecipeMessageInput
 };
 //# sourceMappingURL=message-input.js.map