voyager-ionic-core 9.0.1 → 9.0.6

package/dist/cjs/{overlays-BR21NUIG.js → overlays-C68wNDWY.js}

@@ -3,14 +3,129 @@
  */
 'use strict';
 
-var index$1 = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-7wzdhdeg.js');
-var hardwareBackButton = require('./hardware-back-button-Bu4Dzw8l.js');
-var index = require('./index-DXoo08JC.js');
-var ionicGlobal = require('./ionic-global-CYJNT-2P.js');
-var frameworkDelegate = require('./framework-delegate-d-fWfeI6.js');
+var helpers = require('./helpers-Crluoxqu.js');
+var index = require('./index-SAR1xwtW.js');
+var ionicGlobal = require('./ionic-global-C1h8Yi_K.js');
+var frameworkDelegate = require('./framework-delegate-DTLbqaaO.js');
 var gestureController = require('./gesture-controller-CeJslptU.js');
 
+/**
+ * CloseWatcher is a newer API that lets
+ * use detect the hardware back button event
+ * in a web browser: https://caniuse.com/?search=closewatcher
+ * However, not every browser supports it yet.
+ *
+ * This needs to be a function so that we can
+ * check the config once it has been set.
+ * Otherwise, this code would be evaluated the
+ * moment this file is evaluated which could be
+ * before the config is set.
+ */
+const shouldUseCloseWatcher = () => index.config.get('experimentalCloseWatcher', false) && helpers.win !== undefined && 'CloseWatcher' in helpers.win;
+/**
+ * When hardwareBackButton: false in config,
+ * we need to make sure we also block the default
+ * webview behavior. If we don't then it will be
+ * possible for users to navigate backward while
+ * an overlay is still open. Additionally, it will
+ * give the appearance that the hardwareBackButton
+ * config is not working as the page transition
+ * will still happen.
+ */
+const blockHardwareBackButton = () => {
+    document.addEventListener('backbutton', () => { });
+};
+const startHardwareBackButton = () => {
+    const doc = document;
+    let busy = false;
+    const backButtonCallback = () => {
+        if (busy) {
+            return;
+        }
+        let index$1 = 0;
+        let handlers = [];
+        const ev = new CustomEvent('ionBackButton', {
+            bubbles: false,
+            detail: {
+                register(priority, handler) {
+                    handlers.push({ priority, handler, id: index$1++ });
+                },
+            },
+        });
+        doc.dispatchEvent(ev);
+        const executeAction = async (handlerRegister) => {
+            try {
+                if (handlerRegister?.handler) {
+                    const result = handlerRegister.handler(processHandlers);
+                    if (result != null) {
+                        await result;
+                    }
+                }
+            }
+            catch (e) {
+                index.printIonError('[ion-app] - Exception in startHardwareBackButton:', e);
+            }
+        };
+        const processHandlers = () => {
+            if (handlers.length > 0) {
+                let selectedHandler = {
+                    priority: Number.MIN_SAFE_INTEGER,
+                    handler: () => undefined,
+                    id: -1,
+                };
+                handlers.forEach((handler) => {
+                    if (handler.priority >= selectedHandler.priority) {
+                        selectedHandler = handler;
+                    }
+                });
+                busy = true;
+                handlers = handlers.filter((handler) => handler.id !== selectedHandler.id);
+                executeAction(selectedHandler).then(() => (busy = false));
+            }
+        };
+        processHandlers();
+    };
+    /**
+     * If the CloseWatcher is defined then
+     * we don't want to also listen for the native
+     * backbutton event otherwise we may get duplicate
+     * events firing.
+     */
+    if (shouldUseCloseWatcher()) {
+        let watcher;
+        const configureWatcher = () => {
+            watcher?.destroy();
+            watcher = new helpers.win.CloseWatcher();
+            /**
+             * Once a close request happens
+             * the watcher gets destroyed.
+             * As a result, we need to re-configure
+             * the watcher so we can respond to other
+             * close requests.
+             */
+            watcher.onclose = () => {
+                backButtonCallback();
+                configureWatcher();
+            };
+        };
+        configureWatcher();
+    }
+    else {
+        doc.addEventListener('backbutton', backButtonCallback);
+    }
+};
+const OVERLAY_BACK_BUTTON_PRIORITY = 100;
+const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
+
+var hardwareBackButton = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MENU_BACK_BUTTON_PRIORITY: MENU_BACK_BUTTON_PRIORITY,
+    OVERLAY_BACK_BUTTON_PRIORITY: OVERLAY_BACK_BUTTON_PRIORITY,
+    blockHardwareBackButton: blockHardwareBackButton,
+    shouldUseCloseWatcher: shouldUseCloseWatcher,
+    startHardwareBackButton: startHardwareBackButton
+});
+
 /**
  * This query string selects elements that
  * are eligible to receive focus. We select
@@ -407,7 +522,7 @@ const connectListeners = (doc) => {
         doc.addEventListener('ionBackButton', (ev) => {
             const lastOverlay = getPresentedOverlay(doc);
             if (lastOverlay?.backdropDismiss) {
-                ev.detail.register(hardwareBackButton.OVERLAY_BACK_BUTTON_PRIORITY, () => {
+                ev.detail.register(OVERLAY_BACK_BUTTON_PRIORITY, () => {
                     /**
                      * Do not return this promise otherwise
                      * the hardware back button utility will
@@ -430,7 +545,7 @@ const connectListeners = (doc) => {
          * this behavior will be handled via the ionBackButton
          * event.
          */
-        if (!hardwareBackButton.shouldUseCloseWatcher()) {
+        if (!shouldUseCloseWatcher()) {
             doc.addEventListener('keydown', (ev) => {
                 if (ev.key === 'Escape') {
                     const lastOverlay = getPresentedOverlay(doc);
@@ -716,7 +831,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
     if (!overlay.presented) {
         return false;
     }
-    const presentedOverlays = index$1.doc !== undefined ? getPresentedOverlays(index$1.doc) : [];
+    const presentedOverlays = helpers.doc !== undefined ? getPresentedOverlays(helpers.doc) : [];
     /**
      * For accessibility, toasts lack focus traps and don't receive
      * `aria-hidden` on the root element when presented.
@@ -845,6 +960,40 @@ const safeCall = (handler, arg) => {
     }
     return undefined;
 };
+/**
+ * `--width` and `--height` values that leave an overlay spanning the viewport
+ * on that axis, so it reaches both edges. An empty value means the property
+ * was never overridden.
+ */
+const FULLSCREEN_SIZES = ['', '100%', '100vw', '100vh', '100dvw', '100dvh', '100svw', '100svh'];
+/**
+ * `--width` and `--height` values that size an overlay to its content, leaving
+ * the rendered size dependent on the content and on `--max-width` or
+ * `--max-height`.
+ */
+const CONTENT_SIZES = ['auto', 'fit-content', 'min-content', 'max-content'];
+/**
+ * How an overlay's `--width` or `--height` determines its used size:
+ *
+ * `fullscreen` spans the viewport on that axis. `content` depends on the
+ * overlay's content, so its used size is not known until layout. `definite`
+ * resolves independently of the overlay's content size.
+ *
+ * Values are lowercased because CSS keywords are case-insensitive, while a
+ * custom property preserves the case in which it was authored. Content values
+ * are matched as a suffix so vendor-prefixed values such as `-moz-fit-content`
+ * are recognized.
+ */
+const getOverlaySizeType = (size) => {
+    const value = size.trim().toLowerCase();
+    if (FULLSCREEN_SIZES.includes(value)) {
+        return 'fullscreen';
+    }
+    if (CONTENT_SIZES.some((keyword) => value.endsWith(keyword))) {
+        return 'content';
+    }
+    return 'definite';
+};
 const BACKDROP = 'backdrop';
 const GESTURE = 'gesture';
 const OVERLAY_GESTURE_PRIORITY = 39;
@@ -979,6 +1128,7 @@ const FOCUS_TRAP_DISABLE_CLASS = 'ion-disable-focus-trap';
 exports.BACKDROP = BACKDROP;
 exports.FOCUS_TRAP_DISABLE_CLASS = FOCUS_TRAP_DISABLE_CLASS;
 exports.GESTURE = GESTURE;
+exports.MENU_BACK_BUTTON_PRIORITY = MENU_BACK_BUTTON_PRIORITY;
 exports.OVERLAY_GESTURE_PRIORITY = OVERLAY_GESTURE_PRIORITY;
 exports.actionSheetController = actionSheetController;
 exports.alertController = alertController;
@@ -989,7 +1139,9 @@ exports.dismiss = dismiss;
 exports.eventMethod = eventMethod;
 exports.focusFirstDescendant = focusFirstDescendant;
 exports.focusLastDescendant = focusLastDescendant;
+exports.getOverlaySizeType = getOverlaySizeType;
 exports.getPresentedOverlay = getPresentedOverlay;
+exports.hardwareBackButton = hardwareBackButton;
 exports.isCancel = isCancel;
 exports.loadingController = loadingController;
 exports.modalController = modalController;
@@ -999,4 +1151,5 @@ exports.present = present;
 exports.restoreRootFocusTrapAccessibility = restoreRootFocusTrapAccessibility;
 exports.safeCall = safeCall;
 exports.setOverlayId = setOverlayId;
+exports.shouldUseCloseWatcher = shouldUseCloseWatcher;
 exports.toastController = toastController;

package/dist/cjs/{select-option-render-CrbLc-1j.js → select-option-render-C-Yh9yZG.js}

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-DXoo08JC.js');
-var index$1 = require('./index-BbqUBe2T.js');
+var index = require('./index-SAR1xwtW.js');
+var index$1 = require('./index-BSD7toMO.js');
 
 /**
  * Converts a DOM node into a Stencil VNode (or text string) so the

package/dist/cjs/{slot-mutation-controller-D6IjSEIh.js → slot-mutation-controller-zixZ5LyH.js}

@@ -3,8 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-7wzdhdeg.js');
+var helpers = require('./helpers-Crluoxqu.js');
 var dir = require('./dir-zwDPRE5K.js');
 
 /**
@@ -96,8 +95,8 @@ const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
          */
         width === 0 &&
             notchSpacerEl.offsetParent === null &&
-            index.win !== undefined &&
-            'IntersectionObserver' in index.win) {
+            helpers.win !== undefined &&
+            'IntersectionObserver' in helpers.win) {
             /**
              * If there is an IO already attached
              * then that will update the notch
@@ -281,6 +280,73 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
     };
 };
 
+/**
+ * The content slotted into a form control's start or end slot that a click
+ * started on, or `null` when the click did not start on slotted content.
+ *
+ * The slotted element is compared against the host in case the form control
+ * itself is slotted into, for example, an item. Without that check a control
+ * carrying slot="start"/"end" would treat every click on itself as a slotted
+ * click.
+ */
+const getSlottedClickContent = (ev, el) => {
+    const slotted = ev.target.closest('[slot="start"], [slot="end"]');
+    return slotted !== null && slotted !== el && el.contains(slotted) ? slotted : null;
+};
+/**
+ * Whether a click started on content slotted into a form control's start or
+ * end slot.
+ */
+const isSlottedClick = (ev, el) => getSlottedClickContent(ev, el) !== null;
+/**
+ * A utility for form components that wrap their content in a <label>, such as
+ * ion-input, ion-textarea and ion-select.
+ *
+ * Clicking slotted content also clicks that label, and the browser follows it
+ * with a click on the label's control. That second click would be emitted from
+ * the host as a duplicate, so the slotted click is remembered and the click
+ * that follows it is suppressed.
+ *
+ * Browsers skip the forwarding when the click lands on interactive content,
+ * such as a slotted button, so the slotted click is remembered for a frame
+ * rather than until a forwarded click that may never arrive.
+ *
+ * @internal
+ * @param el - The host element.
+ * @param getNativeInput - A callback returning the native form control the
+ * label points at, for components that have one. Those components emit the
+ * click from the host rather than the control, so the control's click is
+ * always stopped and re-dispatched from the host. Omit it for components whose
+ * label has no `for` attribute, such as ion-select, where the browser forwards
+ * to an internal control that already re-bubbles targeting the host.
+ */
+const createClickController = (el, getNativeInput) => {
+    let hasSlottedClick = false;
+    const handleClickCapture = (ev) => {
+        if (isSlottedClick(ev, el)) {
+            hasSlottedClick = true;
+            helpers.raf(() => (hasSlottedClick = false));
+            return;
+        }
+        if (getNativeInput === undefined) {
+            if (hasSlottedClick) {
+                ev.stopPropagation();
+                hasSlottedClick = false;
+            }
+            return;
+        }
+        const nativeInput = getNativeInput();
+        if (nativeInput !== undefined && ev.target === nativeInput) {
+            ev.stopPropagation();
+            if (!hasSlottedClick) {
+                el.click();
+            }
+            hasSlottedClick = false;
+        }
+    };
+    return { handleClickCapture };
+};
+
 /**
  * Used to update a scoped component that uses emulated slots. This fires when
  * content is passed into the slot or when the content inside of a slot changes.
@@ -293,7 +359,7 @@ const createStartContainerController = (el, getStartContainer, shouldApplyAdjust
 const createSlotMutationController = (el, slotName, mutationCallback) => {
     let hostMutationObserver;
     let slottedContentMutationObserver;
-    if (index.win !== undefined && 'MutationObserver' in index.win) {
+    if (helpers.win !== undefined && 'MutationObserver' in helpers.win) {
         const slots = Array.isArray(slotName) ? slotName : [slotName];
         hostMutationObserver = new MutationObserver((entries) => {
             for (const entry of entries) {
@@ -392,6 +458,8 @@ const createSlotMutationController = (el, slotName, mutationCallback) => {
     };
 };
 
+exports.createClickController = createClickController;
 exports.createNotchController = createNotchController;
 exports.createSlotMutationController = createSlotMutationController;
 exports.createStartContainerController = createStartContainerController;
+exports.getSlottedClickContent = getSlottedClickContent;

package/dist/cjs/{status-tap-CNP5eD1R.js → status-tap-C3frTJ4c.js}

@@ -3,9 +3,9 @@
  */
 'use strict';
 
-var index = require('./index-DXoo08JC.js');
-var index$1 = require('./index-DtvKGwdh.js');
-var helpers = require('./helpers-7wzdhdeg.js');
+var index = require('./index-SAR1xwtW.js');
+var index$1 = require('./index-BAM4223M.js');
+var helpers = require('./helpers-Crluoxqu.js');
 require('./dir-zwDPRE5K.js');
 
 const startStatusTap = () => {

package/dist/cjs/{swipe-back-CSIJQfu5.js → swipe-back-ChrfFzIe.js}

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var helpers = require('./helpers-7wzdhdeg.js');
+var helpers = require('./helpers-Crluoxqu.js');
 var dir = require('./dir-zwDPRE5K.js');
 var index = require('./index-DRPqwSvU.js');
-require('./index-DXoo08JC.js');
+require('./index-SAR1xwtW.js');
 require('./gesture-controller-CeJslptU.js');
 
 const createSwipeBackGesture = (el, canStartHandler, onStartHandler, onMoveHandler, onEndHandler) => {

package/dist/collection/collection-manifest.json

@@ -99,7 +99,7 @@
   "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.44.2",
+    "version": "4.45.1",
     "typescriptVersion": "5.8.3"
   },
   "collections": [

package/dist/collection/components/button/button.js

@@ -2,7 +2,8 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { inheritAriaAttributes, hasShadowDom } from "../../utils/helpers";
+import { createAriaAttributeController } from "../../utils/attribute-controller";
+import { hasShadowDom } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext, openURL } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -23,7 +24,6 @@ export class Button {
         this.inToolbar = false;
         this.formButtonEl = null;
         this.formEl = null;
-        this.inheritedAttributes = {};
         /**
          * If `true`, the button only has an icon.
          */
@@ -82,23 +82,6 @@ export class Button {
             this.formButtonEl.disabled = disabled;
         }
     }
-    /**
-     * This component is used within the `ion-input-password-toggle` component
-     * to toggle the visibility of the password input.
-     * These attributes need to update based on the state of the password input.
-     * Otherwise, the values will be stale.
-     *
-     * @param newValue
-     * @param _oldValue
-     * @param propName
-     */
-    onAriaChanged(newValue, _oldValue, propName) {
-        this.inheritedAttributes = {
-            ...this.inheritedAttributes,
-            [propName]: newValue,
-        };
-        forceUpdate(this);
-    }
     /**
      * This is responsible for rendering a hidden native
      * button element inside the associated form. This allows
@@ -136,7 +119,21 @@ export class Button {
         this.inToolbar = !!this.el.closest('ion-buttons');
         this.inListHeader = !!this.el.closest('ion-list-header');
         this.inItem = !!this.el.closest('ion-item') || !!this.el.closest('ion-item-divider');
-        this.inheritedAttributes = inheritAriaAttributes(this.el);
+        /**
+         * The ARIA state has to stay live, since `ion-input-password-toggle` rewrites
+         * `aria-label` and `aria-pressed` on its `ion-button` on every toggle. We keep
+         * `aria-disabled` out of the watch because the `<Host>` below renders it from the
+         * `disabled` prop and those writes would clobber a developer's value, and `role` out
+         * because a post-load write stays on the host too, which would put the same role on
+         * two elements in the accessibility tree.
+         */
+        this.ariaController = createAriaAttributeController(this.el, () => forceUpdate(this), ['aria-disabled', 'role']);
+    }
+    connectedCallback() {
+        this.ariaController?.init();
+    }
+    disconnectedCallback() {
+        this.ariaController?.destroy();
     }
     get hasIconOnly() {
         return !!this.el.querySelector('[slot="icon-only"]');
@@ -211,7 +208,8 @@ export class Button {
     }
     render() {
         const mode = getIonMode(this);
-        const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong, inheritedAttributes, } = this;
+        const { buttonType, type, disabled, rel, target, size, href, color, expand, hasIconOnly, shape, strong } = this;
+        const inheritedAttributes = this.ariaController?.attributes ?? {};
         const finalSize = size === undefined && this.inItem ? 'small' : size;
         const TagType = href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
@@ -236,7 +234,7 @@ export class Button {
         {
             type !== 'button' && this.renderHiddenButton();
         }
-        return (h(Host, { key: '82c71b8cbf3bb51e443f4aa99c375bf5be6b8dc7', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
+        return (h(Host, { key: 'fd42d1a5836c148cddd6c474c130ce4bb36286ea', onClick: this.handleClick, "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, {
                 [mode]: true,
                 [buttonType]: true,
                 [`${buttonType}-${expand}`]: expand !== undefined,
@@ -251,7 +249,7 @@ export class Button {
                 'button-disabled': disabled,
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h(TagType, { key: '53f4cb366bac796ab38f609e858bc1a55fce7641', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("span", { key: '40e127fc11c889e77b8bf02e8714f0dea83bfce7', class: "button-inner" }, h("slot", { key: 'e11c8c86d3f0894658a8999129425c9c111f5540', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: '105ea9259ea17036359e6fe7eced8b267ab8e0f6', name: "start" }), h("slot", { key: '0d7b0966e328a5b10b0562dacbd638dfd08d92af' }), h("slot", { key: 'c542b40685802464d69f57ecc0a7c3465d24a417', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: '46df4cbeb057b0a8daab92226121d8bbb8c0ee07', type: this.rippleType }))));
+            }) }, h(TagType, { key: '97dbf689ea912aed38182dbe0097a2bf5b768816', ...attrs, class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, ...inheritedAttributes }, h("span", { key: '0f1ff4c667e95a8e3dc787fee43fe529b95477b7', class: "button-inner" }, h("slot", { key: 'fc1e8b8080d02828c392e9edd6a70e0255435f82', name: "icon-only", onSlotchange: this.slotChanged }), h("slot", { key: 'c1ece4c0d935f4d023d38fee4cf529dd4123d487', name: "start" }), h("slot", { key: '970db0ee1e3633bc9cbff52eca446e4891ff6851' }), h("slot", { key: 'ef8d7d894f01dbe881f381b985620c2a482e55fe', name: "end" })), mode === 'md' && h("ion-ripple-effect", { key: 'fea5e49a54b0efd07b1bd35d9fd5d2d862a2bac1', type: this.rippleType }))));
     }
     static get is() { return "ion-button"; }
     static get encapsulation() { return "shadow"; }
@@ -647,15 +645,6 @@ export class Button {
         return [{
                 "propName": "disabled",
                 "methodName": "disabledChanged"
-            }, {
-                "propName": "aria-checked",
-                "methodName": "onAriaChanged"
-            }, {
-                "propName": "aria-label",
-                "methodName": "onAriaChanged"
-            }, {
-                "propName": "aria-pressed",
-                "methodName": "onAriaChanged"
             }];
     }
 }

package/dist/collection/components/card/card.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h } from "@stencil/core";
-import { inheritAttributes } from "../../utils/helpers";
+import { Host, h, forceUpdate } from "@stencil/core";
+import { createAttributeController } from "../../utils/attribute-controller";
 import { createColorClasses, openURL } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 /**
@@ -12,7 +12,6 @@ import { getIonMode } from "../../global/ionic-global";
  */
 export class Card {
     constructor() {
-        this.inheritedAriaAttributes = {};
         /**
          * If `true`, a button tag will be rendered and the card will be tappable.
          */
@@ -32,7 +31,18 @@ export class Card {
         this.routerDirection = 'forward';
     }
     componentWillLoad() {
-        this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
+        /**
+         * Only the initial copy takes the attribute off the host, so an `aria-label` written
+         * after load stays on the host too. That's harmless here, because unlike `ion-item`
+         * the card host renders no role of its own, so nothing reads the leftover copy.
+         */
+        this.ariaController = createAttributeController(this.el, ['aria-label'], () => forceUpdate(this));
+    }
+    connectedCallback() {
+        this.ariaController?.init();
+    }
+    disconnectedCallback() {
+        this.ariaController?.destroy();
     }
     isClickable() {
         return this.href !== undefined || this.button;
@@ -42,7 +52,8 @@ export class Card {
         if (!clickable) {
             return [h("slot", null)];
         }
-        const { href, routerAnimation, routerDirection, inheritedAriaAttributes } = this;
+        const { href, routerAnimation, routerDirection } = this;
+        const inheritedAriaAttributes = this.ariaController?.attributes ?? {};
         const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
         const attrs = TagType === 'button'
             ? { type: this.type }
@@ -56,7 +67,7 @@ export class Card {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '85e9b30bd81e79a0c7ac75cb3664bdcf9e4afc4d', class: createColorClasses(this.color, {
+        return (h(Host, { key: '104412c26f53cce36432c3bb4d9e38bbe00c5816', class: createColorClasses(this.color, {
                 [mode]: true,
                 'card-disabled': this.disabled,
                 'ion-activatable': this.isClickable(),