@proximus/lavender-grid 2.0.0-alpha.17 → 2.0.0-alpha.170
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/dist/Grid.d.ts +56 -56
- package/dist/index.es.js +290 -320
- package/package.json +2 -2
package/dist/Grid.d.ts
CHANGED
|
@@ -11,60 +11,60 @@ export declare class Grid extends PxElement<HTMLDivElement> {
|
|
|
11
11
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
12
12
|
updateGap(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
13
13
|
updateAttribute(attrName: string, oldValue: string, newValue: string, attrValues: string[]): void;
|
|
14
|
-
get gap(): string;
|
|
15
|
-
set gap(value: string);
|
|
16
|
-
get gapMobile(): string;
|
|
17
|
-
set gapMobile(value: string);
|
|
18
|
-
get gapTablet(): string;
|
|
19
|
-
set gapTablet(value: string);
|
|
20
|
-
get gapLaptop(): string;
|
|
21
|
-
set gapLaptop(value: string);
|
|
22
|
-
get gridCols(): string;
|
|
23
|
-
set gridCols(value: string);
|
|
24
|
-
get gridColsMobile(): string;
|
|
25
|
-
set gridColsMobile(value: string);
|
|
26
|
-
get gridColsTablet(): string;
|
|
27
|
-
set gridColsTablet(value: string);
|
|
28
|
-
get gridColsLaptop(): string;
|
|
29
|
-
set gridColsLaptop(value: string);
|
|
30
|
-
get justifyContent(): string;
|
|
31
|
-
set justifyContent(value: string);
|
|
32
|
-
get justifyItems(): string;
|
|
33
|
-
set justifyItems(value: string);
|
|
34
|
-
get alignContent(): string;
|
|
35
|
-
set alignContent(value: string);
|
|
36
|
-
get alignItems(): string;
|
|
37
|
-
set alignItems(value: string);
|
|
38
|
-
get justifyContentMobile(): string;
|
|
39
|
-
set justifyContentMobile(value: string);
|
|
40
|
-
get justifyItemsMobile(): string;
|
|
41
|
-
set justifyItemsMobile(value: string);
|
|
42
|
-
get alignContentMobile(): string;
|
|
43
|
-
set alignContentMobile(value: string);
|
|
44
|
-
get alignItemsMobile(): string;
|
|
45
|
-
set alignItemsMobile(value: string);
|
|
46
|
-
get justifyContentTablet(): string;
|
|
47
|
-
set justifyContentTablet(value: string);
|
|
48
|
-
get justifyItemsTablet(): string;
|
|
49
|
-
set justifyItemsTablet(value: string);
|
|
50
|
-
get alignContentTablet(): string;
|
|
51
|
-
set alignContentTablet(value: string);
|
|
52
|
-
get alignItemsTablet(): string;
|
|
53
|
-
set alignItemsTablet(value: string);
|
|
54
|
-
get justifyContentLaptop(): string;
|
|
55
|
-
set justifyContentLaptop(value: string);
|
|
56
|
-
get justifyItemsLaptop(): string;
|
|
57
|
-
set justifyItemsLaptop(value: string);
|
|
58
|
-
get alignContentLaptop(): string;
|
|
59
|
-
set alignContentLaptop(value: string);
|
|
60
|
-
get alignItemsLaptop(): string;
|
|
61
|
-
set alignItemsLaptop(value: string);
|
|
62
|
-
get justifyContentDesktop(): string;
|
|
63
|
-
set justifyContentDesktop(value: string);
|
|
64
|
-
get justifyItemsDesktop(): string;
|
|
65
|
-
set justifyItemsDesktop(value: string);
|
|
66
|
-
get alignContentDesktop(): string;
|
|
67
|
-
set alignContentDesktop(value: string);
|
|
68
|
-
get alignItemsDesktop(): string;
|
|
69
|
-
set alignItemsDesktop(value: string);
|
|
14
|
+
get gap(): string | null;
|
|
15
|
+
set gap(value: string | null);
|
|
16
|
+
get gapMobile(): string | null;
|
|
17
|
+
set gapMobile(value: string | null);
|
|
18
|
+
get gapTablet(): string | null;
|
|
19
|
+
set gapTablet(value: string | null);
|
|
20
|
+
get gapLaptop(): string | null;
|
|
21
|
+
set gapLaptop(value: string | null);
|
|
22
|
+
get gridCols(): string | null;
|
|
23
|
+
set gridCols(value: string | null);
|
|
24
|
+
get gridColsMobile(): string | null;
|
|
25
|
+
set gridColsMobile(value: string | null);
|
|
26
|
+
get gridColsTablet(): string | null;
|
|
27
|
+
set gridColsTablet(value: string | null);
|
|
28
|
+
get gridColsLaptop(): string | null;
|
|
29
|
+
set gridColsLaptop(value: string | null);
|
|
30
|
+
get justifyContent(): string | null;
|
|
31
|
+
set justifyContent(value: string | null);
|
|
32
|
+
get justifyItems(): string | null;
|
|
33
|
+
set justifyItems(value: string | null);
|
|
34
|
+
get alignContent(): string | null;
|
|
35
|
+
set alignContent(value: string | null);
|
|
36
|
+
get alignItems(): string | null;
|
|
37
|
+
set alignItems(value: string | null);
|
|
38
|
+
get justifyContentMobile(): string | null;
|
|
39
|
+
set justifyContentMobile(value: string | null);
|
|
40
|
+
get justifyItemsMobile(): string | null;
|
|
41
|
+
set justifyItemsMobile(value: string | null);
|
|
42
|
+
get alignContentMobile(): string | null;
|
|
43
|
+
set alignContentMobile(value: string | null);
|
|
44
|
+
get alignItemsMobile(): string | null;
|
|
45
|
+
set alignItemsMobile(value: string | null);
|
|
46
|
+
get justifyContentTablet(): string | null;
|
|
47
|
+
set justifyContentTablet(value: string | null);
|
|
48
|
+
get justifyItemsTablet(): string | null;
|
|
49
|
+
set justifyItemsTablet(value: string | null);
|
|
50
|
+
get alignContentTablet(): string | null;
|
|
51
|
+
set alignContentTablet(value: string | null);
|
|
52
|
+
get alignItemsTablet(): string | null;
|
|
53
|
+
set alignItemsTablet(value: string | null);
|
|
54
|
+
get justifyContentLaptop(): string | null;
|
|
55
|
+
set justifyContentLaptop(value: string | null);
|
|
56
|
+
get justifyItemsLaptop(): string | null;
|
|
57
|
+
set justifyItemsLaptop(value: string | null);
|
|
58
|
+
get alignContentLaptop(): string | null;
|
|
59
|
+
set alignContentLaptop(value: string | null);
|
|
60
|
+
get alignItemsLaptop(): string | null;
|
|
61
|
+
set alignItemsLaptop(value: string | null);
|
|
62
|
+
get justifyContentDesktop(): string | null;
|
|
63
|
+
set justifyContentDesktop(value: string | null);
|
|
64
|
+
get justifyItemsDesktop(): string | null;
|
|
65
|
+
set justifyItemsDesktop(value: string | null);
|
|
66
|
+
get alignContentDesktop(): string | null;
|
|
67
|
+
set alignContentDesktop(value: string | null);
|
|
68
|
+
get alignItemsDesktop(): string | null;
|
|
69
|
+
set alignItemsDesktop(value: string | null);
|
|
70
70
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,321 +1,291 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
get justifyContentDesktop() {
|
|
289
|
-
return this.getAttribute("justify-content--desktop");
|
|
290
|
-
}
|
|
291
|
-
set justifyContentDesktop(t) {
|
|
292
|
-
this.setAttribute("justify-content--desktop", t);
|
|
293
|
-
}
|
|
294
|
-
get justifyItemsDesktop() {
|
|
295
|
-
return this.getAttribute("justify-items--desktop");
|
|
296
|
-
}
|
|
297
|
-
set justifyItemsDesktop(t) {
|
|
298
|
-
this.setAttribute("justify-items--desktop", t);
|
|
299
|
-
}
|
|
300
|
-
get alignContentDesktop() {
|
|
301
|
-
return this.getAttribute("align-content--desktop");
|
|
302
|
-
}
|
|
303
|
-
set alignContentDesktop(t) {
|
|
304
|
-
this.setAttribute("align-content--desktop", t);
|
|
305
|
-
}
|
|
306
|
-
get alignItemsDesktop() {
|
|
307
|
-
return this.getAttribute("align-items--desktop");
|
|
308
|
-
}
|
|
309
|
-
set alignItemsDesktop(t) {
|
|
310
|
-
this.setAttribute("align-items--desktop", t);
|
|
311
|
-
}
|
|
312
|
-
};
|
|
313
|
-
o.nativeName = "div";
|
|
314
|
-
let a = o;
|
|
315
|
-
customElements.get("px-grid") || customElements.define("px-grid", a);
|
|
316
|
-
export {
|
|
317
|
-
a as Grid,
|
|
318
|
-
y as contentAlignmentValues,
|
|
319
|
-
b as gridColsValues,
|
|
320
|
-
f as itemsAlignmentValues
|
|
1
|
+
import { PxElement as e, cssTokenBreakpoints as t, gapValues as n, log as r } from "@proximus/lavender-common";
|
|
2
|
+
//#region src/grid.css?inline
|
|
3
|
+
var i = ":host{--grid-cols:initial;--grid-cols--mobile:initial;--grid-cols--tablet:initial;--grid-cols--laptop:initial;--grid-cols--desktop:initial;--justify-content:initial;--justify-items:initial;--align-content:initial;--align-items:initial;display:block}.grid{grid-template-columns:repeat(var(--grid-cols), minmax(0, 1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items);display:grid}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media screen and (width<=47.938rem){.grid{grid-template-columns:repeat(var(--grid-cols--mobile,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media screen and (width>=48rem) and (width<=64rem){.grid{grid-template-columns:repeat(var(--grid-cols--tablet,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media screen and (width>=64.0625rem){.grid{grid-template-columns:repeat(var(--grid-cols--laptop,var(--grid-cols)), minmax(0, 1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", a = new CSSStyleSheet();
|
|
4
|
+
a.replaceSync(i);
|
|
5
|
+
var o = [
|
|
6
|
+
"1",
|
|
7
|
+
"2",
|
|
8
|
+
"3",
|
|
9
|
+
"4",
|
|
10
|
+
"5",
|
|
11
|
+
"6",
|
|
12
|
+
"7",
|
|
13
|
+
"8",
|
|
14
|
+
"9",
|
|
15
|
+
"10",
|
|
16
|
+
"11",
|
|
17
|
+
"12"
|
|
18
|
+
], s = [
|
|
19
|
+
"",
|
|
20
|
+
"start",
|
|
21
|
+
"end",
|
|
22
|
+
"center",
|
|
23
|
+
"space-between",
|
|
24
|
+
"space-around",
|
|
25
|
+
"space-evenly",
|
|
26
|
+
"stretch"
|
|
27
|
+
], c = [
|
|
28
|
+
"",
|
|
29
|
+
"start",
|
|
30
|
+
"end",
|
|
31
|
+
"center",
|
|
32
|
+
"stretch"
|
|
33
|
+
], l = t("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .grid`, n, "px-spacing", "--grid-gap"), u = class extends e {
|
|
34
|
+
static {
|
|
35
|
+
this.nativeName = "div";
|
|
36
|
+
}
|
|
37
|
+
constructor() {
|
|
38
|
+
super(a, l), this.template = () => "<div class=\"grid\">\n <slot></slot>\n </div>", this.shadowRoot.innerHTML = this.template();
|
|
39
|
+
}
|
|
40
|
+
static get observedAttributes() {
|
|
41
|
+
return [
|
|
42
|
+
...super.observedAttributes,
|
|
43
|
+
"grid-cols",
|
|
44
|
+
"grid-cols--mobile",
|
|
45
|
+
"grid-cols--tablet",
|
|
46
|
+
"grid-cols--laptop",
|
|
47
|
+
"justify-content",
|
|
48
|
+
"justify-items",
|
|
49
|
+
"align-content",
|
|
50
|
+
"align-items",
|
|
51
|
+
"justify-content--mobile",
|
|
52
|
+
"justify-items--mobile",
|
|
53
|
+
"align-content--mobile",
|
|
54
|
+
"align-items--mobile",
|
|
55
|
+
"justify-content--tablet",
|
|
56
|
+
"justify-items--tablet",
|
|
57
|
+
"align-content--tablet",
|
|
58
|
+
"align-items--tablet",
|
|
59
|
+
"justify-content--laptop",
|
|
60
|
+
"justify-items--laptop",
|
|
61
|
+
"align-content--laptop",
|
|
62
|
+
"align-items--laptop",
|
|
63
|
+
"justify-content--desktop",
|
|
64
|
+
"justify-items--desktop",
|
|
65
|
+
"align-content--desktop",
|
|
66
|
+
"align-items--desktop"
|
|
67
|
+
];
|
|
68
|
+
}
|
|
69
|
+
connectedCallback() {
|
|
70
|
+
this.gap ||= "default", this.alignItems ||= "stretch";
|
|
71
|
+
}
|
|
72
|
+
attributeChangedCallback(e, t, n) {
|
|
73
|
+
if (t !== n) switch (e) {
|
|
74
|
+
case "grid-cols":
|
|
75
|
+
case "grid-cols--mobile":
|
|
76
|
+
case "grid-cols--tablet":
|
|
77
|
+
case "grid-cols--laptop":
|
|
78
|
+
this.updateAttribute(e, t, n, o);
|
|
79
|
+
break;
|
|
80
|
+
case "justify-content":
|
|
81
|
+
case "align-content":
|
|
82
|
+
case "justify-content--mobile":
|
|
83
|
+
case "align-content--mobile":
|
|
84
|
+
case "justify-content--tablet":
|
|
85
|
+
case "align-content--tablet":
|
|
86
|
+
case "justify-content--laptop":
|
|
87
|
+
case "align-content--laptop":
|
|
88
|
+
case "justify-content--desktop":
|
|
89
|
+
case "align-content--desktop":
|
|
90
|
+
this.updateAttribute(e, t, n, s);
|
|
91
|
+
break;
|
|
92
|
+
case "justify-items":
|
|
93
|
+
case "align-items":
|
|
94
|
+
case "justify-items--mobile":
|
|
95
|
+
case "align-items--mobile":
|
|
96
|
+
case "justify-items--tablet":
|
|
97
|
+
case "align-items--tablet":
|
|
98
|
+
case "justify-items--laptop":
|
|
99
|
+
case "align-items--laptop":
|
|
100
|
+
case "justify-items--desktop":
|
|
101
|
+
case "align-items--desktop":
|
|
102
|
+
this.updateAttribute(e, t, n, c);
|
|
103
|
+
break;
|
|
104
|
+
default: super.attributeChangedCallback(e, t, n);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
updateGap(e, t, n) {
|
|
108
|
+
if (!this.checkName(n, t)) {
|
|
109
|
+
r(`"${t}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
|
|
110
|
+
return;
|
|
111
|
+
}
|
|
112
|
+
let i = (e) => {
|
|
113
|
+
e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--grid-gap--mobile", `var(--px-spacing-${e}-mobile)`), this.$el.style.setProperty("--grid-gap--tablet", `var(--px-spacing-${e}-tablet)`), this.$el.style.setProperty("--grid-gap--laptop", `var(--px-spacing-${e}-laptop)`));
|
|
114
|
+
};
|
|
115
|
+
i(e), i(t);
|
|
116
|
+
}
|
|
117
|
+
updateAttribute(e, t, n, i) {
|
|
118
|
+
this.checkName(i, n) ? e === "grid-cols" || e === "grid-cols--mobile" || e === "grid-cols--tablet" || e === "grid-cols--laptop" || e === "grid-cols--desktop" ? this.$el.style.setProperty(`--${e}`, n) : (t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`${e}-${t}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${e}-${n}`)) : r(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join("\", \"")}".`);
|
|
119
|
+
}
|
|
120
|
+
get gap() {
|
|
121
|
+
return this.getAttribute("gap");
|
|
122
|
+
}
|
|
123
|
+
set gap(e) {
|
|
124
|
+
this._updateAttribute("gap", e);
|
|
125
|
+
}
|
|
126
|
+
get gapMobile() {
|
|
127
|
+
return this.getAttribute("gap--mobile");
|
|
128
|
+
}
|
|
129
|
+
set gapMobile(e) {
|
|
130
|
+
this._updateAttribute("gap--mobile", e);
|
|
131
|
+
}
|
|
132
|
+
get gapTablet() {
|
|
133
|
+
return this.getAttribute("gap--tablet");
|
|
134
|
+
}
|
|
135
|
+
set gapTablet(e) {
|
|
136
|
+
this._updateAttribute("gap--tablet", e);
|
|
137
|
+
}
|
|
138
|
+
get gapLaptop() {
|
|
139
|
+
return this.getAttribute("gap--laptop");
|
|
140
|
+
}
|
|
141
|
+
set gapLaptop(e) {
|
|
142
|
+
this._updateAttribute("gap--laptop", e);
|
|
143
|
+
}
|
|
144
|
+
get gridCols() {
|
|
145
|
+
return this.getAttribute("grid-cols");
|
|
146
|
+
}
|
|
147
|
+
set gridCols(e) {
|
|
148
|
+
this._updateAttribute("grid-cols", e);
|
|
149
|
+
}
|
|
150
|
+
get gridColsMobile() {
|
|
151
|
+
return this.getAttribute("grid-cols--mobile");
|
|
152
|
+
}
|
|
153
|
+
set gridColsMobile(e) {
|
|
154
|
+
this._updateAttribute("grid-cols--mobile", e);
|
|
155
|
+
}
|
|
156
|
+
get gridColsTablet() {
|
|
157
|
+
return this.getAttribute("grid-cols--tablet");
|
|
158
|
+
}
|
|
159
|
+
set gridColsTablet(e) {
|
|
160
|
+
this._updateAttribute("grid-cols--tablet", e);
|
|
161
|
+
}
|
|
162
|
+
get gridColsLaptop() {
|
|
163
|
+
return this.getAttribute("grid-cols--laptop");
|
|
164
|
+
}
|
|
165
|
+
set gridColsLaptop(e) {
|
|
166
|
+
this._updateAttribute("grid-cols--laptop", e);
|
|
167
|
+
}
|
|
168
|
+
get justifyContent() {
|
|
169
|
+
return this.getAttribute("justify-content");
|
|
170
|
+
}
|
|
171
|
+
set justifyContent(e) {
|
|
172
|
+
this._updateAttribute("justify-content", e);
|
|
173
|
+
}
|
|
174
|
+
get justifyItems() {
|
|
175
|
+
return this.getAttribute("justify-items");
|
|
176
|
+
}
|
|
177
|
+
set justifyItems(e) {
|
|
178
|
+
this._updateAttribute("justify-items", e);
|
|
179
|
+
}
|
|
180
|
+
get alignContent() {
|
|
181
|
+
return this.getAttribute("align-content");
|
|
182
|
+
}
|
|
183
|
+
set alignContent(e) {
|
|
184
|
+
this._updateAttribute("align-content", e);
|
|
185
|
+
}
|
|
186
|
+
get alignItems() {
|
|
187
|
+
return this.getAttribute("align-items");
|
|
188
|
+
}
|
|
189
|
+
set alignItems(e) {
|
|
190
|
+
this._updateAttribute("align-items", e);
|
|
191
|
+
}
|
|
192
|
+
get justifyContentMobile() {
|
|
193
|
+
return this.getAttribute("justify-content--mobile");
|
|
194
|
+
}
|
|
195
|
+
set justifyContentMobile(e) {
|
|
196
|
+
this._updateAttribute("justify-content--mobile", e);
|
|
197
|
+
}
|
|
198
|
+
get justifyItemsMobile() {
|
|
199
|
+
return this.getAttribute("justify-items--mobile");
|
|
200
|
+
}
|
|
201
|
+
set justifyItemsMobile(e) {
|
|
202
|
+
this._updateAttribute("justify-items--mobile", e);
|
|
203
|
+
}
|
|
204
|
+
get alignContentMobile() {
|
|
205
|
+
return this.getAttribute("align-content--mobile");
|
|
206
|
+
}
|
|
207
|
+
set alignContentMobile(e) {
|
|
208
|
+
this._updateAttribute("align-content--mobile", e);
|
|
209
|
+
}
|
|
210
|
+
get alignItemsMobile() {
|
|
211
|
+
return this.getAttribute("align-items--mobile");
|
|
212
|
+
}
|
|
213
|
+
set alignItemsMobile(e) {
|
|
214
|
+
this._updateAttribute("align-items--mobile", e);
|
|
215
|
+
}
|
|
216
|
+
get justifyContentTablet() {
|
|
217
|
+
return this.getAttribute("justify-content--tablet");
|
|
218
|
+
}
|
|
219
|
+
set justifyContentTablet(e) {
|
|
220
|
+
this._updateAttribute("justify-content--tablet", e);
|
|
221
|
+
}
|
|
222
|
+
get justifyItemsTablet() {
|
|
223
|
+
return this.getAttribute("justify-items--tablet");
|
|
224
|
+
}
|
|
225
|
+
set justifyItemsTablet(e) {
|
|
226
|
+
this._updateAttribute("justify-items--tablet", e);
|
|
227
|
+
}
|
|
228
|
+
get alignContentTablet() {
|
|
229
|
+
return this.getAttribute("align-content--tablet");
|
|
230
|
+
}
|
|
231
|
+
set alignContentTablet(e) {
|
|
232
|
+
this._updateAttribute("align-content--tablet", e);
|
|
233
|
+
}
|
|
234
|
+
get alignItemsTablet() {
|
|
235
|
+
return this.getAttribute("align-items--tablet");
|
|
236
|
+
}
|
|
237
|
+
set alignItemsTablet(e) {
|
|
238
|
+
this._updateAttribute("align-items--tablet", e);
|
|
239
|
+
}
|
|
240
|
+
get justifyContentLaptop() {
|
|
241
|
+
return this.getAttribute("justify-content--laptop");
|
|
242
|
+
}
|
|
243
|
+
set justifyContentLaptop(e) {
|
|
244
|
+
this._updateAttribute("justify-content--laptop", e);
|
|
245
|
+
}
|
|
246
|
+
get justifyItemsLaptop() {
|
|
247
|
+
return this.getAttribute("justify-items--laptop");
|
|
248
|
+
}
|
|
249
|
+
set justifyItemsLaptop(e) {
|
|
250
|
+
this._updateAttribute("justify-items--laptop", e);
|
|
251
|
+
}
|
|
252
|
+
get alignContentLaptop() {
|
|
253
|
+
return this.getAttribute("align-content--laptop");
|
|
254
|
+
}
|
|
255
|
+
set alignContentLaptop(e) {
|
|
256
|
+
this._updateAttribute("align-content--laptop", e);
|
|
257
|
+
}
|
|
258
|
+
get alignItemsLaptop() {
|
|
259
|
+
return this.getAttribute("align-items--laptop");
|
|
260
|
+
}
|
|
261
|
+
set alignItemsLaptop(e) {
|
|
262
|
+
this._updateAttribute("align-items--laptop", e);
|
|
263
|
+
}
|
|
264
|
+
get justifyContentDesktop() {
|
|
265
|
+
return this.getAttribute("justify-content--desktop");
|
|
266
|
+
}
|
|
267
|
+
set justifyContentDesktop(e) {
|
|
268
|
+
this._updateAttribute("justify-content--desktop", e);
|
|
269
|
+
}
|
|
270
|
+
get justifyItemsDesktop() {
|
|
271
|
+
return this.getAttribute("justify-items--desktop");
|
|
272
|
+
}
|
|
273
|
+
set justifyItemsDesktop(e) {
|
|
274
|
+
this._updateAttribute("justify-items--desktop", e);
|
|
275
|
+
}
|
|
276
|
+
get alignContentDesktop() {
|
|
277
|
+
return this.getAttribute("align-content--desktop");
|
|
278
|
+
}
|
|
279
|
+
set alignContentDesktop(e) {
|
|
280
|
+
this._updateAttribute("align-content--desktop", e);
|
|
281
|
+
}
|
|
282
|
+
get alignItemsDesktop() {
|
|
283
|
+
return this.getAttribute("align-items--desktop");
|
|
284
|
+
}
|
|
285
|
+
set alignItemsDesktop(e) {
|
|
286
|
+
this._updateAttribute("align-items--desktop", e);
|
|
287
|
+
}
|
|
321
288
|
};
|
|
289
|
+
customElements.get("px-grid") || customElements.define("px-grid", u);
|
|
290
|
+
//#endregion
|
|
291
|
+
export { u as Grid, s as contentAlignmentValues, o as gridColsValues, c as itemsAlignmentValues };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-grid",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.170",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
6
|
"files": [
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"clean": "rm -rf dist",
|
|
13
13
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
14
14
|
"test": "vitest run --coverage",
|
|
15
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
15
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
16
16
|
},
|
|
17
17
|
"publishConfig": {
|
|
18
18
|
"access": "public"
|