import { h } from "@stencil/core";
/**
 * An alert dialog interrupts the user flow. It can be used when an explicit
 * decision or acknowledgement from the user is needed in order to safely continue
 * the flow.
 *
 * When to use
 * [`limebb-alert-dialog`](https://lundalogik.github.io/lime-crm-building-blocks/versions/1.111.0/#/component/limebb-alert-dialog/)
 * instead of the
 * [more generic `limel-dialog` component](https://lundalogik.github.io/lime-elements/versions/latest/#/component/limel-dialog/)
 * ?
 *
 * Use an alert dialog when:
 * - Your message fits into one of the predefined variants of `type`
 * - The user must decide how to proceed, or take a pause to read the message
 * - The current task needs to be blocked
 * - An action carries a meaningful risk or irreversible consequence
 *
 * This will help to create a consistent alert delivery mechanism across the entire system,
 * which the user will recognize easily.
 *
 * :::warning
 * Do **not** use an alert dialog for:
 * - Passive information
 * - Unimportant or expected success messages
 * - Status updates
 * - Validation errors
 *
 * Frequent appearance of alert dialogs indicates incorrect usage and degrades user trust.
 * Consider using
 * [`limel-snackbar`](https://lundalogik.github.io/lime-elements/versions/latest/#/component/limel-snackbar/)
 * for such instances.
 * :::
 *
 * @exampleComponent limebb-example-alert-dialog-basic
 * @exampleComponent limebb-example-alert-dialog-type-note
 * @exampleComponent limebb-example-alert-dialog-type-success
 * @exampleComponent limebb-example-alert-dialog-type-caution
 * @exampleComponent limebb-example-alert-dialog-type-warning
 * @exampleComponent limebb-example-alert-dialog-icon
 * @exampleComponent limebb-example-alert-dialog-button-slots
 *
 * @beta
 */
export class LimebbAlertDialog {
    constructor() {
        /**
         * Defines how the component is visualized with a default icon and fixed color scheme.
         */
        this.type = 'note';
        /**
         * Controls whether the dialog is open
         * (controlled by the parent)
         */
        this.open = false;
        this.handleClose = () => {
            this.dismiss.emit();
        };
    }
    render() {
        return (h("limel-dialog", { key: '3f5f48a6d69f5d5d987a83496ea3a4689a871d40', open: this.open, onClose: this.handleClose }, h("div", { key: 'f24667a0dcaa1d983ac8d1cb1c4dda5542f9316f', class: "dialog-content" }, h("div", { key: '1dca7c8e353f51a17db6a2567c950e8f4848719e', class: "icon-slot" }, h("limel-icon", { key: 'bafe113f1af3cec70a519ab019acc1ceb738b20c', name: this.getIconName(), "aria-hidden": "true" })), h("h1", { key: 'cf98256b973e3d0955d11085d76a47559745dc09', id: "alert-dialog-title" }, this.heading), this.renderSubheading()), h("div", { key: '956139621f95e0011e4ecfb40b4b6ecc9a66765d', slot: "button" }, h("slot", { key: 'a92104ece4fd7998c45adb05e143880f541f3aab', name: "button" }))));
    }
    renderSubheading() {
        if (!this.subheading) {
            return null;
        }
        return h("h2", { id: "alert-dialog-content" }, this.subheading);
    }
    getIconName() {
        if (this.icon) {
            return this.icon;
        }
        const defaultIcons = {
            note: 'information',
            success: 'check_mark',
            caution: 'error_(14)',
            warning: 'multiply',
        };
        return defaultIcons[this.type];
    }
    static get is() { return "limebb-alert-dialog"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["alert-dialog.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["alert-dialog.css"]
        };
    }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "AlertType",
                    "resolved": "\"caution\" | \"note\" | \"success\" | \"warning\"",
                    "references": {
                        "AlertType": {
                            "location": "import",
                            "path": "./alert-dialog.types",
                            "id": "src/components/alert-dialog/alert-dialog.types.ts::AlertType",
                            "referenceLocation": "AlertType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines how the component is visualized with a default icon and fixed color scheme."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "type",
                "defaultValue": "'note'"
            },
            "open": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Controls whether the dialog is open\n(controlled by the parent)"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "open",
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Icon to display. If not provided, a default icon based on the type will be used."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "icon"
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Heading text"
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "heading"
            },
            "subheading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Subheading text"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "subheading"
            }
        };
    }
    static get events() {
        return [{
                "method": "dismiss",
                "name": "dismiss",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when the dialog should be dismissed\n(ESC, backdrop click, close link)"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
}
