import{LitElement as e,html as t,css as i}from"../../lit/index.js";import"./lib/loading-indicator.js";export class IframeLoader extends e{static get tag(){return"iframe-loader"}static get properties(){return{loading:{type:Boolean},height:{type:String},width:{type:String},disabled:{type:Boolean,reflect:!0},source:{type:String,reflect:!0}}}static get styles(){return i`
      :host {
        display: block;
      }
      #container {
        position: relative;
      }
      :host([disabled]) #container {
        z-index: 1;
        opacity: 0.2;
        background-color: white;
        transition: 0.3s linear all;
      }
      :host([disabled]) #container:hover {
        opacity: 0.6;
      }
      :host([disabled]) #slot {
        z-index: -1;
        pointer-events: none;
      }
      #loading-screen {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .loaded #loading-screen {
        display: none;
      }
    `}constructor(){super(),this.invalidSource=!1,this.disabled=!1,this.loading=!0,this.height=500,this.width="100%",this.__iframe=null,this.querySelector("iframe")?(this.__iframe=this.querySelector("iframe"),this.__iframe.addEventListener("load",this.iframeLoadingCallback.bind(this)),this.__iframe.getAttribute("src")&&(this.source=this.__iframe.getAttribute("src"),this.height=this.__iframe.getAttribute("height")||this.height,this.width=this.__iframe.getAttribute("width")||this.width)):this.source=null,this.__mutationObserver=new MutationObserver((e=>{e.forEach((e=>{e.target.offsetHeight&&this.loading&&(this.height=e.target.offsetHeight)}))})),this.__observer=new MutationObserver((e=>{this.querySelector("iframe")&&(this.__iframe=this.querySelector("iframe"),this.source=this.__iframe.getAttribute("src"),this.__iframe.addEventListener("load",this.iframeLoadingCallback.bind(this)),this.__mutationObserver.observe(this.__iframe,{attributes:!0}))})),this.__observer.observe(this,{childList:!0}),this.querySelector("iframe-loader")&&this.querySelector("iframe-loader").remove()}iframeLoadingCallback(e){setTimeout((()=>{this.loading=!1,e&&e.path&&e.path[0]&&e.path[0].height&&(this.height=e.path[0].height)}),500)}haxHooks(){return{preProcessNodeToContent:"haxpreProcessNodeToContent",editModeChanged:"haxeditModeChanged",activeElementChanged:"haxactiveElementChanged"}}async haxpreProcessNodeToContent(e){return e.disabled=!1,e}haxactiveElementChanged(e,t){return this.disabled=!0,e.disabled=!0,e}haxeditModeChanged(e){this.disabled=e}static get haxProperties(){return new URL(`./lib/${this.tag}.haxProperties.json`,import.meta.url).href}firstUpdated(e){super.firstUpdated&&super.firstUpdated(e),this.querySelector("iframe")||(this.__iframe=globalThis.document.createElement("iframe"),this.__iframe.setAttribute("width",this.width),this.__iframe.setAttribute("height",this.height),this.__mutationObserver.observe(this.__iframe,{attributes:!0}),this.__iframe.setAttribute("src",this.source),this.appendChild(this.__iframe))}disconnectedCallback(){super.disconnectedCallback(),this.__iframe&&this.__iframe.removeEventListener("load",this.iframeLoadingCallback.bind(this)),this.__observer.disconnect()}updated(e){super.updated&&super.updated(e),e.forEach(((e,t)=>{this.invalidSource||("source"===t?this.__iframe?this.__iframe.setAttribute("src",this.source):(this.__iframe=globalThis.document.createElement("iframe"),this.__iframe.setAttribute("width",this.width),this.__iframe.setAttribute("height",this.height),this.__mutationObserver.observe(this.__iframe,{attributes:!0}),this.__iframe.setAttribute("src",this.source),this.appendChild(this.__iframe)):["height","width"].includes(t)&&this.__iframe&&this.__iframe.setAttribute(t,this[t]))}))}render(){return t`
      <div id="container" class="${this.loading?"loading":"loaded"}">
        <div id="loading-screen" style="height:${this.height}px;">
          <loading-indicator ?loading="${this.loading}"></loading-indicator>
        </div>
        <div id="slot" style="display: ${this.loading?"none":"block"}">
          <slot></slot>
        </div>
      </div>
    `}}customElements.define(IframeLoader.tag,IframeLoader);