1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, '__esModule', { value: true });
|
4 |
|
5 | const index = require('./index-a0a08b2a.js');
|
6 | const frameworkDelegate = require('./framework-delegate-45524d8c.js');
|
7 | require('./helpers-d381ec4d.js');
|
8 |
|
9 | const tabCss = ":host(.tab-hidden){display:none !important}";
|
10 |
|
11 | const Tab = class {
|
12 | constructor(hostRef) {
|
13 | index.registerInstance(this, hostRef);
|
14 | this.loaded = false;
|
15 |
|
16 | this.active = false;
|
17 | }
|
18 | async componentWillLoad() {
|
19 | if (this.active) {
|
20 | await this.setActive();
|
21 | }
|
22 | }
|
23 |
|
24 | async setActive() {
|
25 | await this.prepareLazyLoaded();
|
26 | this.active = true;
|
27 | }
|
28 | changeActive(isActive) {
|
29 | if (isActive) {
|
30 | this.prepareLazyLoaded();
|
31 | }
|
32 | }
|
33 | prepareLazyLoaded() {
|
34 | if (!this.loaded && this.component != null) {
|
35 | this.loaded = true;
|
36 | try {
|
37 | return frameworkDelegate.attachComponent(this.delegate, this.el, this.component, ['ion-page']);
|
38 | }
|
39 | catch (e) {
|
40 | console.error(e);
|
41 | }
|
42 | }
|
43 | return Promise.resolve(undefined);
|
44 | }
|
45 | render() {
|
46 | const { tab, active, component } = this;
|
47 | return (index.h(index.Host, { role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
|
48 | 'ion-page': component === undefined,
|
49 | 'tab-hidden': !active
|
50 | } }, index.h("slot", null)));
|
51 | }
|
52 | get el() { return index.getElement(this); }
|
53 | static get watchers() { return {
|
54 | "active": ["changeActive"]
|
55 | }; }
|
56 | };
|
57 | Tab.style = tabCss;
|
58 |
|
59 | const tabsCss = ":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}";
|
60 |
|
61 | const Tabs = class {
|
62 | constructor(hostRef) {
|
63 | index.registerInstance(this, hostRef);
|
64 | this.ionNavWillLoad = index.createEvent(this, "ionNavWillLoad", 7);
|
65 | this.ionTabsWillChange = index.createEvent(this, "ionTabsWillChange", 3);
|
66 | this.ionTabsDidChange = index.createEvent(this, "ionTabsDidChange", 3);
|
67 | this.transitioning = false;
|
68 |
|
69 | this.useRouter = false;
|
70 | this.onTabClicked = (ev) => {
|
71 | const { href, tab } = ev.detail;
|
72 | if (this.useRouter && href !== undefined) {
|
73 | const router = document.querySelector('ion-router');
|
74 | if (router) {
|
75 | router.push(href);
|
76 | }
|
77 | }
|
78 | else {
|
79 | this.select(tab);
|
80 | }
|
81 | };
|
82 | }
|
83 | async componentWillLoad() {
|
84 | if (!this.useRouter) {
|
85 | this.useRouter = !!document.querySelector('ion-router') && !this.el.closest('[no-router]');
|
86 | }
|
87 | if (!this.useRouter) {
|
88 | const tabs = this.tabs;
|
89 | if (tabs.length > 0) {
|
90 | await this.select(tabs[0]);
|
91 | }
|
92 | }
|
93 | this.ionNavWillLoad.emit();
|
94 | }
|
95 | componentWillRender() {
|
96 | const tabBar = this.el.querySelector('ion-tab-bar');
|
97 | if (tabBar) {
|
98 | const tab = this.selectedTab ? this.selectedTab.tab : undefined;
|
99 | tabBar.selectedTab = tab;
|
100 | }
|
101 | }
|
102 | |
103 |
|
104 |
|
105 |
|
106 |
|
107 | async select(tab) {
|
108 | const selectedTab = getTab(this.tabs, tab);
|
109 | if (!this.shouldSwitch(selectedTab)) {
|
110 | return false;
|
111 | }
|
112 | await this.setActive(selectedTab);
|
113 | await this.notifyRouter();
|
114 | this.tabSwitch();
|
115 | return true;
|
116 | }
|
117 | |
118 |
|
119 |
|
120 |
|
121 |
|
122 | async getTab(tab) {
|
123 | return getTab(this.tabs, tab);
|
124 | }
|
125 | |
126 |
|
127 |
|
128 | getSelected() {
|
129 | return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);
|
130 | }
|
131 |
|
132 | async setRouteId(id) {
|
133 | const selectedTab = getTab(this.tabs, id);
|
134 | if (!this.shouldSwitch(selectedTab)) {
|
135 | return { changed: false, element: this.selectedTab };
|
136 | }
|
137 | await this.setActive(selectedTab);
|
138 | return {
|
139 | changed: true,
|
140 | element: this.selectedTab,
|
141 | markVisible: () => this.tabSwitch(),
|
142 | };
|
143 | }
|
144 |
|
145 | async getRouteId() {
|
146 | const tabId = this.selectedTab && this.selectedTab.tab;
|
147 | return tabId !== undefined ? { id: tabId, element: this.selectedTab } : undefined;
|
148 | }
|
149 | setActive(selectedTab) {
|
150 | if (this.transitioning) {
|
151 | return Promise.reject('transitioning already happening');
|
152 | }
|
153 | this.transitioning = true;
|
154 | this.leavingTab = this.selectedTab;
|
155 | this.selectedTab = selectedTab;
|
156 | this.ionTabsWillChange.emit({ tab: selectedTab.tab });
|
157 | selectedTab.active = true;
|
158 | return Promise.resolve();
|
159 | }
|
160 | tabSwitch() {
|
161 | const selectedTab = this.selectedTab;
|
162 | const leavingTab = this.leavingTab;
|
163 | this.leavingTab = undefined;
|
164 | this.transitioning = false;
|
165 | if (!selectedTab) {
|
166 | return;
|
167 | }
|
168 | if (leavingTab !== selectedTab) {
|
169 | if (leavingTab) {
|
170 | leavingTab.active = false;
|
171 | }
|
172 | this.ionTabsDidChange.emit({ tab: selectedTab.tab });
|
173 | }
|
174 | }
|
175 | notifyRouter() {
|
176 | if (this.useRouter) {
|
177 | const router = document.querySelector('ion-router');
|
178 | if (router) {
|
179 | return router.navChanged('forward');
|
180 | }
|
181 | }
|
182 | return Promise.resolve(false);
|
183 | }
|
184 | shouldSwitch(selectedTab) {
|
185 | const leavingTab = this.selectedTab;
|
186 | return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;
|
187 | }
|
188 | get tabs() {
|
189 | return Array.from(this.el.querySelectorAll('ion-tab'));
|
190 | }
|
191 | render() {
|
192 | return (index.h(index.Host, { onIonTabButtonClick: this.onTabClicked }, index.h("slot", { name: "top" }), index.h("div", { class: "tabs-inner" }, index.h("slot", null)), index.h("slot", { name: "bottom" })));
|
193 | }
|
194 | get el() { return index.getElement(this); }
|
195 | };
|
196 | const getTab = (tabs, tab) => {
|
197 | const tabEl = (typeof tab === 'string')
|
198 | ? tabs.find(t => t.tab === tab)
|
199 | : tab;
|
200 | if (!tabEl) {
|
201 | console.error(`tab with id: "${tabEl}" does not exist`);
|
202 | }
|
203 | return tabEl;
|
204 | };
|
205 | Tabs.style = tabsCss;
|
206 |
|
207 | exports.ion_tab = Tab;
|
208 | exports.ion_tabs = Tabs;
|