import { r as registerInstance, h, H as Host } from './index-c04b9ed5.js';

const modalImageCss = ":host{display:block}.overlay{opacity:0;visibility:hidden;position:fixed;width:100%;height:100%;top:0;left:0;background:rgba(0, 0, 0, 0.7);-webkit-transition:opacity 0.5s, visibility 0s 0.5s;transition:opacity 0.5s, visibility 0s 0.5s;display:flex;align-items:center;justify-content:center;z-index:100}.is-visible{opacity:1;visibility:visible;-webkit-transition:opacity 0.5s;transition:opacity 0.5s}.is-transparent{opacity:0}.modal-window{border-radius:25px;width:75%;height:75%;padding:50px;display:flex;align-items:center;justify-content:center}.modal-window__content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;animation-name:zoom;animation-duration:0.6s}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}";

const SparkleModalImage = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.openDialog = false;
    this.transparent = false;
  }
  handleKeyDown(ev) {
    if (ev.key === 'Escape') {
      this.openDialog = false;
    }
  }
  handleScroll() {
    if (this.openDialog) {
      this.openDialog = false;
    }
  }
  openImage() {
    this.openDialog = true;
  }
  render() {
    return (h(Host, null, h("a", { href: "javascript:void()", onClick: () => this.openImage() }, h("img", { src: this.src, alt: this.alt, width: this.width, height: this.height })), this.openDialog && h("div", { class: 'overlay ' + (this.openDialog ? 'is-visible' : '') + ' ' + (this.transparent ? 'is-transparent' : '') }, h("div", { class: "modal-window" }, h("div", { class: "modal-window__content" }, h("img", { src: this.src, alt: this.alt, width: this.width, height: this.height }))))));
  }
};
SparkleModalImage.style = modalImageCss;

export { SparkleModalImage as sparkle_modal_image };
