@unicef-polymer/etools-form-builder 3.2.3 → 3.2.5

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 (41) 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 +100 -100
  5. package/dist/form-fields/field-renderer-component.js +198 -166
  6. package/dist/form-fields/index.d.ts +2 -0
  7. package/dist/form-fields/index.js +2 -0
  8. package/dist/form-fields/repeatable-fields/repeatable-attachment-field.js +111 -111
  9. package/dist/form-fields/repeatable-fields/repeatable-base-field.js +22 -22
  10. package/dist/form-fields/repeatable-fields/repeatable-choice-field.d.ts +15 -0
  11. package/dist/form-fields/repeatable-fields/repeatable-choice-field.js +123 -0
  12. package/dist/form-fields/repeatable-fields/repeatable-number-field.js +19 -19
  13. package/dist/form-fields/repeatable-fields/repeatable-scale-field.js +57 -57
  14. package/dist/form-fields/repeatable-fields/repeatable-text-field.js +19 -19
  15. package/dist/form-fields/single-fields/attachment-field.js +13 -13
  16. package/dist/form-fields/single-fields/boolean-field.js +16 -16
  17. package/dist/form-fields/single-fields/choice-field.d.ts +17 -0
  18. package/dist/form-fields/single-fields/choice-field.js +121 -0
  19. package/dist/form-fields/single-fields/number-field.js +20 -20
  20. package/dist/form-fields/single-fields/scale-field.js +58 -58
  21. package/dist/form-fields/single-fields/text-field.js +30 -30
  22. package/dist/form-groups/form-abstract-group.d.ts +2 -1
  23. package/dist/form-groups/form-abstract-group.js +130 -129
  24. package/dist/form-groups/form-card.js +30 -30
  25. package/dist/form-groups/form-collapsed-card.js +34 -34
  26. package/dist/lib/additional-components/confirmation-dialog.js +20 -20
  27. package/dist/lib/additional-components/etools-fb-card.js +144 -144
  28. package/dist/lib/styles/attachments.styles.js +61 -61
  29. package/dist/lib/styles/card-styles.js +147 -147
  30. package/dist/lib/styles/dialog.styles.js +83 -83
  31. package/dist/lib/styles/elevation-styles.js +46 -46
  32. package/dist/lib/styles/flex-layout-classes.js +316 -316
  33. package/dist/lib/styles/form-builder-card.styles.js +53 -53
  34. package/dist/lib/styles/page-layout-styles.js +198 -198
  35. package/dist/lib/styles/shared-styles.js +61 -61
  36. package/dist/lib/types/form-builder.types.d.ts +1 -1
  37. package/dist/rich-editor/rich-action.js +34 -34
  38. package/dist/rich-editor/rich-text.js +64 -64
  39. package/dist/rich-editor/rich-toolbar.js +125 -125
  40. package/dist/rich-editor/rich-viewer.js +21 -21
  41. package/package.json +52 -52
@@ -1,56 +1,56 @@
1
1
  import { css } from 'lit';
2
2
  // language=CSS
3
- export const FormBuilderCardStyles = css `
4
- .overall-finding {
5
- padding: 15px 25px 20px 45px;
6
- background-color: var(--secondary-background-color);
7
- }
8
- field-renderer {
9
- position: relative;
10
- display: block;
11
- border-bottom: 1px solid var(--light-divider-color);
12
- }
13
- field-renderer:last-of-type {
14
- border-bottom: none;
15
- }
16
- .attachments-button {
17
- color: var(--primary-color);
18
- font-weight: 500;
19
- }
20
- .attachments-button:focus {
21
- outline: 0;
22
- box-shadow: 0 0 5px 5px rgb(170 165 165 / 20%);
23
- background-color: rgba(170, 165, 165, 0.2);
24
- }
25
- .attachments-button etools-icon {
26
- margin-right: 8px;
27
- }
28
- .question-container {
29
- padding: 7px 0;
30
- padding-right: 10px;
31
- width: 100%;
32
- min-height: 57px;
33
- box-sizing: border-box;
34
- justify-content: center;
35
- }
36
- .question-text {
37
- font-weight: 500;
38
- font-size: var(--etools-font-size-14, 14px);
39
- color: var(--primary-text-color);
40
- }
41
- .question-details {
42
- font-size: var(--etools-font-size-12, 12px);
43
- }
44
-
45
- @media (max-width: 380px) {
46
- .overall-finding {
47
- padding: 5px;
48
- }
49
- }
50
-
51
- @media (max-width: 1080px) {
52
- .question-container {
53
- padding-right: 0;
54
- }
55
- }
3
+ export const FormBuilderCardStyles = css `
4
+ .overall-finding {
5
+ padding: 15px 25px 20px 45px;
6
+ background-color: var(--secondary-background-color);
7
+ }
8
+ field-renderer {
9
+ position: relative;
10
+ display: block;
11
+ border-bottom: 1px solid var(--light-divider-color);
12
+ }
13
+ field-renderer:last-of-type {
14
+ border-bottom: none;
15
+ }
16
+ .attachments-button {
17
+ color: var(--primary-color);
18
+ font-weight: 500;
19
+ }
20
+ .attachments-button:focus {
21
+ outline: 0;
22
+ box-shadow: 0 0 5px 5px rgb(170 165 165 / 20%);
23
+ background-color: rgba(170, 165, 165, 0.2);
24
+ }
25
+ .attachments-button etools-icon {
26
+ margin-right: 8px;
27
+ }
28
+ .question-container {
29
+ padding: 7px 0;
30
+ padding-right: 10px;
31
+ width: 100%;
32
+ min-height: 57px;
33
+ box-sizing: border-box;
34
+ justify-content: center;
35
+ }
36
+ .question-text {
37
+ font-weight: 500;
38
+ font-size: var(--etools-font-size-14, 14px);
39
+ color: var(--primary-text-color);
40
+ }
41
+ .question-details {
42
+ font-size: var(--etools-font-size-12, 12px);
43
+ }
44
+
45
+ @media (max-width: 380px) {
46
+ .overall-finding {
47
+ padding: 5px;
48
+ }
49
+ }
50
+
51
+ @media (max-width: 1080px) {
52
+ .question-container {
53
+ padding-right: 0;
54
+ }
55
+ }
56
56
  `;
@@ -1,201 +1,201 @@
1
1
  import { css } from 'lit';
2
2
  // language=CSS
3
- export const pageLayoutStyles = css `
4
- .page-content {
5
- margin: 24px 24px 0;
6
- }
7
-
8
- .page-content.filters {
9
- padding: 8px 24px;
10
- }
11
-
12
- .pr-25 {
13
- padding-right: 25px !important;
14
- }
15
- .pr-45 {
16
- padding-right: 45px !important;
17
- }
18
-
19
- .f1 {
20
- flex: 1;
21
- }
22
- .f2 {
23
- flex: 2;
24
- }
25
- .f3 {
26
- flex: 3;
27
- }
28
- .f4 {
29
- flex: 4;
30
- }
31
- .f5 {
32
- flex: 5;
33
- }
34
- .f6 {
35
- flex: 6;
36
- }
37
- .f7 {
38
- flex: 7;
39
- }
40
- .f8 {
41
- flex: 8;
42
- }
43
-
44
- .w4 {
45
- width: 4%;
46
- }
47
- .w5 {
48
- width: 5%;
49
- }
50
- .w7 {
51
- width: 7%;
52
- }
53
- .w8 {
54
- width: 8%;
55
- }
56
- .w9 {
57
- width: 9%;
58
- }
59
- .w10 {
60
- width: 10%;
61
- }
62
- .w13 {
63
- width: 13%;
64
- }
65
- .w14 {
66
- width: 14%;
67
- }
68
- .w15 {
69
- width: 15%;
70
- }
71
- .w16 {
72
- width: 16%;
73
- }
74
- .w17 {
75
- width: 17%;
76
- }
77
- .w18 {
78
- width: 18%;
79
- }
80
- .w20 {
81
- width: 20%;
82
- }
83
- .w25 {
84
- width: 25%;
85
- }
86
- .w30 {
87
- width: 30%;
88
- }
89
- .w35 {
90
- width: 35%;
91
- }
92
- .w45 {
93
- width: 45%;
94
- }
95
- .w40 {
96
- width: 40%;
97
- }
98
- .w50 {
99
- width: 50%;
100
- }
101
- .w60 {
102
- width: 60%;
103
- }
104
- .w65 {
105
- width: 65%;
106
- }
107
- .w70 {
108
- width: 70%;
109
- }
110
- .w75 {
111
- width: 75%;
112
- }
113
- .w80 {
114
- width: 80%;
115
- }
116
- .w90 {
117
- width: 90%;
118
- }
119
- .w95 {
120
- width: 95%;
121
- }
122
- .w96 {
123
- width: 96%;
124
- }
125
- .w100 {
126
- width: 100%;
127
- }
128
-
129
- .w30px {
130
- width: 30px;
131
- }
132
- .w35px {
133
- width: 35px;
134
- }
135
- .w40px {
136
- width: 40px;
137
- }
138
- .w45px {
139
- width: 45px;
140
- }
141
- .w50px {
142
- width: 50px;
143
- }
144
- .w60px {
145
- width: 60px;
146
- }
147
- .w65px {
148
- width: 65px;
149
- }
150
- .w80px {
151
- width: 80px;
152
- }
153
- .w90px {
154
- width: 90px;
155
- }
156
- .w100px {
157
- width: 100px;
158
- }
159
- .w110px {
160
- width: 110px;
161
- }
162
- .w120px {
163
- width: 120px;
164
- }
165
- .w130px {
166
- width: 130px;
167
- }
168
- .w140px {
169
- width: 140px;
170
- }
171
- .w150px {
172
- width: 150px;
173
- }
174
- .w160px {
175
- width: 160px;
176
- }
177
- .w180px {
178
- width: 180px;
179
- }
180
- .w200px {
181
- width: 200px;
182
- }
183
- .w210px {
184
- width: 210px;
185
- }
186
- .w300px {
187
- width: 300px;
188
- }
189
- .w310px {
190
- width: 310px;
191
- }
192
- .w330px {
193
- width: 330px;
194
- }
195
-
196
- @media (max-width: 768px) {
197
- .page-content {
198
- margin: 8px;
199
- }
200
- }
3
+ export const pageLayoutStyles = css `
4
+ .page-content {
5
+ margin: 24px 24px 0;
6
+ }
7
+
8
+ .page-content.filters {
9
+ padding: 8px 24px;
10
+ }
11
+
12
+ .pr-25 {
13
+ padding-right: 25px !important;
14
+ }
15
+ .pr-45 {
16
+ padding-right: 45px !important;
17
+ }
18
+
19
+ .f1 {
20
+ flex: 1;
21
+ }
22
+ .f2 {
23
+ flex: 2;
24
+ }
25
+ .f3 {
26
+ flex: 3;
27
+ }
28
+ .f4 {
29
+ flex: 4;
30
+ }
31
+ .f5 {
32
+ flex: 5;
33
+ }
34
+ .f6 {
35
+ flex: 6;
36
+ }
37
+ .f7 {
38
+ flex: 7;
39
+ }
40
+ .f8 {
41
+ flex: 8;
42
+ }
43
+
44
+ .w4 {
45
+ width: 4%;
46
+ }
47
+ .w5 {
48
+ width: 5%;
49
+ }
50
+ .w7 {
51
+ width: 7%;
52
+ }
53
+ .w8 {
54
+ width: 8%;
55
+ }
56
+ .w9 {
57
+ width: 9%;
58
+ }
59
+ .w10 {
60
+ width: 10%;
61
+ }
62
+ .w13 {
63
+ width: 13%;
64
+ }
65
+ .w14 {
66
+ width: 14%;
67
+ }
68
+ .w15 {
69
+ width: 15%;
70
+ }
71
+ .w16 {
72
+ width: 16%;
73
+ }
74
+ .w17 {
75
+ width: 17%;
76
+ }
77
+ .w18 {
78
+ width: 18%;
79
+ }
80
+ .w20 {
81
+ width: 20%;
82
+ }
83
+ .w25 {
84
+ width: 25%;
85
+ }
86
+ .w30 {
87
+ width: 30%;
88
+ }
89
+ .w35 {
90
+ width: 35%;
91
+ }
92
+ .w45 {
93
+ width: 45%;
94
+ }
95
+ .w40 {
96
+ width: 40%;
97
+ }
98
+ .w50 {
99
+ width: 50%;
100
+ }
101
+ .w60 {
102
+ width: 60%;
103
+ }
104
+ .w65 {
105
+ width: 65%;
106
+ }
107
+ .w70 {
108
+ width: 70%;
109
+ }
110
+ .w75 {
111
+ width: 75%;
112
+ }
113
+ .w80 {
114
+ width: 80%;
115
+ }
116
+ .w90 {
117
+ width: 90%;
118
+ }
119
+ .w95 {
120
+ width: 95%;
121
+ }
122
+ .w96 {
123
+ width: 96%;
124
+ }
125
+ .w100 {
126
+ width: 100%;
127
+ }
128
+
129
+ .w30px {
130
+ width: 30px;
131
+ }
132
+ .w35px {
133
+ width: 35px;
134
+ }
135
+ .w40px {
136
+ width: 40px;
137
+ }
138
+ .w45px {
139
+ width: 45px;
140
+ }
141
+ .w50px {
142
+ width: 50px;
143
+ }
144
+ .w60px {
145
+ width: 60px;
146
+ }
147
+ .w65px {
148
+ width: 65px;
149
+ }
150
+ .w80px {
151
+ width: 80px;
152
+ }
153
+ .w90px {
154
+ width: 90px;
155
+ }
156
+ .w100px {
157
+ width: 100px;
158
+ }
159
+ .w110px {
160
+ width: 110px;
161
+ }
162
+ .w120px {
163
+ width: 120px;
164
+ }
165
+ .w130px {
166
+ width: 130px;
167
+ }
168
+ .w140px {
169
+ width: 140px;
170
+ }
171
+ .w150px {
172
+ width: 150px;
173
+ }
174
+ .w160px {
175
+ width: 160px;
176
+ }
177
+ .w180px {
178
+ width: 180px;
179
+ }
180
+ .w200px {
181
+ width: 200px;
182
+ }
183
+ .w210px {
184
+ width: 210px;
185
+ }
186
+ .w300px {
187
+ width: 300px;
188
+ }
189
+ .w310px {
190
+ width: 310px;
191
+ }
192
+ .w330px {
193
+ width: 330px;
194
+ }
195
+
196
+ @media (max-width: 768px) {
197
+ .page-content {
198
+ margin: 8px;
199
+ }
200
+ }
201
201
  `;
@@ -1,64 +1,64 @@
1
1
  import { css } from 'lit';
2
2
  // language=CSS
3
- export const SharedStyles = css `
4
- :host {
5
- display: block;
6
- box-sizing: border-box;
7
- }
8
-
9
- *[hidden] {
10
- display: none !important;
11
- }
12
-
13
- h1,
14
- h2 {
15
- color: var(--primary-text-color);
16
- margin: 0;
17
- font-weight: normal;
18
- }
19
-
20
- h1 {
21
- text-transform: capitalize;
22
- font-size: var(--etools-font-size-24, 24px);
23
- }
24
-
25
- h2 {
26
- font-size: var(--etools-font-size-20, 20px);
27
- }
28
-
29
- a {
30
- color: var(--primary-color);
31
- text-underline: none;
32
- }
33
-
34
- section {
35
- padding: 18px 24px;
36
- background-color: var(--primary-background-color);
37
- }
38
-
39
- .toggle-button-control {
40
- display: flex;
41
- flex-direction: row;
42
- align-items: center;
43
- margin: 0 16px;
44
- align-self: center;
45
- padding: 18px 0 18px 10px;
46
- }
47
-
48
- .toggle-button-control span {
49
- padding: 0 12px;
50
- font-size: var(--etools-font-size-16, 16px);
51
- }
52
-
53
- .readonly {
54
- pointer-events: none;
55
- }
56
-
57
- pages-header-element {
58
- box-shadow: 1px -3px 9px 0 #000000;
59
- }
60
-
61
- .filters-section {
62
- padding: 0 30px;
63
- }
3
+ export const SharedStyles = css `
4
+ :host {
5
+ display: block;
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ *[hidden] {
10
+ display: none !important;
11
+ }
12
+
13
+ h1,
14
+ h2 {
15
+ color: var(--primary-text-color);
16
+ margin: 0;
17
+ font-weight: normal;
18
+ }
19
+
20
+ h1 {
21
+ text-transform: capitalize;
22
+ font-size: var(--etools-font-size-24, 24px);
23
+ }
24
+
25
+ h2 {
26
+ font-size: var(--etools-font-size-20, 20px);
27
+ }
28
+
29
+ a {
30
+ color: var(--primary-color);
31
+ text-underline: none;
32
+ }
33
+
34
+ section {
35
+ padding: 18px 24px;
36
+ background-color: var(--primary-background-color);
37
+ }
38
+
39
+ .toggle-button-control {
40
+ display: flex;
41
+ flex-direction: row;
42
+ align-items: center;
43
+ margin: 0 16px;
44
+ align-self: center;
45
+ padding: 18px 0 18px 10px;
46
+ }
47
+
48
+ .toggle-button-control span {
49
+ padding: 0 12px;
50
+ font-size: var(--etools-font-size-16, 16px);
51
+ }
52
+
53
+ .readonly {
54
+ pointer-events: none;
55
+ }
56
+
57
+ pages-header-element {
58
+ box-shadow: 1px -3px 9px 0 #000000;
59
+ }
60
+
61
+ .filters-section {
62
+ padding: 0 30px;
63
+ }
64
64
  `;
@@ -28,7 +28,7 @@ export type BlueprintField = {
28
28
  name: string;
29
29
  repeatable: boolean;
30
30
  required: boolean;
31
- input_type: 'text' | 'likert_scale' | 'bool' | 'number' | 'number-integer' | 'number-float' | 'file';
31
+ input_type: 'text' | 'likert_scale' | 'bool' | 'number' | 'number-integer' | 'number-float' | 'file' | 'multiple_choice';
32
32
  label: string;
33
33
  validations: string[];
34
34
  help_text: string;