import { Host, h } from "@stencil/core";
export class SpwBlockContent {
    constructor() {
        /** Variante du bloc de contenu */
        this.variant = 'blockquote';
        /** Target du lien (pour banner-landscape et banner-portrait) */
        this.target = '_self';
        /** Couleur de fond du bloc (que neutral et primary pour le blockquote) */
        this.background = 'primary';
    }
    get elementClass() {
        return {
            'spw-block-content': true,
            [`spw-block-content--${this.variant}`]: true,
            [`spw-block-content--bg-${this.background}`]: !!this.background,
        };
    }
    renderBlockquote() {
        return (h("blockquote", { class: "spw-block-content__blockquote-container" }, h("div", { class: "spw-block-content__blockquote" }, h("div", { class: "spw-block-content__top" }, h("slot", { name: "top" })), h("div", { class: "spw-block-content__quote" }, h("slot", { name: "quote" })), h("div", { class: "spw-block-content__bottom" }, h("slot", { name: "bottom" })))));
    }
    renderBanner() {
        const content = (h("div", { class: "spw-block-content__banner" }, h("div", { class: "spw-block-content__content" }, h("div", { class: "spw-block-content__text" }, h("slot", null))), this.imageSrc && (h("div", { class: "spw-block-content__image" }, h("img", { src: this.imageSrc, alt: this.imageAlt || '' }))), h("div", { class: "spw-block-content__button" }, h("slot", { name: "button" }))));
        if (this.href) {
            return (h("a", { href: this.href, target: this.target, class: "spw-block-content__link" }, content));
        }
        return content;
    }
    renderNewsletter() {
        return (h("div", { class: "spw-block-content__newsletter" }, h("slot", null)));
    }
    renderCallout() {
        const style = {};
        if (this.ratio) {
            style['--spw-block-content-callout-ratio'] = this.ratio;
            style['--spw-block-content-callout-ratio-mobile'] = this.ratio;
            style['--spw-block-content-callout-ratio-tablet'] = this.ratio;
            style['--spw-block-content-callout-ratio-desktop'] = this.ratio;
        }
        if (this.ratioMobile) {
            style['--spw-block-content-callout-ratio-mobile'] = this.ratioMobile;
        }
        if (this.ratioTablet) {
            style['--spw-block-content-callout-ratio-tablet'] = this.ratioTablet;
        }
        if (this.ratioDesktop) {
            style['--spw-block-content-callout-ratio-desktop'] = this.ratioDesktop;
        }
        return (h("div", { class: "spw-block-content__callout", style: style }, this.imageSrc && (h("div", { class: "spw-block-content__image" }, h("img", { src: this.imageSrc, alt: this.imageAlt || '' }))), h("div", { class: "spw-block-content__content" }, h("slot", null))));
    }
    render() {
        return (h(Host, { key: '1271eeab40dfa810c4d184ae41f2b5a07fb58b4a', class: this.elementClass }, this.variant === 'blockquote' && this.renderBlockquote(), (this.variant === 'banner-landscape' || this.variant === 'banner-portrait') && this.renderBanner(), this.variant === 'callout' && this.renderCallout(), this.variant === 'newsletter' && this.renderNewsletter()));
    }
    static get is() { return "spw-block-content"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-block-content.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-block-content.css"]
        };
    }
    static get properties() {
        return {
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'blockquote' | 'banner-landscape' | 'banner-portrait' | 'callout' | 'newsletter'",
                    "resolved": "\"banner-landscape\" | \"banner-portrait\" | \"blockquote\" | \"callout\" | \"newsletter\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Variante du bloc de contenu"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'blockquote'"
            },
            "imageSrc": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "URL de l'image (pour callout, banner-landscape et banner-portrait)"
                },
                "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 (pour callout, banner-landscape et banner-portrait)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "image-alt"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "URL du lien (pour banner-landscape et banner-portrait)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Target du lien (pour banner-landscape et banner-portrait)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "'_self'"
            },
            "background": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'primary' | 'neutral' | 'purple' | 'blue' | 'petrol'",
                    "resolved": "\"blue\" | \"neutral\" | \"petrol\" | \"primary\" | \"purple\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Couleur de fond du bloc (que neutral et primary pour le blockquote)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "background",
                "defaultValue": "'primary'"
            },
            "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 - callout uniquement (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 - callout uniquement"
                },
                "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 - callout uniquement"
                },
                "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 - callout uniquement"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ratio-desktop"
            }
        };
    }
}
