import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class SliC2ImgTxtCtaV3Component {
    constructor() {
        this.fallbackContent = {
            title: '',
            mainImage: {
                url: '',
                alt: '',
            },
            centralImage: {
                url: '/assets/babylon/svg/icons/rewards.svg',
                alt: '',
            },
            floatingImage: {
                url: '/assets/babylon/svg/icons/hearts.svg',
                alt: '',
            },
            description: '',
            primaryButton: {
                label: '',
            },
            secondaryButton: {
                label: '',
            },
        };
        this.content = this.fallbackContent;
        this.reverse = false;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SliC2ImgTxtCtaV3Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SliC2ImgTxtCtaV3Component, isStandalone: true, selector: "sli-c2-img-txt-cta-v3", inputs: { content: "content", reverse: "reverse" }, ngImport: i0, template: "<section class=\"mdl-mdh020\" [class.reverse]=\"reverse\">\n    <div class=\"mdl-container\">\n        <div class=\"m-titulo\">{{ content.title }}</div>\n\n        <img\n            *ngIf=\"content.centralImage\"\n            class=\"img-central\"\n            [src]=\"content.centralImage.url\"\n            [alt]=\"content.centralImage.alt\"\n            loading=\"lazy\"\n        />\n\n        <img\n            *ngIf=\"content.floatingImage\"\n            class=\"img-lateral\"\n            [src]=\"content.floatingImage.url\"\n            [alt]=\"content.floatingImage.alt\"\n            loading=\"lazy\"\n        />\n\n        <div class=\"m-content\">\n            <div class=\"m-left\">\n                <img\n                    [src]=\"content.mainImage.url\"\n                    [alt]=\"content.mainImage.alt\"\n                    loading=\"lazy\"\n                />\n            </div>\n            <div class=\"m-right\">\n                <div class=\"m-group\">\n                    <div class=\"m-texto\">\n                        {{ content.description }}\n                    </div>\n                    <div class=\"m-buttons\">\n                        <ng-container *ngIf=\"content.primaryButton as button\">\n                            <a\n                                *ngIf=\"button.url; else primaryButton\"\n                                class=\"m-button-sm\"\n                                [ngClass]=\"button.variant\"\n                                [href]=\"button.url\"\n                                [attr.target]=\"button.target || '_self'\"\n                                [attr.rel]=\"\n                                    (button.target || '_self') === '_blank'\n                                        ? 'noopener noreferrer'\n                                        : null\n                                \"\n                                [attr.aria-label]=\"\n                                    button.ariaLabel || button.label\n                                \"\n                            >\n                                <span>{{ button.label }}</span>\n                            </a>\n                            <ng-template #primaryButton>\n                                <button\n                                    type=\"button\"\n                                    class=\"m-button-sm\"\n                                    [ngClass]=\"button.variant\"\n                                    [attr.aria-label]=\"\n                                        button.ariaLabel || button.label\n                                    \"\n                                >\n                                    <span>{{ button.label }}</span>\n                                </button>\n                            </ng-template>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"content.secondaryButton as secondary\"\n                        >\n                            <a\n                                *ngIf=\"secondary.url; else secondaryButton\"\n                                class=\"m-underline\"\n                                [href]=\"secondary.url\"\n                                [attr.target]=\"secondary.target || '_self'\"\n                                [attr.rel]=\"\n                                    (secondary.target || '_self') === '_blank'\n                                        ? 'noopener noreferrer'\n                                        : null\n                                \"\n                                [attr.aria-label]=\"\n                                    secondary.ariaLabel || secondary.label\n                                \"\n                            >\n                                {{ secondary.label }}\n                            </a>\n                            <ng-template #secondaryButton>\n                                <button\n                                    type=\"button\"\n                                    class=\"m-underline\"\n                                    [attr.aria-label]=\"\n                                        secondary.ariaLabel || secondary.label\n                                    \"\n                                >\n                                    {{ secondary.label }}\n                                </button>\n                            </ng-template>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</section>\n", styles: ["@charset \"UTF-8\";.mdl-mdh020{margin:8rem 0 16.4rem}.mdl-mdh020.reverse .mdl-container .img-lateral{right:-43.7rem;left:auto}.mdl-mdh020.reverse .mdl-container .m-content{flex-direction:row-reverse}.mdl-mdh020 .mdl-container{position:relative;width:100%;display:flex;flex-direction:column;gap:5rem}.mdl-mdh020 .mdl-container .m-titulo{font-family:jokker,sans-serif;font-weight:300;font-size:4.4rem;line-height:5.8rem}@media (max-width: 1366px){.mdl-mdh020 .mdl-container .m-titulo{font-size:3.6rem;line-height:4.8rem}}@media (max-width: 540px){.mdl-mdh020 .mdl-container .m-titulo{font-size:3rem;line-height:4rem}}@media (max-width: 375px){.mdl-mdh020 .mdl-container .m-titulo{font-size:2.4rem;line-height:3rem}}.mdl-mdh020 .mdl-container .m-titulo{color:#515050}.mdl-mdh020 .mdl-container .img-central{position:absolute;bottom:-12rem;left:50%;transform:translate(-50%);width:100%;max-width:64.9rem}.mdl-mdh020 .mdl-container .img-lateral{position:absolute;bottom:-12rem;left:-43.7rem;width:100%;max-width:50rem}.mdl-mdh020 .mdl-container .m-content{width:100%;display:flex}.mdl-mdh020 .mdl-container .m-content .m-left{width:50%}.mdl-mdh020 .mdl-container .m-content .m-left img{width:100%;height:100%;object-fit:cover}.mdl-mdh020 .mdl-container .m-content .m-right{width:50%;background-color:#fff9f9}.mdl-mdh020 .mdl-container .m-content .m-right .m-group{padding:7rem 7rem 11.5rem 8rem;display:flex;flex-direction:column;align-items:flex-end}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-family:jokker,sans-serif;font-weight:300;font-size:3.2rem;line-height:4.6rem}@media (max-width: 1366px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 1080px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-size:3.2rem;line-height:4.6rem}}@media (max-width: 540px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 375px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-size:2.2rem;line-height:3rem}}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{text-align:right;color:#515050b2;width:100%;max-width:54.1rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons{display:flex;flex-direction:column;align-items:center;width:26rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-button-sm{margin:6rem 0 2rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline{color:#515050b2;display:block;width:max-content;position:relative;text-align:center;cursor:pointer;transition:.3s ease;font-family:jokker,sans-serif;font-weight:500;font-size:1.8rem}@media (max-width: 375px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline{font-size:1.6rem}}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline:before{content:\"\";position:absolute;bottom:-1rem;left:0;width:100%;height:.1rem;background-color:#515050b2;z-index:1}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline:after{content:\"\";position:absolute;bottom:-1rem;left:0;opacity:1;width:0%;height:.2rem;background-color:#ed3b37;transition:.3s ease;z-index:2}@media (hover: hover){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline:hover{color:#ed3b37}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline:hover:after{width:100%}}@media (max-width: 1080px){.mdl-mdh020 .mdl-container .m-content .m-left{width:45%}.mdl-mdh020 .mdl-container .m-content .m-right{width:55%}.mdl-mdh020 .mdl-container .m-content .m-right .m-group{padding:5rem 7rem 5.5rem 3rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-button-sm{margin:4rem 0 2rem}}@media (max-width: 1000px){.mdl-mdh020 .mdl-container .img-lateral{left:-23.7rem;width:100%;max-width:31rem;top:38rem}.mdl-mdh020 .mdl-container .img-central{bottom:-8rem;max-width:46.5rem}.mdl-mdh020 .mdl-container .m-content{width:100%;display:flex;flex-direction:column!important}.mdl-mdh020 .mdl-container .m-content .m-left,.mdl-mdh020 .mdl-container .m-content .m-right,.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons{width:100%}}@media (max-width: 540px){.mdl-mdh020{margin-top:6rem}.mdl-mdh020 .mdl-container{gap:3rem;align-items:center}.mdl-mdh020 .mdl-container .img-lateral{top:24rem;left:-26.7rem}.mdl-mdh020 .mdl-container .img-central{max-width:36.5rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group{padding:5rem 2rem}}@media (max-width: 375px){.mdl-mdh020 .mdl-container .img-lateral{top:18.4rem;width:21.3rem;max-width:31rem;left:-18.6rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SliC2ImgTxtCtaV3Component, decorators: [{
            type: Component,
            args: [{ selector: 'sli-c2-img-txt-cta-v3', standalone: true, imports: [CommonModule], template: "<section class=\"mdl-mdh020\" [class.reverse]=\"reverse\">\n    <div class=\"mdl-container\">\n        <div class=\"m-titulo\">{{ content.title }}</div>\n\n        <img\n            *ngIf=\"content.centralImage\"\n            class=\"img-central\"\n            [src]=\"content.centralImage.url\"\n            [alt]=\"content.centralImage.alt\"\n            loading=\"lazy\"\n        />\n\n        <img\n            *ngIf=\"content.floatingImage\"\n            class=\"img-lateral\"\n            [src]=\"content.floatingImage.url\"\n            [alt]=\"content.floatingImage.alt\"\n            loading=\"lazy\"\n        />\n\n        <div class=\"m-content\">\n            <div class=\"m-left\">\n                <img\n                    [src]=\"content.mainImage.url\"\n                    [alt]=\"content.mainImage.alt\"\n                    loading=\"lazy\"\n                />\n            </div>\n            <div class=\"m-right\">\n                <div class=\"m-group\">\n                    <div class=\"m-texto\">\n                        {{ content.description }}\n                    </div>\n                    <div class=\"m-buttons\">\n                        <ng-container *ngIf=\"content.primaryButton as button\">\n                            <a\n                                *ngIf=\"button.url; else primaryButton\"\n                                class=\"m-button-sm\"\n                                [ngClass]=\"button.variant\"\n                                [href]=\"button.url\"\n                                [attr.target]=\"button.target || '_self'\"\n                                [attr.rel]=\"\n                                    (button.target || '_self') === '_blank'\n                                        ? 'noopener noreferrer'\n                                        : null\n                                \"\n                                [attr.aria-label]=\"\n                                    button.ariaLabel || button.label\n                                \"\n                            >\n                                <span>{{ button.label }}</span>\n                            </a>\n                            <ng-template #primaryButton>\n                                <button\n                                    type=\"button\"\n                                    class=\"m-button-sm\"\n                                    [ngClass]=\"button.variant\"\n                                    [attr.aria-label]=\"\n                                        button.ariaLabel || button.label\n                                    \"\n                                >\n                                    <span>{{ button.label }}</span>\n                                </button>\n                            </ng-template>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"content.secondaryButton as secondary\"\n                        >\n                            <a\n                                *ngIf=\"secondary.url; else secondaryButton\"\n                                class=\"m-underline\"\n                                [href]=\"secondary.url\"\n                                [attr.target]=\"secondary.target || '_self'\"\n                                [attr.rel]=\"\n                                    (secondary.target || '_self') === '_blank'\n                                        ? 'noopener noreferrer'\n                                        : null\n                                \"\n                                [attr.aria-label]=\"\n                                    secondary.ariaLabel || secondary.label\n                                \"\n                            >\n                                {{ secondary.label }}\n                            </a>\n                            <ng-template #secondaryButton>\n                                <button\n                                    type=\"button\"\n                                    class=\"m-underline\"\n                                    [attr.aria-label]=\"\n                                        secondary.ariaLabel || secondary.label\n                                    \"\n                                >\n                                    {{ secondary.label }}\n                                </button>\n                            </ng-template>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</section>\n", styles: ["@charset \"UTF-8\";.mdl-mdh020{margin:8rem 0 16.4rem}.mdl-mdh020.reverse .mdl-container .img-lateral{right:-43.7rem;left:auto}.mdl-mdh020.reverse .mdl-container .m-content{flex-direction:row-reverse}.mdl-mdh020 .mdl-container{position:relative;width:100%;display:flex;flex-direction:column;gap:5rem}.mdl-mdh020 .mdl-container .m-titulo{font-family:jokker,sans-serif;font-weight:300;font-size:4.4rem;line-height:5.8rem}@media (max-width: 1366px){.mdl-mdh020 .mdl-container .m-titulo{font-size:3.6rem;line-height:4.8rem}}@media (max-width: 540px){.mdl-mdh020 .mdl-container .m-titulo{font-size:3rem;line-height:4rem}}@media (max-width: 375px){.mdl-mdh020 .mdl-container .m-titulo{font-size:2.4rem;line-height:3rem}}.mdl-mdh020 .mdl-container .m-titulo{color:#515050}.mdl-mdh020 .mdl-container .img-central{position:absolute;bottom:-12rem;left:50%;transform:translate(-50%);width:100%;max-width:64.9rem}.mdl-mdh020 .mdl-container .img-lateral{position:absolute;bottom:-12rem;left:-43.7rem;width:100%;max-width:50rem}.mdl-mdh020 .mdl-container .m-content{width:100%;display:flex}.mdl-mdh020 .mdl-container .m-content .m-left{width:50%}.mdl-mdh020 .mdl-container .m-content .m-left img{width:100%;height:100%;object-fit:cover}.mdl-mdh020 .mdl-container .m-content .m-right{width:50%;background-color:#fff9f9}.mdl-mdh020 .mdl-container .m-content .m-right .m-group{padding:7rem 7rem 11.5rem 8rem;display:flex;flex-direction:column;align-items:flex-end}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-family:jokker,sans-serif;font-weight:300;font-size:3.2rem;line-height:4.6rem}@media (max-width: 1366px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 1080px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-size:3.2rem;line-height:4.6rem}}@media (max-width: 540px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 375px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{font-size:2.2rem;line-height:3rem}}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-texto{text-align:right;color:#515050b2;width:100%;max-width:54.1rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons{display:flex;flex-direction:column;align-items:center;width:26rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-button-sm{margin:6rem 0 2rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline{color:#515050b2;display:block;width:max-content;position:relative;text-align:center;cursor:pointer;transition:.3s ease;font-family:jokker,sans-serif;font-weight:500;font-size:1.8rem}@media (max-width: 375px){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline{font-size:1.6rem}}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline:before{content:\"\";position:absolute;bottom:-1rem;left:0;width:100%;height:.1rem;background-color:#515050b2;z-index:1}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline:after{content:\"\";position:absolute;bottom:-1rem;left:0;opacity:1;width:0%;height:.2rem;background-color:#ed3b37;transition:.3s ease;z-index:2}@media (hover: hover){.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline:hover{color:#ed3b37}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-underline:hover:after{width:100%}}@media (max-width: 1080px){.mdl-mdh020 .mdl-container .m-content .m-left{width:45%}.mdl-mdh020 .mdl-container .m-content .m-right{width:55%}.mdl-mdh020 .mdl-container .m-content .m-right .m-group{padding:5rem 7rem 5.5rem 3rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons .m-button-sm{margin:4rem 0 2rem}}@media (max-width: 1000px){.mdl-mdh020 .mdl-container .img-lateral{left:-23.7rem;width:100%;max-width:31rem;top:38rem}.mdl-mdh020 .mdl-container .img-central{bottom:-8rem;max-width:46.5rem}.mdl-mdh020 .mdl-container .m-content{width:100%;display:flex;flex-direction:column!important}.mdl-mdh020 .mdl-container .m-content .m-left,.mdl-mdh020 .mdl-container .m-content .m-right,.mdl-mdh020 .mdl-container .m-content .m-right .m-group .m-buttons{width:100%}}@media (max-width: 540px){.mdl-mdh020{margin-top:6rem}.mdl-mdh020 .mdl-container{gap:3rem;align-items:center}.mdl-mdh020 .mdl-container .img-lateral{top:24rem;left:-26.7rem}.mdl-mdh020 .mdl-container .img-central{max-width:36.5rem}.mdl-mdh020 .mdl-container .m-content .m-right .m-group{padding:5rem 2rem}}@media (max-width: 375px){.mdl-mdh020 .mdl-container .img-lateral{top:18.4rem;width:21.3rem;max-width:31rem;left:-18.6rem}}\n"] }]
        }], propDecorators: { content: [{
                type: Input
            }], reverse: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 