@ionic/core 8.7.19-dev.11772655618.1af0949f → 8.7.19-dev.11773072221.15efeed0

package/components/ion-tab.js

@@ -1,4 +1,85 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{p as t,H as e,j as a,h as i,d as s,t as n}from"./p-BJoMtgfR.js";import{a as o}from"./p-BR3tZJmu.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.loaded=!1,this.active=!1}async componentWillLoad(){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 o(this.delegate,this.el,this.component,["ion-page"])}catch(t){a("[ion-tab] - Exception in prepareLazyLoaded:",t)}}return Promise.resolve(void 0)}render(){const{tab:t,active:e,component:a}=this;return i(s,{key:"fbd837bad7a0632336d46a597ace23673b153e48",role:"tabpanel","aria-hidden":e?null:"true","aria-labelledby":"tab-button-"+t,class:{"ion-page":void 0===a,"tab-hidden":!e}},i("slot",{key:"35c218169fda826c9c1337558e0278d0c7f5f26a"}))}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}]}]),r=c,d=function(){"undefined"!=typeof customElements&&["ion-tab"].forEach((t=>{"ion-tab"===t&&(customElements.get(n(t))||customElements.define(n(t),c))}))};export{r as IonTab,d as defineCustomElement}
+import { p as proxyCustomElement, H, j as printIonError, h, d as Host } from './p-DWoUQeZ3.js';
+import { a as attachComponent } from './p-l_lso3Zl.js';
+
+const tabCss = ":host(.tab-hidden){display:none !important}";
+
+const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.loaded = false;
+        /** @internal */
+        this.active = false;
+    }
+    async componentWillLoad() {
+        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: 'fbd837bad7a0632336d46a597ace23673b153e48', role: "tabpanel", "aria-hidden": !active ? 'true' : null, "aria-labelledby": `tab-button-${tab}`, class: {
+                'ion-page': component === undefined,
+                'tab-hidden': !active,
+            } }, h("slot", { key: '35c218169fda826c9c1337558e0278d0c7f5f26a' })));
+    }
+    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,207 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import{p as t,H as e,e as i,h as s,d as o,t as n,j as a}from"./p-BJoMtgfR.js";const h=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=r(this.tabs,t);return!!this.shouldSwitch(e)&&(await this.setActive(e),await this.notifyRouter(),this.tabSwitch(),!0)}async getTab(t){return r(this.tabs,t)}getSelected(){return Promise.resolve(this.selectedTab?this.selectedTab.tab:void 0)}async setRouteId(t){const e=r(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:"c7131135b31aa312dc0207602561e1c0f4ac3e53",onIonTabButtonClick:this.onTabClicked},s("slot",{key:"6c46e91c0389bbcea1f15f35cf3ea513a74ac545",name:"top"}),s("div",{key:"4f1b649d8bb60b61402b97359de204979c5eda52",class:"tabs-inner"},s("slot",{key:"8d1ef4952be4fb33567376e1083ea4da697fcae0"})),s("slot",{key:"260b8da8031494e9cb4635b3d22c49a433042db1",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]}]),r=(t,e)=>{const i="string"==typeof e?t.find((t=>t.tab===e)):e;return i||a(`[ion-tabs] - Tab with id: "${i}" does not exist`),i},c=h,d=function(){"undefined"!=typeof customElements&&["ion-tabs"].forEach((t=>{"ion-tabs"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))};export{c as IonTabs,d as defineCustomElement}
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host, j as printIonError } from './p-DWoUQeZ3.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 H {
+    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: 'c7131135b31aa312dc0207602561e1c0f4ac3e53', onIonTabButtonClick: this.onTabClicked }, h("slot", { key: '6c46e91c0389bbcea1f15f35cf3ea513a74ac545', name: "top" }), h("div", { key: '4f1b649d8bb60b61402b97359de204979c5eda52', class: "tabs-inner" }, h("slot", { key: '8d1ef4952be4fb33567376e1083ea4da697fcae0' })), h("slot", { key: '260b8da8031494e9cb4635b3d22c49a433042db1', 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{p as t,H as o,h as s,d as e,t as c}from"./p-BJoMtgfR.js";import{c as r}from"./p-DiVJyqlX.js";import{b as n}from"./p-CDfQnFrd.js";const i=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}render(){const t=n(this);return s(e,{key:"bfaa49d35f43b8036725ae8a322c716fc6e43bdf",class:r(this.color,{[t]:!0})},s("slot",{key:"c04880cd1935b42cbe60f58fd523b4d8a96072dc"}))}static get style(){return":host(.ion-color){color:var(--ion-color-base)}"}},[257,"ion-text",{color:[513]}]),a=i,f=function(){"undefined"!=typeof customElements&&["ion-text"].forEach((t=>{"ion-text"===t&&(customElements.get(c(t))||customElements.define(c(t),i))}))};export{a as IonText,f as defineCustomElement}
+import { p as proxyCustomElement, H, h, d as Host } from './p-DWoUQeZ3.js';
+import { c as createColorClasses } from './p-DiVJyqlX.js';
+import { b as getIonMode } from './p-Bxl5etF4.js';
+
+const textCss = ":host(.ion-color){color:var(--ion-color-base)}";
+
+const Text = /*@__PURE__*/ proxyCustomElement(class Text extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    render() {
+        const mode = getIonMode(this);
+        return (h(Host, { key: 'bfaa49d35f43b8036725ae8a322c716fc6e43bdf', class: createColorClasses(this.color, {
+                [mode]: true,
+            }) }, h("slot", { key: 'c04880cd1935b42cbe60f58fd523b4d8a96072dc' })));
+    }
+    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 };