@cntrl-site/components 1.0.1-alpha.9 → 1.0.1

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.
@@ -1,571 +1,2 @@
1
- import { ControlSlider } from './ControlSlider';
2
- export declare const ControlSliderComponent: {
3
- element: typeof ControlSlider;
4
- id: string;
5
- name: string;
6
- preview: {
7
- type: "image";
8
- url: string;
9
- };
10
- defaultSize: {
11
- width: number;
12
- height: number;
13
- };
14
- schema: {
15
- type: string;
16
- properties: {
17
- settings: {
18
- type: string;
19
- display: {
20
- type: string;
21
- };
22
- properties: {
23
- triggers: {
24
- title: string;
25
- icon: string;
26
- tooltip: string;
27
- type: string;
28
- properties: {
29
- triggersList: {
30
- type: string;
31
- display: {
32
- type: string;
33
- };
34
- properties: {
35
- click: {
36
- type: string;
37
- };
38
- drag: {
39
- type: string;
40
- };
41
- };
42
- };
43
- autoPlay: {
44
- type: string[];
45
- label: string;
46
- display: {
47
- type: string;
48
- };
49
- enum: (string | null)[];
50
- };
51
- };
52
- };
53
- direction: {
54
- icon: string;
55
- tooltip: string;
56
- type: string;
57
- display: {
58
- type: string;
59
- };
60
- enum: string[];
61
- };
62
- transition: {
63
- title: string;
64
- icon: string;
65
- tooltip: string;
66
- type: string;
67
- properties: {
68
- type: {
69
- type: string;
70
- display: {
71
- type: string;
72
- };
73
- enum: string[];
74
- };
75
- backgroundColor: {
76
- type: string[];
77
- title: string;
78
- display: {
79
- visible: boolean;
80
- type: string;
81
- format: string;
82
- };
83
- };
84
- duration: {
85
- type: string;
86
- label: string;
87
- display: {
88
- type: string;
89
- };
90
- enum: string[];
91
- };
92
- };
93
- };
94
- controls: {
95
- title: string;
96
- icon: string;
97
- tooltip: string;
98
- type: string;
99
- properties: {
100
- isActive: {
101
- type: string;
102
- display: {
103
- type: string;
104
- };
105
- };
106
- arrowsImgUrl: {
107
- type: string[];
108
- display: {
109
- type: string;
110
- };
111
- };
112
- offset: {
113
- type: string;
114
- title: string;
115
- display: {
116
- type: string;
117
- };
118
- properties: {
119
- x: {
120
- type: string;
121
- label: string;
122
- scalingEnabled: boolean;
123
- display: {
124
- type: string;
125
- visible: boolean;
126
- };
127
- };
128
- y: {
129
- type: string;
130
- label: string;
131
- scalingEnabled: boolean;
132
- display: {
133
- type: string;
134
- visible: boolean;
135
- };
136
- };
137
- };
138
- };
139
- scale: {
140
- type: string;
141
- title: string;
142
- min: number;
143
- max: number;
144
- display: {
145
- type: string;
146
- };
147
- };
148
- color: {
149
- title: string;
150
- type: string;
151
- display: {
152
- type: string;
153
- format: string;
154
- };
155
- };
156
- hover: {
157
- title: string;
158
- type: string;
159
- display: {
160
- type: string;
161
- format: string;
162
- };
163
- };
164
- show: {
165
- title: string;
166
- type: string;
167
- display: {
168
- type: string;
169
- };
170
- enum: string[];
171
- };
172
- };
173
- };
174
- pagination: {
175
- title: string;
176
- icon: string;
177
- tooltip: string;
178
- type: string;
179
- properties: {
180
- isActive: {
181
- type: string;
182
- display: {
183
- type: string;
184
- };
185
- };
186
- position: {
187
- display: {
188
- type: string;
189
- direction: string;
190
- };
191
- type: string;
192
- enum: string[];
193
- };
194
- offset: {
195
- type: string;
196
- title: string;
197
- display: {
198
- type: string;
199
- };
200
- properties: {
201
- x: {
202
- type: string;
203
- label: string;
204
- scalingEnabled: boolean;
205
- display: {
206
- type: string;
207
- visible: boolean;
208
- };
209
- };
210
- y: {
211
- type: string;
212
- label: string;
213
- scalingEnabled: boolean;
214
- display: {
215
- type: string;
216
- visible: boolean;
217
- };
218
- };
219
- };
220
- };
221
- scale: {
222
- type: string;
223
- title: string;
224
- min: number;
225
- max: number;
226
- display: {
227
- type: string;
228
- };
229
- };
230
- colors: {
231
- display: {
232
- type: string;
233
- format: string;
234
- };
235
- title: string;
236
- type: string;
237
- items: {
238
- type: string;
239
- };
240
- };
241
- hover: {
242
- title: string;
243
- type: string;
244
- display: {
245
- type: string;
246
- format: string;
247
- };
248
- };
249
- };
250
- };
251
- imageCaption: {
252
- title: string;
253
- icon: string;
254
- tooltip: string;
255
- type: string;
256
- properties: {
257
- isActive: {
258
- type: string;
259
- display: {
260
- type: string;
261
- };
262
- };
263
- alignment: {
264
- type: string;
265
- display: {
266
- type: string;
267
- };
268
- enum: string[];
269
- };
270
- offset: {
271
- type: string;
272
- title: string;
273
- display: {
274
- type: string;
275
- };
276
- properties: {
277
- x: {
278
- type: string;
279
- label: string;
280
- scalingEnabled: boolean;
281
- display: {
282
- type: string;
283
- visible: boolean;
284
- };
285
- };
286
- y: {
287
- type: string;
288
- label: string;
289
- scalingEnabled: boolean;
290
- display: {
291
- type: string;
292
- visible: boolean;
293
- };
294
- };
295
- };
296
- };
297
- linkColor: {
298
- title: string;
299
- type: string;
300
- display: {
301
- type: string;
302
- format: string;
303
- };
304
- };
305
- linkHoverColor: {
306
- title: string;
307
- type: string;
308
- display: {
309
- type: string;
310
- format: string;
311
- };
312
- };
313
- };
314
- };
315
- };
316
- default: {
317
- triggers: {
318
- triggersList: {
319
- click: boolean;
320
- drag: boolean;
321
- };
322
- autoPlay: null;
323
- };
324
- controls: {
325
- isActive: boolean;
326
- arrowsImgUrl: null;
327
- offset: {
328
- x: number;
329
- y: number;
330
- };
331
- scale: number;
332
- color: string;
333
- hover: string;
334
- show: string;
335
- };
336
- transition: {
337
- type: string;
338
- duration: string;
339
- backgroundColor: null;
340
- };
341
- pagination: {
342
- isActive: boolean;
343
- scale: number;
344
- position: string;
345
- offset: {
346
- x: number;
347
- y: number;
348
- };
349
- colors: string[];
350
- hover: string;
351
- };
352
- direction: string;
353
- imageCaption: {
354
- offset: {
355
- x: number;
356
- y: number;
357
- };
358
- isActive: boolean;
359
- alignment: string;
360
- linkColor: string;
361
- linkHoverColor: string;
362
- };
363
- };
364
- displayRules: ({
365
- if: {
366
- name: string;
367
- value: string;
368
- };
369
- then: {
370
- name: string;
371
- value: string;
372
- };
373
- } | {
374
- if: {
375
- name: string;
376
- value: string;
377
- };
378
- then: {
379
- name: string;
380
- value: boolean;
381
- };
382
- })[];
383
- };
384
- content: {
385
- type: string;
386
- settings: {
387
- addItemFromFileExplorer: boolean;
388
- defaultWidth: number;
389
- };
390
- items: {
391
- type: string;
392
- properties: {
393
- image: {
394
- type: string;
395
- label: string;
396
- display: {
397
- minWidth: number;
398
- maxWidth: number;
399
- type: string;
400
- };
401
- properties: {
402
- url: {
403
- type: string;
404
- };
405
- name: {
406
- type: string;
407
- };
408
- objectFit: {
409
- type: string;
410
- enum: string[];
411
- };
412
- };
413
- required: string[];
414
- };
415
- imageCaption: {
416
- placeholder: string;
417
- label: string;
418
- display: {
419
- type: string;
420
- minWidth: number;
421
- maxWidth: number;
422
- };
423
- };
424
- };
425
- required: string[];
426
- };
427
- default: {
428
- image: {
429
- objectFit: string;
430
- url: string;
431
- name: string;
432
- };
433
- imageCaption: {
434
- type: string;
435
- children: {
436
- text: string;
437
- }[];
438
- }[];
439
- }[];
440
- };
441
- styles: {
442
- type: string;
443
- properties: {
444
- imageCaption: {
445
- dataName: string;
446
- type: string;
447
- properties: {
448
- fontSettings: {
449
- type: string;
450
- display: {
451
- type: string;
452
- };
453
- properties: {
454
- fontFamily: {
455
- type: string;
456
- };
457
- fontWeight: {
458
- type: string;
459
- };
460
- fontStyle: {
461
- type: string;
462
- };
463
- };
464
- };
465
- widthSettings: {
466
- display: {
467
- type: string;
468
- };
469
- type: string;
470
- properties: {
471
- width: {
472
- type: string;
473
- };
474
- sizing: {
475
- type: string;
476
- enum: string[];
477
- };
478
- };
479
- };
480
- fontSizeLineHeight: {
481
- type: string;
482
- display: {
483
- type: string;
484
- };
485
- properties: {
486
- fontSize: {
487
- type: string;
488
- };
489
- lineHeight: {
490
- type: string;
491
- };
492
- };
493
- };
494
- letterSpacing: {
495
- display: {
496
- type: string;
497
- };
498
- type: string;
499
- };
500
- wordSpacing: {
501
- display: {
502
- type: string;
503
- };
504
- type: string;
505
- };
506
- textAlign: {
507
- display: {
508
- type: string;
509
- };
510
- type: string;
511
- enum: string[];
512
- };
513
- textAppearance: {
514
- display: {
515
- type: string;
516
- };
517
- properties: {
518
- textTransform: {
519
- type: string;
520
- enum: string[];
521
- };
522
- textDecoration: {
523
- type: string;
524
- enum: string[];
525
- };
526
- fontVariant: {
527
- type: string;
528
- enum: string[];
529
- };
530
- };
531
- };
532
- color: {
533
- display: {
534
- type: string;
535
- };
536
- type: string;
537
- };
538
- };
539
- };
540
- };
541
- default: {
542
- imageCaption: {
543
- widthSettings: {
544
- width: number;
545
- sizing: string;
546
- };
547
- fontSettings: {
548
- fontFamily: string;
549
- fontWeight: number;
550
- fontStyle: string;
551
- };
552
- fontSizeLineHeight: {
553
- fontSize: number;
554
- lineHeight: number;
555
- };
556
- letterSpacing: number;
557
- wordSpacing: number;
558
- textAlign: string;
559
- textAppearance: {
560
- textTransform: string;
561
- textDecoration: string;
562
- fontVariant: string;
563
- };
564
- color: string;
565
- };
566
- };
567
- };
568
- };
569
- required: string[];
570
- };
571
- };
1
+ import { Component } from '../../types/Component';
2
+ export declare const ControlSliderComponent: Component;
@@ -1,4 +1,5 @@
1
1
  import { CommonComponentProps } from '../props';
2
+ import { TextStyles } from '../utils/textStylesToCss';
2
3
  type FormProps = {
3
4
  settings: FormSettings;
4
5
  content?: unknown;
@@ -13,23 +14,8 @@ export type FormFieldItem = {
13
14
  type: FormFieldType;
14
15
  placeholder: string;
15
16
  label?: string;
16
- };
17
- type TextStyles = {
18
- fontSettings: {
19
- fontFamily?: string;
20
- fontWeight: number;
21
- fontStyle: string;
22
- };
23
- letterSpacing: number;
24
- wordSpacing: number;
25
- fontSize: number;
26
- lineHeight?: number;
27
- textAppearance?: {
28
- textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
29
- textDecoration?: 'none' | 'underline';
30
- fontVariant?: 'normal' | 'small-caps';
31
- };
32
- color: string;
17
+ isRequired?: boolean;
18
+ error?: string;
33
19
  };
34
20
  type Padding = {
35
21
  top?: number;
@@ -40,7 +26,7 @@ type Padding = {
40
26
  type ColorKeys = 'inputColor' | 'inputTextColor' | 'inputBorderColor' | 'placeholderColor' | 'buttonColor' | 'buttonTextColor' | 'buttonBorderColor' | 'labelTextColor' | 'successColor' | 'errorColor';
41
27
  type StateColorOverrides = Partial<Record<ColorKeys, string>>;
42
28
  type FormSettings = {
43
- type: 'A' | 'B';
29
+ type: 'A' | 'B' | 'C';
44
30
  fontFamily: string;
45
31
  fieldsToShow: number;
46
32
  fields: FormFieldItem[];
@@ -74,19 +60,29 @@ type FormSettings = {
74
60
  labelLetterSpacing?: number;
75
61
  labelWordSpacing?: number;
76
62
  labelTextAppearance?: TextStyles['textAppearance'];
63
+ statusFontSettings?: {
64
+ fontWeight: number;
65
+ fontStyle: string;
66
+ };
67
+ statusFontSize?: number;
68
+ statusLineHeight?: number;
69
+ statusLetterSpacing?: number;
70
+ statusWordSpacing?: number;
71
+ statusTextAppearance?: TextStyles['textAppearance'];
77
72
  buttonCorners?: number;
78
73
  buttonStroke?: number;
74
+ buttonPadding?: Padding;
75
+ isButtonFullWidth?: boolean;
79
76
  inputCorners?: number;
80
77
  inputStroke?: number;
81
- buttonPadding?: Padding;
82
78
  inputPadding?: Padding;
83
79
  inputColor: string;
84
80
  inputTextColor: string;
85
81
  inputBorderColor: string;
86
- placeholderColor: string;
87
82
  buttonColor: string;
88
83
  buttonTextColor: string;
89
84
  buttonBorderColor: string;
85
+ placeholderColor: string;
90
86
  labelTextColor: string;
91
87
  successColor: string;
92
88
  errorColor: string;