@proximus/lavender-grid 2.0.0-alpha.12 → 2.0.0-alpha.120
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 +1 -2
- package/dist/index.es.js +35 -39
- package/package.json +2 -2
package/dist/Grid.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PxElement } from '@proximus/lavender-common';
|
|
2
2
|
export declare const gridColsValues: string[];
|
|
3
3
|
export declare const contentAlignmentValues: string[];
|
|
4
4
|
export declare const itemsAlignmentValues: string[];
|
|
5
5
|
export declare class Grid extends PxElement<HTMLDivElement> {
|
|
6
6
|
static nativeName: string;
|
|
7
7
|
template: () => string;
|
|
8
|
-
gapAttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
9
8
|
constructor();
|
|
10
9
|
static get observedAttributes(): string[];
|
|
11
10
|
connectedCallback(): void;
|
package/dist/index.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
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
|
|
3
|
-
|
|
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
4
|
const b = [
|
|
5
5
|
"1",
|
|
6
6
|
"2",
|
|
@@ -23,25 +23,17 @@ const b = [
|
|
|
23
23
|
"space-around",
|
|
24
24
|
"space-evenly",
|
|
25
25
|
"stretch"
|
|
26
|
-
], f = ["", "start", "end", "center", "stretch"], j = (
|
|
26
|
+
], f = ["", "start", "end", "center", "stretch"], j = (r, t, e) => `:host([${r}${e ? `--${e}` : ""}='${t}']) .grid`, d = "px-spacing", h = g(
|
|
27
|
+
"gap",
|
|
28
|
+
j,
|
|
29
|
+
u,
|
|
30
|
+
d,
|
|
31
|
+
"--grid-gap"
|
|
32
|
+
), o = class o extends p {
|
|
27
33
|
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">
|
|
34
|
+
super(c, h), this.template = () => `<div class="grid">
|
|
38
35
|
<slot></slot>
|
|
39
|
-
</div>`, this.
|
|
40
|
-
this,
|
|
41
|
-
"gap",
|
|
42
|
-
(t) => t,
|
|
43
|
-
"--gap"
|
|
44
|
-
), this.shadowRoot.innerHTML = this.template();
|
|
36
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
45
37
|
}
|
|
46
38
|
static get observedAttributes() {
|
|
47
39
|
return [
|
|
@@ -73,16 +65,16 @@ const b = [
|
|
|
73
65
|
];
|
|
74
66
|
}
|
|
75
67
|
connectedCallback() {
|
|
76
|
-
|
|
68
|
+
this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
|
|
77
69
|
}
|
|
78
|
-
attributeChangedCallback(t, e,
|
|
79
|
-
if (e !==
|
|
70
|
+
attributeChangedCallback(t, e, i) {
|
|
71
|
+
if (e !== i)
|
|
80
72
|
switch (t) {
|
|
81
73
|
case "grid-cols":
|
|
82
74
|
case "grid-cols--mobile":
|
|
83
75
|
case "grid-cols--tablet":
|
|
84
76
|
case "grid-cols--laptop":
|
|
85
|
-
this.updateAttribute(t, e,
|
|
77
|
+
this.updateAttribute(t, e, i, b);
|
|
86
78
|
break;
|
|
87
79
|
case "justify-content":
|
|
88
80
|
case "align-content":
|
|
@@ -97,7 +89,7 @@ const b = [
|
|
|
97
89
|
this.updateAttribute(
|
|
98
90
|
t,
|
|
99
91
|
e,
|
|
100
|
-
|
|
92
|
+
i,
|
|
101
93
|
y
|
|
102
94
|
);
|
|
103
95
|
break;
|
|
@@ -114,36 +106,40 @@ const b = [
|
|
|
114
106
|
this.updateAttribute(
|
|
115
107
|
t,
|
|
116
108
|
e,
|
|
117
|
-
|
|
109
|
+
i,
|
|
118
110
|
f
|
|
119
111
|
);
|
|
120
112
|
break;
|
|
121
113
|
default:
|
|
122
|
-
super.attributeChangedCallback(t, e,
|
|
114
|
+
super.attributeChangedCallback(t, e, i);
|
|
123
115
|
break;
|
|
124
116
|
}
|
|
125
117
|
}
|
|
126
|
-
updateGap(t, e,
|
|
127
|
-
if (!this.checkName(
|
|
128
|
-
|
|
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
|
+
);
|
|
129
123
|
return;
|
|
130
124
|
}
|
|
131
|
-
const s = (
|
|
132
|
-
|
|
125
|
+
const s = (n) => {
|
|
126
|
+
n !== null && n !== "" && n !== "default" && (this.$el.style.setProperty(
|
|
133
127
|
"--grid-gap--mobile",
|
|
134
|
-
`var(--px-spacing-${
|
|
128
|
+
`var(--px-spacing-${n}-mobile)`
|
|
135
129
|
), this.$el.style.setProperty(
|
|
136
130
|
"--grid-gap--tablet",
|
|
137
|
-
`var(--px-spacing-${
|
|
131
|
+
`var(--px-spacing-${n}-tablet)`
|
|
138
132
|
), this.$el.style.setProperty(
|
|
139
133
|
"--grid-gap--laptop",
|
|
140
|
-
`var(--px-spacing-${
|
|
134
|
+
`var(--px-spacing-${n}-laptop)`
|
|
141
135
|
));
|
|
142
136
|
};
|
|
143
137
|
s(t), s(e);
|
|
144
138
|
}
|
|
145
|
-
updateAttribute(t, e,
|
|
146
|
-
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
|
+
);
|
|
147
143
|
}
|
|
148
144
|
get gap() {
|
|
149
145
|
return this.getAttribute("gap");
|
|
@@ -314,8 +310,8 @@ const b = [
|
|
|
314
310
|
this.setAttribute("align-items--desktop", t);
|
|
315
311
|
}
|
|
316
312
|
};
|
|
317
|
-
|
|
318
|
-
let a =
|
|
313
|
+
o.nativeName = "div";
|
|
314
|
+
let a = o;
|
|
319
315
|
customElements.get("px-grid") || customElements.define("px-grid", a);
|
|
320
316
|
export {
|
|
321
317
|
a as Grid,
|
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.120",
|
|
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"
|