@ionic/core
Version:
Base components for Ionic
4 lines • 10.6 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import{c as t}from"./p-c7e16491.js";import{g as o}from"./p-64d8ac48.js";import"./p-7b30edcc.js";import"./p-597ff9af.js";import"./p-66a5d6a8.js";import"./p-3f4327f7.js";import"./p-ece78e7b.js";const n=t=>document.querySelector(`${t}.ion-cloned-element`),a=t=>t.shadowRoot||t,s=t=>{const o="ION-TABS"===t.tagName?t:t.querySelector("ion-tabs"),n="ion-content ion-header:not(.header-collapse-condense-inactive) ion-title.title-large";if(null!=o){const t=o.querySelector("ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)");return null!=t?t.querySelector(n):null}return t.querySelector(n)},e=(t,o)=>{const n="ION-TABS"===t.tagName?t:t.querySelector("ion-tabs");let a=[];if(null!=n){const t=n.querySelector("ion-tab:not(.tab-hidden), .ion-page:not(.ion-page-hidden)");null!=t&&(a=t.querySelectorAll("ion-buttons"))}else a=t.querySelectorAll("ion-buttons");for(const t of a){const n=t.closest("ion-header"),a=n&&!n.classList.contains("header-collapse-condense-inactive"),s=t.querySelector("ion-back-button"),e=t.classList.contains("buttons-collapse");if(null!==s&&("start"===t.slot||""===t.slot)&&(e&&a&&o||!e))return s}return null},r=(o,s,e,r,i,l,f,p,d)=>{var $,u;const m=s?`calc(100% - ${i.right+4}px)`:i.left-4+"px",b=s?"right":"left",y=s?"left":"right",X=s?"right":"left";let x=1,v=1,h=`scale(${v})`;const g="scale(1)";if(l&&f){const t=(null===($=l.textContent)||void 0===$?void 0:$.trim())===(null===(u=p.textContent)||void 0===u?void 0:u.trim());x=d.width/f.width,v=(d.height-c)/f.height,h=t?`scale(${x}, ${v})`:`scale(${v})`}const w=a(r).querySelector("ion-icon").getBoundingClientRect(),k=s?w.width/2-(w.right-i.right)+"px":i.left-w.width/2+"px",j=s?`-${window.innerWidth-i.right}px`:`${i.left}px`,T=`${d.top}px`,A=`${i.top}px`,B=e?[{offset:0,transform:`translate3d(${j}, ${A}, 0)`},{offset:1,transform:`translate3d(${k}, ${T}, 0)`}]:[{offset:0,transform:`translate3d(${k}, ${T}, 0)`},{offset:1,transform:`translate3d(${j}, ${A}, 0)`}],I=e?[{offset:0,opacity:1,transform:g},{offset:1,opacity:0,transform:h}]:[{offset:0,opacity:0,transform:h},{offset:1,opacity:1,transform:g}],N=e?[{offset:0,opacity:1,transform:"scale(1)"},{offset:.2,opacity:0,transform:"scale(0.6)"},{offset:1,opacity:0,transform:"scale(0.6)"}]:[{offset:0,opacity:0,transform:"scale(0.6)"},{offset:.6,opacity:0,transform:"scale(0.6)"},{offset:1,opacity:1,transform:"scale(1)"}],O=t(),S=t(),z=t(),q=n("ion-back-button"),C=a(q).querySelector(".button-text"),D=a(q).querySelector("ion-icon");q.text=r.text,q.mode=r.mode,q.icon=r.icon,q.color=r.color,q.disabled=r.disabled,q.style.setProperty("display","block"),q.style.setProperty("position","fixed"),S.addElement(D),O.addElement(C),z.addElement(q),z.beforeStyles({position:"absolute",top:"0px",[X]:"0px"}).beforeAddWrite((()=>{r.style.setProperty("display","none"),q.style.setProperty(b,m)})).afterAddWrite((()=>{r.style.setProperty("display",""),q.style.setProperty("display","none"),q.style.removeProperty(b)})).keyframes(B),O.beforeStyles({"transform-origin":`${b} top`}).keyframes(I),S.beforeStyles({"transform-origin":`${y} center`}).keyframes(N),o.addAnimation([O,S,z])},i=(o,a,s,e,r,i,l,f,p)=>{var d,$;const u=a?"right":"left",m=a?`calc(100% - ${r.right}px)`:`${r.left}px`,b=`${r.top}px`;let y=a?`-${window.innerWidth-l.right-8}px`:`${l.x+8}px`,X=.5;const x="scale(1)";let v=`scale(${X})`;if(f&&p){y=a?`-${window.innerWidth-p.right-8}px`:p.x-8+"px";const t=(null===(d=f.textContent)||void 0===d?void 0:d.trim())===(null===($=e.textContent)||void 0===$?void 0:$.trim());X=p.height/(i.height-c),v=t?`scale(${p.width/i.width}, ${X})`:`scale(${X})`}const h=l.top+l.height/2-r.height*X/2+"px",g=s?[{offset:0,opacity:0,transform:`translate3d(${y}, ${h}, 0) ${v}`},{offset:.1,opacity:0},{offset:1,opacity:1,transform:`translate3d(0px, ${b}, 0) ${x}`}]:[{offset:0,opacity:.99,transform:`translate3d(0px, ${b}, 0) ${x}`},{offset:.6,opacity:0},{offset:1,opacity:0,transform:`translate3d(${y}, ${h}, 0) ${v}`}],w=n("ion-title"),k=t();w.innerText=e.innerText,w.size=e.size,w.color=e.color,k.addElement(w),k.beforeStyles({"transform-origin":`${u} top`,height:`${r.height}px`,display:"",position:"relative",[u]:m}).beforeAddWrite((()=>{e.style.setProperty("opacity","0")})).afterAddWrite((()=>{e.style.setProperty("opacity",""),w.style.setProperty("display","none")})).keyframes(g),o.addAnimation(k)},l=(n,l)=>{var c;try{const f="cubic-bezier(0.32,0.72,0,1)",p="opacity",d="transform",$="0%",u=.8,m="rtl"===n.ownerDocument.dir,b=m?"-99.5%":"99.5%",y=m?"33%":"-33%",X=l.enteringEl,x=l.leavingEl,v="back"===l.direction,h=X.querySelector(":scope > ion-content"),g=X.querySelectorAll(":scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *"),w=X.querySelectorAll(":scope > ion-header > ion-toolbar"),k=t(),j=t();if(k.addElement(X).duration((null!==(c=l.duration)&&void 0!==c?c:0)||540).easing(l.easing||f).fill("both").beforeRemoveClass("ion-page-invisible"),x&&null!=n){const o=t();o.addElement(n),k.addAnimation(o)}if(h||0!==w.length||0!==g.length?(j.addElement(h),j.addElement(g)):j.addElement(X.querySelector(":scope > .ion-page, :scope > ion-nav, :scope > ion-tabs")),k.addAnimation(j),v?j.beforeClearStyles([p]).fromTo("transform",`translateX(${y})`,`translateX(${$})`).fromTo(p,u,1):j.beforeClearStyles([p]).fromTo("transform",`translateX(${b})`,`translateX(${$})`),h){const o=a(h).querySelector(".transition-effect");if(o){const n=o.querySelector(".transition-cover"),a=o.querySelector(".transition-shadow"),s=t(),e=t(),r=t();s.addElement(o).beforeStyles({opacity:"1",display:"block"}).afterStyles({opacity:"",display:""}),e.addElement(n).beforeClearStyles([p]).fromTo(p,0,.1),r.addElement(a).beforeClearStyles([p]).fromTo(p,.03,.7),s.addAnimation([e,r]),j.addAnimation([s])}}const T=X.querySelector("ion-header.header-collapse-condense"),{forward:A,backward:B}=((t,o,n,l,c)=>{const f=e(l,n),p=s(c),d=s(l),$=e(c,n),u=null!==f&&null!==p&&!n,m=null!==d&&null!==$&&n;if(u){const s=p.getBoundingClientRect(),e=f.getBoundingClientRect(),l=a(f).querySelector(".button-text"),c=null==l?void 0:l.getBoundingClientRect(),d=a(p).querySelector(".toolbar-title").getBoundingClientRect();i(t,o,n,p,s,d,e,l,c),r(t,o,n,f,e,l,c,p,d)}else if(m){const s=d.getBoundingClientRect(),e=$.getBoundingClientRect(),l=a($).querySelector(".button-text"),c=null==l?void 0:l.getBoundingClientRect(),f=a(d).querySelector(".toolbar-title").getBoundingClientRect();i(t,o,n,d,s,f,e,l,c),r(t,o,n,$,e,l,c,d,f)}return{forward:u,backward:m}})(k,m,v,X,x);if(w.forEach((o=>{const n=t();n.addElement(o),k.addAnimation(n);const s=t();s.addElement(o.querySelector("ion-title"));const e=t(),r=Array.from(o.querySelectorAll("ion-buttons,[menuToggle]")),i=o.closest("ion-header"),l=null==i?void 0:i.classList.contains("header-collapse-condense-inactive");let c;c=r.filter(v?t=>{const o=t.classList.contains("buttons-collapse");return o&&!l||!o}:t=>!t.classList.contains("buttons-collapse")),e.addElement(c);const f=t();f.addElement(o.querySelectorAll(":scope > *:not(ion-title):not(ion-buttons):not([menuToggle])"));const d=t();d.addElement(a(o).querySelector(".toolbar-background"));const u=t(),X=o.querySelector("ion-back-button");if(X&&u.addElement(X),n.addAnimation([s,e,f,d,u]),e.fromTo(p,.01,1),f.fromTo(p,.01,1),v)l||s.fromTo("transform",`translateX(${y})`,`translateX(${$})`).fromTo(p,.01,1),f.fromTo("transform",`translateX(${y})`,`translateX(${$})`),u.fromTo(p,.01,1);else if(T||s.fromTo("transform",`translateX(${b})`,`translateX(${$})`).fromTo(p,.01,1),f.fromTo("transform",`translateX(${b})`,`translateX(${$})`),d.beforeClearStyles([p,"transform"]),(null==i?void 0:i.translucent)?d.fromTo("transform",m?"translateX(-100%)":"translateX(100%)","translateX(0px)"):d.fromTo(p,.01,"var(--opacity)"),A||u.fromTo(p,.01,1),X&&!A){const o=t();o.addElement(a(X).querySelector(".button-text")).fromTo("transform",m?"translateX(-100px)":"translateX(100px)","translateX(0px)"),n.addAnimation(o)}})),x){const n=t(),s=x.querySelector(":scope > ion-content"),e=x.querySelectorAll(":scope > ion-header > ion-toolbar"),r=x.querySelectorAll(":scope > ion-header > *:not(ion-toolbar), :scope > ion-footer > *");if(s||0!==e.length||0!==r.length?(n.addElement(s),n.addElement(r)):n.addElement(x.querySelector(":scope > .ion-page, :scope > ion-nav, :scope > ion-tabs")),k.addAnimation(n),v){n.beforeClearStyles([p]).fromTo("transform",`translateX(${$})`,m?"translateX(-100%)":"translateX(100%)");const t=o(x);k.afterAddWrite((()=>{"normal"===k.getDirection()&&t.style.setProperty("display","none")}))}else n.fromTo("transform",`translateX(${$})`,`translateX(${y})`).fromTo(p,1,u);if(s){const o=a(s).querySelector(".transition-effect");if(o){const a=o.querySelector(".transition-cover"),s=o.querySelector(".transition-shadow"),e=t(),r=t(),i=t();e.addElement(o).beforeStyles({opacity:"1",display:"block"}).afterStyles({opacity:"",display:""}),r.addElement(a).beforeClearStyles([p]).fromTo(p,.1,0),i.addElement(s).beforeClearStyles([p]).fromTo(p,.7,.03),e.addAnimation([r,i]),n.addAnimation([e])}}e.forEach((o=>{const n=t();n.addElement(o);const s=t();s.addElement(o.querySelector("ion-title"));const e=t(),r=o.querySelectorAll("ion-buttons,[menuToggle]"),i=o.closest("ion-header"),l=null==i?void 0:i.classList.contains("header-collapse-condense-inactive"),c=Array.from(r).filter((t=>{const o=t.classList.contains("buttons-collapse");return o&&!l||!o}));e.addElement(c);const f=t(),u=o.querySelectorAll(":scope > *:not(ion-title):not(ion-buttons):not([menuToggle])");u.length>0&&f.addElement(u);const b=t();b.addElement(a(o).querySelector(".toolbar-background"));const X=t(),x=o.querySelector("ion-back-button");if(x&&X.addElement(x),n.addAnimation([s,e,f,X,b]),k.addAnimation(n),X.fromTo(p,.99,0),e.fromTo(p,.99,0),f.fromTo(p,.99,0),v){if(l||s.fromTo("transform",`translateX(${$})`,m?"translateX(-100%)":"translateX(100%)").fromTo(p,.99,0),f.fromTo("transform",`translateX(${$})`,m?"translateX(-100%)":"translateX(100%)"),b.beforeClearStyles([p,"transform"]),(null==i?void 0:i.translucent)?b.fromTo("transform","translateX(0px)",m?"translateX(-100%)":"translateX(100%)"):b.fromTo(p,"var(--opacity)",0),x&&!B){const o=t();o.addElement(a(x).querySelector(".button-text")).fromTo("transform",`translateX(${$})`,`translateX(${(m?-124:124)+"px"})`),n.addAnimation(o)}}else l||s.fromTo("transform",`translateX(${$})`,`translateX(${y})`).fromTo(p,.99,0).afterClearStyles([d,p]),f.fromTo("transform",`translateX(${$})`,`translateX(${y})`).afterClearStyles([d,p]),X.afterClearStyles([p]),s.afterClearStyles([p]),e.afterClearStyles([p])}))}return k}catch(t){throw t}},c=10;export{l as iosTransitionAnimation,a as shadow}