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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"emoji.cjs","names":[],"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} 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  compatConfig: { MODE: 3 },\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 this.emojiData.image;\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"],"mappings":"gVAsCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,UAEN,WAAY,CACV,WAAA,EAAA,QACD,CAED,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAOD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAOD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAQD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GACb,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,WAGhB,UAAY,CAWR,OAVG,KAAK,eAGN,KAAK,WAAW,OACX,KAAK,UAAU,MAGpB,CAAC,MAAO,MAAM,CAAC,SAAS,KAAK,KAAK,CAC7B,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAE1C,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAVhB,WAcrC,UAAY,CACL,QAAK,eACV,OAAO,KAAK,UAAU,eAAiB,EAAA,gBAAgB,KAAK,UAAU,eAAc,CAAI,KAAK,UAAU,MAGzG,YAAc,CAEZ,OADK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,iBAIrC,WAAa,CACX,OAAO,EAAA,oBAAoB,KAAK,OAEnC,CAED,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,cAAc,EAGrB,UAAW,GACZ,CAED,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,IAGpB,UAAW,GACZ,CACF,CAED,QAAS,CACP,cAAgB,CACd,KAAK,UAAY,EAAA,gBAAgB,KAAK,KAAK,EAG7C,aAAe,CACb,KAAK,WAAa,IAGpB,cAAgB,CACd,KAAK,WAAa,IAErB,CACF,2JAzJQ,OAAA,CAlBA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,UAAS,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,aAMtC,EAAA,CAHC,OAAQ,EACR,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAS,CAAA,CAC3B,eAAc,CAAA,MAAA,SAAA,KAAA,OAAiC,8BAHxC,EAAA,YAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAenC,MAAA,CARC,IAAI,WACH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAW,EAAA,SAAQ,CAAA,CACrC,aAAY,EAAA,WACZ,IAAK,EAAA,SACL,MAAO,EAAA,WACP,IAAK,EAAA,SACL,OAAI,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,aAAA,EAAA,YAAA,GAAA,EAAW,EACjB,QAAK,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,cAAA,EAAA,aAAA,GAAA,EAAY,yBARX,EAAA,WAAU,CAAA,CAAA,CAAA,CAAA,EAAA"}