@dialpad/dialtone-vue 2.157.1-beta.1 → 2.157.1

package/dist/lib/emoji.cjs

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

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"],"mappings":";;;;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAA,aAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAAC,aAAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA,OAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAAC,6BAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAN,eAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAAO,aAAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/lib/emoji.js

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

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":[],"mappings":";;;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAA,qBAAA,KAAA,UAAA,MAAA;AAAA,MACA,OAAA;AACA,eAAA,qBAAA,KAAA,UAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAA,gBAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"emoji.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/lib/empty-state.cjs

@@ -1,169 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-const lib_illustration = require("./illustration.cjs");
-const lib_icon = require("./icon.cjs");
-const lib_stack = require("./stack.cjs");
-const icon_constants = require("../chunks/icon_constants-da57m7BZ.js");
-require("@dialpad/dialtone-icons/vue2");
-require("@dialpad/dialtone-icons/illustrations.js");
-require("@dialpad/dialtone-icons/icons.js");
-require("../chunks/stack_constants-SMzMWnAQ.js");
-const EMPTY_STATE_SIZE_MODIFIERS = {
-  sm: "d-empty-state--size-sm",
-  md: "d-empty-state--size-md",
-  lg: "d-empty-state--size-lg"
-};
-const _sfc_main = {
-  name: "DtEmptyState",
-  components: {
-    DtIllustration: lib_illustration.DtIllustration,
-    DtIcon: lib_icon.DtIcon,
-    DtStack: lib_stack.DtStack
-  },
-  props: {
-    /**
-     * The empty state size.
-     * @values 'sm', 'md', 'lg'
-     */
-    size: {
-      type: String,
-      default: "lg",
-      validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s)
-    },
-    /**
-     * The illustration name in kebab-case
-     * This only displays when size is 'lg' or 'md'
-     * This has priority over icon.
-     * @type {String}
-     */
-    illustrationName: {
-      type: String,
-      default: null,
-      validator: (name) => lib_illustration.ILLUSTRATION_NAMES.includes(name)
-    },
-    /**
-     * The icon name in kebab-case
-     * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and
-     * Will always be shown in 'sm' size.
-     * @type {String}
-     */
-    iconName: {
-      type: String,
-      default: null,
-      validator: (name) => icon_constants.ICON_NAMES.includes(name)
-    },
-    /**
-     * Header text
-     * @type {String}
-     */
-    headerText: {
-      type: String,
-      required: true
-    },
-    /**
-     * Body text
-     * @type {String}
-     */
-    bodyText: {
-      type: String,
-      default: null
-    },
-    /**
-     * Whether to show the illustration
-     * @type {Boolean}
-     */
-    showIllustration: {
-      type: Boolean,
-      default: true
-    }
-  },
-  computed: {
-    /**
-     * Illustration will always be shown in lg and md size
-     * Illustration will not be shown in sm size
-     */
-    showIllustrationComponent() {
-      return this.illustrationName && this.notSmSize;
-    },
-    /**
-     * Icon will be shown in lg and md size only if illustration is not provided
-     * Icon will always be shown in sm size
-     */
-    showIcon() {
-      if (!this.iconName) {
-        return false;
-      }
-      return !(this.illustrationName && this.notSmSize);
-    },
-    notSmSize() {
-      return this.size !== "sm";
-    },
-    sizeClass() {
-      return EMPTY_STATE_SIZE_MODIFIERS[this.size];
-    },
-    emptyStateClasses() {
-      return ["d-empty-state", this.sizeClass];
-    },
-    contentClass() {
-      switch (this.size) {
-        case "sm":
-          return "d-empty-state__content--sm";
-        case "md":
-          return "d-empty-state__content--md";
-        case "lg":
-          return "d-empty-state__content--lg";
-        default:
-          return "d-empty-state__content--lg";
-      }
-    },
-    headlineClass() {
-      switch (this.size) {
-        case "sm":
-          return "d-headline--md";
-        case "md":
-          return "d-headline--xl";
-        case "lg":
-          return "d-headline--xxl";
-        default:
-          return "d-headline--xxl";
-      }
-    },
-    bodyClass() {
-      switch (this.size) {
-        case "sm":
-          return "d-body--sm";
-        case "md":
-          return "d-body--sm";
-        case "lg":
-          return "d-body--md";
-        default:
-          return "d-body--md";
-      }
-    }
-  },
-  mounted() {
-    if (!this.bodyText && !this.$slots.body) {
-      console.warn("Dialtone Empty State component: You should provide either bodyText or content on body slot.");
-    }
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("dt-stack", { class: _vm.emptyStateClasses }, [_vm.showIllustration ? [_vm.showIcon ? _c("span", { staticClass: "d-empty-state__icon" }, [_c("dt-icon", { attrs: { "name": _vm.iconName, "size": "800" } })], 1) : _vm._e(), _vm.showIllustrationComponent ? _c("span", { staticClass: "d-empty-state__illustration" }, [_c("dt-illustration", { attrs: { "name": _vm.illustrationName } })], 1) : _vm._e()] : _vm._e(), _c("dt-stack", { class: ["d-empty-state__content", _vm.contentClass], attrs: { "gap": "450" } }, [_c("div", { class: ["d-empty-state__header-text", _vm.headlineClass] }, [_vm._v(" " + _vm._s(_vm.headerText) + " ")]), _vm.bodyText ? _c("p", { class: ["d-empty-state__body-text", _vm.bodyClass] }, [_vm._v(" " + _vm._s(_vm.bodyText) + " ")]) : _vm._e()]), _vm._t("body")], 2);
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
-const empty_state = __component__.exports;
+const empty_state = require("../components/empty_state/empty_state.vue.cjs");
+const empty_state_constants = require("../components/empty_state/empty_state_constants.cjs");
 exports.DtEmptyState = empty_state;
-exports.EMPTY_STATE_SIZE_MODIFIERS = EMPTY_STATE_SIZE_MODIFIERS;
+exports.EMPTY_STATE_SIZE_MODIFIERS = empty_state_constants.EMPTY_STATE_SIZE_MODIFIERS;
 //# sourceMappingURL=empty-state.cjs.map

package/dist/lib/empty-state.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.cjs","sources":["../../components/empty_state/empty_state_constants.js","../../components/empty_state/empty_state.vue"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n  sm: 'd-empty-state--size-sm',\n  md: 'd-empty-state--size-md',\n  lg: 'd-empty-state--size-lg',\n};\n\nexport default {\n  EMPTY_STATE_SIZE_MODIFIERS,\n};\n","<template>\n  <dt-stack\n    :class=\"emptyStateClasses\"\n  >\n    <template v-if=\"showIllustration\">\n      <span\n        v-if=\"showIcon\"\n        class=\"d-empty-state__icon\"\n      >\n        <dt-icon\n          :name=\"iconName\"\n          size=\"800\"\n        />\n      </span>\n\n      <span\n        v-if=\"showIllustrationComponent\"\n        class=\"d-empty-state__illustration\"\n      >\n        <dt-illustration\n          :name=\"illustrationName\"\n        />\n      </span>\n    </template>\n\n    <dt-stack\n      gap=\"450\"\n      :class=\"['d-empty-state__content', contentClass]\"\n    >\n      <div :class=\"['d-empty-state__header-text', headlineClass]\">\n        {{ headerText }}\n      </div>\n\n      <p\n        v-if=\"bodyText\"\n        :class=\"['d-empty-state__body-text', bodyClass]\"\n      >\n        {{ bodyText }}\n      </p>\n    </dt-stack>\n\n    <slot name=\"body\" />\n  </dt-stack>\n</template>\n\n<script>\nimport { EMPTY_STATE_SIZE_MODIFIERS } from './empty_state_constants.js';\nimport { DtIllustration, ILLUSTRATION_NAMES } from '@/components/illustration';\nimport { DtIcon, ICON_NAMES } from '@/components/icon';\nimport { DtStack } from '@/components/stack';\n\nexport default {\n  name: 'DtEmptyState',\n\n  components: {\n    DtIllustration,\n    DtIcon,\n    DtStack,\n  },\n\n  props: {\n    /**\n     * The empty state size.\n     * @values 'sm', 'md', 'lg'\n     */\n    size: {\n      type: String,\n      default: 'lg',\n      validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The illustration name in kebab-case\n     * This only displays when size is 'lg' or 'md'\n     * This has priority over icon.\n     * @type {String}\n     */\n    illustrationName: {\n      type: String,\n      default: null,\n      validator: (name) => ILLUSTRATION_NAMES.includes(name),\n    },\n\n    /**\n     * The icon name in kebab-case\n     * This will be shown in 'lg' and 'md' size only if illustrationName prop is not provided and\n     * Will always be shown in 'sm' size.\n     * @type {String}\n     */\n    iconName: {\n      type: String,\n      default: null,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * Header text\n     * @type {String}\n     */\n    headerText: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Body text\n     * @type {String}\n     */\n    bodyText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Whether to show the illustration\n     * @type {Boolean}\n     */\n    showIllustration: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  computed: {\n    /**\n     * Illustration will always be shown in lg and md size\n     * Illustration will not be shown in sm size\n     */\n    showIllustrationComponent () {\n      return this.illustrationName && this.notSmSize;\n    },\n\n    /**\n     * Icon will be shown in lg and md size only if illustration is not provided\n     * Icon will always be shown in sm size\n     */\n    showIcon () {\n      if (!this.iconName) {\n        return false;\n      }\n\n      return !(this.illustrationName && this.notSmSize);\n    },\n\n    notSmSize () {\n      return this.size !== 'sm';\n    },\n\n    sizeClass () {\n      return EMPTY_STATE_SIZE_MODIFIERS[this.size];\n    },\n\n    emptyStateClasses () {\n      return ['d-empty-state', this.sizeClass];\n    },\n\n    contentClass () {\n      switch (this.size) {\n        case 'sm':\n          return 'd-empty-state__content--sm';\n        case 'md':\n          return 'd-empty-state__content--md';\n        case 'lg':\n          return 'd-empty-state__content--lg';\n        default:\n          return 'd-empty-state__content--lg';\n      }\n    },\n\n    headlineClass () {\n      switch (this.size) {\n        case 'sm':\n          return 'd-headline--md';\n        case 'md':\n          return 'd-headline--xl';\n        case 'lg':\n          return 'd-headline--xxl';\n        default:\n          return 'd-headline--xxl';\n      }\n    },\n\n    bodyClass () {\n      switch (this.size) {\n        case 'sm':\n          return 'd-body--sm';\n        case 'md':\n          return 'd-body--sm';\n        case 'lg':\n          return 'd-body--md';\n        default:\n          return 'd-body--md';\n      }\n    },\n  },\n\n  mounted () {\n    if (!this.bodyText && !this.$slots.body) {\n      console.warn('Dialtone Empty State component: You should provide either bodyText or content on body slot.');\n    }\n  },\n};\n</script>\n"],"names":["DtIllustration","DtIcon","DtStack","ILLUSTRATION_NAMES","ICON_NAMES"],"mappings":";;;;;;;;;;;AAAY,MAAC,6BAA6B;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AC+CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,gBAAAA,iBAAA;AAAA,IACA,QAAAC,SAAA;AAAA,IACA,SAAAC,UAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,0BAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAAC,oCAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,SAAAC,0BAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,4BAAA;AACA,aAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,UAAA,CAAA,KAAA,UAAA;AACA,eAAA;AAAA,MACA;AAEA,aAAA,EAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,2BAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,CAAA,iBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,cAAA,KAAA,MAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA,KAAA;AACA,iBAAA;AAAA,QACA;AACA,iBAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,QAAA,CAAA,KAAA,YAAA,CAAA,KAAA,OAAA,MAAA;AACA,cAAA,KAAA,6FAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"empty-state.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}