pyro/dist/toast.js

Pyro custom elements

import { i as y, r as u, x as l, t as d } from "./custom-element-CWJsDAat.js";
import { n } from "./property-Bf-I6Ep_.js";
var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (t, e, o, s) => {
  for (var a = s > 1 ? void 0 : s ? g(e, o) : e, c = t.length - 1, p; c >= 0; c--)
    (p = t[c]) && (a = (s ? p(e, o, a) : p(a)) || a);
  return s && a && v(e, o, a), a;
};
let r = class extends u {
  constructor() {
    super(...arguments), this.duration = 3e3, this.severity = "", this.top = !1, this.left = !1, this.center = !1, this._stacked = [];
  }
  popMessage() {
    setTimeout(() => {
      this._stacked.pop(), this.requestUpdate();
    }, this.duration);
  }
  update(t) {
    this.message && (this._stacked.push(this.message), this.message = "", this.popMessage()), super.update(t);
  }
  render() {
    return l`<section style="--internal-duration:${this.duration}ms">
      ${this._stacked.map((t) => l`<output>${t}</output>`)}
    </section>`;
  }
};
r.styles = y`
    :host {
      display: inline-block;
      color: var(--pyro-toast-text-color, var(--pyro-text-color));
    }
    section {
      pointer-events: none;
      display: grid;
      justify-items: center;
      justify-content: right;
      gap: var(--pyro-toast-spacing, var(--pyro-spacing));
      position: fixed;
      z-index: 100;
      inset-block-end: 0;
      inset-inline: var(--pyro-toast-spacing, var(--pyro-spacing-l));
      padding-block-end: var(--pyro-toast-spacing, var(--pyro-spacing-l));
    }
    output {
      border: var(--pyro-toast-border, var(--pyro-border));
      padding: var(--pyro-toast-spacing, var(--pyro-spacing));
      border-radius: var(--pyro-toast-border-radius, var(--pyro-border-radius));
      pointer-events: auto;
      animation:
        fade-in 0.3s ease,
        slide-in 0.3s ease,
        fade-out 0.3s ease var(--internal-duration);
    }
    :host([top]) section {
      inset-block-start: 0;
      inset-block-end: unset;
    }
    :host([left]) section {
      justify-content: left;
    }
    :host([center]) section {
      justify-content: center;
    }

    :host output {
      background: var(--pyro-toast-info-color-lighter, var(--pyro-info-color-lighter));
      border-color: var(--pyro-toast-info-color, var(--pyro-info-color));
      color: var(--toast-tag-text-color, var(--pyro-text-color-on-info));
    }
    :host([severity='success']) output {
      background: var(--pyro-toast-success-color-lighter, var(--pyro-success-color-lighter));
      border-color: var(--pyro-toast-success-color, var(--pyro-success-color));
      color: var(--toast-tag-text-color, var(--pyro-text-color-on-success));
    }
    :host([severity='warning']) output {
      background: var(--pyro-toast-warning-color-lighter, var(--pyro-warning-color-lighter));
      border-color: var(--pyro-toast-warning-color, var(--pyro-warning-color));
      color: var(--toast-tag-text-color, var(--pyro-text-color-on-warning));
    }
    :host([severity='error']) output {
      background: var(--pyro-toast-error-color-lighter, var(--pyro-error-color-lighter));
      border-color: var(--pyro-toast-error-color, var(--pyro-error-color));
      color: var(--toast-tag-text-color, var(--pyro-text-color-on-error));
    }

    @keyframes fade-in {
      from {
        opacity: 0;
      }
    }

    @keyframes fade-out {
      to {
        opacity: 0;
      }
    }

    @keyframes slide-in {
      from {
        transform: translateY(5vh);
      }
    }
  `;
i([
  n()
], r.prototype, "message", 2);
i([
  n({ type: Number })
], r.prototype, "duration", 2);
i([
  n({ reflect: !0 })
], r.prototype, "severity", 2);
i([
  n({ type: Boolean, reflect: !0 })
], r.prototype, "top", 2);
i([
  n({ type: Boolean, reflect: !0 })
], r.prototype, "left", 2);
i([
  n({ type: Boolean, reflect: !0 })
], r.prototype, "center", 2);
r = i([
  d("pyro-toast")
], r);
const m = (t, e = { selector: "body" }) => {
  var s;
  let o = document.querySelector("pyro-toast");
  o || (o = document.createElement("pyro-toast"), (s = document.querySelector(e.selector)) == null || s.appendChild(o)), e.duration && (o.duration = e.duration), o.message = t, setTimeout(() => {
    o.message = "";
  }, 10);
};
export {
  r as PyroToast,
  m as showToast
};