// Stencil
import { h } from "@stencil/core";
export class ListOverview {
    constructor() {
        // Props
        this.placeTitle = '';
        this.iconPath = '';
        this.iconColor = '';
        this.iconStyle = '';
        this.placeDescription = '';
        this.tags = [];
        this.index = 0;
        this.readMoreButton = '';
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    /**
     * The user wants to display the full profile
     */
    onPlaceDetailsClick() {
        this.placeDetailsClick.emit();
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'list-main-container' },
            h("h3", { class: 'place-title' },
                h("span", null, this.placeTitle)),
            h("p", { class: 'place-description' }, this.placeDescription),
            h("div", { class: "place-tag-container" },
                h("div", { class: 'place-tag-subcontainer' }, this.tags.map(tag => h("p", { class: 'place-tag' },
                    "# ",
                    tag))),
                h("ion-button", { fill: 'clear', color: 'primary', class: 'full-portrait-button', onClick: () => this.onPlaceDetailsClick() },
                    "+ ",
                    this.readMoreButton)),
            h("ion-grid", { class: "images-grid" },
                h("ion-row", null,
                    h("ion-col", { size: this.index % 2 === 0 ? "9" : "3" },
                        h("div", { style: { backgroundImage: 'url(' + this.primaryImage.media + ')' }, class: 'place-image first-list-image' })),
                    h("ion-col", { size: this.index % 2 === 0 ? "3" : "9" },
                        h("div", { style: { backgroundImage: 'url(' + this.secondaryImage.media + ')' }, class: 'place-image' }))))));
    }
    static get is() { return "list-overview"; }
    static get originalStyleUrls() { return {
        "$": ["list-overview.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["list-overview.css"]
    }; }
    static get properties() { return {
        "placeTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "place-title",
            "reflect": false,
            "defaultValue": "''"
        },
        "iconPath": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-path",
            "reflect": false,
            "defaultValue": "''"
        },
        "iconColor": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-color",
            "reflect": false,
            "defaultValue": "''"
        },
        "iconStyle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "icon-style",
            "reflect": false,
            "defaultValue": "''"
        },
        "placeDescription": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "place-description",
            "reflect": false,
            "defaultValue": "''"
        },
        "tags": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "string[]",
                "resolved": "string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "primaryImage": {
            "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": ""
            }
        },
        "secondaryImage": {
            "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": ""
            }
        },
        "index": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "index",
            "reflect": false,
            "defaultValue": "0"
        },
        "readMoreButton": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "read-more-button",
            "reflect": false,
            "defaultValue": "''"
        }
    }; }
    static get events() { return [{
            "method": "placeDetailsClick",
            "name": "placeDetailsClick",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
