import { h, Host } from "@stencil/core";
import { getIconName } from "../icon/get-icon-props";
/**
 * A header is the top most visual element in a component, page, card, or a view.
 *
 * ## Usage
 * A header is the first thing that clarifies a context for users.
 * Due to their positions in the UI hierarchy, headers are the most
 * prominent elements of a user interface; and because of that, they carry both
 * vital information and fundamental controls for the area of the interface
 * they represent.
 *
 * For example, when a header is placed on top of a card, it should quickly
 * explain the card to the user. When placed on top of a modal, it should easily
 * clarify what the modal is about. When displayed on top of a fullscreen view,
 * it should indicate where in the system users are, and what part of the app
 * they are looking at.
 *
 *
 * ## Layout
 * The vital information in a header is usually manifested in form of an icon,
 * and a heading. A subheading also could be added to provide supplementary
 * information. There is also a third place for displaying supplementary information
 * or "supporting text", which will be rendered as a part of the subheading.
 * Along with this information, headers can also include actions, controls, or
 * menus.
 *
 * :::important
 * Such actions or menus must affect the entire section of the interface
 * which the header is representing. For example, a _Delete_ button on a card
 * header must delete that entire card and its respective contents all together,
 * not for example a selected item which is visible in the content of that card.
 * :::
 *
 *
 * :::warning
 * Do not user background color on icons in the headers. It is much better and
 * much easier for the eye if your icon itself has a color.
 * Background colors behind icons make them look like "call to action" buttons
 * and take a lot of attention from users.
 * :::
 *
 * @exampleComponent limel-example-header-basic
 * @exampleComponent limel-example-header-slot-actions
 * @exampleComponent limel-example-header-colors
 * @exampleComponent limel-example-header-responsive
 * @exampleComponent limel-example-header-narrow
 * @slot actions - Content (actions) to be put inside the far right surface of
 * the header
 * @slot [no name] - DEPRECATED. The `actions` slot used to be unnamed. This
 * behavior has been deprecated, and support will be dropped in a future
 * version. Please add `slot="actions"` to your elements to ensure your code
 * will continue to work with future versions of Lime Elements.
 */
export class Header {
    constructor() {
        /**
         * The visual divider that separates the `subheading` and the `supportingText`.
         * It must be a single character such as `-` or `,`.
         */
        this.subheadingDivider = '·';
    }
    render() {
        return (h(Host, { key: '4a94e7808e3b295669faa4711d37f8d9ed50b006' }, h("div", { key: '7c02e31819ddac504b5c58b6200c00a621079990', class: "information" }, this.renderIcon(), h("div", { key: 'b38172e5332ee39476bd19f7ad4f0ce127cc30d6', class: "headings" }, h("h1", { key: '9ee1f899ba0f403a588e0dbca52d82c1c12e355e', class: "heading", title: this.heading }, this.heading), h("h2", { key: '49b81ef3a96a9c2f7fa27ec2d13a15907131624e', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '29984270ca745ce430deef27704b9c63065c2964', name: "actions" }, h("slot", { key: '1c3b766dc1444a0255ea605359b25d148d25ba57' }))));
    }
    renderIcon() {
        var _a, _b, _c, _d, _e;
        const icon = getIconName(this.icon);
        if (!icon) {
            return;
        }
        return (h("limel-icon", { class: "icon", badge: true, name: icon, style: {
                '--limel-header-icon-color': `${(_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : ''}`,
                '--limel-header-icon-background-color': `${(_d = (_c = this.icon) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : ''}`,
                title: `${(_e = this.icon) === null || _e === void 0 ? void 0 : _e.title}`,
            } }));
    }
    renderSupportingText() {
        if (!this.supportingText) {
            return;
        }
        return (h("span", { class: "subheading__supporting-text" }, this.renderSubheadingDivider(), this.supportingText));
    }
    renderSubheadingDivider() {
        if (!this.subheadingDivider) {
            return;
        }
        return h("span", null, this.subheadingDivider);
    }
    static get is() { return "limel-header"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["header.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["header.css"]
        };
    }
    static get properties() {
        return {
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | Icon",
                    "resolved": "Icon | string",
                    "references": {
                        "Icon": {
                            "location": "import",
                            "path": "../../global/shared-types/icon.types",
                            "id": "src/global/shared-types/icon.types.ts::Icon",
                            "referenceLocation": "Icon"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Icon to display"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Title to display"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "heading"
            },
            "subheading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Subheading to display"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "subheading"
            },
            "supportingText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "An extra string of text to display along with with the Subheading"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "supporting-text"
            },
            "subheadingDivider": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The visual divider that separates the `subheading` and the `supportingText`.\nIt must be a single character such as `-` or `,`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "subheading-divider",
                "defaultValue": "'\u00B7'"
            }
        };
    }
}
