import { returnFirstEl as e } from "./common/utils/index.js";
import { DialtoneLocalization as t } from "./localization/index.js";
import n from "./lib/button/button.js";
import r from "./lib/tooltip/tooltip.js";
import i from "./lib/input/input.js";
import a from "./lib/tab/tab-group.js";
import o from "./lib/tab/tab.js";
import { ARROW_KEYS as s, CDN_URL as c, EMOJI_PICKER_SKIN_TONE_MODIFIERS as l } from "./lib/emoji-picker/emoji-picker-constants.js";
import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as g, createTextVNode as _, createVNode as v, nextTick as y, normalizeClass as b, onBeforeUnmount as x, onMounted as S, openBlock as C, ref as w, renderList as T, resolveDynamicComponent as E, toDisplayString as D, unref as O, vShow as k, watch as A, watchEffect as j, withCtx as M, withDirectives as N, withKeys as P, withModifiers as F } from "vue";
import { DtIconClock as I, DtIconClose as L, DtIconDialpadStar as R, DtIconFlag as z, DtIconFood as B, DtIconHeart as V, DtIconLightbulb as H, DtIconLivingThing as U, DtIconObject as W, DtIconSatisfied as ee, DtIconSearch as te, DtIconTransportation as G } from "@dialpad/dialtone-icons/vue3";
import { emojisGrouped as K } from "@dialpad/dialtone-emojis";
//#region components/emoji_picker/modules/emoji_search.vue
var q = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, J = {
	__name: "emoji_search",
	props: {
		searchPlaceholderLabel: {
			type: String,
			required: !0
		},
		modelValue: {
			type: String,
			default: ""
		}
	},
	emits: [
		"update:modelValue",
		"focus-emoji-selector",
		"focus-tabset",
		"select-first-emoji"
	],
	setup(e, { expose: t, emit: r }) {
		let a = r, o = w(null);
		function s() {
			a("update:modelValue", ""), c();
		}
		function c() {
			o.value.focus();
		}
		return S(() => {
			c();
		}), t({ focusSearchInput: c }), (t, r) => (C(), m("div", q, [v(O(i), {
			id: "searchInput",
			ref_key: "searchInput",
			ref: o,
			placeholder: e.searchPlaceholderLabel,
			"model-value": e.modelValue,
			"onUpdate:modelValue": r[0] || (r[0] = (e) => t.$emit("update:modelValue", e)),
			onKeydown: [
				r[1] || (r[1] = P((e) => t.$emit("focus-tabset"), ["up"])),
				r[2] || (r[2] = P(F((e) => t.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
				r[3] || (r[3] = P((e) => t.$emit("select-first-emoji"), ["enter"]))
			]
		}, g({
			leftIcon: M(() => [v(O(te), { size: "200" })]),
			_: 2
		}, [e.modelValue.length > 0 ? {
			name: "rightIcon",
			fn: M(() => [v(O(n), {
				importance: "clear",
				size: "xs",
				class: "d-emoji-picker__search-x-button",
				circle: "",
				kind: "muted",
				onClick: s
			}, {
				icon: M(() => [v(O(L), { size: "200" })]),
				_: 1
			})]),
			key: "0"
		} : void 0]), 1032, ["placeholder", "model-value"])]));
	}
}, Y = { class: "d-emoji-picker__tabset" }, X = {
	__name: "emoji_tabset",
	props: {
		showRecentlyUsedTab: {
			type: Boolean,
			default: !1
		},
		showCustomEmojisTab: {
			type: Boolean,
			default: !1
		},
		scrollIntoTab: {
			type: Number,
			required: !0
		},
		emojiFilter: {
			type: String,
			default: ""
		},
		tabSetLabels: {
			type: Array,
			required: !0
		}
	},
	emits: [
		"selected-tabset",
		"focus-search-input",
		"focus-skin-selector"
	],
	setup(t, { expose: n, emit: r }) {
		let i = t, s = r, c = [
			{
				label: i.tabSetLabels[0],
				icon: I
			},
			{
				label: i.tabSetLabels[1],
				icon: ee
			},
			{
				label: i.tabSetLabels[2],
				icon: U
			},
			{
				label: i.tabSetLabels[3],
				icon: B
			},
			{
				label: i.tabSetLabels[4],
				icon: W
			},
			{
				label: i.tabSetLabels[5],
				icon: G
			},
			{
				label: i.tabSetLabels[6],
				icon: H
			},
			{
				label: i.tabSetLabels[7],
				icon: V
			},
			{
				label: i.tabSetLabels[8],
				icon: z
			},
			{
				label: i.tabSetLabels[9],
				icon: R
			}
		], l = d(() => {
			let e = i.showRecentlyUsedTab ? c : c.slice(1);
			return i.showCustomEmojisTab || e.pop(), e.map((e, t) => ({
				...e,
				id: (t + 1).toString(),
				panelId: (t + 1).toString()
			}));
		}), p = d(() => i.emojiFilter.length > 0), h = w("1"), g = w([]);
		A(() => i.scrollIntoTab, () => {
			p.value || (h.value = (i.scrollIntoTab + 1).toString());
		}), A(p, () => {
			p.value && (h.value = null);
		});
		function _(e) {
			let t = parseInt(e);
			h.value = e, s("selected-tabset", t);
		}
		function y(t) {
			g.value.push(e(t.$el));
		}
		function b() {
			g.value[0].focus();
		}
		function x(e, t) {
			e.key === "Enter" && (_(t), g.value[t - 1].blur()), e.key === "Tab" && (e.preventDefault(), e.shiftKey ? s("focus-skin-selector") : s("focus-search-input")), e.key === "ArrowDown" && s("focus-search-input");
		}
		return n({ focusTabset: b }), (e, t) => (C(), m("div", Y, [v(O(a), {
			selected: h.value,
			size: "sm",
			"tab-list-class": "d-emoji-picker__tabset-list"
		}, {
			tabs: M(() => [(C(!0), m(u, null, T(l.value, (e, t) => (C(), f(O(o), {
				id: e.id,
				key: e.id,
				ref_for: !0,
				ref: (e) => {
					e && y(e);
				},
				label: e.label,
				"panel-id": e.panelId,
				tabindex: t + 1,
				"aria-controls": "d-emoji-picker-list",
				onKeydown: (t) => x(t, e.id),
				onClickCapture: F((t) => _(e.id), ["stop"])
			}, {
				default: M(() => [(C(), f(E(e.icon), { size: "400" }))]),
				_: 2
			}, 1032, [
				"id",
				"label",
				"panel-id",
				"tabindex",
				"onKeydown",
				"onClickCapture"
			]))), 128))]),
			_: 1
		}, 8, ["selected"])]));
	}
};
//#endregion
//#region components/emoji_picker/composables/useKeyboardNavigation.js
function ne() {
	let e = w([]), t = w([]), n = w(!1), r = w(!0);
	function i(t, n) {
		u(t, n - 1) || (e.value[t - 1] ? u(t - 1, e.value[t - 1].length - 1) : u(e.value.length - 1, e.value[e.value.length - 1].length - 1));
	}
	function a(e, t) {
		u(e, t + 1) || u(e + 1, 0) || u(0, 0);
	}
	function o(e, n) {
		u(0, n - 1) || u(0, t.value.length - 1);
	}
	function c(e, t) {
		u(0, t + 1) || u(0, 0);
	}
	function l(e, t, r) {
		n.value ? e === "left" ? o(t, r) : e === "right" && c(t, r) : e === "left" ? i(t, r) : e === "right" && a(t, r);
	}
	function u(r, i) {
		let a = n.value ? t.value?.[i] : e.value?.[r]?.[i];
		return a ? (a.focus(), !0) : !1;
	}
	function d(t, n, r) {
		e.value[n] || (e.value[n] = []), e.value[n][r] = t;
	}
	function f(e, n) {
		t.value[n] = e;
	}
	function p(e, n) {
		if (r.value = !1, e === s.ARROW_UP) {
			let e = n % 9;
			if (!u(0, n - 9)) {
				let n = t.value.length - t.value.length % 9 + e;
				u(0, n), u(0, n) || u(0, t.value.length - 1);
			}
		}
		if (e === s.ARROW_DOWN && !u(0, n + 9)) {
			let e = n % 9;
			t.value?.[n + (9 - e)] ? u(0, t.value.length - 1) : u(0, e);
		}
		e === s.ARROW_LEFT && l("left", 0, n), e === s.ARROW_RIGHT && l("right", 0, n);
	}
	function m(t, n, r) {
		if (t === "ArrowUp") {
			let t = r % 9;
			if (n === 0) {
				let n = 9 - e.value[e.value.length - 1].length % 9, r = e.value[e.value.length - 1].length + n - (9 - t);
				u(e.value.length - 1, r) || u(e.value.length - 1, e.value[e.value.length - 1].length - 1);
				return;
			}
			if (!u(n, r - 9)) {
				let r = n - 1 < 0 ? 0 : n - 1, i = e.value[r].length;
				u(r, i - i % 9 + t) || u(n - 1, e.value[n - 1].length - 1);
			}
		}
		if (t === "ArrowDown" && !u(n, r + 9)) {
			let t = r % 9;
			e.value?.[n]?.[r + (9 - t)] ? u(n, e.value[n].length - 1) : u(n + 1, t) || u(0, t) || u(0, e.value[0].length - 1);
		}
		t === "ArrowLeft" && l("left", n, r), t === "ArrowRight" && l("right", n, r);
	}
	return {
		emojiFilteredRefs: t,
		isFiltering: n,
		hoverFirstEmoji: r,
		setEmojiRef: d,
		setFilteredRef: f,
		focusEmoji: u,
		handleArrowNavigationFiltered: p,
		handleArrowNavigation: m
	};
}
//#endregion
//#region components/emoji_picker/modules/emoji_selector.vue
var re = { class: "d-emoji-picker__selector" }, ie = {
	key: 0,
	class: "d-emoji-picker__search-label d-emoji-picker__alignment"
}, ae = { key: 0 }, oe = { class: "d-emoji-picker__tab" }, se = [
	"aria-label",
	"onClick",
	"onFocusin",
	"onMouseover",
	"onKeydown"
], ce = [
	"alt",
	"aria-label",
	"title",
	"src"
], le = {
	key: 2,
	class: "d-emoji-picker__alignment"
}, ue = {
	class: "d-emoji-picker__tab",
	"data-qa": "filtered-emojis"
}, de = [
	"aria-label",
	"onClick",
	"onFocusin",
	"onMouseover",
	"onKeydown"
], fe = [
	"alt",
	"aria-label",
	"title",
	"src"
], Z = {
	__name: "emoji_selector",
	props: {
		emojiFilter: {
			type: String,
			default: ""
		},
		skinTone: {
			type: String,
			required: !0
		},
		tabsetLabels: {
			type: Array,
			required: !0
		},
		selectedTabset: {
			type: Object,
			required: !0
		},
		searchResultsLabel: {
			type: String,
			required: !0
		},
		searchNoResultsLabel: {
			type: String,
			required: !0
		},
		recentlyUsedEmojis: {
			type: Array,
			default: () => []
		},
		customEmojis: {
			type: Array,
			default: () => []
		}
	},
	emits: [
		"highlighted-emoji",
		"selected-emoji",
		"scroll-into-tab",
		"scroll-bottom-reached",
		"focus-skin-selector",
		"focus-search-input"
	],
	setup(e, { expose: t, emit: n }) {
		let r = e, i = n, { emojiFilteredRefs: a, isFiltering: o, hoverFirstEmoji: l, setEmojiRef: f, setFilteredRef: g, focusEmoji: _, handleArrowNavigationFiltered: v, handleArrowNavigation: E } = ne(), j = w(null), M = w(null), P = w(null), F = [
			"Recently used",
			"People",
			"Nature",
			"Food",
			"Activity",
			"Travel",
			"Objects",
			"Symbols",
			"Flags",
			"Custom"
		], I = d(() => {
			let e = r.tabsetLabels.map((e) => ({
				label: e,
				ref: w(null)
			}));
			return r.recentlyUsedEmojis && !r.recentlyUsedEmojis.length && (e = r.tabsetLabels.slice(1).map((e) => ({
				label: e,
				ref: w(null)
			}))), r.customEmojis && !r.customEmojis.length && e.pop(), e;
		}), L = w(I.value[0].label), R = d(() => {
			let e = r.recentlyUsedEmojis.length ? F.slice() : F.slice(1);
			return r.customEmojis && !r.customEmojis.length && e.pop(), e;
		}), z = w([]), B = d(() => [
			...K[`People${r.skinTone}`],
			...K.Nature,
			...K.Food,
			...K[`Activity${r.skinTone}`],
			...K.Travel,
			...K[`Objects${r.skinTone}`],
			...K.Symbols,
			...K.Flags
		]), V = ee(() => {
			a.value = [], W();
		}), H = () => {
			let e = M.value;
			e.scrollTop + e.clientHeight >= e.scrollHeight && i("scroll-bottom-reached");
		};
		A(B, () => {
			W();
		}, { immediate: !0 }), A(() => r.recentlyUsedEmojis, () => {
			K["Recently used"] = r.recentlyUsedEmojis;
		}, { immediate: !0 }), A(() => r.customEmojis, () => {
			K.Custom = r.customEmojis;
		}, { immediate: !0 }), A(() => r.emojiFilter, () => {
			J(), r.emojiFilter ? o.value = !0 : (o.value = !1, $(null)), V();
		}), A(() => r.selectedTabset, (e) => {
			q(e.tabId);
		}, { deep: !0 });
		function U(e, t = !1) {
			l.value = t, i("highlighted-emoji", e);
		}
		function W() {
			let e = r.emojiFilter.toLowerCase();
			z.value = B.value.filter((t) => {
				let n = t.name.toLowerCase().includes(e), r = t.keywords.some((t) => t.toLowerCase().includes(e));
				return n || r;
			}), y(() => {
				e && U(z.value[0], !0);
			});
		}
		function ee(e, t = 300) {
			let n;
			return (...r) => {
				clearTimeout(n), n = setTimeout(() => e(...r), t);
			};
		}
		function te(e) {
			return e.date_added ? e.image : c + e.unicode_character + ".png";
		}
		function G(e) {
			e.target.parentNode.style.display = "none";
		}
		function q(e, t = !0) {
			let n = I.value[e - 1].ref.value[0];
			y(() => {
				let r = M.value;
				r.scrollTop = e === 1 ? 0 : n.offsetTop - 15, t && _(e - 1, 0);
			});
		}
		function J() {
			let e = M.value;
			e.scrollTop = 0;
		}
		function Y() {
			M.value.addEventListener("scroll", H);
		}
		function X() {
			P.value = new IntersectionObserver(async (e) => {
				e.forEach((e) => {
					let { target: t } = e, n = parseInt(t.dataset.index);
					e.isIntersecting && t.offsetTop <= j.value.offsetTop + 50 ? (L.value = I.value[n - 1]?.label ?? I.value[0]?.label, i("scroll-into-tab", n - 1)) : e.boundingClientRect.bottom <= j.value?.getBoundingClientRect().bottom ? (i("scroll-into-tab", n), L.value = I.value[n]?.label) : n === 1 && (i("scroll-into-tab", n), L.value = I.value[0]?.label);
				});
			}), P.value.observe(j.value), Array.from(M.value.children).forEach((e, t) => {
				P.value.observe(e), e.dataset.index = t;
			});
		}
		let Z = (e, t, n) => {
			if (e.preventDefault(), Object.values(s).includes(e.key)) {
				v(e.key, t);
				return;
			}
			switch (e.key) {
				case "Tab":
					i("focus-skin-selector");
					break;
				case "Enter":
					Q(n, e);
					break;
				default: break;
			}
		}, pe = (e, t, n, r) => {
			if (e.preventDefault(), Object.values(s).includes(e.key)) {
				E(e.key, t, n);
				return;
			}
			switch (e.key) {
				case "Tab":
					e.shiftKey ? _(t, 0) && t > 0 ? q(t, !0) : (q(1, !1), i("focus-search-input")) : _(t + 1, 0) ? q(t + 1 + 1, !1) : i("focus-skin-selector");
					break;
				case "Enter":
					Q(r, e);
					break;
				default: break;
			}
		};
		function Q(e, t) {
			i("selected-emoji", {
				...e,
				shift_key: t.shiftKey
			});
		}
		function $(e) {
			i("highlighted-emoji", e);
		}
		function me() {
			_(0, 0);
		}
		function he() {
			q(R.value.length, !0);
		}
		return S(() => {
			X(), Y();
		}), x(() => {
			P.value.disconnect(), M.value.removeEventListener("scroll", H);
		}), t({
			focusEmojiSelector: me,
			focusLastEmoji: he
		}), (t, n) => (C(), m("div", re, [h("div", {
			id: "d-emoji-picker-list",
			ref_key: "listRef",
			ref: M,
			class: "d-emoji-picker__list"
		}, [
			e.emojiFilter ? (C(), m("p", ie, D(z.value.length > 0 ? e.searchResultsLabel : e.searchNoResultsLabel), 1)) : (C(), m("div", {
				key: 1,
				ref_key: "tabCategoryRef",
				ref: j,
				class: "d-emoji-picker__category d-emoji-picker__alignment"
			}, [h("p", null, D(L.value), 1)], 512)),
			(C(!0), m(u, null, T(I.value, (t, r) => N((C(), m("div", {
				key: r,
				ref_for: !0,
				ref: t.ref,
				class: "d-emoji-picker__alignment"
			}, [r ? (C(), m("p", ae, D(t.label), 1)) : p("", !0), h("div", oe, [(C(!0), m(u, null, T(O(K)[R.value[r] + e.skinTone] ? O(K)[R.value[r] + e.skinTone] : O(K)[R.value[r]], (e, t) => (C(), m("button", {
				key: e.shortname,
				ref_for: !0,
				ref: (e) => {
					e && O(f)(e, r, t);
				},
				type: "button",
				"aria-label": e.name,
				onClick: (t) => Q(e, t),
				onFocusin: (t) => $(e),
				onFocusout: n[0] || (n[0] = (e) => $(null)),
				onMouseover: (t) => $(e),
				onMouseleave: n[1] || (n[1] = (e) => $(null)),
				onKeydown: (n) => pe(n, r, t, e)
			}, [h("img", {
				class: "d-icon d-icon--size-500",
				alt: e.name,
				"aria-label": e.name,
				title: e.name,
				src: te(e),
				onError: G
			}, null, 40, ce)], 40, se))), 128))])])), [[k, !e.emojiFilter]])), 128)),
			e.emojiFilter ? (C(), m("div", le, [h("div", ue, [(C(!0), m(u, null, T(z.value, (e, t) => (C(), m("button", {
				key: e.shortname,
				ref_for: !0,
				ref: (e) => {
					e && O(g)(e, t);
				},
				type: "button",
				"aria-label": e.name,
				class: b({ "hover-emoji": t === 0 && O(l) }),
				onClick: (t) => Q(e, t),
				onFocusin: (t) => $(e),
				onFocusout: n[2] || (n[2] = (e) => $(null)),
				onMouseover: (t) => U(e),
				onMouseleave: n[3] || (n[3] = (e) => U(null)),
				onKeydown: (n) => Z(n, t, e)
			}, [h("img", {
				class: "d-icon d-icon--size-500",
				alt: e.name,
				"aria-label": e.name,
				title: e.name,
				src: `${O(c) + e.unicode_character}.png`
			}, null, 8, fe)], 42, de))), 128))])])) : p("", !0)
		], 512)]));
	}
}, pe = { "data-qa": "skin-selector" }, Q = { class: "d-emoji-picker__skin-list" }, $ = ["onKeydown", "onClick"], me = [
	"alt",
	"aria-label",
	"title",
	"src"
], he = { class: "d-emoji-picker__skin-selected" }, ge = ["aria-label"], _e = [
	"alt",
	"aria-label",
	"title",
	"src"
], ve = {
	__name: "emoji_skin_selector",
	props: {
		skinTone: {
			type: String,
			required: !0
		},
		isHovering: {
			type: Boolean,
			default: !1
		},
		skinSelectorButtonTooltipLabel: {
			type: String,
			required: !0
		}
	},
	emits: [
		"skin-tone",
		"focus-tabset",
		"focus-last-emoji"
	],
	setup(e, { expose: t, emit: n }) {
		let i = e, a = n, o = [
			{
				name: ":wave_tone1:",
				unicode_output: "1f44b-1f3fb",
				skinTone: l.LIGHT,
				skinCode: "_tone1"
			},
			{
				name: ":wave_tone2:",
				unicode_output: "1f44b-1f3fc",
				skinTone: l.MEDIUM_LIGHT,
				skinCode: "_tone2"
			},
			{
				name: ":wave_tone3:",
				unicode_output: "1f44b-1f3fd",
				skinTone: l.MEDIUM,
				skinCode: "_tone3"
			},
			{
				name: ":wave_tone4:",
				unicode_output: "1f44b-1f3fe",
				skinTone: l.MEDIUM_DARK,
				skinCode: "_tone4"
			},
			{
				name: ":wave_tone5:",
				unicode_output: "1f44b-1f3ff",
				skinTone: l.DARK,
				skinCode: "_tone5"
			},
			{
				name: ":wave:",
				unicode_output: "1f44b",
				skinTone: l.DEFAULT,
				skinCode: ""
			}
		], s = w(!1), f = w(null), p = w([]);
		j(() => i.isHovering && (s.value = !1));
		let g = d(() => o.find((e) => e.skinTone === i.skinTone)), x = w(g.value);
		j(() => g.value && (x.value = g.value));
		function S(e) {
			p.value.push(e);
		}
		function E() {
			f.value.focus();
		}
		function A(e) {
			x.value = e, s.value = !1, a("skin-tone", e.skinTone), y(() => E());
		}
		let P = (e, t, n) => {
			e.preventDefault(), e.key === "ArrowLeft" && (n === 0 && p.value[p.value.length - 1]?.focus(), p.value[n - 1]?.focus()), e.key === "ArrowRight" && p.value[n + 1]?.focus(), e.key === "Enter" && (t ? A(t) : F()), e.key === "Tab" && (e.shiftKey ? a("focus-last-emoji") : a("focus-tabset"));
		};
		function F() {
			s.value = !s.value, y(() => p.value[0].focus());
		}
		return t({ focusSkinSelector: E }), (t, n) => (C(), m("div", pe, [N(h("div", Q, [(C(), m(u, null, T(o, (e, t) => h("button", {
			ref_for: !0,
			ref: (e) => {
				e && S(e);
			},
			key: e.name,
			class: b({ selected: x.value.skinCode === e.skinCode }),
			onKeydown: (n) => P(n, e, t),
			onClick: (t) => A(e)
		}, [h("img", {
			class: "d-icon d-icon--size-500",
			alt: e.name,
			"aria-label": e.name,
			title: e.name,
			src: `${O(c) + e.unicode_output}.png`
		}, null, 8, me)], 42, $)), 64))], 512), [[k, s.value]]), N(h("div", he, [v(O(r), { placement: "top-end" }, {
			anchor: M(() => [h("button", {
				ref_key: "skinSelectorRef",
				ref: f,
				"aria-label": e.skinSelectorButtonTooltipLabel,
				tabindex: "-1",
				onClick: F,
				onKeydown: n[0] || (n[0] = (e) => P(e))
			}, [h("img", {
				class: "d-icon d-icon--size-500",
				alt: x.value.name,
				"aria-label": x.value.name,
				title: x.value.name,
				src: `${O(c) + x.value.unicode_output}.png`
			}, null, 8, _e)], 40, ge)]),
			default: M(() => [_(D(e.skinSelectorButtonTooltipLabel) + " ", 1)]),
			_: 1
		})], 512), [[k, !s.value]])]));
	}
}, ye = { class: "d-emoji-picker__data" }, be = [
	"alt",
	"aria-label",
	"title",
	"src"
], xe = {
	__name: "emoji_description",
	props: { emoji: {
		type: Object,
		default: null
	} },
	setup(e) {
		function t(e) {
			return e.date_added ? e.image : `${c + e.unicode_character}.png`;
		}
		return (n, r) => (C(), m("div", ye, [e.emoji ? (C(), m("img", {
			key: 0,
			class: "d-icon d-icon--size-500",
			alt: e.emoji.name,
			"aria-label": e.emoji.name,
			title: e.emoji.name,
			src: t(e.emoji)
		}, null, 8, be)) : p("", !0), h("div", null, D(e.emoji?.name), 1)]));
	}
}, Se = { class: "d-emoji-picker" }, Ce = { class: "d-emoji-picker--header" }, we = { class: "d-emoji-picker--body" }, Te = { class: "d-emoji-picker--footer" }, Ee = {
	__name: "emoji_picker",
	props: {
		recentlyUsedEmojis: {
			type: Array,
			default: () => []
		},
		customEmojis: { type: Array },
		skinTone: {
			type: String,
			default: "Default"
		},
		searchQuery: {
			type: String,
			default: ""
		},
		showSearch: {
			type: Boolean,
			default: !0
		},
		showAddEmojiButton: {
			type: Boolean,
			default: !1
		}
	},
	emits: [
		"selected-emoji",
		"scroll-bottom-reached",
		"skin-tone",
		"close",
		"add-emoji"
	],
	setup(e, { emit: r }) {
		let i = e, a = r, o = w(i.searchQuery.value), s = w(null), c = w({}), l = w(0), u = d(() => i.recentlyUsedEmojis?.length > 0), g = d(() => i.customEmojis?.length > 0), y = new t(), b = [
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),
			y.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")
		], x = y.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL"), S = y.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL"), T = y.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL"), E = y.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL"), k = y.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");
		A(() => i.searchQuery, (e) => {
			o.value = e;
		});
		function j(e) {
			o.value = "", c.value = {
				...c.value,
				tabId: e
			};
		}
		function N(e) {
			l.value = e;
		}
		function F(e) {
			s.value = e;
		}
		return (t, r) => (C(), m("div", Se, [
			h("div", Ce, [v(X, {
				ref: "tabsetRef",
				"emoji-filter": o.value,
				"show-custom-emojis-tab": g.value,
				"show-recently-used-tab": u.value,
				"scroll-into-tab": l.value,
				"tab-set-labels": b,
				onFocusSkinSelector: r[0] || (r[0] = (e) => t.$refs.skinSelectorRef.focusSkinSelector()),
				onFocusSearchInput: r[1] || (r[1] = (n) => e.showSearch ? t.$refs.searchInputRef.focusSearchInput() : t.$refs.emojiSelectorRef.focusEmojiSelector()),
				onSelectedTabset: j,
				onKeydown: r[2] || (r[2] = P((e) => a("close"), ["esc"]))
			}, null, 8, [
				"emoji-filter",
				"show-custom-emojis-tab",
				"show-recently-used-tab",
				"scroll-into-tab"
			])]),
			h("div", we, [e.showSearch ? (C(), f(J, {
				key: 0,
				ref: "searchInputRef",
				modelValue: o.value,
				"onUpdate:modelValue": r[3] || (r[3] = (e) => o.value = e),
				"search-placeholder-label": O(x),
				onSelectFirstEmoji: r[4] || (r[4] = (e) => a("selected-emoji", s.value)),
				onFocusTabset: r[5] || (r[5] = (e) => t.$refs.tabsetRef.focusTabset()),
				onFocusEmojiSelector: r[6] || (r[6] = (e) => t.$refs.emojiSelectorRef.focusEmojiSelector()),
				onKeydown: r[7] || (r[7] = P((e) => a("close"), ["esc"]))
			}, null, 8, ["modelValue", "search-placeholder-label"])) : p("", !0), v(Z, {
				ref: "emojiSelectorRef",
				"emoji-filter": o.value,
				"skin-tone": e.skinTone,
				"tabset-labels": b,
				"search-results-label": O(S),
				"search-no-results-label": O(T),
				"recently-used-emojis": e.recentlyUsedEmojis,
				"custom-emojis": e.customEmojis,
				"selected-tabset": c.value,
				onScrollIntoTab: N,
				onHighlightedEmoji: F,
				onSelectedEmoji: r[8] || (r[8] = (e) => a("selected-emoji", e)),
				onFocusSkinSelector: r[9] || (r[9] = (e) => t.$refs.skinSelectorRef.focusSkinSelector()),
				onFocusSearchInput: r[10] || (r[10] = (n) => e.showSearch ? t.$refs.searchInputRef.focusSearchInput() : t.$refs.tabsetRef.focusTabset()),
				onKeydown: r[11] || (r[11] = P((e) => a("close"), ["esc"])),
				onScrollBottomReached: r[12] || (r[12] = (e) => a("scroll-bottom-reached"))
			}, null, 8, [
				"emoji-filter",
				"skin-tone",
				"search-results-label",
				"search-no-results-label",
				"recently-used-emojis",
				"custom-emojis",
				"selected-tabset"
			])]),
			h("div", Te, [
				e.showAddEmojiButton && !s.value ? (C(), f(O(n), {
					key: 0,
					importance: "outlined",
					"aria-label": O(k),
					class: "d-emoji-picker__add-emoji",
					onClick: r[13] || (r[13] = (e) => a("add-emoji"))
				}, {
					default: M(() => [_(D(O(k)), 1)]),
					_: 1
				}, 8, ["aria-label"])) : p("", !0),
				v(xe, { emoji: s.value }, null, 8, ["emoji"]),
				v(ve, {
					ref: "skinSelectorRef",
					"is-hovering": !!s.value,
					"skin-selector-button-tooltip-label": O(E),
					"skin-tone": e.skinTone,
					onSkinTone: r[14] || (r[14] = (e) => a("skin-tone", e)),
					onFocusTabset: r[15] || (r[15] = (e) => t.$refs.tabsetRef.focusTabset()),
					onFocusLastEmoji: r[16] || (r[16] = (e) => t.$refs.emojiSelectorRef.focusLastEmoji()),
					onKeydown: r[17] || (r[17] = P((e) => a("close"), ["esc"]))
				}, null, 8, [
					"is-hovering",
					"skin-selector-button-tooltip-label",
					"skin-tone"
				])
			])
		]));
	}
};
//#endregion
export { Ee as t };

//# sourceMappingURL=emoji_picker-tVHfpHDk.js.map