@proximus/lavender-container 2.0.0-alpha.4 → 2.0.0-alpha.41
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 +5 -5
- package/dist/index.es.js +105 -84
- package/package.json +2 -2
package/dist/Container.d.ts
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare
|
|
3
|
-
export type AnchorValue = (typeof anchorValues)[number];
|
|
4
|
-
export declare class Container extends PxElement<HTMLDivElement> {
|
|
1
|
+
import { VerticallyExtendedElement } from '@proximus/lavender-common';
|
|
2
|
+
export declare class Container extends VerticallyExtendedElement<HTMLDivElement> {
|
|
5
3
|
static nativeName: string;
|
|
6
4
|
private template;
|
|
7
5
|
private _bgObserver;
|
|
8
6
|
private _isInViewport;
|
|
7
|
+
private contentObserver;
|
|
9
8
|
constructor();
|
|
10
9
|
static get observedAttributes(): string[];
|
|
11
10
|
connectedCallback(): void;
|
|
@@ -23,6 +22,8 @@ export declare class Container extends PxElement<HTMLDivElement> {
|
|
|
23
22
|
breakpoint: string;
|
|
24
23
|
};
|
|
25
24
|
updateAnchorOffset(oldValue: string, newValue: string, attrValue: string[]): void;
|
|
25
|
+
addAnchorClass(): void;
|
|
26
|
+
get $slotAnchor(): HTMLSlotElement;
|
|
26
27
|
get padding(): string;
|
|
27
28
|
set padding(value: string);
|
|
28
29
|
get paddingBlock(): string;
|
|
@@ -136,4 +137,3 @@ export declare class Container extends PxElement<HTMLDivElement> {
|
|
|
136
137
|
get inverted(): string;
|
|
137
138
|
set inverted(value: string);
|
|
138
139
|
}
|
|
139
|
-
export {};
|
package/dist/index.es.js
CHANGED
|
@@ -1,56 +1,55 @@
|
|
|
1
|
-
import {
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { cssTokenBreakpoints as a, paddingValues as d, VerticallyExtendedElement as h, boxShadowValues as k, backgroundSizeValues as m, noBorderRadiusValues as f, borderRadiusValues as v, borderSideValues as A, borderValues as y, gradientValues as x, log as b, backgroundColorValues as $, borderColorValues as L, checkName as B } 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%}.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)) ) )}}@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)) ) )}.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 n = (c, t, e) => `:host([${c}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", T = [
|
|
5
|
+
a(
|
|
6
|
+
"padding",
|
|
7
|
+
n,
|
|
8
|
+
d,
|
|
9
|
+
s,
|
|
10
|
+
"--container-padding"
|
|
11
|
+
),
|
|
12
|
+
a(
|
|
13
|
+
"padding-inline",
|
|
14
|
+
n,
|
|
15
|
+
d,
|
|
16
|
+
s
|
|
17
|
+
),
|
|
18
|
+
a(
|
|
19
|
+
"padding-block",
|
|
20
|
+
n,
|
|
21
|
+
d,
|
|
22
|
+
s
|
|
23
|
+
),
|
|
24
|
+
a(
|
|
25
|
+
"padding-top",
|
|
26
|
+
n,
|
|
27
|
+
d,
|
|
28
|
+
s
|
|
29
|
+
),
|
|
30
|
+
a(
|
|
31
|
+
"padding-right",
|
|
32
|
+
n,
|
|
33
|
+
d,
|
|
34
|
+
s,
|
|
35
|
+
"--container-padding-right"
|
|
36
|
+
),
|
|
37
|
+
a(
|
|
38
|
+
"padding-bottom",
|
|
39
|
+
n,
|
|
40
|
+
d,
|
|
41
|
+
s
|
|
42
|
+
),
|
|
43
|
+
a(
|
|
44
|
+
"padding-left",
|
|
45
|
+
n,
|
|
46
|
+
d,
|
|
47
|
+
s,
|
|
48
|
+
"--container-padding-left"
|
|
49
|
+
)
|
|
50
|
+
], p = class p extends h {
|
|
5
51
|
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">
|
|
52
|
+
super(u, ...T), this.template = () => `<div class="container">
|
|
54
53
|
<slot></slot>
|
|
55
54
|
<slot name="anchor-left"></slot>
|
|
56
55
|
<slot name="anchor-right"></slot>
|
|
@@ -91,24 +90,28 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
91
90
|
];
|
|
92
91
|
}
|
|
93
92
|
connectedCallback() {
|
|
94
|
-
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main")
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
93
|
+
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
|
|
94
|
+
this.$slotAnchor && this.addAnchorClass();
|
|
95
|
+
}), this.contentObserver.observe(this, {
|
|
96
|
+
childList: !0,
|
|
97
|
+
subtree: !0,
|
|
98
|
+
characterData: !0
|
|
99
|
+
}), this._bgObserver = new IntersectionObserver((t) => {
|
|
100
|
+
t.forEach((e) => {
|
|
101
|
+
var r;
|
|
102
|
+
e.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (r = this._bgObserver) == null || r.disconnect());
|
|
100
103
|
});
|
|
101
104
|
}), this._bgObserver.observe(this.$el);
|
|
102
105
|
}
|
|
103
106
|
disconnectedCallback() {
|
|
104
107
|
var t;
|
|
105
|
-
(t = this._bgObserver) == null || t.disconnect();
|
|
108
|
+
(t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
|
|
106
109
|
}
|
|
107
110
|
attributeChangedCallback(t, e, r) {
|
|
108
111
|
if (e !== r)
|
|
109
112
|
switch (t) {
|
|
110
113
|
case "border":
|
|
111
|
-
this.updateAttribute(t, e, r,
|
|
114
|
+
this.updateAttribute(t, e, r, y);
|
|
112
115
|
break;
|
|
113
116
|
case "border-color":
|
|
114
117
|
this.updateBorderColor(t, r);
|
|
@@ -117,14 +120,14 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
117
120
|
case "border-side--mobile":
|
|
118
121
|
case "border-side--tablet":
|
|
119
122
|
case "border-side--laptop":
|
|
120
|
-
this.updateAttribute(t, e, r,
|
|
123
|
+
this.updateAttribute(t, e, r, A);
|
|
121
124
|
break;
|
|
122
125
|
case "border-radius":
|
|
123
126
|
this.updateAttribute(
|
|
124
127
|
t,
|
|
125
128
|
e,
|
|
126
129
|
r,
|
|
127
|
-
|
|
130
|
+
v
|
|
128
131
|
);
|
|
129
132
|
break;
|
|
130
133
|
case "no-border-radius":
|
|
@@ -135,7 +138,7 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
135
138
|
t,
|
|
136
139
|
e,
|
|
137
140
|
r,
|
|
138
|
-
|
|
141
|
+
f
|
|
139
142
|
);
|
|
140
143
|
break;
|
|
141
144
|
case "background-color":
|
|
@@ -155,7 +158,7 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
155
158
|
t,
|
|
156
159
|
e,
|
|
157
160
|
r,
|
|
158
|
-
|
|
161
|
+
m
|
|
159
162
|
);
|
|
160
163
|
break;
|
|
161
164
|
case "background-image":
|
|
@@ -168,7 +171,7 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
168
171
|
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
169
172
|
break;
|
|
170
173
|
case "box-shadow":
|
|
171
|
-
this.updateAttribute(t, e, r,
|
|
174
|
+
this.updateAttribute(t, e, r, k);
|
|
172
175
|
break;
|
|
173
176
|
case "anchor-offset":
|
|
174
177
|
this.updateAnchorOffset(e, r, d);
|
|
@@ -193,7 +196,7 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
193
196
|
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
194
197
|
}
|
|
195
198
|
updateGradient(t, e) {
|
|
196
|
-
if (this.checkName(
|
|
199
|
+
if (this.checkName(x, e)) {
|
|
197
200
|
const r = this.splitAttrNameFromBreakpoint(t);
|
|
198
201
|
t = r.attrName;
|
|
199
202
|
const i = r.breakpoint;
|
|
@@ -202,11 +205,13 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
202
205
|
`linear-gradient(var(--px-color-background-gradient-${e}))`
|
|
203
206
|
);
|
|
204
207
|
} else
|
|
205
|
-
|
|
208
|
+
b(
|
|
209
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
210
|
+
);
|
|
206
211
|
}
|
|
207
212
|
updateBackgroundColor(t, e) {
|
|
208
213
|
const r = e.startsWith("surface-");
|
|
209
|
-
if (this.checkName(
|
|
214
|
+
if (this.checkName($, e)) {
|
|
210
215
|
const i = this.splitAttrNameFromBreakpoint(t), o = i.breakpoint;
|
|
211
216
|
this.$el.style.setProperty(
|
|
212
217
|
`--${i.attrName}${o}`,
|
|
@@ -216,38 +221,46 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
216
221
|
`var(--px-color-background-${e}${r ? "" : "-inverted"})`
|
|
217
222
|
);
|
|
218
223
|
} else
|
|
219
|
-
|
|
224
|
+
b(
|
|
225
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
226
|
+
);
|
|
220
227
|
}
|
|
221
228
|
updateBorderColor(t, e) {
|
|
222
|
-
this.checkName(
|
|
229
|
+
this.checkName(L, e) ? (this.$el.style.setProperty(
|
|
223
230
|
`--${t}`,
|
|
224
231
|
`var(--px-color-border-${e}-default)`
|
|
225
232
|
), this.$el.style.setProperty(
|
|
226
233
|
`--${t}-inverted`,
|
|
227
234
|
`var(--px-color-border-${e}-inverted)`
|
|
228
|
-
)) :
|
|
235
|
+
)) : b(
|
|
236
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
237
|
+
);
|
|
229
238
|
}
|
|
230
239
|
updateNoBorderRadius(t, e, r, i) {
|
|
231
240
|
if (!this.checkName(i, r))
|
|
232
|
-
|
|
241
|
+
b(
|
|
242
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
243
|
+
);
|
|
233
244
|
else {
|
|
234
|
-
const o = this.splitAttrNameFromBreakpoint(t),
|
|
245
|
+
const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
|
|
235
246
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
236
|
-
`${o.attrName}-${e}${
|
|
247
|
+
`${o.attrName}-${e}${l}`
|
|
237
248
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
238
|
-
`${o.attrName}-${r}${
|
|
249
|
+
`${o.attrName}-${r}${l}`
|
|
239
250
|
);
|
|
240
251
|
}
|
|
241
252
|
}
|
|
242
253
|
updateAttribute(t, e, r, i) {
|
|
243
254
|
if (!this.checkName(i, r))
|
|
244
|
-
|
|
255
|
+
b(
|
|
256
|
+
`${r} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
257
|
+
);
|
|
245
258
|
else {
|
|
246
|
-
const o = this.splitAttrNameFromBreakpoint(t),
|
|
259
|
+
const o = this.splitAttrNameFromBreakpoint(t), l = o.breakpoint;
|
|
247
260
|
e !== null && e !== "" && this.$el.classList.toggle(
|
|
248
|
-
`${o.attrName}-${e}${
|
|
261
|
+
`${o.attrName}-${e}${l}`
|
|
249
262
|
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
250
|
-
`${o.attrName}-${r}${
|
|
263
|
+
`${o.attrName}-${r}${l}`
|
|
251
264
|
);
|
|
252
265
|
}
|
|
253
266
|
}
|
|
@@ -263,7 +276,9 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
263
276
|
}
|
|
264
277
|
updateAnchorOffset(t, e, r) {
|
|
265
278
|
if (!B(r, e)) {
|
|
266
|
-
|
|
279
|
+
b(
|
|
280
|
+
`${e} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
|
|
281
|
+
);
|
|
267
282
|
return;
|
|
268
283
|
}
|
|
269
284
|
const i = (o) => {
|
|
@@ -280,6 +295,12 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
280
295
|
};
|
|
281
296
|
i(t), i(e);
|
|
282
297
|
}
|
|
298
|
+
addAnchorClass() {
|
|
299
|
+
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
300
|
+
}
|
|
301
|
+
get $slotAnchor() {
|
|
302
|
+
return this.querySelector('[slot^="anchor"]');
|
|
303
|
+
}
|
|
283
304
|
get padding() {
|
|
284
305
|
return this.getAttribute("padding");
|
|
285
306
|
}
|
|
@@ -617,9 +638,9 @@ const T = ["anchor-right", "anchor-left", "anchor-full"], n = (u, t, e) => `:hos
|
|
|
617
638
|
this.setAttribute("inverted", t);
|
|
618
639
|
}
|
|
619
640
|
};
|
|
620
|
-
|
|
621
|
-
let
|
|
622
|
-
customElements.get("px-container") || customElements.define("px-container",
|
|
641
|
+
p.nativeName = "div";
|
|
642
|
+
let g = p;
|
|
643
|
+
customElements.get("px-container") || customElements.define("px-container", g);
|
|
623
644
|
export {
|
|
624
|
-
|
|
645
|
+
g as Container
|
|
625
646
|
};
|
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.41",
|
|
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"
|