@dialpad/dialtone 9.120.0 → 9.122.0

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

@@ -1,17 +1,17 @@
 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 p, DtIconSatisfied as b, DtIconLivingThing as k, DtIconFood as _, DtIconObject as j, DtIconTransportation as y, DtIconLightbulb as g, DtIconHeart as R, DtIconFlag as S, DtIconSearch as E, DtIconClose as $ } from "@dialpad/dialtone-icons/vue2";
+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 T from "../tab/tab-group.js";
-import v from "../tab/tab.js";
-import L from "../input/input.js";
-import w from "../button/button.js";
-import { emojisGrouped as I } from "@dialpad/dialtone-emojis";
+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 C = {
+const A = {
   name: "EmojiTabset",
   components: {
-    DtTabGroup: T,
-    DtTab: v
+    DtTabGroup: L,
+    DtTab: w
   },
   props: {
     /**
@@ -23,6 +23,10 @@ const C = {
       type: Boolean,
       default: !1
     },
+    showCustomEmojisTab: {
+      type: Boolean,
+      default: !1
+    },
     scrollIntoTab: {
       type: Number,
       required: !0
@@ -46,21 +50,22 @@ const C = {
       selectedTab: "1",
       tabsetRef: [],
       TABS_DATA: [
-        { label: c.MOST_RECENTLY_USED, icon: p },
-        { label: c.SMILEYS_AND_PEOPLE, icon: b },
+        { 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: j },
-        { label: c.TRAVEL, icon: y },
-        { label: c.OBJECTS, icon: g },
+        { label: c.ACTIVITY, icon: y },
+        { label: c.TRAVEL, icon: g },
+        { label: c.OBJECTS, icon: S },
         { label: c.SYMBOLS, icon: R },
-        { label: c.FLAGS, icon: S }
+        { label: c.FLAGS, icon: E }
       ]
     };
   },
   computed: {
     tabs() {
-      return (this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1)).map((e, i) => ({
+      const t = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
+      return this.showCustomEmojisTab && t.push({ label: c.CUSTOM, icon: $ }), t.map((e, i) => ({
         ...e,
         label: this.tabSetLabels[i],
         // IDs on dt-tab component need to be on string
@@ -105,7 +110,7 @@ const C = {
     }
   }
 };
-var A = function() {
+var F = 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 e._l(e.tabs, function(s, o) {
@@ -116,18 +121,18 @@ var A = function() {
       } } }, [i(s.icon, { tag: "component", attrs: { size: "400" } })], 1);
     });
   }, proxy: !0 }]) })], 1);
-}, F = [], O = /* @__PURE__ */ u(
-  C,
+}, O = [], U = /* @__PURE__ */ u(
   A,
-  F
+  F,
+  O
 );
-const N = O.exports, U = {
+const N = U.exports, K = {
   name: "EmojiSearch",
   components: {
-    DtInput: L,
-    DtIconSearch: E,
-    DtIconClose: $,
-    DtButton: w
+    DtInput: I,
+    DtIconSearch: T,
+    DtIconClose: v,
+    DtButton: p
   },
   props: {
     searchPlaceholderLabel: {
@@ -163,7 +168,7 @@ const N = O.exports, U = {
     }
   }
 };
-var K = function() {
+var B = 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);
@@ -178,12 +183,12 @@ var K = function() {
       return [i("dt-icon-close", { attrs: { size: "200" } })];
     }, proxy: !0 }], null, !1, 4156074325) })];
   }, proxy: !0 } : null], null, !0) })], 1);
-}, B = [], P = /* @__PURE__ */ u(
-  U,
+}, P = [], q = /* @__PURE__ */ u(
   K,
-  B
+  B,
+  P
 );
-const q = P.exports, z = {
+const M = q.exports, z = {
   name: "EmojiSelector",
   props: {
     emojiFilter: {
@@ -213,6 +218,10 @@ const q = P.exports, z = {
     recentlyUsedEmojis: {
       type: Array,
       default: () => []
+    },
+    customEmojis: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -224,7 +233,7 @@ const q = P.exports, z = {
       hoverFirstEmoji: !0,
       fixedLabel: "",
       filteredEmojis: [],
-      TABS_DATA: ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"],
+      TABS_DATA: ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags", "Custom"],
       tabLabelObserver: null
     };
   },
@@ -243,7 +252,7 @@ const q = P.exports, z = {
       ];
     },
     emojis() {
-      return I;
+      return C;
     },
     CDN_URL() {
       return d;
@@ -268,6 +277,12 @@ const q = P.exports, z = {
       },
       immediate: !0
     },
+    customEmojis: {
+      handler(t) {
+        this.emojis.Custom = t;
+      },
+      immediate: !0
+    },
     emojiFilter: {
       handler(t) {
         this.resetScroll(), t ? this.isFiltering = !0 : (this.isFiltering = !1, this.$emit("highlighted-emoji", null)), this.debouncedSearch();
@@ -285,11 +300,11 @@ const q = P.exports, z = {
   },
   mounted() {
     this.$nextTick(() => {
-      this.setupEmojiRefs(), this.setupFilteredRefs(), this.setupTabLabelRefs(), this.setTabLabelObserver();
+      this.setupEmojiRefs(), this.setupFilteredRefs(), this.setupTabLabelRefs(), this.setTabLabelObserver(), this.setBottomScrollListener();
     });
   },
   beforeDestroy() {
-    this.tabLabelObserver && this.tabLabelObserver.disconnect();
+    this.tabLabelObserver && this.tabLabelObserver.disconnect(), this.$refs.listRef && this.handleScroll && this.$refs.listRef.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
     setupTabLabelRefs() {
@@ -337,7 +352,7 @@ const q = P.exports, z = {
       };
     },
     getImgSrc: function(t) {
-      return this.CDN_URL + t + ".png";
+      return t.date_added ? t.image : this.CDN_URL + t.unicode_character + ".png";
     },
     handleImageError: function(t) {
       t.target.parentNode.style.display = "none";
@@ -428,6 +443,12 @@ const q = P.exports, z = {
       }
       t.key === "ArrowLeft" && this.handleHorizontalNavigation("left", 0, e), t.key === "ArrowRight" && this.handleHorizontalNavigation("right", 0, e), t.key === "Tab" && this.$emit("focus-skin-selector"), t.key === "Enter" && this.handleEmojiSelection(i, t);
     },
+    setBottomScrollListener() {
+      this.handleScroll = () => {
+        const t = this.$refs.listRef;
+        t.scrollTop + t.clientHeight >= t.scrollHeight && this.$emit("scroll-bottom-reached");
+      }, this.$refs.listRef.addEventListener("scroll", this.handleScroll);
+    },
     setTabLabelObserver() {
       this.tabLabelObserver = new IntersectionObserver((t) => {
         t.forEach((e) => {
@@ -444,7 +465,7 @@ const q = P.exports, z = {
     }
   }
 };
-var M = function() {
+var H = 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) {
@@ -456,7 +477,7 @@ var M = function() {
         return e.$emit("highlighted-emoji", r);
       }, mouseleave: function(l) {
         return e.$emit("highlighted-emoji", null);
-      }, keydown: (l) => e.handleKeyDown(l, o, n, r) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: r.name, "aria-label": r.name, title: r.name, src: e.getImgSrc(r.unicode_character) }, on: { error: e.handleImageError } })]);
+      }, keydown: (l) => e.handleKeyDown(l, o, n, r) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: r.name, "aria-label": r.name, title: r.name, src: e.getImgSrc(r) }, on: { error: e.handleImageError } })]);
     }), 0)]);
   }), e.emojiFilter ? i("div", { staticClass: "d-emoji-picker__alignment" }, [i("div", { staticClass: "d-emoji-picker__tab", attrs: { "data-qa": "filtered-emojis" } }, e._l(e.filteredEmojis, function(s, o) {
     return i("button", { key: s.shortname, ref: `filteredEmoji-${o}`, refInFor: !0, class: {
@@ -471,12 +492,12 @@ var M = 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)]);
-}, H = [], Q = /* @__PURE__ */ u(
+}, Q = [], V = /* @__PURE__ */ u(
   z,
-  M,
-  H
+  H,
+  Q
 );
-const V = Q.exports, G = {
+const G = V.exports, J = {
   name: "EmojiDescription",
   props: {
     /**
@@ -493,18 +514,23 @@ const V = Q.exports, G = {
     return {
       CDN_URL: d
     };
+  },
+  methods: {
+    getImgSrc(t) {
+      return t.date_added ? t.image : `${d + t.unicode_character}.png`;
+    }
   }
 };
-var J = function() {
+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.CDN_URL + e.emoji.unicode_character}.png` } }) : e._e(), i("div", [e._v(e._s((s = e.emoji) == null ? void 0 : s.name))])]);
-}, Y = [], W = /* @__PURE__ */ u(
-  G,
+  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,
-  Y
+  Y,
+  W
 );
-const X = W.exports, Z = {
+const Z = X.exports, x = {
   name: "EmojiSkinSelector",
   components: {
     DtTooltip: D
@@ -615,7 +641,7 @@ const X = W.exports, Z = {
     }
   }
 };
-var x = function() {
+var ee = function() {
   var e = this, i = e._self._c;
   return i("div", { attrs: { "data-qa": "skin-selector" } }, [i("div", { directives: [{ name: "show", rawName: "v-show", value: e.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, e._l(e.skinList, function(s, o) {
     var r;
@@ -628,19 +654,20 @@ var x = 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)]);
-}, ee = [], te = /* @__PURE__ */ u(
-  Z,
+}, te = [], se = /* @__PURE__ */ u(
   x,
-  ee
+  ee,
+  te
 );
-const se = te.exports, ie = {
+const ie = se.exports, oe = {
   name: "DtEmojiPicker",
   components: {
     EmojiTabset: N,
-    EmojiSearch: q,
-    EmojiSelector: V,
-    EmojiDescription: X,
-    EmojiSkinSelector: se
+    EmojiSearch: M,
+    EmojiSelector: G,
+    EmojiDescription: Z,
+    EmojiSkinSelector: ie,
+    DtButton: p
   },
   props: {
     /**
@@ -655,6 +682,29 @@ const se = te.exports, ie = {
     recentlyUsedEmojis: {
       type: Array
     },
+    /**
+     * The array with custom emojis object
+     * This list is necessary to fill the custom tab
+     * @type {Array}
+     * @default []
+     * @example
+     * <dt-emoji-picker :customEmojis="[emojiObject, emojiObject]" />
+     */
+    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}
@@ -756,6 +806,10 @@ const se = te.exports, ie = {
     };
   },
   computed: {
+    showCustomEmojisTab() {
+      var t;
+      return ((t = this.customEmojis) == null ? void 0 : t.length) > 0;
+    },
     showRecentlyUsedTab() {
       var t;
       return ((t = this.recentlyUsedEmojis) == null ? void 0 : t.length) > 0;
@@ -778,9 +832,9 @@ const se = te.exports, ie = {
     }
   }
 };
-var oe = function() {
+var re = function() {
   var e = this, i = e._self._c;
-  return i("div", { staticClass: "d-emoji-picker" }, [i("div", { staticClass: "d-emoji-picker--header" }, [i("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": e.internalSearchQuery, "show-recently-used-tab": e.showRecentlyUsedTab, "scroll-into-tab": e.scrollIntoTab, "tab-set-labels": e.tabSetLabels }, on: { "focus-skin-selector": function(s) {
+  return i("div", { staticClass: "d-emoji-picker" }, [i("div", { staticClass: "d-emoji-picker--header" }, [i("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": e.internalSearchQuery, "show-custom-emojis-tab": e.showCustomEmojisTab, "show-recently-used-tab": e.showRecentlyUsedTab, "scroll-into-tab": e.scrollIntoTab, "tab-set-labels": e.tabSetLabels }, on: { "focus-skin-selector": function(s) {
     return e.$refs.skinSelectorRef.focusSkinSelector();
   }, "focus-search-input": function(s) {
     e.showSearch ? e.$refs.searchInputRef.focusSearchInput() : e.$refs.emojiSelectorRef.focusEmojiSelector();
@@ -794,15 +848,19 @@ var oe = function() {
     return e.$refs.emojiSelectorRef.focusEmojiSelector();
   } }, nativeOn: { keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
-  } } }) : e._e(), i("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": e.internalSearchQuery, "skin-tone": e.skinTone, "tab-set-labels": e.tabSetLabels, "search-results-label": e.searchResultsLabel, "search-no-results-label": e.searchNoResultsLabel, "recently-used-emojis": e.recentlyUsedEmojis, "selected-tabset": e.selectedTabset }, on: { "scroll-into-tab": e.updateScrollIntoTab, "highlighted-emoji": e.updateHighlightedEmoji, "selected-emoji": function(s) {
+  } } }) : e._e(), i("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": e.internalSearchQuery, "skin-tone": e.skinTone, "tab-set-labels": e.tabSetLabels, "search-results-label": e.searchResultsLabel, "search-no-results-label": e.searchNoResultsLabel, "recently-used-emojis": e.recentlyUsedEmojis, "custom-emojis": e.customEmojis, "selected-tabset": e.selectedTabset }, on: { "scroll-into-tab": e.updateScrollIntoTab, "highlighted-emoji": e.updateHighlightedEmoji, "selected-emoji": function(s) {
     return e.$emit("selected-emoji", s);
   }, "focus-skin-selector": function(s) {
     return e.$refs.skinSelectorRef.focusSkinSelector();
   }, "focus-search-input": function(s) {
     e.showSearch ? e.$refs.searchInputRef.focusSearchInput() : e.$refs.tabsetRef.focusTabset();
+  }, "scroll-bottom-reached": function(s) {
+    return e.$emit("scroll-bottom-reached");
   } }, nativeOn: { keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
-  } } })], 1), i("div", { staticClass: "d-emoji-picker--footer" }, [i("emoji-description", { attrs: { emoji: e.highlightedEmoji } }), i("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!e.highlightedEmoji, "skin-selector-button-tooltip-label": e.skinSelectorButtonTooltipLabel, "skin-tone": e.skinTone }, on: { "skin-tone": function(s) {
+  } } })], 1), i("div", { staticClass: "d-emoji-picker--footer" }, [e.showCustomEmojisTab && !e.highlightedEmoji ? i("dt-button", { staticClass: "d-emoji-picker__add-emoji", attrs: { importance: "outlined" }, on: { click: function(s) {
+    return e.$emit("add-emoji");
+  } } }, [e._v(" " + e._s(e.addEmojiLabel) + " ")]) : e._e(), i("emoji-description", { attrs: { emoji: e.highlightedEmoji } }), i("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!e.highlightedEmoji, "skin-selector-button-tooltip-label": e.skinSelectorButtonTooltipLabel, "skin-tone": e.skinTone }, on: { "skin-tone": function(s) {
     return e.$emit("skin-tone", s);
   }, "focus-tabset": function(s) {
     return e.$refs.tabsetRef.focusTabset();
@@ -811,13 +869,13 @@ var oe = 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)]);
-}, re = [], ne = /* @__PURE__ */ u(
-  ie,
+}, ne = [], le = /* @__PURE__ */ u(
   oe,
-  re
+  re,
+  ne
 );
-const be = ne.exports;
+const je = le.exports;
 export {
-  be as default
+  je as default
 };
 //# sourceMappingURL=emoji-picker.js.map