@dialpad/dialtone/dist/vue3/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  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 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","t","ICON_SIZE_MODIFIERS","_a","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData","_hoisted_1","_createElementBlock","_normalizeClass","$options","_createVNode","_component_dt_skeleton","_vShow","$data","$props","_createElementVNode","args"],"mappings":"qTAuCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,UAEN,WAAY,YACVC,EAAAA,SAGF,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,IAQZ,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,GAQ/D,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,KAAK,EAC5B,QAAS,IASX,UAAW,CACT,KAAM,OACN,QAAS,MAOX,aAAc,CACZ,KAAM,QACN,QAAS,KAIb,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GAEhB,EAEA,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,SAChB,EAEA,UAAY,OACV,OAAK,KAAK,gBAGNE,EAAA,KAAK,YAAL,MAAAA,EAAgB,OACXC,EAAAA,oBAAsB,KAAK,UAAU,IAAM,KAAK,UAAU,UAG/D,CAAC,MAAO,KAAK,EAAE,SAAS,KAAK,IAAI,EAC5BC,qBAAqB,KAAK,UAAU,IAAMC,EAAAA,wBAE1CC,qBAAqB,KAAK,UAAU,IAAMC,EAAAA,wBAVhB,SAYrC,EAEA,UAAY,CACV,GAAK,KAAK,eACV,OAAO,KAAK,UAAU,eAAiBC,kBAAgB,KAAK,UAAU,cAAc,EAAI,KAAK,UAAU,IACzG,EAEA,YAAc,CACZ,OAAK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,eAErC,EAEA,WAAa,CACX,OAAOP,EAAAA,oBAAoB,KAAK,IAAI,CACtC,GAGF,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,aAAY,CACnB,EAEA,UAAW,IAGb,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,EACpB,EAEA,UAAW,KAIf,QAAS,CACP,cAAgB,CACd,KAAK,UAAYQ,kBAAgB,KAAK,IAAI,CAC5C,EAEA,aAAe,CACb,KAAK,WAAa,EACpB,EAEA,cAAgB,CACd,KAAK,WAAa,EACpB,EAEJ,EA7KAC,EAAA,CAAA,aAAA,MAAA,QAAA,KAAA,yFACEC,EAAAA,mBAkBO,OAAA,CAlBA,MADTC,EAAAA,iCACmCC,EAAA,SAAS,CAAA,qBACxCC,EAAAA,YAKEC,EAAA,CAHC,OAAQ,EACR,MALPH,EAAAA,yBAKyBC,EAAA,SAAS,CAAA,EAC3B,eAAc,CAAA,MAAA,SAAA,KAAA,MAAA,sBAHP,CAAAG,QAAAC,EAAA,YAAcC,EAAA,YAAY,qBAKpCC,EAAAA,mBAUC,MAAA,CARC,IAAI,WACH,MAXPP,EAAAA,eAAA,CAAA,SAWyBC,EAAA,UAAWK,EAAA,QAAQ,CAAA,EACrC,aAAYL,EAAA,WACZ,IAAKA,EAAA,SACL,MAAOA,EAAA,WACP,IAAKA,EAAA,SACL,2BAAMA,EAAA,aAAAA,EAAA,YAAA,GAAAO,CAAA,GACN,4BAAOP,EAAA,cAAAA,EAAA,aAAA,GAAAO,CAAA,EAjBd,EAAA,KAAA,GAAAV,CAAA,EAAA,WASeO,EAAA,UAAU"}