@dialpad/dialtone-vue 3.145.1 → 3.146.0

package/dist/lib/emoji-row.js

@@ -4,26 +4,25 @@ import { DtTooltip } from "./tooltip.js";
 import { DtButton } from "./button.js";
 import { DtEmoji } from "./emoji.js";
 import { DtEmojiTextWrapper as _sfc_main$1 } from "./emoji-text-wrapper.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
+import "../chunks/popover_constants-6YkPPbnk.js";
 import "tippy.js";
 import "../common/utils.js";
 import "../common/constants.js";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/index-GVD15GIB.js";
+import "../chunks/index-dfdrE-3M.js";
 import "@dialpad/dialtone-emojis";
 import "./skeleton.js";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
-const REACTIONS_ATTRIBUTES = [
-  "emojiUnicodeOrShortname",
-  "isSelected",
-  "ariaLabel",
-  "tooltip",
-  "num"
-];
+const REACTIONS_ATTRIBUTES = ["emojiUnicodeOrShortname", "isSelected", "ariaLabel", "tooltip", "num"];
 const _sfc_main = {
   name: "DtRecipeEmojiRow",
-  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper: _sfc_main$1 },
+  components: {
+    DtTooltip,
+    DtButton,
+    DtEmoji,
+    DtEmojiTextWrapper: _sfc_main$1
+  },
   mixins: [],
   props: {
     /**
@@ -42,10 +41,7 @@ const _sfc_main = {
       }
     }
   },
-  emits: [
-    "emoji-clicked",
-    "emoji-hovered"
-  ],
+  emits: ["emoji-clicked", "emoji-hovered"],
   methods: {
     emojiClicked(reaction) {
       this.$emit("emoji-clicked", reaction.emojiUnicodeOrShortname);
@@ -58,66 +54,60 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "dt-emoji-row" };
+const _hoisted_1 = {
+  class: "dt-emoji-row"
+};
 const _hoisted_2 = ["reaction"];
-const _hoisted_3 = { "aria-hidden": "true" };
-const _hoisted_4 = { class: "dt-emoji-row__emoji" };
-const _hoisted_5 = { class: "dt-emoji-row__reaction-number" };
+const _hoisted_3 = {
+  "aria-hidden": "true"
+};
+const _hoisted_4 = {
+  class: "dt-emoji-row__emoji"
+};
+const _hoisted_5 = {
+  class: "dt-emoji-row__reaction-number"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_emoji_text_wrapper = resolveComponent("dt-emoji-text-wrapper");
   const _component_dt_emoji = resolveComponent("dt-emoji");
   const _component_dt_button = resolveComponent("dt-button");
   const _component_dt_tooltip = resolveComponent("dt-tooltip");
-  return openBlock(), createElementBlock("span", _hoisted_1, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList($props.reactions, (reaction) => {
-      return openBlock(), createElementBlock("span", {
-        key: reaction.unicodeOutput,
-        reaction
-      }, [
-        createVNode(_component_dt_tooltip, {
-          class: "dt-emoji-row__tooltip",
-          "content-class": "d-wmx464",
-          sticky: "popper",
-          onShown: (shown) => $options.emojiHovered(reaction, shown)
-        }, {
-          anchor: withCtx(({ attrs }) => [
-            createVNode(_component_dt_button, {
-              importance: "clear",
-              size: "sm",
-              "data-qa": "feed-item-reaction-button",
-              class: normalizeClass(["dt-emoji-row__reaction", reaction.isSelected ? "dt-emoji-row__reaction--selected" : ""]),
-              "aria-label": reaction.ariaLabel,
-              attrs,
-              onClick: ($event) => $options.emojiClicked(reaction)
-            }, {
-              default: withCtx(() => [
-                createElementVNode("span", _hoisted_4, [
-                  createVNode(_component_dt_emoji, {
-                    size: "200",
-                    code: reaction.emojiUnicodeOrShortname
-                  }, null, 8, ["code"])
-                ]),
-                createElementVNode("span", _hoisted_5, toDisplayString(reaction.num), 1)
-              ]),
-              _: 2
-            }, 1032, ["class", "aria-label", "attrs", "onClick"])
-          ]),
-          default: withCtx(() => [
-            createElementVNode("span", _hoisted_3, [
-              createVNode(_component_dt_emoji_text_wrapper, { size: "200" }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(reaction.tooltip), 1)
-                ]),
-                _: 2
-              }, 1024)
-            ])
-          ]),
-          _: 2
-        }, 1032, ["onShown"])
-      ], 8, _hoisted_2);
-    }), 128)),
-    renderSlot(_ctx.$slots, "picker")
-  ]);
+  return openBlock(), createElementBlock("span", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.reactions, (reaction) => {
+    return openBlock(), createElementBlock("span", {
+      key: reaction.unicodeOutput,
+      reaction
+    }, [createVNode(_component_dt_tooltip, {
+      class: "dt-emoji-row__tooltip",
+      "content-class": "d-wmx464",
+      sticky: "popper",
+      onShown: (shown) => $options.emojiHovered(reaction, shown)
+    }, {
+      anchor: withCtx(({
+        attrs
+      }) => [createVNode(_component_dt_button, {
+        importance: "clear",
+        size: "sm",
+        "data-qa": "feed-item-reaction-button",
+        class: normalizeClass(["dt-emoji-row__reaction", reaction.isSelected ? "dt-emoji-row__reaction--selected" : ""]),
+        "aria-label": reaction.ariaLabel,
+        attrs,
+        onClick: ($event) => $options.emojiClicked(reaction)
+      }, {
+        default: withCtx(() => [createElementVNode("span", _hoisted_4, [createVNode(_component_dt_emoji, {
+          size: "200",
+          code: reaction.emojiUnicodeOrShortname
+        }, null, 8, ["code"])]), createElementVNode("span", _hoisted_5, toDisplayString(reaction.num), 1)]),
+        _: 2
+      }, 1032, ["class", "aria-label", "attrs", "onClick"])]),
+      default: withCtx(() => [createElementVNode("span", _hoisted_3, [createVNode(_component_dt_emoji_text_wrapper, {
+        size: "200"
+      }, {
+        default: withCtx(() => [createTextVNode(toDisplayString(reaction.tooltip), 1)]),
+        _: 2
+      }, 1024)])]),
+      _: 2
+    }, 1032, ["onShown"])], 8, _hoisted_2);
+  }), 128)), renderSlot(_ctx.$slots, "picker")]);
 }
 const emoji_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/lib/emoji-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji-row.js","sources":["../../recipes/conversation_view/emoji_row/emoji_row_constants.js","../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["export const REACTIONS_ATTRIBUTES = [\n  'emojiUnicodeOrShortname',\n  'isSelected',\n  'ariaLabel',\n  'tooltip',\n  'num',\n];\n\nexport default {\n  REACTIONS_ATTRIBUTES,\n};\n","<template>\n  <span class=\"dt-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n      :reaction=\"reaction\"\n    >\n      <dt-tooltip\n        class=\"dt-emoji-row__tooltip\"\n        content-class=\"d-wmx464\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"200\">\n            {{ reaction.tooltip }}\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"['dt-emoji-row__reaction', reaction.isSelected ? 'dt-emoji-row__reaction--selected' : '']\"\n            :aria-label=\"reaction.ariaLabel\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"dt-emoji-row__emoji\">\n              <dt-emoji\n                size=\"200\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"dt-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  mixins: [],\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-emoji-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dt-space-300);\n\n  &__tooltip {\n    display: inline-block;\n  }\n\n  &__reaction {\n    --emoji-item-color-inset-shadow: transparent;\n    --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);\n    --emoji-item-color-background: var(--dt-action-color-background-muted-hover);\n\n    padding: var(--dt-space-300) var(--dt-space-400);\n    border-radius: var(--dt-size-radius-pill);\n    border: 0;\n    color: var(--emoji-item-color-foreground);\n    background-color: var(--emoji-item-color-background);\n    box-shadow: inset 0 0 0 var(--dt-size-border-150) var(--emoji-item-color-inset-shadow);\n    height: var(--dt-size-550);\n\n    &.dt-emoji-row__picker {\n      padding: var(--dt-space-200) var(--dt-space-350);\n    }\n\n    &:hover {\n      --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);\n      --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);\n    }\n\n    &:active {\n      --emoji-item-color-background: var(--dt-action-color-background-muted-active);\n      --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);\n\n      transform: scale(.98);\n    }\n\n    &--selected {\n      --emoji-item-color-inset-shadow: var(--dt-color-border-brand);\n      --emoji-item-color-foreground: var(--dt-color-link-primary);\n      --emoji-item-color-background: var(--dt-action-color-background-base-hover);\n\n      .dt-emoji-row__reaction-number {\n        font-weight: var(--dt-font-weight-bold);\n      }\n\n      &:hover {\n        --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);\n        --emoji-item-color-foreground: var(--dt-color-link-primary-hover);\n      }\n\n      &:active {\n        --emoji-item-color-background: var(--dt-action-color-background-base-active);\n      }\n    }\n  }\n\n  &__emoji {\n    margin-right: var(--dt-space-300);\n    display: inline-flex;\n  }\n\n  &__reaction-number {\n    // set font properties individually to change line height,\n    // as font shorthand property will override line-height.\n    font-weight: var(--dt-typography-body-sm-font-weight);\n    font-size: var(--dt-typography-body-sm-font-size);\n    font-family: var(--dt-typography-body-sm-font-family);\n    line-height: var(--dt-font-line-height-100);\n    font-variant: tabular-nums;\n  }\n}\n</style>\n"],"names":["DtEmojiTextWrapper","_openBlock","_createElementBlock","_Fragment","_renderList","_createVNode","_withCtx","_normalizeClass","_createElementVNode","_toDisplayString","_createTextVNode","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;AAAY,MAAC,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AC+CA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,WAAW,UAAU,SAASA,oBAAAA,YAAoB;AAAA,EAEhE,QAAQ,CAAE;AAAA,EAEV,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,CAAC,cAAc;AACxB,mBAAW,YAAY,WAAW;AAChC,gBAAM,aAAa,qBAAqB,MAAM,CAAC,cAAc,SAAS,SAAS,MAAM,MAAkB;AACvG,cAAI,CAAC;AAAY,mBAAO;AAAA,QAC1B;AACA,eAAO;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL;AAAA,IACA;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,aAAc,UAAU;AACtB,WAAK,MAAM,iBAAiB,SAAS,uBAAuB;AAAA,IAC7D;AAAA,IAED,aAAc,UAAU,OAAO;AAC7B,WAAK,MAAM,iBAAiB;AAAA,QAC1B,UAAU,SAAS;AAAA,QACnB;AAAA,MACF,CAAC;AAAA,IACF;AAAA,EACF;AACH;AA7FQ,MAAA,aAAA,EAAA,OAAM,eAAc;;AAYd,MAAA,aAAA,EAAA,eAAY,OAAM;AAed,MAAA,aAAA,EAAA,OAAM,sBAAqB;AAM3B,MAAA,aAAA,EAAA,OAAM,gCAA+B;;;;;;AAjCrD,SAAAC,UAAA,GAAAC,mBA0CO,QA1CP,YA0CO;AAAA,sBAzCLA,mBAsCOC,UAAA,MAAAC,WArCc,OAAS,WAAA,CAArB,aAAQ;0BADjBF,mBAsCO,QAAA;AAAA,QApCJ,KAAK,SAAS;AAAA,QACd;AAAA;QAEDG,YAgCa,uBAAA;AAAA,UA/BX,OAAM;AAAA,UACN,iBAAc;AAAA,UACd,QAAO;AAAA,UACN,UAAQ,UAAU,sBAAa,UAAU,KAAK;AAAA;UAOpC,QAAMC,QACf,CAkBY,EAnBO,YAAK;AAAA,YACxBD,YAkBY,sBAAA;AAAA,cAjBV,YAAW;AAAA,cACX,MAAK;AAAA,cACL,WAAQ;AAAA,cACP,OAAKE,eAAA,CAAA,0BAA6B,SAAS,aAAU,qCAAA,EAAA,CAAA;AAAA,cACrD,cAAY,SAAS;AAAA,cACrB;AAAA,cACA,SAAK,YAAE,SAAY,aAAC,QAAQ;AAAA;+BAE7B,MAKO;AAAA,gBALPC,mBAKO,QALP,YAKO;AAAA,kBAJLH,YAGE,qBAAA;AAAA,oBAFA,MAAK;AAAA,oBACJ,MAAM,SAAS;AAAA;;gBAGpBG,mBAEO,QAFP,YACKC,gBAAA,SAAS,GAAG,GAAA,CAAA;AAAA;;;;2BAtBrB,MAIO;AAAA,YAJPD,mBAIO,QAJP,YAIO;AAAA,cAHLH,YAEwB,kCAAA,EAFD,MAAK,MAAK,GAAA;AAAA,iCAC/B,MAAsB;AAAA,kBAAnBK,gBAAAD,gBAAA,SAAS,OAAO,GAAA,CAAA;AAAA;;;;;;;;;IA2B3BE,WAAsB,KAAA,QAAA,QAAA;AAAA;;;"}
+{"version":3,"file":"emoji-row.js","sources":["../../recipes/conversation_view/emoji_row/emoji_row_constants.js","../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["export const REACTIONS_ATTRIBUTES = [\n  'emojiUnicodeOrShortname',\n  'isSelected',\n  'ariaLabel',\n  'tooltip',\n  'num',\n];\n\nexport default {\n  REACTIONS_ATTRIBUTES,\n};\n","<template>\n  <span class=\"dt-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n      :reaction=\"reaction\"\n    >\n      <dt-tooltip\n        class=\"dt-emoji-row__tooltip\"\n        content-class=\"d-wmx464\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"200\">\n            {{ reaction.tooltip }}\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"['dt-emoji-row__reaction', reaction.isSelected ? 'dt-emoji-row__reaction--selected' : '']\"\n            :aria-label=\"reaction.ariaLabel\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"dt-emoji-row__emoji\">\n              <dt-emoji\n                size=\"200\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"dt-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '../../../components/button';\nimport { DtTooltip } from '../../../components/tooltip';\nimport { DtEmoji } from '../../../components/emoji';\nimport { DtEmojiTextWrapper } from '../../../components/emoji_text_wrapper';\n\nexport default {\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  mixins: [],\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined ?? false);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-emoji-row {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--dt-space-300);\n\n  &__tooltip {\n    display: inline-block;\n  }\n\n  &__reaction {\n    --emoji-item-color-inset-shadow: transparent;\n    --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);\n    --emoji-item-color-background: var(--dt-action-color-background-muted-hover);\n\n    padding: var(--dt-space-300) var(--dt-space-400);\n    border-radius: var(--dt-size-radius-pill);\n    border: 0;\n    color: var(--emoji-item-color-foreground);\n    background-color: var(--emoji-item-color-background);\n    box-shadow: inset 0 0 0 var(--dt-size-border-150) var(--emoji-item-color-inset-shadow);\n    height: var(--dt-size-550);\n\n    &.dt-emoji-row__picker {\n      padding: var(--dt-space-200) var(--dt-space-350);\n    }\n\n    &:hover {\n      --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);\n      --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);\n    }\n\n    &:active {\n      --emoji-item-color-background: var(--dt-action-color-background-muted-active);\n      --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);\n\n      transform: scale(.98);\n    }\n\n    &--selected {\n      --emoji-item-color-inset-shadow: var(--dt-color-border-brand);\n      --emoji-item-color-foreground: var(--dt-color-link-primary);\n      --emoji-item-color-background: var(--dt-action-color-background-base-hover);\n\n      .dt-emoji-row__reaction-number {\n        font-weight: var(--dt-font-weight-bold);\n      }\n\n      &:hover {\n        --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);\n        --emoji-item-color-foreground: var(--dt-color-link-primary-hover);\n      }\n\n      &:active {\n        --emoji-item-color-background: var(--dt-action-color-background-base-active);\n      }\n    }\n  }\n\n  &__emoji {\n    margin-right: var(--dt-space-300);\n    display: inline-flex;\n  }\n\n  &__reaction-number {\n    // set font properties individually to change line height,\n    // as font shorthand property will override line-height.\n    font-weight: var(--dt-typography-body-sm-font-weight);\n    font-size: var(--dt-typography-body-sm-font-size);\n    font-family: var(--dt-typography-body-sm-font-family);\n    line-height: var(--dt-font-line-height-100);\n    font-variant: tabular-nums;\n  }\n}\n</style>\n"],"names":["REACTIONS_ATTRIBUTES","_sfc_main","name","components","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","mixins","props","reactions","type","Array","default","validator","reaction","validInput","every","attribute","undefined","emits","methods","emojiClicked","$emit","emojiUnicodeOrShortname","emojiHovered","state","_hoisted_1","class","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_Fragment","_renderList","$props","key","unicodeOutput","_createVNode","_component_dt_tooltip","sticky","onShown","shown","$options","anchor","_withCtx","attrs","_component_dt_button","importance","size","_normalizeClass","isSelected","ariaLabel","onClick","$event","_createElementVNode","_component_dt_emoji","code","_toDisplayString","num","_component_dt_emoji_text_wrapper","_createTextVNode","tooltip","_renderSlot","_ctx","$slots"],"mappings":";;;;;;;;;;;;;;;;AAAaA,MAAAA,uBAAuB,CAClC,2BACA,cACA,aACA,WACA,KAAK;ACgDP,MAAKC,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAUC;AAAAA,IAASC,oBAAAA;AAAAA,EAAoB;AAAA,EAEhEC,QAAQ,CAAE;AAAA,EAEVC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,WAAW;AAAA,MACTC,MAAMC;AAAAA,MACNC,SAASA,MAAM,CAAE;AAAA,MACjBC,WAAYJ,eAAc;AACxB,mBAAWK,YAAYL,WAAW;AAChC,gBAAMM,aAAahB,qBAAqBiB,MAAOC,eAAcH,SAASG,SAAS,MAAMC,MAAkB;AACvG,cAAI,CAACH;AAAY,mBAAO;AAAA,QAC1B;AACA,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACD;AAAA,EAEDI,OAAO,CACL,iBACA,eAAe;AAAA,EAGjBC,SAAS;AAAA,IACPC,aAAcP,UAAU;AACtB,WAAKQ,MAAM,iBAAiBR,SAASS,uBAAuB;AAAA,IAC7D;AAAA,IAEDC,aAAcV,UAAUW,OAAO;AAC7B,WAAKH,MAAM,iBAAiB;AAAA,QAC1BR,UAAUA,SAASS;AAAAA,QACnBE;AAAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;AA7FQ,MAAAC,aAAA;AAAA,EAAAC,OAAM;AAAc;;AAYd,MAAAC,aAAA;AAAA,EAAA,eAAY;AAAM;AAed,MAAAC,aAAA;AAAA,EAAAF,OAAM;AAAqB;AAM3B,MAAAG,aAAA;AAAA,EAAAH,OAAM;AAA+B;;;;;;AAjCrD,SAAAI,UAAA,GAAAC,mBA0CO,QA1CPN,YA0CO,mBAzCLM,mBAsCOC,UAAA,MAAAC,WArCcC,OAAS1B,WAArBK,cAAQ;wBADjBkB,mBAsCO,QAAA;AAAA,MApCJI,KAAKtB,SAASuB;AAAAA,MACdvB;AAAAA,QAEDwB,YAgCaC,uBAAA;AAAA,MA/BXZ,OAAM;AAAA,MACN,iBAAc;AAAA,MACda,QAAO;AAAA,MACNC,SAAQC,WAAUC,sBAAa7B,UAAU4B,KAAK;AAAA;MAOpCE,QAAMC,QACf,CAkBY;AAAA,QAnBOC;AAAAA,MAAK,MAAA,CACxBR,YAkBYS,sBAAA;AAAA,QAjBVC,YAAW;AAAA,QACXC,MAAK;AAAA,QACL,WAAQ;AAAA,QACPtB,OAAKuB,eAAA,CAAA,0BAA6BpC,SAASqC,aAAU,qCAAA,EAAA,CAAA;AAAA,QACrD,cAAYrC,SAASsC;AAAAA,QACrBN;AAAAA,QACAO,SAAKC,YAAEX,SAAYtB,aAACP,QAAQ;AAAA;yBAE7B,MAKO,CALPyC,mBAKO,QALP1B,YAKO,CAJLS,YAGEkB,qBAAA;AAAA,UAFAP,MAAK;AAAA,UACJQ,MAAM3C,SAASS;AAAAA,iCAGpBgC,mBAEO,QAFPzB,YACK4B,gBAAA5C,SAAS6C,GAAG,GAAA,CAAA,CAAA;;;uBAtBrB,MAIO,CAJPJ,mBAIO,QAJP3B,YAIO,CAHLU,YAEwBsB,kCAAA;AAAA,QAFDX,MAAK;AAAA,MAAK,GAAA;AAAA,yBAC/B,MAAsB,CAAnBY,gBAAAH,gBAAA5C,SAASgD,OAAO,GAAA,CAAA,CAAA;;;;;aA2B3BC,WAAsBC,KAAAC,QAAA,QAAA,CAAA;;;"}

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const common_emoji = require("../chunks/index-lu2o2f4r.js");
+const common_emoji = require("../chunks/index-fEp0B-5Z.js");
 const vue = require("vue");
-const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
+const icon_constants = require("../chunks/icon_constants-bvhFNOPu.js");
 const lib_emoji = require("./emoji.cjs");
 require("@dialpad/dialtone-emojis");
 require("@dialpad/dialtone-icons/icons.json");
@@ -50,9 +50,14 @@ const _sfc_main = {
       const items = textContent.split(regexp);
       return items.filter((item) => item.trim() !== "").map((item) => {
         if (replaceList.includes(item)) {
-          return vue.h(lib_emoji.DtEmoji, { code: item, size: this.size });
+          return vue.h(lib_emoji.DtEmoji, {
+            code: item,
+            size: this.size
+          });
         }
-        return vue.h("span", { class: "d-emoji-text-wrapper__text" }, item);
+        return vue.h("span", {
+          class: "d-emoji-text-wrapper__text"
+        }, item);
       });
     },
     /**
@@ -90,14 +95,10 @@ const _sfc_main = {
   },
   render() {
     const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];
-    return vue.h(
-      this.elementType,
-      {
-        "data-qa": "emoji-text-wrapper",
-        class: "d-emoji-text-wrapper"
-      },
-      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
-    );
+    return vue.h(this.elementType, {
+      "data-qa": "emoji-text-wrapper",
+      class: "d-emoji-text-wrapper"
+    }, this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode)));
   }
 };
 exports.DtEmojiTextWrapper = _sfc_main;

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 { h } from 'vue';\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      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, 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 (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\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 () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["DtEmoji","ICON_SIZE_MODIFIERS","h","findShortCodes","findEmojis"],"mappings":";;;;;;;;;;AAUK,MAAA,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,SAAAA,UAAO;AAAA,EACR;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAKC,kCAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY;AAAQ,eAAO;AAEhC,YAAM,SAAS,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;AACb,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAOC,IAAC,EAACF,UAAO,SAAE,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAOE,IAAAA,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU;AAAU,eAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS;AAAU,eAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa;AAAW,eAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAOA,IAAC,EAAC,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAaC,4BAAe,WAAW;AAC7C,YAAM,SAASC,wBAAW,WAAW;AAErC,YAAM,cAAc,CAAC,GAAG,YAAY,GAAG,MAAM;AAC7C,UAAI,YAAY,WAAW;AAAG,eAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAOF,IAAC;AAAA,MACN,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;;"}
+{"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 { h } from 'vue';\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      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, 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 (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\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 () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtEmoji","props","elementType","type","String","default","size","validator","t","Object","keys","ICON_SIZE_MODIFIERS","includes","data","loadingEmojiJson","created","methods","replaceDtEmojis","replaceList","textContent","length","regexp","RegExp","join","items","split","filter","item","trim","map","h","code","class","searchVNodes","VNode","searchCodes","children","innerHTML","Array","isArray","VNodeChild","replaceVueComponentVNodeContent","shortcodes","findShortCodes","emojis","findEmojis","render","defaultSlotContent","$slots"],"mappings":";;;;;;;;;;AAUA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IACVC,SAAAA,UAAAA;AAAAA,EACD;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,aAAa;AAAA,MACXC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,MAAM;AAAA,MACJH,MAAMC;AAAAA,MACNC,SAAS;AAAA,MACTE,WAAYC,OAAMC,OAAOC,KAAKC,eAAAA,mBAAmB,EAAEC,SAASJ,CAAC;AAAA,IAC/D;AAAA,EACD;AAAA,EAEDK,OAAQ;AACN,WAAO;AAAA,MACLC,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAMC,UAAW;AACf,SAAKD,mBAAmB;AAAA,EACzB;AAAA,EAEDE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKPC,gBAAiBC,aAAaC,aAAa;AACzC,UAAI,CAACD,YAAYE;AAAQ,eAAOD;AAEhC,YAAME,SAAS,IAAIC,OAAO,IAAIJ,YAAYK,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAMC,QAAQL,YAAYM,MAAMJ,MAAM;AAEtC,aAAOG,MACJE,OAAOC,UAAQA,KAAKC,KAAI,MAAO,EAAE,EACjCC,IAAKF,UAAS;AACb,YAAIT,YAAYN,SAASe,IAAI,GAAG;AAC9B,iBAAOG,IAAAA,EAAE9B,UAAAA,SAAS;AAAA,YAAE+B,MAAMJ;AAAAA,YAAMrB,MAAM,KAAKA;AAAAA,UAAK,CAAC;AAAA,QACnD;AACA,eAAOwB,IAAAA,EAAE,QAAQ;AAAA,UAAEE,OAAO;AAAA,QAA8B,GAAEL,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODM,aAAcC,OAAO;;AACnB,UAAI,OAAOA,UAAU;AAAU,eAAO,KAAKC,YAAYD,KAAK;AAC5D,UAAI,OAAOA,MAAM/B,SAAS;AAAU,eAAO,KAAKgC,YAAYD,MAAME,QAAQ;AAC1E,WAAIF,WAAMjC,UAANiC,mBAAaG;AAAW,eAAO,KAAKJ,aAAaC,MAAMjC,MAAMoC,SAAS;AAE1E,YAAMD,WAAWE,MAAMC,QAAQL,MAAME,QAAQ,IAAIF,MAAME,WAAW,CAACF,MAAME,QAAQ;AACjF,aAAON,IAAC,EAACI,MAAM/B,MAAM+B,MAAMjC,OAAOmC,SAASP,IAAIW,gBAAc,KAAKP,aAAaO,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGDC,gCAAiCP,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODC,YAAahB,aAAa;AACxB,YAAMuB,aAAaC,4BAAexB,WAAW;AAC7C,YAAMyB,SAASC,wBAAW1B,WAAW;AAErC,YAAMD,cAAc,CAAC,GAAGwB,YAAY,GAAGE,MAAM;AAC7C,UAAI1B,YAAYE,WAAW;AAAG,eAAOD;AACrC,aAAO,KAAKF,gBAAgBC,aAAaC,WAAW;AAAA,IACtD;AAAA,EACD;AAAA,EAED2B,SAAU;AACR,UAAMC,qBAAqB,KAAKC,OAAO3C,UAAU,KAAK2C,OAAO3C,QAAU,IAAE;AACzE,WAAOyB,IAAC,EACN,KAAK5B,aACL;AAAA,MACE,WAAW;AAAA,MACX8B,OAAO;AAAA,IACR,GACD,KAAKlB,mBACDiC,qBACAA,mBAAmBlB,IAAIK,WAAS,KAAKD,aAAaC,KAAK,CAAC,CAC9D;AAAA,EACF;AACF;;"}

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

@@ -1,6 +1,6 @@
-import { findShortCodes, findEmojis } from "../chunks/index-GVD15GIB.js";
+import { findShortCodes, findEmojis } from "../chunks/index-dfdrE-3M.js";
 import { h } from "vue";
-import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-Dy4MEUJL.js";
+import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-gIQj4mf7.js";
 import { DtEmoji } from "./emoji.js";
 import "@dialpad/dialtone-emojis";
 import "@dialpad/dialtone-icons/icons.json";
@@ -48,9 +48,14 @@ const _sfc_main = {
       const items = textContent.split(regexp);
       return items.filter((item) => item.trim() !== "").map((item) => {
         if (replaceList.includes(item)) {
-          return h(DtEmoji, { code: item, size: this.size });
+          return h(DtEmoji, {
+            code: item,
+            size: this.size
+          });
         }
-        return h("span", { class: "d-emoji-text-wrapper__text" }, item);
+        return h("span", {
+          class: "d-emoji-text-wrapper__text"
+        }, item);
       });
     },
     /**
@@ -88,14 +93,10 @@ const _sfc_main = {
   },
   render() {
     const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];
-    return h(
-      this.elementType,
-      {
-        "data-qa": "emoji-text-wrapper",
-        class: "d-emoji-text-wrapper"
-      },
-      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
-    );
+    return h(this.elementType, {
+      "data-qa": "emoji-text-wrapper",
+      class: "d-emoji-text-wrapper"
+    }, this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode)));
   }
 };
 export {

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 { h } from 'vue';\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      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, 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 (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\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 () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;;;;AAUK,MAAA,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,mBAAmB,EAAE,SAAS,CAAC;AAAA,IAC9D;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAM,UAAW;AACf,SAAK,mBAAmB;AAAA,EACzB;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,gBAAiB,aAAa,aAAa;AACzC,UAAI,CAAC,YAAY;AAAQ,eAAO;AAEhC,YAAM,SAAS,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAM,QAAQ,YAAY,MAAM,MAAM;AAEtC,aAAO,MACJ,OAAO,UAAQ,KAAK,KAAI,MAAO,EAAE,EACjC,IAAI,CAAC,SAAS;AACb,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAO,EAAE,SAAS,EAAE,MAAM,MAAM,MAAM,KAAK,KAAG,CAAG;AAAA,QACnD;AACA,eAAO,EAAE,QAAQ,EAAE,OAAO,6BAA2B,GAAK,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAc,OAAO;;AACnB,UAAI,OAAO,UAAU;AAAU,eAAO,KAAK,YAAY,KAAK;AAC5D,UAAI,OAAO,MAAM,SAAS;AAAU,eAAO,KAAK,YAAY,MAAM,QAAQ;AAC1E,WAAI,WAAM,UAAN,mBAAa;AAAW,eAAO,KAAK,aAAa,MAAM,MAAM,SAAS;AAE1E,YAAM,WAAW,MAAM,QAAQ,MAAM,QAAQ,IAAI,MAAM,WAAW,CAAC,MAAM,QAAQ;AACjF,aAAO,EAAE,MAAM,MAAM,MAAM,OAAO,SAAS,IAAI,gBAAc,KAAK,aAAa,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiC,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAa,aAAa;AACxB,YAAM,aAAa,eAAe,WAAW;AAC7C,YAAM,SAAS,WAAW,WAAW;AAErC,YAAM,cAAc,CAAC,GAAG,YAAY,GAAG,MAAM;AAC7C,UAAI,YAAY,WAAW;AAAG,eAAO;AACrC,aAAO,KAAK,gBAAgB,aAAa,WAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAM,qBAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAO;AAAA,MACL,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACD,qBACA,mBAAmB,IAAI,WAAS,KAAK,aAAa,KAAK,CAAC;AAAA;EAE/D;AACH;"}
+{"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 { h } from 'vue';\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      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return h(DtEmoji, { code: item, size: this.size });\n          }\n          return h('span', { class: 'd-emoji-text-wrapper__text' }, 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 (typeof VNode === 'string') return this.searchCodes(VNode);\n      if (typeof VNode.type === 'symbol') return this.searchCodes(VNode.children);\n      if (VNode.props?.innerHTML) return this.searchVNodes(VNode.props.innerHTML);\n\n      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];\n      return h(VNode.type, VNode.props, children.map(VNodeChild => this.searchVNodes(VNodeChild)));\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 () {\n    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtEmoji","props","elementType","type","String","default","size","validator","t","Object","keys","ICON_SIZE_MODIFIERS","includes","data","loadingEmojiJson","created","methods","replaceDtEmojis","replaceList","textContent","length","regexp","RegExp","join","items","split","filter","item","trim","map","h","code","class","searchVNodes","VNode","searchCodes","children","innerHTML","Array","isArray","VNodeChild","replaceVueComponentVNodeContent","shortcodes","findShortCodes","emojis","findEmojis","render","defaultSlotContent","$slots"],"mappings":";;;;;;;;AAUA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IACVC;AAAAA,EACD;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,aAAa;AAAA,MACXC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,MAAM;AAAA,MACJH,MAAMC;AAAAA,MACNC,SAAS;AAAA,MACTE,WAAYC,OAAMC,OAAOC,KAAKC,mBAAmB,EAAEC,SAASJ,CAAC;AAAA,IAC/D;AAAA,EACD;AAAA,EAEDK,OAAQ;AACN,WAAO;AAAA,MACLC,kBAAkB;AAAA;EAErB;AAAA,EAED,MAAMC,UAAW;AACf,SAAKD,mBAAmB;AAAA,EACzB;AAAA,EAEDE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKPC,gBAAiBC,aAAaC,aAAa;AACzC,UAAI,CAACD,YAAYE;AAAQ,eAAOD;AAEhC,YAAME,SAAS,IAAIC,OAAO,IAAIJ,YAAYK,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAMC,QAAQL,YAAYM,MAAMJ,MAAM;AAEtC,aAAOG,MACJE,OAAOC,UAAQA,KAAKC,KAAI,MAAO,EAAE,EACjCC,IAAKF,UAAS;AACb,YAAIT,YAAYN,SAASe,IAAI,GAAG;AAC9B,iBAAOG,EAAE9B,SAAS;AAAA,YAAE+B,MAAMJ;AAAAA,YAAMrB,MAAM,KAAKA;AAAAA,UAAK,CAAC;AAAA,QACnD;AACA,eAAOwB,EAAE,QAAQ;AAAA,UAAEE,OAAO;AAAA,QAA8B,GAAEL,IAAI;AAAA,MAChE,CAAC;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODM,aAAcC,OAAO;;AACnB,UAAI,OAAOA,UAAU;AAAU,eAAO,KAAKC,YAAYD,KAAK;AAC5D,UAAI,OAAOA,MAAM/B,SAAS;AAAU,eAAO,KAAKgC,YAAYD,MAAME,QAAQ;AAC1E,WAAIF,WAAMjC,UAANiC,mBAAaG;AAAW,eAAO,KAAKJ,aAAaC,MAAMjC,MAAMoC,SAAS;AAE1E,YAAMD,WAAWE,MAAMC,QAAQL,MAAME,QAAQ,IAAIF,MAAME,WAAW,CAACF,MAAME,QAAQ;AACjF,aAAON,EAAEI,MAAM/B,MAAM+B,MAAMjC,OAAOmC,SAASP,IAAIW,gBAAc,KAAKP,aAAaO,UAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGDC,gCAAiCP,OAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODC,YAAahB,aAAa;AACxB,YAAMuB,aAAaC,eAAexB,WAAW;AAC7C,YAAMyB,SAASC,WAAW1B,WAAW;AAErC,YAAMD,cAAc,CAAC,GAAGwB,YAAY,GAAGE,MAAM;AAC7C,UAAI1B,YAAYE,WAAW;AAAG,eAAOD;AACrC,aAAO,KAAKF,gBAAgBC,aAAaC,WAAW;AAAA,IACtD;AAAA,EACD;AAAA,EAED2B,SAAU;AACR,UAAMC,qBAAqB,KAAKC,OAAO3C,UAAU,KAAK2C,OAAO3C,QAAU,IAAE;AACzE,WAAOyB,EACL,KAAK5B,aACL;AAAA,MACE,WAAW;AAAA,MACX8B,OAAO;AAAA,IACR,GACD,KAAKlB,mBACDiC,qBACAA,mBAAmBlB,IAAIK,WAAS,KAAKD,aAAaC,KAAK,CAAC,CAC9D;AAAA,EACF;AACF;"}

package/dist/lib/emoji.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const common_emoji = require("../chunks/index-lu2o2f4r.js");
+const common_emoji = require("../chunks/index-fEp0B-5Z.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_skeleton = require("./skeleton.cjs");
-const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
+const icon_constants = require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-emojis");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main = {
@@ -131,27 +131,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_skeleton = vue.resolveComponent("dt-skeleton");
   return vue.openBlock(), vue.createElementBlock("span", {
     class: vue.normalizeClass(["d-emoji d-icon", $options.emojiSize])
-  }, [
-    vue.withDirectives(vue.createVNode(_component_dt_skeleton, {
-      offset: 0,
-      class: vue.normalizeClass(["d-icon", $options.emojiSize]),
-      "shape-option": { shape: "circle", size: "100%" }
-    }, null, 8, ["class"]), [
-      [vue.vShow, $data.imgLoading && $props.showSkeleton]
-    ]),
-    vue.withDirectives(vue.createElementVNode("img", {
-      ref: "emojiImg",
-      class: vue.normalizeClass(["d-icon", $options.emojiSize, $props.imgClass]),
-      "aria-label": $options.emojiLabel,
-      alt: $options.emojiAlt,
-      title: $options.emojiLabel,
-      src: $options.emojiSrc,
-      onLoad: _cache[0] || (_cache[0] = (...args) => $options.imageLoaded && $options.imageLoaded(...args)),
-      onError: _cache[1] || (_cache[1] = (...args) => $options.imageErrored && $options.imageErrored(...args))
-    }, null, 42, _hoisted_1), [
-      [vue.vShow, !$data.imgLoading]
-    ])
-  ], 2);
+  }, [vue.withDirectives(vue.createVNode(_component_dt_skeleton, {
+    offset: 0,
+    class: vue.normalizeClass(["d-icon", $options.emojiSize]),
+    "shape-option": {
+      shape: "circle",
+      size: "100%"
+    }
+  }, null, 8, ["class"]), [[vue.vShow, $data.imgLoading && $props.showSkeleton]]), vue.withDirectives(vue.createElementVNode("img", {
+    ref: "emojiImg",
+    class: vue.normalizeClass(["d-icon", $options.emojiSize, $props.imgClass]),
+    "aria-label": $options.emojiLabel,
+    alt: $options.emojiAlt,
+    title: $options.emojiLabel,
+    src: $options.emojiSrc,
+    onLoad: _cache[0] || (_cache[0] = (...args) => $options.imageLoaded && $options.imageLoaded(...args)),
+    onError: _cache[1] || (_cache[1] = (...args) => $options.imageErrored && $options.imageErrored(...args))
+  }, null, 42, _hoisted_1), [[vue.vShow, !$data.imgLoading]])], 2);
 }
 const DtEmoji = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtEmoji = DtEmoji;

package/dist/lib/emoji.cjs.map

@@ -1 +1 @@
-{"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","_createElementBlock","_createVNode","_vShow","_createElementVNode","_normalizeClass"],"mappings":"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"}
+{"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":["_sfc_main","name","components","DtSkeleton","props","code","type","String","required","size","default","validator","t","Object","keys","ICON_SIZE_MODIFIERS","includes","imgClass","Array","ariaLabel","showSkeleton","Boolean","data","emojiData","imgLoading","computed","emojiDataValid","emojiSrc","custom","customEmojiAssetUrl","key","extension","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","emojiAlt","undefined","unicode_output","stringToUnicode","emojiLabel","emojiSize","watch","handler","getEmojiData","immediate","methods","codeToEmojiData","imageLoaded","imageErrored","_createElementBlock","class","$options","_createVNode","_component_dt_skeleton","offset","shape","_vShow","$data","$props","_createElementVNode","ref","_normalizeClass","alt","title","src","onLoad","args","onError"],"mappings":"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"}

package/dist/lib/emoji.js

@@ -1,8 +1,8 @@
-import { customEmojiAssetUrl, emojiImageUrlSmall, emojiFileExtensionSmall, emojiImageUrlLarge, emojiFileExtensionLarge, stringToUnicode, codeToEmojiData } from "../chunks/index-GVD15GIB.js";
+import { customEmojiAssetUrl, emojiImageUrlSmall, emojiFileExtensionSmall, emojiImageUrlLarge, emojiFileExtensionLarge, stringToUnicode, codeToEmojiData } from "../chunks/index-dfdrE-3M.js";
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createVNode, vShow, createElementVNode } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtSkeleton } from "./skeleton.js";
-import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-Dy4MEUJL.js";
+import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-emojis";
 import "@dialpad/dialtone-icons/icons.json";
 const _sfc_main = {
@@ -129,27 +129,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_skeleton = resolveComponent("dt-skeleton");
   return openBlock(), createElementBlock("span", {
     class: normalizeClass(["d-emoji d-icon", $options.emojiSize])
-  }, [
-    withDirectives(createVNode(_component_dt_skeleton, {
-      offset: 0,
-      class: normalizeClass(["d-icon", $options.emojiSize]),
-      "shape-option": { shape: "circle", size: "100%" }
-    }, null, 8, ["class"]), [
-      [vShow, $data.imgLoading && $props.showSkeleton]
-    ]),
-    withDirectives(createElementVNode("img", {
-      ref: "emojiImg",
-      class: normalizeClass(["d-icon", $options.emojiSize, $props.imgClass]),
-      "aria-label": $options.emojiLabel,
-      alt: $options.emojiAlt,
-      title: $options.emojiLabel,
-      src: $options.emojiSrc,
-      onLoad: _cache[0] || (_cache[0] = (...args) => $options.imageLoaded && $options.imageLoaded(...args)),
-      onError: _cache[1] || (_cache[1] = (...args) => $options.imageErrored && $options.imageErrored(...args))
-    }, null, 42, _hoisted_1), [
-      [vShow, !$data.imgLoading]
-    ])
-  ], 2);
+  }, [withDirectives(createVNode(_component_dt_skeleton, {
+    offset: 0,
+    class: normalizeClass(["d-icon", $options.emojiSize]),
+    "shape-option": {
+      shape: "circle",
+      size: "100%"
+    }
+  }, null, 8, ["class"]), [[vShow, $data.imgLoading && $props.showSkeleton]]), withDirectives(createElementVNode("img", {
+    ref: "emojiImg",
+    class: normalizeClass(["d-icon", $options.emojiSize, $props.imgClass]),
+    "aria-label": $options.emojiLabel,
+    alt: $options.emojiAlt,
+    title: $options.emojiLabel,
+    src: $options.emojiSrc,
+    onLoad: _cache[0] || (_cache[0] = (...args) => $options.imageLoaded && $options.imageLoaded(...args)),
+    onError: _cache[1] || (_cache[1] = (...args) => $options.imageErrored && $options.imageErrored(...args))
+  }, null, 42, _hoisted_1), [[vShow, !$data.imgLoading]])], 2);
 }
 const DtEmoji = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/lib/emoji.js.map

@@ -1 +1 @@
-{"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":["_createElementBlock","_createVNode","_vShow","_createElementVNode","_normalizeClass"],"mappings":"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"}
+{"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":["_sfc_main","name","components","DtSkeleton","props","code","type","String","required","size","default","validator","t","Object","keys","ICON_SIZE_MODIFIERS","includes","imgClass","Array","ariaLabel","showSkeleton","Boolean","data","emojiData","imgLoading","computed","emojiDataValid","emojiSrc","custom","customEmojiAssetUrl","key","extension","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","emojiAlt","undefined","unicode_output","stringToUnicode","emojiLabel","emojiSize","watch","handler","getEmojiData","immediate","methods","codeToEmojiData","imageLoaded","imageErrored","_createElementBlock","class","$options","_createVNode","_component_dt_skeleton","offset","shape","_vShow","$data","$props","_createElementVNode","ref","_normalizeClass","alt","title","src","onLoad","args","onError"],"mappings":"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"}