@dialpad/dialtone/dist/vue2/lib/emoji-row/emoji-row.js

Dialpad's Dialtone design system monorepo

import { REACTIONS_ATTRIBUTES as n } from "./emoji-row-constants.js";
import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import a from "../tooltip/tooltip.js";
import m from "../button/button.js";
import c from "../emoji/emoji.js";
import p from "../emoji-text-wrapper/emoji-text-wrapper.js";
import d from "../../common/mixins/localization.js";
const l = {
  name: "DtRecipeEmojiRow",
  components: { DtTooltip: a, DtButton: m, DtEmoji: c, DtEmojiTextWrapper: p },
  mixins: [d],
  props: {
    /**
     * Provide an array of reaction objects to be shown.
     */
    reactions: {
      type: Array,
      default: () => [],
      validator: (t) => {
        for (const e of t)
          if (!n.every((i) => e[i] !== void 0)) return !1;
        return !0;
      }
    }
  },
  emits: [
    "emoji-clicked",
    "emoji-hovered"
  ],
  methods: {
    emojiClicked(t) {
      this.$emit("emoji-clicked", t.emojiUnicodeOrShortname);
    },
    emojiHovered(t, e) {
      this.$emit("emoji-hovered", {
        reaction: t.emojiUnicodeOrShortname,
        state: e
      });
    },
    reactionLabel(t) {
      return this.i18n.$t("DIALTONE_EMOJI_ROW_REACTION_LABEL", {
        reactionCount: t.num,
        name: t.name || "A person",
        selected: t.isSelected.toString(),
        reaction: t.emojiUnicodeOrShortname
      });
    }
  }
};
var _ = function() {
  var e = this, o = e._self._c;
  return o("span", { staticClass: "d-recipe-emoji-row" }, [e._l(e.reactions, function(i) {
    return o("span", { key: i.unicodeOutput }, [o("dt-tooltip", { staticClass: "d-recipe-emoji-row__tooltip", attrs: { "content-class": "d-recipe-emoji-row__tooltip-content", sticky: "popper" }, on: { shown: (r) => e.emojiHovered(i, r) }, scopedSlots: e._u([{ key: "anchor", fn: function({ attrs: r }) {
      return [o("dt-button", { class: [
        "d-recipe-emoji-row__reaction",
        i.isSelected ? "d-recipe-emoji-row__reaction--selected" : ""
      ], attrs: { importance: "clear", size: "sm", "data-qa": "feed-item-reaction-button", "aria-label": e.reactionLabel(i), attrs: r }, on: { click: function(f) {
        return e.emojiClicked(i);
      } } }, [o("span", { staticClass: "d-recipe-emoji-row__emoji" }, [o("dt-emoji", { attrs: { size: "200", code: i.emojiUnicodeOrShortname } })], 1), o("span", { staticClass: "d-recipe-emoji-row__reaction-number" }, [e._v(" " + e._s(i.num) + " ")])])];
    } }], null, !0) }, [o("span", { attrs: { "aria-hidden": "true" } }, [o("dt-emoji-text-wrapper", { attrs: { size: "200" } }, [e._v(" " + e._s(e.reactionLabel(i)) + " ")])], 1)])], 1);
  }), e._t("picker")], 2);
}, u = [], j = /* @__PURE__ */ s(
  l,
  _,
  u
);
const E = j.exports;
export {
  E as default
};
//# sourceMappingURL=emoji-row.js.map