import { DtIconArrowDown as n, DtIconArrowUp as i } from "@dialpad/dialtone-icons/vue2";
import { UNREAD_PILL_DIRECTIONS as a, UNREAD_PILL_KINDS as o } from "./unread-pill-constants.js";
import { DialtoneLocalization as d } from "../../localization/index.js";
import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const _ = {
  name: "DtRecipeUnreadPill",
  components: {
    DtIconArrowUp: i,
    DtIconArrowDown: n
  },
  props: {
    /**
     * The kind of unread pill which determines the styling
     * @values 'mentions', 'messages'
     **/
    kind: {
      type: String,
      required: !0,
      validator: (r) => o.includes(r)
    },
    /**
     * The direction of the arrow icon
     * @values 'up', 'down'
     **/
    direction: {
      type: String,
      required: !0,
      validator: (r) => a.includes(r)
    }
  },
  emits: [
    /**
     * Native click event
     *
     * @event click
     * @type {PointerEvent | KeyboardEvent}
     */
    "click"
  ],
  data() {
    return {
      i18n: new d()
    };
  },
  computed: {
    text() {
      return this.kind === "mentions" ? this.i18n.$t("DIALTONE_UNREAD_PILL_MENTIONS_TEXT") : this.i18n.$t("DIALTONE_UNREAD_PILL_MESSAGES_TEXT");
    }
  }
};
var l = function() {
  var t = this, e = t._self._c;
  return e("button", t._g({ class: ["d-recipe-leftbar-unread-pill", `d-recipe-leftbar-unread-pill-${t.kind}`], attrs: { type: "button", "data-qa": "dt-recipe-leftbar-unread-pill" } }, t.$listeners), [t.direction === "up" ? e("dt-icon-arrow-up", { attrs: { size: "300" } }) : e("dt-icon-arrow-down", { attrs: { size: "300" } }), e("span", { attrs: { "data-qa": "dt-recipe-leftbar-unread-pill__label" } }, [t._t("default", function() {
    return [t._v(" " + t._s(t.text) + " ")];
  })], 2)], 1);
}, c = [], p = /* @__PURE__ */ s(
  _,
  l,
  c
);
const E = p.exports;
export {
  E as default
};
//# sourceMappingURL=unread-pill.js.map
