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
