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

Vue component library for Dialpad's design system Dialtone

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