@proximus/lavender-grid 1.4.1 → 1.4.2
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 +23 -31
- package/package.json +1 -1
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,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { cssTokenBreakpoints as r, gapValues as g, PxElement as u } from "@proximus/lavender-common";
|
|
2
|
+
const p = ":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: 48em) and (max-width: 64em){.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: 64.0625em){.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}}", l = new CSSStyleSheet();
|
|
3
|
+
l.replaceSync(p);
|
|
4
|
+
const m = [
|
|
5
5
|
"1",
|
|
6
6
|
"2",
|
|
7
7
|
"3",
|
|
@@ -14,7 +14,7 @@ const b = [
|
|
|
14
14
|
"10",
|
|
15
15
|
"11",
|
|
16
16
|
"12"
|
|
17
|
-
],
|
|
17
|
+
], b = [
|
|
18
18
|
"",
|
|
19
19
|
"start",
|
|
20
20
|
"end",
|
|
@@ -23,25 +23,17 @@ const b = [
|
|
|
23
23
|
"space-around",
|
|
24
24
|
"space-evenly",
|
|
25
25
|
"stretch"
|
|
26
|
-
],
|
|
26
|
+
], y = ["", "start", "end", "center", "stretch"], f = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .grid`, j = "px-spacing", d = r(
|
|
27
|
+
"gap",
|
|
28
|
+
f,
|
|
29
|
+
g,
|
|
30
|
+
j,
|
|
31
|
+
"--grid-gap"
|
|
32
|
+
), o = class o extends u {
|
|
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(l, d), 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,7 +65,7 @@ const b = [
|
|
|
73
65
|
];
|
|
74
66
|
}
|
|
75
67
|
connectedCallback() {
|
|
76
|
-
|
|
68
|
+
this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
|
|
77
69
|
}
|
|
78
70
|
attributeChangedCallback(t, e, n) {
|
|
79
71
|
if (e !== n)
|
|
@@ -82,7 +74,7 @@ const b = [
|
|
|
82
74
|
case "grid-cols--mobile":
|
|
83
75
|
case "grid-cols--tablet":
|
|
84
76
|
case "grid-cols--laptop":
|
|
85
|
-
this.updateAttribute(t, e, n,
|
|
77
|
+
this.updateAttribute(t, e, n, m);
|
|
86
78
|
break;
|
|
87
79
|
case "justify-content":
|
|
88
80
|
case "align-content":
|
|
@@ -98,7 +90,7 @@ const b = [
|
|
|
98
90
|
t,
|
|
99
91
|
e,
|
|
100
92
|
n,
|
|
101
|
-
|
|
93
|
+
b
|
|
102
94
|
);
|
|
103
95
|
break;
|
|
104
96
|
case "justify-items":
|
|
@@ -115,7 +107,7 @@ const b = [
|
|
|
115
107
|
t,
|
|
116
108
|
e,
|
|
117
109
|
n,
|
|
118
|
-
|
|
110
|
+
y
|
|
119
111
|
);
|
|
120
112
|
break;
|
|
121
113
|
default:
|
|
@@ -314,12 +306,12 @@ const b = [
|
|
|
314
306
|
this.setAttribute("align-items--desktop", t);
|
|
315
307
|
}
|
|
316
308
|
};
|
|
317
|
-
|
|
318
|
-
let a =
|
|
309
|
+
o.nativeName = "div";
|
|
310
|
+
let a = o;
|
|
319
311
|
customElements.get("px-grid") || customElements.define("px-grid", a);
|
|
320
312
|
export {
|
|
321
313
|
a as Grid,
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
314
|
+
b as contentAlignmentValues,
|
|
315
|
+
m as gridColsValues,
|
|
316
|
+
y as itemsAlignmentValues
|
|
325
317
|
};
|