text: import { __awaiter, __generator } from "tslib";
  import { r as registerInstance, e as createEvent, h, H as Host, i as getElement } from './index-44bf8136.js';
  import { b as getIonMode } from './ionic-global-837be8f3.js';
  import './helpers-5c745fbd.js';
  import { c as createAnimation } from './animation-a635a2fc.js';
  import { s as sanitizeDOMString } from './index-79d74e0b.js';
  import './hardware-back-button-7b6ede21.js';
  import { i as isCancel, e as prepareOverlay, d as present, f as dismiss, g as eventMethod, s as safeCall } from './overlays-7c699579.js';
  import { g as getClassMap, c as createColorClasses } from './theme-3f0b0c04.js';
  /**
   * iOS Toast Enter Animation
   */
  var iosEnterAnimation = function (baseEl, position) {
      var baseAnimation = createAnimation();
      var wrapperAnimation = createAnimation();
      var hostEl = baseEl.host || baseEl;
      var wrapperEl = baseEl.querySelector('.toast-wrapper');
      var bottom = "calc(-10px - var(--ion-safe-area-bottom, 0px))";
      var top = "calc(10px + var(--ion-safe-area-top, 0px))";
      wrapperAnimation.addElement(wrapperEl);
      switch (position) {
          case 'top':
              wrapperAnimation.fromTo('transform', 'translateY(-100%)', "translateY(" + top + ")");
              break;
          case 'middle':
              var topPosition = Math.floor(hostEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
              wrapperEl.style.top = topPosition + "px";
              wrapperAnimation.fromTo('opacity', 0.01, 1);
              break;
          default:
              wrapperAnimation.fromTo('transform', 'translateY(100%)', "translateY(" + bottom + ")");
              break;
      }
      return baseAnimation
          .addElement(hostEl)
          .easing('cubic-bezier(.155,1.105,.295,1.12)')
          .duration(400)
          .addAnimation(wrapperAnimation);
  };
  /**
   * iOS Toast Leave Animation
   */
  var iosLeaveAnimation = function (baseEl, position) {
      var baseAnimation = createAnimation();
      var wrapperAnimation = createAnimation();
      var hostEl = baseEl.host || baseEl;
      var wrapperEl = baseEl.querySelector('.toast-wrapper');
      var bottom = "calc(-10px - var(--ion-safe-area-bottom, 0px))";
      var top = "calc(10px + var(--ion-safe-area-top, 0px))";
      wrapperAnimation.addElement(wrapperEl);
      switch (position) {
          case 'top':
              wrapperAnimation.fromTo('transform', "translateY(" + top + ")", 'translateY(-100%)');
              break;
          case 'middle':
              wrapperAnimation.fromTo('opacity', 0.99, 0);
              break;
          default:
              wrapperAnimation.fromTo('transform', "translateY(" + bottom + ")", 'translateY(100%)');
              break;
      }
      return baseAnimation
          .addElement(hostEl)
          .easing('cubic-bezier(.36,.66,.04,1)')
          .duration(300)
          .addAnimation(wrapperAnimation);
  };
  /**
   * MD Toast Enter Animation
   */
  var mdEnterAnimation = function (baseEl, position) {
      var baseAnimation = createAnimation();
      var wrapperAnimation = createAnimation();
      var hostEl = baseEl.host || baseEl;
      var wrapperEl = baseEl.querySelector('.toast-wrapper');
      var bottom = "calc(8px + var(--ion-safe-area-bottom, 0px))";
      var top = "calc(8px + var(--ion-safe-area-top, 0px))";
      wrapperAnimation.addElement(wrapperEl);
      switch (position) {
          case 'top':
              wrapperEl.style.top = top;
              wrapperAnimation.fromTo('opacity', 0.01, 1);
              break;
          case 'middle':
              var 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 baseAnimation
          .addElement(hostEl)
          .easing('cubic-bezier(.36,.66,.04,1)')
          .duration(400)
          .addAnimation(wrapperAnimation);
  };
  /**
   * md Toast Leave Animation
   */
  var mdLeaveAnimation = function (baseEl) {
      var baseAnimation = createAnimation();
      var wrapperAnimation = createAnimation();
      var hostEl = baseEl.host || baseEl;
      var wrapperEl = baseEl.querySelector('.toast-wrapper');
      wrapperAnimation
          .addElement(wrapperEl)
          .fromTo('opacity', 0.99, 0);
      return baseAnimation
          .addElement(hostEl)
          .easing('cubic-bezier(.36,.66,.04,1)')
          .duration(300)
          .addAnimation(wrapperAnimation);
  };
  var 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:pre-wrap;left:0;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}:host-context([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);left:var(--start);right:var(--end);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)}[dir=rtl] .toast-wrapper,:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;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;--start:10px;--end:10px;font-size:14px}.toast-wrapper{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}}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.toast-translucent) .toast-wrapper{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.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:0.01}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);bottom:0}.toast-content{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-content{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;height:44px;-webkit-transition:background-color, opacity 100ms linear;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:17px;font-weight:500;overflow:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.toast-button{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button.ion-activated{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
  var 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:pre-wrap;left:0;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}:host-context([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);left:var(--start);right:var(--end);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)}[dir=rtl] .toast-wrapper,:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}.toast-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;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:14px}.toast-wrapper{margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:0.01;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}}.toast-content{padding-left:16px;padding-right:16px;padding-top:14px;padding-bottom:14px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.toast-content{padding-left:unset;padding-right:unset;-webkit-padding-start:16px;padding-inline-start:16px;-webkit-padding-end:16px;padding-inline-end:16px}}.toast-header{margin-bottom:2px;font-weight:500;line-height:20px}.toast-message{line-height:20px}.toast-button-group-start{margin-left:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.toast-button-group-start{margin-left:unset;-webkit-margin-start:8px;margin-inline-start:8px}}.toast-button-group-end{margin-right:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.toast-button-group-end{margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}.toast-button{padding-left:15px;padding-right:15px;padding-top:10px;padding-bottom:10px;position:relative;background-color:transparent;font-family:var(--ion-font-family);font-size:14px;font-weight:500;letter-spacing:0.84px;text-transform:uppercase;overflow:hidden}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.toast-button{padding-left:unset;padding-right:unset;-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px}}.toast-button-cancel{color:var(--ion-color-step-100, #e6e6e6)}.toast-button-icon-only{border-radius:50%;padding-left:9px;padding-right:9px;padding-top:9px;padding-bottom:9px;width:36px;height:36px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.toast-button-icon-only{padding-left:unset;padding-right:unset;-webkit-padding-start:9px;padding-inline-start:9px;-webkit-padding-end:9px;padding-inline-end:9px}}@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)}}";
  var Toast = /** @class */ (function () {
      function class_1(hostRef) {
          var _this = this;
          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.presented = false;
          /**
           * How many milliseconds to wait before hiding the toast. By default, it will show
           * until `dismiss()` is called.
           */
          this.duration = 0;
          /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
           */
          this.keyboardClose = false;
          /**
           * The position of the toast on the screen.
           */
          this.position = 'bottom';
          /**
           * If `true`, the toast will be translucent.
           * Only applies when the mode is `"ios"` and the device supports
           * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
           */
          this.translucent = false;
          /**
           * If `true`, the toast will animate.
           */
          this.animated = true;
          this.dispatchCancelHandler = function (ev) {
              var role = ev.detail.role;
              if (isCancel(role)) {
                  var cancelButton = _this.getButtons().find(function (b) { return b.role === 'cancel'; });
                  _this.callButtonHandler(cancelButton);
              }
          };
      }
      class_1.prototype.connectedCallback = function () {
          prepareOverlay(this.el);
      };
      /**
       * Present the toast overlay after it has been created.
       */
      class_1.prototype.present = function () {
          return __awaiter(this, void 0, void 0, function () {
              var _this = this;
              return __generator(this, function (_a) {
                  switch (_a.label) {
                      case 0: return [4 /*yield*/, present(this, 'toastEnter', iosEnterAnimation, mdEnterAnimation, this.position)];
                      case 1:
                          _a.sent();
                          if (this.duration > 0) {
                              this.durationTimeout = setTimeout(function () { return _this.dismiss(undefined, 'timeout'); }, this.duration);
                          }
                          return [2 /*return*/];
                  }
              });
          });
      };
      /**
       * 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"`.
       */
      class_1.prototype.dismiss = function (data, role) {
          if (this.durationTimeout) {
              clearTimeout(this.durationTimeout);
          }
          return dismiss(this, data, role, 'toastLeave', iosLeaveAnimation, mdLeaveAnimation, this.position);
      };
      /**
       * Returns a promise that resolves when the toast did dismiss.
       */
      class_1.prototype.onDidDismiss = function () {
          return eventMethod(this.el, 'ionToastDidDismiss');
      };
      /**
       * Returns a promise that resolves when the toast will dismiss.
       */
      class_1.prototype.onWillDismiss = function () {
          return eventMethod(this.el, 'ionToastWillDismiss');
      };
      class_1.prototype.getButtons = function () {
          var buttons = this.buttons
              ? this.buttons.map(function (b) {
                  return (typeof b === 'string')
                      ? { text: b }
                      : b;
              })
              : [];
          return buttons;
      };
      class_1.prototype.buttonClick = function (button) {
          return __awaiter(this, void 0, void 0, function () {
              var role, shouldDismiss;
              return __generator(this, function (_a) {
                  switch (_a.label) {
                      case 0:
                          role = button.role;
                          if (isCancel(role)) {
                              return [2 /*return*/, this.dismiss(undefined, role)];
                          }
                          return [4 /*yield*/, this.callButtonHandler(button)];
                      case 1:
                          shouldDismiss = _a.sent();
                          if (shouldDismiss) {
                              return [2 /*return*/, this.dismiss(undefined, role)];
                          }
                          return [2 /*return*/, Promise.resolve()];
                  }
              });
          });
      };
      class_1.prototype.callButtonHandler = function (button) {
          return __awaiter(this, void 0, void 0, function () {
              var rtn, e_1;
              return __generator(this, function (_a) {
                  switch (_a.label) {
                      case 0:
                          if (!(button && button.handler)) return [3 /*break*/, 4];
                          _a.label = 1;
                      case 1:
                          _a.trys.push([1, 3, , 4]);
                          return [4 /*yield*/, safeCall(button.handler)];
                      case 2:
                          rtn = _a.sent();
                          if (rtn === false) {
                              // if the return value of the handler is false then do not dismiss
                              return [2 /*return*/, false];
                          }
                          return [3 /*break*/, 4];
                      case 3:
                          e_1 = _a.sent();
                          console.error(e_1);
                          return [3 /*break*/, 4];
                      case 4: return [2 /*return*/, true];
                  }
              });
          });
      };
      class_1.prototype.renderButtons = function (buttons, side) {
          var _a;
          var _this = this;
          if (buttons.length === 0) {
              return;
          }
          var mode = getIonMode(this);
          var buttonGroupsClasses = (_a = {
                  'toast-button-group': true
              },
              _a["toast-button-group-" + side] = true,
              _a);
          return (h("div", { class: buttonGroupsClasses }, buttons.map(function (b) { return h("button", { type: "button", class: buttonClass(b), tabIndex: 0, onClick: function () { return _this.buttonClick(b); }, part: "button" }, h("div", { class: "toast-button-inner" }, b.icon &&
              h("ion-icon", { icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-icon" }), b.text), mode === 'md' && h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })); })));
      };
      class_1.prototype.render = function () {
          var _a, _b;
          var allButtons = this.getButtons();
          var startButtons = allButtons.filter(function (b) { return b.side === 'start'; });
          var endButtons = allButtons.filter(function (b) { return b.side !== 'start'; });
          var mode = getIonMode(this);
          var wrapperClass = (_a = {
                  'toast-wrapper': true
              },
              _a["toast-" + this.position] = true,
              _a);
          return (h(Host, { style: {
                  zIndex: "" + (60000 + this.overlayIndex),
              }, class: Object.assign(Object.assign(Object.assign((_b = {}, _b[mode] = true, _b), createColorClasses(this.color)), getClassMap(this.cssClass)), { 'toast-translucent': this.translucent }), tabindex: "-1", onIonToastWillDismiss: this.dispatchCancelHandler }, h("div", { class: wrapperClass }, h("div", { class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), h("div", { class: "toast-content" }, this.header !== undefined &&
              h("div", { class: "toast-header", part: "header" }, this.header), this.message !== undefined &&
              h("div", { class: "toast-message", part: "message", innerHTML: sanitizeDOMString(this.message) })), this.renderButtons(endButtons, 'end')))));
      };
      Object.defineProperty(class_1.prototype, "el", {
          get: function () { return getElement(this); },
          enumerable: false,
          configurable: true
      });
      return class_1;
  }());
  var buttonClass = function (button) {
      var _a;
      return Object.assign((_a = { 'toast-button': true, 'toast-button-icon-only': button.icon !== undefined && button.text === undefined }, _a["toast-button-" + button.role] = button.role !== undefined, _a['ion-focusable'] = true, _a['ion-activatable'] = true, _a), getClassMap(button.cssClass));
  };
  Toast.style = {
      ios: toastIosCss,
      md: toastMdCss
  };
  export { Toast as ion_toast };
  