@ionic/core 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2

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

@@ -7,10 +7,8 @@ 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 { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { createDelegateController, createTriggerController, BACKDROP, 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";
@@ -23,102 +21,62 @@ import { mdLeaveAnimation } from "./animations/md.leave";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Alert {
-    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;
+    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);
+            }
+        };
+    }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
             this.present();
@@ -127,54 +85,14 @@ 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
@@ -190,7 +108,7 @@ export class Alert {
         if (ev.target.classList.contains('alert-wrapper')) {
             if (ev.key === 'Tab' && ev.shiftKey) {
                 ev.preventDefault();
-                const lastChildBtn = this.wrapperEl?.querySelector('.alert-button:last-child');
+                const lastChildBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button:last-child');
                 lastChildBtn.focus();
                 return;
             }
@@ -223,7 +141,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?.id);
+            const nextProcessed = this.processedInputs.find((input) => input.id === (nextEl === null || nextEl === void 0 ? void 0 : nextEl.id));
             if (nextProcessed) {
                 this.rbClick(nextProcessed);
                 nextEl.focus();
@@ -260,18 +178,23 @@ export class Alert {
         }
         this.inputType = inputTypes.values().next().value;
         this.processedInputs = inputs.map((i, index) => {
-            return {
-                ...i,
+            var _a;
+            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}`,
-                cssClass: i.cssClass ?? '',
+                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() {
@@ -285,23 +208,21 @@ export class Alert {
         this.setupButtonGroupResizeObserver();
     }
     componentWillLoad() {
-        if (!this.htmlAttributes?.id) {
+        var _a;
+        if (!((_a = this.htmlAttributes) === null || _a === void 0 ? void 0 : _a.id)) {
             setOverlayId(this.el);
         }
         this.inputsChanged();
         this.buttonsChanged();
     }
     disconnectedCallback() {
+        var _a;
         this.triggerController.removeClickListener();
         if (this.gesture) {
             this.gesture.destroy();
             this.gesture = undefined;
         }
-        // Clean up aria-hidden if removed without dismiss() being called
-        if (this.presented) {
-            cleanupRootFocusTrapAccessibility();
-        }
-        this.buttonGroupResizeObserver?.disconnect();
+        (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.buttonGroupResizeObserver = undefined;
     }
     componentDidLoad() {
@@ -341,17 +262,18 @@ 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 = this.wrapperEl?.querySelector('.alert-button');
+                const queryBtn = (_a = this.wrapperEl) === null || _a === void 0 ? void 0 : _a.querySelector('.alert-button');
                 queryBtn.focus();
             }
             else {
-                this.wrapperEl?.focus();
+                (_b = this.wrapperEl) === null || _b === void 0 ? void 0 : _b.focus();
             }
         });
         unlock();
@@ -411,12 +333,12 @@ export class Alert {
         }
         const returnData = await this.callButtonHandler(button, values);
         if (returnData !== false) {
-            return this.dismiss({ values, ...returnData }, button.role);
+            return this.dismiss(Object.assign({ values }, returnData), button.role);
         }
         return false;
     }
     async callButtonHandler(button, data) {
-        if (button?.handler) {
+        if (button === null || button === void 0 ? void 0 : button.handler) {
             // a handler has been provided, execute it
             // pass the handler the values from the inputs
             const returnData = await safeCall(button.handler, data);
@@ -470,75 +392,14 @@ export class Alert {
         if (inputs.length === 0) {
             return 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)));
-        })));
+        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 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) => {
-            /**
-             * 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'))));
-        })));
+        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;
@@ -546,35 +407,29 @@ 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", { 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) => {
+                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;
                         i.value = e.target.value;
-                        if (i.attributes?.onInput) {
+                        if ((_a = i.attributes) === null || _a === void 0 ? void 0 : _a.onInput) {
                             i.attributes.onInput(e);
                         }
-                    } })));
+                    } }))));
             }
             else {
-                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) => {
+                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;
                         i.value = e.target.value;
-                        if (i.attributes?.onInput) {
+                        if ((_a = i.attributes) === null || _a === void 0 ? void 0 : _a.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
@@ -583,7 +438,7 @@ export class Alert {
         if (!this.buttonGroupEl || typeof ResizeObserver === 'undefined') {
             return;
         }
-        this.buttonGroupResizeObserver?.disconnect();
+        (_a = this.buttonGroupResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.buttonGroupResizeObserver = new ResizeObserver(() => this.checkButtonGroupWrap());
         this.buttonGroupResizeObserver.observe(this.buttonGroupEl);
         this.checkButtonGroupWrap();
@@ -624,7 +479,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", { ...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", 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;
@@ -647,14 +502,9 @@ 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: '022f3463b8e6c52064b90ec304c524847c3d5ad3', tabindex: "-1", style: {
+        return (h(Host, { key: '8d54ccd725ea634be080e67b56fa5efe498f496c', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
-            }, 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" })));
+            }, 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" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }
@@ -1356,19 +1206,9 @@ export class Alert {
     }
 }
 const inputClass = (input) => {
-    return {
-        'alert-input': true,
-        'alert-input-disabled': (input.attributes?.disabled ?? input.disabled) || false,
-        ...getClassMap(input.cssClass),
-        ...getClassMap(input.attributes ? input.attributes.class?.toString() : ''),
-    };
+    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() : ''));
 };
 const buttonClass = (button) => {
-    return {
-        'alert-button': true,
-        'ion-focusable': true,
-        'ion-activatable': true,
-        [`alert-button-role-${button.role}`]: button.role !== undefined,
-        ...getClassMap(button.cssClass),
-    };
+    return Object.assign({ 'alert-button': true, 'ion-focusable': true, 'ion-activatable': true, [`alert-button-role-${button.role}`]: button.role !== undefined }, getClassMap(button.cssClass));
 };