@ionic/core 8.8.11-dev.11781532458.19fb3990 → 8.8.11-dev.11782911278.11f0315e

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

@@ -7,21 +7,18 @@ 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 { getOverlayLabelJustify, getOverlayLabelPlacement } from "../../utils/overlay-control-label";
-import { createDelegateController, createTriggerController, BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, 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, getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { iosEnterAnimation } from "./animations/ios.enter";
 import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Alert {
     constructor() {
@@ -53,7 +50,7 @@ export class Alert {
         this.backdropDismiss = true;
         /**
          * If `true`, the alert will be translucent.
-         * Only applies when the theme is `"ios"` and the device supports
+         * Only applies when the mode is `"ios"` and the device supports
          * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
          */
         this.translucent = false;
@@ -182,7 +179,22 @@ export class Alert {
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
             var _a;
-            return Object.assign(Object.assign({}, i), { type: i.type || 'text', name: i.name || `${index}`, placeholder: i.placeholder || '', checked: !!i.checked, disabled: !!i.disabled, id: i.id || `alert-input-${this.overlayIndex}-${index}`, cssClass: (_a = i.cssClass) !== null && _a !== void 0 ? _a : '', attributes: i.attributes || {}, tabindex: i.type === 'radio' && i !== focusable ? -1 : 0 });
+            return ({
+                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 : '',
+                attributes: i.attributes || {},
+                tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
+            });
         });
     }
     connectedCallback() {
@@ -210,6 +222,10 @@ export class Alert {
             this.gesture.destroy();
             this.gesture = undefined;
         }
+        // Clean up aria-hidden if removed without dismiss() being called
+        if (this.presented) {
+            cleanupRootFocusTrapAccessibility();
+        }
         (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.buttonGroupResizeObserver = undefined;
     }
@@ -376,65 +392,18 @@ export class Alert {
     }
     renderCheckbox() {
         const inputs = this.processedInputs;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-checkbox-group" }, inputs.map((i) => {
-            var _a, _b;
-            /**
-             * 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(theme, 'checkbox');
-            const defaultJustify = getOverlayLabelJustify(theme, '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: Object.assign(Object.assign({}, 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-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
-                    [`checkbox-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: true,
-                } }, h("div", { class: "alert-checkbox-icon" }, theme === 'ionic' ? (h("svg", { class: "alert-checkbox-inner", viewBox: "0 0 256 256", "aria-hidden": "true" }, h("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }))) : (h("div", { class: "alert-checkbox-inner" }))), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === 'md' && h("ion-ripple-effect", 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))))));
     }
     renderRadio() {
         const inputs = this.processedInputs;
-        const theme = getIonTheme(this);
         if (inputs.length === 0) {
             return null;
         }
-        return (h("div", { class: "alert-radio-group", role: "radiogroup", "aria-activedescendant": this.activeId }, inputs.map((i) => {
-            var _a, _b;
-            /**
-             * 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(theme, 'radio');
-            const defaultJustify = getOverlayLabelJustify(theme, 'radio');
-            return (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': !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-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
-                    [`radio-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: true,
-                } }, h("div", { class: "alert-radio-icon" }, h("div", { class: "alert-radio-inner" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
-        })));
+        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)))))));
     }
     renderInput() {
         const inputs = this.processedInputs;
@@ -509,12 +478,12 @@ export class Alert {
     }
     renderAlertButtons() {
         const buttons = this.processedButtons;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const alertButtonGroupClass = {
             '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), theme === 'md' && h("ion-ripple-effect", null))))));
+        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))))));
     }
     renderAlertMessage(msgId) {
         const { customHTMLEnabled, message } = this;
@@ -525,7 +494,7 @@ export class Alert {
     }
     render() {
         const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const hdrId = `alert-${overlayIndex}-hdr`;
         const msgId = `alert-${overlayIndex}-msg`;
         const subHdrId = `alert-${overlayIndex}-sub-hdr`;
@@ -537,24 +506,22 @@ 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: '8b65a5c9fcd30cf0ad44ed0fe9edc1dc60c8c06a', tabindex: "-1", style: {
+        return (h(Host, { key: '80642b44e08bcbe73f7a217578f89716827e2f7d', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '67dcabc30a298d636c863e0501b4a90cb1206a5a', tappable: this.backdropDismiss }), h("div", { key: '45f49be97019898be5c2d01f1635634e82f07d59', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '5eed6d5617175666b6d656381615e3c42e83691c', 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: 'cc68b6d31dc9b3ab4dd09a62a9fcf860f273eff1', class: "alert-head" }, header && (h("h2", { key: '7480c9b01bef2a9ac3a4e266d16c6a1bf90c63e8', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '8d9447f5fa355289f27d7ec3e44d781aeffb2296', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '7a3c0101e869e824bee45df38601d3b561d905b0', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'e9f1f6f057b9e1a24b702b7f5225f691a1ca53c6', tabindex: "0", "aria-hidden": "true" })));
+            }, 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: 'f7777dfd624d4a6253681bf36ab3b66389617fb5', tappable: this.backdropDismiss }), h("div", { key: '2a3a03bae54ff66d7d182d41eda7158b5228fdbc', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '255051adf9deeb3d9b872906b8eaa4a93075325c', 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: '3039e1a0f37617b9cba644b259b62097401cf84b', class: "alert-head" }, header && (h("h2", { key: 'b65dc3fa312a520d893d0710a28d72dfad17d020', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: 'e1f9bd496f2baaa28c7c0c6efb7b84591d1548de', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'ffa52291e21ee6a56bf11abbef87c698512ae477', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '5db1dce6054f16ea8da7830754c740ace31eb9d1', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
     static get originalStyleUrls() {
         return {
             "ios": ["alert.ios.scss"],
-            "md": ["alert.md.scss"],
-            "ionic": ["alert.ionic.scss"]
+            "md": ["alert.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["alert.ios.css"],
-            "md": ["alert.md.css"],
-            "ionic": ["alert.ionic.css"]
+            "md": ["alert.md.css"]
         };
     }
     static get properties() {
@@ -864,7 +831,7 @@ export class Alert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the alert will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
+                    "text": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
                 "getter": false,
                 "setter": false,