ctt-puro 0.64.14 → 0.65.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/puro-events-form/puro-events-form.component.mjs +6 -5
- package/esm2022/lib/components/puro-info-slider/puro-info-slider.component.mjs +3 -3
- package/esm2022/lib/components/puro-photo-slider/puro-photo-slider.component.mjs +3 -3
- package/esm2022/lib/directives/puro-script/puro-datepicker.directive.mjs +84 -0
- package/esm2022/lib/services/mapper/mapper.service.mjs +2 -2
- package/fesm2022/ctt-puro.mjs +88 -8
- package/fesm2022/ctt-puro.mjs.map +1 -1
- package/lib/directives/puro-script/puro-datepicker.directive.d.ts +14 -0
- package/package.json +1 -1
package/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -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
|
-
|
|
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: [{
|
|
@@ -6481,7 +6561,7 @@ class MapperService {
|
|
|
6481
6561
|
};
|
|
6482
6562
|
}
|
|
6483
6563
|
mapEventsForm(props, identifier) {
|
|
6484
|
-
const prefixValues = Object.values(props?.prefixes || {});
|
|
6564
|
+
const prefixValues = Object.values(props?.prefixes || { code: 0, name: '+34' });
|
|
6485
6565
|
return {
|
|
6486
6566
|
title: typeof props?.texts?.title === 'string'
|
|
6487
6567
|
? props?.texts?.title
|
|
@@ -7971,7 +8051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7971
8051
|
|
|
7972
8052
|
class PuroInfoSliderComponent {
|
|
7973
8053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7974
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoSliderComponent, isStandalone: true, selector: "lib-puro-info-slider", inputs: { items: "items", reverse: "reverse" }, ngImport: i0, template: "<section\n class=\"textPhotoCarousel js-active-slider\"\n [puroSlider]=\"items\"\n [ngClass]=\"{\n 'textPhotoCarousel--right': !reverse,\n }\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_adaptiveheight=\"true\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n resizeZoom\n>\n <div class=\"relative\">\n <div class=\"js-slider js-slider_fix-arrows\">\n @for (item of items; track $index) {\n <div class=\"textPhotoCarousel__item\">\n <div class=\"textPhotoCarousel__image--outer\">\n <div\n class=\"textPhotoCarousel__image js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n [alt]=\"item.img.alt\"\n width=\"960\"\n height=\"807\"\n class=\"textPhotoCarousel__img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n <div\n class=\"textPhotoCarousel__content textPhotoCarousel__content--alignCenter\"\n >\n <div>\n @if (item.pretitle) {\n <span\n class=\"textPhotoCarousel__title
|
|
8054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroInfoSliderComponent, isStandalone: true, selector: "lib-puro-info-slider", inputs: { items: "items", reverse: "reverse" }, ngImport: i0, template: "<section\n class=\"textPhotoCarousel js-active-slider\"\n [puroSlider]=\"items\"\n [ngClass]=\"{\n 'textPhotoCarousel--right': !reverse,\n }\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_adaptiveheight=\"true\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n resizeZoom\n>\n <div class=\"relative\">\n <div class=\"js-slider js-slider_fix-arrows\">\n @for (item of items; track $index) {\n <div class=\"textPhotoCarousel__item\">\n <div class=\"textPhotoCarousel__image--outer\">\n <div\n class=\"textPhotoCarousel__image js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n [alt]=\"item.img.alt\"\n width=\"960\"\n height=\"807\"\n class=\"textPhotoCarousel__img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n <div\n class=\"textPhotoCarousel__content textPhotoCarousel__content--alignCenter\"\n >\n <div>\n @if (item.pretitle) {\n <span\n class=\"textPhotoCarousel__title \"\n [innerHTML]=\"item.pretitle\"\n ></span>\n }\n @if (item.title) {\n <h2\n class=\"textPhotoCarousel__heading \" \n [innerHTML]=\"item.title\"\n ></h2>\n }\n @if (item.subtitle) {\n <p\n class=\"textPhotoCarousel__subHeading \"\n [innerHTML]=\"item.subtitle\"\n ></p>\n }\n @if (item.description) {\n <div>\n <p\n class=\"textPhotoCarousel__paragraph\"\n [innerHTML]=\"item.description\"\n ></p>\n </div>\n }\n <div class=\"btn__group\">\n @if (item.buttons?.length) {\n @for (\n button of item.buttons;\n track $index\n ) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $even,\n btn__primary: $odd,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n }\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { 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: PuroResizeZoomDirective, selector: "[resizeZoom]" }] }); }
|
|
7975
8055
|
}
|
|
7976
8056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroInfoSliderComponent, decorators: [{
|
|
7977
8057
|
type: Component,
|
|
@@ -7983,7 +8063,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
7983
8063
|
AutoImageZoomWrapperDirective,
|
|
7984
8064
|
PuroResizeZoomDirective,
|
|
7985
8065
|
PuroResizeZoomDirective,
|
|
7986
|
-
], template: "<section\n class=\"textPhotoCarousel js-active-slider\"\n [puroSlider]=\"items\"\n [ngClass]=\"{\n 'textPhotoCarousel--right': !reverse,\n }\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_adaptiveheight=\"true\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n resizeZoom\n>\n <div class=\"relative\">\n <div class=\"js-slider js-slider_fix-arrows\">\n @for (item of items; track $index) {\n <div class=\"textPhotoCarousel__item\">\n <div class=\"textPhotoCarousel__image--outer\">\n <div\n class=\"textPhotoCarousel__image js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n [alt]=\"item.img.alt\"\n width=\"960\"\n height=\"807\"\n class=\"textPhotoCarousel__img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n <div\n class=\"textPhotoCarousel__content textPhotoCarousel__content--alignCenter\"\n >\n <div>\n @if (item.pretitle) {\n <span\n class=\"textPhotoCarousel__title
|
|
8066
|
+
], template: "<section\n class=\"textPhotoCarousel js-active-slider\"\n [puroSlider]=\"items\"\n [ngClass]=\"{\n 'textPhotoCarousel--right': !reverse,\n }\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_adaptiveheight=\"true\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n resizeZoom\n>\n <div class=\"relative\">\n <div class=\"js-slider js-slider_fix-arrows\">\n @for (item of items; track $index) {\n <div class=\"textPhotoCarousel__item\">\n <div class=\"textPhotoCarousel__image--outer\">\n <div\n class=\"textPhotoCarousel__image js-slider_fix-arrows-zone\"\n >\n @if (item.img) {\n <img\n [ngSrc]=\"item.img.src\"\n [alt]=\"item.img.alt\"\n width=\"960\"\n height=\"807\"\n class=\"textPhotoCarousel__img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n <div\n class=\"textPhotoCarousel__content textPhotoCarousel__content--alignCenter\"\n >\n <div>\n @if (item.pretitle) {\n <span\n class=\"textPhotoCarousel__title \"\n [innerHTML]=\"item.pretitle\"\n ></span>\n }\n @if (item.title) {\n <h2\n class=\"textPhotoCarousel__heading \" \n [innerHTML]=\"item.title\"\n ></h2>\n }\n @if (item.subtitle) {\n <p\n class=\"textPhotoCarousel__subHeading \"\n [innerHTML]=\"item.subtitle\"\n ></p>\n }\n @if (item.description) {\n <div>\n <p\n class=\"textPhotoCarousel__paragraph\"\n [innerHTML]=\"item.description\"\n ></p>\n </div>\n }\n <div class=\"btn__group\">\n @if (item.buttons?.length) {\n @for (\n button of item.buttons;\n track $index\n ) {\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn\"\n [ngClass]=\"{\n 'btn__primary--outline': $even,\n btn__primary: $odd,\n }\"\n [attr.aria-label]=\"button.label\"\n >\n <span>{{ button.label }}</span>\n </a>\n }\n }\n </div>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"js-slider-arrows\"></div>\n </div>\n</section>\n" }]
|
|
7987
8067
|
}], propDecorators: { items: [{
|
|
7988
8068
|
type: Input
|
|
7989
8069
|
}], reverse: [{
|
|
@@ -8534,7 +8614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8534
8614
|
|
|
8535
8615
|
class PuroPhotoSliderComponent {
|
|
8536
8616
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroPhotoSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8537
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroPhotoSliderComponent, isStandalone: true, selector: "lib-puro-photo-slider", inputs: { title: "title", subtitle: "subtitle", pretitle: "pretitle", description: "description", button: "button", img: "img", reverse: "reverse" }, ngImport: i0, template: "<section\n class=\"textPhotoCarousel js-active-slider\"\n [puroSlider]=\"img\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"relative\">\n <div class=\"js-slider js-slider_fix-arrows\">\n @for (image of img; track $index) {\n <div class=\"textPhotoCarousel__item\">\n <!-- IMAGEN A LA IZQUIERDA -->\n <div class=\"textPhotoCarousel__image--outer\">\n <div\n class=\"textPhotoCarousel__image js-slider_fix-arrows-zone\"\n >\n <img\n [ngSrc]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"textPhotoCarousel__img\"\n width=\"960\"\n height=\"807\"\n />\n </div>\n </div>\n\n <!-- TEXTO A LA DERECHA -->\n <div\n class=\"textPhotoCarousel__content textPhotoCarousel__content--alignCenter\"\n >\n <div>\n @if (pretitle) {\n <span\n class=\"textPhotoCarousel__title
|
|
8617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroPhotoSliderComponent, isStandalone: true, selector: "lib-puro-photo-slider", inputs: { title: "title", subtitle: "subtitle", pretitle: "pretitle", description: "description", button: "button", img: "img", reverse: "reverse" }, ngImport: i0, template: "<section\n class=\"textPhotoCarousel js-active-slider\"\n [puroSlider]=\"img\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"relative\">\n <div class=\"js-slider js-slider_fix-arrows\">\n @for (image of img; track $index) {\n <div class=\"textPhotoCarousel__item\">\n <!-- IMAGEN A LA IZQUIERDA -->\n <div class=\"textPhotoCarousel__image--outer\">\n <div\n class=\"textPhotoCarousel__image js-slider_fix-arrows-zone\"\n >\n <img\n [ngSrc]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"textPhotoCarousel__img\"\n width=\"960\"\n height=\"807\"\n />\n </div>\n </div>\n\n <!-- TEXTO A LA DERECHA -->\n <div\n class=\"textPhotoCarousel__content textPhotoCarousel__content--alignCenter\"\n >\n <div>\n @if (pretitle) {\n <span\n class=\"textPhotoCarousel__title\"\n [innerHTML]=\"pretitle\"\n ></span>\n }\n\n @if (title) {\n <h2\n class=\"textPhotoCarousel__heading\"\n [innerHTML]=\"title\"\n ></h2>\n }\n\n @if (subtitle) {\n <p\n class=\"textPhotoCarousel__subHeading\"\n [innerHTML]=\"subtitle\"\n ></p>\n }\n\n @if (description) {\n <p\n class=\"textPhotoCarousel__paragraph\"\n [innerHTML]=\"description\"\n ></p>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n >{{ button.label }}</a\n >\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"js-slider-arrows photoslider\"></div>\n </div>\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: PuroLinkTypeDirective, selector: "[linkType]", inputs: ["linkType", "href", "modalClick"], outputs: ["bookClick", "anchorClicked"] }, { kind: "directive", type: PuroSliderDirective, selector: "[puroSlider]", inputs: ["puroSlider"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8538
8618
|
}
|
|
8539
8619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroPhotoSliderComponent, decorators: [{
|
|
8540
8620
|
type: Component,
|
|
@@ -8544,7 +8624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8544
8624
|
PuroSliderDirective,
|
|
8545
8625
|
NgOptimizedImage,
|
|
8546
8626
|
AutoImageZoomWrapperDirective,
|
|
8547
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"textPhotoCarousel js-active-slider\"\n [puroSlider]=\"img\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"relative\">\n <div class=\"js-slider js-slider_fix-arrows\">\n @for (image of img; track $index) {\n <div class=\"textPhotoCarousel__item\">\n <!-- IMAGEN A LA IZQUIERDA -->\n <div class=\"textPhotoCarousel__image--outer\">\n <div\n class=\"textPhotoCarousel__image js-slider_fix-arrows-zone\"\n >\n <img\n [ngSrc]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"textPhotoCarousel__img\"\n width=\"960\"\n height=\"807\"\n />\n </div>\n </div>\n\n <!-- TEXTO A LA DERECHA -->\n <div\n class=\"textPhotoCarousel__content textPhotoCarousel__content--alignCenter\"\n >\n <div>\n @if (pretitle) {\n <span\n class=\"textPhotoCarousel__title
|
|
8627
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"textPhotoCarousel js-active-slider\"\n [puroSlider]=\"img\"\n data-slides_infinite=\"true\"\n data-slider_name=\"js-slider\"\n data-slider_showbtns=\"true\"\n data-slider_showdots=\"false\"\n data-slider_fade=\"true\"\n data-slider_autoplay=\"true\"\n data-slides_pc=\"1\"\n>\n <div class=\"relative\">\n <div class=\"js-slider js-slider_fix-arrows\">\n @for (image of img; track $index) {\n <div class=\"textPhotoCarousel__item\">\n <!-- IMAGEN A LA IZQUIERDA -->\n <div class=\"textPhotoCarousel__image--outer\">\n <div\n class=\"textPhotoCarousel__image js-slider_fix-arrows-zone\"\n >\n <img\n [ngSrc]=\"image.src\"\n [alt]=\"image.alt\"\n class=\"textPhotoCarousel__img\"\n width=\"960\"\n height=\"807\"\n />\n </div>\n </div>\n\n <!-- TEXTO A LA DERECHA -->\n <div\n class=\"textPhotoCarousel__content textPhotoCarousel__content--alignCenter\"\n >\n <div>\n @if (pretitle) {\n <span\n class=\"textPhotoCarousel__title\"\n [innerHTML]=\"pretitle\"\n ></span>\n }\n\n @if (title) {\n <h2\n class=\"textPhotoCarousel__heading\"\n [innerHTML]=\"title\"\n ></h2>\n }\n\n @if (subtitle) {\n <p\n class=\"textPhotoCarousel__subHeading\"\n [innerHTML]=\"subtitle\"\n ></p>\n }\n\n @if (description) {\n <p\n class=\"textPhotoCarousel__paragraph\"\n [innerHTML]=\"description\"\n ></p>\n }\n @if (button) {\n <div class=\"btn__group\">\n <a\n [href]=\"button.url\"\n [linkType]=\"button.linkType\"\n class=\"btn btn__primary--outline\"\n [attr.aria-label]=\"button.label\"\n >{{ button.label }}</a\n >\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n <div class=\"js-slider-arrows photoslider\"></div>\n </div>\n</section>\n" }]
|
|
8548
8628
|
}], propDecorators: { title: [{
|
|
8549
8629
|
type: Input
|
|
8550
8630
|
}], subtitle: [{
|