@sparkle-learning/core 0.0.33 → 0.0.36

package/dist/esm/ion-content_2.entry.js

@@ -1,10 +1,12 @@
-import { r as registerInstance, i as createEvent, j as readTask, f as forceUpdate, h, H as Host, e as getElement, w as writeTask } from './index-5568e3fa.js';
-import { g as getIonMode, a as isPlatform } from './ionic-global-0939c477.js';
-import { c as componentOnReady, e as clamp, i as inheritAttributes } from './helpers-9d0930de.js';
+import { r as registerInstance, i as createEvent, j as readTask, f as forceUpdate, h, H as Host, e as getElement, w as writeTask } from './index-c04b9ed5.js';
+import { g as getIonMode, a as isPlatform } from './ionic-global-4903e23e.js';
+import { c as componentOnReady, m as clamp, i as inheritAriaAttributes } from './helpers-bf0e23d6.js';
 import { i as isRTL } from './dir-03012648.js';
-import { c as createColorClasses, h as hostContext } from './theme-c336c9d9.js';
+import { c as createColorClasses, h as hostContext } from './theme-7ef00c83.js';
+import { g as getScrollElement, a as findIonContent, p as printIonContentErrorMsg } from './index-5e8971ae.js';
+import './index-dad75b83.js';
 
-const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden;touch-action:manipulation}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.inner-scroll{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:flex;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:10px;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTE3MDgzRkQ5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTE3MDgzRkU5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTcwODNGQjlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMTcwODNGQzlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmePEuQAAABNSURBVHjaYvz//z8DIxAwMDAwATGMhmFmPDQuOSZks0AMmoJBaQHjkPfB0Lfg/2gQjVow+HPy/yHvg9GiYjQfjMbBqAWjFgy/4hogwADYqwdzxy5BuwAAAABJRU5ErkJggg==);background-repeat:repeat-y;background-size:10px 16px}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;transform:translateZ(0)}";
+const contentCss = ":host{--background:var(--ion-background-color, #fff);--color:var(--ion-text-color, #000);--padding-top:0px;--padding-bottom:0px;--padding-start:0px;--padding-end:0px;--keyboard-offset:0px;--offset-top:0px;--offset-bottom:0px;--overflow:auto;display:block;position:relative;flex:1;width:100%;height:100%;margin:0 !important;padding:0 !important;font-family:var(--ion-font-family, inherit);contain:size style}:host(.ion-color) .inner-scroll{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host(.outer-content){--background:var(--ion-color-step-50, #f2f2f2)}#background-content{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);position:absolute;background:var(--background)}.inner-scroll{left:0px;right:0px;top:calc(var(--offset-top) * -1);bottom:calc(var(--offset-bottom) * -1);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) + var(--offset-top));padding-bottom:calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom));position:absolute;color:var(--color);box-sizing:border-box;overflow:hidden;touch-action:pan-x pan-y pinch-zoom}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.inner-scroll{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.scroll-y,.scroll-x{-webkit-overflow-scrolling:touch;z-index:0;will-change:scroll-position}.scroll-y{overflow-y:var(--overflow);overscroll-behavior-y:contain}.scroll-x{overflow-x:var(--overflow);overscroll-behavior-x:contain}.overscroll::before,.overscroll::after{position:absolute;width:1px;height:1px;content:\"\"}.overscroll::before{bottom:-1px}.overscroll::after{top:-1px}:host(.content-sizing){display:flex;flex-direction:column;min-height:0;contain:none}:host(.content-sizing) .inner-scroll{position:relative;top:0;bottom:0;margin-top:calc(var(--offset-top) * -1);margin-bottom:calc(var(--offset-bottom) * -1)}.transition-effect{display:none;position:absolute;width:100%;height:100vh;opacity:0;pointer-events:none}:host(.content-ltr) .transition-effect{left:-100%;}:host(.content-rtl) .transition-effect{right:-100%;}.transition-cover{position:absolute;right:0;width:100%;height:100%;background:black;opacity:0.1}.transition-shadow{display:block;position:absolute;width:10px;height:100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAYAAAAIXrg4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTE3MDgzRkQ5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTE3MDgzRkU5QTkyMTFFOUEwNzQ5MkJFREE1NUY2MjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTcwODNGQjlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxMTcwODNGQzlBOTIxMUU5QTA3NDkyQkVEQTU1RjYyNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmePEuQAAABNSURBVHjaYvz//z8DIxAwMDAwATGMhmFmPDQuOSZks0AMmoJBaQHjkPfB0Lfg/2gQjVow+HPy/yHvg9GiYjQfjMbBqAWjFgy/4hogwADYqwdzxy5BuwAAAABJRU5ErkJggg==);background-repeat:repeat-y;background-size:10px 16px}:host(.content-ltr) .transition-shadow{right:0;}:host(.content-rtl) .transition-shadow{left:0;transform:scaleX(-1)}::slotted([slot=fixed]){position:absolute;transform:translateZ(0)}";
 
 const Content = class {
   constructor(hostRef) {
@@ -71,9 +73,7 @@ const Content = class {
   shouldForceOverscroll() {
     const { forceOverscroll } = this;
     const mode = getIonMode(this);
-    return forceOverscroll === undefined
-      ? mode === 'ios' && isPlatform('ios')
-      : forceOverscroll;
+    return forceOverscroll === undefined ? mode === 'ios' && isPlatform('ios') : forceOverscroll;
   }
   resize() {
     if (this.fullscreen) {
@@ -104,7 +104,7 @@ const Content = class {
     }
     if (!this.queued && this.scrollEvents) {
       this.queued = true;
-      readTask(ts => {
+      readTask((ts) => {
         this.queued = false;
         this.detail.event = ev;
         updateScrollDetail(this.detail, this.scrollEl, ts, shouldStart);
@@ -126,7 +126,7 @@ const Content = class {
      * scrollEl won't be defined yet with the custom elements build, so wait for it to load in.
      */
     if (!this.scrollEl) {
-      await new Promise(resolve => componentOnReady(this.el, resolve));
+      await new Promise((resolve) => componentOnReady(this.el, resolve));
     }
     return Promise.resolve(this.scrollEl);
   }
@@ -179,20 +179,20 @@ const Content = class {
     }
     let resolve;
     let startTime = 0;
-    const promise = new Promise(r => resolve = r);
+    const promise = new Promise((r) => (resolve = r));
     const fromY = el.scrollTop;
     const fromX = el.scrollLeft;
     const deltaY = y != null ? y - fromY : 0;
     const deltaX = x != null ? x - fromX : 0;
     // scroll loop
     const step = (timeStamp) => {
-      const linearTime = Math.min(1, ((timeStamp - startTime) / duration)) - 1;
+      const linearTime = Math.min(1, (timeStamp - startTime) / duration) - 1;
       const easedT = Math.pow(linearTime, 3) + 1;
       if (deltaY !== 0) {
-        el.scrollTop = Math.floor((easedT * deltaY) + fromY);
+        el.scrollTop = Math.floor(easedT * deltaY + fromY);
       }
       if (deltaX !== 0) {
-        el.scrollLeft = Math.floor((easedT * deltaX) + fromX);
+        el.scrollLeft = Math.floor(easedT * deltaX + fromX);
       }
       if (easedT < 1) {
         // do not use DomController here
@@ -205,7 +205,7 @@ const Content = class {
       }
     };
     // chill out for a frame first
-    requestAnimationFrame(ts => {
+    requestAnimationFrame((ts) => {
       startTime = ts;
       step(ts);
     });
@@ -214,7 +214,7 @@ const Content = class {
   onScrollStart() {
     this.isScrolling = true;
     this.ionScrollStart.emit({
-      isScrolling: true
+      isScrolling: true,
     });
     if (this.watchDog) {
       clearInterval(this.watchDog);
@@ -232,7 +232,7 @@ const Content = class {
     if (this.isScrolling) {
       this.isScrolling = false;
       this.ionScrollEnd.emit({
-        isScrolling: false
+        isScrolling: false,
       });
     }
   }
@@ -247,8 +247,8 @@ const Content = class {
     return (h(Host, { class: createColorClasses(this.color, {
         [mode]: true,
         'content-sizing': hostContext('ion-popover', this.el),
-        'overscroll': forceOverscroll,
-        [`content-${rtl}`]: true
+        overscroll: forceOverscroll,
+        [`content-${rtl}`]: true,
       }), style: {
         '--offset-top': `${this.cTop}px`,
         '--offset-bottom': `${this.cBottom}px`,
@@ -256,17 +256,18 @@ const Content = 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", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
+        overscroll: (scrollX || scrollY) && forceOverscroll,
+      }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", null)), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, h("slot", { name: "fixed" })));
   }
   get el() { return getElement(this); }
 };
 const getParentElement = (el) => {
+  var _a;
   if (el.parentElement) {
     // normal element with a parent element
     return el.parentElement;
   }
-  if (el.parentNode && el.parentNode.host) {
+  if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
     // shadow dom's document fragment
     return el.parentNode.host;
   }
@@ -345,16 +346,16 @@ const createHeaderIndex = (headerEl) => {
         el: toolbar,
         background: toolbar.shadowRoot.querySelector('.toolbar-background'),
         ionTitleEl,
-        innerTitleEl: (ionTitleEl) ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
-        ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')) || []
+        innerTitleEl: ionTitleEl ? ionTitleEl.shadowRoot.querySelector('.toolbar-title') : null,
+        ionButtonsEl: Array.from(toolbar.querySelectorAll('ion-buttons')) || [],
       };
-    }) || []
+    }) || [],
   };
 };
 const handleContentScroll = (scrollEl, scrollHeaderIndex, contentEl) => {
   readTask(() => {
     const scrollTop = scrollEl.scrollTop;
-    const scale = clamp(1, 1 + (-scrollTop / 500), 1.1);
+    const scale = clamp(1, 1 + -scrollTop / 500, 1.1);
     // Native refresher should not cause titles to scale
     const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
     if (nativeRefresher === null) {
@@ -396,8 +397,8 @@ const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
    * the content is transformed which can cause the intersection observer to erroneously
    * fire here as well.
    */
-  const scale = (ev[0].intersectionRatio > 0.9 || scrollTop <= 0) ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
-  setToolbarBackgroundOpacity(mainHeaderIndex.el, (scale === 1) ? undefined : scale);
+  const scale = ev[0].intersectionRatio > 0.9 || scrollTop <= 0 ? 0 : ((1 - ev[0].intersectionRatio) * 100) / 75;
+  setToolbarBackgroundOpacity(mainHeaderIndex.el, scale === 1 ? undefined : scale);
 };
 /**
  * If toolbars are intersecting, hide the scrollable toolbar content
@@ -450,13 +451,13 @@ const setHeaderActive = (headerIndex, active = true) => {
   }
 };
 const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
-  toolbars.forEach(toolbar => {
+  toolbars.forEach((toolbar) => {
     const ionTitle = toolbar.ionTitleEl;
     const titleDiv = toolbar.innerTitleEl;
     if (!ionTitle || ionTitle.size !== 'large') {
       return;
     }
-    titleDiv.style.transition = (transition) ? TRANSITION : '';
+    titleDiv.style.transition = transition ? TRANSITION : '';
     titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
   });
 };
@@ -464,7 +465,7 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
   readTask(() => {
     const scrollTop = scrollEl.scrollTop;
     const baseElHeight = baseEl.clientHeight;
-    const fadeStart = (condenseHeader) ? condenseHeader.clientHeight : 0;
+    const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
     /**
      * If we are using fade header with a condense
      * header, then the toolbar backgrounds should
@@ -477,14 +478,14 @@ const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
      * using just the condense header the content
      * should overflow out of the container.
      */
-    if ((condenseHeader !== null) && (scrollTop < fadeStart)) {
+    if (condenseHeader !== null && scrollTop < fadeStart) {
       baseEl.style.setProperty('--opacity-scale', '0');
       scrollEl.style.setProperty('clip-path', `inset(${baseElHeight}px 0px 0px 0px)`);
       return;
     }
     const distanceToStart = scrollTop - fadeStart;
     const fadeDuration = 10;
-    const scale = clamp(0, (distanceToStart / fadeDuration), 1);
+    const scale = clamp(0, distanceToStart / fadeDuration, 1);
     writeTask(() => {
       scrollEl.style.removeProperty('clip-path');
       baseEl.style.setProperty('--opacity-scale', scale.toString());
@@ -510,22 +511,19 @@ const Header = class {
      */
     this.translucent = false;
     this.setupFadeHeader = async (contentEl, condenseHeader) => {
-      if (!contentEl) {
-        console.error('ion-header requires a content to collapse. Make sure there is an ion-content.');
-        return;
-      }
-      await new Promise(resolve => componentOnReady(contentEl, resolve));
-      const scrollEl = this.scrollEl = await contentEl.getScrollElement();
+      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
       /**
        * Handle fading of toolbars on scroll
        */
-      this.contentScrollCallback = () => { handleHeaderFade(this.scrollEl, this.el, condenseHeader); };
+      this.contentScrollCallback = () => {
+        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+      };
       scrollEl.addEventListener('scroll', this.contentScrollCallback);
       handleHeaderFade(this.scrollEl, this.el, condenseHeader);
     };
   }
   componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.el, ['role']);
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
   componentDidLoad() {
     this.checkCollapsibleHeader();
@@ -547,7 +545,7 @@ const Header = class {
     this.destroyCollapsibleHeader();
     if (hasCondense) {
       const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-      const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null;
+      const contentEl = pageEl ? findIonContent(pageEl) : null;
       // Cloned elements are always needed in iOS transition
       writeTask(() => {
         const title = cloneElement('ion-title');
@@ -558,8 +556,12 @@ const Header = class {
     }
     else if (hasFade) {
       const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-      const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null;
-      const condenseHeader = (contentEl) ? contentEl.querySelector('ion-header[collapse="condense"]') : null;
+      const contentEl = pageEl ? findIonContent(pageEl) : null;
+      if (!contentEl) {
+        printIonContentErrorMsg(this.el);
+        return;
+      }
+      const condenseHeader = contentEl.querySelector('ion-header[collapse="condense"]');
       await this.setupFadeHeader(contentEl, condenseHeader);
     }
   }
@@ -579,14 +581,13 @@ const Header = class {
   }
   async setupCondenseHeader(contentEl, pageEl) {
     if (!contentEl || !pageEl) {
-      console.error('ion-header requires a content to collapse, make sure there is an ion-content.');
+      printIonContentErrorMsg(this.el);
       return;
     }
     if (typeof IntersectionObserver === 'undefined') {
       return;
     }
-    await new Promise(resolve => componentOnReady(contentEl, resolve));
-    this.scrollEl = await contentEl.getScrollElement();
+    this.scrollEl = await getScrollElement(contentEl);
     const headers = pageEl.querySelectorAll('ion-header');
     this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
     if (!this.collapsibleMainHeader) {
@@ -605,15 +606,22 @@ const Header = class {
      * as well as progressively showing/hiding the main header
      * border as the top-most toolbar collapses or expands.
      */
-    const toolbarIntersection = (ev) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl); };
-    this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { root: contentEl, threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1] });
+    const toolbarIntersection = (ev) => {
+      handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex, this.scrollEl);
+    };
+    this.intersectionObserver = new IntersectionObserver(toolbarIntersection, {
+      root: contentEl,
+      threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
+    });
     this.intersectionObserver.observe(scrollHeaderIndex.toolbars[scrollHeaderIndex.toolbars.length - 1].el);
     /**
      * Handle scaling of large iOS titles and
      * showing/hiding border on last toolbar
      * in primary header
      */
-    this.contentScrollCallback = () => { handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl); };
+    this.contentScrollCallback = () => {
+      handleContentScroll(this.scrollEl, scrollHeaderIndex, contentEl);
+    };
     this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
     writeTask(() => {
       if (this.collapsibleMainHeader !== undefined) {
@@ -634,8 +642,7 @@ const Header = class {
         [`header-translucent`]: this.translucent,
         [`header-collapse-${collapse}`]: true,
         [`header-translucent-${mode}`]: this.translucent,
-      } }, inheritedAttributes), mode === 'ios' && translucent &&
-      h("div", { class: "header-background" }), h("slot", null)));
+      } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { class: "header-background" }), h("slot", null)));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/ion-datetime-button.entry.js

@@ -0,0 +1,308 @@
+import { r as registerInstance, h, H as Host, e as getElement } from './index-c04b9ed5.js';
+import { g as getIonMode } from './ionic-global-4903e23e.js';
+import { a as addEventListener, c as componentOnReady } from './helpers-bf0e23d6.js';
+import { a as printIonWarning, p as printIonError } from './index-dad75b83.js';
+import { c as createColorClasses } from './theme-7ef00c83.js';
+import { p as parseDate, e as getToday, D as is24Hour, M as getLocalizedDateTime, A as getMonthAndYear, E as getLocalizedTime, N as getMonthDayAndYear } from './parse-1ae3a9bb.js';
+
+const iosDatetimeButtonCss = ":host{display:flex;align-items:center;justify-content:center}:host button{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;margin-left:2px;margin-right:2px;margin-top:0px;margin-bottom:0px;position:relative;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host button{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";
+
+const mdDatetimeButtonCss = ":host{display:flex;align-items:center;justify-content:center}:host button{border-radius:8px;padding-left:12px;padding-right:12px;padding-top:6px;padding-bottom:6px;margin-left:2px;margin-right:2px;margin-top:0px;margin-bottom:0px;position:relative;transition:150ms color ease-in-out;border:none;background:var(--ion-color-step-300, #edeef0);color:var(--ion-text-color, #000);font-family:inherit;font-size:inherit;cursor:pointer;appearance:none;overflow:hidden}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host button{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host button{margin-left:unset;margin-right:unset;-webkit-margin-start:2px;margin-inline-start:2px;-webkit-margin-end:2px;margin-inline-end:2px}}:host(.time-active) #time-button,:host(.date-active) #date-button{color:var(--ion-color-base)}:host(.datetime-button-disabled){pointer-events:none}:host(.datetime-button-disabled) button{opacity:0.4}";
+
+const DatetimeButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.datetimeEl = null;
+    this.overlayEl = null;
+    this.datetimePresentation = 'date-time';
+    this.datetimeActive = false;
+    /**
+     * The color to use from your application's color palette.
+     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+     * For more information on colors, see [theming](/docs/theming/basics).
+     */
+    this.color = 'primary';
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    this.disabled = false;
+    /**
+     * Check the value property on the linked
+     * ion-datetime and then format it according
+     * to the locale specified on ion-datetime.
+     */
+    this.setDateTimeText = () => {
+      const { datetimeEl, datetimePresentation } = this;
+      if (!datetimeEl) {
+        return;
+      }
+      const { value, locale, hourCycle, preferWheel, multiple } = datetimeEl;
+      if (multiple) {
+        printIonWarning(`Multi-date selection cannot be used with ion-datetime-button.
+
+Please upvote https://github.com/ionic-team/ionic-framework/issues/25668 if you are interested in seeing this functionality added.
+      `, this.el);
+        return;
+      }
+      /**
+       * Both ion-datetime and ion-datetime-button default
+       * to today's date and time if no value is set.
+       */
+      const parsedDatetime = parseDate(value || getToday());
+      const use24Hour = is24Hour(locale, hourCycle);
+      // TODO(FW-1865) - Remove once FW-1831 is fixed.
+      parsedDatetime.tzOffset = undefined;
+      this.dateText = this.timeText = undefined;
+      switch (datetimePresentation) {
+        case 'date-time':
+        case 'time-date':
+          const dateText = getMonthDayAndYear(locale, parsedDatetime);
+          const timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
+          if (preferWheel) {
+            this.dateText = `${dateText} ${timeText}`;
+          }
+          else {
+            this.dateText = dateText;
+            this.timeText = timeText;
+          }
+          break;
+        case 'date':
+          this.dateText = getMonthDayAndYear(locale, parsedDatetime);
+          break;
+        case 'time':
+          this.timeText = getLocalizedTime(locale, parsedDatetime, use24Hour);
+          break;
+        case 'month-year':
+          this.dateText = getMonthAndYear(locale, parsedDatetime);
+          break;
+        case 'month':
+          this.dateText = getLocalizedDateTime(locale, parsedDatetime, { month: 'long' });
+          break;
+        case 'year':
+          this.dateText = getLocalizedDateTime(locale, parsedDatetime, { year: 'numeric' });
+          break;
+      }
+    };
+    /**
+     * Waits for the ion-datetime to re-render.
+     * This is needed in order to correctly position
+     * a popover relative to the trigger element.
+     */
+    this.waitForDatetimeChanges = async () => {
+      const { datetimeEl } = this;
+      if (!datetimeEl) {
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
+      });
+    };
+    this.handleDateClick = async (ev) => {
+      const { datetimeEl, datetimePresentation } = this;
+      if (!datetimeEl) {
+        return;
+      }
+      let needsPresentationChange = false;
+      /**
+       * When clicking the date button,
+       * we need to make sure that only a date
+       * picker is displayed. For presentation styles
+       * that display content other than a date picker,
+       * we need to update the presentation style.
+       */
+      switch (datetimePresentation) {
+        case 'date-time':
+        case 'time-date':
+          const needsChange = datetimeEl.presentation !== 'date';
+          /**
+           * The date+time wheel picker
+           * shows date and time together,
+           * so do not adjust the presentation
+           * in that case.
+           */
+          if (!datetimeEl.preferWheel && needsChange) {
+            datetimeEl.presentation = 'date';
+            needsPresentationChange = true;
+          }
+          break;
+      }
+      /**
+       * Track which button was clicked
+       * so that it can have the correct
+       * activated styles applied when
+       * the modal/popover containing
+       * the datetime is opened.
+       */
+      this.selectedButton = 'date';
+      this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);
+    };
+    this.handleTimeClick = (ev) => {
+      const { datetimeEl, datetimePresentation } = this;
+      if (!datetimeEl) {
+        return;
+      }
+      let needsPresentationChange = false;
+      /**
+       * When clicking the time button,
+       * we need to make sure that only a time
+       * picker is displayed. For presentation styles
+       * that display content other than a time picker,
+       * we need to update the presentation style.
+       */
+      switch (datetimePresentation) {
+        case 'date-time':
+        case 'time-date':
+          const needsChange = datetimeEl.presentation !== 'time';
+          if (needsChange) {
+            datetimeEl.presentation = 'time';
+            needsPresentationChange = true;
+          }
+          break;
+      }
+      /**
+       * Track which button was clicked
+       * so that it can have the correct
+       * activated styles applied when
+       * the modal/popover containing
+       * the datetime is opened.
+       */
+      this.selectedButton = 'time';
+      this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
+    };
+    /**
+     * If the datetime is presented in an
+     * overlay, the datetime and overlay
+     * should be appropriately sized.
+     * These classes provide default sizing values
+     * that developers can customize.
+     * The goal is to provide an overlay that is
+     * reasonably sized with a datetime that
+     * fills the entire container.
+     */
+    this.presentOverlay = async (ev, needsPresentationChange, triggerEl) => {
+      const { overlayEl } = this;
+      if (!overlayEl) {
+        return;
+      }
+      if (overlayEl.tagName === 'ION-POPOVER') {
+        /**
+         * When the presentation on datetime changes,
+         * we need to wait for the component to re-render
+         * otherwise the computed width/height of the
+         * popover content will be wrong, causing
+         * the popover to not align with the trigger element.
+         */
+        if (needsPresentationChange) {
+          await this.waitForDatetimeChanges();
+        }
+        /**
+         * We pass the trigger button element
+         * so that the popover aligns with the individual
+         * button that was clicked, not the component container.
+         */
+        overlayEl.present(Object.assign(Object.assign({}, ev), { detail: {
+            ionShadowTarget: triggerEl,
+          } }));
+      }
+      else {
+        overlayEl.present();
+      }
+    };
+  }
+  async componentWillLoad() {
+    const { datetime } = this;
+    if (!datetime) {
+      printIonError('An ID associated with an ion-datetime instance is required for ion-datetime-button to function properly.', this.el);
+      return;
+    }
+    const datetimeEl = (this.datetimeEl = document.getElementById(datetime));
+    if (!datetimeEl) {
+      printIonError(`No ion-datetime instance found for ID '${datetime}'.`, this.el);
+      return;
+    }
+    /**
+     * Since the datetime can be used in any context (overlays, accordion, etc)
+     * we track when it is visible to determine when it is active.
+     * This informs which button is highlighted as well as the
+     * aria-expanded state.
+     */
+    const io = new IntersectionObserver((entries) => {
+      const ev = entries[0];
+      this.datetimeActive = ev.isIntersecting;
+    }, {
+      threshold: 0.01,
+    });
+    io.observe(datetimeEl);
+    /**
+     * Get a reference to any modal/popover
+     * the datetime is being used in so we can
+     * correctly size it when it is presented.
+     */
+    const overlayEl = (this.overlayEl = datetimeEl.closest('ion-modal, ion-popover'));
+    /**
+     * The .ion-datetime-button-overlay class contains
+     * styles that allow any modal/popover to be
+     * sized according to the dimensions of the datetime.
+     * If developers want a smaller/larger overlay all they need
+     * to do is change the width/height of the datetime.
+     * Additionally, this lets us avoid having to set
+     * explicit widths on each variant of datetime.
+     */
+    if (overlayEl) {
+      overlayEl.classList.add('ion-datetime-button-overlay');
+    }
+    componentOnReady(datetimeEl, () => {
+      const datetimePresentation = (this.datetimePresentation = datetimeEl.presentation || 'date-time');
+      /**
+       * Set the initial display
+       * in the rendered buttons.
+       *
+       * From there, we need to listen
+       * for ionChange to be emitted
+       * from datetime so we know when
+       * to re-render the displayed
+       * text in the buttons.
+       */
+      this.setDateTimeText();
+      addEventListener(datetimeEl, 'ionChange', this.setDateTimeText);
+      /**
+       * Configure the initial selected button
+       * in the event that the datetime is displayed
+       * without clicking one of the datetime buttons.
+       * For example, a datetime could be expanded
+       * in an accordion. In this case users only
+       * need to click the accordion header to show
+       * the datetime.
+       */
+      switch (datetimePresentation) {
+        case 'date-time':
+        case 'date':
+        case 'month-year':
+        case 'month':
+        case 'year':
+          this.selectedButton = 'date';
+          break;
+        case 'time-date':
+        case 'time':
+          this.selectedButton = 'time';
+          break;
+      }
+    });
+  }
+  render() {
+    const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
+    const mode = getIonMode(this);
+    return (h(Host, { class: createColorClasses(color, {
+        [mode]: true,
+        [`${selectedButton}-active`]: datetimeActive,
+        ['datetime-button-disabled']: disabled,
+      }) }, dateText && (h("button", { class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", null))), timeText && (h("button", { class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", null)))));
+  }
+  get el() { return getElement(this); }
+};
+DatetimeButton.style = {
+  ios: iosDatetimeButtonCss,
+  md: mdDatetimeButtonCss
+};
+
+export { DatetimeButton as ion_datetime_button };