import { r as registerInstance, h, g as getElement } from './index-cdf8e526.js';
import { m as modifiersToClass } from './utils-f909044c.js';

const notificationCss = ".ibk-notification{padding:17px 20px;border-radius:4px;width:100%;display:none;box-sizing:border-box}.ibk-notification *{box-sizing:border-box}.ibk-notification__icon{margin-right:10px;font-size:20px}.ibk-notification__message{font-family:var(--fontMontserrat);font-size:14px;font-weight:500;line-height:20px;color:var(--grayText)}.ibk-notification--success{background-color:var(--primaryGreen5)}.ibk-notification--success .ibk-notification__icon{color:var(--primaryGreen1)}.ibk-notification--alert{background-color:var(--extendedYellow5)}.ibk-notification--alert .ibk-notification__icon{color:var(--extendedYellow1)}.ibk-notification--error{background-color:var(--extendedWatermelon5)}.ibk-notification--error .ibk-notification__icon{color:var(--extendedWatermelon1)}.ibk-notification--info{background-color:var(--extendedLightBlue5)}.ibk-notification--info .ibk-notification__icon{color:var(--extendedLightBlue1)}.ibk-notification--container-off{background-color:transparent;padding:0}.ibk-notification--auto{width:auto;padding-right:50px}.ibk-notification--show:not(.ibk-notification--auto){display:flex}.ibk-notification--show.ibk-notification--auto{display:inline-flex}.ibk-notification--fixed{position:fixed;top:0;left:0;width:100%;border-radius:0}";

const IbkNotification = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /** Define el tipo de notificación a mostrar<br>
     * <strong>success: </strong>Color verde<br>
     * <strong>error: </strong>Color rojo<br>
     * <strong>alert: </strong>Color amarillo<br>
     * <strong>info: </strong>Color celeste
     */
    this.type = 'success';
    /** Define si se muestra la notificación en un contenedor */
    this.container = 'on';
    /** Define el ancho de la notificación */
    this.width = 'full';
    /** Define si la notificación se mantendrá oculta */
    this.show = false;
    /** Configura la clase del componente basado en estados y modificadores */
    this.containerClass = () => {
      return modifiersToClass('ibk-notification', [
        this.type,
        { 'container-off': this.container == 'off' },
        { auto: this.width == 'auto' },
        { show: this.show },
        { fixed: this.fixed }
      ]);
    };
  }
  watchingShowProp(show) {
    if (show && this.timeout) {
      setTimeout(() => this.host.removeAttribute('show'), this.timeout);
    }
  }
  componentWillLoad() {
    if (this.show && this.timeout) {
      setTimeout(() => this.host.removeAttribute('show'), this.timeout);
    }
  }
  render() {
    return (h("div", { class: this.containerClass(), style: { width: this.width + 'px' } }, h("i", { class: 'ibk-notification__icon icon-m-status-' + this.type }), h("span", { class: "ibk-notification__message", innerHTML: this.message })));
  }
  get host() { return getElement(this); }
  static get watchers() { return {
    "show": ["watchingShowProp"]
  }; }
};
IbkNotification.style = notificationCss;

export { IbkNotification as ibk_notification };
