import { CommonModule } from '@angular/common';
import { Component, computed, inject, Input } from '@angular/core';
import { BabylonLinkTypeDirective } from '../../../../directives/link-type/link-type.directive';
import { ScreenSizerService } from '../../../../services';
import * as i0 from "@angular/core";
export class C4C1ImgTxtCComponent {
    constructor() {
        this.screenSizer = inject(ScreenSizerService);
        this.activeImage = computed(() => {
            const isMobile = this.screenSizer.maxMediumTablet();
            const mobileImgs = this.multimedia?.mobileImagenes;
            const desktopImgs = this.multimedia?.imagenes;
            if (isMobile && mobileImgs && mobileImgs.length > 0) {
                return mobileImgs[0];
            }
            if (desktopImgs && desktopImgs.length > 0) {
                return desktopImgs[0];
            }
            return null;
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: C4C1ImgTxtCComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: C4C1ImgTxtCComponent, isStandalone: true, selector: "ces-c4-c1-img-txt-c", inputs: { multimedia: "multimedia", texts: "texts", buttons: "buttons", items: "items" }, ngImport: i0, template: "<section class=\"mdl-h03\">\n    <div class=\"mdl-container\">\n        <div class=\"m-imagenes\">\n            @if (multimedia) {\n                @if (activeImage(); as imgData) {\n                    <img\n                        [src]=\"\n                            imgData.img?.src ||\n                            'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'\n                        \"\n                        [alt]=\"imgData.img?.alt\"\n                        class=\"img-responsive\"\n                    />\n                }\n            }\n            @if (buttons?.[0]; as btn) {\n                <div class=\"m-floatbutton\">\n                    <a\n                        [href]=\"btn.url\"\n                        [linkType]=\"btn.linkType\"\n                        type=\"button\"\n                        class=\"m-button-clean\"\n                        [attr.aria-label]=\"btn.label ?? btn.name\"\n                    >\n                        {{ btn.label ?? btn.name }}\n                        <svg\n                            width=\"50\"\n                            height=\"6\"\n                            viewBox=\"0 0 50 6\"\n                            fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M45.875 0L49.875 2.8L45.875 5.6V0Z\"\n                                fill=\"#B7985D\"\n                            />\n                            <path\n                                d=\"M48.875 2.80078H0.375\"\n                                stroke=\"#B7985D\"\n                                stroke-width=\"0.75\"\n                                stroke-linecap=\"round\"\n                            />\n                        </svg>\n                    </a>\n                </div>\n            }\n        </div>\n        @if (texts || items) {\n            <div class=\"m-foot\">\n                <div class=\"m-content\">\n                    <div class=\"m-bottom\">\n                        <div class=\"m-textos\">\n                            @if (texts?.title) {\n                                <h2 class=\"m-titulo\">{{ texts?.title }}</h2>\n                            }\n                            @if (items?.length) {\n                                <div class=\"m-texto\">\n                                    <ul>\n                                        @for (item of items; track $index) {\n                                            <li>{{ item.title }}</li>\n                                        }\n                                    </ul>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n</section>\n", styles: ["@charset \"UTF-8\";.mdl-h03{padding:0 12.2rem}.mdl-h03 .mdl-container .m-imagenes{height:69.2rem;width:100%;padding:1.4rem 0;position:relative}.mdl-h03 .mdl-container .m-imagenes img{height:100%;width:100%;object-fit:cover}.mdl-h03 .mdl-container .m-imagenes .m-floatbutton{position:absolute;top:0;left:-.1rem;width:97.2rem;height:4.7rem;background-color:#fff}.mdl-h03 .mdl-container .m-imagenes .m-floatbutton a{position:absolute;left:21.1rem;top:1.1rem}.mdl-h03 .mdl-container{max-width:143.6rem}.mdl-h03 .mdl-container .m-foot{display:flex;justify-content:center}.mdl-h03 .mdl-container .m-foot .m-content{max-width:100%;width:97rem}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom{padding:6rem 0 10rem;display:flex;justify-content:center}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos{width:100%;max-width:88.7rem;margin-left:7.5rem}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-titulo{font-family:bentham,sans-serif;font-weight:400;font-size:4rem;line-height:4rem;color:#b7985d}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto{font-family:ptsans,sans-serif;font-weight:400;font-size:1.4rem;line-height:2.2rem}@media (max-width: 768px){.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto{line-height:2.4rem}}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto{margin-left:20rem;margin-top:2rem;width:100%;max-width:68.7rem;color:#54565a;line-height:2.8rem!important}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto ul li{padding-left:0}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto ul li:before{display:none}@media (max-width: 1440px){.mdl-h03{padding:0 10rem}.mdl-h03 .m-imagenes{height:63.6rem!important}.mdl-h03 .m-imagenes .m-floatbutton{width:calc(100% - 49.6rem)!important}.mdl-h03 .m-imagenes .m-floatbutton a{left:5.6rem!important}}@media (max-width: 1080px){.mdl-h03{padding:0}.mdl-h03 .m-imagenes{height:50.9rem!important}.mdl-h03 .m-imagenes .m-floatbutton{width:calc(100% - 14.7rem)!important}.mdl-h03 .m-imagenes .m-floatbutton a{left:2.6rem!important}.mdl-h03 .mdl-container .m-content .m-top{margin-left:8rem}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos{max-width:56rem;margin-left:0}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto{margin-left:12.2rem;max-width:47.9rem}}@media (max-width: 768px){.mdl-h03 .m-imagenes img{width:100%}.mdl-h03 .m-imagenes .m-floatbutton{width:calc(100% - 7.9rem)!important}.mdl-h03 .mdl-container .m-content .m-top{margin-left:6.6rem}.mdl-h03 .mdl-container .m-content .m-bottom{padding:2rem 0 12rem;display:flex;justify-content:center}.mdl-h03 .mdl-container .m-content .m-bottom .m-textos{width:100%;max-width:55.2rem;padding:0 2rem}.mdl-h03 .mdl-container .m-content .m-bottom .m-textos .m-texto{margin-left:6.6rem!important}}@media (max-width: 540px){.mdl-h03 .m-imagenes .m-floatbutton{width:calc(100% - 6.5rem)!important}.mdl-h03 .m-imagenes .m-floatbutton button{left:4.1rem!important}.mdl-h03 .mdl-container .m-content .m-top{margin-left:6.7rem}.mdl-h03 .mdl-container .m-content .m-bottom{padding:3rem 0 6rem}.mdl-h03 .mdl-container .m-content .m-bottom .m-textos{padding:0 3.7rem}.mdl-h03 .mdl-container .m-content .m-bottom .m-textos .m-texto{margin-left:0!important}}@media (max-width: 370px){.mdl-h03 .m-imagenes .m-floatbutton a{left:1.1rem!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BabylonLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick", "clickPopup", "disablePointerNone"], outputs: ["anchorClicked"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: C4C1ImgTxtCComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ces-c4-c1-img-txt-c', standalone: true, imports: [CommonModule, BabylonLinkTypeDirective], template: "<section class=\"mdl-h03\">\n    <div class=\"mdl-container\">\n        <div class=\"m-imagenes\">\n            @if (multimedia) {\n                @if (activeImage(); as imgData) {\n                    <img\n                        [src]=\"\n                            imgData.img?.src ||\n                            'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'\n                        \"\n                        [alt]=\"imgData.img?.alt\"\n                        class=\"img-responsive\"\n                    />\n                }\n            }\n            @if (buttons?.[0]; as btn) {\n                <div class=\"m-floatbutton\">\n                    <a\n                        [href]=\"btn.url\"\n                        [linkType]=\"btn.linkType\"\n                        type=\"button\"\n                        class=\"m-button-clean\"\n                        [attr.aria-label]=\"btn.label ?? btn.name\"\n                    >\n                        {{ btn.label ?? btn.name }}\n                        <svg\n                            width=\"50\"\n                            height=\"6\"\n                            viewBox=\"0 0 50 6\"\n                            fill=\"none\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                            <path\n                                d=\"M45.875 0L49.875 2.8L45.875 5.6V0Z\"\n                                fill=\"#B7985D\"\n                            />\n                            <path\n                                d=\"M48.875 2.80078H0.375\"\n                                stroke=\"#B7985D\"\n                                stroke-width=\"0.75\"\n                                stroke-linecap=\"round\"\n                            />\n                        </svg>\n                    </a>\n                </div>\n            }\n        </div>\n        @if (texts || items) {\n            <div class=\"m-foot\">\n                <div class=\"m-content\">\n                    <div class=\"m-bottom\">\n                        <div class=\"m-textos\">\n                            @if (texts?.title) {\n                                <h2 class=\"m-titulo\">{{ texts?.title }}</h2>\n                            }\n                            @if (items?.length) {\n                                <div class=\"m-texto\">\n                                    <ul>\n                                        @for (item of items; track $index) {\n                                            <li>{{ item.title }}</li>\n                                        }\n                                    </ul>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </div>\n            </div>\n        }\n    </div>\n</section>\n", styles: ["@charset \"UTF-8\";.mdl-h03{padding:0 12.2rem}.mdl-h03 .mdl-container .m-imagenes{height:69.2rem;width:100%;padding:1.4rem 0;position:relative}.mdl-h03 .mdl-container .m-imagenes img{height:100%;width:100%;object-fit:cover}.mdl-h03 .mdl-container .m-imagenes .m-floatbutton{position:absolute;top:0;left:-.1rem;width:97.2rem;height:4.7rem;background-color:#fff}.mdl-h03 .mdl-container .m-imagenes .m-floatbutton a{position:absolute;left:21.1rem;top:1.1rem}.mdl-h03 .mdl-container{max-width:143.6rem}.mdl-h03 .mdl-container .m-foot{display:flex;justify-content:center}.mdl-h03 .mdl-container .m-foot .m-content{max-width:100%;width:97rem}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom{padding:6rem 0 10rem;display:flex;justify-content:center}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos{width:100%;max-width:88.7rem;margin-left:7.5rem}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-titulo{font-family:bentham,sans-serif;font-weight:400;font-size:4rem;line-height:4rem;color:#b7985d}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto{font-family:ptsans,sans-serif;font-weight:400;font-size:1.4rem;line-height:2.2rem}@media (max-width: 768px){.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto{line-height:2.4rem}}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto{margin-left:20rem;margin-top:2rem;width:100%;max-width:68.7rem;color:#54565a;line-height:2.8rem!important}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto ul li{padding-left:0}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto ul li:before{display:none}@media (max-width: 1440px){.mdl-h03{padding:0 10rem}.mdl-h03 .m-imagenes{height:63.6rem!important}.mdl-h03 .m-imagenes .m-floatbutton{width:calc(100% - 49.6rem)!important}.mdl-h03 .m-imagenes .m-floatbutton a{left:5.6rem!important}}@media (max-width: 1080px){.mdl-h03{padding:0}.mdl-h03 .m-imagenes{height:50.9rem!important}.mdl-h03 .m-imagenes .m-floatbutton{width:calc(100% - 14.7rem)!important}.mdl-h03 .m-imagenes .m-floatbutton a{left:2.6rem!important}.mdl-h03 .mdl-container .m-content .m-top{margin-left:8rem}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos{max-width:56rem;margin-left:0}.mdl-h03 .mdl-container .m-foot .m-content .m-bottom .m-textos .m-texto{margin-left:12.2rem;max-width:47.9rem}}@media (max-width: 768px){.mdl-h03 .m-imagenes img{width:100%}.mdl-h03 .m-imagenes .m-floatbutton{width:calc(100% - 7.9rem)!important}.mdl-h03 .mdl-container .m-content .m-top{margin-left:6.6rem}.mdl-h03 .mdl-container .m-content .m-bottom{padding:2rem 0 12rem;display:flex;justify-content:center}.mdl-h03 .mdl-container .m-content .m-bottom .m-textos{width:100%;max-width:55.2rem;padding:0 2rem}.mdl-h03 .mdl-container .m-content .m-bottom .m-textos .m-texto{margin-left:6.6rem!important}}@media (max-width: 540px){.mdl-h03 .m-imagenes .m-floatbutton{width:calc(100% - 6.5rem)!important}.mdl-h03 .m-imagenes .m-floatbutton button{left:4.1rem!important}.mdl-h03 .mdl-container .m-content .m-top{margin-left:6.7rem}.mdl-h03 .mdl-container .m-content .m-bottom{padding:3rem 0 6rem}.mdl-h03 .mdl-container .m-content .m-bottom .m-textos{padding:0 3.7rem}.mdl-h03 .mdl-container .m-content .m-bottom .m-textos .m-texto{margin-left:0!important}}@media (max-width: 370px){.mdl-h03 .m-imagenes .m-floatbutton a{left:1.1rem!important}}\n"] }]
        }], propDecorators: { multimedia: [{
                type: Input
            }], texts: [{
                type: Input
            }], buttons: [{
                type: Input
            }], items: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 