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

Dialpad's Dialtone design system monorepo

{"version":3,"file":"emoji-row.cjs","names":[],"sources":["../../../recipes/conversation_view/emoji_row/emoji_row.vue"],"sourcesContent":["<template>\n  <span class=\"d-recipe-emoji-row\">\n    <span\n      v-for=\"reaction in reactions\"\n      :key=\"reaction.unicodeOutput\"\n    >\n      <dt-tooltip\n        class=\"d-recipe-emoji-row__tooltip\"\n        content-class=\"d-recipe-emoji-row__tooltip-content\"\n        :fallback-placements=\"['top', 'bottom']\"\n        sticky=\"popper\"\n        @shown=\"(shown) => emojiHovered(reaction, shown)\"\n      >\n        <span aria-hidden=\"true\">\n          <dt-emoji-text-wrapper size=\"800\">\n            <p class=\"d-recipe-emoji-row__tooltip-emoji\">\n              {{ reaction.emojiUnicodeOrShortname }}\n            </p>\n            <br>\n            <p class=\"d-recipe-emoji-row__tooltip-names\">\n              {{ reaction.names }}\n              <span\n                class=\"d-recipe-emoji-row__tooltip-label\"\n                v-text=\"reactionLabel(reaction)\"\n              />\n            </p>\n          </dt-emoji-text-wrapper>\n        </span>\n        <template #anchor=\"{ attrs }\">\n          <dt-button\n            importance=\"clear\"\n            size=\"sm\"\n            data-qa=\"feed-item-reaction-button\"\n            :class=\"[\n              'd-recipe-emoji-row__reaction',\n              reaction.isSelected ? 'd-recipe-emoji-row__reaction--selected' : '',\n            ]\"\n            :aria-label=\"reactionLabel(reaction)\"\n            :attrs=\"attrs\"\n            @click=\"emojiClicked(reaction)\"\n          >\n            <span class=\"d-recipe-emoji-row__emoji\">\n              <dt-emoji\n                class=\"d-recipe-emoji-row__emoji\"\n                size=\"200\"\n                img-class=\"d-recipe-emoji-row__emoji-img\"\n                :code=\"reaction.emojiUnicodeOrShortname\"\n              />\n            </span>\n            <span class=\"d-recipe-emoji-row__reaction-number\">\n              {{ reaction.num }}\n            </span>\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </span>\n    <!-- TODO: Replace picker slot with a button with localized text and emit any event needed -->\n    <!-- @slot Slot for emoji picker component, including the anchor. -->\n    <slot name=\"picker\" />\n  </span>\n</template>\n\n<script>\nimport { REACTIONS_ATTRIBUTES } from './emoji_row_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { DtEmoji } from '@/components/emoji';\nimport { DtEmojiTextWrapper } from '@/components/emoji_text_wrapper';\nimport { DialtoneLocalization } from '@/localization';\nimport { getEmojiShortCode } from '@/common/emoji';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeEmojiRow',\n\n  components: { DtTooltip, DtButton, DtEmoji, DtEmojiTextWrapper },\n\n  props: {\n    /**\n     * Provide an array of reaction objects to be shown.\n     */\n    reactions: {\n      type: Array,\n      default: () => [],\n      validator: (reactions) => {\n        for (const reaction of reactions) {\n          const validInput = REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== undefined);\n          if (!validInput) return false;\n        }\n        return true;\n      },\n    },\n  },\n\n  emits: [\n    'emoji-clicked',\n    'emoji-hovered',\n  ],\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    emojiClicked (reaction) {\n      this.$emit('emoji-clicked', reaction.emojiUnicodeOrShortname);\n    },\n\n    emojiHovered (reaction, state) {\n      this.$emit('emoji-hovered', {\n        reaction: reaction.emojiUnicodeOrShortname,\n        state,\n      });\n    },\n\n    reactionLabel (reaction) {\n      return this.i18n.$t('DIALTONE_EMOJI_ROW_REACTION_LABEL', {\n        reaction: getEmojiShortCode(reaction.emojiUnicodeOrShortname),\n        personCount: reaction.num,\n      });\n    },\n  },\n};\n</script>\n"],"mappings":"mfAuEA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,mBAEN,WAAY,CAAE,UAAA,EAAA,QAAW,SAAA,EAAA,QAAU,QAAA,EAAA,QAAS,mBAAA,EAAA,QAAoB,CAEhE,MAAO,CAIL,UAAW,CACT,KAAM,MACN,YAAe,EAAE,CACjB,UAAY,GAAc,CACxB,IAAK,IAAM,KAAY,EAErB,GAAI,CADe,EAAA,qBAAqB,MAAO,GAAc,EAAS,KAAe,IAAA,GAAU,CAC9E,MAAO,GAE1B,MAAO,IAEV,CACF,CAED,MAAO,CACL,gBACA,gBACD,CAED,MAAQ,CACN,MAAO,CACL,KAAM,IAAI,EAAA,qBACX,EAGH,QAAS,CACP,aAAc,EAAU,CACtB,KAAK,MAAM,gBAAiB,EAAS,wBAAwB,EAG/D,aAAc,EAAU,EAAO,CAC7B,KAAK,MAAM,gBAAiB,CAC1B,SAAU,EAAS,wBACnB,QACD,CAAC,EAGJ,cAAe,EAAU,CACvB,OAAO,KAAK,KAAK,GAAG,oCAAqC,CACvD,SAAU,EAAA,kBAAkB,EAAS,wBAAwB,CAC7D,YAAa,EAAS,IACvB,CAAC,EAEL,CACF,IA3HO,MAAM,qBAAoB,IAYpB,cAAY,OAAM,IAEjB,MAAM,oCAAmC,IAIzC,MAAM,oCAAmC,sBAsBtC,MAAM,4BAA2B,IAQjC,MAAM,sCAAqC,kPAUpD,OA1DP,EA0DO,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBAJE,EAAA,SAAA,MAAA,EAAA,EAAA,YApDc,EAAA,UAAZ,+CAoDF,OAAA,CAnDJ,IAAK,EAAS,cAAA,CAAA,EAAA,EAAA,EAAA,aAkDF,EAAA,CA/CX,MAAM,8BACN,gBAAc,sCACb,sBAAqB,CAAA,MAAA,SAAiB,CACvC,OAAO,SACN,QAAQ,GAAU,EAAA,aAAa,EAAU,EAAK,GAiBpC,QAAA,EAAA,EAAA,UAwBG,CAxBO,WAAK,EAAA,EAAA,EAAA,aAwBZ,EAAA,CAtBV,WAAW,QACX,KAAK,KACL,UAAQ,4BACP,OAAA,EAAA,EAAA,gBAAK,CAAA,+BAAgE,EAAS,WAAU,yCAAA,GAAA,CAAA,CAIxF,aAAY,EAAA,cAAc,EAAQ,CAC3B,QACP,QAAK,GAAE,EAAA,aAAa,EAAQ,6BAStB,EAAA,EAAA,EAAA,oBAAA,OAPP,EAOO,EAAA,EAAA,EAAA,aADH,EAAA,CAJA,MAAM,4BACN,KAAK,MACL,YAAU,gCACT,KAAM,EAAS,qEAKb,OAFP,GAAA,EAAA,EAAA,iBACK,EAAS,IAAG,CAAA,EAAA,CAAA,CAAA,iFAvBd,EAAA,EAAA,EAAA,oBAAA,OAdP,EAcO,EAAA,EAAA,EAAA,aADmB,EAAA,CAZD,KAAK,MAAK,CAAA,2BAG3B,0BAAA,IAFJ,GAAA,EAAA,EAAA,iBACK,EAAS,wBAAuB,CAAA,EAAA,sCAEjC,KAAA,KAAA,KAAA,GAAA,2BAOA,IANJ,EAMI,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBALC,EAAS,MAAK,CAAG,IACpB,EAAA,EAAA,EAAA,EAAA,oBAGE,OAAA,CAFA,MAAM,sEAC0B,EAAxB,cAAc,EAAQ,CAAA,iFAmCpB,EAAA,OAAA,SAAA,CAAA,CAAA"}