@proximus/lavender-grid 1.0.0-alpha.9 → 1.0.0
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 +71 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +325 -0
- package/package.json +9 -17
- package/dist/PxGrid.es.js +0 -473
package/dist/Grid.d.ts
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { AttributeBreakpointHandlerDelegate, PxElement } from '@proximus/lavender-common';
|
|
2
|
+
export declare const gridColsValues: string[];
|
|
3
|
+
export declare const contentAlignmentValues: string[];
|
|
4
|
+
export declare const itemsAlignmentValues: string[];
|
|
5
|
+
export declare class Grid extends PxElement<HTMLDivElement> {
|
|
6
|
+
static nativeName: string;
|
|
7
|
+
template: () => string;
|
|
8
|
+
gapAttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
9
|
+
constructor();
|
|
10
|
+
static get observedAttributes(): string[];
|
|
11
|
+
connectedCallback(): void;
|
|
12
|
+
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
13
|
+
updateGap(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
14
|
+
updateAttribute(attrName: string, oldValue: string, newValue: string, attrValues: string[]): void;
|
|
15
|
+
get gap(): string;
|
|
16
|
+
set gap(value: string);
|
|
17
|
+
get gapMobile(): string;
|
|
18
|
+
set gapMobile(value: string);
|
|
19
|
+
get gapTablet(): string;
|
|
20
|
+
set gapTablet(value: string);
|
|
21
|
+
get gapLaptop(): string;
|
|
22
|
+
set gapLaptop(value: string);
|
|
23
|
+
get gridCols(): string;
|
|
24
|
+
set gridCols(value: string);
|
|
25
|
+
get gridColsMobile(): string;
|
|
26
|
+
set gridColsMobile(value: string);
|
|
27
|
+
get gridColsTablet(): string;
|
|
28
|
+
set gridColsTablet(value: string);
|
|
29
|
+
get gridColsLaptop(): string;
|
|
30
|
+
set gridColsLaptop(value: string);
|
|
31
|
+
get justifyContent(): string;
|
|
32
|
+
set justifyContent(value: string);
|
|
33
|
+
get justifyItems(): string;
|
|
34
|
+
set justifyItems(value: string);
|
|
35
|
+
get alignContent(): string;
|
|
36
|
+
set alignContent(value: string);
|
|
37
|
+
get alignItems(): string;
|
|
38
|
+
set alignItems(value: string);
|
|
39
|
+
get justifyContentMobile(): string;
|
|
40
|
+
set justifyContentMobile(value: string);
|
|
41
|
+
get justifyItemsMobile(): string;
|
|
42
|
+
set justifyItemsMobile(value: string);
|
|
43
|
+
get alignContentMobile(): string;
|
|
44
|
+
set alignContentMobile(value: string);
|
|
45
|
+
get alignItemsMobile(): string;
|
|
46
|
+
set alignItemsMobile(value: string);
|
|
47
|
+
get justifyContentTablet(): string;
|
|
48
|
+
set justifyContentTablet(value: string);
|
|
49
|
+
get justifyItemsTablet(): string;
|
|
50
|
+
set justifyItemsTablet(value: string);
|
|
51
|
+
get alignContentTablet(): string;
|
|
52
|
+
set alignContentTablet(value: string);
|
|
53
|
+
get alignItemsTablet(): string;
|
|
54
|
+
set alignItemsTablet(value: string);
|
|
55
|
+
get justifyContentLaptop(): string;
|
|
56
|
+
set justifyContentLaptop(value: string);
|
|
57
|
+
get justifyItemsLaptop(): string;
|
|
58
|
+
set justifyItemsLaptop(value: string);
|
|
59
|
+
get alignContentLaptop(): string;
|
|
60
|
+
set alignContentLaptop(value: string);
|
|
61
|
+
get alignItemsLaptop(): string;
|
|
62
|
+
set alignItemsLaptop(value: string);
|
|
63
|
+
get justifyContentDesktop(): string;
|
|
64
|
+
set justifyContentDesktop(value: string);
|
|
65
|
+
get justifyItemsDesktop(): string;
|
|
66
|
+
set justifyItemsDesktop(value: string);
|
|
67
|
+
get alignContentDesktop(): string;
|
|
68
|
+
set alignContentDesktop(value: string);
|
|
69
|
+
get alignItemsDesktop(): string;
|
|
70
|
+
set alignItemsDesktop(value: string);
|
|
71
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Grid';
|
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
import { PxElement as r, cssTokenBreakpoints as g, gapValues as u, AttributeBreakpointHandlerDelegate as p } from "@proximus/lavender-common";
|
|
2
|
+
const m = ":host{display:block;--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}.grid{display: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)}.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 only screen and (max-width: 767px){.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 only screen and (min-width: 768px) and (max-width: 1024px){.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 only screen and (min-width: 1025px){.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}}", o = new CSSStyleSheet();
|
|
3
|
+
o.replaceSync(m);
|
|
4
|
+
const b = [
|
|
5
|
+
"1",
|
|
6
|
+
"2",
|
|
7
|
+
"3",
|
|
8
|
+
"4",
|
|
9
|
+
"5",
|
|
10
|
+
"6",
|
|
11
|
+
"7",
|
|
12
|
+
"8",
|
|
13
|
+
"9",
|
|
14
|
+
"10",
|
|
15
|
+
"11",
|
|
16
|
+
"12"
|
|
17
|
+
], y = [
|
|
18
|
+
"",
|
|
19
|
+
"start",
|
|
20
|
+
"end",
|
|
21
|
+
"center",
|
|
22
|
+
"space-between",
|
|
23
|
+
"space-around",
|
|
24
|
+
"space-evenly",
|
|
25
|
+
"stretch"
|
|
26
|
+
], f = ["", "start", "end", "center", "stretch"], j = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .grid`, d = "px-spacing", l = class l extends r {
|
|
27
|
+
constructor() {
|
|
28
|
+
super(
|
|
29
|
+
o,
|
|
30
|
+
g(
|
|
31
|
+
"gap",
|
|
32
|
+
j,
|
|
33
|
+
u,
|
|
34
|
+
d,
|
|
35
|
+
"--grid-gap"
|
|
36
|
+
)
|
|
37
|
+
), this.template = () => `<div class="grid">
|
|
38
|
+
<slot></slot>
|
|
39
|
+
</div>`, this.gapAttributeDelegate = new p(
|
|
40
|
+
this,
|
|
41
|
+
"gap",
|
|
42
|
+
(t) => t,
|
|
43
|
+
"--gap"
|
|
44
|
+
), this.shadowRoot.innerHTML = this.template();
|
|
45
|
+
}
|
|
46
|
+
static get observedAttributes() {
|
|
47
|
+
return [
|
|
48
|
+
...super.observedAttributes,
|
|
49
|
+
"grid-cols",
|
|
50
|
+
"grid-cols--mobile",
|
|
51
|
+
"grid-cols--tablet",
|
|
52
|
+
"grid-cols--laptop",
|
|
53
|
+
"justify-content",
|
|
54
|
+
"justify-items",
|
|
55
|
+
"align-content",
|
|
56
|
+
"align-items",
|
|
57
|
+
"justify-content--mobile",
|
|
58
|
+
"justify-items--mobile",
|
|
59
|
+
"align-content--mobile",
|
|
60
|
+
"align-items--mobile",
|
|
61
|
+
"justify-content--tablet",
|
|
62
|
+
"justify-items--tablet",
|
|
63
|
+
"align-content--tablet",
|
|
64
|
+
"align-items--tablet",
|
|
65
|
+
"justify-content--laptop",
|
|
66
|
+
"justify-items--laptop",
|
|
67
|
+
"align-content--laptop",
|
|
68
|
+
"align-items--laptop",
|
|
69
|
+
"justify-content--desktop",
|
|
70
|
+
"justify-items--desktop",
|
|
71
|
+
"align-content--desktop",
|
|
72
|
+
"align-items--desktop"
|
|
73
|
+
];
|
|
74
|
+
}
|
|
75
|
+
connectedCallback() {
|
|
76
|
+
super.connectedCallback(), this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
|
|
77
|
+
}
|
|
78
|
+
attributeChangedCallback(t, e, n) {
|
|
79
|
+
if (e !== n)
|
|
80
|
+
switch (t) {
|
|
81
|
+
case "grid-cols":
|
|
82
|
+
case "grid-cols--mobile":
|
|
83
|
+
case "grid-cols--tablet":
|
|
84
|
+
case "grid-cols--laptop":
|
|
85
|
+
this.updateAttribute(t, e, n, b);
|
|
86
|
+
break;
|
|
87
|
+
case "justify-content":
|
|
88
|
+
case "align-content":
|
|
89
|
+
case "justify-content--mobile":
|
|
90
|
+
case "align-content--mobile":
|
|
91
|
+
case "justify-content--tablet":
|
|
92
|
+
case "align-content--tablet":
|
|
93
|
+
case "justify-content--laptop":
|
|
94
|
+
case "align-content--laptop":
|
|
95
|
+
case "justify-content--desktop":
|
|
96
|
+
case "align-content--desktop":
|
|
97
|
+
this.updateAttribute(
|
|
98
|
+
t,
|
|
99
|
+
e,
|
|
100
|
+
n,
|
|
101
|
+
y
|
|
102
|
+
);
|
|
103
|
+
break;
|
|
104
|
+
case "justify-items":
|
|
105
|
+
case "align-items":
|
|
106
|
+
case "justify-items--mobile":
|
|
107
|
+
case "align-items--mobile":
|
|
108
|
+
case "justify-items--tablet":
|
|
109
|
+
case "align-items--tablet":
|
|
110
|
+
case "justify-items--laptop":
|
|
111
|
+
case "align-items--laptop":
|
|
112
|
+
case "justify-items--desktop":
|
|
113
|
+
case "align-items--desktop":
|
|
114
|
+
this.updateAttribute(
|
|
115
|
+
t,
|
|
116
|
+
e,
|
|
117
|
+
n,
|
|
118
|
+
f
|
|
119
|
+
);
|
|
120
|
+
break;
|
|
121
|
+
default:
|
|
122
|
+
super.attributeChangedCallback(t, e, n);
|
|
123
|
+
break;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
updateGap(t, e, n) {
|
|
127
|
+
if (!this.checkName(n, e)) {
|
|
128
|
+
console.error(`${e} is not a valid gap value`);
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
const s = (i) => {
|
|
132
|
+
i !== null && i !== "" && i !== "default" && (this.$el.style.setProperty(
|
|
133
|
+
"--grid-gap--mobile",
|
|
134
|
+
`var(--px-spacing-${i}-mobile)`
|
|
135
|
+
), this.$el.style.setProperty(
|
|
136
|
+
"--grid-gap--tablet",
|
|
137
|
+
`var(--px-spacing-${i}-tablet)`
|
|
138
|
+
), this.$el.style.setProperty(
|
|
139
|
+
"--grid-gap--laptop",
|
|
140
|
+
`var(--px-spacing-${i}-desktop)`
|
|
141
|
+
));
|
|
142
|
+
};
|
|
143
|
+
s(t), s(e);
|
|
144
|
+
}
|
|
145
|
+
updateAttribute(t, e, n, s) {
|
|
146
|
+
this.checkName(s, n) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" ? this.$el.style.setProperty(`--${t}`, n) : (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), n !== null && n !== "" && n !== "default" && this.$el.classList.toggle(`${t}-${n}`)) : console.error(`${n} is not an allowed ${t} value`);
|
|
147
|
+
}
|
|
148
|
+
get gap() {
|
|
149
|
+
return this.getAttribute("gap");
|
|
150
|
+
}
|
|
151
|
+
set gap(t) {
|
|
152
|
+
this.setAttribute("gap", t);
|
|
153
|
+
}
|
|
154
|
+
get gapMobile() {
|
|
155
|
+
return this.getAttribute("gap--mobile");
|
|
156
|
+
}
|
|
157
|
+
set gapMobile(t) {
|
|
158
|
+
this.setAttribute("gap--mobile", t);
|
|
159
|
+
}
|
|
160
|
+
get gapTablet() {
|
|
161
|
+
return this.getAttribute("gap--tablet");
|
|
162
|
+
}
|
|
163
|
+
set gapTablet(t) {
|
|
164
|
+
this.setAttribute("gap--tablet", t);
|
|
165
|
+
}
|
|
166
|
+
get gapLaptop() {
|
|
167
|
+
return this.getAttribute("gap--laptop");
|
|
168
|
+
}
|
|
169
|
+
set gapLaptop(t) {
|
|
170
|
+
this.setAttribute("gap--laptop", t);
|
|
171
|
+
}
|
|
172
|
+
get gridCols() {
|
|
173
|
+
return this.getAttribute("grid-cols");
|
|
174
|
+
}
|
|
175
|
+
set gridCols(t) {
|
|
176
|
+
this.setAttribute("grid-cols", t);
|
|
177
|
+
}
|
|
178
|
+
get gridColsMobile() {
|
|
179
|
+
return this.getAttribute("grid-cols--mobile");
|
|
180
|
+
}
|
|
181
|
+
set gridColsMobile(t) {
|
|
182
|
+
this.setAttribute("grid-cols--mobile", t);
|
|
183
|
+
}
|
|
184
|
+
get gridColsTablet() {
|
|
185
|
+
return this.getAttribute("grid-cols--tablet");
|
|
186
|
+
}
|
|
187
|
+
set gridColsTablet(t) {
|
|
188
|
+
this.setAttribute("grid-cols--tablet", t);
|
|
189
|
+
}
|
|
190
|
+
get gridColsLaptop() {
|
|
191
|
+
return this.getAttribute("grid-cols--laptop");
|
|
192
|
+
}
|
|
193
|
+
set gridColsLaptop(t) {
|
|
194
|
+
this.setAttribute("grid-cols--laptop", t);
|
|
195
|
+
}
|
|
196
|
+
get justifyContent() {
|
|
197
|
+
return this.getAttribute("justify-content");
|
|
198
|
+
}
|
|
199
|
+
set justifyContent(t) {
|
|
200
|
+
this.setAttribute("justify-content", t);
|
|
201
|
+
}
|
|
202
|
+
get justifyItems() {
|
|
203
|
+
return this.getAttribute("justify-items");
|
|
204
|
+
}
|
|
205
|
+
set justifyItems(t) {
|
|
206
|
+
this.setAttribute("justify-items", t);
|
|
207
|
+
}
|
|
208
|
+
get alignContent() {
|
|
209
|
+
return this.getAttribute("align-content");
|
|
210
|
+
}
|
|
211
|
+
set alignContent(t) {
|
|
212
|
+
this.setAttribute("align-content", t);
|
|
213
|
+
}
|
|
214
|
+
get alignItems() {
|
|
215
|
+
return this.getAttribute("align-items");
|
|
216
|
+
}
|
|
217
|
+
set alignItems(t) {
|
|
218
|
+
this.setAttribute("align-items", t);
|
|
219
|
+
}
|
|
220
|
+
get justifyContentMobile() {
|
|
221
|
+
return this.getAttribute("justify-content--mobile");
|
|
222
|
+
}
|
|
223
|
+
set justifyContentMobile(t) {
|
|
224
|
+
this.setAttribute("justify-content--mobile", t);
|
|
225
|
+
}
|
|
226
|
+
get justifyItemsMobile() {
|
|
227
|
+
return this.getAttribute("justify-items--mobile");
|
|
228
|
+
}
|
|
229
|
+
set justifyItemsMobile(t) {
|
|
230
|
+
this.setAttribute("justify-items--mobile", t);
|
|
231
|
+
}
|
|
232
|
+
get alignContentMobile() {
|
|
233
|
+
return this.getAttribute("align-content--mobile");
|
|
234
|
+
}
|
|
235
|
+
set alignContentMobile(t) {
|
|
236
|
+
this.setAttribute("align-content--mobile", t);
|
|
237
|
+
}
|
|
238
|
+
get alignItemsMobile() {
|
|
239
|
+
return this.getAttribute("align-items--mobile");
|
|
240
|
+
}
|
|
241
|
+
set alignItemsMobile(t) {
|
|
242
|
+
this.setAttribute("align-items--mobile", t);
|
|
243
|
+
}
|
|
244
|
+
get justifyContentTablet() {
|
|
245
|
+
return this.getAttribute("justify-content--tablet");
|
|
246
|
+
}
|
|
247
|
+
set justifyContentTablet(t) {
|
|
248
|
+
this.setAttribute("justify-content--tablet", t);
|
|
249
|
+
}
|
|
250
|
+
get justifyItemsTablet() {
|
|
251
|
+
return this.getAttribute("justify-items--tablet");
|
|
252
|
+
}
|
|
253
|
+
set justifyItemsTablet(t) {
|
|
254
|
+
this.setAttribute("justify-items--tablet", t);
|
|
255
|
+
}
|
|
256
|
+
get alignContentTablet() {
|
|
257
|
+
return this.getAttribute("align-content--tablet");
|
|
258
|
+
}
|
|
259
|
+
set alignContentTablet(t) {
|
|
260
|
+
this.setAttribute("align-content--tablet", t);
|
|
261
|
+
}
|
|
262
|
+
get alignItemsTablet() {
|
|
263
|
+
return this.getAttribute("align-items--tablet");
|
|
264
|
+
}
|
|
265
|
+
set alignItemsTablet(t) {
|
|
266
|
+
this.setAttribute("align-items--tablet", t);
|
|
267
|
+
}
|
|
268
|
+
get justifyContentLaptop() {
|
|
269
|
+
return this.getAttribute("justify-content--laptop");
|
|
270
|
+
}
|
|
271
|
+
set justifyContentLaptop(t) {
|
|
272
|
+
this.setAttribute("justify-content--laptop", t);
|
|
273
|
+
}
|
|
274
|
+
get justifyItemsLaptop() {
|
|
275
|
+
return this.getAttribute("justify-items--laptop");
|
|
276
|
+
}
|
|
277
|
+
set justifyItemsLaptop(t) {
|
|
278
|
+
this.setAttribute("justify-items--laptop", t);
|
|
279
|
+
}
|
|
280
|
+
get alignContentLaptop() {
|
|
281
|
+
return this.getAttribute("align-content--laptop");
|
|
282
|
+
}
|
|
283
|
+
set alignContentLaptop(t) {
|
|
284
|
+
this.setAttribute("align-content--laptop", t);
|
|
285
|
+
}
|
|
286
|
+
get alignItemsLaptop() {
|
|
287
|
+
return this.getAttribute("align-items--laptop");
|
|
288
|
+
}
|
|
289
|
+
set alignItemsLaptop(t) {
|
|
290
|
+
this.setAttribute("align-items--laptop", t);
|
|
291
|
+
}
|
|
292
|
+
get justifyContentDesktop() {
|
|
293
|
+
return this.getAttribute("justify-content--desktop");
|
|
294
|
+
}
|
|
295
|
+
set justifyContentDesktop(t) {
|
|
296
|
+
this.setAttribute("justify-content--desktop", t);
|
|
297
|
+
}
|
|
298
|
+
get justifyItemsDesktop() {
|
|
299
|
+
return this.getAttribute("justify-items--desktop");
|
|
300
|
+
}
|
|
301
|
+
set justifyItemsDesktop(t) {
|
|
302
|
+
this.setAttribute("justify-items--desktop", t);
|
|
303
|
+
}
|
|
304
|
+
get alignContentDesktop() {
|
|
305
|
+
return this.getAttribute("align-content--desktop");
|
|
306
|
+
}
|
|
307
|
+
set alignContentDesktop(t) {
|
|
308
|
+
this.setAttribute("align-content--desktop", t);
|
|
309
|
+
}
|
|
310
|
+
get alignItemsDesktop() {
|
|
311
|
+
return this.getAttribute("align-items--desktop");
|
|
312
|
+
}
|
|
313
|
+
set alignItemsDesktop(t) {
|
|
314
|
+
this.setAttribute("align-items--desktop", t);
|
|
315
|
+
}
|
|
316
|
+
};
|
|
317
|
+
l.nativeName = "div";
|
|
318
|
+
let a = l;
|
|
319
|
+
customElements.get("px-grid") || customElements.define("px-grid", a);
|
|
320
|
+
export {
|
|
321
|
+
a as Grid,
|
|
322
|
+
y as contentAlignmentValues,
|
|
323
|
+
b as gridColsValues,
|
|
324
|
+
f as itemsAlignmentValues
|
|
325
|
+
};
|
package/package.json
CHANGED
|
@@ -1,30 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-grid",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "",
|
|
5
|
-
"main": "
|
|
5
|
+
"main": "dist/index.es.js",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
8
8
|
],
|
|
9
9
|
"type": "module",
|
|
10
10
|
"scripts": {
|
|
11
|
-
"
|
|
12
|
-
"
|
|
11
|
+
"transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
|
|
12
|
+
"clean": "rm -rf dist",
|
|
13
|
+
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
14
|
+
"test": "vitest run --coverage",
|
|
15
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../custom-elements-manifest.config.js --outdir dist"
|
|
13
16
|
},
|
|
14
17
|
"publishConfig": {
|
|
15
18
|
"access": "public"
|
|
16
19
|
},
|
|
17
|
-
"
|
|
18
|
-
|
|
19
|
-
"publish": {
|
|
20
|
-
"assets": [
|
|
21
|
-
"CHANGELOG.md",
|
|
22
|
-
"package.json",
|
|
23
|
-
"dist/*.js",
|
|
24
|
-
"dist/css/**/*.css"
|
|
25
|
-
]
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
"gitHead": "0820404474bf245bd128ec808c3ba120cd94da21"
|
|
20
|
+
"customElements": "dist/custom-elements.json",
|
|
21
|
+
"web-types": "./dist/web-types.json"
|
|
30
22
|
}
|
package/dist/PxGrid.es.js
DELETED
|
@@ -1,473 +0,0 @@
|
|
|
1
|
-
import { PxElement as p, gapValues as d } from "@proximus/lavender-common";
|
|
2
|
-
const u = ":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:grid;height:100%}.grid{display:grid;gap:var(--px-spacing-component-default-horizontal);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)}.grid ::slotted(px-grid-item){display:grid}.grid.flex{display:flex;flex-flow:row wrap}.grid.flex ::slotted(px-grid-item){display:flex;flex:1 1 0px}.grid.flex ::slotted(px-grid-item[shrink]){flex:0 0 auto}.gap-expanded{gap:var(--px-spacing-component-expanded-horizontal)}.gap-none{gap:0!important}.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 only screen and (max-width: 767px){.grid{gap:var(--px-spacing-component-default-horizontal-mobile);grid-template-columns:repeat(var(--grid-cols-mobile, var(--grid-cols)),minmax(0,1fr))}.gap-expanded{gap:var(--px-spacing-component-expanded-horizontal-mobile)}.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 only screen and (min-width: 768px) and (max-width: 1024px){.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 only screen and (min-width: 1025px){.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}}", g = '.grid-item{display:grid;width:100%}::slotted([col-span="1"]){grid-column:span 1 / span 1}::slotted([col-span="2"]){grid-column:span 2 / span 2}::slotted([col-span="3"]){grid-column:span 3 / span 3}::slotted([col-span="4"]){grid-column:span 4 / span 4}::slotted([col-span="5"]){grid-column:span 5 / span 5}::slotted([col-span="6"]){grid-column:span 6 / span 6}::slotted([col-span="7"]){grid-column:span 7 / span 7}::slotted([col-span="8"]){grid-column:span 8 / span 8}::slotted([col-span="9"]){grid-column:span 9 / span 9}::slotted([col-span="10"]){grid-column:span 10 / span 10}::slotted([col-span="11"]){grid-column:span 11 / span 11}::slotted([col-span="12"]){grid-column:span 12 / span 12}::slotted([col-span="full"]){grid-column:1 / -1}::slotted([order="1"]){order:1}::slotted([order="2"]){order:2}::slotted([order="3"]){order:3}::slotted([order="4"]){order:4}::slotted([order="5"]){order:5}::slotted([order="6"]){order:6}::slotted([order="first"]){order:-9999}::slotted([order="last"]){order:9999}::slotted([order="none"]){order:0}::slotted([justify-self="auto"]){justify-self:auto}::slotted([justify-self="start"]){justify-self:start}::slotted([justify-self="end"]){justify-self:end}::slotted([justify-self="center"]){justify-self:center}::slotted([justify-self="stretch"]){justify-self:stretch}::slotted([align-self="auto"]){align-self:auto}::slotted([align-self="start"]){align-self:start}::slotted([align-self="end"]){align-self:end}::slotted([align-self="center"]){align-self:center}::slotted([align-self="stretch"]){align-self:stretch}::slotted([place-self="auto"]){place-self:auto}::slotted([place-self="start"]){place-self:start}::slotted([place-self="end"]){place-self:end}::slotted([place-self="center"]){place-self:center}::slotted([place-self="stretch"]){place-self:stretch}@media only screen and (max-width: 767px){::slotted([col-mobile="auto"]){grid-column:auto}::slotted([col-span-mobile="1"]){grid-column:span 1 / span 1}::slotted([col-span-mobile="2"]){grid-column:span 2 / span 2}::slotted([col-span-mobile="3"]){grid-column:span 3 / span 3}::slotted([col-span-mobile="4"]){grid-column:span 4 / span 4}::slotted([col-span-mobile="5"]){grid-column:span 5 / span 5}::slotted([col-span-mobile="6"]){grid-column:span 6 / span 6}::slotted([col-span-mobile="7"]){grid-column:span 7 / span 7}::slotted([col-span-mobile="8"]){grid-column:span 8 / span 8}::slotted([col-span-mobile="9"]){grid-column:span 9 / span 9}::slotted([col-span-mobile="10"]){grid-column:span 10 / span 10}::slotted([col-span-mobile="11"]){grid-column:span 11 / span 11}::slotted([col-span-mobile="12"]){grid-column:span 12 / span 12}::slotted([col-span-mobile="full"]){grid-column:1 / -1}::slotted([order-mobile="1"]){order:1}::slotted([order-mobile="2"]){order:2}::slotted([order-mobile="3"]){order:3}::slotted([order-mobile="4"]){order:4}::slotted([order-mobile="5"]){order:5}::slotted([order-mobile="6"]){order:6}::slotted([order-mobile="first"]){order:-9999}::slotted([order-mobile="last"]){order:9999}::slotted([order-mobile="none"]){order:0}::slotted([justify-self-mobile="auto"]){justify-self:auto}::slotted([justify-self-mobile="start"]){justify-self:start}::slotted([justify-self-mobile="end"]){justify-self:end}::slotted([justify-self-mobile="center"]){justify-self:center}::slotted([justify-self-mobile="stretch"]){justify-self:stretch}::slotted([align-self-mobile="auto"]){align-self:auto}::slotted([align-self-mobile="start"]){align-self:start}::slotted([align-self-mobile="end"]){align-self:end}::slotted([align-self-mobile="center"]){align-self:center}::slotted([align-self-mobile="stretch"]){align-self:stretch}::slotted([place-self-mobile="auto"]){place-self:auto}::slotted([place-self-mobile="start"]){place-self:start}::slotted([place-self-mobile="end"]){place-self:end}::slotted([place-self-mobile="center"]){place-self:center}::slotted([place-self-mobile="stretch"]){place-self:stretch}}@media only screen and (min-width: 768px) and (max-width: 1024px){::slotted([col-tablet="auto"]){grid-column:auto}::slotted([col-span-tablet="1"]){grid-column:span 1 / span 1}::slotted([col-span-tablet="2"]){grid-column:span 2 / span 2}::slotted([col-span-tablet="3"]){grid-column:span 3 / span 3}::slotted([col-span-tablet="4"]){grid-column:span 4 / span 4}::slotted([col-span-tablet="5"]){grid-column:span 5 / span 5}::slotted([col-span-tablet="6"]){grid-column:span 6 / span 6}::slotted([col-span-tablet="7"]){grid-column:span 7 / span 7}::slotted([col-span-tablet="8"]){grid-column:span 8 / span 8}::slotted([col-span-tablet="9"]){grid-column:span 9 / span 9}::slotted([col-span-tablet="10"]){grid-column:span 10 / span 10}::slotted([col-span-tablet="11"]){grid-column:span 11 / span 11}::slotted([col-span-tablet="12"]){grid-column:span 12 / span 12}::slotted([col-span-tablet="full"]){grid-column:1 / -1}::slotted([order-tablet="1"]){order:1}::slotted([order-tablet="2"]){order:2}::slotted([order-tablet="3"]){order:3}::slotted([order-tablet="4"]){order:4}::slotted([order-tablet="5"]){order:5}::slotted([order-tablet="6"]){order:6}::slotted([order-tablet="first"]){order:-9999}::slotted([order-tablet="last"]){order:9999}::slotted([order-tablet="none"]){order:0}::slotted([justify-self-tablet="auto"]){justify-self:auto}::slotted([justify-self-tablet="start"]){justify-self:start}::slotted([justify-self-tablet="end"]){justify-self:end}::slotted([justify-self-tablet="center"]){justify-self:center}::slotted([justify-self-tablet="stretch"]){justify-self:stretch}::slotted([align-self-tablet="auto"]){align-self:auto}::slotted([align-self-tablet="start"]){align-self:start}::slotted([align-self-tablet="end"]){align-self:end}::slotted([align-self-tablet="center"]){align-self:center}::slotted([align-self-tablet="stretch"]){align-self:stretch}::slotted([place-self-tablet="auto"]){place-self:auto}::slotted([place-self-tablet="start"]){place-self:start}::slotted([place-self-tablet="end"]){place-self:end}::slotted([place-self-tablet="center"]){place-self:center}::slotted([place-self-tablet="stretch"]){place-self:stretch}}@media only screen and (min-width: 1025px){::slotted([col-laptop="auto"]){grid-column:auto}::slotted([col-span-laptop="1"]){grid-column:span 1 / span 1}::slotted([col-span-laptop="2"]){grid-column:span 2 / span 2}::slotted([col-span-laptop="3"]){grid-column:span 3 / span 3}::slotted([col-span-laptop="4"]){grid-column:span 4 / span 4}::slotted([col-span-laptop="5"]){grid-column:span 5 / span 5}::slotted([col-span-laptop="6"]){grid-column:span 6 / span 6}::slotted([col-span-laptop="7"]){grid-column:span 7 / span 7}::slotted([col-span-laptop="8"]){grid-column:span 8 / span 8}::slotted([col-span-laptop="9"]){grid-column:span 9 / span 9}::slotted([col-span-laptop="10"]){grid-column:span 10 / span 10}::slotted([col-span-laptop="11"]){grid-column:span 11 / span 11}::slotted([col-span-laptop="12"]){grid-column:span 12 / span 12}::slotted([col-span-laptop="full"]){grid-column:1 / -1}::slotted([justify-self-laptop="auto"]){justify-self:auto}::slotted([justify-self-laptop="start"]){justify-self:start}::slotted([justify-self-laptop="end"]){justify-self:end}::slotted([justify-self-laptop="center"]){justify-self:center}::slotted([justify-self-laptop="stretch"]){justify-self:stretch}::slotted([align-self-laptop="auto"]){align-self:auto}::slotted([align-self-laptop="start"]){align-self:start}::slotted([align-self-laptop="end"]){align-self:end}::slotted([align-self-laptop="center"]){align-self:center}::slotted([align-self-laptop="stretch"]){align-self:stretch}::slotted([place-self-laptop="auto"]){place-self:auto}::slotted([place-self-laptop="start"]){place-self:start}::slotted([place-self-laptop="end"]){place-self:end}::slotted([place-self-laptop="center"]){place-self:center}::slotted([place-self-laptop="stretch"]){place-self:stretch}}', a = new CSSStyleSheet();
|
|
3
|
-
a.replaceSync(u);
|
|
4
|
-
const r = new CSSStyleSheet();
|
|
5
|
-
r.replaceSync(g);
|
|
6
|
-
const f = [
|
|
7
|
-
"1",
|
|
8
|
-
"2",
|
|
9
|
-
"3",
|
|
10
|
-
"4",
|
|
11
|
-
"5",
|
|
12
|
-
"6",
|
|
13
|
-
"7",
|
|
14
|
-
"8",
|
|
15
|
-
"9",
|
|
16
|
-
"10",
|
|
17
|
-
"11",
|
|
18
|
-
"12"
|
|
19
|
-
], b = [
|
|
20
|
-
"",
|
|
21
|
-
"start",
|
|
22
|
-
"end",
|
|
23
|
-
"center",
|
|
24
|
-
"space-between",
|
|
25
|
-
"space-around",
|
|
26
|
-
"space-evenly",
|
|
27
|
-
"stretch"
|
|
28
|
-
], m = ["", "start", "end", "center"], i = class i extends p {
|
|
29
|
-
constructor() {
|
|
30
|
-
super(a, r), this.template = () => `<div class="grid">
|
|
31
|
-
<slot></slot>
|
|
32
|
-
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
33
|
-
}
|
|
34
|
-
static get observedAttributes() {
|
|
35
|
-
return [
|
|
36
|
-
...super.observedAttributes,
|
|
37
|
-
"gap",
|
|
38
|
-
"grid-cols",
|
|
39
|
-
"grid-cols-mobile",
|
|
40
|
-
"grid-cols-tablet",
|
|
41
|
-
"grid-cols-laptop",
|
|
42
|
-
"justify-content",
|
|
43
|
-
"justify-items",
|
|
44
|
-
"align-content",
|
|
45
|
-
"align-items",
|
|
46
|
-
"justify-content-mobile",
|
|
47
|
-
"justify-items-mobile",
|
|
48
|
-
"align-content-mobile",
|
|
49
|
-
"align-items-mobile",
|
|
50
|
-
"justify-content-tablet",
|
|
51
|
-
"justify-items-tablet",
|
|
52
|
-
"align-content-tablet",
|
|
53
|
-
"align-items-tablet",
|
|
54
|
-
"justify-content-laptop",
|
|
55
|
-
"justify-items-laptop",
|
|
56
|
-
"align-content-laptop",
|
|
57
|
-
"align-items-laptop",
|
|
58
|
-
"justify-content-desktop",
|
|
59
|
-
"justify-items-desktop",
|
|
60
|
-
"align-content-desktop",
|
|
61
|
-
"align-items-desktop"
|
|
62
|
-
];
|
|
63
|
-
}
|
|
64
|
-
get gap() {
|
|
65
|
-
return this.getAttribute("gap");
|
|
66
|
-
}
|
|
67
|
-
set gap(t) {
|
|
68
|
-
this.setAttribute("gap", t);
|
|
69
|
-
}
|
|
70
|
-
get gridCols() {
|
|
71
|
-
return this.getAttribute("grid-cols");
|
|
72
|
-
}
|
|
73
|
-
set gridCols(t) {
|
|
74
|
-
this.setAttribute("grid-cols", t);
|
|
75
|
-
}
|
|
76
|
-
get gridColsMobile() {
|
|
77
|
-
return this.getAttribute("grid-cols-mobile");
|
|
78
|
-
}
|
|
79
|
-
set gridColsMobile(t) {
|
|
80
|
-
this.setAttribute("grid-cols-mobile", t);
|
|
81
|
-
}
|
|
82
|
-
get gridColsTablet() {
|
|
83
|
-
return this.getAttribute("grid-cols-tablet");
|
|
84
|
-
}
|
|
85
|
-
set gridColsTablet(t) {
|
|
86
|
-
this.setAttribute("grid-cols-tablet", t);
|
|
87
|
-
}
|
|
88
|
-
get gridColsLaptop() {
|
|
89
|
-
return this.getAttribute("grid-cols-laptop");
|
|
90
|
-
}
|
|
91
|
-
set gridColsLaptop(t) {
|
|
92
|
-
this.setAttribute("grid-cols-laptop", t);
|
|
93
|
-
}
|
|
94
|
-
get justifyContent() {
|
|
95
|
-
return this.getAttribute("justify-content");
|
|
96
|
-
}
|
|
97
|
-
set justifyContent(t) {
|
|
98
|
-
this.setAttribute("justify-content", t);
|
|
99
|
-
}
|
|
100
|
-
get justifyItems() {
|
|
101
|
-
return this.getAttribute("justify-items");
|
|
102
|
-
}
|
|
103
|
-
set justifyItems(t) {
|
|
104
|
-
this.setAttribute("justify-items", t);
|
|
105
|
-
}
|
|
106
|
-
get alignContent() {
|
|
107
|
-
return this.getAttribute("align-content");
|
|
108
|
-
}
|
|
109
|
-
set alignContent(t) {
|
|
110
|
-
this.setAttribute("align-content", t);
|
|
111
|
-
}
|
|
112
|
-
get alignItems() {
|
|
113
|
-
return this.getAttribute("align-items");
|
|
114
|
-
}
|
|
115
|
-
set alignItems(t) {
|
|
116
|
-
this.setAttribute("align-items", t);
|
|
117
|
-
}
|
|
118
|
-
get justifyContentMobile() {
|
|
119
|
-
return this.getAttribute("justify-content-mobile");
|
|
120
|
-
}
|
|
121
|
-
set justifyContentMobile(t) {
|
|
122
|
-
this.setAttribute("justify-content-mobile", t);
|
|
123
|
-
}
|
|
124
|
-
get justifyItemsMobile() {
|
|
125
|
-
return this.getAttribute("justify-items-mobile");
|
|
126
|
-
}
|
|
127
|
-
set justifyItemsMobile(t) {
|
|
128
|
-
this.setAttribute("justify-items-mobile", t);
|
|
129
|
-
}
|
|
130
|
-
get alignContentMobile() {
|
|
131
|
-
return this.getAttribute("align-content-mobile");
|
|
132
|
-
}
|
|
133
|
-
set alignContentMobile(t) {
|
|
134
|
-
this.setAttribute("align-content-mobile", t);
|
|
135
|
-
}
|
|
136
|
-
get alignItemsMobile() {
|
|
137
|
-
return this.getAttribute("align-items-mobile");
|
|
138
|
-
}
|
|
139
|
-
set alignItemsMobile(t) {
|
|
140
|
-
this.setAttribute("align-items-mobile", t);
|
|
141
|
-
}
|
|
142
|
-
get justifyContentTablet() {
|
|
143
|
-
return this.getAttribute("justify-content-tablet");
|
|
144
|
-
}
|
|
145
|
-
set justifyContentTablet(t) {
|
|
146
|
-
this.setAttribute("justify-content-tablet", t);
|
|
147
|
-
}
|
|
148
|
-
get justifyItemsTablet() {
|
|
149
|
-
return this.getAttribute("justify-items-tablet");
|
|
150
|
-
}
|
|
151
|
-
set justifyItemsTablet(t) {
|
|
152
|
-
this.setAttribute("justify-items-tablet", t);
|
|
153
|
-
}
|
|
154
|
-
get alignContentTablet() {
|
|
155
|
-
return this.getAttribute("align-content-tablet");
|
|
156
|
-
}
|
|
157
|
-
set alignContentTablet(t) {
|
|
158
|
-
this.setAttribute("align-content-tablet", t);
|
|
159
|
-
}
|
|
160
|
-
get alignItemsTablet() {
|
|
161
|
-
return this.getAttribute("align-items-tablet");
|
|
162
|
-
}
|
|
163
|
-
set alignItemsTablet(t) {
|
|
164
|
-
this.setAttribute("align-items-tablet", t);
|
|
165
|
-
}
|
|
166
|
-
get justifyContentLaptop() {
|
|
167
|
-
return this.getAttribute("justify-content-laptop");
|
|
168
|
-
}
|
|
169
|
-
set justifyContentLaptop(t) {
|
|
170
|
-
this.setAttribute("justify-content-laptop", t);
|
|
171
|
-
}
|
|
172
|
-
get justifyItemsLaptop() {
|
|
173
|
-
return this.getAttribute("justify-items-laptop");
|
|
174
|
-
}
|
|
175
|
-
set justifyItemsLaptop(t) {
|
|
176
|
-
this.setAttribute("justify-items-laptop", t);
|
|
177
|
-
}
|
|
178
|
-
get alignContentLaptop() {
|
|
179
|
-
return this.getAttribute("align-content-laptop");
|
|
180
|
-
}
|
|
181
|
-
set alignContentLaptop(t) {
|
|
182
|
-
this.setAttribute("align-content-laptop", t);
|
|
183
|
-
}
|
|
184
|
-
get alignItemsLaptop() {
|
|
185
|
-
return this.getAttribute("align-items-laptop");
|
|
186
|
-
}
|
|
187
|
-
set alignItemsLaptop(t) {
|
|
188
|
-
this.setAttribute("align-items-laptop", t);
|
|
189
|
-
}
|
|
190
|
-
get justifyContentDesktop() {
|
|
191
|
-
return this.getAttribute("justify-content-desktop");
|
|
192
|
-
}
|
|
193
|
-
set justifyContentDesktop(t) {
|
|
194
|
-
this.setAttribute("justify-content-desktop", t);
|
|
195
|
-
}
|
|
196
|
-
get justifyItemsDesktop() {
|
|
197
|
-
return this.getAttribute("justify-items-desktop");
|
|
198
|
-
}
|
|
199
|
-
set justifyItemsDesktop(t) {
|
|
200
|
-
this.setAttribute("justify-items-desktop", t);
|
|
201
|
-
}
|
|
202
|
-
get alignContentDesktop() {
|
|
203
|
-
return this.getAttribute("align-content-desktop");
|
|
204
|
-
}
|
|
205
|
-
set alignContentDesktop(t) {
|
|
206
|
-
this.setAttribute("align-content-desktop", t);
|
|
207
|
-
}
|
|
208
|
-
get alignItemsDesktop() {
|
|
209
|
-
return this.getAttribute("align-items-desktop");
|
|
210
|
-
}
|
|
211
|
-
set alignItemsDesktop(t) {
|
|
212
|
-
this.setAttribute("align-items-desktop", t);
|
|
213
|
-
}
|
|
214
|
-
attributeChangedCallback(t, s, e) {
|
|
215
|
-
if (s !== e)
|
|
216
|
-
switch (t) {
|
|
217
|
-
case "gap":
|
|
218
|
-
this.updateAttribute(t, s, e, d);
|
|
219
|
-
break;
|
|
220
|
-
case "grid-cols":
|
|
221
|
-
case "grid-cols-mobile":
|
|
222
|
-
case "grid-cols-tablet":
|
|
223
|
-
case "grid-cols-laptop":
|
|
224
|
-
this.updateAttribute(t, s, e, f);
|
|
225
|
-
break;
|
|
226
|
-
case "justify-content":
|
|
227
|
-
case "align-content":
|
|
228
|
-
case "justify-content-mobile":
|
|
229
|
-
case "align-content-mobile":
|
|
230
|
-
case "justify-content-tablet":
|
|
231
|
-
case "align-content-tablet":
|
|
232
|
-
case "justify-content-laptop":
|
|
233
|
-
case "align-content-laptop":
|
|
234
|
-
case "justify-content-desktop":
|
|
235
|
-
case "align-content-desktop":
|
|
236
|
-
this.updateAttribute(
|
|
237
|
-
t,
|
|
238
|
-
s,
|
|
239
|
-
e,
|
|
240
|
-
b
|
|
241
|
-
);
|
|
242
|
-
break;
|
|
243
|
-
case "justify-items":
|
|
244
|
-
case "align-items":
|
|
245
|
-
case "justify-items-mobile":
|
|
246
|
-
case "align-items-mobile":
|
|
247
|
-
case "justify-items-tablet":
|
|
248
|
-
case "align-items-tablet":
|
|
249
|
-
case "justify-items-laptop":
|
|
250
|
-
case "align-items-laptop":
|
|
251
|
-
case "justify-items-desktop":
|
|
252
|
-
case "align-items-desktop":
|
|
253
|
-
this.updateAttribute(
|
|
254
|
-
t,
|
|
255
|
-
s,
|
|
256
|
-
e,
|
|
257
|
-
m
|
|
258
|
-
);
|
|
259
|
-
break;
|
|
260
|
-
default:
|
|
261
|
-
super.attributeChangedCallback(t, s, e);
|
|
262
|
-
break;
|
|
263
|
-
}
|
|
264
|
-
}
|
|
265
|
-
updateAttribute(t, s, e, c) {
|
|
266
|
-
this.checkName(c, e) ? t === "grid-cols" || t === "grid-cols-mobile" || t === "grid-cols-tablet" || t === "grid-cols-laptop" ? this.$el.style.setProperty(`--${t}`, e) : (s !== null && s !== "" && s !== "default" && this.$el.classList.toggle(`${t}-${s}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`)) : console.error(
|
|
267
|
-
`${e} is not an allowed ${t} value for ${this.$el}`
|
|
268
|
-
);
|
|
269
|
-
}
|
|
270
|
-
checkName(t, s) {
|
|
271
|
-
return t.includes(s);
|
|
272
|
-
}
|
|
273
|
-
};
|
|
274
|
-
i.nativeName = "div";
|
|
275
|
-
let l = i;
|
|
276
|
-
customElements.define("px-grid", l);
|
|
277
|
-
const o = class o extends l {
|
|
278
|
-
constructor() {
|
|
279
|
-
super(), this.template = () => `<div class="grid-item">
|
|
280
|
-
<slot></slot>
|
|
281
|
-
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
282
|
-
}
|
|
283
|
-
static get observedAttributes() {
|
|
284
|
-
return [
|
|
285
|
-
...super.observedAttributes,
|
|
286
|
-
"col-span",
|
|
287
|
-
"col-span-mobile",
|
|
288
|
-
"col-span-tablet",
|
|
289
|
-
"col-span-laptop",
|
|
290
|
-
"col-span-desktop",
|
|
291
|
-
"justify-self",
|
|
292
|
-
"align-self",
|
|
293
|
-
"place-self",
|
|
294
|
-
"justify-self-mobile",
|
|
295
|
-
"align-self-mobile",
|
|
296
|
-
"place-self-mobile",
|
|
297
|
-
"justify-self-tablet",
|
|
298
|
-
"align-self-tablet",
|
|
299
|
-
"place-self-tablet",
|
|
300
|
-
"justify-self-laptop",
|
|
301
|
-
"align-self-laptop",
|
|
302
|
-
"place-self-laptop",
|
|
303
|
-
"justify-self-desktop",
|
|
304
|
-
"align-self-desktop",
|
|
305
|
-
"place-self-desktop",
|
|
306
|
-
"order",
|
|
307
|
-
"order-mobile",
|
|
308
|
-
"order-tablet",
|
|
309
|
-
"order-laptop",
|
|
310
|
-
"order-desktop"
|
|
311
|
-
];
|
|
312
|
-
}
|
|
313
|
-
get colSpan() {
|
|
314
|
-
return this.getAttribute("col-span");
|
|
315
|
-
}
|
|
316
|
-
set colSpan(t) {
|
|
317
|
-
this.setAttribute("col-span", t);
|
|
318
|
-
}
|
|
319
|
-
get colSpanMobile() {
|
|
320
|
-
return this.getAttribute("col-span-mobile");
|
|
321
|
-
}
|
|
322
|
-
set colSpanMobile(t) {
|
|
323
|
-
this.setAttribute("col-span-mobile", t);
|
|
324
|
-
}
|
|
325
|
-
get colSpanTablet() {
|
|
326
|
-
return this.getAttribute("col-span-tablet");
|
|
327
|
-
}
|
|
328
|
-
set colSpanTablet(t) {
|
|
329
|
-
this.setAttribute("col-span-tablet", t);
|
|
330
|
-
}
|
|
331
|
-
get colSpanLaptop() {
|
|
332
|
-
return this.getAttribute("col-span-laptop");
|
|
333
|
-
}
|
|
334
|
-
set colSpanLaptop(t) {
|
|
335
|
-
this.setAttribute("col-span-laptop", t);
|
|
336
|
-
}
|
|
337
|
-
get colSpanDesktop() {
|
|
338
|
-
return this.getAttribute("col-span-desktop");
|
|
339
|
-
}
|
|
340
|
-
set colSpanDesktop(t) {
|
|
341
|
-
this.setAttribute("col-span-desktop", t);
|
|
342
|
-
}
|
|
343
|
-
get justifySelf() {
|
|
344
|
-
return this.getAttribute("justify-self");
|
|
345
|
-
}
|
|
346
|
-
set justifySelf(t) {
|
|
347
|
-
this.setAttribute("justify-self", t);
|
|
348
|
-
}
|
|
349
|
-
get alignSelf() {
|
|
350
|
-
return this.getAttribute("align-self");
|
|
351
|
-
}
|
|
352
|
-
set alignSelf(t) {
|
|
353
|
-
this.setAttribute("align-self", t);
|
|
354
|
-
}
|
|
355
|
-
get placeSelf() {
|
|
356
|
-
return this.getAttribute("place-self");
|
|
357
|
-
}
|
|
358
|
-
set placeSelf(t) {
|
|
359
|
-
this.setAttribute("place-self", t);
|
|
360
|
-
}
|
|
361
|
-
get justifySelfMobile() {
|
|
362
|
-
return this.getAttribute("justify-self-mobile");
|
|
363
|
-
}
|
|
364
|
-
set justifySelfMobile(t) {
|
|
365
|
-
this.setAttribute("justify-self-mobile", t);
|
|
366
|
-
}
|
|
367
|
-
get alignSelfMobile() {
|
|
368
|
-
return this.getAttribute("align-self-mobile");
|
|
369
|
-
}
|
|
370
|
-
set alignSelfMobile(t) {
|
|
371
|
-
this.setAttribute("align-self-mobile", t);
|
|
372
|
-
}
|
|
373
|
-
get placeSelfMobile() {
|
|
374
|
-
return this.getAttribute("place-self-mobile");
|
|
375
|
-
}
|
|
376
|
-
set placeSelfMobile(t) {
|
|
377
|
-
this.setAttribute("place-self-mobile", t);
|
|
378
|
-
}
|
|
379
|
-
get justifySelfTablet() {
|
|
380
|
-
return this.getAttribute("justify-self-tablet");
|
|
381
|
-
}
|
|
382
|
-
set justifySelfTablet(t) {
|
|
383
|
-
this.setAttribute("justify-self-tablet", t);
|
|
384
|
-
}
|
|
385
|
-
get alignSelfTablet() {
|
|
386
|
-
return this.getAttribute("align-self-tablet");
|
|
387
|
-
}
|
|
388
|
-
set alignSelfTablet(t) {
|
|
389
|
-
this.setAttribute("align-self-tablet", t);
|
|
390
|
-
}
|
|
391
|
-
get placeSelfTablet() {
|
|
392
|
-
return this.getAttribute("place-self-tablet");
|
|
393
|
-
}
|
|
394
|
-
set placeSelfTablet(t) {
|
|
395
|
-
this.setAttribute("place-self-tablet", t);
|
|
396
|
-
}
|
|
397
|
-
get justifySelfLaptop() {
|
|
398
|
-
return this.getAttribute("justify-self-laptop");
|
|
399
|
-
}
|
|
400
|
-
set justifySelfLaptop(t) {
|
|
401
|
-
this.setAttribute("justify-self-laptop", t);
|
|
402
|
-
}
|
|
403
|
-
get alignSelfLaptop() {
|
|
404
|
-
return this.getAttribute("align-self-laptop");
|
|
405
|
-
}
|
|
406
|
-
set alignSelfLaptop(t) {
|
|
407
|
-
this.setAttribute("align-self-laptop", t);
|
|
408
|
-
}
|
|
409
|
-
get placeSelfLaptop() {
|
|
410
|
-
return this.getAttribute("place-self-laptop");
|
|
411
|
-
}
|
|
412
|
-
set placeSelfLaptop(t) {
|
|
413
|
-
this.setAttribute("place-self-laptop", t);
|
|
414
|
-
}
|
|
415
|
-
get justifySelfDesktop() {
|
|
416
|
-
return this.getAttribute("justify-self-desktop");
|
|
417
|
-
}
|
|
418
|
-
set justifySelfDesktop(t) {
|
|
419
|
-
this.setAttribute("justify-self-desktop", t);
|
|
420
|
-
}
|
|
421
|
-
get alignSelfDesktop() {
|
|
422
|
-
return this.getAttribute("align-self-desktop");
|
|
423
|
-
}
|
|
424
|
-
set alignSelfDesktop(t) {
|
|
425
|
-
this.setAttribute("align-self-desktop", t);
|
|
426
|
-
}
|
|
427
|
-
get placeSelfDesktop() {
|
|
428
|
-
return this.getAttribute("place-self-desktop");
|
|
429
|
-
}
|
|
430
|
-
set placeSelfDesktop(t) {
|
|
431
|
-
this.setAttribute("place-self-desktop", t);
|
|
432
|
-
}
|
|
433
|
-
get order() {
|
|
434
|
-
return this.getAttribute("order");
|
|
435
|
-
}
|
|
436
|
-
set order(t) {
|
|
437
|
-
this.setAttribute("order", t);
|
|
438
|
-
}
|
|
439
|
-
get orderMobile() {
|
|
440
|
-
return this.getAttribute("order-mobile");
|
|
441
|
-
}
|
|
442
|
-
set orderMobile(t) {
|
|
443
|
-
this.setAttribute("order-mobile", t);
|
|
444
|
-
}
|
|
445
|
-
get orderTablet() {
|
|
446
|
-
return this.getAttribute("order-tablet");
|
|
447
|
-
}
|
|
448
|
-
set orderTablet(t) {
|
|
449
|
-
this.setAttribute("order-tablet", t);
|
|
450
|
-
}
|
|
451
|
-
get orderLaptop() {
|
|
452
|
-
return this.getAttribute("order-laptop");
|
|
453
|
-
}
|
|
454
|
-
set orderLaptop(t) {
|
|
455
|
-
this.setAttribute("order-laptop", t);
|
|
456
|
-
}
|
|
457
|
-
get orderDesktop() {
|
|
458
|
-
return this.getAttribute("order-desktop");
|
|
459
|
-
}
|
|
460
|
-
set orderDesktop(t) {
|
|
461
|
-
this.setAttribute("order-desktop", t);
|
|
462
|
-
}
|
|
463
|
-
};
|
|
464
|
-
o.nativeName = "div";
|
|
465
|
-
let n = o;
|
|
466
|
-
customElements.define("px-grid-item", n);
|
|
467
|
-
export {
|
|
468
|
-
l as Grid,
|
|
469
|
-
n as GridItem,
|
|
470
|
-
b as contentAlignmentValues,
|
|
471
|
-
f as gridColsValues,
|
|
472
|
-
m as itemsAlignmentValues
|
|
473
|
-
};
|