@dialpad/dialtone-vue/dist/recipes/conversation_view/emoji_row/emoji_row.vue.cjs

Vue component library for Dialpad's design system Dialtone

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const emoji_row_constants = require("./emoji_row_constants.cjs");
const _pluginVue2_normalizer = require("../../../_virtual/_plugin-vue2_normalizer.cjs");
const tooltip = require("../../../components/tooltip/tooltip.vue.cjs");
const button = require("../../../components/button/button.vue.cjs");
const emoji = require("../../../components/emoji/emoji.vue.cjs");
const emoji_text_wrapper = require("../../../components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs");
const _sfc_main = {
  name: "DtRecipeEmojiRow",
  components: { DtTooltip: tooltip.default, DtButton: button.default, DtEmoji: emoji.default, DtEmojiTextWrapper: emoji_text_wrapper.default },
  mixins: [],
  props: {
    /**
     * Provide an array of reaction objects to be shown.
     */
    reactions: {
      type: Array,
      default: () => [],
      validator: (reactions) => {
        for (const reaction of reactions) {
          const validInput = emoji_row_constants.REACTIONS_ATTRIBUTES.every((attribute) => reaction[attribute] !== void 0);
          if (!validInput) return false;
        }
        return true;
      }
    }
  },
  emits: [
    "emoji-clicked",
    "emoji-hovered"
  ],
  methods: {
    emojiClicked(reaction) {
      this.$emit("emoji-clicked", reaction.emojiUnicodeOrShortname);
    },
    emojiHovered(reaction, state) {
      this.$emit("emoji-hovered", {
        reaction: reaction.emojiUnicodeOrShortname,
        state
      });
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("span", { staticClass: "d-recipe-emoji-row" }, [_vm._l(_vm.reactions, function(reaction) {
    return _c("span", { key: reaction.unicodeOutput, attrs: { "reaction": reaction } }, [_c("dt-tooltip", { staticClass: "d-recipe-emoji-row__tooltip", attrs: { "content-class": "d-recipe-emoji-row__tooltip-content", "sticky": "popper" }, on: { "shown": (shown) => _vm.emojiHovered(reaction, shown) }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
      return [_c("dt-button", { class: [
        "d-recipe-emoji-row__reaction",
        reaction.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""
      ], attrs: { "importance": "clear", "size": "sm", "data-qa": "feed-item-reaction-button", "aria-label": reaction.ariaLabel, "attrs": attrs }, on: { "click": function($event) {
        return _vm.emojiClicked(reaction);
      } } }, [_c("span", { staticClass: "d-recipe-emoji-row__emoji" }, [_c("dt-emoji", { attrs: { "size": "200", "code": reaction.emojiUnicodeOrShortname } })], 1), _c("span", { staticClass: "d-recipe-emoji-row__reaction-number" }, [_vm._v(" " + _vm._s(reaction.num) + " ")])])];
    } }], null, true) }, [_c("span", { attrs: { "aria-hidden": "true" } }, [_c("dt-emoji-text-wrapper", { attrs: { "size": "200" } }, [_vm._v(" " + _vm._s(reaction.tooltip) + " ")])], 1)])], 1);
  }), _vm._t("picker")], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns
);
const emoji_row = __component__.exports;
exports.default = emoji_row;
//# sourceMappingURL=emoji_row.vue.cjs.map