impaktapps-ui-builder 0.0.101-alpha.7 → 0.0.101-alpha.70

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 (33) hide show
  1. package/dist/impaktapps-ui-builder.es.js +1046 -776
  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/dist/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.d.ts +6 -0
  15. package/dist/src/impaktapps-ui-builder/builder/services/event.d.ts +6 -0
  16. package/package.json +1 -1
  17. package/src/impaktapps-ui-builder/builder/build/buildUiSchema.ts +12 -10
  18. package/src/impaktapps-ui-builder/builder/build/uischema/apiSection.ts +111 -96
  19. package/src/impaktapps-ui-builder/builder/build/uischema/buildPropertiesSection.ts +100 -94
  20. package/src/impaktapps-ui-builder/builder/build/uischema/coreSection.ts +189 -110
  21. package/src/impaktapps-ui-builder/builder/build/uischema/eventSection.ts +39 -17
  22. package/src/impaktapps-ui-builder/builder/build/uischema/refresh.ts +44 -44
  23. package/src/impaktapps-ui-builder/builder/build/uischema/styleSection.ts +9 -13
  24. package/src/impaktapps-ui-builder/builder/build/uischema/tableSection.ts +40 -18
  25. package/src/impaktapps-ui-builder/builder/build/uischema/validationSections.ts +117 -48
  26. package/src/impaktapps-ui-builder/builder/build/uischema/valueTab.ts +113 -45
  27. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/schema.ts +23 -23
  28. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +98 -42
  29. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +9 -8
  30. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/schema.ts +15 -12
  31. package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts +177 -289
  32. package/src/impaktapps-ui-builder/builder/services/component.ts +131 -33
  33. package/src/impaktapps-ui-builder/builder/services/event.ts +167 -65
package/src/impaktapps-ui-builder/builder/elements/UiSchema/event/uiSchema.ts CHANGED
@@ -3,41 +3,39 @@ 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
8
  {
9
- type: "Control",
10
- scope: "#/properties/pageName",
11
-
12
- options: {
13
- widget: "Box",
14
- },
9
+ type: "TabLayout",
15
10
  config: {
16
- layout: 12,
17
11
  main: {
18
- heading: " ",
12
+ tabLabels: ["Core", "Response Events"],
13
+ id: "event"
19
14
  },
20
15
  style: {
21
- marginLeft: theme.spacing(3),
22
- width:"auto",
23
- fontSize:"12px",
24
- color:"gray",
16
+ TabPanelStyle: {
17
+ padding: 0,
18
+ }
25
19
  },
26
- },
27
- },
28
- {
29
- type: "TabLayout",
30
- config: {
31
- main: {
32
- tabLabels: ["Core", "Response Event"],
33
- defaultStyle: true,
34
- id: "event"
20
+ TabsStyle: {
21
+ marginBottom: "3px",
22
+ paddingBottom: "4px",
23
+ boxShadow: "0px 3px 4px #afafaf80",
24
+ "& .MuiTabs-indicator": {
25
+ bottom: "6px",
26
+ }
35
27
  },
36
28
  },
37
29
 
38
30
  elements: [
39
31
  {
40
- type: "HorizontalLayout",
32
+ type: "WrapperLayout",
33
+ config: {
34
+ main: {
35
+ label: " ",
36
+ gap: "8px"
37
+ },
38
+ },
41
39
  elements: [
42
40
  {
43
41
  type: "Control",
@@ -47,9 +45,9 @@ export const EventUiSchema: any = (theme) => {
47
45
  widget: "SelectInputField",
48
46
  },
49
47
  config: {
50
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
48
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
51
49
  main: {
52
- label: "Event Type",
50
+ label: "Event's Type",
53
51
  type: "text",
54
52
 
55
53
  },
@@ -57,7 +55,7 @@ export const EventUiSchema: any = (theme) => {
57
55
  },
58
56
  getSelectField("Handler", "Handler", [
59
57
  { label: "Custom", value: "custom" },
60
- { label: "Api", value: "api" },
58
+ { label: "API", value: "api" },
61
59
  { label: "Inbuilt Function", value: "inBuiltFunction" },
62
60
  { label: "Refresh", value: "refresh" },
63
61
  ]),
@@ -68,7 +66,7 @@ export const EventUiSchema: any = (theme) => {
68
66
  widget: "EmptyBox",
69
67
  },
70
68
  config: {
71
- layout: { xs: 0, sm: 4, md: 4, lg: 4 },
69
+ layout: { xs: 0, sm: 0, md: 4, lg: 6 },
72
70
  },
73
71
  },
74
72
  ],
@@ -93,15 +91,20 @@ export const EventUiSchema: any = (theme) => {
93
91
  },
94
92
  config: {
95
93
  main: {
96
- // color: "info",
97
94
  onClick: "addEvent",
98
95
  size: "small",
99
- icon: "AddIcon",
100
- iconLabel: "Add New",
96
+ icon: "TableAddIcon",
97
+ iconLabel: "Add",
101
98
  styleDefault: true,
102
99
  },
103
100
  style: {
104
101
  mt: "6px",
102
+ color: "inherit",
103
+ fill: "inherit",
104
+ "&:hover": {
105
+ color: "inherit",
106
+ fill: "inherit",
107
+ }
105
108
  },
106
109
  },
107
110
  }
@@ -117,15 +120,20 @@ export const EventUiSchema: any = (theme) => {
117
120
  },
118
121
  config: {
119
122
  main: {
120
- // color: "info",
121
123
  onClick: "copyPasteElement",
122
124
  size: "small",
123
- icon: "PasteIcon",
125
+ icon: "TablePaste",
124
126
  iconLabel: "Paste",
125
127
  styleDefault: true,
126
128
  },
127
129
  style: {
128
130
  mt: "6px",
131
+ color: "inherit",
132
+ fill: "inherit",
133
+ "&:hover": {
134
+ color: "inherit",
135
+ fill: "inherit",
136
+ }
129
137
  },
130
138
  },
131
139
  }
@@ -142,15 +150,21 @@ export const EventUiSchema: any = (theme) => {
142
150
 
143
151
  {
144
152
  accessorKey: "eventType",
145
- header: "Event Type",
153
+ header: "Event's Type",
154
+ size: 300,
155
+ type: "string"
146
156
  },
147
157
  {
148
158
  accessorKey: "Handler",
149
159
  header: "Handler",
160
+ size: 200,
161
+ type: "string"
150
162
  },
151
163
  {
152
164
  accessorKey: "Edit_Approve_Records",
153
- header: "Edit Widget",
165
+ header: "Edit",
166
+ type: "action",
167
+ size: 150,
154
168
  widget: {
155
169
  type: "Control",
156
170
  scope: "#/properties/Edit_Records",
@@ -159,14 +173,16 @@ export const EventUiSchema: any = (theme) => {
159
173
  },
160
174
  config: {
161
175
  main: {
162
- color: "info",
163
176
  size: "small",
164
- icon: "EditIcon",
177
+ icon: "TableEditIcon",
165
178
  tooltipMessage: "Edit This Record",
166
179
  onClick: "editEvent",
167
180
  },
168
181
  style: {
169
- color: theme.palette.primary.main,
182
+ fill: theme.palette.primary.main,
183
+ "& :hover": {
184
+ fill: theme.palette.primary.dark,
185
+ },
170
186
  },
171
187
  },
172
188
  },
@@ -174,6 +190,8 @@ export const EventUiSchema: any = (theme) => {
174
190
  {
175
191
  accessorKey: "Reject_Records",
176
192
  header: "Delete",
193
+ type: "action",
194
+ size: 150,
177
195
  widget: {
178
196
  type: "Control",
179
197
  scope: "#/properties/RejectButton",
@@ -182,11 +200,16 @@ export const EventUiSchema: any = (theme) => {
182
200
  },
183
201
  config: {
184
202
  main: {
185
- icon: "RejectIcon",
186
- color: "error",
203
+ icon: "Bin",
187
204
  tooltipMessage: "Reject This Record",
188
205
  onClick: "deletePopUpEvent",
189
206
  },
207
+ style: {
208
+ fill: theme.palette.primary.main,
209
+ "& :hover": {
210
+ fill: theme.palette.primary.dark,
211
+ },
212
+ },
190
213
  },
191
214
  },
192
215
  },
@@ -194,7 +217,8 @@ export const EventUiSchema: any = (theme) => {
194
217
  {
195
218
  header: "Copy",
196
219
  field: "Copy_Event",
197
- flex: 1,
220
+ type: "action",
221
+ size: 150,
198
222
  widget: {
199
223
  type: "Control",
200
224
  scope: "#/properties/Copy_Event",
@@ -204,7 +228,6 @@ export const EventUiSchema: any = (theme) => {
204
228
  config: {
205
229
  main: {
206
230
  icon: "FileCopyIcon",
207
- // color: "error",
208
231
  onClick: "copyPasteElement",
209
232
  styleDefault: true,
210
233
  },
@@ -216,108 +239,118 @@ export const EventUiSchema: any = (theme) => {
216
239
  }
217
240
  ],
218
241
  },
219
- {
220
- type: "HorizontalLayout",
221
- config: {
222
- layout:{xs:12,sm: 6}
223
- },
224
- elements: [
242
+ // {
243
+ // type: "HorizontalLayout",
244
+ // config: {
245
+ // layout:{xs:12,sm: 6}
246
+ // },
247
+ // elements: [
248
+ // {
249
+ // type: "Control",
250
+ // scope: "#/properties/RemoveItemButton",
251
+ // options: {
252
+ // widget: "IconButton",
253
+ // },
254
+ // config: {
255
+ // layout: { xs: 1, sm: 1 },
256
+ // main: {
257
+ // onClick: "RemoveItemButton",
258
+ // size: "large",
259
+ // icon: "RejectIcon",
260
+ // styleDefault: true,
261
+ // },
262
+ // style:{
263
+ // marginLeft: "-10px"
264
+ // }
265
+ // },
266
+ // },
267
+ // {
268
+ // type: "Control",
269
+ // scope: "#/properties/copiedElementDetails",
270
+
271
+ // options: {
272
+ // widget: "Box",
273
+ // },
274
+ // config: {
275
+ // layout: { xs: 6, sm: 6 },
276
+ // main: {
277
+ // heading: "No element copied",
278
+ // },
279
+ // style: {
280
+ // color: "#535557",
281
+ // marginLeft: "-10px",
282
+ // fontSize: "12px",
283
+ // marginTop: "4px"
284
+ // },
285
+ // },
286
+ // },
287
+ // {
288
+ // type: "Control",
289
+ // scope: "#/properties/EmptyBox",
290
+ // options: {
291
+ // widget: "EmptyBox",
292
+ // },
293
+ // config: {
294
+ // layout: { xs: 1, sm: 5 },
295
+ // },
296
+ // },
297
+ // ]
298
+ // },
299
+ {
300
+ type: "WrapperLayout",
301
+ config: {
302
+ main: {
303
+ gap: "8px"
304
+ }
305
+ },
306
+ elements: [
225
307
  {
226
308
  type: "Control",
227
- scope: "#/properties/RemoveItemButton",
309
+ scope: "#/properties/btn",
228
310
  options: {
229
- widget: "IconButton",
311
+ widget: "Button",
230
312
  },
313
+
231
314
  config: {
232
- layout: { xs: 1, sm: 1 },
315
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
233
316
  main: {
234
- onClick: "RemoveItemButton",
235
- size: "large",
236
- icon: "RejectIcon",
237
- styleDefault: true,
317
+ name: "Ok",
318
+ variant: "contained",
319
+ type: "text",
320
+ onClick: "okHandler",
321
+ size: "medium",
238
322
  },
239
- style:{
240
- marginLeft: "-10px"
241
- }
242
323
  },
243
324
  },
244
325
  {
245
326
  type: "Control",
246
- scope: "#/properties/copiedElementDetails",
247
-
327
+ scope: "#/properties/btnSubmit",
248
328
  options: {
249
- widget: "Box",
329
+ widget: "Button",
250
330
  },
331
+
251
332
  config: {
252
- layout: { xs: 6, sm: 6 },
333
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
253
334
  main: {
254
- heading: "No element copied",
255
- },
256
- style: {
257
- color: "#535557",
258
- marginLeft: "-10px",
259
- fontSize: "12px",
260
- marginTop: "4px"
335
+ name: "Save & Exit",
336
+ variant: "contained",
337
+ type: "text",
338
+ onClick: "saveHandler",
339
+ size: "medium",
261
340
  },
262
341
  },
263
342
  },
264
343
  {
265
344
  type: "Control",
266
345
  scope: "#/properties/EmptyBox",
346
+ config: {
347
+ layout: { xs: 4, sm:7, md: 8, lg: 9 },
348
+ },
267
349
  options: {
268
350
  widget: "EmptyBox",
269
351
  },
270
- config: {
271
- layout: { xs: 1, sm: 5 },
272
- },
273
- },
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
352
  },
317
- style: {
318
- float: "right",
319
- },
320
- },
353
+ ],
321
354
  },
322
355
  {
323
356
  type: "Control",
@@ -445,6 +478,28 @@ export const EventUiSchema: any = (theme) => {
445
478
  },
446
479
  ]
447
480
  },
481
+ {
482
+ type: "Control",
483
+ scope: "#/properties/pageName",
484
+
485
+ options: {
486
+ widget: "Breadcrumb",
487
+ },
488
+ config: {
489
+ layout: 12,
490
+ main: {
491
+ },
492
+ style: {
493
+ paddingLeft: theme.spacing(3),
494
+ color:theme.palette.grey[600],
495
+ fontSize:"10px",
496
+ position: "fixed",
497
+ bottom: "24px",
498
+ borderBottom: `1px solid ${theme.palette.common.black}29`,
499
+ borderTop: `1px solid ${theme.palette.common.black}29`,
500
+ },
501
+ },
502
+ },
448
503
  {
449
504
  type: "Control",
450
505
  scope: "#/properties/notify",
@@ -453,112 +508,6 @@ export const EventUiSchema: any = (theme) => {
453
508
  },
454
509
  layout: 6,
455
510
  },
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
511
  {
563
512
  type: "HorizontalLayout",
564
513
  config: {
@@ -568,7 +517,7 @@ export const EventUiSchema: any = (theme) => {
568
517
  style: {
569
518
  flexDirection: "row",
570
519
  position: "absolute",
571
- bottom: 0,
520
+ bottom: 10,
572
521
  height: "fit-content",
573
522
  overflow: "hidden",
574
523
  zIndex: 1000,
@@ -587,81 +536,20 @@ export const EventUiSchema: any = (theme) => {
587
536
  heading: "Copywriter@ACT21.IO",
588
537
  },
589
538
  style: {
590
- color: theme?.palette?.text?.disabled || "#AFAFAF",
539
+ color: theme?.palette?.text.disabled || "#AFAFAF",
591
540
  fontSize: "11px",
592
541
  textAlign: "center",
593
- lineHeight: 2,
542
+ lineHeight: 0,
594
543
  width: "fit-content",
595
544
  left: "50%",
596
545
  position: "relative",
597
- margin: 0,
546
+ margin: "revert",
598
547
  flexGrow: 1,
599
548
  height: 0,
600
549
  transform: "translate(-50%, 0%)",
601
550
  },
602
551
  },
603
552
  },
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
553
  ],
666
554
  }
667
555
  ],