@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/emoji-row.js

@@ -1,29 +1,31 @@
-import { resolveComponent as i, openBlock as s, createElementBlock as a, Fragment as w, renderList as S, createVNode as r, withCtx as n, normalizeClass as k, createElementVNode as c, toDisplayString as _, createTextVNode as v, renderSlot as x } from "vue";
-import { _ as D } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtTooltip as E } from "./tooltip.js";
-import { DtButton as b } from "./button.js";
-import { D as C } from "../chunks/index-mRmwpCBG.js";
-import { DtEmojiTextWrapper as T } from "./emoji-text-wrapper.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import { resolveComponent, openBlock, createElementBlock, Fragment, renderList, createVNode, withCtx, normalizeClass, createElementVNode, toDisplayString, createTextVNode, renderSlot } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+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-Qkpb0yh2.js";
 import "tippy.js";
-import "./utils.js";
-import "./constants.js";
+import "../common/utils.js";
+import "../common/constants.js";
 import "./lazy-show.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
+import "../common/emoji.js";
 import "emoji-regex";
 import "@dialpad/dialtone-emojis";
 import "./skeleton.js";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const y = [
+const REACTIONS_ATTRIBUTES = [
   "emojiUnicodeOrShortname",
   "isSelected",
   "ariaLabel",
   "tooltip",
   "num"
-], O = {
+];
+const _sfc_main = {
   name: "DtRecipeEmojiRow",
-  components: { DtTooltip: E, DtButton: b, DtEmoji: C, DtEmojiTextWrapper: T },
+  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper: _sfc_main$1 },
   mixins: [],
   props: {
     /**
@@ -32,11 +34,13 @@ const y = [
     reactions: {
       type: Array,
       default: () => [],
-      validator: (o) => {
-        for (const t of o)
-          if (!y.every((p) => t[p] !== void 0))
-            return !1;
-        return !0;
+      validator: (reactions) => {
+        for (const reaction of reactions) {
+          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== void 0);
+          if (!validInput)
+            return false;
+        }
+        return true;
       }
     }
   },
@@ -45,71 +49,81 @@ const y = [
     "emoji-hovered"
   ],
   methods: {
-    emojiClicked(o) {
-      this.$emit("emoji-clicked", o.emojiUnicodeOrShortname);
+    emojiClicked(reaction) {
+      this.$emit("emoji-clicked", reaction.emojiUnicodeOrShortname);
     },
-    emojiHovered(o, t) {
+    emojiHovered(reaction, state) {
       this.$emit("emoji-hovered", {
-        reaction: o.emojiUnicodeOrShortname,
-        state: t
+        reaction: reaction.emojiUnicodeOrShortname,
+        state
       });
     }
   }
-}, R = { class: "dt-emoji-row" }, $ = ["reaction"], U = { "aria-hidden": "true" }, z = { class: "dt-emoji-row__emoji" }, B = { class: "dt-emoji-row__reaction-number" };
-function I(o, t, d, p, N, l) {
-  const j = i("dt-emoji-text-wrapper"), u = i("dt-emoji"), f = i("dt-button"), h = i("dt-tooltip");
-  return s(), a("span", R, [
-    (s(!0), a(w, null, S(d.reactions, (e) => (s(), a("span", {
-      key: e.unicodeOutput,
-      reaction: e
-    }, [
-      r(h, {
-        class: "dt-emoji-row__tooltip",
-        "content-class": "d-wmx464",
-        sticky: "popper",
-        onShown: (m) => l.emojiHovered(e, m)
-      }, {
-        anchor: n(({ attrs: m }) => [
-          r(f, {
-            importance: "clear",
-            size: "sm",
-            "data-qa": "feed-item-reaction-button",
-            class: k(["dt-emoji-row__reaction", e.isSelected ? "dt-emoji-row__reaction--selected" : ""]),
-            "aria-label": e.ariaLabel,
-            attrs: m,
-            onClick: (A) => l.emojiClicked(e)
-          }, {
-            default: n(() => [
-              c("span", z, [
-                r(u, {
-                  size: "200",
-                  code: e.emojiUnicodeOrShortname
-                }, null, 8, ["code"])
-              ]),
-              c("span", B, _(e.num), 1)
-            ]),
-            _: 2
-          }, 1032, ["class", "aria-label", "attrs", "onClick"])
-        ]),
-        default: n(() => [
-          c("span", U, [
-            r(j, { size: "200" }, {
-              default: n(() => [
-                v(_(e.tooltip), 1)
+};
+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" };
+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
-            }, 1024)
-          ])
-        ]),
-        _: 2
-      }, 1032, ["onShown"])
-    ], 8, $))), 128)),
-    x(o.$slots, "picker")
+            }, 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 oe = /* @__PURE__ */ D(O, [["render", I]]);
+const emoji_row = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  oe as DtRecipeEmojiRow,
-  y as REACTIONS_ATTRIBUTES
+  emoji_row as DtRecipeEmojiRow,
+  REACTIONS_ATTRIBUTES
 };
 //# sourceMappingURL=emoji-row.js.map

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":["REACTIONS_ATTRIBUTES","_sfc_main","DtTooltip","DtButton","DtEmoji","DtEmojiTextWrapper","reactions","reaction","attribute","state","_hoisted_1","_hoisted_3","_hoisted_4","_hoisted_5","_openBlock","_createElementBlock","_Fragment","_renderList","$props","_createVNode","_component_dt_tooltip","shown","$options","_withCtx","attrs","_component_dt_button","_normalizeClass","$event","_createElementVNode","_component_dt_emoji","_toDisplayString","_component_dt_emoji_text_wrapper","_createTextVNode","_renderSlot","_ctx"],"mappings":";;;;;;;;;;;;;;;;;AAAY,MAACA,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GC+CKC,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,WAAAC,GAAW,UAAAC,GAAU,SAAAC,GAASC,oBAAAA,EAAoB;AAAA,EAEhE,QAAQ,CAAE;AAAA,EAEV,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,WAAW,CAACC,MAAc;AACxB,mBAAWC,KAAYD;AAErB,cAAI,CADeN,EAAqB,MAAM,CAACQ,MAAcD,EAASC,CAAS,MAAM,MAAkB;AACtF,mBAAO;AAE1B,eAAO;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL;AAAA,IACA;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACP,aAAcD,GAAU;AACtB,WAAK,MAAM,iBAAiBA,EAAS,uBAAuB;AAAA,IAC7D;AAAA,IAED,aAAcA,GAAUE,GAAO;AAC7B,WAAK,MAAM,iBAAiB;AAAA,QAC1B,UAAUF,EAAS;AAAA,QACnB,OAAAE;AAAA,MACF,CAAC;AAAA,IACF;AAAA,EACF;AACH,GA7FQC,IAAA,EAAA,OAAM,eAAc,qBAYdC,IAAA,EAAA,eAAY,OAAM,GAedC,IAAA,EAAA,OAAM,sBAAqB,GAM3BC,IAAA,EAAA,OAAM,gCAA+B;;;AAjCrD,SAAAC,EAAA,GAAAC,EA0CO,QA1CPL,GA0CO;AAAA,YAzCLK,EAsCOC,GAAA,MAAAC,EArCcC,EAAS,WAAA,CAArBX,YADTQ,EAsCO,QAAA;AAAA,MApCJ,KAAKR,EAAS;AAAA,MACd,UAAUA;AAAA;MAEXY,EAgCaC,GAAA;AAAA,QA/BX,OAAM;AAAA,QACN,iBAAc;AAAA,QACd,QAAO;AAAA,QACN,UAAQC,MAAUC,eAAaf,GAAUc,CAAK;AAAA;QAOpC,QAAME,EACf,CAkBY,EAnBO,OAAAC,QAAK;AAAA,UACxBL,EAkBYM,GAAA;AAAA,YAjBV,YAAW;AAAA,YACX,MAAK;AAAA,YACL,WAAQ;AAAA,YACP,OAAKC,EAAA,CAAA,0BAA6BnB,EAAS,aAAU,qCAAA,EAAA,CAAA;AAAA,YACrD,cAAYA,EAAS;AAAA,YACrB,OAAOiB;AAAA,YACP,SAAK,CAAAG,MAAEL,EAAY,aAACf,CAAQ;AAAA;uBAE7B,MAKO;AAAA,cALPqB,EAKO,QALPhB,GAKO;AAAA,gBAJLO,EAGEU,GAAA;AAAA,kBAFA,MAAK;AAAA,kBACJ,MAAMtB,EAAS;AAAA;;cAGpBqB,EAEO,QAFPf,GACKiB,EAAAvB,EAAS,GAAG,GAAA,CAAA;AAAA;;;;mBAtBrB,MAIO;AAAA,UAJPqB,EAIO,QAJPjB,GAIO;AAAA,YAHLQ,EAEwBY,GAAA,EAFD,MAAK,MAAK,GAAA;AAAA,yBAC/B,MAAsB;AAAA,gBAAnBC,EAAAF,EAAAvB,EAAS,OAAO,GAAA,CAAA;AAAA;;;;;;;;IA2B3B0B,EAAsBC,EAAA,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":["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;;;"}

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

@@ -1,2 +1,103 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../chunks/index-IBtQ5jRJ.js"),n=require("vue"),a=require("../chunks/icon_constants-2S_OSQ1t.js");require("emoji-regex");require("@dialpad/dialtone-emojis");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./skeleton.cjs");require("@dialpad/dialtone-icons/icons.json");const c={name:"DtEmojiTextWrapper",components:{DtEmoji:i.D},props:{elementType:{type:String,default:"div"},size:{type:String,default:"500",validator:e=>Object.keys(a.I).includes(e)}},data(){return{loadingEmojiJson:!0}},async created(){this.loadingEmojiJson=!1},methods:{replaceDtEmojis(e,r){const s=new RegExp(`(${e.join("|")})`,"g");return r.split(s).map(o=>e.includes(o)?n.h(i.D,{size:this.size,code:o}):n.h("span",o))},searchVNodes(e){var s;if(typeof e=="string")return this.searchCodes(e);if(typeof e.type=="symbol")return this.searchCodes(e.children);if((s=e.props)!=null&&s.innerHTML)return this.searchVNodes(e.props.innerHTML);const r=Array.isArray(e.children)?e.children:[e.children];return n.h(e.type,e.props,r.map(t=>this.searchVNodes(t)))},replaceVueComponentVNodeContent(e){},searchCodes(e){const r=i.p(e),s=i.r(e),t=[...r,...s];return t.length===0?e:this.replaceDtEmojis(t,e)}},render(){const e=this.$slots.default?this.$slots.default():[];return n.h(this.elementType,{"data-qa":"emoji-text-wrapper",class:"d-emoji-text-wrapper"},this.loadingEmojiJson?e:e.map(r=>this.searchVNodes(r)))}};exports.DtEmojiTextWrapper=c;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const common_emoji = require("../common/emoji.cjs");
+const vue = require("vue");
+const icon_constants = require("../chunks/icon_constants-QYpmdE0R.js");
+const lib_emoji = require("./emoji.cjs");
+require("emoji-regex");
+require("@dialpad/dialtone-emojis");
+require("@dialpad/dialtone-icons/icons.json");
+require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+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 vue.h(lib_emoji.DtEmoji, { size: this.size, code: item });
+        }
+        return vue.h("span", item);
+      });
+    },
+    /**
+     * Recursively search the Vue virtual DOM to find text
+     * @param VNode
+     * @returns {VNode|*}
+     */
+    searchVNodes(VNode) {
+      var _a;
+      if (typeof VNode === "string")
+        return this.searchCodes(VNode);
+      if (typeof VNode.type === "symbol")
+        return this.searchCodes(VNode.children);
+      if ((_a = VNode.props) == null ? void 0 : _a.innerHTML)
+        return this.searchVNodes(VNode.props.innerHTML);
+      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];
+      return vue.h(VNode.type, VNode.props, children.map((VNodeChild) => this.searchVNodes(VNodeChild)));
+    },
+    // 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() {
+    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))
+    );
+  }
+};
+exports.DtEmojiTextWrapper = _sfc_main;
 //# 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 { 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      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 h(DtEmoji, { size: this.size, code: item });\n        }\n        return h('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 (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","DtEmoji","t","ICON_SIZE_MODIFIERS","replaceList","textContent","regexp","item","h","VNode","_a","children","VNodeChild","shortcodes","findShortCodes","emojis","findEmojis","defaultSlotContent"],"mappings":"gYAUK,MAAAA,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,QAAAC,EAAO,CACR,EAED,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,KACV,EAKD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,GAAmB,EAAE,SAASD,CAAC,CAC9D,CACF,EAED,MAAQ,CACN,MAAO,CACL,iBAAkB,GAErB,EAED,MAAM,SAAW,CACf,KAAK,iBAAmB,EACzB,EAED,QAAS,CAKP,gBAAiBE,EAAaC,EAAa,CACzC,MAAMC,EAAS,IAAI,OAAO,IAAIF,EAAY,KAAK,GAAG,CAAC,IAAK,GAAG,EAE3D,OADcC,EAAY,MAAMC,CAAM,EACzB,IAAKC,GACZH,EAAY,SAASG,CAAI,EACpBC,EAAC,EAACP,EAAO,EAAE,CAAE,KAAM,KAAK,KAAM,KAAMM,CAAG,CAAG,EAE5CC,EAAC,EAAC,OAAQD,CAAI,CACtB,CACF,EAOD,aAAcE,EAAO,OACnB,GAAI,OAAOA,GAAU,SAAU,OAAO,KAAK,YAAYA,CAAK,EAC5D,GAAI,OAAOA,EAAM,MAAS,SAAU,OAAO,KAAK,YAAYA,EAAM,QAAQ,EAC1E,IAAIC,EAAAD,EAAM,QAAN,MAAAC,EAAa,UAAW,OAAO,KAAK,aAAaD,EAAM,MAAM,SAAS,EAE1E,MAAME,EAAW,MAAM,QAAQF,EAAM,QAAQ,EAAIA,EAAM,SAAW,CAACA,EAAM,QAAQ,EACjF,OAAOD,EAAC,EAACC,EAAM,KAAMA,EAAM,MAAOE,EAAS,IAAIC,GAAc,KAAK,aAAaA,CAAU,CAAC,CAAC,CAC5F,EAGD,gCAAiCH,EAAO,CAEvC,EAOD,YAAaJ,EAAa,CACxB,MAAMQ,EAAaC,IAAeT,CAAW,EACvCU,EAASC,IAAWX,CAAW,EAE/BD,EAAc,CAAC,GAAGS,EAAY,GAAGE,CAAM,EAC7C,OAAIX,EAAY,SAAW,EAAUC,EAC9B,KAAK,gBAAgBD,EAAaC,CAAW,CACrD,CACF,EAED,QAAU,CACR,MAAMY,EAAqB,KAAK,OAAO,QAAU,KAAK,OAAO,QAAU,EAAE,GACzE,OAAOT,EAAC,EACN,KAAK,YACL,CACE,UAAW,qBACX,MAAO,sBACR,EACD,KAAK,iBACDS,EACAA,EAAmB,IAAIR,GAAS,KAAK,aAAaA,CAAK,CAAC,EAE/D,CACH"}
+{"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      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 h(DtEmoji, { size: this.size, code: item });\n        }\n        return h('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 (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,YAAM,SAAS,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAM,QAAQ,YAAY,MAAM,MAAM;AACtC,aAAO,MAAM,IAAI,CAAC,SAAS;AACzB,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAOC,IAAC,EAACF,UAAO,SAAE,EAAE,MAAM,KAAK,MAAM,MAAM,KAAG,CAAG;AAAA,QACnD;AACA,eAAOE,IAAC,EAAC,QAAQ,IAAI;AAAA,MACvB,CAAC;AAAA,IACF;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;;"}

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

@@ -1,15 +1,16 @@
-import { D as n, p, r as a } from "../chunks/index-mRmwpCBG.js";
-import { h as i } from "vue";
-import { I as c } from "../chunks/icon_constants-OpYAAKwF.js";
+import { findShortCodes, findEmojis } from "../common/emoji.js";
+import { h } from "vue";
+import { ICON_SIZE_MODIFIERS } from "../chunks/icon_constants-Dy4MEUJL.js";
+import { DtEmoji } from "./emoji.js";
 import "emoji-regex";
 import "@dialpad/dialtone-emojis";
-import "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import "./skeleton.js";
 import "@dialpad/dialtone-icons/icons.json";
-const E = {
+import "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import "./skeleton.js";
+const _sfc_main = {
   name: "DtEmojiTextWrapper",
   components: {
-    DtEmoji: n
+    DtEmoji
   },
   props: {
     /**
@@ -25,68 +26,78 @@ const E = {
     size: {
       type: String,
       default: "500",
-      validator: (e) => Object.keys(c).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, r) {
-      const s = new RegExp(`(${e.join("|")})`, "g");
-      return r.split(s).map((o) => e.includes(o) ? i(n, { size: this.size, code: o }) : i("span", o));
+    replaceDtEmojis(replaceList, textContent) {
+      const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
+      const split = textContent.split(regexp);
+      return split.map((item) => {
+        if (replaceList.includes(item)) {
+          return h(DtEmoji, { size: this.size, code: item });
+        }
+        return h("span", item);
+      });
     },
     /**
      * Recursively search the Vue virtual DOM to find text
      * @param VNode
      * @returns {VNode|*}
      */
-    searchVNodes(e) {
-      var s;
-      if (typeof e == "string")
-        return this.searchCodes(e);
-      if (typeof e.type == "symbol")
-        return this.searchCodes(e.children);
-      if ((s = e.props) != null && s.innerHTML)
-        return this.searchVNodes(e.props.innerHTML);
-      const r = Array.isArray(e.children) ? e.children : [e.children];
-      return i(e.type, e.props, r.map((t) => this.searchVNodes(t)));
+    searchVNodes(VNode) {
+      var _a;
+      if (typeof VNode === "string")
+        return this.searchCodes(VNode);
+      if (typeof VNode.type === "symbol")
+        return this.searchCodes(VNode.children);
+      if ((_a = VNode.props) == null ? void 0 : _a.innerHTML)
+        return this.searchVNodes(VNode.props.innerHTML);
+      const children = Array.isArray(VNode.children) ? VNode.children : [VNode.children];
+      return h(VNode.type, VNode.props, children.map((VNodeChild) => this.searchVNodes(VNodeChild)));
     },
     // 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 r = p(e), s = a(e), t = [...r, ...s];
-      return t.length === 0 ? e : this.replaceDtEmojis(t, 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() {
-    const e = this.$slots.default ? this.$slots.default() : [];
-    return i(
+    const defaultSlotContent = this.$slots.default ? this.$slots.default() : [];
+    return h(
       this.elementType,
       {
         "data-qa": "emoji-text-wrapper",
         class: "d-emoji-text-wrapper"
       },
-      this.loadingEmojiJson ? e : e.map((r) => this.searchVNodes(r))
+      this.loadingEmojiJson ? defaultSlotContent : defaultSlotContent.map((VNode) => this.searchVNodes(VNode))
     );
   }
 };
 export {
-  E as DtEmojiTextWrapper
+  _sfc_main as 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 { 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      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 h(DtEmoji, { size: this.size, code: item });\n        }\n        return h('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 (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","DtEmoji","t","ICON_SIZE_MODIFIERS","replaceList","textContent","regexp","item","h","VNode","_a","children","VNodeChild","shortcodes","findShortCodes","emojis","findEmojis","defaultSlotContent"],"mappings":";;;;;;;;AAUK,MAAAA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,SAAAC;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,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,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,gBAAiBE,GAAaC,GAAa;AACzC,YAAMC,IAAS,IAAI,OAAO,IAAIF,EAAY,KAAK,GAAG,CAAC,KAAK,GAAG;AAE3D,aADcC,EAAY,MAAMC,CAAM,EACzB,IAAI,CAACC,MACZH,EAAY,SAASG,CAAI,IACpBC,EAAEP,GAAS,EAAE,MAAM,KAAK,MAAM,MAAMM,EAAG,CAAG,IAE5CC,EAAE,QAAQD,CAAI,CACtB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAcE,GAAO;;AACnB,UAAI,OAAOA,KAAU;AAAU,eAAO,KAAK,YAAYA,CAAK;AAC5D,UAAI,OAAOA,EAAM,QAAS;AAAU,eAAO,KAAK,YAAYA,EAAM,QAAQ;AAC1E,WAAIC,IAAAD,EAAM,UAAN,QAAAC,EAAa;AAAW,eAAO,KAAK,aAAaD,EAAM,MAAM,SAAS;AAE1E,YAAME,IAAW,MAAM,QAAQF,EAAM,QAAQ,IAAIA,EAAM,WAAW,CAACA,EAAM,QAAQ;AACjF,aAAOD,EAAEC,EAAM,MAAMA,EAAM,OAAOE,EAAS,IAAI,CAAAC,MAAc,KAAK,aAAaA,CAAU,CAAC,CAAC;AAAA,IAC5F;AAAA;AAAA,IAGD,gCAAiCH,GAAO;AAAA,IAEvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAaJ,GAAa;AACxB,YAAMQ,IAAaC,EAAeT,CAAW,GACvCU,IAASC,EAAWX,CAAW,GAE/BD,IAAc,CAAC,GAAGS,GAAY,GAAGE,CAAM;AAC7C,aAAIX,EAAY,WAAW,IAAUC,IAC9B,KAAK,gBAAgBD,GAAaC,CAAW;AAAA,IACrD;AAAA,EACF;AAAA,EAED,SAAU;AACR,UAAMY,IAAqB,KAAK,OAAO,UAAU,KAAK,OAAO,QAAU,IAAE;AACzE,WAAOT;AAAA,MACL,KAAK;AAAA,MACL;AAAA,QACE,WAAW;AAAA,QACX,OAAO;AAAA,MACR;AAAA,MACD,KAAK,mBACDS,IACAA,EAAmB,IAAI,CAAAR,MAAS,KAAK,aAAaA,CAAK,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      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 h(DtEmoji, { size: this.size, code: item });\n        }\n        return h('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 (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,YAAM,SAAS,IAAI,OAAO,IAAI,YAAY,KAAK,GAAG,CAAC,KAAK,GAAG;AAC3D,YAAM,QAAQ,YAAY,MAAM,MAAM;AACtC,aAAO,MAAM,IAAI,CAAC,SAAS;AACzB,YAAI,YAAY,SAAS,IAAI,GAAG;AAC9B,iBAAO,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,MAAM,KAAG,CAAG;AAAA,QACnD;AACA,eAAO,EAAE,QAAQ,IAAI;AAAA,MACvB,CAAC;AAAA,IACF;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;"}