UNPKG

forms-reactive

Version:

Reactive Form Web Component

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