@amwaljs/checkout-button 0.3.1 → 0.3.2

package/dist/esm/ion-toast.entry.js

@@ -1,17 +1,17 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-93OyAGoo.js';
-import { E as ENABLE_HTML_CONTENT_DEFAULT, s as sanitizeDOMString } from './config-yu3xCFhr.js';
-import { g as getElementRoot, d as raf } from './helpers-C6kqtbmV.js';
-import { c as createLockController } from './lock-controller-B-hirT0v.js';
-import { p as printIonWarning } from './index-D8d_89Nl.js';
-import { O as OVERLAY_GESTURE_PRIORITY, c as createDelegateController, d as createTriggerController, i as isCancel, e as prepareOverlay, s as setOverlayId, f as present, h as dismiss, j as eventMethod, k as safeCall, G as GESTURE } from './overlays-SBLrmFy6.js';
-import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
-import { c as config, g as getIonMode } from './ionic-global-DXXzPLPc.js';
-import { c as createAnimation } from './animation-DRf3dwMu.js';
-import { w as win } from './index-ZjP4CjeZ.js';
-import { createGesture } from './index-CcopIPA0.js';
-import './hardware-back-button-CzxcJiYO.js';
-import './framework-delegate-D_uGiYYw.js';
-import './gesture-controller-CukVBo5-.js';
+import { r as registerInstance, d as createEvent, h, H as Host, e as getElement } from './index-8cc94b11.js';
+import { E as ENABLE_HTML_CONTENT_DEFAULT, s as sanitizeDOMString } from './config-8e06237c.js';
+import { g as getElementRoot, b as raf } from './helpers-f0dcbd72.js';
+import { c as createLockController } from './lock-controller-632e3c10.js';
+import { p as printIonWarning } from './index-d9b41a43.js';
+import { O as OVERLAY_GESTURE_PRIORITY, c as createDelegateController, a as createTriggerController, i as isCancel, p as prepareOverlay, s as setOverlayId, b as present, d as dismiss, e as eventMethod, f as safeCall, G as GESTURE } from './overlays-642a91df.js';
+import { g as getClassMap, c as createColorClasses } from './theme-35c700b7.js';
+import { c as config, g as getIonMode } from './ionic-global-0b7766cb.js';
+import { c as createAnimation } from './animation-a6d5c3b1.js';
+import { w as win } from './index-fb97e55c.js';
+import { createGesture } from './index-f6dce931.js';
+import './hardware-back-button-f93acff0.js';
+import './framework-delegate-de1aa369.js';
+import './gesture-controller-58ffa500.js';
 
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
@@ -345,7 +345,7 @@ const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
              * consider when the threshold is a negative in the event the
              * user drags up (since the deltaY will also be negative).
              */
-            shouldDismiss = threshold >= DISMISS_THRESHOLD / 2 || threshold <= -0.5 / 2;
+            shouldDismiss = threshold >= DISMISS_THRESHOLD / 2 || threshold <= -DISMISS_THRESHOLD / 2;
             /**
              * Since we are replacing the keyframes
              * below the animation always starts from
@@ -465,405 +465,399 @@ const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
     return gesture;
 };
 
-const toastIosCss = () => `: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;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}: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);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports (backdrop-filter: blur(0)){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-middle{opacity:0.01}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}`;
+const toastIosCss = ":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;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}: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);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports (backdrop-filter: blur(0)){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);backdrop-filter:saturate(180%) blur(20px)}:host(.ion-color.toast-translucent) .toast-wrapper{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-middle{opacity:0.01}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
 
-const toastMdCss = () => `: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;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}: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);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--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;--start:8px;--end:8px;font-size:0.875rem}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:1.25rem}.toast-message{line-height:1.25rem}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}`;
+const toastMdCss = ":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;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){:host{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}: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);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){.toast-wrapper{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{transform:translate3d(0,  100%,  0);bottom:0}.toast-container{display:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-layout-stacked .toast-container{flex-wrap:wrap}.toast-layout-baseline .toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-icon{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button-group{display:flex}.toast-layout-stacked .toast-button-group{justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:var(--ion-color-step-800, #333333);--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;--start:8px;--end:8px;font-size:0.875rem}.toast-wrapper{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;z-index:10}.toast-content{-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px;padding-top:14px;padding-bottom:14px}.toast-header{margin-bottom:2px;font-weight:500;line-height:1.25rem}.toast-message{line-height:1.25rem}.toast-layout-baseline .toast-button-group-start{-webkit-margin-start:8px;margin-inline-start:8px}.toast-layout-stacked .toast-button-group-start{-webkit-margin-end:8px;margin-inline-end:8px;margin-top:8px}.toast-layout-baseline .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px}.toast-layout-stacked .toast-button-group-end{-webkit-margin-end:8px;margin-inline-end:8px;margin-bottom:8px}.toast-button{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:0.875rem;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@media (any-hover: hover){.toast-button:hover{background-color:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.08)}.toast-button-cancel:hover{background-color:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)}}";
 
 const Toast = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.didPresent = createEvent(this, "ionToastDidPresent", 7);
-        this.willPresent = createEvent(this, "ionToastWillPresent", 7);
-        this.willDismiss = createEvent(this, "ionToastWillDismiss", 7);
-        this.didDismiss = createEvent(this, "ionToastDidDismiss", 7);
-        this.didPresentShorthand = createEvent(this, "didPresent", 7);
-        this.willPresentShorthand = createEvent(this, "willPresent", 7);
-        this.willDismissShorthand = createEvent(this, "willDismiss", 7);
-        this.didDismissShorthand = createEvent(this, "didDismiss", 7);
-        this.delegateController = createDelegateController(this);
-        this.lockController = createLockController();
-        this.triggerController = createTriggerController();
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.presented = false;
-        this.dispatchCancelHandler = (ev) => {
-            const role = ev.detail.role;
-            if (isCancel(role)) {
-                const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
-                this.callButtonHandler(cancelButton);
-            }
-        };
-        /**
-         * Create a new swipe gesture so Toast
-         * can be swiped to dismiss.
-         */
-        this.createSwipeGesture = (toastPosition) => {
-            const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
-                /**
-                 * If the gesture completed then
-                 * we should dismiss the toast.
-                 */
-                this.dismiss(undefined, GESTURE);
-            }));
-            gesture.enable(true);
-        };
-        /**
-         * Destroy an existing swipe gesture
-         * so Toast can no longer be swiped to dismiss.
-         */
-        this.destroySwipeGesture = () => {
-            const { gesture } = this;
-            if (gesture === undefined) {
-                return;
-            }
-            gesture.destroy();
-            this.gesture = undefined;
-        };
-        /**
-         * Returns `true` if swipeGesture
-         * is configured to a value that enables the swipe behavior.
-         * Returns `false` otherwise.
-         */
-        this.prefersSwipeGesture = () => {
-            const { swipeGesture } = this;
-            return swipeGesture === 'vertical';
-        };
-        this.revealContentToScreenReader = false;
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.hasController = false;
-        this.color = undefined;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.cssClass = undefined;
-        this.duration = config.getNumber('toastDuration', 0);
-        this.header = undefined;
-        this.layout = 'baseline';
-        this.message = undefined;
-        this.keyboardClose = false;
-        this.position = 'bottom';
-        this.positionAnchor = undefined;
-        this.buttons = undefined;
-        this.translucent = false;
-        this.animated = true;
-        this.icon = undefined;
-        this.htmlAttributes = undefined;
-        this.swipeGesture = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
-    }
-    swipeGestureChanged() {
-        /**
-         * If the Toast is presented, then we need to destroy
-         * any actives gestures before a new gesture is potentially
-         * created below.
-         *
-         * If the Toast is dismissed, then no gesture should be available
-         * since the Toast is not visible. This case should never
-         * happen since the "dismiss" method handles destroying
-         * any active swipe gestures, but we keep this code
-         * around to handle the first case.
-         */
-        this.destroySwipeGesture();
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.didPresent = createEvent(this, "ionToastDidPresent", 7);
+    this.willPresent = createEvent(this, "ionToastWillPresent", 7);
+    this.willDismiss = createEvent(this, "ionToastWillDismiss", 7);
+    this.didDismiss = createEvent(this, "ionToastDidDismiss", 7);
+    this.didPresentShorthand = createEvent(this, "didPresent", 7);
+    this.willPresentShorthand = createEvent(this, "willPresent", 7);
+    this.willDismissShorthand = createEvent(this, "willDismiss", 7);
+    this.didDismissShorthand = createEvent(this, "didDismiss", 7);
+    this.delegateController = createDelegateController(this);
+    this.lockController = createLockController();
+    this.triggerController = createTriggerController();
+    this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    this.presented = false;
+    this.dispatchCancelHandler = (ev) => {
+      const role = ev.detail.role;
+      if (isCancel(role)) {
+        const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
+        this.callButtonHandler(cancelButton);
+      }
+    };
+    /**
+     * Create a new swipe gesture so Toast
+     * can be swiped to dismiss.
+     */
+    this.createSwipeGesture = (toastPosition) => {
+      const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
         /**
-         * A new swipe gesture should only be created
-         * if the Toast is presented. If the Toast is not
-         * yet presented then the "present" method will
-         * handle calling the swipe gesture setup function.
+         * If the gesture completed then
+         * we should dismiss the toast.
          */
-        if (this.presented && this.prefersSwipeGesture()) {
-            /**
-             * If the Toast is presented then
-             * lastPresentedPosition is defined.
-             */
-            this.createSwipeGesture(this.lastPresentedPosition);
-        }
-    }
-    onIsOpenChange(newValue, oldValue) {
-        if (newValue === true && oldValue === false) {
-            this.present();
-        }
-        else if (newValue === false && oldValue === true) {
-            this.dismiss();
-        }
-    }
-    triggerChanged() {
-        const { trigger, el, triggerController } = this;
-        if (trigger) {
-            triggerController.addClickListener(el, trigger);
-        }
-    }
-    connectedCallback() {
-        prepareOverlay(this.el);
-        this.triggerChanged();
+        this.dismiss(undefined, GESTURE);
+      }));
+      gesture.enable(true);
+    };
+    /**
+     * Destroy an existing swipe gesture
+     * so Toast can no longer be swiped to dismiss.
+     */
+    this.destroySwipeGesture = () => {
+      const { gesture } = this;
+      if (gesture === undefined) {
+        return;
+      }
+      gesture.destroy();
+      this.gesture = undefined;
+    };
+    /**
+     * Returns `true` if swipeGesture
+     * is configured to a value that enables the swipe behavior.
+     * Returns `false` otherwise.
+     */
+    this.prefersSwipeGesture = () => {
+      const { swipeGesture } = this;
+      return swipeGesture === 'vertical';
+    };
+    this.revealContentToScreenReader = false;
+    this.overlayIndex = undefined;
+    this.delegate = undefined;
+    this.hasController = false;
+    this.color = undefined;
+    this.enterAnimation = undefined;
+    this.leaveAnimation = undefined;
+    this.cssClass = undefined;
+    this.duration = config.getNumber('toastDuration', 0);
+    this.header = undefined;
+    this.layout = 'baseline';
+    this.message = undefined;
+    this.keyboardClose = false;
+    this.position = 'bottom';
+    this.positionAnchor = undefined;
+    this.buttons = undefined;
+    this.translucent = false;
+    this.animated = true;
+    this.icon = undefined;
+    this.htmlAttributes = undefined;
+    this.swipeGesture = undefined;
+    this.isOpen = false;
+    this.trigger = undefined;
+  }
+  swipeGestureChanged() {
+    /**
+     * If the Toast is presented, then we need to destroy
+     * any actives gestures before a new gesture is potentially
+     * created below.
+     *
+     * If the Toast is dismissed, then no gesture should be available
+     * since the Toast is not visible. This case should never
+     * happen since the "dismiss" method handles destroying
+     * any active swipe gestures, but we keep this code
+     * around to handle the first case.
+     */
+    this.destroySwipeGesture();
+    /**
+     * A new swipe gesture should only be created
+     * if the Toast is presented. If the Toast is not
+     * yet presented then the "present" method will
+     * handle calling the swipe gesture setup function.
+     */
+    if (this.presented && this.prefersSwipeGesture()) {
+      /**
+       * If the Toast is presented then
+       * lastPresentedPosition is defined.
+       */
+      this.createSwipeGesture(this.lastPresentedPosition);
     }
-    disconnectedCallback() {
-        this.triggerController.removeClickListener();
+  }
+  onIsOpenChange(newValue, oldValue) {
+    if (newValue === true && oldValue === false) {
+      this.present();
     }
-    componentWillLoad() {
-        setOverlayId(this.el);
+    else if (newValue === false && oldValue === true) {
+      this.dismiss();
     }
-    componentDidLoad() {
-        /**
-         * If toast was rendered with isOpen="true"
-         * then we should open toast immediately.
-         */
-        if (this.isOpen === true) {
-            raf(() => this.present());
-        }
-        /**
-         * When binding values in frameworks such as Angular
-         * it is possible for the value to be set after the Web Component
-         * initializes but before the value watcher is set up in Stencil.
-         * As a result, the watcher callback may not be fired.
-         * We work around this by manually calling the watcher
-         * callback when the component has loaded and the watcher
-         * is configured.
-         */
-        this.triggerChanged();
+  }
+  triggerChanged() {
+    const { trigger, el, triggerController } = this;
+    if (trigger) {
+      triggerController.addClickListener(el, trigger);
     }
+  }
+  connectedCallback() {
+    prepareOverlay(this.el);
+    this.triggerChanged();
+  }
+  disconnectedCallback() {
+    this.triggerController.removeClickListener();
+  }
+  componentWillLoad() {
+    setOverlayId(this.el);
+  }
+  componentDidLoad() {
     /**
-     * Present the toast overlay after it has been created.
+     * If toast was rendered with isOpen="true"
+     * then we should open toast immediately.
      */
-    async present() {
-        const unlock = await this.lockController.lock();
-        await this.delegateController.attachViewToDom();
-        const { el, position } = this;
-        const anchor = this.getAnchorElement();
-        const animationPosition = getAnimationPosition(position, anchor, getIonMode(this), el);
-        /**
-         * Cache the calculated position of the toast, so we can re-use it
-         * in the dismiss animation.
-         */
-        this.lastPresentedPosition = animationPosition;
-        await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
-            position,
-            top: animationPosition.top,
-            bottom: animationPosition.bottom,
-        });
-        /**
-         * Content is revealed to screen readers after
-         * the transition to avoid jank since this
-         * state updates will cause a re-render.
-         */
-        this.revealContentToScreenReader = true;
-        if (this.duration > 0) {
-            this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
-        }
-        /**
-         * If the Toast has a swipe gesture then we can
-         * create the gesture so users can swipe the
-         * presented Toast.
-         */
-        if (this.prefersSwipeGesture()) {
-            this.createSwipeGesture(animationPosition);
-        }
-        unlock();
+    if (this.isOpen === true) {
+      raf(() => this.present());
     }
     /**
-     * Dismiss the toast overlay after it has been presented.
-     *
-     * @param data Any data to emit in the dismiss events.
-     * @param role The role of the element that is dismissing the toast.
-     * This can be useful in a button handler for determining which button was
-     * clicked to dismiss the toast.
-     * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
-     *
-     * This is a no-op if the overlay has not been presented yet. If you want
-     * to remove an overlay from the DOM that was never presented, use the
-     * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+     * When binding values in frameworks such as Angular
+     * it is possible for the value to be set after the Web Component
+     * initializes but before the value watcher is set up in Stencil.
+     * As a result, the watcher callback may not be fired.
+     * We work around this by manually calling the watcher
+     * callback when the component has loaded and the watcher
+     * is configured.
      */
-    async dismiss(data, role) {
-        var _a, _b;
-        const unlock = await this.lockController.lock();
-        const { durationTimeout, position, lastPresentedPosition } = this;
-        if (durationTimeout) {
-            clearTimeout(durationTimeout);
-        }
-        const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, 
-        /**
-         * Fetch the cached position that was calculated back in the present
-         * animation. We always want to animate the dismiss from the same
-         * position the present stopped at, so the animation looks continuous.
-         */
-        {
-            position,
-            top: (_a = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.top) !== null && _a !== void 0 ? _a : '',
-            bottom: (_b = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.bottom) !== null && _b !== void 0 ? _b : '',
-        });
-        if (dismissed) {
-            this.delegateController.removeViewFromDom();
-            this.revealContentToScreenReader = false;
-        }
-        this.lastPresentedPosition = undefined;
-        /**
-         * If the Toast has a swipe gesture then we can
-         * safely destroy it now that it is dismissed.
-         */
-        this.destroySwipeGesture();
-        unlock();
-        return dismissed;
-    }
+    this.triggerChanged();
+  }
+  /**
+   * Present the toast overlay after it has been created.
+   */
+  async present() {
+    const unlock = await this.lockController.lock();
+    await this.delegateController.attachViewToDom();
+    const { el, position } = this;
+    const anchor = this.getAnchorElement();
+    const animationPosition = getAnimationPosition(position, anchor, getIonMode(this), el);
+    /**
+     * Cache the calculated position of the toast, so we can re-use it
+     * in the dismiss animation.
+     */
+    this.lastPresentedPosition = animationPosition;
+    await present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, {
+      position,
+      top: animationPosition.top,
+      bottom: animationPosition.bottom,
+    });
     /**
-     * Returns a promise that resolves when the toast did dismiss.
+     * Content is revealed to screen readers after
+     * the transition to avoid jank since this
+     * state updates will cause a re-render.
      */
-    onDidDismiss() {
-        return eventMethod(this.el, 'ionToastDidDismiss');
+    this.revealContentToScreenReader = true;
+    if (this.duration > 0) {
+      this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
     }
     /**
-     * Returns a promise that resolves when the toast will dismiss.
+     * If the Toast has a swipe gesture then we can
+     * create the gesture so users can swipe the
+     * presented Toast.
      */
-    onWillDismiss() {
-        return eventMethod(this.el, 'ionToastWillDismiss');
+    if (this.prefersSwipeGesture()) {
+      this.createSwipeGesture(animationPosition);
     }
-    getButtons() {
-        const buttons = this.buttons
-            ? this.buttons.map((b) => {
-                return typeof b === 'string' ? { text: b } : b;
-            })
-            : [];
-        return buttons;
+    unlock();
+  }
+  /**
+   * Dismiss the toast overlay after it has been presented.
+   *
+   * @param data Any data to emit in the dismiss events.
+   * @param role The role of the element that is dismissing the toast.
+   * This can be useful in a button handler for determining which button was
+   * clicked to dismiss the toast.
+   * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
+   *
+   * This is a no-op if the overlay has not been presented yet. If you want
+   * to remove an overlay from the DOM that was never presented, use the
+   * [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
+   */
+  async dismiss(data, role) {
+    var _a, _b;
+    const unlock = await this.lockController.lock();
+    const { durationTimeout, position, lastPresentedPosition } = this;
+    if (durationTimeout) {
+      clearTimeout(durationTimeout);
     }
+    const dismissed = await dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, 
     /**
-     * Returns the element specified by the positionAnchor prop,
-     * or undefined if prop's value is an ID string and the element
-     * is not found in the DOM.
+     * Fetch the cached position that was calculated back in the present
+     * animation. We always want to animate the dismiss from the same
+     * position the present stopped at, so the animation looks continuous.
      */
-    getAnchorElement() {
-        const { position, positionAnchor, el } = this;
-        /**
-         * If positionAnchor is undefined then
-         * no anchor should be used when presenting the toast.
-         */
-        if (positionAnchor === undefined) {
-            return;
-        }
-        if (position === 'middle' && positionAnchor !== undefined) {
-            printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
-            return undefined;
-        }
-        if (typeof positionAnchor === 'string') {
-            /**
-             * If the anchor is defined as an ID, find the element.
-             * We do this on every present so the toast doesn't need
-             * to account for the surrounding DOM changing since the
-             * last time it was presented.
-             */
-            const foundEl = document.getElementById(positionAnchor);
-            if (foundEl === null) {
-                printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
-                return undefined;
-            }
-            return foundEl;
-        }
-        if (positionAnchor instanceof HTMLElement) {
-            return positionAnchor;
-        }
-        printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
+    {
+      position,
+      top: (_a = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.top) !== null && _a !== void 0 ? _a : '',
+      bottom: (_b = lastPresentedPosition === null || lastPresentedPosition === void 0 ? void 0 : lastPresentedPosition.bottom) !== null && _b !== void 0 ? _b : '',
+    });
+    if (dismissed) {
+      this.delegateController.removeViewFromDom();
+      this.revealContentToScreenReader = false;
+    }
+    this.lastPresentedPosition = undefined;
+    /**
+     * If the Toast has a swipe gesture then we can
+     * safely destroy it now that it is dismissed.
+     */
+    this.destroySwipeGesture();
+    unlock();
+    return dismissed;
+  }
+  /**
+   * Returns a promise that resolves when the toast did dismiss.
+   */
+  onDidDismiss() {
+    return eventMethod(this.el, 'ionToastDidDismiss');
+  }
+  /**
+   * Returns a promise that resolves when the toast will dismiss.
+   */
+  onWillDismiss() {
+    return eventMethod(this.el, 'ionToastWillDismiss');
+  }
+  getButtons() {
+    const buttons = this.buttons
+      ? this.buttons.map((b) => {
+        return typeof b === 'string' ? { text: b } : b;
+      })
+      : [];
+    return buttons;
+  }
+  /**
+   * Returns the element specified by the positionAnchor prop,
+   * or undefined if prop's value is an ID string and the element
+   * is not found in the DOM.
+   */
+  getAnchorElement() {
+    const { position, positionAnchor, el } = this;
+    /**
+     * If positionAnchor is undefined then
+     * no anchor should be used when presenting the toast.
+     */
+    if (positionAnchor === undefined) {
+      return;
+    }
+    if (position === 'middle' && positionAnchor !== undefined) {
+      printIonWarning('The positionAnchor property is ignored when using position="middle".', this.el);
+      return undefined;
+    }
+    if (typeof positionAnchor === 'string') {
+      /**
+       * If the anchor is defined as an ID, find the element.
+       * We do this on every present so the toast doesn't need
+       * to account for the surrounding DOM changing since the
+       * last time it was presented.
+       */
+      const foundEl = document.getElementById(positionAnchor);
+      if (foundEl === null) {
+        printIonWarning(`An anchor element with an ID of "${positionAnchor}" was not found in the DOM.`, el);
         return undefined;
+      }
+      return foundEl;
     }
-    async buttonClick(button) {
-        const role = button.role;
-        if (isCancel(role)) {
-            return this.dismiss(undefined, role);
-        }
-        const shouldDismiss = await this.callButtonHandler(button);
-        if (shouldDismiss) {
-            return this.dismiss(undefined, role);
-        }
-        return Promise.resolve();
+    if (positionAnchor instanceof HTMLElement) {
+      return positionAnchor;
     }
-    async callButtonHandler(button) {
-        if (button === null || button === void 0 ? void 0 : button.handler) {
-            // a handler has been provided, execute it
-            // pass the handler the values from the inputs
-            try {
-                const rtn = await safeCall(button.handler);
-                if (rtn === false) {
-                    // if the return value of the handler is false then do not dismiss
-                    return false;
-                }
-            }
-            catch (e) {
-                console.error(e);
-            }
-        }
-        return true;
+    printIonWarning('Invalid positionAnchor value:', positionAnchor, el);
+    return undefined;
+  }
+  async buttonClick(button) {
+    const role = button.role;
+    if (isCancel(role)) {
+      return this.dismiss(undefined, role);
     }
-    renderButtons(buttons, side) {
-        if (buttons.length === 0) {
-            return;
-        }
-        const mode = getIonMode(this);
-        const buttonGroupsClasses = {
-            'toast-button-group': true,
-            [`toast-button-group-${side}`]: true,
-        };
-        return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
+    const shouldDismiss = await this.callButtonHandler(button);
+    if (shouldDismiss) {
+      return this.dismiss(undefined, role);
     }
-    /**
-     * Render the `message` property.
-     * @param key - A key to give the element a stable identity. This is used to improve compatibility with screen readers.
-     * @param ariaHidden - If "true" then content will be hidden from screen readers.
-     */
-    renderToastMessage(key, ariaHidden = null) {
-        const { customHTMLEnabled, message } = this;
-        if (customHTMLEnabled) {
-            return (h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: sanitizeDOMString(message) }));
+    return Promise.resolve();
+  }
+  async callButtonHandler(button) {
+    if (button === null || button === void 0 ? void 0 : button.handler) {
+      // a handler has been provided, execute it
+      // pass the handler the values from the inputs
+      try {
+        const rtn = await safeCall(button.handler);
+        if (rtn === false) {
+          // if the return value of the handler is false then do not dismiss
+          return false;
         }
-        return (h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message" }, message));
+      }
+      catch (e) {
+        console.error(e);
+      }
+    }
+    return true;
+  }
+  renderButtons(buttons, side) {
+    if (buttons.length === 0) {
+      return;
+    }
+    const mode = getIonMode(this);
+    const buttonGroupsClasses = {
+      'toast-button-group': true,
+      [`toast-button-group-${side}`]: true,
+    };
+    return (h("div", { class: buttonGroupsClasses }, buttons.map((b) => (h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), h("div", { class: "toast-button-inner" }, b.icon && (h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
+  }
+  /**
+   * Render the `message` property.
+   * @param key - A key to give the element a stable identity. This is used to improve compatibility with screen readers.
+   * @param ariaHidden - If "true" then content will be hidden from screen readers.
+   */
+  renderToastMessage(key, ariaHidden = null) {
+    const { customHTMLEnabled, message } = this;
+    if (customHTMLEnabled) {
+      return (h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: sanitizeDOMString(message) }));
     }
+    return (h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message" }, message));
+  }
+  /**
+   * Render the `header` property.
+   * @param key - A key to give the element a stable identity. This is used to improve compatibility with screen readers.
+   * @param ariaHidden - If "true" then content will be hidden from screen readers.
+   */
+  renderHeader(key, ariaHidden = null) {
+    return (h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
+  }
+  render() {
+    const { layout, el, revealContentToScreenReader, header, message } = this;
+    const allButtons = this.getButtons();
+    const startButtons = allButtons.filter((b) => b.side === 'start');
+    const endButtons = allButtons.filter((b) => b.side !== 'start');
+    const mode = getIonMode(this);
+    const wrapperClass = {
+      'toast-wrapper': true,
+      [`toast-${this.position}`]: true,
+      [`toast-layout-${layout}`]: true,
+    };
     /**
-     * Render the `header` property.
-     * @param key - A key to give the element a stable identity. This is used to improve compatibility with screen readers.
-     * @param ariaHidden - If "true" then content will be hidden from screen readers.
+     * Stacked buttons are only meant to be
+     *  used with one type of button.
      */
-    renderHeader(key, ariaHidden = null) {
-        return (h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
-    }
-    render() {
-        const { layout, el, revealContentToScreenReader, header, message } = this;
-        const allButtons = this.getButtons();
-        const startButtons = allButtons.filter((b) => b.side === 'start');
-        const endButtons = allButtons.filter((b) => b.side !== 'start');
-        const mode = getIonMode(this);
-        const wrapperClass = {
-            'toast-wrapper': true,
-            [`toast-${this.position}`]: true,
-            [`toast-layout-${layout}`]: true,
-        };
-        /**
-         * Stacked buttons are only meant to be
-         *  used with one type of button.
-         */
-        if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
-            printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
-        }
-        return (h(Host, Object.assign({ key: '23803334fb668f6ce7044d3a321cb84bc753bd16', tabindex: "-1" }, this.htmlAttributes, { style: {
-                zIndex: `${60000 + this.overlayIndex}`,
-            }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '7cd7138ba079fccf97f318b91e9986491ab4214d', class: wrapperClass }, h("div", { key: '93b78fa64e24435adeb77a04c1d1d53d2f093864', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '9a3c71b164ebcfba2540acb7568beffa76b62f47', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'feb9268102d844f1314205f7440de7066cf0620e', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+    if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
+      printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
     }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "swipeGesture": [{
-                "swipeGestureChanged": 0
-            }],
-        "isOpen": [{
-                "onIsOpenChange": 0
-            }],
-        "trigger": [{
-                "triggerChanged": 0
-            }]
-    }; }
+    return (h(Host, Object.assign({ key: '23803334fb668f6ce7044d3a321cb84bc753bd16', tabindex: "-1" }, this.htmlAttributes, { style: {
+        zIndex: `${60000 + this.overlayIndex}`,
+      }, class: createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), h("div", { key: '7cd7138ba079fccf97f318b91e9986491ab4214d', class: wrapperClass }, h("div", { key: '93b78fa64e24435adeb77a04c1d1d53d2f093864', class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (h("ion-icon", { key: '9a3c71b164ebcfba2540acb7568beffa76b62f47', class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), h("div", { key: 'feb9268102d844f1314205f7440de7066cf0620e', class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "swipeGesture": ["swipeGestureChanged"],
+    "isOpen": ["onIsOpenChange"],
+    "trigger": ["triggerChanged"]
+  }; }
 };
 const buttonClass = (button) => {
-    return Object.assign({ 'toast-button': true, 'toast-button-icon-only': button.icon !== undefined && button.text === undefined, [`toast-button-${button.role}`]: button.role !== undefined, 'ion-focusable': true, 'ion-activatable': true }, getClassMap(button.cssClass));
+  return Object.assign({ 'toast-button': true, 'toast-button-icon-only': button.icon !== undefined && button.text === undefined, [`toast-button-${button.role}`]: button.role !== undefined, 'ion-focusable': true, 'ion-activatable': true }, getClassMap(button.cssClass));
 };
 const buttonPart = (button) => {
-    return isCancel(button.role) ? 'button cancel' : 'button';
+  return isCancel(button.role) ? 'button cancel' : 'button';
 };
 Toast.style = {
-    ios: toastIosCss(),
-    md: toastMdCss()
+  ios: toastIosCss,
+  md: toastMdCss
 };
 
 export { Toast as ion_toast };