@dialpad/dialtone-vue 2.127.0 → 2.127.2

package/dist/lib/emoji-text-wrapper.cjs

@@ -1,2 +1,110 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../chunks/index-sdfB7Aok.js"),o=require("../chunks/icon_constants-2S_OSQ1t.js"),l=require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js");require("emoji-regex");require("emoji-toolkit/emoji_strategy.json");require("./skeleton.cjs");require("@dialpad/dialtone-icons/icons.json");const a={name:"DtEmojiTextWrapper",components:{DtEmoji:s.D},props:{elementType:{type:String,default:"div"},size:{type:String,default:"500",validator:e=>Object.keys(o.I).includes(e)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(e,t){const r=new RegExp(`(${e.join("|")})`,"g");return t.split(r).map(i=>e.includes(i)?this.$createElement(s.D,{props:{code:i,size:this.size}}):this.$createElement("span",i))},searchVNodes(e){if(!e.tag&&e.text)return this.searchCodes(e.text);const t=e.children?e.children.map(r=>this.searchVNodes(r)):[];return this.$createElement(e.tag,e.data,t)},replaceVueComponentVNodeContent(e){},searchCodes(e){const t=s.p(e),r=s.r(e),n=[...t,...r];return n.length===0?e:this.replaceDtEmojis(n,e)}},render(e){const t=this.$slots.default||[];return e(this.elementType,{class:"d-emoji-text-wrapper"},this.loadingEmojiJson?t:t.map(r=>this.searchVNodes(r)))}},c=null,p=null;var u=l.n(a,c,p,!1,null,null,null,null);const d=u.exports;exports.DtEmojiTextWrapper=d;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_emoji = require("../common/emoji.cjs");
+const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_emoji = require("./emoji.cjs");
+require("emoji-regex");
+require("emoji-toolkit/emoji_strategy.json");
+require("@dialpad/dialtone-icons/icons.json");
+require("./skeleton.cjs");
+const _sfc_main = {
+  name: "DtEmojiTextWrapper",
+  components: {
+    DtEmoji: lib_emoji.DtEmoji
+  },
+  props: {
+    /**
+     * Element type (tag name) to use for the wrapper.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * The icon size to render the emojis at: 100 to 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(t)
+    }
+  },
+  data() {
+    return {
+      loadingEmojiJson: true
+    };
+  },
+  async created() {
+    this.loadingEmojiJson = false;
+  },
+  methods: {
+    /**
+     * Replaces the valid codes from the text content with a DtEmoji component.
+     * @returns {Array<VNode|string>}
+     */
+    replaceDtEmojis(replaceList, textContent) {
+      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const split = textContent.split(regexp);
+      return split.map((item) => {
+        if (replaceList.includes(item)) {
+          return this.$createElement(lib_emoji.DtEmoji, {
+            props: { code: item, size: this.size }
+          });
+        }
+        return this.$createElement("span", item);
+      });
+    },
+    /**
+     * Recursively search the Vue virtual DOM to find text
+     * @param VNode
+     * @returns {VNode|*}
+     */
+    searchVNodes(VNode) {
+      if (!VNode.tag && VNode.text) {
+        return this.searchCodes(VNode.text);
+      }
+      const children = VNode.children ? VNode.children.map((VNodeChild) => this.searchVNodes(VNodeChild)) : [];
+      return this.$createElement(VNode.tag, VNode.data, children);
+    },
+    // TODO: Find a way to crawl vue components
+    replaceVueComponentVNodeContent(VNode) {
+    },
+    /**
+     * Find codes in text.
+     * @param textContent string
+     * @returns {Array<VNode|string>|string}
+     */
+    searchCodes(textContent) {
+      const shortcodes = common_emoji.findShortCodes(textContent);
+      const emojis = common_emoji.findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
+      if (replaceList.length === 0)
+        return textContent;
+      return this.replaceDtEmojis(replaceList, textContent);
+    }
+  },
+  render(h) {
+    const defaultSlotContent = this.$slots.default || [];
+    return h(
+      this.elementType,
+      { class: "d-emoji-text-wrapper" },
+      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
+    );
+  }
+};
+const _sfc_render = null;
+const _sfc_staticRenderFns = null;
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtEmojiTextWrapper = __component__.exports;
+exports.DtEmojiTextWrapper = DtEmojiTextWrapper;
 //# sourceMappingURL=emoji-text-wrapper.cjs.map

package/dist/lib/emoji-text-wrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-text-wrapper.cjs","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const split = textContent.split(regexp);\n      return split.map((item) => {\n        if (replaceList.includes(item)) {\n          return this.$createElement(DtEmoji, {\n            props: { code: item, size: this.size },\n          });\n        }\n        return this.$createElement('span', item);\n      });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      { class: 'd-emoji-text-wrapper' },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["_sfc_main","DtEmoji","t","ICON_SIZE_MODIFIERS","replaceList","textContent","regexp","item","VNode","children","VNodeChild","shortcodes","findShortCodes","emojis","findEmojis","h","defaultSlotContent"],"mappings":"wXASA,MAAAA,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,QAAAC,EAAA,CACA,EAEA,MAAA,CAIA,YAAA,CACA,KAAA,OACA,QAAA,KACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,MACA,UAAAC,GAAA,OAAA,KAAAC,GAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,iBAAA,EACA,CACA,EAEA,MAAA,SAAA,CACA,KAAA,iBAAA,EACA,EAEA,QAAA,CAKA,gBAAAE,EAAAC,EAAA,CACA,MAAAC,EAAA,IAAA,OAAA,IAAAF,EAAA,KAAA,GAAA,CAAA,IAAA,GAAA,EAEA,OADAC,EAAA,MAAAC,CAAA,EACA,IAAAC,GACAH,EAAA,SAAAG,CAAA,EACA,KAAA,eAAAN,IAAA,CACA,MAAA,CAAA,KAAAM,EAAA,KAAA,KAAA,IAAA,CACA,CAAA,EAEA,KAAA,eAAA,OAAAA,CAAA,CACA,CACA,EAOA,aAAAC,EAAA,CAEA,GAAA,CAAAA,EAAA,KAAAA,EAAA,KACA,OAAA,KAAA,YAAAA,EAAA,IAAA,EAGA,MAAAC,EAAAD,EAAA,SAAAA,EAAA,SAAA,IAAAE,GAAA,KAAA,aAAAA,CAAA,CAAA,EAAA,CAAA,EACA,OAAA,KAAA,eAAAF,EAAA,IAAAA,EAAA,KAAAC,CAAA,CACA,EAGA,gCAAAD,EAAA,CAEA,EAOA,YAAAH,EAAA,CACA,MAAAM,EAAAC,IAAAP,CAAA,EACAQ,EAAAC,IAAAT,CAAA,EAEAD,EAAA,CAAA,GAAAO,EAAA,GAAAE,CAAA,EACA,OAAAT,EAAA,SAAA,EAAAC,EACA,KAAA,gBAAAD,EAAAC,CAAA,CACA,CACA,EAEA,OAAAU,EAAA,CACA,MAAAC,EAAA,KAAA,OAAA,SAAA,CAAA,EACA,OAAAD,EACA,KAAA,YACA,CAAA,MAAA,sBAAA,EACA,KAAA,iBACAC,EACAA,EAAA,IAAAR,GAAA,KAAA,aAAAA,CAAA,CAAA,CACA,CACA,CACA"}
+{"version":3,"file":"emoji-text-wrapper.cjs","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const split = textContent.split(regexp);\n      return split.map((item) => {\n        if (replaceList.includes(item)) {\n          return this.$createElement(DtEmoji, {\n            props: { code: item, size: this.size },\n          });\n        }\n        return this.$createElement('span', item);\n      });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      { class: 'd-emoji-text-wrapper' },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["DtEmoji","ICON_SIZE_MODIFIERS","findShortCodes","findEmojis"],"mappings":";;;;;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAA,UAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AACA,aAAA,MAAA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAAD,mBAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAAE,4BAAA,WAAA;AACA,YAAA,SAAAC,wBAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,UAAA,YAAA,WAAA;AAAA,eAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA,OAAA,uBAAA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/emoji-text-wrapper.js

@@ -1,14 +1,15 @@
-import { D as o, p as i, r as a } from "../chunks/index-YkSDT8-g.js";
-import { I as l } from "../chunks/icon_constants-OpYAAKwF.js";
-import { n as p } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { findShortCodes, findEmojis } from "../common/emoji.js";
+import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-Dy4MEUJL.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtEmoji } from "./emoji.js";
 import "emoji-regex";
 import "emoji-toolkit/emoji_strategy.json";
-import "./skeleton.js";
 import "@dialpad/dialtone-icons/icons.json";
-const c = {
+import "./skeleton.js";
+const _sfc_main = {
   name: "DtEmojiTextWrapper",
   components: {
-    DtEmoji: o
+    DtEmoji
   },
   props: {
     /**
@@ -24,73 +25,86 @@ const c = {
     size: {
       type: String,
       default: "500",
-      validator: (e) => Object.keys(l).includes(e)
+      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
     }
   },
   data() {
     return {
-      loadingEmojiJson: !0
+      loadingEmojiJson: true
     };
   },
   async created() {
-    this.loadingEmojiJson = !1;
+    this.loadingEmojiJson = false;
   },
   methods: {
     /**
      * Replaces the valid codes from the text content with a DtEmoji component.
      * @returns {Array<VNode|string>}
      */
-    replaceDtEmojis(e, t) {
-      const s = new RegExp(`(${e.join("|")})`, "g");
-      return t.split(s).map((n) => e.includes(n) ? this.$createElement(o, {
-        props: { code: n, size: this.size }
-      }) : this.$createElement("span", n));
+    replaceDtEmojis(replaceList, textContent) {
+      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const split = textContent.split(regexp);
+      return split.map((item) => {
+        if (replaceList.includes(item)) {
+          return this.$createElement(DtEmoji, {
+            props: { code: item, size: this.size }
+          });
+        }
+        return this.$createElement("span", item);
+      });
     },
     /**
      * Recursively search the Vue virtual DOM to find text
      * @param VNode
      * @returns {VNode|*}
      */
-    searchVNodes(e) {
-      if (!e.tag && e.text)
-        return this.searchCodes(e.text);
-      const t = e.children ? e.children.map((s) => this.searchVNodes(s)) : [];
-      return this.$createElement(e.tag, e.data, t);
+    searchVNodes(VNode) {
+      if (!VNode.tag && VNode.text) {
+        return this.searchCodes(VNode.text);
+      }
+      const children = VNode.children ? VNode.children.map((VNodeChild) => this.searchVNodes(VNodeChild)) : [];
+      return this.$createElement(VNode.tag, VNode.data, children);
     },
     // TODO: Find a way to crawl vue components
-    replaceVueComponentVNodeContent(e) {
+    replaceVueComponentVNodeContent(VNode) {
     },
     /**
      * Find codes in text.
      * @param textContent string
      * @returns {Array<VNode|string>|string}
      */
-    searchCodes(e) {
-      const t = i(e), s = a(e), r = [...t, ...s];
-      return r.length === 0 ? e : this.replaceDtEmojis(r, e);
+    searchCodes(textContent) {
+      const shortcodes = findShortCodes(textContent);
+      const emojis = findEmojis(textContent);
+      const replaceList = [...shortcodes, ...emojis];
+      if (replaceList.length === 0)
+        return textContent;
+      return this.replaceDtEmojis(replaceList, textContent);
     }
   },
-  render(e) {
-    const t = this.$slots.default || [];
-    return e(
+  render(h) {
+    const defaultSlotContent = this.$slots.default || [];
+    return h(
       this.elementType,
       { class: "d-emoji-text-wrapper" },
-      this.loadingEmojiJson ? t : t.map((s) => this.searchVNodes(s))
+      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
     );
   }
-}, m = null, d = null;
-var h = /* @__PURE__ */ p(
-  c,
-  m,
-  d,
-  !1,
+};
+const _sfc_render = null;
+const _sfc_staticRenderFns = null;
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const x = h.exports;
+const DtEmojiTextWrapper = __component__.exports;
 export {
-  x as DtEmojiTextWrapper
+  DtEmojiTextWrapper
 };
 //# sourceMappingURL=emoji-text-wrapper.js.map

package/dist/lib/emoji-text-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-text-wrapper.js","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const split = textContent.split(regexp);\n      return split.map((item) => {\n        if (replaceList.includes(item)) {\n          return this.$createElement(DtEmoji, {\n            props: { code: item, size: this.size },\n          });\n        }\n        return this.$createElement('span', item);\n      });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      { class: 'd-emoji-text-wrapper' },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["_sfc_main","DtEmoji","t","ICON_SIZE_MODIFIERS","replaceList","textContent","regexp","item","VNode","children","VNodeChild","shortcodes","findShortCodes","emojis","findEmojis","h","defaultSlotContent"],"mappings":";;;;;;;AASA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAAE,GAAAC,GAAA;AACA,YAAAC,IAAA,IAAA,OAAA,IAAAF,EAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AAEA,aADAC,EAAA,MAAAC,CAAA,EACA,IAAA,CAAAC,MACAH,EAAA,SAAAG,CAAA,IACA,KAAA,eAAAN,GAAA;AAAA,QACA,OAAA,EAAA,MAAAM,GAAA,MAAA,KAAA,KAAA;AAAA,MACA,CAAA,IAEA,KAAA,eAAA,QAAAA,CAAA,CACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAAC,GAAA;AAEA,UAAA,CAAAA,EAAA,OAAAA,EAAA;AACA,eAAA,KAAA,YAAAA,EAAA,IAAA;AAGA,YAAAC,IAAAD,EAAA,WAAAA,EAAA,SAAA,IAAA,CAAAE,MAAA,KAAA,aAAAA,CAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAAF,EAAA,KAAAA,EAAA,MAAAC,CAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAAD,GAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAAH,GAAA;AACA,YAAAM,IAAAC,EAAAP,CAAA,GACAQ,IAAAC,EAAAT,CAAA,GAEAD,IAAA,CAAA,GAAAO,GAAA,GAAAE,CAAA;AACA,aAAAT,EAAA,WAAA,IAAAC,IACA,KAAA,gBAAAD,GAAAC,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAAU,GAAA;AACA,UAAAC,IAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAAD;AAAA,MACA,KAAA;AAAA,MACA,EAAA,OAAA,uBAAA;AAAA,MACA,KAAA,mBACAC,IACAA,EAAA,IAAA,CAAAR,MAAA,KAAA,aAAAA,CAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}
+{"version":3,"file":"emoji-text-wrapper.js","sources":["../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const split = textContent.split(regexp);\n      return split.map((item) => {\n        if (replaceList.includes(item)) {\n          return this.$createElement(DtEmoji, {\n            props: { code: item, size: this.size },\n          });\n        }\n        return this.$createElement('span', item);\n      });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      if (replaceList.length === 0) return textContent;\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      { class: 'd-emoji-text-wrapper' },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AACA,aAAA,MAAA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,SAAA,WAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,UAAA,YAAA,WAAA;AAAA,eAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA,OAAA,uBAAA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;"}

package/dist/lib/emoji.cjs

@@ -1,2 +1,146 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../chunks/index-sdfB7Aok.js");require("emoji-regex");require("emoji-toolkit/emoji_strategy.json");require("../chunks/_plugin-vue2_normalizer-ZK80B3OL.js");require("./skeleton.cjs");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");exports.DtEmoji=e.D;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_emoji = require("../common/emoji.cjs");
+const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
+const lib_skeleton = require("./skeleton.cjs");
+const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
+require("emoji-regex");
+require("emoji-toolkit/emoji_strategy.json");
+require("@dialpad/dialtone-icons/icons.json");
+const _sfc_main = {
+  name: "DtEmoji",
+  components: {
+    DtSkeleton: lib_skeleton.DtSkeleton
+  },
+  props: {
+    /**
+     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
+     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
+     * for all supported shortcode/unicode or the docs for setting up custom emojis.
+     */
+    code: {
+      type: String,
+      required: true
+    },
+    /**
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(t)
+    },
+    /**
+     * Additional class name for the emoji img element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    imgClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
+     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
+     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
+     * getEmojiData() function
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      emojiData: null,
+      imgLoading: false
+    };
+  },
+  computed: {
+    emojiDataValid() {
+      return !!this.emojiData;
+    },
+    emojiSrc() {
+      var _a;
+      if (!this.emojiDataValid) {
+        return "invalid";
+      }
+      if ((_a = this.emojiData) == null ? void 0 : _a.custom) {
+        return common_emoji.customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
+      }
+      if (["100", "200"].includes(this.size)) {
+        return common_emoji.emojiImageUrlSmall + this.emojiData.key + common_emoji.emojiFileExtensionSmall;
+      } else {
+        return common_emoji.emojiImageUrlLarge + this.emojiData.key + common_emoji.emojiFileExtensionLarge;
+      }
+    },
+    emojiAlt() {
+      if (!this.emojiDataValid) {
+        return void 0;
+      }
+      return this.emojiData.unicode_output ? common_emoji.stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;
+    },
+    emojiLabel() {
+      if (!this.emojiDataValid) {
+        return "Invalid Emoji";
+      }
+      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;
+    },
+    emojiSize() {
+      return icon_constants.ICON_SIZE_MODIFIERS[this.size];
+    }
+  },
+  watch: {
+    code: {
+      handler: function() {
+        this.getEmojiData();
+      },
+      immediate: true
+    },
+    emojiSrc: {
+      handler: async function() {
+        this.imgLoading = true;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getEmojiData() {
+      this.emojiData = common_emoji.codeToEmojiData(this.code);
+    },
+    imageLoaded() {
+      this.imgLoading = false;
+    },
+    imageErrored() {
+      this.imgLoading = false;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", { class: ["d-emoji", "d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtEmoji = __component__.exports;
+exports.DtEmoji = DtEmoji;
 //# sourceMappingURL=emoji.cjs.map

package/dist/lib/emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"emoji.cjs","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji', 'd-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["DtSkeleton","ICON_SIZE_MODIFIERS","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":";;;;;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAA,aAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAAC,aAAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA,OAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAAC,6BAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAN,eAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAAO,aAAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/lib/emoji.js

@@ -1,11 +1,146 @@
-import { D as e } from "../chunks/index-YkSDT8-g.js";
+import { customEmojiAssetUrl, emojiImageUrlSmall, emojiFileExtensionSmall, emojiImageUrlLarge, emojiFileExtensionLarge, stringToUnicode, codeToEmojiData } from "../common/emoji.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtSkeleton } from "./skeleton.js";
+import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-Dy4MEUJL.js";
 import "emoji-regex";
 import "emoji-toolkit/emoji_strategy.json";
-import "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import "./skeleton.js";
-import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
+const _sfc_main = {
+  name: "DtEmoji",
+  components: {
+    DtSkeleton
+  },
+  props: {
+    /**
+     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
+     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
+     * for all supported shortcode/unicode or the docs for setting up custom emojis.
+     */
+    code: {
+      type: String,
+      required: true
+    },
+    /**
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t)
+    },
+    /**
+     * Additional class name for the emoji img element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    imgClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
+     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
+     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
+     * getEmojiData() function
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      emojiData: null,
+      imgLoading: false
+    };
+  },
+  computed: {
+    emojiDataValid() {
+      return !!this.emojiData;
+    },
+    emojiSrc() {
+      var _a;
+      if (!this.emojiDataValid) {
+        return "invalid";
+      }
+      if ((_a = this.emojiData) == null ? void 0 : _a.custom) {
+        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
+      }
+      if (["100", "200"].includes(this.size)) {
+        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;
+      } else {
+        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;
+      }
+    },
+    emojiAlt() {
+      if (!this.emojiDataValid) {
+        return void 0;
+      }
+      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;
+    },
+    emojiLabel() {
+      if (!this.emojiDataValid) {
+        return "Invalid Emoji";
+      }
+      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;
+    },
+    emojiSize() {
+      return ICON_SIZE_MODIFIERS[this.size];
+    }
+  },
+  watch: {
+    code: {
+      handler: function() {
+        this.getEmojiData();
+      },
+      immediate: true
+    },
+    emojiSrc: {
+      handler: async function() {
+        this.imgLoading = true;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getEmojiData() {
+      this.emojiData = codeToEmojiData(this.code);
+    },
+    imageLoaded() {
+      this.imgLoading = false;
+    },
+    imageErrored() {
+      this.imgLoading = false;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", { class: ["d-emoji", "d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null,
+  null,
+  null
+);
+const DtEmoji = __component__.exports;
 export {
-  e as DtEmoji
+  DtEmoji
 };
 //# sourceMappingURL=emoji.js.map

package/dist/lib/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"emoji.js","sources":["../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji', 'd-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAA,qBAAA,KAAA,UAAA,MAAA;AAAA,MACA,OAAA;AACA,eAAA,qBAAA,KAAA,UAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAA,gBAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}