import { FEED_ITEM_PILL_BORDER_COLORS as r } from "./feed-item-pill-constants.js";
import { DtIconChevronDown as i, DtIconChevronRight as n } from "@dialpad/dialtone-icons/vue2";
import { DialtoneLocalization as s } from "../../localization/index.js";
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import c from "../item-layout/item-layout.js";
import d from "../collapsible/collapsible.js";
const u = {
  name: "DtRecipeFeedItemPill",
  components: { DtItemLayout: c, DtCollapsible: d },
  props: {
    /**
     * Bolded primary text
     */
    title: {
      type: String,
      default: () => ""
    },
    /**
     * Additional styling around the pill
     */
    wrapperClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Additional styling for the pill
     */
    buttonClass: {
      type: [String, Array, Object],
      default: ""
    },
    /**
     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)
     */
    toggleable: {
      type: Boolean,
      default: () => !0
    },
    defaultToggled: {
      type: Boolean,
      default: () => !1
    },
    /**
     * Callbox border color
     * @values default, ai, critical
     */
    borderColor: {
      type: String,
      default: "default",
      validator: (o) => Object.keys(r).includes(o)
    }
  },
  data() {
    return {
      hover: !1,
      expanded: this.defaultToggled,
      i18n: new s()
    };
  },
  computed: {
    toggleIcon() {
      return this.expanded ? i : n;
    },
    showChevronIcon() {
      return this.toggleable && this.hover;
    },
    toggleableClass() {
      return this.toggleable ? "d-recipe-feed-item-pill--toggleable" : "";
    },
    borderClass() {
      return r[this.borderColor];
    },
    anchorTitle() {
      return this.i18n.$t("DIALTONE_FEED_ITEM_PILL_ARIA_LABEL");
    }
  },
  methods: {
    onClick() {
      this.toggleable && (this.expanded = !this.expanded);
    }
  }
};
var p = function() {
  var e = this, t = e._self._c;
  return t("div", { class: ["d-recipe-feed-item-pill__border", e.borderClass, e.wrapperClass] }, [t("div", { staticClass: "d-recipe-feed-item-pill__wrapper" }, [t("dt-collapsible", { attrs: { open: e.expanded }, scopedSlots: e._u([{ key: "anchor", fn: function() {
    return [t("button", { class: ["d-recipe-feed-item-pill__button", e.toggleableClass, e.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": e.anchorTitle, title: e.anchorTitle }, on: { focusin: function(l) {
      e.hover = !0;
    }, focusout: function(l) {
      e.hover = !1;
    }, mouseenter: function(l) {
      e.hover = !0;
    }, mouseleave: function(l) {
      e.hover = !1;
    }, click: e.onClick } }, [t("dt-item-layout", { staticClass: "d-recipe-feed-item-pill__layout", attrs: { unstyled: "" }, scopedSlots: e._u([{ key: "left", fn: function() {
      return [t("div", { staticClass: "d-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [e.showChevronIcon ? t(e.toggleIcon, { tag: "component", attrs: { size: "300" } }) : e._t("leftIcon", null, { iconSize: "300" })], 2)];
    }, proxy: !0 }, e.$slots.subtitle ? { key: "subtitle", fn: function() {
      return [t("div", { staticClass: "d-recipe-feed-item-pill__subtitle" }, [e._t("subtitle")], 2)];
    }, proxy: !0 } : null, e.$slots.bottom ? { key: "bottom", fn: function() {
      return [t("div", { staticClass: "d-recipe-feed-item-pill__bottom" }, [e._t("bottom")], 2)];
    }, proxy: !0 } : null, e.$slots.right ? { key: "right", fn: function() {
      return [t("div", { staticClass: "d-recipe-feed-item-pill__right" }, [e._t("right")], 2)];
    }, proxy: !0 } : null], null, !0) }, [e._t("title", function() {
      return [t("span", { staticClass: "d-recipe-feed-item-pill__title" }, [e._v(e._s(e.title))])];
    })], 2)], 1)];
  }, proxy: !0 }, e.$slots.content ? { key: "content", fn: function() {
    return [t("div", { staticClass: "d-recipe-feed-item-pill__content" }, [e._t("content")], 2)];
  }, proxy: !0 } : null], null, !0) })], 1)]);
}, f = [], _ = /* @__PURE__ */ a(
  u,
  p,
  f
);
const y = _.exports;
export {
  y as default
};
//# sourceMappingURL=feed-item-pill.js.map
