@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
725 lines (724 loc) • 28.8 kB
JavaScript
import lastActiveNodes from "./last_active_nodes.js";
import MeetingPill from "./extensions/meeting_pill/meeting_pill.js";
import { DtIconImage, DtIconVerySatisfied, DtIconSatisfied, DtIconSend } from "@dialpad/dialtone-icons/vue2";
import DtRecipeMessageInputTopbar from "./message_input_topbar.vue.js";
import DtRecipeMessageInputLink from "./message_input_link.vue.js";
import { EDITOR_SUPPORTED_LINK_PROTOCOLS, EDITOR_DEFAULT_LINK_PREFIX } from "../editor/editor_constants.js";
import normalizeComponent from "../../../_virtual/_plugin-vue2_normalizer.js";
import DtButton from "../../../components/button/button.vue.js";
import DtEmojiPicker from "../../../components/emoji_picker/emoji_picker.vue.js";
import DtInput from "../../../components/input/input.vue.js";
import DtPopover from "../../../components/popover/popover.vue.js";
import DtRichTextEditor from "../../../components/rich_text_editor/rich_text_editor.vue.js";
import DtTooltip from "../../../components/tooltip/tooltip.vue.js";
import DtStack from "../../../components/stack/stack.vue.js";
import { RICH_TEXT_EDITOR_AUTOFOCUS_TYPES, RICH_TEXT_EDITOR_OUTPUT_FORMATS } from "../../../components/rich_text_editor/rich_text_editor_constants.js";
const _sfc_main = {
name: "DtRecipeMessageInput",
components: {
DtButton,
DtEmojiPicker,
DtInput,
DtPopover,
DtRecipeMessageInputTopbar,
DtRecipeMessageInputLink,
DtRichTextEditor,
DtTooltip,
DtStack,
DtIconImage,
DtIconVerySatisfied,
DtIconSatisfied,
DtIconSend
},
mixins: [],
inheritAttrs: false,
props: {
/**
* Displays all the buttons for rich text formatting above the message input, and enables it within the editor.
* Rich text formatting for the purposes of this component is defined as:
*
* bold, italic, strikethrough, lists, blockquotes, inline code tags, and code blocks.
*
* If you are sending a message to a phone rather than a Dialpad to Dialpad message, you should have this as false.
*/
richText: {
type: Boolean,
default: true
},
/**
* Value of the input. The object format should match TipTap's JSON
* document structure: https://tiptap.dev/guide/output#option-1-json
*/
value: {
type: [Object, String],
default: ""
},
/**
* Whether the input is editable
*/
editable: {
type: Boolean,
default: true
},
/**
* Descriptive label for the input element
*/
inputAriaLabel: {
type: String,
required: true,
default: ""
},
/**
* Prevents the user from typing any further. Deleting text will still work.
*/
preventTyping: {
type: Boolean,
default: false
},
/**
* Additional class name for the input element. Only accepts a String value
* because this is passed to the editor via options. For multiple classes,
* join them into one string, e.g. "d-p8 d-hmx96"
*/
inputClass: {
type: String,
default: ""
},
/**
* Whether the input should receive focus after the component has been
* mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.
* - `start` Sets the focus to the beginning of the input
* - `end` Sets the focus to the end of the input
* - `all` Selects the whole contents of the input
* - `Number` Sets the focus to a specific position in the input
* - `true` Defaults to `start`
* - `false` Disables autofocus
* @values true, false, start, end, all, number
*/
autoFocus: {
type: [Boolean, String, Number],
default: false,
validator(autoFocus) {
if (typeof autoFocus === "string") {
return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);
}
return true;
}
},
/**
* The output format that the editor uses when emitting the "@input" event.
* One of `text`, `json`, `html`. See https://tiptap.dev/guide/output for
* examples.
* @values text, json, html
*/
outputFormat: {
type: String,
default: "json",
validator(outputFormat) {
return RICH_TEXT_EDITOR_OUTPUT_FORMATS.includes(outputFormat);
}
},
/**
* Placeholder text
*/
placeholder: {
type: String,
default: ""
},
/**
* Disable Send Button
*/
disableSend: {
type: Boolean,
default: false
},
/**
* Content area needs to dynamically adjust height based on the conversation area height.
* can be vh|px|rem|em|%
*/
maxHeight: {
type: String,
default: "unset"
},
// Emoji picker props
showEmojiPicker: {
type: Boolean,
default: true
},
/**
* Props to pass into the emoji picker.
*/
emojiPickerProps: {
type: Object,
default: () => ({}),
validate(emojiPickerProps) {
return [
"searchNoResultsLabel",
"searchResultsLabel",
"searchPlaceholderLabel",
"skinSelectorButtonTooltipLabel",
"tabSetLabels"
].every((prop) => emojiPickerProps[prop] != null);
}
},
/**
* Emoji button tooltip label
*/
emojiTooltipMessage: {
type: String,
default: "Emoji"
},
// Aria label for buttons
/**
* Emoji button aria label
*/
emojiButtonAriaLabel: {
type: String,
default: "emoji button"
},
/**
* Enable character Limit warning
*/
showCharacterLimit: {
type: [Boolean, Object],
default: () => ({ count: 1500, warning: 500, message: "" })
},
showImagePicker: {
type: [Boolean, Object],
default: () => ({ tooltipLabel: "Attach Image", ariaLabel: "image button" })
},
/**
* Send button defaults.
*/
showSend: {
type: [Boolean, Object],
default: () => ({})
},
/**
* Cancel button defaults.
*/
showCancel: {
type: [Boolean, Object],
default: () => ({ text: "Cancel" })
},
/**
* suggestion object containing the items query function.
* The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
*
* The only required key is the items function which is used to query the contacts for suggestion.
* items({ query }) => { return [ContactObject]; }
* ContactObject format:
* { name: string, avatarSrc: string, id: string }
*
* When null, it does not add the plugin.
*/
mentionSuggestion: {
type: Object,
default: null
},
/**
* suggestion object containing the items query function.
* The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
*
* The only required key is the items function which is used to query the channels for suggestion.
* items({ query }) => { return [ChannelObject]; }
* ChannelObject format:
* { name: string, id: string, locked: boolean }
*
* When null, it does not add the plugin. Setting locked to true will display a lock rather than hash.
*/
channelSuggestion: {
type: Object,
default: null
},
/**
* suggestion object containing the items query function.
* The valid keys passed into this object can be found here: https://tiptap.dev/api/utilities/suggestion
*
* The only required key is the items function which is used to query the slash commands for suggestion.
* items({ query }) => { return [SlashCommandObject]; }
* SlashCommandObject format:
* { command: string, description: string, parametersExample?: string }
* The "parametersExample" parameter is optional, and describes an example
* of the parameters that command can take.
*
* When null, it does not add the plugin.
*/
slashCommandSuggestion: {
type: Object,
default: null
},
/**
* descriptive text fields for the bold button
*
* object format:
* { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
*/
boldButtonOptions: {
type: Object,
default: () => ({
ariaLabel: "Toggle bold on selected text",
tooltipText: "Bold",
keyboardShortcutText: "Mod + B"
})
},
/**
* descriptive text fields for the italic button
*
* object format:
* { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
*/
italicButtonOptions: {
type: Object,
default: () => ({
ariaLabel: "Toggle italic on selected text",
tooltipText: "Italic",
keyboardShortcutText: "Mod + I"
})
},
/**
* descriptive text fields for the strikethrough button
*
* object format:
* { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
*/
strikeButtonOptions: {
type: Object,
default: () => ({
ariaLabel: "Toggle strikethrough on selected text",
tooltipText: "Strikethrough",
keyboardShortcutText: "Mod + Shift + S"
})
},
/**
* descriptive text fields for the link button
*
* object format:
* { ariaLabel: string, tooltipText: 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"
})
},
/**
* descriptive text fields for the bullet list button
*
* object format:
* { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
*/
bulletListButtonOptions: {
type: Object,
default: () => ({
ariaLabel: "Toggle bullet list on selected text",
tooltipText: "Bullet list",
keyboardShortcutText: "Mod + Shift + 8"
})
},
/**
* descriptive text fields for the ordered list button
*
* object format:
* { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
*/
orderedListButtonOptions: {
type: Object,
default: () => ({
ariaLabel: "Toggle ordered list on selected text",
tooltipText: "Ordered list",
keyboardShortcutText: "Mod + Shift + 7"
})
},
/**
* descriptive text fields for the italic button
*
* object format:
* { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
*/
blockQuoteButtonOptions: {
type: Object,
default: () => ({
ariaLabel: "Toggle Blockquote on selected text",
tooltipText: "Blockquote",
keyboardShortcutText: "Mod + Shift + B"
})
},
/**
* descriptive text fields for the code button
*
* object format:
* { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
*/
codeButtonOptions: {
type: Object,
default: () => ({
ariaLabel: "Toggle code tag on selected text",
tooltipText: "Code",
keyboardShortcutText: "Mod + E"
})
},
/**
* descriptive text fields for the code block button
*
* object format:
* { ariaLabel: string, tooltipText: string, keyboardShortcutText: string }
*/
codeBlockButtonOptions: {
type: Object,
default: () => ({
ariaLabel: "Toggle code block on selected text",
tooltipText: "Code block",
keyboardShortcutText: "Mod + Alt + C"
})
}
},
emits: [
/**
* Fires when send button is clicked
*
* @event submit
* @type {String}
*/
"submit",
/**
* Fires when media is selected from image button
*
* @event select-media
* @type {Array}
*/
"select-media",
/**
* Fires when media is dropped into the message input
*
* @event add-media
* @type {Array}
*/
"add-media",
/**
* Fires when media is pasted into the message input
*
* @event paste-media
* @type {Array}
*/
"paste-media",
/**
* Fires when cancel button is pressed (only on edit mode)
*
* @event cancel
* @type {Boolean}
*/
"cancel",
/**
* Fires when skin tone is selected from the emoji picker
*
* @event skin-tone
* @type {String}
*/
"skin-tone",
/**
* Fires when emoji is selected from the emoji picker
*
* @event selected-emoji
* @type {String}
*/
"selected-emoji",
/**
* Fires when a slash command is selected
*
* @event selected-command
* @type {String}
*/
"selected-command",
/**
* Fires when meeting pill is closed
*
* @event meeting-pill-close
* @type {String}
*/
"meeting-pill-close",
/**
* Event to sync the value with the parent
* @event update:value
* @type {String|JSON}
*/
"update:value",
/**
* Emitted when input changes, returns text content only
* @event text-input
* @type {String}
*/
"text-input"
],
data() {
return {
// 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,
additionalExtensions: [MeetingPill],
internalInputValue: this.value,
// internal input content
imagePickerFocus: false,
emojiPickerFocus: false,
emojiPickerOpened: false,
isFocused: false,
linkOptions: {
class: "d-link d-c-text d-d-inline-block"
},
linkDialogOpen: false,
selectedText: "",
text: "",
hideLinkBubbleMenu: false
};
},
computed: {
showSendIcon() {
return !this.showSend.text;
},
inputLength() {
return this.text.length;
},
displayCharacterLimitWarning() {
return Boolean(this.showCharacterLimit) && this.showCharacterLimit.count - this.inputLength <= this.showCharacterLimit.warning;
},
characterLimitTooltipEnabled() {
return this.showCharacterLimit.message && this.showCharacterLimit.count - this.inputLength < 0;
},
isSendDisabled() {
return this.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
},
computedCloseButtonProps() {
return {
ariaLabel: "Close"
};
},
emojiPickerHovered() {
return this.emojiPickerFocus || this.emojiPickerOpened;
},
sendIconSize() {
return "300";
}
},
watch: {
value(newValue) {
this.internalInputValue = newValue;
},
emojiPickerOpened(newValue) {
var _a;
if (!newValue) {
(_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
}
}
},
created() {
if (this.value && this.outputFormat === "text") {
this.internalInputValue = this.value.replace(/\n/g, "<br>");
} else {
this.internalInputValue = this.value;
}
},
methods: {
linkDialogOpened(value) {
var _a;
this.linkDialogOpen = value;
if (value === true) {
this.initLinkDialog();
} else {
this.hideLinkBubbleMenu = false;
(_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
}
},
// eslint-disable-next-line complexity
handleTopbarClick(type) {
var _a;
const editor = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor;
const typeToCommandMap = {
bold: () => editor == null ? void 0 : editor.chain().focus().toggleBold().run(),
italic: () => editor == null ? void 0 : editor.chain().focus().toggleItalic().run(),
strike: () => editor == null ? void 0 : editor.chain().focus().toggleStrike().run(),
bulletList: () => editor == null ? void 0 : editor.chain().focus().toggleBulletList().run(),
orderedList: () => editor == null ? void 0 : editor.chain().focus().toggleOrderedList().run(),
blockquote: () => editor == null ? void 0 : editor.chain().focus().toggleBlockquote().run(),
code: () => editor == null ? void 0 : editor.chain().focus().toggleCode().run(),
codeBlock: () => editor == null ? void 0 : editor.chain().focus().toggleCodeBlock().run()
};
if (editor && typeToCommandMap[type]) {
typeToCommandMap[type]();
}
},
// Checks if the node currently selected is active ex/ the bold button is active if the selected text is bold
isSelectionActive(type) {
var _a, _b, _c, _d;
if (["bulletList", "orderedList"].includes(type)) {
return this.lastActiveNodes((_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(type) && this.isFocused;
}
return ((_d = (_c = this.$refs.richTextEditor) == null ? void 0 : _c.editor) == null ? void 0 : _d.isActive(type)) && this.isFocused;
},
initLinkDialog() {
var _a, _b, _c;
this.$refs.link.setInitialValues(this.selectedText, (_c = (_b = (_a = this.$refs.richTextEditor) == null ? void 0 : _a.editor) == null ? void 0 : _b.getAttributes("link")) == null ? void 0 : _c.href);
this.hideLinkBubbleMenu = true;
this.linkDialogOpen = true;
},
removeLink() {
var _a;
(_a = this.$refs.richTextEditor) == null ? void 0 : _a.removeLink();
this.linkDialogOpen = false;
},
setLink(linkText, linkInput) {
this.$refs.richTextEditor.setLink(
linkInput,
linkText,
this.linkOptions,
EDITOR_SUPPORTED_LINK_PROTOCOLS,
EDITOR_DEFAULT_LINK_PREFIX
);
this.linkDialogOpen = false;
},
// Mousedown instead of click because it fires before the blur event.
onMousedown(e) {
const isWithinInput = this.$refs.richTextEditor.$el.querySelector(".tiptap").contains(e.target);
if (!isWithinInput) {
e.preventDefault();
this.$refs.richTextEditor.focusEditor();
}
},
onDrop(e) {
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(skinTone) {
this.$emit("skin-tone", skinTone);
},
onSelectEmoji(emoji, close) {
if (!emoji) {
return;
}
if (!emoji.shift_key) {
close();
}
this.$refs.richTextEditor.editor.commands.insertContent({
type: "emoji",
attrs: {
code: emoji.shortname
}
});
this.$emit("selected-emoji", emoji);
},
onSelectImage() {
this.$refs.messageInputImageUpload.$refs.input.click();
},
onImageUpload() {
this.$emit("select-media", this.$refs.messageInputImageUpload.$refs.input.files);
},
toggleEmojiPicker() {
this.emojiPickerOpened = !this.emojiPickerOpened;
},
onSend() {
if (this.isSendDisabled) {
return;
}
this.$emit("submit", this.internalInputValue);
},
onCancel() {
this.$emit("cancel");
},
onInput(event) {
this.$emit("update:value", event);
},
onTextInput(event) {
this.text = event;
this.$emit("text-input", event);
}
}
};
var _sfc_render = function render() {
var _a;
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "d-recipe-message-input", attrs: { "data-qa": "dt-recipe-message-input", "role": "presentation" }, on: { "dragover": function($event) {
$event.preventDefault();
}, "drop": function($event) {
$event.preventDefault();
return _vm.onDrop.apply(null, arguments);
}, "paste": _vm.onPaste, "mousedown": _vm.onMousedown } }, [_vm._t("top"), _vm.richText ? _c("dt-recipe-message-input-topbar", { key: _vm.selectedText, attrs: { "bold-button-options": _vm.boldButtonOptions, "italic-button-options": _vm.italicButtonOptions, "strike-button-options": _vm.strikeButtonOptions, "bullet-list-button-options": _vm.bulletListButtonOptions, "ordered-list-button-options": _vm.orderedListButtonOptions, "block-quote-button-options": _vm.blockQuoteButtonOptions, "code-button-options": _vm.codeButtonOptions, "code-block-button-options": _vm.codeBlockButtonOptions, "is-selection-active": _vm.isSelectionActive }, on: { "click": _vm.handleTopbarClick }, scopedSlots: _vm._u([{ key: "link", fn: function() {
return [_c("dt-recipe-message-input-link", { ref: "link", attrs: { "open": _vm.linkDialogOpen, "link-button-options": _vm.linkButtonOptions, "is-selection-active": _vm.isSelectionActive }, on: { "opened": _vm.linkDialogOpened, "set-link": _vm.setLink, "remove-link": _vm.removeLink } })];
}, proxy: true }], null, false, 1527282285) }) : _vm._e(), _c("div", { directives: [{ name: "dt-scrollbar", rawName: "v-dt-scrollbar" }], staticClass: "d-recipe-message-input__editor-wrapper", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._g(_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.richText, "placeholder": _vm.placeholder, "prevent-typing": _vm.preventTyping, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "slash-command-suggestion": _vm.slashCommandSuggestion, "allow-blockquote": _vm.richText, "allow-bold": _vm.richText, "allow-bullet-list": _vm.richText, "allow-code": _vm.richText, "allow-codeblock": _vm.richText, "allow-italic": _vm.richText, "allow-strike": _vm.richText, "allow-underline": _vm.richText, "additional-extensions": _vm.additionalExtensions, "hide-link-bubble-menu": _vm.hideLinkBubbleMenu }, on: { "input": _vm.onInput, "text-input": _vm.onTextInput, "enter": _vm.onSend, "selected": function($event) {
_vm.selectedText = $event;
}, "edit-link": _vm.initLinkDialog, "focus": function($event) {
_vm.isFocused = true;
}, "blur": function($event) {
_vm.isFocused = false;
} }, model: { value: _vm.internalInputValue, callback: function($$v) {
_vm.internalInputValue = $$v;
}, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false), _vm.$listeners))], 1), _vm._t("middle"), _c("section", { staticClass: "d-recipe-message-input__bottom-section" }, [_c("div", { staticClass: "d-recipe-message-input__bottom-section-left" }, [_c("dt-stack", { attrs: { "direction": "row", "gap": "200" } }, [_vm.showImagePicker ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-start", value: (_a = _vm.showImagePicker) == null ? void 0 : _a.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": _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-image", { attrs: { "size": "300" } })];
}, proxy: true }], null, false, 4195307205) }) : _vm._e(), _c("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": _vm.onImageUpload } }), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "open.sync": "emojiPickerOpened", "data-qa": "dt-recipe-message-input-emoji-picker-popover", "initial-focus-element": "#searchInput", "padding": "none" }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
return [_c("dt-button", _vm._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.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": _vm.emojiButtonAriaLabel }, 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 [_vm.emojiPickerHovered ? _c("dt-icon-very-satisfied", { attrs: { "size": "300" } }) : _c("dt-icon-satisfied", { attrs: { "size": "300" } })];
}, proxy: true }], null, true) }, "dt-button", attrs, false))];
} }, { key: "content", fn: function({ close }) {
return [_c("dt-emoji-picker", _vm._b({ on: { "skin-tone": _vm.onSkinTone, "selected-emoji": (emoji) => _vm.onSelectEmoji(emoji, close) } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
} }], null, false, 3974835042) }) : _vm._e(), _vm._t("emojiGiphyPicker"), _vm._t("customActionIcons")], 2)], 1), _c("div", { staticClass: "d-recipe-message-input__bottom-section-right" }, [_c("dt-stack", { attrs: { "direction": "row", "gap": "300" } }, [_c("div", { staticClass: "d-recipe-message-input__sms-count" }, [_vm._t("smsCount")], 2), Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "d-recipe-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-recipe-message-input__remaining-char", attrs: { "data-qa": "dt-recipe-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
}, proxy: true }], null, false, 1021505058) }) : _vm._e(), _vm.showCancel ? _c("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": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm._t("sendButton", function() {
var _a2;
return [_vm.showSend ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: (_a2 = _vm.showSend) == null ? void 0 : _a2.tooltipLabel, expression: "showSend?.tooltipLabel", arg: "top-end" }], class: [
"d-recipe-message-input__button d-recipe-message-input__send-button",
{
"d-recipe-message-input__send-button--disabled": _vm.isSendDisabled,
"d-btn--icon-only": _vm.showSendIcon
}
], attrs: { "data-qa": "dt-recipe-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend }, scopedSlots: _vm._u([_vm.showSendIcon ? { key: "icon", fn: function() {
return [_vm._t("sendIcon", function() {
return [_c("dt-icon-send", { attrs: { "size": _vm.sendIconSize } })];
}, { "iconSize": _vm.sendIconSize })];
}, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2) : _vm._e()];
})], 2)], 1)])], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const message_input = __component__.exports;
export {
message_input as default
};
//# sourceMappingURL=message_input.vue.js.map