wini-web-components 0.5.2 → 0.6.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.
package/global.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ declare module '*.css' {
2
+ const content: { [className: string]: string };
3
+ export default content;
4
+ }
package/package.json CHANGED
@@ -1,14 +1,15 @@
1
1
  {
2
2
  "name": "wini-web-components",
3
- "version": "0.5.2",
3
+ "version": "0.6.1",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "dependencies": {
7
7
  "@fortawesome/free-solid-svg-icons": "^6.5.2",
8
8
  "@fortawesome/react-fontawesome": "^0.2.2",
9
- "react": "^18.3.1",
9
+ "date-fns": "^3.6.0",
10
+ "react": "^18.0.0",
10
11
  "react-awesome-slider": "^4.1.0",
11
- "react-dom": "^18.3.1",
12
+ "react-dom": "^18.0.0",
12
13
  "react-hook-form": "^7.52.0",
13
14
  "react-paginate": "^8.2.0",
14
15
  "react-scripts": "5.0.1",
@@ -47,14 +48,15 @@
47
48
  "@babel/preset-env": "^7.0.0",
48
49
  "@babel/preset-react": "^7.0.0",
49
50
  "@babel/preset-typescript": "^7.0.0",
51
+ "@types/css-modules": "^1.0.5",
52
+ "@types/react": "^18.0.0",
53
+ "@types/react-dom": "^18.0.0",
50
54
  "babel-loader": "^8.0.0",
51
- "webpack": "^5.0.0",
52
- "webpack-cli": "^4.0.0",
53
55
  "css-loader": "^5.0.0",
54
56
  "style-loader": "^2.0.0",
55
57
  "typescript": "^4.0.0",
56
- "@types/react": "^18.0.0",
57
- "@types/react-dom": "^18.0.0"
58
+ "webpack": "^5.0.0",
59
+ "webpack-cli": "^4.0.0"
58
60
  },
59
61
  "publishConfig": {
60
62
  "registry": "https://registry.npmjs.org/"
@@ -1,17 +0,0 @@
1
- :root {
2
- --primary-color: #0968D3;
3
- --infor-color: #366AE2;
4
- --infor-background: #EDF2FD;
5
- --success-color: #39AC6D;
6
- --success-background: #E8F7EF;
7
- --warning-color: #FC6B03;
8
- --warning-background: #FFF3EB;
9
- --error-color: #E14337;
10
- --error-background: #FCEEED;
11
- --background: #F2F5F8;
12
- --hover-background: #f1f1f1;
13
- --selected-background: #C0CBD83D;
14
- --disabled-background: #f5f7fa;
15
- --disabled-font-color: #9fb0c7b3;
16
- --border-grey1: 1px solid #00358014;
17
- }
@@ -1,601 +0,0 @@
1
- * {
2
- flex-shrink: 0;
3
- box-sizing: border-box;
4
- }
5
-
6
- .row {
7
- display: -webkit-flex;
8
- display: flex;
9
- flex-direction: row;
10
- align-items: center;
11
- overflow: hidden;
12
- }
13
-
14
- .col {
15
- display: flex;
16
- flex-direction: column;
17
- overflow: hidden;
18
- }
19
-
20
- .row>.col0 {
21
- display: none !important;
22
- }
23
-
24
- .row>.col1 {
25
- width: auto !important;
26
- min-width: auto !important;
27
- flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
28
- }
29
-
30
- .row>.col2 {
31
- width: auto !important;
32
- min-width: auto !important;
33
- flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
34
- }
35
-
36
- .row>.col3 {
37
- width: auto !important;
38
- min-width: auto !important;
39
- flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
40
- }
41
-
42
- .row>.col4 {
43
- width: auto !important;
44
- min-width: auto !important;
45
- flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
46
- }
47
-
48
- .row>.col6 {
49
- width: auto !important;
50
- min-width: auto !important;
51
- flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
52
- }
53
-
54
- .row>.col8 {
55
- width: auto !important;
56
- min-width: auto !important;
57
- flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
58
- }
59
-
60
- .row>.col10 {
61
- width: auto !important;
62
- min-width: auto !important;
63
- flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
64
- }
65
-
66
- .row>.col12 {
67
- width: auto !important;
68
- min-width: auto !important;
69
- flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
70
- }
71
-
72
- .row>.col16 {
73
- width: auto !important;
74
- min-width: auto !important;
75
- flex: 0 calc((100% * 16 / 24) - var(--gutter) * 2 / 3) !important;
76
- }
77
-
78
- .row>.col18 {
79
- width: auto !important;
80
- min-width: auto !important;
81
- flex: 0 calc((100% * 18 / 24) - var(--gutter) * 3 / 4) !important;
82
- }
83
-
84
- .row>.col20 {
85
- width: auto !important;
86
- min-width: auto !important;
87
- flex: 0 calc((100% * 20 / 24) - var(--gutter) * 5 / 6) !important;
88
- }
89
-
90
- .row>.col24 {
91
- width: auto !important;
92
- min-width: auto !important;
93
- flex: 0 100% !important;
94
- }
95
-
96
- /* Extra small devices (phones, 576px and down) min*/
97
- @media only screen and (max-width: 576px) {
98
- :root {
99
- font-size: 6px !important;
100
- }
101
-
102
- .row>.col0-min {
103
- display: none !important;
104
- }
105
-
106
- .row>.col1-min {
107
- width: auto !important;
108
- min-width: auto !important;
109
- flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
110
- }
111
-
112
- .row>.col2-min {
113
- width: auto !important;
114
- min-width: auto !important;
115
- flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
116
- }
117
-
118
- .row>.col3-min {
119
- width: auto !important;
120
- min-width: auto !important;
121
- flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
122
- }
123
-
124
- .row>.col4-min {
125
- width: auto !important;
126
- min-width: auto !important;
127
- flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
128
- }
129
-
130
- .row>.col6-min {
131
- width: auto !important;
132
- min-width: auto !important;
133
- flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
134
- }
135
-
136
- .row>.col8-min {
137
- width: auto !important;
138
- min-width: auto !important;
139
- flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
140
- }
141
-
142
- .row>.col10-min {
143
- width: auto !important;
144
- min-width: auto !important;
145
- flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
146
- }
147
-
148
- .row>.col12-min {
149
- width: auto !important;
150
- min-width: auto !important;
151
- flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
152
- }
153
-
154
- .row>.col16-min {
155
- width: auto !important;
156
- min-width: auto !important;
157
- flex: 0 calc((100% * 16 / 24) - var(--gutter) * 2 / 3) !important;
158
- }
159
-
160
- .row>.col18-min {
161
- width: auto !important;
162
- min-width: auto !important;
163
- flex: 0 calc((100% * 18 / 24) - var(--gutter) * 3 / 4) !important;
164
- }
165
-
166
- .row>.col20-min {
167
- width: auto !important;
168
- min-width: auto !important;
169
- flex: 0 calc((100% * 20 / 24) - var(--gutter) * 5 / 6) !important;
170
- }
171
-
172
- .row>.col24-min {
173
- width: auto !important;
174
- min-width: auto !important;
175
- flex: 0 100% !important;
176
- }
177
-
178
- /* more config responsive */
179
- }
180
-
181
- /* Small devices (portrait tablets and large phones, 576px and up) Small (sm)*/
182
- @media only screen and (min-width: 576px) and (max-width: 768px) {
183
- :root {
184
- font-size: 6.8px !important;
185
- }
186
-
187
- .row>.col0-sm {
188
- display: none !important;
189
- }
190
-
191
- .row>.col1-sm {
192
- width: auto !important;
193
- min-width: auto !important;
194
- flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
195
- }
196
-
197
- .row>.col2-sm {
198
- width: auto !important;
199
- min-width: auto !important;
200
- flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
201
- }
202
-
203
- .row>.col3-sm {
204
- width: auto !important;
205
- min-width: auto !important;
206
- flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
207
- }
208
-
209
- .row>.col4-sm {
210
- width: auto !important;
211
- min-width: auto !important;
212
- flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
213
- }
214
-
215
- .row>.col6-sm {
216
- width: auto !important;
217
- min-width: auto !important;
218
- flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
219
- }
220
-
221
- .row>.col8-sm {
222
- width: auto !important;
223
- min-width: auto !important;
224
- flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
225
- }
226
-
227
- .row>.col10-sm {
228
- width: auto !important;
229
- min-width: auto !important;
230
- flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
231
- }
232
-
233
-
234
- .row>.col12-sm {
235
- width: auto !important;
236
- min-width: auto !important;
237
- flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
238
- }
239
-
240
- .row>.col16-sm {
241
- width: auto !important;
242
- min-width: auto !important;
243
- flex: 0 calc((100% * 16 / 24) - var(--gutter) * 2 / 3) !important;
244
- }
245
-
246
- .row>.col18-sm {
247
- width: auto !important;
248
- min-width: auto !important;
249
- flex: 0 calc((100% * 18 / 24) - var(--gutter) * 3 / 4) !important;
250
- }
251
-
252
- .row>.col20-sm {
253
- width: auto !important;
254
- min-width: auto !important;
255
- flex: 0 calc((100% * 20 / 24) - var(--gutter) * 5 / 6) !important;
256
- }
257
-
258
- .row>.col24-sm {
259
- width: auto !important;
260
- min-width: auto !important;
261
- flex: 0 100% !important;
262
- }
263
- }
264
-
265
- /* Medium devices (landscape tablets, 768px and up) Medium (md)*/
266
- @media only screen and (min-width: 768px) and (max-width: 992px) {
267
- :root {
268
- font-size: 7.6px !important;
269
- }
270
-
271
- .row>.col0-md {
272
- display: none !important;
273
- }
274
-
275
- .row>.col1-md {
276
- width: auto !important;
277
- min-width: auto !important;
278
- flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
279
- }
280
-
281
- .row>.col2-md {
282
- width: auto !important;
283
- min-width: auto !important;
284
- flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
285
- }
286
-
287
- .row>.col3-md {
288
- width: auto !important;
289
- min-width: auto !important;
290
- flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
291
- }
292
-
293
- .row>.col4-md {
294
- width: auto !important;
295
- min-width: auto !important;
296
- flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
297
- }
298
-
299
- .row>.col6-md {
300
- width: auto !important;
301
- min-width: auto !important;
302
- flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
303
- }
304
-
305
- .row>.col8-md {
306
- width: auto !important;
307
- min-width: auto !important;
308
- flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
309
- }
310
-
311
- .row>.col10-md {
312
- width: auto !important;
313
- min-width: auto !important;
314
- flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
315
- }
316
-
317
- .row>.col12-md {
318
- width: auto !important;
319
- min-width: auto !important;
320
- flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
321
- }
322
-
323
- .row>.col16-md {
324
- width: auto !important;
325
- min-width: auto !important;
326
- flex: 0 calc((100% * 16 / 24) - var(--gutter) * 2 / 3) !important;
327
- }
328
-
329
- .row>.col18-md {
330
- width: auto !important;
331
- min-width: auto !important;
332
- flex: 0 calc((100% * 18 / 24) - var(--gutter) * 3 / 4) !important;
333
- }
334
-
335
- .row>.col20-md {
336
- width: auto !important;
337
- min-width: auto !important;
338
- flex: 0 calc((100% * 20 / 24) - var(--gutter) * 5 / 6) !important;
339
- }
340
-
341
- .row>.col24-md {
342
- width: auto !important;
343
- min-width: auto !important;
344
- flex: 0 100% !important;
345
- }
346
-
347
- /* more config resposive */
348
- }
349
-
350
- /* Large devices (laptops/desktops, 992px and up) Large (lg)*/
351
- @media only screen and (min-width: 992px) and (max-width: 1200px) {
352
- :root {
353
- font-size: 8.4px !important;
354
- }
355
-
356
- .row>.col0-lg {
357
- display: none !important;
358
- }
359
-
360
- .row>.col1-lg {
361
- width: auto !important;
362
- min-width: auto !important;
363
- flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
364
- }
365
-
366
- .row>.col2-lg {
367
- width: auto !important;
368
- min-width: auto !important;
369
- flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
370
- }
371
-
372
- .row>.col3-lg {
373
- width: auto !important;
374
- min-width: auto !important;
375
- flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
376
- }
377
-
378
- .row>.col4-lg {
379
- width: auto !important;
380
- min-width: auto !important;
381
- flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
382
- }
383
-
384
- .row>.col6-lg {
385
- width: auto !important;
386
- min-width: auto !important;
387
- flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
388
- }
389
-
390
- .row>.col8-lg {
391
- width: auto !important;
392
- min-width: auto !important;
393
- flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
394
- }
395
-
396
- .row>.col10-lg {
397
- width: auto !important;
398
- min-width: auto !important;
399
- flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
400
- }
401
-
402
- .row>.col12-lg {
403
- width: auto !important;
404
- min-width: auto !important;
405
- flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
406
- }
407
-
408
- .row>.col16-lg {
409
- width: auto !important;
410
- min-width: auto !important;
411
- flex: 0 calc((100% * 16 / 24) - var(--gutter) * 2 / 3) !important;
412
- }
413
-
414
- .row>.col20-lg {
415
- width: auto !important;
416
- min-width: auto !important;
417
- flex: 0 calc((100% * 20 / 24) - var(--gutter) * 5 / 6) !important;
418
- }
419
-
420
- .row>.col18-lg {
421
- width: auto !important;
422
- min-width: auto !important;
423
- flex: 0 calc((100% * 18 / 24) - var(--gutter) * 3 / 4) !important;
424
- }
425
-
426
- .row>.col24-lg {
427
- width: auto !important;
428
- min-width: auto !important;
429
- flex: 0 100% !important;
430
- }
431
-
432
- /* more config resposive */
433
- }
434
-
435
- /* Extra large devices (large laptops and desktops, 1200px and up) X-large (xl)*/
436
- @media only screen and (min-width: 1200px) {
437
- :root {
438
- font-size: 8.8px !important;
439
- }
440
-
441
- .row>.col0-xl {
442
- display: none !important;
443
- }
444
-
445
- .row>.col1-xl {
446
- width: auto !important;
447
- min-width: auto !important;
448
- flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
449
- }
450
-
451
- .row>.col2-xl {
452
- width: auto !important;
453
- min-width: auto !important;
454
- flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
455
- }
456
-
457
- .row>.col3-xl {
458
- width: auto !important;
459
- min-width: auto !important;
460
- flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
461
- }
462
-
463
- .row>.col4-xl {
464
- width: auto !important;
465
- min-width: auto !important;
466
- flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
467
- }
468
-
469
- .row>.col6-xl {
470
- width: auto !important;
471
- min-width: auto !important;
472
- flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
473
- }
474
-
475
- .row>.col8-xl {
476
- width: auto !important;
477
- min-width: auto !important;
478
- flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
479
- }
480
-
481
- .row>.col10-xl {
482
- width: auto !important;
483
- min-width: auto !important;
484
- flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
485
- }
486
-
487
- .row>.col12-xl {
488
- width: auto !important;
489
- min-width: auto !important;
490
- flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
491
- }
492
-
493
- .row>.col16-xl {
494
- width: auto !important;
495
- min-width: auto !important;
496
- flex: 0 calc((100% * 16 / 24) - var(--gutter) * 2 / 3) !important;
497
- }
498
-
499
- .row>.col18-xl {
500
- width: auto !important;
501
- min-width: auto !important;
502
- flex: 0 calc((100% * 18 / 24) - var(--gutter) * 3 / 4) !important;
503
- }
504
-
505
- .row>.col20-xl {
506
- width: auto !important;
507
- min-width: auto !important;
508
- flex: 0 calc((100% * 20 / 24) - var(--gutter) * 5 / 6) !important;
509
- }
510
-
511
- .row>.col24-xl {
512
- width: auto !important;
513
- min-width: auto !important;
514
- flex: 0 100% !important;
515
- }
516
-
517
- /* more config resposive */
518
- }
519
-
520
- /* Extra large devices (large laptops and desktops, 1600px and up) XX-large (xxl) */
521
- @media only screen and (min-width: 1600px) {
522
- :root {
523
- font-size: 10px !important;
524
- }
525
-
526
- .row>.col0-xxl {
527
- display: none !important;
528
- }
529
-
530
- .row>.col1-xxl {
531
- width: auto !important;
532
- min-width: auto !important;
533
- flex: 0 calc((100% * 1 / 24) - var(--gutter) * 23 / 24) !important;
534
- }
535
-
536
- .row>.col2-xxl {
537
- width: auto !important;
538
- min-width: auto !important;
539
- flex: 0 calc((100% * 2 / 24) - var(--gutter) * 11 / 12) !important;
540
- }
541
-
542
- .row>.col3-xxl {
543
- width: auto !important;
544
- min-width: auto !important;
545
- flex: 0 calc((100% * 3 / 24) - var(--gutter) * 7 / 8) !important;
546
- }
547
-
548
- .row>.col4-xxl {
549
- width: auto !important;
550
- min-width: auto !important;
551
- flex: 0 calc((100% * 4 / 24) - var(--gutter) * 5 / 6) !important;
552
- }
553
-
554
- .row>.col6-xxl {
555
- width: auto !important;
556
- min-width: auto !important;
557
- flex: 0 calc((100% * 6 / 24) - var(--gutter) * 3 / 4) !important;
558
- }
559
-
560
- .row>.col8-xxl {
561
- width: auto !important;
562
- min-width: auto !important;
563
- flex: 0 calc((100% * 8 / 24) - var(--gutter) * 2 / 3) !important;
564
- }
565
-
566
- .row>.col10-xxl {
567
- width: auto !important;
568
- min-width: auto !important;
569
- flex: 0 calc((100% * 10 / 24) - var(--gutter) * 5 / 6) !important;
570
- }
571
-
572
- .row>.col12-xxl {
573
- width: auto !important;
574
- min-width: auto !important;
575
- flex: 0 calc((100% * 12 / 24) - var(--gutter) / 2) !important;
576
- }
577
-
578
- .row>.col16-xxl {
579
- width: auto !important;
580
- min-width: auto !important;
581
- flex: 0 calc((100% * 16 / 24) - var(--gutter) * 2 / 3) !important;
582
- }
583
-
584
- .row>.col18-xxl {
585
- width: auto !important;
586
- min-width: auto !important;
587
- flex: 0 calc((100% * 18 / 24) - var(--gutter) * 3 / 4) !important;
588
- }
589
-
590
- .row>.col20-xxl {
591
- width: auto !important;
592
- min-width: auto !important;
593
- flex: 0 calc((100% * 20 / 24) - var(--gutter) * 5 / 6) !important;
594
- }
595
-
596
- .row>.col24-xxl {
597
- width: auto !important;
598
- min-width: auto !important;
599
- flex: 0 100% !important;
600
- }
601
- }