pyro/dist/dialog.js

Pyro custom elements

import { i as p, r as n, x as c, t as g } from "./custom-element-CWJsDAat.js";
import { n as h } from "./property-Bf-I6Ep_.js";
import { e as v } from "./query-Ddbd72Um.js";
var y = Object.defineProperty, f = Object.getOwnPropertyDescriptor, d = (r, e, a, i) => {
  for (var o = i > 1 ? void 0 : i ? f(e, a) : e, s = r.length - 1, l; s >= 0; s--)
    (l = r[s]) && (o = (i ? l(e, a, o) : l(o)) || o);
  return i && o && y(e, a, o), o;
};
let t = class extends n {
  constructor() {
    super(...arguments), this.open = !1, this.show = () => {
      this.open = !0, this._dialog.showModal();
    }, this.close = () => {
      this.open = !1, this._dialog.close();
    };
  }
  updated() {
    this.open ? this.show() : this.close();
  }
  firstUpdated() {
    const r = this.shadowRoot.querySelector('slot[name="content"]');
    r == null || r.assignedElements().forEach((e) => {
      e.querySelectorAll("[data-close]").forEach((a) => {
        a.addEventListener("click", this.close);
      });
    });
  }
  render() {
    return c`
      <dialog @close=${this.close} part="dialog">
        <div>
          <slot name="content"></slot>
        </div>
      </dialog>
      <slot name="action" @click=${this.show}></slot>
    `;
  }
};
t.styles = p`
    :host {
      display: block;
    }
    ::backdrop {
      background: var(--pyro-dialog-surface-color, var(--pyro-surface-color));
      opacity: 0.75;
    }
    dialog {
      border: none;
      background: transparent;
      max-width: 75%;
      min-width: 25%;
      padding: 0;
    }
    dialog > div {
      color: var(--pyro-dialog-text-color, var(--pyro-text-color-on-surface, var(--pyro-text-color)));
      background: var(--pyro-dialog-surface-color, var(--pyro-surface-color));
      padding: var(--pyro-dialog-spacing, var(--pyro-spacing-l));
      border: var(--pyro-dialog-border, var(--pyro-border));
      border-radius: var(--pyro-dialog-border-radius, var(--pyro-border-radius));
    }
    dialog[open] div {
      animation: open 0.1s forwards;
    }

    @media screen and (max-width: 600px) {
      dialog {
        max-width: 95%;
        min-width: 95%;
      }
    }

    @keyframes open {
      from {
        margin-top: 30vh;
      }
      to {
        margin-top: 0;
      }
    }
  `;
d([
  h({ type: Boolean, reflect: !0 })
], t.prototype, "open", 2);
d([
  v("dialog")
], t.prototype, "_dialog", 2);
t = d([
  g("pyro-dialog")
], t);
export {
  t as PyroDialog
};