voyager-ionic-core 8.8.12 → 9.0.1

package/dist/collection/components/content/content.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, forceUpdate, h, readTask } from "@stencil/core";
+import { Build, Host, forceUpdate, h, readTask, } from "@stencil/core";
 import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from "../../utils/helpers";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
@@ -75,6 +75,9 @@ export class Content {
          */
         this.scrollEvents = false;
     }
+    fullscreenChanged() {
+        this.setupFullscreenResizeObserver();
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -114,6 +117,12 @@ export class Content {
                 closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
             }
         }
+        // Re-observe on reattach, since componentDidLoad only fires once.
+        this.setupFullscreenResizeObserver();
+    }
+    componentDidLoad() {
+        // The custom elements build assigns fullscreen after connectedCallback.
+        this.setupFullscreenResizeObserver();
     }
     disconnectedCallback() {
         this.onScrollEnd();
@@ -135,6 +144,42 @@ export class Content {
             clearTimeout(this.resizeTimeout);
             this.resizeTimeout = null;
         }
+        this.destroyFullscreenResizeObserver();
+    }
+    /**
+     * Header and footer sizes can change after load without a window resize
+     * firing, so the `resize` listener alone misses those changes.
+     *
+     * Popover content is excluded because `contain: none` lets its offsets drive
+     * the host's own height, which would feed back into the observer.
+     */
+    setupFullscreenResizeObserver() {
+        if (!Build.isBrowser || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        if (!this.fullscreen || hostContext('ion-popover', this.el)) {
+            this.destroyFullscreenResizeObserver();
+            return;
+        }
+        if (this.fullscreenResizeObserver !== undefined) {
+            return;
+        }
+        this.fullscreenResizeObserver = new ResizeObserver(() => {
+            // A hidden page reports a 0x0 box, which would zero the offsets. Same
+            // reasoning as the guard in onResize, minus its debounce so the
+            // correction lands in the next frame instead of 100ms later.
+            if (this.el.offsetParent === null) {
+                return;
+            }
+            this.resize();
+        });
+        this.fullscreenResizeObserver.observe(this.el);
+    }
+    destroyFullscreenResizeObserver() {
+        if (this.fullscreenResizeObserver !== undefined) {
+            this.fullscreenResizeObserver.disconnect();
+            this.fullscreenResizeObserver = undefined;
+        }
     }
     /**
      * Rotating certain devices can update
@@ -373,7 +418,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, { key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -382,12 +427,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
+            }, ...inheritedAttributes }, h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '00c8fe7b9e73533c702273c9457d274195d54e98' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '0d2286206facb22696a9ca7e74a3f6b7d2397aab' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
@@ -813,6 +858,12 @@ export class Content {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "fullscreen",
+                "methodName": "fullscreenChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "resize",
@@ -824,12 +875,11 @@ export class Content {
     }
 }
 const getParentElement = (el) => {
-    var _a;
     if (el.parentElement) {
         // normal element with a parent element
         return el.parentElement;
     }
-    if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
+    if (el.parentNode?.host) {
         // shadow dom's document fragment
         return el.parentNode.host;
     }

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

@@ -218,6 +218,10 @@
   justify-content: space-between;
 }
 
+:host .datetime-action-buttons ion-button {
+  --color: var(--ion-color-primary, #0054e9);
+}
+
 /**
  * The confirm and clear buttons are grouped in a
  * container so that they appear on the end opposite
@@ -372,6 +376,11 @@
 }
 
 .calendar-day:not(.calendar-day-adjacent-day):focus {
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+  box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
+}
+
+:host(.ion-color) .calendar-day:not(.calendar-day-adjacent-day):focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -416,6 +425,10 @@
 }
 
 :host .time-body-active {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .time-body-active {
   color: var(--ion-color-base);
 }
 
@@ -424,6 +437,10 @@
 }
 
 :host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
   color: var(--ion-color-base);
 }
 
@@ -603,6 +620,11 @@ ion-picker {
 
 :host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-action-buttons .calendar-month-year-toggle ion-icon,
+:host(.ion-color) .calendar-action-buttons ion-buttons ion-button {
   color: var(--ion-color-base);
 }
 
@@ -768,15 +790,23 @@ ion-picker {
 }
 
 .calendar-day.calendar-day-active {
-  background: rgba(var(--ion-color-base-rgb), 0.2);
+  background: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.2);
   font-size: min(1.375rem, 35.2px);
 }
 
+:host(.ion-color) .calendar-day.calendar-day-active {
+  background: rgba(var(--ion-color-base-rgb), 0.2);
+}
+
 /**
  * Day that today but not selected
  * should have ion-color for text color.
  */
 :host .calendar-day.calendar-day-today {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today {
   color: var(--ion-color-base);
 }
 
@@ -787,16 +817,26 @@ ion-picker {
  */
 :host .calendar-day.calendar-day-active,
 :host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
-  color: var(--ion-color-base);
+  color: var(--ion-color-primary, #0054e9);
   font-weight: 600;
 }
 
+:host(.ion-color) .calendar-day.calendar-day-active,
+:host(.ion-color) .calendar-day.calendar-day-adjacent-day.calendar-day-active {
+  color: var(--ion-color-base);
+}
+
 /**
  * Day that is selected and is today
  * should have base background color
  * with contrast text.
  */
 :host .calendar-day.calendar-day-today.calendar-day-active {
+  background: var(--ion-color-primary, #0054e9);
+  color: var(--ion-color-primary-contrast, #fff);
+}
+
+:host(.ion-color) .calendar-day.calendar-day-today.calendar-day-active {
   background: var(--ion-color-base);
   color: var(--ion-color-contrast);
 }