@dialpad/dialtone 9.124.0 → 9.125.0

package/dist/vue2/lib/emoji-picker/emoji-picker.js

@@ -1,17 +1,18 @@
-import { EMOJI_PICKER_CATEGORIES as c, CDN_URL as d, EMOJIS_PER_ROW as a, EMOJI_PICKER_SKIN_TONE_MODIFIERS as h } from "./emoji-picker-constants.js";
-import { DtIconClock as b, DtIconSatisfied as j, DtIconLivingThing as k, DtIconFood as _, DtIconObject as y, DtIconTransportation as g, DtIconLightbulb as S, DtIconHeart as R, DtIconFlag as E, DtIconTiktok as $, DtIconSearch as T, DtIconClose as v } from "@dialpad/dialtone-icons/vue2";
-import { n as u } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import L from "../tab/tab-group.js";
-import w from "../tab/tab.js";
-import I from "../input/input.js";
-import p from "../button/button.js";
-import { emojisGrouped as C } from "@dialpad/dialtone-emojis";
-import D from "../tooltip/tooltip.js";
-const A = {
+import { DtIconClock as _, DtIconSatisfied as b, DtIconLivingThing as p, DtIconFood as E, DtIconObject as j, DtIconTransportation as k, DtIconLightbulb as S, DtIconHeart as g, DtIconFlag as y, DtIconTiktok as R, DtIconSearch as L, DtIconClose as T } from "@dialpad/dialtone-icons/vue2";
+import { n as h } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import $ from "../tab/tab-group.js";
+import I from "../tab/tab.js";
+import v from "../input/input.js";
+import d from "../button/button.js";
+import { emojisGrouped as A } from "@dialpad/dialtone-emojis";
+import { CDN_URL as m, EMOJIS_PER_ROW as a, EMOJI_PICKER_SKIN_TONE_MODIFIERS as f } from "./emoji-picker-constants.js";
+import w from "../tooltip/tooltip.js";
+import C from "../../common/mixins/localization.js";
+const O = {
   name: "EmojiTabset",
   components: {
-    DtTabGroup: L,
-    DtTab: w
+    DtTabGroup: $,
+    DtTab: I
   },
   props: {
     /**
@@ -50,16 +51,16 @@ const A = {
       selectedTab: "1",
       tabsetRef: [],
       TABS_DATA: [
-        { label: c.MOST_RECENTLY_USED, icon: b },
-        { label: c.SMILEYS_AND_PEOPLE, icon: j },
-        { label: c.NATURE, icon: k },
-        { label: c.FOOD, icon: _ },
-        { label: c.ACTIVITY, icon: y },
-        { label: c.TRAVEL, icon: g },
-        { label: c.OBJECTS, icon: S },
-        { label: c.SYMBOLS, icon: R },
-        { label: c.FLAGS, icon: E },
-        { label: c.CUSTOM, icon: $ }
+        { label: this.tabSetLabels[0], icon: _ },
+        { label: this.tabSetLabels[1], icon: b },
+        { label: this.tabSetLabels[2], icon: p },
+        { label: this.tabSetLabels[3], icon: E },
+        { label: this.tabSetLabels[4], icon: j },
+        { label: this.tabSetLabels[5], icon: k },
+        { label: this.tabSetLabels[6], icon: S },
+        { label: this.tabSetLabels[7], icon: g },
+        { label: this.tabSetLabels[8], icon: y },
+        { label: this.tabSetLabels[9], icon: R }
       ]
     };
   },
@@ -68,7 +69,6 @@ const A = {
       const t = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
       return this.showCustomEmojisTab || t.pop(), t.map((e, i) => ({
         ...e,
-        label: this.tabSetLabels[i],
         // IDs on dt-tab component need to be on string
         id: (i + 1).toString(),
         panelId: (i + 1).toString()
@@ -111,29 +111,29 @@ const A = {
     }
   }
 };
-var F = function() {
+var D = function() {
   var e = this, i = e._self._c;
-  return i("div", { staticClass: "d-emoji-picker__tabset" }, [i("dt-tab-group", { attrs: { size: "sm", "tab-list-class": "d-emoji-picker__tabset-list", selected: e.selectedTab }, scopedSlots: e._u([{ key: "tabs", fn: function() {
+  return i("div", { staticClass: "d-emoji-picker__tabset" }, [i("dt-tab-group", { attrs: { selected: e.selectedTab, size: "sm", "tab-list-class": "d-emoji-picker__tabset-list" }, scopedSlots: e._u([{ key: "tabs", fn: function() {
     return e._l(e.tabs, function(s, o) {
-      return i("dt-tab", { key: s.id, ref: `tabsetRef-${o}`, refInFor: !0, attrs: { id: s.id, "panel-id": s.panelId, label: s.label, "aria-controls": "d-emoji-picker-list", tabindex: o + 1 }, on: { "!click": function(r) {
-        return r.stopPropagation(), e.selectTabset(s.id);
-      }, keydown: function(r) {
+      return i("dt-tab", { key: s.id, ref: `tabsetRef-${o}`, refInFor: !0, attrs: { id: s.id, label: s.label, "panel-id": s.panelId, tabindex: o + 1, "aria-controls": "d-emoji-picker-list" }, on: { keydown: function(r) {
         return e.handleKeyDown(r, s.id);
+      }, "!click": function(r) {
+        return r.stopPropagation(), e.selectTabset(s.id);
       } } }, [i(s.icon, { tag: "component", attrs: { size: "400" } })], 1);
     });
   }, proxy: !0 }]) })], 1);
-}, O = [], U = /* @__PURE__ */ u(
-  A,
-  F,
-  O
+}, F = [], B = /* @__PURE__ */ h(
+  O,
+  D,
+  F
 );
-const N = U.exports, K = {
+const N = B.exports, K = {
   name: "EmojiSearch",
   components: {
-    DtInput: I,
-    DtIconSearch: T,
-    DtIconClose: v,
-    DtButton: p
+    DtInput: v,
+    DtIconSearch: L,
+    DtIconClose: T,
+    DtButton: d
   },
   props: {
     searchPlaceholderLabel: {
@@ -169,7 +169,7 @@ const N = U.exports, K = {
     }
   }
 };
-var B = function() {
+var P = function() {
   var e = this, i = e._self._c;
   return i("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [i("dt-input", { ref: "searchInputRef", attrs: { id: "searchInput", placeholder: e.searchPlaceholderLabel, value: e.modelValue }, on: { input: e.updateModelValue, keydown: [function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "up", 38, s.key, ["Up", "ArrowUp"]) ? null : e.focusTabset.apply(null, arguments);
@@ -184,12 +184,12 @@ var B = function() {
       return [i("dt-icon-close", { attrs: { size: "200" } })];
     }, proxy: !0 }], null, !1, 4156074325) })];
   }, proxy: !0 } : null], null, !0) })], 1);
-}, P = [], q = /* @__PURE__ */ u(
+}, M = [], U = /* @__PURE__ */ h(
   K,
-  B,
-  P
+  P,
+  M
 );
-const M = q.exports, z = {
+const J = U.exports, H = {
   name: "EmojiSelector",
   props: {
     emojiFilter: {
@@ -253,10 +253,10 @@ const M = q.exports, z = {
       ];
     },
     emojis() {
-      return C;
+      return A;
     },
     CDN_URL() {
-      return d;
+      return m;
     },
     tabLabels() {
       let t = this.tabSetLabels.map((e) => ({ label: e }));
@@ -396,13 +396,13 @@ const M = q.exports, z = {
       if (t.preventDefault(), t.key === "ArrowUp") {
         const n = i % a;
         if (e === 0) {
-          const l = a - this.emojiRefs[this.emojiRefs.length - 1].length % a, f = this.emojiRefs[this.emojiRefs.length - 1].length + l - (a - n);
-          this.focusEmoji(this.emojiRefs.length - 1, f) || this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
+          const l = a - this.emojiRefs[this.emojiRefs.length - 1].length % a, c = this.emojiRefs[this.emojiRefs.length - 1].length + l - (a - n);
+          this.focusEmoji(this.emojiRefs.length - 1, c) || this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
           return;
         }
         if (!this.focusEmoji(e, i - a)) {
-          const l = e - 1 < 0 ? 0 : e - 1, f = this.emojiRefs[l].length, m = f - f % a + n;
-          this.focusEmoji(l, m) || this.focusEmoji(e - 1, this.emojiRefs[e - 1].length - 1);
+          const l = e - 1 < 0 ? 0 : e - 1, c = this.emojiRefs[l].length, u = c - c % a + n;
+          this.focusEmoji(l, u) || this.focusEmoji(e - 1, this.emojiRefs[e - 1].length - 1);
         }
       }
       if (t.key === "ArrowDown" && !this.focusEmoji(e, i + a)) {
@@ -455,9 +455,9 @@ const M = q.exports, z = {
     setTabLabelObserver() {
       this.tabLabelObserver = new IntersectionObserver((t) => {
         t.forEach((e) => {
-          var o, r, n, l, f, m;
+          var o, r, n, l, c, u;
           const { target: i } = e, s = parseInt(i.dataset.index);
-          e.isIntersecting && i.offsetTop <= ((o = this.$refs.tabCategoryRef) == null ? void 0 : o.offsetTop) + 50 ? (this.fixedLabel = ((r = this.tabLabels[s - 1]) == null ? void 0 : r.label) ?? ((n = this.tabLabels[0]) == null ? void 0 : n.label), this.$emit("scroll-into-tab", s - 1)) : e.boundingClientRect.bottom <= ((l = this.$refs.tabCategoryRef) == null ? void 0 : l.getBoundingClientRect().bottom) ? (this.$emit("scroll-into-tab", s), this.fixedLabel = (f = this.tabLabels[s]) == null ? void 0 : f.label) : s === 1 && (this.$emit("scroll-into-tab", s), this.fixedLabel = (m = this.tabLabels[0]) == null ? void 0 : m.label);
+          e.isIntersecting && i.offsetTop <= ((o = this.$refs.tabCategoryRef) == null ? void 0 : o.offsetTop) + 50 ? (this.fixedLabel = ((r = this.tabLabels[s - 1]) == null ? void 0 : r.label) ?? ((n = this.tabLabels[0]) == null ? void 0 : n.label), this.$emit("scroll-into-tab", s - 1)) : e.boundingClientRect.bottom <= ((l = this.$refs.tabCategoryRef) == null ? void 0 : l.getBoundingClientRect().bottom) ? (this.$emit("scroll-into-tab", s), this.fixedLabel = (c = this.tabLabels[s]) == null ? void 0 : c.label) : s === 1 && (this.$emit("scroll-into-tab", s), this.fixedLabel = (u = this.tabLabels[0]) == null ? void 0 : u.label);
         });
       }), this.tabLabelObserver.observe(this.$refs.tabCategoryRef), Array.from(this.$refs.listRef.children).forEach((t, e) => {
         this.tabLabelObserver.observe(t), t.dataset.index = e;
@@ -468,7 +468,7 @@ const M = q.exports, z = {
     }
   }
 };
-var H = function() {
+var z = function() {
   var e = this, i = e._self._c;
   return i("div", { staticClass: "d-emoji-picker__selector" }, [i("div", { ref: "listRef", staticClass: "d-emoji-picker__list", attrs: { id: "d-emoji-picker-list" } }, [e.emojiFilter ? i("p", { staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment" }, [e._v(" " + e._s(e.filteredEmojis.length > 0 ? e.searchResultsLabel : e.searchNoResultsLabel) + " ")]) : i("div", { ref: "tabCategoryRef", staticClass: "d-emoji-picker__category d-emoji-picker__alignment" }, [i("p", [e._v(" " + e._s(e.fixedLabel) + " ")])]), e._l(e.tabLabels, function(s, o) {
     return i("div", { directives: [{ name: "show", rawName: "v-show", value: !e.emojiFilter, expression: "!emojiFilter" }], key: o, ref: `tabLabelRef-${o}`, refInFor: !0, staticClass: "d-emoji-picker__alignment" }, [o ? i("p", [e._v(" " + e._s(s.label) + " ")]) : e._e(), i("div", { staticClass: "d-emoji-picker__tab" }, e._l(e.emojis[e.tabs[o] + e.skinTone] ? e.emojis[e.tabs[o] + e.skinTone] : e.emojis[e.tabs[o]], function(r, n) {
@@ -495,12 +495,12 @@ var H = function() {
       return e.hoverEmoji(null);
     }, keydown: (r) => e.handleKeyDownFilteredEmojis(r, o, s) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: s.name, "aria-label": s.name, title: s.name, src: `${e.CDN_URL + s.unicode_character}.png` } })]);
   }), 0)]) : e._e()], 2)]);
-}, Q = [], V = /* @__PURE__ */ u(
-  z,
+}, q = [], Q = /* @__PURE__ */ h(
   H,
-  Q
+  z,
+  q
 );
-const G = V.exports, J = {
+const V = Q.exports, G = {
   name: "EmojiDescription",
   props: {
     /**
@@ -515,12 +515,12 @@ const G = V.exports, J = {
   },
   data() {
     return {
-      CDN_URL: d
+      CDN_URL: m
     };
   },
   methods: {
     getImgSrc(t) {
-      return t.date_added ? t.image : `${d + t.unicode_character}.png`;
+      return t.date_added ? t.image : `${m + t.unicode_character}.png`;
     }
   }
 };
@@ -528,15 +528,15 @@ var Y = function() {
   var s;
   var e = this, i = e._self._c;
   return i("div", { staticClass: "d-emoji-picker__data" }, [e.emoji ? i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: e.emoji.name, "aria-label": e.emoji.name, title: e.emoji.name, src: e.getImgSrc(e.emoji) } }) : e._e(), i("div", [e._v(e._s((s = e.emoji) == null ? void 0 : s.name))])]);
-}, W = [], X = /* @__PURE__ */ u(
-  J,
+}, W = [], X = /* @__PURE__ */ h(
+  G,
   Y,
   W
 );
 const Z = X.exports, x = {
   name: "EmojiSkinSelector",
   components: {
-    DtTooltip: D
+    DtTooltip: w
   },
   props: {
     skinTone: {
@@ -557,7 +557,7 @@ const Z = X.exports, x = {
       isOpen: !1,
       skinSelected: null,
       skinsRef: [],
-      cdnUrl: d
+      cdnUrl: m
     };
   },
   computed: {
@@ -569,37 +569,37 @@ const Z = X.exports, x = {
         {
           name: ":wave_tone1:",
           unicode_output: "1f44b-1f3fb",
-          skinTone: h.LIGHT,
+          skinTone: f.LIGHT,
           skinCode: "_tone1"
         },
         {
           name: ":wave_tone2:",
           unicode_output: "1f44b-1f3fc",
-          skinTone: h.MEDIUM_LIGHT,
+          skinTone: f.MEDIUM_LIGHT,
           skinCode: "_tone2"
         },
         {
           name: ":wave_tone3:",
           unicode_output: "1f44b-1f3fd",
-          skinTone: h.MEDIUM,
+          skinTone: f.MEDIUM,
           skinCode: "_tone3"
         },
         {
           name: ":wave_tone4:",
           unicode_output: "1f44b-1f3fe",
-          skinTone: h.MEDIUM_DARK,
+          skinTone: f.MEDIUM_DARK,
           skinCode: "_tone4"
         },
         {
           name: ":wave_tone5:",
           unicode_output: "1f44b-1f3ff",
-          skinTone: h.DARK,
+          skinTone: f.DARK,
           skinCode: "_tone5"
         },
         {
           name: ":wave:",
           unicode_output: "1f44b",
-          skinTone: h.DEFAULT,
+          skinTone: f.DEFAULT,
           skinCode: ""
         }
       ];
@@ -657,7 +657,7 @@ var ee = function() {
     var s, o, r, n;
     return [i("button", { ref: "skinSelectorRef", attrs: { "aria-label": e.skinSelectorButtonTooltipLabel, tabindex: "-1" }, on: { click: e.toggleSkinList, keydown: (l) => e.handleKeyDown(l) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: (s = e.skinSelected) == null ? void 0 : s.name, "aria-label": (o = e.skinSelected) == null ? void 0 : o.name, title: (r = e.skinSelected) == null ? void 0 : r.name, src: `${e.cdnUrl + ((n = e.skinSelected) == null ? void 0 : n.unicode_output)}.png` } })])];
   }, proxy: !0 }]) }, [e._v(" " + e._s(e.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
-}, te = [], se = /* @__PURE__ */ u(
+}, te = [], se = /* @__PURE__ */ h(
   x,
   ee,
   te
@@ -666,12 +666,13 @@ const ie = se.exports, oe = {
   name: "DtEmojiPicker",
   components: {
     EmojiTabset: N,
-    EmojiSearch: M,
-    EmojiSelector: G,
+    EmojiSearch: J,
+    EmojiSelector: V,
     EmojiDescription: Z,
     EmojiSkinSelector: ie,
-    DtButton: p
+    DtButton: d
   },
+  mixins: [C],
   props: {
     /**
      * The array with recently used  emoji object
@@ -683,7 +684,8 @@ const ie = se.exports, oe = {
      */
     // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object
     recentlyUsedEmojis: {
-      type: Array
+      type: Array,
+      default: () => []
     },
     /**
      * The array with custom emojis object
@@ -696,65 +698,6 @@ const ie = se.exports, oe = {
     customEmojis: {
       type: Array
     },
-    /**
-     * The label for the add emoji button
-     * required false because it is still experimental
-     * @type {String}
-     * @example
-     * <dt-emoji-picker :addEmojiLabel="'Add emoji'" />
-     */
-    addEmojiLabel: {
-      type: String,
-      required: !1,
-      default: "Add emoji"
-    },
-    /**
-     * The placeholder text for the search input
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchPlaceholderLabel="'Search...'" />
-     */
-    searchPlaceholderLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The label for the search results tab
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchResultsLabel="'Search results'" />
-     */
-    searchResultsLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The label for the search no results
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :searchNoResultsLabel="'No results'" />
-     */
-    searchNoResultsLabel: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The list of tabsets to show, it is necessary to be updated with the correct language
-     * It must respect the provided order.
-     * @type {Array}
-     * @required
-     * @example
-     * <dt-emoji-picker
-     *  :tabSetLabels="['Most recently used', 'Smileys and people', 'Nature',
-     *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom']" />
-     */
-    tabSetLabels: {
-      type: Array,
-      required: !0
-    },
     /**
      * The skin tone to show the emojis
      * This prop gives the possibility to use the skin tone selected by the user previously
@@ -768,17 +711,6 @@ const ie = se.exports, oe = {
       type: String,
       default: "Default"
     },
-    /**
-     * Tooltip shown when skin selector button is hovered.
-     * @type {String}
-     * @required
-     * @example
-     * <dt-emoji-picker :skin-selector-button-tooltip-label="'Change default skin tone'" />
-     */
-    skinSelectorButtonTooltipLabel: {
-      type: String,
-      required: !0
-    },
     /**
      * Sets the search query that filters emojis.
      * @type {String}
@@ -816,6 +748,35 @@ const ie = se.exports, oe = {
     showRecentlyUsedTab() {
       var t;
       return ((t = this.recentlyUsedEmojis) == null ? void 0 : t.length) > 0;
+    },
+    tabSetLabels() {
+      return [
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL"),
+        this.i18n.$t("DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL")
+      ];
+    },
+    searchPlaceholderLabel() {
+      return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL");
+    },
+    searchResultsLabel() {
+      return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL");
+    },
+    searchNoResultsLabel() {
+      return this.i18n.$t("DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL");
+    },
+    skinSelectorButtonTooltipLabel() {
+      return this.i18n.$t("DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL");
+    },
+    addEmojiLabel() {
+      return this.i18n.$t("DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL");
     }
   },
   watch: {
@@ -872,13 +833,13 @@ var re = function() {
   } }, nativeOn: { keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
   } } })], 1)]);
-}, ne = [], le = /* @__PURE__ */ u(
+}, ne = [], le = /* @__PURE__ */ h(
   oe,
   re,
   ne
 );
-const je = le.exports;
+const Ee = le.exports;
 export {
-  je as default
+  Ee as default
 };
 //# sourceMappingURL=emoji-picker.js.map