import { r as registerInstance, h, H as Host, g as getElement } from './index-6d2d4f7b.js';
import { c as classnames } from './index-713f92a5.js';
import { s as statusNote } from './status-note-d227f142.js';

const notificationMessageCss = ":host{--width:100%;--radius:var(--scl-radius-8);--border:1px solid var(--scl-color-white);--background-error:hsla(353.79999999999995, 100%, 88.6%, 0.35);--background-warning:hsla(33.5, 100%, 75.1%, 0.3);--background-informational:hsla(190.20000000000005, 100%, 92%, 0.75);--background-success:hsl(98.80000000000001, 49.7%, 61%, 0.2)}.notification-message{border:var(--border);border-radius:var(--radius);width:var(--width);position:relative}.notification-message--variant-error{background:var(--background-error)}.notification-message--variant-warning{background-color:var(--background-warning)}.notification-message--variant-informational{background-color:var(--background-informational)}.notification-message--variant-success{background-color:var(--background-success)}.notification-message__heading{margin:14px 48px 14px 48px;font-weight:var(--scl-font-weight-bold);line-height:var(--scl-font-line-height-125)}.notification-message__text{margin:8px 48px 15px 48px}::slotted(*){font-weight:var(--scl-font-weight-regular)}.notification-message__icon-close{position:absolute;top:8px;right:13.5px;color:black}.notification-message__icon-close svg{height:19px;width:19px;padding:6.5px;border-radius:20%}.notification-message__icon-close:hover svg{background-color:white;color:var(--scl-color-primary-hover)}.notification-message__icon-success{position:absolute;top:13.5px;left:17px;height:20px;width:20px;color:var(--scl-color-background-success)}.notification-message__icon-error{position:absolute;top:12px;left:17px;height:20px;width:20px;color:var(--scl-color-background-error)}.notification-message__icon-information{position:absolute;top:12px;left:17px;height:20px;width:20px;color:var(--scl-color-text-info)}@media screen and (forced-colors: active), (-ms-high-contrast: active){.notification-message__icon-close{color:white}}";

const TIMEOUT = 3000;
const NotificationMessage = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.variant = 'informational';
    this.dismissible = false;
    this.timeout = false;
    this.close = () => {
      this.opened = false;
    };
  }
  componentDidLoad() {
    this.hasSlotText = !!this.hostElement.querySelector("p[slot='text']");
  }
  componentDidRender() {
    if (this.timeout) {
      const timeout = this.timeout === true ? TIMEOUT : this.timeout;
      setTimeout(this.close, timeout);
    }
  }
  connectedCallback() {
    statusNote({ source: this.hostElement, type: 'warn' });
  }
  async open() {
    this.opened = true;
  }
  handleIcons() {
    if (this.variant) {
      switch (this.variant) {
        case 'success':
          return (h("scale-notification-message-svg", { class: "notification-message__icon-success", "accessibility-title": "success" }));
        case 'informational':
          return (h("scale-icon-alert-information", { class: "notification-message__icon-information", "accessibility-title": "information" }));
        case 'error':
          return (h("scale-icon-alert-warning", { class: "notification-message__icon-error", "accessibility-title": "error" }));
        case 'warning':
          return (h("scale-icon-alert-information", { class: "notification-message__icon-information", color: "#AE461C", "accessibility-title": "information" }));
      }
    }
    return;
  }
  render() {
    if (!this.opened) {
      return null;
    }
    return (h(Host, null, h("div", { part: this.getBasePartMap(), class: this.getCssClassMap(), tabindex: "0" }, h("div", { part: "container", class: "notification-message__container" }, this.handleIcons(), h("div", { part: "heading", class: "notification-message__heading" }, h("slot", null, "\u2003"), this.dismissible && (h("scale-icon-action-circle-close", { tabindex: "0", class: "notification-message__icon-close", onClick: () => {
        this.close();
      }, onKeyDown: (e) => {
        if (e.key === 'Enter') {
          this.close();
        }
      }, "accessibility-title": "close" }))), this.hasSlotText && (h("div", { part: "text", class: "notification-message__text" }, h("slot", { name: "text" })))))));
  }
  getBasePartMap() {
    return this.getCssOrBasePartMap('basePart');
  }
  getCssClassMap() {
    return this.getCssOrBasePartMap('css');
  }
  getCssOrBasePartMap(mode) {
    const name = 'notification-message';
    const prefix = mode === 'basePart' ? '' : `${name}--`;
    return classnames(name, this.variant && `${prefix}variant-${this.variant}`);
  }
  get hostElement() { return getElement(this); }
};
NotificationMessage.style = notificationMessageCss;

export { NotificationMessage as scale_notification_message };
