import { __decorate } from 'tslib';
import { nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { html } from 'lit/static-html.js';
import SgdsElement from '../../base/sgds-element.js';
import { watch } from '../../utils/watch.js';
import { SgdsCloseButton } from '../CloseButton/sgds-close-button.js';
import { SgdsIcon } from '../Icon/sgds-icon.js';
import css_248z from './alert.js';

/**
 * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.
 *
 * @slot default - The alert's main content.
 * @slot icon - An icon to show in the alert. Pass in SVG elements.
 *
 * @event sgds-show - Emitted when the alert appears.
 * @event sgds-hide - Emitted after the alert closes.
 *
 */
class SgdsAlert extends SgdsElement {
    constructor() {
        super(...arguments);
        /** Controls the appearance of the alert  */
        this.show = false;
        /** Enables a close button that allows the user to dismiss the alert. */
        this.dismissible = false;
        /** The alert's theme variant. */
        this.variant = "info";
        /** Controls the alert visual between a lighter outline and a solid darker variant. */
        this.outlined = false;
    }
    /** Closes the alert  */
    close() {
        this.show = false;
    }
    /**@internal */
    _handleShowChange() {
        this.show ? this.emit("sgds-show") : this.emit("sgds-hide");
    }
    render() {
        return (this.dismissible && this.show) || !this.dismissible
            ? html `
          <div
            class="${classMap({
                alert: true,
                show: this.show,
                [`alert-dismissible`]: this.dismissible,
                outlined: this.outlined
            })}"
            role="alert"
            aria-hidden=${this.show ? "false" : "true"}
          >
            <slot name="icon"></slot>
            <div class="alert-content">
              ${this.title ? html `<div class="alert-title">${this.title}</div>` : nothing}
              <slot></slot>
            </div>
            ${this.dismissible
                ? html `<sgds-close-button
                  aria-label="close the alert"
                  @click=${this.close}
                  tone=${this.outlined ? "fixed-dark" : "fixed-light"}
                ></sgds-close-button>`
                : nothing}
          </div>
        `
            : nothing;
    }
}
SgdsAlert.styles = [...SgdsElement.styles, css_248z];
/**@internal */
SgdsAlert.dependencies = {
    "sgds-close-button": SgdsCloseButton,
    "sgds-icon": SgdsIcon
};
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsAlert.prototype, "show", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsAlert.prototype, "dismissible", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsAlert.prototype, "variant", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsAlert.prototype, "outlined", void 0);
__decorate([
    property({ type: String, reflect: true })
], SgdsAlert.prototype, "title", void 0);
__decorate([
    watch("show")
], SgdsAlert.prototype, "_handleShowChange", null);

export { SgdsAlert, SgdsAlert as default };
//# sourceMappingURL=sgds-alert.js.map
