import { Host, h } from "@stencil/core";
/**
 * @slot actions - Slot for alert actions.
 * @part dismiss
 */
export class PdsAlert {
    constructor() {
        /**
         * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.
         */
        this.small = false;
        /**
         * If true, shows the dismiss button. If false, the dismiss button is hidden.
         * @defaultValue false
         */
        this.dismissible = false;
        /**
         * If true, the leading icon is hidden.
         * @defaultValue false
         */
        this.hideIcon = false;
        /**
         * Sets the style variant of the alert.
         * @defaultValue 'default'
         */
        this.variant = 'default';
        this.hasActionsContent = false;
        this.handleCloseClick = () => {
            this.pdsAlertDismissClick.emit();
        };
    }
    componentWillRender() {
        // Check if the actions slot has any content.
        // If not, hide the actions container to prevent empty space.
        const actionsSlot = this.el.querySelector('[slot="actions"]');
        this.hasActionsContent = !!actionsSlot;
    }
    renderActions(isSmall) {
        return (h("pds-box", { class: isSmall ? "pds-alert__actions--small" : "pds-alert__actions", gap: "sm", flex: isSmall ? "none" : undefined, "align-items": isSmall ? undefined : "center" }, h("slot", { name: "actions" })));
    }
    renderContent() {
        if (this.small) {
            return (h("pds-box", { display: "flex", gap: "md", "align-items": "center" }, h("pds-text", { truncate: this.small, class: "pds-alert__description--small", color: "var(--pds-alert-color-text)", tag: "p" }, h("slot", null)), this.hasActionsContent && this.renderActions(true)));
        }
        return (h("div", null, h("pds-text", { class: "pds-alert__description", color: "var(--pds-alert-color-text)", tag: "p" }, h("slot", null)), this.hasActionsContent && this.renderActions(false)));
    }
    render() {
        const iconMap = {
            danger: 'warning-filled',
            default: 'info-circle-filled',
            info: 'info-circle-filled',
            success: 'check-circle-filled',
            warning: 'info-circle-filled',
        };
        // Get the icon name based on the current variant
        const iconName = iconMap[this.variant] || iconMap.default;
        return (h(Host, { key: 'fb36c6626a4b775971032936f3cc876d2471fc71', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '5f80f68bfce168e11b9e83760b4a8d08b4a73b6b', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, h("pds-box", { key: '905b10e7132f0af4a37c4302f3a36fa48a6bcd68', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, !this.hideIcon && (h("pds-icon", { key: '278a614c942b76d923624c8df102e0138f39b142', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" })), h("pds-box", { key: '48b11184d688ebe68248b0d9198d491d42bb51c4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: '53930d08b766a91f8db5ef349d5bb7ac70e0a5cd', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: '95f4cd20c9e0fa9e652ebe7c9015aa73dad233d0', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, h("pds-icon", { key: '3a8e7d24d602839c7250033f06899c1dc46467ce', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
    }
    static get is() { return "pds-alert"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-alert.tokens.scss", "pds-alert.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-alert.tokens.css", "pds-alert.css"]
        };
    }
    static get properties() {
        return {
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text displayed as the heading of the alert."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "heading"
            },
            "small": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "small",
                "defaultValue": "false"
            },
            "dismissible": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "If true, shows the dismiss button. If false, the dismiss button is hidden."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "dismissible",
                "defaultValue": "false"
            },
            "hideIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "If true, the leading icon is hidden."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-icon",
                "defaultValue": "false"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'danger' | 'info' | 'success' | 'warning'",
                    "resolved": "\"danger\" | \"default\" | \"info\" | \"success\" | \"warning\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "'default'"
                        }],
                    "text": "Sets the style variant of the alert."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'default'"
            }
        };
    }
    static get states() {
        return {
            "hasActionsContent": {}
        };
    }
    static get events() {
        return [{
                "method": "pdsAlertDismissClick",
                "name": "pdsAlertDismissClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event emitted when the dismiss button is clicked."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=pds-alert.js.map
