@proximus/lavender-grid 2.0.0-alpha.14 → 2.0.0-alpha.141
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/index.es.js +35 -31
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { cssTokenBreakpoints as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { cssTokenBreakpoints as g, gapValues as u, PxElement as p, log as l } 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 screen and (max-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 (min-width: 48rem) and (max-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 (min-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}}", c = new CSSStyleSheet();
|
|
3
|
+
c.replaceSync(m);
|
|
4
|
+
const b = [
|
|
5
5
|
"1",
|
|
6
6
|
"2",
|
|
7
7
|
"3",
|
|
@@ -14,7 +14,7 @@ const m = [
|
|
|
14
14
|
"10",
|
|
15
15
|
"11",
|
|
16
16
|
"12"
|
|
17
|
-
],
|
|
17
|
+
], y = [
|
|
18
18
|
"",
|
|
19
19
|
"start",
|
|
20
20
|
"end",
|
|
@@ -23,15 +23,15 @@ const m = [
|
|
|
23
23
|
"space-around",
|
|
24
24
|
"space-evenly",
|
|
25
25
|
"stretch"
|
|
26
|
-
],
|
|
26
|
+
], f = ["", "start", "end", "center", "stretch"], j = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .grid`, d = "px-spacing", h = g(
|
|
27
27
|
"gap",
|
|
28
|
-
f,
|
|
29
|
-
g,
|
|
30
28
|
j,
|
|
29
|
+
u,
|
|
30
|
+
d,
|
|
31
31
|
"--grid-gap"
|
|
32
|
-
), o = class o extends
|
|
32
|
+
), o = class o extends p {
|
|
33
33
|
constructor() {
|
|
34
|
-
super(
|
|
34
|
+
super(c, h), this.template = () => `<div class="grid">
|
|
35
35
|
<slot></slot>
|
|
36
36
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
37
37
|
}
|
|
@@ -67,14 +67,14 @@ const m = [
|
|
|
67
67
|
connectedCallback() {
|
|
68
68
|
this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
|
|
69
69
|
}
|
|
70
|
-
attributeChangedCallback(t, e,
|
|
71
|
-
if (e !==
|
|
70
|
+
attributeChangedCallback(t, e, i) {
|
|
71
|
+
if (e !== i)
|
|
72
72
|
switch (t) {
|
|
73
73
|
case "grid-cols":
|
|
74
74
|
case "grid-cols--mobile":
|
|
75
75
|
case "grid-cols--tablet":
|
|
76
76
|
case "grid-cols--laptop":
|
|
77
|
-
this.updateAttribute(t, e,
|
|
77
|
+
this.updateAttribute(t, e, i, b);
|
|
78
78
|
break;
|
|
79
79
|
case "justify-content":
|
|
80
80
|
case "align-content":
|
|
@@ -89,8 +89,8 @@ const m = [
|
|
|
89
89
|
this.updateAttribute(
|
|
90
90
|
t,
|
|
91
91
|
e,
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
i,
|
|
93
|
+
y
|
|
94
94
|
);
|
|
95
95
|
break;
|
|
96
96
|
case "justify-items":
|
|
@@ -106,36 +106,40 @@ const m = [
|
|
|
106
106
|
this.updateAttribute(
|
|
107
107
|
t,
|
|
108
108
|
e,
|
|
109
|
-
|
|
110
|
-
|
|
109
|
+
i,
|
|
110
|
+
f
|
|
111
111
|
);
|
|
112
112
|
break;
|
|
113
113
|
default:
|
|
114
|
-
super.attributeChangedCallback(t, e,
|
|
114
|
+
super.attributeChangedCallback(t, e, i);
|
|
115
115
|
break;
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
|
-
updateGap(t, e,
|
|
119
|
-
if (!this.checkName(
|
|
120
|
-
|
|
118
|
+
updateGap(t, e, i) {
|
|
119
|
+
if (!this.checkName(i, e)) {
|
|
120
|
+
l(
|
|
121
|
+
`"${e}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
122
|
+
);
|
|
121
123
|
return;
|
|
122
124
|
}
|
|
123
|
-
const s = (
|
|
124
|
-
|
|
125
|
+
const s = (n) => {
|
|
126
|
+
n !== null && n !== "" && n !== "default" && (this.$el.style.setProperty(
|
|
125
127
|
"--grid-gap--mobile",
|
|
126
|
-
`var(--px-spacing-${
|
|
128
|
+
`var(--px-spacing-${n}-mobile)`
|
|
127
129
|
), this.$el.style.setProperty(
|
|
128
130
|
"--grid-gap--tablet",
|
|
129
|
-
`var(--px-spacing-${
|
|
131
|
+
`var(--px-spacing-${n}-tablet)`
|
|
130
132
|
), this.$el.style.setProperty(
|
|
131
133
|
"--grid-gap--laptop",
|
|
132
|
-
`var(--px-spacing-${
|
|
134
|
+
`var(--px-spacing-${n}-laptop)`
|
|
133
135
|
));
|
|
134
136
|
};
|
|
135
137
|
s(t), s(e);
|
|
136
138
|
}
|
|
137
|
-
updateAttribute(t, e,
|
|
138
|
-
this.checkName(s,
|
|
139
|
+
updateAttribute(t, e, i, s) {
|
|
140
|
+
this.checkName(s, i) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, i) : (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`${t}-${i}`)) : l(
|
|
141
|
+
`"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${s.join('", "')}".`
|
|
142
|
+
);
|
|
139
143
|
}
|
|
140
144
|
get gap() {
|
|
141
145
|
return this.getAttribute("gap");
|
|
@@ -311,7 +315,7 @@ let a = o;
|
|
|
311
315
|
customElements.get("px-grid") || customElements.define("px-grid", a);
|
|
312
316
|
export {
|
|
313
317
|
a as Grid,
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
318
|
+
y as contentAlignmentValues,
|
|
319
|
+
b as gridColsValues,
|
|
320
|
+
f as itemsAlignmentValues
|
|
317
321
|
};
|
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.141",
|
|
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"
|