pyro/dist/card.js

Pyro custom elements

import { i as n, r as c, x as f, t as y } from "./custom-element-CWJsDAat.js";
import { n as d } from "./property-Bf-I6Ep_.js";
var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, e = (i, t, s, a) => {
  for (var r = a > 1 ? void 0 : a ? b(t, s) : t, p = i.length - 1, l; p >= 0; p--)
    (l = i[p]) && (r = (a ? l(t, s, r) : l(r)) || r);
  return a && r && h(t, s, r), r;
};
let o = class extends c {
  constructor() {
    super(...arguments), this.header = "", this.content = "", this.footer = "", this.bordered = !1;
  }
  // FIXME: add prop to have image left
  render() {
    return f`
      <figure><slot name="image"></slot></figure>
      <span part="header">
        <slot name="header"><header class="lost">${this.header}</header></slot>
      </span>
      <slot name="content">${this.content}</slot>
      <slot name="footer">${this.footer}</slot>
    `;
  }
};
o.styles = n`
    :host {
      display: flex;
      width: 340px;
      color: var(--pyro-card-text-color, var(--pyro-text-color));
      flex-direction: column;
      background: var(--pyro-card-surface-color, var(--pyro-surface-color));
      border: var(--pyro-card-border, var(--pyro-border));
      border-radius: var(--pyro-card-border-radius, var(--pyro-border-radius));
      text-align: left;
    }
    :host([bordered]) ::slotted(*:not(:last-child)),
    :host([bordered]) .lost {
      border-bottom: var(--pyro-card-border, var(--pyro-border));
    }
    ::slotted(*:not(*[slot='image'])),
    .lost {
      padding: var(--pyro-card-spacing, var(--pyro-spacing));
    }
    figure {
      display: flex;
      padding: 0;
      margin: 0;
      border-top-left-radius: var(--pyro-card-border-radius, var(--pyro-border-radius));
      border-top-right-radius: var(--pyro-card-border-radius, var(--pyro-border-radius));
      overflow: hidden;
    }
    ::slotted(*[slot='image']) {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    slot[name='content'] ::slotted(*) {
      flex-grow: 1;
    }
  `;
e([
  d()
], o.prototype, "header", 2);
e([
  d()
], o.prototype, "content", 2);
e([
  d()
], o.prototype, "footer", 2);
e([
  d({ type: Boolean, reflect: !0 })
], o.prototype, "bordered", 2);
o = e([
  y("pyro-card")
], o);
export {
  o as PyroCard
};