@ionic/core 8.8.9-dev.11781024903.1e4268e5 → 8.8.9-dev.11781201980.1b6e8398

package/dist/collection/components/alert/alert.ios.css

@@ -1,64 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -114,34 +53,6 @@
  * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
  * convert to a unit other than $baselineUnit.
  */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  gap: 16px;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  gap: 12px;
-}
-
-.select-option-start,
-.select-option-end {
-  gap: 8px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
 /**
  * Convert a pixels given value into rem
  * 
@@ -203,250 +114,6 @@
  *   }
  * }
  */
-/**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content.
- */
-.select-option-start > ion-avatar,
-.select-option-start > ion-img,
-.select-option-start > ion-thumbnail,
-.select-option-start > img,
-.select-option-start > svg,
-.select-option-end > ion-avatar,
-.select-option-end > ion-img,
-.select-option-end > ion-thumbnail,
-.select-option-end > img,
-.select-option-end > svg {
-  width: 44px;
-  height: 44px;
-}
-
-.select-option-start > ion-icon,
-.select-option-end > ion-icon {
-  width: 28px;
-  height: 28px;
-}
-
-.action-sheet-button-label-text {
-  justify-content: center;
-}
-
-.select-option-has-rich-content {
-  -webkit-padding-end: 16px;
-  padding-inline-end: 16px;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  gap: 16px;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  gap: 12px;
-}
-
-.select-option-start,
-.select-option-end {
-  gap: 8px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-/**
- * Outer label container has rich content
- * (start, content, description, end) that needs the
- * label to span the available row width.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-content {
-  flex: 1;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-start,
-.select-option-end {
-  display: flex;
-  align-items: center;
-}
-
-.select-option-description {
-  display: block;
-}
-
-/**
- * Non-rich labels are plain text and should ellipsize when they
- * overflow the row. Rich-content labels switch to flex so the
- * start / content / end pieces can lay out side-by-side and wrap.
- */
-.select-option-label:not(.select-option-label-has-rich-content) {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.select-option-label-has-rich-content {
-  display: flex;
-  align-items: center;
-}
-
-ion-radio.select-option-has-rich-content::part(label),
-ion-checkbox.select-option-has-rich-content::part(label),
-.select-option-content {
-  flex: 1;
-  /**
-   * Let rich content wrap instead of inheriting the label part's
-   * single-line truncation, so arbitrary slotted elements render
-   * without clipping.
-   */
-  white-space: normal;
-}
-
 :host {
   /**
    * @prop --background: Background of the alert
@@ -477,9 +144,11 @@ ion-checkbox.select-option-has-rich-content::part(label),
   align-items: center;
   justify-content: center;
   outline: none;
+  font-family: var(--ion-font-family, inherit);
   contain: strict;
   touch-action: none;
   user-select: none;
+  z-index: 1001;
 }
 
 :host(.overlay-hidden) {
@@ -503,6 +172,7 @@ ion-checkbox.select-option-has-rich-content::part(label),
   background: var(--background);
   contain: content;
   opacity: 0;
+  z-index: 10;
 }
 
 .alert-title {
@@ -617,6 +287,11 @@ ion-checkbox.select-option-has-rich-content::part(label),
   z-index: 0;
 }
 
+.alert-button.ion-focused,
+.alert-tappable.ion-focused {
+  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+}
+
 .alert-button-inner {
   display: flex;
   flex-flow: row nowrap;
@@ -628,39 +303,6 @@ ion-checkbox.select-option-has-rich-content::part(label),
   min-height: inherit;
 }
 
-/**
- * Label is on the right of the radio in LTR and
- * on the left in RTL.
- */
-.radio-label-placement-start,
-.checkbox-label-placement-start {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the radio in LTR and
- * on the right in RTL.
- */
-.radio-label-placement-end,
-.checkbox-label-placement-end {
-  flex-direction: row;
-}
-
-.radio-justify-start,
-.checkbox-justify-start {
-  justify-content: start;
-}
-
-.radio-justify-end,
-.checkbox-justify-end {
-  justify-content: end;
-}
-
-.radio-justify-space-between,
-.checkbox-justify-space-between {
-  justify-content: space-between;
-}
-
 .alert-input-disabled,
 .alert-checkbox-button-disabled .alert-button-inner,
 .alert-radio-button-disabled .alert-button-inner {
@@ -707,18 +349,32 @@ textarea.alert-input {
   resize: none;
 }
 
-:host {
-  font-family: var(--ion-font-family, inherit);
-  z-index: 1001;
+.alert-radio-label,
+.alert-checkbox-label {
+  display: flex;
+  align-items: center;
 }
 
-.alert-wrapper {
-  z-index: 10;
+.select-option-content {
+  flex: 1;
 }
 
-.alert-button.ion-focused,
-.alert-tappable.ion-focused {
-  background: var(--ion-color-step-100, var(--ion-background-color-step-100, #e6e6e6));
+.select-option-description {
+  display: block;
+}
+
+.alert-radio-label,
+.alert-checkbox-label {
+  gap: 12px;
+}
+
+.select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
 }
 
 /**
@@ -974,6 +630,8 @@ textarea.alert-input {
   padding-inline-end: 13px;
   padding-top: 13px;
   padding-bottom: 13px;
+  flex: 1;
+  order: 0;
   color: var(--ion-text-color, #000);
 }
 
@@ -983,7 +641,7 @@ textarea.alert-input {
 
 .alert-radio-icon {
   position: relative;
-  flex-shrink: 0;
+  order: 1;
   min-width: 30px;
 }
 
@@ -999,12 +657,7 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-color-primary, #0054e9);
 }
-
-[aria-checked=true] .radio-label-placement-end .alert-radio-inner {
-  inset-inline-end: 7px;
-}
-
-[aria-checked=true] .radio-label-placement-start .alert-radio-inner {
+[aria-checked=true] .alert-radio-inner {
   inset-inline-start: 7px;
 }
 
@@ -1015,15 +668,19 @@ textarea.alert-input {
   padding-inline-end: 13px;
   padding-top: 13px;
   padding-bottom: 13px;
+  flex: 1;
   color: var(--ion-text-color, #000);
 }
 
 .alert-checkbox-icon {
   border-radius: 50%;
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 6px;
+  margin-inline-end: 6px;
   margin-top: 10px;
   margin-bottom: 10px;
   position: relative;
-  flex-shrink: 0;
   width: min(1.375rem, 55.836px);
   height: min(1.375rem, 55.836px);
   border-width: 0.125rem;
@@ -1033,20 +690,6 @@ textarea.alert-input {
   contain: strict;
 }
 
-.checkbox-label-placement-end .alert-checkbox-icon {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 6px;
-  margin-inline-end: 6px;
-}
-
-.checkbox-label-placement-start .alert-checkbox-icon {
-  -webkit-margin-start: 6px;
-  margin-inline-start: 6px;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-}
-
 [aria-checked=true] .alert-checkbox-icon {
   border-color: var(--ion-color-primary, #0054e9);
   background-color: var(--ion-color-primary, #0054e9);
@@ -1064,15 +707,10 @@ textarea.alert-input {
   border-style: solid;
   border-color: var(--ion-background-color, #fff);
 }
-
-[aria-checked=true] .checkbox-label-placement-end .alert-checkbox-inner {
+[aria-checked=true] .alert-checkbox-inner {
   inset-inline-start: calc(min(1.375rem, 55.836px) / 3);
 }
 
-[aria-checked=true] .checkbox-label-placement-start .alert-checkbox-inner {
-  inset-inline-end: calc(min(1.375rem, 55.836px) / 3);
-}
-
 .alert-button-group {
   -webkit-margin-end: -0.55px;
   margin-inline-end: -0.55px;

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

@@ -7,7 +7,6 @@ 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 { sanitizeDOMString } from "../../utils/sanitization/index";
 import { renderOptionLabel } from "../../utils/select-option-render";
@@ -381,7 +380,6 @@ export class Alert {
             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 +394,15 @@ 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: {
-                    '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("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" })), renderOptionLabel(optionLabelOptions, 'alert-checkbox-label')), theme === '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`)
@@ -427,13 +417,7 @@ 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: {
-                    '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("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" })), renderOptionLabel(optionLabelOptions, 'alert-radio-label'))));
         })));
     }
     renderInput() {
@@ -537,9 +521,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: '8b65a5c9fcd30cf0ad44ed0fe9edc1dc60c8c06a', tabindex: "-1", style: {
+        return (h(Host, { key: '2989941c96a6cf912a138dfa4a5b2f498732f9ce', 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)), { [theme]: true, 'overlay-hidden': true, 'alert-translucent': this.translucent }), onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, h("ion-backdrop", { key: '9bd0b98932ef02b49bc3c158593bbd335d5572e7', tappable: this.backdropDismiss }), h("div", { key: 'b73aac37b66bd452d2af71e8af93f7cb203b1e6f', tabindex: "0", "aria-hidden": "true" }), h("div", Object.assign({ key: '3800988e5748bea78838aa2056de5294964b4123', 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: '64d55d99033424bcf6f6e1d8e98cf4cffa4327cd', class: "alert-head" }, header && (h("h2", { key: '25249605494fe90975a242b41085bf1561eab9f9', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (h("h2", { key: '7cff7a2286199593b34ae21b47efd8b1402c8b59', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (h("h3", { key: 'aad62db41db68ed4b7f643be92b4c025027835a3', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), h("div", { key: 'f39c5f551d76bffcff96f0dec8cd0e54c442c116', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-alert"; }
     static get encapsulation() { return "scoped"; }