import{LitElement as e,html as i,css as t}from"../../lit/index.js";import"../simple-modal/simple-modal.js";import{ImgViewViewer as l}from"./lib/img-view-viewer.js";import{ImgPanZoom as a}from"../img-pan-zoom/img-pan-zoom.js";class ImgViewModal extends e{static get tag(){return"img-view-modal"}static get properties(){return{...l.properties,...a.properties,title:{type:String},modal:{type:Object}}}static get styles(){return t`
      :host {
        display: block;
        --simple-modal-width: var(--img-view-modal-width, 90%);
        --simple-modal-height: var(--img-view-modal-height, 90vh);
        --simple-modal-titlebar-height: 40px;
        --simple-modal-titlebar-line-height: 40px;
        --simple-modal-titlebar-height: 40px;
        --simple-modal-titlebar-padding: 0px 5px 0px 15px;
        --simple-modal-titlebar-background: var(
          --img-view-modal-backgroundColor,
          white
        );
        --simple-modal-header-background: var(
          --img-view-modal-backgroundColor,
          white
        );
        --simple-modal-header-color: var(--img-view-modal-color, black);
        --simple-modal-header-padding: 0px;
        --simple-modal-content-padding: 0px;
        --simple-modal-buttons-padding: 0px;
        --img-view-viewer-height: calc(
          var(--simple-modal-height) - var(--simple-modal-titlebar-height)
        );
        --img-view-viewer-backgroundColor: var(
          --img-view-modal-backgroundColor,
          white
        );
        --img-view-viewer-color: var(--img-view-modal-color, black);
        --img-view-viewer-borderColor: var(--img-view-modal-borderColor, #ddd);
        --img-view-viewer-toggled-backgroundColor: var(
          --img-view-modal-toggled-backgroundColor,
          #eee
        );
      }
      :host([hidden]) {
        display: none;
      }
    `}constructor(){super(),this.modal=globalThis.SimpleModal.requestAvailability(),this.addEventListener("click",this.modalOpen)}render(){return i` <slot></slot> `}_getCssVar(e){return getComputedStyle(this).getPropertyValue(e)}modalOpen(){if(!this.disabled){let e,i={"--simple-modal-width":this._getCssVar("--simple-modal-width")||"90%","--simple-modal-height":this._getCssVar("--simple-modal-height")||"90vh","--simple-modal-titlebar-height":this._getCssVar("--simple-modal-titlebar-height")||"40px","--simple-modal-titlebar-line-height":this._getCssVar("--simple-modal-titlebar-line-height")||"40px","--simple-modal-titlebar-height":this._getCssVar("--simple-modal-titlebar-height")||"40px","--simple-modal-titlebar-padding":this._getCssVar("--simple-modal-titlebar-padding")||"0px 5px 0px 15px","--simple-modal-titlebar-background":this._getCssVar("--simple-modal-titlebar-background")||"white","--simple-modal-header-background":this._getCssVar("--simple-modal-header-background")||"white","--simple-modal-header-color":this._getCssVar("--simple-modal-header-color")||"black","--simple-modal-header-padding":this._getCssVar("--simple-modal-header-padding")||"0px","--simple-modal-content-padding":this._getCssVar("--simple-modal-content-padding")||"0px","--simple-modal-buttons-padding":this._getCssVar("--simple-modal-buttons-padding")||"0px"},t={"--img-view-viewer-backgroundColor":this._getCssVar("i--mg-view-viewer-backgroundColor")||"white","--img-view-viewer-height":"calc(var(--simple-modal-height) - var(--simple-modal-titlebar-height))","--img-view-viewer-color":this._getCssVar("--img-view-viewer-color")||"black","--img-view-viewer-borderColor":this._getCssVar("--img-view-viewer-borderColor")||"#ddd","--img-view-viewer-toggled-backgroundColor":this._getCssVar("--img-view-viewer-toggled-backgroundColor")||"#eee"},o=globalThis.document.createElement("img-view-viewer");[...Object.keys(l.properties||{}),...Object.keys(a.properties||{})].forEach((e=>{this[e]&&(o[e]=this[e])})),Object.keys(t||{}).forEach((e=>o.style.setProperty(e,t[e]))),this.dispatchEvent(new CustomEvent("modal-button-click",{bubbles:!0,cancelable:!0,composed:!0,detail:this})),e=new CustomEvent("simple-modal-show",{bubbles:!0,composed:!0,cancelable:!1,detail:{title:this.title||!1,elements:{content:o},styles:{"--simple-modal-width":"50vw","--simple-modal-max-width":"75vw","--simple-modal-z-index":"100000000","--simple-modal-min-height":"50vh"},styles:i,invokedBy:this,clone:!1}}),this.dispatchEvent(e)}}}customElements.define(ImgViewModal.tag,ImgViewModal);export{ImgViewModal};