ctt-puro 0.64.15 → 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/directives/puro-script/puro-datepicker.directive.mjs +84 -0
- package/esm2022/lib/services/mapper/mapper.service.mjs +2 -2
- package/fesm2022/ctt-puro.mjs +84 -4
- 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
|