@pod-os/elements 0.17.1-fef97c9.0 → 0.18.1-a971174.0

package/dist/components/ion-footer.js

@@ -1,4 +1,153 @@
-import { F as Footer, d as defineCustomElement$1 } from './footer.js';
+import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { f as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index8.js';
+import { c as createKeyboardController } from './keyboard-controller.js';
+import { g as getIonMode } from './ionic-global.js';
+import { m as clamp } from './helpers.js';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const handleFooterFade = (scrollEl, baseEl) => {
+    readTask(() => {
+        const scrollTop = scrollEl.scrollTop;
+        const maxScroll = scrollEl.scrollHeight - scrollEl.clientHeight;
+        /**
+         * Toolbar background will fade
+         * out over fadeDuration in pixels.
+         */
+        const fadeDuration = 10;
+        /**
+         * Begin fading out maxScroll - 30px
+         * from the bottom of the content.
+         * Also determine how close we are
+         * to starting the fade. If we are
+         * before the starting point, the
+         * scale value will get clamped to 0.
+         * If we are after the maxScroll (rubber
+         * band scrolling), the scale value will
+         * get clamped to 1.
+         */
+        const fadeStart = maxScroll - fadeDuration;
+        const distanceToStart = scrollTop - fadeStart;
+        const scale = clamp(0, 1 - distanceToStart / fadeDuration, 1);
+        writeTask(() => {
+            baseEl.style.setProperty('--opacity-scale', scale.toString());
+        });
+    });
+};
+
+const footerIosCss = "ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-ios ion-toolbar:first-of-type{--border-width:0.55px 0 0}@supports (backdrop-filter: blur(0)){.footer-background{left:0;right:0;top:0;bottom:0;position:absolute;backdrop-filter:saturate(180%) blur(20px)}.footer-translucent-ios ion-toolbar{--opacity:.8}}.footer-ios.ion-no-border ion-toolbar:first-of-type{--border-width:0}.footer-collapse-fade ion-toolbar{--opacity-scale:inherit}";
+const IonFooterIosStyle0 = footerIosCss;
+
+const footerMdCss = "ion-footer{display:block;position:relative;order:1;width:100%;z-index:10}ion-footer.footer-toolbar-padding ion-toolbar:last-of-type{padding-bottom:var(--ion-safe-area-bottom, 0)}.footer-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)}.footer-md.ion-no-border{box-shadow:none}";
+const IonFooterMdStyle0 = footerMdCss;
+
+const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.keyboardCtrl = null;
+        this.checkCollapsibleFooter = () => {
+            const mode = getIonMode(this);
+            if (mode !== 'ios') {
+                return;
+            }
+            const { collapse } = this;
+            const hasFade = collapse === 'fade';
+            this.destroyCollapsibleFooter();
+            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;
+                }
+                this.setupFadeFooter(contentEl);
+            }
+        };
+        this.setupFadeFooter = async (contentEl) => {
+            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+            /**
+             * Handle fading of toolbars on scroll
+             */
+            this.contentScrollCallback = () => {
+                handleFooterFade(scrollEl, this.el);
+            };
+            scrollEl.addEventListener('scroll', this.contentScrollCallback);
+            handleFooterFade(scrollEl, this.el);
+        };
+        this.keyboardVisible = false;
+        this.collapse = undefined;
+        this.translucent = false;
+    }
+    componentDidLoad() {
+        this.checkCollapsibleFooter();
+    }
+    componentDidUpdate() {
+        this.checkCollapsibleFooter();
+    }
+    async connectedCallback() {
+        this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+            /**
+             * If the keyboard is hiding, then we need to wait
+             * for the webview to resize. Otherwise, the footer
+             * will flicker before the webview resizes.
+             */
+            if (keyboardOpen === false && waitForResize !== undefined) {
+                await waitForResize;
+            }
+            this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
+        });
+    }
+    disconnectedCallback() {
+        if (this.keyboardCtrl) {
+            this.keyboardCtrl.destroy();
+        }
+    }
+    destroyCollapsibleFooter() {
+        if (this.scrollEl && this.contentScrollCallback) {
+            this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);
+            this.contentScrollCallback = undefined;
+        }
+    }
+    render() {
+        const { translucent, collapse } = this;
+        const mode = getIonMode(this);
+        const tabs = this.el.closest('ion-tabs');
+        const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');
+        return (h(Host, { key: 'dd8fa96901e8a09759a9621b6513f0492b3a6197', role: "contentinfo", class: {
+                [mode]: true,
+                // Used internally for styling
+                [`footer-${mode}`]: true,
+                [`footer-translucent`]: translucent,
+                [`footer-translucent-${mode}`]: translucent,
+                ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),
+                [`footer-collapse-${collapse}`]: collapse !== undefined,
+            } }, mode === 'ios' && translucent && h("div", { key: '0fbb4ebf8e3951ff399f843dc11aab37fc48f8b7', class: "footer-background" }), h("slot", { key: 'ecb14a65e3b6960670446c4428e3095b3231a3b0' })));
+    }
+    get el() { return this; }
+    static get style() { return {
+        ios: IonFooterIosStyle0,
+        md: IonFooterMdStyle0
+    }; }
+}, [36, "ion-footer", {
+        "collapse": [1],
+        "translucent": [4],
+        "keyboardVisible": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ion-footer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ion-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Footer);
+            }
+            break;
+    } });
+}
 
 const IonFooter = Footer;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ion-footer.js.map

@@ -1 +1 @@
-{"file":"ion-footer.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"ion-footer.js","mappings":"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","names":[],"sources":["../node_modules/@ionic/core/dist/collection/components/footer/footer.utils.js","../node_modules/@ionic/core/dist/collection/components/footer/footer.ios.css?tag=ion-footer&mode=ios","../node_modules/@ionic/core/dist/collection/components/footer/footer.md.css?tag=ion-footer&mode=md","../node_modules/@ionic/core/dist/collection/components/footer/footer.js"],"sourcesContent":["/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { readTask, writeTask } from \"@stencil/core\";\nimport { clamp } from \"../../utils/helpers\";\nexport const handleFooterFade = (scrollEl, baseEl) => {\n    readTask(() => {\n        const scrollTop = scrollEl.scrollTop;\n        const maxScroll = scrollEl.scrollHeight - scrollEl.clientHeight;\n        /**\n         * Toolbar background will fade\n         * out over fadeDuration in pixels.\n         */\n        const fadeDuration = 10;\n        /**\n         * Begin fading out maxScroll - 30px\n         * from the bottom of the content.\n         * Also determine how close we are\n         * to starting the fade. If we are\n         * before the starting point, the\n         * scale value will get clamped to 0.\n         * If we are after the maxScroll (rubber\n         * band scrolling), the scale value will\n         * get clamped to 1.\n         */\n        const fadeStart = maxScroll - fadeDuration;\n        const distanceToStart = scrollTop - fadeStart;\n        const scale = clamp(0, 1 - distanceToStart / fadeDuration, 1);\n        writeTask(() => {\n            baseEl.style.setProperty('--opacity-scale', scale.toString());\n        });\n    });\n};\n","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\nion-footer {\n  display: block;\n  position: relative;\n  order: 1;\n  width: 100%;\n  z-index: 10;\n}\n\nion-footer.footer-toolbar-padding ion-toolbar:last-of-type {\n  padding-bottom: var(--ion-safe-area-bottom, 0);\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n.footer-ios ion-toolbar:first-of-type {\n  --border-width: 0.55px 0 0;\n}\n\n@supports (backdrop-filter: blur(0)) {\n  .footer-background {\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    position: absolute;\n    backdrop-filter: saturate(180%) blur(20px);\n  }\n  .footer-translucent-ios ion-toolbar {\n    --opacity: .8;\n  }\n}\n.footer-ios.ion-no-border ion-toolbar:first-of-type {\n  --border-width: 0;\n}\n\n.footer-collapse-fade ion-toolbar {\n  --opacity-scale: inherit;\n}","/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\nion-footer {\n  display: block;\n  position: relative;\n  order: 1;\n  width: 100%;\n  z-index: 10;\n}\n\nion-footer.footer-toolbar-padding ion-toolbar:last-of-type {\n  padding-bottom: var(--ion-safe-area-bottom, 0);\n}\n\n/**\n * Convert a font size to a dynamic font size.\n * Fonts that participate in Dynamic Type should use\n * dynamic font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param unit (optional) - The unit to convert to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a maximum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * a minimum font size.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * Convert a font size to a dynamic font size but impose\n * maximum and minimum font sizes.\n * @param size - The initial font size including the unit (i.e. px or pt)\n * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).\n * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).\n * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to\n * convert to a unit other than $baselineUnit.\n */\n/**\n * A heuristic that applies CSS to tablet\n * viewports.\n *\n * Usage:\n * @include tablet-viewport() {\n *   :host {\n *     background-color: green;\n *   }\n * }\n */\n/**\n * A heuristic that applies CSS to mobile\n * viewports (i.e. phones, not tablets).\n *\n * Usage:\n * @include mobile-viewport() {\n *   :host {\n *     background-color: blue;\n *   }\n * }\n */\n.footer-md {\n  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);\n}\n\n.footer-md.ion-no-border {\n  box-shadow: none;\n}","/*!\n * (C) Ionic http://ionicframework.com - MIT License\n */\nimport { Host, h } from \"@stencil/core\";\nimport { findIonContent, getScrollElement, printIonContentErrorMsg } from \"../../utils/content/index\";\nimport { createKeyboardController } from \"../../utils/keyboard/keyboard-controller\";\nimport { getIonMode } from \"../../global/ionic-global\";\nimport { handleFooterFade } from \"./footer.utils\";\n/**\n * @virtualProp {\"ios\" | \"md\"} mode - The mode determines which platform styles to use.\n */\nexport class Footer {\n    constructor() {\n        this.keyboardCtrl = null;\n        this.checkCollapsibleFooter = () => {\n            const mode = getIonMode(this);\n            if (mode !== 'ios') {\n                return;\n            }\n            const { collapse } = this;\n            const hasFade = collapse === 'fade';\n            this.destroyCollapsibleFooter();\n            if (hasFade) {\n                const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');\n                const contentEl = pageEl ? findIonContent(pageEl) : null;\n                if (!contentEl) {\n                    printIonContentErrorMsg(this.el);\n                    return;\n                }\n                this.setupFadeFooter(contentEl);\n            }\n        };\n        this.setupFadeFooter = async (contentEl) => {\n            const scrollEl = (this.scrollEl = await getScrollElement(contentEl));\n            /**\n             * Handle fading of toolbars on scroll\n             */\n            this.contentScrollCallback = () => {\n                handleFooterFade(scrollEl, this.el);\n            };\n            scrollEl.addEventListener('scroll', this.contentScrollCallback);\n            handleFooterFade(scrollEl, this.el);\n        };\n        this.keyboardVisible = false;\n        this.collapse = undefined;\n        this.translucent = false;\n    }\n    componentDidLoad() {\n        this.checkCollapsibleFooter();\n    }\n    componentDidUpdate() {\n        this.checkCollapsibleFooter();\n    }\n    async connectedCallback() {\n        this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {\n            /**\n             * If the keyboard is hiding, then we need to wait\n             * for the webview to resize. Otherwise, the footer\n             * will flicker before the webview resizes.\n             */\n            if (keyboardOpen === false && waitForResize !== undefined) {\n                await waitForResize;\n            }\n            this.keyboardVisible = keyboardOpen; // trigger re-render by updating state\n        });\n    }\n    disconnectedCallback() {\n        if (this.keyboardCtrl) {\n            this.keyboardCtrl.destroy();\n        }\n    }\n    destroyCollapsibleFooter() {\n        if (this.scrollEl && this.contentScrollCallback) {\n            this.scrollEl.removeEventListener('scroll', this.contentScrollCallback);\n            this.contentScrollCallback = undefined;\n        }\n    }\n    render() {\n        const { translucent, collapse } = this;\n        const mode = getIonMode(this);\n        const tabs = this.el.closest('ion-tabs');\n        const tabBar = tabs === null || tabs === void 0 ? void 0 : tabs.querySelector(':scope > ion-tab-bar');\n        return (h(Host, { key: 'dd8fa96901e8a09759a9621b6513f0492b3a6197', role: \"contentinfo\", class: {\n                [mode]: true,\n                // Used internally for styling\n                [`footer-${mode}`]: true,\n                [`footer-translucent`]: translucent,\n                [`footer-translucent-${mode}`]: translucent,\n                ['footer-toolbar-padding']: !this.keyboardVisible && (!tabBar || tabBar.slot !== 'bottom'),\n                [`footer-collapse-${collapse}`]: collapse !== undefined,\n            } }, mode === 'ios' && translucent && h(\"div\", { key: '0fbb4ebf8e3951ff399f843dc11aab37fc48f8b7', class: \"footer-background\" }), h(\"slot\", { key: 'ecb14a65e3b6960670446c4428e3095b3231a3b0' })));\n    }\n    static get is() { return \"ion-footer\"; }\n    static get originalStyleUrls() {\n        return {\n            \"ios\": [\"footer.ios.scss\"],\n            \"md\": [\"footer.md.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"ios\": [\"footer.ios.css\"],\n            \"md\": [\"footer.md.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"collapse\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"'fade'\",\n                    \"resolved\": \"\\\"fade\\\" | undefined\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"Describes the scroll effect that will be applied to the footer.\\nOnly applies in iOS mode.\"\n                },\n                \"attribute\": \"collapse\",\n                \"reflect\": false\n            },\n            \"translucent\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": false,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the footer will be translucent.\\nOnly applies when the mode is `\\\"ios\\\"` and the device supports\\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\\n\\nNote: In order to scroll content behind the footer, the `fullscreen`\\nattribute needs to be set on the content.\"\n                },\n                \"attribute\": \"translucent\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"keyboardVisible\": {}\n        };\n    }\n    static get elementRef() { return \"el\"; }\n}\n"],"version":3}

package/dist/components/ion-header.js

@@ -1,4 +1,357 @@
-import { H as Header, d as defineCustomElement$1 } from './header.js';
+import { readTask, writeTask, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getScrollElement, f as findIonContent, p as printIonContentErrorMsg } from './index8.js';
+import { m as clamp, i as inheritAriaAttributes } from './helpers.js';
+import { h as hostContext } from './theme.js';
+import { g as getIonMode } from './ionic-global.js';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+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 IonHeaderIosStyle0 = headerIosCss;
+
+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 IonHeaderMdStyle0 = headerMdCss;
+
+const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
+    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(() => {
+                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(() => {
+            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: IonHeaderIosStyle0,
+        md: IonHeaderMdStyle0
+    }; }
+}, [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;