voyager-ionic-core 8.3.3 → 8.4.0

package/dist/collection/components/segment-view/segment-view.ios.css

@@ -0,0 +1,83 @@
+:host {
+  display: flex;
+  height: 100%;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  /* Hide scrollbar in Firefox */
+  scrollbar-width: none;
+  /* Hide scrollbar in IE and Edge */
+  -ms-overflow-style: none;
+}
+
+/* Hide scrollbar in webkit */
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+:host(.segment-view-disabled) {
+  touch-action: none;
+  overflow-x: hidden;
+}
+
+:host(.segment-view-scroll-disabled) {
+  pointer-events: none;
+}
+
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host(.segment-view-disabled) {
+  opacity: 0.3;
+}

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

@@ -0,0 +1,227 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Host, h } from "@stencil/core";
+export class SegmentView {
+    constructor() {
+        this.scrollEndTimeout = null;
+        this.isTouching = false;
+        this.disabled = false;
+        this.isManualScroll = undefined;
+    }
+    handleScroll(ev) {
+        var _a;
+        const { scrollLeft, scrollWidth, clientWidth } = ev.target;
+        const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
+        this.ionSegmentViewScroll.emit({
+            scrollRatio,
+            isManualScroll: (_a = this.isManualScroll) !== null && _a !== void 0 ? _a : true,
+        });
+        // Reset the timeout to check for scroll end
+        this.resetScrollEndTimeout();
+    }
+    /**
+     * Handle touch start event to know when the user is actively dragging the segment view.
+     */
+    handleScrollStart() {
+        if (this.scrollEndTimeout) {
+            clearTimeout(this.scrollEndTimeout);
+            this.scrollEndTimeout = null;
+        }
+        this.isTouching = true;
+    }
+    /**
+     * Handle touch end event to know when the user is no longer dragging the segment view.
+     */
+    handleTouchEnd() {
+        this.isTouching = false;
+    }
+    /**
+     * Reset the scroll end detection timer. This is called on every scroll event.
+     */
+    resetScrollEndTimeout() {
+        if (this.scrollEndTimeout) {
+            clearTimeout(this.scrollEndTimeout);
+            this.scrollEndTimeout = null;
+        }
+        this.scrollEndTimeout = setTimeout(() => {
+            this.checkForScrollEnd();
+        }, 
+        // Setting this to a lower value may result in inconsistencies in behavior
+        // across browsers (particularly Firefox).
+        // Ideally, all of this logic is removed once the scroll end event is
+        // supported on all browsers (https://caniuse.com/?search=scrollend)
+        100);
+    }
+    /**
+     * Check if the scroll has ended and the user is not actively touching.
+     * If the conditions are met (active content is enabled and no active touch),
+     * reset the scroll position and emit the scroll end event.
+     */
+    checkForScrollEnd() {
+        // Only emit scroll end event if the active content is not disabled and
+        // the user is not touching the segment view
+        if (!this.isTouching) {
+            this.isManualScroll = undefined;
+        }
+    }
+    /**
+     * @internal
+     *
+     * This method is used to programmatically set the displayed segment content
+     * in the segment view. Calling this method will update the `value` of the
+     * corresponding segment button.
+     *
+     * @param id: The id of the segment content to display.
+     * @param smoothScroll: Whether to animate the scroll transition.
+     */
+    async setContent(id, smoothScroll = true) {
+        const contents = this.getSegmentContents();
+        const index = contents.findIndex((content) => content.id === id);
+        if (index === -1)
+            return;
+        this.isManualScroll = false;
+        this.resetScrollEndTimeout();
+        const contentWidth = this.el.offsetWidth;
+        this.el.scrollTo({
+            top: 0,
+            left: index * contentWidth,
+            behavior: smoothScroll ? 'smooth' : 'instant',
+        });
+    }
+    getSegmentContents() {
+        return Array.from(this.el.querySelectorAll('ion-segment-content'));
+    }
+    render() {
+        const { disabled, isManualScroll } = this;
+        return (h(Host, { key: '9f4f11d31c4db776f077e59ae895b35dd4454717', class: {
+                'segment-view-disabled': disabled,
+                'segment-view-scroll-disabled': isManualScroll === false,
+            } }, h("slot", { key: 'ea58b21f031cee2ab2b70580f336deaefa364538' })));
+    }
+    static get is() { return "ion-segment-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "ios": ["segment-view.ios.scss"],
+            "md": ["segment-view.md.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "ios": ["segment-view.ios.css"],
+            "md": ["segment-view.md.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the segment view cannot be interacted with."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isManualScroll": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ionSegmentViewScroll",
+                "name": "ionSegmentViewScroll",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the segment view is scrolled."
+                },
+                "complexType": {
+                    "original": "SegmentViewScrollEvent",
+                    "resolved": "SegmentViewScrollEvent",
+                    "references": {
+                        "SegmentViewScrollEvent": {
+                            "location": "import",
+                            "path": "./segment-view-interface",
+                            "id": "src/components/segment-view/segment-view-interface.ts::SegmentViewScrollEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setContent": {
+                "complexType": {
+                    "signature": "(id: string, smoothScroll?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ": The id of the segment content to display."
+                        }, {
+                            "name": "smoothScroll",
+                            "type": "boolean",
+                            "docs": ": Whether to animate the scroll transition."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "This method is used to programmatically set the displayed segment content\nin the segment view. Calling this method will update the `value` of the\ncorresponding segment button."
+                        }, {
+                            "name": "param",
+                            "text": "id : The id of the segment content to display."
+                        }, {
+                            "name": "param",
+                            "text": "smoothScroll : Whether to animate the scroll transition."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchstart",
+                "method": "handleScrollStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "handleTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/segment-view/segment-view.md.css

@@ -0,0 +1,83 @@
+:host {
+  display: flex;
+  height: 100%;
+  overflow-x: scroll;
+  scroll-snap-type: x mandatory;
+  /* Hide scrollbar in Firefox */
+  scrollbar-width: none;
+  /* Hide scrollbar in IE and Edge */
+  -ms-overflow-style: none;
+}
+
+/* Hide scrollbar in webkit */
+:host::-webkit-scrollbar {
+  display: none;
+}
+
+:host(.segment-view-disabled) {
+  touch-action: none;
+  overflow-x: hidden;
+}
+
+:host(.segment-view-scroll-disabled) {
+  pointer-events: none;
+}
+
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host(.segment-view-disabled) {
+  opacity: 0.3;
+}

package/dist/collection/components/select/select.js

@@ -4,7 +4,7 @@
 import { Host, h, forceUpdate } from "@stencil/core";
 import { compareOptions, createNotchController, isOptionSelected } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
-import { actionSheetController, alertController, popoverController } from "../../utils/overlays";
+import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { watchForOptions } from "../../utils/watch-options";
@@ -160,13 +160,12 @@ export class Select {
             this.setFocus();
         });
         await overlay.present();
-        // focus selected option for popovers
-        if (this.interface === 'popover') {
-            const indexOfSelected = this.childOpts.map((o) => o.value).indexOf(this.value);
+        // focus selected option for popovers and modals
+        if (this.interface === 'popover' || this.interface === 'modal') {
+            const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
             if (indexOfSelected > -1) {
                 const selectedItem = overlay.querySelector(`.select-interface-option:nth-child(${indexOfSelected + 1})`);
                 if (selectedItem) {
-                    focusVisibleElement(selectedItem);
                     /**
                      * Browsers such as Firefox do not
                      * correctly delegate focus when manually
@@ -180,8 +179,11 @@ export class Select {
                      */
                     const interactiveEl = selectedItem.querySelector('ion-radio, ion-checkbox');
                     if (interactiveEl) {
-                        interactiveEl.focus();
+                        // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                        // and removing `ion-focused` style
+                        interactiveEl.setFocus();
                     }
+                    focusVisibleElement(selectedItem);
                 }
             }
             else {
@@ -190,11 +192,14 @@ export class Select {
                  */
                 const firstEnabledOption = overlay.querySelector('ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)');
                 if (firstEnabledOption) {
-                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                     /**
                      * Focus the option for the same reason as we do above.
+                     *
+                     * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
+                     * and removing `ion-focused` style
                      */
-                    firstEnabledOption.focus();
+                    firstEnabledOption.setFocus();
+                    focusVisibleElement(firstEnabledOption.closest('ion-item'));
                 }
             }
         }
@@ -216,6 +221,9 @@ export class Select {
         if (selectInterface === 'popover') {
             return this.openPopover(ev);
         }
+        if (selectInterface === 'modal') {
+            return this.openModal();
+        }
         return this.openAlert();
     }
     updateOverlayOptions() {
@@ -232,7 +240,13 @@ export class Select {
             case 'popover':
                 const popover = overlay.querySelector('ion-select-popover');
                 if (popover) {
-                    popover.options = this.createPopoverOptions(childOpts, value);
+                    popover.options = this.createOverlaySelectOptions(childOpts, value);
+                }
+                break;
+            case 'modal':
+                const modal = overlay.querySelector('ion-select-modal');
+                if (modal) {
+                    modal.options = this.createOverlaySelectOptions(childOpts, value);
                 }
                 break;
             case 'alert':
@@ -287,7 +301,7 @@ export class Select {
         });
         return alertInputs;
     }
-    createPopoverOptions(data, selectValue) {
+    createOverlaySelectOptions(data, selectValue) {
         const popoverOptions = data.map((option) => {
             const value = getOptionValue(option);
             // Remove hydrated before copying over classes
@@ -347,7 +361,7 @@ export class Select {
                 message: interfaceOptions.message,
                 multiple,
                 value,
-                options: this.createPopoverOptions(this.childOpts, value),
+                options: this.createOverlaySelectOptions(this.childOpts, value),
             } });
         /**
          * Workaround for Stencil to autodefine
@@ -416,6 +430,29 @@ export class Select {
         }
         return alertController.create(alertOpts);
     }
+    openModal() {
+        const { multiple, value, interfaceOptions } = this;
+        const mode = getIonMode(this);
+        const modalOpts = Object.assign(Object.assign({}, interfaceOptions), { mode, cssClass: ['select-modal', interfaceOptions.cssClass], component: 'ion-select-modal', componentProps: {
+                header: interfaceOptions.header,
+                multiple,
+                value,
+                options: this.createOverlaySelectOptions(this.childOpts, value),
+            } });
+        /**
+         * Workaround for Stencil to autodefine
+         * ion-select-modal and ion-modal when
+         * using Custom Elements build.
+         */
+        // eslint-disable-next-line
+        if (false) {
+            // eslint-disable-next-line
+            // @ts-ignore
+            document.createElement('ion-select-modal');
+            document.createElement('ion-modal');
+        }
+        return modalController.create(modalOpts);
+    }
     /**
      * Close the select interface.
      */
@@ -623,7 +660,7 @@ export class Select {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
-        return (h(Host, { key: '73c571c1f8468e1c3f4fe02fbbb33ba9cbc8e989', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '144dfa5c49549a74fe516c65b9b8104a477ac789', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -639,7 +676,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '2b08538cba0b9f747541d57ac18fb6a1ea658878', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '33f54373bcb02c72a9d0af2efffebc27ee2c69fe', class: "select-wrapper-inner" }, h("slot", { key: 'd1c93aec99dc1cd6410f93309cef615fe04b541b', name: "start" }), h("div", { key: '493d1a3cad9565516f855bef75685b020785ffd3', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '353a3ee5635f8a8f3be411efd6caef6c2ad74a89', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'fd5f85555db02affe954f9f4f2876ac8fe676234', class: "select-highlight" }))));
+            }) }, h("label", { key: '0edcfcbac575a9dccc77991531b6980d1caebf42', class: "select-wrapper", id: "select-label" }, this.renderLabelContainer(), h("div", { key: '348151d90cb093f5d21c7d4a834264ac4a312c40', class: "select-wrapper-inner" }, h("slot", { key: '8b7708c7f81217435c58276da0c08bba766d9500', name: "start" }), h("div", { key: '10c520a335da0a0d1cf40f9365597beb244d3b48', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox()), h("slot", { key: '0f15c40a5495e98e29d2a21ba21e0bc6f1c0125a', name: "end" }), !hasFloatingOrStackedLabel && this.renderSelectIcon()), hasFloatingOrStackedLabel && this.renderSelectIcon(), shouldRenderHighlight && h("div", { key: 'c87faad2e5ebf7f9453397d7ede43abd64d21294', class: "select-highlight" }))));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -761,7 +798,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "SelectInterface",
-                    "resolved": "\"action-sheet\" | \"alert\" | \"popover\"",
+                    "resolved": "\"action-sheet\" | \"alert\" | \"modal\" | \"popover\"",
                     "references": {
                         "SelectInterface": {
                             "location": "import",
@@ -774,7 +811,7 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The interface the select should use: `action-sheet`, `popover` or `alert`."
+                    "text": "The interface the select should use: `action-sheet`, `popover`, `alert`, or `modal`."
                 },
                 "attribute": "interface",
                 "reflect": false,
@@ -792,7 +829,7 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet) and the\n[ion-popover docs](./popover) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface."
+                    "text": "Any additional options that the `alert`, `action-sheet` or `popover` interface\ncan take. See the [ion-alert docs](./alert), the\n[ion-action-sheet docs](./action-sheet), the\n[ion-popover docs](./popover), and the [ion-modal docs](./modal) for the\ncreate options for each interface.\n\nNote: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface."
                 },
                 "attribute": "interface-options",
                 "reflect": false,
@@ -1143,6 +1180,14 @@ export class Select {
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
+                        },
+                        "HTMLIonRadioElement": {
+                            "location": "global",
+                            "id": "global::HTMLIonRadioElement"
+                        },
+                        "HTMLIonCheckboxElement": {
+                            "location": "global",
+                            "id": "global::HTMLIonCheckboxElement"
                         }
                     },
                     "return": "Promise<any>"

package/dist/collection/components/select-modal/select-modal-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/select-modal/select-modal.ios.css

@@ -0,0 +1,3 @@
+:host {
+  height: 100%;
+}