ctt-puro 0.43.5 → 0.44.1

package/fesm2022/ctt-puro.mjs

@@ -2935,137 +2935,250 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class PuroEventsFormComponent {
-    constructor(fb, cdr) {
+    constructor(fb, cdr, ngZone) {
         this.fb = fb;
         this.cdr = cdr;
+        this.ngZone = ngZone;
         this.submitFormValue = new EventEmitter();
         this.formReady$ = signal(false);
+        this.activeTimepicker = null;
+        this.hours = [];
     }
+    // ---------------------------------------------------
+    // INIT
+    // ---------------------------------------------------
     ngOnInit() {
-        this.initializeForm();
+        this.buildForm();
+        this.generateHours();
+    }
+    // ---------------------------------------------------
+    // HOURS
+    // ---------------------------------------------------
+    generateHours() {
+        const list = [];
+        for (let h = 0; h < 24; h++) {
+            for (let m of [0, 15, 30, 45]) {
+                list.push(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
+            }
+        }
+        this.hours = list;
     }
-    initializeForm() {
+    openTimepicker(id, event) {
+        event.stopPropagation();
+        this.activeTimepicker = id;
+        this.cdr.markForCheck();
+        this.registerOutsideClick();
+    }
+    registerOutsideClick() {
+        if (this.removeOutsideListener) {
+            this.removeOutsideListener();
+        }
+        this.ngZone.runOutsideAngular(() => {
+            const handler = (event) => {
+                const target = event.target;
+                if (target.closest('.puro-timepicker') ||
+                    target.closest('.timepicker-trigger')) {
+                    return;
+                }
+                this.ngZone.run(() => {
+                    this.activeTimepicker = null;
+                    this.cdr.markForCheck();
+                });
+                if (this.removeOutsideListener)
+                    this.removeOutsideListener();
+            };
+            document.addEventListener('click', handler);
+            this.removeOutsideListener = () => {
+                document.removeEventListener('click', handler);
+                this.removeOutsideListener = undefined;
+            };
+        });
+    }
+    selectHour(target, hour) {
+        const input = target === 'sHourInput' ? this.sHourInput : this.fHourInput;
+        if (input?.name) {
+            this.form.get(input.name)?.setValue(hour);
+            input.value = hour;
+        }
+        this.activeTimepicker = null;
+        this.cdr.markForCheck();
+        if (this.removeOutsideListener)
+            this.removeOutsideListener();
+    }
+    // ---------------------------------------------------
+    // FORM
+    // ---------------------------------------------------
+    buildForm() {
         const controls = {};
-        // Checkboxes
         if (this.conditionsLink)
             controls['conditions'] = [false, Validators.requiredTrue];
         if (this.others)
             controls['others'] = [false];
-        // Selects
         if (this.neDropdown)
             controls['neDropdown'] = ['', Validators.required];
         if (this.othersDropdown)
             controls['othersDropdown'] = ['', Validators.required];
         if (this.prefix)
             controls['prefix'] = ['', Validators.required];
-        // Textareas
-        if (this.howTextarea?.name) {
-            controls[this.howTextarea.name] = [
-                '',
-                this.howTextarea.validators || [],
-            ];
-        }
-        if (this.infoTextarea?.name) {
-            controls[this.infoTextarea.name] = [
-                '',
-                this.infoTextarea.validators || [],
-            ];
-        }
-        // Inputs
-        if (this.nameInput?.name) {
+        if (this.nameInput?.name)
             controls[this.nameInput.name] = [
                 '',
                 this.nameInput.validators || [Validators.required],
             ];
-        }
-        if (this.surnameInput?.name) {
+        if (this.surnameInput?.name)
             controls[this.surnameInput.name] = [
                 '',
                 this.surnameInput.validators || [Validators.required],
             ];
-        }
-        if (this.phoneInput?.name) {
-            controls[this.phoneInput.name] = [
+        if (this.phoneInput)
+            controls['phone'] = [
                 '',
-                this.phoneInput.validators || [Validators.required],
+                [...(this.phoneInput.validators || []), this.phoneValidator()],
             ];
-        }
-        if (this.companyNameInput?.name) {
+        if (this.companyNameInput?.name)
             controls[this.companyNameInput.name] = [
                 '',
-                this.companyNameInput.validators || [Validators.required],
+                this.companyNameInput.validators || [],
             ];
-        }
-        if (this.npInput?.name) {
-            controls[this.npInput.name] = [
+        if (this.emailInput)
+            controls['email'] = [
                 '',
-                this.npInput.validators || [Validators.required],
+                this.emailInput.validators || [
+                    Validators.required,
+                    Validators.email,
+                ],
             ];
-        }
-        if (this.dateInput?.name) {
+        if (this.npInput?.name)
+            controls[this.npInput.name] = ['', this.npInput.validators || []];
+        if (this.dateInput?.name)
             controls[this.dateInput.name] = [
                 '',
                 this.dateInput.validators || [Validators.required],
             ];
-        }
-        if (this.sHourInput?.name) {
+        if (this.sHourInput?.name)
             controls[this.sHourInput.name] = [
                 '',
                 this.sHourInput.validators || [Validators.required],
             ];
-        }
-        if (this.fHourInput?.name) {
+        if (this.fHourInput?.name)
             controls[this.fHourInput.name] = [
                 '',
                 this.fHourInput.validators || [Validators.required],
             ];
-        }
-        // email input
-        if (this.emailInput?.name) {
-            controls[this.emailInput.name] = [
+        if (this.howTextarea?.name)
+            controls[this.howTextarea.name] = [
                 '',
-                this.emailInput.validators || [
-                    Validators.required,
-                    Validators.email,
-                ],
+                this.howTextarea.validators || [],
+            ];
+        if (this.infoTextarea?.name)
+            controls[this.infoTextarea.name] = [
+                '',
+                this.infoTextarea.validators || [],
             ];
-        }
         this.form = this.fb.group(controls);
         this.formReady$.set(true);
         this.cdr.markForCheck();
     }
+    // ---------------------------------------------------
+    // SUBMIT
+    // ---------------------------------------------------
     submitForm(e) {
         e?.preventDefault?.();
-        if (this.form.valid) {
-            this.submitFormValue.emit(this.form.value);
-            this.resetForm();
+        this.form.updateValueAndValidity();
+        if (this.form.invalid) {
+            Object.values(this.form.controls).forEach((c) => {
+                c.markAsTouched();
+                c.updateValueAndValidity({ emitEvent: false });
+            });
+            [
+                this.emailInput,
+                this.nameInput,
+                this.surnameInput,
+                this.phoneInput,
+                this.companyNameInput,
+                this.dateInput,
+                this.npInput,
+                this.fHourInput,
+                this.sHourInput,
+                this.howTextarea,
+                this.infoTextarea,
+            ].forEach((i) => i && this.validateInput(i));
+            return;
         }
+        this.submitFormValue.emit(this.form.value);
+        this.resetForm();
     }
+    // ---------------------------------------------------
+    // INPUT HANDLING
+    // ---------------------------------------------------
     validateInput(input) {
-        if (input && input.name) {
-            const control = this.form.get(input.name);
-            if (control) {
-                control.setValue(input.value, { emitEvent: true });
-            }
-            control?.updateValueAndValidity();
-            input.valid?.set(this.form.get(input.name)?.errors === null);
-        }
+        if (!input?.name)
+            return;
+        const ctrl = this.form.get(input.name);
+        if (!ctrl)
+            return;
+        input.valid?.set(ctrl.errors === null);
     }
     inputChange(event, input) {
-        const inputElement = event.target;
+        const el = event.target;
         if (input.type === 'tel') {
-            inputElement.value = inputElement.value.replace(/[^0-9+]/g, '');
+            el.value = el.value.replace(/[^0-9+]/g, '');
+        }
+        const value = el.value.trim();
+        input.value = value;
+        if (input.name) {
+            const ctrl = this.form.get(input.name);
+            if (ctrl) {
+                ctrl.setValue(value, { emitEvent: true });
+                ctrl.markAsDirty();
+                ctrl.updateValueAndValidity({ emitEvent: true });
+            }
         }
-        input.value = inputElement.value;
     }
+    // ---------------------------------------------------
+    // RESET
+    // ---------------------------------------------------
     resetForm() {
         this.form?.reset();
-        if (this.howTextarea) {
-            this.howTextarea.value = '';
-        }
+        [this.howTextarea, this.infoTextarea].forEach((i) => {
+            if (i)
+                i.value = '';
+        });
+        [
+            this.emailInput,
+            this.nameInput,
+            this.surnameInput,
+            this.phoneInput,
+            this.companyNameInput,
+            this.dateInput,
+            this.npInput,
+            this.fHourInput,
+            this.sHourInput,
+        ].forEach((i) => {
+            if (i)
+                i.value = '';
+        });
+        Object.values(this.form.controls).forEach((c) => {
+            c.markAsPristine();
+            c.markAsUntouched();
+        });
+        this.cdr.markForCheck();
+    }
+    // ---------------------------------------------------
+    // VALIDATORS
+    // ---------------------------------------------------
+    phoneValidator() {
+        return (control) => {
+            if (!control.value)
+                return null;
+            const phoneRegex = /^(?:[+ ]?)[\d -]{7,15}$/;
+            return phoneRegex.test(control.value)
+                ? null
+                : { invalidPhone: true };
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroEventsFormComponent, deps: [{ token: i1$3.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroEventsFormComponent, isStandalone: true, selector: "lib-puro-events-form", inputs: { title: "title", description: "description", ciTitle: "ciTitle", dTitle: "dTitle", howTitle: "howTitle", neDropdown: "neDropdown", othersDropdown: "othersDropdown", nameInput: "nameInput", surnameInput: "surnameInput", prefix: "prefix", phoneInput: "phoneInput", emailInput: "emailInput", companyNameInput: "companyNameInput", howTextarea: "howTextarea", infoTextarea: "infoTextarea", npInput: "npInput", dateInput: "dateInput", sHourInput: "sHourInput", fHourInput: "fHourInput", others: "others", requiredLabel: "requiredLabel", img: "img", conditionsLink: "conditionsLink", applyButton: "applyButton", seeAllButton: "seeAllButton", tags: "tags", textColors: "textColors" }, outputs: { submitFormValue: "submitFormValue" }, ngImport: i0, template: "<section class=\"eventsForm\">\n    <div class=\"eventsForm__inner\">\n        @if (title) {\n            <lib-puro-dynamic-heading\n                [tag]=\"tags?.title || 'span'\"\n                cssClass=\"eventsForm__title corp-color\"\n                [color]=\"textColors?.title\"\n                [content]=\"title\"\n            ></lib-puro-dynamic-heading>\n        }\n        <div class=\"eventsForm__graphic\">\n            <div class=\"eventsForm__graphicInner\">\n                @if (img) {\n                    <img\n                        [ngSrc]=\"img.src\"\n                        [alt]=\"img.alt\"\n                        width=\"467\"\n                        height=\"551\"\n                        class=\"eventsForm__graphicInner--img\"\n                        decoding=\"async\"\n                    />\n                }\n            </div>\n        </div>\n        <div class=\"eventsForm__content\">\n            @if (title) {\n                <lib-puro-dynamic-heading\n                    [tag]=\"tags?.title || 'span'\"\n                    cssClass=\"eventsForm__title corp-color\"\n                    [color]=\"textColors?.title\"\n                    [content]=\"title\"\n                ></lib-puro-dynamic-heading>\n            }\n            @if (description) {\n                <div class=\"eventsForm__paragraph\">\n                    {{ description }}\n                </div>\n            }\n            @if (formReady$()) {\n                <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n                    <div class=\"eventsForm__section\">\n                        <div class=\"form__group\">\n                            @if (ciTitle) {\n                                <span\n                                    class=\"eventsForm__section--title form__group\"\n                                >\n                                    {{ ciTitle }}\n                                </span>\n                            }\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (nameInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"text\"\n                                            class=\"form__control\"\n                                            name=\"name\"\n                                            id=\"name\"\n                                            [placeholder]=\"\n                                                nameInput.placeholder\n                                            \"\n                                            [formControlName]=\"nameInput.name!\"\n                                            (blur)=\"validateInput(nameInput)\"\n                                            (input)=\"\n                                                inputChange($event, nameInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"18\"\n                                                height=\"20\"\n                                            >\n                                                <use href=\"#user\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!nameInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            nameInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                            <div class=\"eventsForm__col\">\n                                @if (surnameInput && surnameInput.name) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"text\"\n                                            class=\"form__control\"\n                                            name=\"surname\"\n                                            id=\"surname\"\n                                            [placeholder]=\"\n                                                surnameInput.placeholder\n                                            \"\n                                            [formControlName]=\"\n                                                surnameInput.name!\n                                            \"\n                                            (blur)=\"validateInput(surnameInput)\"\n                                            (input)=\"\n                                                inputChange(\n                                                    $event,\n                                                    surnameInput\n                                                )\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"18\"\n                                                height=\"20\"\n                                            >\n                                                <use href=\"#user\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!surnameInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            surnameInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (prefix) {\n                                    <div class=\"form__group withIcon\">\n                                        <select\n                                            class=\"form__control\"\n                                            name=\"prefix\"\n                                            formControlName=\"prefix\"\n                                        >\n                                            @if (prefix.placeholder) {\n                                                <option\n                                                    value=\"\"\n                                                    disabled\n                                                    selected\n                                                >\n                                                    {{ prefix.placeholder }}\n                                                </option>\n                                            }\n                                            @for (\n                                                item of prefix.options || [];\n                                                track $index\n                                            ) {\n                                                <option [value]=\"item.code\">\n                                                    {{ item.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"15\"\n                                                height=\"8\"\n                                            >\n                                                <use href=\"#select-arrow\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"eventsForm__col\">\n                                @if (phoneInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"text\"\n                                            class=\"form__control\"\n                                            name=\"phone\"\n                                            id=\"phone\"\n                                            [placeholder]=\"\n                                                phoneInput.placeholder\n                                            \"\n                                            (blur)=\"validateInput(phoneInput)\"\n                                            (input)=\"\n                                                inputChange($event, phoneInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"17\"\n                                                height=\"17\"\n                                            >\n                                                <use href=\"#phone\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!phoneInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            phoneInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (emailInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"email\"\n                                            class=\"form__control\"\n                                            name=\"email\"\n                                            [placeholder]=\"\n                                                emailInput.placeholder\n                                            \"\n                                            (blur)=\"validateInput(emailInput)\"\n                                            (input)=\"\n                                                inputChange($event, emailInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"17\"\n                                                height=\"17\"\n                                            >\n                                                <use href=\"#email\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!emailInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            emailInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (\n                                    companyNameInput && companyNameInput.name\n                                ) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"text\"\n                                            class=\"form__control\"\n                                            name=\"companyname\"\n                                            id=\"companyname\"\n                                            [placeholder]=\"\n                                                companyNameInput.placeholder\n                                            \"\n                                            [formControlName]=\"\n                                                companyNameInput.name!\n                                            \"\n                                            (blur)=\"\n                                                validateInput(companyNameInput)\n                                            \"\n                                            (input)=\"\n                                                inputChange(\n                                                    $event,\n                                                    companyNameInput\n                                                )\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <div>\n                                                <i class=\"icon-99\"></i>\n                                            </div>\n                                        </span>\n                                    </div>\n                                    @if (!companyNameInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            companyNameInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"eventsForm__section\">\n                        <div class=\"form__group\">\n                            @if (dTitle) {\n                                <span\n                                    class=\"eventsForm__section--title form__group\"\n                                >\n                                    {{ dTitle }}\n                                </span>\n                            }\n                        </div>\n                        <div class=\"careersForm__row\">\n                            <div class=\"careersForm__col\">\n                                @if (neDropdown) {\n                                    <div class=\"form__group withIcon\">\n                                        <select\n                                            class=\"form__control\"\n                                            formControlName=\"neDropdown\"\n                                        >\n                                            <option value=\"\" disabled selected>\n                                                {{ neDropdown.placeholder }}\n                                            </option>\n                                            @for (\n                                                option of neDropdown.options;\n                                                track $index\n                                            ) {\n                                                <option [value]=\"option.code\">\n                                                    {{ option.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"15\"\n                                                height=\"8\"\n                                            >\n                                                <use href=\"#select-arrow\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (npInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"number\"\n                                            class=\"form__control\"\n                                            name=\"npInput\"\n                                            id=\"npInput\"\n                                            [placeholder]=\"npInput.placeholder\"\n                                            [formControlName]=\"npInput.name!\"\n                                            (blur)=\"validateInput(npInput)\"\n                                            (input)=\"\n                                                inputChange($event, npInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"18\"\n                                                height=\"20\"\n                                            >\n                                                <use href=\"#user\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!npInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            npInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                            <div class=\"eventsForm__col\">\n                                @if (dateInput && dateInput.name) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"date\"\n                                            class=\"form__control\"\n                                            name=\"dateInput\"\n                                            id=\"dateInput\"\n                                            [placeholder]=\"\n                                                dateInput.placeholder\n                                            \"\n                                            [formControlName]=\"dateInput.name!\"\n                                            (blur)=\"validateInput(dateInput)\"\n                                            (input)=\"\n                                                inputChange($event, dateInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <div>\n                                                <i class=\"icon-89\"></i>\n                                            </div>\n                                        </span>\n                                    </div>\n                                    @if (!dateInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            dateInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (sHourInput && sHourInput.name) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"hour\"\n                                            class=\"form__control\"\n                                            name=\"sHourInput\"\n                                            id=\"sHourInput\"\n                                            [placeholder]=\"\n                                                sHourInput.placeholder\n                                            \"\n                                            [formControlName]=\"sHourInput.name!\"\n                                            (blur)=\"validateInput(sHourInput)\"\n                                            (input)=\"\n                                                inputChange($event, sHourInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <div>\n                                                <i class=\"icon-100\"></i>\n                                            </div>\n                                        </span>\n                                    </div>\n                                    @if (!sHourInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            sHourInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                            <div class=\"eventsForm__col\">\n                                @if (fHourInput && fHourInput.name) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"hour\"\n                                            class=\"form__control\"\n                                            name=\"fHourInput\"\n                                            id=\"fHourInput\"\n                                            [placeholder]=\"\n                                                fHourInput.placeholder\n                                            \"\n                                            [formControlName]=\"fHourInput.name!\"\n                                            (blur)=\"validateInput(fHourInput)\"\n                                            (input)=\"\n                                                inputChange($event, fHourInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <div>\n                                                <i class=\"icon-100\"></i>\n                                            </div>\n                                        </span>\n                                    </div>\n                                    @if (!fHourInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            fHourInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (infoTextarea) {\n                                    <div class=\"form__group no-dot\">\n                                        <textarea\n                                            class=\"form__control\"\n                                            [placeholder]=\"\n                                                infoTextarea.placeholder\n                                            \"\n                                            [formControlName]=\"\n                                                infoTextarea.name!\n                                            \"\n                                        ></textarea>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"eventsForm__section\">\n                        <div class=\"form__group\">\n                            @if (howTitle) {\n                                <span\n                                    class=\"eventsForm__section--title form__group\"\n                                >\n                                    {{ howTitle }}\n                                </span>\n                            }\n                        </div>\n                        <div class=\"careersForm__row\">\n                            <div class=\"careersForm__col\">\n                                @if (othersDropdown) {\n                                    <div class=\"form__group withIcon\">\n                                        <select\n                                            class=\"form__control\"\n                                            formControlName=\"othersDropdown\"\n                                        >\n                                            <option value=\"\" disabled selected>\n                                                {{ othersDropdown.placeholder }}\n                                            </option>\n                                            @for (\n                                                option of othersDropdown.options;\n                                                track $index\n                                            ) {\n                                                <option [value]=\"option.code\">\n                                                    {{ option.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"15\"\n                                                height=\"8\"\n                                            >\n                                                <use href=\"#select-arrow\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (howTextarea) {\n                                    <div class=\"form__group no-dot\">\n                                        <textarea\n                                            class=\"form__control\"\n                                            [placeholder]=\"\n                                                howTextarea.placeholder\n                                            \"\n                                            [formControlName]=\"\n                                                howTextarea.name!\n                                            \"\n                                        ></textarea>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                <div class=\"block-checkbox\">\n                                    @if (requiredLabel) {\n                                        <span class=\"required-label\">{{\n                                            requiredLabel\n                                        }}</span>\n                                    }\n                                    @if (conditionsLink) {\n                                        <label class=\"form__checkbox\">\n                                            <input\n                                                type=\"checkbox\"\n                                                checked\n                                                class=\"checkbox\"\n                                                formControlName=\"conditions\"\n                                            />\n                                            <span class=\"box\">\n                                                <svg\n                                                    aria-hidden=\"true\"\n                                                    focusable=\"false\"\n                                                    width=\"9\"\n                                                    height=\"7\"\n                                                >\n                                                    <use\n                                                        href=\"#checkbox-tick\"\n                                                    ></use>\n                                                </svg>\n                                            </span>\n                                            <span [innerHTML]=\"conditionsLink\">\n                                            </span>\n                                        </label>\n                                    }\n                                    @if (others) {\n                                        <label class=\"form__checkbox\">\n                                            <input\n                                                type=\"checkbox\"\n                                                class=\"checkbox\"\n                                                formControlName=\"others\"\n                                            />\n                                            <span class=\"box\">\n                                                <svg\n                                                    aria-hidden=\"true\"\n                                                    focusable=\"false\"\n                                                    width=\"9\"\n                                                    height=\"7\"\n                                                >\n                                                    <use\n                                                        href=\"#checkbox-tick\"\n                                                    ></use>\n                                                </svg>\n                                            </span>\n                                            <span>{{ others }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"btn__group\">\n                            @if (applyButton) {\n                                <button\n                                    class=\"btn btn__primary--outline js-active-modal\"\n                                    data-modal_name=\"thankyou\"\n                                    [attr.aria-label]=\"applyButton.label\"\n                                    [disabled]=\"!form.valid\"\n                                    (click)=\"submitForm()\"\n                                >\n                                    <span>{{ applyButton.label }}</span>\n                                </button>\n                            }\n                            @if (seeAllButton) {\n                                <a\n                                    class=\"btn btn__primary--outline js-active-modal\"\n                                    [attr.aria-label]=\"seeAllButton.label\"\n                                    [attr.href]=\"seeAllButton.url\"\n                                >\n                                    <span>{{ seeAllButton.label }}</span>\n                                </a>\n                            }\n                        </div>\n                    </div>\n                </form>\n            }\n        </div>\n    </div>\n</section>\n", styles: [".eventsForm{padding-block:3.5rem;padding-inline:4.5rem;padding-inline:auto}@media (min-width: 768px){.eventsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.eventsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.eventsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.eventsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.eventsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.eventsForm__title{margin-bottom:3rem;display:none;text-align:start}}.eventsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.eventsForm__inner{column-gap:4rem;flex-direction:row-reverse}}@media (min-width: 1280px){.eventsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.eventsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.eventsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.eventsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.eventsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.eventsForm__graphic{margin-inline:auto}}.eventsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.eventsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.eventsForm__graphicInner{aspect-ratio:905/1067}}.eventsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.eventsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.eventsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.eventsForm__content{order:1;flex:1 1 0%}}.eventsForm__content .btn__group{margin-top:4rem;justify-content:center}.eventsForm__content .eventsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.eventsForm__content .eventsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.eventsForm__content .eventsForm__title{display:block;text-align:start}}.eventsForm__content .eventsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.eventsForm__content .eventsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.eventsForm__content .eventsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__row{margin:0 -2.1rem}}.eventsForm__content .eventsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.eventsForm__content .eventsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__col{padding-inline:2.1rem}}.eventsForm__content .eventsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.eventsForm__placeholder span{color:#1e1e1e;opacity:.6}.eventsForm .form-error{color:var(--grey);z-index:1}.eventsForm .icon-right i{font-size:2rem}.eventsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.eventsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){:host ::ng-deep .eventsForm__title.corp-color{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:3rem;display:none;text-align:start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroEventsFormComponent, deps: [{ token: i1$3.FormBuilder }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroEventsFormComponent, isStandalone: true, selector: "lib-puro-events-form", inputs: { title: "title", description: "description", ciTitle: "ciTitle", dTitle: "dTitle", howTitle: "howTitle", neDropdown: "neDropdown", othersDropdown: "othersDropdown", nameInput: "nameInput", surnameInput: "surnameInput", prefix: "prefix", phoneInput: "phoneInput", emailInput: "emailInput", companyNameInput: "companyNameInput", howTextarea: "howTextarea", infoTextarea: "infoTextarea", npInput: "npInput", dateInput: "dateInput", sHourInput: "sHourInput", fHourInput: "fHourInput", others: "others", requiredLabel: "requiredLabel", img: "img", conditionsLink: "conditionsLink", applyButton: "applyButton", tags: "tags", textColors: "textColors" }, outputs: { submitFormValue: "submitFormValue" }, ngImport: i0, template: "<section class=\"eventsForm\">\n    <div class=\"eventsForm__inner\">\n\n        @if (title) {\n            <lib-puro-dynamic-heading\n                [tag]=\"tags?.title || 'span'\"\n                cssClass=\"eventsForm__title corp-color\"\n                [color]=\"textColors?.title\"\n                [content]=\"title\"\n            ></lib-puro-dynamic-heading>\n        }\n\n        <!-- Imagen -->\n        <div class=\"eventsForm__graphic\">\n            <div class=\"eventsForm__graphicInner\">\n                @if (img) {\n                    <img\n                        [ngSrc]=\"img.src\"\n                        [alt]=\"img.alt\"\n                        width=\"467\"\n                        height=\"551\"\n                        class=\"eventsForm__graphicInner--img\"\n                        decoding=\"async\"\n                    />\n                }\n            </div>\n        </div>\n\n        <div class=\"eventsForm__content\">\n\n            @if (title) {\n                <lib-puro-dynamic-heading\n                    [tag]=\"tags?.title || 'span'\"\n                    cssClass=\"eventsForm__title corp-color\"\n                    [color]=\"textColors?.title\"\n                    [content]=\"title\"\n                ></lib-puro-dynamic-heading>\n            }\n\n            @if (description) {\n                <div class=\"eventsForm__paragraph\">{{ description }}</div>\n            }\n\n            @if (formReady$()) {\n\n                <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\" scriptLoader [dataLoaded]=\"true\">\n\n                    <!-- SECTION 1 -->\n                    <div class=\"eventsForm__section\">\n                        @if (ciTitle) {\n                            <span class=\"eventsForm__section--title\">{{ ciTitle }}</span>\n                        }\n\n                        <!-- Nombre + Apellidos -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (nameInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"nameInput.placeholder\"\n                                            [formControlName]=\"nameInput.name!\"\n                                            (blur)=\"validateInput(nameInput)\"\n                                            (input)=\"inputChange($event, nameInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!nameInput.valid()) {\n                                        <span class=\"form-error\">{{ nameInput.error }}</span>\n                                    }\n                                }\n                            </div>\n\n                            <div class=\"eventsForm__col\">\n                                @if (surnameInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"surnameInput.placeholder\"\n                                            [formControlName]=\"surnameInput.name!\"\n                                            (blur)=\"validateInput(surnameInput)\"\n                                            (input)=\"inputChange($event, surnameInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!surnameInput.valid()) {\n                                        <span class=\"form-error\">{{ surnameInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Prefijo + Tel\u00E9fono -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (prefix) {\n                                    <div class=\"form__group withIcon\">\n                                        <select class=\"form__control\" formControlName=\"prefix\">\n                                            @if (prefix.placeholder) {\n                                                <option value=\"\">\n                                                    {{ prefix.placeholder }}\n                                                </option>\n                                            }\n                                            @for (item of prefix.options || []; track $index) {\n                                                <option [value]=\"item.code\">{{ item.name }}</option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n\n                            <div class=\"eventsForm__col\">\n                                @if (phoneInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"tel\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"phoneInput.placeholder\"\n                                            formControlName=\"phone\"\n                                            (blur)=\"validateInput(phoneInput)\"\n                                            (input)=\"inputChange($event, phoneInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"17\" height=\"17\"><use href=\"#phone\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!phoneInput.valid()) {\n                                        <span class=\"form-error\">{{ phoneInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Email -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (emailInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"email\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"emailInput.placeholder\"\n                                            formControlName=\"email\"\n                                            (blur)=\"validateInput(emailInput)\"\n                                            (input)=\"inputChange($event, emailInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"17\" height=\"17\"><use href=\"#email\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!emailInput.valid()) {\n                                        <span class=\"form-error\">{{ emailInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Empresa -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (companyNameInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"companyNameInput.placeholder\"\n                                            [formControlName]=\"companyNameInput.name!\"\n                                            (blur)=\"validateInput(companyNameInput)\"\n                                            (input)=\"inputChange($event, companyNameInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <i class=\"icon-99\"></i>\n                                        </span>\n                                    </div>\n                                    @if (!companyNameInput.valid()) {\n                                        <span class=\"form-error\">{{ companyNameInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                    </div>\n\n                    <!-- SECTION 2 -->\n                    <div class=\"eventsForm__section\">\n                        @if (dTitle) {\n                            <span class=\"eventsForm__section--title\">{{ dTitle }}</span>\n                        }\n\n                        <!-- Dropdown N\u00BA personas -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (neDropdown) {\n                                    <div class=\"form__group withIcon\">\n                                        <select class=\"form__control\" formControlName=\"neDropdown\">\n                                            <option value=\"\">{{ neDropdown.placeholder }}</option>\n                                            @for (option of neDropdown.options; track $index) {\n                                                <option [value]=\"option.code\">\n                                                    {{ option.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- N\u00BA personas + Fecha -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (npInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"number\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"npInput.placeholder\"\n                                            [formControlName]=\"npInput.name!\"\n                                            (blur)=\"validateInput(npInput)\"\n                                            (input)=\"inputChange($event, npInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!npInput.valid()) {\n                                        <span class=\"form-error\">{{ npInput.error }}</span>\n                                    }\n                                }\n                            </div>\n\n                            <div class=\"eventsForm__col\">\n                                @if (dateInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"dateInput.placeholder\"\n                                            [formControlName]=\"dateInput.name!\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <i class=\"icon-89\"></i>\n                                        </span>\n                                    </div>\n                                    @if (!dateInput.valid()) {\n                                        <span class=\"form-error\">{{ dateInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Horas -->\n                        <div class=\"eventsForm__row\">\n\n                            <!-- Start Hour -->\n                            <div class=\"eventsForm__col\" style=\"position: relative\">\n                                @if (sHourInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control timepicker-trigger\"\n                                            readonly\n                                            autocomplete=\"off\"\n                                            [placeholder]=\"sHourInput.placeholder\"\n                                            [formControlName]=\"sHourInput.name!\"\n                                            (click)=\"openTimepicker('sHourInput', $event)\"\n                                        />\n                                        <span class=\"icon-right corp-color timepicker-trigger\"\n                                            (click)=\"openTimepicker('sHourInput', $event)\">\n                                            <i class=\"icon-100\"></i>\n                                        </span>\n                                    </div>\n\n                                    @if (!sHourInput.valid()) {\n                                        <span class=\"form-error\">{{ sHourInput.error }}</span>\n                                    }\n\n                                    <ul class=\"puro-timepicker\"\n                                        *ngIf=\"activeTimepicker === 'sHourInput'\">\n                                        <li *ngFor=\"let h of hours\"\n                                            (click)=\"selectHour('sHourInput', h)\">\n                                            {{ h }}\n                                        </li>\n                                    </ul>\n                                }\n                            </div>\n\n                            <!-- End Hour -->\n                            <div class=\"eventsForm__col\" style=\"position: relative\">\n                                @if (fHourInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control timepicker-trigger\"\n                                            readonly\n                                            autocomplete=\"off\"\n                                            [placeholder]=\"fHourInput.placeholder\"\n                                            [formControlName]=\"fHourInput.name!\"\n                                            (click)=\"openTimepicker('fHourInput', $event)\"\n                                        />\n                                        <span class=\"icon-right corp-color timepicker-trigger\"\n                                            (click)=\"openTimepicker('fHourInput', $event)\">\n                                            <i class=\"icon-100\"></i>\n                                        </span>\n                                    </div>\n\n                                    @if (!fHourInput.valid()) {\n                                        <span class=\"form-error\">{{ fHourInput.error }}</span>\n                                    }\n\n                                    <ul class=\"puro-timepicker\"\n                                        *ngIf=\"activeTimepicker === 'fHourInput'\">\n                                        <li *ngFor=\"let h of hours\"\n                                            (click)=\"selectHour('fHourInput', h)\">\n                                            {{ h }}\n                                        </li>\n                                    </ul>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Mensaje info -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (infoTextarea) {\n                                    <div class=\"form__group no-dot\">\n                                        <textarea class=\"form__control\"\n                                            [placeholder]=\"infoTextarea.placeholder\"\n                                            [formControlName]=\"infoTextarea.name!\">\n                                        </textarea>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                    </div>\n\n                    <!-- SECTION 3 -->\n                    <div class=\"eventsForm__section\">\n                        @if (howTitle) {\n                            <span class=\"eventsForm__section--title\">{{ howTitle }}</span>\n                        }\n\n                        <!-- Dropdown -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (othersDropdown) {\n                                    <div class=\"form__group withIcon\">\n                                        <select class=\"form__control\"\n                                            formControlName=\"othersDropdown\">\n                                            <option value=\"\">\n                                                {{ othersDropdown.placeholder }}\n                                            </option>\n                                            @for (option of othersDropdown.options; track $index) {\n                                                <option [value]=\"option.code\">\n                                                    {{ option.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Textarea -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (howTextarea) {\n                                    <div class=\"form__group no-dot\">\n                                        <textarea class=\"form__control\"\n                                            [placeholder]=\"howTextarea.placeholder\"\n                                            [formControlName]=\"howTextarea.name!\">\n                                        </textarea>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Checkboxes -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                <div class=\"block-checkbox\">\n\n                                    @if (requiredLabel) {\n                                        <span class=\"required-label\">{{ requiredLabel }}</span>\n                                    }\n\n                                    @if (conditionsLink) {\n                                        <label class=\"form__checkbox\">\n                                            <input type=\"checkbox\"\n                                                class=\"checkbox\"\n                                                formControlName=\"conditions\"\n                                            />\n                                            <span class=\"box\">\n                                                <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n                                            </span>\n                                            <span [innerHTML]=\"conditionsLink\"></span>\n                                        </label>\n                                    }\n\n                                    @if (others) {\n                                        <label class=\"form__checkbox\">\n                                            <input type=\"checkbox\"\n                                                class=\"checkbox\"\n                                                formControlName=\"others\"\n                                            />\n                                            <span class=\"box\">\n                                                <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n                                            </span>\n                                            <span>{{ others }}</span>\n                                        </label>\n                                    }\n\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Bot\u00F3n -->\n                        <div class=\"btn__group\">\n                            @if (applyButton) {\n                                <button\n                                    type=\"submit\"\n                                    class=\"btn btn__primary--outline btn__events-form\"\n                                    [attr.aria-label]=\"applyButton.label\"\n                                    [disabled]=\"form.invalid\"\n                                >\n                                    <span>{{ applyButton.label }}</span>\n                                </button>\n                            }\n                        </div>\n\n                    </div>\n                </form>\n\n            }\n        </div>\n\n    </div>\n</section>\n", styles: [".eventsForm{padding-block:3.5rem;padding-inline:4.5rem}@media (min-width: 768px){.eventsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.eventsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.eventsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.eventsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.eventsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.eventsForm__title{margin-bottom:3rem;display:none;text-align:start}}.eventsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.eventsForm__inner{column-gap:4rem;flex-direction:row-reverse}}@media (min-width: 1280px){.eventsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.eventsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.eventsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.eventsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.eventsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.eventsForm__graphic{margin-inline:auto}}.eventsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.eventsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.eventsForm__graphicInner{aspect-ratio:905/1067}}.eventsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.eventsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.eventsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.eventsForm__content{order:1;flex:1 1 0%}}.eventsForm__content .btn__group{margin-top:4rem;justify-content:center}.eventsForm__content .eventsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.eventsForm__content .eventsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.eventsForm__content .eventsForm__title{display:block;text-align:start}}.eventsForm__content .eventsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.eventsForm__content .eventsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.eventsForm__content .eventsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__row{margin:0 -2.1rem}}.eventsForm__content .eventsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.eventsForm__content .eventsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__col{padding-inline:2.1rem}}.eventsForm__content .eventsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.eventsForm__placeholder span{color:#1e1e1e;opacity:.6}.eventsForm .form-error{color:var(--grey);z-index:1}.eventsForm .icon-right i{font-size:2rem}.eventsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.eventsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){:host ::ng-deep .eventsForm__title.corp-color{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:3rem;display:none;text-align:start}}input[type=time]::-webkit-calendar-picker-indicator{opacity:0;display:none}.puro-timepicker{position:absolute;width:86%;max-height:20rem;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:.4rem;z-index:9999;padding:0;margin:0;list-style:none;box-shadow:0 4px 12px #0000001a}.puro-timepicker li{padding:1rem 1.4rem;font-size:1.4rem;cursor:pointer;border-bottom:1px solid #f2f2f2}.puro-timepicker li:last-child{border-bottom:none}.puro-timepicker li:hover{background:#f5f5f5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PuroDynamicHeadingComponent, selector: "lib-puro-dynamic-heading", inputs: ["tag", "wrapper", "cssClass", "content", "color"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "directive", type: PuroScriptDirective, selector: "[scriptLoader]", inputs: ["dataLoaded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroEventsFormComponent, decorators: [{
             type: Component,
@@ -3074,9 +3187,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         PuroDynamicHeadingComponent,
-                        NgOptimizedImage
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"eventsForm\">\n    <div class=\"eventsForm__inner\">\n        @if (title) {\n            <lib-puro-dynamic-heading\n                [tag]=\"tags?.title || 'span'\"\n                cssClass=\"eventsForm__title corp-color\"\n                [color]=\"textColors?.title\"\n                [content]=\"title\"\n            ></lib-puro-dynamic-heading>\n        }\n        <div class=\"eventsForm__graphic\">\n            <div class=\"eventsForm__graphicInner\">\n                @if (img) {\n                    <img\n                        [ngSrc]=\"img.src\"\n                        [alt]=\"img.alt\"\n                        width=\"467\"\n                        height=\"551\"\n                        class=\"eventsForm__graphicInner--img\"\n                        decoding=\"async\"\n                    />\n                }\n            </div>\n        </div>\n        <div class=\"eventsForm__content\">\n            @if (title) {\n                <lib-puro-dynamic-heading\n                    [tag]=\"tags?.title || 'span'\"\n                    cssClass=\"eventsForm__title corp-color\"\n                    [color]=\"textColors?.title\"\n                    [content]=\"title\"\n                ></lib-puro-dynamic-heading>\n            }\n            @if (description) {\n                <div class=\"eventsForm__paragraph\">\n                    {{ description }}\n                </div>\n            }\n            @if (formReady$()) {\n                <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n                    <div class=\"eventsForm__section\">\n                        <div class=\"form__group\">\n                            @if (ciTitle) {\n                                <span\n                                    class=\"eventsForm__section--title form__group\"\n                                >\n                                    {{ ciTitle }}\n                                </span>\n                            }\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (nameInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"text\"\n                                            class=\"form__control\"\n                                            name=\"name\"\n                                            id=\"name\"\n                                            [placeholder]=\"\n                                                nameInput.placeholder\n                                            \"\n                                            [formControlName]=\"nameInput.name!\"\n                                            (blur)=\"validateInput(nameInput)\"\n                                            (input)=\"\n                                                inputChange($event, nameInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"18\"\n                                                height=\"20\"\n                                            >\n                                                <use href=\"#user\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!nameInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            nameInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                            <div class=\"eventsForm__col\">\n                                @if (surnameInput && surnameInput.name) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"text\"\n                                            class=\"form__control\"\n                                            name=\"surname\"\n                                            id=\"surname\"\n                                            [placeholder]=\"\n                                                surnameInput.placeholder\n                                            \"\n                                            [formControlName]=\"\n                                                surnameInput.name!\n                                            \"\n                                            (blur)=\"validateInput(surnameInput)\"\n                                            (input)=\"\n                                                inputChange(\n                                                    $event,\n                                                    surnameInput\n                                                )\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"18\"\n                                                height=\"20\"\n                                            >\n                                                <use href=\"#user\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!surnameInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            surnameInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (prefix) {\n                                    <div class=\"form__group withIcon\">\n                                        <select\n                                            class=\"form__control\"\n                                            name=\"prefix\"\n                                            formControlName=\"prefix\"\n                                        >\n                                            @if (prefix.placeholder) {\n                                                <option\n                                                    value=\"\"\n                                                    disabled\n                                                    selected\n                                                >\n                                                    {{ prefix.placeholder }}\n                                                </option>\n                                            }\n                                            @for (\n                                                item of prefix.options || [];\n                                                track $index\n                                            ) {\n                                                <option [value]=\"item.code\">\n                                                    {{ item.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"15\"\n                                                height=\"8\"\n                                            >\n                                                <use href=\"#select-arrow\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                            <div class=\"eventsForm__col\">\n                                @if (phoneInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"text\"\n                                            class=\"form__control\"\n                                            name=\"phone\"\n                                            id=\"phone\"\n                                            [placeholder]=\"\n                                                phoneInput.placeholder\n                                            \"\n                                            (blur)=\"validateInput(phoneInput)\"\n                                            (input)=\"\n                                                inputChange($event, phoneInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"17\"\n                                                height=\"17\"\n                                            >\n                                                <use href=\"#phone\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!phoneInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            phoneInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (emailInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"email\"\n                                            class=\"form__control\"\n                                            name=\"email\"\n                                            [placeholder]=\"\n                                                emailInput.placeholder\n                                            \"\n                                            (blur)=\"validateInput(emailInput)\"\n                                            (input)=\"\n                                                inputChange($event, emailInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"17\"\n                                                height=\"17\"\n                                            >\n                                                <use href=\"#email\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!emailInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            emailInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (\n                                    companyNameInput && companyNameInput.name\n                                ) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"text\"\n                                            class=\"form__control\"\n                                            name=\"companyname\"\n                                            id=\"companyname\"\n                                            [placeholder]=\"\n                                                companyNameInput.placeholder\n                                            \"\n                                            [formControlName]=\"\n                                                companyNameInput.name!\n                                            \"\n                                            (blur)=\"\n                                                validateInput(companyNameInput)\n                                            \"\n                                            (input)=\"\n                                                inputChange(\n                                                    $event,\n                                                    companyNameInput\n                                                )\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <div>\n                                                <i class=\"icon-99\"></i>\n                                            </div>\n                                        </span>\n                                    </div>\n                                    @if (!companyNameInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            companyNameInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"eventsForm__section\">\n                        <div class=\"form__group\">\n                            @if (dTitle) {\n                                <span\n                                    class=\"eventsForm__section--title form__group\"\n                                >\n                                    {{ dTitle }}\n                                </span>\n                            }\n                        </div>\n                        <div class=\"careersForm__row\">\n                            <div class=\"careersForm__col\">\n                                @if (neDropdown) {\n                                    <div class=\"form__group withIcon\">\n                                        <select\n                                            class=\"form__control\"\n                                            formControlName=\"neDropdown\"\n                                        >\n                                            <option value=\"\" disabled selected>\n                                                {{ neDropdown.placeholder }}\n                                            </option>\n                                            @for (\n                                                option of neDropdown.options;\n                                                track $index\n                                            ) {\n                                                <option [value]=\"option.code\">\n                                                    {{ option.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"15\"\n                                                height=\"8\"\n                                            >\n                                                <use href=\"#select-arrow\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (npInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"number\"\n                                            class=\"form__control\"\n                                            name=\"npInput\"\n                                            id=\"npInput\"\n                                            [placeholder]=\"npInput.placeholder\"\n                                            [formControlName]=\"npInput.name!\"\n                                            (blur)=\"validateInput(npInput)\"\n                                            (input)=\"\n                                                inputChange($event, npInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"18\"\n                                                height=\"20\"\n                                            >\n                                                <use href=\"#user\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                    @if (!npInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            npInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                            <div class=\"eventsForm__col\">\n                                @if (dateInput && dateInput.name) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"date\"\n                                            class=\"form__control\"\n                                            name=\"dateInput\"\n                                            id=\"dateInput\"\n                                            [placeholder]=\"\n                                                dateInput.placeholder\n                                            \"\n                                            [formControlName]=\"dateInput.name!\"\n                                            (blur)=\"validateInput(dateInput)\"\n                                            (input)=\"\n                                                inputChange($event, dateInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <div>\n                                                <i class=\"icon-89\"></i>\n                                            </div>\n                                        </span>\n                                    </div>\n                                    @if (!dateInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            dateInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (sHourInput && sHourInput.name) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"hour\"\n                                            class=\"form__control\"\n                                            name=\"sHourInput\"\n                                            id=\"sHourInput\"\n                                            [placeholder]=\"\n                                                sHourInput.placeholder\n                                            \"\n                                            [formControlName]=\"sHourInput.name!\"\n                                            (blur)=\"validateInput(sHourInput)\"\n                                            (input)=\"\n                                                inputChange($event, sHourInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <div>\n                                                <i class=\"icon-100\"></i>\n                                            </div>\n                                        </span>\n                                    </div>\n                                    @if (!sHourInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            sHourInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                            <div class=\"eventsForm__col\">\n                                @if (fHourInput && fHourInput.name) {\n                                    <div class=\"form__group withIcon\">\n                                        <input\n                                            type=\"hour\"\n                                            class=\"form__control\"\n                                            name=\"fHourInput\"\n                                            id=\"fHourInput\"\n                                            [placeholder]=\"\n                                                fHourInput.placeholder\n                                            \"\n                                            [formControlName]=\"fHourInput.name!\"\n                                            (blur)=\"validateInput(fHourInput)\"\n                                            (input)=\"\n                                                inputChange($event, fHourInput)\n                                            \"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <div>\n                                                <i class=\"icon-100\"></i>\n                                            </div>\n                                        </span>\n                                    </div>\n                                    @if (!fHourInput.valid()) {\n                                        <span class=\"form-error\">{{\n                                            fHourInput.error\n                                        }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (infoTextarea) {\n                                    <div class=\"form__group no-dot\">\n                                        <textarea\n                                            class=\"form__control\"\n                                            [placeholder]=\"\n                                                infoTextarea.placeholder\n                                            \"\n                                            [formControlName]=\"\n                                                infoTextarea.name!\n                                            \"\n                                        ></textarea>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"eventsForm__section\">\n                        <div class=\"form__group\">\n                            @if (howTitle) {\n                                <span\n                                    class=\"eventsForm__section--title form__group\"\n                                >\n                                    {{ howTitle }}\n                                </span>\n                            }\n                        </div>\n                        <div class=\"careersForm__row\">\n                            <div class=\"careersForm__col\">\n                                @if (othersDropdown) {\n                                    <div class=\"form__group withIcon\">\n                                        <select\n                                            class=\"form__control\"\n                                            formControlName=\"othersDropdown\"\n                                        >\n                                            <option value=\"\" disabled selected>\n                                                {{ othersDropdown.placeholder }}\n                                            </option>\n                                            @for (\n                                                option of othersDropdown.options;\n                                                track $index\n                                            ) {\n                                                <option [value]=\"option.code\">\n                                                    {{ option.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg\n                                                aria-hidden=\"true\"\n                                                focusable=\"false\"\n                                                width=\"15\"\n                                                height=\"8\"\n                                            >\n                                                <use href=\"#select-arrow\"></use>\n                                            </svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (howTextarea) {\n                                    <div class=\"form__group no-dot\">\n                                        <textarea\n                                            class=\"form__control\"\n                                            [placeholder]=\"\n                                                howTextarea.placeholder\n                                            \"\n                                            [formControlName]=\"\n                                                howTextarea.name!\n                                            \"\n                                        ></textarea>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                <div class=\"block-checkbox\">\n                                    @if (requiredLabel) {\n                                        <span class=\"required-label\">{{\n                                            requiredLabel\n                                        }}</span>\n                                    }\n                                    @if (conditionsLink) {\n                                        <label class=\"form__checkbox\">\n                                            <input\n                                                type=\"checkbox\"\n                                                checked\n                                                class=\"checkbox\"\n                                                formControlName=\"conditions\"\n                                            />\n                                            <span class=\"box\">\n                                                <svg\n                                                    aria-hidden=\"true\"\n                                                    focusable=\"false\"\n                                                    width=\"9\"\n                                                    height=\"7\"\n                                                >\n                                                    <use\n                                                        href=\"#checkbox-tick\"\n                                                    ></use>\n                                                </svg>\n                                            </span>\n                                            <span [innerHTML]=\"conditionsLink\">\n                                            </span>\n                                        </label>\n                                    }\n                                    @if (others) {\n                                        <label class=\"form__checkbox\">\n                                            <input\n                                                type=\"checkbox\"\n                                                class=\"checkbox\"\n                                                formControlName=\"others\"\n                                            />\n                                            <span class=\"box\">\n                                                <svg\n                                                    aria-hidden=\"true\"\n                                                    focusable=\"false\"\n                                                    width=\"9\"\n                                                    height=\"7\"\n                                                >\n                                                    <use\n                                                        href=\"#checkbox-tick\"\n                                                    ></use>\n                                                </svg>\n                                            </span>\n                                            <span>{{ others }}</span>\n                                        </label>\n                                    }\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"btn__group\">\n                            @if (applyButton) {\n                                <button\n                                    class=\"btn btn__primary--outline js-active-modal\"\n                                    data-modal_name=\"thankyou\"\n                                    [attr.aria-label]=\"applyButton.label\"\n                                    [disabled]=\"!form.valid\"\n                                    (click)=\"submitForm()\"\n                                >\n                                    <span>{{ applyButton.label }}</span>\n                                </button>\n                            }\n                            @if (seeAllButton) {\n                                <a\n                                    class=\"btn btn__primary--outline js-active-modal\"\n                                    [attr.aria-label]=\"seeAllButton.label\"\n                                    [attr.href]=\"seeAllButton.url\"\n                                >\n                                    <span>{{ seeAllButton.label }}</span>\n                                </a>\n                            }\n                        </div>\n                    </div>\n                </form>\n            }\n        </div>\n    </div>\n</section>\n", styles: [".eventsForm{padding-block:3.5rem;padding-inline:4.5rem;padding-inline:auto}@media (min-width: 768px){.eventsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.eventsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.eventsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.eventsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.eventsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.eventsForm__title{margin-bottom:3rem;display:none;text-align:start}}.eventsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.eventsForm__inner{column-gap:4rem;flex-direction:row-reverse}}@media (min-width: 1280px){.eventsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.eventsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.eventsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.eventsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.eventsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.eventsForm__graphic{margin-inline:auto}}.eventsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.eventsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.eventsForm__graphicInner{aspect-ratio:905/1067}}.eventsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.eventsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.eventsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.eventsForm__content{order:1;flex:1 1 0%}}.eventsForm__content .btn__group{margin-top:4rem;justify-content:center}.eventsForm__content .eventsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.eventsForm__content .eventsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.eventsForm__content .eventsForm__title{display:block;text-align:start}}.eventsForm__content .eventsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.eventsForm__content .eventsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.eventsForm__content .eventsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__row{margin:0 -2.1rem}}.eventsForm__content .eventsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.eventsForm__content .eventsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__col{padding-inline:2.1rem}}.eventsForm__content .eventsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.eventsForm__placeholder span{color:#1e1e1e;opacity:.6}.eventsForm .form-error{color:var(--grey);z-index:1}.eventsForm .icon-right i{font-size:2rem}.eventsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.eventsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){:host ::ng-deep .eventsForm__title.corp-color{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:3rem;display:none;text-align:start}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
+                        NgOptimizedImage,
+                        PuroLinkTypeDirective,
+                        PuroScriptDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"eventsForm\">\n    <div class=\"eventsForm__inner\">\n\n        @if (title) {\n            <lib-puro-dynamic-heading\n                [tag]=\"tags?.title || 'span'\"\n                cssClass=\"eventsForm__title corp-color\"\n                [color]=\"textColors?.title\"\n                [content]=\"title\"\n            ></lib-puro-dynamic-heading>\n        }\n\n        <!-- Imagen -->\n        <div class=\"eventsForm__graphic\">\n            <div class=\"eventsForm__graphicInner\">\n                @if (img) {\n                    <img\n                        [ngSrc]=\"img.src\"\n                        [alt]=\"img.alt\"\n                        width=\"467\"\n                        height=\"551\"\n                        class=\"eventsForm__graphicInner--img\"\n                        decoding=\"async\"\n                    />\n                }\n            </div>\n        </div>\n\n        <div class=\"eventsForm__content\">\n\n            @if (title) {\n                <lib-puro-dynamic-heading\n                    [tag]=\"tags?.title || 'span'\"\n                    cssClass=\"eventsForm__title corp-color\"\n                    [color]=\"textColors?.title\"\n                    [content]=\"title\"\n                ></lib-puro-dynamic-heading>\n            }\n\n            @if (description) {\n                <div class=\"eventsForm__paragraph\">{{ description }}</div>\n            }\n\n            @if (formReady$()) {\n\n                <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\" scriptLoader [dataLoaded]=\"true\">\n\n                    <!-- SECTION 1 -->\n                    <div class=\"eventsForm__section\">\n                        @if (ciTitle) {\n                            <span class=\"eventsForm__section--title\">{{ ciTitle }}</span>\n                        }\n\n                        <!-- Nombre + Apellidos -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (nameInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"nameInput.placeholder\"\n                                            [formControlName]=\"nameInput.name!\"\n                                            (blur)=\"validateInput(nameInput)\"\n                                            (input)=\"inputChange($event, nameInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!nameInput.valid()) {\n                                        <span class=\"form-error\">{{ nameInput.error }}</span>\n                                    }\n                                }\n                            </div>\n\n                            <div class=\"eventsForm__col\">\n                                @if (surnameInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"surnameInput.placeholder\"\n                                            [formControlName]=\"surnameInput.name!\"\n                                            (blur)=\"validateInput(surnameInput)\"\n                                            (input)=\"inputChange($event, surnameInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!surnameInput.valid()) {\n                                        <span class=\"form-error\">{{ surnameInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Prefijo + Tel\u00E9fono -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (prefix) {\n                                    <div class=\"form__group withIcon\">\n                                        <select class=\"form__control\" formControlName=\"prefix\">\n                                            @if (prefix.placeholder) {\n                                                <option value=\"\">\n                                                    {{ prefix.placeholder }}\n                                                </option>\n                                            }\n                                            @for (item of prefix.options || []; track $index) {\n                                                <option [value]=\"item.code\">{{ item.name }}</option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n\n                            <div class=\"eventsForm__col\">\n                                @if (phoneInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"tel\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"phoneInput.placeholder\"\n                                            formControlName=\"phone\"\n                                            (blur)=\"validateInput(phoneInput)\"\n                                            (input)=\"inputChange($event, phoneInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"17\" height=\"17\"><use href=\"#phone\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!phoneInput.valid()) {\n                                        <span class=\"form-error\">{{ phoneInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Email -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (emailInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"email\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"emailInput.placeholder\"\n                                            formControlName=\"email\"\n                                            (blur)=\"validateInput(emailInput)\"\n                                            (input)=\"inputChange($event, emailInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"17\" height=\"17\"><use href=\"#email\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!emailInput.valid()) {\n                                        <span class=\"form-error\">{{ emailInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Empresa -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (companyNameInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"companyNameInput.placeholder\"\n                                            [formControlName]=\"companyNameInput.name!\"\n                                            (blur)=\"validateInput(companyNameInput)\"\n                                            (input)=\"inputChange($event, companyNameInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <i class=\"icon-99\"></i>\n                                        </span>\n                                    </div>\n                                    @if (!companyNameInput.valid()) {\n                                        <span class=\"form-error\">{{ companyNameInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                    </div>\n\n                    <!-- SECTION 2 -->\n                    <div class=\"eventsForm__section\">\n                        @if (dTitle) {\n                            <span class=\"eventsForm__section--title\">{{ dTitle }}</span>\n                        }\n\n                        <!-- Dropdown N\u00BA personas -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (neDropdown) {\n                                    <div class=\"form__group withIcon\">\n                                        <select class=\"form__control\" formControlName=\"neDropdown\">\n                                            <option value=\"\">{{ neDropdown.placeholder }}</option>\n                                            @for (option of neDropdown.options; track $index) {\n                                                <option [value]=\"option.code\">\n                                                    {{ option.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- N\u00BA personas + Fecha -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (npInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"number\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"npInput.placeholder\"\n                                            [formControlName]=\"npInput.name!\"\n                                            (blur)=\"validateInput(npInput)\"\n                                            (input)=\"inputChange($event, npInput)\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"18\" height=\"20\"><use href=\"#user\"></use></svg>\n                                        </span>\n                                    </div>\n                                    @if (!npInput.valid()) {\n                                        <span class=\"form-error\">{{ npInput.error }}</span>\n                                    }\n                                }\n                            </div>\n\n                            <div class=\"eventsForm__col\">\n                                @if (dateInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control\"\n                                            [placeholder]=\"dateInput.placeholder\"\n                                            [formControlName]=\"dateInput.name!\"\n                                        />\n                                        <span class=\"icon-right corp-color\">\n                                            <i class=\"icon-89\"></i>\n                                        </span>\n                                    </div>\n                                    @if (!dateInput.valid()) {\n                                        <span class=\"form-error\">{{ dateInput.error }}</span>\n                                    }\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Horas -->\n                        <div class=\"eventsForm__row\">\n\n                            <!-- Start Hour -->\n                            <div class=\"eventsForm__col\" style=\"position: relative\">\n                                @if (sHourInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control timepicker-trigger\"\n                                            readonly\n                                            autocomplete=\"off\"\n                                            [placeholder]=\"sHourInput.placeholder\"\n                                            [formControlName]=\"sHourInput.name!\"\n                                            (click)=\"openTimepicker('sHourInput', $event)\"\n                                        />\n                                        <span class=\"icon-right corp-color timepicker-trigger\"\n                                            (click)=\"openTimepicker('sHourInput', $event)\">\n                                            <i class=\"icon-100\"></i>\n                                        </span>\n                                    </div>\n\n                                    @if (!sHourInput.valid()) {\n                                        <span class=\"form-error\">{{ sHourInput.error }}</span>\n                                    }\n\n                                    <ul class=\"puro-timepicker\"\n                                        *ngIf=\"activeTimepicker === 'sHourInput'\">\n                                        <li *ngFor=\"let h of hours\"\n                                            (click)=\"selectHour('sHourInput', h)\">\n                                            {{ h }}\n                                        </li>\n                                    </ul>\n                                }\n                            </div>\n\n                            <!-- End Hour -->\n                            <div class=\"eventsForm__col\" style=\"position: relative\">\n                                @if (fHourInput) {\n                                    <div class=\"form__group withIcon\">\n                                        <input type=\"text\"\n                                            class=\"form__control timepicker-trigger\"\n                                            readonly\n                                            autocomplete=\"off\"\n                                            [placeholder]=\"fHourInput.placeholder\"\n                                            [formControlName]=\"fHourInput.name!\"\n                                            (click)=\"openTimepicker('fHourInput', $event)\"\n                                        />\n                                        <span class=\"icon-right corp-color timepicker-trigger\"\n                                            (click)=\"openTimepicker('fHourInput', $event)\">\n                                            <i class=\"icon-100\"></i>\n                                        </span>\n                                    </div>\n\n                                    @if (!fHourInput.valid()) {\n                                        <span class=\"form-error\">{{ fHourInput.error }}</span>\n                                    }\n\n                                    <ul class=\"puro-timepicker\"\n                                        *ngIf=\"activeTimepicker === 'fHourInput'\">\n                                        <li *ngFor=\"let h of hours\"\n                                            (click)=\"selectHour('fHourInput', h)\">\n                                            {{ h }}\n                                        </li>\n                                    </ul>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Mensaje info -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (infoTextarea) {\n                                    <div class=\"form__group no-dot\">\n                                        <textarea class=\"form__control\"\n                                            [placeholder]=\"infoTextarea.placeholder\"\n                                            [formControlName]=\"infoTextarea.name!\">\n                                        </textarea>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                    </div>\n\n                    <!-- SECTION 3 -->\n                    <div class=\"eventsForm__section\">\n                        @if (howTitle) {\n                            <span class=\"eventsForm__section--title\">{{ howTitle }}</span>\n                        }\n\n                        <!-- Dropdown -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (othersDropdown) {\n                                    <div class=\"form__group withIcon\">\n                                        <select class=\"form__control\"\n                                            formControlName=\"othersDropdown\">\n                                            <option value=\"\">\n                                                {{ othersDropdown.placeholder }}\n                                            </option>\n                                            @for (option of othersDropdown.options; track $index) {\n                                                <option [value]=\"option.code\">\n                                                    {{ option.name }}\n                                                </option>\n                                            }\n                                        </select>\n                                        <span class=\"icon-right corp-color\">\n                                            <svg width=\"15\" height=\"8\"><use href=\"#select-arrow\"></use></svg>\n                                        </span>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Textarea -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                @if (howTextarea) {\n                                    <div class=\"form__group no-dot\">\n                                        <textarea class=\"form__control\"\n                                            [placeholder]=\"howTextarea.placeholder\"\n                                            [formControlName]=\"howTextarea.name!\">\n                                        </textarea>\n                                    </div>\n                                }\n                            </div>\n                        </div>\n\n                        <!-- Checkboxes -->\n                        <div class=\"eventsForm__row\">\n                            <div class=\"eventsForm__col\">\n                                <div class=\"block-checkbox\">\n\n                                    @if (requiredLabel) {\n                                        <span class=\"required-label\">{{ requiredLabel }}</span>\n                                    }\n\n                                    @if (conditionsLink) {\n                                        <label class=\"form__checkbox\">\n                                            <input type=\"checkbox\"\n                                                class=\"checkbox\"\n                                                formControlName=\"conditions\"\n                                            />\n                                            <span class=\"box\">\n                                                <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n                                            </span>\n                                            <span [innerHTML]=\"conditionsLink\"></span>\n                                        </label>\n                                    }\n\n                                    @if (others) {\n                                        <label class=\"form__checkbox\">\n                                            <input type=\"checkbox\"\n                                                class=\"checkbox\"\n                                                formControlName=\"others\"\n                                            />\n                                            <span class=\"box\">\n                                                <svg width=\"9\" height=\"7\"><use href=\"#checkbox-tick\"></use></svg>\n                                            </span>\n                                            <span>{{ others }}</span>\n                                        </label>\n                                    }\n\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Bot\u00F3n -->\n                        <div class=\"btn__group\">\n                            @if (applyButton) {\n                                <button\n                                    type=\"submit\"\n                                    class=\"btn btn__primary--outline btn__events-form\"\n                                    [attr.aria-label]=\"applyButton.label\"\n                                    [disabled]=\"form.invalid\"\n                                >\n                                    <span>{{ applyButton.label }}</span>\n                                </button>\n                            }\n                        </div>\n\n                    </div>\n                </form>\n\n            }\n        </div>\n\n    </div>\n</section>\n", styles: [".eventsForm{padding-block:3.5rem;padding-inline:4.5rem}@media (min-width: 768px){.eventsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.eventsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.eventsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.eventsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.eventsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.eventsForm__title{margin-bottom:3rem;display:none;text-align:start}}.eventsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.eventsForm__inner{column-gap:4rem;flex-direction:row-reverse}}@media (min-width: 1280px){.eventsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.eventsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.eventsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.eventsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.eventsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.eventsForm__graphic{margin-inline:auto}}.eventsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.eventsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.eventsForm__graphicInner{aspect-ratio:905/1067}}.eventsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.eventsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.eventsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.eventsForm__content{order:1;flex:1 1 0%}}.eventsForm__content .btn__group{margin-top:4rem;justify-content:center}.eventsForm__content .eventsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.eventsForm__content .eventsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.eventsForm__content .eventsForm__title{display:block;text-align:start}}.eventsForm__content .eventsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.eventsForm__content .eventsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.eventsForm__content .eventsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__row{margin:0 -2.1rem}}.eventsForm__content .eventsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.eventsForm__content .eventsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.eventsForm__content .eventsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.eventsForm__content .eventsForm__col{padding-inline:2.1rem}}.eventsForm__content .eventsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.eventsForm__placeholder span{color:#1e1e1e;opacity:.6}.eventsForm .form-error{color:var(--grey);z-index:1}.eventsForm .icon-right i{font-size:2rem}.eventsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.eventsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){:host ::ng-deep .eventsForm__title.corp-color{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){:host ::ng-deep .eventsForm__title.corp-color{margin-bottom:3rem;display:none;text-align:start}}input[type=time]::-webkit-calendar-picker-indicator{opacity:0;display:none}.puro-timepicker{position:absolute;width:86%;max-height:20rem;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:.4rem;z-index:9999;padding:0;margin:0;list-style:none;box-shadow:0 4px 12px #0000001a}.puro-timepicker li{padding:1rem 1.4rem;font-size:1.4rem;cursor:pointer;border-bottom:1px solid #f2f2f2}.puro-timepicker li:last-child{border-bottom:none}.puro-timepicker li:hover{background:#f5f5f5}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { title: [{
                 type: Input
             }], description: [{
                 type: Input
@@ -3124,8 +3239,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], applyButton: [{
                 type: Input
-            }], seeAllButton: [{
-                type: Input
             }], tags: [{
                 type: Input
             }], textColors: [{
@@ -3482,6 +3595,18 @@ class MapperService {
     getView(view) {
         return view === 'right' ? 'right' : 'left';
     }
+    sanitize(name) {
+        return name
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '') // quitar tildes
+            .replace(/[^a-zA-Z0-9 ]/g, ' ') // quitar símbolos raros
+            .trim()
+            .split(' ')
+            .map((part, i) => i === 0
+            ? part.toLowerCase()
+            : part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+            .join('');
+    }
     generateAgesOptions(maxLength, minLength = 0) {
         const options = [];
         for (let i = minLength; i <= maxLength; i++) {
@@ -3707,7 +3832,7 @@ class MapperService {
                             componentMapped.props = this.mapCareersForm(component.props, addons?.consultType);
                             break;
                         case 'eventsform':
-                            componentMapped.props = this.mapEventsForm(component.props, addons?.consultType);
+                            componentMapped.props = this.mapEventsForm(component.props);
                             break;
                         case 'modalinfoleft':
                         case 'modalinforight':
@@ -3773,7 +3898,9 @@ class MapperService {
     mapGallery(props) {
         const { texts, buttons, filters } = props;
         return {
-            filters: filters?.map((item, index) => ({
+            filters: filters
+                ?.filter((f) => Array.isArray(f.multimedia) && f.multimedia.length > 0)
+                .map((item, index) => ({
                 id: index,
                 all: item.all,
                 room: item.room,
@@ -3797,6 +3924,7 @@ class MapperService {
             filterTitle: texts?.roomsFilter,
             button: Utils.mapButtons(this.siteId(), buttons)[0],
             items: filters
+                ?.filter((f) => Array.isArray(f.multimedia) && f.multimedia.length > 0)
                 .reduce((acc, filter, filterIndex) => {
                 if (filter.multimedia) {
                     const multimediaWithFilter = filter.multimedia.map((item) => ({
@@ -5779,138 +5907,138 @@ class MapperService {
             },
         };
     }
-    //TODO: Check back props
-    mapEventsForm(props, ndPropsConsult) {
+    mapEventsForm(props) {
+        const prefixValues = Object.values(props?.prefixes || {});
         return {
             title: typeof props?.texts?.title === 'string'
                 ? props?.texts?.title
                 : props?.texts?.title?.contain,
+            description: props?.texts?.description,
+            ciTitle: props?.texts?.cititle,
+            dTitle: props?.texts?.dtitle,
+            howTitle: props?.texts?.howTitle,
+            others: props?.texts?.others,
+            conditionsLink: props?.texts?.conditionslink,
+            requiredLabel: props?.texts?.requiredLabel,
             tags: {
                 title: props?.texts?.title?.tag,
             },
             textColors: {
                 title: props?.texts?.title?.color?.trim(),
             },
-            ciTitle: props?.texts?.ciTitle,
-            dTitle: props?.texts?.dTitle,
-            howTitle: props?.texts?.howTitle,
-            description: props?.texts?.description,
-            conditionsLink: props?.texts?.conditionsLinks,
-            others: props?.texts?.others,
-            requiredLabel: props?.texts?.requiredLabel,
-            img: this.getImageResponsive(props?.multimedia?.image?.[0]),
+            img: this.getImageResponsive(props?.multimedia?.imagenes?.[0]),
             applyButton: Utils.mapButtons(this.siteId(), props?.buttons)[0],
             seeAllButton: Utils.mapButtons(this.siteId(), props?.buttons)[1],
             howTextarea: {
-                title: props?.texts?.inputHowMessage,
-                placeholder: props?.texts?.inputHowMessage,
+                title: props?.texts?.howTitle,
+                placeholder: props?.texts?.howTitle,
                 value: '',
                 valid: signal(true),
                 name: 'howMessage',
             },
             infoTextarea: {
-                title: props?.texts?.inputInfoMessage,
-                placeholder: props?.texts?.inputInfoMessage,
+                title: props?.texts?.infoTitle,
+                placeholder: props?.texts?.infoTitle,
                 value: '',
                 valid: signal(true),
                 name: 'infoMessage',
             },
             neDropdown: {
                 placeholder: props?.texts?.neDropdown,
-                options: props?.hotels?.map((prop) => ({ code: prop?.id, name: prop?.name })),
+                options: props?.nature?.map((prop) => ({ code: prop?.id, name: prop?.name })),
             },
             othersDropdown: {
-                title: props?.texts?.othersDropdown,
-                options: ndPropsConsult?.map((prop) => ({ code: prop?.id, name: prop?.name })),
+                placeholder: props?.texts?.othersDropdown,
+                options: props?.howHeardUs?.map((prop) => ({ code: prop?.id, name: prop?.name })),
             },
             prefix: {
-                options: props?.prefixes?.map((prefix) => ({
-                    code: Array(props?.prefixes).indexOf(prefix),
+                options: prefixValues.map((prefix, index) => ({
+                    code: index,
                     name: prefix,
                 })),
                 placeholder: props?.texts?.prefixes,
             },
             nameInput: {
-                name: Utils.normalizeText(props?.texts?.inputName),
-                placeholder: props?.texts?.inputName,
+                name: this.sanitize(props?.texts?.nameTitle),
+                placeholder: props?.texts?.nameTitle,
                 value: '',
                 type: 'text',
-                error: props?.texts?.errorName,
+                error: props?.texts?.nameError,
                 validators: [Validators.required],
                 valid: signal(true),
             },
             surnameInput: {
-                title: props?.texts?.surnames,
-                name: Utils.normalizeText(props?.texts?.surnames),
-                placeholder: props?.texts?.surnames,
+                title: props?.texts?.surnamesTitle,
+                name: this.sanitize(props?.texts?.surnamesTitle),
+                placeholder: props?.texts?.surnamesTitle,
                 value: '',
                 type: 'text',
-                error: props?.texts?.errorName,
+                error: props?.texts?.surnamesError,
                 validators: [Validators.required],
                 valid: signal(true),
             },
             emailInput: {
-                title: props?.texts?.inputEmail,
-                name: Utils.normalizeText(props?.texts?.inputEmail),
-                placeholder: props?.texts?.inputEmail,
+                title: props?.texts?.emailTitle,
+                name: this.sanitize(props?.texts?.emailTitle),
+                placeholder: props?.texts?.emailTitle,
                 value: '',
                 type: 'email',
-                error: props?.texts?.errorEmail,
+                error: props?.texts?.emailError,
                 validators: [Validators.email, Validators.required],
                 valid: signal(true),
             },
             companyNameInput: {
-                name: Utils.normalizeText(props?.texts?.inputCompanyName),
-                placeholder: props?.texts?.inputCompanyName,
+                name: this.sanitize(props?.texts?.companyTitle),
+                placeholder: props?.texts?.companyTitle,
                 value: '',
                 type: 'text',
-                error: props?.texts?.errorCompanyName,
+                error: props?.texts?.companyError,
                 validators: [Validators.required],
                 valid: signal(true),
             },
             phoneInput: {
-                title: props?.texts?.inputPhone,
-                name: Utils.normalizeText(props?.texts?.inputPhone),
-                placeholder: props?.texts?.inputPhone,
+                title: props?.texts?.phoneTitle,
+                name: this.sanitize(props?.texts?.phoneTitle),
+                placeholder: props?.texts?.phoneTitle,
                 value: '',
                 type: 'tel',
-                error: props?.texts?.errorPhone,
+                error: props?.texts?.phoneError,
                 validators: [Validators.required],
                 valid: signal(true),
             },
             npInput: {
-                name: Utils.normalizeText(props?.texts?.npInput),
-                placeholder: props?.texts?.npInput,
+                name: this.sanitize(props?.texts?.npTitle),
+                placeholder: props?.texts?.npTitle,
                 value: '',
                 type: 'text',
-                error: props?.texts?.errorNpInput,
+                error: props?.texts?.npError,
                 validators: [Validators.required],
                 valid: signal(true),
             },
             dateInput: {
-                name: Utils.normalizeText(props?.texts?.dateInput),
-                placeholder: props?.texts?.dateInput,
+                name: this.sanitize(props?.texts?.dateTitle),
+                placeholder: props?.texts?.dateTitle,
                 value: '',
                 type: 'text',
-                error: props?.texts?.errorDateInput,
+                error: props?.texts?.dateError,
                 validators: [Validators.required],
                 valid: signal(true),
             },
             sHourInput: {
-                name: Utils.normalizeText(props?.texts?.sHourInput),
-                placeholder: props?.texts?.sHourInput,
+                name: this.sanitize(props?.texts?.sHourTitle),
+                placeholder: props?.texts?.sHourTitle,
                 value: '',
                 type: 'text',
-                error: props?.texts?.errorSHourInput,
+                error: props?.texts?.sHourError,
                 validators: [Validators.required],
                 valid: signal(true),
             },
             fHourInput: {
-                name: Utils.normalizeText(props?.texts?.fHourInput),
-                placeholder: props?.texts?.fHourInput,
+                name: this.sanitize(props?.texts?.fHourTitle),
+                placeholder: props?.texts?.fHourTitle,
                 value: '',
                 type: 'text',
-                error: props?.texts?.errorFHourInput,
+                error: props?.texts?.fHourError,
                 validators: [Validators.required],
                 valid: signal(true),
             },