@dialpad/dialtone-vue 3.12.0 → 3.16.0

package/dist/emoji.common.js

@@ -714,7 +714,8 @@ function shortcodeToEmojiData(shortcode) {
   return reference;
 } // Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects
 // as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender
-// and such.
+// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these
+// are not included as part of the key in the emoji.json.
 //
 // Example:
 // return value for smile emoji (no skin tone): 1f600
@@ -724,6 +725,10 @@ function unicodeToString(emoji) {
   let key = '';
 
   for (const codePoint of emoji) {
+    const codepoint = codePoint.codePointAt(0).toString(16); // skip 200d and fe0f as these are not included in emoji_strategy.json keys
+
+    if (['200d', 'fe0f'].includes(codepoint)) continue;
+
     if (key !== '') {
       key = key + '-';
     }
@@ -775,7 +780,7 @@ function findEmojis(textContent) {
 }
 ;// CONCATENATED MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 const external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue");
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=263332ba
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=334ba6aa
 
 const _hoisted_1 = ["aria-label", "alt", "title", "src"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -791,7 +796,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       contentClass: $options.skeletonSizeClass,
       size: 'auto'
     }
-  }, null, 8, ["class", "shape-option"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $data.imgLoading]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
+  }, null, 8, ["class", "shape-option"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, $data.imgLoading && $props.showSkeleton]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("img", {
     ref: "emojiImg",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([$props.size, $props.imgClass]),
     "aria-label": $options.emojiLabel,
@@ -806,7 +811,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 42, _hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vShow, !$data.imgLoading]])], 2);
 }
-;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=263332ba
+;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=334ba6aa
 
 ;// CONCATENATED MODULE: ./components/emoji/emoji_constants.js
 const EMOJI_SIZES = {
@@ -937,8 +942,8 @@ const SKELETON_HEADING_HEIGHTS = {
 
       const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1000;
       const animationDuration = this.animationDuration === -1 ? 1000 : this.animationDuration;
-      style.animationDelay = "".concat(animationDelay, "ms");
-      style.animationDuration = "".concat(animationDuration, "ms");
+      style.animationDelay = `${animationDelay}ms`;
+      style.animationDuration = `${animationDuration}ms`;
       return style;
     }
 
@@ -1218,7 +1223,7 @@ const validator = number => number !== '' && !Number.isNaN(Number(number));
     randomWidthPercentage() {
       const min = Math.min(this.minWidth, this.maxWidth);
       const max = Math.max(this.minWidth, this.maxWidth);
-      return "".concat(Math.round(Math.random() * (max - min)) + min, "%");
+      return `${Math.round(Math.random() * (max - min)) + min}%`;
     },
 
     getSizeParagraphRow(row) {
@@ -1387,10 +1392,10 @@ const skeleton_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
       });
 
       if (filtered.length >= 2) {
-        const errorMessage = "Use only one of ".concat(filtered.map(_ref2 => {
+        const errorMessage = `Use only one of ${filtered.map(_ref2 => {
           let [key] = _ref2;
           return key;
-        }).join(' | '), " options at the same time");
+        }).join(' | ')} options at the same time`;
         console.error(errorMessage);
       }
     }
@@ -1470,6 +1475,14 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
     ariaLabel: {
       type: String,
       default: null
+    },
+
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -1603,7 +1616,7 @@ const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_typ
      * @returns {Array<VNode|string>}
      */
     replaceDtEmojis(replaceList, textContent) {
-      const regexp = new RegExp("(".concat(replaceList.join('|'), ")"), 'g');
+      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');
       const split = textContent.split(regexp);
       return split.map(item => {
         if (replaceList.includes(item)) {

package/dist/emoji.umd.js

@@ -732,7 +732,8 @@ function shortcodeToEmojiData(shortcode) {
   return reference;
 } // Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects
 // as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender
-// and such.
+// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these
+// are not included as part of the key in the emoji.json.
 //
 // Example:
 // return value for smile emoji (no skin tone): 1f600
@@ -742,6 +743,10 @@ function unicodeToString(emoji) {
   let key = '';
 
   for (const codePoint of emoji) {
+    const codepoint = codePoint.codePointAt(0).toString(16); // skip 200d and fe0f as these are not included in emoji_strategy.json keys
+
+    if (['200d', 'fe0f'].includes(codepoint)) continue;
+
     if (key !== '') {
       key = key + '-';
     }
@@ -793,7 +798,7 @@ function findEmojis(textContent) {
 }
 // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
 var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(203);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=263332ba
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./components/emoji/emoji.vue?vue&type=template&id=334ba6aa
 
 const _hoisted_1 = ["aria-label", "alt", "title", "src"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -809,7 +814,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       contentClass: $options.skeletonSizeClass,
       size: 'auto'
     }
-  }, null, 8, ["class", "shape-option"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_.vShow, $data.imgLoading]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("img", {
+  }, null, 8, ["class", "shape-option"]), [[external_commonjs_vue_commonjs2_vue_root_Vue_.vShow, $data.imgLoading && $props.showSkeleton]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withDirectives)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("img", {
     ref: "emojiImg",
     class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)([$props.size, $props.imgClass]),
     "aria-label": $options.emojiLabel,
@@ -824,7 +829,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     })
   }, null, 42, _hoisted_1), [[external_commonjs_vue_commonjs2_vue_root_Vue_.vShow, !$data.imgLoading]])], 2);
 }
-;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=263332ba
+;// CONCATENATED MODULE: ./components/emoji/emoji.vue?vue&type=template&id=334ba6aa
 
 ;// CONCATENATED MODULE: ./components/emoji/emoji_constants.js
 const EMOJI_SIZES = {
@@ -955,8 +960,8 @@ const SKELETON_HEADING_HEIGHTS = {
 
       const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1000;
       const animationDuration = this.animationDuration === -1 ? 1000 : this.animationDuration;
-      style.animationDelay = "".concat(animationDelay, "ms");
-      style.animationDuration = "".concat(animationDuration, "ms");
+      style.animationDelay = `${animationDelay}ms`;
+      style.animationDuration = `${animationDuration}ms`;
       return style;
     }
 
@@ -1236,7 +1241,7 @@ const validator = number => number !== '' && !Number.isNaN(Number(number));
     randomWidthPercentage() {
       const min = Math.min(this.minWidth, this.maxWidth);
       const max = Math.max(this.minWidth, this.maxWidth);
-      return "".concat(Math.round(Math.random() * (max - min)) + min, "%");
+      return `${Math.round(Math.random() * (max - min)) + min}%`;
     },
 
     getSizeParagraphRow(row) {
@@ -1405,10 +1410,10 @@ const skeleton_list_item_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)
       });
 
       if (filtered.length >= 2) {
-        const errorMessage = "Use only one of ".concat(filtered.map(_ref2 => {
+        const errorMessage = `Use only one of ${filtered.map(_ref2 => {
           let [key] = _ref2;
           return key;
-        }).join(' | '), " options at the same time");
+        }).join(' | ')} options at the same time`;
         console.error(errorMessage);
       }
     }
@@ -1488,6 +1493,14 @@ const skeleton_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(skeletonv
     ariaLabel: {
       type: String,
       default: null
+    },
+
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -1621,7 +1634,7 @@ const emoji_exports_ = /*#__PURE__*/(0,exportHelper/* default */.Z)(emojivue_typ
      * @returns {Array<VNode|string>}
      */
     replaceDtEmojis(replaceList, textContent) {
-      const regexp = new RegExp("(".concat(replaceList.join('|'), ")"), 'g');
+      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');
       const split = textContent.split(regexp);
       return split.map(item => {
         if (replaceList.includes(item)) {