@proximus/lavender-container 2.0.0-alpha.6 → 2.0.0-alpha.61
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/Container.d.ts +21 -4
- package/dist/index.es.js +204 -86
- package/package.json +2 -2
package/dist/Container.d.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare
|
|
1
|
+
import { WithExtraAttributes } from '@proximus/lavender-common';
|
|
2
|
+
export declare const anchorSpacingValues: string[];
|
|
3
|
+
export declare const subgridRowsValues: string[];
|
|
4
|
+
export declare class Container extends WithExtraAttributes {
|
|
3
5
|
static nativeName: string;
|
|
4
6
|
private template;
|
|
5
7
|
private _bgObserver;
|
|
@@ -23,6 +25,9 @@ export declare class Container extends PxElement<HTMLDivElement> {
|
|
|
23
25
|
};
|
|
24
26
|
updateAnchorOffset(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
25
27
|
addAnchorClass(): void;
|
|
28
|
+
updateAnchorSpacing(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
29
|
+
updateSubgridRows(attrName: string, oldValue: string, newValue: string, attrValues: string[]): void;
|
|
30
|
+
get $el(): HTMLElement;
|
|
26
31
|
get $slotAnchor(): HTMLSlotElement;
|
|
27
32
|
get padding(): string;
|
|
28
33
|
set padding(value: string);
|
|
@@ -134,6 +139,18 @@ export declare class Container extends PxElement<HTMLDivElement> {
|
|
|
134
139
|
set boxShadow(value: string);
|
|
135
140
|
get anchorOffset(): string;
|
|
136
141
|
set anchorOffset(value: string);
|
|
137
|
-
get
|
|
138
|
-
set
|
|
142
|
+
get anchorSpacing(): string;
|
|
143
|
+
set anchorSpacing(value: string);
|
|
144
|
+
get inverted(): boolean;
|
|
145
|
+
set inverted(value: boolean);
|
|
146
|
+
get subgridRows(): string;
|
|
147
|
+
set subgridRows(value: string);
|
|
148
|
+
get subgridGap(): string;
|
|
149
|
+
set subgridGap(value: string);
|
|
150
|
+
get subgridGapMobile(): string;
|
|
151
|
+
set subgridGapMobile(value: string);
|
|
152
|
+
get subgridGapTablet(): string;
|
|
153
|
+
set subgridGapTablet(value: string);
|
|
154
|
+
get subgridGapLaptop(): string;
|
|
155
|
+
set subgridGapLaptop(value: string);
|
|
139
156
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,61 +1,86 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { cssTokenBreakpoints as a, paddingValues as s, gapValues as k, WithExtraAttributes as m, boxShadowValues as f, backgroundSizeValues as v, noBorderRadiusValues as A, borderRadiusValues as y, borderSideValues as x, borderValues as $, gradientValues as L, log as d, backgroundColorValues as B, borderColorValues as C, checkName as g } from "@proximus/lavender-common";
|
|
2
|
+
const S = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--mobile)}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}:host([subgrid-rows]){display:contents}:host([subgrid-rows]) .container{display:grid;grid-template-rows:subgrid;grid-row:span var(--subgrid-rows)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--tablet)}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}:host([anchor-spacing]){margin-top:var(--container-anchor-spacing--laptop)}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', c = new CSSStyleSheet();
|
|
3
|
+
c.replaceSync(S);
|
|
4
|
+
const T = [
|
|
5
|
+
"has-patch",
|
|
6
|
+
"neighbor-has-patch",
|
|
7
|
+
"has-ribbon",
|
|
8
|
+
"neighbor-has-ribbon"
|
|
9
|
+
], R = [
|
|
10
|
+
"1",
|
|
11
|
+
"2",
|
|
12
|
+
"3",
|
|
13
|
+
"4",
|
|
14
|
+
"5",
|
|
15
|
+
"6",
|
|
16
|
+
"7",
|
|
17
|
+
"8",
|
|
18
|
+
"9",
|
|
19
|
+
"10",
|
|
20
|
+
"11",
|
|
21
|
+
"12"
|
|
22
|
+
], n = (h, t, e) => `:host([${h}${e ? `--${e}` : ""}='${t}']) .container`, b = "px-padding", M = [
|
|
23
|
+
a(
|
|
24
|
+
"padding",
|
|
25
|
+
n,
|
|
26
|
+
s,
|
|
27
|
+
b,
|
|
28
|
+
"--container-padding"
|
|
29
|
+
),
|
|
30
|
+
a(
|
|
31
|
+
"padding-inline",
|
|
32
|
+
n,
|
|
33
|
+
s,
|
|
34
|
+
b
|
|
35
|
+
),
|
|
36
|
+
a(
|
|
37
|
+
"padding-block",
|
|
38
|
+
n,
|
|
39
|
+
s,
|
|
40
|
+
b
|
|
41
|
+
),
|
|
42
|
+
a(
|
|
43
|
+
"padding-top",
|
|
44
|
+
n,
|
|
45
|
+
s,
|
|
46
|
+
b
|
|
47
|
+
),
|
|
48
|
+
a(
|
|
49
|
+
"padding-right",
|
|
50
|
+
n,
|
|
51
|
+
s,
|
|
52
|
+
b,
|
|
53
|
+
"--container-padding-right"
|
|
54
|
+
),
|
|
55
|
+
a(
|
|
56
|
+
"padding-bottom",
|
|
57
|
+
n,
|
|
58
|
+
s,
|
|
59
|
+
b
|
|
60
|
+
),
|
|
61
|
+
a(
|
|
62
|
+
"padding-left",
|
|
63
|
+
n,
|
|
64
|
+
s,
|
|
65
|
+
b,
|
|
66
|
+
"--container-padding-left"
|
|
67
|
+
),
|
|
68
|
+
a(
|
|
69
|
+
"gap",
|
|
70
|
+
n,
|
|
71
|
+
k,
|
|
72
|
+
"px-spacing",
|
|
73
|
+
void 0,
|
|
74
|
+
"subgrid-gap"
|
|
75
|
+
)
|
|
76
|
+
], u = class u extends m {
|
|
5
77
|
constructor() {
|
|
6
|
-
super(
|
|
7
|
-
p,
|
|
8
|
-
a(
|
|
9
|
-
"padding",
|
|
10
|
-
n,
|
|
11
|
-
d,
|
|
12
|
-
s,
|
|
13
|
-
"--container-padding"
|
|
14
|
-
),
|
|
15
|
-
a(
|
|
16
|
-
"padding-inline",
|
|
17
|
-
n,
|
|
18
|
-
d,
|
|
19
|
-
s
|
|
20
|
-
),
|
|
21
|
-
a(
|
|
22
|
-
"padding-block",
|
|
23
|
-
n,
|
|
24
|
-
d,
|
|
25
|
-
s
|
|
26
|
-
),
|
|
27
|
-
a(
|
|
28
|
-
"padding-top",
|
|
29
|
-
n,
|
|
30
|
-
d,
|
|
31
|
-
s
|
|
32
|
-
),
|
|
33
|
-
a(
|
|
34
|
-
"padding-right",
|
|
35
|
-
n,
|
|
36
|
-
d,
|
|
37
|
-
s,
|
|
38
|
-
"--container-padding-right"
|
|
39
|
-
),
|
|
40
|
-
a(
|
|
41
|
-
"padding-bottom",
|
|
42
|
-
n,
|
|
43
|
-
d,
|
|
44
|
-
s
|
|
45
|
-
),
|
|
46
|
-
a(
|
|
47
|
-
"padding-left",
|
|
48
|
-
n,
|
|
49
|
-
d,
|
|
50
|
-
s,
|
|
51
|
-
"--container-padding-left"
|
|
52
|
-
)
|
|
53
|
-
), this.template = () => `<div class="container">
|
|
78
|
+
super(c, ...M), this.template = () => `<div class="container">
|
|
54
79
|
<slot></slot>
|
|
55
80
|
<slot name="anchor-left"></slot>
|
|
56
81
|
<slot name="anchor-right"></slot>
|
|
57
82
|
<slot name="anchor-full"></slot>
|
|
58
|
-
</div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
|
|
83
|
+
</div>`, this._bgObserver = null, this._isInViewport = !1, this.contentObserver = null, this.shadowRoot.innerHTML = this.template();
|
|
59
84
|
}
|
|
60
85
|
static get observedAttributes() {
|
|
61
86
|
return [
|
|
@@ -87,11 +112,13 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
87
112
|
"background-position",
|
|
88
113
|
"box-shadow",
|
|
89
114
|
"anchor-offset",
|
|
90
|
-
"
|
|
115
|
+
"anchor-spacing",
|
|
116
|
+
"inverted",
|
|
117
|
+
"subgrid-rows"
|
|
91
118
|
];
|
|
92
119
|
}
|
|
93
120
|
connectedCallback() {
|
|
94
|
-
|
|
121
|
+
this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
|
|
95
122
|
this.$slotAnchor && this.addAnchorClass();
|
|
96
123
|
}), this.contentObserver.observe(this, {
|
|
97
124
|
childList: !0,
|
|
@@ -105,14 +132,14 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
105
132
|
}), this._bgObserver.observe(this.$el);
|
|
106
133
|
}
|
|
107
134
|
disconnectedCallback() {
|
|
108
|
-
var t;
|
|
109
|
-
(t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
|
|
135
|
+
var t, e;
|
|
136
|
+
(t = this._bgObserver) == null || t.disconnect(), (e = this.contentObserver) == null || e.disconnect();
|
|
110
137
|
}
|
|
111
138
|
attributeChangedCallback(t, e, r) {
|
|
112
139
|
if (e !== r)
|
|
113
140
|
switch (t) {
|
|
114
141
|
case "border":
|
|
115
|
-
this.updateAttribute(t, e, r,
|
|
142
|
+
this.updateAttribute(t, e, r, $);
|
|
116
143
|
break;
|
|
117
144
|
case "border-color":
|
|
118
145
|
this.updateBorderColor(t, r);
|
|
@@ -121,14 +148,14 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
121
148
|
case "border-side--mobile":
|
|
122
149
|
case "border-side--tablet":
|
|
123
150
|
case "border-side--laptop":
|
|
124
|
-
this.updateAttribute(t, e, r,
|
|
151
|
+
this.updateAttribute(t, e, r, x);
|
|
125
152
|
break;
|
|
126
153
|
case "border-radius":
|
|
127
154
|
this.updateAttribute(
|
|
128
155
|
t,
|
|
129
156
|
e,
|
|
130
157
|
r,
|
|
131
|
-
|
|
158
|
+
y
|
|
132
159
|
);
|
|
133
160
|
break;
|
|
134
161
|
case "no-border-radius":
|
|
@@ -139,7 +166,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
139
166
|
t,
|
|
140
167
|
e,
|
|
141
168
|
r,
|
|
142
|
-
|
|
169
|
+
A
|
|
143
170
|
);
|
|
144
171
|
break;
|
|
145
172
|
case "background-color":
|
|
@@ -159,7 +186,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
159
186
|
t,
|
|
160
187
|
e,
|
|
161
188
|
r,
|
|
162
|
-
|
|
189
|
+
v
|
|
163
190
|
);
|
|
164
191
|
break;
|
|
165
192
|
case "background-image":
|
|
@@ -172,10 +199,21 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
172
199
|
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
173
200
|
break;
|
|
174
201
|
case "box-shadow":
|
|
175
|
-
this.updateAttribute(t, e, r,
|
|
202
|
+
this.updateAttribute(t, e, r, f);
|
|
176
203
|
break;
|
|
177
204
|
case "anchor-offset":
|
|
178
|
-
this.updateAnchorOffset(e, r,
|
|
205
|
+
this.updateAnchorOffset(e, r, s);
|
|
206
|
+
break;
|
|
207
|
+
case "anchor-spacing":
|
|
208
|
+
this.updateAnchorSpacing(e, r, T);
|
|
209
|
+
break;
|
|
210
|
+
case "subgrid-rows":
|
|
211
|
+
this.updateSubgridRows(
|
|
212
|
+
t,
|
|
213
|
+
e,
|
|
214
|
+
r,
|
|
215
|
+
R
|
|
216
|
+
);
|
|
179
217
|
break;
|
|
180
218
|
default:
|
|
181
219
|
super.attributeChangedCallback(t, e, r);
|
|
@@ -197,7 +235,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
197
235
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
198
236
|
}
|
|
199
237
|
updateGradient(t, e) {
|
|
200
|
-
if (this.checkName(
|
|
238
|
+
if (this.checkName(L, e)) {
|
|
201
239
|
const r = this.splitAttrNameFromBreakpoint(t);
|
|
202
240
|
t = r.attrName;
|
|
203
241
|
const i = r.breakpoint;
|
|
@@ -206,11 +244,13 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
206
244
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
207
245
|
);
|
|
208
246
|
} else
|
|
209
|
-
|
|
247
|
+
d(
|
|
248
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
249
|
+
);
|
|
210
250
|
}
|
|
211
251
|
updateBackgroundColor(t, e) {
|
|
212
252
|
const r = e.startsWith("surface-");
|
|
213
|
-
if (this.checkName(
|
|
253
|
+
if (this.checkName(B, e)) {
|
|
214
254
|
const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
|
|
215
255
|
this.$el.style.setProperty(
|
|
216
256
|
`--${i.attrName}${o}`,
|
|
@@ -220,38 +260,46 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
220
260
|
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
221
261
|
);
|
|
222
262
|
} else
|
|
223
|
-
|
|
263
|
+
d(
|
|
264
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
265
|
+
);
|
|
224
266
|
}
|
|
225
267
|
updateBorderColor(t, e) {
|
|
226
|
-
this.checkName(
|
|
268
|
+
this.checkName(C, e) ? (this.$el.style.setProperty(
|
|
227
269
|
`--${t}`,
|
|
228
270
|
`var(--px-color-border-${e}-default)`
|
|
229
271
|
), this.$el.style.setProperty(
|
|
230
272
|
`--${t}-inverted`,
|
|
231
273
|
`var(--px-color-border-${e}-inverted)`
|
|
232
|
-
)) :
|
|
274
|
+
)) : d(
|
|
275
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
276
|
+
);
|
|
233
277
|
}
|
|
234
278
|
updateNoBorderRadius(t, e, r, i) {
|
|
235
279
|
if (!this.checkName(i, r))
|
|
236
|
-
|
|
280
|
+
d(
|
|
281
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
282
|
+
);
|
|
237
283
|
else {
|
|
238
|
-
const o = this.splitAttrNameFromBreakpoint(t),
|
|
284
|
+
const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
|
|
239
285
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
240
|
-
`${o.attrName}-${e}${
|
|
286
|
+
`${o.attrName}-${e}${l}`
|
|
241
287
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
242
|
-
`${o.attrName}-${r}${
|
|
288
|
+
`${o.attrName}-${r}${l}`
|
|
243
289
|
);
|
|
244
290
|
}
|
|
245
291
|
}
|
|
246
292
|
updateAttribute(t, e, r, i) {
|
|
247
293
|
if (!this.checkName(i, r))
|
|
248
|
-
|
|
294
|
+
d(
|
|
295
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
296
|
+
);
|
|
249
297
|
else {
|
|
250
|
-
const o = this.splitAttrNameFromBreakpoint(t),
|
|
298
|
+
const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
|
|
251
299
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
252
|
-
`${o.attrName}-${e}${
|
|
300
|
+
`${o.attrName}-${e}${l}`
|
|
253
301
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
254
|
-
`${o.attrName}-${r}${
|
|
302
|
+
`${o.attrName}-${r}${l}`
|
|
255
303
|
);
|
|
256
304
|
}
|
|
257
305
|
}
|
|
@@ -266,8 +314,10 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
266
314
|
return { attrName: t, breakpoint: e };
|
|
267
315
|
}
|
|
268
316
|
updateAnchorOffset(t, e, r) {
|
|
269
|
-
if (!
|
|
270
|
-
|
|
317
|
+
if (!g(r, e)) {
|
|
318
|
+
d(
|
|
319
|
+
`${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
|
|
320
|
+
);
|
|
271
321
|
return;
|
|
272
322
|
}
|
|
273
323
|
const i = (o) => {
|
|
@@ -287,6 +337,36 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
287
337
|
addAnchorClass() {
|
|
288
338
|
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
289
339
|
}
|
|
340
|
+
updateAnchorSpacing(t, e, r) {
|
|
341
|
+
if (!g(r, e)) {
|
|
342
|
+
d(
|
|
343
|
+
`${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
|
|
344
|
+
);
|
|
345
|
+
return;
|
|
346
|
+
}
|
|
347
|
+
const i = (o) => {
|
|
348
|
+
o !== null && o !== "" && o !== "default" && (this.style.setProperty(
|
|
349
|
+
"--container-anchor-spacing--mobile",
|
|
350
|
+
`var(--px-spacing-${o}-mobile)`
|
|
351
|
+
), this.style.setProperty(
|
|
352
|
+
"--container-anchor-spacing--tablet",
|
|
353
|
+
`var(--px-spacing-${o}-tablet)`
|
|
354
|
+
), this.style.setProperty(
|
|
355
|
+
"--container-anchor-spacing--laptop",
|
|
356
|
+
`var(--px-spacing-${o}-laptop)`
|
|
357
|
+
));
|
|
358
|
+
};
|
|
359
|
+
i(t), i(e);
|
|
360
|
+
}
|
|
361
|
+
updateSubgridRows(t, e, r, i) {
|
|
362
|
+
g(i, r) ? this.style.setProperty(`--${t}`, r) : d(
|
|
363
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
364
|
+
);
|
|
365
|
+
}
|
|
366
|
+
get $el() {
|
|
367
|
+
var t;
|
|
368
|
+
return (t = this == null ? void 0 : this.shadowRoot) == null ? void 0 : t.querySelector(".container");
|
|
369
|
+
}
|
|
290
370
|
get $slotAnchor() {
|
|
291
371
|
return this.querySelector('[slot^="anchor"]');
|
|
292
372
|
}
|
|
@@ -620,16 +700,54 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
620
700
|
set anchorOffset(t) {
|
|
621
701
|
this.setAttribute("anchor-offset", t);
|
|
622
702
|
}
|
|
703
|
+
get anchorSpacing() {
|
|
704
|
+
return this.getAttribute("anchor-spacing");
|
|
705
|
+
}
|
|
706
|
+
set anchorSpacing(t) {
|
|
707
|
+
this.setAttribute("anchor-spacing", t);
|
|
708
|
+
}
|
|
623
709
|
get inverted() {
|
|
624
|
-
return this.
|
|
710
|
+
return this.hasAttribute("inverted");
|
|
625
711
|
}
|
|
626
712
|
set inverted(t) {
|
|
627
|
-
this.setAttribute("inverted",
|
|
713
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
714
|
+
}
|
|
715
|
+
get subgridRows() {
|
|
716
|
+
return this.getAttribute("subgrid-rows");
|
|
717
|
+
}
|
|
718
|
+
set subgridRows(t) {
|
|
719
|
+
this.setAttribute("subgrid-rows", t);
|
|
720
|
+
}
|
|
721
|
+
get subgridGap() {
|
|
722
|
+
return this.getAttribute("subgrid-gap");
|
|
723
|
+
}
|
|
724
|
+
set subgridGap(t) {
|
|
725
|
+
this.setAttribute("subgrid-gap", t);
|
|
726
|
+
}
|
|
727
|
+
get subgridGapMobile() {
|
|
728
|
+
return this.getAttribute("subgrid-gap--mobile");
|
|
729
|
+
}
|
|
730
|
+
set subgridGapMobile(t) {
|
|
731
|
+
this.setAttribute("subgrid-gap--mobile", t);
|
|
732
|
+
}
|
|
733
|
+
get subgridGapTablet() {
|
|
734
|
+
return this.getAttribute("subgrid-gap--tablet");
|
|
735
|
+
}
|
|
736
|
+
set subgridGapTablet(t) {
|
|
737
|
+
this.setAttribute("subgrid-gap--tablet", t);
|
|
738
|
+
}
|
|
739
|
+
get subgridGapLaptop() {
|
|
740
|
+
return this.getAttribute("subgrid-gap--laptop");
|
|
741
|
+
}
|
|
742
|
+
set subgridGapLaptop(t) {
|
|
743
|
+
this.setAttribute("subgrid-gap--laptop", t);
|
|
628
744
|
}
|
|
629
745
|
};
|
|
630
|
-
|
|
631
|
-
let
|
|
632
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
746
|
+
u.nativeName = "div";
|
|
747
|
+
let p = u;
|
|
748
|
+
customElements.get("px-container") || customElements.define("px-container", p);
|
|
633
749
|
export {
|
|
634
|
-
|
|
750
|
+
p as Container,
|
|
751
|
+
T as anchorSpacingValues,
|
|
752
|
+
R as subgridRowsValues
|
|
635
753
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-container",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.61",
|
|
4
4
|
"description": "",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"clean": "rm -rf dist",
|
|
12
12
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
13
13
|
"test": "vitest run --coverage",
|
|
14
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
14
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
15
15
|
},
|
|
16
16
|
"publishConfig": {
|
|
17
17
|
"access": "public"
|