text: const e=window.App.h;import{a as t,b as i,c as o,d as s}from"./chunk-19f026a9.js";class a{constructor(){this.sidebarVisible=!0,this.activeDevices=[t,i],this.details={}}componentWillLoad(){this.loadAppDetails(),this.loadLocalStorageState()}componentWillUpdate(){this.saveLocalStorageState()}loadAppDetails(){const e=this,t=new XMLHttpRequest;t.addEventListener("load",function(){try{e.details=JSON.parse(this.responseText)}catch(e){console.error("Error loading app details from Ionic Lab API!"),console.error("Response was:",this.responseText)}}),t.addEventListener("error",e=>{console.error("Error loading app details from Ionic Lab API!"),console.error("Error was:",e)}),t.open("GET","/api/app"),t.send()}loadLocalStorageState(){const e=localStorage.getItem("ionic-lab-platforms");e&&(this.activeDevices=JSON.parse(e));const t=localStorage.getItem("ionic-lab-sidebar-open");t&&(this.sidebarVisible=JSON.parse(t))}saveLocalStorageState(){localStorage.setItem("ionic-lab-platforms",JSON.stringify(this.activeDevices)),localStorage.setItem("ionic-lab-sidebar-open",JSON.stringify(this.sidebarVisible))}sidebarCloseClickedHander(e){this.sidebarVisible=!1}ionlabPlatformToggledHandler(e){this.togglePlatform(e.detail)}togglePlatform(e){const t=this.activeDevices.indexOf(e),i=[...this.activeDevices];t>=0?i.splice(t,1):i.push(e),this.activeDevices=i}render(){return[e("header",null,e("div",{id:"header-left"},e("i",{class:"menu-icon icon ion-navicon-round",onClick:()=>this.sidebarVisible=!this.sidebarVisible}),e("div",{id:"logo"})),e("div",{id:"header-right"},e("a",{href:this.details.url},e("button",{type:"button"},"Open fullscreen",e("i",{class:"fullscreen-icon icon ion-share"}))),e("ionlab-platform-dropdown",{activePlatforms:this.activeDevices}))),e("main",null,e("ionlab-sidebar",{visible:this.sidebarVisible}),e("ionlab-preview",{projectType:this.details.projectType,url:this.details.url,activeDevices:this.activeDevices})),e("footer",null,e("div",{id:"footer-left"},e("div",{id:"app-info"},[this.details.name,this.details.version].filter(e=>e).join(" - "))),e("div",{id:"footer-right"},e("a",{href:"https://twitter.com/ionicframework"},"Twitter"),e("a",{href:"https://ionicframework.com/docs"},"Documentation"),e("a",{href:"https://forum.ionicframework.com/"},"Forum"),e("a",{href:"https://github.com/ionic-team/ionic"},"GitHub")))]}static get is(){return"ionlab-app"}static get properties(){return{activeDevices:{state:!0},details:{state:!0},sidebarVisible:{state:!0}}}static get listeners(){return[{name:"ionlabSidebarCloseClicked",method:"sidebarCloseClickedHander"},{name:"ionlabPlatformToggled",method:"ionlabPlatformToggledHandler"}]}}class r{constructor(){this.visible=!1}platformActive(e){return this.activePlatforms.indexOf(e)>=0}renderPlatformCheckbox(t){return e("li",{onClick:()=>this.ionlabPlatformToggled.emit(t)},e("input",{type:"checkbox",name:t,checked:this.platformActive(t)}),e("label",null,o(t)))}render(){const t=["dropdown-menu"];return this.visible||t.push("hidden"),e("div",{class:"dropdown",onMouseOver:()=>this.visible=!0,onMouseOut:()=>this.visible=!1},e("button",{class:"dropdown-toggle",type:"button"},"Platforms",e("span",{class:"dropdown-caret"})),e("ul",{class:t.join(" ")},s.map(e=>this.renderPlatformCheckbox(e))))}static get is(){return"ionlab-platform-dropdown"}static get properties(){return{activePlatforms:{type:"Any",attr:"active-platforms"},visible:{state:!0}}}static get events(){return[{name:"ionlabPlatformToggled",method:"ionlabPlatformToggled",bubbles:!0,cancelable:!0,composed:!0}]}static get style(){return"#header-right .dropdown{position:relative;height:100%;display:inline-block;margin-right:10px}#header-right .dropdown-caret{display:inline-block;width:0;height:0;border-top:5px solid var(--icon-color);border-left:5px solid transparent;border-right:5px solid transparent}#header-right .dropdown-menu{display:block;position:absolute;z-index:999;width:150px;right:-10px;background-color:#fff;-webkit-box-shadow:0 6px 10px rgba(0,0,0,.08),0 0 6px rgba(0,0,0,.05);box-shadow:0 6px 10px rgba(0,0,0,.08),0 0 6px rgba(0,0,0,.05);line-height:1em;font-weight:400;margin:0;padding:5px 0}#header-right .dropdown-menu.hidden{display:none}#header-right li{cursor:pointer;list-style:none;padding:6px 5px}#header-right input,#header-right label{cursor:pointer;margin:0 5px}#header-right .dropdown-caret{margin-left:5px}"}}class l{hostData(){const e=[];return this.visible||e.push("hidden"),{class:e.join(" ")}}render(){return[e("h3",null,"Quick reference",e("i",{class:"icon ion-close-circled",onClick:()=>this.ionlabSidebarCloseClicked.emit()})),e("ul",{class:"menu"},e("li",null,e("a",{href:"https://ionicframework.com/docs/components"},"Components")),e("li",null,e("a",{href:"https://ionicframework.com/docs/api"},"API Reference")),e("li",null,e("a",{href:"https://ionicframework.com/docs/native"},"Ionic Native")),e("li",null,e("a",{href:"https://ionicframework.com/docs/"},"All Documentation")))]}static get is(){return"ionlab-sidebar"}static get properties(){return{visible:{type:Boolean,attr:"visible"}}}static get events(){return[{name:"ionlabSidebarCloseClicked",method:"ionlabSidebarCloseClicked",bubbles:!0,cancelable:!0,composed:!0}]}static get style(){return"ionlab-sidebar{position:relative;z-index:1;background-color:var(--section-bg);height:100%;width:300px;overflow:auto;padding:15px}ionlab-sidebar.hidden{display:none}ionlab-sidebar h3{color:#fff}ionlab-sidebar h3 .icon{float:right;font-size:24px;color:var(--font-color);margin-top:-5px;cursor:pointer}ionlab-sidebar .menu{list-style:none;margin:0;padding:0}ionlab-sidebar .menu li{margin:10px 0}"}}export{a as IonlabApp,r as IonlabPlatformDropdown,l as IonlabSidebar};