@proximus/lavender-grid 1.4.10-alpha.1 → 1.4.10-alpha.11
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 +18 -18
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
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
|
|
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
3
|
c.replaceSync(m);
|
|
4
4
|
const b = [
|
|
5
5
|
"1",
|
|
@@ -67,14 +67,14 @@ const b = [
|
|
|
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,7 +89,7 @@ const b = [
|
|
|
89
89
|
this.updateAttribute(
|
|
90
90
|
t,
|
|
91
91
|
e,
|
|
92
|
-
|
|
92
|
+
i,
|
|
93
93
|
y
|
|
94
94
|
);
|
|
95
95
|
break;
|
|
@@ -106,39 +106,39 @@ const b = [
|
|
|
106
106
|
this.updateAttribute(
|
|
107
107
|
t,
|
|
108
108
|
e,
|
|
109
|
-
|
|
109
|
+
i,
|
|
110
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(
|
|
118
|
+
updateGap(t, e, i) {
|
|
119
|
+
if (!this.checkName(i, e)) {
|
|
120
120
|
l(
|
|
121
|
-
|
|
121
|
+
`"${e}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
122
122
|
);
|
|
123
123
|
return;
|
|
124
124
|
}
|
|
125
|
-
const s = (
|
|
126
|
-
|
|
125
|
+
const s = (n) => {
|
|
126
|
+
n !== null && n !== "" && n !== "default" && (this.$el.style.setProperty(
|
|
127
127
|
"--grid-gap--mobile",
|
|
128
|
-
`var(--px-spacing-${
|
|
128
|
+
`var(--px-spacing-${n}-mobile)`
|
|
129
129
|
), this.$el.style.setProperty(
|
|
130
130
|
"--grid-gap--tablet",
|
|
131
|
-
`var(--px-spacing-${
|
|
131
|
+
`var(--px-spacing-${n}-tablet)`
|
|
132
132
|
), this.$el.style.setProperty(
|
|
133
133
|
"--grid-gap--laptop",
|
|
134
|
-
`var(--px-spacing-${
|
|
134
|
+
`var(--px-spacing-${n}-laptop)`
|
|
135
135
|
));
|
|
136
136
|
};
|
|
137
137
|
s(t), s(e);
|
|
138
138
|
}
|
|
139
|
-
updateAttribute(t, e,
|
|
140
|
-
this.checkName(s,
|
|
141
|
-
|
|
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
142
|
);
|
|
143
143
|
}
|
|
144
144
|
get gap() {
|