@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/components/ion-header.js

@@ -1,4 +1,358 @@
-import{e,w as o,p as t,H as n,h as i,d as a,t as s}from"./p-BnQDByf2.js";import{g as r,f as l,p as d}from"./p-B5ZghgSh.js";import{m as c,i as h}from"./p-BwKjt_Dc.js";import{h as p}from"./p-DiVJyqlX.js";import{g as b}from"./p-CN34uOrj.js";
+import { p as proxyCustomElement, H, w as writeTask$1, h, d as Host } from './p-ec0e3f3f.js';
+import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './p-1596e301.js';
+import { m as clamp, i as inheritAriaAttributes } from './p-2bb89b46.js';
+import { h as hostContext } from './p-350e7423.js';
+import { g as getIonMode } from './p-901c16c5.js';
+import { r as readTask, w as writeTask } from './p-96073863.js';
+
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
- */const u=e=>{const o=document.querySelector(e+".ion-cloned-element");if(null!==o)return o;const t=document.createElement(e);return t.classList.add("ion-cloned-element"),t.style.setProperty("display","none"),document.body.appendChild(t),t},f=e=>{if(!e)return;const o=e.querySelectorAll("ion-toolbar");return{el:e,toolbars:Array.from(o).map((e=>{const o=e.querySelector("ion-title");return{el:e,background:e.shadowRoot.querySelector(".toolbar-background"),ionTitleEl:o,innerTitleEl:o?o.shadowRoot.querySelector(".toolbar-title"):null,ionButtonsEl:Array.from(e.querySelectorAll("ion-buttons"))}}))}},m=(e,o)=>{"fade"!==e.collapse&&(void 0===o?e.style.removeProperty("--opacity-scale"):e.style.setProperty("--opacity-scale",""+o))},y=(e,o=!0)=>{const t=e.el;o?(t.classList.remove("header-collapse-condense-inactive"),t.removeAttribute("aria-hidden")):(t.classList.add("header-collapse-condense-inactive"),t.setAttribute("aria-hidden","true"))},g=(t,n,i)=>{e((()=>{const e=t.scrollTop,a=n.clientHeight,s=i?i.clientHeight:0;if(null!==i&&e<s)return n.style.setProperty("--opacity-scale","0"),void t.style.setProperty("clip-path",`inset(${a}px 0px 0px 0px)`);const r=c(0,(e-s)/10,1);o((()=>{t.style.removeProperty("clip-path"),n.style.setProperty("--opacity-scale",""+r)}))}))},v=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.inheritedAttributes={},this.setupFadeHeader=async(e,o)=>{const t=this.scrollEl=await r(e);this.contentScrollCallback=()=>{g(this.scrollEl,this.el,o)},t.addEventListener("scroll",this.contentScrollCallback),g(this.scrollEl,this.el,o)},this.collapse=void 0,this.translucent=!1}componentWillLoad(){this.inheritedAttributes=h(this.el)}componentDidLoad(){this.checkCollapsibleHeader()}componentDidUpdate(){this.checkCollapsibleHeader()}disconnectedCallback(){this.destroyCollapsibleHeader()}async checkCollapsibleHeader(){if("ios"!==b(this))return;const{collapse:e}=this,t="condense"===e,n="fade"===e;if(this.destroyCollapsibleHeader(),t){const e=this.el.closest("ion-app,ion-page,.ion-page,page-inner"),t=e?l(e):null;o((()=>{u("ion-title").size="large",u("ion-back-button")})),await this.setupCondenseHeader(t,e)}else if(n){const e=this.el.closest("ion-app,ion-page,.ion-page,page-inner"),o=e?l(e):null;if(!o)return void d(this.el);const t=o.querySelector('ion-header[collapse="condense"]');await this.setupFadeHeader(o,t)}}destroyCollapsibleHeader(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=void 0),this.scrollEl&&this.contentScrollCallback&&(this.scrollEl.removeEventListener("scroll",this.contentScrollCallback),this.contentScrollCallback=void 0),this.collapsibleMainHeader&&(this.collapsibleMainHeader.classList.remove("header-collapse-main"),this.collapsibleMainHeader=void 0)}async setupCondenseHeader(t,n){if(!t||!n)return void d(this.el);if("undefined"==typeof IntersectionObserver)return;this.scrollEl=await r(t);const i=n.querySelectorAll("ion-header");if(this.collapsibleMainHeader=Array.from(i).find((e=>"condense"!==e.collapse)),!this.collapsibleMainHeader)return;const a=f(this.collapsibleMainHeader),s=f(this.el);a&&s&&(y(a,!1),m(a.el,0),this.intersectionObserver=new IntersectionObserver((e=>{((e,t,n,i)=>{o((()=>{const o=i.scrollTop;((e,o,t)=>{if(!e[0].isIntersecting)return;const n=e[0].intersectionRatio>.9||t<=0?0:100*(1-e[0].intersectionRatio)/75;m(o.el,1===n?void 0:n)})(e,t,o);const a=e[0],s=a.intersectionRect,r=s.width*s.height;0===r&&0==a.rootBounds.width*a.rootBounds.height||r>0&&(Math.abs(s.left-a.boundingClientRect.left)>=5||Math.abs(s.right-a.boundingClientRect.right)>=5)||(a.isIntersecting?(y(t,!1),y(n)):(0===s.x&&0===s.y||0!==s.width&&0!==s.height)&&o>0&&(y(t),y(n,!1),m(t.el)))}))})(e,a,s,this.scrollEl)}),{root:t,threshold:[.25,.3,.4,.5,.6,.7,.8,.9,1]}),this.intersectionObserver.observe(s.toolbars[s.toolbars.length-1].el),this.contentScrollCallback=()=>{((t,n,i)=>{e((()=>{const e=c(1,1+-t.scrollTop/500,1.1);null===i.querySelector("ion-refresher.refresher-native")&&o((()=>{((e=[],o=1,t=!1)=>{e.forEach((e=>{const n=e.ionTitleEl,i=e.innerTitleEl;n&&"large"===n.size&&(i.style.transition=t?"all 0.2s ease-in-out":"",i.style.transform=`scale3d(${o}, ${o}, 1)`)}))})(n.toolbars,e)}))}))})(this.scrollEl,s,t)},this.scrollEl.addEventListener("scroll",this.contentScrollCallback),o((()=>{void 0!==this.collapsibleMainHeader&&this.collapsibleMainHeader.classList.add("header-collapse-main")})))}render(){const{translucent:e,inheritedAttributes:o}=this,t=b(this),n=this.collapse||"none",s=p("ion-menu",this.el)?"none":"banner";return i(a,Object.assign({key:"9fa0af97b605f9fe98b13361bc3d1289745c549f",role:s,class:{[t]:!0,["header-"+t]:!0,"header-translucent":this.translucent,["header-collapse-"+n]:!0,["header-translucent-"+t]:this.translucent}},o),"ios"===t&&e&&i("div",{key:"1a780d2625302f2465718e304bdd3794c89c9845",class:"header-background"}),i("slot",{key:"b2b8557b44be40c590bfcc362ac4350f9f8b889e"}))}get el(){return this}static get style(){return{ios:"ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}",md:"ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{box-shadow:none}"}}},[292,"ion-header",{collapse:[1],translucent:[4]}]),x=v,k=function(){"undefined"!=typeof customElements&&["ion-header"].forEach((e=>{"ion-header"===e&&(customElements.get(s(e))||customElements.define(s(e),v))}))};export{x as IonHeader,k as defineCustomElement}
+ */
+const TRANSITION = 'all 0.2s ease-in-out';
+const cloneElement = (tagName) => {
+    const getCachedEl = document.querySelector(`${tagName}.ion-cloned-element`);
+    if (getCachedEl !== null) {
+        return getCachedEl;
+    }
+    const clonedEl = document.createElement(tagName);
+    clonedEl.classList.add('ion-cloned-element');
+    clonedEl.style.setProperty('display', 'none');
+    document.body.appendChild(clonedEl);
+    return clonedEl;
+};
+const createHeaderIndex = (headerEl) => {
+    if (!headerEl) {
+        return;
+    }
+    const toolbars = headerEl.querySelectorAll('ion-toolbar');
+    return {
+        el: headerEl,
+        toolbars: Array.from(toolbars).map((toolbar) => {
+            const ionTitleEl = toolbar.querySelector('ion-title');
+            return {
+                el: toolbar,
+                background: toolbar.shadowRoot.querySelector('.toolbar-background'),
+                ionTitleEl,
+                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);
+        // Native refresher should not cause titles to scale
+        const nativeRefresher = contentEl.querySelector('ion-refresher.refresher-native');
+        if (nativeRefresher === null) {
+            writeTask(() => {
+                scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
+            });
+        }
+    });
+};
+const setToolbarBackgroundOpacity = (headerEl, opacity) => {
+    /**
+     * Fading in the backdrop opacity
+     * should happen after the large title
+     * has collapsed, so it is handled
+     * by handleHeaderFade()
+     */
+    if (headerEl.collapse === 'fade') {
+        return;
+    }
+    if (opacity === undefined) {
+        headerEl.style.removeProperty('--opacity-scale');
+    }
+    else {
+        headerEl.style.setProperty('--opacity-scale', opacity.toString());
+    }
+};
+const handleToolbarBorderIntersection = (ev, mainHeaderIndex, scrollTop) => {
+    if (!ev[0].isIntersecting) {
+        return;
+    }
+    /**
+     * There is a bug in Safari where overflow scrolling on a non-body element
+     * does not always reset the scrollTop position to 0 when letting go. It will
+     * set to 1 once the rubber band effect has ended. This causes the background to
+     * appear slightly on certain app setups.
+     *
+     * Additionally, we check if user is rubber banding (scrolling is negative)
+     * as this can mean they are using pull to refresh. Once the refresher starts,
+     * 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);
+};
+/**
+ * If toolbars are intersecting, hide the scrollable toolbar content
+ * and show the primary toolbar content. If the toolbars are not intersecting,
+ * hide the primary toolbar content and show the scrollable toolbar content
+ */
+const handleToolbarIntersection = (ev, // TODO(FW-2832): type (IntersectionObserverEntry[] triggers errors which should be sorted)
+mainHeaderIndex, scrollHeaderIndex, scrollEl) => {
+    writeTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        handleToolbarBorderIntersection(ev, mainHeaderIndex, scrollTop);
+        const event = ev[0];
+        const intersection = event.intersectionRect;
+        const intersectionArea = intersection.width * intersection.height;
+        const rootArea = event.rootBounds.width * event.rootBounds.height;
+        const isPageHidden = intersectionArea === 0 && rootArea === 0;
+        const leftDiff = Math.abs(intersection.left - event.boundingClientRect.left);
+        const rightDiff = Math.abs(intersection.right - event.boundingClientRect.right);
+        const isPageTransitioning = intersectionArea > 0 && (leftDiff >= 5 || rightDiff >= 5);
+        if (isPageHidden || isPageTransitioning) {
+            return;
+        }
+        if (event.isIntersecting) {
+            setHeaderActive(mainHeaderIndex, false);
+            setHeaderActive(scrollHeaderIndex);
+        }
+        else {
+            /**
+             * There is a bug with IntersectionObserver on Safari
+             * where `event.isIntersecting === false` when cancelling
+             * a swipe to go back gesture. Checking the intersection
+             * x, y, width, and height provides a workaround. This bug
+             * does not happen when using Safari + Web Animations,
+             * only Safari + CSS Animations.
+             */
+            const hasValidIntersection = (intersection.x === 0 && intersection.y === 0) || (intersection.width !== 0 && intersection.height !== 0);
+            if (hasValidIntersection && scrollTop > 0) {
+                setHeaderActive(mainHeaderIndex);
+                setHeaderActive(scrollHeaderIndex, false);
+                setToolbarBackgroundOpacity(mainHeaderIndex.el);
+            }
+        }
+    });
+};
+const setHeaderActive = (headerIndex, active = true) => {
+    const headerEl = headerIndex.el;
+    if (active) {
+        headerEl.classList.remove('header-collapse-condense-inactive');
+        headerEl.removeAttribute('aria-hidden');
+    }
+    else {
+        headerEl.classList.add('header-collapse-condense-inactive');
+        headerEl.setAttribute('aria-hidden', 'true');
+    }
+};
+const scaleLargeTitles = (toolbars = [], scale = 1, transition = false) => {
+    toolbars.forEach((toolbar) => {
+        const ionTitle = toolbar.ionTitleEl;
+        const titleDiv = toolbar.innerTitleEl;
+        if (!ionTitle || ionTitle.size !== 'large') {
+            return;
+        }
+        titleDiv.style.transition = transition ? TRANSITION : '';
+        titleDiv.style.transform = `scale3d(${scale}, ${scale}, 1)`;
+    });
+};
+const handleHeaderFade = (scrollEl, baseEl, condenseHeader) => {
+    readTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        const baseElHeight = baseEl.clientHeight;
+        const fadeStart = condenseHeader ? condenseHeader.clientHeight : 0;
+        /**
+         * If we are using fade header with a condense
+         * header, then the toolbar backgrounds should
+         * not begin to fade in until the condense
+         * header has fully collapsed.
+         *
+         * Additionally, the main content should not
+         * overflow out of the container until the
+         * condense header has fully collapsed. When
+         * using just the condense header the content
+         * should overflow out of the container.
+         */
+        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);
+        writeTask(() => {
+            scrollEl.style.removeProperty('clip-path');
+            baseEl.style.setProperty('--opacity-scale', scale.toString());
+        });
+    });
+};
+
+const headerIosCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-ios ion-toolbar:last-of-type{--border-width:0 0 0.55px}@supports (backdrop-filter: blur(0)){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{backdrop-filter:blur(20px)}}.header-ios.ion-no-border ion-toolbar:last-of-type{--border-width:0}.header-collapse-fade ion-toolbar{--opacity-scale:inherit}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{--background:var(--ion-background-color, #fff);z-index:0}.header-collapse-condense ion-toolbar:last-of-type{--border-width:0px}.header-collapse-condense ion-toolbar ion-searchbar{padding-top:0px;padding-bottom:13px}.header-collapse-main{--opacity-scale:1}.header-collapse-main ion-toolbar{--opacity-scale:inherit}.header-collapse-main ion-toolbar.in-toolbar ion-title,.header-collapse-main ion-toolbar.in-toolbar ion-buttons{transition:all 0.2s ease-in-out}.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive:not(.header-collapse-condense) ion-toolbar.in-toolbar ion-buttons.buttons-collapse{opacity:0;pointer-events:none}.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-title,.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse{visibility:hidden}ion-header.header-ios:not(.header-collapse-main):has(~ion-content ion-header.header-ios[collapse=condense],~ion-content ion-header.header-ios.header-collapse-condense){opacity:0}";
+
+const headerMdCss = "ion-header{display:block;position:relative;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)}.header-collapse-condense{display:none}.header-md.ion-no-border{box-shadow:none}";
+
+const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.inheritedAttributes = {};
+    this.setupFadeHeader = async (contentEl, condenseHeader) => {
+      const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+      /**
+       * Handle fading of toolbars on scroll
+       */
+      this.contentScrollCallback = () => {
+        handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+      };
+      scrollEl.addEventListener('scroll', this.contentScrollCallback);
+      handleHeaderFade(this.scrollEl, this.el, condenseHeader);
+    };
+    this.collapse = undefined;
+    this.translucent = false;
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAriaAttributes(this.el);
+  }
+  componentDidLoad() {
+    this.checkCollapsibleHeader();
+  }
+  componentDidUpdate() {
+    this.checkCollapsibleHeader();
+  }
+  disconnectedCallback() {
+    this.destroyCollapsibleHeader();
+  }
+  async checkCollapsibleHeader() {
+    const mode = getIonMode(this);
+    if (mode !== 'ios') {
+      return;
+    }
+    const { collapse } = this;
+    const hasCondense = collapse === 'condense';
+    const hasFade = collapse === 'fade';
+    this.destroyCollapsibleHeader();
+    if (hasCondense) {
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      const contentEl = pageEl ? findIonContent(pageEl) : null;
+      // Cloned elements are always needed in iOS transition
+      writeTask$1(() => {
+        const title = cloneElement('ion-title');
+        title.size = 'large';
+        cloneElement('ion-back-button');
+      });
+      await this.setupCondenseHeader(contentEl, pageEl);
+    }
+    else if (hasFade) {
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
+      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);
+    }
+  }
+  destroyCollapsibleHeader() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = undefined;
+    }
+    if (this.scrollEl && this.contentScrollCallback) {
+      this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+      this.contentScrollCallback = undefined;
+    }
+    if (this.collapsibleMainHeader) {
+      this.collapsibleMainHeader.classList.remove('header-collapse-main');
+      this.collapsibleMainHeader = undefined;
+    }
+  }
+  async setupCondenseHeader(contentEl, pageEl) {
+    if (!contentEl || !pageEl) {
+      printIonContentErrorMsg(this.el);
+      return;
+    }
+    if (typeof IntersectionObserver === 'undefined') {
+      return;
+    }
+    this.scrollEl = await getScrollElement(contentEl);
+    const headers = pageEl.querySelectorAll('ion-header');
+    this.collapsibleMainHeader = Array.from(headers).find((header) => header.collapse !== 'condense');
+    if (!this.collapsibleMainHeader) {
+      return;
+    }
+    const mainHeaderIndex = createHeaderIndex(this.collapsibleMainHeader);
+    const scrollHeaderIndex = createHeaderIndex(this.el);
+    if (!mainHeaderIndex || !scrollHeaderIndex) {
+      return;
+    }
+    setHeaderActive(mainHeaderIndex, false);
+    setToolbarBackgroundOpacity(mainHeaderIndex.el, 0);
+    /**
+     * Handle interaction between toolbar collapse and
+     * showing/hiding content in the primary ion-header
+     * 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],
+    });
+    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.scrollEl.addEventListener('scroll', this.contentScrollCallback);
+    writeTask$1(() => {
+      if (this.collapsibleMainHeader !== undefined) {
+        this.collapsibleMainHeader.classList.add('header-collapse-main');
+      }
+    });
+  }
+  render() {
+    const { translucent, inheritedAttributes } = this;
+    const mode = getIonMode(this);
+    const collapse = this.collapse || 'none';
+    // banner role must be at top level, so remove role if inside a menu
+    const roleType = hostContext('ion-menu', this.el) ? 'none' : 'banner';
+    return (h(Host, Object.assign({ key: '9fa0af97b605f9fe98b13361bc3d1289745c549f', role: roleType, class: {
+        [mode]: true,
+        // Used internally for styling
+        [`header-${mode}`]: true,
+        [`header-translucent`]: this.translucent,
+        [`header-collapse-${collapse}`]: true,
+        [`header-translucent-${mode}`]: this.translucent,
+      } }, inheritedAttributes), mode === 'ios' && translucent && h("div", { key: '1a780d2625302f2465718e304bdd3794c89c9845', class: "header-background" }), h("slot", { key: 'b2b8557b44be40c590bfcc362ac4350f9f8b889e' })));
+  }
+  get el() { return this; }
+  static get style() { return {
+    ios: headerIosCss,
+    md: headerMdCss
+  }; }
+}, [36, "ion-header", {
+    "collapse": [1],
+    "translucent": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-header"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-header":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Header);
+      }
+      break;
+  } });
+}
+
+const IonHeader = Header;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonHeader, defineCustomElement };

package/dist/components/ion-icon.js

@@ -1 +1,6 @@
-import{I as o,d as s}from"./p-DMmSL7_l.js";const m=o,p=s;export{m as IonIcon,p as defineCustomElement}
+import { I as Icon, d as defineCustomElement$1 } from './p-83e529db.js';
+
+const IonIcon = Icon;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonIcon, defineCustomElement };

package/dist/components/ion-img.js

@@ -1 +1,124 @@
-import{p as t,H as i,c as s,h as e,d as o,t as r}from"./p-BnQDByf2.js";import{c as n}from"./p-BwKjt_Dc.js";import{g as h}from"./p-CN34uOrj.js";const d=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.ionImgWillLoad=s(this,"ionImgWillLoad",7),this.ionImgDidLoad=s(this,"ionImgDidLoad",7),this.ionError=s(this,"ionError",7),this.inheritedAttributes={},this.onLoad=()=>{this.ionImgDidLoad.emit()},this.onError=()=>{this.ionError.emit()},this.loadSrc=void 0,this.loadError=void 0,this.alt=void 0,this.src=void 0}srcChanged(){this.addIO()}componentWillLoad(){this.inheritedAttributes=n(this.el,["draggable"])}componentDidLoad(){this.addIO()}addIO(){void 0!==this.src&&("undefined"!=typeof window&&"IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype?(this.removeIO(),this.io=new IntersectionObserver((t=>{t[t.length-1].isIntersecting&&(this.load(),this.removeIO())})),this.io.observe(this.el)):setTimeout((()=>this.load()),200))}load(){this.loadError=this.onError,this.loadSrc=this.src,this.ionImgWillLoad.emit()}removeIO(){this.io&&(this.io.disconnect(),this.io=void 0)}render(){const{loadSrc:t,alt:i,onLoad:s,loadError:r,inheritedAttributes:n}=this,{draggable:d}=n;return e(o,{key:"efff4d1bd0e54dbeff140c137eb50b803a9f6f60",class:h(this)},e("img",{key:"3a1e0276ae67a7e40ec8c4ecd0061634573b2094",decoding:"async",src:t,alt:i,onLoad:s,onError:r,part:"image",draggable:a(d)}))}get el(){return this}static get watchers(){return{src:[{srcChanged:0}]}}static get style(){return":host{display:block;object-fit:contain}img{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit}"}},[1,"ion-img",{alt:[1],src:[1],loadSrc:[32],loadError:[32]},void 0,{src:[{srcChanged:0}]}]),a=t=>{switch(t){case"true":return!0;case"false":return!1;default:return}},c=d,l=function(){"undefined"!=typeof customElements&&["ion-img"].forEach((t=>{"ion-img"===t&&(customElements.get(r(t))||customElements.define(r(t),d))}))};export{c as IonImg,l as defineCustomElement}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ec0e3f3f.js';
+import { d as inheritAttributes } from './p-2bb89b46.js';
+import { g as getIonMode } from './p-901c16c5.js';
+
+const imgCss = ":host{display:block;object-fit:contain}img{display:block;width:100%;height:100%;object-fit:inherit;object-position:inherit}";
+
+const Img = /*@__PURE__*/ proxyCustomElement(class Img extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ionImgWillLoad = createEvent(this, "ionImgWillLoad", 7);
+    this.ionImgDidLoad = createEvent(this, "ionImgDidLoad", 7);
+    this.ionError = createEvent(this, "ionError", 7);
+    this.inheritedAttributes = {};
+    this.onLoad = () => {
+      this.ionImgDidLoad.emit();
+    };
+    this.onError = () => {
+      this.ionError.emit();
+    };
+    this.loadSrc = undefined;
+    this.loadError = undefined;
+    this.alt = undefined;
+    this.src = undefined;
+  }
+  srcChanged() {
+    this.addIO();
+  }
+  componentWillLoad() {
+    this.inheritedAttributes = inheritAttributes(this.el, ['draggable']);
+  }
+  componentDidLoad() {
+    this.addIO();
+  }
+  addIO() {
+    if (this.src === undefined) {
+      return;
+    }
+    if (typeof window !== 'undefined' &&
+      'IntersectionObserver' in window &&
+      'IntersectionObserverEntry' in window &&
+      'isIntersecting' in window.IntersectionObserverEntry.prototype) {
+      this.removeIO();
+      this.io = new IntersectionObserver((data) => {
+        /**
+         * On slower devices, it is possible for an intersection observer entry to contain multiple
+         * objects in the array. This happens when quickly scrolling an image into view and then out of
+         * view. In this case, the last object represents the current state of the component.
+         */
+        if (data[data.length - 1].isIntersecting) {
+          this.load();
+          this.removeIO();
+        }
+      });
+      this.io.observe(this.el);
+    }
+    else {
+      // fall back to setTimeout for Safari and IE
+      setTimeout(() => this.load(), 200);
+    }
+  }
+  load() {
+    this.loadError = this.onError;
+    this.loadSrc = this.src;
+    this.ionImgWillLoad.emit();
+  }
+  removeIO() {
+    if (this.io) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  render() {
+    const { loadSrc, alt, onLoad, loadError, inheritedAttributes } = this;
+    const { draggable } = inheritedAttributes;
+    return (h(Host, { key: 'efff4d1bd0e54dbeff140c137eb50b803a9f6f60', class: getIonMode(this) }, h("img", { key: '3a1e0276ae67a7e40ec8c4ecd0061634573b2094', decoding: "async", src: loadSrc, alt: alt, onLoad: onLoad, onError: loadError, part: "image", draggable: isDraggable(draggable) })));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "src": ["srcChanged"]
+  }; }
+  static get style() { return imgCss; }
+}, [1, "ion-img", {
+    "alt": [1],
+    "src": [1],
+    "loadSrc": [32],
+    "loadError": [32]
+  }]);
+/**
+ * Enumerated strings must be set as booleans
+ * as Stencil will not render 'false' in the DOM.
+ * The need to explicitly render draggable="true"
+ * as only certain elements are draggable by default.
+ * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable.
+ */
+const isDraggable = (draggable) => {
+  switch (draggable) {
+    case 'true':
+      return true;
+    case 'false':
+      return false;
+    default:
+      return undefined;
+  }
+};
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-img"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-img":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Img);
+      }
+      break;
+  } });
+}
+
+const IonImg = Img;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonImg, defineCustomElement };

package/dist/components/ion-infinite-scroll-content.js

@@ -1 +1,69 @@
-import{p as n,H as i,h as e,d as t,t as o}from"./p-BnQDByf2.js";import{E as s,s as l}from"./p-yu3xCFhr.js";import{c as r,g as c}from"./p-CN34uOrj.js";import{d as a}from"./p-D7YY0NXg.js";const d=n(class extends i{constructor(n){super(),!1!==n&&this.__registerHost(),this.customHTMLEnabled=r.get("innerHTMLTemplatesEnabled",s),this.loadingSpinner=void 0,this.loadingText=void 0}componentDidLoad(){if(void 0===this.loadingSpinner){const n=c(this);this.loadingSpinner=r.get("infiniteLoadingSpinner",r.get("spinner","ios"===n?"lines":"crescent"))}}renderLoadingText(){const{customHTMLEnabled:n,loadingText:i}=this;return n?e("div",{class:"infinite-loading-text",innerHTML:l(i)}):e("div",{class:"infinite-loading-text"},this.loadingText)}render(){const n=c(this);return e(t,{key:"2f4afb07bcfe3e12528eb9cee8646a097e0b359f",class:{[n]:!0,["infinite-scroll-content-"+n]:!0}},e("div",{key:"af038177bf10c88c8970682487a4328689aaa5f2",class:"infinite-loading"},this.loadingSpinner&&e("div",{key:"1da5d419bc6a978b6a509fdab47dae347fc8d221",class:"infinite-loading-spinner"},e("ion-spinner",{key:"60cc5c64e0a317ac0005d5afe42c4bb8da58136f",name:this.loadingSpinner})),void 0!==this.loadingText&&this.renderLoadingText()))}static get style(){return{ios:"ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}",md:"ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}"}}},[32,"ion-infinite-scroll-content",{loadingSpinner:[1025,"loading-spinner"],loadingText:[1,"loading-text"]}]),f=d,p=function(){"undefined"!=typeof customElements&&["ion-infinite-scroll-content","ion-spinner"].forEach((n=>{switch(n){case"ion-infinite-scroll-content":customElements.get(o(n))||customElements.define(o(n),d);break;case"ion-spinner":customElements.get(o(n))||a()}}))};export{f as IonInfiniteScrollContent,p as defineCustomElement}
+import { p as proxyCustomElement, H, h, d as Host } from './p-ec0e3f3f.js';
+import { E as ENABLE_HTML_CONTENT_DEFAULT, s as sanitizeDOMString } from './p-b2289937.js';
+import { c as config, g as getIonMode } from './p-901c16c5.js';
+import { d as defineCustomElement$2 } from './p-2d7d745d.js';
+
+const infiniteScrollContentIosCss = "ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-ios .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-lines-small-ios line,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-ios .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-ios .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}";
+
+const infiniteScrollContentMdCss = "ion-infinite-scroll-content{display:flex;flex-direction:column;justify-content:center;min-height:84px;text-align:center;user-select:none}.infinite-loading{margin-left:0;margin-right:0;margin-top:0;margin-bottom:32px;display:none;width:100%}.infinite-loading-text{-webkit-margin-start:32px;margin-inline-start:32px;-webkit-margin-end:32px;margin-inline-end:32px;margin-top:4px;margin-bottom:0}.infinite-scroll-loading ion-infinite-scroll-content>.infinite-loading{display:block}.infinite-scroll-content-md .infinite-loading-text{color:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-lines-small-md line,.infinite-scroll-content-md .infinite-loading-spinner .spinner-crescent circle{stroke:var(--ion-color-step-600, #666666)}.infinite-scroll-content-md .infinite-loading-spinner .spinner-bubbles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-circles circle,.infinite-scroll-content-md .infinite-loading-spinner .spinner-dots circle{fill:var(--ion-color-step-600, #666666)}";
+
+const InfiniteScrollContent = /*@__PURE__*/ proxyCustomElement(class InfiniteScrollContent extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    this.loadingSpinner = undefined;
+    this.loadingText = undefined;
+  }
+  componentDidLoad() {
+    if (this.loadingSpinner === undefined) {
+      const mode = getIonMode(this);
+      this.loadingSpinner = config.get('infiniteLoadingSpinner', config.get('spinner', mode === 'ios' ? 'lines' : 'crescent'));
+    }
+  }
+  renderLoadingText() {
+    const { customHTMLEnabled, loadingText } = this;
+    if (customHTMLEnabled) {
+      return h("div", { class: "infinite-loading-text", innerHTML: sanitizeDOMString(loadingText) });
+    }
+    return h("div", { class: "infinite-loading-text" }, this.loadingText);
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { key: '2f4afb07bcfe3e12528eb9cee8646a097e0b359f', class: {
+        [mode]: true,
+        // Used internally for styling
+        [`infinite-scroll-content-${mode}`]: true,
+      } }, h("div", { key: 'af038177bf10c88c8970682487a4328689aaa5f2', class: "infinite-loading" }, this.loadingSpinner && (h("div", { key: '1da5d419bc6a978b6a509fdab47dae347fc8d221', class: "infinite-loading-spinner" }, h("ion-spinner", { key: '60cc5c64e0a317ac0005d5afe42c4bb8da58136f', name: this.loadingSpinner }))), this.loadingText !== undefined && this.renderLoadingText())));
+  }
+  static get style() { return {
+    ios: infiniteScrollContentIosCss,
+    md: infiniteScrollContentMdCss
+  }; }
+}, [32, "ion-infinite-scroll-content", {
+    "loadingSpinner": [1025, "loading-spinner"],
+    "loadingText": [1, "loading-text"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-infinite-scroll-content", "ion-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-infinite-scroll-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, InfiniteScrollContent);
+      }
+      break;
+    case "ion-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IonInfiniteScrollContent = InfiniteScrollContent;
+const defineCustomElement = defineCustomElement$1;
+
+export { IonInfiniteScrollContent, defineCustomElement };