@proximus/lavender-grid 2.0.0-alpha.202 → 2.0.0-alpha.204
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 -1
- package/dist/custom-elements.json +7 -8
- package/dist/index.es.js +21 -18
- package/dist/web-types.json +2 -4
- package/package.json +1 -1
package/dist/Grid.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ 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
|
+
protected static readonly template: HTMLTemplateElement;
|
|
6
7
|
static nativeName: string;
|
|
7
|
-
template: () => string;
|
|
8
8
|
constructor();
|
|
9
9
|
static get observedAttributes(): string[];
|
|
10
10
|
connectedCallback(): void;
|
|
@@ -35,6 +35,13 @@
|
|
|
35
35
|
"description": "",
|
|
36
36
|
"name": "Grid",
|
|
37
37
|
"members": [
|
|
38
|
+
{
|
|
39
|
+
"kind": "field",
|
|
40
|
+
"name": "template",
|
|
41
|
+
"privacy": "protected",
|
|
42
|
+
"static": true,
|
|
43
|
+
"readonly": true
|
|
44
|
+
},
|
|
38
45
|
{
|
|
39
46
|
"kind": "field",
|
|
40
47
|
"name": "nativeName",
|
|
@@ -44,10 +51,6 @@
|
|
|
44
51
|
"static": true,
|
|
45
52
|
"default": "'div'"
|
|
46
53
|
},
|
|
47
|
-
{
|
|
48
|
-
"kind": "field",
|
|
49
|
-
"name": "template"
|
|
50
|
-
},
|
|
51
54
|
{
|
|
52
55
|
"kind": "method",
|
|
53
56
|
"name": "updateGap",
|
|
@@ -213,10 +216,6 @@
|
|
|
213
216
|
{
|
|
214
217
|
"kind": "field",
|
|
215
218
|
"name": "alignItemsDesktop"
|
|
216
|
-
},
|
|
217
|
-
{
|
|
218
|
-
"kind": "field",
|
|
219
|
-
"name": "innerHTML"
|
|
220
219
|
}
|
|
221
220
|
],
|
|
222
221
|
"attributes": [
|
package/dist/index.es.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { PxElement as e,
|
|
1
|
+
import { PxElement as e, createTemplate as t, cssTokenBreakpoints as n, gapValues as r, log as i, renderTemplate as a } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/grid.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var o = ":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}}", s = new CSSStyleSheet();
|
|
4
|
+
s.replaceSync(o);
|
|
5
|
+
var c = [
|
|
6
6
|
"1",
|
|
7
7
|
"2",
|
|
8
8
|
"3",
|
|
@@ -15,7 +15,7 @@ var o = [
|
|
|
15
15
|
"10",
|
|
16
16
|
"11",
|
|
17
17
|
"12"
|
|
18
|
-
],
|
|
18
|
+
], l = [
|
|
19
19
|
"",
|
|
20
20
|
"start",
|
|
21
21
|
"end",
|
|
@@ -24,18 +24,21 @@ var o = [
|
|
|
24
24
|
"space-around",
|
|
25
25
|
"space-evenly",
|
|
26
26
|
"stretch"
|
|
27
|
-
],
|
|
27
|
+
], u = [
|
|
28
28
|
"",
|
|
29
29
|
"start",
|
|
30
30
|
"end",
|
|
31
31
|
"center",
|
|
32
32
|
"stretch"
|
|
33
|
-
],
|
|
33
|
+
], d = n("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .grid`, r, "px-spacing", "--grid-gap"), f = class n extends e {
|
|
34
|
+
static {
|
|
35
|
+
this.template = t("<div class=\"grid\"><slot></slot></div>");
|
|
36
|
+
}
|
|
34
37
|
static {
|
|
35
38
|
this.nativeName = "div";
|
|
36
39
|
}
|
|
37
40
|
constructor() {
|
|
38
|
-
super(
|
|
41
|
+
super(s, d), a(this.shadowRoot, n.template);
|
|
39
42
|
}
|
|
40
43
|
static get observedAttributes() {
|
|
41
44
|
return [
|
|
@@ -75,7 +78,7 @@ var o = [
|
|
|
75
78
|
case "grid-cols--mobile":
|
|
76
79
|
case "grid-cols--tablet":
|
|
77
80
|
case "grid-cols--laptop":
|
|
78
|
-
this.updateAttribute(e, t, n,
|
|
81
|
+
this.updateAttribute(e, t, n, c);
|
|
79
82
|
break;
|
|
80
83
|
case "justify-content":
|
|
81
84
|
case "align-content":
|
|
@@ -87,7 +90,7 @@ var o = [
|
|
|
87
90
|
case "align-content--laptop":
|
|
88
91
|
case "justify-content--desktop":
|
|
89
92
|
case "align-content--desktop":
|
|
90
|
-
this.updateAttribute(e, t, n,
|
|
93
|
+
this.updateAttribute(e, t, n, l);
|
|
91
94
|
break;
|
|
92
95
|
case "justify-items":
|
|
93
96
|
case "align-items":
|
|
@@ -99,23 +102,23 @@ var o = [
|
|
|
99
102
|
case "align-items--laptop":
|
|
100
103
|
case "justify-items--desktop":
|
|
101
104
|
case "align-items--desktop":
|
|
102
|
-
this.updateAttribute(e, t, n,
|
|
105
|
+
this.updateAttribute(e, t, n, u);
|
|
103
106
|
break;
|
|
104
107
|
default: super.attributeChangedCallback(e, t, n);
|
|
105
108
|
}
|
|
106
109
|
}
|
|
107
110
|
updateGap(e, t, n) {
|
|
108
111
|
if (!this.checkName(n, t)) {
|
|
109
|
-
|
|
112
|
+
i(`"${t}" is not a valid gap value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
|
|
110
113
|
return;
|
|
111
114
|
}
|
|
112
|
-
let
|
|
115
|
+
let r = (e) => {
|
|
113
116
|
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
117
|
};
|
|
115
|
-
|
|
118
|
+
r(e), r(t);
|
|
116
119
|
}
|
|
117
|
-
updateAttribute(e, t, n,
|
|
118
|
-
this.checkName(
|
|
120
|
+
updateAttribute(e, t, n, r) {
|
|
121
|
+
this.checkName(r, 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}`)) : i(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`);
|
|
119
122
|
}
|
|
120
123
|
get gap() {
|
|
121
124
|
return this.getAttribute("gap");
|
|
@@ -286,6 +289,6 @@ var o = [
|
|
|
286
289
|
this._updateAttribute("align-items--desktop", e);
|
|
287
290
|
}
|
|
288
291
|
};
|
|
289
|
-
customElements.get("px-grid") || customElements.define("px-grid",
|
|
292
|
+
customElements.get("px-grid") || customElements.define("px-grid", f);
|
|
290
293
|
//#endregion
|
|
291
|
-
export {
|
|
294
|
+
export { f as Grid, l as contentAlignmentValues, c as gridColsValues, u as itemsAlignmentValues };
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-grid",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.204",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -51,7 +51,6 @@
|
|
|
51
51
|
"events": [],
|
|
52
52
|
"js": {
|
|
53
53
|
"properties": [
|
|
54
|
-
{ "name": "template" },
|
|
55
54
|
{ "name": "gap" },
|
|
56
55
|
{ "name": "gapMobile" },
|
|
57
56
|
{ "name": "gapTablet" },
|
|
@@ -79,8 +78,7 @@
|
|
|
79
78
|
{ "name": "justifyContentDesktop" },
|
|
80
79
|
{ "name": "justifyItemsDesktop" },
|
|
81
80
|
{ "name": "alignContentDesktop" },
|
|
82
|
-
{ "name": "alignItemsDesktop" }
|
|
83
|
-
{ "name": "innerHTML" }
|
|
81
|
+
{ "name": "alignItemsDesktop" }
|
|
84
82
|
],
|
|
85
83
|
"events": []
|
|
86
84
|
}
|