@proximus/lavender-container 2.0.0-alpha.5 → 2.0.0-alpha.51
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 +6 -2
- package/dist/index.es.js +127 -79
- package/package.json +2 -2
package/dist/Container.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare
|
|
1
|
+
import { VerticallyExtendedElement } from '@proximus/lavender-common';
|
|
2
|
+
export declare const anchorSpacingValues: string[];
|
|
3
|
+
export declare class Container extends VerticallyExtendedElement<HTMLDivElement> {
|
|
3
4
|
static nativeName: string;
|
|
4
5
|
private template;
|
|
5
6
|
private _bgObserver;
|
|
@@ -23,6 +24,7 @@ export declare class Container extends PxElement<HTMLDivElement> {
|
|
|
23
24
|
};
|
|
24
25
|
updateAnchorOffset(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
25
26
|
addAnchorClass(): void;
|
|
27
|
+
updateAnchorSpacing(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
26
28
|
get $slotAnchor(): HTMLSlotElement;
|
|
27
29
|
get padding(): string;
|
|
28
30
|
set padding(value: string);
|
|
@@ -134,6 +136,8 @@ export declare class Container extends PxElement<HTMLDivElement> {
|
|
|
134
136
|
set boxShadow(value: string);
|
|
135
137
|
get anchorOffset(): string;
|
|
136
138
|
set anchorOffset(value: string);
|
|
139
|
+
get anchorSpacing(): string;
|
|
140
|
+
set anchorSpacing(value: string);
|
|
137
141
|
get inverted(): string;
|
|
138
142
|
set inverted(value: string);
|
|
139
143
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,56 +1,60 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { cssTokenBreakpoints as d, paddingValues as a, VerticallyExtendedElement as k, boxShadowValues as m, backgroundSizeValues as f, noBorderRadiusValues as v, borderRadiusValues as A, borderSideValues as y, borderValues as x, gradientValues as $, log as n, backgroundColorValues as L, borderColorValues as B, checkName as c } from "@proximus/lavender-common";
|
|
2
|
+
const C = ':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)}@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}}', u = new CSSStyleSheet();
|
|
3
|
+
u.replaceSync(C);
|
|
4
|
+
const S = [
|
|
5
|
+
"has-patch",
|
|
6
|
+
"neighbor-has-patch",
|
|
7
|
+
"has-ribbon",
|
|
8
|
+
"neighbor-has-ribbon"
|
|
9
|
+
], s = (h, t, e) => `:host([${h}${e ? `--${e}` : ""}='${t}']) .container`, b = "px-padding", T = [
|
|
10
|
+
d(
|
|
11
|
+
"padding",
|
|
12
|
+
s,
|
|
13
|
+
a,
|
|
14
|
+
b,
|
|
15
|
+
"--container-padding"
|
|
16
|
+
),
|
|
17
|
+
d(
|
|
18
|
+
"padding-inline",
|
|
19
|
+
s,
|
|
20
|
+
a,
|
|
21
|
+
b
|
|
22
|
+
),
|
|
23
|
+
d(
|
|
24
|
+
"padding-block",
|
|
25
|
+
s,
|
|
26
|
+
a,
|
|
27
|
+
b
|
|
28
|
+
),
|
|
29
|
+
d(
|
|
30
|
+
"padding-top",
|
|
31
|
+
s,
|
|
32
|
+
a,
|
|
33
|
+
b
|
|
34
|
+
),
|
|
35
|
+
d(
|
|
36
|
+
"padding-right",
|
|
37
|
+
s,
|
|
38
|
+
a,
|
|
39
|
+
b,
|
|
40
|
+
"--container-padding-right"
|
|
41
|
+
),
|
|
42
|
+
d(
|
|
43
|
+
"padding-bottom",
|
|
44
|
+
s,
|
|
45
|
+
a,
|
|
46
|
+
b
|
|
47
|
+
),
|
|
48
|
+
d(
|
|
49
|
+
"padding-left",
|
|
50
|
+
s,
|
|
51
|
+
a,
|
|
52
|
+
b,
|
|
53
|
+
"--container-padding-left"
|
|
54
|
+
)
|
|
55
|
+
], p = class p extends k {
|
|
5
56
|
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">
|
|
57
|
+
super(u, ...T), this.template = () => `<div class="container">
|
|
54
58
|
<slot></slot>
|
|
55
59
|
<slot name="anchor-left"></slot>
|
|
56
60
|
<slot name="anchor-right"></slot>
|
|
@@ -87,6 +91,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
87
91
|
"background-position",
|
|
88
92
|
"box-shadow",
|
|
89
93
|
"anchor-offset",
|
|
94
|
+
"anchor-spacing",
|
|
90
95
|
"inverted"
|
|
91
96
|
];
|
|
92
97
|
}
|
|
@@ -112,7 +117,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
112
117
|
if (e !== r)
|
|
113
118
|
switch (t) {
|
|
114
119
|
case "border":
|
|
115
|
-
this.updateAttribute(t, e, r,
|
|
120
|
+
this.updateAttribute(t, e, r, x);
|
|
116
121
|
break;
|
|
117
122
|
case "border-color":
|
|
118
123
|
this.updateBorderColor(t, r);
|
|
@@ -121,14 +126,14 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
121
126
|
case "border-side--mobile":
|
|
122
127
|
case "border-side--tablet":
|
|
123
128
|
case "border-side--laptop":
|
|
124
|
-
this.updateAttribute(t, e, r,
|
|
129
|
+
this.updateAttribute(t, e, r, y);
|
|
125
130
|
break;
|
|
126
131
|
case "border-radius":
|
|
127
132
|
this.updateAttribute(
|
|
128
133
|
t,
|
|
129
134
|
e,
|
|
130
135
|
r,
|
|
131
|
-
|
|
136
|
+
A
|
|
132
137
|
);
|
|
133
138
|
break;
|
|
134
139
|
case "no-border-radius":
|
|
@@ -139,7 +144,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
139
144
|
t,
|
|
140
145
|
e,
|
|
141
146
|
r,
|
|
142
|
-
|
|
147
|
+
v
|
|
143
148
|
);
|
|
144
149
|
break;
|
|
145
150
|
case "background-color":
|
|
@@ -159,7 +164,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
159
164
|
t,
|
|
160
165
|
e,
|
|
161
166
|
r,
|
|
162
|
-
|
|
167
|
+
f
|
|
163
168
|
);
|
|
164
169
|
break;
|
|
165
170
|
case "background-image":
|
|
@@ -172,10 +177,13 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
172
177
|
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
173
178
|
break;
|
|
174
179
|
case "box-shadow":
|
|
175
|
-
this.updateAttribute(t, e, r,
|
|
180
|
+
this.updateAttribute(t, e, r, m);
|
|
176
181
|
break;
|
|
177
182
|
case "anchor-offset":
|
|
178
|
-
this.updateAnchorOffset(e, r,
|
|
183
|
+
this.updateAnchorOffset(e, r, a);
|
|
184
|
+
break;
|
|
185
|
+
case "anchor-spacing":
|
|
186
|
+
this.updateAnchorSpacing(e, r, S);
|
|
179
187
|
break;
|
|
180
188
|
default:
|
|
181
189
|
super.attributeChangedCallback(t, e, r);
|
|
@@ -197,7 +205,7 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
197
205
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
198
206
|
}
|
|
199
207
|
updateGradient(t, e) {
|
|
200
|
-
if (this.checkName(
|
|
208
|
+
if (this.checkName($, e)) {
|
|
201
209
|
const r = this.splitAttrNameFromBreakpoint(t);
|
|
202
210
|
t = r.attrName;
|
|
203
211
|
const i = r.breakpoint;
|
|
@@ -206,11 +214,13 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
206
214
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
207
215
|
);
|
|
208
216
|
} else
|
|
209
|
-
|
|
217
|
+
n(
|
|
218
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
219
|
+
);
|
|
210
220
|
}
|
|
211
221
|
updateBackgroundColor(t, e) {
|
|
212
222
|
const r = e.startsWith("surface-");
|
|
213
|
-
if (this.checkName(
|
|
223
|
+
if (this.checkName(L, e)) {
|
|
214
224
|
const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
|
|
215
225
|
this.$el.style.setProperty(
|
|
216
226
|
`--${i.attrName}${o}`,
|
|
@@ -220,38 +230,46 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
220
230
|
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
221
231
|
);
|
|
222
232
|
} else
|
|
223
|
-
|
|
233
|
+
n(
|
|
234
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
235
|
+
);
|
|
224
236
|
}
|
|
225
237
|
updateBorderColor(t, e) {
|
|
226
|
-
this.checkName(
|
|
238
|
+
this.checkName(B, e) ? (this.$el.style.setProperty(
|
|
227
239
|
`--${t}`,
|
|
228
240
|
`var(--px-color-border-${e}-default)`
|
|
229
241
|
), this.$el.style.setProperty(
|
|
230
242
|
`--${t}-inverted`,
|
|
231
243
|
`var(--px-color-border-${e}-inverted)`
|
|
232
|
-
)) :
|
|
244
|
+
)) : n(
|
|
245
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
246
|
+
);
|
|
233
247
|
}
|
|
234
248
|
updateNoBorderRadius(t, e, r, i) {
|
|
235
249
|
if (!this.checkName(i, r))
|
|
236
|
-
|
|
250
|
+
n(
|
|
251
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
252
|
+
);
|
|
237
253
|
else {
|
|
238
|
-
const o = this.splitAttrNameFromBreakpoint(t),
|
|
254
|
+
const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
|
|
239
255
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
240
|
-
`${o.attrName}-${e}${
|
|
256
|
+
`${o.attrName}-${e}${l}`
|
|
241
257
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
242
|
-
`${o.attrName}-${r}${
|
|
258
|
+
`${o.attrName}-${r}${l}`
|
|
243
259
|
);
|
|
244
260
|
}
|
|
245
261
|
}
|
|
246
262
|
updateAttribute(t, e, r, i) {
|
|
247
263
|
if (!this.checkName(i, r))
|
|
248
|
-
|
|
264
|
+
n(
|
|
265
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
266
|
+
);
|
|
249
267
|
else {
|
|
250
|
-
const o = this.splitAttrNameFromBreakpoint(t),
|
|
268
|
+
const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
|
|
251
269
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
252
|
-
`${o.attrName}-${e}${
|
|
270
|
+
`${o.attrName}-${e}${l}`
|
|
253
271
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
254
|
-
`${o.attrName}-${r}${
|
|
272
|
+
`${o.attrName}-${r}${l}`
|
|
255
273
|
);
|
|
256
274
|
}
|
|
257
275
|
}
|
|
@@ -266,8 +284,10 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
266
284
|
return { attrName: t, breakpoint: e };
|
|
267
285
|
}
|
|
268
286
|
updateAnchorOffset(t, e, r) {
|
|
269
|
-
if (!
|
|
270
|
-
|
|
287
|
+
if (!c(r, e)) {
|
|
288
|
+
n(
|
|
289
|
+
`${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
|
|
290
|
+
);
|
|
271
291
|
return;
|
|
272
292
|
}
|
|
273
293
|
const i = (o) => {
|
|
@@ -287,6 +307,27 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
287
307
|
addAnchorClass() {
|
|
288
308
|
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
289
309
|
}
|
|
310
|
+
updateAnchorSpacing(t, e, r) {
|
|
311
|
+
if (!c(r, e)) {
|
|
312
|
+
n(
|
|
313
|
+
`${e} is not a valid anchor-spacing value for ${this.tagName.toLowerCase()}`
|
|
314
|
+
);
|
|
315
|
+
return;
|
|
316
|
+
}
|
|
317
|
+
const i = (o) => {
|
|
318
|
+
o !== null && o !== "" && o !== "default" && (this.style.setProperty(
|
|
319
|
+
"--container-anchor-spacing--mobile",
|
|
320
|
+
`var(--px-spacing-${o}-mobile)`
|
|
321
|
+
), this.style.setProperty(
|
|
322
|
+
"--container-anchor-spacing--tablet",
|
|
323
|
+
`var(--px-spacing-${o}-tablet)`
|
|
324
|
+
), this.style.setProperty(
|
|
325
|
+
"--container-anchor-spacing--laptop",
|
|
326
|
+
`var(--px-spacing-${o}-laptop)`
|
|
327
|
+
));
|
|
328
|
+
};
|
|
329
|
+
i(t), i(e);
|
|
330
|
+
}
|
|
290
331
|
get $slotAnchor() {
|
|
291
332
|
return this.querySelector('[slot^="anchor"]');
|
|
292
333
|
}
|
|
@@ -620,6 +661,12 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
620
661
|
set anchorOffset(t) {
|
|
621
662
|
this.setAttribute("anchor-offset", t);
|
|
622
663
|
}
|
|
664
|
+
get anchorSpacing() {
|
|
665
|
+
return this.getAttribute("anchor-spacing");
|
|
666
|
+
}
|
|
667
|
+
set anchorSpacing(t) {
|
|
668
|
+
this.setAttribute("anchor-spacing", t);
|
|
669
|
+
}
|
|
623
670
|
get inverted() {
|
|
624
671
|
return this.getAttribute("inverted");
|
|
625
672
|
}
|
|
@@ -627,9 +674,10 @@ const n = (u, t, e) => `:host([${u}${e ? `--${e}` : ""}='${t}']) .container`, s
|
|
|
627
674
|
this.setAttribute("inverted", t);
|
|
628
675
|
}
|
|
629
676
|
};
|
|
630
|
-
|
|
631
|
-
let
|
|
632
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
677
|
+
p.nativeName = "div";
|
|
678
|
+
let g = p;
|
|
679
|
+
customElements.get("px-container") || customElements.define("px-container", g);
|
|
633
680
|
export {
|
|
634
|
-
|
|
681
|
+
g as Container,
|
|
682
|
+
S as anchorSpacingValues
|
|
635
683
|
};
|
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.51",
|
|
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"
|