@dialpad/dialtone-vue 3.219.0-next.2 → 3.219.0

package/dist/emoji_picker-tVHfpHDk.js

@@ -0,0 +1,857 @@
+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