UNPKG

@limetech/lime-elements

Version:
1 lines 2.13 kB
import{r as t,c as s,h as a,H as e,a as i}from"./p-DBTJNfo7.js";import{d as h}from"./p-z_E3sq3p.js";const o=class{constructor(a){t(this,a),this.changeTab=s(this,"changeTab"),this.tabs=[],this.slotElements=[],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();t&&(t.addEventListener("slotchange",this.setSlotElements),this.setSlotElements(),this.tabs.forEach(this.setTabStatus))}disconnectedCallback(){this.getSlot().removeEventListener("slotchange",this.setSlotElements)}tabsChanged(){this.hidePanels(),this.tabs.forEach(this.setTabStatus)}render(){return a(e,{key:"ebab881a0b0efc36b64c866b58b919890c526525",onChangeTab:this.handleChangeTabs},a("div",{key:"1417a34aea0af009e44cd91ac8fd425412a2b706",class:"tab-panel"},a("limel-tab-bar",{key:"5b420eeec41fdd353ba0ba36bb0e475c3fd26821",tabs:this.tabs}),a("div",{key:"aa3d6f711a824a07eed6f2b5120497dd4218ed7b",class:"tab-content"},a("slot",{key:"7ba511fa07bd96018e4d8d288d7b1dca572cead0"}))))}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));s&&(s.style.display=t.active?"":"none",s.tab=t)}handleChangeTabs(t){this.tabs=this.tabs.map((s=>s.id===t.detail.id?t.detail:s)),this.setTabStatus(t.detail),setTimeout(h)}getSlot(){return this.host.shadowRoot.querySelector("slot")}hidePanels(){for(const t of this.slotElements)t.style.display="none"}get host(){return i(this)}static get watchers(){return{tabs:[{tabsChanged:0}]}}};o.style=":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)}";export{o as limel_tab_panel}