// Stencil
import { h } from "@stencil/core";
// Tools
import { MediaTool } from '../../../tools/media-tool';
export class PresentationSlide {
    constructor() {
        this.overlay = 80;
    }
    ////////////////////////////////////////////////////////////////
    // Action Methods
    ////////////////////////////////////////////////////////////////
    /**
     * Receiver for the button click
     */
    onClick() {
        this.onStartButtonClicked.emit();
    }
    /**
     * Replace .undefined extension by .jpg
     * Fix a bug
     * @param imageUrl
     */
    fixImage(imageUrl) {
        return imageUrl.replace('.undefined', '.jpg');
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'main-container' },
            h("div", { class: 'back-picture-container', style: { backgroundImage: 'url(' + this.fixImage(MediaTool.fullScreen(this.isWeb, this.backgroundImage)) + ')', backgroundColor: 'rgba(0, 0, 0, ' + this.overlay / 100 + ')' } }),
            h("span", { class: "content-container" },
                h("span", { class: 'content-subcontainer' },
                    this.slideTitle
                        ? h("h3", { class: "slide-title" },
                            " ",
                            this.slideTitle,
                            " ")
                        : null,
                    this.slideSubtitle
                        ? h("p", { class: "slide-subtitle" },
                            " ",
                            this.slideSubtitle,
                            " ")
                        : null,
                    this.displayMessage &&
                        h("span", { class: "slide-message" },
                            h("slot", { name: 'message' })),
                    h("ion-button", { expand: 'full', fill: 'clear', class: "slide-button", onClick: () => this.onClick() },
                        h("ion-icon", { name: 'arrow-down', color: 'light' }))))));
    }
    static get is() { return "presentation-slide"; }
    static get originalStyleUrls() { return {
        "$": ["presentation-slide.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["presentation-slide.css"]
    }; }
    static get properties() { return {
        "backgroundImage": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "background-image",
            "reflect": false
        },
        "overlay": {
            "type": "number",
            "mutable": false,
            "complexType": {
                "original": "number",
                "resolved": "number",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "overlay",
            "reflect": false,
            "defaultValue": "80"
        },
        "alt": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "alt",
            "reflect": false
        },
        "slideTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "slide-title",
            "reflect": false
        },
        "slideSubtitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "slide-subtitle",
            "reflect": false
        },
        "displayMessage": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "display-message",
            "reflect": false
        },
        "buttonTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "button-title",
            "reflect": false
        },
        "buttonHref": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "button-href",
            "reflect": false
        },
        "isWeb": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "is-web",
            "reflect": false
        }
    }; }
    static get events() { return [{
            "method": "onStartButtonClicked",
            "name": "onStartButtonClicked",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
}
