@dialpad/dialtone/dist/vue2/lib/emoji/emoji.cjs.map

Dialpad's Dialtone design system monorepo

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