@govtechsg/sgds-web-component 3.0.5 → 3.0.6
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/components/Datepicker/index.umd.js +1 -10
- package/components/Datepicker/index.umd.js.map +1 -1
- package/components/Input/index.umd.js +1 -10
- package/components/Input/index.umd.js.map +1 -1
- package/components/Input/sgds-input.d.ts +0 -2
- package/components/Input/sgds-input.js +1 -10
- package/components/Input/sgds-input.js.map +1 -1
- package/components/QuantityToggle/index.umd.js +1 -10
- package/components/QuantityToggle/index.umd.js.map +1 -1
- package/components/index.umd.js +1 -10
- package/components/index.umd.js.map +1 -1
- package/css/grid.css +55 -16
- package/index.umd.js +1 -10
- package/index.umd.js.map +1 -1
- package/package.json +1 -4
- package/react/components/Input/sgds-input.cjs.js +1 -10
- package/react/components/Input/sgds-input.cjs.js.map +1 -1
- package/react/components/Input/sgds-input.js +1 -10
- package/react/components/Input/sgds-input.js.map +1 -1
- package/themes/root.css +17 -6
package/css/grid.css
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
.sgds-col-2 { grid-column: span 2; }
|
|
16
16
|
.sgds-col-3 { grid-column: span 3; }
|
|
17
17
|
.sgds-col-4 { grid-column: span 4; }
|
|
18
|
+
.sgds-col-center-2 { grid-column: 2 / span 2; }
|
|
18
19
|
.sgds-col-none { display: none; }
|
|
19
20
|
|
|
20
21
|
@media (min-width: 512px) { /* sgds-breakpoint-sm */
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.sgds-container {
|
|
26
|
-
max-width: calc(100% -
|
|
27
|
+
max-width: calc(100% - 48px); /* outer margin of 24px on each side */
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.sgds-col-sm-1 { grid-column: span 1; }
|
|
@@ -34,17 +35,16 @@
|
|
|
34
35
|
.sgds-col-sm-6 { grid-column: span 6; }
|
|
35
36
|
.sgds-col-sm-7 { grid-column: span 7; }
|
|
36
37
|
.sgds-col-sm-8 { grid-column: span 8; }
|
|
38
|
+
.sgds-col-sm-center-2 { grid-column: 4 / span 2; }
|
|
39
|
+
.sgds-col-sm-center-4 { grid-column: 3 / span 4; }
|
|
40
|
+
.sgds-col-sm-center-6 { grid-column: 2 / span 6; }
|
|
37
41
|
.sgds-col-none { display: revert; }
|
|
38
42
|
.sgds-col-sm-none { display: none; }
|
|
39
43
|
}
|
|
40
44
|
|
|
41
|
-
@media (min-width:
|
|
42
|
-
.sgds-grid {
|
|
43
|
-
grid-template-columns: repeat(12, 1fr);
|
|
44
|
-
}
|
|
45
|
-
|
|
45
|
+
@media (min-width: 768px) { /* sgds-breakpoint-md */
|
|
46
46
|
.sgds-container {
|
|
47
|
-
max-width:
|
|
47
|
+
max-width: calc(100% - 64px); /* outer margin of 32px on each side */
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
.sgds-col-md-1 { grid-column: span 1; }
|
|
@@ -55,21 +55,20 @@
|
|
|
55
55
|
.sgds-col-md-6 { grid-column: span 6; }
|
|
56
56
|
.sgds-col-md-7 { grid-column: span 7; }
|
|
57
57
|
.sgds-col-md-8 { grid-column: span 8; }
|
|
58
|
-
.sgds-col-md-
|
|
59
|
-
.sgds-col-md-
|
|
60
|
-
.sgds-col-md-
|
|
61
|
-
.sgds-col-md-12 { grid-column: span 12; }
|
|
58
|
+
.sgds-col-md-center-2 { grid-column: 4 / span 2; }
|
|
59
|
+
.sgds-col-md-center-4 { grid-column: 3 / span 4; }
|
|
60
|
+
.sgds-col-md-center-6 { grid-column: 2 / span 6; }
|
|
62
61
|
.sgds-col-sm-none { display: revert; }
|
|
63
62
|
.sgds-col-md-none { display: none; }
|
|
64
63
|
}
|
|
65
64
|
|
|
66
|
-
@media (min-width:
|
|
65
|
+
@media (min-width: 1024px) { /* sgds-breakpoint-lg */
|
|
67
66
|
.sgds-grid {
|
|
68
|
-
|
|
67
|
+
grid-template-columns: repeat(12, 1fr);
|
|
69
68
|
}
|
|
70
69
|
|
|
71
70
|
.sgds-container {
|
|
72
|
-
max-width:
|
|
71
|
+
max-width: 896px;
|
|
73
72
|
}
|
|
74
73
|
|
|
75
74
|
.sgds-col-lg-1 { grid-column: span 1; }
|
|
@@ -84,13 +83,22 @@
|
|
|
84
83
|
.sgds-col-lg-10 { grid-column: span 10; }
|
|
85
84
|
.sgds-col-lg-11 { grid-column: span 11; }
|
|
86
85
|
.sgds-col-lg-12 { grid-column: span 12; }
|
|
86
|
+
.sgds-col-lg-center-2 { grid-column: 6 / span 2; }
|
|
87
|
+
.sgds-col-lg-center-4 { grid-column: 5 / span 4; }
|
|
88
|
+
.sgds-col-lg-center-6 { grid-column: 4 / span 6; }
|
|
89
|
+
.sgds-col-lg-center-8 { grid-column: 3 / span 8; }
|
|
90
|
+
.sgds-col-lg-center-10 { grid-column: 2 / span 10; }
|
|
87
91
|
.sgds-col-md-none { display: revert; }
|
|
88
92
|
.sgds-col-lg-none { display: none; }
|
|
89
93
|
}
|
|
90
94
|
|
|
91
|
-
@media (min-width:
|
|
95
|
+
@media (min-width: 1280px) { /* sgds-breakpoint-xl */
|
|
96
|
+
.sgds-grid {
|
|
97
|
+
gap: var(--sgds-gap-xl);
|
|
98
|
+
}
|
|
99
|
+
|
|
92
100
|
.sgds-container {
|
|
93
|
-
max-width:
|
|
101
|
+
max-width: 1176px;
|
|
94
102
|
}
|
|
95
103
|
|
|
96
104
|
.sgds-col-xl-1 { grid-column: span 1; }
|
|
@@ -105,6 +113,37 @@
|
|
|
105
113
|
.sgds-col-xl-10 { grid-column: span 10; }
|
|
106
114
|
.sgds-col-xl-11 { grid-column: span 11; }
|
|
107
115
|
.sgds-col-xl-12 { grid-column: span 12; }
|
|
116
|
+
.sgds-col-xl-center-2 { grid-column: 6 / span 2; }
|
|
117
|
+
.sgds-col-xl-center-4 { grid-column: 5 / span 4; }
|
|
118
|
+
.sgds-col-xl-center-6 { grid-column: 4 / span 6; }
|
|
119
|
+
.sgds-col-xl-center-8 { grid-column: 3 / span 8; }
|
|
120
|
+
.sgds-col-xl-center-10 { grid-column: 2 / span 10; }
|
|
108
121
|
.sgds-col-lg-none { display: revert; }
|
|
109
122
|
.sgds-col-xl-none { display: none; }
|
|
110
123
|
}
|
|
124
|
+
|
|
125
|
+
@media (min-width: 1440px) { /* sgds-breakpoint-2-xl */
|
|
126
|
+
.sgds-container {
|
|
127
|
+
max-width: 1320px;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.sgds-col-2-xl-1 { grid-column: span 1; }
|
|
131
|
+
.sgds-col-2-xl-2 { grid-column: span 2; }
|
|
132
|
+
.sgds-col-2-xl-3 { grid-column: span 3; }
|
|
133
|
+
.sgds-col-2-xl-4 { grid-column: span 4; }
|
|
134
|
+
.sgds-col-2-xl-5 { grid-column: span 5; }
|
|
135
|
+
.sgds-col-2-xl-6 { grid-column: span 6; }
|
|
136
|
+
.sgds-col-2-xl-7 { grid-column: span 7; }
|
|
137
|
+
.sgds-col-2-xl-8 { grid-column: span 8; }
|
|
138
|
+
.sgds-col-2-xl-9 { grid-column: span 9; }
|
|
139
|
+
.sgds-col-2-xl-10 { grid-column: span 10; }
|
|
140
|
+
.sgds-col-2-xl-11 { grid-column: span 11; }
|
|
141
|
+
.sgds-col-2-xl-12 { grid-column: span 12; }
|
|
142
|
+
.sgds-col-2-xl-center-2 { grid-column: 6 / span 2; }
|
|
143
|
+
.sgds-col-2-xl-center-4 { grid-column: 5 / span 4; }
|
|
144
|
+
.sgds-col-2-xl-center-6 { grid-column: 4 / span 6; }
|
|
145
|
+
.sgds-col-2-xl-center-8 { grid-column: 3 / span 8; }
|
|
146
|
+
.sgds-col-2-xl-center-10 { grid-column: 2 / span 10; }
|
|
147
|
+
.sgds-col-xl-none { display: revert; }
|
|
148
|
+
.sgds-col-2-xl-none { display: none; }
|
|
149
|
+
}
|
package/index.umd.js
CHANGED
|
@@ -21541,16 +21541,6 @@
|
|
|
21541
21541
|
blur() {
|
|
21542
21542
|
this.input.blur();
|
|
21543
21543
|
}
|
|
21544
|
-
/** Programatically sets the invalid state of the input. Pass in boolean value in the argument */
|
|
21545
|
-
setInvalid(bool) {
|
|
21546
|
-
this.invalid = bool;
|
|
21547
|
-
if (bool) {
|
|
21548
|
-
this.emit("sgds-invalid");
|
|
21549
|
-
}
|
|
21550
|
-
else {
|
|
21551
|
-
this.emit("sgds-valid");
|
|
21552
|
-
}
|
|
21553
|
-
}
|
|
21554
21544
|
/**
|
|
21555
21545
|
* Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state
|
|
21556
21546
|
* Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput
|
|
@@ -21587,6 +21577,7 @@
|
|
|
21587
21577
|
}
|
|
21588
21578
|
_handleBlur() {
|
|
21589
21579
|
const sgdsBlur = this.emit("sgds-blur", { cancelable: true });
|
|
21580
|
+
this.setInvalid(!this._mixinCheckValidity());
|
|
21590
21581
|
if (sgdsBlur.defaultPrevented)
|
|
21591
21582
|
return;
|
|
21592
21583
|
this._isTouched = true;
|