voyager-ionic-core 8.8.17 → 9.0.3

package/dist/collection/components/alert/alert.js

@@ -7,8 +7,10 @@ import { createButtonActiveGesture } from "../../utils/gesture/button-active";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/overlay-control-label";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, restoreRootFocusTrapAccessibility, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
+import { renderOptionLabel } from "../../utils/select-option-render";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
@@ -92,7 +94,6 @@ export class Alert {
         }
     }
     onKeydown(ev) {
-        var _a;
         const inputTypes = new Set(this.processedInputs.map((i) => i.type));
         /**
          * Based on keyboard navigation requirements, the
@@ -108,7 +109,7 @@ export class Alert {
         if (ev.target.classList.contains('alert-wrapper')) {
             if (ev.key === 'Tab' && ev.shiftKey) {
                 ev.preventDefault();
-                const lastChildBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button:last-child');
+                const lastChildBtn = this.wrapperEl?.querySelector('.alert-button:last-child');
                 lastChildBtn.focus();
                 return;
             }
@@ -141,7 +142,7 @@ export class Alert {
             nextEl = index === 0 ? radios[radios.length - 1] : radios[index - 1];
         }
         if (nextEl && radios.includes(nextEl)) {
-            const nextProcessed = this.processedInputs.find((input) => input.id === (nextEl === null || nextEl === void 0 ? void 0 : nextEl.id));
+            const nextProcessed = this.processedInputs.find((input) => input.id === nextEl?.id);
             if (nextProcessed) {
                 this.rbClick(nextProcessed);
                 nextEl.focus();
@@ -178,23 +179,18 @@ export class Alert {
         }
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
-            var _a;
-            return ({
+            return {
+                ...i,
                 type: i.type || 'text',
                 name: i.name || `${index}`,
                 placeholder: i.placeholder || '',
-                value: i.value,
-                label: i.label,
                 checked: !!i.checked,
                 disabled: !!i.disabled,
                 id: i.id || `alert-input-${this.overlayIndex}-${index}`,
-                handler: i.handler,
-                min: i.min,
-                max: i.max,
-                cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '',
+                cssClass: i.cssClass ?? '',
                 attributes: i.attributes || {},
                 tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
-            });
+            };
         });
     }
     connectedCallback() {
@@ -202,40 +198,50 @@ export class Alert {
         this.triggerChanged();
         /**
          * If the alert was previously connected and is being reattached, the
-         * ResizeObserver was disconnected. componentDidLoad only fires once per
-         * instance, so re-establish the observer here on reconnect.
+         * `ResizeObserver` and the button gesture were torn down. `componentDidLoad`
+         * only fires once per instance, so re-establish both here on reconnect.
          */
         this.setupButtonGroupResizeObserver();
+        this.setupButtonActiveGesture();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(this.el);
+        }
     }
     componentWillLoad() {
-        var _a;
-        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
+        if (!this.htmlAttributes?.id) {
             setOverlayId(this.el);
         }
         this.inputsChanged();
         this.buttonsChanged();
     }
     disconnectedCallback() {
-        var _a;
         this.triggerController.removeClickListener();
         if (this.gesture) {
             this.gesture.destroy();
             this.gesture = undefined;
         }
-        (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
+        this.buttonGroupResizeObserver?.disconnect();
         this.buttonGroupResizeObserver = undefined;
     }
-    componentDidLoad() {
-        /**
-         * Only create gesture if:
-         * 1. A gesture does not already exist
-         * 2. App is running in iOS mode
-         * 3. A wrapper ref exists
-         */
+    /**
+     * Only create gesture if:
+     * 1. A gesture does not already exist
+     * 2. App is running in iOS mode
+     * 3. A wrapper ref exists
+     */
+    setupButtonActiveGesture() {
         if (!this.gesture && getIonMode(this) === 'ios' && this.wrapperEl) {
             this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl) => refEl.classList.contains('alert-button'));
             this.gesture.enable(true);
         }
+    }
+    componentDidLoad() {
+        this.setupButtonActiveGesture();
         this.setupButtonGroupResizeObserver();
         /**
          * If alert was rendered with isOpen="true"
@@ -262,18 +268,17 @@ export class Alert {
         const unlock = await this.lockController.lock();
         await this.delegateController.attachViewToDom();
         await present(this, 'alertEnter', iosEnterAnimation, mdEnterAnimation).then(() => {
-            var _a, _b;
             /**
              * Check if alert has only one button and no inputs.
              * If so, then focus on the button. Otherwise, focus the alert wrapper.
              * This will map to the default native alert behavior.
              */
             if (this.buttons.length === 1 && this.inputs.length === 0) {
-                const queryBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button');
+                const queryBtn = this.wrapperEl?.querySelector('.alert-button');
                 queryBtn.focus();
             }
             else {
-                (_b = this.wrapperEl) === null || _b === void 0 ? void 0 : _b.focus();
+                this.wrapperEl?.focus();
             }
         });
         unlock();
@@ -333,12 +338,12 @@ export class Alert {
         }
         const returnData = await this.callButtonHandler(button, values);
         if (returnData !== false) {
-            return this.dismiss(Object.assign({ values }, returnData), button.role);
+            return this.dismiss({ values, ...returnData }, button.role);
         }
         return false;
     }
     async callButtonHandler(button, data) {
-        if (button === null || button === void 0 ? void 0 : button.handler) {
+        if (button?.handler) {
             // a handler has been provided, execute it
             // pass the handler the values from the inputs
             const returnData = await safeCall(button.handler, data);
@@ -392,14 +397,75 @@ export class Alert {
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-tappable': true, 'alert-checkbox': true, 'alert-checkbox-button': true, 'ion-focusable': true, 'alert-checkbox-button-disabled': i.disabled || false }) }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), h("div", { class: "alert-checkbox-label" }, i.label)), mode === 'md' && h("ion-ripple-effect", null))))));
+        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
+            const optionLabelOptions = {
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
+            };
+            const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'checkbox');
+            const defaultJustify = getOverlayLabelJustify(mode, 'checkbox');
+            return (h("button", { type: "button", onClick: () => this.cbClick(i), "aria-checked": `${i.checked}`, id: i.id, disabled: i.disabled, tabIndex: i.tabindex, role: "checkbox", class: {
+                    ...getClassMap(i.cssClass),
+                    'alert-tappable': true,
+                    'alert-checkbox': true,
+                    'alert-checkbox-button': true,
+                    'ion-focusable': !i.disabled,
+                    'ion-activatable': !i.disabled,
+                    'alert-checkbox-button-disabled': i.disabled || false,
+                } }, h("div", { class: {
+                    'alert-button-inner': true,
+                    [`checkbox-label-placement-${richInput.labelPlacement ?? defaultLabelPlacement}`]: true,
+                    [`checkbox-justify-${richInput.justify ?? defaultJustify}`]: true,
+                } }, h("div", { class: "alert-checkbox-icon" }, h("div", { class: "alert-checkbox-inner" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), mode === 'md' && h("ion-ripple-effect", null)));
+        })));
     }
     renderRadio() {
         const inputs = this.processedInputs;
+        const mode = getIonMode(this);
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: Object.assign(Object.assign({}, getClassMap(i.cssClass)), { 'alert-radio-button': true, 'alert-tappable': true, 'alert-radio': true, 'ion-focusable': true, 'alert-radio-button-disabled': i.disabled || false }), role: "radio" }, h("div", { class: "alert-button-inner" }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), h("div", { class: "alert-radio-label" }, i.label)))))));
+        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
+            /**
+             * Cast to `SelectAlertInput` to access rich content
+             * fields (`startContent`, `endContent`, `description`)
+             * that are passed through from `ion-select` but not
+             * part of the public `AlertInput` interface.
+             */
+            const richInput = i;
+            const optionLabelOptions = {
+                id: richInput.id,
+                label: richInput.label,
+                startContent: richInput.startContent,
+                endContent: richInput.endContent,
+                description: richInput.description,
+            };
+            const defaultLabelPlacement = getOverlayLabelPlacement(mode, 'radio');
+            const defaultJustify = getOverlayLabelJustify(mode, 'radio');
+            return (h("button", { type: "button", onClick: () => this.rbClick(i), "aria-checked": `${i.checked}`, disabled: i.disabled, id: i.id, tabIndex: i.tabindex, class: {
+                    ...getClassMap(i.cssClass),
+                    'alert-radio-button': true,
+                    'alert-tappable': true,
+                    'alert-radio': true,
+                    'ion-focusable': !i.disabled,
+                    'ion-activatable': !i.disabled,
+                    'alert-radio-button-disabled': i.disabled || false,
+                }, role: "radio" }, h("div", { class: {
+                    'alert-button-inner': true,
+                    [`radio-label-placement-${richInput.labelPlacement ?? defaultLabelPlacement}`]: true,
+                    [`radio-justify-${richInput.justify ?? defaultJustify}`]: true,
+                } }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
+        })));
     }
     renderInput() {
         const inputs = this.processedInputs;
@@ -407,29 +473,25 @@ export class Alert {
             return null;
         }
         return (h("div", { class: "alert-input-group" }, inputs.map((i) => {
-            var _a, _b, _c, _d;
             if (i.type === 'textarea') {
-                return (h("div", { class: "alert-input-wrapper" }, h("textarea", Object.assign({ placeholder: i.placeholder, value: i.value, id: i.id, tabIndex: i.tabindex }, i.attributes, { disabled: (_b = (_a = i.attributes) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : i.disabled, class: inputClass(i), onInput: (e) => {
-                        var _a;
+                return (h("div", { class: "alert-input-wrapper" }, h("textarea", { placeholder: i.placeholder, value: i.value, id: i.id, tabIndex: i.tabindex, ...i.attributes, disabled: i.attributes?.disabled ?? i.disabled, class: inputClass(i), onInput: (e) => {
                         i.value = e.target.value;
-                        if ((_a = i.attributes) === null || _a === void 0 ? void 0 : _a.onInput) {
+                        if (i.attributes?.onInput) {
                             i.attributes.onInput(e);
                         }
-                    } }))));
+                    } })));
             }
             else {
-                return (h("div", { class: "alert-input-wrapper" }, h("input", Object.assign({ placeholder: i.placeholder, type: i.type, min: i.min, max: i.max, value: i.value, id: i.id, tabIndex: i.tabindex }, i.attributes, { disabled: (_d = (_c = i.attributes) === null || _c === void 0 ? void 0 : _c.disabled) !== null && _d !== void 0 ? _d : i.disabled, class: inputClass(i), onInput: (e) => {
-                        var _a;
+                return (h("div", { class: "alert-input-wrapper" }, h("input", { placeholder: i.placeholder, type: i.type, min: i.min, max: i.max, value: i.value, id: i.id, tabIndex: i.tabindex, ...i.attributes, disabled: i.attributes?.disabled ?? i.disabled, class: inputClass(i), onInput: (e) => {
                         i.value = e.target.value;
-                        if ((_a = i.attributes) === null || _a === void 0 ? void 0 : _a.onInput) {
+                        if (i.attributes?.onInput) {
                             i.attributes.onInput(e);
                         }
-                    } }))));
+                    } })));
             }
         })));
     }
     setupButtonGroupResizeObserver() {
-        var _a;
         /**
          * Re-evaluate vertical layout when the button group resizes so a 2-button
          * group with long text wraps cleanly instead of leaving a stray right-edge
@@ -438,7 +500,7 @@ export class Alert {
         if (!this.buttonGroupEl || typeof ResizeObserver === 'undefined') {
             return;
         }
-        (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.buttonGroupResizeObserver?.disconnect();
         this.buttonGroupResizeObserver = new ResizeObserver(() => this.checkButtonGroupWrap());
         this.buttonGroupResizeObserver.observe(this.buttonGroupEl);
         this.checkButtonGroupWrap();
@@ -479,7 +541,7 @@ export class Alert {
             'alert-button-group': true,
             'alert-button-group-vertical': buttons.length > 2 || this.isButtonGroupWrapped,
         };
-        return (h("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (h("button", Object.assign({}, button.htmlAttributes, { type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }), h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && h("ion-ripple-effect", null))))));
+        return (h("div", { class: alertButtonGroupClass, ref: (el) => (this.buttonGroupEl = el) }, buttons.map((button) => (h("button", { ...button.htmlAttributes, type: "button", id: button.id, class: buttonClass(button), tabIndex: 0, onClick: () => this.buttonClick(button) }, h("span", { class: "alert-button-inner" }, button.text), mode === 'md' && h("ion-ripple-effect", null))))));
     }
     renderAlertMessage(msgId) {
         const { customHTMLEnabled, message } = this;
@@ -502,9 +564,14 @@ export class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (h(Host, { key: '8d54ccd725ea634be080e67b56fa5efe498f496c', tabindex: "-1", style: {
+        return (h(Host, { key: '083b5250dc4c76e85240e0225abcb7ca2b66de2f', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '05a238583342285545587de9dce144a82d779193', tappable: this.backdropDismiss }), h("div", { key: 'e52c53fd9845e66781af01b2a788a291b45a927c', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '8417e52eebca24ff436fab0703666db51072f980', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el) }, htmlAttributes), h("div", { key: '5c560d4800b24d41961423718108b54be6cd6f91', class: "alert-head" }, header && (h("h2", { key: '8637b64cd5125b2258115d1c11f3743113658608', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '7a4e61a02c29b16b336d8acaf6569b30de6fe71e', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '30844b6a0a7e3dab46514cd548ecffa86dcd59cb', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '39c824fee1e60ad8d6234c79d22ceb8bba8004af', tabindex: "0", "aria-hidden": "true" })));
+            }, class: {
+                ...getClassMap(this.cssClass),
+                [mode]: true,
+                'overlay-hidden': true,
+                'alert-translucent': this.translucent,
+            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '65c92a956d998ae9016396dd2a29c42ab7376d0e', tappable: this.backdropDismiss }), h("div", { key: 'f2288fa0b7ef9d0bf031c168fe78c48422cf91c8', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'dbb109435c378f77c6b0231e58756f8a0467732d', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, h("div", { key: '075597f94719673cf1f894a8566e1036849afa75', class: "alert-head" }, header && (h("h2", { key: 'f96f4b1db8473c62040beed6e96108c733978d73', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'dbd824ef19a07bddde4eb928f11de7c7cadf98b8', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '4774fa13700dd23aec7930492acae80de3bdf5d1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '5c728b7457e231f64294bbec821bdb547c6437dd', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
@@ -1206,9 +1273,19 @@ export class Alert {
     }
 }
 const inputClass = (input) => {
-    var _a, _b, _c;
-    return Object.assign(Object.assign({ 'alert-input': true, 'alert-input-disabled': ((_b = (_a = input.attributes) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : input.disabled) || false }, getClassMap(input.cssClass)), getClassMap(input.attributes ? (_c = input.attributes.class) === null || _c === void 0 ? void 0 : _c.toString() : ''));
+    return {
+        'alert-input': true,
+        'alert-input-disabled': (input.attributes?.disabled ?? input.disabled) || false,
+        ...getClassMap(input.cssClass),
+        ...getClassMap(input.attributes ? input.attributes.class?.toString() : ''),
+    };
 };
 const buttonClass = (button) => {
-    return Object.assign({ 'alert-button': true, 'ion-focusable': true, 'ion-activatable': true, [`alert-button-role-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
+    return {
+        'alert-button': true,
+        'ion-focusable': true,
+        'ion-activatable': true,
+        [`alert-button-role-${button.role}`]: button.role !== undefined,
+        ...getClassMap(button.cssClass),
+    };
 };