impaktapps-ui-builder 0.0.382-alpha.21 → 0.0.382-alpha.210

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 (31) hide show
  1. package/dist/impaktapps-ui-builder.es.js +1379 -1239
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +12 -12
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/dist/src/impaktapps-ui-builder/builder/build/uischema/apiSection.d.ts +0 -18
  6. package/dist/src/impaktapps-ui-builder/builder/build/uischema/coreSection.d.ts +18 -15
  7. package/dist/src/impaktapps-ui-builder/builder/build/uischema/eventSection.d.ts +121 -70
  8. package/dist/src/impaktapps-ui-builder/builder/build/uischema/tableSection.d.ts +102 -53
  9. package/dist/src/impaktapps-ui-builder/builder/build/uischema/validationSections.d.ts +2 -17
  10. package/dist/src/impaktapps-ui-builder/builder/build/uischema/valueTab.d.ts +2 -17
  11. package/dist/src/impaktapps-ui-builder/builder/services/event.d.ts +1 -1
  12. package/dist/src/impaktapps-ui-builder/builder/services/pageMaster.d.ts +4 -2
  13. package/package.json +1 -1
  14. package/src/impaktapps-ui-builder/builder/build/uischema/apiSection.ts +26 -28
  15. package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +25 -24
  16. package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts +36 -16
  17. package/src/impaktapps-ui-builder/builder/build/uischema/dateInputField.ts +6 -1
  18. package/src/impaktapps-ui-builder/builder/build/uischema/emptyBox.ts +1 -1
  19. package/src/impaktapps-ui-builder/builder/build/uischema/eventSection.ts +51 -78
  20. package/src/impaktapps-ui-builder/builder/build/uischema/multiSelect.ts +1 -1
  21. package/src/impaktapps-ui-builder/builder/build/uischema/selectInputField.ts +6 -1
  22. package/src/impaktapps-ui-builder/builder/build/uischema/tableSection.ts +56 -84
  23. package/src/impaktapps-ui-builder/builder/build/uischema/textInputField.ts +6 -1
  24. package/src/impaktapps-ui-builder/builder/build/uischema/validationSections.ts +12 -12
  25. package/src/impaktapps-ui-builder/builder/build/uischema/valueTab.ts +12 -12
  26. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +266 -344
  27. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +532 -360
  28. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts +284 -415
  29. package/src/impaktapps-ui-builder/builder/services/component.ts +3 -3
  30. package/src/impaktapps-ui-builder/builder/services/event.ts +8 -8
  31. package/src/impaktapps-ui-builder/builder/services/pageMaster.ts +18 -6
@@ -8,7 +8,12 @@ const EmptyBox = {
8
8
  widget: "EmptyBox",
9
9
  },
10
10
  config: {
11
- layout: { xs: 0, sm: 4, md: 4, lg: 4 },
11
+ layout: {
12
+ xs: 11,
13
+ sm: 11,
14
+ md: 5.5,
15
+ lg: 5.5,
16
+ },
12
17
  main: {
13
18
 
14
19
  },
@@ -133,7 +138,12 @@ const getInputField = (scope: String, label: String) => {
133
138
  widget: "InputField",
134
139
  },
135
140
  config: {
136
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
141
+ layout: {
142
+ xs: 11,
143
+ sm: 11,
144
+ md: 5.5,
145
+ lg: 5.5,
146
+ },
137
147
  main: {
138
148
  label: label,
139
149
  },
@@ -150,7 +160,12 @@ const getRadioInputField = (scope: String, label: String, options: string[]) =>
150
160
  widget: "RadioInputField",
151
161
  },
152
162
  config: {
153
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
163
+ layout: {
164
+ xs: 11,
165
+ sm: 11,
166
+ md: 5.5,
167
+ lg: 5.5,
168
+ },
154
169
  main: {
155
170
  label: label,
156
171
 
@@ -201,7 +216,7 @@ export const getSelectField = (scope: string, label: string, options: { label: s
201
216
  widget: "SelectInputField",
202
217
  },
203
218
  config: {
204
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
219
+ layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
205
220
  main: {
206
221
  label: label,
207
222
  type: "text",
@@ -226,8 +241,6 @@ export const buildPropertiesSection = function (type: String) {
226
241
  getInputField("elevation", "Card Elevation"),
227
242
  getInputField("height", "Grid height"),
228
243
  getInputField("justifyContent", "justifyContent"),
229
- EmptyBox,
230
- EmptyBox,
231
244
  cardLayout,
232
245
  ]
233
246
  break;
@@ -241,7 +254,7 @@ export const buildPropertiesSection = function (type: String) {
241
254
  { label: "Horizontal", value: "horizontal" },
242
255
  { label: "Vertical", value: "vertical" },
243
256
  ]),
244
- EmptyBox,
257
+
245
258
  getArrayControl("sectionLabels", "label")
246
259
 
247
260
  ]
@@ -258,15 +271,13 @@ export const buildPropertiesSection = function (type: String) {
258
271
  uiSchema.elements = [
259
272
  getInputField("placeholder", "Placeholder"),
260
273
  EmptyBox,
261
- EmptyBox,
262
274
  getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
263
275
  ]
264
276
  break;
265
277
  case "TextArea":
266
278
  uiSchema.elements = [
267
279
  getInputField("placeholder", "Placeholder"),
268
- EmptyBox,
269
- EmptyBox]
280
+ EmptyBox,]
270
281
  break;
271
282
 
272
283
  case "SpeedoMeter":
@@ -275,8 +286,7 @@ export const buildPropertiesSection = function (type: String) {
275
286
  getInputField("heading", "Container Heading"),
276
287
  getInputField("heading", "Container Heading"),
277
288
  getInputField("speedoCaption", "Speedometer Caption"),
278
- getInputField("width", "Speedometer Width"),
279
- EmptyBox
289
+ getInputField("width", "Speedometer Width")
280
290
  ]
281
291
  break;
282
292
  case "RankCard":
@@ -284,10 +294,7 @@ export const buildPropertiesSection = function (type: String) {
284
294
  getInputField("rank", "Rank"),
285
295
  getInputField("image", "Image Url"),
286
296
  getInputField("title", "Card Title"),
287
- getInputField("description", "Card Description"),
288
- EmptyBox,
289
- EmptyBox
290
- ];
297
+ getInputField("description", "Card Description")];
291
298
  break;
292
299
  case "LeaderBoard":
293
300
  uiSchema.elements = [
@@ -295,8 +302,6 @@ export const buildPropertiesSection = function (type: String) {
295
302
  getInputField("firstImage", "First Image url"),
296
303
  getInputField("secondImage", "Second Image url"),
297
304
  getInputField("thirdImage", "Third Image url"),
298
- EmptyBox,
299
- EmptyBox,
300
305
  getTextArea("functionCode", "Write Compare Code", false)
301
306
  ];
302
307
  break;
@@ -310,9 +315,7 @@ export const buildPropertiesSection = function (type: String) {
310
315
  getInputField("heading", "Heading"),
311
316
  getInputField("bottomLabel_1", "First BottomLabel"),
312
317
  getInputField("bottomLabel_2", "Second BottomLabel"),
313
- getInputField("bottomLabel_3", "Third BottomLabel"),
314
- EmptyBox,
315
- EmptyBox
318
+ getInputField("bottomLabel_3", "Third BottomLabel")
316
319
  ];
317
320
  break;
318
321
  case "card":
@@ -355,7 +358,7 @@ export const buildPropertiesSection = function (type: String) {
355
358
  ];
356
359
  break;
357
360
  case "WrapperSection":
358
- uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox, EmptyBox]
361
+ uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox]
359
362
  break;
360
363
 
361
364
  case "TabSection":
@@ -385,13 +388,11 @@ export const buildPropertiesSection = function (type: String) {
385
388
  uiSchema.elements = [
386
389
  getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
387
390
  getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
388
- EmptyBox
389
391
  ]
390
392
  break;
391
393
  case "MultipleSelect":
392
394
  uiSchema.elements = [
393
395
  getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
394
- EmptyBox,
395
396
  EmptyBox
396
397
  ]
397
398
  break;
@@ -9,7 +9,7 @@ export const CoreSection = {
9
9
  widget: "SelectInputField",
10
10
  },
11
11
  config: {
12
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
12
+ layout: { xs: 12, sm: 12, md: 6, lg: 6 },
13
13
  main: {
14
14
  label: "Type",
15
15
  type: "text",
@@ -24,7 +24,12 @@ export const CoreSection = {
24
24
  widget: "InputField",
25
25
  },
26
26
  config: {
27
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
27
+ layout: {
28
+ xs: 12,
29
+ sm: 12,
30
+ md: 6,
31
+ lg: 6,
32
+ },
28
33
  main: {
29
34
  label: "Name",
30
35
  },
@@ -38,16 +43,31 @@ export const CoreSection = {
38
43
  widget: "InputField",
39
44
  },
40
45
  config: {
41
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
46
+ layout: {
47
+ xs: 12,
48
+ sm: 12,
49
+ md: 6,
50
+ lg: 6,
51
+ },
42
52
  main: {
43
53
  label: "Label",
44
54
  },
45
55
  },
46
56
  },
57
+ {
58
+ type: "Control",
59
+ scope: "#/properties/proc",
60
+ config: {
61
+ layout: { xs: 11, sm: 11, md: 6, lg: 6 },
62
+ },
63
+ options: {
64
+ widget: "EmptyBox",
65
+ },
66
+ },
47
67
  {
48
68
  type: "Control",
49
69
  scope: "#/properties/layout",
50
- layout: 12,
70
+ layout: 11.5,
51
71
  options: {
52
72
  "elementLabelProp": "key",
53
73
  detail: {
@@ -61,7 +81,12 @@ export const CoreSection = {
61
81
  widget: "SelectInputField",
62
82
  },
63
83
  config: {
64
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
84
+ layout: {
85
+ xs: 11,
86
+ sm: 11,
87
+ md: 5.5,
88
+ lg: 5.5,
89
+ },
65
90
  main: {
66
91
  label: "Screen Size",
67
92
 
@@ -76,7 +101,12 @@ export const CoreSection = {
76
101
  widget: "InputField",
77
102
  },
78
103
  config: {
79
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
104
+ layout: {
105
+ xs: 11,
106
+ sm: 11,
107
+ md: 5.5,
108
+ lg: 5.5,
109
+ },
80
110
  main: {
81
111
  label: "Value",
82
112
  type:"number",
@@ -86,16 +116,6 @@ export const CoreSection = {
86
116
  },
87
117
  },
88
118
  },
89
- {
90
- type: 'Control',
91
- scope: '#/properties/emptyBox',
92
- options: {
93
- widget: "EmptyBox"
94
- },
95
- config: {
96
- layout: {xs: 0, sm: 4}
97
- }
98
- }
99
119
  ],
100
120
  },
101
121
  },
@@ -6,7 +6,12 @@ export default {
6
6
  },
7
7
 
8
8
  config: {
9
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
9
+ layout: {
10
+ xs: 11,
11
+ sm: 11,
12
+ md: 5.5,
13
+ lg: 5.5,
14
+ },
10
15
  main: {
11
16
  label: "",
12
17
  type: "date",
@@ -6,7 +6,7 @@ export default {
6
6
  },
7
7
 
8
8
  config: {
9
- layout: { xs: 0, sm: 4, md: 4, lg: 4 },
9
+ layout:{xs:12,sm:12,md:5.5,lg:5.5},
10
10
  main: {},
11
11
  style:{}
12
12
  },
@@ -1,58 +1,58 @@
1
1
  export const EventSection = {
2
2
  type: "HorizontalLayout",
3
3
  elements: [
4
- // {
5
- // type: "WrapperLayout",
6
- // config: {
7
- // main: {
8
- // // label: "Table Columns",
9
- // divider: true,
10
- // },
11
- // wrapperStyle: {
12
- // border:"1px solid gray"
13
- // },
14
- // },
15
- // elements: [
16
- // {
17
- // type: "Control",
18
- // scope: "#/properties/programType",
4
+ {
5
+ type: "WrapperLayout",
6
+ config: {
7
+ main: {
8
+ // label: "Table Columns",
9
+ divider: true,
10
+ },
11
+ wrapperStyle: {
12
+ border:"1px solid gray"
13
+ },
14
+ },
15
+ elements: [
16
+ {
17
+ type: "Control",
18
+ scope: "#/properties/programType",
19
19
 
20
- // options: {
21
- // widget: "Box",
22
- // },
23
- // config: {
24
- // layout: 8,
25
- // main: {
26
- // heading: "Event Table",
27
- // },
28
- // style: {
29
- // fontFamily: "Roboto",
30
- // fontWeight: "500",
31
- // paddingLeft:"-10px",
32
- // fontSize: "20px",},
33
- // },
34
- // },
35
- // {
36
- // type: "Control",
37
- // scope: "#/properties/Back_Button",
20
+ options: {
21
+ widget: "Box",
22
+ },
23
+ config: {
24
+ layout: 8,
25
+ main: {
26
+ heading: "Event Table",
27
+ },
28
+ style: {
29
+ fontFamily: "Roboto",
30
+ fontWeight: "500",
31
+ paddingLeft:"-10px",
32
+ fontSize: "20px",},
33
+ },
34
+ },
35
+ {
36
+ type: "Control",
37
+ scope: "#/properties/Back_Button",
38
38
 
39
- // options: {
40
- // widget: "IconButton",
41
- // },
42
- // config: {
43
- // layout: 3,
44
- // main: {
45
- // icon: "AddIcon",
46
- // styleDefault: true,
47
- // size: "small",
48
- // onClick: "eventAddHandler",
49
- // tooltipMessage: "Back",
50
- // },
51
- // style: {
52
- // float: "right",
53
- // },
54
- // },
55
- // },
39
+ options: {
40
+ widget: "IconButton",
41
+ },
42
+ config: {
43
+ layout: 3,
44
+ main: {
45
+ icon: "AddIcon",
46
+ styleDefault: true,
47
+ size: "small",
48
+ onClick: "eventAddHandler",
49
+ tooltipMessage: "Back",
50
+ },
51
+ style: {
52
+ float: "right",
53
+ },
54
+ },
55
+ },
56
56
  {
57
57
  type: "Control",
58
58
  scope: "#/properties/events",
@@ -61,33 +61,6 @@ export const EventSection = {
61
61
  },
62
62
  config: {
63
63
  main: {
64
- headerIcons: {
65
- elements: [
66
- {
67
- widget: {
68
- type: "Control",
69
- scope: "#/properties/New_Record",
70
-
71
- options: {
72
- widget: "IconButton",
73
- },
74
- config: {
75
- main: {
76
- color: "info",
77
- onClick: "eventAddHandler",
78
- size: "small",
79
- icon: "AddIcon",
80
- iconLabel: "Add New",
81
- styleDefault: true,
82
- },
83
- style: {
84
- mt: "6px",
85
- },
86
- },
87
- }
88
- },
89
- ]
90
- },
91
64
  disableAction: true,
92
65
  disableSelection: true,
93
66
  enableDrag: true,
@@ -151,7 +124,7 @@ export const EventSection = {
151
124
  },
152
125
  ]
153
126
  }]}
154
- // ]}
127
+ ]}
155
128
 
156
129
  export const EventSectionSchema = {
157
130
  events: {
@@ -6,7 +6,7 @@ export default {
6
6
  widget: "MultipleSelect",
7
7
  },
8
8
  config: {
9
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
9
+ layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
10
10
  main: {
11
11
  label: "",
12
12
  type: "text",
@@ -6,7 +6,12 @@ export default {
6
6
  widget: "SelectInputField",
7
7
  },
8
8
  config: {
9
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
9
+ "layout": {
10
+ "xs": 11,
11
+ "sm": 11,
12
+ "md": 5.5,
13
+ "lg": 5.5
14
+ },
10
15
  main: {
11
16
  label: "",
12
17
  type: "text",
@@ -1,58 +1,58 @@
1
1
  export const TableSection = {
2
2
  type: "HorizontalLayout",
3
3
  elements: [
4
- // {
5
- // type: "WrapperLayout",
6
- // config: {
7
- // main: {
8
- // // label: "Table Columns",
9
- // // divider: true,
10
- // },
11
- // wrapperStyle: {
12
- // border:"1px solid gray"
13
- // },
14
- // },
15
- // elements: [
16
- // {
17
- // type: "Control",
18
- // scope: "#/properties/programType",
19
-
20
- // options: {
21
- // widget: "Box",
22
- // },
23
- // config: {
24
- // layout: 8,
25
- // main: {
26
- // heading: "Components Table",
27
- // },
28
- // style: {
29
- // fontFamily: "Roboto",
30
- // fontWeight: "500",
31
- // paddingLeft:"-10px",
32
- // fontSize: "20px",},
33
- // },
34
- // },
35
- // {
36
- // type: "Control",
37
- // scope: "#/properties/Back_Button",
38
-
39
- // options: {
40
- // widget: "IconButton",
41
- // },
42
- // config: {
43
- // layout: 3,
44
- // main: {
45
- // icon: "AddIcon",
46
- // styleDefault: true,
47
- // size: "small",
48
- // onClick: "widgetAddClickHandler",
49
- // tooltipMessage: "Add New",
50
- // },
51
- // style: {
52
- // float: "right",
53
- // },
54
- // },
55
- // },
4
+ {
5
+ type: "WrapperLayout",
6
+ config: {
7
+ main: {
8
+ // label: "Table Columns",
9
+ // divider: true,
10
+ },
11
+ wrapperStyle: {
12
+ border:"1px solid gray"
13
+ },
14
+ },
15
+ elements: [
16
+ {
17
+ type: "Control",
18
+ scope: "#/properties/programType",
19
+
20
+ options: {
21
+ widget: "Box",
22
+ },
23
+ config: {
24
+ layout: 8,
25
+ main: {
26
+ heading: "Components Table",
27
+ },
28
+ style: {
29
+ fontFamily: "Roboto",
30
+ fontWeight: "500",
31
+ paddingLeft:"-10px",
32
+ fontSize: "20px",},
33
+ },
34
+ },
35
+ {
36
+ type: "Control",
37
+ scope: "#/properties/Back_Button",
38
+
39
+ options: {
40
+ widget: "IconButton",
41
+ },
42
+ config: {
43
+ layout: 3,
44
+ main: {
45
+ icon: "AddIcon",
46
+ styleDefault: true,
47
+ size: "small",
48
+ onClick: "widgetAddClickHandler",
49
+ tooltipMessage: "Add New",
50
+ },
51
+ style: {
52
+ float: "right",
53
+ },
54
+ },
55
+ },
56
56
  {
57
57
  type: "Control",
58
58
  scope: "#/properties/elements",
@@ -61,40 +61,13 @@ export const TableSection = {
61
61
  },
62
62
  config: {
63
63
  main: {
64
- headerIcons: {
65
- elements: [
66
- {
67
- widget: {
68
- type: "Control",
69
- scope: "#/properties/New_Record",
70
-
71
- options: {
72
- widget: "IconButton",
73
- },
74
- config: {
75
- main: {
76
- color: "info",
77
- onClick: "widgetAddClickHandler",
78
- size: "small",
79
- icon: "AddIcon",
80
- iconLabel: "Add New",
81
- styleDefault: true,
82
- },
83
- style: {
84
- mt: "6px",
85
- },
86
- },
87
- }
88
- },
89
- ]
90
- },
91
64
  disableAction: true,
92
65
  disableSelection: true,
93
66
  enableDrag: true,
94
-
67
+
95
68
  },
96
69
  },
97
- elements: [
70
+ elements:[
98
71
  {
99
72
  accessorKey: "name",
100
73
  header: "Name"
@@ -144,9 +117,8 @@ export const TableSection = {
144
117
  },
145
118
  }
146
119
  ]
147
- }]
148
- }
149
- // ]}
120
+ }]}
121
+ ]}
150
122
 
151
123
  export const TableSectionSchema = {
152
124
  columns: {
@@ -6,7 +6,12 @@ export default {
6
6
  widget: "InputField",
7
7
  },
8
8
  config: {
9
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
9
+ layout: {
10
+ xs: 11,
11
+ sm: 11,
12
+ md: 5.5,
13
+ lg: 5.5,
14
+ },
10
15
  main: {
11
16
  label: "",
12
17
  },
@@ -18,7 +18,12 @@ export const ValidationSection = {
18
18
  widget: "SelectInputField",
19
19
  },
20
20
  config: {
21
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
21
+ layout: {
22
+ xs: 11,
23
+ sm: 11,
24
+ md: 5.5,
25
+ lg: 5.5,
26
+ },
22
27
  main: {
23
28
  label: "Validation Type",
24
29
  },
@@ -32,21 +37,16 @@ export const ValidationSection = {
32
37
  widget: "InputField",
33
38
  },
34
39
  config: {
35
- layout: { xs: 11, sm: 4, md: 4, lg: 4 },
40
+ layout: {
41
+ xs: 11,
42
+ sm: 11,
43
+ md: 5.5,
44
+ lg: 5.5,
45
+ },
36
46
  main: {
37
47
  label: "Validation Value",
38
48
  },
39
49
  },
40
- },
41
- {
42
- type: "Control",
43
- scope: "#/properties/emptyBox",
44
- options: {
45
- widget: "EmptyBox"
46
- },
47
- config: {
48
- layout: {xs: 0, sm: 4}
49
- }
50
50
  }
51
51
  ],
52
52
  },