@ionic/core
Version:
Base components for Ionic
287 lines (278 loc) • 12 kB
JavaScript
import { h } from '../ionic.core.js';
import { c as present, d as dismiss, e as eventMethod, f as createOverlay, g as dismissOverlay, h as getOverlay } from './chunk-4f24dff4.js';
import { c as createColorClasses, a as getClassMap } from './chunk-7c632336.js';
function iosEnterAnimation(AnimationC, baseEl, position) {
const baseAnimation = new AnimationC();
const wrapperAnimation = new AnimationC();
const hostEl = baseEl.host || baseEl;
const wrapperEl = baseEl.querySelector('.toast-wrapper');
wrapperAnimation.addElement(wrapperEl);
const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
switch (position) {
case 'top':
wrapperAnimation.fromTo('translateY', '-100%', top);
break;
case 'middle':
const topPosition = Math.floor(hostEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
wrapperEl.style.top = `${topPosition}px`;
wrapperAnimation.fromTo('opacity', 0.01, 1);
break;
default:
wrapperAnimation.fromTo('translateY', '100%', bottom);
break;
}
return Promise.resolve(baseAnimation
.addElement(hostEl)
.easing('cubic-bezier(.155,1.105,.295,1.12)')
.duration(400)
.add(wrapperAnimation));
}
function iosLeaveAnimation(AnimationC, baseEl, position) {
const baseAnimation = new AnimationC();
const wrapperAnimation = new AnimationC();
const hostEl = baseEl.host || baseEl;
const wrapperEl = baseEl.querySelector('.toast-wrapper');
wrapperAnimation.addElement(wrapperEl);
const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
switch (position) {
case 'top':
wrapperAnimation.fromTo('translateY', top, '-100%');
break;
case 'middle':
wrapperAnimation.fromTo('opacity', 0.99, 0);
break;
default:
wrapperAnimation.fromTo('translateY', bottom, '100%');
break;
}
return Promise.resolve(baseAnimation
.addElement(hostEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(300)
.add(wrapperAnimation));
}
function mdEnterAnimation(AnimationC, baseEl, position) {
const baseAnimation = new AnimationC();
const wrapperAnimation = new AnimationC();
const hostEl = baseEl.host || baseEl;
const wrapperEl = baseEl.querySelector('.toast-wrapper');
wrapperAnimation.addElement(wrapperEl);
const bottom = `calc(8px + var(--ion-safe-area-bottom, 0px))`;
const top = `calc(8px + var(--ion-safe-area-top, 0px))`;
switch (position) {
case 'top':
wrapperEl.style.top = top;
wrapperAnimation.fromTo('opacity', 0.01, 1);
break;
case 'middle':
const topPosition = Math.floor(hostEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
wrapperEl.style.top = `${topPosition}px`;
wrapperAnimation.fromTo('opacity', 0.01, 1);
break;
default:
wrapperEl.style.bottom = bottom;
wrapperAnimation.fromTo('opacity', 0.01, 1);
break;
}
return Promise.resolve(baseAnimation
.addElement(hostEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(wrapperAnimation));
}
function mdLeaveAnimation(AnimationC, baseEl) {
const baseAnimation = new AnimationC();
const wrapperAnimation = new AnimationC();
const hostEl = baseEl.host || baseEl;
const wrapperEl = baseEl.querySelector('.toast-wrapper');
wrapperAnimation.addElement(wrapperEl);
wrapperAnimation.fromTo('opacity', 0.99, 0);
return Promise.resolve(baseAnimation
.addElement(hostEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(300)
.add(wrapperAnimation));
}
class Toast {
constructor() {
this.presented = false;
this.duration = 0;
this.keyboardClose = false;
this.position = 'bottom';
this.showCloseButton = false;
this.translucent = false;
this.animated = true;
}
async present() {
await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position);
if (this.duration > 0) {
this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
}
}
dismiss(data, role) {
if (this.durationTimeout) {
clearTimeout(this.durationTimeout);
}
return dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
}
onDidDismiss() {
return eventMethod(this.el, 'ionToastDidDismiss');
}
onWillDismiss() {
return eventMethod(this.el, 'ionToastWillDismiss');
}
hostData() {
return {
style: {
zIndex: 60000 + this.overlayIndex,
},
class: Object.assign({}, createColorClasses(this.color), getClassMap(this.cssClass), { 'toast-translucent': this.translucent })
};
}
render() {
const wrapperClass = {
'toast-wrapper': true,
[`toast-${this.position}`]: true
};
return (h("div", { class: wrapperClass },
h("div", { class: "toast-container" },
this.message !== undefined &&
h("div", { class: "toast-message" }, this.message),
this.showCloseButton &&
h("ion-button", { fill: "clear", class: "toast-button", onClick: () => this.dismiss(undefined, '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": true
},
"duration": {
"type": Number,
"attr": "duration"
},
"el": {
"elementRef": true
},
"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": true
},
"onWillDismiss": {
"method": true
},
"overlayIndex": {
"type": Number,
"attr": "overlay-index"
},
"position": {
"type": String,
"attr": "position"
},
"present": {
"method": true
},
"showCloseButton": {
"type": Boolean,
"attr": "show-close-button"
},
"translucent": {
"type": Boolean,
"attr": "translucent"
}
}; }
static get events() { return [{
"name": "ionToastDidPresent",
"method": "didPresent",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionToastWillPresent",
"method": "willPresent",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionToastWillDismiss",
"method": "willDismiss",
"bubbles": true,
"cancelable": true,
"composed": true
}, {
"name": "ionToastDidDismiss",
"method": "didDismiss",
"bubbles": true,
"cancelable": true,
"composed": true
}]; }
static get style() { return ":host{--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}:host([dir=rtl])+b{right:0}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;contain:content}.toast-button{color:var(--button-color)}.toast-message{-ms-flex:1;flex:1;white-space:pre-wrap}:host{--background:var(--ion-color-step-50,#f2f2f2);--border-radius:14px;--button-color:var(--ion-color-step-600,#666);--color:var(--ion-color-step-850,#262626);--max-width:700px;font-size:14px}.toast-wrapper{left:10px;right:10px;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.toast-wrapper{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb,255,255,255),.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}.toast-wrapper.toast-top{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);top:0}.toast-wrapper.toast-middle{opacity:.01}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);bottom:0}.toast-message{padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.toast-message{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button{font-size:15px}"; }
static get styleMode() { return "ios"; }
}
class ToastController {
create(opts) {
return createOverlay(this.doc.createElement('ion-toast'), opts);
}
dismiss(data, role, id) {
return dismissOverlay(this.doc, data, role, 'ion-toast', id);
}
async getTop() {
return getOverlay(this.doc, 'ion-toast');
}
static get is() { return "ion-toast-controller"; }
static get properties() { return {
"create": {
"method": true
},
"dismiss": {
"method": true
},
"doc": {
"context": "document"
},
"getTop": {
"method": true
}
}; }
}
export { Toast as IonToast, ToastController as IonToastController };