@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/chunks/index-b4iXYvId.js

@@ -1,399 +0,0 @@
-import { K as E } from "./keyboard_list_navigation-F0O8nht0.js";
-import { getUniqueString as _, hasSlotContent as v } from "../lib/utils.js";
-import { resolveComponent as r, openBlock as o, createElementBlock as h, Fragment as S, renderList as H, createVNode as u, withCtx as y, renderSlot as m, normalizeClass as K, createElementVNode as I, toDisplayString as M, withKeys as l, withModifiers as a, createBlock as L, normalizeProps as R, mergeProps as b, createCommentVNode as O } from "vue";
-import { _ as f } from "./_plugin-vue_export-helper-hUChTQA_.js";
-import { DtListItem as x } from "../lib/list-item.js";
-import { DtSkeleton as w } from "../lib/skeleton.js";
-const C = {
-  name: "ComboboxLoadingList",
-  components: { DtListItem: x, DtSkeleton: w }
-}, k = {
-  class: "d-combobox__loading-list",
-  "aria-busy": "true"
-};
-function B(e, t, n, c, g, i) {
-  const d = r("dt-skeleton"), p = r("dt-list-item");
-  return o(), h("ol", k, [
-    (o(), h(S, null, H(7, (s) => u(p, {
-      key: s,
-      role: "option",
-      "navigation-type": "none"
-    }, {
-      default: y(() => [
-        u(d, {
-          "text-option": { type: "body" },
-          offset: 0
-        })
-      ]),
-      _: 2
-    }, 1024)), 64))
-  ]);
-}
-const P = /* @__PURE__ */ f(C, [["render", B]]), V = {
-  name: "ComboboxEmptyList",
-  components: { DtListItem: x },
-  props: {
-    /**
-     * Message to display when list is empty
-     */
-    message: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Additional class name for the empty list element.
-     * Can accept all of String, Object, and Array, i.e. has the
-     * same api as Vue's built-in handling of the class attribute.
-     */
-    itemClass: {
-      type: [String, Object, Array],
-      default: ""
-    }
-  }
-}, A = {
-  class: "d-combobox__empty-list",
-  "data-qa": "dt-combobox-empty-list"
-};
-function q(e, t, n, c, g, i) {
-  const d = r("dt-list-item");
-  return o(), h("ol", A, [
-    m(e.$slots, "default", {}, () => [
-      u(d, {
-        role: "option",
-        "navigation-type": "none",
-        type: "custom",
-        class: K(["dt-empty-list-item", n.itemClass])
-      }, {
-        default: y(() => [
-          I("span", null, M(n.message), 1)
-        ]),
-        _: 1
-      }, 8, ["class"])
-    ])
-  ]);
-}
-const D = /* @__PURE__ */ f(V, [["render", q]]), T = {
-  EXTRA_SMALL: "xs",
-  SMALL: "sm",
-  DEFAULT: "md",
-  LARGE: "lg",
-  EXTRA_LARGE: "xl"
-}, j = {
-  name: "DtCombobox",
-  components: {
-    ComboboxLoadingList: P,
-    ComboboxEmptyList: D
-  },
-  mixins: [
-    E({
-      indexKey: "highlightIndex",
-      idKey: "highlightId",
-      listElementKey: "getListElement",
-      afterHighlightMethod: "afterHighlight",
-      beginningOfListMethod: "beginningOfListMethod",
-      endOfListMethod: "endOfListMethod",
-      activeItemKey: "activeItemEl"
-    })
-  ],
-  props: {
-    /**
-     * String to use for the input label.
-     */
-    label: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Determines visibility of input label.
-     * @values true, false
-     */
-    labelVisible: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
-     * @values null, xs, sm, md, lg, xl
-     */
-    size: {
-      type: String,
-      default: null,
-      validator: (e) => Object.values(T).includes(e)
-    },
-    /**
-     * Description for the input
-     */
-    description: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Sets an ID on the list element of the component. Used by several aria attributes
-     * as well as when deriving the IDs for each item.
-     */
-    listId: {
-      type: String,
-      default() {
-        return _();
-      }
-    },
-    /**
-     * A method that will be called when the selection goes past the beginning of the list.
-     */
-    onBeginningOfList: {
-      type: Function,
-      default: null
-    },
-    /**
-     * A method that will be called when the selection goes past the end of the list.
-     */
-    onEndOfList: {
-      type: Function,
-      default: null
-    },
-    /**
-     * Determines when to show the list element and also controls the aria-expanded attribute.
-     * @values true, false
-     */
-    showList: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * If the list is rendered outside the component, like when using popover as the list wrapper.
-     * @values true, false
-     */
-    listRenderedOutside: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Determines when to show the skeletons and also controls aria-busy attribute.
-     * @values true, false
-     */
-    loading: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
-     * @values true, false
-     */
-    emptyList: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Message to show when the list is empty
-     */
-    emptyStateMessage: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Additional class name for the empty list element.
-     * Can accept all of String, Object, and Array, i.e. has the
-     * same api as Vue's built-in handling of the class attribute.
-     */
-    emptyStateClass: {
-      type: [String, Object, Array],
-      default: ""
-    },
-    /**
-     * Programmatically click on the active list item element when a selection
-     * comes from keyboard navigation, i.e. pressing the "Enter" key.
-     * @values true, false
-     */
-    clickOnSelect: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    /**
-     * Event fired when item selected
-     *
-     * @event select
-     * @type {Number}
-     */
-    "select",
-    /**
-     * Event fired when pressing escape
-     *
-     * @event escape
-     */
-    "escape",
-    /**
-     * Event fired when the highlight changes
-     *
-     * @event highlight
-     * @type {Number}
-     */
-    "highlight",
-    /**
-     * Event fired when list is shown or hidden
-     *
-     * @event opened
-     * @type {Boolean}
-     */
-    "opened"
-  ],
-  data() {
-    return {
-      // If the list is rendered at the root, rather than as a child
-      // of this component, this is the ref to that dom element. Set
-      // by the onOpen method.
-      outsideRenderedListRef: null,
-      hasSlotContent: v
-    };
-  },
-  computed: {
-    inputProps() {
-      return {
-        label: this.label,
-        labelVisible: this.labelVisible,
-        size: this.size,
-        description: this.description,
-        role: "combobox",
-        "aria-label": this.label,
-        "aria-expanded": this.showList.toString(),
-        "aria-owns": this.listId,
-        "aria-haspopup": "listbox",
-        "aria-activedescendant": this.activeItemId,
-        "aria-controls": this.listId
-      };
-    },
-    listProps() {
-      return {
-        role: "listbox",
-        id: this.listId,
-        // The list has to be positioned relatively so that the auto-scroll can
-        // calculate the correct offset for the list items.
-        class: "d-ps-relative",
-        "aria-label": this.label
-      };
-    },
-    beginningOfListMethod() {
-      return this.onBeginningOfList || this.jumpToEnd;
-    },
-    endOfListMethod() {
-      return this.onEndOfList || this.jumpToBeginning;
-    },
-    activeItemId() {
-      if (!(!this.showList || this.highlightIndex < 0 || this.loading))
-        return this.highlightId;
-    },
-    activeItemEl() {
-      return this.highlightId ? this.getListElement().querySelector("#" + this.highlightId) : "";
-    }
-  },
-  watch: {
-    showList(e) {
-      this.listRenderedOutside || (this.setInitialHighlightIndex(), this.$emit("opened", e)), !e && this.outsideRenderedListRef && (this.outsideRenderedListRef.removeEventListener("mousemove", this.onMouseHighlight), this.outsideRenderedListRef = null);
-    },
-    loading(e) {
-      this.$nextTick(() => {
-        this.setInitialHighlightIndex();
-      });
-    },
-    $props: {
-      deep: !0,
-      immediate: !0,
-      handler() {
-        this.validateEmptyListProps();
-      }
-    }
-  },
-  created() {
-    this.validateEmptyListProps();
-  },
-  methods: {
-    onMouseHighlight(e) {
-      if (this.loading)
-        return;
-      const t = e.target.closest("li");
-      t && this.highlightId !== t.id && this.setHighlightId(t.id);
-    },
-    getListElement() {
-      var e;
-      return this.outsideRenderedListRef ?? ((e = this.$refs.listWrapper) == null ? void 0 : e.querySelector(`#${this.listId}`));
-    },
-    clearHighlightIndex() {
-      this.showList && this.setHighlightIndex(-1);
-    },
-    afterHighlight() {
-      this.loading || this.$emit("highlight", this.highlightIndex);
-    },
-    onEnterKey() {
-      var e;
-      this.loading || this.emptyList || this.highlightIndex >= 0 && (this.$emit("select", this.highlightIndex), this.clickOnSelect && ((e = this.activeItemEl) == null || e.click()));
-    },
-    onEscapeKey() {
-      this.$emit("escape");
-    },
-    onOpen(e, t) {
-      var n;
-      this.outsideRenderedListRef = t, (n = this.outsideRenderedListRef) == null || n.addEventListener("mousemove", this.onMouseHighlight), this.$emit("opened", e), e && this.setInitialHighlightIndex();
-    },
-    onKeyValidation(e, t) {
-      !this.showList || !this.getListElement() || this[t](e);
-    },
-    setInitialHighlightIndex() {
-      this.showList && this.$nextTick(() => {
-        this.setHighlightIndex(this.loading ? -1 : 0);
-      });
-    },
-    validateEmptyListProps() {
-      this.$slots.emptyListItem || (this.emptyList && !this.emptyStateMessage || !this.emptyList && this.emptyStateMessage) && console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
-      empty message.`);
-    }
-  }
-}, z = { "data-qa": "dt-combobox-input-wrapper" };
-function F(e, t, n, c, g, i) {
-  const d = r("combobox-loading-list"), p = r("combobox-empty-list");
-  return o(), h("div", {
-    onKeydown: [
-      t[3] || (t[3] = l(a((s) => i.onKeyValidation(s, "onEscapeKey"), ["stop"]), ["esc"])),
-      t[4] || (t[4] = l(a((s) => i.onKeyValidation(s, "onEnterKey"), ["exact"]), ["enter"])),
-      t[5] || (t[5] = l(a((s) => i.onKeyValidation(s, "onUpKey"), ["stop", "prevent"]), ["up"])),
-      t[6] || (t[6] = l(a((s) => i.onKeyValidation(s, "onDownKey"), ["stop", "prevent"]), ["down"])),
-      t[7] || (t[7] = l(a((s) => i.onKeyValidation(s, "onHomeKey"), ["stop", "prevent"]), ["home"])),
-      t[8] || (t[8] = l(a((s) => i.onKeyValidation(s, "onEndKey"), ["stop", "prevent"]), ["end"]))
-    ]
-  }, [
-    I("div", z, [
-      m(e.$slots, "input", { inputProps: i.inputProps })
-    ]),
-    n.showList ? (o(), h("div", {
-      key: 0,
-      ref: "listWrapper",
-      "data-qa": "dt-combobox-list-wrapper",
-      onMouseleave: t[0] || (t[0] = (...s) => i.clearHighlightIndex && i.clearHighlightIndex(...s)),
-      onFocusout: t[1] || (t[1] = (...s) => i.clearHighlightIndex && i.clearHighlightIndex(...s)),
-      onMousemoveCapture: t[2] || (t[2] = (...s) => i.onMouseHighlight && i.onMouseHighlight(...s))
-    }, [
-      n.loading && !n.listRenderedOutside ? (o(), L(d, R(b({ key: 0 }, i.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || g.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (o(), L(p, b({ key: 1 }, i.listProps, {
-        message: n.emptyStateMessage,
-        "item-class": n.emptyStateClass
-      }), {
-        default: y(() => [
-          m(e.$slots, "emptyListItem")
-        ]),
-        _: 3
-      }, 16, ["message", "item-class"])) : m(e.$slots, "list", {
-        key: 2,
-        listProps: i.listProps,
-        opened: i.onOpen,
-        clearHighlightIndex: i.clearHighlightIndex
-      })
-    ], 544)) : O("", !0)
-  ], 32);
-}
-const Z = /* @__PURE__ */ f(j, [["render", F]]);
-export {
-  P as C,
-  Z as D,
-  T as L,
-  D as a
-};
-//# sourceMappingURL=index-b4iXYvId.js.map

package/dist/chunks/index-mRmwpCBG.js

@@ -1,256 +0,0 @@
-import _ from "emoji-regex";
-import { emojisIndexed as L } from "@dialpad/dialtone-emojis";
-import { resolveComponent as k, openBlock as b, createElementBlock as v, withDirectives as c, createVNode as C, normalizeClass as u, vShow as d, createElementVNode as x } from "vue";
-import { _ as A } from "./_plugin-vue_export-helper-hUChTQA_.js";
-import { DtSkeleton as I } from "../lib/skeleton.js";
-import { I as f } from "./icon_constants-OpYAAKwF.js";
-const w = "8.0", j = "https://cdn.jsdelivr.net/joypixels/assets/" + w + "/png/unicode/32/";
-let h = null, g = j, E = ".png", S = j, p = ".png";
-const m = L;
-function P() {
-  return m;
-}
-function H(e, t = ".png") {
-  e.endsWith("/") || (e = e + "/"), g = e, E = t;
-}
-function Q(e, t = ".svg") {
-  e.endsWith("/") || (e = e + "/"), S = e, p = t;
-}
-function X(e) {
-  h = e;
-}
-function Y(e) {
-  z(e);
-}
-function z(e) {
-  const t = ["extension", "custom"], o = [
-    "name",
-    "category",
-    "shortname",
-    "extension",
-    "custom"
-  ], n = (s, i, a) => {
-    if (s[i] === void 0) {
-      if (!t.includes(i))
-        return;
-      s[i] = a;
-    } else
-      Array.isArray(s[i]) ? s[i] = s[i].concat(a) : s[i] = a;
-  };
-  Object.entries(e).forEach((s) => {
-    const [i, a] = s;
-    if (i in m) {
-      const r = m[i];
-      for (const l in a) {
-        const D = a[l];
-        n(r, l, D);
-      }
-    } else
-      o.every((l) => a[l] !== void 0) ? m[i] = a : console.error(
-        "The following custom emoji doesn't contain the required properties:",
-        a
-      );
-  });
-}
-function y(e) {
-  function t(n, s) {
-    if (!(!n || typeof n != "object")) {
-      if ("shortname" in n && (n.shortname === e || n.shortname_alternates.includes(e)))
-        return n.key = s, o = n, !0;
-      Object.keys(n).some(function(i) {
-        return t(n[i], i);
-      });
-    }
-  }
-  let o;
-  return t(P(), null), o;
-}
-function U(e) {
-  let t = "";
-  for (const o of e) {
-    const n = o.codePointAt(0).toString(16).padStart(4, "0");
-    ["200d", "fe0f"].includes(n) || (t !== "" && (t = t + "-"), t = t + n);
-  }
-  return t;
-}
-function V(e) {
-  const t = e.split("-");
-  let o = "";
-  return t.forEach((n) => {
-    o = o + String.fromCodePoint(parseInt(n, 16));
-  }), o;
-}
-function q(e) {
-  if (e.startsWith(":") && e.endsWith(":"))
-    return y(e);
-  {
-    const t = U(e), o = m[t];
-    return o && (o.key = t), o;
-  }
-}
-function N(e) {
-  const t = e.match(/:\w+:/g);
-  return O(t);
-}
-function O(e) {
-  const t = e ? e.filter((o) => y(o)) : [];
-  return new Set(t);
-}
-function $(e) {
-  const t = [...e.matchAll(_())], o = t.length ? t.map((n) => n[0]) : [];
-  return new Set(o);
-}
-const R = {
-  name: "DtEmoji",
-  components: {
-    DtSkeleton: I
-  },
-  props: {
-    /**
-     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
-     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
-     * for all supported shortcode/unicode or the docs for setting up custom emojis.
-     */
-    code: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The size of the emoji. Can be any of the icon size utility classes from
-     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
-     * @values 100, 200, 300, 400, 500, 600, 700, 800
-     */
-    size: {
-      type: String,
-      default: "500",
-      validator: (e) => Object.keys(f).includes(e)
-    },
-    /**
-     * Additional class name for the emoji img element.
-     * Can accept String, Object, and Array, i.e. has the
-     * same API as Vue's built-in handling of the class attribute.
-     */
-    imgClass: {
-      type: [String, Object, Array],
-      default: ""
-    },
-    /**
-     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
-     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
-     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
-     * getEmojiData() function
-     */
-    ariaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * Shows a skeleton loader while the emoji asset is loading.
-     * @values true, false
-     */
-    showSkeleton: {
-      type: Boolean,
-      default: !0
-    }
-  },
-  data() {
-    return {
-      emojiData: null,
-      imgLoading: !1
-    };
-  },
-  computed: {
-    emojiDataValid() {
-      return !!this.emojiData;
-    },
-    emojiSrc() {
-      var e;
-      return this.emojiDataValid ? (e = this.emojiData) != null && e.custom ? h + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? g + this.emojiData.key + E : S + this.emojiData.key + p : "invalid";
-    },
-    emojiAlt() {
-      if (this.emojiDataValid)
-        return this.emojiData.unicode_output ? V(this.emojiData.unicode_output) : this.emojiData.name;
-    },
-    emojiLabel() {
-      return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
-    },
-    emojiSize() {
-      return f[this.size];
-    }
-  },
-  watch: {
-    code: {
-      handler: function() {
-        this.getEmojiData();
-      },
-      immediate: !0
-    },
-    emojiSrc: {
-      handler: async function() {
-        this.imgLoading = !0;
-      },
-      immediate: !0
-    }
-  },
-  methods: {
-    getEmojiData() {
-      this.emojiData = q(this.code);
-    },
-    imageLoaded() {
-      this.imgLoading = !1;
-    },
-    imageErrored() {
-      this.imgLoading = !1;
-    }
-  }
-}, T = { class: "d-emoji__wrapper" }, W = ["aria-label", "alt", "title", "src"];
-function B(e, t, o, n, s, i) {
-  const a = k("dt-skeleton");
-  return b(), v("span", T, [
-    c(C(a, {
-      offset: 0,
-      class: u(["d-icon", i.emojiSize]),
-      "shape-option": { shape: "circle", size: "100%" }
-    }, null, 8, ["class"]), [
-      [d, s.imgLoading && o.showSkeleton]
-    ]),
-    c(x("img", {
-      ref: "emojiImg",
-      class: u(["d-icon", i.emojiSize, o.imgClass]),
-      "aria-label": i.emojiLabel,
-      alt: i.emojiAlt,
-      title: i.emojiLabel,
-      src: i.emojiSrc,
-      onLoad: t[0] || (t[0] = (...r) => i.imageLoaded && i.imageLoaded(...r)),
-      onError: t[1] || (t[1] = (...r) => i.imageErrored && i.imageErrored(...r))
-    }, null, 42, W), [
-      [d, !s.imgLoading]
-    ])
-  ]);
-}
-const ee = /* @__PURE__ */ A(R, [["render", B]]);
-export {
-  ee as D,
-  g as a,
-  E as b,
-  h as c,
-  j as d,
-  w as e,
-  S as f,
-  p as g,
-  m as h,
-  P as i,
-  Q as j,
-  X as k,
-  Y as l,
-  y as m,
-  V as n,
-  q as o,
-  N as p,
-  O as q,
-  $ as r,
-  H as s,
-  U as u,
-  z as v
-};
-//# sourceMappingURL=index-mRmwpCBG.js.map

package/dist/chunks/index-mRmwpCBG.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-mRmwpCBG.js","sources":["../../common/emoji/index.js","../../components/emoji/emoji.vue"],"sourcesContent":["import emojiRegex from 'emoji-regex';\nimport { emojisIndexed } from '@dialpad/dialtone-emojis';\n\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojisIndexed;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = textContent.match(/:\\w+:/g);\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n\n// Finds every emoji in slot text\n// removes duplicates\n// @returns {string[]}\nexport function findEmojis (textContent) {\n  const matches = [...textContent.matchAll(emojiRegex())];\n  const emojis = matches.length ? matches.map(match => match[0]) : [];\n  return new Set(emojis);\n}\n","<template>\n  <span class=\"d-emoji__wrapper\">\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":["emojiVersion","defaultEmojiAssetUrl","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","emojiJson","emojisIndexed","getEmojiData","setEmojiAssetUrlSmall","url","fileExtension","setEmojiAssetUrlLarge","setCustomEmojiUrl","setCustomEmojiJson","json","validateCustomEmojiJson","customEmojiProps","customEmojiRequiredProps","_updateNativeEmojiData","emojiData","propName","propValue","item","customEmojiKey","customEmojiValue","customEmojiPropertyName","customEmojiPropertyValue","val","shortcodeToEmojiData","shortcode","f","o","key","reference","k","unicodeToString","emoji","codePoint","codepoint","stringToUnicode","str","uChars","result","uChar","codeToEmojiData","code","unicodeString","findShortCodes","textContent","shortcodes","filterValidShortCodes","filtered","findEmojis","matches","emojiRegex","emojis","match","_sfc_main","DtSkeleton","t","ICON_SIZE_MODIFIERS","_a","_hoisted_1","_openBlock","_createElementBlock","_createVNode","_component_dt_skeleton","$options","_vShow","$data","$props","_createElementVNode","_normalizeClass","args"],"mappings":"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"}