@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786735826.1fad7c0a

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

@@ -8,78 +8,117 @@ 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() {
-        this.delegateController = createDelegateController(this);
-        this.lockController = createLockController();
-        this.triggerController = createTriggerController();
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.processedInputs = [];
-        this.processedButtons = [];
-        this.isButtonGroupWrapped = false;
-        this.presented = false;
-        /** @internal */
-        this.hasController = false;
-        /**
-         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
-         */
-        this.keyboardClose = true;
-        /**
-         * Array of buttons to be added to the alert.
-         */
-        this.buttons = [];
-        /**
-         * Array of input to show in the alert.
-         */
-        this.inputs = [];
-        /**
-         * If `true`, the alert will be dismissed when the backdrop is clicked.
-         */
-        this.backdropDismiss = true;
-        /**
-         * If `true`, the alert will be translucent.
-         * Only applies when the theme is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = false;
-        /**
-         * If `true`, the alert will animate.
-         */
-        this.animated = true;
-        /**
-         * If `true`, the alert will open. If `false`, the alert will close.
-         * Use this if you need finer grained control over presentation, otherwise
-         * just use the alertController or the `trigger` property.
-         * Note: `isOpen` will not automatically be set back to `false` when
-         * the alert dismisses. You will need to do that in your code.
-         */
-        this.isOpen = false;
-        this.onBackdropTap = () => {
-            this.dismiss(undefined, BACKDROP);
-        };
-        this.dispatchCancelHandler = (ev) => {
-            const role = ev.detail.role;
-            if (isCancel(role)) {
-                const cancelButton = this.processedButtons.find((b) => b.role === 'cancel');
-                this.callButtonHandler(cancelButton);
-            }
-        };
-    }
+    delegateController = createDelegateController(this);
+    lockController = createLockController();
+    triggerController = createTriggerController();
+    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    activeId;
+    inputType;
+    processedInputs = [];
+    processedButtons = [];
+    wrapperEl;
+    buttonGroupEl;
+    buttonGroupResizeObserver;
+    gesture;
+    isButtonGroupWrapped = false;
+    presented = false;
+    lastFocus;
+    el;
+    /** @internal */
+    overlayIndex;
+    /** @internal */
+    delegate;
+    /** @internal */
+    hasController = false;
+    /**
+     * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+     */
+    keyboardClose = true;
+    /**
+     * Animation to use when the alert is presented.
+     */
+    enterAnimation;
+    /**
+     * Animation to use when the alert is dismissed.
+     */
+    leaveAnimation;
+    /**
+     * Additional classes to apply for custom CSS. If multiple classes are
+     * provided they should be separated by spaces.
+     */
+    cssClass;
+    /**
+     * The main title in the heading of the alert.
+     */
+    header;
+    /**
+     * The subtitle in the heading of the alert. Displayed under the title.
+     */
+    subHeader;
+    /**
+     * The main message to be displayed in the alert.
+     * `message` can accept either plaintext or HTML as a string.
+     * To display characters normally reserved for HTML, they
+     * must be escaped. For example `<Ionic>` would become
+     * `&lt;Ionic&gt;`
+     *
+     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+     *
+     * This property accepts custom HTML as a string.
+     * Content is parsed as plaintext by default.
+     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
+     * before custom HTML can be used.
+     */
+    message;
+    /**
+     * Array of buttons to be added to the alert.
+     */
+    buttons = [];
+    /**
+     * Array of input to show in the alert.
+     */
+    inputs = [];
+    /**
+     * If `true`, the alert will be dismissed when the backdrop is clicked.
+     */
+    backdropDismiss = true;
+    /**
+     * If `true`, the alert will be translucent.
+     * 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).
+     */
+    translucent = false;
+    /**
+     * If `true`, the alert will animate.
+     */
+    animated = true;
+    /**
+     * Additional attributes to pass to the alert.
+     */
+    htmlAttributes;
+    /**
+     * If `true`, the alert will open. If `false`, the alert will close.
+     * Use this if you need finer grained control over presentation, otherwise
+     * just use the alertController or the `trigger` property.
+     * Note: `isOpen` will not automatically be set back to `false` when
+     * the alert dismisses. You will need to do that in your code.
+     */
+    isOpen = false;
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -88,14 +127,54 @@ export class Alert {
             this.dismiss();
         }
     }
+    /**
+     * An ID corresponding to the trigger element that
+     * causes the alert to open when clicked.
+     */
+    trigger;
     triggerChanged() {
         const { trigger, el, triggerController } = this;
         if (trigger) {
             triggerController.addClickListener(el, trigger);
         }
     }
+    /**
+     * Emitted after the alert has presented.
+     */
+    didPresent;
+    /**
+     * Emitted before the alert has presented.
+     */
+    willPresent;
+    /**
+     * Emitted before the alert has dismissed.
+     */
+    willDismiss;
+    /**
+     * Emitted after the alert has dismissed.
+     */
+    didDismiss;
+    /**
+     * Emitted after the alert has presented.
+     * Shorthand for ionAlertWillDismiss.
+     */
+    didPresentShorthand;
+    /**
+     * Emitted before the alert has presented.
+     * Shorthand for ionAlertWillPresent.
+     */
+    willPresentShorthand;
+    /**
+     * Emitted before the alert has dismissed.
+     * Shorthand for ionAlertWillDismiss.
+     */
+    willDismissShorthand;
+    /**
+     * Emitted after the alert has dismissed.
+     * Shorthand for ionAlertDidDismiss.
+     */
+    didDismissShorthand;
     onKeydown(ev) {
-        var _a;
         const inputTypes = new Set(this.processedInputs.map((i) => i.type));
         /**
          * Based on keyboard navigation requirements, the
@@ -111,7 +190,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;
             }
@@ -144,7 +223,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();
@@ -181,8 +260,18 @@ 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 {
+                ...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: i.cssClass ?? '',
+                attributes: i.attributes || {},
+                tabindex: i.type === 'radio' && i !== focusable ? -1 : 0,
+            };
         });
     }
     connectedCallback() {
@@ -196,21 +285,23 @@ export class Alert {
         this.setupButtonGroupResizeObserver();
     }
     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() {
@@ -250,18 +341,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();
@@ -321,12 +411,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);
@@ -376,12 +466,11 @@ 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`)
@@ -396,23 +485,30 @@ export class Alert {
                 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: {
+            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-${(_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)));
+                    [`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 theme = getIonTheme(this);
+        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) => {
-            var _a, _b;
             /**
              * Cast to `SelectAlertInput` to access rich content
              * fields (`startContent`, `endContent`, `description`)
@@ -427,12 +523,20 @@ export class Alert {
                 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: {
+            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-${(_a = richInput.labelPlacement) !== null && _a !== void 0 ? _a : defaultLabelPlacement}`]: true,
-                    [`radio-justify-${(_b = richInput.justify) !== null && _b !== void 0 ? _b : defaultJustify}`]: 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'))));
         })));
     }
@@ -442,29 +546,35 @@ 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);
                         }
-                    } }))));
+                    } })));
             }
         })));
     }
+    onBackdropTap = () => {
+        this.dismiss(undefined, BACKDROP);
+    };
+    dispatchCancelHandler = (ev) => {
+        const role = ev.detail.role;
+        if (isCancel(role)) {
+            const cancelButton = this.processedButtons.find((b) => b.role === 'cancel');
+            this.callButtonHandler(cancelButton);
+        }
+    };
     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
@@ -473,7 +583,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();
@@ -509,12 +619,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", { ...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 +635,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 +647,27 @@ 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: '022f3463b8e6c52064b90ec304c524847c3d5ad3', 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: {
+                ...getClassMap(this.cssClass),
+                [mode]: true,
+                'overlay-hidden': true,
+                'alert-translucent': this.translucent,
+            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: 'c3cd05738bc2834f54707edeb2fae06ec10d6fd2', tappable: this.backdropDismiss }), h("div", { key: 'b44fadd9ba7ddf073854c5035538d11ae8e66bc2', tabindex: "0", "aria-hidden": "true" }), h("div", { key: 'fafea048141a6c7957e62aef31faa8041dd610c1', 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: '3ad9d2d4b7cf425eab8293ddc12eff0fe8df1517', class: "alert-head" }, header && (h("h2", { key: '7d9154f5ee595b7e4da6ecf3a20871f104c1256e', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '1f891f38004be6964e9406b84dd580145c42516a', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: '2ab4d344ecb7e384e8f6d3d3e59ee5a1bbcc832c', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: '78a4ff09aa3aaafcd0dc2a42d036767d83b3cfa2', 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 +977,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,
@@ -1243,9 +1356,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),
+    };
 };