@ionic/core/components/p-CKiqp4Vl.js

Base components for Ionic

/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import{k as e,w as o,d as t,H as n,h as a,f as i,t as s}from"./p-Ct2aBEue.js";import{g as r,f as l,p as d}from"./p-V1THdfzs.js";import{e as c,i as p}from"./p-B4IBdPVJ.js";import{h}from"./p-byZM6qHV.js";import{b}from"./p-HthJZjZ6.js";const u="none",f="banner",m=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},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 t=e.el,n=e.toolbars.map((e=>e.ionTitleEl));o?(t.setAttribute("role",f),t.classList.remove("header-collapse-condense-inactive"),n.forEach((e=>{e&&e.removeAttribute("aria-hidden")}))):(t.setAttribute("role",u),t.classList.add("header-collapse-condense-inactive"),n.forEach((e=>{e&&e.setAttribute("aria-hidden","true")})))},k=(t,n,a)=>{e((()=>{const e=t.scrollTop,i=n.clientHeight,s=a?a.clientHeight:0;if(null!==a&&e<s)return n.style.setProperty("--opacity-scale","0"),void t.style.setProperty("clip-path",`inset(${i}px 0px 0px 0px)`);const r=c(0,(e-s)/10,1);o((()=>{t.style.removeProperty("clip-path"),n.style.setProperty("--opacity-scale",r.toString())}))}))},v=t(class extends n{constructor(e){super(),!1!==e&&this.__registerHost(),this.inheritedAttributes={},this.translucent=!1,this.setupFadeHeader=async(e,o)=>{const t=this.scrollEl=await r(e);this.contentScrollCallback=()=>{k(this.scrollEl,this.el,o)},t.addEventListener("scroll",this.contentScrollCallback),k(this.scrollEl,this.el,o)}}componentWillLoad(){this.inheritedAttributes=p(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((()=>{m("ion-title").size="large",m("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 a=n.querySelectorAll("ion-header");if(this.collapsibleMainHeader=Array.from(a).find((e=>"condense"!==e.collapse)),!this.collapsibleMainHeader)return;const i=x(this.collapsibleMainHeader),s=x(this.el);i&&s&&(g(i,!1),y(i.el,0),this.intersectionObserver=new IntersectionObserver((e=>{((e,t,n,a)=>{o((()=>{const o=a.scrollTop;((e,o,t)=>{if(!e[0].isIntersecting)return;const n=e[0].intersectionRatio>.9||t<=0?0:100*(1-e[0].intersectionRatio)/75;y(o.el,1===n?void 0:n)})(e,t,o);const i=e[0],s=i.intersectionRect,r=s.width*s.height,l=0===r&&0==i.rootBounds.width*i.rootBounds.height,d=Math.abs(s.left-i.boundingClientRect.left),c=Math.abs(s.right-i.boundingClientRect.right);l||r>0&&(d>=5||c>=5)||(i.isIntersecting?(g(t,!1),g(n)):(0===s.x&&0===s.y||0!==s.width&&0!==s.height)&&o>0&&(g(t),g(n,!1),y(t.el)))}))})(e,i,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,a)=>{e((()=>{const e=c(1,1+-t.scrollTop/500,1.1);null===a.querySelector("ion-refresher.refresher-native")&&o((()=>{((e=[],o=1,t=!1)=>{e.forEach((e=>{const n=e.ionTitleEl,a=e.innerTitleEl;n&&"large"===n.size&&(a.style.transition=t?"all 0.2s ease-in-out":"",a.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="condense"===n,r=((e,o,t)=>e||o&&"md"===t?u:f)(h("ion-menu",this.el),s,t);return a(i,{key:"863c4568cd7b8c0ec55109f193bbbaed68a1346e",role:r,class:{[t]:!0,[`header-${t}`]:!0,"header-translucent":this.translucent,[`header-collapse-${n}`]:!0,[`header-translucent-${t}`]:this.translucent},...o},"ios"===t&&e&&a("div",{key:"25c3bdce328b0b35607d154c8b8374679313d881",class:"header-background"}),a("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}