voyager-ionic-core 8.0.1 → 8.1.0

package/dist/docs.json

@@ -1,8 +1,8 @@
 {
-  "timestamp": "2024-04-25T02:36:29",
+  "timestamp": "2024-05-01T20:22:34",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.17.1",
+    "version": "4.17.2",
     "typescriptVersion": "5.4.5"
   },
   "components": [
@@ -415,7 +415,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically setting\nthe value property.",
+          "docs": "Emitted when the value property has changed as a result of a user action such as a click.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         }
       ],
@@ -5302,7 +5302,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the checked property has changed\nas a result of a user action such as a click.\nThis event will not emit when programmatically\nsetting the checked property.",
+          "docs": "Emitted when the checked property has changed as a result of a user action such as a click.\n\nThis event will not emit when programmatically setting the `checked` property.",
           "docsTags": []
         },
         {
@@ -6309,6 +6309,33 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "fixedSlotPlacement",
+          "type": "\"after\" | \"before\"",
+          "complexType": {
+            "original": "'after' | 'before'",
+            "resolved": "\"after\" | \"before\"",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "fixed-slot-placement",
+          "reflectToAttr": false,
+          "docs": "Controls where the fixed content is placed relative to the main content\nin the DOM. This can be used to control the order in which fixed elements\nreceive keyboard focus.\nFor example, if a FAB in the fixed slot should receive keyboard focus before\nthe main page content, set this property to `'before'`.",
+          "docsTags": [],
+          "default": "'after'",
+          "values": [
+            {
+              "value": "after",
+              "type": "string"
+            },
+            {
+              "value": "before",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "forceOverscroll",
           "type": "boolean | undefined",
@@ -7892,7 +7919,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value (selected date) has changed.",
+          "docs": "Emitted when the value (selected date) has changed.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         },
         {
@@ -10073,6 +10100,30 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "clearInputIcon",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "clear-input-icon",
+          "reflectToAttr": false,
+          "docs": "The icon to use for the clear button. Only applies when `clearInput` is set to `true`.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "clearOnEdit",
           "type": "boolean | undefined",
@@ -11020,7 +11071,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionChange` event is fired when the user modifies the input's value.\nUnlike the `ionInput` event, the `ionChange` event is only fired when changes\nare committed, not as the user types.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.",
+          "docs": "The `ionChange` event is fired when the user modifies the input's value.\nUnlike the `ionInput` event, the `ionChange` event is only fired when changes\nare committed, not as the user types.\n\nDepending on the way the users interacts with the element, the `ionChange`\nevent fires at a different moment:\n- When the user commits the change explicitly (e.g. by selecting a date\nfrom a date picker for `<ion-input type=\"date\">`, pressing the \"Enter\" key, etc.).\n- When the element loses focus after its value has changed: for elements\nwhere the user's interaction is typing.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         },
         {
@@ -15172,6 +15223,28 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "focusTrap",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "focus-trap",
+          "reflectToAttr": false,
+          "docs": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay.",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "handle",
           "type": "boolean | undefined",
@@ -17668,7 +17741,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.",
+          "docs": "Emitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         }
       ],
@@ -18860,6 +18933,28 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "focusTrap",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "focus-trap",
+          "reflectToAttr": false,
+          "docs": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay.",
+          "docsTags": [],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "htmlAttributes",
           "type": "undefined | { [key: string]: any; }",
@@ -20372,7 +20467,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.",
+          "docs": "Emitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         }
       ],
@@ -20937,7 +21032,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\n`ionChange` is not fired when the value is changed programmatically.",
+          "docs": "The `ionChange` event is fired for `<ion-range>` elements when the user\nmodifies the element's value:\n- When the user releases the knob after dragging;\n- When the user moves the knob with keyboard arrows\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         },
         {
@@ -23723,7 +23818,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.",
+          "docs": "The `ionChange` event is fired for `<ion-searchbar>` elements when the user\nmodifies the element's value. Unlike the `ionInput` event, the `ionChange`\nevent is not necessarily fired for each alteration to an element's value.\n\nThe `ionChange` event is fired when the value has been committed\nby the user. This can happen when the element loses focus or\nwhen the \"Enter\" key is pressed. `ionChange` can also fire\nwhen clicking the clear or cancel buttons.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         },
         {
@@ -24086,7 +24181,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value property has changed and any\ndragging pointer has been released from `ion-segment`.",
+          "docs": "Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         }
       ],
@@ -25167,7 +25262,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the value has changed.",
+          "docs": "Emitted when the value has changed.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         },
         {
@@ -27641,7 +27736,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "The `ionChange` event is fired when the user modifies the textarea's value.\nUnlike the `ionInput` event, the `ionChange` event is fired when\nthe element loses focus after its value has been modified.",
+          "docs": "The `ionChange` event is fired when the user modifies the textarea's value.\nUnlike the `ionInput` event, the `ionChange` event is fired when\nthe element loses focus after its value has been modified.\n\nThis event will not emit when programmatically setting the `value` property.",
           "docsTags": []
         },
         {
@@ -29334,7 +29429,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user switches the toggle on or off. Does not emit\nwhen programmatically changing the value of the `checked` property.",
+          "docs": "Emitted when the user switches the toggle on or off.\n\nThis event will not emit when programmatically setting the `checked` property.",
           "docsTags": []
         },
         {

package/dist/esm/{app-globals-3cbaf9d9.js → app-globals-b99e6d29.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { i as initialize } from './ionic-global-d2d8f882.js';
+import { i as initialize } from './ionic-global-4528d288.js';
 
 const globalScripts = initialize;
 

package/dist/esm/{button-active-9e3c1f3b.js → button-active-920addb8.js}

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask } from './index-5dc2b88e.js';
+import { w as writeTask } from './index-9aab3bcf.js';
 import { h as hapticSelectionEnd, a as hapticSelectionStart, b as hapticSelectionChanged } from './haptic-ac164e4c.js';
 import { createGesture } from './index-39782642.js';
 

package/dist/esm/{hardware-back-button-804f43bb.js → hardware-back-button-2d9760b6.js}

@@ -2,8 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { w as win } from './index-a5d50daf.js';
-import { c as config } from './ionic-global-d2d8f882.js';
-import './index-5dc2b88e.js';
+import { c as config } from './ionic-global-4528d288.js';
+import './index-9aab3bcf.js';
 
 /**
  * CloseWatcher is a newer API that lets

package/dist/esm/{index-8dbae644.js → index-7ae7186a.js}

@@ -2,10 +2,10 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { d as doc } from './index-a5d50daf.js';
-import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-804f43bb.js';
+import { MENU_BACK_BUTTON_PRIORITY } from './hardware-back-button-2d9760b6.js';
 import { p as printIonWarning } from './index-9b0d46f4.js';
 import { c as componentOnReady } from './helpers-da915de8.js';
-import { b as getIonMode } from './ionic-global-d2d8f882.js';
+import { b as getIonMode } from './ionic-global-4528d288.js';
 import { c as createAnimation } from './animation-eab5a4ca.js';
 
 /**

package/dist/esm/{index-f7fbe1fb.js → index-8e6b6a24.js}

@@ -1,7 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as writeTask, B as Build } from './index-5dc2b88e.js';
+import { c as config } from './ionic-global-4528d288.js';
+import { w as writeTask, B as Build } from './index-9aab3bcf.js';
+import { p as printIonWarning } from './index-9b0d46f4.js';
 import { r as raf } from './helpers-da915de8.js';
 
 const LIFECYCLE_WILL_ENTER = 'ionViewWillEnter';
@@ -10,8 +12,117 @@ const LIFECYCLE_WILL_LEAVE = 'ionViewWillLeave';
 const LIFECYCLE_DID_LEAVE = 'ionViewDidLeave';
 const LIFECYCLE_WILL_UNLOAD = 'ionViewWillUnload';
 
-const iosTransitionAnimation = () => import('./ios.transition-a0041e41.js');
-const mdTransitionAnimation = () => import('./md.transition-0c0602d9.js');
+/**
+ * Moves focus to a specified element. Note that we do not remove the tabindex
+ * because that can result in an unintentional blur. Non-focusables can't be
+ * focused, so the body will get focused again.
+ */
+const moveFocus = (el) => {
+    el.tabIndex = -1;
+    el.focus();
+};
+/**
+ * Elements that are hidden using `display: none` should not be focused even if
+ * they are present in the DOM.
+ */
+const isVisible = (el) => {
+    return el.offsetParent !== null;
+};
+/**
+ * The focus controller allows us to manage focus within a view so assistive
+ * technologies can inform users of changes to the navigation state. Traditional
+ * native apps have a way of informing assistive technology about a navigation
+ * state change. Mobile browsers have this too, but only when doing a full page
+ * load. In a single page app we do not do that, so we need to build this
+ * integration ourselves.
+ */
+const createFocusController = () => {
+    const saveViewFocus = (referenceEl) => {
+        const focusManagerEnabled = config.get('focusManagerPriority', false);
+        /**
+         * When going back to a previously visited page focus should typically be moved
+         * back to the element that was last focused when the user was on this view.
+         */
+        if (focusManagerEnabled) {
+            const activeEl = document.activeElement;
+            if (activeEl !== null && (referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.contains(activeEl))) {
+                activeEl.setAttribute(LAST_FOCUS, 'true');
+            }
+        }
+    };
+    const setViewFocus = (referenceEl) => {
+        const focusManagerPriorities = config.get('focusManagerPriority', false);
+        /**
+         * If the focused element is a descendant of the referenceEl then it's possible
+         * that the app developer manually moved focus, so we do not want to override that.
+         * This can happen with inputs the are focused when a view transitions in.
+         */
+        if (Array.isArray(focusManagerPriorities) && !referenceEl.contains(document.activeElement)) {
+            /**
+             * When going back to a previously visited view focus should always be moved back
+             * to the element that the user was last focused on when they were on this view.
+             */
+            const lastFocus = referenceEl.querySelector(`[${LAST_FOCUS}]`);
+            if (lastFocus && isVisible(lastFocus)) {
+                moveFocus(lastFocus);
+                return;
+            }
+            for (const priority of focusManagerPriorities) {
+                /**
+                 * For each recognized case (excluding the default case) make sure to return
+                 * so that the fallback focus behavior does not run.
+                 *
+                 * We intentionally query for specific roles/semantic elements so that the
+                 * transition manager can work with both Ionic and non-Ionic UI components.
+                 *
+                 * If new selectors are added, be sure to remove the outline ring by adding
+                 * new selectors to rule in core.scss.
+                 */
+                switch (priority) {
+                    case 'content':
+                        const content = referenceEl.querySelector('main, [role="main"]');
+                        if (content && isVisible(content)) {
+                            moveFocus(content);
+                            return;
+                        }
+                        break;
+                    case 'heading':
+                        const headingOne = referenceEl.querySelector('h1, [role="heading"][aria-level="1"]');
+                        if (headingOne && isVisible(headingOne)) {
+                            moveFocus(headingOne);
+                            return;
+                        }
+                        break;
+                    case 'banner':
+                        const header = referenceEl.querySelector('header, [role="banner"]');
+                        if (header && isVisible(header)) {
+                            moveFocus(header);
+                            return;
+                        }
+                        break;
+                    default:
+                        printIonWarning(`Unrecognized focus manager priority value ${priority}`);
+                        break;
+                }
+            }
+            /**
+             * If there is nothing to focus then focus the page so focus at least moves to
+             * the correct view. The browser will then determine where within the page to
+             * move focus to.
+             */
+            moveFocus(referenceEl);
+        }
+    };
+    return {
+        saveViewFocus,
+        setViewFocus,
+    };
+};
+const LAST_FOCUS = 'ion-last-focus';
+
+const iosTransitionAnimation = () => import('./ios.transition-e35d0940.js');
+const mdTransitionAnimation = () => import('./md.transition-4b90a1f0.js');
+const focusController = createFocusController();
 // TODO(FW-2832): types
 const transition = (opts) => {
     return new Promise((resolve, reject) => {
@@ -33,6 +144,7 @@ const transition = (opts) => {
 const beforeTransition = (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
+    focusController.saveViewFocus(leavingEl);
     setZIndex(enteringEl, leavingEl, opts.direction);
     if (opts.showGoBack) {
         enteringEl.classList.add('can-go-back');
@@ -67,6 +179,7 @@ const afterTransition = (opts) => {
         leavingEl.classList.remove('ion-page-invisible');
         leavingEl.style.removeProperty('pointer-events');
     }
+    focusController.setViewFocus(enteringEl);
 };
 const getAnimationBuilder = async (opts) => {
     if (!opts.leavingEl || !opts.animated || opts.duration === 0) {
@@ -99,7 +212,12 @@ const animation = async (animationBuilder, opts) => {
 const noAnimation = async (opts) => {
     const enteringEl = opts.enteringEl;
     const leavingEl = opts.leavingEl;
-    await waitForReady(opts, false);
+    const focusManagerEnabled = config.get('focusManagerPriority', false);
+    /**
+     * If the focus manager is enabled then we need to wait for Ionic components to be
+     * rendered otherwise the component to focus may not be focused because it is hidden.
+     */
+    await waitForReady(opts, focusManagerEnabled);
     fireWillEvents(enteringEl, leavingEl);
     fireDidEvents(enteringEl, leavingEl);
     return {