impaktapps-ui-builder 0.0.101-alpha.6 → 0.0.101-alpha.60

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 +971 -787
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +15 -15
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/dist/src/impaktapps-ui-builder/builder/build/uischema/apiSection.d.ts +62 -59
  6. package/dist/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.d.ts +17 -21
  7. package/dist/src/impaktapps-ui-builder/builder/build/uischema/coreSection.d.ts +98 -95
  8. package/dist/src/impaktapps-ui-builder/builder/build/uischema/eventSection.d.ts +26 -33
  9. package/dist/src/impaktapps-ui-builder/builder/build/uischema/refresh.d.ts +52 -38
  10. package/dist/src/impaktapps-ui-builder/builder/build/uischema/styleSection.d.ts +7 -8
  11. package/dist/src/impaktapps-ui-builder/builder/build/uischema/tableSection.d.ts +29 -33
  12. package/dist/src/impaktapps-ui-builder/builder/build/uischema/validationSections.d.ts +56 -37
  13. package/dist/src/impaktapps-ui-builder/builder/build/uischema/valueTab.d.ts +56 -36
  14. package/package.json +1 -1
  15. package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts +12 -10
  16. package/src/impaktapps-ui-builder/builder/build/uischema/apiSection.ts +111 -96
  17. package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +100 -94
  18. package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts +189 -110
  19. package/src/impaktapps-ui-builder/builder/build/uischema/eventSection.ts +39 -17
  20. package/src/impaktapps-ui-builder/builder/build/uischema/refresh.ts +44 -44
  21. package/src/impaktapps-ui-builder/builder/build/uischema/styleSection.ts +9 -13
  22. package/src/impaktapps-ui-builder/builder/build/uischema/tableSection.ts +40 -18
  23. package/src/impaktapps-ui-builder/builder/build/uischema/validationSections.ts +117 -48
  24. package/src/impaktapps-ui-builder/builder/build/uischema/valueTab.ts +113 -45
  25. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts +23 -23
  26. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +99 -41
  27. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +9 -8
  28. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.ts +12 -12
  29. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts +200 -289
  30. package/src/impaktapps-ui-builder/builder/services/component.ts +134 -33
  31. package/src/impaktapps-ui-builder/builder/services/event.ts +13 -14
package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts CHANGED
@@ -3,41 +3,59 @@ import { getSelectField } from "../../../build/uischema/buildPropertiesSection";
3
3
  export const EventUiSchema: any = (theme) => {
4
4
  const uiSchema = {
5
5
  type: "HorizontalLayout",
6
- heading: "Component",
6
+ heading: "Page-Events",
7
7
  elements: [
8
- {
9
- type: "Control",
10
- scope: "#/properties/pageName",
8
+ // {
9
+ // type: "Control",
10
+ // scope: "#/properties/pageName",
11
11
 
12
- options: {
13
- widget: "Box",
14
- },
15
- config: {
16
- layout: 12,
17
- main: {
18
- heading: " ",
19
- },
20
- style: {
21
- marginLeft: theme.spacing(3),
22
- width:"auto",
23
- fontSize:"12px",
24
- color:"gray",
25
- },
26
- },
27
- },
12
+ // options: {
13
+ // widget: "Box",
14
+ // },
15
+ // config: {
16
+ // layout: 12,
17
+ // main: {
18
+ // heading: " ",
19
+ // },
20
+ // style: {
21
+ // marginLeft: theme.spacing(3),
22
+ // width:"auto",
23
+ // fontSize:"12px",
24
+ // color:"gray",
25
+ // },
26
+ // },
27
+ // },
28
28
  {
29
29
  type: "TabLayout",
30
30
  config: {
31
31
  main: {
32
- tabLabels: ["Core", "Response Event"],
33
- defaultStyle: true,
32
+ tabLabels: ["Core", "Response Events"],
34
33
  id: "event"
35
34
  },
35
+ style: {
36
+ TabPanelStyle: {
37
+ padding: 0,
38
+ }
39
+ },
40
+ TabsStyle: {
41
+ marginBottom: "3px",
42
+ paddingBottom: "4px",
43
+ boxShadow: "0px 3px 4px #afafaf80",
44
+ "& .MuiTabs-indicator": {
45
+ bottom: "6px",
46
+ }
47
+ },
36
48
  },
37
49
 
38
50
  elements: [
39
51
  {
40
- type: "HorizontalLayout",
52
+ type: "WrapperLayout",
53
+ config: {
54
+ main: {
55
+ label: " ",
56
+ gap: "8px"
57
+ },
58
+ },
41
59
  elements: [
42
60
  {
43
61
  type: "Control",
@@ -47,9 +65,9 @@ export const EventUiSchema: any = (theme) => {
47
65
  widget: "SelectInputField",
48
66
  },
49
67
  config: {
50
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
68
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
51
69
  main: {
52
- label: "Event Type",
70
+ label: "Event's Type",
53
71
  type: "text",
54
72
 
55
73
  },
@@ -57,7 +75,7 @@ export const EventUiSchema: any = (theme) => {
57
75
  },
58
76
  getSelectField("Handler", "Handler", [
59
77
  { label: "Custom", value: "custom" },
60
- { label: "Api", value: "api" },
78
+ { label: "API", value: "api" },
61
79
  { label: "Inbuilt Function", value: "inBuiltFunction" },
62
80
  { label: "Refresh", value: "refresh" },
63
81
  ]),
@@ -68,7 +86,7 @@ export const EventUiSchema: any = (theme) => {
68
86
  widget: "EmptyBox",
69
87
  },
70
88
  config: {
71
- layout: { xs: 0, sm: 4, md: 4, lg: 4 },
89
+ layout: { xs: 0, sm: 0, md: 4, lg: 6 },
72
90
  },
73
91
  },
74
92
  ],
@@ -93,15 +111,20 @@ export const EventUiSchema: any = (theme) => {
93
111
  },
94
112
  config: {
95
113
  main: {
96
- // color: "info",
97
114
  onClick: "addEvent",
98
115
  size: "small",
99
- icon: "AddIcon",
100
- iconLabel: "Add New",
116
+ icon: "TableAddIcon",
117
+ iconLabel: "Add",
101
118
  styleDefault: true,
102
119
  },
103
120
  style: {
104
121
  mt: "6px",
122
+ color: "inherit",
123
+ fill: "inherit",
124
+ "&:hover": {
125
+ color: "inherit",
126
+ fill: "inherit",
127
+ }
105
128
  },
106
129
  },
107
130
  }
@@ -117,15 +140,20 @@ export const EventUiSchema: any = (theme) => {
117
140
  },
118
141
  config: {
119
142
  main: {
120
- // color: "info",
121
143
  onClick: "copyPasteElement",
122
144
  size: "small",
123
- icon: "PasteIcon",
145
+ icon: "TablePaste",
124
146
  iconLabel: "Paste",
125
147
  styleDefault: true,
126
148
  },
127
149
  style: {
128
150
  mt: "6px",
151
+ color: "inherit",
152
+ fill: "inherit",
153
+ "&:hover": {
154
+ color: "inherit",
155
+ fill: "inherit",
156
+ }
129
157
  },
130
158
  },
131
159
  }
@@ -142,15 +170,21 @@ export const EventUiSchema: any = (theme) => {
142
170
 
143
171
  {
144
172
  accessorKey: "eventType",
145
- header: "Event Type",
173
+ header: "Event's Type",
174
+ size: 300,
175
+ type: "string"
146
176
  },
147
177
  {
148
178
  accessorKey: "Handler",
149
179
  header: "Handler",
180
+ size: 200,
181
+ type: "string"
150
182
  },
151
183
  {
152
184
  accessorKey: "Edit_Approve_Records",
153
- header: "Edit Widget",
185
+ header: "Edit",
186
+ type: "action",
187
+ size: 150,
154
188
  widget: {
155
189
  type: "Control",
156
190
  scope: "#/properties/Edit_Records",
@@ -159,14 +193,16 @@ export const EventUiSchema: any = (theme) => {
159
193
  },
160
194
  config: {
161
195
  main: {
162
- color: "info",
163
196
  size: "small",
164
- icon: "EditIcon",
197
+ icon: "TableEditIcon",
165
198
  tooltipMessage: "Edit This Record",
166
199
  onClick: "editEvent",
167
200
  },
168
201
  style: {
169
- color: theme.palette.primary.main,
202
+ fill: theme.palette.primary.main,
203
+ "& :hover": {
204
+ fill: theme.palette.primary.dark,
205
+ },
170
206
  },
171
207
  },
172
208
  },
@@ -174,6 +210,8 @@ export const EventUiSchema: any = (theme) => {
174
210
  {
175
211
  accessorKey: "Reject_Records",
176
212
  header: "Delete",
213
+ type: "action",
214
+ size: 150,
177
215
  widget: {
178
216
  type: "Control",
179
217
  scope: "#/properties/RejectButton",
@@ -182,11 +220,16 @@ export const EventUiSchema: any = (theme) => {
182
220
  },
183
221
  config: {
184
222
  main: {
185
- icon: "RejectIcon",
186
- color: "error",
223
+ icon: "Bin",
187
224
  tooltipMessage: "Reject This Record",
188
225
  onClick: "deletePopUpEvent",
189
226
  },
227
+ style: {
228
+ fill: theme.palette.primary.main,
229
+ "& :hover": {
230
+ fill: theme.palette.primary.dark,
231
+ },
232
+ },
190
233
  },
191
234
  },
192
235
  },
@@ -194,7 +237,8 @@ export const EventUiSchema: any = (theme) => {
194
237
  {
195
238
  header: "Copy",
196
239
  field: "Copy_Event",
197
- flex: 1,
240
+ type: "action",
241
+ size: 150,
198
242
  widget: {
199
243
  type: "Control",
200
244
  scope: "#/properties/Copy_Event",
@@ -204,7 +248,6 @@ export const EventUiSchema: any = (theme) => {
204
248
  config: {
205
249
  main: {
206
250
  icon: "FileCopyIcon",
207
- // color: "error",
208
251
  onClick: "copyPasteElement",
209
252
  styleDefault: true,
210
253
  },
@@ -216,108 +259,118 @@ export const EventUiSchema: any = (theme) => {
216
259
  }
217
260
  ],
218
261
  },
219
- {
220
- type: "HorizontalLayout",
221
- config: {
222
- layout:{xs:12,sm: 6}
223
- },
224
- elements: [
262
+ // {
263
+ // type: "HorizontalLayout",
264
+ // config: {
265
+ // layout:{xs:12,sm: 6}
266
+ // },
267
+ // elements: [
268
+ // {
269
+ // type: "Control",
270
+ // scope: "#/properties/RemoveItemButton",
271
+ // options: {
272
+ // widget: "IconButton",
273
+ // },
274
+ // config: {
275
+ // layout: { xs: 1, sm: 1 },
276
+ // main: {
277
+ // onClick: "RemoveItemButton",
278
+ // size: "large",
279
+ // icon: "RejectIcon",
280
+ // styleDefault: true,
281
+ // },
282
+ // style:{
283
+ // marginLeft: "-10px"
284
+ // }
285
+ // },
286
+ // },
287
+ // {
288
+ // type: "Control",
289
+ // scope: "#/properties/copiedElementDetails",
290
+
291
+ // options: {
292
+ // widget: "Box",
293
+ // },
294
+ // config: {
295
+ // layout: { xs: 6, sm: 6 },
296
+ // main: {
297
+ // heading: "No element copied",
298
+ // },
299
+ // style: {
300
+ // color: "#535557",
301
+ // marginLeft: "-10px",
302
+ // fontSize: "12px",
303
+ // marginTop: "4px"
304
+ // },
305
+ // },
306
+ // },
307
+ // {
308
+ // type: "Control",
309
+ // scope: "#/properties/EmptyBox",
310
+ // options: {
311
+ // widget: "EmptyBox",
312
+ // },
313
+ // config: {
314
+ // layout: { xs: 1, sm: 5 },
315
+ // },
316
+ // },
317
+ // ]
318
+ // },
319
+ {
320
+ type: "WrapperLayout",
321
+ config: {
322
+ main: {
323
+ gap: "8px"
324
+ }
325
+ },
326
+ elements: [
225
327
  {
226
328
  type: "Control",
227
- scope: "#/properties/RemoveItemButton",
329
+ scope: "#/properties/btn",
228
330
  options: {
229
- widget: "IconButton",
331
+ widget: "Button",
230
332
  },
333
+
231
334
  config: {
232
- layout: { xs: 1, sm: 1 },
335
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
233
336
  main: {
234
- onClick: "RemoveItemButton",
235
- size: "large",
236
- icon: "RejectIcon",
237
- styleDefault: true,
337
+ name: "Ok",
338
+ variant: "contained",
339
+ type: "text",
340
+ onClick: "okHandler",
341
+ size: "medium",
238
342
  },
239
- style:{
240
- marginLeft: "-10px"
241
- }
242
343
  },
243
344
  },
244
345
  {
245
346
  type: "Control",
246
- scope: "#/properties/copiedElementDetails",
247
-
347
+ scope: "#/properties/btnSubmit",
248
348
  options: {
249
- widget: "Box",
349
+ widget: "Button",
250
350
  },
351
+
251
352
  config: {
252
- layout: { xs: 6, sm: 6 },
353
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
253
354
  main: {
254
- heading: "No element copied",
255
- },
256
- style: {
257
- color: "#535557",
258
- marginLeft: "-10px",
259
- fontSize: "12px",
260
- marginTop: "4px"
355
+ name: "Save & Exit",
356
+ variant: "contained",
357
+ type: "text",
358
+ onClick: "saveHandler",
359
+ size: "medium",
261
360
  },
262
361
  },
263
362
  },
264
363
  {
265
364
  type: "Control",
266
365
  scope: "#/properties/EmptyBox",
366
+ config: {
367
+ layout: { xs: 4, sm:7, md: 8, lg: 9 },
368
+ },
267
369
  options: {
268
370
  widget: "EmptyBox",
269
371
  },
270
- config: {
271
- layout: { xs: 1, sm: 5 },
272
- },
273
372
  },
274
- ]
275
- },
276
- {
277
- type: "Control",
278
- scope: "#/properties/btn",
279
- options: {
280
- widget: "Button",
281
- },
282
-
283
- config: {
284
- layout: { xs: 4, sm: 2 },
285
- main: {
286
- name: "Ok",
287
- startIcon: "ApproveIcon",
288
- variant: "contained",
289
- // color: "info",
290
- type: "text",
291
- onClick: "okHandler",
292
- size: "medium",
293
- },
294
- style: {
295
- float: "right",
296
- },
297
- },
298
- },
299
- {
300
- type: "Control",
301
- scope: "#/properties/btnSubmit",
302
- options: {
303
- widget: "Button",
304
- },
305
-
306
- config: {
307
- layout: { xs: 4, sm: 2 },
308
- main: {
309
- name: "Save & Exit",
310
- startIcon: "ApproveIcon",
311
- variant: "contained",
312
- // color: "info",
313
- type: "text",
314
- onClick: "saveHandler",
315
- size: "medium",
316
- },
317
- style: {
318
- float: "right",
319
- },
320
- },
373
+ ],
321
374
  },
322
375
  {
323
376
  type: "Control",
@@ -445,6 +498,31 @@ export const EventUiSchema: any = (theme) => {
445
498
  },
446
499
  ]
447
500
  },
501
+ {
502
+ type: "Control",
503
+ scope: "#/properties/pageName",
504
+
505
+ options: {
506
+ widget: "Box",
507
+ },
508
+ config: {
509
+ layout: 12,
510
+ main: {
511
+ heading: "",
512
+ },
513
+ style: {
514
+ paddingLeft: theme.spacing(3),
515
+ width:"100%",
516
+ fontSize:"10px",
517
+ color:theme.palette.grey[600],
518
+ position: "fixed",
519
+ bottom: "24px",
520
+ backgroundColor: theme.palette.background.default,
521
+ borderBottom: `1px solid ${theme.palette.common.black}29`,
522
+ borderTop: `1px solid ${theme.palette.common.black}29`,
523
+ },
524
+ },
525
+ },
448
526
  {
449
527
  type: "Control",
450
528
  scope: "#/properties/notify",
@@ -453,112 +531,6 @@ export const EventUiSchema: any = (theme) => {
453
531
  },
454
532
  layout: 6,
455
533
  },
456
- // {
457
- // type: "HorizontalLayout",
458
- // config: {
459
- // main: {
460
- // direction: 'row'
461
- // },
462
- // style: {
463
- // flexDirection: "row",
464
- // position: "absolute",
465
- // bottom: 0,
466
- // marginBottom: '-8px',
467
- // height: 'fit-content',
468
- // overflow: 'hidden',
469
- // zIndex: 1000,
470
- // width: 'inherit'
471
- // }
472
- // },
473
- // elements: [
474
- // {
475
-
476
- // type: "Control",
477
- // scope: "#/properties/FooterText",
478
- // options: {
479
- // widget: "Box",
480
- // },
481
- // config: {
482
- // main: {
483
- // heading: "Copywriter@ACT21.IO"
484
- // },
485
- // style: {
486
- // color: theme?.palette?.text.disabled || "#AFAFAF",
487
- // fontSize: '12px',
488
- // textAlign: 'center',
489
- // lineHeight: 2,
490
- // width: 'fit-content',
491
- // left: '50%',
492
- // position: 'relative',
493
- // margin: 0,
494
- // flexGrow: 1,
495
- // height: 0,
496
- // transform: "translate(-50%,0%)"
497
- // }
498
- // },
499
- // },
500
- // {
501
- // type: "Control",
502
- // scope: "#/properties/backIcon",
503
- // options: {
504
- // widget: "Box",
505
- // },
506
- // config: {
507
- // main: {
508
- // iconName: 'PrevIcon',
509
- // onClick: "backHandler",
510
- // width: 'fit-content',
511
- // },
512
- // style: {
513
- // fill: theme.palette.primary.main,
514
- // width: 20,
515
- // height: 0,
516
- // margin: 0,
517
- // top: 0,
518
- // right: {xs: '12px', sm: '84px'},
519
- // position: 'absolute',
520
- // fontSize: '12px',
521
- // cursor: 'pointer',
522
- // ':hover': {
523
- // fill: theme.palette.primary.dark,
524
- // }
525
- // }
526
- // }
527
- // },
528
- // {
529
- // type: "Control",
530
- // scope: "#/properties/text",
531
-
532
- // options: {
533
- // widget: "Box",
534
- // },
535
- // config: {
536
- // main: {
537
- // heading: "Previous Page",
538
- // onClick: "backHandler"
539
- // },
540
- // style: {
541
- // display: {xs: 'none', sm: "flex"},
542
- // textAlign: 'left',
543
- // lineHeight: 1,
544
- // height: 0,
545
- // width: 'fit-content',
546
- // color: theme.palette.primary.main,
547
- // fontSize: "12px",
548
- // cursor: 'pointer',
549
- // marginLeft: '2px',
550
- // marginRight: 0,
551
- // top: 3,
552
- // right: '12px',
553
- // position: 'absolute',
554
- // ':hover': {
555
- // color: theme.palette.primary.dark,
556
- // }
557
- // }
558
- // },
559
- // },
560
- // ]
561
- // }
562
534
  {
563
535
  type: "HorizontalLayout",
564
536
  config: {
@@ -568,7 +540,7 @@ export const EventUiSchema: any = (theme) => {
568
540
  style: {
569
541
  flexDirection: "row",
570
542
  position: "absolute",
571
- bottom: 0,
543
+ bottom: 10,
572
544
  height: "fit-content",
573
545
  overflow: "hidden",
574
546
  zIndex: 1000,
@@ -587,81 +559,20 @@ export const EventUiSchema: any = (theme) => {
587
559
  heading: "Copywriter@ACT21.IO",
588
560
  },
589
561
  style: {
590
- color: theme?.palette?.text?.disabled || "#AFAFAF",
562
+ color: theme?.palette?.text.disabled || "#AFAFAF",
591
563
  fontSize: "11px",
592
564
  textAlign: "center",
593
- lineHeight: 2,
565
+ lineHeight: 0,
594
566
  width: "fit-content",
595
567
  left: "50%",
596
568
  position: "relative",
597
- margin: 0,
569
+ margin: "revert",
598
570
  flexGrow: 1,
599
571
  height: 0,
600
572
  transform: "translate(-50%, 0%)",
601
573
  },
602
574
  },
603
575
  },
604
- {
605
- type: "Control",
606
- scope: "#/properties/FooterBackIcon",
607
- options: {
608
- widget: "Box",
609
- },
610
- config: {
611
- main: {
612
- iconName: "PrevIcon",
613
- onClick: "backHandler",
614
- width: "fit-content",
615
- },
616
- style: {
617
- fill: theme?.palette?.primary?.main,
618
- width: 20,
619
- height: 0,
620
- // margin: 0,
621
- top: 0,
622
- right: { xs: "12px", sm: "84px" },
623
- position: "absolute",
624
- fontSize: "12px",
625
- cursor: "pointer",
626
- ":hover": {
627
- fill: theme?.palette?.primary?.dark,
628
- },
629
- marginRight: "20px",
630
- },
631
- },
632
- },
633
- {
634
- type: "Control",
635
- scope: "#/properties/FooterBackHandlerText",
636
- options: {
637
- widget: "Box",
638
- },
639
- config: {
640
- main: {
641
- heading: "Previous Page",
642
- onClick: "backHandler",
643
- },
644
- style: {
645
- display: { xs: "none", sm: "flex" },
646
- textAlign: "left",
647
- lineHeight: 1,
648
- height: 0,
649
- width: "fit-content",
650
- color: theme?.palette?.primary?.main,
651
- fontSize: "12px",
652
- cursor: "pointer",
653
- marginLeft: "2px",
654
-
655
- top: 3,
656
- right: "12px",
657
- position: "absolute",
658
- ":hover": {
659
- color: theme?.palette?.primary?.dark,
660
- },
661
- marginRight: "4px",
662
- },
663
- },
664
- },
665
576
  ],
666
577
  }
667
578
  ],