@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
857 lines (856 loc) • 24.6 kB
JavaScript
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