@dialpad/dialtone/dist/vue3/lib/feed-item-pill/feed-item-pill.js

Dialpad's Dialtone design system monorepo

import { FEED_ITEM_PILL_BORDER_COLORS as a } from "./feed-item-pill-constants.js";
import { DtIconChevronDown as g, DtIconChevronRight as h } from "@dialpad/dialtone-icons/vue3";
import { resolveComponent as p, openBlock as c, createElementBlock as v, normalizeClass as m, createElementVNode as o, createVNode as f, createSlots as u, withCtx as l, createBlock as C, resolveDynamicComponent as y, renderSlot as s, toDisplayString as k } from "vue";
import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import I from "../item-layout/item-layout.js";
import S from "../collapsible/collapsible.js";
const w = {
  compatConfig: { MODE: 3 },
  name: "DtRecipeFeedItemPill",
  components: { DtItemLayout: I, DtCollapsible: S },
  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: ""
    },
    /**
     * Aria label for feed pill
     */
    ariaLabel: {
      type: String,
      required: !0
    },
    /**
     * 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: (e) => Object.keys(a).includes(e)
    }
  },
  data() {
    return {
      hover: !1,
      expanded: this.defaultToggled
    };
  },
  computed: {
    toggleIcon() {
      return this.expanded ? g : h;
    },
    showChevronIcon() {
      return this.toggleable && this.hover;
    },
    toggleableClass() {
      return this.toggleable ? "d-recipe-feed-item-pill--toggleable" : "";
    },
    borderClass() {
      return a[this.borderColor];
    }
  },
  methods: {
    onClick() {
      this.toggleable && (this.expanded = !this.expanded);
    }
  }
}, E = { class: "d-recipe-feed-item-pill__wrapper" }, O = ["aria-label"], B = { class: "d-recipe-feed-item-pill__title" }, L = {
  class: "d-recipe-feed-item-pill__icon",
  "data-qa": "dt-recipe-feed-item-pill__icon"
}, R = { class: "d-recipe-feed-item-pill__subtitle" }, F = { class: "d-recipe-feed-item-pill__bottom" }, M = { class: "d-recipe-feed-item-pill__right" }, j = { class: "d-recipe-feed-item-pill__content" };
function q(e, t, d, z, n, i) {
  const _ = p("dt-item-layout"), b = p("dt-collapsible");
  return c(), v("div", {
    class: m(["d-recipe-feed-item-pill__border", i.borderClass, d.wrapperClass])
  }, [
    o("div", E, [
      f(b, { open: n.expanded }, u({
        anchor: l(() => [
          o("button", {
            "data-qa": "dt-recipe-feed-item-pill",
            "aria-label": d.ariaLabel,
            class: m(["d-recipe-feed-item-pill__button", i.toggleableClass, d.buttonClass]),
            onFocusin: t[0] || (t[0] = (r) => n.hover = !0),
            onFocusout: t[1] || (t[1] = (r) => n.hover = !1),
            onMouseenter: t[2] || (t[2] = (r) => n.hover = !0),
            onMouseleave: t[3] || (t[3] = (r) => n.hover = !1),
            onClick: t[4] || (t[4] = (...r) => i.onClick && i.onClick(...r))
          }, [
            f(_, {
              class: "d-recipe-feed-item-pill__layout",
              unstyled: ""
            }, u({
              left: l(() => [
                o("div", L, [
                  i.showChevronIcon ? (c(), C(y(i.toggleIcon), {
                    key: 0,
                    size: "300"
                  })) : s(e.$slots, "leftIcon", {
                    key: 1,
                    iconSize: "300"
                  })
                ])
              ]),
              default: l(() => [
                s(e.$slots, "title", {}, () => [
                  o("span", B, k(d.title), 1)
                ])
              ]),
              _: 2
            }, [
              e.$slots.subtitle ? {
                name: "subtitle",
                fn: l(() => [
                  o("div", R, [
                    s(e.$slots, "subtitle")
                  ])
                ]),
                key: "0"
              } : void 0,
              e.$slots.bottom ? {
                name: "bottom",
                fn: l(() => [
                  o("div", F, [
                    s(e.$slots, "bottom")
                  ])
                ]),
                key: "1"
              } : void 0,
              e.$slots.right ? {
                name: "right",
                fn: l(() => [
                  o("div", M, [
                    s(e.$slots, "right")
                  ])
                ]),
                key: "2"
              } : void 0
            ]), 1024)
          ], 42, O)
        ]),
        _: 2
      }, [
        e.$slots.content ? {
          name: "content",
          fn: l(() => [
            o("div", j, [
              s(e.$slots, "content")
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["open"])
    ])
  ], 2);
}
const G = /* @__PURE__ */ D(w, [["render", q]]);
export {
  G as default
};
//# sourceMappingURL=feed-item-pill.js.map