@ionic/core
Version:
Base components for Ionic
4 lines • 3.86 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import{k as o,w as t,d as s,H as i,h as e,f as r,t as a}from"./p-Ct2aBEue.js";import{f as n,p as l,g as p}from"./p-V1THdfzs.js";import{c as d}from"./p-BhamHSw3.js";import{b as c}from"./p-HthJZjZ6.js";import{e as f}from"./p-B4IBdPVJ.js";const b=(s,i)=>{o((()=>{const o=f(0,1-(s.scrollTop-(s.scrollHeight-s.clientHeight-10))/10,1);t((()=>{i.style.setProperty("--opacity-scale",""+o)}))}))},h=s(class extends i{constructor(o){super(),!1!==o&&this.__registerHost(),this.keyboardCtrl=null,this.keyboardCtrlPromise=null,this.keyboardVisible=!1,this.translucent=!1,this.checkCollapsibleFooter=()=>{if("ios"!==c(this))return;const{collapse:o}=this,t="fade"===o;if(this.destroyCollapsibleFooter(),t){const o=this.el.closest("ion-app,ion-page,.ion-page,page-inner"),t=o?n(o):null;if(!t)return void l(this.el);this.setupFadeFooter(t)}},this.setupFadeFooter=async o=>{const t=this.scrollEl=await p(o);this.contentScrollCallback=()=>{b(t,this.el)},t.addEventListener("scroll",this.contentScrollCallback),b(t,this.el)}}componentDidLoad(){this.checkCollapsibleFooter()}componentDidUpdate(){this.checkCollapsibleFooter()}async connectedCallback(){const o=d((async(o,t)=>{!1===o&&void 0!==t&&await t,this.keyboardVisible=o}));this.keyboardCtrlPromise=o;const t=await o;this.keyboardCtrlPromise===o?(this.keyboardCtrl=t,this.keyboardCtrlPromise=null):t.destroy()}disconnectedCallback(){this.keyboardCtrlPromise&&(this.keyboardCtrlPromise.then((o=>o.destroy())),this.keyboardCtrlPromise=null),this.keyboardCtrl&&(this.keyboardCtrl.destroy(),this.keyboardCtrl=null)}destroyCollapsibleFooter(){this.scrollEl&&this.contentScrollCallback&&(this.scrollEl.removeEventListener("scroll",this.contentScrollCallback),this.contentScrollCallback=void 0)}render(){const{translucent:o,collapse:t}=this,s=c(this),i=this.el.closest("ion-tabs"),a=i?.querySelector(":scope > ion-tab-bar");return e(r,{key:"71939c4bbaef5062532a99ee2e33574102a9abad",role:"contentinfo",class:{[s]:!0,["footer-"+s]:!0,"footer-translucent":o,["footer-translucent-"+s]:o,"footer-toolbar-padding":!(this.keyboardVisible||a&&"bottom"===a.slot),["footer-collapse-"+t]:void 0!==t}},"ios"===s&&o&&e("div",{key:"2fa14f61661c47c661cecd696176728d6eafa74f",class:"footer-background"}),e("slot",{key:"8e63696e7c528d5c38201e546bf08135290d0945"}))}get el(){return this}static get style(){return{ios:"ion-footer{display:block;position:relative;-ms-flex-order:1;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 ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){.footer-background{left:0;right:0;top:0;bottom:0;position:absolute;-webkit-backdrop-filter:saturate(180%) blur(20px);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}",md:"ion-footer{display:block;position:relative;-ms-flex-order:1;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{-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)}.footer-md.ion-no-border{-webkit-box-shadow:none;box-shadow:none}"}}},[292,"ion-footer",{collapse:[1],translucent:[4],keyboardVisible:[32]}]),u=h,m=function(){"undefined"!=typeof customElements&&["ion-footer"].forEach((o=>{"ion-footer"===o&&(customElements.get(a(o))||customElements.define(a(o),h))}))};export{u as IonFooter,m as defineCustomElement}