import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { DialtoneLocalization as t } from "../../localization/index.js";
import n from "../button/button.js";
import r from "../stack/stack.js";
import i from "../popover/popover.js";
import a from "../input/input.js";
import o from "./message-input-button.js";
import { createBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, openBlock as d, resolveComponent as f, toDisplayString as p, withCtx as m, withKeys as h, withModifiers as g } from "vue";
import { DtIconLink2 as _ } from "@dialpad/dialtone-icons/vue3";
//#region recipes/conversation_view/message_input/message_input_link.vue
var v = {
	compatConfig: { MODE: 3 },
	name: "MessageInputLink",
	components: {
		DtPopover: i,
		DtInput: a,
		DtButton: n,
		DtStack: r,
		DtIconLink2: _,
		DtRecipeMessageInputButton: o
	},
	props: {
		open: {
			type: Boolean,
			default: !1
		},
		linkButtonOptions: {
			type: Object,
			required: !0
		},
		isSelectionActive: {
			type: Function,
			default: () => {}
		}
	},
	emits: [
		"set-link",
		"remove-link",
		"opened"
	],
	data() {
		return {
			linkText: "",
			linkInput: "",
			isOpen: !1,
			i18n: new t()
		};
	},
	computed: {
		anchorButtonLabel() {
			return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL");
		},
		textInputLabel() {
			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL");
		},
		linkInputLabel() {
			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL");
		},
		linkInputPlaceHolder() {
			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER");
		},
		removeButtonLabel() {
			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL");
		},
		cancelButtonLabel() {
			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL");
		},
		confirmButtonLabel() {
			return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL");
		}
	},
	watch: { open: {
		immediate: !0,
		handler(e) {
			this.isOpen = e;
		}
	} },
	methods: { setInitialValues(e, t) {
		this.linkText = e, this.linkInput = t;
	} }
}, y = { class: "d-recipe-message-input__link-dialog-title" };
function b(e, t, n, r, i, a) {
	let o = f("dt-icon-link2"), _ = f("dt-recipe-message-input-button"), v = f("dt-input"), b = f("dt-button"), x = f("dt-stack"), S = f("dt-popover");
	return d(), s(S, {
		open: i.isOpen,
		placement: "bottom-start",
		"content-class": "d-recipe-message-input__link-popover",
		"data-qa": "dt-message-input-link-popover",
		"show-close-button": !1,
		onOpened: t[12] || (t[12] = (t) => e.$emit("opened", t))
	}, {
		anchor: m(() => [u(_, {
			"aria-label": a.anchorButtonLabel["aria-label"],
			"tooltip-text": a.anchorButtonLabel["tooltip-text"],
			"keyboard-shortcut-text": n.linkButtonOptions.keyboardShortcutText,
			"data-qa": "message-input-link-btn",
			"is-active": n.isSelectionActive("link"),
			onClick: t[0] || (t[0] = (e) => i.isOpen = !0)
		}, {
			icon: m(() => [u(o, {
				class: "d-recipe-message-input__button-stack-icon",
				size: "200"
			})]),
			_: 1
		}, 8, [
			"aria-label",
			"tooltip-text",
			"keyboard-shortcut-text",
			"is-active"
		])]),
		content: m(() => [u(x, { gap: "500" }, {
			default: m(() => [
				c("div", y, p(i.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE")), 1),
				u(v, {
					modelValue: i.linkText,
					"onUpdate:modelValue": t[1] || (t[1] = (e) => i.linkText = e),
					"input-aria-label": a.textInputLabel,
					size: "xs",
					"data-qa": "dt-message-input-link-text-input",
					label: a.textInputLabel,
					"input-wrapper-class": "d-recipe-message-input__link-input",
					onClick: t[2] || (t[2] = g(() => {}, ["stop"])),
					onFocus: t[3] || (t[3] = g(() => {}, ["stop"])),
					onKeydown: t[4] || (t[4] = h((t) => e.$emit("set-link", i.linkText, i.linkInput), ["enter"]))
				}, null, 8, [
					"modelValue",
					"input-aria-label",
					"label"
				]),
				u(v, {
					modelValue: i.linkInput,
					"onUpdate:modelValue": t[5] || (t[5] = (e) => i.linkInput = e),
					"input-aria-label": a.linkInputLabel,
					size: "xs",
					"data-qa": "dt-message-input-link-input",
					placeholder: a.linkInputPlaceHolder,
					label: a.linkInputLabel,
					"input-wrapper-class": "d-recipe-message-input__link-input",
					onClick: t[6] || (t[6] = g(() => {}, ["stop"])),
					onFocus: t[7] || (t[7] = g(() => {}, ["stop"])),
					onKeydown: t[8] || (t[8] = h((t) => e.$emit("set-link", i.linkText, i.linkInput), ["enter"]))
				}, null, 8, [
					"modelValue",
					"input-aria-label",
					"placeholder",
					"label"
				]),
				u(x, {
					direction: "row",
					class: "d-recipe-message-input__link-dialog-buttons"
				}, {
					default: m(() => [u(b, {
						"aria-label": a.removeButtonLabel,
						title: a.removeButtonLabel,
						importance: "clear",
						kind: "danger",
						size: "md",
						"data-qa": "dt-message-input-link-remove-btn",
						onClick: t[9] || (t[9] = (t) => e.$emit("remove-link", i.linkText, i.linkInput))
					}, {
						default: m(() => [l(p(a.removeButtonLabel), 1)]),
						_: 1
					}, 8, ["aria-label", "title"]), u(x, {
						direction: "row",
						gap: "400"
					}, {
						default: m(() => [u(b, {
							"aria-label": a.cancelButtonLabel,
							title: a.cancelButtonLabel,
							importance: "clear",
							kind: "muted",
							size: "md",
							"data-qa": "dt-message-input-link-cancel-btn",
							onClick: t[10] || (t[10] = (e) => i.isOpen = !1)
						}, {
							default: m(() => [l(p(a.cancelButtonLabel), 1)]),
							_: 1
						}, 8, ["aria-label", "title"]), u(b, {
							size: "md",
							"aria-label": a.confirmButtonLabel,
							title: a.confirmButtonLabel,
							"data-qa": "dt-message-input-link-confirm-btn",
							onClick: t[11] || (t[11] = (t) => e.$emit("set-link", i.linkText, i.linkInput))
						}, {
							default: m(() => [l(p(a.confirmButtonLabel), 1)]),
							_: 1
						}, 8, ["aria-label", "title"])]),
						_: 1
					})]),
					_: 1
				})
			]),
			_: 1
		})]),
		_: 1
	}, 8, ["open"]);
}
var x = /* @__PURE__ */ e(v, [["render", b]]);
//#endregion
export { x as default };

//# sourceMappingURL=message-input-link.js.map