@ionic/core 8.7.17-dev.11772118942.181221d4 → 8.7.17-dev.11772568074.1d7a4aea

package/components/hardware-back-button.js

@@ -1,115 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { w as win } from './index9.js';
-import { c as config, a as printIonError } from './index4.js';
-
-/**
- * CloseWatcher is a newer API that lets
- * use detect the hardware back button event
- * in a web browser: https://caniuse.com/?search=closewatcher
- * However, not every browser supports it yet.
- *
- * This needs to be a function so that we can
- * check the config once it has been set.
- * Otherwise, this code would be evaluated the
- * moment this file is evaluated which could be
- * before the config is set.
- */
-const shouldUseCloseWatcher = () => config.get('experimentalCloseWatcher', false) && win !== undefined && 'CloseWatcher' in win;
-/**
- * When hardwareBackButton: false in config,
- * we need to make sure we also block the default
- * webview behavior. If we don't then it will be
- * possible for users to navigate backward while
- * an overlay is still open. Additionally, it will
- * give the appearance that the hardwareBackButton
- * config is not working as the page transition
- * will still happen.
- */
-const blockHardwareBackButton = () => {
-    document.addEventListener('backbutton', () => { }); // eslint-disable-line
-};
-const startHardwareBackButton = () => {
-    const doc = document;
-    let busy = false;
-    const backButtonCallback = () => {
-        if (busy) {
-            return;
-        }
-        let index = 0;
-        let handlers = [];
-        const ev = new CustomEvent('ionBackButton', {
-            bubbles: false,
-            detail: {
-                register(priority, handler) {
-                    handlers.push({ priority, handler, id: index++ });
-                },
-            },
-        });
-        doc.dispatchEvent(ev);
-        const executeAction = async (handlerRegister) => {
-            try {
-                if (handlerRegister === null || handlerRegister === void 0 ? void 0 : handlerRegister.handler) {
-                    const result = handlerRegister.handler(processHandlers);
-                    if (result != null) {
-                        await result;
-                    }
-                }
-            }
-            catch (e) {
-                printIonError('[ion-app] - Exception in startHardwareBackButton:', e);
-            }
-        };
-        const processHandlers = () => {
-            if (handlers.length > 0) {
-                let selectedHandler = {
-                    priority: Number.MIN_SAFE_INTEGER,
-                    handler: () => undefined,
-                    id: -1,
-                };
-                handlers.forEach((handler) => {
-                    if (handler.priority >= selectedHandler.priority) {
-                        selectedHandler = handler;
-                    }
-                });
-                busy = true;
-                handlers = handlers.filter((handler) => handler.id !== selectedHandler.id);
-                executeAction(selectedHandler).then(() => (busy = false));
-            }
-        };
-        processHandlers();
-    };
-    /**
-     * If the CloseWatcher is defined then
-     * we don't want to also listen for the native
-     * backbutton event otherwise we may get duplicate
-     * events firing.
-     */
-    if (shouldUseCloseWatcher()) {
-        let watcher;
-        const configureWatcher = () => {
-            watcher === null || watcher === void 0 ? void 0 : watcher.destroy();
-            watcher = new win.CloseWatcher();
-            /**
-             * Once a close request happens
-             * the watcher gets destroyed.
-             * As a result, we need to re-configure
-             * the watcher so we can respond to other
-             * close requests.
-             */
-            watcher.onclose = () => {
-                backButtonCallback();
-                configureWatcher();
-            };
-        };
-        configureWatcher();
-    }
-    else {
-        doc.addEventListener('backbutton', backButtonCallback);
-    }
-};
-const OVERLAY_BACK_BUTTON_PRIORITY = 100;
-const MENU_BACK_BUTTON_PRIORITY = 99; // 1 less than overlay priority since menu is displayed behind overlays
-
-export { MENU_BACK_BUTTON_PRIORITY, OVERLAY_BACK_BUTTON_PRIORITY, blockHardwareBackButton, shouldUseCloseWatcher, startHardwareBackButton };
+import{w as t}from"./index9.js";import{c as e,a as n}from"./index4.js";const o=()=>e.get("experimentalCloseWatcher",!1)&&void 0!==t&&"CloseWatcher"in t,i=()=>{document.addEventListener("backbutton",(()=>{}))},r=()=>{const e=document;let i=!1;const r=()=>{if(i)return;let t=0,o=[];const r=new CustomEvent("ionBackButton",{bubbles:!1,detail:{register(e,n){o.push({priority:e,handler:n,id:t++})}}});e.dispatchEvent(r);const a=()=>{if(o.length>0){let t={priority:Number.MIN_SAFE_INTEGER,handler:()=>{},id:-1};o.forEach((e=>{e.priority>=t.priority&&(t=e)})),i=!0,o=o.filter((e=>e.id!==t.id)),(async t=>{try{if(null==t?void 0:t.handler){const e=t.handler(a);null!=e&&await e}}catch(t){n("[ion-app] - Exception in startHardwareBackButton:",t)}})(t).then((()=>i=!1))}};a()};if(o()){let e;const n=()=>{null==e||e.destroy(),e=new t.CloseWatcher,e.onclose=()=>{r(),n()}};n()}else e.addEventListener("backbutton",r)},a=100,c=99;export{c as MENU_BACK_BUTTON_PRIORITY,a as OVERLAY_BACK_BUTTON_PRIORITY,i as blockHardwareBackButton,o as shouldUseCloseWatcher,r as startHardwareBackButton}

package/components/header.js

@@ -1,420 +1,4 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-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 { f as clamp, i as inheritAriaAttributes } from './helpers.js';
-import { h as hostContext } from './theme.js';
-import { b as getIonMode } from './ionic-global.js';
-
-const TRANSITION = 'all 0.2s ease-in-out';
-const ROLE_NONE = 'none';
-const ROLE_BANNER = 'banner';
-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;
-    const toolbars = headerIndex.toolbars;
-    const ionTitles = toolbars.map((toolbar) => toolbar.ionTitleEl);
-    if (active) {
-        headerEl.setAttribute('role', ROLE_BANNER);
-        headerEl.classList.remove('header-collapse-condense-inactive');
-        ionTitles.forEach((ionTitle) => {
-            if (ionTitle) {
-                ionTitle.removeAttribute('aria-hidden');
-            }
-        });
-    }
-    else {
-        /**
-         * There can only be one banner landmark per page.
-         * By default, all ion-headers have the banner role.
-         * This causes an accessibility issue when using a
-         * condensed header since there are two ion-headers
-         * on the page at once (active and inactive).
-         * To solve this, the role needs to be toggled
-         * based on which header is active.
-         */
-        headerEl.setAttribute('role', ROLE_NONE);
-        headerEl.classList.add('header-collapse-condense-inactive');
-        /**
-         * The small title should only be accessed by screen readers
-         * when the large title collapses into the small title due
-         * to scrolling.
-         *
-         * Originally, the header was given `aria-hidden="true"`
-         * but this caused issues with screen readers not being
-         * able to access any focusable elements within the header.
-         */
-        ionTitles.forEach((ionTitle) => {
-            if (ionTitle) {
-                ionTitle.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());
-        });
-    });
-};
-/**
- * Get the role type for the ion-header.
- *
- * @param isInsideMenu If ion-header is inside ion-menu.
- * @param isCondensed If ion-header has collapse="condense".
- * @param mode The current mode.
- * @returns 'none' if inside ion-menu or if condensed in md
- * mode, otherwise 'banner'.
- */
-const getRoleType = (isInsideMenu, isCondensed, mode) => {
-    // If the header is inside a menu, it should not have the banner role.
-    if (isInsideMenu) {
-        return ROLE_NONE;
-    }
-    /**
-     * Only apply role="none" to `md` mode condensed headers
-     * since the large header is never shown.
-     */
-    if (isCondensed && mode === 'md') {
-        return ROLE_NONE;
-    }
-    // Default to banner role.
-    return ROLE_BANNER;
-};
-
-const headerIosCss = "ion-header{display:block;position:relative;-ms-flex-order:-1;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 ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);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-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{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{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.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;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-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);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-md.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}";
-
-const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.inheritedAttributes = {};
-        /**
-         * If `true`, the header will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         *
-         * Note: In order to scroll content behind the header, the `fullscreen`
-         * attribute needs to be set on the content.
-         */
-        this.translucent = false;
-        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);
-        };
-    }
-    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';
-        const isCondensed = collapse === 'condense';
-        // banner role must be at top level, so remove role if inside a menu
-        const roleType = getRoleType(hostContext('ion-menu', this.el), isCondensed, mode);
-        return (h(Host, Object.assign({ key: '863c4568cd7b8c0ec55109f193bbbaed68a1346e', 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: '25c3bdce328b0b35607d154c8b8374679313d881', class: "header-background" }), h("slot", { key: 'b44fab0a9be7920b9650da26117c783e751e1702' })));
-    }
-    get el() { return this; }
-    static get style() { return {
-        ios: headerIosCss,
-        md: headerMdCss
-    }; }
-}, [292, "ion-header", {
-        "collapse": [1],
-        "translucent": [4]
-    }]);
-function defineCustomElement() {
-    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;
-    } });
-}
-
-export { Header as H, defineCustomElement as d };
+import{readTask as e,writeTask as o,proxyCustomElement as n,HTMLElement as t,h as i,Host as a,transformTag as s}from"@stencil/core/internal/client";import{g as r,f as l,p as d}from"./index8.js";import{f as c,i as h}from"./helpers.js";import{h as p}from"./theme.js";import{b}from"./ionic-global.js";const u="none",f="banner",m=e=>{const o=document.querySelector(`${e}.ion-cloned-element`);if(null!==o)return o;const n=document.createElement(e);return n.classList.add("ion-cloned-element"),n.style.setProperty("display","none"),document.body.appendChild(n),n},x=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"))}}))}},y=(e,o)=>{"fade"!==e.collapse&&(void 0===o?e.style.removeProperty("--opacity-scale"):e.style.setProperty("--opacity-scale",o.toString()))},g=(e,o=!0)=>{const n=e.el,t=e.toolbars.map((e=>e.ionTitleEl));o?(n.setAttribute("role",f),n.classList.remove("header-collapse-condense-inactive"),t.forEach((e=>{e&&e.removeAttribute("aria-hidden")}))):(n.setAttribute("role",u),n.classList.add("header-collapse-condense-inactive"),t.forEach((e=>{e&&e.setAttribute("aria-hidden","true")})))},k=(n,t,i)=>{e((()=>{const e=n.scrollTop,a=t.clientHeight,s=i?i.clientHeight:0;if(null!==i&&e<s)return t.style.setProperty("--opacity-scale","0"),void n.style.setProperty("clip-path",`inset(${a}px 0px 0px 0px)`);const r=c(0,(e-s)/10,1);o((()=>{n.style.removeProperty("clip-path"),t.style.setProperty("--opacity-scale",r.toString())}))}))},v=n(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.inheritedAttributes={},this.translucent=!1,this.setupFadeHeader=async(e,o)=>{const n=this.scrollEl=await r(e);this.contentScrollCallback=()=>{k(this.scrollEl,this.el,o)},n.addEventListener("scroll",this.contentScrollCallback),k(this.scrollEl,this.el,o)}}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,n="condense"===e,t="fade"===e;if(this.destroyCollapsibleHeader(),n){const e=this.el.closest("ion-app,ion-page,.ion-page,page-inner"),n=e?l(e):null;o((()=>{m("ion-title").size="large",m("ion-back-button")})),await this.setupCondenseHeader(n,e)}else if(t){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 n=o.querySelector('ion-header[collapse="condense"]');await this.setupFadeHeader(o,n)}}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(n,t){if(!n||!t)return void d(this.el);if("undefined"==typeof IntersectionObserver)return;this.scrollEl=await r(n);const i=t.querySelectorAll("ion-header");if(this.collapsibleMainHeader=Array.from(i).find((e=>"condense"!==e.collapse)),!this.collapsibleMainHeader)return;const a=x(this.collapsibleMainHeader),s=x(this.el);a&&s&&(g(a,!1),y(a.el,0),this.intersectionObserver=new IntersectionObserver((e=>{((e,n,t,i)=>{o((()=>{const o=i.scrollTop;((e,o,n)=>{if(!e[0].isIntersecting)return;const t=e[0].intersectionRatio>.9||n<=0?0:100*(1-e[0].intersectionRatio)/75;y(o.el,1===t?void 0:t)})(e,n,o);const a=e[0],s=a.intersectionRect,r=s.width*s.height,l=0===r&&0==a.rootBounds.width*a.rootBounds.height,d=Math.abs(s.left-a.boundingClientRect.left),c=Math.abs(s.right-a.boundingClientRect.right);l||r>0&&(d>=5||c>=5)||(a.isIntersecting?(g(n,!1),g(t)):(0===s.x&&0===s.y||0!==s.width&&0!==s.height)&&o>0&&(g(n),g(t,!1),y(n.el)))}))})(e,a,s,this.scrollEl)}),{root:n,threshold:[.25,.3,.4,.5,.6,.7,.8,.9,1]}),this.intersectionObserver.observe(s.toolbars[s.toolbars.length-1].el),this.contentScrollCallback=()=>{((n,t,i)=>{e((()=>{const e=c(1,1+-n.scrollTop/500,1.1);null===i.querySelector("ion-refresher.refresher-native")&&o((()=>{((e=[],o=1,n=!1)=>{e.forEach((e=>{const t=e.ionTitleEl,i=e.innerTitleEl;t&&"large"===t.size&&(i.style.transition=n?"all 0.2s ease-in-out":"",i.style.transform=`scale3d(${o}, ${o}, 1)`)}))})(t.toolbars,e)}))}))})(this.scrollEl,s,n)},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,n=b(this),t=this.collapse||"none",s="condense"===t,r=((e,o,n)=>e||o&&"md"===n?u:f)(p("ion-menu",this.el),s,n);return i(a,Object.assign({key:"863c4568cd7b8c0ec55109f193bbbaed68a1346e",role:r,class:{[n]:!0,[`header-${n}`]:!0,"header-translucent":this.translucent,[`header-collapse-${t}`]:!0,[`header-translucent-${n}`]:this.translucent}},o),"ios"===n&&e&&i("div",{key:"25c3bdce328b0b35607d154c8b8374679313d881",class:"header-background"}),i("slot",{key:"b44fab0a9be7920b9650da26117c783e751e1702"}))}get el(){return this}static get style(){return{ios:"ion-header{display:block;position:relative;-ms-flex-order:-1;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 ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.header-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.header-translucent-ios ion-toolbar{--opacity:.8}.header-collapse-condense-inactive .header-background{-webkit-backdrop-filter:blur(20px);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-fade.header-transitioning ion-toolbar{--background:transparent;--border-style:none}.header-collapse-condense{z-index:9}.header-collapse-condense ion-toolbar{position:-webkit-sticky;position:sticky;top:0}.header-collapse-condense ion-toolbar:first-of-type{padding-top:0px;z-index:1}.header-collapse-condense ion-toolbar{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{-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}.header-collapse-condense ion-toolbar,.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--background:var(--ion-background-color, #fff)}.header-collapse-condense-inactive.header-transitioning:not(.header-collapse-condense) ion-toolbar{--border-style:none;--opacity-scale:1}.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;-ms-flex-order:-1;order:-1;width:100%;z-index:10}ion-header ion-toolbar:first-of-type{padding-top:var(--ion-safe-area-top, 0)}.header-md{-webkit-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);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-md.header-collapse-condense{display:none}.header-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}"}}},[292,"ion-header",{collapse:[1],translucent:[4]}]);function w(){"undefined"!=typeof customElements&&["ion-header"].forEach((e=>{"ion-header"===e&&(customElements.get(s(e))||customElements.define(s(e),v))}))}export{v as H,w as d}