@ionic/core 7.4.3-dev.11696273737.1ba31223 → 7.4.3-dev.11696355648.1f181be0

package/components/index4.js

@@ -203,6 +203,9 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
+      if (!menu.disabled) {
+        _setActiveMenu(menu);
+      }
       menus.push(menu);
     }
   };
@@ -212,6 +215,13 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
+  const _setActiveMenu = (menu) => {
+    // if this menu should be enabled
+    // then find all the other menus on this same side
+    // and automatically disable other same side menus
+    const side = menu.side;
+    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
+  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -283,6 +293,7 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
+    _setActiveMenu,
   };
 };
 const menuController = /*@__PURE__*/ createMenuController();

package/components/ion-menu.js

@@ -3,6 +3,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client';
 import { g as getTimeGivenProgression } from './cubic-bezier.js';
+import { d as doc } from './index5.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller.js';
 import { o as isEndSide, i as inheritAriaAttributes, p as assert, m as clamp } from './helpers.js';
 import { m as menuController } from './index4.js';
@@ -548,6 +549,17 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
+    if (doc === null || doc === void 0 ? void 0 : doc.contains(this.el)) {
+      /**
+       * Only set the active menu if the menu element is
+       * present in the DOM. Otherwise if it was destructively
+       * re-hydrated (through Angular Universal), then ignore
+       * setting the removed node as the active menu.
+       */
+      if (!this.disabled) {
+        menuController._setActiveMenu(this);
+      }
+    }
     assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {

package/components/ion-segment.js

@@ -2,6 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
+import { r as raf } from './helpers.js';
 import { i as isRTL } from './dir.js';
 import { c as createColorClasses, h as hostContext } from './theme.js';
 import { b as getIonMode } from './ionic-global.js';
@@ -86,29 +87,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
      * 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();
@@ -130,6 +109,13 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
   }
   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('./index3.js')).createGesture({
       el: this.el,
       gestureName: 'segment',
@@ -258,6 +244,32 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
       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/cjs/{index-d90b29dd.js → index-5121bb90.js}

@@ -205,6 +205,9 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
+      if (!menu.disabled) {
+        _setActiveMenu(menu);
+      }
       menus.push(menu);
     }
   };
@@ -214,6 +217,13 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
+  const _setActiveMenu = (menu) => {
+    // if this menu should be enabled
+    // then find all the other menus on this same side
+    // and automatically disable other same side menus
+    const side = menu.side;
+    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
+  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -285,6 +295,7 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
+    _setActiveMenu,
   };
 };
 const menuController = /*@__PURE__*/ createMenuController();

package/dist/cjs/index.cjs.js

@@ -14,7 +14,7 @@ const index$1 = require('./index-0ee995e4.js');
 const ionicGlobal = require('./ionic-global-14a0604b.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const config = require('./config-d5882735.js');
-const index$2 = require('./index-d90b29dd.js');
+const index$2 = require('./index-5121bb90.js');
 const overlays = require('./overlays-d3a13e61.js');
 require('./index-306a7476.js');
 require('./index-6f887430.js');

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

@@ -7,16 +7,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f887430.js');
 const cubicBezier = require('./cubic-bezier-6b9222ad.js');
+const index$2 = require('./index-306a7476.js');
 const gestureController = require('./gesture-controller-b46721be.js');
 const helpers = require('./helpers-ea4ccbcb.js');
-const index$1 = require('./index-d90b29dd.js');
+const index$1 = require('./index-5121bb90.js');
 const overlays = require('./overlays-d3a13e61.js');
 const ionicGlobal = require('./ionic-global-14a0604b.js');
 const theme = require('./theme-fbc56b3b.js');
-const index$2 = require('./index-d8d1fc0b.js');
+const index$3 = require('./index-d8d1fc0b.js');
 require('./hardware-back-button-b67c8e75.js');
 require('./animation-2bb33618.js');
-require('./index-306a7476.js');
 require('./framework-delegate-c0873a6f.js');
 require('./index-cc7dfb7c.js');
 
@@ -553,6 +553,17 @@ const Menu = class {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
+    if (index$2.doc === null || index$2.doc === void 0 ? void 0 : index$2.doc.contains(this.el)) {
+      /**
+       * Only set the active menu if the menu element is
+       * present in the DOM. Otherwise if it was destructively
+       * re-hydrated (through Angular Universal), then ignore
+       * setting the removed node as the active menu.
+       */
+      if (!this.disabled) {
+        index$1.menuController._setActiveMenu(this);
+      }
+    }
     helpers.assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {
@@ -636,7 +647,7 @@ const MenuButton = class {
   render() {
     const { color, disabled, inheritedAttributes } = this;
     const mode = ionicGlobal.getIonMode(this);
-    const menuIcon = ionicGlobal.config.get('menuIcon', mode === 'ios' ? index$2.menuOutline : index$2.menuSharp);
+    const menuIcon = ionicGlobal.config.get('menuIcon', mode === 'ios' ? index$3.menuOutline : index$3.menuSharp);
     const hidden = this.autoHide && !this.visible;
     const attrs = {
       type: this.type,

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

@@ -6,10 +6,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-6f887430.js');
+const helpers = require('./helpers-ea4ccbcb.js');
 const dir = require('./dir-f1e0ca26.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-14a0604b.js');
-const helpers = require('./helpers-ea4ccbcb.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)}";
 
@@ -89,29 +89,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();
@@ -133,6 +111,13 @@ const Segment = class {
   }
   async componentDidLoad() {
     this.setCheckedClasses();
+    /**
+     * We need to wait for the buttons to all be rendered
+     * before we can scroll.
+     */
+    helpers.raf(() => {
+      this.scrollActiveButtonIntoView();
+    });
     this.gesture = (await Promise.resolve().then(function () { return require('./index-0ee995e4.js'); })).createGesture({
       el: this.el,
       gestureName: 'segment',
@@ -261,6 +246,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 = dir.isRTL(this.el);
     const activated = this.activated;

package/dist/collection/components/menu/menu.js

@@ -3,6 +3,7 @@
  */
 import { Build, Host, h } from "@stencil/core";
 import { getTimeGivenProgression } from "../../utils/animation/cubic-bezier";
+import { doc } from "../../utils/browser/index";
 import { GESTURE_CONTROLLER } from "../../utils/gesture/index";
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
@@ -539,6 +540,17 @@ export class Menu {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
+    if (doc === null || doc === void 0 ? void 0 : doc.contains(this.el)) {
+      /**
+       * Only set the active menu if the menu element is
+       * present in the DOM. Otherwise if it was destructively
+       * re-hydrated (through Angular Universal), then ignore
+       * setting the removed node as the active menu.
+       */
+      if (!this.disabled) {
+        menuController._setActiveMenu(this);
+      }
+    }
     assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {

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,57 @@ configs().forEach(({ title, screenshot, config }) => {
     });
   });
 });
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('segment: scrollable (functionality)'), () => {
+    test.only('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');
+      // wait for segment to scroll, which is done in a raf
+      await page.waitForTimeout(500);
+      /**
+       * We can't use toBeVisible() here because it returns true
+       * even if the element is outside the viewport.
+       */
+      const box = await activeButton.boundingBox();
+      const viewport = page.viewportSize();
+      let isInViewport = false;
+      if (box && viewport) {
+        isInViewport = (box.x >= 0 &&
+          box.y >= 0 &&
+          box.x + box.width <= viewport.width &&
+          box.y + box.height <= viewport.height);
+      }
+      expect(isInViewport).toBe(true);
+    });
+  });
+});

package/dist/collection/utils/menu-controller/index.js

@@ -115,6 +115,9 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
+      if (!menu.disabled) {
+        _setActiveMenu(menu);
+      }
       menus.push(menu);
     }
   };
@@ -124,6 +127,13 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
+  const _setActiveMenu = (menu) => {
+    // if this menu should be enabled
+    // then find all the other menus on this same side
+    // and automatically disable other same side menus
+    const side = menu.side;
+    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
+  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -195,6 +205,7 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
+    _setActiveMenu,
   };
 };
 export const menuController = /*@__PURE__*/ createMenuController();

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-10-02T19:12:01",
+  "timestamp": "2023-10-03T17:56:21",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.3.0",

package/dist/esm/{index-39b3eab6.js → index-61bddc90.js}

@@ -203,6 +203,9 @@ const createMenuController = () => {
   };
   const _register = (menu) => {
     if (menus.indexOf(menu) < 0) {
+      if (!menu.disabled) {
+        _setActiveMenu(menu);
+      }
       menus.push(menu);
     }
   };
@@ -212,6 +215,13 @@ const createMenuController = () => {
       menus.splice(index, 1);
     }
   };
+  const _setActiveMenu = (menu) => {
+    // if this menu should be enabled
+    // then find all the other menus on this same side
+    // and automatically disable other same side menus
+    const side = menu.side;
+    menus.filter((m) => m.side === side && m !== menu).forEach((m) => (m.disabled = true));
+  };
   const _setOpen = async (menu, shouldOpen, animated) => {
     if (isAnimatingSync()) {
       return false;
@@ -283,6 +293,7 @@ const createMenuController = () => {
     _register,
     _unregister,
     _setOpen,
+    _setActiveMenu,
   };
 };
 const menuController = /*@__PURE__*/ createMenuController();

package/dist/esm/index.js

@@ -10,7 +10,7 @@ export { createGesture } from './index-ff313b19.js';
 export { g as getPlatforms, i as initialize, a as isPlatform } from './ionic-global-b3fc28dd.js';
 export { c as componentOnReady } from './helpers-3379ba19.js';
 export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-96c9ace3.js';
-export { m as menuController } from './index-39b3eab6.js';
+export { m as menuController } from './index-61bddc90.js';
 export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-8fc6656c.js';
 import './index-7a14ecec.js';
 import './index-2d388930.js';

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

@@ -3,16 +3,16 @@
  */
 import { r as registerInstance, d as createEvent, h, H as Host, f as getElement } from './index-2d388930.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-66542bc5.js';
+import { d as doc } from './index-7a14ecec.js';
 import { G as GESTURE_CONTROLLER } from './gesture-controller-0fa396c4.js';
 import { p as isEndSide, i as inheritAriaAttributes, o as assert, l as clamp } from './helpers-3379ba19.js';
-import { m as menuController } from './index-39b3eab6.js';
+import { m as menuController } from './index-61bddc90.js';
 import { q as getPresentedOverlay } from './overlays-8fc6656c.js';
 import { c as config, b as getIonMode } from './ionic-global-b3fc28dd.js';
 import { c as createColorClasses, h as hostContext } from './theme-17531cdf.js';
 import { u as menuOutline, v as menuSharp } from './index-ecfc2c9f.js';
 import './hardware-back-button-39299f84.js';
 import './animation-a1d9e088.js';
-import './index-7a14ecec.js';
 import './framework-delegate-aa433dea.js';
 import './index-595d62c9.js';
 
@@ -549,6 +549,17 @@ const Menu = class {
       // close if this menu is open, and should not be enabled
       this.forceClosing();
     }
+    if (doc === null || doc === void 0 ? void 0 : doc.contains(this.el)) {
+      /**
+       * Only set the active menu if the menu element is
+       * present in the DOM. Otherwise if it was destructively
+       * re-hydrated (through Angular Universal), then ignore
+       * setting the removed node as the active menu.
+       */
+      if (!this.disabled) {
+        menuController._setActiveMenu(this);
+      }
+    }
     assert(!this.isAnimating, 'can not be animating');
   }
   forceClosing() {