import{LitElement as t,html as e,css as i}from"lit";import{ifDefined as o}from"lit/directives/if-defined.js";import"./cc-loader.js";class r extends t{static get properties(){return{iframeTitle:{type:String,attribute:"iframe-title"},loading:{type:Boolean,reflect:!0},sandbox:{type:String}}}constructor(){super(),this.loading=!1,this.sandbox=null,this.iframeTitle=""}_updateHtmlSource(){if(1===this.children.length&&"TEMPLATE"===this.children[0].tagName){const t=this.children[0],e=new Blob([t.innerHTML],{type:"text/html"});this._blobUrl&&window.URL.revokeObjectURL(this._blobUrl),this._blobUrl=window.URL.createObjectURL(e);const i=this.shadowRoot.querySelector("iframe");this.loading=!0,i.addEventListener("load",(()=>this.loading=!1),{once:!0}),i.src=this._blobUrl}}connectedCallback(){super.connectedCallback(),this._mo=new MutationObserver((()=>this._updateHtmlSource())),this._mo.observe(this,{childList:!0})}disconnectedCallback(){super.disconnectedCallback(),this._mo.disconnect(),this._blobUrl&&window.URL.revokeObjectURL(this._blobUrl)}firstUpdated(){this._updateHtmlSource()}render(){return e`
      <iframe title=${this.iframeTitle} src="about:blank" sandbox=${o(this.sandbox??void 0)}></iframe>
      ${this.loading?e` <cc-loader></cc-loader> `:""}
    `}static get styles(){return[i`
        :host {
          display: block;
          position: relative;
        }

        iframe {
          border: none;
          height: 100%;
          width: 100%;
        }

        :host([loading]) iframe {
          opacity: 0.25;
        }

        cc-loader {
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
      `]}}window.customElements.define("cc-html-frame",r);export{r as CcHtmlFrame};
//# sourceMappingURL=cc-html-frame.js.map
