// Stencil
import { h } from "@stencil/core";
// Tools
import { MediaTool } from '../../../tools/media-tool';
export class PlaceContentOverview {
    constructor() {
        // Properties
        this.contentId = ''; // Content id
        this.backgroundImage = [];
        this.backgroundColor = '';
        this.contentTitle = '';
        this.contentSubtitle = '';
        this.openButton = '';
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * Click on the content
     */
    onContentClick() {
        this.contentClicked.emit(this.contentId);
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'item-container', onClick: () => this.onContentClick() },
            h("div", { class: 'rectangular-bloc', style: { backgroundColor: this.backgroundColor } },
                h("div", { class: 'icon-container' },
                    h("slot", { name: "icon" })),
                h("h4", { class: 'item-title' }, this.contentTitle),
                h("p", { class: 'item-subtitle' }, this.contentSubtitle)),
            h("div", { class: 'triangle-bloc', style: { borderRightColor: this.backgroundColor } }),
            h("div", { class: 'image-container', style: { backgroundImage: 'url(' + MediaTool.imageL(this.backgroundImage) + ')', backgroundColor: 'rgba(0, 0, 0)' } }),
            h("ion-button", { color: 'secondary', size: "small", style: { '--button-color': this.backgroundColor }, shape: 'round', class: 'start-button', onClick: () => this.onContentClick() }, this.openButton)));
    }
    static get is() { return "place-content-overview"; }
    static get originalStyleUrls() { return {
        "$": ["place-content-overview.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["place-content-overview.css"]
    }; }
    static get properties() { return {
        "contentId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "content-id",
            "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": ""
            },
            "defaultValue": "[]"
        },
        "backgroundColor": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "background-color",
            "reflect": false,
            "defaultValue": "''"
        },
        "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": "''"
        },
        "openButton": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "open-button",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get events() { return [{
            "method": "contentClicked",
            "name": "contentClicked",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }]; }
}
