import { h, Host } from "@stencil/core";
export class SpwHero {
    constructor() {
        /** Texte alternatif de l'image du hero banner */
        this.imageAlt = '';
        /** Permet de choisir la surface d'arrière-plan du hero */
        this.surface = 'light';
        /** Permet de définir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding */
        this.hasPictureFull = false;
        /** Permet d'appliquer un border-radius sur le hero */
        this.hasRadius = true;
        /** Permet d'appliquer un box-shadow sur le hero */
        this.hasShadow = false;
        /** Permet de définir un bouton play sur l'image de hero (sauf variants maxi & photo) */
        this.hasVideo = false;
        /** Permet de choisir le variant du hero */
        this.variant = 'grey';
        /** Permet de choisir l'alignement du contenu */
        this.alignment = 'left';
        /** Permet de spécifier l'opacité de l'overlay (0 à 100) */
        this.overlayOpacity = 0;
        /** Permet de spécifier la couleur de l'overlay */
        this.overlayColor = '';
        /** Aria label pour le bouton play */
        this.accPlayButtonAriaLabel = 'Lire la vidéo';
        /** Icône Font Awesome du copyright */
        this.copyrightIcon = 'fa-copyright';
        /** Permet de spécifier une variante de Font Awesome pour l'icône de copyright */
        this.copyrightIconVariant = 'fa-light';
        /** Target du lien du copyright */
        this.copyrightTarget = '_blank';
        /** Largeur maximale du tooltip de copyright */
        this.tooltipCopyrightMaxWidth = '300';
        this.triggerModal = () => {
            const modal = document.getElementById(this.modalVideoId);
            if (modal && modal.openModal) {
                modal.openModal();
            }
        };
        this.handleKeyDown = (event) => {
            if (event.key === 'Enter') {
                this.triggerModal();
            }
        };
    }
    get elementClass() {
        return {
            'spw-hero': true,
            [`spw-hero--surface-${this.surface}`]: true,
            [`spw-hero--has-picture-full`]: this.hasPictureFull,
            [`spw-hero--no-picture`]: !this.imageSrc,
            [`spw-hero--has-video`]: this.hasVideo,
            [`spw-hero--has-shadow`]: this.hasShadow,
            [`spw-hero--has-radius`]: this.hasRadius,
            [`spw-hero--${this.variant}`]: true,
            [`spw-hero--featured-ratio`]: this.variant === 'featured' && !!(this.featuredRatio || this.featuredRatioMobile || this.featuredRatioTablet || this.featuredRatioDesktop),
            [`spw-hero--${this.alignment}`]: this.variant !== 'mini' ? true : this.alignment === 'left',
        };
    }
    get overlayStyle() {
        return {
            opacity: `${this.overlayOpacity / 100}`,
            backgroundColor: `${this.overlayColor}`,
        };
    }
    render() {
        const contentSlot = (h("div", { key: '12fec8ca9735a2ca1cdc61a95a6d7aab6c255c2b', class: "spw-hero__content" }, h("slot", { key: '3b65eaa073f87eed90430f7e0cc11a03fb97508a' })));
        const hasTooltipCopyright = !!(this.tooltipCopyrightTitle || this.tooltipCopyrightText);
        const copyrightTag = (this.copyrightText || hasTooltipCopyright) && (h("div", { key: '867b71affa6f6f96d94546dae5651b05045a99f3', class: "spw-hero__copyright" }, this.copyrightText && (h("spw-tag", { key: '65eb87674860fdc4fddd4f77e3f34f75e164f11e', size: "small", "icon-variant": this.copyrightIconVariant, icon: this.copyrightIcon, href: this.copyrightHref || undefined, target: this.copyrightHref ? this.copyrightTarget : undefined }, this.copyrightText)), hasTooltipCopyright && (h("spw-tooltip", { key: '0c54fb29d6a36faee2362379a315462134d1182f', direction: "top", "tooltip-title": this.tooltipCopyrightTitle, "tooltip-text": this.tooltipCopyrightText, "max-width": this.tooltipCopyrightMaxWidth, cursor: "help" }, h("spw-tag", { key: '6888783d7f1f3d9bf68682bb12bbb1978ed701df', class: "spw-hero__copyright-tag", "icon-variant": "fa-regular", size: "small", variant: "grey", icon: "fa-info-circle", "is-icon-only": true })))));
        const isImageVariant = this.variant === 'grey' || this.variant === 'white';
        const isFeatured = this.variant === 'featured';
        const featuredStyle = {};
        if (isFeatured) {
            if (this.featuredRatio) {
                featuredStyle['--spw-hero-featured-ratio-mobile'] = this.featuredRatio;
                featuredStyle['--spw-hero-featured-ratio-tablet'] = this.featuredRatio;
                featuredStyle['--spw-hero-featured-ratio-desktop'] = this.featuredRatio;
            }
            if (this.featuredRatioMobile)
                featuredStyle['--spw-hero-featured-ratio-mobile'] = this.featuredRatioMobile;
            if (this.featuredRatioTablet)
                featuredStyle['--spw-hero-featured-ratio-tablet'] = this.featuredRatioTablet;
            if (this.featuredRatioDesktop)
                featuredStyle['--spw-hero-featured-ratio-desktop'] = this.featuredRatioDesktop;
        }
        return (h(Host, { key: 'b8fabc58e03166ba1bad2992c5e62047c57dc2c7', style: featuredStyle }, h("div", { key: 'f7e4769b01b3b875b0a0f311062790de4a1237aa', class: this.elementClass }, this.imageSrc && (h("div", { key: 'd96ef23c0ba546135d7d948b863a0b7db47eb4d6', class: "spw-hero__image" }, this.hasVideo && this.variant !== 'maxi' && this.variant !== 'photo' && !isFeatured && (h("div", { key: 'f8c652d1aa3702073a8255573fddded8b89a43a1', class: "spw-hero__image-play", onClick: this.triggerModal, onKeyDown: this.handleKeyDown, tabIndex: 0, role: "button", "aria-label": this.accPlayButtonAriaLabel }, h("spw-icon", { key: 'c0f919aef352f109331c5752b5f0b20e327eb0a8', icon: "fa-play" }))), h("div", { key: 'b6a636ec058a5c82a580009b688330b6741fac4d', class: "spw-hero__overlay", style: this.overlayStyle }), h("img", { key: '418c713e33ac0da267f1f0360cc80c00e3d4bae0', src: this.imageSrc, alt: this.imageAlt, style: this.imagePosition ? { objectPosition: this.imagePosition } : undefined }), (isImageVariant || isFeatured) && copyrightTag)), !isFeatured && (this.variant === 'mini' ? contentSlot : h("div", { class: "spw-ds-container spw-hero__container" }, contentSlot)), !isImageVariant && !isFeatured && copyrightTag)));
    }
    static get is() { return "spw-hero"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-hero.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-hero.css"]
        };
    }
    static get properties() {
        return {
            "imageSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Image du hero banner"
                },
                "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 du hero banner"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-alt",
                "defaultValue": "''"
            },
            "surface": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'dark' | 'light'",
                    "resolved": "\"dark\" | \"light\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de choisir la surface d'arri\u00E8re-plan du hero"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "surface",
                "defaultValue": "'light'"
            },
            "hasPictureFull": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de d\u00E9finir l'image de gauche/droite (en fonction de l'alignement choisi) sans padding"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-picture-full",
                "defaultValue": "false"
            },
            "hasRadius": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet d'appliquer un border-radius sur le hero"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-radius",
                "defaultValue": "true"
            },
            "hasShadow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet d'appliquer un box-shadow sur le hero"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-shadow",
                "defaultValue": "false"
            },
            "hasVideo": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de d\u00E9finir un bouton play sur l'image de hero (sauf variants maxi & photo)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-video",
                "defaultValue": "false"
            },
            "modalVideoId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de d\u00E9finir un id de modal \u00E0 ouvrir au clic sur le bouton play"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "modal-video-id"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'grey' | 'white' | 'maxi' | 'photo' | 'mini' | 'featured'",
                    "resolved": "\"featured\" | \"grey\" | \"maxi\" | \"mini\" | \"photo\" | \"white\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de choisir le variant du hero"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'grey'"
            },
            "alignment": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'center' | 'right'",
                    "resolved": "\"center\" | \"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de choisir l'alignement du contenu"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "alignment",
                "defaultValue": "'left'"
            },
            "overlayOpacity": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de sp\u00E9cifier l'opacit\u00E9 de l'overlay (0 \u00E0 100)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "overlay-opacity",
                "defaultValue": "0"
            },
            "overlayColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de sp\u00E9cifier la couleur de l'overlay"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "overlay-color",
                "defaultValue": "''"
            },
            "accPlayButtonAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Aria label pour le bouton play"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "acc-play-button-aria-label",
                "defaultValue": "'Lire la vid\u00E9o'"
            },
            "copyrightText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte du copyright \u00E0 afficher sur l'image"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "copyright-text"
            },
            "copyrightIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ic\u00F4ne Font Awesome du copyright"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "copyright-icon",
                "defaultValue": "'fa-copyright'"
            },
            "copyrightIconVariant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'fa-solid' | 'fa-brands' | 'fa-regular' | 'fa-light'",
                    "resolved": "\"fa-brands\" | \"fa-light\" | \"fa-regular\" | \"fa-solid\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Permet de sp\u00E9cifier une variante de Font Awesome pour l'ic\u00F4ne de copyright"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "copyright-icon-variant",
                "defaultValue": "'fa-light'"
            },
            "copyrightHref": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Lien du copyright"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "copyright-href"
            },
            "copyrightTarget": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Target du lien du copyright"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "copyright-target",
                "defaultValue": "'_blank'"
            },
            "tooltipCopyrightTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Titre du tooltip de copyright"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-copyright-title"
            },
            "tooltipCopyrightText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte du tooltip de copyright"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-copyright-text"
            },
            "tooltipCopyrightMaxWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Largeur maximale du tooltip de copyright"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-copyright-max-width",
                "defaultValue": "'300'"
            },
            "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 left', 'center center', 'bottom right'"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-position"
            },
            "featuredRatio": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ratio d'aspect de l'image du variant featured pour tous les breakpoints (ex: \"16/9\", \"3/1\"). Sans valeur, l'image s'affiche en taille naturelle."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "featured-ratio"
            },
            "featuredRatioMobile": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ratio d'aspect de l'image du variant featured en vue mobile"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "featured-ratio-mobile"
            },
            "featuredRatioTablet": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ratio d'aspect de l'image du variant featured en vue tablette"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "featured-ratio-tablet"
            },
            "featuredRatioDesktop": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Ratio d'aspect de l'image du variant featured en vue desktop"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "featured-ratio-desktop"
            }
        };
    }
}
