@ionic/core 8.4.2-dev.11736277041.14f34ba1 → 8.4.2-dev.11736797843.16cc5058

package/dist/collection/components/toggle/toggle.js

@@ -24,6 +24,39 @@ export class Toggle {
         this.lastDrag = 0;
         this.inheritedAttributes = {};
         this.didLoad = false;
+        this.activated = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the toggle is selected.
+         */
+        this.checked = false;
+        /**
+         * If `true`, the user cannot interact with the toggle.
+         */
+        this.disabled = false;
+        /**
+         * The value of the toggle does not mean if it's checked or not, use the `checked`
+         * property for that.
+         *
+         * The value of a toggle is analogous to the value of a `<input type="checkbox">`,
+         * it's only used when the toggle participates in a native `<form>`.
+         */
+        this.value = 'on';
+        /**
+         * Enables the on/off accessibility switch labels within the toggle.
+         */
+        this.enableOnOffLabels = config.get('toggleOnOffLabels');
+        /**
+         * Where to place the label relative to the input.
+         * `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         * `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        this.labelPlacement = 'start';
         this.setupGesture = async () => {
             const { toggleTrack } = this;
             if (toggleTrack) {
@@ -61,16 +94,6 @@ export class Toggle {
             }
             return checked ? removeOutline : ellipseOutline;
         };
-        this.activated = false;
-        this.color = undefined;
-        this.name = this.inputId;
-        this.checked = false;
-        this.disabled = false;
-        this.value = 'on';
-        this.enableOnOffLabels = config.get('toggleOnOffLabels');
-        this.labelPlacement = 'start';
-        this.justify = undefined;
-        this.alignment = undefined;
     }
     disabledChanged() {
         if (this.gesture) {
@@ -208,6 +231,8 @@ export class Toggle {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true
             },
@@ -225,6 +250,8 @@ export class Toggle {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -243,6 +270,8 @@ export class Toggle {
                     "tags": [],
                     "text": "If `true`, the toggle is selected."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
@@ -261,6 +290,8 @@ export class Toggle {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the toggle."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -279,6 +310,8 @@ export class Toggle {
                     "tags": [],
                     "text": "The value of the toggle does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\nit's only used when the toggle participates in a native `<form>`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "'on'"
@@ -297,6 +330,8 @@ export class Toggle {
                     "tags": [],
                     "text": "Enables the on/off accessibility switch labels within the toggle."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "enable-on-off-labels",
                 "reflect": false,
                 "defaultValue": "config.get('toggleOnOffLabels')"
@@ -315,6 +350,8 @@ export class Toggle {
                     "tags": [],
                     "text": "Where to place the label relative to the input.\n`\"start\"`: The label will appear to the left of the toggle in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the toggle in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-placement",
                 "reflect": false,
                 "defaultValue": "'start'"
@@ -333,6 +370,8 @@ export class Toggle {
                     "tags": [],
                     "text": "How to pack the label and toggle within a line.\n`\"start\"`: The label and toggle will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and toggle will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and toggle will appear on opposite\nends of the line with space between the two elements.\nSetting this property will change the toggle `display` to `block`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "justify",
                 "reflect": false
             },
@@ -350,6 +389,8 @@ export class Toggle {
                     "tags": [],
                     "text": "How to control the alignment of the toggle and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\nSetting this property will change the toggle `display` to `block`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "alignment",
                 "reflect": false
             }

package/dist/collection/components/toolbar/toolbar.js

@@ -16,7 +16,6 @@ import { getIonMode } from "../../global/ionic-global";
 export class Toolbar {
     constructor() {
         this.childrenStyles = new Map();
-        this.color = undefined;
     }
     componentWillLoad() {
         const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
@@ -103,6 +102,8 @@ export class Toolbar {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": true
             }

package/dist/collection/utils/focus-visible.js

@@ -3,8 +3,23 @@
  */
 const ION_FOCUSED = 'ion-focused';
 const ION_FOCUSABLE = 'ion-focusable';
+const FOCUS_KEYS = [
+    'Tab',
+    'ArrowDown',
+    'Space',
+    'Escape',
+    ' ',
+    'Shift',
+    'Enter',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'Home',
+    'End',
+];
 export const startFocusVisible = (rootEl) => {
     let currentFocus = [];
+    let keyboardMode = true;
     const ref = rootEl ? rootEl.shadowRoot : document;
     const root = rootEl ? rootEl : document.body;
     const setFocus = (elements) => {
@@ -13,24 +28,39 @@ export const startFocusVisible = (rootEl) => {
         currentFocus = elements;
     };
     const pointerDown = () => {
+        keyboardMode = false;
         setFocus([]);
     };
+    const onKeydown = (ev) => {
+        keyboardMode = FOCUS_KEYS.includes(ev.key);
+        if (!keyboardMode) {
+            setFocus([]);
+        }
+    };
     const onFocusin = (ev) => {
-        const toFocus = ev.composedPath().filter((el) => {
-            return el instanceof HTMLElement && el.classList.contains(ION_FOCUSABLE);
-        });
-        setFocus(toFocus);
+        if (keyboardMode && ev.composedPath !== undefined) {
+            const toFocus = ev.composedPath().filter((el) => {
+                // TODO(FW-2832): type
+                if (el.classList) {
+                    return el.classList.contains(ION_FOCUSABLE);
+                }
+                return false;
+            });
+            setFocus(toFocus);
+        }
     };
     const onFocusout = () => {
         if (ref.activeElement === root) {
             setFocus([]);
         }
     };
+    ref.addEventListener('keydown', onKeydown);
     ref.addEventListener('focusin', onFocusin);
     ref.addEventListener('focusout', onFocusout);
     ref.addEventListener('touchstart', pointerDown, { passive: true });
     ref.addEventListener('mousedown', pointerDown);
     const destroy = () => {
+        ref.removeEventListener('keydown', onKeydown);
         ref.removeEventListener('focusin', onFocusin);
         ref.removeEventListener('focusout', onFocusout);
         ref.removeEventListener('touchstart', pointerDown);

package/dist/docs.d.ts

@@ -316,6 +316,14 @@ export interface JsonDocsProp {
    * ```
    */
   required: boolean;
+  /**
+   * `true` if the prop has a `get()`. `false` otherwise
+   */
+  getter: boolean;
+  /**
+   * `true` if the prop has a `set()`. `false` otherwise
+   */
+  setter: boolean;
 }
 export interface JsonDocsMethod {
   name: string;