@ionic/core 7.4.4-dev.11696537016.1e5ce7a3 → 7.4.4-dev.11696860023.1b8ee3ef

package/components/ion-footer.js

@@ -4,6 +4,7 @@
 import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { f as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
 import { c as createKeyboardController } from './keyboard-controller.js';
+import { K as Keyboard, a as KeyboardResize } from './keyboard.js';
 import { b as getIonMode } from './ionic-global.js';
 import { m as clamp } from './helpers.js';
 
@@ -85,17 +86,26 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
     this.checkCollapsibleFooter();
   }
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the footer
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    const resizeMode = await Keyboard.getResizeMode();
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
+      this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+        /**
+         * If the keyboard is hiding, then we need to wait
+         * for the webview to resize. Otherwise, the footer
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
   disconnectedCallback() {
     if (this.keyboardCtrl) {

package/components/ion-tab-bar.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as createKeyboardController } from './keyboard-controller.js';
+import { K as Keyboard, a as KeyboardResize } from './keyboard.js';
 import { c as createColorClasses } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
 
@@ -34,17 +35,26 @@ const TabBar = /*@__PURE__*/ proxyCustomElement(class TabBar extends HTMLElement
     this.selectedTabChanged();
   }
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the tab bar
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    const resizeMode = await Keyboard.getResizeMode();
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
+      this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+        /**
+         * If the keyboard is hiding, then we need to wait
+         * for the webview to resize. Otherwise, the tab bar
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
   disconnectedCallback() {
     if (this.keyboardCtrl) {

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

@@ -12,13 +12,13 @@ const dir = require('./dir-f1e0ca26.js');
 const theme = require('./theme-fbc56b3b.js');
 const index$1 = require('./index-10873539.js');
 const keyboardController = require('./keyboard-controller-50beb83a.js');
+const keyboard = require('./keyboard-fd7db491.js');
 const cubicBezier = require('./cubic-bezier-6b9222ad.js');
 const frameworkDelegate = require('./framework-delegate-c0873a6f.js');
 const lockController = require('./lock-controller-4ae2eb59.js');
 const index$2 = require('./index-acf6bdf0.js');
 require('./index-cc7dfb7c.js');
 require('./index-306a7476.js');
-require('./keyboard-fd7db491.js');
 require('./capacitor-2ffba62a.js');
 
 const appCss = "html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
@@ -614,17 +614,26 @@ const Footer = class {
     this.checkCollapsibleFooter();
   }
   async connectedCallback() {
-    this.keyboardCtrl = await keyboardController.createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the footer
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    const resizeMode = await keyboard.Keyboard.getResizeMode();
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== keyboard.KeyboardResize.None) {
+      this.keyboardCtrl = await keyboardController.createKeyboardController(async (keyboardOpen, waitForResize) => {
+        /**
+         * If the keyboard is hiding, then we need to wait
+         * for the webview to resize. Otherwise, the footer
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
   disconnectedCallback() {
     if (this.keyboardCtrl) {

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

@@ -7,11 +7,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-14a4821e.js');
 const keyboardController = require('./keyboard-controller-50beb83a.js');
+const keyboard = require('./keyboard-fd7db491.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-a71608df.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 require('./index-306a7476.js');
-require('./keyboard-fd7db491.js');
 require('./capacitor-2ffba62a.js');
 
 const tabBarIosCss = ":host{-webkit-padding-start:var(--ion-safe-area-left);padding-inline-start:var(--ion-safe-area-left);-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-bottom:var(--ion-safe-area-bottom, 0);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0;border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host{--background:var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, #666666));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));height:50px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(210%) blur(20px);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}";
@@ -40,17 +40,26 @@ const TabBar = class {
     this.selectedTabChanged();
   }
   async connectedCallback() {
-    this.keyboardCtrl = await keyboardController.createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the tab bar
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    const resizeMode = await keyboard.Keyboard.getResizeMode();
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== keyboard.KeyboardResize.None) {
+      this.keyboardCtrl = await keyboardController.createKeyboardController(async (keyboardOpen, waitForResize) => {
+        /**
+         * If the keyboard is hiding, then we need to wait
+         * for the webview to resize. Otherwise, the tab bar
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
   disconnectedCallback() {
     if (this.keyboardCtrl) {

package/dist/collection/components/footer/footer.js

@@ -4,6 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { findIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
+import { Keyboard, KeyboardResize } from "../../utils/native/keyboa";
 import { getIonMode } from "../../global/ionic-global";
 import { handleFooterFade } from "./footer.utils";
 /**
@@ -52,17 +53,26 @@ export class Footer {
     this.checkCollapsibleFooter();
   }
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the footer
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    const resizeMode = await Keyboard.getResizeMode();
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
+      this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+        /**
+         * If the keyboard is hiding, then we need to wait
+         * for the webview to resize. Otherwise, the footer
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
   disconnectedCallback() {
     if (this.keyboardCtrl) {

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

@@ -3,6 +3,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
+import { Keyboard, KeyboardResize } from "../../utils/native/keyboa";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 /**
@@ -27,17 +28,26 @@ export class TabBar {
     this.selectedTabChanged();
   }
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the tab bar
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    const resizeMode = await Keyboard.getResizeMode();
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
+      this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+        /**
+         * If the keyboard is hiding, then we need to wait
+         * for the webview to resize. Otherwise, the tab bar
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
   disconnectedCallback() {
     if (this.keyboardCtrl) {

package/dist/collection/utils/keyboard/keyboard-controller.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { doc, win } from "../browser/index";
-import { Keyboard, KeyboardResize } from "../native/keyboard";
+import { Keyboard, KeyboardResize } from "../native/keyboa";
 /**
  * The element that resizes when the keyboard opens
  * is going to depend on the resize mode

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-05T20:19:09",
+  "timestamp": "2023-10-09T14:02:41",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.4.0",

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

@@ -8,13 +8,13 @@ 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 { K as Keyboard, a as KeyboardResize } from './keyboard-b063f012.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';
-import './keyboard-b063f012.js';
 import './capacitor-b4979570.js';
 
 const appCss = "html.plt-mobile ion-app{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html.plt-mobile ion-app [contenteditable]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}ion-app.force-statusbar-padding{--ion-safe-area-top:20px}";
@@ -610,17 +610,26 @@ const Footer = class {
     this.checkCollapsibleFooter();
   }
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the footer
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    const resizeMode = await Keyboard.getResizeMode();
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
+      this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+        /**
+         * If the keyboard is hiding, then we need to wait
+         * for the webview to resize. Otherwise, the footer
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
   disconnectedCallback() {
     if (this.keyboardCtrl) {

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

@@ -3,11 +3,11 @@
  */
 import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-cb894020.js';
 import { c as createKeyboardController } from './keyboard-controller-0c2dce71.js';
+import { K as Keyboard, a as KeyboardResize } from './keyboard-b063f012.js';
 import { c as createColorClasses } from './theme-17531cdf.js';
 import { b as getIonMode, c as config } from './ionic-global-63a8d8c9.js';
 import { k as inheritAttributes } from './helpers-3379ba19.js';
 import './index-7a14ecec.js';
-import './keyboard-b063f012.js';
 import './capacitor-b4979570.js';
 
 const tabBarIosCss = ":host{-webkit-padding-start:var(--ion-safe-area-left);padding-inline-start:var(--ion-safe-area-left);-webkit-padding-end:var(--ion-safe-area-right);padding-inline-end:var(--ion-safe-area-right);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:auto;padding-bottom:var(--ion-safe-area-bottom, 0);border-top:var(--border);background:var(--background);color:var(--color);text-align:center;contain:strict;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:10;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}:host(.ion-color) ::slotted(ion-tab-button){--background-focused:var(--ion-color-shade);--color-selected:var(--ion-color-contrast)}:host(.ion-color) ::slotted(.tab-selected){color:var(--ion-color-contrast)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){color:rgba(var(--ion-color-contrast-rgb), 0.7)}:host(.ion-color),:host(.ion-color) ::slotted(ion-tab-button){background:var(--ion-color-base)}:host(.ion-color) ::slotted(ion-tab-button.ion-focused),:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:var(--background-focused)}:host(.tab-bar-translucent) ::slotted(ion-tab-button){background:transparent}:host([slot=top]){padding-top:var(--ion-safe-area-top, 0);padding-bottom:0;border-top:0;border-bottom:var(--border)}:host(.tab-bar-hidden){display:none !important}:host{--background:var(--ion-tab-bar-background, var(--ion-color-step-50, #f7f7f7));--background-focused:var(--ion-tab-bar-background-focused, #e0e0e0);--border:0.55px solid var(--ion-tab-bar-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.2))));--color:var(--ion-tab-bar-color, var(--ion-color-step-600, #666666));--color-selected:var(--ion-tab-bar-color-selected, var(--ion-color-primary, #3880ff));height:50px}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.tab-bar-translucent){--background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(210%) blur(20px);backdrop-filter:saturate(210%) blur(20px)}:host(.ion-color.tab-bar-translucent){background:rgba(var(--ion-color-base-rgb), 0.8)}:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused){background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.6)}}";
@@ -36,17 +36,26 @@ const TabBar = class {
     this.selectedTabChanged();
   }
   async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
-      /**
-       * If the keyboard is hiding, then we need to wait
-       * for the webview to resize. Otherwise, the tab bar
-       * will flicker before the webview resizes.
-       */
-      if (keyboardOpen === false && waitForResize !== undefined) {
-        await waitForResize;
-      }
-      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
-    });
+    const resizeMode = await Keyboard.getResizeMode();
+    /**
+     * If the resize mode is set to None then we don't want to
+     * hide the tab bar here since it will never sit on top
+     * of the keyboard. Hiding the tab bar will cause a layout shift
+     * in apps that have resize set to None.
+     */
+    if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
+      this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+        /**
+         * If the keyboard is hiding, then we need to wait
+         * for the webview to resize. Otherwise, the tab bar
+         * will flicker before the webview resizes.
+         */
+        if (keyboardOpen === false && waitForResize !== undefined) {
+          await waitForResize;
+        }
+        this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+      });
+    }
   }
   disconnectedCallback() {
     if (this.keyboardCtrl) {