@dialpad/dialtone-vue 3.221.1 → 3.222.0-next.2

package/dist/emoji_picker-tVHfpHDk.js

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