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

package/dist/datepicker-LVDRC6Lf.js

@@ -1,488 +0,0 @@
-import { returnFirstEl as e, warnIfUnmounted as t } from "./common/utils/index.js";
-import { DialtoneLocalization as n } from "./localization/index.js";
-import r from "./lib/button/button.js";
-import i from "./lib/stack/stack.js";
-import a from "./lib/tooltip/tooltip.js";
-import { INTL_MONTH_FORMAT as o } from "./lib/datepicker/datepicker-constants.js";
-import { calculateNextFocusDate as s, calculatePrevFocusDate as c, formatDate as l, formatMonth as u, getCalendarDays as d, getWeekDayNames as f } from "./lib/datepicker/utils.js";
-import { Fragment as p, computed as m, createBlock as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, getCurrentInstance as b, nextTick as x, normalizeClass as S, onMounted as C, openBlock as w, ref as T, renderList as E, toDisplayString as D, unref as O, watch as k, withCtx as A } from "vue";
-import { addMonths as j, endOfMonth as M, getDate as N, getMonth as P, getYear as F, set as I, startOfDay as L, startOfMonth as R, subMonths as z } from "date-fns";
-import { DtIconChevronLeft as B, DtIconChevronRight as V, DtIconChevronsLeft as H, DtIconChevronsRight as U } from "@dialpad/dialtone-icons/vue3";
-//#region components/datepicker/composables/useMonthYearPicker.js
-function W(t, r) {
-	let i = T(P(t.selectedDate)), a = T(F(t.selectedDate)), s = T(null), c = T(0), l = T([]), f = new n(), p = m(() => d(i.value, a.value, s.value, t.minDate, t.maxDate, t.weekStartsOn)), h = m(() => t.minDate ? M(z(new Date(a.value, i.value, 1), 1)) < L(t.minDate) : !1), g = m(() => t.maxDate ? R(j(new Date(a.value, i.value, 1), 1)) > L(t.maxDate) : !1), _ = m(() => t.minDate ? M(new Date(a.value - 1, i.value, 1)) < L(t.minDate) : !1), v = m(() => t.maxDate ? R(new Date(a.value + 1, i.value, 1)) > L(t.maxDate) : !1);
-	k(i, () => {
-		C(), r("calendar-days", p.value);
-	}, { immediate: !0 }), k(a, () => {
-		C(), r("calendar-days", p.value);
-	}, { immediate: !0 }), k(() => t.minDate, () => {
-		r("calendar-days", p.value);
-	}), k(() => t.maxDate, () => {
-		r("calendar-days", p.value);
-	});
-	function y(e) {
-		return u(e, o, f.currentLocale);
-	}
-	function b(e) {
-		l.value.includes(e) || l.value.push(e);
-	}
-	function x() {
-		e(l.value[0].$el).focus();
-	}
-	function S(t) {
-		switch (t.key) {
-			case "ArrowLeft":
-				t.preventDefault(), c.value === 0 ? (c.value = 3, e(l.value[c.value].$el).focus()) : (c.value--, e(l.value[c.value].$el).focus());
-				break;
-			case "ArrowRight":
-				t.preventDefault(), c.value === 3 ? (c.value = 0, e(l.value[c.value].$el).focus()) : (c.value++, e(l.value[c.value].$el).focus());
-				break;
-			case "ArrowDown":
-				t.preventDefault(), r("focus-first-day");
-				break;
-			case "Tab":
-				t.preventDefault(), r("focus-first-day");
-				break;
-			case "Escape":
-				r("close-datepicker");
-				break;
-		}
-	}
-	function C() {
-		let e = F(t.selectedDate), n = P(t.selectedDate);
-		e !== a.value || n !== i.value ? s.value = null : s.value = N(t.selectedDate);
-	}
-	function w(e) {
-		if (e === -1 && h.value || e === 1 && g.value) return;
-		(i.value === 0 && e === -1 || i.value === 11 && e === 1) && (a.value += e);
-		let n = I(t.selectedDate, {
-			month: i.value,
-			year: a.value
-		});
-		i.value = P(e === 1 ? j(n, 1) : z(n, 1));
-	}
-	function E(e) {
-		e === -1 && _.value || e === 1 && v.value || (a.value += e);
-	}
-	function D() {
-		w(1);
-	}
-	function O() {
-		w(-1);
-	}
-	function A() {
-		return `${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR")} ${a.value - 1}`;
-	}
-	function B() {
-		return `${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH")} ${y(i.value - 1)}`;
-	}
-	function V() {
-		return `${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_NEXT_YEAR")} ${a.value + 1}`;
-	}
-	function H() {
-		return `${f.$t("DIALTONE_DATEPICKER_CHANGE_TO")} ${f.$t("DIALTONE_DATEPICKER_NEXT_MONTH")} ${y(i.value + 1)}`;
-	}
-	return {
-		selectMonth: i,
-		selectYear: a,
-		formattedMonth: y,
-		setDayRef: b,
-		focusMonthYearPicker: x,
-		handleKeyDown: S,
-		changeMonth: w,
-		changeYear: E,
-		goToNextMonth: D,
-		goToPrevMonth: O,
-		isPrevMonthDisabled: h,
-		isNextMonthDisabled: g,
-		isPrevYearDisabled: _,
-		isNextYearDisabled: v,
-		previousYearAriaLabel: A,
-		previousMonthAriaLabel: B,
-		nextYearAriaLabel: V,
-		nextMonthAriaLabel: H
-	};
-}
-//#endregion
-//#region components/datepicker/modules/month-year-picker.vue
-var G = {
-	id: "calendar-heading",
-	class: "d-datepicker__month-year-title"
-}, K = {
-	__name: "month-year-picker",
-	props: {
-		selectedDate: {
-			type: Date,
-			required: !0
-		},
-		minDate: {
-			type: Date,
-			default: null
-		},
-		maxDate: {
-			type: Date,
-			default: null
-		},
-		weekStartsOn: {
-			type: Number,
-			default: 0,
-			validator: (e) => Number.isInteger(e) && e >= 0 && e <= 6
-		}
-	},
-	emits: [
-		"calendar-days",
-		"focus-first-day",
-		"focus-last-day",
-		"close-datepicker"
-	],
-	setup(e, { expose: t, emit: o }) {
-		let s = e, c = o, l = new n(), { selectMonth: u, selectYear: d, formattedMonth: f, setDayRef: p, focusMonthYearPicker: m, handleKeyDown: g, changeMonth: v, changeYear: b, goToNextMonth: x, goToPrevMonth: S, isPrevMonthDisabled: T, isNextMonthDisabled: E, isPrevYearDisabled: k, isNextYearDisabled: j, previousYearAriaLabel: M, previousMonthAriaLabel: N, nextMonthAriaLabel: P, nextYearAriaLabel: F } = W(s, c);
-		return C(() => {
-			m();
-		}), t({
-			focusMonthYearPicker: m,
-			goToNextMonth: x,
-			goToPrevMonth: S
-		}), (e, t) => (w(), h(O(i), {
-			class: "d-datepicker__month-year",
-			direction: "row",
-			gap: "300"
-		}, {
-			default: A(() => [
-				y(O(i), {
-					as: "nav",
-					class: "d-datepicker__nav",
-					direction: "row",
-					gap: "200"
-				}, {
-					default: A(() => [y(O(a), {
-						"fallback-placements": ["top-start", "auto"],
-						message: O(l).$t("DIALTONE_DATEPICKER_PREVIOUS_YEAR"),
-						placement: "top"
-					}, {
-						anchor: A(() => [y(O(r), {
-							id: "prevYearButton",
-							ref: (e) => {
-								e && O(p)(e);
-							},
-							"aria-label": O(M)(),
-							circle: !0,
-							disabled: O(k),
-							class: "d-datepicker__nav-btn",
-							importance: "clear",
-							kind: "muted",
-							size: "xs",
-							type: "button",
-							onClick: t[0] || (t[0] = (e) => O(b)(-1)),
-							onKeydown: t[1] || (t[1] = (e) => O(g)(e))
-						}, {
-							default: A(() => [y(O(H), { size: "200" })]),
-							_: 1
-						}, 8, ["aria-label", "disabled"])]),
-						_: 1
-					}, 8, ["message"]), y(O(a), {
-						"fallback-placements": ["top-start", "auto"],
-						message: O(l).$t("DIALTONE_DATEPICKER_PREVIOUS_MONTH"),
-						placement: "top"
-					}, {
-						anchor: A(() => [y(O(r), {
-							id: "prevMonthButton",
-							ref: (e) => {
-								e && O(p)(e);
-							},
-							"aria-label": O(N)(),
-							circle: !0,
-							disabled: O(T),
-							class: "d-datepicker__nav-btn",
-							importance: "clear",
-							kind: "muted",
-							size: "xs",
-							type: "button",
-							onClick: t[2] || (t[2] = (e) => O(v)(-1)),
-							onKeydown: t[3] || (t[3] = (e) => O(g)(e))
-						}, {
-							default: A(() => [y(O(B), { size: "200" })]),
-							_: 1
-						}, 8, ["aria-label", "disabled"])]),
-						_: 1
-					}, 8, ["message"])]),
-					_: 1
-				}),
-				_("div", G, D(O(f)(O(u))) + " " + D(O(d)), 1),
-				y(O(i), {
-					as: "nav",
-					class: "d-datepicker__nav",
-					direction: "row",
-					gap: "200"
-				}, {
-					default: A(() => [y(O(a), {
-						"fallback-placements": ["top-end", "auto"],
-						message: O(l).$t("DIALTONE_DATEPICKER_NEXT_MONTH"),
-						placement: "top"
-					}, {
-						anchor: A(() => [y(O(r), {
-							id: "nextMonthButton",
-							ref: (e) => {
-								e && O(p)(e);
-							},
-							"aria-label": O(P)(),
-							circle: !0,
-							disabled: O(E),
-							class: "d-datepicker__nav-btn",
-							importance: "clear",
-							kind: "muted",
-							size: "xs",
-							type: "button",
-							onClick: t[4] || (t[4] = (e) => O(v)(1)),
-							onKeydown: t[5] || (t[5] = (e) => O(g)(e))
-						}, {
-							default: A(() => [y(O(V), { size: "200" })]),
-							_: 1
-						}, 8, ["aria-label", "disabled"])]),
-						_: 1
-					}, 8, ["message"]), y(O(a), {
-						"fallback-placements": ["top-end", "auto"],
-						message: O(l).$t("DIALTONE_DATEPICKER_NEXT_YEAR"),
-						placement: "top"
-					}, {
-						anchor: A(() => [y(O(r), {
-							id: "nextYearButton",
-							ref: (e) => {
-								e && O(p)(e);
-							},
-							"aria-label": O(F)(),
-							circle: !0,
-							disabled: O(j),
-							class: "d-datepicker__nav-btn",
-							importance: "clear",
-							kind: "muted",
-							size: "xs",
-							type: "button",
-							onClick: t[6] || (t[6] = (e) => O(b)(1)),
-							onKeydown: t[7] || (t[7] = (e) => O(g)(e))
-						}, {
-							default: A(() => [y(O(U), { size: "200" })]),
-							_: 1
-						}, 8, ["aria-label", "disabled"])]),
-						_: 1
-					}, 8, ["message"])]),
-					_: 1
-				})
-			]),
-			_: 1
-		}));
-	}
-};
-//#endregion
-//#region components/datepicker/composables/useCalendar.js
-function q(t, r) {
-	let i = T(null), a = T(0), u = T([]), d = new n(), p = m(() => f(t.locale, t.weekStartsOn));
-	k(() => t.calendarDays, () => {
-		a.value = 0, u.value = [], i.value = null;
-	});
-	function h(e) {
-		return d.$t("DIALTONE_DATEPICKER_SELECT_DAY") + ` ${l(e.value, o, d.currentLocale)}`;
-	}
-	function g(e, t) {
-		!u.value.some((t) => t.el === e) && !t.disabled && u.value.push({
-			el: e,
-			day: t
-		});
-	}
-	function _(t) {
-		switch (t.key) {
-			case "ArrowUp":
-				t.preventDefault(), a.value -= 7;
-				try {
-					e(u.value[a.value].el.$el).focus();
-				} catch {
-					let t = c(u.value[a.value + 7].day.value);
-					r("go-to-prev-month"), x(() => {
-						e(u.value[t - 1].el.$el).focus(), a.value += t - 1;
-					});
-				}
-				break;
-			case "ArrowDown":
-				t.preventDefault(), a.value += 7;
-				try {
-					e(u.value[a.value].el.$el).focus();
-				} catch {
-					let t = s(u.value[a.value - 7].day.value);
-					r("go-to-next-month"), x(() => {
-						e(u.value[t - 1].el.$el).focus(), a.value += t - 1;
-					});
-				}
-				break;
-			case "ArrowLeft":
-				t.preventDefault(), a.value > 0 ? (--a.value, e(u.value[a.value].el.$el).focus()) : (r("go-to-prev-month"), y());
-				break;
-			case "ArrowRight":
-				t.preventDefault(), a.value < u.value.length - 1 ? (a.value += 1, e(u.value[a.value].el.$el).focus()) : (r("go-to-next-month"), v());
-				break;
-			case "Tab":
-				t.preventDefault(), r("focus-month-year-picker");
-				break;
-			case "Escape":
-				r("close-datepicker");
-				break;
-		}
-	}
-	function v() {
-		a.value = 0, x(() => {
-			e(u.value[a.value].el.$el).focus();
-		});
-	}
-	function y() {
-		x(() => {
-			a.value = u.value.length - 1, e(u.value[a.value].el.$el).focus();
-		});
-	}
-	function b(e) {
-		e.disabled || (i.value = e.text, r("select-date", e.value));
-	}
-	return {
-		selectedDay: i,
-		weekDays: p,
-		dayAriaLabel: h,
-		setDayRef: g,
-		handleKeyDown: _,
-		focusFirstDay: v,
-		selectDay: b
-	};
-}
-//#endregion
-//#region components/datepicker/modules/calendar.vue
-var J = {
-	class: "d-datepicker__calendar",
-	"aria-labelledby": "calendar-heading"
-}, Y = ["title", "aria-label"], X = {
-	__name: "calendar",
-	props: {
-		calendarDays: {
-			type: Array,
-			required: !0
-		},
-		weekStartsOn: {
-			type: Number,
-			default: 0,
-			validator: (e) => Number.isInteger(e) && e >= 0 && e <= 6
-		}
-	},
-	emits: [
-		"select-date",
-		"focus-month-year-picker",
-		"close-datepicker",
-		"go-to-next-month",
-		"go-to-prev-month"
-	],
-	setup(e, { expose: t, emit: n }) {
-		let { selectedDay: i, weekDays: a, dayAriaLabel: o, setDayRef: s, handleKeyDown: c, focusFirstDay: l, selectDay: u } = q(e, n);
-		return t({ focusFirstDay: l }), (t, n) => (w(), g("table", J, [_("thead", null, [_("tr", null, [(w(!0), g(p, null, E(O(a), (e) => (w(), g("th", {
-			key: e,
-			scope: "col",
-			class: "d-datepicker__cell d-datepicker__cell--header"
-		}, [_("span", {
-			class: "d-datepicker__weekday",
-			title: e,
-			"aria-label": e
-		}, D(e), 9, Y)]))), 128))])]), _("tbody", null, [(w(!0), g(p, null, E(e.calendarDays, (e, t) => (w(), g("tr", { key: t }, [(w(!0), g(p, null, E(e.days, (e, a) => (w(), g("td", {
-			key: t + a,
-			class: "d-datepicker__cell",
-			role: "listbox"
-		}, [y(O(r), {
-			ref_for: !0,
-			ref: (t) => {
-				t && O(s)(t, e);
-			},
-			class: S(["d-datepicker__day", {
-				"d-datepicker__day--disabled": e.disabled,
-				"d-datepicker__day--selected": O(i) ? e.text === O(i) && !e.disabled : e.selected
-			}]),
-			circle: !0,
-			size: "sm",
-			importance: "clear",
-			disabled: e.disabled,
-			type: "button",
-			"aria-selected": O(i) ? e.text === O(i) && !e.disabled : e.selected,
-			"aria-label": O(o)(e),
-			role: "option",
-			onClick: (t) => O(u)(e),
-			onKeydown: n[0] || (n[0] = (e) => O(c)(e))
-		}, {
-			default: A(() => [v(D(e.text), 1)]),
-			_: 2
-		}, 1032, [
-			"disabled",
-			"class",
-			"aria-selected",
-			"aria-label",
-			"onClick"
-		])]))), 128))]))), 128))])]));
-	}
-}, Z = { class: "d-datepicker__hd" }, Q = { class: "d-datepicker__bd" }, $ = {
-	__name: "datepicker",
-	props: {
-		selectedDate: {
-			type: Date,
-			default: () => /* @__PURE__ */ new Date()
-		},
-		minDate: {
-			type: Date,
-			default: null
-		},
-		maxDate: {
-			type: Date,
-			default: null,
-			validator: (e, t) => e && t.minDate && e < t.minDate ? (console.warn("[DtDatepicker]: maxDate must be after or equal to minDate."), !1) : !0
-		},
-		weekStartsOn: {
-			type: Number,
-			default: 0,
-			validator: (e) => Number.isInteger(e) && e >= 0 && e <= 6
-		}
-	},
-	emits: ["selected-date", "close-datepicker"],
-	setup(n) {
-		let r = T([]);
-		function a(e) {
-			r.value = e;
-		}
-		return C(() => {
-			t(e(b().proxy.$el), "datepicker");
-		}), (e, t) => (w(), h(O(i), {
-			class: "d-datepicker",
-			gap: "400"
-		}, {
-			default: A(() => [_("div", Z, [y(K, {
-				ref: "monthYearPicker",
-				"selected-date": n.selectedDate,
-				"min-date": n.minDate,
-				"max-date": n.maxDate,
-				"week-starts-on": n.weekStartsOn,
-				onCalendarDays: a,
-				onFocusFirstDay: t[0] || (t[0] = (t) => e.$refs.calendar.focusFirstDay()),
-				onFocusLastDay: t[1] || (t[1] = (t) => e.$refs.calendar.focusLastDay()),
-				onCloseDatepicker: t[2] || (t[2] = (t) => e.$emit("close-datepicker"))
-			}, null, 8, [
-				"selected-date",
-				"min-date",
-				"max-date",
-				"week-starts-on"
-			])]), _("div", Q, [y(X, {
-				ref: "calendar",
-				"calendar-days": r.value,
-				"week-starts-on": n.weekStartsOn,
-				onSelectDate: t[3] || (t[3] = (t) => e.$emit("selected-date", t)),
-				onFocusMonthYearPicker: t[4] || (t[4] = (t) => e.$refs.monthYearPicker.focusMonthYearPicker()),
-				onCloseDatepicker: t[5] || (t[5] = (t) => e.$emit("close-datepicker")),
-				onGoToNextMonth: t[6] || (t[6] = (t) => e.$refs.monthYearPicker.goToNextMonth()),
-				onGoToPrevMonth: t[7] || (t[7] = (t) => e.$refs.monthYearPicker.goToPrevMonth())
-			}, null, 8, ["calendar-days", "week-starts-on"])])]),
-			_: 1
-		}));
-	}
-};
-//#endregion
-export { $ as t };
-
-//# sourceMappingURL=datepicker-LVDRC6Lf.js.map

package/dist/datepicker-LVDRC6Lf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"datepicker-LVDRC6Lf.js","names":["$refs","$emit"],"sources":["../components/datepicker/composables/useMonthYearPicker.js","../components/datepicker/modules/month-year-picker.vue","../components/datepicker/composables/useCalendar.js","../components/datepicker/modules/calendar.vue","../components/datepicker/datepicker.vue"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport { addMonths, endOfMonth, getDate, getMonth, getYear, set, startOfDay, startOfMonth, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useMonthYearPicker (props, emits) {\n  const selectMonth = ref(getMonth(props.selectedDate));\n  const selectYear = ref(getYear(props.selectedDate));\n  const highlightedDay = ref(null);\n  const focusPicker = ref(0);\n  const focusRefs = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const calendarDays = computed(() => {\n    return getCalendarDays(\n      selectMonth.value, selectYear.value, highlightedDay.value,\n      props.minDate, props.maxDate, props.weekStartsOn,\n    );\n  });\n\n  const isPrevMonthDisabled = computed(() => {\n    if (!props.minDate) return false;\n    const prevMonth = subMonths(new Date(selectYear.value, selectMonth.value, 1), 1);\n    return endOfMonth(prevMonth) < startOfDay(props.minDate);\n  });\n\n  const isNextMonthDisabled = computed(() => {\n    if (!props.maxDate) return false;\n    const nextMonth = addMonths(new Date(selectYear.value, selectMonth.value, 1), 1);\n    return startOfMonth(nextMonth) > startOfDay(props.maxDate);\n  });\n\n  const isPrevYearDisabled = computed(() => {\n    if (!props.minDate) return false;\n    const prevYearMonth = new Date(selectYear.value - 1, selectMonth.value, 1);\n    return endOfMonth(prevYearMonth) < startOfDay(props.minDate);\n  });\n\n  const isNextYearDisabled = computed(() => {\n    if (!props.maxDate) return false;\n    const nextYearMonth = new Date(selectYear.value + 1, selectMonth.value, 1);\n    return startOfMonth(nextYearMonth) > startOfDay(props.maxDate);\n  });\n\n  watch(selectMonth, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(selectYear, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(() => props.minDate, () => {\n    emits('calendar-days', calendarDays.value);\n  });\n\n  watch(() => props.maxDate, () => {\n    emits('calendar-days', calendarDays.value);\n  });\n\n  function formattedMonth (month) {\n    return formatMonth(month, INTL_MONTH_FORMAT, i18n.currentLocale);\n  }\n\n  function setDayRef (el) {\n    if (!focusRefs.value.includes(el)) {\n      focusRefs.value.push(el);\n    }\n  }\n\n  function focusMonthYearPicker () {\n    returnFirstEl(focusRefs.value[0].$el).focus();\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusPicker.value === 0) {\n          focusPicker.value = 3;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value--;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusPicker.value === 3) {\n          focusPicker.value = 0;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value++;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function highlightDay () {\n    const year = getYear(props.selectedDate);\n    const month = getMonth(props.selectedDate);\n\n    if (year !== selectYear.value || month !== selectMonth.value) {\n      highlightedDay.value = null;\n    } else {\n      highlightedDay.value = getDate(props.selectedDate);\n    }\n  }\n\n  function changeMonth (value) {\n    if (value === -1 && isPrevMonthDisabled.value) return;\n    if (value === 1 && isNextMonthDisabled.value) return;\n\n    // Adjust year when changing from January to December or vice versa\n    if ((selectMonth.value === 0 && value === -1) || (selectMonth.value === 11 && value === 1)) {\n      selectYear.value += value;\n    }\n\n    // Calculate the new date by adding or subtracting months\n    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });\n    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n    // Update the selected month\n    selectMonth.value = getMonth(newDate);\n  }\n\n  function changeYear (value) {\n    if (value === -1 && isPrevYearDisabled.value) return;\n    if (value === 1 && isNextYearDisabled.value) return;\n\n    selectYear.value = selectYear.value + value;\n  }\n\n  function goToNextMonth () {\n    changeMonth(1);\n  }\n\n  function goToPrevMonth () {\n    changeMonth(-1);\n  }\n\n  function previousYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')} ${selectYear.value - 1}`;\n  }\n\n  function previousMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')} ${formattedMonth(selectMonth.value - 1)}`;\n  }\n\n  function nextYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')} ${selectYear.value + 1}`;\n  }\n\n  function nextMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')} ${formattedMonth(selectMonth.value + 1)}`;\n  }\n\n  return {\n    selectMonth,\n    selectYear,\n    formattedMonth,\n    setDayRef,\n    focusMonthYearPicker,\n    handleKeyDown,\n    changeMonth,\n    changeYear,\n    goToNextMonth,\n    goToPrevMonth,\n    isPrevMonthDisabled,\n    isNextMonthDisabled,\n    isPrevYearDisabled,\n    isNextYearDisabled,\n    previousYearAriaLabel,\n    previousMonthAriaLabel,\n    nextYearAriaLabel,\n    nextMonthAriaLabel,\n  };\n}\n","<template>\n  <dt-stack\n    class=\"d-datepicker__month-year\"\n    direction=\"row\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousYearAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isPrevYearDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousMonthAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isPrevMonthDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextMonthAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isNextMonthDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextYearAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isNextYearDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script setup>\nimport {\n  DtIconChevronLeft,\n  DtIconChevronsLeft,\n  DtIconChevronRight,\n  DtIconChevronsRight,\n} from '@dialpad/dialtone-icons/vue3';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '../composables/useMonthYearPicker.js';\nimport { DialtoneLocalization } from '@/localization';\n\nconst props = defineProps({\n  selectedDate: {\n    type: Date,\n    required: true,\n  },\n\n  minDate: {\n    type: Date,\n    default: null,\n  },\n\n  maxDate: {\n    type: Date,\n    default: null,\n  },\n\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n  'calendar-days',\n\n  /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n  'focus-first-day',\n\n  /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n  'focus-last-day',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst i18n = new DialtoneLocalization();\n\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n  isPrevMonthDisabled,\n  isNextMonthDisabled,\n  isPrevYearDisabled,\n  isNextYearDisabled,\n  previousYearAriaLabel,\n  previousMonthAriaLabel,\n  nextMonthAriaLabel,\n  nextYearAriaLabel,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n","import { computed, ref, watch, nextTick } from 'vue';\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate, formatDate } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants.js';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useCalendar (props, emits) {\n  const selectedDay = ref(null);\n  const focusDay = ref(0);\n  const daysRef = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const weekDays = computed(() => {\n    return getWeekDayNames(props.locale, props.weekStartsOn);\n  });\n\n  watch(() => props.calendarDays, () => {\n    focusDay.value = 0;\n    daysRef.value = [];\n    selectedDay.value = null;\n  });\n\n  function dayAriaLabel (day) {\n    return i18n.$t('DIALTONE_DATEPICKER_SELECT_DAY') + ` ${formatDate(day.value, INTL_MONTH_FORMAT, i18n.currentLocale)}`;\n  }\n\n  function setDayRef (el, day) {\n    if (!daysRef.value.some(day => day.el === el) && !day.disabled) {\n      daysRef.value.push({ el, day });\n    }\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        focusDay.value -= 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch {\n          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);\n          emits('go-to-prev-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[prevFocusDate - 1].el.$el).focus();\n            focusDay.value += prevFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        focusDay.value += 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch {\n          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);\n          emits('go-to-next-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[nextFocusDate - 1].el.$el).focus();\n            focusDay.value += nextFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusDay.value > 0) {\n          focusDay.value -= 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month first day, jump to last day of prev month\n          emits('go-to-prev-month');\n          focusLastDay();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusDay.value < daysRef.value.length - 1) {\n          focusDay.value += 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month last day, jump to first day of next month\n          emits('go-to-next-month');\n\n          focusFirstDay();\n        }\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-month-year-picker');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function focusFirstDay () {\n    focusDay.value = 0;\n\n    nextTick(() => {\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function selectDay (day) {\n    if (day.disabled) { return; }\n\n    // local selectedDay is updated when a day is selected\n    selectedDay.value = day.text;\n    emits('select-date', day.value);\n  }\n\n  return {\n    selectedDay,\n    weekDays,\n    dayAriaLabel,\n    setDayRef,\n    handleKeyDown,\n    focusFirstDay,\n    selectDay,\n  };\n}\n","<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"el => { if (el) setDayRef(el, day) }\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"day.disabled\"\n            :class=\"{\n              'd-datepicker__day--disabled': day.disabled,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && !day.disabled)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && !day.disabled) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { useCalendar } from '../composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\n  calendarDays: {\n    type: Array,\n    required: true,\n  },\n\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n  'select-date',\n\n  /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n  'focus-month-year-picker',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n\n  /**\n     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\n});\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :selected-date=\"selectedDate\"\n        :min-date=\"minDate\"\n        :max-date=\"maxDate\"\n        :week-starts-on=\"weekStartsOn\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :calendar-days=\"calendarDays\"\n        :week-starts-on=\"weekStartsOn\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\nimport { returnFirstEl, warnIfUnmounted } from '@/common/utils';\nimport { onMounted, ref, getCurrentInstance } from 'vue';\n\ndefineProps({\n  /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n  selectedDate: {\n    type: Date,\n    default: () => (new Date()),\n  },\n\n  /**\n     * Minimum selectable date. Days before this date will be disabled.\n     * Must be before or equal to maxDate when both are provided.\n     *\n     * @type {Date}\n     */\n  minDate: {\n    type: Date,\n    default: null,\n  },\n\n  /**\n     * Maximum selectable date. Days after this date will be disabled.\n     * Must be after or equal to minDate when both are provided.\n     *\n     * @type {Date}\n     */\n  maxDate: {\n    type: Date,\n    default: null,\n    validator: (value, props) => {\n      if (value && props.minDate && value < props.minDate) {\n        console.warn('[DtDatepicker]: maxDate must be after or equal to minDate.');\n        return false;\n      }\n      return true;\n    },\n  },\n\n  /**\n     * Day the week starts on. 0 = Sunday, 1 = Monday, ... 6 = Saturday.\n     *\n     * @values 0, 1, 2, 3, 4, 5, 6\n     */\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\ndefineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n  'selected-date',\n\n  /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst calendarDays = ref([]);\n\nfunction updateCalendarDays (days) {\n  calendarDays.value = days;\n}\n\nonMounted(() => {\n  const instance = getCurrentInstance();\n  warnIfUnmounted(returnFirstEl(instance.proxy.$el), 'datepicker');\n});\n</script>\n"],"mappings":"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"}

package/dist/emoji_picker-Cl-T4BXK.cjs

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