ctt-babylon 0.13.6 → 0.13.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/external/core/lis-c3-txt-img-ct/lis-c3-txt-img-ct.component.mjs +3 -3
- package/esm2022/lib/interfaces/babylon-consult.interface.mjs +1 -1
- package/esm2022/lib/services/mapper/mapper.service.mjs +6 -2
- package/fesm2022/ctt-babylon.mjs +7 -3
- package/fesm2022/ctt-babylon.mjs.map +1 -1
- package/lib/components/external/core/lis-c3-txt-img-ct/lis-c3-txt-img-ct.component.d.ts +1 -1
- package/lib/interfaces/babylon-consult.interface.d.ts +7 -0
- package/package.json +1 -1
package/fesm2022/ctt-babylon.mjs
CHANGED
|
@@ -3124,7 +3124,11 @@ class MapperService {
|
|
|
3124
3124
|
};
|
|
3125
3125
|
}
|
|
3126
3126
|
mapGlobalConsultTypes(props, ndPropsConsult) {
|
|
3127
|
-
const consultTypes = props?.consultTypes
|
|
3127
|
+
const consultTypes = props?.consultTypes?.[0]?.consultTypeId
|
|
3128
|
+
? props?.consultTypes
|
|
3129
|
+
: props?.length && props?.[0]?.consultTypes
|
|
3130
|
+
? props
|
|
3131
|
+
: ndPropsConsult;
|
|
3128
3132
|
return {
|
|
3129
3133
|
options: consultTypes?.map((prop) => ({
|
|
3130
3134
|
consultTypeId: prop.consult_type_id ?? prop.consultTypeId,
|
|
@@ -18312,11 +18316,11 @@ class LisC3TxtImgCtComponent {
|
|
|
18312
18316
|
return [...list].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
|
|
18313
18317
|
}
|
|
18314
18318
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LisC3TxtImgCtComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LisC3TxtImgCtComponent, isStandalone: true, selector: "lis-c3-txt-img-ct", inputs: { content: "content", texts: "texts", multimedia: "multimedia", contactInfo: "contactInfo", consultTypes: "consultTypes", hotels: "hotels", buttons: "buttons" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "@if (contactInfo) {\n <section class=\"mdl-md004\">\n @if (multimedia) {\n <img\n class=\"m-float\"\n [src]=\"\n multimedia.staticImagenes?.[0]?.img?.src ??\n '/assets/babylon/svg/others/mosaico.png'\n \"\n [alt]=\"multimedia.staticImagenes?.[0]?.img?.alt ?? 'alegria'\"\n loading=\"lazy\"\n />\n }\n <div class=\"mdl-container\">\n <div class=\"m-left\">\n @if (contactInfo.title) {\n <h2 class=\"m-title\">{{ contactInfo.title }}</h2>\n }\n @if (multimedia?.imagenes?.[0]; as img) {\n <div class=\"m-img\">\n <img\n [src]=\"img.img?.src\"\n [alt]=\"img.img?.alt\"\n loading=\"lazy\"\n />\n </div>\n }\n </div>\n\n <div class=\"m-right\">\n <div class=\"m-form-container\">\n @if (contactInfo.description) {\n <div class=\"m-title\">\n {{ contactInfo.description }}\n </div>\n }\n\n <form (submit)=\"handleSubmit($event)\" novalidate>\n <div class=\"m-inputs-container\">\n @if (hotels?.length) {\n <div class=\"m-input\">\n <!-- clase:full para q sea largo el input -->\n <select name=\"hotelId\" required>\n <option selected disabled value=\"\">\n @if (contactInfo.hotelDropTitle) {\n {{ contactInfo.hotelDropTitle }}\n }\n </option>\n\n @for (h of sortedHotels; track h.id) {\n <option [value]=\"h.id\">\n {{ h.name }}\n </option>\n }\n </select>\n\n <svg\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.87252 5.756L0.258221 1.41563C0.0922871 1.25955 -0.000596046 1.04818 3.8147e-06 0.82802C0.000602722 0.607855 0.094636 0.39693 0.261417 0.241647C0.428199 0.0863637 0.654065 -0.000558332 0.88933 2.69906e-06C1.12459 0.000563731 1.34999 0.0885619 1.51592 0.244639L5.48813 4.00549L9.48408 0.247203C9.65001 0.0911261 9.87541 0.00312796 10.1107 0.00256693C10.3459 0.0020059 10.5718 0.088928 10.7386 0.244211C10.9054 0.399495 10.9994 0.610419 11 0.830584C11.0006 1.05075 10.9077 1.26212 10.7418 1.4182L6.12931 5.75685C5.96252 5.9127 5.73641 6.00016 5.50072 6C5.26503 5.99984 5.03906 5.91207 4.87252 5.756Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n @if (consultTypes?.length) {\n <div class=\"m-input\">\n <select name=\"consultType\" required>\n <option selected disabled value=\"\">\n @if (contactInfo.dropdownTitle) {\n {{ contactInfo.dropdownTitle }}\n }\n </option>\n\n @for (\n opt of consultTypes;\n track $index\n ) {\n <option [value]=\"opt.consultTypeId\">\n {{ opt.name }}\n </option>\n }\n </select>\n\n <svg\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.87252 5.756L0.258221 1.41563C0.0922871 1.25955 -0.000596046 1.04818 3.8147e-06 0.82802C0.000602722 0.607855 0.094636 0.39693 0.261417 0.241647C0.428199 0.0863637 0.654065 -0.000558332 0.88933 2.69906e-06C1.12459 0.000563731 1.34999 0.0885619 1.51592 0.244639L5.48813 4.00549L9.48408 0.247203C9.65001 0.0911261 9.87541 0.00312796 10.1107 0.00256693C10.3459 0.0020059 10.5718 0.088928 10.7386 0.244211C10.9054 0.399495 10.9994 0.610419 11 0.830584C11.0006 1.05075 10.9077 1.26212 10.7418 1.4182L6.12931 5.75685C5.96252 5.9127 5.73641 6.00016 5.50072 6C5.26503 5.99984 5.03906 5.91207 4.87252 5.756Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n <!-- Name -->\n @if (contactInfo.inputName) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputName }}</span>\n <input\n [attr.name]=\"'nombre'\"\n [type]=\"'text'\"\n [required]=\"true\"\n placeholder=\"\"\n minlength=\"2\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n <!-- Code -->\n @if (contactInfo.inputSurnames) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputSurnames }}</span>\n <input\n [attr.name]=\"'surname'\"\n [type]=\"'text'\"\n [required]=\"true\"\n placeholder=\"\"\n minlength=\"2\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n <!-- Email -->\n @if (contactInfo.inputEmail) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputEmail }}</span>\n <input\n [attr.name]=\"'email'\"\n [type]=\"'email'\"\n [required]=\"true\"\n placeholder=\"\"\n pattern=\"^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\"\n />\n <svg\n width=\"16\"\n height=\"13\"\n viewBox=\"0 0 16 13\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.7149 12.7352H2.28514C1.67446 12.7352 1.10053 12.4976 0.669461 12.0657C0.237581 11.6338 0 11.0599 0 10.4492V2.29411C0 2.28758 0 2.28023 0 2.2737C0.00326564 1.66793 0.240847 1.09889 0.669461 0.669461C1.10053 0.237581 1.67446 0 2.28514 0H13.7149C14.3255 0 14.8995 0.237581 15.3305 0.669461C15.7592 1.09889 15.9967 1.66793 16 2.2737C16 2.28023 16 2.28758 16 2.29411V10.4492C16 11.0599 15.7624 11.6338 15.3305 12.0657C14.8995 12.4976 14.3255 12.7352 13.7149 12.7352ZM1.30544 3.50484V10.4484C1.30544 10.7064 1.40993 10.9587 1.5928 11.1407C1.77813 11.326 2.02387 11.4281 2.28593 11.4281H13.7157C13.9728 11.4281 14.2259 11.3236 14.4088 11.1407C14.5917 10.9587 14.6962 10.7064 14.6962 10.4484V3.50484L8.36331 7.7265C8.14451 7.87345 7.85793 7.87345 7.63913 7.7265L1.30544 3.50484ZM1.35686 1.96999L8 6.39901L14.6431 1.96999C14.595 1.82957 14.5158 1.70058 14.408 1.59282C14.2251 1.40994 13.9728 1.30544 13.7149 1.30544H2.28514C2.02389 1.30544 1.77733 1.40749 1.59201 1.59282C1.48424 1.70058 1.40503 1.82957 1.35686 1.96999Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n <!-- Telf -->\n @if (contactInfo.inputPhone) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputPhone }}</span>\n <input\n [attr.name]=\"'phone'\"\n [type]=\"'tel'\"\n [required]=\"true\"\n placeholder=\"\"\n pattern=\"^[0-9+\\-\\s()]{7,}$\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n\n <div class=\"m-input\">\n @if (contactInfo.inputMessage) {\n <span>{{ contactInfo.inputMessage }}</span>\n <textarea\n rows=\"14\"\n [placeholder]=\"\n contactInfo.inputMessagePlaceHolder ??\n ''\n \"\n [attr.name]=\"'mensaje'\"\n required\n minlength=\"10\"\n ></textarea>\n }\n </div>\n </div>\n\n <div class=\"m-footer\">\n <div class=\"m-legal\">\n <div class=\"m-row\">\n <small></small>\n @if (contactInfo.errorRequired) {\n <span>{{\n contactInfo.errorRequired\n }}</span>\n }\n <!-- @if (submitAttempted && !isFormValid) {\n <span>{{\n contactInfo.errorRequired\n }}</span>*\n\n @if (submitError) {\n <span>{{ submitError }}</span>\n } -->\n </div>\n @if (contactInfo.conditions) {\n <div class=\"m-row\">\n <label>\n <input\n type=\"checkbox\"\n [attr.name]=\"'checkbox'\"\n [required]=\"true\"\n />\n @if (buttons?.[0]; as btn) {\n <a\n [href]=\"btn.url\"\n [linkType]=\"btn.linkType\"\n >\n <span>{{\n contactInfo.conditions\n }}</span>\n </a>\n } @else {\n <span>{{\n contactInfo.conditions\n }}</span>\n }\n </label>\n </div>\n }\n @if (contactInfo.conditions2) {\n <div class=\"m-row\">\n <label>\n <input\n type=\"checkbox\"\n [attr.name]=\"'checkbox2'\"\n [required]=\"false\"\n />\n <span>{{\n contactInfo.conditions2\n }}</span>\n </label>\n </div>\n }\n </div>\n @if (buttons?.[0]; as btn) {\n <button\n type=\"submit\"\n class=\"m-button-sm\"\n [disabled]=\"isSubmitting\"\n >\n <span>{{ btn?.label }}</span>\n </button>\n }\n </div>\n\n @if (contactInfo.note) {\n <div class=\"m-note\">\n {{ contactInfo.note }}\n </div>\n }\n </form>\n\n @if (multimedia?.imagenes?.[0]; as img) {\n <div class=\"m-img\">\n <img\n [src]=\"img.img?.src\"\n [alt]=\"img.img?.alt\"\n loading=\"lazy\"\n />\n </div>\n }\n </div>\n </div>\n </div>\n </section>\n}\n", styles: ["@charset \"UTF-8\";html{overflow-x:unset}.mdl-md004{position:relative}.mdl-md004 .m-float{position:absolute;left:-10rem;bottom:8rem;z-index:9}.mdl-md004 select{-webkit-appearance:none;appearance:none;background:transparent}.mdl-md004 select option{font-family:var(--font-text);font-size:1.4rem;font-weight:var(--w_text);color:var(--cl_dropdown-text)}.mdl-md004 .mdl-container{display:flex;flex-direction:row;gap:9rem;max-width:116.9rem;padding:18.4rem 0 8rem;position:relative}.mdl-md004 .mdl-container .m-left{width:calc(42% - 4.5rem);display:flex;flex-direction:column;gap:6rem;position:sticky;top:26.5rem;height:max-content}.mdl-md004 .mdl-container .m-left .m-title{font-family:jokker,sans-serif;font-weight:300;font-size:4.4rem;line-height:5.8rem}@media (max-width: 1366px){.mdl-md004 .mdl-container .m-left .m-title{font-size:3.6rem;line-height:4.8rem}}@media (max-width: 540px){.mdl-md004 .mdl-container .m-left .m-title{font-size:3rem;line-height:4rem}}@media (max-width: 375px){.mdl-md004 .mdl-container .m-left .m-title{font-size:2.4rem;line-height:3rem}}.mdl-md004 .mdl-container .m-left .m-title{color:#515050}.mdl-md004 .mdl-container .m-left .m-img{height:66rem}.mdl-md004 .mdl-container .m-left .m-img img{width:100%;height:100%;object-fit:cover}.mdl-md004 .mdl-container .m-right{width:calc(58% - 4.5rem)}.mdl-md004 .mdl-container .m-right .m-form-container{display:flex;flex-direction:column;gap:6rem}.mdl-md004 .mdl-container .m-right .m-form-container .m-title{color:#515050b2;text-align:end;font-family:jokker,sans-serif;font-weight:300;font-size:3.2rem;line-height:4.6rem}@media (max-width: 1366px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 1080px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:3.2rem;line-height:4.6rem}}@media (max-width: 540px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 375px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.2rem;line-height:3rem}}.mdl-md004 .mdl-container .m-right .m-form-container form{display:flex;flex-direction:column;gap:3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-inputs-container{display:flex;flex-wrap:wrap;flex-direction:row;gap:2.5rem 3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;color:#515050;width:calc(50% - 1.7rem);border:1px solid #e4e4e4;border-radius:2px;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:pointer}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:hover svg path{transition:all .3s ease;fill:#ff4338}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input.full,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea){width:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input[required]):after,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(select[required]):after{content:\"\";position:absolute;left:-13px;background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea[required]):after{content:\"\";position:absolute;left:-13px;top:2.5rem;background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input:not(:placeholder-shown)) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea:not(:placeholder-shown)) span{transform:translateY(-170%);font-size:1rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea) span{top:2rem;transform:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea):has(textarea:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea):has(textarea:not(:placeholder-shown)) span{transform:translateY(-100%)}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input select{width:100%;background-color:transparent;font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;color:#515050}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea{padding:3.3rem 2rem 1rem;resize:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::-webkit-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input:-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::-webkit-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea:-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::-ms-input-placeholder{color:transparent}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input select{padding:2.3rem 2rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input svg{position:absolute;top:50%;transform:translateY(-60%);right:2rem;pointer-events:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input span{position:absolute;top:50%;left:2rem;transform:translateY(-50%);transition:all .3s ease;pointer-events:none}.mdl-md004 .mdl-container .m-right .m-form-container form input[type=checkbox]{appearance:none;width:1.5rem;height:1.5rem;accent-color:#fff;border:1px solid #e4e4e4;border-radius:2px}.mdl-md004 .mdl-container .m-right .m-form-container form input[type=checkbox]:checked{background-image:url(/assets/babylon/svg/icons/input-check.svg);background-position:center;background-size:cover;background-repeat:no-repeat;background-size:80%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer{display:flex;flex-direction:row;justify-content:space-between;gap:2rem;border-bottom:1px solid #e4e4e4;padding-bottom:4rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal{display:flex;flex-direction:column;gap:2.2rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row,.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row label{display:flex;flex-direction:row;gap:1rem;align-items:center}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row small{background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%;margin-right:3.5px;margin-left:2.5px}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row span{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;line-height:24px;color:#515050b2;line-height:1.4}.mdl-md004 .mdl-container .m-right .m-form-container form .m-note{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;line-height:24px;color:#515050b2}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{display:none;width:85%;align-self:center}.mdl-md004 .mdl-container .m-right .m-form-container .m-img img{width:100%;height:100%;object-fit:cover}@media (max-width: 1366px){.mdl-md004 .m-float{left:-23rem}.mdl-md004 .mdl-container .m-left{top:25rem}}@media (max-width: 1080px){.mdl-md004{margin-bottom:12rem}.mdl-md004 .m-float{bottom:-4rem}.mdl-md004 .mdl-container{flex-direction:column;gap:2rem}.mdl-md004 .mdl-container .m-left{width:100%;position:relative;top:auto}.mdl-md004 .mdl-container .m-left .m-img{display:none}.mdl-md004 .mdl-container .m-right{width:100%}.mdl-md004 .mdl-container .m-right .m-form-container .m-title{text-align:start}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer{flex-wrap:wrap}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer button{margin:2rem auto 0}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{display:block}}@media (max-width: 540px){.mdl-md004{margin-bottom:4rem}.mdl-md004 .m-float{height:27rem;left:-19rem;bottom:0}.mdl-md004 .mdl-container .m-right .m-form-container{gap:3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-inputs-container{width:96%;align-self:end}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input{width:100%!important}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{width:100%;height:40rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BabylonLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick", "clickPopup", "disablePointerNone"], outputs: ["anchorClicked"] }] }); }
|
|
18319
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: LisC3TxtImgCtComponent, isStandalone: true, selector: "lis-c3-txt-img-ct", inputs: { content: "content", texts: "texts", multimedia: "multimedia", contactInfo: "contactInfo", consultTypes: "consultTypes", hotels: "hotels", buttons: "buttons" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "@if (contactInfo) {\n <section class=\"mdl-md004\">\n @if (multimedia) {\n <img\n class=\"m-float\"\n [src]=\"\n multimedia.staticImagenes?.[0]?.img?.src ??\n '/assets/babylon/svg/others/mosaico.png'\n \"\n [alt]=\"multimedia.staticImagenes?.[0]?.img?.alt ?? 'alegria'\"\n loading=\"lazy\"\n />\n }\n <div class=\"mdl-container\">\n <div class=\"m-left\">\n @if (contactInfo.title) {\n <h2 class=\"m-title\">{{ contactInfo.title }}</h2>\n }\n @if (multimedia?.imagenes?.[0]; as img) {\n <div class=\"m-img\">\n <img\n [src]=\"img.img?.src\"\n [alt]=\"img.img?.alt\"\n loading=\"lazy\"\n />\n </div>\n }\n </div>\n\n <div class=\"m-right\">\n <div class=\"m-form-container\">\n @if (contactInfo.description) {\n <div class=\"m-title\">\n {{ contactInfo.description }}\n </div>\n }\n\n <form (submit)=\"handleSubmit($event)\" novalidate>\n <div class=\"m-inputs-container\">\n @if (hotels?.length) {\n <div class=\"m-input\">\n <!-- clase:full para q sea largo el input -->\n <select name=\"hotelId\" required>\n <option selected disabled value=\"\">\n @if (contactInfo.hotelDropTitle) {\n {{ contactInfo.hotelDropTitle }}\n }\n </option>\n\n @for (h of sortedHotels; track h.id) {\n <option [value]=\"h.id\">\n {{ h.name }}\n </option>\n }\n </select>\n\n <svg\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.87252 5.756L0.258221 1.41563C0.0922871 1.25955 -0.000596046 1.04818 3.8147e-06 0.82802C0.000602722 0.607855 0.094636 0.39693 0.261417 0.241647C0.428199 0.0863637 0.654065 -0.000558332 0.88933 2.69906e-06C1.12459 0.000563731 1.34999 0.0885619 1.51592 0.244639L5.48813 4.00549L9.48408 0.247203C9.65001 0.0911261 9.87541 0.00312796 10.1107 0.00256693C10.3459 0.0020059 10.5718 0.088928 10.7386 0.244211C10.9054 0.399495 10.9994 0.610419 11 0.830584C11.0006 1.05075 10.9077 1.26212 10.7418 1.4182L6.12931 5.75685C5.96252 5.9127 5.73641 6.00016 5.50072 6C5.26503 5.99984 5.03906 5.91207 4.87252 5.756Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n @if (consultTypes?.options?.length) {\n <div class=\"m-input\">\n <select name=\"consultType\" required>\n <option selected disabled value=\"\">\n @if (contactInfo.dropdownTitle) {\n {{ contactInfo.dropdownTitle }}\n }\n </option>\n\n @for (\n opt of consultTypes?.options;\n track $index\n ) {\n <option [value]=\"opt.consultTypeId\">\n {{ opt.name }}\n </option>\n }\n </select>\n\n <svg\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.87252 5.756L0.258221 1.41563C0.0922871 1.25955 -0.000596046 1.04818 3.8147e-06 0.82802C0.000602722 0.607855 0.094636 0.39693 0.261417 0.241647C0.428199 0.0863637 0.654065 -0.000558332 0.88933 2.69906e-06C1.12459 0.000563731 1.34999 0.0885619 1.51592 0.244639L5.48813 4.00549L9.48408 0.247203C9.65001 0.0911261 9.87541 0.00312796 10.1107 0.00256693C10.3459 0.0020059 10.5718 0.088928 10.7386 0.244211C10.9054 0.399495 10.9994 0.610419 11 0.830584C11.0006 1.05075 10.9077 1.26212 10.7418 1.4182L6.12931 5.75685C5.96252 5.9127 5.73641 6.00016 5.50072 6C5.26503 5.99984 5.03906 5.91207 4.87252 5.756Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n <!-- Name -->\n @if (contactInfo.inputName) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputName }}</span>\n <input\n [attr.name]=\"'nombre'\"\n [type]=\"'text'\"\n [required]=\"true\"\n placeholder=\"\"\n minlength=\"2\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n <!-- Code -->\n @if (contactInfo.inputSurnames) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputSurnames }}</span>\n <input\n [attr.name]=\"'surname'\"\n [type]=\"'text'\"\n [required]=\"true\"\n placeholder=\"\"\n minlength=\"2\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n <!-- Email -->\n @if (contactInfo.inputEmail) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputEmail }}</span>\n <input\n [attr.name]=\"'email'\"\n [type]=\"'email'\"\n [required]=\"true\"\n placeholder=\"\"\n pattern=\"^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\"\n />\n <svg\n width=\"16\"\n height=\"13\"\n viewBox=\"0 0 16 13\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.7149 12.7352H2.28514C1.67446 12.7352 1.10053 12.4976 0.669461 12.0657C0.237581 11.6338 0 11.0599 0 10.4492V2.29411C0 2.28758 0 2.28023 0 2.2737C0.00326564 1.66793 0.240847 1.09889 0.669461 0.669461C1.10053 0.237581 1.67446 0 2.28514 0H13.7149C14.3255 0 14.8995 0.237581 15.3305 0.669461C15.7592 1.09889 15.9967 1.66793 16 2.2737C16 2.28023 16 2.28758 16 2.29411V10.4492C16 11.0599 15.7624 11.6338 15.3305 12.0657C14.8995 12.4976 14.3255 12.7352 13.7149 12.7352ZM1.30544 3.50484V10.4484C1.30544 10.7064 1.40993 10.9587 1.5928 11.1407C1.77813 11.326 2.02387 11.4281 2.28593 11.4281H13.7157C13.9728 11.4281 14.2259 11.3236 14.4088 11.1407C14.5917 10.9587 14.6962 10.7064 14.6962 10.4484V3.50484L8.36331 7.7265C8.14451 7.87345 7.85793 7.87345 7.63913 7.7265L1.30544 3.50484ZM1.35686 1.96999L8 6.39901L14.6431 1.96999C14.595 1.82957 14.5158 1.70058 14.408 1.59282C14.2251 1.40994 13.9728 1.30544 13.7149 1.30544H2.28514C2.02389 1.30544 1.77733 1.40749 1.59201 1.59282C1.48424 1.70058 1.40503 1.82957 1.35686 1.96999Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n <!-- Telf -->\n @if (contactInfo.inputPhone) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputPhone }}</span>\n <input\n [attr.name]=\"'phone'\"\n [type]=\"'tel'\"\n [required]=\"true\"\n placeholder=\"\"\n pattern=\"^[0-9+\\-\\s()]{7,}$\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n\n <div class=\"m-input\">\n @if (contactInfo.inputMessage) {\n <span>{{ contactInfo.inputMessage }}</span>\n <textarea\n rows=\"14\"\n [placeholder]=\"\n contactInfo.inputMessagePlaceHolder ??\n ''\n \"\n [attr.name]=\"'mensaje'\"\n required\n minlength=\"10\"\n ></textarea>\n }\n </div>\n </div>\n\n <div class=\"m-footer\">\n <div class=\"m-legal\">\n <div class=\"m-row\">\n <small></small>\n @if (contactInfo.errorRequired) {\n <span>{{\n contactInfo.errorRequired\n }}</span>\n }\n <!-- @if (submitAttempted && !isFormValid) {\n <span>{{\n contactInfo.errorRequired\n }}</span>*\n\n @if (submitError) {\n <span>{{ submitError }}</span>\n } -->\n </div>\n @if (contactInfo.conditions) {\n <div class=\"m-row\">\n <label>\n <input\n type=\"checkbox\"\n [attr.name]=\"'checkbox'\"\n [required]=\"true\"\n />\n @if (buttons?.[0]; as btn) {\n <a\n [href]=\"btn.url\"\n [linkType]=\"btn.linkType\"\n >\n <span>{{\n contactInfo.conditions\n }}</span>\n </a>\n } @else {\n <span>{{\n contactInfo.conditions\n }}</span>\n }\n </label>\n </div>\n }\n @if (contactInfo.conditions2) {\n <div class=\"m-row\">\n <label>\n <input\n type=\"checkbox\"\n [attr.name]=\"'checkbox2'\"\n [required]=\"false\"\n />\n <span>{{\n contactInfo.conditions2\n }}</span>\n </label>\n </div>\n }\n </div>\n @if (buttons?.[0]; as btn) {\n <button\n type=\"submit\"\n class=\"m-button-sm\"\n [disabled]=\"isSubmitting\"\n >\n <span>{{ btn?.label }}</span>\n </button>\n }\n </div>\n\n @if (contactInfo.note) {\n <div class=\"m-note\">\n {{ contactInfo.note }}\n </div>\n }\n </form>\n\n @if (multimedia?.imagenes?.[0]; as img) {\n <div class=\"m-img\">\n <img\n [src]=\"img.img?.src\"\n [alt]=\"img.img?.alt\"\n loading=\"lazy\"\n />\n </div>\n }\n </div>\n </div>\n </div>\n </section>\n}\n", styles: ["@charset \"UTF-8\";html{overflow-x:unset}.mdl-md004{position:relative}.mdl-md004 .m-float{position:absolute;left:-10rem;bottom:8rem;z-index:9}.mdl-md004 select{-webkit-appearance:none;appearance:none;background:transparent}.mdl-md004 select option{font-family:var(--font-text);font-size:1.4rem;font-weight:var(--w_text);color:var(--cl_dropdown-text)}.mdl-md004 .mdl-container{display:flex;flex-direction:row;gap:9rem;max-width:116.9rem;padding:18.4rem 0 8rem;position:relative}.mdl-md004 .mdl-container .m-left{width:calc(42% - 4.5rem);display:flex;flex-direction:column;gap:6rem;position:sticky;top:26.5rem;height:max-content}.mdl-md004 .mdl-container .m-left .m-title{font-family:jokker,sans-serif;font-weight:300;font-size:4.4rem;line-height:5.8rem}@media (max-width: 1366px){.mdl-md004 .mdl-container .m-left .m-title{font-size:3.6rem;line-height:4.8rem}}@media (max-width: 540px){.mdl-md004 .mdl-container .m-left .m-title{font-size:3rem;line-height:4rem}}@media (max-width: 375px){.mdl-md004 .mdl-container .m-left .m-title{font-size:2.4rem;line-height:3rem}}.mdl-md004 .mdl-container .m-left .m-title{color:#515050}.mdl-md004 .mdl-container .m-left .m-img{height:66rem}.mdl-md004 .mdl-container .m-left .m-img img{width:100%;height:100%;object-fit:cover}.mdl-md004 .mdl-container .m-right{width:calc(58% - 4.5rem)}.mdl-md004 .mdl-container .m-right .m-form-container{display:flex;flex-direction:column;gap:6rem}.mdl-md004 .mdl-container .m-right .m-form-container .m-title{color:#515050b2;text-align:end;font-family:jokker,sans-serif;font-weight:300;font-size:3.2rem;line-height:4.6rem}@media (max-width: 1366px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 1080px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:3.2rem;line-height:4.6rem}}@media (max-width: 540px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 375px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.2rem;line-height:3rem}}.mdl-md004 .mdl-container .m-right .m-form-container form{display:flex;flex-direction:column;gap:3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-inputs-container{display:flex;flex-wrap:wrap;flex-direction:row;gap:2.5rem 3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;color:#515050;width:calc(50% - 1.7rem);border:1px solid #e4e4e4;border-radius:2px;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:pointer}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:hover svg path{transition:all .3s ease;fill:#ff4338}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input.full,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea){width:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input[required]):after,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(select[required]):after{content:\"\";position:absolute;left:-13px;background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea[required]):after{content:\"\";position:absolute;left:-13px;top:2.5rem;background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input:not(:placeholder-shown)) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea:not(:placeholder-shown)) span{transform:translateY(-170%);font-size:1rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea) span{top:2rem;transform:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea):has(textarea:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea):has(textarea:not(:placeholder-shown)) span{transform:translateY(-100%)}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input select{width:100%;background-color:transparent;font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;color:#515050}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea{padding:3.3rem 2rem 1rem;resize:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::-webkit-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input:-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::-webkit-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea:-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::-ms-input-placeholder{color:transparent}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input select{padding:2.3rem 2rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input svg{position:absolute;top:50%;transform:translateY(-60%);right:2rem;pointer-events:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input span{position:absolute;top:50%;left:2rem;transform:translateY(-50%);transition:all .3s ease;pointer-events:none}.mdl-md004 .mdl-container .m-right .m-form-container form input[type=checkbox]{appearance:none;width:1.5rem;height:1.5rem;accent-color:#fff;border:1px solid #e4e4e4;border-radius:2px}.mdl-md004 .mdl-container .m-right .m-form-container form input[type=checkbox]:checked{background-image:url(/assets/babylon/svg/icons/input-check.svg);background-position:center;background-size:cover;background-repeat:no-repeat;background-size:80%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer{display:flex;flex-direction:row;justify-content:space-between;gap:2rem;border-bottom:1px solid #e4e4e4;padding-bottom:4rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal{display:flex;flex-direction:column;gap:2.2rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row,.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row label{display:flex;flex-direction:row;gap:1rem;align-items:center}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row small{background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%;margin-right:3.5px;margin-left:2.5px}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row span{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;line-height:24px;color:#515050b2;line-height:1.4}.mdl-md004 .mdl-container .m-right .m-form-container form .m-note{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;line-height:24px;color:#515050b2}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{display:none;width:85%;align-self:center}.mdl-md004 .mdl-container .m-right .m-form-container .m-img img{width:100%;height:100%;object-fit:cover}@media (max-width: 1366px){.mdl-md004 .m-float{left:-23rem}.mdl-md004 .mdl-container .m-left{top:25rem}}@media (max-width: 1080px){.mdl-md004{margin-bottom:12rem}.mdl-md004 .m-float{bottom:-4rem}.mdl-md004 .mdl-container{flex-direction:column;gap:2rem}.mdl-md004 .mdl-container .m-left{width:100%;position:relative;top:auto}.mdl-md004 .mdl-container .m-left .m-img{display:none}.mdl-md004 .mdl-container .m-right{width:100%}.mdl-md004 .mdl-container .m-right .m-form-container .m-title{text-align:start}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer{flex-wrap:wrap}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer button{margin:2rem auto 0}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{display:block}}@media (max-width: 540px){.mdl-md004{margin-bottom:4rem}.mdl-md004 .m-float{height:27rem;left:-19rem;bottom:0}.mdl-md004 .mdl-container .m-right .m-form-container{gap:3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-inputs-container{width:96%;align-self:end}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input{width:100%!important}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{width:100%;height:40rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: BabylonLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick", "clickPopup", "disablePointerNone"], outputs: ["anchorClicked"] }] }); }
|
|
18316
18320
|
}
|
|
18317
18321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LisC3TxtImgCtComponent, decorators: [{
|
|
18318
18322
|
type: Component,
|
|
18319
|
-
args: [{ selector: 'lis-c3-txt-img-ct', standalone: true, imports: [CommonModule, BabylonLinkTypeDirective], template: "@if (contactInfo) {\n <section class=\"mdl-md004\">\n @if (multimedia) {\n <img\n class=\"m-float\"\n [src]=\"\n multimedia.staticImagenes?.[0]?.img?.src ??\n '/assets/babylon/svg/others/mosaico.png'\n \"\n [alt]=\"multimedia.staticImagenes?.[0]?.img?.alt ?? 'alegria'\"\n loading=\"lazy\"\n />\n }\n <div class=\"mdl-container\">\n <div class=\"m-left\">\n @if (contactInfo.title) {\n <h2 class=\"m-title\">{{ contactInfo.title }}</h2>\n }\n @if (multimedia?.imagenes?.[0]; as img) {\n <div class=\"m-img\">\n <img\n [src]=\"img.img?.src\"\n [alt]=\"img.img?.alt\"\n loading=\"lazy\"\n />\n </div>\n }\n </div>\n\n <div class=\"m-right\">\n <div class=\"m-form-container\">\n @if (contactInfo.description) {\n <div class=\"m-title\">\n {{ contactInfo.description }}\n </div>\n }\n\n <form (submit)=\"handleSubmit($event)\" novalidate>\n <div class=\"m-inputs-container\">\n @if (hotels?.length) {\n <div class=\"m-input\">\n <!-- clase:full para q sea largo el input -->\n <select name=\"hotelId\" required>\n <option selected disabled value=\"\">\n @if (contactInfo.hotelDropTitle) {\n {{ contactInfo.hotelDropTitle }}\n }\n </option>\n\n @for (h of sortedHotels; track h.id) {\n <option [value]=\"h.id\">\n {{ h.name }}\n </option>\n }\n </select>\n\n <svg\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.87252 5.756L0.258221 1.41563C0.0922871 1.25955 -0.000596046 1.04818 3.8147e-06 0.82802C0.000602722 0.607855 0.094636 0.39693 0.261417 0.241647C0.428199 0.0863637 0.654065 -0.000558332 0.88933 2.69906e-06C1.12459 0.000563731 1.34999 0.0885619 1.51592 0.244639L5.48813 4.00549L9.48408 0.247203C9.65001 0.0911261 9.87541 0.00312796 10.1107 0.00256693C10.3459 0.0020059 10.5718 0.088928 10.7386 0.244211C10.9054 0.399495 10.9994 0.610419 11 0.830584C11.0006 1.05075 10.9077 1.26212 10.7418 1.4182L6.12931 5.75685C5.96252 5.9127 5.73641 6.00016 5.50072 6C5.26503 5.99984 5.03906 5.91207 4.87252 5.756Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n @if (consultTypes?.length) {\n <div class=\"m-input\">\n <select name=\"consultType\" required>\n <option selected disabled value=\"\">\n @if (contactInfo.dropdownTitle) {\n {{ contactInfo.dropdownTitle }}\n }\n </option>\n\n @for (\n opt of consultTypes;\n track $index\n ) {\n <option [value]=\"opt.consultTypeId\">\n {{ opt.name }}\n </option>\n }\n </select>\n\n <svg\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.87252 5.756L0.258221 1.41563C0.0922871 1.25955 -0.000596046 1.04818 3.8147e-06 0.82802C0.000602722 0.607855 0.094636 0.39693 0.261417 0.241647C0.428199 0.0863637 0.654065 -0.000558332 0.88933 2.69906e-06C1.12459 0.000563731 1.34999 0.0885619 1.51592 0.244639L5.48813 4.00549L9.48408 0.247203C9.65001 0.0911261 9.87541 0.00312796 10.1107 0.00256693C10.3459 0.0020059 10.5718 0.088928 10.7386 0.244211C10.9054 0.399495 10.9994 0.610419 11 0.830584C11.0006 1.05075 10.9077 1.26212 10.7418 1.4182L6.12931 5.75685C5.96252 5.9127 5.73641 6.00016 5.50072 6C5.26503 5.99984 5.03906 5.91207 4.87252 5.756Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n <!-- Name -->\n @if (contactInfo.inputName) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputName }}</span>\n <input\n [attr.name]=\"'nombre'\"\n [type]=\"'text'\"\n [required]=\"true\"\n placeholder=\"\"\n minlength=\"2\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n <!-- Code -->\n @if (contactInfo.inputSurnames) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputSurnames }}</span>\n <input\n [attr.name]=\"'surname'\"\n [type]=\"'text'\"\n [required]=\"true\"\n placeholder=\"\"\n minlength=\"2\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n <!-- Email -->\n @if (contactInfo.inputEmail) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputEmail }}</span>\n <input\n [attr.name]=\"'email'\"\n [type]=\"'email'\"\n [required]=\"true\"\n placeholder=\"\"\n pattern=\"^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\"\n />\n <svg\n width=\"16\"\n height=\"13\"\n viewBox=\"0 0 16 13\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.7149 12.7352H2.28514C1.67446 12.7352 1.10053 12.4976 0.669461 12.0657C0.237581 11.6338 0 11.0599 0 10.4492V2.29411C0 2.28758 0 2.28023 0 2.2737C0.00326564 1.66793 0.240847 1.09889 0.669461 0.669461C1.10053 0.237581 1.67446 0 2.28514 0H13.7149C14.3255 0 14.8995 0.237581 15.3305 0.669461C15.7592 1.09889 15.9967 1.66793 16 2.2737C16 2.28023 16 2.28758 16 2.29411V10.4492C16 11.0599 15.7624 11.6338 15.3305 12.0657C14.8995 12.4976 14.3255 12.7352 13.7149 12.7352ZM1.30544 3.50484V10.4484C1.30544 10.7064 1.40993 10.9587 1.5928 11.1407C1.77813 11.326 2.02387 11.4281 2.28593 11.4281H13.7157C13.9728 11.4281 14.2259 11.3236 14.4088 11.1407C14.5917 10.9587 14.6962 10.7064 14.6962 10.4484V3.50484L8.36331 7.7265C8.14451 7.87345 7.85793 7.87345 7.63913 7.7265L1.30544 3.50484ZM1.35686 1.96999L8 6.39901L14.6431 1.96999C14.595 1.82957 14.5158 1.70058 14.408 1.59282C14.2251 1.40994 13.9728 1.30544 13.7149 1.30544H2.28514C2.02389 1.30544 1.77733 1.40749 1.59201 1.59282C1.48424 1.70058 1.40503 1.82957 1.35686 1.96999Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n <!-- Telf -->\n @if (contactInfo.inputPhone) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputPhone }}</span>\n <input\n [attr.name]=\"'phone'\"\n [type]=\"'tel'\"\n [required]=\"true\"\n placeholder=\"\"\n pattern=\"^[0-9+\\-\\s()]{7,}$\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n\n <div class=\"m-input\">\n @if (contactInfo.inputMessage) {\n <span>{{ contactInfo.inputMessage }}</span>\n <textarea\n rows=\"14\"\n [placeholder]=\"\n contactInfo.inputMessagePlaceHolder ??\n ''\n \"\n [attr.name]=\"'mensaje'\"\n required\n minlength=\"10\"\n ></textarea>\n }\n </div>\n </div>\n\n <div class=\"m-footer\">\n <div class=\"m-legal\">\n <div class=\"m-row\">\n <small></small>\n @if (contactInfo.errorRequired) {\n <span>{{\n contactInfo.errorRequired\n }}</span>\n }\n <!-- @if (submitAttempted && !isFormValid) {\n <span>{{\n contactInfo.errorRequired\n }}</span>*\n\n @if (submitError) {\n <span>{{ submitError }}</span>\n } -->\n </div>\n @if (contactInfo.conditions) {\n <div class=\"m-row\">\n <label>\n <input\n type=\"checkbox\"\n [attr.name]=\"'checkbox'\"\n [required]=\"true\"\n />\n @if (buttons?.[0]; as btn) {\n <a\n [href]=\"btn.url\"\n [linkType]=\"btn.linkType\"\n >\n <span>{{\n contactInfo.conditions\n }}</span>\n </a>\n } @else {\n <span>{{\n contactInfo.conditions\n }}</span>\n }\n </label>\n </div>\n }\n @if (contactInfo.conditions2) {\n <div class=\"m-row\">\n <label>\n <input\n type=\"checkbox\"\n [attr.name]=\"'checkbox2'\"\n [required]=\"false\"\n />\n <span>{{\n contactInfo.conditions2\n }}</span>\n </label>\n </div>\n }\n </div>\n @if (buttons?.[0]; as btn) {\n <button\n type=\"submit\"\n class=\"m-button-sm\"\n [disabled]=\"isSubmitting\"\n >\n <span>{{ btn?.label }}</span>\n </button>\n }\n </div>\n\n @if (contactInfo.note) {\n <div class=\"m-note\">\n {{ contactInfo.note }}\n </div>\n }\n </form>\n\n @if (multimedia?.imagenes?.[0]; as img) {\n <div class=\"m-img\">\n <img\n [src]=\"img.img?.src\"\n [alt]=\"img.img?.alt\"\n loading=\"lazy\"\n />\n </div>\n }\n </div>\n </div>\n </div>\n </section>\n}\n", styles: ["@charset \"UTF-8\";html{overflow-x:unset}.mdl-md004{position:relative}.mdl-md004 .m-float{position:absolute;left:-10rem;bottom:8rem;z-index:9}.mdl-md004 select{-webkit-appearance:none;appearance:none;background:transparent}.mdl-md004 select option{font-family:var(--font-text);font-size:1.4rem;font-weight:var(--w_text);color:var(--cl_dropdown-text)}.mdl-md004 .mdl-container{display:flex;flex-direction:row;gap:9rem;max-width:116.9rem;padding:18.4rem 0 8rem;position:relative}.mdl-md004 .mdl-container .m-left{width:calc(42% - 4.5rem);display:flex;flex-direction:column;gap:6rem;position:sticky;top:26.5rem;height:max-content}.mdl-md004 .mdl-container .m-left .m-title{font-family:jokker,sans-serif;font-weight:300;font-size:4.4rem;line-height:5.8rem}@media (max-width: 1366px){.mdl-md004 .mdl-container .m-left .m-title{font-size:3.6rem;line-height:4.8rem}}@media (max-width: 540px){.mdl-md004 .mdl-container .m-left .m-title{font-size:3rem;line-height:4rem}}@media (max-width: 375px){.mdl-md004 .mdl-container .m-left .m-title{font-size:2.4rem;line-height:3rem}}.mdl-md004 .mdl-container .m-left .m-title{color:#515050}.mdl-md004 .mdl-container .m-left .m-img{height:66rem}.mdl-md004 .mdl-container .m-left .m-img img{width:100%;height:100%;object-fit:cover}.mdl-md004 .mdl-container .m-right{width:calc(58% - 4.5rem)}.mdl-md004 .mdl-container .m-right .m-form-container{display:flex;flex-direction:column;gap:6rem}.mdl-md004 .mdl-container .m-right .m-form-container .m-title{color:#515050b2;text-align:end;font-family:jokker,sans-serif;font-weight:300;font-size:3.2rem;line-height:4.6rem}@media (max-width: 1366px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 1080px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:3.2rem;line-height:4.6rem}}@media (max-width: 540px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 375px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.2rem;line-height:3rem}}.mdl-md004 .mdl-container .m-right .m-form-container form{display:flex;flex-direction:column;gap:3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-inputs-container{display:flex;flex-wrap:wrap;flex-direction:row;gap:2.5rem 3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;color:#515050;width:calc(50% - 1.7rem);border:1px solid #e4e4e4;border-radius:2px;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:pointer}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:hover svg path{transition:all .3s ease;fill:#ff4338}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input.full,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea){width:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input[required]):after,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(select[required]):after{content:\"\";position:absolute;left:-13px;background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea[required]):after{content:\"\";position:absolute;left:-13px;top:2.5rem;background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input:not(:placeholder-shown)) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea:not(:placeholder-shown)) span{transform:translateY(-170%);font-size:1rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea) span{top:2rem;transform:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea):has(textarea:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea):has(textarea:not(:placeholder-shown)) span{transform:translateY(-100%)}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input select{width:100%;background-color:transparent;font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;color:#515050}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea{padding:3.3rem 2rem 1rem;resize:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::-webkit-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input:-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::-webkit-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea:-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::-ms-input-placeholder{color:transparent}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input select{padding:2.3rem 2rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input svg{position:absolute;top:50%;transform:translateY(-60%);right:2rem;pointer-events:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input span{position:absolute;top:50%;left:2rem;transform:translateY(-50%);transition:all .3s ease;pointer-events:none}.mdl-md004 .mdl-container .m-right .m-form-container form input[type=checkbox]{appearance:none;width:1.5rem;height:1.5rem;accent-color:#fff;border:1px solid #e4e4e4;border-radius:2px}.mdl-md004 .mdl-container .m-right .m-form-container form input[type=checkbox]:checked{background-image:url(/assets/babylon/svg/icons/input-check.svg);background-position:center;background-size:cover;background-repeat:no-repeat;background-size:80%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer{display:flex;flex-direction:row;justify-content:space-between;gap:2rem;border-bottom:1px solid #e4e4e4;padding-bottom:4rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal{display:flex;flex-direction:column;gap:2.2rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row,.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row label{display:flex;flex-direction:row;gap:1rem;align-items:center}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row small{background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%;margin-right:3.5px;margin-left:2.5px}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row span{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;line-height:24px;color:#515050b2;line-height:1.4}.mdl-md004 .mdl-container .m-right .m-form-container form .m-note{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;line-height:24px;color:#515050b2}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{display:none;width:85%;align-self:center}.mdl-md004 .mdl-container .m-right .m-form-container .m-img img{width:100%;height:100%;object-fit:cover}@media (max-width: 1366px){.mdl-md004 .m-float{left:-23rem}.mdl-md004 .mdl-container .m-left{top:25rem}}@media (max-width: 1080px){.mdl-md004{margin-bottom:12rem}.mdl-md004 .m-float{bottom:-4rem}.mdl-md004 .mdl-container{flex-direction:column;gap:2rem}.mdl-md004 .mdl-container .m-left{width:100%;position:relative;top:auto}.mdl-md004 .mdl-container .m-left .m-img{display:none}.mdl-md004 .mdl-container .m-right{width:100%}.mdl-md004 .mdl-container .m-right .m-form-container .m-title{text-align:start}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer{flex-wrap:wrap}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer button{margin:2rem auto 0}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{display:block}}@media (max-width: 540px){.mdl-md004{margin-bottom:4rem}.mdl-md004 .m-float{height:27rem;left:-19rem;bottom:0}.mdl-md004 .mdl-container .m-right .m-form-container{gap:3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-inputs-container{width:96%;align-self:end}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input{width:100%!important}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{width:100%;height:40rem}}\n"] }]
|
|
18323
|
+
args: [{ selector: 'lis-c3-txt-img-ct', standalone: true, imports: [CommonModule, BabylonLinkTypeDirective], template: "@if (contactInfo) {\n <section class=\"mdl-md004\">\n @if (multimedia) {\n <img\n class=\"m-float\"\n [src]=\"\n multimedia.staticImagenes?.[0]?.img?.src ??\n '/assets/babylon/svg/others/mosaico.png'\n \"\n [alt]=\"multimedia.staticImagenes?.[0]?.img?.alt ?? 'alegria'\"\n loading=\"lazy\"\n />\n }\n <div class=\"mdl-container\">\n <div class=\"m-left\">\n @if (contactInfo.title) {\n <h2 class=\"m-title\">{{ contactInfo.title }}</h2>\n }\n @if (multimedia?.imagenes?.[0]; as img) {\n <div class=\"m-img\">\n <img\n [src]=\"img.img?.src\"\n [alt]=\"img.img?.alt\"\n loading=\"lazy\"\n />\n </div>\n }\n </div>\n\n <div class=\"m-right\">\n <div class=\"m-form-container\">\n @if (contactInfo.description) {\n <div class=\"m-title\">\n {{ contactInfo.description }}\n </div>\n }\n\n <form (submit)=\"handleSubmit($event)\" novalidate>\n <div class=\"m-inputs-container\">\n @if (hotels?.length) {\n <div class=\"m-input\">\n <!-- clase:full para q sea largo el input -->\n <select name=\"hotelId\" required>\n <option selected disabled value=\"\">\n @if (contactInfo.hotelDropTitle) {\n {{ contactInfo.hotelDropTitle }}\n }\n </option>\n\n @for (h of sortedHotels; track h.id) {\n <option [value]=\"h.id\">\n {{ h.name }}\n </option>\n }\n </select>\n\n <svg\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.87252 5.756L0.258221 1.41563C0.0922871 1.25955 -0.000596046 1.04818 3.8147e-06 0.82802C0.000602722 0.607855 0.094636 0.39693 0.261417 0.241647C0.428199 0.0863637 0.654065 -0.000558332 0.88933 2.69906e-06C1.12459 0.000563731 1.34999 0.0885619 1.51592 0.244639L5.48813 4.00549L9.48408 0.247203C9.65001 0.0911261 9.87541 0.00312796 10.1107 0.00256693C10.3459 0.0020059 10.5718 0.088928 10.7386 0.244211C10.9054 0.399495 10.9994 0.610419 11 0.830584C11.0006 1.05075 10.9077 1.26212 10.7418 1.4182L6.12931 5.75685C5.96252 5.9127 5.73641 6.00016 5.50072 6C5.26503 5.99984 5.03906 5.91207 4.87252 5.756Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n @if (consultTypes?.options?.length) {\n <div class=\"m-input\">\n <select name=\"consultType\" required>\n <option selected disabled value=\"\">\n @if (contactInfo.dropdownTitle) {\n {{ contactInfo.dropdownTitle }}\n }\n </option>\n\n @for (\n opt of consultTypes?.options;\n track $index\n ) {\n <option [value]=\"opt.consultTypeId\">\n {{ opt.name }}\n </option>\n }\n </select>\n\n <svg\n width=\"11\"\n height=\"6\"\n viewBox=\"0 0 11 6\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4.87252 5.756L0.258221 1.41563C0.0922871 1.25955 -0.000596046 1.04818 3.8147e-06 0.82802C0.000602722 0.607855 0.094636 0.39693 0.261417 0.241647C0.428199 0.0863637 0.654065 -0.000558332 0.88933 2.69906e-06C1.12459 0.000563731 1.34999 0.0885619 1.51592 0.244639L5.48813 4.00549L9.48408 0.247203C9.65001 0.0911261 9.87541 0.00312796 10.1107 0.00256693C10.3459 0.0020059 10.5718 0.088928 10.7386 0.244211C10.9054 0.399495 10.9994 0.610419 11 0.830584C11.0006 1.05075 10.9077 1.26212 10.7418 1.4182L6.12931 5.75685C5.96252 5.9127 5.73641 6.00016 5.50072 6C5.26503 5.99984 5.03906 5.91207 4.87252 5.756Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n <!-- Name -->\n @if (contactInfo.inputName) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputName }}</span>\n <input\n [attr.name]=\"'nombre'\"\n [type]=\"'text'\"\n [required]=\"true\"\n placeholder=\"\"\n minlength=\"2\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n <!-- Code -->\n @if (contactInfo.inputSurnames) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputSurnames }}</span>\n <input\n [attr.name]=\"'surname'\"\n [type]=\"'text'\"\n [required]=\"true\"\n placeholder=\"\"\n minlength=\"2\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n <!-- Email -->\n @if (contactInfo.inputEmail) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputEmail }}</span>\n <input\n [attr.name]=\"'email'\"\n [type]=\"'email'\"\n [required]=\"true\"\n placeholder=\"\"\n pattern=\"^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\"\n />\n <svg\n width=\"16\"\n height=\"13\"\n viewBox=\"0 0 16 13\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M13.7149 12.7352H2.28514C1.67446 12.7352 1.10053 12.4976 0.669461 12.0657C0.237581 11.6338 0 11.0599 0 10.4492V2.29411C0 2.28758 0 2.28023 0 2.2737C0.00326564 1.66793 0.240847 1.09889 0.669461 0.669461C1.10053 0.237581 1.67446 0 2.28514 0H13.7149C14.3255 0 14.8995 0.237581 15.3305 0.669461C15.7592 1.09889 15.9967 1.66793 16 2.2737C16 2.28023 16 2.28758 16 2.29411V10.4492C16 11.0599 15.7624 11.6338 15.3305 12.0657C14.8995 12.4976 14.3255 12.7352 13.7149 12.7352ZM1.30544 3.50484V10.4484C1.30544 10.7064 1.40993 10.9587 1.5928 11.1407C1.77813 11.326 2.02387 11.4281 2.28593 11.4281H13.7157C13.9728 11.4281 14.2259 11.3236 14.4088 11.1407C14.5917 10.9587 14.6962 10.7064 14.6962 10.4484V3.50484L8.36331 7.7265C8.14451 7.87345 7.85793 7.87345 7.63913 7.7265L1.30544 3.50484ZM1.35686 1.96999L8 6.39901L14.6431 1.96999C14.595 1.82957 14.5158 1.70058 14.408 1.59282C14.2251 1.40994 13.9728 1.30544 13.7149 1.30544H2.28514C2.02389 1.30544 1.77733 1.40749 1.59201 1.59282C1.48424 1.70058 1.40503 1.82957 1.35686 1.96999Z\"\n fill=\"#515050\"\n />\n </svg>\n </div>\n }\n <!-- Telf -->\n @if (contactInfo.inputPhone) {\n <div class=\"m-input\">\n <span>{{ contactInfo.inputPhone }}</span>\n <input\n [attr.name]=\"'phone'\"\n [type]=\"'tel'\"\n [required]=\"true\"\n placeholder=\"\"\n pattern=\"^[0-9+\\-\\s()]{7,}$\"\n />\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g>\n <path\n d=\"M11.0253 9.12893C10.4087 8.51049 9.58738 8.16992 8.71198 8.16992H3.26716C2.39299 8.16992 1.57169 8.51049 0.953871 9.12893C0.335435 9.74675 -0.00452016 10.5681 -0.00390542 11.4422V12.8033C-0.00390542 13.1063 0.241993 13.3529 0.545679 13.3529C0.848134 13.3529 1.09465 13.107 1.09465 12.8033V11.4422C1.09465 10.8619 1.32087 10.3154 1.73153 9.90474C2.14033 9.4947 2.68623 9.26848 3.26778 9.26848H8.71321C9.29415 9.26848 9.84004 9.49409 10.2495 9.90474C10.6601 10.3142 10.8857 10.8607 10.8857 11.4422V12.8033C10.8857 13.1063 11.1316 13.3529 11.4353 13.3529C11.7378 13.3529 11.9843 13.107 11.9843 12.8033V11.4422C11.9843 10.5681 11.6437 9.74675 11.0253 9.12893Z\"\n fill=\"#515050\"\n />\n <path\n d=\"M5.98982 6.54337C7.7941 6.54337 9.2615 5.07597 9.2615 3.27168C9.2615 1.4674 7.7941 0 5.98982 0C4.18554 0 2.71875 1.4674 2.71875 3.27168C2.71875 5.07597 4.18554 6.54337 5.98982 6.54337ZM5.98982 1.09794C7.18858 1.09794 8.16357 2.07293 8.16357 3.27168C8.16357 4.47044 7.18858 5.44543 5.98982 5.44543C4.79168 5.44543 3.81669 4.47044 3.81669 3.27168C3.81669 2.07293 4.79168 1.09794 5.98982 1.09794Z\"\n fill=\"#515050\"\n />\n </g>\n </svg>\n </div>\n }\n\n <div class=\"m-input\">\n @if (contactInfo.inputMessage) {\n <span>{{ contactInfo.inputMessage }}</span>\n <textarea\n rows=\"14\"\n [placeholder]=\"\n contactInfo.inputMessagePlaceHolder ??\n ''\n \"\n [attr.name]=\"'mensaje'\"\n required\n minlength=\"10\"\n ></textarea>\n }\n </div>\n </div>\n\n <div class=\"m-footer\">\n <div class=\"m-legal\">\n <div class=\"m-row\">\n <small></small>\n @if (contactInfo.errorRequired) {\n <span>{{\n contactInfo.errorRequired\n }}</span>\n }\n <!-- @if (submitAttempted && !isFormValid) {\n <span>{{\n contactInfo.errorRequired\n }}</span>*\n\n @if (submitError) {\n <span>{{ submitError }}</span>\n } -->\n </div>\n @if (contactInfo.conditions) {\n <div class=\"m-row\">\n <label>\n <input\n type=\"checkbox\"\n [attr.name]=\"'checkbox'\"\n [required]=\"true\"\n />\n @if (buttons?.[0]; as btn) {\n <a\n [href]=\"btn.url\"\n [linkType]=\"btn.linkType\"\n >\n <span>{{\n contactInfo.conditions\n }}</span>\n </a>\n } @else {\n <span>{{\n contactInfo.conditions\n }}</span>\n }\n </label>\n </div>\n }\n @if (contactInfo.conditions2) {\n <div class=\"m-row\">\n <label>\n <input\n type=\"checkbox\"\n [attr.name]=\"'checkbox2'\"\n [required]=\"false\"\n />\n <span>{{\n contactInfo.conditions2\n }}</span>\n </label>\n </div>\n }\n </div>\n @if (buttons?.[0]; as btn) {\n <button\n type=\"submit\"\n class=\"m-button-sm\"\n [disabled]=\"isSubmitting\"\n >\n <span>{{ btn?.label }}</span>\n </button>\n }\n </div>\n\n @if (contactInfo.note) {\n <div class=\"m-note\">\n {{ contactInfo.note }}\n </div>\n }\n </form>\n\n @if (multimedia?.imagenes?.[0]; as img) {\n <div class=\"m-img\">\n <img\n [src]=\"img.img?.src\"\n [alt]=\"img.img?.alt\"\n loading=\"lazy\"\n />\n </div>\n }\n </div>\n </div>\n </div>\n </section>\n}\n", styles: ["@charset \"UTF-8\";html{overflow-x:unset}.mdl-md004{position:relative}.mdl-md004 .m-float{position:absolute;left:-10rem;bottom:8rem;z-index:9}.mdl-md004 select{-webkit-appearance:none;appearance:none;background:transparent}.mdl-md004 select option{font-family:var(--font-text);font-size:1.4rem;font-weight:var(--w_text);color:var(--cl_dropdown-text)}.mdl-md004 .mdl-container{display:flex;flex-direction:row;gap:9rem;max-width:116.9rem;padding:18.4rem 0 8rem;position:relative}.mdl-md004 .mdl-container .m-left{width:calc(42% - 4.5rem);display:flex;flex-direction:column;gap:6rem;position:sticky;top:26.5rem;height:max-content}.mdl-md004 .mdl-container .m-left .m-title{font-family:jokker,sans-serif;font-weight:300;font-size:4.4rem;line-height:5.8rem}@media (max-width: 1366px){.mdl-md004 .mdl-container .m-left .m-title{font-size:3.6rem;line-height:4.8rem}}@media (max-width: 540px){.mdl-md004 .mdl-container .m-left .m-title{font-size:3rem;line-height:4rem}}@media (max-width: 375px){.mdl-md004 .mdl-container .m-left .m-title{font-size:2.4rem;line-height:3rem}}.mdl-md004 .mdl-container .m-left .m-title{color:#515050}.mdl-md004 .mdl-container .m-left .m-img{height:66rem}.mdl-md004 .mdl-container .m-left .m-img img{width:100%;height:100%;object-fit:cover}.mdl-md004 .mdl-container .m-right{width:calc(58% - 4.5rem)}.mdl-md004 .mdl-container .m-right .m-form-container{display:flex;flex-direction:column;gap:6rem}.mdl-md004 .mdl-container .m-right .m-form-container .m-title{color:#515050b2;text-align:end;font-family:jokker,sans-serif;font-weight:300;font-size:3.2rem;line-height:4.6rem}@media (max-width: 1366px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 1080px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:3.2rem;line-height:4.6rem}}@media (max-width: 540px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.8rem;line-height:3.8rem}}@media (max-width: 375px){.mdl-md004 .mdl-container .m-right .m-form-container .m-title{font-size:2.2rem;line-height:3rem}}.mdl-md004 .mdl-container .m-right .m-form-container form{display:flex;flex-direction:column;gap:3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-inputs-container{display:flex;flex-wrap:wrap;flex-direction:row;gap:2.5rem 3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;color:#515050;width:calc(50% - 1.7rem);border:1px solid #e4e4e4;border-radius:2px;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;cursor:pointer}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:hover svg path{transition:all .3s ease;fill:#ff4338}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input.full,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea){width:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input[required]):after,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(select[required]):after{content:\"\";position:absolute;left:-13px;background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea[required]):after{content:\"\";position:absolute;left:-13px;top:2.5rem;background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(input:not(:placeholder-shown)) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea:not(:placeholder-shown)) span{transform:translateY(-170%);font-size:1rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea) span{top:2rem;transform:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea):has(textarea:focus) span,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input:has(textarea):has(textarea:not(:placeholder-shown)) span{transform:translateY(-100%)}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input select{width:100%;background-color:transparent;font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;color:#515050}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea{padding:3.3rem 2rem 1rem;resize:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::-webkit-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input:-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input input::-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::-webkit-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea:-ms-input-placeholder,.mdl-md004 .mdl-container .m-right .m-form-container form .m-input textarea::-ms-input-placeholder{color:transparent}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input select{padding:2.3rem 2rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input svg{position:absolute;top:50%;transform:translateY(-60%);right:2rem;pointer-events:none}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input span{position:absolute;top:50%;left:2rem;transform:translateY(-50%);transition:all .3s ease;pointer-events:none}.mdl-md004 .mdl-container .m-right .m-form-container form input[type=checkbox]{appearance:none;width:1.5rem;height:1.5rem;accent-color:#fff;border:1px solid #e4e4e4;border-radius:2px}.mdl-md004 .mdl-container .m-right .m-form-container form input[type=checkbox]:checked{background-image:url(/assets/babylon/svg/icons/input-check.svg);background-position:center;background-size:cover;background-repeat:no-repeat;background-size:80%}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer{display:flex;flex-direction:row;justify-content:space-between;gap:2rem;border-bottom:1px solid #e4e4e4;padding-bottom:4rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal{display:flex;flex-direction:column;gap:2.2rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row,.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row label{display:flex;flex-direction:row;gap:1rem;align-items:center}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row small{background-color:transparent;width:5px;height:5px;border:1px solid #ff4338;border-radius:100%;margin-right:3.5px;margin-left:2.5px}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer .m-legal .m-row span{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;line-height:24px;color:#515050b2;line-height:1.4}.mdl-md004 .mdl-container .m-right .m-form-container form .m-note{font-family:jokker,sans-serif;font-weight:400;font-size:1.3rem;line-height:24px;color:#515050b2}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{display:none;width:85%;align-self:center}.mdl-md004 .mdl-container .m-right .m-form-container .m-img img{width:100%;height:100%;object-fit:cover}@media (max-width: 1366px){.mdl-md004 .m-float{left:-23rem}.mdl-md004 .mdl-container .m-left{top:25rem}}@media (max-width: 1080px){.mdl-md004{margin-bottom:12rem}.mdl-md004 .m-float{bottom:-4rem}.mdl-md004 .mdl-container{flex-direction:column;gap:2rem}.mdl-md004 .mdl-container .m-left{width:100%;position:relative;top:auto}.mdl-md004 .mdl-container .m-left .m-img{display:none}.mdl-md004 .mdl-container .m-right{width:100%}.mdl-md004 .mdl-container .m-right .m-form-container .m-title{text-align:start}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer{flex-wrap:wrap}.mdl-md004 .mdl-container .m-right .m-form-container form .m-footer button{margin:2rem auto 0}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{display:block}}@media (max-width: 540px){.mdl-md004{margin-bottom:4rem}.mdl-md004 .m-float{height:27rem;left:-19rem;bottom:0}.mdl-md004 .mdl-container .m-right .m-form-container{gap:3rem}.mdl-md004 .mdl-container .m-right .m-form-container form .m-inputs-container{width:96%;align-self:end}.mdl-md004 .mdl-container .m-right .m-form-container form .m-input{width:100%!important}.mdl-md004 .mdl-container .m-right .m-form-container .m-img{width:100%;height:40rem}}\n"] }]
|
|
18320
18324
|
}], propDecorators: { content: [{
|
|
18321
18325
|
type: Input
|
|
18322
18326
|
}], texts: [{
|