'use client';
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var lit = require('lit');
var decorators_js = require('lit/decorators.js');
var classMap_js = require('lit/directives/class-map.js');
var staticHtml_js = require('lit/static-html.js');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var watch = require('../../utils/watch.cjs.js');
var sgdsCloseButton = require('../CloseButton/sgds-close-button.cjs.js');
var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
var alert = require('./alert.cjs.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["default"] {
    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
            ? staticHtml_js.html `
          <div
            class="${classMap_js.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 ? staticHtml_js.html `<div class="alert-title">${this.title}</div>` : lit.nothing}
              <slot></slot>
            </div>
            ${this.dismissible
                ? staticHtml_js.html `<sgds-close-button
                  aria-label="close the alert"
                  @click=${this.close}
                  tone=${this.outlined ? "fixed-dark" : "fixed-light"}
                ></sgds-close-button>`
                : lit.nothing}
          </div>
        `
            : lit.nothing;
    }
}
SgdsAlert.styles = [...sgdsElement["default"].styles, alert["default"]];
/**@internal */
SgdsAlert.dependencies = {
    "sgds-close-button": sgdsCloseButton.SgdsCloseButton,
    "sgds-icon": sgdsIcon.SgdsIcon
};
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsAlert.prototype, "show", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsAlert.prototype, "dismissible", void 0);
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true })
], SgdsAlert.prototype, "variant", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsAlert.prototype, "outlined", void 0);
tslib.__decorate([
    decorators_js.property({ type: String, reflect: true })
], SgdsAlert.prototype, "title", void 0);
tslib.__decorate([
    watch.watch("show")
], SgdsAlert.prototype, "_handleShowChange", null);

exports.SgdsAlert = SgdsAlert;
exports["default"] = SgdsAlert;
//# sourceMappingURL=sgds-alert.cjs.js.map
