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/Component/uiSchema.ts CHANGED
@@ -1,56 +1,83 @@
1
1
  export const componentBasicUiSchema: any = (theme)=>{
2
2
  const uiSchema = {
3
3
  type: "HorizontalLayout",
4
- heading: "Component",
4
+ heading: "Page-Component",
5
5
  elements: [
6
- {
7
- type: "Control",
8
- scope: "#/properties/pageName",
6
+ // {
7
+ // type: "Control",
8
+ // scope: "#/properties/pageName",
9
9
 
10
- options: {
11
- widget: "Box",
12
- },
13
- config: {
14
- layout: 12,
15
- main: {
16
- heading: " ",
17
- },
18
- style: {
19
- marginLeft: theme.spacing(3),
20
- width:"auto",
21
- fontSize:"12px",
22
- color:"gray",
23
- },
24
- },
25
- },
10
+ // options: {
11
+ // widget: "Box",
12
+ // },
13
+ // config: {
14
+ // layout: 12,
15
+ // main: {
16
+ // heading: " ",
17
+ // },
18
+ // style: {
19
+ // marginLeft: theme.spacing(3),
20
+ // width:"auto",
21
+ // fontSize:"12px",
22
+ // color:"gray",
23
+ // },
24
+ // },
25
+ // },
26
26
  {
27
27
  type: "TabLayout",
28
28
  config: {
29
29
  main: {
30
30
  tabLabels: ["Core"],
31
- defaultStyle: true,
32
31
  id:`component`
33
32
  },
33
+ style: {
34
+ TabPanelStyle: {
35
+ padding: 0,
36
+ }
37
+ },
38
+ TabsStyle: {
39
+ marginBottom: "3px",
40
+ paddingBottom: "4px",
41
+ boxShadow: "0px 3px 4px #afafaf80",
42
+ "& .MuiTabs-indicator": {
43
+ bottom: "6px",
44
+ }
45
+ },
34
46
  },
35
47
 
36
48
  elements: [
37
49
  {
38
- type: "HorizontalLayout",
50
+ type: "WrapperLayout",
51
+ config: {
52
+ main: {
53
+ label: " ",
54
+ gap: "8px"
55
+ }
56
+ },
39
57
  elements: [
40
58
  {
41
59
  type: "Control",
42
60
  scope: "#/properties/type",
43
-
44
61
  options: {
45
62
  widget: "SelectInputField",
46
63
  },
47
64
  config: {
48
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
65
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
49
66
  main: {
50
67
  label: "Type",
51
68
  },
52
69
  },
53
70
  },
71
+ {
72
+ type: "Control",
73
+ scope: "#/properties/proc",
74
+ config: {
75
+ layout: { xs: 6, sm: 0, md: 0, lg: 0 },
76
+ },
77
+ options: {
78
+ widget: "EmptyBox",
79
+ },
80
+ },
54
81
  {
55
82
  type: "Control",
56
83
  scope: "#/properties/name",
@@ -59,9 +86,9 @@ export const componentBasicUiSchema: any = (theme)=>{
59
86
  widget: "InputField",
60
87
  },
61
88
  config: {
62
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
89
+ layout: { xs: 12, sm: 6, md: 4, lg: 3 },
63
90
  main: {
64
- label: "Name",
91
+ label: "Component ID",
65
92
  options: [],
66
93
  color: "secondary",
67
94
  required: true,
@@ -76,7 +103,7 @@ export const componentBasicUiSchema: any = (theme)=>{
76
103
  widget: "InputField",
77
104
  },
78
105
  config: {
79
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
106
+ layout: { xs: 6, sm: 6, md: 4, lg: 3 },
80
107
  main: {
81
108
  label: "Label",
82
109
  options: [],
@@ -85,157 +112,216 @@ export const componentBasicUiSchema: any = (theme)=>{
85
112
  },
86
113
  },
87
114
  },
88
- {
89
- type: "Control",
90
- scope: "#/properties/columnFormat",
91
- options: {
92
- widget: "SelectInputField",
93
- },
94
- config: {
95
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
96
- main: {
97
- label: "Column Format",
115
+ // {//////////////////////////
116
+ // type: "Control",
117
+ // scope: "#/properties/columnFormat",
118
+ // options: {
119
+ // widget: "SelectInputField",
120
+ // },
121
+ // config: {
122
+ // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
123
+ // main: {
124
+ // label: "Column Format",
98
125
 
99
- },
100
- },
101
- },
102
- {
103
- type: "Control",
104
- scope: "#/properties/proc",
105
- config: {
106
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
107
- },
108
- options: {
109
- widget: "EmptyBox",
110
- },
111
- },
126
+ // },
127
+ // },
128
+ // },/////////////////////
112
129
  {
113
130
  type: "Control",
114
131
  scope: "#/properties/proc",
115
132
  config: {
116
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
133
+ layout: { xs: 6, sm: 6, md: 0, lg: 3 },
117
134
  },
118
135
  options: {
119
136
  widget: "EmptyBox",
120
137
  },
121
138
  },
139
+ // {
140
+ // type: "Control",
141
+ // scope: "#/properties/layout",
142
+ // layout: 12,
143
+ // options: {
144
+ // detail: {
145
+ // type: "HorizontalLayout",
146
+ // elements: [
147
+ // {
148
+ // type: "Control",
149
+ // scope: "#/properties/key",
150
+ // options: {
151
+ // widget: "SelectInputField",
152
+ // },
153
+ // config: {
154
+ // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
155
+ // main: {
156
+ // label: "Screen Size",
157
+
158
+ // },
159
+ // },
160
+ // },
161
+ // {
162
+ // type: "Control",
163
+ // scope: "#/properties/value",
164
+
165
+ // options: {
166
+ // widget: "InputField",
167
+ // },
168
+ // config: {
169
+ // layout: { xs: 6, sm: 6, md: 4, lg: 4 },
170
+ // main: {
171
+ // label: "Value",
172
+ // type:"number",
173
+ // // freeSolo:true,
174
+ // helperText:'Number should be in range of 0 to 12',
175
+ // errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
176
+
177
+ // },
178
+ // },
179
+ // },
180
+ // {
181
+ // type: "Control",
182
+ // scope: "#/properties/proc",
183
+ // config: {
184
+ // layout: { xs: 0, sm: 0, md: 4, lg: 4 },
185
+ // },
186
+ // options: {
187
+ // widget: "EmptyBox",
188
+ // },
189
+ // },
190
+ // ],
191
+ // },
192
+ // },
193
+ // },
122
194
  {
123
195
  type: "Control",
124
196
  scope: "#/properties/layout",
125
- layout: 12,
126
197
  options: {
127
- detail: {
128
- type: "HorizontalLayout",
129
- elements: [
130
- {
131
- type: "Control",
132
- scope: "#/properties/key",
133
- options: {
134
- widget: "SelectInputField",
135
- },
136
- config: {
137
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
138
- main: {
139
- label: "Screen Size",
140
-
141
- },
142
- },
198
+ widget: "Array",
199
+ },
200
+ config: {
201
+ layout: 12,
202
+ main: {
203
+ label: "Layout",
204
+ childElementLabel: "Layout",
205
+ },
206
+ style: {
207
+ marginLeft: "-24px",
208
+ marginBottom: "24px !important",
209
+ labelStyle: {
210
+ marginLeft: "24px",
211
+ },
212
+ detailsStyle: {
213
+ marginLeft: "24px",
214
+ }
215
+ }
216
+ },
217
+ elements: [
218
+ {
219
+ type: "Control",
220
+ scope: "#/properties/key",
221
+ options: {
222
+ widget: "SelectInputField",
223
+ },
224
+ config: {
225
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
226
+ main: {
227
+ label: "Screen Size",
228
+
143
229
  },
144
- {
145
- type: "Control",
146
- scope: "#/properties/value",
230
+ },
231
+ },
232
+ {
233
+ type: "Control",
234
+ scope: "#/properties/value",
147
235
 
148
- options: {
149
- widget: "InputField",
150
- },
151
- config: {
152
- layout: { xs: 6, sm: 6, md: 4, lg: 4 },
153
- main: {
154
- label: "Value",
155
- type:"number",
156
- // freeSolo:true,
157
- helperText:'Number should be in range of 0 to 12',
158
- errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
159
-
160
- },
161
- },
162
- },
163
- {
164
- type: "Control",
165
- scope: "#/properties/proc",
166
- config: {
167
- layout: { xs: 0, sm: 0, md: 4, lg: 4 },
168
- },
169
- options: {
170
- widget: "EmptyBox",
171
- },
236
+ options: {
237
+ widget: "InputField",
238
+ },
239
+ config: {
240
+ layout: { xs: 6, sm: 6, md: 4, lg: 4 },
241
+ main: {
242
+ label: "Value",
243
+ type:"number",
244
+ // freeSolo:true,
245
+ helperText:'Number should be in range of 0 to 12',
246
+ errorMessage:"Number Can't be greater than 12 and can't be less than 0.",
247
+
172
248
  },
173
- ],
249
+ },
174
250
  },
175
- },
251
+ {
252
+ type: "Control",
253
+ scope: "#/properties/proc",
254
+ config: {
255
+ layout: { xs: 0, sm: 0, md: 4, lg: 4 },
256
+ },
257
+ options: {
258
+ widget: "EmptyBox",
259
+ },
260
+ },
261
+ ],
176
262
  },
177
263
  ],
178
264
  },
179
265
  ],
180
266
  },
181
- {
182
- type: "HorizontalLayout",
183
- config: {
184
- layout:{xs:12,sm: 6}
185
- },
186
- elements: [
187
- {
188
- type: "Control",
189
- scope: "#/properties/RemoveItemButton",
190
- options: {
191
- widget: "IconButton",
192
- },
193
- config: {
194
- layout: { xs: 1, sm: 1 },
195
- main: {
196
- onClick: "RemoveItemButton",
197
- size: "large",
198
- icon: "RejectIcon",
199
- styleDefault: true,
200
- },
201
- style:{
202
- marginLeft: "-10px"
203
- }
204
- },
205
- },
267
+ // {
268
+ // type: "HorizontalLayout",
269
+ // config: {
270
+ // layout:{xs:12,sm: 6}
271
+ // },
272
+ // elements: [
273
+ // {
274
+ // type: "Control",
275
+ // scope: "#/properties/RemoveItemButton",
276
+ // options: {
277
+ // widget: "IconButton",
278
+ // },
279
+ // config: {
280
+ // layout: { xs: 1, sm: 1 },
281
+ // main: {
282
+ // onClick: "RemoveItemButton",
283
+ // size: "large",
284
+ // icon: "RejectIcon",
285
+ // styleDefault: true,
286
+ // },
287
+ // style:{
288
+ // marginLeft: "-10px"
289
+ // }
290
+ // },
291
+ // },
206
292
 
207
- {
208
- type: "Control",
209
- scope: "#/properties/copiedElementDetails",
293
+ // {
294
+ // type: "Control",
295
+ // scope: "#/properties/copiedElementDetails",
210
296
 
211
- options: {
212
- widget: "Box",
213
- },
214
- config: {
215
- layout: { xs: 6, sm: 6 },
216
- main: {
217
- heading: "No element copied",
218
- },
219
- style: {
220
- color: "#535557",
221
- marginLeft: "-10px",
222
- fontSize: "12px",
223
- marginTop: "4px"
224
- },
225
- },
226
- },
227
- {
228
- type: "Control",
229
- scope: "#/properties/EmptyBox",
230
- options: {
231
- widget: "EmptyBox",
232
- },
233
- config: {
234
- layout: { xs: 1, sm: 5 },
235
- },
236
- },
237
- ]
238
- },
297
+ // options: {
298
+ // widget: "Box",
299
+ // },
300
+ // config: {
301
+ // layout: { xs: 6, sm: 6 },
302
+ // main: {
303
+ // heading: "No element copied",
304
+ // },
305
+ // style: {
306
+ // color: "#535557",
307
+ // marginLeft: "-10px",
308
+ // fontSize: "12px",
309
+ // marginTop: "4px"
310
+ // },
311
+ // },
312
+ // },
313
+ // {
314
+ // type: "Control",
315
+ // scope: "#/properties/EmptyBox",
316
+ // options: {
317
+ // widget: "EmptyBox",
318
+ // },
319
+ // config: {
320
+ // layout: { xs: 1, sm: 5 },
321
+ // },
322
+ // },
323
+ // ]
324
+ // },
239
325
  {
240
326
  type: "Control",
241
327
  scope: "#/properties/btn",
@@ -244,12 +330,10 @@ export const componentBasicUiSchema: any = (theme)=>{
244
330
  },
245
331
 
246
332
  config: {
247
- layout: { xs: 4, sm: 2 },
333
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
248
334
  main: {
249
335
  name: "Ok",
250
- startIcon: "ApproveIcon",
251
336
  variant: "contained",
252
- // color: "info",
253
337
  type: "text",
254
338
  onClick: "okHandler",
255
339
  size: "medium",
@@ -264,20 +348,26 @@ export const componentBasicUiSchema: any = (theme)=>{
264
348
  },
265
349
 
266
350
  config: {
267
- layout: { xs: 4, sm: 2 },
351
+ layout: { xs: 4, sm: 2.5, md: 2, lg: 1.5 },
268
352
  main: {
269
353
  name: "Save & Exit",
270
- startIcon: "ApproveIcon",
271
354
  variant: "contained",
272
- // color: "info",
273
355
  type: "text",
274
356
  onClick: "saveHandler",
275
357
  size: "medium",
276
358
  },
277
359
  },
278
360
  },
279
-
280
-
361
+ {
362
+ type: "Control",
363
+ scope: "#/properties/EmptyBox",
364
+ config: {
365
+ layout: { xs: 4, sm:7, md: 8, lg: 9 },
366
+ },
367
+ options: {
368
+ widget: "EmptyBox",
369
+ },
370
+ },
281
371
  {
282
372
  type: "Control",
283
373
  scope: "#/properties/popUpComponentSection",
@@ -339,9 +429,7 @@ export const componentBasicUiSchema: any = (theme)=>{
339
429
  layout: 6,
340
430
  main: {
341
431
  name: "No",
342
- startIcon: "ApproveIcon",
343
432
  variant: "contained",
344
- color: "info",
345
433
  type: "text",
346
434
  onClick: "deletePopUpComponent",
347
435
  size: "large",
@@ -375,7 +463,6 @@ export const componentBasicUiSchema: any = (theme)=>{
375
463
  layout: 6,
376
464
  main: {
377
465
  name: "Yes",
378
- startIcon: "ApproveIcon",
379
466
  variant: "contained",
380
467
  color: "error",
381
468
  type: "text",
@@ -465,9 +552,7 @@ export const componentBasicUiSchema: any = (theme)=>{
465
552
  layout: 6,
466
553
  main: {
467
554
  name: "No",
468
- startIcon: "ApproveIcon",
469
555
  variant: "contained",
470
- color: "info",
471
556
  type: "text",
472
557
  onClick: "deletePopUpEvent",
473
558
  size: "large",
@@ -501,7 +586,6 @@ export const componentBasicUiSchema: any = (theme)=>{
501
586
  layout: 6,
502
587
  main: {
503
588
  name: "Yes",
504
- startIcon: "ApproveIcon",
505
589
  variant: "contained",
506
590
  color: "error",
507
591
  type: "text",
@@ -538,112 +622,6 @@ export const componentBasicUiSchema: any = (theme)=>{
538
622
  },
539
623
  layout: 6,
540
624
  },
541
- // {
542
- // type: "HorizontalLayout",
543
- // config: {
544
- // main: {
545
- // direction: 'row'
546
- // },
547
- // style: {
548
- // flexDirection: "row",
549
- // position: "absolute",
550
- // bottom: 0,
551
- // marginBottom: '-8px',
552
- // height: 'fit-content',
553
- // overflow: 'hidden',
554
- // zIndex: 1000,
555
- // width: 'inherit'
556
- // }
557
- // },
558
- // elements: [
559
- // {
560
-
561
- // type: "Control",
562
- // scope: "#/properties/FooterText",
563
- // options: {
564
- // widget: "Box",
565
- // },
566
- // config: {
567
- // main: {
568
- // heading: "Copywriter@ACT21.IO"
569
- // },
570
- // style: {
571
- // color: theme?.palette?.text.disabled || "#AFAFAF",
572
- // fontSize: '11px',
573
- // textAlign: 'center',
574
- // lineHeight: 2,
575
- // width: 'fit-content',
576
- // left: '50%',
577
- // position: 'relative',
578
- // margin: 0,
579
- // flexGrow: 1,
580
- // height: 0,
581
- // transform: "translate(-50%,0%)"
582
- // }
583
- // },
584
- // },
585
- // {
586
- // type: "Control",
587
- // scope: "#/properties/backIcon",
588
- // options: {
589
- // widget: "Box",
590
- // },
591
- // config: {
592
- // main: {
593
- // iconName: 'PrevIcon',
594
- // onClick: "backHandler",
595
- // width: 'fit-content',
596
- // },
597
- // style: {
598
- // fill: theme.palette.primary.main,
599
- // width: 20,
600
- // height: 0,
601
- // margin: 0,
602
- // top: 0,
603
- // right: {xs: '12px', sm: '84px'},
604
- // position: 'absolute',
605
- // fontSize: '12px',
606
- // cursor: 'pointer',
607
- // ':hover': {
608
- // fill: theme.palette.primary.dark,
609
- // }
610
- // }
611
- // }
612
- // },
613
- // {
614
- // type: "Control",
615
- // scope: "#/properties/text",
616
-
617
- // options: {
618
- // widget: "Box",
619
- // },
620
- // config: {
621
- // main: {
622
- // heading: "Previous Page",
623
- // onClick: "backHandler"
624
- // },
625
- // style: {
626
- // display: {xs: 'none', sm: "flex"},
627
- // textAlign: 'left',
628
- // lineHeight: 1,
629
- // height: 0,
630
- // width: 'fit-content',
631
- // color: theme.palette.primary.main,
632
- // fontSize: "12px",
633
- // cursor: 'pointer',
634
- // marginLeft: '2px',
635
- // marginRight: 0,
636
- // top: 3,
637
- // right: '12px',
638
- // position: 'absolute',
639
- // ':hover': {
640
- // color: theme.palette.primary.dark,
641
- // }
642
- // }
643
- // },
644
- // },
645
- // ]
646
- // }
647
625
  {
648
626
  type: "HorizontalLayout",
649
627
  config: {
@@ -653,7 +631,7 @@ export const componentBasicUiSchema: any = (theme)=>{
653
631
  style: {
654
632
  flexDirection: "row",
655
633
  position: "absolute",
656
- bottom: 0,
634
+ bottom: 10,
657
635
  height: "fit-content",
658
636
  overflow: "hidden",
659
637
  zIndex: 1000,
@@ -672,81 +650,20 @@ export const componentBasicUiSchema: any = (theme)=>{
672
650
  heading: "Copywriter@ACT21.IO",
673
651
  },
674
652
  style: {
675
- color: theme?.palette?.text?.disabled || "#AFAFAF",
653
+ color: theme?.palette?.text.disabled || "#AFAFAF",
676
654
  fontSize: "11px",
677
655
  textAlign: "center",
678
- lineHeight: 2,
656
+ lineHeight: 0,
679
657
  width: "fit-content",
680
658
  left: "50%",
681
659
  position: "relative",
682
- margin: 0,
660
+ margin: "revert",
683
661
  flexGrow: 1,
684
662
  height: 0,
685
663
  transform: "translate(-50%, 0%)",
686
664
  },
687
665
  },
688
666
  },
689
- {
690
- type: "Control",
691
- scope: "#/properties/FooterBackIcon",
692
- options: {
693
- widget: "Box",
694
- },
695
- config: {
696
- main: {
697
- iconName: "PrevIcon",
698
- onClick: "backHandler",
699
- width: "fit-content",
700
- },
701
- style: {
702
- fill: theme?.palette?.primary?.main,
703
- width: 20,
704
- height: 0,
705
- // margin: 0,
706
- top: 0,
707
- right: { xs: "12px", sm: "84px" },
708
- position: "absolute",
709
- fontSize: "12px",
710
- cursor: "pointer",
711
- ":hover": {
712
- fill: theme?.palette?.primary?.dark,
713
- },
714
- marginRight: "20px",
715
- },
716
- },
717
- },
718
- {
719
- type: "Control",
720
- scope: "#/properties/FooterBackHandlerText",
721
- options: {
722
- widget: "Box",
723
- },
724
- config: {
725
- main: {
726
- heading: "Previous Page",
727
- onClick: "backHandler",
728
- },
729
- style: {
730
- display: { xs: "none", sm: "flex" },
731
- textAlign: "left",
732
- lineHeight: 1,
733
- height: 0,
734
- width: "fit-content",
735
- color: theme?.palette?.primary?.main,
736
- fontSize: "12px",
737
- cursor: "pointer",
738
- marginLeft: "2px",
739
-
740
- top: 3,
741
- right: "12px",
742
- position: "absolute",
743
- ":hover": {
744
- color: theme?.palette?.primary?.dark,
745
- },
746
- marginRight: "4px",
747
- },
748
- },
749
- },
750
667
  ],
751
668
  }
752
669
  ],