pyro/dist/alert.js

Pyro custom elements

import { i as y, r as v, x as p, t as d } from "./custom-element-CWJsDAat.js";
import { o as b } from "./unsafe-html-DZSpJPU8.js";
import { n as a } from "./property-Bf-I6Ep_.js";
import { C as h } from "./close-Cj_Rmt2D.js";
var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, e = (n, t, s, l) => {
  for (var r = l > 1 ? void 0 : l ? f(t, s) : t, i = n.length - 1, c; i >= 0; i--)
    (c = n[i]) && (r = (l ? c(t, s, r) : c(r)) || r);
  return l && r && u(t, s, r), r;
};
let o = class extends v {
  constructor() {
    super(...arguments), this.severity = "", this.band = !1, this.dismissible = !1, this.dimissed = !1, this.dismiss = () => {
      this.setAttribute("dismissed", "");
    };
  }
  render() {
    return p`
      <div role="alert">
        <slot name="icon"></slot>
        <slot></slot>
        ${this.dismissible ? p`<slot name="dismissible" @click=${this.dismiss}>${b(h)}</slot>` : p``}
      </div>
    `;
  }
};
o.styles = y`
    :host {
      display: block;
      box-sizing: border-box;
      color: var(--pyro-alert-text-color, var(--pyro-text-color));
      border: var(--pyro-alert-border, var(--pyro-border));
      border-radius: var(--pyro-alert-border-radius, var(--pyro-border-radius));
      padding: var(--pyro-alert-spacing, var(--pyro-spacing));
      background: var(--pyro-alert-surface-color), var(--pyro-surface-color);
    }
    :host([severity='info']) {
      background: var(--pyro-alert-info-color-lighter, var(--pyro-info-color-lighter));
      --internal-color: var(--pyro-alert-info-color, var(--pyro-info-color));
      color: var(--pyro-alert-text-color, var(--pyro-text-color-on-info));
    }
    :host([severity='success']) {
      background: var(--pyro-alert-success-color-lighter, var(--pyro-success-color-lighter));
      --internal-color: var(--pyro-alert-success-color, var(--pyro-success-color));
      color: var(--pyro-alert-text-color, var(--pyro-text-color-on-success));
    }
    :host([severity='warning']) {
      background: var(--pyro-alert-warning-color-lighter, var(--pyro-warning-color-lighter));
      --internal-color: var(--pyro-alert-warning-color, var(--pyro-warning-color));
      color: var(--pyro-alert-text-color, var(--pyro-text-color-on-warning));
    }
    :host([severity='error']) {
      background: var(--pyro-alert-error-color-lighter, var(--pyro-error-color-lighter));
      --internal-color: var(--pyro-alert-error-color, var(--pyro-error-color));
      color: var(--pyro-alert-text-color, var(--pyro-text-color-on-error));
    }

    slot[name='icon'] {
      color: var(--internal-color);
    }

    :host > div {
      display: flex;
      color: inherit;
      gap: var(--pyro-alert-spacing, var(--pyro-spacing-l));
      text-align: left;
    }
    :host([band]) {
      border: 0;
      border-left: var(--pyro-alert-band-width, calc(var(--pyro-border-width) * 4)) solid var(--internal-color);
    }

    slot[name='dismissible'] {
      display: inline-block;
      color: var(--pyro-alert-text-color, var(--pyro-text-color));
      flex: 1 0 auto;
      width: var(--pyro-alert-dismissible-width, 1em);
      cursor: pointer;
    }
    :host([dismissed]) {
      display: none;
    }
  `;
e([
  a({ reflect: !0 })
], o.prototype, "severity", 2);
e([
  a({ type: Boolean, reflect: !0 })
], o.prototype, "band", 2);
e([
  a({ type: Boolean, reflect: !0 })
], o.prototype, "dismissible", 2);
e([
  a({ type: Boolean, reflect: !0 })
], o.prototype, "dimissed", 2);
o = e([
  d("pyro-alert")
], o);
export {
  o as PyroAlert
};