ctt-puro 0.46.11 → 0.46.12
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/fesm2022/ctt-puro.mjs
CHANGED
|
@@ -5600,76 +5600,76 @@ class MapperService {
|
|
|
5600
5600
|
})),
|
|
5601
5601
|
};
|
|
5602
5602
|
}
|
|
5603
|
-
//TODO: Check back props
|
|
5604
5603
|
mapProjectsForm(props, ndPropsConsult) {
|
|
5604
|
+
const prefixValues = Object.values(props?.prefixes || {});
|
|
5605
5605
|
return {
|
|
5606
5606
|
title: props?.texts?.title,
|
|
5607
|
-
ydTitle: props?.texts?.
|
|
5608
|
-
aiTitle: props?.texts?.
|
|
5609
|
-
icTitle: props?.texts?.
|
|
5610
|
-
dTitle: props?.texts?.
|
|
5607
|
+
ydTitle: props?.texts?.ydtitle,
|
|
5608
|
+
aiTitle: props?.texts?.aititle,
|
|
5609
|
+
icTitle: props?.texts?.ictitle,
|
|
5610
|
+
dTitle: props?.texts?.dtitle,
|
|
5611
5611
|
description: props?.texts?.description,
|
|
5612
|
-
conditionsLink: props?.texts?.
|
|
5612
|
+
conditionsLink: props?.texts?.conditionslink,
|
|
5613
5613
|
others: props?.texts?.others,
|
|
5614
5614
|
requiredLabel: props?.texts?.requiredLabel,
|
|
5615
|
-
img: this.getImageResponsive(props?.multimedia?.
|
|
5615
|
+
img: this.getImageResponsive(props?.multimedia?.imagenes?.[0]),
|
|
5616
5616
|
applyButton: Utils.mapButtons(this.siteId(), props?.buttons)[0],
|
|
5617
5617
|
seeAllButton: Utils.mapButtons(this.siteId(), props?.buttons)[1],
|
|
5618
5618
|
whyTextarea: {
|
|
5619
|
-
title: props?.texts?.inputWhyMessage,
|
|
5620
|
-
placeholder: props?.texts?.inputWhyMessage,
|
|
5619
|
+
title: props?.texts?.inputWhyMessage ?? 'Why do you believe this is an ideal location for a Puro establishment?',
|
|
5620
|
+
placeholder: props?.texts?.inputWhyMessage ?? 'Why do you believe this is an ideal location for a Puro establishment?',
|
|
5621
5621
|
value: '',
|
|
5622
5622
|
valid: signal(true),
|
|
5623
5623
|
name: 'whyMessage',
|
|
5624
5624
|
},
|
|
5625
5625
|
waTextarea: {
|
|
5626
|
-
title: props?.texts?.inputWaMessage,
|
|
5627
|
-
placeholder: props?.texts?.inputWaMessage,
|
|
5626
|
+
title: props?.texts?.inputWaMessage ?? 'What attracts you to the Puro Group brand, and how do you envision integrating it into your business concept?',
|
|
5627
|
+
placeholder: props?.texts?.inputWaMessage ?? 'What attracts you to the Puro Group brand, and how do you envision integrating it into your business concept?',
|
|
5628
5628
|
value: '',
|
|
5629
5629
|
valid: signal(true),
|
|
5630
5630
|
name: 'waMessage',
|
|
5631
5631
|
},
|
|
5632
5632
|
ppTextarea: {
|
|
5633
|
-
title: props?.texts?.inputPPMessage,
|
|
5634
|
-
placeholder: props?.texts?.inputPPMessage,
|
|
5633
|
+
title: props?.texts?.inputPPMessage ?? 'Please provide details about your company, shareholders (if applicable), and experience in the sector.',
|
|
5634
|
+
placeholder: props?.texts?.inputPPMessage ?? 'Please provide details about your company, shareholders (if applicable), and experience in the sector.',
|
|
5635
5635
|
value: '',
|
|
5636
5636
|
valid: signal(true),
|
|
5637
5637
|
name: 'ppMessage',
|
|
5638
5638
|
},
|
|
5639
5639
|
npDropdown: {
|
|
5640
|
-
placeholder: props?.texts?.npDropdown,
|
|
5641
|
-
options: props?.
|
|
5640
|
+
placeholder: props?.texts?.npDropdown ?? 'Nature of the Project',
|
|
5641
|
+
options: props?.consultTypes?.map((prop) => ({ code: prop?.id, name: prop?.name })),
|
|
5642
5642
|
},
|
|
5643
5643
|
bpDropdown: {
|
|
5644
|
-
|
|
5645
|
-
options:
|
|
5644
|
+
placeholder: props?.texts?.bpDropdown ?? 'Do you have a business plan?',
|
|
5645
|
+
options: props?.consultTypes?.map((prop) => ({ code: prop?.id, name: prop?.name })),
|
|
5646
5646
|
},
|
|
5647
5647
|
tbDropdown: {
|
|
5648
|
-
|
|
5649
|
-
options:
|
|
5648
|
+
placeholder: props?.texts?.tbDropdown ?? 'Type of Business',
|
|
5649
|
+
options: props?.consultTypes?.map((prop) => ({ code: prop?.id, name: prop?.name })),
|
|
5650
5650
|
},
|
|
5651
5651
|
poDropdown: {
|
|
5652
|
-
|
|
5653
|
-
options:
|
|
5652
|
+
placeholder: props?.texts?.poDropdown ?? 'Planned Opening Date',
|
|
5653
|
+
options: props?.consultTypes?.map((prop) => ({ code: prop?.id, name: prop?.name })),
|
|
5654
5654
|
},
|
|
5655
5655
|
emDropdown: {
|
|
5656
|
-
|
|
5657
|
-
options:
|
|
5656
|
+
placeholder: props?.texts?.emDropdown ?? 'Estimated Months of Operation per Year',
|
|
5657
|
+
options: props?.consultTypes?.map((prop) => ({ code: prop?.id, name: prop?.name })),
|
|
5658
5658
|
},
|
|
5659
5659
|
hbpDropdown: {
|
|
5660
|
-
|
|
5661
|
-
options:
|
|
5660
|
+
placeholder: props?.texts?.hbpDropdown ?? 'Do you have a business plan?',
|
|
5661
|
+
options: props?.consultTypes?.map((prop) => ({ code: prop?.id, name: prop?.name })),
|
|
5662
5662
|
},
|
|
5663
5663
|
prefix: {
|
|
5664
|
-
options:
|
|
5665
|
-
code:
|
|
5664
|
+
options: prefixValues.map((prefix, index) => ({
|
|
5665
|
+
code: index,
|
|
5666
5666
|
name: prefix,
|
|
5667
5667
|
})),
|
|
5668
5668
|
placeholder: props?.texts?.prefixes,
|
|
5669
5669
|
},
|
|
5670
5670
|
addressInput: {
|
|
5671
|
-
name: Utils.normalizeText(props?.texts?.addressInput),
|
|
5672
|
-
placeholder: props?.texts?.addressInput,
|
|
5671
|
+
name: Utils.normalizeText(props?.texts?.addressInput) ?? 'address',
|
|
5672
|
+
placeholder: props?.texts?.addressInput ?? 'Establishment Address',
|
|
5673
5673
|
value: '',
|
|
5674
5674
|
type: 'text',
|
|
5675
5675
|
error: props?.texts?.errorAddress,
|
|
@@ -5677,9 +5677,9 @@ class MapperService {
|
|
|
5677
5677
|
valid: signal(true),
|
|
5678
5678
|
},
|
|
5679
5679
|
sizeInput: {
|
|
5680
|
-
title: props?.texts?.sizeInput,
|
|
5681
|
-
name: Utils.normalizeText(props?.texts?.sizeInput),
|
|
5682
|
-
placeholder: props?.texts?.sizeInput,
|
|
5680
|
+
title: props?.texts?.sizeInput ?? 'size',
|
|
5681
|
+
name: Utils.normalizeText(props?.texts?.sizeInput) ?? 'size',
|
|
5682
|
+
placeholder: props?.texts?.sizeInput ?? 'Venue Size (m²)',
|
|
5683
5683
|
value: '',
|
|
5684
5684
|
type: 'text',
|
|
5685
5685
|
error: props?.texts?.errorSize,
|
|
@@ -5687,8 +5687,8 @@ class MapperService {
|
|
|
5687
5687
|
valid: signal(true),
|
|
5688
5688
|
},
|
|
5689
5689
|
nameInput: {
|
|
5690
|
-
name: Utils.normalizeText(props?.texts?.inputName),
|
|
5691
|
-
placeholder: props?.texts?.inputName,
|
|
5690
|
+
name: Utils.normalizeText(props?.texts?.inputName) ?? 'name',
|
|
5691
|
+
placeholder: props?.texts?.inputName ?? 'First Name',
|
|
5692
5692
|
value: '',
|
|
5693
5693
|
type: 'text',
|
|
5694
5694
|
error: props?.texts?.errorName,
|
|
@@ -5696,9 +5696,9 @@ class MapperService {
|
|
|
5696
5696
|
valid: signal(true),
|
|
5697
5697
|
},
|
|
5698
5698
|
surnameInput: {
|
|
5699
|
-
title: props?.texts?.surnames,
|
|
5700
|
-
name: Utils.normalizeText(props?.texts?.surnames),
|
|
5701
|
-
placeholder: props?.texts?.surnames,
|
|
5699
|
+
title: props?.texts?.surnames ?? 'surname',
|
|
5700
|
+
name: Utils.normalizeText(props?.texts?.surnames) ?? 'surname',
|
|
5701
|
+
placeholder: props?.texts?.surnames ?? 'Last Name',
|
|
5702
5702
|
value: '',
|
|
5703
5703
|
type: 'text',
|
|
5704
5704
|
error: props?.texts?.errorName,
|
|
@@ -5706,9 +5706,9 @@ class MapperService {
|
|
|
5706
5706
|
valid: signal(true),
|
|
5707
5707
|
},
|
|
5708
5708
|
emailInput: {
|
|
5709
|
-
title: props?.texts?.inputEmail,
|
|
5710
|
-
name: Utils.normalizeText(props?.texts?.inputEmail),
|
|
5711
|
-
placeholder: props?.texts?.inputEmail,
|
|
5709
|
+
title: props?.texts?.inputEmail ?? 'email',
|
|
5710
|
+
name: Utils.normalizeText(props?.texts?.inputEmail) ?? 'email',
|
|
5711
|
+
placeholder: props?.texts?.inputEmail ?? 'Email Address',
|
|
5712
5712
|
value: '',
|
|
5713
5713
|
type: 'email',
|
|
5714
5714
|
error: props?.texts?.errorEmail,
|
|
@@ -5716,9 +5716,9 @@ class MapperService {
|
|
|
5716
5716
|
valid: signal(true),
|
|
5717
5717
|
},
|
|
5718
5718
|
confirmEmailInput: {
|
|
5719
|
-
title: props?.texts?.inputEmail,
|
|
5720
|
-
name: Utils.normalizeText(props?.texts?.inputEmail),
|
|
5721
|
-
placeholder: props?.texts?.inputEmail,
|
|
5719
|
+
title: props?.texts?.inputEmail ?? 'emailc',
|
|
5720
|
+
name: Utils.normalizeText(props?.texts?.inputEmail) ?? 'emailc',
|
|
5721
|
+
placeholder: props?.texts?.inputEmail ?? 'Confirm your email',
|
|
5722
5722
|
value: '',
|
|
5723
5723
|
type: 'email',
|
|
5724
5724
|
error: props?.texts?.errorEmail,
|
|
@@ -5726,9 +5726,9 @@ class MapperService {
|
|
|
5726
5726
|
valid: signal(true),
|
|
5727
5727
|
},
|
|
5728
5728
|
phoneInput: {
|
|
5729
|
-
title: props?.texts?.inputPhone,
|
|
5730
|
-
name: Utils.normalizeText(props?.texts?.inputPhone),
|
|
5731
|
-
placeholder: props?.texts?.inputPhone,
|
|
5729
|
+
title: props?.texts?.inputPhone ?? 'phone',
|
|
5730
|
+
name: Utils.normalizeText(props?.texts?.inputPhone) ?? 'phone',
|
|
5731
|
+
placeholder: props?.texts?.inputPhone ?? 'Teléfono',
|
|
5732
5732
|
value: '',
|
|
5733
5733
|
type: 'tel',
|
|
5734
5734
|
error: props?.texts?.errorPhone,
|
|
@@ -5736,12 +5736,12 @@ class MapperService {
|
|
|
5736
5736
|
valid: signal(true),
|
|
5737
5737
|
},
|
|
5738
5738
|
materialsInput: {
|
|
5739
|
-
name: Utils.normalizeText(props?.texts?.inputMaterials),
|
|
5739
|
+
name: Utils.normalizeText(props?.texts?.inputMaterials) ?? 'materials',
|
|
5740
5740
|
type: props?.texts?.inputMaterials,
|
|
5741
|
-
label: props?.texts?.inputMaterials,
|
|
5741
|
+
label: props?.texts?.inputMaterials ?? 'Supporting materials',
|
|
5742
5742
|
value: null,
|
|
5743
5743
|
valid: signal(true),
|
|
5744
|
-
validators: [Validators.required],
|
|
5744
|
+
// validators: [Validators.required],
|
|
5745
5745
|
},
|
|
5746
5746
|
};
|
|
5747
5747
|
}
|
|
@@ -8143,7 +8143,7 @@ class PuroProjectsFormComponent {
|
|
|
8143
8143
|
}
|
|
8144
8144
|
}
|
|
8145
8145
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroProjectsFormComponent, deps: [{ token: i1$3.FormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8146
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroProjectsFormComponent, isStandalone: true, selector: "lib-puro-projects-form", inputs: { title: "title", description: "description", ydTitle: "ydTitle", npDropdown: "npDropdown", tbDropdown: "tbDropdown", poDropdown: "poDropdown", emDropdown: "emDropdown", bpDropdown: "bpDropdown", addressInput: "addressInput", sizeInput: "sizeInput", whyTextarea: "whyTextarea", aiTitle: "aiTitle", nameInput: "nameInput", surnameInput: "surnameInput", prefix: "prefix", phoneInput: "phoneInput", emailInput: "emailInput", confirmEmailInput: "confirmEmailInput", icTitle: "icTitle", ppTextarea: "ppTextarea", waTextarea: "waTextarea", dTitle: "dTitle", hbpDropdown: "hbpDropdown", materialsInput: "materialsInput", others: "others", requiredLabel: "requiredLabel", img: "img", conditionsLink: "conditionsLink", applyButton: "applyButton", seeAllButton: "seeAllButton" }, outputs: { submitFormValue: "submitFormValue" }, ngImport: i0, template: "<section class=\"projectsForm\">\n <div class=\"projectsForm__inner\">\n @if (title) {\n <span class=\"projectsForm__title\">{{ title }}</span>\n }\n <div class=\"projectsForm__graphic\">\n <div class=\"projectsForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"projectsForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n <div class=\"projectsForm__content\">\n @if (title) {\n <span class=\"projectsForm__title\">{{ title }}</span>\n }\n @if (description) {\n <div class=\"projectsForm__paragraph\">\n {{ description }}\n </div>\n }\n @if (formReady$()) {\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (ydTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ ydTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (npDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"npDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ npDropdown.placeholder }}\n </option>\n @for (\n option of npDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (tbDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"tbDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ tbDropdown.placeholder }}\n </option>\n @for (\n option of tbDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (poDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"poDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ poDropdown.placeholder }}\n </option>\n @for (\n option of poDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (emDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"emDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ emDropdown.placeholder }}\n </option>\n @for (\n option of emDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (bpDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"bpDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ bpDropdown.placeholder }}\n </option>\n @for (\n option of bpDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (addressInput && addressInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Address\"\n id=\"Address\"\n [placeholder]=\"\n addressInput.placeholder\n \"\n [formControlName]=\"\n addressInput.name!\n \"\n (blur)=\"validateInput(addressInput)\"\n (input)=\"\n inputChange(\n $event,\n addressInput\n )\n \"\n />\n <span class=\"icon-right\">\n <div>\n <i class=\"icon-62\"></i>\n </div>\n </span>\n </div>\n @if (!addressInput.valid()) {\n <span class=\"form-error\">{{\n addressInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (sizeInput && sizeInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Size\"\n id=\"Size\"\n [placeholder]=\"\n sizeInput.placeholder\n \"\n [formControlName]=\"sizeInput.name!\"\n (blur)=\"validateInput(sizeInput)\"\n (input)=\"\n inputChange($event, sizeInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"19\"\n >\n <use href=\"#size\"></use>\n </svg>\n </span>\n </div>\n @if (!sizeInput.valid()) {\n <span class=\"form-error\">{{\n sizeInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (whyTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n whyTextarea.placeholder\n \"\n [formControlName]=\"\n whyTextarea.name!\n \"\n ></textarea>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (aiTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ aiTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Name\"\n id=\"Name\"\n [placeholder]=\"\n nameInput.placeholder\n \"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"\n inputChange($event, nameInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{\n nameInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (surnameInput && surnameInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Apellidos\"\n id=\"apellidos\"\n [placeholder]=\"\n surnameInput.placeholder\n \"\n [formControlName]=\"\n surnameInput.name!\n \"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"\n inputChange(\n $event,\n surnameInput\n )\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{\n surnameInput.error\n }}</span>\n }\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n name=\"Prefijo\"\n formControlName=\"prefix\"\n >\n @if (prefix.placeholder) {\n <option\n value=\"\"\n disabled\n selected\n >\n {{ prefix.placeholder }}\n </option>\n }\n @for (\n item of prefix.options || [];\n track $index\n ) {\n <option [value]=\"item.code\">\n {{ item.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"phone\"\n id=\"phone\"\n [placeholder]=\"\n phoneInput.placeholder\n \"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"\n inputChange($event, phoneInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#phone\"></use>\n </svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{\n phoneInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n name=\"email\"\n [placeholder]=\"\n emailInput.placeholder\n \"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"\n inputChange($event, emailInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{\n emailInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (confirmEmailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n name=\"confirmEmail\"\n [placeholder]=\"\n confirmEmailInput.placeholder\n \"\n (blur)=\"\n validateInput(confirmEmailInput)\n \"\n (input)=\"\n inputChange(\n $event,\n confirmEmailInput\n )\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n @if (\n confirmEmailInput &&\n !confirmEmailInput.valid()\n ) {\n <span class=\"form-error\">{{\n confirmEmailInput.error\n }}</span>\n }\n }\n </div>\n </div>\n @if (\n confirmEmailInput &&\n form.hasError('emailsDontMatch') &&\n form.get(confirmEmailInput.name!)?.touched\n ) {\n <span class=\"form-error\"\n >Los emails no coinciden.</span\n >\n }\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (icTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ icTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (ppTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n ppTextarea.placeholder\n \"\n [formControlName]=\"ppTextarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (waTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n waTextarea.placeholder\n \"\n [formControlName]=\"waTextarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (dTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ dTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (hbpDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"hbpDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ hbpDropdown.placeholder }}\n </option>\n @for (\n option of hbpDropdown.options;\n track $index\n ) {\n @if (option) {\n <option\n [value]=\"option.code\"\n >\n {{ option.name }}\n </option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (materialsInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"file\"\n class=\"form__control\"\n name=\"Materials\"\n id=\"Materials\"\n [placeholder]=\"materialsInput.label\"\n (input)=\"\n inputChange(\n $event,\n materialsInput\n )\n \"\n />\n <span class=\"icon-right\">\n <div>\n <i class=\"icon-98\"></i>\n </div>\n </span>\n </div>\n @if (!materialsInput.valid()) {\n <span class=\"form-error\">{{\n materialsInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (\n materialsNames && materialsNames.length > 0\n ) {\n @for (\n name of materialsNames;\n track $index\n ) {\n <span class=\"file-name\">{{\n name\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n <div class=\"block-checkbox\">\n @if (requiredLabel) {\n <span class=\"required-label\">{{\n requiredLabel\n }}</span>\n }\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n checked\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span [innerHTML]=\"conditionsLink\">\n </span>\n </label>\n }\n @if (others) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"others\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span>{{ others }}</span>\n </label>\n }\n </div>\n </div>\n </div>\n\n <div class=\"btn__group\">\n @if (applyButton) {\n <button\n class=\"btn btn__primary--outline js-active-modal\"\n data-modal_name=\"thankyou\"\n [attr.aria-label]=\"applyButton.label\"\n [disabled]=\"!form.valid\"\n (click)=\"submitForm()\"\n >\n <span>{{ applyButton.label }}</span>\n </button>\n }\n @if (seeAllButton) {\n <button\n class=\"btn btn__primary--outline js-active-modal\"\n data-modal_name=\"thankyou\"\n [attr.aria-label]=\"seeAllButton.label\"\n >\n <span>{{ seeAllButton.label }}</span>\n </button>\n }\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</section>\n", styles: [".projectsForm{padding-block:3.5rem;padding-inline:4.5rem;padding-inline:auto}@media (min-width: 768px){.projectsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.projectsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.projectsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.projectsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.projectsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.projectsForm__title{margin-bottom:3rem;display:none;text-align:start}}.projectsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.projectsForm__inner{column-gap:4rem;flex-direction:row}}@media (min-width: 1280px){.projectsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.projectsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.projectsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.projectsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.projectsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.projectsForm__graphic{margin-inline:auto}}.projectsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.projectsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.projectsForm__graphicInner{aspect-ratio:905/1067}}.projectsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.projectsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.projectsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.projectsForm__content{order:1;flex:1 1 0%}}.projectsForm__content .btn__group{margin-top:4rem;justify-content:center}.projectsForm__content .projectsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.projectsForm__content .projectsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.projectsForm__content .projectsForm__title{display:block;text-align:start}}.projectsForm__content .projectsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.projectsForm__content .projectsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.projectsForm__content .projectsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.projectsForm__content .projectsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__row{margin:0 -2.1rem}}.projectsForm__content .projectsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.projectsForm__content .projectsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.projectsForm__content .projectsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__col{padding-inline:2.1rem}}.projectsForm__content .projectsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.projectsForm__placeholder span{color:#1e1e1e;opacity:.6}.projectsForm .form-error{color:var(--grey);z-index:1}.projectsForm .icon-right i{font-size:2rem}.projectsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.projectsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.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: "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 }); }
|
|
8146
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: PuroProjectsFormComponent, isStandalone: true, selector: "lib-puro-projects-form", inputs: { title: "title", description: "description", ydTitle: "ydTitle", npDropdown: "npDropdown", tbDropdown: "tbDropdown", poDropdown: "poDropdown", emDropdown: "emDropdown", bpDropdown: "bpDropdown", addressInput: "addressInput", sizeInput: "sizeInput", whyTextarea: "whyTextarea", aiTitle: "aiTitle", nameInput: "nameInput", surnameInput: "surnameInput", prefix: "prefix", phoneInput: "phoneInput", emailInput: "emailInput", confirmEmailInput: "confirmEmailInput", icTitle: "icTitle", ppTextarea: "ppTextarea", waTextarea: "waTextarea", dTitle: "dTitle", hbpDropdown: "hbpDropdown", materialsInput: "materialsInput", others: "others", requiredLabel: "requiredLabel", img: "img", conditionsLink: "conditionsLink", applyButton: "applyButton", seeAllButton: "seeAllButton" }, outputs: { submitFormValue: "submitFormValue" }, ngImport: i0, template: "<section class=\"projectsForm\">\n <div class=\"projectsForm__inner\">\n @if (title) {\n <span class=\"projectsForm__title\">{{ title }}</span>\n }\n <div class=\"projectsForm__graphic\">\n <div class=\"projectsForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"projectsForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n <div class=\"projectsForm__content\">\n @if (title) {\n <span class=\"projectsForm__title\">{{ title }}</span>\n }\n @if (description) {\n <div class=\"projectsForm__paragraph\">\n {{ description }}\n </div>\n }\n @if (formReady$()) {\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (ydTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ ydTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (npDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"npDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ npDropdown.placeholder }}\n </option>\n @for (\n option of npDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (tbDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"tbDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ tbDropdown.placeholder }}\n </option>\n @for (\n option of tbDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (poDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"poDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ poDropdown.placeholder }}\n </option>\n @for (\n option of poDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (emDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"emDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ emDropdown.placeholder }}\n </option>\n @for (\n option of emDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (bpDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"bpDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ bpDropdown.placeholder }}\n </option>\n @for (\n option of bpDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (addressInput && addressInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Address\"\n id=\"Address\"\n [placeholder]=\"\n addressInput.placeholder\n \"\n [formControlName]=\"\n addressInput.name!\n \"\n (blur)=\"validateInput(addressInput)\"\n (input)=\"\n inputChange(\n $event,\n addressInput\n )\n \"\n />\n <span class=\"icon-right\">\n <div>\n <i class=\"icon-62\"></i>\n </div>\n </span>\n </div>\n @if (!addressInput.valid()) {\n <span class=\"form-error\">{{\n addressInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (sizeInput && sizeInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Size\"\n id=\"Size\"\n [placeholder]=\"\n sizeInput.placeholder\n \"\n [formControlName]=\"sizeInput.name!\"\n (blur)=\"validateInput(sizeInput)\"\n (input)=\"\n inputChange($event, sizeInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"19\"\n >\n <use href=\"#size\"></use>\n </svg>\n </span>\n </div>\n @if (!sizeInput.valid()) {\n <span class=\"form-error\">{{\n sizeInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (whyTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n whyTextarea.placeholder\n \"\n [formControlName]=\"\n whyTextarea.name!\n \"\n ></textarea>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (aiTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ aiTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Name\"\n id=\"Name\"\n [placeholder]=\"\n nameInput.placeholder\n \"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"\n inputChange($event, nameInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{\n nameInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Apellidos\"\n id=\"apellidos\"\n [placeholder]=\"\n surnameInput.placeholder\n \"\n [formControlName]=\"\n surnameInput.name!\n \"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"\n inputChange(\n $event,\n surnameInput\n )\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{\n surnameInput.error\n }}</span>\n }\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n name=\"Prefijo\"\n formControlName=\"prefix\"\n >\n @if (prefix.placeholder) {\n <option\n value=\"\"\n disabled\n selected\n >\n {{ prefix.placeholder }}\n </option>\n }\n @for (\n item of prefix.options || [];\n track $index\n ) {\n <option [value]=\"item.code\">\n {{ item.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"phone\"\n id=\"phone\"\n [placeholder]=\"\n phoneInput.placeholder\n \"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"\n inputChange($event, phoneInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#phone\"></use>\n </svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{\n phoneInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n name=\"email\"\n [placeholder]=\"\n emailInput.placeholder\n \"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"\n inputChange($event, emailInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{\n emailInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (confirmEmailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n name=\"confirmEmail\"\n [placeholder]=\"\n confirmEmailInput.placeholder\n \"\n (blur)=\"\n validateInput(confirmEmailInput)\n \"\n (input)=\"\n inputChange(\n $event,\n confirmEmailInput\n )\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n @if (\n confirmEmailInput &&\n !confirmEmailInput.valid()\n ) {\n <span class=\"form-error\">{{\n confirmEmailInput.error\n }}</span>\n }\n }\n </div>\n </div>\n @if (\n confirmEmailInput &&\n form.hasError('emailsDontMatch') &&\n form.get(confirmEmailInput.name!)?.touched\n ) {\n <span class=\"form-error\"\n >Los emails no coinciden.</span\n >\n }\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (icTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ icTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (ppTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n ppTextarea.placeholder\n \"\n [formControlName]=\"ppTextarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (waTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n waTextarea.placeholder\n \"\n [formControlName]=\"waTextarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (dTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ dTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (hbpDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"hbpDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ hbpDropdown.placeholder }}\n </option>\n @for (\n option of hbpDropdown.options;\n track $index\n ) {\n @if (option) {\n <option\n [value]=\"option.code\"\n >\n {{ option.name }}\n </option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (materialsInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"file\"\n class=\"form__control\"\n name=\"Materials\"\n id=\"Materials\"\n [placeholder]=\"materialsInput.label\"\n (input)=\"\n inputChange(\n $event,\n materialsInput\n )\n \"\n />\n <span class=\"icon-right\">\n <div>\n <i class=\"icon-98\"></i>\n </div>\n </span>\n </div>\n @if (!materialsInput.valid()) {\n <span class=\"form-error\">{{\n materialsInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (\n materialsNames && materialsNames.length > 0\n ) {\n @for (\n name of materialsNames;\n track $index\n ) {\n <span class=\"file-name\">{{\n name\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n <div class=\"block-checkbox\">\n @if (requiredLabel) {\n <span class=\"required-label\">{{\n requiredLabel\n }}</span>\n }\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n checked\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span [innerHTML]=\"conditionsLink\">\n </span>\n </label>\n }\n @if (others) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"others\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span>{{ others }}</span>\n </label>\n }\n </div>\n </div>\n </div>\n\n <div class=\"btn__group\">\n @if (applyButton) {\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"applyButton.label\"\n [disabled]=\"!form.valid\"\n (click)=\"submitForm()\"\n >\n <span>{{ applyButton.label }}</span>\n </button>\n }\n <!-- @if (seeAllButton) {\n <button\n class=\"btn btn__primary--outline js-active-modal\"\n data-modal_name=\"thankyou\"\n [attr.aria-label]=\"seeAllButton.label\"\n >\n <span>{{ seeAllButton.label }}</span>\n </button>\n } -->\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</section>\n", styles: [".projectsForm{padding-block:3.5rem;padding-inline:4.5rem;padding-inline:auto}@media (min-width: 768px){.projectsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.projectsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.projectsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.projectsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.projectsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.projectsForm__title{margin-bottom:3rem;display:none;text-align:start}}.projectsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.projectsForm__inner{column-gap:4rem;flex-direction:row}}@media (min-width: 1280px){.projectsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.projectsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.projectsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.projectsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.projectsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.projectsForm__graphic{margin-inline:auto}}.projectsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.projectsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.projectsForm__graphicInner{aspect-ratio:905/1067}}.projectsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.projectsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.projectsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.projectsForm__content{order:1;flex:1 1 0%}}.projectsForm__content .btn__group{margin-top:4rem;justify-content:center}.projectsForm__content .projectsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.projectsForm__content .projectsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.projectsForm__content .projectsForm__title{display:block;text-align:start}}.projectsForm__content .projectsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.projectsForm__content .projectsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.projectsForm__content .projectsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.projectsForm__content .projectsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__row{margin:0 -2.1rem}}.projectsForm__content .projectsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.projectsForm__content .projectsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.projectsForm__content .projectsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__col{padding-inline:2.1rem}}.projectsForm__content .projectsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.projectsForm__placeholder span{color:#1e1e1e;opacity:.6}.projectsForm .form-error{color:var(--grey);z-index:1}.projectsForm .icon-right i{font-size:2rem}.projectsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.projectsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.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: "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 }); }
|
|
8147
8147
|
}
|
|
8148
8148
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PuroProjectsFormComponent, decorators: [{
|
|
8149
8149
|
type: Component,
|
|
@@ -8153,7 +8153,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
8153
8153
|
ReactiveFormsModule,
|
|
8154
8154
|
NgOptimizedImage,
|
|
8155
8155
|
AutoImageZoomWrapperDirective,
|
|
8156
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"projectsForm\">\n <div class=\"projectsForm__inner\">\n @if (title) {\n <span class=\"projectsForm__title\">{{ title }}</span>\n }\n <div class=\"projectsForm__graphic\">\n <div class=\"projectsForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"projectsForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n <div class=\"projectsForm__content\">\n @if (title) {\n <span class=\"projectsForm__title\">{{ title }}</span>\n }\n @if (description) {\n <div class=\"projectsForm__paragraph\">\n {{ description }}\n </div>\n }\n @if (formReady$()) {\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (ydTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ ydTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (npDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"npDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ npDropdown.placeholder }}\n </option>\n @for (\n option of npDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (tbDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"tbDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ tbDropdown.placeholder }}\n </option>\n @for (\n option of tbDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (poDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"poDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ poDropdown.placeholder }}\n </option>\n @for (\n option of poDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (emDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"emDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ emDropdown.placeholder }}\n </option>\n @for (\n option of emDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (bpDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"bpDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ bpDropdown.placeholder }}\n </option>\n @for (\n option of bpDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (addressInput && addressInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Address\"\n id=\"Address\"\n [placeholder]=\"\n addressInput.placeholder\n \"\n [formControlName]=\"\n addressInput.name!\n \"\n (blur)=\"validateInput(addressInput)\"\n (input)=\"\n inputChange(\n $event,\n addressInput\n )\n \"\n />\n <span class=\"icon-right\">\n <div>\n <i class=\"icon-62\"></i>\n </div>\n </span>\n </div>\n @if (!addressInput.valid()) {\n <span class=\"form-error\">{{\n addressInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (sizeInput && sizeInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Size\"\n id=\"Size\"\n [placeholder]=\"\n sizeInput.placeholder\n \"\n [formControlName]=\"sizeInput.name!\"\n (blur)=\"validateInput(sizeInput)\"\n (input)=\"\n inputChange($event, sizeInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"19\"\n >\n <use href=\"#size\"></use>\n </svg>\n </span>\n </div>\n @if (!sizeInput.valid()) {\n <span class=\"form-error\">{{\n sizeInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (whyTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n whyTextarea.placeholder\n \"\n [formControlName]=\"\n whyTextarea.name!\n \"\n ></textarea>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (aiTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ aiTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Name\"\n id=\"Name\"\n [placeholder]=\"\n nameInput.placeholder\n \"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"\n inputChange($event, nameInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{\n nameInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (surnameInput && surnameInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Apellidos\"\n id=\"apellidos\"\n [placeholder]=\"\n surnameInput.placeholder\n \"\n [formControlName]=\"\n surnameInput.name!\n \"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"\n inputChange(\n $event,\n surnameInput\n )\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{\n surnameInput.error\n }}</span>\n }\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n name=\"Prefijo\"\n formControlName=\"prefix\"\n >\n @if (prefix.placeholder) {\n <option\n value=\"\"\n disabled\n selected\n >\n {{ prefix.placeholder }}\n </option>\n }\n @for (\n item of prefix.options || [];\n track $index\n ) {\n <option [value]=\"item.code\">\n {{ item.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"phone\"\n id=\"phone\"\n [placeholder]=\"\n phoneInput.placeholder\n \"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"\n inputChange($event, phoneInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#phone\"></use>\n </svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{\n phoneInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n name=\"email\"\n [placeholder]=\"\n emailInput.placeholder\n \"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"\n inputChange($event, emailInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{\n emailInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (confirmEmailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n name=\"confirmEmail\"\n [placeholder]=\"\n confirmEmailInput.placeholder\n \"\n (blur)=\"\n validateInput(confirmEmailInput)\n \"\n (input)=\"\n inputChange(\n $event,\n confirmEmailInput\n )\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n @if (\n confirmEmailInput &&\n !confirmEmailInput.valid()\n ) {\n <span class=\"form-error\">{{\n confirmEmailInput.error\n }}</span>\n }\n }\n </div>\n </div>\n @if (\n confirmEmailInput &&\n form.hasError('emailsDontMatch') &&\n form.get(confirmEmailInput.name!)?.touched\n ) {\n <span class=\"form-error\"\n >Los emails no coinciden.</span\n >\n }\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (icTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ icTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (ppTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n ppTextarea.placeholder\n \"\n [formControlName]=\"ppTextarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (waTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n waTextarea.placeholder\n \"\n [formControlName]=\"waTextarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (dTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ dTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (hbpDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"hbpDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ hbpDropdown.placeholder }}\n </option>\n @for (\n option of hbpDropdown.options;\n track $index\n ) {\n @if (option) {\n <option\n [value]=\"option.code\"\n >\n {{ option.name }}\n </option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (materialsInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"file\"\n class=\"form__control\"\n name=\"Materials\"\n id=\"Materials\"\n [placeholder]=\"materialsInput.label\"\n (input)=\"\n inputChange(\n $event,\n materialsInput\n )\n \"\n />\n <span class=\"icon-right\">\n <div>\n <i class=\"icon-98\"></i>\n </div>\n </span>\n </div>\n @if (!materialsInput.valid()) {\n <span class=\"form-error\">{{\n materialsInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (\n materialsNames && materialsNames.length > 0\n ) {\n @for (\n name of materialsNames;\n track $index\n ) {\n <span class=\"file-name\">{{\n name\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n <div class=\"block-checkbox\">\n @if (requiredLabel) {\n <span class=\"required-label\">{{\n requiredLabel\n }}</span>\n }\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n checked\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span [innerHTML]=\"conditionsLink\">\n </span>\n </label>\n }\n @if (others) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"others\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span>{{ others }}</span>\n </label>\n }\n </div>\n </div>\n </div>\n\n <div class=\"btn__group\">\n @if (applyButton) {\n <button\n class=\"btn btn__primary--outline js-active-modal\"\n data-modal_name=\"thankyou\"\n [attr.aria-label]=\"applyButton.label\"\n [disabled]=\"!form.valid\"\n (click)=\"submitForm()\"\n >\n <span>{{ applyButton.label }}</span>\n </button>\n }\n @if (seeAllButton) {\n <button\n class=\"btn btn__primary--outline js-active-modal\"\n data-modal_name=\"thankyou\"\n [attr.aria-label]=\"seeAllButton.label\"\n >\n <span>{{ seeAllButton.label }}</span>\n </button>\n }\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</section>\n", styles: [".projectsForm{padding-block:3.5rem;padding-inline:4.5rem;padding-inline:auto}@media (min-width: 768px){.projectsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.projectsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.projectsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.projectsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.projectsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.projectsForm__title{margin-bottom:3rem;display:none;text-align:start}}.projectsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.projectsForm__inner{column-gap:4rem;flex-direction:row}}@media (min-width: 1280px){.projectsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.projectsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.projectsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.projectsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.projectsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.projectsForm__graphic{margin-inline:auto}}.projectsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.projectsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.projectsForm__graphicInner{aspect-ratio:905/1067}}.projectsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.projectsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.projectsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.projectsForm__content{order:1;flex:1 1 0%}}.projectsForm__content .btn__group{margin-top:4rem;justify-content:center}.projectsForm__content .projectsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.projectsForm__content .projectsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.projectsForm__content .projectsForm__title{display:block;text-align:start}}.projectsForm__content .projectsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.projectsForm__content .projectsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.projectsForm__content .projectsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.projectsForm__content .projectsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__row{margin:0 -2.1rem}}.projectsForm__content .projectsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.projectsForm__content .projectsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.projectsForm__content .projectsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__col{padding-inline:2.1rem}}.projectsForm__content .projectsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.projectsForm__placeholder span{color:#1e1e1e;opacity:.6}.projectsForm .form-error{color:var(--grey);z-index:1}.projectsForm .icon-right i{font-size:2rem}.projectsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.projectsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}\n"] }]
|
|
8156
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"projectsForm\">\n <div class=\"projectsForm__inner\">\n @if (title) {\n <span class=\"projectsForm__title\">{{ title }}</span>\n }\n <div class=\"projectsForm__graphic\">\n <div class=\"projectsForm__graphicInner\">\n @if (img) {\n <img\n [ngSrc]=\"img.src\"\n [alt]=\"img.alt\"\n width=\"467\"\n height=\"551\"\n class=\"projectsForm__graphicInner--img\"\n decoding=\"async\"\n />\n }\n </div>\n </div>\n <div class=\"projectsForm__content\">\n @if (title) {\n <span class=\"projectsForm__title\">{{ title }}</span>\n }\n @if (description) {\n <div class=\"projectsForm__paragraph\">\n {{ description }}\n </div>\n }\n @if (formReady$()) {\n <form [formGroup]=\"form\" class=\"form\" (ngSubmit)=\"submitForm()\">\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (ydTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ ydTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (npDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"npDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ npDropdown.placeholder }}\n </option>\n @for (\n option of npDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (tbDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"tbDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ tbDropdown.placeholder }}\n </option>\n @for (\n option of tbDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (poDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"poDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ poDropdown.placeholder }}\n </option>\n @for (\n option of poDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (emDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"emDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ emDropdown.placeholder }}\n </option>\n @for (\n option of emDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (bpDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"bpDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ bpDropdown.placeholder }}\n </option>\n @for (\n option of bpDropdown.options;\n track $index\n ) {\n <option [value]=\"option.code\">\n {{ option.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (addressInput && addressInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Address\"\n id=\"Address\"\n [placeholder]=\"\n addressInput.placeholder\n \"\n [formControlName]=\"\n addressInput.name!\n \"\n (blur)=\"validateInput(addressInput)\"\n (input)=\"\n inputChange(\n $event,\n addressInput\n )\n \"\n />\n <span class=\"icon-right\">\n <div>\n <i class=\"icon-62\"></i>\n </div>\n </span>\n </div>\n @if (!addressInput.valid()) {\n <span class=\"form-error\">{{\n addressInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (sizeInput && sizeInput.name) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Size\"\n id=\"Size\"\n [placeholder]=\"\n sizeInput.placeholder\n \"\n [formControlName]=\"sizeInput.name!\"\n (blur)=\"validateInput(sizeInput)\"\n (input)=\"\n inputChange($event, sizeInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"19\"\n >\n <use href=\"#size\"></use>\n </svg>\n </span>\n </div>\n @if (!sizeInput.valid()) {\n <span class=\"form-error\">{{\n sizeInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (whyTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n whyTextarea.placeholder\n \"\n [formControlName]=\"\n whyTextarea.name!\n \"\n ></textarea>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (aiTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ aiTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (nameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Name\"\n id=\"Name\"\n [placeholder]=\"\n nameInput.placeholder\n \"\n [formControlName]=\"nameInput.name!\"\n (blur)=\"validateInput(nameInput)\"\n (input)=\"\n inputChange($event, nameInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!nameInput.valid()) {\n <span class=\"form-error\">{{\n nameInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (surnameInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"Apellidos\"\n id=\"apellidos\"\n [placeholder]=\"\n surnameInput.placeholder\n \"\n [formControlName]=\"\n surnameInput.name!\n \"\n (blur)=\"validateInput(surnameInput)\"\n (input)=\"\n inputChange(\n $event,\n surnameInput\n )\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"18\"\n height=\"20\"\n >\n <use href=\"#user\"></use>\n </svg>\n </span>\n </div>\n @if (!surnameInput.valid()) {\n <span class=\"form-error\">{{\n surnameInput.error\n }}</span>\n }\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (prefix) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n name=\"Prefijo\"\n formControlName=\"prefix\"\n >\n @if (prefix.placeholder) {\n <option\n value=\"\"\n disabled\n selected\n >\n {{ prefix.placeholder }}\n </option>\n }\n @for (\n item of prefix.options || [];\n track $index\n ) {\n <option [value]=\"item.code\">\n {{ item.name }}\n </option>\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (phoneInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"text\"\n class=\"form__control\"\n name=\"phone\"\n id=\"phone\"\n [placeholder]=\"\n phoneInput.placeholder\n \"\n (blur)=\"validateInput(phoneInput)\"\n (input)=\"\n inputChange($event, phoneInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#phone\"></use>\n </svg>\n </span>\n </div>\n @if (!phoneInput.valid()) {\n <span class=\"form-error\">{{\n phoneInput.error\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (emailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n name=\"email\"\n [placeholder]=\"\n emailInput.placeholder\n \"\n (blur)=\"validateInput(emailInput)\"\n (input)=\"\n inputChange($event, emailInput)\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n @if (!emailInput.valid()) {\n <span class=\"form-error\">{{\n emailInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (confirmEmailInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"email\"\n class=\"form__control\"\n name=\"confirmEmail\"\n [placeholder]=\"\n confirmEmailInput.placeholder\n \"\n (blur)=\"\n validateInput(confirmEmailInput)\n \"\n (input)=\"\n inputChange(\n $event,\n confirmEmailInput\n )\n \"\n />\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"17\"\n height=\"17\"\n >\n <use href=\"#email\"></use>\n </svg>\n </span>\n </div>\n @if (\n confirmEmailInput &&\n !confirmEmailInput.valid()\n ) {\n <span class=\"form-error\">{{\n confirmEmailInput.error\n }}</span>\n }\n }\n </div>\n </div>\n @if (\n confirmEmailInput &&\n form.hasError('emailsDontMatch') &&\n form.get(confirmEmailInput.name!)?.touched\n ) {\n <span class=\"form-error\"\n >Los emails no coinciden.</span\n >\n }\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (icTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ icTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (ppTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n ppTextarea.placeholder\n \"\n [formControlName]=\"ppTextarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (waTextarea) {\n <div class=\"form__group no-dot\">\n <textarea\n class=\"form__control\"\n [placeholder]=\"\n waTextarea.placeholder\n \"\n [formControlName]=\"waTextarea.name!\"\n ></textarea>\n </div>\n }\n </div>\n </div>\n </div>\n\n <div class=\"projectsForm__section\">\n <div class=\"form__group\">\n @if (dTitle) {\n <span\n class=\"projectsForm__section--title form__group\"\n >\n {{ dTitle }}\n </span>\n }\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (hbpDropdown) {\n <div class=\"form__group withIcon\">\n <select\n class=\"form__control\"\n formControlName=\"hbpDropdown\"\n >\n <option value=\"\" disabled selected>\n {{ hbpDropdown.placeholder }}\n </option>\n @for (\n option of hbpDropdown.options;\n track $index\n ) {\n @if (option) {\n <option\n [value]=\"option.code\"\n >\n {{ option.name }}\n </option>\n }\n }\n </select>\n <span class=\"icon-right\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"15\"\n height=\"8\"\n >\n <use href=\"#select-arrow\"></use>\n </svg>\n </span>\n </div>\n }\n </div>\n </div>\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n @if (materialsInput) {\n <div class=\"form__group withIcon\">\n <input\n type=\"file\"\n class=\"form__control\"\n name=\"Materials\"\n id=\"Materials\"\n [placeholder]=\"materialsInput.label\"\n (input)=\"\n inputChange(\n $event,\n materialsInput\n )\n \"\n />\n <span class=\"icon-right\">\n <div>\n <i class=\"icon-98\"></i>\n </div>\n </span>\n </div>\n @if (!materialsInput.valid()) {\n <span class=\"form-error\">{{\n materialsInput.error\n }}</span>\n }\n }\n </div>\n <div class=\"projectsForm__col\">\n @if (\n materialsNames && materialsNames.length > 0\n ) {\n @for (\n name of materialsNames;\n track $index\n ) {\n <span class=\"file-name\">{{\n name\n }}</span>\n }\n }\n </div>\n </div>\n\n <div class=\"projectsForm__row\">\n <div class=\"projectsForm__col\">\n <div class=\"block-checkbox\">\n @if (requiredLabel) {\n <span class=\"required-label\">{{\n requiredLabel\n }}</span>\n }\n @if (conditionsLink) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n checked\n class=\"checkbox\"\n formControlName=\"conditions\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span [innerHTML]=\"conditionsLink\">\n </span>\n </label>\n }\n @if (others) {\n <label class=\"form__checkbox\">\n <input\n type=\"checkbox\"\n class=\"checkbox\"\n formControlName=\"others\"\n />\n <span class=\"box\">\n <svg\n aria-hidden=\"true\"\n focusable=\"false\"\n width=\"9\"\n height=\"7\"\n >\n <use\n href=\"#checkbox-tick\"\n ></use>\n </svg>\n </span>\n <span>{{ others }}</span>\n </label>\n }\n </div>\n </div>\n </div>\n\n <div class=\"btn__group\">\n @if (applyButton) {\n <button\n class=\"btn btn__primary--outline\"\n type=\"submit\"\n [attr.aria-label]=\"applyButton.label\"\n [disabled]=\"!form.valid\"\n (click)=\"submitForm()\"\n >\n <span>{{ applyButton.label }}</span>\n </button>\n }\n <!-- @if (seeAllButton) {\n <button\n class=\"btn btn__primary--outline js-active-modal\"\n data-modal_name=\"thankyou\"\n [attr.aria-label]=\"seeAllButton.label\"\n >\n <span>{{ seeAllButton.label }}</span>\n </button>\n } -->\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</section>\n", styles: [".projectsForm{padding-block:3.5rem;padding-inline:4.5rem;padding-inline:auto}@media (min-width: 768px){.projectsForm{padding-block:3.9rem 4.664rem;padding-inline:10.7rem 10.689rem}}@media (min-width: 1280px){.projectsForm{padding-block:5.117rem 5.7rem;padding-inline:8.2rem 9.4rem}}@media (min-width: 1680px){.projectsForm{padding-block:10.1rem 7.4rem;padding-inline:14.7rem}}.projectsForm__title{margin-bottom:2rem;display:block;text-align:center;text-transform:uppercase;color:#1e1e1e;opacity:.8;padding-inline:2rem;font-size:1.8rem;line-height:1.213;letter-spacing:.18rem}@media (min-width: 768px){.projectsForm__title{font-size:2rem;line-height:1.213;letter-spacing:.2rem}}@media (min-width: 1024px){.projectsForm__title{margin-bottom:3rem;display:none;text-align:start}}.projectsForm__inner{display:flex;flex-direction:column;row-gap:3.125rem;margin-inline:auto}@media (min-width: 1024px){.projectsForm__inner{column-gap:4rem;flex-direction:row}}@media (min-width: 1280px){.projectsForm__inner{column-gap:8.269rem}}@media (min-width: 1680px){.projectsForm__inner{column-gap:16.689rem;max-width:189.933rem}}.projectsForm__graphic{width:46.72rem;max-width:85%;position:relative}@media (min-width: 1024px){.projectsForm__graphic{order:2;max-width:45%}}@media (min-width: 1680px){.projectsForm__graphic{width:90.5rem}}@media (max-width: 1023.98px){.projectsForm__graphic{margin-inline:auto}}.projectsForm__graphicInner{width:100%;aspect-ratio:467.2/550.83}@media (min-width: 1024px){.projectsForm__graphicInner{position:sticky;top:17rem;max-height:calc(100svh - 17rem)}}@media (min-width: 1680px){.projectsForm__graphicInner{aspect-ratio:905/1067}}.projectsForm__graphicInner--img{width:100%;height:100%;object-fit:cover}.projectsForm__section--title{text-transform:uppercase;padding-inline:2rem;color:var(--reservar-filter-bg);display:block;font-size:1.6rem;line-height:1.364625;letter-spacing:.16rem}@media (min-width: 768px){.projectsForm__section--title{font-size:1.8rem;line-height:1.3477777778;letter-spacing:.18rem}}@media (min-width: 1024px){.projectsForm__content{order:1;flex:1 1 0%}}.projectsForm__content .btn__group{margin-top:4rem;justify-content:center}.projectsForm__content .projectsForm__title{display:none;font-size:1.4rem;line-height:1.7;letter-spacing:.06rem}@media (min-width: 768px){.projectsForm__content .projectsForm__title{font-size:1.6rem;line-height:1.7;letter-spacing:.072rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__title{font-size:3rem;line-height:1.02;letter-spacing:.09rem}}@media (min-width: 1024px){.projectsForm__content .projectsForm__title{display:block;text-align:start}}.projectsForm__content .projectsForm__paragraph{color:var(--cl-text-dark);min-height:7.6rem;text-align:start;margin-bottom:3rem;padding-inline:2rem;font-size:1.6rem;line-height:1.4875;letter-spacing:.048rem}@media (min-width: 768px){.projectsForm__content .projectsForm__paragraph{font-size:1.8rem;line-height:1.5111111111;letter-spacing:.054rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__paragraph{text-align:start;font-size:2rem;line-height:1.53;letter-spacing:.06rem}}.projectsForm__content .projectsForm__row{display:flex;flex-wrap:wrap;margin:0 -.75rem}@media (min-width: 768px){.projectsForm__content .projectsForm__row{margin:0 -1.5rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__row{margin:0 -2.1rem}}.projectsForm__content .projectsForm__row .btn__link:not(:hover):after{background:var(--bg-primary)}.projectsForm__content .projectsForm__col{flex:1 0 100%;width:100%;max-width:100%;padding-inline:.75rem}@media (min-width: 768px){.projectsForm__content .projectsForm__col{flex:1 0 0%;padding-inline:1.5rem}}@media (min-width: 1280px){.projectsForm__content .projectsForm__col{padding-inline:2.1rem}}.projectsForm__content .projectsForm__col .block-checkbox{display:flex;flex-direction:column;row-gap:1rem}.projectsForm__placeholder span{color:#1e1e1e;opacity:.6}.projectsForm .form-error{color:var(--grey);z-index:1}.projectsForm .icon-right i{font-size:2rem}.projectsForm .file-name{text-overflow:ellipsis;color:var(--grey);font-size:1.4rem;line-height:1.9428571429;letter-spacing:.042rem}@media (min-width: 768px){.projectsForm .file-name{font-size:1.6rem;line-height:1.51625;letter-spacing:.16rem}}input[type=file]{background-color:#fff;line-height:3.2}input[type=file]::-webkit-file-upload-button{visibility:hidden}input[type=file]:before{content:attr(placeholder);background:#fff;color:#1e1e1e;opacity:.6;display:inline-block;cursor:pointer;width:100%;overflow-x:hidden}\n"] }]
|
|
8157
8157
|
}], ctorParameters: () => [{ type: i1$3.FormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { title: [{
|
|
8158
8158
|
type: Input
|
|
8159
8159
|
}], description: [{
|