UNPKG

@ionic/core

Version:
4 lines • 4.23 kB
/*! * (C) Ionic http://ionicframework.com - MIT License */ import{r as t,c as i,h as e,f as s,g as o,d as a}from"./p-BpRUsN_W.js";import{a as n}from"./p-nCAPr1Ah.js";import"./p-Co7eql8D.js";import"./p-Dojwmvde.js";const h=class{constructor(i){t(this,i),this.active=!1}async componentWillLoad(){this.active&&await this.setActive()}async setActive(){await this.prepareLazyLoaded(),this.active=!0}changeActive(t){t&&this.prepareLazyLoaded().catch((t=>{i("[ion-tab] - Exception in prepareLazyLoaded:",t)}))}prepareLazyLoaded(){return null==this.component?Promise.resolve(void 0):(void 0===this.loadPromise&&(this.loadPromise=n(this.delegate,this.el,this.component,["ion-page"]).catch((t=>{throw this.loadPromise=void 0,t}))),this.loadPromise)}render(){const{tab:t,active:i,component:o}=this;return e(s,{key:"8ecbd7a85d3370ed8ed40561cd8134e71584d6aa",role:"tabpanel","aria-hidden":i?null:"true","aria-labelledby":`tab-button-${t}`,class:{"ion-page":void 0===o,"tab-hidden":!i}},e("slot",{key:"8d6326d75812888e33fd09665b7e588e1e270df1"}))}get el(){return o(this)}static get watchers(){return{active:[{changeActive:0}]}}};h.style=":host(.tab-hidden){display:none !important}";const r=class{constructor(i){t(this,i),this.ionNavWillLoad=a(this,"ionNavWillLoad",7),this.ionTabsWillChange=a(this,"ionTabsWillChange",3),this.ionTabsDidChange=a(this,"ionTabsDidChange",3),this.transitioning=!1,this.useRouter=!1,this.onTabClicked=t=>{const{href:i,tab:e}=t.detail;if(this.useRouter&&void 0!==i){const t=document.querySelector("ion-router");t&&t.push(i)}else this.select(e)}}async componentWillLoad(){if(this.useRouter||(this.useRouter=!(!this.el.querySelector("ion-router-outlet")&&!document.querySelector("ion-router")||this.el.closest("[no-router]"))),!this.useRouter){const t=this.tabs;t.length>0&&await this.select(t[0])}this.ionNavWillLoad.emit()}componentDidLoad(){this.updateTabBar()}componentDidUpdate(){this.updateTabBar()}updateTabBar(){const t=this.el.querySelector("ion-tab-bar");if(!t)return;const i=this.selectedTab?this.selectedTab.tab:void 0;void 0!==i&&t.selectedTab!==i&&(t.selectedTab=i)}async select(t){const i=d(this.tabs,t);return!!this.shouldSwitch(i)&&(await this.setActive(i),await this.notifyRouter(),this.tabSwitch(),!0)}async getTab(t){return d(this.tabs,t)}getSelected(){return Promise.resolve(this.selectedTab?this.selectedTab.tab:void 0)}async setRouteId(t){const i=d(this.tabs,t);return this.shouldSwitch(i)?(await this.setActive(i),{changed:!0,element:this.selectedTab,markVisible:()=>this.tabSwitch()}):{changed:!1,element:this.selectedTab}}async getRouteId(){const t=this.selectedTab?.tab;return void 0!==t?{id:t,element:this.selectedTab}:void 0}setActive(t){return this.transitioning?Promise.reject("transitioning already happening"):(this.transitioning=!0,this.leavingTab=this.selectedTab,this.selectedTab=t,this.ionTabsWillChange.emit({tab:t.tab}),t.active=!0,this.updateTabBar(),Promise.resolve())}tabSwitch(){const t=this.selectedTab,i=this.leavingTab;this.leavingTab=void 0,this.transitioning=!1,t&&i!==t&&(i&&(i.active=!1),this.ionTabsDidChange.emit({tab:t.tab}))}notifyRouter(){if(this.useRouter){const t=document.querySelector("ion-router");if(t)return t.navChanged("forward")}return Promise.resolve(!1)}shouldSwitch(t){return void 0!==t&&t!==this.selectedTab&&!this.transitioning}get tabs(){return Array.from(this.el.querySelectorAll("ion-tab"))}render(){return e(s,{key:"7b8c6455e0673e343d0c759ed85e0d9970de3bb8",onIonTabButtonClick:this.onTabClicked},e("slot",{key:"7d0d840ae03312ca22bcb694ffca738d6648218e",name:"top"}),e("div",{key:"f336d903800af34af0d36adfc94223b940111e6a",class:"tabs-inner"},e("slot",{key:"14656154959a24ae176eff20f6463043180d2eae"})),e("slot",{key:"2be4d114f058d24b0e70fb12cfb0eccd3d6e6a74",name:"bottom"}))}get el(){return o(this)}},d=(t,e)=>{const s="string"==typeof e?t.find((t=>t.tab===e)):e;return s||i(`[ion-tabs] - Tab with id: "${s}" does not exist`),s};r.style=":host{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;contain:layout size style;z-index:0}.tabs-inner{position:relative;-ms-flex:1;flex:1;contain:layout size style}";export{h as ion_tab,r as ion_tabs}