@@ -30,7 +30,7 @@ <h3 class="mb-2">{{ section.title }}</h3>
3030 </ div >
3131
3232 @if (section.description) {
33- < p class ="mb-3 "> {{ section.description }}</ p >
33+ < p class ="preserve-whitespace mb-3 "> {{ section.description }}</ p >
3434 }
3535 < ng-container *ngTemplateOutlet ="questionList; context: { $implicit: section.questions } "> </ ng-container >
3636 </ p-card >
@@ -40,151 +40,150 @@ <h3 class="mb-2">{{ section.title }}</h3>
4040 < ng-template #questionList let-questions >
4141 @for (q of questions; track q.id) {
4242 < form class ="mb-4 " [formGroup] ="stepForm ">
43- < p-card >
44- < label [for] ="q.groupKey ">
45- < div class ="flex align-items-baseline gap-1 ">
46- < h3 class ="mb-2 ">
47- {{ q.displayText }}
48- @if (q.required) {
49- < span class ="text-red-500 "> *</ span >
50- }
51- </ h3 >
52- </ div >
53- @if (q.paragraphText) {
54- < p class ="mb-3 preserve-whitespace "> {{ q.paragraphText }}</ p >
55- }
56- @if (q.helpText) {
57- < p class ="preserve-whitespace "> {{ q.helpText }}</ p >
58- }
59- </ label >
60- @if (q.exampleText) {
61- < p-inplace #inplaceRef styleClass ="mb-4 ">
62- < ng-template #display >
63- < span class ="text-primary font-medium "> {{ 'common.links.showExample' | translate }} </ span >
64- </ ng-template >
65- < ng-template #content >
66- < p-button size ="small " (onClick) ="inplaceRef.deactivate() " variant ="text " styleClass ="font-medium ">
67- {{ 'common.links.hideExample' | translate }}
68- </ p-button >
69- < p class ="m-0 "> {{ q.exampleText }}</ p >
70- </ ng-template >
71- </ p-inplace >
43+ < label [for] ="q.groupKey ">
44+ < div class ="flex align-items-baseline gap-1 ">
45+ < h3 class ="mb-2 ">
46+ {{ q.displayText }}
47+ @if (q.required) {
48+ < span class ="text-red-500 "> *</ span >
49+ }
50+ </ h3 >
51+ </ div >
52+ @if (q.paragraphText) {
53+ < p class ="mb-3 preserve-whitespace "> {{ q.paragraphText }}</ p >
54+ }
55+ @if (q.helpText) {
56+ < p class ="preserve-whitespace "> {{ q.helpText }}</ p >
7257 }
58+ </ label >
7359
74- @switch (q.fieldType) {
75- @case (FieldType.TextArea) {
76- < textarea
77- id ="{{ q.groupKey }} "
78- class ="w-full "
79- rows ="5 "
80- cols ="30 "
81- pTextarea
82- [formControlName] ="q.responseKey! "
83- > </ textarea >
84- @if (
85- stepForm.controls[q.responseKey!].errors?.['required'] &&
86- (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
87- ) {
88- < p-message class ="simple-variant flex mt-1 " severity ="error " variant ="simple " size ="small ">
89- {{ INPUT_VALIDATION_MESSAGES.required | translate }}
90- </ p-message >
91- }
92- }
93- @case (FieldType.Radio) {
94- < div class ="flex flex-column gap-2 mt-3 ">
95- @for (option of q.options; track option) {
96- < div class ="flex align -items-center gap-2 ">
97- < p-radioButton
98- [formControlName] ="q.responseKey! "
99- [inputId] ="option.value "
100- [value] ="option.value "
101- > </ p-radioButton >
102-
103- < label [for] ="option.value " class ="mb-0 cursor-pointer "> {{ option.label }}</ label >
104- @if (option.helpText) {
105- < osf-info-icon [tooltipText] ="option.helpText " tooltipPosition ="top "> </ osf-info-icon >
106- }
107- </ div >
108- }
109- </ div >
110- @if (
111- stepForm.controls[q.responseKey!].errors?.['required'] &&
112- (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
113- ) {
114- < p-message class ="simple-variant flex mt-1 " severity ="error " variant ="simple " size ="small ">
115- {{ INPUT_VALIDATION_MESSAGES.required | translate }}
116- </ p-message >
117- }
60+ @if (q.exampleText) {
61+ < p-inplace #inplaceRef styleClass ="mb-4 ">
62+ < ng-template #display >
63+ < span class ="text-primary font-medium "> {{ 'common.links.showExample' | translate }} </ span >
64+ </ ng-template >
65+ < ng-template #content >
66+ < p-button size ="small " (onClick) ="inplaceRef.deactivate() " variant ="text " styleClass ="font-medium ">
67+ {{ 'common.links.hideExample' | translate }}
68+ </ p-button >
69+ < p class ="m-0 "> {{ q.exampleText }}</ p >
70+ </ ng-template >
71+ </ p-inplace >
72+ }
73+
74+ @switch (q.fieldType) {
75+ @case (FieldType.TextArea) {
76+ < textarea
77+ id ="{{ q.groupKey }} "
78+ class ="w-full "
79+ rows ="5 "
80+ cols ="30 "
81+ pTextarea
82+ [formControlName] ="q.responseKey! "
83+ > </ textarea >
84+ @if (
85+ stepForm.controls[q.responseKey!].errors?.['required'] &&
86+ (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
87+ ) {
88+ < p-message class ="simple-variant flex mt-1 " severity ="error " variant ="simple " size ="small ">
89+ {{ INPUT_VALIDATION_MESSAGES.required | translate }}
90+ </ p-message >
11891 }
119- @case (FieldType.Checkbox) {
120- < div class ="flex flex-column gap-2 mt-3 ">
121- @for (option of q.options; track option) {
122- < div class ="flex align-items-center gap-2 ">
123- < p-checkbox
124- [inputId] ="option.value "
125- [formControlName] ="q.responseKey! "
126- [value] ="option.value "
127- > </ p-checkbox >
128-
129- < label [for] ="option.value " class ="mb-0 cursor-pointer "> {{ option.label }}</ label >
130- @if (option.helpText) {
131- < osf-info-icon [tooltipText] ="option.helpText " tooltipPosition ="top "> </ osf-info-icon >
132- }
133- </ div >
134- }
135- </ div >
136- @if (
137- stepForm.controls[q.responseKey!].errors?.['required'] &&
138- (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
139- ) {
140- < p-message class ="simple-variant flex mt-1 " severity ="error " variant ="simple " size ="small ">
141- {{ INPUT_VALIDATION_MESSAGES.required | translate }}
142- </ p-message >
92+ }
93+ @case (FieldType.Radio) {
94+ < div class ="flex flex-column gap-2 mt-3 ">
95+ @for (option of q.options; track option) {
96+ < div class ="flex align -items-center gap-2 ">
97+ < p-radioButton
98+ [formControlName] ="q.responseKey! "
99+ [inputId] ="option.value "
100+ [value] ="option.value "
101+ > </ p-radioButton >
102+
103+ < label [for] ="option.value " class ="mb-0 cursor-pointer "> {{ option.label }}</ label >
104+ @if (option.helpText) {
105+ < osf-info-icon [tooltipText] ="option.helpText " tooltipPosition ="top "> </ osf-info-icon >
106+ }
107+ </ div >
143108 }
109+ </ div >
110+ @if (
111+ stepForm.controls[q.responseKey!].errors?.['required'] &&
112+ (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
113+ ) {
114+ < p-message class ="simple-variant flex mt-1 " severity ="error " variant ="simple " size ="small ">
115+ {{ INPUT_VALIDATION_MESSAGES.required | translate }}
116+ </ p-message >
144117 }
118+ }
119+ @case (FieldType.Checkbox) {
120+ < div class ="flex flex-column gap-2 mt-3 ">
121+ @for (option of q.options; track option) {
122+ < div class ="flex align-items-center gap-2 ">
123+ < p-checkbox
124+ [inputId] ="option.value "
125+ [formControlName] ="q.responseKey! "
126+ [value] ="option.value "
127+ > </ p-checkbox >
145128
146- @case (FieldType.Text) {
147- < input [formControlName] ="q.responseKey! " type ="text " class ="w-full " pInputText />
148- @if (
149- stepForm.controls[q.responseKey!].errors?.['required'] &&
150- (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
151- ) {
152- < p-message class ="simple-variant flex mt-1 " severity ="error " variant ="simple " size ="small ">
153- {{ INPUT_VALIDATION_MESSAGES.required | translate }}
154- </ p-message >
129+ < label [for] ="option.value " class ="mb-0 cursor-pointer "> {{ option.label }}</ label >
130+ @if (option.helpText) {
131+ < osf-info-icon [tooltipText] ="option.helpText " tooltipPosition ="top "> </ osf-info-icon >
132+ }
133+ </ div >
155134 }
135+ </ div >
136+ @if (
137+ stepForm.controls[q.responseKey!].errors?.['required'] &&
138+ (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
139+ ) {
140+ < p-message class ="simple-variant flex mt-1 " severity ="error " variant ="simple " size ="small ">
141+ {{ INPUT_VALIDATION_MESSAGES.required | translate }}
142+ </ p-message >
156143 }
157- @case (FieldType.File) {
158- < h3 class ="mb-2 "> {{ 'files.actions.uploadFile' | translate }}</ h3 >
159- < p class ="mb-1 ">
160- {{ 'shared.files.limitText' | translate }}
161- </ p >
162- < p >
163- {{ 'shared.files.description' | translate }}
164- </ p >
165- < div class ="flex flex-wrap gap-2 mt-3 mb-3 ">
166- @for (file of attachedFiles[q.responseKey!] || []; track file) {
167- < p-chip
168- [label] ="file.name "
169- severity ="info "
170- removable ="true "
171- (onRemove) ="removeFromAttachedFiles(file, q.responseKey!) "
172- />
173- }
174- </ div >
175- < div class ="-ml-3 -mr-3 ">
176- < osf-files-control
177- [attachedFiles] ="attachedFiles[q.responseKey!] "
178- [filesLink] ="filesLink() "
179- [projectId] ="projectId() "
180- [provider] ="provider() "
181- (attachFile) ="onAttachFile($event, q.responseKey!) "
182- [filesViewOnly] ="filesViewOnly() "
183- > </ osf-files-control >
184- </ div >
144+ }
145+
146+ @case (FieldType.Text) {
147+ < input [formControlName] ="q.responseKey! " type ="text " class ="w-full " pInputText />
148+ @if (
149+ stepForm.controls[q.responseKey!].errors?.['required'] &&
150+ (stepForm.controls[q.responseKey!].touched || stepForm.controls[q.responseKey!].dirty)
151+ ) {
152+ < p-message class ="simple-variant flex mt-1 " severity ="error " variant ="simple " size ="small ">
153+ {{ INPUT_VALIDATION_MESSAGES.required | translate }}
154+ </ p-message >
185155 }
186156 }
187- </ p-card >
157+ @case (FieldType.File) {
158+ < h3 class ="mb-2 "> {{ 'files.actions.uploadFile' | translate }}</ h3 >
159+ < p class ="mb-1 ">
160+ {{ 'shared.files.limitText' | translate }}
161+ </ p >
162+ < p >
163+ {{ 'shared.files.description' | translate }}
164+ </ p >
165+ < div class ="flex flex-wrap gap-2 mt-3 mb-3 ">
166+ @for (file of attachedFiles[q.responseKey!] || []; track file) {
167+ < p-chip
168+ [label] ="file.name "
169+ severity ="info "
170+ removable ="true "
171+ (onRemove) ="removeFromAttachedFiles(file, q.responseKey!) "
172+ />
173+ }
174+ </ div >
175+ < div class ="-ml-3 -mr-3 ">
176+ < osf-files-control
177+ [attachedFiles] ="attachedFiles[q.responseKey!] "
178+ [filesLink] ="filesLink() "
179+ [projectId] ="projectId() "
180+ [provider] ="provider() "
181+ (attachFile) ="onAttachFile($event, q.responseKey!) "
182+ [filesViewOnly] ="filesViewOnly() "
183+ > </ osf-files-control >
184+ </ div >
185+ }
186+ }
188187 </ form >
189188 }
190189 </ ng-template >
0 commit comments