@ionic/core
Version:
Base components for Ionic
1 lines • 7.05 kB
JavaScript
const t=window.Ionic.h;import{c as e,d as s,e as o,f as a,g as i,h as n}from"./chunk-4f24dff4.js";import{c as r,a as c}from"./chunk-7c632336.js";function l(t,e,s){const o=new t,a=new t,i=e.host||e,n=e.querySelector(".toast-wrapper");switch(a.addElement(n),s){case"top":a.fromTo("translateY","-100%","calc(10px + var(--ion-safe-area-top, 0px))");break;case"middle":const t=Math.floor(i.clientHeight/2-n.clientHeight/2);n.style.top=`${t}px`,a.fromTo("opacity",.01,1);break;default:a.fromTo("translateY","100%","calc(-10px - var(--ion-safe-area-bottom, 0px))")}return Promise.resolve(o.addElement(i).easing("cubic-bezier(.155,1.105,.295,1.12)").duration(400).add(a))}function d(t,e,s){const o=new t,a=new t,i=e.host||e,n=e.querySelector(".toast-wrapper");switch(a.addElement(n),s){case"top":a.fromTo("translateY","calc(10px + var(--ion-safe-area-top, 0px))","-100%");break;case"middle":a.fromTo("opacity",.99,0);break;default:a.fromTo("translateY","calc(-10px - var(--ion-safe-area-bottom, 0px))","100%")}return Promise.resolve(o.addElement(i).easing("cubic-bezier(.36,.66,.04,1)").duration(300).add(a))}function m(t,e,s){const o=new t,a=new t,i=e.host||e,n=e.querySelector(".toast-wrapper");switch(a.addElement(n),s){case"top":n.style.top="calc(8px + var(--ion-safe-area-top, 0px))",a.fromTo("opacity",.01,1);break;case"middle":const t=Math.floor(i.clientHeight/2-n.clientHeight/2);n.style.top=`${t}px`,a.fromTo("opacity",.01,1);break;default:n.style.bottom="calc(8px + var(--ion-safe-area-bottom, 0px))",a.fromTo("opacity",.01,1)}return Promise.resolve(o.addElement(i).easing("cubic-bezier(.36,.66,.04,1)").duration(400).add(a))}function p(t,e){const s=new t,o=new t,a=e.host||e,i=e.querySelector(".toast-wrapper");return o.addElement(i),o.fromTo("opacity",.99,0),Promise.resolve(s.addElement(a).easing("cubic-bezier(.36,.66,.04,1)").duration(300).add(o))}class u{constructor(){this.presented=!1,this.duration=0,this.keyboardClose=!1,this.position="bottom",this.showCloseButton=!1,this.translucent=!1,this.animated=!0}async present(){await e(this,"toastEnter",l,m,this.position),this.duration>0&&(this.durationTimeout=setTimeout(()=>this.dismiss(void 0,"timeout"),this.duration))}dismiss(t,e){return this.durationTimeout&&clearTimeout(this.durationTimeout),s(this,t,e,"toastLeave",d,p,this.position)}onDidDismiss(){return o(this.el,"ionToastDidDismiss")}onWillDismiss(){return o(this.el,"ionToastWillDismiss")}hostData(){return{style:{zIndex:6e4+this.overlayIndex},class:Object.assign({},r(this.color),c(this.cssClass),{"toast-translucent":this.translucent})}}render(){return t("div",{class:{"toast-wrapper":!0,[`toast-${this.position}`]:!0}},t("div",{class:"toast-container"},void 0!==this.message&&t("div",{class:"toast-message"},this.message),this.showCloseButton&&t("ion-button",{fill:"clear",class:"toast-button",onClick:()=>this.dismiss(void 0,"cancel")},this.closeButtonText||"Close")))}static get is(){return"ion-toast"}static get encapsulation(){return"shadow"}static get properties(){return{animated:{type:Boolean,attr:"animated"},closeButtonText:{type:String,attr:"close-button-text"},color:{type:String,attr:"color"},config:{context:"config"},cssClass:{type:String,attr:"css-class"},dismiss:{method:!0},duration:{type:Number,attr:"duration"},el:{elementRef:!0},enterAnimation:{type:"Any",attr:"enter-animation"},keyboardClose:{type:Boolean,attr:"keyboard-close"},leaveAnimation:{type:"Any",attr:"leave-animation"},message:{type:String,attr:"message"},mode:{type:String,attr:"mode"},onDidDismiss:{method:!0},onWillDismiss:{method:!0},overlayIndex:{type:Number,attr:"overlay-index"},position:{type:String,attr:"position"},present:{method:!0},showCloseButton:{type:Boolean,attr:"show-close-button"},translucent:{type:Boolean,attr:"translucent"}}}static get events(){return[{name:"ionToastDidPresent",method:"didPresent",bubbles:!0,cancelable:!0,composed:!0},{name:"ionToastWillPresent",method:"willPresent",bubbles:!0,cancelable:!0,composed:!0},{name:"ionToastWillDismiss",method:"willDismiss",bubbles:!0,cancelable:!0,composed:!0},{name:"ionToastDidDismiss",method:"didDismiss",bubbles:!0,cancelable:!0,composed:!0}]}static get style(){return".sc-ion-toast-md-h{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;left:0;top:0;display:block;position:absolute;width:100%;height:100%;color:var(--color);font-family:var(--ion-font-family,inherit);contain:strict;z-index:1000;pointer-events:none}[dir=rtl].sc-ion-toast-md-h + b.sc-ion-toast-md{right:0}.overlay-hidden.sc-ion-toast-md-h{display:none}.ion-color.sc-ion-toast-md-h{--button-color:inherit;color:var(--ion-color-contrast)}.ion-color.sc-ion-toast-md-h .toast-wrapper.sc-ion-toast-md{background:var(--ion-color-base)}.toast-wrapper.sc-ion-toast-md{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}.toast-container.sc-ion-toast-md{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;contain:content}.toast-button.sc-ion-toast-md{color:var(--button-color)}.toast-message.sc-ion-toast-md{-ms-flex:1;flex:1;white-space:pre-wrap}.sc-ion-toast-md-h{--background:var(--ion-color-step-800,#333);--border-radius:4px;--box-shadow:0 3px 5px -1px rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12);--button-color:var(--ion-color-primary,#3880ff);--color:var(--ion-color-step-50,#f2f2f2);--max-width:700px;font-size:14px}.toast-wrapper.sc-ion-toast-md{left:8px;right:8px;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:.01;z-index:10}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.toast-wrapper.sc-ion-toast-md{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}.toast-message.sc-ion-toast-md{padding-left:16px;padding-right:16px;padding-top:14px;padding-bottom:14px;line-height:20px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.toast-message.sc-ion-toast-md{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.toast-button.sc-ion-toast-md{--margin-end:0}"}static get styleMode(){return"md"}}class h{create(t){return a(this.doc.createElement("ion-toast"),t)}dismiss(t,e,s){return i(this.doc,t,e,"ion-toast",s)}async getTop(){return n(this.doc,"ion-toast")}static get is(){return"ion-toast-controller"}static get properties(){return{create:{method:!0},dismiss:{method:!0},doc:{context:"document"},getTop:{method:!0}}}}export{u as IonToast,h as IonToastController};