ctt-puro 0.64.15 → 0.65.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3165,6 +3165,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3165
3165
  type: Input
3166
3166
  }] } });
3167
3167
 
3168
+ class PuroDatepickerDirective {
3169
+ constructor(el, ngZone, platformId) {
3170
+ this.el = el;
3171
+ this.ngZone = ngZone;
3172
+ this.platformId = platformId;
3173
+ this.inited = false;
3174
+ }
3175
+ ngAfterViewInit() {
3176
+ if (!isPlatformBrowser(this.platformId))
3177
+ return;
3178
+ if (typeof $ === 'undefined')
3179
+ return;
3180
+ // MUY IMPORTANTE: fuera del zone => no rompe stability
3181
+ this.ngZone.runOutsideAngular(() => {
3182
+ queueMicrotask(() => this.init());
3183
+ });
3184
+ }
3185
+ init() {
3186
+ if (this.inited)
3187
+ return;
3188
+ const input = this.el.nativeElement;
3189
+ DatepickerLocaleUtil.setLocale(DatepickerLocaleUtil.detectLanguage());
3190
+ // limpia instancias previas
3191
+ if ($(input).hasClass('hasDatepicker')) {
3192
+ $(input).datepicker('destroy');
3193
+ }
3194
+ $(input).datepicker({
3195
+ showAnim: 'fadeIn',
3196
+ changeMonth: true,
3197
+ changeYear: true,
3198
+ showOtherMonths: true,
3199
+ selectOtherMonths: true,
3200
+ dateFormat: 'dd/mm/yy',
3201
+ onSelect: (dateText) => {
3202
+ // el DOM lo actualiza el plugin
3203
+ input.value = dateText;
3204
+ // vuelve a Angular SOLO para notificar al formControl
3205
+ this.ngZone.run(() => {
3206
+ input.dispatchEvent(new Event('input', { bubbles: true }));
3207
+ input.dispatchEvent(new Event('change', { bubbles: true }));
3208
+ });
3209
+ },
3210
+ onClose: () => {
3211
+ this.ngZone.run(() => {
3212
+ input.dispatchEvent(new Event('input', { bubbles: true }));
3213
+ input.dispatchEvent(new Event('change', { bubbles: true }));
3214
+ });
3215
+ },
3216
+ });
3217
+ this.inited = true;
3218
+ }
3219
+ ngOnDestroy() {
3220
+ if (!isPlatformBrowser(this.platformId))
3221
+ return;
3222
+ if (typeof $ === 'undefined')
3223
+ return;
3224
+ const input = this.el.nativeElement;
3225
+ try {
3226
+ if ($(input).hasClass('hasDatepicker')) {
3227
+ $(input).datepicker('destroy');
3228
+ }
3229
+ // por si el plugin dejó handlers
3230
+ $(input).off();
3231
+ }
3232
+ catch { }
3233
+ }
3234
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroDatepickerDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
3235
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PuroDatepickerDirective, isStandalone: true, selector: "[puroDatepicker]", ngImport: i0 }); }
3236
+ }
3237
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroDatepickerDirective, decorators: [{
3238
+ type: Directive,
3239
+ args: [{
3240
+ selector: '[puroDatepicker]',
3241
+ standalone: true,
3242
+ }]
3243
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
3244
+ type: Inject,
3245
+ args: [PLATFORM_ID]
3246
+ }] }] });
3247
+
3168
3248
  class PuroEventsFormComponent {
3169
3249
  constructor(fb, cdr, ngZone) {
3170
3250
  this.fb = fb;
@@ -3418,7 +3498,7 @@ class PuroEventsFormComponent {
3418
3498
  };
3419
3499
  }
3420
3500
  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 }); }
3421
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroEventsFormComponent, isStandalone: true, selector: "lib-puro-events-form", inputs: { identifier: "identifier", title: "title", description: "description", ciTitle: "ciTitle", dTitle: "dTitle", howTitle: "howTitle", typeEventInput: "typeEventInput", 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 generalMargin\" [id]=\"identifier ?? '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\" [innerHTML]=\"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 @if (typeEventInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"typeEventInput.placeholder\"\n [formControlName]=\"typeEventInput.name!\"\n (blur)=\"validateInput(typeEventInput)\"\n (input)=\"inputChange($event, typeEventInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"22\" height=\"22\"><use href=\"#events-type\"></use></svg>\n </span>\n </div>\n <!-- @if (!typeEventInput.valid()) {\n <span class=\"form-error\">{{ typeEventInput.error }}</span>\n } -->\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: [""], 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: AutoImageZoomWrapperDirective, selector: "img[ngSrc], img[src]" }, { kind: "directive", type: PuroScriptDirective, selector: "[scriptLoader]", inputs: ["dataLoaded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3501
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroEventsFormComponent, isStandalone: true, selector: "lib-puro-events-form", inputs: { identifier: "identifier", title: "title", description: "description", ciTitle: "ciTitle", dTitle: "dTitle", howTitle: "howTitle", typeEventInput: "typeEventInput", 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 generalMargin\" [id]=\"identifier ?? '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\" [innerHTML]=\"description\"></div>\n }\n\n @if (formReady$()) {\n\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\" >\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 @if (typeEventInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"typeEventInput.placeholder\"\n [formControlName]=\"typeEventInput.name!\"\n (blur)=\"validateInput(typeEventInput)\"\n (input)=\"inputChange($event, typeEventInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"22\" height=\"22\"><use href=\"#events-type\"></use></svg>\n </span>\n </div>\n <!-- @if (!typeEventInput.valid()) {\n <span class=\"form-error\">{{ typeEventInput.error }}</span>\n } -->\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\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"dateInput.placeholder\"\n [formControlName]=\"dateInput.name!\"\n puroDatepicker\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 (click)=\"submitForm()\"\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: [""], 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: AutoImageZoomWrapperDirective, selector: "img[ngSrc], img[src]" }, { kind: "directive", type: PuroDatepickerDirective, selector: "[puroDatepicker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
3422
3502
  }
3423
3503
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroEventsFormComponent, decorators: [{
3424
3504
  type: Component,
@@ -3430,8 +3510,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
3430
3510
  NgOptimizedImage,
3431
3511
  AutoImageZoomWrapperDirective,
3432
3512
  PuroLinkTypeDirective,
3433
- PuroScriptDirective,
3434
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"eventsForm generalMargin\" [id]=\"identifier ?? '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\" [innerHTML]=\"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 @if (typeEventInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"typeEventInput.placeholder\"\n [formControlName]=\"typeEventInput.name!\"\n (blur)=\"validateInput(typeEventInput)\"\n (input)=\"inputChange($event, typeEventInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"22\" height=\"22\"><use href=\"#events-type\"></use></svg>\n </span>\n </div>\n <!-- @if (!typeEventInput.valid()) {\n <span class=\"form-error\">{{ typeEventInput.error }}</span>\n } -->\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" }]
3513
+ PuroDatepickerDirective,
3514
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"eventsForm generalMargin\" [id]=\"identifier ?? '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\" [innerHTML]=\"description\"></div>\n }\n\n @if (formReady$()) {\n\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\" >\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 @if (typeEventInput) {\n <div class=\"form__group withIcon\">\n <input type=\"text\"\n class=\"form__control\"\n [placeholder]=\"typeEventInput.placeholder\"\n [formControlName]=\"typeEventInput.name!\"\n (blur)=\"validateInput(typeEventInput)\"\n (input)=\"inputChange($event, typeEventInput)\"\n />\n <span class=\"icon-right corp-color\">\n <svg width=\"22\" height=\"22\"><use href=\"#events-type\"></use></svg>\n </span>\n </div>\n <!-- @if (!typeEventInput.valid()) {\n <span class=\"form-error\">{{ typeEventInput.error }}</span>\n } -->\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\n type=\"text\"\n class=\"form__control\"\n [placeholder]=\"dateInput.placeholder\"\n [formControlName]=\"dateInput.name!\"\n puroDatepicker\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 (click)=\"submitForm()\"\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" }]
3435
3515
  }], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { identifier: [{
3436
3516
  type: Input
3437
3517
  }], title: [{
@@ -4131,7 +4211,7 @@ class MapperService {
4131
4211
  componentMapped.props = this.mapBannerSlider(component.props);
4132
4212
  break;
4133
4213
  case 'modaloptions':
4134
- componentMapped.props = this.mapModalOptions(component.props);
4214
+ componentMapped.props = this.mapModalOptions(component.props, component.identifier);
4135
4215
  break;
4136
4216
  case 'innercontent':
4137
4217
  componentMapped.props = this.mapInnerContent(component.props);
@@ -6299,15 +6379,16 @@ class MapperService {
6299
6379
  };
6300
6380
  }
6301
6381
  //TODO: Check back props
6302
- mapModalOptions(props) {
6382
+ mapModalOptions(props, identifier) {
6303
6383
  return {
6304
- items: props?.items?.map((item) => ({
6305
- title: item.title,
6306
- description: item.description,
6307
- img: this.getImageResponsive(item.multimedia?.image?.[0]),
6308
- link: Utils.mapButtons(this.siteId(), item.links)[0],
6384
+ items: props?.multimedia?.imagenes?.map((img) => ({
6385
+ title: img.title,
6386
+ description: img.description,
6387
+ img: this.getImageResponsive(img),
6388
+ link: Utils.mapButtons(this.siteId(), img.links)[0],
6309
6389
  })),
6310
6390
  button: Utils.mapButtons(this.siteId(), props?.buttons)[0],
6391
+ identifier: identifier,
6311
6392
  };
6312
6393
  }
6313
6394
  //TODO: Check back props
@@ -6481,7 +6562,7 @@ class MapperService {
6481
6562
  };
6482
6563
  }
6483
6564
  mapEventsForm(props, identifier) {
6484
- const prefixValues = Object.values(props?.prefixes || {});
6565
+ const prefixValues = Object.values(props?.prefixes || { code: 0, name: '+34' });
6485
6566
  return {
6486
6567
  title: typeof props?.texts?.title === 'string'
6487
6568
  ? props?.texts?.title
@@ -6517,7 +6598,7 @@ class MapperService {
6517
6598
  name: 'infoMessage',
6518
6599
  },
6519
6600
  neDropdown: {
6520
- placeholder: props?.texts?.neDropdown,
6601
+ placeholder: props?.texts?.nedropdown,
6521
6602
  options: props?.nature?.map((prop) => ({ code: prop?.id, name: prop?.name })),
6522
6603
  },
6523
6604
  othersDropdown: {
@@ -6616,8 +6697,8 @@ class MapperService {
6616
6697
  valid: signal(true),
6617
6698
  },
6618
6699
  typeEventInput: {
6619
- name: Utils.normalizeControlName(props?.texts?.neDropdown, 'eventType'),
6620
- placeholder: props?.texts?.neDropdown,
6700
+ name: Utils.normalizeControlName(props?.texts?.nedropdown, 'eventType'),
6701
+ placeholder: props?.texts?.nedropdown,
6621
6702
  value: '',
6622
6703
  type: 'text',
6623
6704
  error: props?.texts?.nameError,