import { h } from "@stencil/core";
export class SpwCardImage {
    constructor() {
        /** Icône affichée au survol de l'image (référence Font Awesome) */
        this.hoverIcon = 'fa-plus';
    }
    componentDidLoad() {
        const card = this.el.closest('spw-card');
        if (card) {
            card.addEventListener('mouseenter', () => this.onCardHover(true));
            card.addEventListener('mouseleave', () => this.onCardHover(false));
        }
    }
    onCardHover(hovered) {
        const icon = this.el.shadowRoot.querySelector('.spw-card-image');
        if (icon) {
            if (hovered) {
                icon.classList.add('--is-hovered');
            }
            else {
                icon.classList.remove('--is-hovered');
            }
        }
    }
    get hasRatio() {
        return !!(this.ratio || this.ratioMobile || this.ratioTablet || this.ratioDesktop);
    }
    get elementClass() {
        return {
            'spw-card-image': true,
            'spw-card-image--ratio': this.hasRatio,
        };
    }
    render() {
        const style = {};
        if (this.ratio) {
            style['--spw-card-image-ratio'] = this.ratio;
            style['--spw-card-image-ratio-mobile'] = this.ratio;
            style['--spw-card-image-ratio-tablet'] = this.ratio;
            style['--spw-card-image-ratio-desktop'] = this.ratio;
        }
        if (this.ratioMobile) {
            style['--spw-card-image-ratio-mobile'] = this.ratioMobile;
        }
        if (this.ratioTablet) {
            style['--spw-card-image-ratio-tablet'] = this.ratioTablet;
        }
        if (this.ratioDesktop) {
            style['--spw-card-image-ratio-desktop'] = this.ratioDesktop;
        }
        if (this.imagePosition) {
            style['--spw-card-image-object-position'] = this.imagePosition;
        }
        if (this.imageFit) {
            style['--spw-card-image-object-fit'] = this.imageFit;
        }
        return (h("div", { key: 'c9ffeacabaf599a9562559ccaa1a5c115e6f159e', class: this.elementClass, style: style }, this.label && h("span", { key: 'a3d537c2db0473ba0627d4c2ff49ae23a5b5c610', class: "spw-card-image__label" }, this.label), h("slot", { key: '795a34b5ac13c9193fb300296d305bff356d874a' }), h("div", { key: 'bc1ac9a4db7a9c6126d8aaf087e21b9b561d2b1f', class: "spw-card-image__icon" }, h("spw-icon", { key: 'c65bc7dbb9f2b8dc6c13de087b173657566d3209', icon: this.hoverIcon }))));
    }
    static get is() { return "spw-card-image"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-card-image.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-card-image.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Label sp\u00E9cifi\u00E9 dans la carte"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "ratio": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ratio d'aspect de l'image pour tous les breakpoints (ex: \"16/9\", \"4/3\", \"1/1\")"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ratio"
            },
            "ratioMobile": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ratio d'aspect de l'image en vue mobile"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ratio-mobile"
            },
            "ratioTablet": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ratio d'aspect de l'image en vue tablette"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ratio-tablet"
            },
            "ratioDesktop": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ratio d'aspect de l'image en vue desktop"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ratio-desktop"
            },
            "imagePosition": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Position de l'image (object-position), ex: 'top', 'center', 'bottom right'"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-position"
            },
            "hoverIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ic\u00F4ne affich\u00E9e au survol de l'image (r\u00E9f\u00E9rence Font Awesome)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hover-icon",
                "defaultValue": "'fa-plus'"
            },
            "imageFit": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Redimensionnement de l'image (object-fit)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-fit"
            }
        };
    }
    static get elementRef() { return "el"; }
}
