impaktapps-ui-builder 0.0.101-alpha.1 → 0.0.101-alpha.11

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 (8) hide show
  1. package/dist/impaktapps-ui-builder.es.js +245 -401
  2. package/dist/impaktapps-ui-builder.es.js.map +1 -1
  3. package/dist/impaktapps-ui-builder.umd.js +9 -9
  4. package/dist/impaktapps-ui-builder.umd.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/impaktapps-ui-builder/builder/elements/UiSchema/Component/uiSchema.ts +255 -338
  7. package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts +201 -292
  8. package/src/impaktapps-ui-builder/builder/services/component.ts +2 -2
package/src/impaktapps-ui-builder/builder/elements/UiSchema/PageMaster/uiSchema.ts CHANGED
@@ -2,16 +2,15 @@ import { EventUiSchema } from "../event/uiSchema"
2
2
  export const PageMasterUiSchema: any = (theme) => {
3
3
  const uiSchema = {
4
4
  type: "HorizontalLayout",
5
- heading: "Page Master",
5
+ heading: "Page",
6
6
  elements: [
7
7
  {
8
8
  type: "WrapperLayout",
9
9
  config: {
10
10
  main: {
11
- },
12
- wrapperStyle: {
13
- marginLeft: theme.spacing(2),
14
- backgroundColor: theme.palette.background.default
11
+ label: "Basic Details",
12
+ isAccordion: true,
13
+ gap: "8px",
15
14
  },
16
15
  },
17
16
  elements: [
@@ -23,9 +22,9 @@ export const PageMasterUiSchema: any = (theme) => {
23
22
  widget: "InputField",
24
23
  },
25
24
  config: {
26
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
25
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
27
26
  main: {
28
- label: "Name",
27
+ label: "Page Name",
29
28
  options: [],
30
29
  color: "secondary",
31
30
  errorMessage: "Name should be start with 'page_'",
@@ -34,27 +33,27 @@ export const PageMasterUiSchema: any = (theme) => {
34
33
  },
35
34
  },
36
35
  },
37
- {
38
- type: "Control",
39
- scope: "#/properties/template",
36
+ // {
37
+ // type: "Control",
38
+ // scope: "#/properties/template",
40
39
 
41
- options: {
42
- widget: "SelectInputField",
43
- },
44
- config: {
45
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
46
- main: {
47
- label: "Template",
48
- options: [
49
- { const: "template1", title: "template1" },
50
- { const: "template2", title: "template2" },
51
- { const: "template3", title: "template3" }
52
- ],
53
- color: "secondary",
54
- required: true,
55
- },
56
- },
57
- },
40
+ // options: {
41
+ // widget: "SelectInputField",
42
+ // },
43
+ // config: {
44
+ // layout: { xs: 6, sm: 6, md: 4, lg: 3 },
45
+ // main: {
46
+ // label: "Template",
47
+ // options: [
48
+ // { const: "template1", title: "template1" },
49
+ // { const: "template2", title: "template2" },
50
+ // { const: "template3", title: "template3" }
51
+ // ],
52
+ // color: "secondary",
53
+ // required: true,
54
+ // },
55
+ // },
56
+ // },
58
57
  {
59
58
  type: "Control",
60
59
  scope: "#/properties/label",
@@ -63,9 +62,9 @@ export const PageMasterUiSchema: any = (theme) => {
63
62
  widget: "InputField",
64
63
  },
65
64
  config: {
66
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
65
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
67
66
  main: {
68
- label: "Label",
67
+ label: "Page Heading",
69
68
  options: [],
70
69
  color: "secondary",
71
70
  required: true,
@@ -76,7 +75,7 @@ export const PageMasterUiSchema: any = (theme) => {
76
75
  type: "Control",
77
76
  scope: "#/properties/EmptyBox",
78
77
  config: {
79
- layout: { xs: 6, sm: 6, md: 0, lg: 0 },
78
+ layout: { xs: 0, sm: 0, md: 4, lg: 6 },
80
79
  },
81
80
  options: {
82
81
  widget: "EmptyBox",
@@ -87,11 +86,27 @@ export const PageMasterUiSchema: any = (theme) => {
87
86
  {
88
87
  type: "TabLayout",
89
88
  config: {
89
+ layout: 12,
90
90
  main: {
91
- tabLabels: ["Components", "Events"],
92
- divider: true,
91
+ tabLabels: ["Page Components", "Page Events"],
93
92
  },
94
- defaultStyle: true,
93
+ style: {
94
+ TabPanelStyle: {
95
+ padding: 0,
96
+ }
97
+ },
98
+ TabsStyle: {
99
+ borderTop: `1px solid ${theme.palette.common.black}29`,
100
+ marginBottom: "3px",
101
+ paddingBottom: "4px",
102
+ boxShadow: "0px 3px 4px #afafaf80",
103
+ "& .MuiTabs-indicator": {
104
+ bottom: "6px",
105
+ }
106
+ },
107
+ TabContainerStyle: {
108
+ marginTop: "-16px",
109
+ }
95
110
  },
96
111
  elements: [
97
112
  {
@@ -108,26 +123,29 @@ export const PageMasterUiSchema: any = (theme) => {
108
123
  widget: {
109
124
  type: "Control",
110
125
  scope: "#/properties/New_Record",
111
-
112
126
  options: {
113
127
  widget: "IconButton",
114
128
  },
115
129
  config: {
116
130
  main: {
117
- // color: "info",
118
131
  onClick: "onAddClickHandler",
119
132
  size: "small",
120
- icon: "AddIcon",
121
- iconLabel: "Add New",
133
+ icon: "TableAddIcon",
134
+ iconLabel: "Add",
122
135
  styleDefault: true,
123
136
  },
124
137
  style: {
125
138
  mt: "6px",
139
+ color: "inherit",
140
+ fill: "inherit",
141
+ "&:hover": {
142
+ color: "inherit",
143
+ fill: "inherit",
144
+ }
126
145
  },
127
146
  },
128
147
  }
129
148
  },
130
-
131
149
  {
132
150
  widget: {
133
151
  type: "Control",
@@ -138,15 +156,20 @@ export const PageMasterUiSchema: any = (theme) => {
138
156
  },
139
157
  config: {
140
158
  main: {
141
- // color: "info",
142
159
  onClick: "copyPasteElement",
143
160
  size: "small",
144
- icon: "PasteIcon",
161
+ icon: "TablePaste",
145
162
  iconLabel: "Paste",
146
163
  styleDefault: true,
147
164
  },
148
165
  style: {
149
166
  mt: "6px",
167
+ color: "inherit",
168
+ fill: "inherit",
169
+ "&:hover": {
170
+ color: "inherit",
171
+ fill: "inherit",
172
+ }
150
173
  },
151
174
  },
152
175
  }
@@ -161,18 +184,21 @@ export const PageMasterUiSchema: any = (theme) => {
161
184
  elements: [
162
185
  {
163
186
  accessorKey: "name",
164
-
165
187
  header: "Name",
188
+ size: 300,
189
+ type: "string"
166
190
  },
167
191
  {
168
192
  accessorKey: "type",
169
-
170
193
  header: "Type",
194
+ size: 300,
195
+ type: "string"
171
196
  },
172
197
  {
173
198
  header: "Edit",
174
199
  field: "Reject_Records",
175
- flex: 1,
200
+ size: 150,
201
+ type: "action",
176
202
  widget: {
177
203
  type: "Control",
178
204
  scope: "#/properties/RejectButton",
@@ -181,13 +207,15 @@ export const PageMasterUiSchema: any = (theme) => {
181
207
  },
182
208
  config: {
183
209
  main: {
184
- icon: "EditIcon",
185
- color: "primary",
210
+ icon: "TableEditIcon",
186
211
  onClick: "Edit_Components",
187
212
  tooltipMessage: "Edit This Record",
188
213
  },
189
214
  style: {
190
- color: theme.palette.primary.main,
215
+ fill: theme.palette.primary.main,
216
+ "& :hover": {
217
+ fill: theme.palette.primary.dark,
218
+ },
191
219
  },
192
220
  },
193
221
  },
@@ -195,7 +223,8 @@ export const PageMasterUiSchema: any = (theme) => {
195
223
  {
196
224
  header: "Delete",
197
225
  field: "Reject_Records",
198
- flex: 1,
226
+ size: 150,
227
+ type: "action",
199
228
  widget: {
200
229
  type: "Control",
201
230
  scope: "#/properties/RejectButton",
@@ -204,15 +233,19 @@ export const PageMasterUiSchema: any = (theme) => {
204
233
  },
205
234
  config: {
206
235
  main: {
207
- icon: "RejectIcon",
208
- color: "error",
236
+ icon: "Bin",
209
237
  onClick: "deletePopUpComponent",
210
238
  tooltipMessage: "Reject This Record",
211
239
  },
240
+ style: {
241
+ fill: theme.palette.primary.main,
242
+ "& :hover": {
243
+ fill: theme.palette.primary.dark,
244
+ },
245
+ },
212
246
  },
213
247
  },
214
248
  },
215
-
216
249
  {
217
250
  header: "Copy",
218
251
  field: "Copy_Component",
@@ -233,8 +266,6 @@ export const PageMasterUiSchema: any = (theme) => {
233
266
  },
234
267
  },
235
268
  },
236
-
237
-
238
269
  ]
239
270
  },
240
271
  {
@@ -251,21 +282,25 @@ export const PageMasterUiSchema: any = (theme) => {
251
282
  widget: {
252
283
  type: "Control",
253
284
  scope: "#/properties/New_Record",
254
-
255
285
  options: {
256
286
  widget: "IconButton",
257
287
  },
258
288
  config: {
259
289
  main: {
260
- // color: "info",
261
290
  onClick: "eventAddHandler",
262
291
  size: "small",
263
- icon: "AddIcon",
264
- iconLabel: "Add New",
292
+ icon: "TableAddIcon",
293
+ iconLabel: "Add",
265
294
  styleDefault: true,
266
295
  },
267
296
  style: {
268
297
  mt: "6px",
298
+ color: "inherit",
299
+ fill: "inherit",
300
+ "&:hover": {
301
+ color: "inherit",
302
+ fill: "inherit",
303
+ }
269
304
  },
270
305
  },
271
306
  }
@@ -281,15 +316,20 @@ export const PageMasterUiSchema: any = (theme) => {
281
316
  },
282
317
  config: {
283
318
  main: {
284
- // color: "info",
285
319
  onClick: "copyPasteElement",
286
320
  size: "small",
287
- icon: "PasteIcon",
321
+ icon: "TablePaste",
288
322
  iconLabel: "Paste",
289
323
  styleDefault: true,
290
324
  },
291
325
  style: {
292
326
  mt: "6px",
327
+ color: "inherit",
328
+ fill: "inherit",
329
+ "&:hover": {
330
+ color: "inherit",
331
+ fill: "inherit",
332
+ }
293
333
  },
294
334
  },
295
335
  }
@@ -308,14 +348,20 @@ export const PageMasterUiSchema: any = (theme) => {
308
348
  {
309
349
  accessorKey: "eventType",
310
350
  header: "Event Type",
351
+ size: 300,
352
+ type: "string"
311
353
  },
312
354
  {
313
355
  accessorKey: "Handler",
314
356
  header: "Handler",
357
+ size: 300,
358
+ type: "string"
315
359
  },
316
360
  {
317
361
  accessorKey: "Edit_Approve_Records",
318
362
  header: "Edit Widget",
363
+ type: "action",
364
+ size: 150,
319
365
  widget: {
320
366
  type: "Control",
321
367
  scope: "#/properties/Edit_Records",
@@ -324,14 +370,16 @@ export const PageMasterUiSchema: any = (theme) => {
324
370
  },
325
371
  config: {
326
372
  main: {
327
- color: "info",
328
373
  size: "small",
329
- icon: "EditIcon",
374
+ icon: "TableEditIcon",
330
375
  tooltipMessage: "Edit This Record",
331
376
  onClick: "editEvent",
332
377
  },
333
378
  style: {
334
- color: theme.palette.primary.main,
379
+ fill: theme.palette.primary.main,
380
+ "& :hover": {
381
+ fill: theme.palette.primary.dark,
382
+ },
335
383
  },
336
384
  },
337
385
  },
@@ -347,16 +395,19 @@ export const PageMasterUiSchema: any = (theme) => {
347
395
  },
348
396
  config: {
349
397
  main: {
350
- icon: "RejectIcon",
351
- color: "error",
398
+ icon: "Bin",
352
399
  tooltipMessage: "Reject This Record",
353
400
  onClick: "deletePopUpEvent",
354
401
  },
402
+ style: {
403
+ fill: theme.palette.primary.main,
404
+ "& :hover": {
405
+ fill: theme.palette.primary.dark,
406
+ },
407
+ },
355
408
  },
356
409
  },
357
410
  },
358
-
359
-
360
411
  {
361
412
  header: "Copy",
362
413
  field: "Copy_Event",
@@ -383,83 +434,108 @@ export const PageMasterUiSchema: any = (theme) => {
383
434
 
384
435
  ],
385
436
  },
437
+ // {
438
+ // type: "HorizontalLayout",
439
+ // config: {
440
+ // layout:{xs:12,sm: 9}
441
+ // },
442
+ // elements: [
443
+ // {
444
+ // type: "Control",
445
+ // scope: "#/properties/RemoveItemButton",
446
+ // options: {
447
+ // widget: "IconButton",
448
+ // },
449
+ // config: {
450
+ // layout: { xs: 1, sm: 1 },
451
+ // main: {
452
+ // onClick: "RemoveItemButton",
453
+ // size: "large",
454
+ // icon: "RejectIcon",
455
+ // styleDefault: true,
456
+ // },
457
+ // style:{
458
+ // marginLeft: "-5px"
459
+ // }
460
+ // },
461
+ // },
462
+
463
+ // {
464
+ // type: "Control",
465
+ // scope: "#/properties/copiedElementDetails",
466
+
467
+ // options: {
468
+ // widget: "Box",
469
+ // },
470
+ // config: {
471
+ // layout: { xs: 6, sm: 6 },
472
+ // main: {
473
+ // heading: "No element copied",
474
+ // },
475
+ // style: {
476
+ // color: "#535557",
477
+ // marginLeft: "-30px",
478
+ // fontSize: "12px",
479
+ // marginTop: "4px"
480
+ // },
481
+ // },
482
+ // },
483
+ // {
484
+ // type: "Control",
485
+ // scope: "#/properties/EmptyBox",
486
+ // options: {
487
+ // widget: "EmptyBox",
488
+ // },
489
+ // config: {
490
+ // layout: { xs: 1, sm: 5 },
491
+ // },
492
+ // },
493
+ // ]
494
+ // },
386
495
  {
387
- type: "HorizontalLayout",
496
+ scope: "#/properties/Remarks Container",
497
+ type: "WrapperLayout",
388
498
  config: {
389
- layout:{xs:12,sm: 9}
499
+ layout: 12,
500
+ main: {
501
+ divider: false,
502
+ rowSpacing: 0,
503
+ gap: 0
504
+ },
505
+ componentsBoxStyle: {
506
+ padding: "8px 8px 8px 24px",
507
+ }
390
508
  },
391
509
  elements: [
392
510
  {
393
511
  type: "Control",
394
- scope: "#/properties/RemoveItemButton",
512
+ scope: "#/properties/btn",
395
513
  options: {
396
- widget: "IconButton",
514
+ widget: "Button",
397
515
  },
398
- config: {
399
- layout: { xs: 1, sm: 1 },
400
- main: {
401
- onClick: "RemoveItemButton",
402
- size: "large",
403
- icon: "RejectIcon",
404
- styleDefault: true,
405
- },
406
- style:{
407
- marginLeft: "-5px"
408
- }
409
- },
410
- },
411
-
412
- {
413
- type: "Control",
414
- scope: "#/properties/copiedElementDetails",
415
516
 
416
- options: {
417
- widget: "Box",
418
- },
419
517
  config: {
420
- layout: { xs: 6, sm: 6 },
518
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
421
519
  main: {
422
- heading: "No element copied",
423
- },
424
- style: {
425
- color: "#535557",
426
- marginLeft: "-30px",
427
- fontSize: "12px",
428
- marginTop: "4px"
520
+ name: "Save",
521
+ variant: "contained",
522
+ type: "text",
523
+ onClick: "saveHandler",
524
+ size: "medium",
429
525
  },
430
526
  },
431
527
  },
432
528
  {
433
529
  type: "Control",
434
530
  scope: "#/properties/EmptyBox",
531
+ config: {
532
+ layout: { xs: 8, sm:9.5, md: 10, lg: 10.5 },
533
+ },
435
534
  options: {
436
535
  widget: "EmptyBox",
437
536
  },
438
- config: {
439
- layout: { xs: 1, sm: 5 },
440
- },
441
537
  },
442
- ]
443
- },
444
- {
445
- type: "Control",
446
- scope: "#/properties/btn",
447
- options: {
448
- widget: "Button",
449
- },
450
-
451
- config: {
452
- layout: { xs: 4, sm: 2 },
453
- main: {
454
- name: "Save",
455
- startIcon: "ApproveIcon",
456
- variant: "contained",
457
- // color: "info",
458
- type: "text",
459
- onClick: "saveHandler",
460
- size: "medium",
461
- },
462
- },
538
+ ],
463
539
  },
464
540
  {
465
541
  type: "Control",
@@ -721,112 +797,6 @@ export const PageMasterUiSchema: any = (theme) => {
721
797
  },
722
798
  layout: 6,
723
799
  },
724
- // {
725
- // type: "HorizontalLayout",
726
- // config: {
727
- // main: {
728
- // direction: 'row'
729
- // },
730
- // style: {
731
- // flexDirection: "row",
732
- // position: "absolute",
733
- // bottom: 0,
734
- // marginBottom: '-8px',
735
- // height: 'fit-content',
736
- // overflow: 'hidden',
737
- // zIndex: 1000,
738
- // width: 'inherit'
739
- // }
740
- // },
741
- // elements: [
742
- // {
743
-
744
- // type: "Control",
745
- // scope: "#/properties/FooterText",
746
- // options: {
747
- // widget: "Box",
748
- // },
749
- // config: {
750
- // main: {
751
- // heading: "Copywriter@ACT21.IO"
752
- // },
753
- // style: {
754
- // color: theme?.palette?.text.disabled || "#AFAFAF",
755
- // fontSize: '12px',
756
- // textAlign: 'center',
757
- // lineHeight: 2,
758
- // width: 'fit-content',
759
- // left: '50%',
760
- // position: 'relative',
761
- // margin: 0,
762
- // flexGrow: 1,
763
- // height: 0,
764
- // transform: "translate(-50%,0%)"
765
- // }
766
- // },
767
- // },
768
- // {
769
- // type: "Control",
770
- // scope: "#/properties/backIcon",
771
- // options: {
772
- // widget: "Box",
773
- // },
774
- // config: {
775
- // main: {
776
- // iconName: 'PrevIcon',
777
- // onClick: "backHandler",
778
- // width: 'fit-content',
779
- // },
780
- // style: {
781
- // fill: theme.palette.primary.main,
782
- // width: 20,
783
- // height: 0,
784
- // margin: 0,
785
- // top: 0,
786
- // right: {xs: '12px', sm: '84px'},
787
- // position: 'absolute',
788
- // fontSize: '12px',
789
- // cursor: 'pointer',
790
- // ':hover': {
791
- // fill: theme.palette.primary.dark,
792
- // }
793
- // }
794
- // }
795
- // },
796
- // {
797
- // type: "Control",
798
- // scope: "#/properties/text",
799
-
800
- // options: {
801
- // widget: "Box",
802
- // },
803
- // config: {
804
- // main: {
805
- // heading: "Previous Page",
806
- // onClick: "backHandler"
807
- // },
808
- // style: {
809
- // display: {xs: 'none', sm: "flex"},
810
- // textAlign: 'left',
811
- // lineHeight: 1,
812
- // height: 0,
813
- // width: 'fit-content',
814
- // color: theme.palette.primary.main,
815
- // fontSize: "12px",
816
- // cursor: 'pointer',
817
- // marginLeft: '2px',
818
- // marginRight: 0,
819
- // top: 3,
820
- // right: '12px',
821
- // position: 'absolute',
822
- // ':hover': {
823
- // color: theme.palette.primary.dark,
824
- // }
825
- // }
826
- // },
827
- // },
828
- // ]
829
- // }
830
800
  {
831
801
  type: "HorizontalLayout",
832
802
  config: {
@@ -836,7 +806,7 @@ export const PageMasterUiSchema: any = (theme) => {
836
806
  style: {
837
807
  flexDirection: "row",
838
808
  position: "absolute",
839
- bottom: 0,
809
+ bottom: 10,
840
810
  height: "fit-content",
841
811
  overflow: "hidden",
842
812
  zIndex: 1000,
@@ -855,81 +825,20 @@ export const PageMasterUiSchema: any = (theme) => {
855
825
  heading: "Copywriter@ACT21.IO",
856
826
  },
857
827
  style: {
858
- color: theme?.palette?.text?.disabled || "#AFAFAF",
828
+ color: theme?.palette?.text.disabled || "#AFAFAF",
859
829
  fontSize: "11px",
860
830
  textAlign: "center",
861
- lineHeight: 2,
831
+ lineHeight: 0,
862
832
  width: "fit-content",
863
833
  left: "50%",
864
834
  position: "relative",
865
- margin: 0,
835
+ margin: "revert",
866
836
  flexGrow: 1,
867
837
  height: 0,
868
838
  transform: "translate(-50%, 0%)",
869
839
  },
870
840
  },
871
841
  },
872
- {
873
- type: "Control",
874
- scope: "#/properties/FooterBackIcon",
875
- options: {
876
- widget: "Box",
877
- },
878
- config: {
879
- main: {
880
- iconName: "PrevIcon",
881
- onClick: "backHandler",
882
- width: "fit-content",
883
- },
884
- style: {
885
- fill: theme?.palette?.primary?.main,
886
- width: 20,
887
- height: 0,
888
- // margin: 0,
889
- top: 0,
890
- right: { xs: "12px", sm: "84px" },
891
- position: "absolute",
892
- fontSize: "12px",
893
- cursor: "pointer",
894
- ":hover": {
895
- fill: theme?.palette?.primary?.dark,
896
- },
897
- marginRight: "20px",
898
- },
899
- },
900
- },
901
- {
902
- type: "Control",
903
- scope: "#/properties/FooterBackHandlerText",
904
- options: {
905
- widget: "Box",
906
- },
907
- config: {
908
- main: {
909
- heading: "Previous Page",
910
- onClick: "backHandler",
911
- },
912
- style: {
913
- display: { xs: "none", sm: "flex" },
914
- textAlign: "left",
915
- lineHeight: 1,
916
- height: 0,
917
- width: "fit-content",
918
- color: theme?.palette?.primary?.main,
919
- fontSize: "12px",
920
- cursor: "pointer",
921
- marginLeft: "2px",
922
-
923
- top: 3,
924
- right: "12px",
925
- position: "absolute",
926
- ":hover": {
927
- color: theme?.palette?.primary?.dark,
928
- },
929
- marginRight: "4px",
930
- },
931
- },
932
- },
933
842
  ],
934
843
  }
935
844
  ]