import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-5568e3fa.js';

const overlayCss = "sparkle-overlay{--sparkle-z-index-xl:500;--sparkle-transition-fast:0.3s;--sparkle-color-light-base:197, 209, 218;--sparkle-shadow-xl:0 20px 40px rgba(0, 0, 0, 0.2)}.sparkle-overlay{-ms-flex-align:center;align-items:center;display:flex;visibility:hidden;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:auto;-ms-touch-action:none;touch-action:none;opacity:0;z-index:var(--sparkle-z-index-xl)}.sparkle-overlay,.sparkle-overlay.opened{-webkit-transition:all var(--sparkle-transition-fast) ease-in-out;transition:all var(--sparkle-transition-fast) ease-in-out}.sparkle-overlay.opened{visibility:visible;opacity:1}.sparkle-overlay.opened .content{-webkit-transition:all var(--sparkle-transition-fast) ease-in-out;transition:all var(--sparkle-transition-fast) ease-in-out}.sparkle-overlay.light{background-color:rgba(var(--sparkle-color-light-base), 0.6)}.sparkle-overlay.dark{background-color:rgba(var(--sparkle-color-dark-base), 0.6)}.sparkle-overlay.absolute{position:absolute}.sparkle-overlay .scrim{border-radius:inherit;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;-webkit-transition:inherit;transition:inherit;width:100%;will-change:opacity}.sparkle-overlay .content{position:relative;outline:none;-webkit-box-shadow:var(--sparkle-shadow-xl);box-shadow:var(--sparkle-shadow-xl);-webkit-transition:all var(--sparkle-transition-fast) ease-in-out;transition:all var(--sparkle-transition-fast) ease-in-out}";

const FOCUSABLE_ELEMENTS = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex="0"]';
const SparkleOverlay = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.shown = createEvent(this, "shown", 7);
    this.hidden = createEvent(this, "hidden", 7);
    this.theme = 'dark';
    this.preventClose = false;
    this.focusIndex = 0;
    this.isShowing = false;
  }
  async show() {
    this.$focusedElBeforeOpen = document.activeElement;
    this.$focusedElBeforeOpen && this.$focusedElBeforeOpen.setAttribute("aria-expanded", "true");
    this.isShowing = true;
    if (this.$focusableEls.length > 0)
      setTimeout(() => this.$focusableEls[0].focus(), 100);
    else
      setTimeout(() => this.$content.focus(), 100);
    this.shown.emit();
  }
  async hide() {
    this.isShowing = false;
    this.focusIndex = 0;
    if (this.$focusedElBeforeOpen) {
      this.$focusedElBeforeOpen.setAttribute("aria-expanded", "false");
      this.$focusedElBeforeOpen.focus();
    }
    this.hidden.emit();
  }
  handleKeyDown(e) {
    const KEY_TAB = 9;
    const KEY_ESC = 27;
    switch (e.keyCode) {
      case KEY_TAB:
        this.handleTab(e);
        break;
      case KEY_ESC:
        this.handleEsc();
        break;
    }
  }
  handleEsc() {
    if (!this.preventClose)
      this.hide();
  }
  handleTab(e) {
    e.preventDefault();
    if (e.shiftKey) {
      this.handleBackwardTab();
    }
    else {
      this.handleForwardTab();
    }
  }
  handleBackwardTab() {
    this.focusIndex = this.focusIndex === 0 ? this.$focusableEls.length - 1 : --this.focusIndex;
    this.$focusableEls[this.focusIndex].focus();
  }
  handleForwardTab() {
    this.focusIndex = this.$focusableEls.length - 1 === this.focusIndex ? 0 : ++this.focusIndex;
    this.$focusableEls[this.focusIndex].focus();
  }
  handleScrimClick() {
    if (!this.preventClose)
      this.hide();
  }
  componentDidLoad() {
    this.$focusableEls = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS));
  }
  render() {
    let classes = {
      'sparkle-overlay': true,
      [this.theme]: true,
      'absolute': this.absolute,
      'opened': this.isShowing
    };
    return (h(Host, { class: classes }, h("div", { class: "scrim", onClick: () => this.handleScrimClick() }), h("div", { class: "content", role: "dialog", "aria-labelledby": this.titleId, tabindex: "-1", ref: el => this.$content = el }, h("slot", null))));
  }
  get $el() { return getElement(this); }
};
SparkleOverlay.style = overlayCss;

export { SparkleOverlay as sparkle_overlay };
