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

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