text: import{LitElement as e,html as i,css as t}from"../../lit-element/lit-element.js";import"../simple-modal/simple-modal.js";import{ImgViewViewer as l}from"./lib/img-view-viewer.js";import{ImgPanZoom as o}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,...o.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=window.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"},a=document.createElement("img-view-viewer");[...Object.keys(l.properties||{}),...Object.keys(o.properties||{})].forEach(e=>{this[e]&&(a[e]=this[e])}),Object.keys(t||{}).forEach(e=>a.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:a},styles:{"--simple-modal-width":"50vw","--simple-modal-max-width":"75vw","--simple-modal-min-height":"50vh"},styles:i,invokedBy:this,clone:!1}}),this.dispatchEvent(e)}}}window.customElements.define(ImgViewModal.tag,ImgViewModal);export{ImgViewModal};