voyager-ionic-core 7.7.3 → 8.0.0-beta.2

package/dist/collection/components/picker-internal/picker-internal.js

@@ -1,560 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { Host, h } from "@stencil/core";
-import { getElementRoot } from "../../utils/helpers";
-/**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
- * @internal
- */
-export class PickerInternal {
-    constructor() {
-        this.useInputMode = false;
-        this.isInHighlightBounds = (ev) => {
-            const { highlightEl } = this;
-            if (!highlightEl) {
-                return false;
-            }
-            const bbox = highlightEl.getBoundingClientRect();
-            /**
-             * Check to see if the user clicked
-             * outside the bounds of the highlight.
-             */
-            const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
-            const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
-            if (outsideX || outsideY) {
-                return false;
-            }
-            return true;
-        };
-        /**
-         * If we are no longer focused
-         * on a picker column, then we should
-         * exit input mode. An exception is made
-         * for the input in the picker since having
-         * that focused means we are still in input mode.
-         */
-        this.onFocusOut = (ev) => {
-            // TODO(FW-2832): type
-            const { relatedTarget } = ev;
-            if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
-                this.exitInputMode();
-            }
-        };
-        /**
-         * When picker columns receive focus
-         * the parent picker needs to determine
-         * whether to enter/exit input mode.
-         */
-        this.onFocusIn = (ev) => {
-            // TODO(FW-2832): type
-            const { target } = ev;
-            /**
-             * Due to browser differences in how/when focus
-             * is dispatched on certain elements, we need to
-             * make sure that this function only ever runs when
-             * focusing a picker column.
-             */
-            if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
-                return;
-            }
-            /**
-             * If we have actionOnClick
-             * then this means the user focused
-             * a picker column via mouse or
-             * touch (i.e. a PointerEvent). As a result,
-             * we should not enter/exit input mode
-             * until the click event has fired, which happens
-             * after the `focusin` event.
-             *
-             * Otherwise, the user likely focused
-             * the column using their keyboard and
-             * we should enter/exit input mode automatically.
-             */
-            if (!this.actionOnClick) {
-                const columnEl = target;
-                const allowInput = columnEl.numericInput;
-                if (allowInput) {
-                    this.enterInputMode(columnEl, false);
-                }
-                else {
-                    this.exitInputMode();
-                }
-            }
-        };
-        /**
-         * On click we need to run an actionOnClick
-         * function that has been set in onPointerDown
-         * so that we enter/exit input mode correctly.
-         */
-        this.onClick = () => {
-            const { actionOnClick } = this;
-            if (actionOnClick) {
-                actionOnClick();
-                this.actionOnClick = undefined;
-            }
-        };
-        /**
-         * Clicking a column also focuses the column on
-         * certain browsers, so we use onPointerDown
-         * to tell the onFocusIn function that users
-         * are trying to click the column rather than
-         * focus the column using the keyboard. When the
-         * user completes the click, the onClick function
-         * runs and runs the actionOnClick callback.
-         */
-        this.onPointerDown = (ev) => {
-            const { useInputMode, inputModeColumn, el } = this;
-            if (this.isInHighlightBounds(ev)) {
-                /**
-                 * If we were already in
-                 * input mode, then we should determine
-                 * if we tapped a particular column and
-                 * should switch to input mode for
-                 * that specific column.
-                 */
-                if (useInputMode) {
-                    /**
-                     * If we tapped a picker column
-                     * then we should either switch to input
-                     * mode for that column or all columns.
-                     * Otherwise we should exit input mode
-                     * since we just tapped the highlight and
-                     * not a column.
-                     */
-                    if (ev.target.tagName === 'ION-PICKER-COLUMN-INTERNAL') {
-                        /**
-                         * If user taps 2 different columns
-                         * then we should just switch to input mode
-                         * for the new column rather than switching to
-                         * input mode for all columns.
-                         */
-                        if (inputModeColumn && inputModeColumn === ev.target) {
-                            this.actionOnClick = () => {
-                                this.enterInputMode();
-                            };
-                        }
-                        else {
-                            this.actionOnClick = () => {
-                                this.enterInputMode(ev.target);
-                            };
-                        }
-                    }
-                    else {
-                        this.actionOnClick = () => {
-                            this.exitInputMode();
-                        };
-                    }
-                    /**
-                     * If we were not already in
-                     * input mode, then we should
-                     * enter input mode for all columns.
-                     */
-                }
-                else {
-                    /**
-                     * If there is only 1 numeric input column
-                     * then we should skip multi column input.
-                     */
-                    const columns = el.querySelectorAll('ion-picker-column-internal.picker-column-numeric-input');
-                    const columnEl = columns.length === 1 ? ev.target : undefined;
-                    this.actionOnClick = () => {
-                        this.enterInputMode(columnEl);
-                    };
-                }
-                return;
-            }
-            this.actionOnClick = () => {
-                this.exitInputMode();
-            };
-        };
-        /**
-         * Enters input mode to allow
-         * for text entry of numeric values.
-         * If on mobile, we focus a hidden input
-         * field so that the on screen keyboard
-         * is brought up. When tabbing using a
-         * keyboard, picker columns receive an outline
-         * to indicate they are focused. As a result,
-         * we should not focus the hidden input as it
-         * would cause the outline to go away, preventing
-         * users from having any visual indication of which
-         * column is focused.
-         */
-        this.enterInputMode = (columnEl, focusInput = true) => {
-            const { inputEl, el } = this;
-            if (!inputEl) {
-                return;
-            }
-            /**
-             * Only active input mode if there is at
-             * least one column that accepts numeric input.
-             */
-            const hasInputColumn = el.querySelector('ion-picker-column-internal.picker-column-numeric-input');
-            if (!hasInputColumn) {
-                return;
-            }
-            /**
-             * If columnEl is undefined then
-             * it is assumed that all numeric pickers
-             * are eligible for text entry.
-             * (i.e. hour and minute columns)
-             */
-            this.useInputMode = true;
-            this.inputModeColumn = columnEl;
-            /**
-             * Users with a keyboard and mouse can
-             * activate input mode where the input is
-             * focused as well as when it is not focused,
-             * so we need to make sure we clean up any
-             * old listeners.
-             */
-            if (focusInput) {
-                if (this.destroyKeypressListener) {
-                    this.destroyKeypressListener();
-                    this.destroyKeypressListener = undefined;
-                }
-                inputEl.focus();
-            }
-            else {
-                // TODO FW-5900 Use keydown instead
-                el.addEventListener('keypress', this.onKeyPress);
-                this.destroyKeypressListener = () => {
-                    el.removeEventListener('keypress', this.onKeyPress);
-                };
-            }
-            this.emitInputModeChange();
-        };
-        this.onKeyPress = (ev) => {
-            const { inputEl } = this;
-            if (!inputEl) {
-                return;
-            }
-            const parsedValue = parseInt(ev.key, 10);
-            /**
-             * Only numbers should be allowed
-             */
-            if (!Number.isNaN(parsedValue)) {
-                inputEl.value += ev.key;
-                this.onInputChange();
-            }
-        };
-        this.selectSingleColumn = () => {
-            const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
-            if (!inputEl || !inputModeColumn) {
-                return;
-            }
-            const values = inputModeColumn.items.filter((item) => item.disabled !== true);
-            /**
-             * If users pause for a bit, the search
-             * value should be reset similar to how a
-             * <select> behaves. So typing "34", waiting,
-             * then typing "5" should select "05".
-             */
-            if (singleColumnSearchTimeout) {
-                clearTimeout(singleColumnSearchTimeout);
-            }
-            this.singleColumnSearchTimeout = setTimeout(() => {
-                inputEl.value = '';
-                this.singleColumnSearchTimeout = undefined;
-            }, 1000);
-            /**
-             * For values that are longer than 2 digits long
-             * we should shift the value over 1 character
-             * to the left. So typing "456" would result in "56".
-             * TODO: If we want to support more than just
-             * time entry, we should update this value to be
-             * the max length of all of the picker items.
-             */
-            if (inputEl.value.length >= 3) {
-                const startIndex = inputEl.value.length - 2;
-                const newString = inputEl.value.substring(startIndex);
-                inputEl.value = newString;
-                this.selectSingleColumn();
-                return;
-            }
-            /**
-             * Checking the value of the input gets priority
-             * first. For example, if the value of the input
-             * is "1" and we entered "2", then the complete value
-             * is "12" and we should select hour 12.
-             *
-             * Regex removes any leading zeros from values like "02",
-             * but it keeps a single zero if there are only zeros in the string.
-             * 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
-             * 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
-             */
-            const findItemFromCompleteValue = values.find(({ text }) => {
-                const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
-                return parsedText === inputEl.value;
-            });
-            if (findItemFromCompleteValue) {
-                inputModeColumn.setValue(findItemFromCompleteValue.value);
-                return;
-            }
-            /**
-             * If we typed "56" to get minute 56, then typed "7",
-             * we should select "07" as "567" is not a valid minute.
-             */
-            if (inputEl.value.length === 2) {
-                const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
-                inputEl.value = changedCharacter;
-                this.selectSingleColumn();
-            }
-        };
-        /**
-         * Searches a list of column items for a particular
-         * value. This is currently used for numeric values.
-         * The zeroBehavior can be set to account for leading
-         * or trailing zeros when looking at the item text.
-         */
-        this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
-            const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
-            const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
-            if (item) {
-                colEl.setValue(item.value);
-            }
-        };
-        this.selectMultiColumn = () => {
-            const { inputEl, el } = this;
-            if (!inputEl) {
-                return;
-            }
-            const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter((col) => col.numericInput);
-            const firstColumn = numericPickers[0];
-            const lastColumn = numericPickers[1];
-            let value = inputEl.value;
-            let minuteValue;
-            switch (value.length) {
-                case 1:
-                    this.searchColumn(firstColumn, value);
-                    break;
-                case 2:
-                    /**
-                     * If the first character is `0` or `1` it is
-                     * possible that users are trying to type `09`
-                     * or `11` into the hour field, so we should look
-                     * at that first.
-                     */
-                    const firstCharacter = inputEl.value.substring(0, 1);
-                    value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
-                    this.searchColumn(firstColumn, value);
-                    /**
-                     * If only checked the first value,
-                     * we can check the second value
-                     * for a match in the minutes column
-                     */
-                    if (value.length === 1) {
-                        minuteValue = inputEl.value.substring(inputEl.value.length - 1);
-                        this.searchColumn(lastColumn, minuteValue, 'end');
-                    }
-                    break;
-                case 3:
-                    /**
-                     * If the first character is `0` or `1` it is
-                     * possible that users are trying to type `09`
-                     * or `11` into the hour field, so we should look
-                     * at that first.
-                     */
-                    const firstCharacterAgain = inputEl.value.substring(0, 1);
-                    value =
-                        firstCharacterAgain === '0' || firstCharacterAgain === '1'
-                            ? inputEl.value.substring(0, 2)
-                            : firstCharacterAgain;
-                    this.searchColumn(firstColumn, value);
-                    /**
-                     * If only checked the first value,
-                     * we can check the second value
-                     * for a match in the minutes column
-                     */
-                    minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
-                    this.searchColumn(lastColumn, minuteValue, 'end');
-                    break;
-                case 4:
-                    /**
-                     * If the first character is `0` or `1` it is
-                     * possible that users are trying to type `09`
-                     * or `11` into the hour field, so we should look
-                     * at that first.
-                     */
-                    const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
-                    value =
-                        firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
-                            ? inputEl.value.substring(0, 2)
-                            : firstCharacterAgainAgain;
-                    this.searchColumn(firstColumn, value);
-                    /**
-                     * If only checked the first value,
-                     * we can check the second value
-                     * for a match in the minutes column
-                     */
-                    const minuteValueAgain = value.length === 1
-                        ? inputEl.value.substring(1, inputEl.value.length)
-                        : inputEl.value.substring(2, inputEl.value.length);
-                    this.searchColumn(lastColumn, minuteValueAgain, 'end');
-                    break;
-                default:
-                    const startIndex = inputEl.value.length - 4;
-                    const newString = inputEl.value.substring(startIndex);
-                    inputEl.value = newString;
-                    this.selectMultiColumn();
-                    break;
-            }
-        };
-        /**
-         * Searches the value of the active column
-         * to determine which value users are trying
-         * to select
-         */
-        this.onInputChange = () => {
-            const { useInputMode, inputEl, inputModeColumn } = this;
-            if (!useInputMode || !inputEl) {
-                return;
-            }
-            if (inputModeColumn) {
-                this.selectSingleColumn();
-            }
-            else {
-                this.selectMultiColumn();
-            }
-        };
-        /**
-         * Emit ionInputModeChange. Picker columns
-         * listen for this event to determine whether
-         * or not their column is "active" for text input.
-         */
-        this.emitInputModeChange = () => {
-            const { useInputMode, inputModeColumn } = this;
-            this.ionInputModeChange.emit({
-                useInputMode,
-                inputModeColumn,
-            });
-        };
-    }
-    /**
-     * When the picker is interacted with
-     * we need to prevent touchstart so other
-     * gestures do not fire. For example,
-     * scrolling on the wheel picker
-     * in ion-datetime should not cause
-     * a card modal to swipe to close.
-     */
-    preventTouchStartPropagation(ev) {
-        ev.stopPropagation();
-    }
-    componentWillLoad() {
-        getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
-        getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
-    }
-    /**
-     * @internal
-     * Exits text entry mode for the picker
-     * This method blurs the hidden input
-     * and cause the keyboard to dismiss.
-     */
-    async exitInputMode() {
-        const { inputEl, useInputMode } = this;
-        if (!useInputMode || !inputEl) {
-            return;
-        }
-        this.useInputMode = false;
-        this.inputModeColumn = undefined;
-        inputEl.blur();
-        inputEl.value = '';
-        if (this.destroyKeypressListener) {
-            this.destroyKeypressListener();
-            this.destroyKeypressListener = undefined;
-        }
-        this.emitInputModeChange();
-    }
-    render() {
-        return (h(Host, { key: 'f6b301345583f5ccfc31cce536176af7aeefd193', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'e57fd191d49cc500b719d5b9ad35054d55e96c43', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
-                var _a;
-                /**
-                 * The "Enter" key represents
-                 * the user submitting their time
-                 * selection, so we should blur the
-                 * input (and therefore close the keyboard)
-                 *
-                 * Updating the picker's state to no longer
-                 * be in input mode is handled in the onBlur
-                 * callback below.
-                 */
-                if (ev.key === 'Enter') {
-                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
-                }
-            }, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '3360e7d913f87293844928e430acde69d399f68e', class: "picker-before" }), h("div", { key: '4db89e681458d4eec5d60ff47d3e0ba9fd116682', class: "picker-after" }), h("div", { key: 'a21b20d77dac8141623995b5a53f416d3d9fc1ef', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '86c7d926523b615b4769bd1a4e9713b351089369' })));
-    }
-    static get is() { return "ion-picker-internal"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "ios": ["picker-internal.ios.scss"],
-            "md": ["picker-internal.md.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "ios": ["picker-internal.ios.css"],
-            "md": ["picker-internal.md.css"]
-        };
-    }
-    static get events() {
-        return [{
-                "method": "ionInputModeChange",
-                "name": "ionInputModeChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "PickerInternalChangeEventDetail",
-                    "resolved": "PickerInternalChangeEventDetail",
-                    "references": {
-                        "PickerInternalChangeEventDetail": {
-                            "location": "import",
-                            "path": "./picker-internal-interfaces",
-                            "id": "src/components/picker-internal/picker-internal-interfaces.ts::PickerInternalChangeEventDetail"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "exitInputMode": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Exits text entry mode for the picker\nThis method blurs the hidden input\nand cause the keyboard to dismiss."
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "touchstart",
-                "method": "preventTouchStartPropagation",
-                "target": undefined,
-                "capture": false,
-                "passive": true
-            }];
-    }
-}

package/dist/collection/components/picker-internal/test/basic/picker-internal.e2e.js

@@ -1,118 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import { expect } from "@playwright/test";
-import { configs, test } from "../../../../utils/test/playwright/index";
-/**
- * This behavior does not vary across directions.
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-    test.describe(title('picker-internal: rendering'), () => {
-        test('inline pickers should not have visual regression', async ({ page }) => {
-            await page.goto(`/src/components/picker-internal/test/basic`, config);
-            const fullStack = page.locator('#inline button[data-value="full-stack"]');
-            const onion = page.locator('#inline button[data-value="onion"]');
-            await expect(fullStack).toHaveClass(/picker-item-active/);
-            await expect(onion).toHaveClass(/picker-item-active/);
-            await page.waitForChanges();
-            await expect(page.locator('#inline')).toHaveScreenshot(screenshot(`picker-internal-inline-diff`));
-        });
-    });
-    test.describe(title('picker-internal: overlay rendering'), () => {
-        test('popover: should not have visual regression', async ({ page }) => {
-            await page.goto(`/src/components/picker-internal/test/basic`, config);
-            const button = page.locator('#popover');
-            const didPresent = await page.spyOnEvent('ionPopoverDidPresent');
-            const pickerInternal = page.locator('ion-popover ion-picker-internal');
-            await button.click();
-            await didPresent.next();
-            await expect(pickerInternal).toBeVisible();
-            const popoverContent = page.locator('ion-popover .ion-delegate-host');
-            await expect(popoverContent).toHaveScreenshot(screenshot(`picker-internal-popover-diff`), {
-                /**
-                 * Animations must be enabled to capture the screenshot.
-                 * By default, animations are disabled with toHaveScreenshot,
-                 * and when capturing the screenshot will call animation.finish().
-                 * This will cause the popover to close and the screenshot capture
-                 * to be invalid.
-                 */
-                animations: 'allow',
-            });
-        });
-        test('modal: should not have visual regression', async ({ page }) => {
-            await page.goto('/src/components/picker-internal/test/basic', config);
-            const button = page.locator('#modal');
-            const didPresent = await page.spyOnEvent('ionModalDidPresent');
-            const pickerInternal = page.locator('ion-modal ion-picker-internal');
-            await button.click();
-            await didPresent.next();
-            await expect(pickerInternal).toBeVisible();
-            const modalContent = page.locator('ion-modal .ion-delegate-host');
-            await expect(modalContent).toHaveScreenshot(screenshot(`picker-internal-modal-diff`), {
-                /**
-                 * Animations must be enabled to capture the screenshot.
-                 * By default, animations are disabled with toHaveScreenshot,
-                 * and when capturing the screenshot will call animation.finish().
-                 * This will cause the modal to close and the screenshot capture
-                 * to be invalid.
-                 */
-                animations: 'allow',
-            });
-        });
-    });
-});
-/**
- * This behavior does not vary across modes/directions.
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('picker-internal: focus'), () => {
-        test.beforeEach(async ({ page }) => {
-            await page.setContent(`
-        <ion-picker-internal>
-          <ion-picker-column-internal value="full-stack" id="first"></ion-picker-column-internal>
-          <ion-picker-column-internal value="onion" id="second"></ion-picker-column-internal>
-        </ion-picker-internal>
-
-        <script>
-          const columns = document.querySelectorAll('ion-picker-column-internal');
-          columns[0].items = [
-            { text: 'Minified', value: 'minified' },
-            { text: 'Responsive', value: 'responsive' },
-            { text: 'Full Stack', value: 'full-stack' },
-            { text: 'Mobile First', value: 'mobile-first' },
-            { text: 'Serverless', value: 'serverless' },
-          ]
-
-          columns[1].items = [
-            { text: 'Tomato', value: 'tomato' },
-            { text: 'Avocado', value: 'avocado' },
-            { text: 'Onion', value: 'onion' },
-            { text: 'Potato', value: 'potato' },
-            { text: 'Artichoke', value: 'artichoke' },
-          ];
-        </script>
-      `, config);
-        });
-        test('tabbing should correctly move focus between columns', async ({ page }) => {
-            const firstColumn = page.locator('ion-picker-column-internal#first');
-            const secondColumn = page.locator('ion-picker-column-internal#second');
-            // Focus first column
-            await page.keyboard.press('Tab');
-            await expect(firstColumn).toBeFocused();
-            await page.waitForChanges();
-            // Focus second column
-            await page.keyboard.press('Tab');
-            await expect(secondColumn).toBeFocused();
-        });
-        test('tabbing should correctly move focus back', async ({ page }) => {
-            const firstColumn = page.locator('ion-picker-column-internal#first');
-            const secondColumn = page.locator('ion-picker-column-internal#second');
-            await secondColumn.focus();
-            await expect(secondColumn).toBeFocused();
-            await page.waitForChanges();
-            // Focus first column
-            await page.keyboard.press('Shift+Tab');
-            await expect(firstColumn).toBeFocused();
-        });
-    });
-});