@ionic/core 8.7.17-dev.11771959013.18adabe2 → 8.7.17-dev.11772030258.1ee4f499

package/components/ion-tab.js

@@ -1,4 +1,94 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as e,Build as a,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";import{a as s}from"./framework-delegate.js";import{a as c}from"./index4.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.loaded=!1,this.active=!1}async componentWillLoad(){a.isDev&&void 0!==this.component&&this.el.childElementCount>0&&c(`[ion-tab] - You can not use a lazy-loaded component in a tab and inlined content at the same time.- Remove the component attribute in: <ion-tab component="${this.component}"> or- Remove the embedded content inside the ion-tab: <ion-tab></ion-tab>`),this.active&&await this.setActive()}async setActive(){await this.prepareLazyLoaded(),this.active=!0}changeActive(t){t&&this.prepareLazyLoaded()}prepareLazyLoaded(){if(!this.loaded&&null!=this.component){this.loaded=!0;try{return s(this.delegate,this.el,this.component,["ion-page"])}catch(t){c("[ion-tab] - Exception in prepareLazyLoaded:",t)}}return Promise.resolve(void 0)}render(){const{tab:t,active:e,component:a}=this;return i(n,{key:"dbad8fe9f1566277d14647626308eaf1601ab01f",role:"tabpanel","aria-hidden":e?null:"true","aria-labelledby":"tab-button-"+t,class:{"ion-page":void 0===a,"tab-hidden":!e}},i("slot",{key:"3be64f4e7161f6769aaf8e4dcb5293fcaa09af45"}))}get el(){return this}static get watchers(){return{active:[{changeActive:0}]}}static get style(){return":host(.tab-hidden){display:none !important}"}},[257,"ion-tab",{active:[1028],delegate:[16],tab:[1],component:[1],setActive:[64]},void 0,{active:[{changeActive:0}]}]),d=r,h=function(){"undefined"!=typeof customElements&&["ion-tab"].forEach((t=>{"ion-tab"===t&&(customElements.get(o(t))||customElements.define(o(t),r))}))};export{d as IonTab,h as defineCustomElement}
+import { proxyCustomElement, HTMLElement, Build, h, Host } from '@stencil/core/internal/client';
+import { a as attachComponent } from './framework-delegate.js';
+import { a as printIonError } from './index4.js';
+
+const tabCss = ":host(.tab-hidden){display:none !important}";
+
+const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.loaded = false;
+        /** @internal */
+        this.active = false;
+    }
+    async componentWillLoad() {
+        if (Build.isDev) {
+            if (this.component !== undefined && this.el.childElementCount > 0) {
+                printIonError('[ion-tab] - You can not use a lazy-loaded component in a tab and inlined content at the same time.' +
+                    `- Remove the component attribute in: <ion-tab component="${this.component}">` +
+                    ` or` +
+                    `- Remove the embedded content inside the ion-tab: <ion-tab></ion-tab>`);
+            }
+        }
+        if (this.active) {
+            await this.setActive();
+        }
+    }
+    /** Set the active component for the tab */
+    async setActive() {
+        await this.prepareLazyLoaded();
+        this.active = true;
+    }
+    changeActive(isActive) {
+        if (isActive) {
+            this.prepareLazyLoaded();
+        }
+    }
+    prepareLazyLoaded() {
+        if (!this.loaded && this.component != null) {
+            this.loaded = true;
+            try {
+                return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
+            }
+            catch (e) {
+                printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
+            }
+        }
+        return Promise.resolve(undefined);
+    }
+    render() {
+        const { tab, active, component } = this;
+        return (h(Host, { key: 'dbad8fe9f1566277d14647626308eaf1601ab01f', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+                'ion-page': component === undefined,
+                'tab-hidden': !active,
+            } }, h("slot", { key: '3be64f4e7161f6769aaf8e4dcb5293fcaa09af45' })));
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "active": ["changeActive"]
+    }; }
+    static get style() { return tabCss; }
+}, [257, "ion-tab", {
+        "active": [1028],
+        "delegate": [16],
+        "tab": [1],
+        "component": [1],
+        "setActive": [64]
+    }, undefined, {
+        "active": ["changeActive"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-tab"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-tab":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Tab);
+            }
+            break;
+    } });
+}
+
+const IonTab = Tab;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonTab, defineCustomElement };

package/components/ion-tabs.js

@@ -1,4 +1,208 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as e,createEvent as i,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{a as r}from"./index4.js";const a=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionNavWillLoad=i(this,"ionNavWillLoad",7),this.ionTabsWillChange=i(this,"ionTabsWillChange",3),this.ionTabsDidChange=i(this,"ionTabsDidChange",3),this.transitioning=!1,this.useRouter=!1,this.onTabClicked=t=>{const{href:e,tab:i}=t.detail;if(this.useRouter&&void 0!==e){const t=document.querySelector("ion-router");t&&t.push(e)}else this.select(i)}}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 e=this.selectedTab?this.selectedTab.tab:void 0;void 0!==e&&t.selectedTab!==e&&(t.selectedTab=e)}async select(t){const e=h(this.tabs,t);return!!this.shouldSwitch(e)&&(await this.setActive(e),await this.notifyRouter(),this.tabSwitch(),!0)}async getTab(t){return h(this.tabs,t)}getSelected(){return Promise.resolve(this.selectedTab?this.selectedTab.tab:void 0)}async setRouteId(t){const e=h(this.tabs,t);return this.shouldSwitch(e)?(await this.setActive(e),{changed:!0,element:this.selectedTab,markVisible:()=>this.tabSwitch()}):{changed:!1,element:this.selectedTab}}async getRouteId(){var t;const e=null===(t=this.selectedTab)||void 0===t?void 0:t.tab;return void 0!==e?{id:e,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,e=this.leavingTab;this.leavingTab=void 0,this.transitioning=!1,t&&e!==t&&(e&&(e.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 s(o,{key:"7b4b302f2942d8d131f6fc24e817989a8be08867",onIonTabButtonClick:this.onTabClicked},s("slot",{key:"2c51cf14c0f17a8ddf2d879858c984cdf8fd3147",name:"top"}),s("div",{key:"7e9d6055092d41bd9bc80ae15965f77e216feb84",class:"tabs-inner"},s("slot",{key:"c308a787e37ff7f6653531d70deca597a7602d26"})),s("slot",{key:"d5f5e693710c853570811602f859cf3e88272684",name:"bottom"}))}get el(){return this}static get style(){return":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}"}},[257,"ion-tabs",{useRouter:[1028,"use-router"],selectedTab:[32],select:[64],getTab:[64],getSelected:[64],setRouteId:[64],getRouteId:[64]}]),h=(t,e)=>{const i="string"==typeof e?t.find((t=>t.tab===e)):e;return i||r(`[ion-tabs] - Tab with id: "${i}" does not exist`),i},c=a,d=function(){"undefined"!=typeof customElements&&["ion-tabs"].forEach((t=>{"ion-tabs"===t&&(customElements.get(n(t))||customElements.define(n(t),a))}))};export{c as IonTabs,d as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as printIonError } from './index4.js';
+
+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}";
+
+const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.ionNavWillLoad = createEvent(this, "ionNavWillLoad", 7);
+        this.ionTabsWillChange = createEvent(this, "ionTabsWillChange", 3);
+        this.ionTabsDidChange = createEvent(this, "ionTabsDidChange", 3);
+        this.transitioning = false;
+        /** @internal */
+        this.useRouter = false;
+        this.onTabClicked = (ev) => {
+            const { href, tab } = ev.detail;
+            if (this.useRouter && href !== undefined) {
+                const router = document.querySelector('ion-router');
+                if (router) {
+                    router.push(href);
+                }
+            }
+            else {
+                this.select(tab);
+            }
+        };
+    }
+    async componentWillLoad() {
+        if (!this.useRouter) {
+            /**
+             * JavaScript and StencilJS use `ion-router`, while
+             * the other frameworks use `ion-router-outlet`.
+             *
+             * If either component is present then tabs will not use
+             * a basic tab-based navigation. It will use the history
+             * stack or URL updates associated with the router.
+             */
+            this.useRouter =
+                (!!this.el.querySelector('ion-router-outlet') || !!document.querySelector('ion-router')) &&
+                    !this.el.closest('[no-router]');
+        }
+        if (!this.useRouter) {
+            const tabs = this.tabs;
+            if (tabs.length > 0) {
+                await this.select(tabs[0]);
+            }
+        }
+        this.ionNavWillLoad.emit();
+    }
+    componentDidLoad() {
+        this.updateTabBar();
+    }
+    componentDidUpdate() {
+        this.updateTabBar();
+    }
+    updateTabBar() {
+        const tabBar = this.el.querySelector('ion-tab-bar');
+        if (!tabBar) {
+            return;
+        }
+        const tab = this.selectedTab ? this.selectedTab.tab : undefined;
+        // If tabs has no selected tab but tab-bar already has a selected-tab set,
+        // don't overwrite it. This handles cases where tab-bar is used without ion-tab elements.
+        if (tab === undefined) {
+            return;
+        }
+        if (tabBar.selectedTab === tab) {
+            return;
+        }
+        tabBar.selectedTab = tab;
+    }
+    /**
+     * Select a tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
+     *
+     * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
+     */
+    async select(tab) {
+        const selectedTab = getTab(this.tabs, tab);
+        if (!this.shouldSwitch(selectedTab)) {
+            return false;
+        }
+        await this.setActive(selectedTab);
+        await this.notifyRouter();
+        this.tabSwitch();
+        return true;
+    }
+    /**
+     * Get a specific tab by the value of its `tab` property or an element reference. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
+     *
+     * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.
+     */
+    async getTab(tab) {
+        return getTab(this.tabs, tab);
+    }
+    /**
+     * Get the currently selected tab. This method is only available for vanilla JavaScript projects. The Angular, React, and Vue implementations of tabs are coupled to each framework's router.
+     */
+    getSelected() {
+        return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);
+    }
+    /** @internal */
+    async setRouteId(id) {
+        const selectedTab = getTab(this.tabs, id);
+        if (!this.shouldSwitch(selectedTab)) {
+            return { changed: false, element: this.selectedTab };
+        }
+        await this.setActive(selectedTab);
+        return {
+            changed: true,
+            element: this.selectedTab,
+            markVisible: () => this.tabSwitch(),
+        };
+    }
+    /** @internal */
+    async getRouteId() {
+        var _a;
+        const tabId = (_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.tab;
+        return tabId !== undefined ? { id: tabId, element: this.selectedTab } : undefined;
+    }
+    setActive(selectedTab) {
+        if (this.transitioning) {
+            return Promise.reject('transitioning already happening');
+        }
+        this.transitioning = true;
+        this.leavingTab = this.selectedTab;
+        this.selectedTab = selectedTab;
+        this.ionTabsWillChange.emit({ tab: selectedTab.tab });
+        selectedTab.active = true;
+        this.updateTabBar();
+        return Promise.resolve();
+    }
+    tabSwitch() {
+        const selectedTab = this.selectedTab;
+        const leavingTab = this.leavingTab;
+        this.leavingTab = undefined;
+        this.transitioning = false;
+        if (!selectedTab) {
+            return;
+        }
+        if (leavingTab !== selectedTab) {
+            if (leavingTab) {
+                leavingTab.active = false;
+            }
+            this.ionTabsDidChange.emit({ tab: selectedTab.tab });
+        }
+    }
+    notifyRouter() {
+        if (this.useRouter) {
+            const router = document.querySelector('ion-router');
+            if (router) {
+                return router.navChanged('forward');
+            }
+        }
+        return Promise.resolve(false);
+    }
+    shouldSwitch(selectedTab) {
+        const leavingTab = this.selectedTab;
+        return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;
+    }
+    get tabs() {
+        return Array.from(this.el.querySelectorAll('ion-tab'));
+    }
+    render() {
+        return (h(Host, { key: '7b4b302f2942d8d131f6fc24e817989a8be08867', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '2c51cf14c0f17a8ddf2d879858c984cdf8fd3147', name: "top" }), h("div", { key: '7e9d6055092d41bd9bc80ae15965f77e216feb84', class: "tabs-inner" }, h("slot", { key: 'c308a787e37ff7f6653531d70deca597a7602d26' })), h("slot", { key: 'd5f5e693710c853570811602f859cf3e88272684', name: "bottom" })));
+    }
+    get el() { return this; }
+    static get style() { return tabsCss; }
+}, [257, "ion-tabs", {
+        "useRouter": [1028, "use-router"],
+        "selectedTab": [32],
+        "select": [64],
+        "getTab": [64],
+        "getSelected": [64],
+        "setRouteId": [64],
+        "getRouteId": [64]
+    }]);
+const getTab = (tabs, tab) => {
+    const tabEl = typeof tab === 'string' ? tabs.find((t) => t.tab === tab) : tab;
+    if (!tabEl) {
+        printIonError(`[ion-tabs] - Tab with id: "${tabEl}" does not exist`);
+    }
+    return tabEl;
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Tabs);
+            }
+            break;
+    } });
+}
+
+const IonTabs = Tabs;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonTabs, defineCustomElement };

package/components/ion-text.js

@@ -1,4 +1,45 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{proxyCustomElement as t,HTMLElement as e,h as o,Host as s,transformTag as c}from"@stencil/core/internal/client";import{c as n}from"./theme.js";import{b as r}from"./ionic-global.js";const i=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}render(){const t=r(this);return o(s,{key:"361035eae7b92dc109794348d39bad2f596eb6be",class:n(this.color,{[t]:!0})},o("slot",{key:"c7b8835cf485ba9ecd73298f0529276ce1ea0852"}))}static get style(){return":host(.ion-color){color:var(--ion-color-base)}"}},[257,"ion-text",{color:[513]}]),l=i,a=function(){"undefined"!=typeof customElements&&["ion-text"].forEach((t=>{"ion-text"===t&&(customElements.get(c(t))||customElements.define(c(t),i))}))};export{l as IonText,a as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createColorClasses } from './theme.js';
+import { b as getIonMode } from './ionic-global.js';
+
+const textCss = ":host(.ion-color){color:var(--ion-color-base)}";
+
+const Text = /*@__PURE__*/ proxyCustomElement(class Text extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: '361035eae7b92dc109794348d39bad2f596eb6be', class: createColorClasses(this.color, {
+                [mode]: true,
+            }) }, h("slot", { key: 'c7b8835cf485ba9ecd73298f0529276ce1ea0852' })));
+    }
+    static get style() { return textCss; }
+}, [257, "ion-text", {
+        "color": [513]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Text);
+            }
+            break;
+    } });
+}
+
+const IonText = Text;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonText, defineCustomElement };