pyro/dist/skeleton.js

Pyro custom elements

import { i as p, r as c, x as d, t as u } from "./custom-element-CWJsDAat.js";
import { n as y } from "./property-Bf-I6Ep_.js";
var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (a, e, s, o) => {
  for (var r = o > 1 ? void 0 : o ? v(e, s) : e, i = a.length - 1, n; i >= 0; i--)
    (n = a[i]) && (r = (o ? n(e, s, r) : n(r)) || r);
  return o && r && f(e, s, r), r;
};
let t = class extends c {
  constructor() {
    super(...arguments), this.circle = !1;
  }
  render() {
    return d`<div role="alert" aria-busy="true"></div>`;
  }
};
t.styles = p`
    :host {
      display: inline-block;
      width: 100%;
      height: 1em;
      border-radius: var(--pyro-skeleton-border-radius, var(--pyro-border-radius));
      background: var(--pyro-skeleton-color, var(--pyro-border-color));
      animation: 2s ease-in-out 0.5s infinite normal none running skeletonfade;
    }
    :host([circle]) {
      border-radius: 50%;
    }
    @keyframes skeletonfade {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.4;
      }
      100% {
        opacity: 1;
      }
    }
  `;
l([
  y({ type: Boolean, reflect: !0 })
], t.prototype, "circle", 2);
t = l([
  u("pyro-skeleton")
], t);
export {
  t as PyroSkeleton
};