@ionic/core 7.4.3 → 7.4.4-dev.11696535998.1c8b00c5

package/dist/collection/components/segment/segment.js

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h, writeTask } from "@stencil/core";
+import { raf } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -78,29 +79,7 @@ export class Segment {
      * Used by `ion-segment-button` to determine if the button should be checked.
      */
     this.ionSelect.emit({ value });
-    if (this.scrollable) {
-      const buttons = this.getButtons();
-      const activeButton = buttons.find((button) => button.value === value);
-      if (activeButton !== undefined) {
-        /**
-         * Scrollable segment buttons should be
-         * centered within the view including
-         * buttons that are partially offscreen.
-         */
-        activeButton.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          /**
-           * Segment should scroll on the
-           * horizontal axis. `block: 'nearest'`
-           * ensures that the vertical axis
-           * does not scroll if the segment
-           * as a whole is already in view.
-           */
-          block: 'nearest',
-        });
-      }
-    }
+    this.scrollActiveButtonIntoView();
   }
   disabledChanged() {
     this.gestureChanged();
@@ -122,6 +101,13 @@ export class Segment {
   }
   async componentDidLoad() {
     this.setCheckedClasses();
+    /**
+     * We need to wait for the buttons to all be rendered
+     * before we can scroll.
+     */
+    raf(() => {
+      this.scrollActiveButtonIntoView();
+    });
     this.gesture = (await import('../../utils/gesture')).createGesture({
       el: this.el,
       gestureName: 'segment',
@@ -250,6 +236,32 @@ export class Segment {
       buttons[next].classList.add('segment-button-after-checked');
     }
   }
+  scrollActiveButtonIntoView() {
+    const { scrollable, value } = this;
+    if (scrollable) {
+      const buttons = this.getButtons();
+      const activeButton = buttons.find((button) => button.value === value);
+      if (activeButton !== undefined) {
+        /**
+         * Scrollable segment buttons should be
+         * centered within the view including
+         * buttons that are partially offscreen.
+         */
+        activeButton.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          /**
+           * Segment should scroll on the
+           * horizontal axis. `block: 'nearest'`
+           * ensures that the vertical axis
+           * does not scroll if the segment
+           * as a whole is already in view.
+           */
+          block: 'nearest',
+        });
+      }
+    }
+  }
   setNextIndex(detail, isEnd = false) {
     const rtl = isRTL(this.el);
     const activated = this.activated;

package/dist/collection/components/segment/test/scrollable/segment.e2e.js

@@ -4,7 +4,7 @@
 import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('segment: scrollable'), () => {
+  test.describe(title('segment: scrollable (rendering)'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.setContent(`
         <ion-segment scrollable="true" value="2">
@@ -42,3 +42,42 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('segment: scrollable (functionality)'), () => {
+    test('should scroll active button into view when value is already set', async ({ page }) => {
+      await page.setContent(`
+          <ion-segment scrollable="true" value="8">
+            <ion-segment-button value="1">
+              <ion-label>First</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="2">
+              <ion-label>Second</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="3">
+              <ion-label>Third</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="4">
+              <ion-label>Fourth</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="5">
+              <ion-label>Fifth</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="6">
+              <ion-label>Sixth</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="7">
+              <ion-label>Seventh</ion-label>
+            </ion-segment-button>
+            <ion-segment-button id="activeButton" value="8">
+              <ion-label>Eighth</ion-label>
+            </ion-segment-button>
+            <ion-segment-button value="9">
+              <ion-label>Ninth</ion-label>
+            </ion-segment-button>
+          </ion-segment>
+        `, config);
+      const activeButton = page.locator('#activeButton');
+      await expect(activeButton).toBeInViewport();
+    });
+  });
+});

package/dist/collection/components/tab-bar/tab-bar.js

@@ -44,6 +44,9 @@ export class TabBar {
       this.keyboardCtrl.destroy();
     }
   }
+  componentDidLoad() {
+    this.ionTabBarLoaded.emit();
+  }
   render() {
     const { color, translucent, keyboardVisible } = this;
     const mode = getIonMode(this);
@@ -160,6 +163,24 @@ export class TabBar {
             }
           }
         }
+      }, {
+        "method": "ionTabBarLoaded",
+        "name": "ionTabBarLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "This event is used in IonContent to correctly\ncalculate the fullscreen content offsets\nwhen IonTabBar is used."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/tab-bar/test/translucent/tab-bar.e2e.js

@@ -36,5 +36,35 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       const tabBar = page.locator('ion-tab-bar');
       await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent`));
     });
+    test('should render translucent tab bar even when wrapped in a page container', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          ion-content {
+            --background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
+          }
+        </style>
+        <ion-tabs>
+          <div class="ion-page">
+            <ion-content fullscreen="true">My Content</ion-content>
+          </div>
+          <ion-tab-bar slot="bottom" translucent="true" selected-tab="1">
+            <ion-tab-button tab="1">
+              <ion-label>Recents</ion-label>
+            </ion-tab-button>
+
+            <ion-tab-button tab="2">
+              <ion-label>Favorites</ion-label>
+              <ion-badge>23</ion-badge>
+            </ion-tab-button>
+
+            <ion-tab-button tab="3">
+              <ion-label>Settings</ion-label>
+            </ion-tab-button>
+          </ion-tab-bar>
+        </ion-tabs>
+      `, config);
+      const tabBar = page.locator('ion-tab-bar');
+      await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent-container`));
+    });
   });
 });

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-04T13:21:01",
+  "timestamp": "2023-10-05T20:02:12",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.4.0",
@@ -6714,12 +6714,6 @@
         }
       ],
       "listeners": [
-        {
-          "event": "appload",
-          "target": "window",
-          "capture": false,
-          "passive": false
-        },
         {
           "event": "resize",
           "target": "window",

package/dist/esm/ion-app_8.entry.js

@@ -3,13 +3,14 @@
  */
 import { r as registerInstance, h, H as Host, f as getElement, d as createEvent, e as readTask, i as forceUpdate, w as writeTask } from './index-cb894020.js';
 import { b as getIonMode, c as config, a as isPlatform } from './ionic-global-63a8d8c9.js';
-import { c as componentOnReady, l as clamp, i as inheritAriaAttributes, s as shallowEqualStringMap, m as hasLazyBuild } from './helpers-3379ba19.js';
+import { m as hasLazyBuild, c as componentOnReady, l as clamp, i as inheritAriaAttributes, s as shallowEqualStringMap } from './helpers-3379ba19.js';
 import { i as isRTL } from './dir-912e3e13.js';
 import { c as createColorClasses, h as hostContext } from './theme-17531cdf.js';
 import { a as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-746a238e.js';
 import { c as createKeyboardController } from './keyboard-controller-0c2dce71.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
 import { a as attachComponent, d as detachComponent } from './framework-delegate-aa433dea.js';
+import { c as createLockController } from './lock-controller-e8c6c051.js';
 import { t as transition } from './index-32c6828b.js';
 import './index-595d62c9.js';
 import './index-7a14ecec.js';
@@ -146,6 +147,7 @@ const Content = class {
     this.cBottom = -1;
     this.isMainContent = true;
     this.resizeTimeout = null;
+    this.tabsElement = null;
     // Detail is used in a hot loop in the scroll event, by allocating it here
     // V8 will be able to inline any read/write to it since it's a monomorphic class.
     // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
@@ -176,12 +178,57 @@ const Content = class {
   }
   connectedCallback() {
     this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
+    /**
+     * The fullscreen content offsets need to be
+     * computed after the tab bar has loaded. Since
+     * lazy evaluation means components are not hydrated
+     * at the same time, we need to wait for the ionTabBarLoaded
+     * event to fire. This does not impact dist-custom-elements
+     * because there is no hydration there.
+     */
+    if (hasLazyBuild(this.el)) {
+      /**
+       * We need to cache the reference to the tabs.
+       * If just the content is unmounted then we won't
+       * be able to query for the closest tabs on disconnectedCallback
+       * since the content has been removed from the DOM tree.
+       */
+      const closestTabs = (this.tabsElement = this.el.closest('ion-tabs'));
+      if (closestTabs !== null) {
+        /**
+         * When adding and removing the event listener
+         * we need to make sure we pass the same function reference
+         * otherwise the event listener will not be removed properly.
+         * We can't only pass `this.resize` because "this" in the function
+         * context becomes a reference to IonTabs instead of IonContent.
+         *
+         * Additionally, we listen for ionTabBarLoaded on the IonTabs
+         * instance rather than the IonTabBar instance. It's possible for
+         * a tab bar to be conditionally rendered/mounted. Since ionTabBarLoaded
+         * bubbles, we can catch any instances of child tab bars loading by listening
+         * on IonTabs.
+         */
+        this.tabsLoadCallback = () => this.resize();
+        closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
+      }
+    }
   }
   disconnectedCallback() {
     this.onScrollEnd();
-  }
-  onAppLoad() {
-    this.resize();
+    if (hasLazyBuild(this.el)) {
+      /**
+       * The event listener and tabs caches need to
+       * be cleared otherwise this will create a memory
+       * leak where the IonTabs instance can never be
+       * garbage collected.
+       */
+      const { tabsElement, tabsLoadCallback } = this;
+      if (tabsElement !== null && tabsLoadCallback !== undefined) {
+        tabsElement.removeEventListener('ionTabBarLoaded', tabsLoadCallback);
+      }
+      this.tabsElement = null;
+      this.tabsLoadCallback = undefined;
+    }
   }
   /**
    * Rotating certain devices can update
@@ -784,7 +831,7 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
   });
 };
 
-const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:1px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{height:48px;padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}";
+const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:1px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{height:48px;padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header:not(.header-collapse-main):has(~ion-content ion-header[collapse=condense]){opacity:0}";
 
 const headerMdCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
 
@@ -935,7 +982,7 @@ Header.style = {
   md: headerMdCss
 };
 
-const routerOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
+const routerOutletCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}";
 
 const RouterOutlet = class {
   constructor(hostRef) {
@@ -943,6 +990,7 @@ const RouterOutlet = class {
     this.ionNavWillLoad = createEvent(this, "ionNavWillLoad", 7);
     this.ionNavWillChange = createEvent(this, "ionNavWillChange", 3);
     this.ionNavDidChange = createEvent(this, "ionNavDidChange", 3);
+    this.lockController = createLockController();
     this.gestureOrAnimationInProgress = false;
     this.mode = getIonMode(this);
     this.delegate = undefined;
@@ -1006,7 +1054,7 @@ const RouterOutlet = class {
   }
   /** @internal */
   async commit(enteringEl, leavingEl, opts) {
-    const unlock = await this.lock();
+    const unlock = await this.lockController.lock();
     let changed = false;
     try {
       changed = await this.transition(enteringEl, leavingEl, opts);
@@ -1107,16 +1155,6 @@ const RouterOutlet = class {
     this.ionNavDidChange.emit();
     return true;
   }
-  // TODO: FW-5048 - Remove this code in favor of using lock controller from utils
-  async lock() {
-    const p = this.waitPromise;
-    let resolve;
-    this.waitPromise = new Promise((r) => (resolve = r));
-    if (p !== undefined) {
-      await p;
-    }
-    return resolve;
-  }
   render() {
     return h("slot", null);
   }

package/dist/esm/ion-nav_2.entry.js

@@ -75,7 +75,7 @@ const convertToViews = (pages) => {
     .filter((v) => v !== null);
 };
 
-const navCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;overflow:hidden;z-index:0}";
+const navCss = ":host{left:0;right:0;top:0;bottom:0;position:absolute;contain:layout size style;z-index:0}";
 
 const Nav = class {
   constructor(hostRef) {

package/dist/esm/ion-segment_2.entry.js

@@ -2,10 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, d as createEvent, w as writeTask, h, H as Host, f as getElement, i as forceUpdate } from './index-cb894020.js';
+import { r as raf, a as addEventListener, b as removeEventListener, k as inheritAttributes } from './helpers-3379ba19.js';
 import { i as isRTL } from './dir-912e3e13.js';
 import { c as createColorClasses, h as hostContext } from './theme-17531cdf.js';
 import { b as getIonMode } from './ionic-global-63a8d8c9.js';
-import { a as addEventListener, b as removeEventListener, k as inheritAttributes } from './helpers-3379ba19.js';
 
 const segmentIosCss = ":host{--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:grid;grid-auto-columns:1fr;position:relative;-ms-flex-align:stretch;align-items:stretch;-ms-flex-pack:center;justify-content:center;width:100%;background:var(--background);font-family:var(--ion-font-family, inherit);text-align:center;contain:paint;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.segment-scrollable){-ms-flex-pack:start;justify-content:start;width:auto;overflow-x:auto;grid-auto-columns:minmax(-webkit-min-content, 1fr);grid-auto-columns:minmax(min-content, 1fr)}:host(.segment-scrollable::-webkit-scrollbar){display:none}:host{--background:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.065);border-radius:8px;overflow:hidden;z-index:0}:host(.ion-color){background:rgba(var(--ion-color-base-rgb), 0.065)}:host(.in-toolbar){-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:0;margin-bottom:0;width:auto}:host(.in-toolbar:not(.ion-color)){background:var(--ion-toolbar-segment-background, var(--background))}:host(.in-toolbar-color:not(.ion-color)){background:rgba(var(--ion-color-contrast-rgb), 0.11)}";
 
@@ -85,29 +85,7 @@ const Segment = class {
      * Used by `ion-segment-button` to determine if the button should be checked.
      */
     this.ionSelect.emit({ value });
-    if (this.scrollable) {
-      const buttons = this.getButtons();
-      const activeButton = buttons.find((button) => button.value === value);
-      if (activeButton !== undefined) {
-        /**
-         * Scrollable segment buttons should be
-         * centered within the view including
-         * buttons that are partially offscreen.
-         */
-        activeButton.scrollIntoView({
-          behavior: 'smooth',
-          inline: 'center',
-          /**
-           * Segment should scroll on the
-           * horizontal axis. `block: 'nearest'`
-           * ensures that the vertical axis
-           * does not scroll if the segment
-           * as a whole is already in view.
-           */
-          block: 'nearest',
-        });
-      }
-    }
+    this.scrollActiveButtonIntoView();
   }
   disabledChanged() {
     this.gestureChanged();
@@ -129,6 +107,13 @@ const Segment = class {
   }
   async componentDidLoad() {
     this.setCheckedClasses();
+    /**
+     * We need to wait for the buttons to all be rendered
+     * before we can scroll.
+     */
+    raf(() => {
+      this.scrollActiveButtonIntoView();
+    });
     this.gesture = (await import('./index-ff313b19.js')).createGesture({
       el: this.el,
       gestureName: 'segment',
@@ -257,6 +242,32 @@ const Segment = class {
       buttons[next].classList.add('segment-button-after-checked');
     }
   }
+  scrollActiveButtonIntoView() {
+    const { scrollable, value } = this;
+    if (scrollable) {
+      const buttons = this.getButtons();
+      const activeButton = buttons.find((button) => button.value === value);
+      if (activeButton !== undefined) {
+        /**
+         * Scrollable segment buttons should be
+         * centered within the view including
+         * buttons that are partially offscreen.
+         */
+        activeButton.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'center',
+          /**
+           * Segment should scroll on the
+           * horizontal axis. `block: 'nearest'`
+           * ensures that the vertical axis
+           * does not scroll if the segment
+           * as a whole is already in view.
+           */
+          block: 'nearest',
+        });
+      }
+    }
+  }
   setNextIndex(detail, isEnd = false) {
     const rtl = isRTL(this.el);
     const activated = this.activated;

package/dist/esm/ion-tab-bar_2.entry.js

@@ -18,6 +18,7 @@ const TabBar = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.ionTabBarChanged = createEvent(this, "ionTabBarChanged", 7);
+    this.ionTabBarLoaded = createEvent(this, "ionTabBarLoaded", 7);
     this.keyboardCtrl = null;
     this.keyboardVisible = false;
     this.color = undefined;
@@ -52,6 +53,9 @@ const TabBar = class {
       this.keyboardCtrl.destroy();
     }
   }
+  componentDidLoad() {
+    this.ionTabBarLoaded.emit();
+  }
   render() {
     const { color, translucent, keyboardVisible } = this;
     const mode = getIonMode(this);