import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f1d2a96f.js';

const scAlertCss = ":host{display:block}[hidden]{display:none !important}::slotted(*:not(:last-child)){margin-top:0.5rem}::slotted(ul){line-height:1.4em;list-style-type:disc;margin:0;padding:0;padding-left:20px}.alert{font-family:var(--sc-input-font-family);font-weight:var(--sc-font-weight-normal);font-size:var(--sc-button-font-size-medium);line-height:var(--sc-line-height-dense);border-radius:var(--sc-alert-border-radius, var(--sc-border-radius-medium));padding:var(--sc-spacing-large);display:flex;align-items:flex-start}.alert.alert--primary{background-color:var(--sc-color-primary-100);color:var(--sc-color-primary-800)}.alert.alert--primary .alert__title{color:var(--sc-color-primary-900)}.alert.alert--primary .alert__icon{color:var(--sc-color-primary-600)}.alert.alert--info{background-color:var(--sc-color-info-100);color:var(--sc-color-info-800)}.alert.alert--info .alert__title{color:var(--sc-color-info-900)}.alert.alert--danger{background-color:var(--sc-color-danger-100);color:var(--sc-color-danger-800)}.alert.alert--danger .alert__title{color:var(--sc-color-danger-900)}.alert.alert--danger .alert__icon{color:var(--sc-color-danger-600)}.alert.alert--danger .alert__close:hover{background-color:var(--sc-color-danger-200)}.alert.alert--warning{background-color:var(--sc-color-warning-100);color:var(--sc-color-warning-800)}.alert.alert--warning .alert__title{color:var(--sc-color-warning-900)}.alert.alert--warning .alert__icon{color:var(--sc-color-warning-600)}.alert.alert--warning .alert__close:hover{background-color:var(--sc-color-warning-200)}.alert.alert--success{background-color:var(--sc-color-success-100);color:var(--sc-color-success-800)}.alert.alert--success .alert__title{color:var(--sc-color-success-900)}.alert__icon{flex-shrink:1;margin-right:var(--sc-spacing-medium)}.alert__icon svg,.alert__icon slot[name=icon]{width:1em;height:1em}.alert__title{font-weight:var(--sc-font-weight-semibold)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert__close{transition:background-color var(--sc-transition-fast) ease;display:inline-flex;border-radius:var(--sc-border-radius-small);padding:var(--sc-spacing-x-small);margin-left:auto;cursor:pointer}.alert__close svg{width:1em;height:1em}";

const ScAlert = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.scHide = createEvent(this, "scHide", 7);
    this.scShow = createEvent(this, "scShow", 7);
    /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
    this.open = false;
    /** Makes the alert closable. */
    this.closable = false;
    /** The type of alert. */
    this.type = 'primary';
    /**
     * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
     * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`.
     */
    this.duration = Infinity;
    /** Scroll margin */
    this.scrollMargin = '0px';
  }
  /** Shows the alert. */
  async show() {
    if (this.open) {
      return;
    }
    this.open = true;
  }
  /** Hides the alert */
  async hide() {
    if (!this.open) {
      return;
    }
    this.open = false;
  }
  restartAutoHide() {
    clearTimeout(this.autoHideTimeout);
    if (this.open && this.duration < Infinity) {
      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
    }
  }
  handleMouseMove() {
    this.restartAutoHide();
  }
  handleCloseClick() {
    this.hide();
  }
  /** Emit event when showing or hiding changes */
  handleOpenChange() {
    this.open ? this.scShow.emit() : this.scHide.emit();
    if (this.open && this.scrollOnOpen) {
      this.el.scrollIntoView({ behavior: 'smooth' });
    }
  }
  componentDidLoad() {
    this.handleOpenChange();
  }
  iconName() {
    switch (this.type) {
      case 'danger':
        return 'alert-circle';
      case 'success':
        return 'check-circle';
      case 'warning':
        return 'alert-triangle';
      default:
        return 'info';
    }
  }
  icon() {
    return h("sc-icon", { name: this.iconName() });
  }
  render() {
    return (h(Host, { style: { 'scroll-margin-top': this.scrollMargin } }, h("div", { class: {
        'alert': true,
        'alert--primary': this.type === 'primary',
        'alert--success': this.type === 'success',
        'alert--info': this.type === 'info',
        'alert--warning': this.type === 'warning',
        'alert--danger': this.type === 'danger',
      }, part: "base", role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', hidden: this.open ? false : true, onMouseMove: () => this.handleMouseMove() }, h("div", { class: "alert__icon", part: "icon" }, h("slot", { name: "icon" }, this.icon())), h("div", { class: "alert__text", part: "text" }, h("div", { class: "alert__title", part: "title" }, h("slot", { name: "title" })), h("div", { class: "alert__message", part: "message" }, h("slot", null))), this.closable && (h("span", { class: "alert__close", onClick: () => this.handleCloseClick() }, h("span", { class: "sr-only" }, "Dismiss"), h("svg", { class: "h-5 w-5", "x-description": "Heroicon name: solid/x", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, h("path", { "fill-rule": "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", "clip-rule": "evenodd" })))))));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "open": ["handleOpenChange"]
  }; }
};
ScAlert.style = scAlertCss;

export { ScAlert as sc_alert };
