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