import { Fragment, Host, h } from "@stencil/core";
export class SpwTile {
    constructor() {
        /** Type de variante de tuile */
        this.variant = 'light';
        /** Variante de hauteur de la tuile (valable pour les variants big & light) */
        this.height = 'landscape';
        /** Attribut target, s'applique uniquement si href est rempli */
        this.target = '_self';
        /** Texte alternatif de l'image de fond */
        this.imageAlt = '';
        /** Opacité de l'overlay (valeur entre 0 et 100) */
        this.overlayOpacity = 100;
    }
    componentWillLoad() {
        this.applyVariantToChildren();
    }
    slotChanged() {
        this.applyVariantToChildren();
    }
    applyVariantToChildren() {
        requestAnimationFrame(() => {
            const variantClass = `--${this.variant}`;
            const titleElement = this.el.querySelector('spw-tile-title');
            const descriptionElement = this.el.querySelector('spw-tile-description');
            titleElement && titleElement.classList.add(variantClass);
            descriptionElement && descriptionElement.classList.add(variantClass);
        });
    }
    get elementClass() {
        return {
            'spw-tile': true,
            'spw-tile--hoverable': !!this.href,
            [`spw-tile--${this.variant}`]: true,
            [`spw-tile--height-${this.height}`]: true,
        };
    }
    onMouseEnter() {
        this.setHovered(true);
    }
    onMouseLeave() {
        this.setHovered(false);
    }
    setHovered(isHovered) {
        const titleElement = this.el.querySelector('spw-tile-title');
        if (titleElement && this.href) {
            titleElement.classList.toggle('--hovered', isHovered);
        }
    }
    render() {
        const { href, target } = this;
        const TagType = this.href === undefined ? 'div' : 'a';
        const attrs = TagType === 'div'
            ? {}
            : {
                href,
                target,
            };
        return (h(Host, { key: '16f734c527ff0ac336142d6cd6cdbb0339fc61a1' }, h(TagType, Object.assign({ key: 'a40105bb95a5c6e3c14f6b1fae4a1966b78c80c0' }, attrs, { class: this.elementClass }), this.imageSrc && (this.variant === 'big' || this.variant === 'light') && (h(Fragment, { key: '7b57b8f146aa6f46b7d99e02d91f330acacf07a0' }, h("div", { key: '3c49b89e8e5c0f6935b407a2b600aaca7584534f', class: "spw-tile__overlay", style: { opacity: `${this.overlayOpacity / 100}` } }), h("img", { key: '347f6823f45bdfb03036d9e7bc26d63b318fa740', src: this.imageSrc, alt: this.imageAlt, class: "spw-tile__image" }))), h("div", { key: 'f8005c3d3776645ced88dcc32f06a462fc4a3ed4', class: "spw-tile__content" }, h("slot", { key: '4c08160a9346aa3a0af50a8288de295f84987fbb' }), this.href && this.variant === 'big' && (h("span", { key: '47f15e799b4aad2da067032d270d5c3a0b34619a', class: "spw-tile__button" }, h("spw-icon", { key: '8fd5410c6ab909df39503655ec09ecfecab972c2', icon: "fa-chevron-right" })))))));
    }
    static get is() { return "spw-tile"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-tile.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-tile.css"]
        };
    }
    static get properties() {
        return {
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'icon' | 'big' | 'light'",
                    "resolved": "\"big\" | \"icon\" | \"light\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Type de variante de tuile"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'light'"
            },
            "height": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'landscape' | 'square' | 'portrait'",
                    "resolved": "\"landscape\" | \"portrait\" | \"square\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Variante de hauteur de la tuile (valable pour les variants big & light)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "height",
                "defaultValue": "'landscape'"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sp\u00E9cifie le lien si n\u00E9cessaire"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Attribut target, s'applique uniquement si href est rempli"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "'_self'"
            },
            "imageSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Image de fond de la tuile"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-src"
            },
            "imageAlt": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte alternatif de l'image de fond"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-alt",
                "defaultValue": "''"
            },
            "overlayOpacity": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Opacit\u00E9 de l'overlay (valeur entre 0 et 100)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "overlay-opacity",
                "defaultValue": "100"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "slotChanged",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "mouseenter",
                "method": "onMouseEnter",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "mouseleave",
                "method": "onMouseLeave",
                "target": undefined,
                "capture": false,
                "passive": true
            }];
    }
}
