// Stencil
import { h } from "@stencil/core";
// Tools
import { MarkdownTool } from '../../../tools/markdown-tool';
import { MediaTool } from '../../../tools/media-tool';
export class GoodToKnowContent {
    constructor() {
        // Props
        this.contentTitle = '';
        this.contentSubtitle = '';
        this.elements = [];
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: "full-container" },
            h("div", { style: { backgroundImage: 'url(' + MediaTool.imageXL(this.backgroundImage) + ')' }, class: "image-container" }),
            h("div", { class: "scroll-container" },
                h("div", { class: "title-container" },
                    h("h1", { class: "content-title" },
                        h("span", null,
                            " ",
                            this.contentTitle,
                            " ")),
                    h("h2", { class: "content-subtitle" },
                        h("span", null, this.contentSubtitle))),
                h("div", { class: "content-container" },
                    h("div", { class: "elements-container" }, this.elements.map(element => h("div", { class: "element-container" },
                        h("h3", { class: "element-title" }, element.title),
                        h("div", { class: "element-text", innerHTML: MarkdownTool.render(element.text) }))))))));
    }
    static get is() { return "good-to-know-content"; }
    static get originalStyleUrls() { return {
        "$": ["good-to-know-content.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["good-to-know-content.css"]
    }; }
    static get properties() { return {
        "contentTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "content-title",
            "reflect": false,
            "defaultValue": "''"
        },
        "contentSubtitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "content-subtitle",
            "reflect": false,
            "defaultValue": "''"
        },
        "backgroundImage": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "MediaElement",
                "resolved": "MediaElement",
                "references": {
                    "MediaElement": {
                        "location": "import",
                        "path": "../../../models/media/media-model"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "elements": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "GTKElement[]",
                "resolved": "GTKElement[]",
                "references": {
                    "GTKElement": {
                        "location": "import",
                        "path": "./GTKElement"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        }
    }; }
}
