/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-211ca8fb.js';
import { c as createAnimation, i as isCancel, a as prepareOverlay, b as present, d as dismiss, e as eventMethod, s as safeCall } from './overlays-e2fa6ae2.js';
import { s as sanitizeDOMString } from './index-7f4f392f.js';
import { c as createColorClasses, g as getClassMap } from './theme-c4ea3043.js';
import { g as getElementRoot } from './helpers-4b2cb009.js';
import './config-47f2ca98.js';

/**
 * MD Toast Enter Animation
 */
const EnterAnimation = (baseEl, position) => {
  const baseAnimation = createAnimation();
  const wrapperAnimation = createAnimation();
  const root = getElementRoot(baseEl);
  const wrapperEl = root.querySelector('.toast-wrapper');
  const bottom = `calc(8px + var(--gasco-safe-area-bottom, 0px))`;
  const top = `calc(8px + var(--gasco-safe-area-top, 0px))`;
  wrapperAnimation.addElement(wrapperEl);
  switch (position) {
    case 'top':
      wrapperEl.style.top = top;
      wrapperAnimation.fromTo('opacity', 0.01, 1);
      break;
    case 'middle':
      const topPosition = Math.floor(baseEl.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.easing('cubic-bezier(.36,.66,.04,1)').duration(400).addAnimation(wrapperAnimation);
};

/**
 * md Toast Leave Animation
 */
const LeaveAnimation = (baseEl) => {
  const baseAnimation = createAnimation();
  const wrapperAnimation = createAnimation();
  const root = getElementRoot(baseEl);
  const wrapperEl = root.querySelector('.toast-wrapper');
  wrapperAnimation.addElement(wrapperEl).fromTo('opacity', 0.99, 0);
  return baseAnimation.easing('cubic-bezier(.36,.66,.04,1)').duration(300).addAnimation(wrapperAnimation);
};

const gascoToastMdCss = ":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;left:0;top:0;display:block;position:fixed;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--gasco-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(.gasco-color){--button-color:inherit;color:var(--gasco-color-contrast)}:host(.gasco-color) .toast-button-cancel{color:inherit}:host(.gasco-color.gasco-color-primary) .toast-wrapper{background:#F2FCFF}:host(.gasco-color.gasco-color-danger) .toast-wrapper{background:#FFF2F2}:host(.gasco-color.gasco-color-success) .toast-wrapper{background:#F2FFFB}:host(.gasco-color.gasco-color-warning) .toast-wrapper{background:#FFFBF2}:host(.gasco-color) .toast-wrapper{border-style:solid;border-color:var(--gasco-color-base);border-width:2px 2px 2px 5px}.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);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:flex;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}.toast-content{display:flex;flex:1;flex-direction:column;justify-content:center}.toast-title{margin:0}.toast-message{flex:1;white-space:var(--white-space)}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon{padding-left:23px;align-self:baseline;margin-top:10px}:host(.gasco-color.gasco-color-primary) .toast-wrapper .toast-icon svg path{fill:var(--gasco-color-base)}:host(.gasco-color.gasco-color-danger) .toast-wrapper .toast-icon svg path{fill:var(--gasco-color-base)}:host(.gasco-color.gasco-color-success) .toast-wrapper .toast-icon svg path{fill:var(--gasco-color-base)}:host(.gasco-color.gasco-color-warning) .toast-wrapper .toast-icon svg path{fill:var(--gasco-color-base)}.toast-button-inner{display:flex;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--background:#F2FCFF;--border-radius:0px 8px 8px 0px;--box-shadow:0px 4px 8px rgba(171, 190, 209, 0.4);--button-color:var(--gasco-color-primary, #00A3E0);--color:#072531;--max-width:700px;--max-width-large:1314px;--max-width-small:298px;--start:8px;--end:inherit}.toast-wrapper{margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;opacity:1;z-index:10;width:100%;max-width:var(--max-width)}@supports (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:12px;padding-right:23px;padding-top:10px;padding-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.toast-content{padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:23px;padding-inline-end:23px}}.toast-title{font-size:16px;line-height:20px;font-weight:600;color:var(--color)}.toast-message{font-size:14px;line-height:20px;font-weight:400;color:var(--color)}:host(.toast-large) .toast-wrapper{max-width:var(--max-width-large)}:host(.toast-large) .toast-title{font-size:20px;line-height:28px}:host(.toast-large) .toast-message{font-size:16px;line-height:24px}:host(.toast-small) .toast-wrapper{max-width:var(--max-width-small)}:host(.toast-small) .toast-message{font-size:12px;line-height:16px}.toast-button{position:relative;background:transparent;padding-right:23px}.toast-button-cancel{color:var(--gasco-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 (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-cancel:hover{background-color:rgba(var(--gasco-background-color-rgb, 255, 255, 255), 0.08)}}";

const GascoToast = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.didPresent = createEvent(this, "gascoToastDidPresent", 7);
    this.willPresent = createEvent(this, "gascoToastWillPresent", 7);
    this.willDismiss = createEvent(this, "gascoToastWillDismiss", 7);
    this.didDismiss = createEvent(this, "gascoToastDidDismiss", 7);
    this.presented = false;
    /**
     * The color to use from your application's color palette.
     * Default options are: `"primary"`, `"secondary"`, `"success"`, `"warning"`, `"danger"`.
     */
    this.color = 'primary';
    /**
     * 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 = (ev) => {
      const role = ev.detail.role;
      if (isCancel(role)) {
        const cancelButton = this.getButtons().find((b) => b.role === 'cancel');
        this.callButtonHandler(cancelButton);
      }
    };
  }
  connectedCallback() {
    prepareOverlay(this.el);
  }
  /**
   * Present the toast overlay after it has been created.
   */
  async present() {
    await present(this, 'toastEnter', EnterAnimation, this.position);
    if (this.duration > 0) {
      this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
    }
  }
  /**
   * 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"`.
   */
  dismiss(data, role) {
    if (this.durationTimeout) {
      clearTimeout(this.durationTimeout);
    }
    return dismiss(this, data, role, 'toastLeave', LeaveAnimation, this.position);
  }
  /**
   * Returns a promise that resolves when the toast did dismiss.
   */
  onDidDismiss() {
    return eventMethod(this.el, 'gascoToastDidDismiss');
  }
  /**
   * Returns a promise that resolves when the toast will dismiss.
   */
  onWillDismiss() {
    return eventMethod(this.el, 'gascoToastWillDismiss');
  }
  getButtons() {
    const buttons = this.buttons
      ? this.buttons.map((b) => {
        return typeof b === 'string' ? { text: b } : b;
      })
      : [];
    return buttons;
  }
  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();
  }
  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;
  }
  render() {
    const wrapperClass = {
      'toast-wrapper': true,
      [`toast-${this.position}`]: true,
    };
    const finalSize = this.size === undefined && false ? 'small' : this.size;
    return (h(Host, Object.assign({ "aria-live": "polite", "aria-atomic": "true", role: "dialog", tabindex: "-1" }, this.htmlAttributes, { style: {
        zIndex: `${60000 + this.overlayIndex}`,
      }, class: createColorClasses(this.color, Object.assign(Object.assign({}, getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent, [`toast-${finalSize}`]: finalSize !== undefined })), onGascoToastWillDismiss: this.dispatchCancelHandler }), h("div", { class: wrapperClass }, h("div", { class: "toast-container", part: "container" }, h("div", { class: "toast-icon" }, this.color !== 'success' ? (h("svg", { width: "25", height: "24", viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M11.5 7H13.5V9H11.5V7ZM11.5 11H13.5V17H11.5V11ZM12.5 2C6.98 2 2.5 6.48 2.5 12C2.5 17.52 6.98 22 12.5 22C18.02 22 22.5 17.52 22.5 12C22.5 6.48 18.02 2 12.5 2ZM12.5 20C8.09 20 4.5 16.41 4.5 12C4.5 7.59 8.09 4 12.5 4C16.91 4 20.5 7.59 20.5 12C20.5 16.41 16.91 20 12.5 20Z", fill: "#333" }))) : (h("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M12.5 2.50385C6.989 2.50385 2.5 6.99284 2.5 12.5038C2.5 18.0148 6.989 22.5038 12.5 22.5038C18.011 22.5038 22.5 18.0148 22.5 12.5038C22.5 6.99284 18.011 2.50385 12.5 2.50385ZM12.5 4.50385C16.9301 4.50385 20.5 8.07372 20.5 12.5038C20.5 16.934 16.9301 20.5038 12.5 20.5038C8.06988 20.5038 4.5 16.934 4.5 12.5038C4.5 8.07372 8.06988 4.50385 12.5 4.50385ZM16.793 8.79681L10.5 15.0898L8.20703 12.7968L6.79297 14.2109L10.5 17.9179L18.207 10.2109L16.793 8.79681Z", fill: "#333" })))), h("div", { class: "toast-content" }, this.color === 'primary' && (h("h2", { class: "toast-title", part: "title" }, "Informativo")), this.color === 'danger' && (h("h2", { class: "toast-title", part: "title" }, "Error")), this.color === 'success' && (h("h2", { class: "toast-title", part: "title" }, "Exito")), this.color === 'warning' && (h("h2", { class: "toast-title", part: "title" }, "Alerta")), this.message !== undefined && (h("div", { class: "toast-message", part: "message", innerHTML: sanitizeDOMString(this.message) }))), h("button", { type: "button", part: "button", tabIndex: 0, onClick: this.buttonClick.bind(this), class: "toast-button focusable activatable" }, h("svg", { width: "24", height: "25", viewBox: "0 0 24 25", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M19 6.86843L17.59 5.45844L12 11.0484L6.41 5.45844L5 6.86843L10.59 12.4584L5 18.0484L6.41 19.4584L12 13.8684L17.59 19.4584L19 18.0484L13.41 12.4584L19 6.86843Z", fill: "#999999" })))))));
  }
  get el() { return getElement(this); }
};
GascoToast.style = gascoToastMdCss;

export { GascoToast as gasco_toast };
