@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 ".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 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 };