import { h, Host } from "@stencil/core";
import { getHeading, getIcon } from "./callout.helpers";
/**
 * Callouts—also known as Admonitions—are useful for including supportive or
 * special content within a large piece of text, or even inside a user
 * interface.
 *
 * When used in a document or text based user interface, the callout attracts
 * the reader's attention to a particular piece of information, without
 * significantly interrupting their flow of reading the document.
 *
 * In a user interface, a callout is more intrusive to the end-user. Still, it
 * could be a good choice when you intend to slightly disturb the user's
 * attention, and challenge them to pay extra attention to the information
 * presented. In such cases, a callout should not be used as a static and
 * constantly present element of the UI. Rather, it should be displayed when
 * something unusual or remarkable demands the user's attention.
 *
 * @exampleComponent limel-example-callout-note
 * @exampleComponent limel-example-callout-important
 * @exampleComponent limel-example-callout-tip
 * @exampleComponent limel-example-callout-caution
 * @exampleComponent limel-example-callout-warning
 * @exampleComponent limel-example-callout-rich-content
 * @exampleComponent limel-example-callout-custom-heading
 * @exampleComponent limel-example-callout-custom-icon
 * @exampleComponent limel-example-callout-styles
 * @exampleComponent limel-example-custom-type
 * @exampleComponent limel-example-callout-composite
 */
export class Callout {
    constructor() {
        /**
         * Defines how the component is visualized, for example
         * which heading, color or icon is used in its user interface.
         */
        this.type = 'note';
        /**
         * Defines the language for translations.
         * Will translate the default headings for supported languages.
         */
        this.language = 'en';
    }
    render() {
        return (h(Host, { key: '9af3d9dc95f93714f7f334695d64f7f02b8b52e2' }, h("div", { key: '014e90ead94b3c88f33dcb40de1a56d6b85c4c9b', class: "side", role: "presentation" }, h("limel-icon", { key: '042773fb922877be2b6ef77c276a4b24c48517e2', name: getIcon(this.icon, this.type) })), h("div", { key: 'b211a6f7eb0d2680ef96adbbb5b4646c44e8d147', class: "main" }, h("h1", { key: '7e4f4d05a54cc719b51144a21b28cfc1b1024a52', class: "heading" }, getHeading(this.heading, this.type, this.language)), h("slot", { key: 'd1f333b26662b75cd403e3048229e6926e4279ed' }))));
    }
    static get is() { return "limel-callout"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["callout.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["callout.css"]
        };
    }
    static get properties() {
        return {
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Heading of the callout, which can be used to override the\ndefault heading which is displayed based on the chosen `type`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "heading"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Icon of the callout, which can be used to override the\ndefault icon which is displayed based on the chosen `type`."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "icon"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "CalloutType",
                    "resolved": "\"caution\" | \"important\" | \"note\" | \"tip\" | \"warning\"",
                    "references": {
                        "CalloutType": {
                            "location": "import",
                            "path": "../callout/callout.types",
                            "id": "src/components/callout/callout.types.ts::CalloutType",
                            "referenceLocation": "CalloutType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines how the component is visualized, for example\nwhich heading, color or icon is used in its user interface."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "type",
                "defaultValue": "'note'"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Languages",
                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
                    "references": {
                        "Languages": {
                            "location": "import",
                            "path": "../date-picker/date.types",
                            "id": "src/components/date-picker/date.types.ts::Languages",
                            "referenceLocation": "Languages"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the language for translations.\nWill translate the default headings for supported languages."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "'en'"
            }
        };
    }
}
