@unicef-polymer/etools-form-builder 3.0.0-rc.21 → 3.0.0-rc.22

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.
Files changed (29) hide show
  1. package/LICENSE +674 -674
  2. package/README.md +1 -1
  3. package/dist/form-attachments-popup/form-attachments-popup.js +135 -135
  4. package/dist/form-fields/abstract-field-base.class.js +101 -101
  5. package/dist/form-fields/field-renderer-component.js +147 -147
  6. package/dist/form-fields/repeatable-fields/repeatable-attachment-field.js +111 -111
  7. package/dist/form-fields/repeatable-fields/repeatable-base-field.js +22 -22
  8. package/dist/form-fields/repeatable-fields/repeatable-number-field.js +19 -19
  9. package/dist/form-fields/repeatable-fields/repeatable-scale-field.js +57 -57
  10. package/dist/form-fields/repeatable-fields/repeatable-text-field.js +19 -19
  11. package/dist/form-fields/single-fields/attachment-field.js +13 -13
  12. package/dist/form-fields/single-fields/boolean-field.js +16 -16
  13. package/dist/form-fields/single-fields/number-field.js +20 -20
  14. package/dist/form-fields/single-fields/scale-field.js +58 -58
  15. package/dist/form-fields/single-fields/text-field.js +23 -23
  16. package/dist/form-groups/form-abstract-group.js +126 -126
  17. package/dist/form-groups/form-card.js +30 -30
  18. package/dist/form-groups/form-collapsed-card.js +34 -34
  19. package/dist/lib/additional-components/confirmation-dialog.js +20 -20
  20. package/dist/lib/additional-components/etools-fb-card.js +135 -135
  21. package/dist/lib/styles/attachments.styles.js +61 -61
  22. package/dist/lib/styles/card-styles.js +147 -147
  23. package/dist/lib/styles/dialog.styles.js +83 -83
  24. package/dist/lib/styles/elevation-styles.js +33 -33
  25. package/dist/lib/styles/flex-layout-classes.js +316 -316
  26. package/dist/lib/styles/form-builder-card.styles.js +53 -53
  27. package/dist/lib/styles/page-layout-styles.js +198 -198
  28. package/dist/lib/styles/shared-styles.js +61 -61
  29. package/package.json +58 -58
package/dist/form-fields/field-renderer-component.js CHANGED
@@ -24,12 +24,12 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
24
24
  ? 'additional-field '
25
25
  : '';
26
26
  const wideClass = blueprintField.styling.includes(StructureTypes.WIDE) ? 'wide-field-container ' : '';
27
- return html `
28
- <div class="${`${additionalClass}${wideClass}finding-container`}">
27
+ return html `
28
+ <div class="${`${additionalClass}${wideClass}finding-container`}">
29
29
  ${blueprintField.repeatable
30
30
  ? this.renderRepeatableField(blueprintField)
31
- : this.renderStandardField(blueprintField)}
32
- </div>
31
+ : this.renderStandardField(blueprintField)}
32
+ </div>
33
33
  `;
34
34
  }
35
35
  renderStandardField({ input_type, label, help_text, required, placeholder, styling }) {
@@ -37,78 +37,78 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
37
37
  const isWide = styling.includes(StructureTypes.WIDE);
38
38
  switch (input_type) {
39
39
  case FieldTypes.TEXT_TYPE:
40
- return html `
41
- <text-field
42
- class="${isWide ? 'wide' : ''}"
43
- ?is-readonly="${this.readonly}"
44
- ?required="${required}"
45
- .placeholder="${placeholder}"
46
- .value="${this.value}"
47
- .validators="${this.validations}"
48
- .errorMessage="${this.errorMessage}"
49
- .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
50
- >
51
- ${this.renderFieldLabel(label, help_text)}
52
- </text-field>
40
+ return html `
41
+ <text-field
42
+ class="${isWide ? 'wide' : ''}"
43
+ ?is-readonly="${this.readonly}"
44
+ ?required="${required}"
45
+ .placeholder="${placeholder}"
46
+ .value="${this.value}"
47
+ .validators="${this.validations}"
48
+ .errorMessage="${this.errorMessage}"
49
+ .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
50
+ >
51
+ ${this.renderFieldLabel(label, help_text)}
52
+ </text-field>
53
53
  `;
54
54
  case FieldTypes.NUMBER_TYPE:
55
55
  case FieldTypes.NUMBER_FLOAT_TYPE:
56
56
  case FieldTypes.NUMBER_INTEGER_TYPE:
57
- return html `
58
- <number-field
59
- ?is-readonly="${this.readonly}"
60
- ?required="${required}"
61
- .placeholder="${placeholder}"
62
- .value="${this.value}"
63
- .validators="${this.validations}"
64
- .errorMessage="${this.errorMessage}"
65
- .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
66
- .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
67
- >
68
- ${this.renderFieldLabel(label, help_text)}
69
- </number-field>
57
+ return html `
58
+ <number-field
59
+ ?is-readonly="${this.readonly}"
60
+ ?required="${required}"
61
+ .placeholder="${placeholder}"
62
+ .value="${this.value}"
63
+ .validators="${this.validations}"
64
+ .errorMessage="${this.errorMessage}"
65
+ .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
66
+ .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
67
+ >
68
+ ${this.renderFieldLabel(label, help_text)}
69
+ </number-field>
70
70
  `;
71
71
  case FieldTypes.BOOL_TYPE:
72
- return html `
73
- <boolean-field
74
- ?is-readonly="${this.readonly}"
75
- ?required="${required}"
76
- .value="${this.value}"
77
- .validators="${this.validations}"
78
- .errorMessage="${this.errorMessage}"
79
- .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
80
- >
81
- ${this.renderFieldLabel(label, help_text)}
82
- </boolean-field>
72
+ return html `
73
+ <boolean-field
74
+ ?is-readonly="${this.readonly}"
75
+ ?required="${required}"
76
+ .value="${this.value}"
77
+ .validators="${this.validations}"
78
+ .errorMessage="${this.errorMessage}"
79
+ .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
80
+ >
81
+ ${this.renderFieldLabel(label, help_text)}
82
+ </boolean-field>
83
83
  `;
84
84
  case FieldTypes.SCALE_TYPE:
85
- return html `
86
- <scale-field
87
- .options="${this.options}"
88
- ?is-readonly="${this.readonly}"
89
- ?required="${required}"
90
- .placeholder="${placeholder}"
91
- .value="${this.value}"
92
- .validators="${this.validations}"
93
- .errorMessage="${this.errorMessage}"
94
- .defaultValue="${(_d = this.field) === null || _d === void 0 ? void 0 : _d.default_value}"
95
- >
96
- ${this.renderFieldLabel(label, help_text)}
97
- </scale-field>
85
+ return html `
86
+ <scale-field
87
+ .options="${this.options}"
88
+ ?is-readonly="${this.readonly}"
89
+ ?required="${required}"
90
+ .placeholder="${placeholder}"
91
+ .value="${this.value}"
92
+ .validators="${this.validations}"
93
+ .errorMessage="${this.errorMessage}"
94
+ .defaultValue="${(_d = this.field) === null || _d === void 0 ? void 0 : _d.default_value}"
95
+ >
96
+ ${this.renderFieldLabel(label, help_text)}
97
+ </scale-field>
98
98
  `;
99
99
  case FieldTypes.FILE_TYPE:
100
- return html `
101
- <attachments-field
102
- ?is-readonly="${this.readonly}"
103
- ?required="${required}"
104
- .placeholder="${placeholder}"
105
- .value="${this.value}"
106
- .validators="${this.validations}"
107
- .errorMessage="${this.errorMessage}"
108
- .computedPath="${this.computedPath}"
109
- >
110
- ${this.renderFieldLabel(label, help_text)}
111
- </attachments-field>
100
+ return html `
101
+ <attachments-field
102
+ ?is-readonly="${this.readonly}"
103
+ ?required="${required}"
104
+ .placeholder="${placeholder}"
105
+ .value="${this.value}"
106
+ .validators="${this.validations}"
107
+ .errorMessage="${this.errorMessage}"
108
+ .computedPath="${this.computedPath}"
109
+ >
110
+ ${this.renderFieldLabel(label, help_text)}
111
+ </attachments-field>
112
112
  `;
113
113
  default:
114
114
  console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
@@ -120,67 +120,67 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
120
120
  const isWide = styling.includes(StructureTypes.WIDE);
121
121
  switch (input_type) {
122
122
  case FieldTypes.TEXT_TYPE:
123
- return html `
124
- <repeatable-text-field
125
- class="${isWide ? 'wide' : ''}"
126
- ?is-readonly="${this.readonly}"
127
- ?required="${required}"
128
- .placeholder="${placeholder}"
129
- .value="${this.value}"
130
- .validators="${this.validations}"
131
- .errorMessage="${this.errorMessage}"
132
- .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
133
- >
134
- ${this.renderFieldLabel(label, help_text)}
135
- </repeatable-text-field>
123
+ return html `
124
+ <repeatable-text-field
125
+ class="${isWide ? 'wide' : ''}"
126
+ ?is-readonly="${this.readonly}"
127
+ ?required="${required}"
128
+ .placeholder="${placeholder}"
129
+ .value="${this.value}"
130
+ .validators="${this.validations}"
131
+ .errorMessage="${this.errorMessage}"
132
+ .defaultValue="${(_a = this.field) === null || _a === void 0 ? void 0 : _a.default_value}"
133
+ >
134
+ ${this.renderFieldLabel(label, help_text)}
135
+ </repeatable-text-field>
136
136
  `;
137
137
  case FieldTypes.NUMBER_TYPE:
138
138
  case FieldTypes.NUMBER_FLOAT_TYPE:
139
139
  case FieldTypes.NUMBER_INTEGER_TYPE:
140
- return html `
141
- <repeatable-number-field
142
- class="${isWide ? 'wide' : ''}"
143
- ?is-readonly="${this.readonly}"
144
- ?required="${required}"
145
- .placeholder="${placeholder}"
146
- .value="${this.value}"
147
- .validators="${this.validations}"
148
- .errorMessage="${this.errorMessage}"
149
- .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
150
- .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
151
- >
152
- ${this.renderFieldLabel(label, help_text)}
153
- </repeatable-number-field>
140
+ return html `
141
+ <repeatable-number-field
142
+ class="${isWide ? 'wide' : ''}"
143
+ ?is-readonly="${this.readonly}"
144
+ ?required="${required}"
145
+ .placeholder="${placeholder}"
146
+ .value="${this.value}"
147
+ .validators="${this.validations}"
148
+ .errorMessage="${this.errorMessage}"
149
+ .isInteger="${Boolean(input_type === FieldTypes.NUMBER_INTEGER_TYPE)}"
150
+ .defaultValue="${(_b = this.field) === null || _b === void 0 ? void 0 : _b.default_value}"
151
+ >
152
+ ${this.renderFieldLabel(label, help_text)}
153
+ </repeatable-number-field>
154
154
  `;
155
155
  case FieldTypes.SCALE_TYPE:
156
- return html `
157
- <repeatable-scale-field
158
- class="${isWide ? 'wide' : ''}"
159
- .options="${this.options}"
160
- ?is-readonly="${this.readonly}"
161
- ?required="${required}"
162
- .placeholder="${placeholder}"
163
- .value="${this.value}"
164
- .validators="${this.validations}"
165
- .errorMessage="${this.errorMessage}"
166
- .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
167
- >
168
- ${this.renderFieldLabel(label, help_text)}
169
- </repeatable-scale-field>
156
+ return html `
157
+ <repeatable-scale-field
158
+ class="${isWide ? 'wide' : ''}"
159
+ .options="${this.options}"
160
+ ?is-readonly="${this.readonly}"
161
+ ?required="${required}"
162
+ .placeholder="${placeholder}"
163
+ .value="${this.value}"
164
+ .validators="${this.validations}"
165
+ .errorMessage="${this.errorMessage}"
166
+ .defaultValue="${(_c = this.field) === null || _c === void 0 ? void 0 : _c.default_value}"
167
+ >
168
+ ${this.renderFieldLabel(label, help_text)}
169
+ </repeatable-scale-field>
170
170
  `;
171
171
  case FieldTypes.FILE_TYPE:
172
- return html `
173
- <repeatable-attachments-field
174
- ?is-readonly="${this.readonly}"
175
- ?required="${required}"
176
- .placeholder="${placeholder}"
177
- .value="${this.value}"
178
- .validators="${this.validations}"
179
- .errorMessage="${this.errorMessage}"
180
- .computedPath="${this.computedPath}"
181
- >
182
- ${this.renderFieldLabel(label, help_text)}
183
- </repeatable-attachments-field>
172
+ return html `
173
+ <repeatable-attachments-field
174
+ ?is-readonly="${this.readonly}"
175
+ ?required="${required}"
176
+ .placeholder="${placeholder}"
177
+ .value="${this.value}"
178
+ .validators="${this.validations}"
179
+ .errorMessage="${this.errorMessage}"
180
+ .computedPath="${this.computedPath}"
181
+ >
182
+ ${this.renderFieldLabel(label, help_text)}
183
+ </repeatable-attachments-field>
184
184
  `;
185
185
  default:
186
186
  console.warn(`FormBuilderGroup: Unknown field type: ${input_type}`);
@@ -188,11 +188,11 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
188
188
  }
189
189
  }
190
190
  renderFieldLabel(label, helperText) {
191
- return html `
192
- <div class="layout vertical question-container">
193
- <div class="question-text">${label}</div>
194
- <div class="question-details">${helperText}</div>
195
- </div>
191
+ return html `
192
+ <div class="layout vertical question-container">
193
+ <div class="question-text">${label}</div>
194
+ <div class="question-details">${helperText}</div>
195
+ </div>
196
196
  `;
197
197
  }
198
198
  static get styles() {
@@ -200,29 +200,29 @@ let FieldRendererComponent = class FieldRendererComponent extends LitElement {
200
200
  return [
201
201
  FlexLayoutClasses,
202
202
  FormBuilderCardStyles,
203
- css `
204
- .additional-field {
205
- padding-top: 15px;
206
- padding-bottom: 20px;
207
- background-color: var(--secondary-background-color);
208
- }
209
- .wide-field-container {
210
- padding-bottom: 10px;
211
- }
212
- .wide-field-container .question-container {
213
- min-height: 0;
214
- padding: 7px 0 0;
215
- }
216
- .wide-field-container .question-text {
217
- color: var(--secondary-text-color);
218
- font-weight: 400;
219
- }
220
-
221
- @media print {
222
- :host {
223
- break-inside: avoid;
224
- }
225
- }
203
+ css `
204
+ .additional-field {
205
+ padding-top: 15px;
206
+ padding-bottom: 20px;
207
+ background-color: var(--secondary-background-color);
208
+ }
209
+ .wide-field-container {
210
+ padding-bottom: 10px;
211
+ }
212
+ .wide-field-container .question-container {
213
+ min-height: 0;
214
+ padding: 7px 0 0;
215
+ }
216
+ .wide-field-container .question-text {
217
+ color: var(--secondary-text-color);
218
+ font-weight: 400;
219
+ }
220
+
221
+ @media print {
222
+ :host {
223
+ break-inside: avoid;
224
+ }
225
+ }
226
226
  `
227
227
  ];
228
228
  }
package/dist/form-fields/repeatable-fields/repeatable-attachment-field.js CHANGED
@@ -24,55 +24,55 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
24
24
  render() {
25
25
  var _a;
26
26
  const values = this.getValues();
27
- return html `
28
- <div class="finding-container">
29
- <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
30
- <div class="question-control layout vertical center-justified start">
27
+ return html `
28
+ <div class="finding-container">
29
+ <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
30
+ <div class="question-control layout vertical center-justified start">
31
31
  ${values.map((value, index) => value
32
- ? html `
33
- <div class="layout horizontal file-container">
34
- <!-- File name component -->
35
- <div class="filename-container file-selector__filename">
36
- <etools-icon class="file-icon" name="attachment"></etools-icon>
37
- <span class="filename" title="${value.filename}">${value.filename}</span>
38
- </div>
39
-
40
- <!-- Download Button -->
41
- <etools-button
42
- class="neutral download-button file-selector__download"
43
- variant="text"
44
- ?hidden="${!value.url}"
45
- @click="${() => this.downloadFile(value)}"
46
- >
47
- <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
48
- ${getTranslation(this.language, 'DOWNLOAD')}
49
- </etools-button>
50
-
51
- <!-- Delete Button -->
52
- <etools-button
53
- variant="danger"
54
- class="file-selector__delete"
55
- ?hidden="${this.isReadonly}"
56
- @click="${() => this.removeControl(index)}"
57
- >
58
- ${getTranslation(this.language, 'DELETE')}
59
- </etools-button>
60
- </div>
32
+ ? html `
33
+ <div class="layout horizontal file-container">
34
+ <!-- File name component -->
35
+ <div class="filename-container file-selector__filename">
36
+ <etools-icon class="file-icon" name="attachment"></etools-icon>
37
+ <span class="filename" title="${value.filename}">${value.filename}</span>
38
+ </div>
39
+
40
+ <!-- Download Button -->
41
+ <etools-button
42
+ class="neutral download-button file-selector__download"
43
+ variant="text"
44
+ ?hidden="${!value.url}"
45
+ @click="${() => this.downloadFile(value)}"
46
+ >
47
+ <etools-icon name="cloud-download" class="dw-icon" slot="prefix"></etools-icon>
48
+ ${getTranslation(this.language, 'DOWNLOAD')}
49
+ </etools-button>
50
+
51
+ <!-- Delete Button -->
52
+ <etools-button
53
+ variant="danger"
54
+ class="file-selector__delete"
55
+ ?hidden="${this.isReadonly}"
56
+ @click="${() => this.removeControl(index)}"
57
+ >
58
+ ${getTranslation(this.language, 'DELETE')}
59
+ </etools-button>
60
+ </div>
61
61
  `
62
- : '')}
63
- <!-- Upload button -->
64
- <etools-upload-multi
65
- class="with-padding"
66
- activate-offline
67
- ?hidden="${this.isReadonly}"
68
- @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
69
- .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
70
- .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
71
- >
72
- </etools-upload-multi>
73
- <div ?hidden="${!this.isReadonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length)}">—</div>
74
- </div>
75
- </div>
62
+ : '')}
63
+ <!-- Upload button -->
64
+ <etools-upload-multi
65
+ class="with-padding"
66
+ activate-offline
67
+ ?hidden="${this.isReadonly}"
68
+ @upload-finished="${({ detail }) => this.attachmentsUploaded(detail)}"
69
+ .endpointInfo="${{ endpoint: this.uploadUrl, extraInfo: { composedPath: this.computedPath } }}"
70
+ .jwtLocalStorageKey="${this.jwtLocalStorageKey}"
71
+ >
72
+ </etools-upload-multi>
73
+ <div ?hidden="${!this.isReadonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length)}">—</div>
74
+ </div>
75
+ </div>
76
76
  `;
77
77
  }
78
78
  controlTemplate() {
@@ -135,70 +135,70 @@ let RepeatableAttachmentField = class RepeatableAttachmentField extends Repeatab
135
135
  ...RepeatableBaseField.styles,
136
136
  SharedStyles,
137
137
  AttachmentsStyles,
138
- css `
139
- .file-selector__type-dropdown {
140
- flex-basis: 25%;
141
- padding-left: 8px;
142
- padding-right: 8px;
143
- }
144
-
145
- .file-selector__filename {
146
- flex-basis: 35%;
147
- }
148
-
149
- .file-selector__download {
150
- flex-basis: 10%;
151
- }
152
-
153
- .file-selector__delete {
154
- flex-basis: 10%;
155
- }
156
-
157
- .file-selector-container.with-type-dropdown {
158
- flex-wrap: nowrap;
159
- }
160
-
161
- .popup-container {
162
- padding: 12px 12px 0;
163
- }
164
-
165
- .file-container {
166
- padding: 8px 0;
167
- }
168
-
169
- @media (max-width: 380px) {
170
- .file-selector-container.with-type-dropdown {
171
- justify-content: center;
172
- }
173
-
174
- .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
175
- flex-basis: 90%;
176
- }
177
-
178
- .file-selector__filename {
179
- flex-basis: 90%;
180
- }
181
-
182
- .file-selector__download {
183
- flex-basis: 5%;
184
- }
185
-
186
- .file-selector__delete {
187
- flex-basis: 5%;
188
- }
189
- }
190
-
191
- @media (max-width: 600px) {
192
- etools-dropdown {
193
- padding: 0;
194
- }
195
-
196
- .file-selector-container.with-type-dropdown {
197
- border-bottom: 1px solid lightgrey;
198
- flex-wrap: wrap;
199
- padding-bottom: 10px;
200
- }
201
- }
138
+ css `
139
+ .file-selector__type-dropdown {
140
+ flex-basis: 25%;
141
+ padding-left: 8px;
142
+ padding-right: 8px;
143
+ }
144
+
145
+ .file-selector__filename {
146
+ flex-basis: 35%;
147
+ }
148
+
149
+ .file-selector__download {
150
+ flex-basis: 10%;
151
+ }
152
+
153
+ .file-selector__delete {
154
+ flex-basis: 10%;
155
+ }
156
+
157
+ .file-selector-container.with-type-dropdown {
158
+ flex-wrap: nowrap;
159
+ }
160
+
161
+ .popup-container {
162
+ padding: 12px 12px 0;
163
+ }
164
+
165
+ .file-container {
166
+ padding: 8px 0;
167
+ }
168
+
169
+ @media (max-width: 380px) {
170
+ .file-selector-container.with-type-dropdown {
171
+ justify-content: center;
172
+ }
173
+
174
+ .file-selector-container.with-type-dropdown etools-dropdown.type-dropdown {
175
+ flex-basis: 90%;
176
+ }
177
+
178
+ .file-selector__filename {
179
+ flex-basis: 90%;
180
+ }
181
+
182
+ .file-selector__download {
183
+ flex-basis: 5%;
184
+ }
185
+
186
+ .file-selector__delete {
187
+ flex-basis: 5%;
188
+ }
189
+ }
190
+
191
+ @media (max-width: 600px) {
192
+ etools-dropdown {
193
+ padding: 0;
194
+ }
195
+
196
+ .file-selector-container.with-type-dropdown {
197
+ border-bottom: 1px solid lightgrey;
198
+ flex-wrap: wrap;
199
+ padding-bottom: 10px;
200
+ }
201
+ }
202
202
  `
203
203
  ];
204
204
  }
package/dist/form-fields/repeatable-fields/repeatable-base-field.js CHANGED
@@ -19,23 +19,23 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
19
19
  }
20
20
  render() {
21
21
  const values = this.getValues();
22
- return html `
23
- <div class="finding-container">
24
- <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
25
- <div class="question-control layout vertical center-justified start">
26
- ${values.map((value, index) => html `<div class="layout horizontal center full-width">
27
- ${this.controlTemplate(value, index)}
28
- <etools-icon-button
29
- name="close"
30
- ?hidden="${this.isReadonly || values.length < 2}"
31
- @click="${() => this.removeControl(index)}"
32
- ></etools-icon-button>
33
- </div>`)}
34
- <etools-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
35
- ${getTranslation(this.language, 'ADD')}
36
- </etools-button>
37
- </div>
38
- </div>
22
+ return html `
23
+ <div class="finding-container">
24
+ <div class="question layout start"><slot>${this.questionTemplate()}</slot></div>
25
+ <div class="question-control layout vertical center-justified start">
26
+ ${values.map((value, index) => html `<div class="layout horizontal center full-width">
27
+ ${this.controlTemplate(value, index)}
28
+ <etools-icon-button
29
+ name="close"
30
+ ?hidden="${this.isReadonly || values.length < 2}"
31
+ @click="${() => this.removeControl(index)}"
32
+ ></etools-icon-button>
33
+ </div>`)}
34
+ <etools-button variant="primary" class="add-button" ?hidden="${this.isReadonly}" @click="${this.addNewField}">
35
+ ${getTranslation(this.language, 'ADD')}
36
+ </etools-button>
37
+ </div>
38
+ </div>
39
39
  `;
40
40
  }
41
41
  questionTemplate() {
@@ -104,11 +104,11 @@ export class RepeatableBaseField extends AbstractFieldBaseClass {
104
104
  // language=CSS
105
105
  return [
106
106
  ...AbstractFieldBaseClass.styles,
107
- css `
108
- :host(:not([is-readonly])) .question-control,
109
- :host(:not([is-readonly])) .question {
110
- padding-bottom: 10px;
111
- }
107
+ css `
108
+ :host(:not([is-readonly])) .question-control,
109
+ :host(:not([is-readonly])) .question {
110
+ padding-bottom: 10px;
111
+ }
112
112
  `
113
113
  ];
114
114
  }