UNPKG

@limetech/lime-elements

Version:
2 lines 2.04 kB
import{r as t,c as s,h as i,H as e,g as a}from"./p-288f0842.js";import{d as o}from"./p-c70b1ea3.js";const h=":host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}";const n=class{constructor(i){t(this,i);this.changeTab=s(this,"changeTab",7);this.slotElements=[];this.tabs=[];this.handleChangeTabs=this.handleChangeTabs.bind(this);this.setSlotElements=this.setSlotElements.bind(this);this.setTabStatus=this.setTabStatus.bind(this)}connectedCallback(){this.initialize()}componentDidLoad(){this.initialize()}initialize(){const t=this.getSlot();if(!t){return}t.addEventListener("slotchange",this.setSlotElements);this.setSlotElements();this.tabs.forEach(this.setTabStatus)}disconnectedCallback(){const t=this.getSlot();t.removeEventListener("slotchange",this.setSlotElements)}tabsChanged(){this.hidePanels();this.tabs.forEach(this.setTabStatus)}render(){return i(e,{onChangeTab:this.handleChangeTabs},i("div",{class:"tab-panel"},i("limel-tab-bar",{tabs:this.tabs}),i("div",{class:"tab-content"},i("slot",null))))}setSlotElements(){const t=this.getSlot();this.hidePanels();this.slotElements=Array.prototype.slice.call(t.assignedElements());this.tabs.forEach(this.setTabStatus)}setTabStatus(t){const s=this.slotElements.find((s=>s.id===t.id));if(!s){return}if(t.active){s.style.display=""}else{s.style.display="none"}s["tab"]=t}handleChangeTabs(t){this.tabs=this.tabs.map((s=>{if(s.id===t.detail.id){return t.detail}return s}));this.setTabStatus(t.detail);setTimeout(o)}getSlot(){return this.host.shadowRoot.querySelector("slot")}hidePanels(){for(const t of this.slotElements){t.style.display="none"}}get host(){return a(this)}static get watchers(){return{tabs:["tabsChanged"]}}};n.style=h;export{n as limel_tab_panel}; //# sourceMappingURL=p-2fdb51de.entry.js.map