/**
 * Copyright 2021 The Pennsylvania State University
 * @license Apache-2.0, see License.md for full text.
 */
import{DeviceDetails as t}from"./lib/PerformanceDetect.js";import{WCRegistryLoaderCSS as e}from"./lib/loading-styles.js";class ReplaceTag extends(function(i){return class extends i{constructor(){super()}connectedCallback(){super.connectedCallback&&super.connectedCallback(),this.evaluateReplaceMethod()}performanceBasedReplacement(){this.setAttribute("laser-loader","laser-loader"),this.importingText||(this.importingText="Loading..."),this.render(),this.runReplacement()}async evaluateReplaceMethod(){e();let i=await t.badDevice();"view"!=this.getAttribute("import-method")&&null==this.getAttribute("import-only")&&i&&(this.importingText||(this.importingText="Click to load"),this.addEventListener("click",this.performanceBasedReplacement)),i&&null==this.getAttribute("import-only")&&"view"!=this.getAttribute("import-method")||(this.setAttribute("laser-loader","laser-loader"),this.importingText||(this.importingText="Loading..."),this.intersectionObserver||(this.intersectionObserver=new IntersectionObserver(this.handleIntersectionCallback.bind(this),{rootMargin:"0px",threshold:[0,.25,.5,.75,1],delay:150}),this.intersectionObserver.observe(this))),this.render()}handleIntersectionCallback(t){for(let e of t){Number(e.intersectionRatio).toFixed(2)>=.25&&(this.intersectionObserver&&this.intersectionObserver.disconnect(),this.intersectionObserver=null,this.runReplacement())}}runReplacement(){this.getAttribute("with")?import("../wc-autoload/wc-autoload.js").then((()=>{globalThis.WCAutoload.process().then((()=>{globalThis.WCAutoload.requestAvailability().registry.loadDefinition(this.getAttribute("with"))}))})):console.warn("replace-tag requires use of with attribute for what to upgrade to")}}}(HTMLElement)){constructor(){if(super(),this.getAttribute("importing-text")&&(this.importingText=this.getAttribute("importing-text")),this.exists=!0,customElements.get(this.getAttribute("with"))){let r={};if(null!=this.getAttribute("import-only"))this.exists=!1,setTimeout((()=>{this.remove()}),0);else{for(var t=0,e=this.attributes,i=e.length;t<i;t++)r[e[t].nodeName]=e[t].nodeValue;let n=globalThis.document.createElement(r.with);for(var t in r)if(null!=r[t])try{n.setAttribute(t,r[t])}catch(e){console.warn("Invalid Attribute Name detected: "+t)}n.removeAttribute("laser-loader"),n.removeAttribute("with"),n.removeAttribute("import-method"),n.removeAttribute("importing-text"),n.innerHTML=this.innerHTML,this.replaceWith(n)}}else customElements.whenDefined(this.getAttribute("with")).then((t=>{let e={};if(null!=this.getAttribute("import-only"))this.exists=!1,setTimeout((()=>{this.remove()}),0);else{for(var i=0,r=this.attributes,n=r.length;i<n;i++)e[r[i].nodeName]=r[i].nodeValue;let t=globalThis.document.createElement(e.with);for(var i in t.setAttribute("popup-loader","popup-loader"),e)if(null!=e[i])try{t.setAttribute(i,e[i])}catch(t){console.warn("Invalid Attribute Name detected: "+i)}t.removeAttribute("laser-loader"),t.innerHTML=this.innerHTML,this.replaceWith(t),setTimeout((()=>{t.removeAttribute("popup-loader"),t.removeAttribute("with"),t.removeAttribute("import-method"),t.removeAttribute("importing-text"),t.removeAttribute("laser-loader"),t.style.setProperty("--laserEdgeAni-width",null),t.style.setProperty("--laserEdgeAni-innerWidth",null),t.style.setProperty("--laserEdgeAni-height",null),t.style.setProperty("--laserEdgeAni-innerHeight",null)}),250)}setTimeout((()=>{globalThis.document.body.querySelectorAll('replace-tag[with="'+e.with+'"]').forEach((t=>{t.runReplacement()}))}),0)}));this.exists&&(this.template=globalThis.document.createElement("template"),this.attachShadow({mode:"open"}))}static get tag(){return"replace-tag"}get html(){return`\n    <style>\n    :host {\n      display: block;\n      opacity: .2;\n      transition: .3s linear opacity,.3s linear outline,.3s linear visibility,.3s linear display;\n    }\n    :host([import]) {\n      opacity: .1 !important;\n      background-color: transparent !important;\n      color: transparent !important;\n      padding: 0 !important;\n      margin: 0 !important;\n      font-size: 2px !important;\n      line-height: 2px !important;\n      height:2px;\n    }\n    div {\n      font-size: 12px;\n    }\n    :host(:not([import-method="click"])) {\n      background-color: #FEFEFE33;\n      font-size: 12px;\n      opacity: .8;\n      margin: 12px;\n      padding: 12px;\n    }\n    :host(:not([import-method="click"]):hover) {\n      opacity: 1 !important;\n      outline: 1px solid black;\n      cursor: pointer;\n    }\n    :host([hidden]) {\n      display: none;\n    }\n    </style>\n<div>${this.importingText}</div>`}render(){this.exists&&(this.shadowRoot.innerHTML=null,this.template.innerHTML=this.html,globalThis.ShadyCSS&&globalThis.ShadyCSS.prepareTemplate(this.template,this.tag),this.shadowRoot.appendChild(this.template.content.cloneNode(!0)))}}customElements.define(ReplaceTag.tag,ReplaceTag);export{ReplaceTag};