@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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, 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";
@@ -21,62 +23,102 @@ import { mdLeaveAnimation } from "./animations/md.leave";
  * @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 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;
-        /**
-         * 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();
@@ -85,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
@@ -108,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;
             }
@@ -141,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();
@@ -178,23 +260,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() {
@@ -208,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() {
@@ -262,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();
@@ -333,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);
@@ -392,14 +470,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 +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
@@ -438,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();
@@ -479,7 +624,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 +647,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: '022f3463b8e6c52064b90ec304c524847c3d5ad3', 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: '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"; }
@@ -1206,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),
+    };
 };