@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
761 lines (760 loc) • 29 kB
JavaScript
import l from "./last-active-nodes.js";
import { Node as c, mergeAttributes as u } from "@tiptap/core";
import { nodeViewProps as d, NodeViewWrapper as p, VueNodeViewRenderer as m } from "../../node_modules/@tiptap/vue-2.js";
import { DtIconVideo as h, DtIconClose as f, DtIconSend as g, DtIconSatisfied as b, DtIconVerySatisfied as k, DtIconImage as _ } from "@dialpad/dialtone-icons/vue2";
import { DialtoneLocalization as s } from "../../localization/index.js";
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import r from "../button/button.js";
import T from "../item-layout/item-layout.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 "../stack/stack.js";
import I from "../tooltip/tooltip.js";
import O from "../rich-text-editor/rich-text-editor.js";
import B from "../popover/popover.js";
import w from "../input/input.js";
import C from "../emoji-picker/emoji-picker.js";
import { RICH_TEXT_EDITOR_OUTPUT_FORMATS as P, RICH_TEXT_EDITOR_AUTOFOCUS_TYPES as E } from "../rich-text-editor/rich-text-editor-constants.js";
const j = {
name: "MeetingPill",
components: {
NodeViewWrapper: p,
DtItemLayout: T,
DtIconClose: f,
DtButton: r,
DtIconVideo: h
},
props: d,
emits: ["meeting-pill-close"],
data() {
return {
i18n: new s()
};
},
computed: {
closeButtonTitle() {
return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
}
},
methods: {
close(t) {
var i, n, o;
const e = (o = (n = (i = this.editor) == null ? void 0 : i.storage) == null ? void 0 : n.meetingPill) == null ? void 0 : o.onClose;
e && typeof e == "function" && e(t);
}
}
};
var $ = 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: "", 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);
}, D = [], A = /* @__PURE__ */ a(
j,
$,
D
);
const M = A.exports, N = c.create({
name: "meetingPill",
atom: !0,
group: "inline",
inline: !0,
addOptions() {
return {
onClose: () => {
}
};
},
addStorage() {
return {
onClose: this.options.onClose
};
},
addNodeView() {
return m(M);
},
addAttributes() {
return {
text: {
default: 'Please pass in "text" attribute'
}
};
},
parseHTML() {
return [
{
tag: "meeting-pill"
}
];
},
renderText() {
return "/dpm";
},
renderHTML({ HTMLAttributes: t }) {
return ["meeting-pill", u(t)];
}
}), F = {
name: "DtRecipeMessageInput",
components: {
DtButton: r,
DtEmojiPicker: C,
DtInput: w,
DtPopover: B,
DtRecipeMessageInputTopbar: v,
DtRecipeMessageInputLink: L,
DtRichTextEditor: O,
DtTooltip: I,
DtStack: y,
DtIconImage: _,
DtIconVerySatisfied: k,
DtIconSatisfied: b,
DtIconSend: g
},
inheritAttrs: !1,
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: !0
},
/**
* 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: !0
},
/**
* Descriptive label for the input element
*/
inputAriaLabel: {
type: String,
required: !0,
default: ""
},
/**
* Prevents the user from typing any further. Deleting text will still work.
*/
preventTyping: {
type: Boolean,
default: !1
},
/**
* 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: !1,
validator(t) {
return typeof t == "string" ? E.includes(t) : !0;
}
},
/**
* The output format that the editor uses when emitting the "@input" event.
* One of `text`, `json`, `html`, `markdown`. See https://tiptap.dev/guide/output for
* examples.
* @values text, json, html, markdown
*/
outputFormat: {
type: String,
default: "json",
validator(t) {
return P.includes(t);
}
},
/**
* Placeholder text
*/
placeholder: {
type: String,
default: ""
},
/**
* Disable Send Button
*/
disableSend: {
type: Boolean,
default: !1
},
/**
* 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: !0
},
/**
* Props to pass into the emoji picker.
*/
emojiPickerProps: {
type: Object,
default: () => ({})
},
/**
* Enable character Limit warning
*/
showCharacterLimit: {
type: [Boolean, Object],
default: () => ({ count: 1500, warning: 500, message: "" })
},
showImagePicker: {
type: [Boolean, Object],
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: () => ({})
},
/**
* 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:
* { keyboardShortcutText: string }
*/
boldButtonOptions: {
type: Object,
default: () => ({
keyboardShortcutText: "Mod + B"
})
},
/**
* descriptive text fields for the italic button
*
* object format:
* { keyboardShortcutText: string }
*/
italicButtonOptions: {
type: Object,
default: () => ({
keyboardShortcutText: "Mod + I"
})
},
/**
* descriptive text fields for the strikethrough button
*
* object format:
* { keyboardShortcutText: string }
*/
strikeButtonOptions: {
type: Object,
default: () => ({
keyboardShortcutText: "Mod + Shift + S"
})
},
/**
* descriptive text fields for the link button
*
* object format:
* { keyboardShortcutText: string }
*/
linkButtonOptions: {
type: Object,
default: () => ({
// TODO: implement mod k
keyboardShortcutText: "Mod + K",
linkPlaceholder: "e.g. https://www.dialpad.com"
})
},
/**
* descriptive text fields for the bullet list button
*
* object format:
* { keyboardShortcutText: string }
*/
bulletListButtonOptions: {
type: Object,
default: () => ({
keyboardShortcutText: "Mod + Shift + 8"
})
},
/**
* descriptive text fields for the ordered list button
*
* object format:
* { keyboardShortcutText: string }
*/
orderedListButtonOptions: {
type: Object,
default: () => ({
keyboardShortcutText: "Mod + Shift + 7"
})
},
/**
* descriptive text fields for the italic button
*
* object format:
* { keyboardShortcutText: string }
*/
blockQuoteButtonOptions: {
type: Object,
default: () => ({
keyboardShortcutText: "Mod + Shift + B"
})
},
/**
* descriptive text fields for the code button
*
* object format:
* { keyboardShortcutText: string }
*/
codeButtonOptions: {
type: Object,
default: () => ({
keyboardShortcutText: "Mod + E"
})
},
/**
* descriptive text fields for the code block button
*
* object format:
* { keyboardShortcutText: string }
*/
codeBlockButtonOptions: {
type: Object,
default: () => ({
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",
/**
* Emitted when input changes, returns markdown content only
* @event markdown-input
* @type {String}
*/
"markdown-input",
/**
* Emitted when the 'Add emoji' button is clicked
* @event add-emoji
* @type {Boolean}
*/
"add-emoji",
/**
* Emitted when the emoji picker scroll reaches the bottom
* @event emoji-scroll-bottom-reached
*/
"emoji-scroll-bottom-reached"
],
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: l,
additionalExtensions: [
N.configure({
onClose: (t) => {
this.$emit("meeting-pill-close", t);
}
})
],
internalInputValue: this.value,
// internal input content
imagePickerFocus: !1,
emojiPickerFocus: !1,
emojiPickerOpened: !1,
isFocused: !1,
linkOptions: {
class: "d-link d-c-text d-d-inline-block"
},
linkDialogOpen: !1,
selectedText: "",
text: "",
hideLinkBubbleMenu: !1,
i18n: new s()
};
},
computed: {
showSendIcon() {
return !this.showSend.text;
},
inputLength() {
return this.text.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.disableSend || this.showCharacterLimit && this.inputLength > this.showCharacterLimit.count;
},
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: {
value(t) {
this.internalInputValue = t;
},
emojiPickerOpened(t) {
var e;
t || (e = this.$refs.richTextEditor) == null || e.focusEditor();
}
},
created() {
this.value && this.outputFormat === "text" ? this.internalInputValue = this.value.replace(/\n/g, "<br>") : this.internalInputValue = this.value;
},
methods: {
linkDialogOpened(t) {
var e;
this.linkDialogOpen = t, t === !0 ? this.initLinkDialog() : (this.hideLinkBubbleMenu = !1, (e = this.$refs.richTextEditor) == null || e.focusEditor());
},
handleTopbarClick(t) {
var n;
const e = (n = this.$refs.richTextEditor) == null ? void 0 : n.editor, i = {
bold: () => e == null ? void 0 : e.chain().focus().toggleBold().run(),
italic: () => e == null ? void 0 : e.chain().focus().toggleItalic().run(),
strike: () => e == null ? void 0 : e.chain().focus().toggleStrike().run(),
bulletList: () => e == null ? void 0 : e.chain().focus().toggleBulletList().run(),
orderedList: () => e == null ? void 0 : e.chain().focus().toggleOrderedList().run(),
blockquote: () => e == null ? void 0 : e.chain().focus().toggleBlockquote().run(),
code: () => e == null ? void 0 : e.chain().focus().toggleCode().run(),
codeBlock: () => e == null ? void 0 : e.chain().focus().toggleCodeBlock().run()
};
e && i[t] && i[t]();
},
// Checks if the node currently selected is active ex/ the bold button is active if the selected text is bold
isSelectionActive(t) {
var e, i, n, o;
return ["bulletList", "orderedList"].includes(t) ? this.lastActiveNodes((i = (e = this.$refs.richTextEditor) == null ? void 0 : e.editor) == null ? void 0 : i.state, [{ type: "bulletList" }, { type: "orderedList" }]).includes(t) && this.isFocused : ((o = (n = this.$refs.richTextEditor) == null ? void 0 : n.editor) == null ? void 0 : o.isActive(t)) && this.isFocused;
},
initLinkDialog() {
var t, e, i;
this.$refs.link.setInitialValues(this.selectedText, (i = (e = (t = this.$refs.richTextEditor) == null ? void 0 : t.editor) == null ? void 0 : e.getAttributes("link")) == null ? void 0 : i.href), this.hideLinkBubbleMenu = !0, this.linkDialogOpen = !0;
},
removeLink() {
var t;
(t = this.$refs.richTextEditor) == null || t.removeLink(), this.linkDialogOpen = !1;
},
setLink(t, e) {
this.$refs.richTextEditor.setLink(
e,
t,
this.linkOptions,
S,
x
), this.linkDialogOpen = !1;
},
// Mousedown instead of click because it fires before the blur event.
onMousedown(t) {
this.$refs.richTextEditor.$el.querySelector(".tiptap").contains(t.target) || (t.preventDefault(), this.$refs.richTextEditor.focusEditor());
},
onDrop(t) {
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);
}
},
onSkinTone(t) {
this.$emit("skin-tone", t);
},
onSelectEmoji(t, e) {
t && (t.shift_key || e(), this.$refs.richTextEditor.editor.commands.insertContent({
type: "emoji",
attrs: {
code: t.shortname,
image: t.image,
name: t.name
}
}), this.$emit("selected-emoji", t));
},
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");
},
onInput(t) {
this.$emit("update:value", t);
},
onTextInput(t) {
this.text = t, this.$emit("text-input", t);
},
onMarkdownInput(t) {
this.$emit("markdown-input", t);
}
}
};
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(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, "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, "markdown-input": e.onMarkdownInput, enter: e.onSend, selected: function(n) {
e.selectedText = n;
}, "selected-command": function(n) {
return e.$emit("selected-command", n);
}, "edit-link": e.initLinkDialog, focus: function(n) {
e.isFocused = !0;
}, blur: function(n) {
e.isFocused = !1;
} }, 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(n) {
e.imagePickerFocus = !1;
}, focus: function(n) {
e.imagePickerFocus = !0;
}, 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: 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(o) {
e.emojiPickerFocus = !1;
}, focus: function(o) {
e.emojiPickerFocus = !0;
}, 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", 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": (o) => e.onSelectEmoji(o, n), "scroll-bottom-reached": function(o) {
return e.$emit("emoji-scroll-bottom-reached");
} } }, "dt-emoji-picker", e.emojiPickerProps, !1))];
} }], null, !1, 2616934230) }) : 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__schedule-message" }, [e._t("scheduleMessage")], 2), 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", { 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.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);
}, U = [], z = /* @__PURE__ */ a(
F,
R,
U
);
const re = z.exports;
export {
re as default
};
//# sourceMappingURL=message-input.js.map