@proximus/lavender-header 1.0.0-alpha.6 → 1.0.0-alpha.8
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/index.js +405 -289
- package/package.json +7 -3
package/dist/index.js
CHANGED
|
@@ -1,10 +1,57 @@
|
|
|
1
|
-
import { PxElement as
|
|
1
|
+
import { PxElement as u, cssTokenBreakpoints as a, paddingValues as n, boxShadowValues as R, backgroundSizeValues as I, noBorderRadiusValues as P, borderRadiusValues as _, borderSideValues as q, borderValues as H, gradientValues as F, backgroundColorValues as f, borderColorValues as j, transferAccessibilityAttributes as N, WithExtraAttributes as k, fontweightValues as O, colorValues as W, fontsizeValues as G } from "@proximus/lavender-common";
|
|
2
2
|
import "@proximus/lavender-layout";
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
const
|
|
3
|
+
const Y = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);background-image:var(--background-image);background:var(--background-gradient);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([inverted]) .container{background-color:var(--background-color-inverted)}.border-none{border:none}.border-s{border:var(--px-border-size-s) solid var(--border-color)}.border-m{border:var(--px-border-size-m) solid var(--border-color)}.border-l{border:var(--px-border-size-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:2}::slotted([slot="anchor-right"]){right:var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left: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:1}@media only screen and (max-width: 767px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-image--mobile, var( --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)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-s) * -1);left:calc(var(--px-border-size-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-size-m) * -1);left:calc(var(--px-border-size-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-image--tablet, var( --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-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left:var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) )}}@media only screen and (min-width: 1025px){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-image--laptop, var( --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-padding-right, var(--container-padding-inline, var(--container-padding)) )}::slotted([slot="anchor-left"]){left: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}}', m = new CSSStyleSheet();
|
|
4
|
+
m.replaceSync(Y);
|
|
5
|
+
const J = ["anchor-right", "anchor-left", "anchor-full"], d = (l, t, e) => `:host([${l}${e ? `--${e}` : ""}='${t}']) .container`, s = "px-padding", h = class h extends u {
|
|
6
6
|
constructor() {
|
|
7
|
-
super(
|
|
7
|
+
super(
|
|
8
|
+
m,
|
|
9
|
+
a(
|
|
10
|
+
"padding",
|
|
11
|
+
d,
|
|
12
|
+
n,
|
|
13
|
+
s,
|
|
14
|
+
"--container-padding"
|
|
15
|
+
),
|
|
16
|
+
a(
|
|
17
|
+
"padding-inline",
|
|
18
|
+
d,
|
|
19
|
+
n,
|
|
20
|
+
s
|
|
21
|
+
),
|
|
22
|
+
a(
|
|
23
|
+
"padding-block",
|
|
24
|
+
d,
|
|
25
|
+
n,
|
|
26
|
+
s
|
|
27
|
+
),
|
|
28
|
+
a(
|
|
29
|
+
"padding-top",
|
|
30
|
+
d,
|
|
31
|
+
n,
|
|
32
|
+
s
|
|
33
|
+
),
|
|
34
|
+
a(
|
|
35
|
+
"padding-right",
|
|
36
|
+
d,
|
|
37
|
+
n,
|
|
38
|
+
s,
|
|
39
|
+
"--container-padding-right"
|
|
40
|
+
),
|
|
41
|
+
a(
|
|
42
|
+
"padding-bottom",
|
|
43
|
+
d,
|
|
44
|
+
n,
|
|
45
|
+
s
|
|
46
|
+
),
|
|
47
|
+
a(
|
|
48
|
+
"padding-left",
|
|
49
|
+
d,
|
|
50
|
+
n,
|
|
51
|
+
s,
|
|
52
|
+
"--container-padding-left"
|
|
53
|
+
)
|
|
54
|
+
), this.template = () => `<div class="container">
|
|
8
55
|
<slot name="anchor-left"></slot>
|
|
9
56
|
<slot name="anchor-right"></slot>
|
|
10
57
|
<slot name="anchor-full"></slot>
|
|
@@ -14,34 +61,6 @@ const j = ["anchor-right", "anchor-left", "anchor-full"], G = ["", "cover", "con
|
|
|
14
61
|
static get observedAttributes() {
|
|
15
62
|
return [
|
|
16
63
|
...super.observedAttributes,
|
|
17
|
-
"padding",
|
|
18
|
-
"padding-inline",
|
|
19
|
-
"padding-block",
|
|
20
|
-
"padding-top",
|
|
21
|
-
"padding-right",
|
|
22
|
-
"padding-bottom",
|
|
23
|
-
"padding-left",
|
|
24
|
-
"padding--mobile",
|
|
25
|
-
"padding-inline--mobile",
|
|
26
|
-
"padding-block--mobile",
|
|
27
|
-
"padding-top--mobile",
|
|
28
|
-
"padding-right--mobile",
|
|
29
|
-
"padding-bottom--mobile",
|
|
30
|
-
"padding-left--mobile",
|
|
31
|
-
"padding--tablet",
|
|
32
|
-
"padding-inline--tablet",
|
|
33
|
-
"padding-block--tablet",
|
|
34
|
-
"padding-top--tablet",
|
|
35
|
-
"padding-right--tablet",
|
|
36
|
-
"padding-bottom--tablet",
|
|
37
|
-
"padding-left--tablet",
|
|
38
|
-
"padding--laptop",
|
|
39
|
-
"padding-inline--laptop",
|
|
40
|
-
"padding-block--laptop",
|
|
41
|
-
"padding-top--laptop",
|
|
42
|
-
"padding-right--laptop",
|
|
43
|
-
"padding-bottom--laptop",
|
|
44
|
-
"padding-left--laptop",
|
|
45
64
|
"border",
|
|
46
65
|
"border-color",
|
|
47
66
|
"border-side",
|
|
@@ -72,92 +91,31 @@ const j = ["anchor-right", "anchor-left", "anchor-full"], G = ["", "cover", "con
|
|
|
72
91
|
];
|
|
73
92
|
}
|
|
74
93
|
connectedCallback() {
|
|
75
|
-
super.connectedCallback(),
|
|
94
|
+
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "container-neutral-bare"), this.borderColor || (this.borderColor = "container-main");
|
|
76
95
|
const t = this.querySelector("[slot]");
|
|
77
|
-
t &&
|
|
96
|
+
t && J.includes(t.getAttribute("slot")) && this.shadowRoot.querySelector(".container").classList.toggle("anchored");
|
|
78
97
|
}
|
|
79
|
-
attributeChangedCallback(t,
|
|
80
|
-
if (
|
|
98
|
+
attributeChangedCallback(t, e, r) {
|
|
99
|
+
if (e !== r)
|
|
81
100
|
switch (t) {
|
|
82
|
-
case "padding":
|
|
83
|
-
case "padding--mobile":
|
|
84
|
-
case "padding--tablet":
|
|
85
|
-
case "padding--laptop":
|
|
86
|
-
this.updatePadding(t, r, e, d, [
|
|
87
|
-
"top",
|
|
88
|
-
"right",
|
|
89
|
-
"bottom",
|
|
90
|
-
"left"
|
|
91
|
-
]);
|
|
92
|
-
break;
|
|
93
|
-
case "padding-inline":
|
|
94
|
-
case "padding-inline--mobile":
|
|
95
|
-
case "padding-inline--tablet":
|
|
96
|
-
case "padding-inline--laptop":
|
|
97
|
-
this.updatePadding(t, r, e, d, [
|
|
98
|
-
"left",
|
|
99
|
-
"right"
|
|
100
|
-
]);
|
|
101
|
-
break;
|
|
102
|
-
case "padding-block":
|
|
103
|
-
case "padding-block--mobile":
|
|
104
|
-
case "padding-block--tablet":
|
|
105
|
-
case "padding-block--laptop":
|
|
106
|
-
this.updatePadding(t, r, e, d, [
|
|
107
|
-
"top",
|
|
108
|
-
"bottom"
|
|
109
|
-
]);
|
|
110
|
-
break;
|
|
111
|
-
case "padding-top":
|
|
112
|
-
case "padding-top--mobile":
|
|
113
|
-
case "padding-top--tablet":
|
|
114
|
-
case "padding-top--laptop":
|
|
115
|
-
this.updatePadding(t, r, e, d, [
|
|
116
|
-
"top"
|
|
117
|
-
]);
|
|
118
|
-
break;
|
|
119
|
-
case "padding-right":
|
|
120
|
-
case "padding-right--mobile":
|
|
121
|
-
case "padding-right--tablet":
|
|
122
|
-
case "padding-right--laptop":
|
|
123
|
-
this.updatePadding(t, r, e, d, [
|
|
124
|
-
"right"
|
|
125
|
-
]);
|
|
126
|
-
break;
|
|
127
|
-
case "padding-bottom":
|
|
128
|
-
case "padding-bottom--mobile":
|
|
129
|
-
case "padding-bottom--tablet":
|
|
130
|
-
case "padding-bottom--laptop":
|
|
131
|
-
this.updatePadding(t, r, e, d, [
|
|
132
|
-
"bottom"
|
|
133
|
-
]);
|
|
134
|
-
break;
|
|
135
|
-
case "padding-left":
|
|
136
|
-
case "padding-left--mobile":
|
|
137
|
-
case "padding-left--tablet":
|
|
138
|
-
case "padding-left--laptop":
|
|
139
|
-
this.updatePadding(t, r, e, d, [
|
|
140
|
-
"left"
|
|
141
|
-
]);
|
|
142
|
-
break;
|
|
143
101
|
case "border":
|
|
144
|
-
this.updateAttribute(t,
|
|
102
|
+
this.updateAttribute(t, e, r, H);
|
|
145
103
|
break;
|
|
146
104
|
case "border-color":
|
|
147
|
-
this.updateBorderColor(t,
|
|
105
|
+
this.updateBorderColor(t, r);
|
|
148
106
|
break;
|
|
149
107
|
case "border-side":
|
|
150
108
|
case "border-side--mobile":
|
|
151
109
|
case "border-side--tablet":
|
|
152
110
|
case "border-side--laptop":
|
|
153
|
-
this.updateAttribute(t,
|
|
111
|
+
this.updateAttribute(t, e, r, q);
|
|
154
112
|
break;
|
|
155
113
|
case "border-radius":
|
|
156
114
|
this.updateAttribute(
|
|
157
115
|
t,
|
|
158
|
-
r,
|
|
159
116
|
e,
|
|
160
|
-
|
|
117
|
+
r,
|
|
118
|
+
_
|
|
161
119
|
);
|
|
162
120
|
break;
|
|
163
121
|
case "no-border-radius":
|
|
@@ -166,150 +124,131 @@ const j = ["anchor-right", "anchor-left", "anchor-full"], G = ["", "cover", "con
|
|
|
166
124
|
case "no-border-radius--laptop":
|
|
167
125
|
this.updateNoBorderRadius(
|
|
168
126
|
t,
|
|
169
|
-
r,
|
|
170
127
|
e,
|
|
171
|
-
|
|
128
|
+
r,
|
|
129
|
+
P
|
|
172
130
|
);
|
|
173
131
|
break;
|
|
174
132
|
case "background-color":
|
|
175
133
|
case "background-color--mobile":
|
|
176
134
|
case "background-color--tablet":
|
|
177
135
|
case "background-color--laptop":
|
|
178
|
-
this.updateBackgroundColor(t,
|
|
136
|
+
this.updateBackgroundColor(t, r);
|
|
179
137
|
break;
|
|
180
138
|
case "background-gradient":
|
|
181
139
|
case "background-gradient--mobile":
|
|
182
140
|
case "background-gradient--tablet":
|
|
183
141
|
case "background-gradient--laptop":
|
|
184
|
-
this.updateGradient(t,
|
|
142
|
+
this.updateGradient(t, r);
|
|
185
143
|
break;
|
|
186
144
|
case "background-size":
|
|
187
145
|
this.updateAttribute(
|
|
188
146
|
t,
|
|
189
|
-
r,
|
|
190
147
|
e,
|
|
191
|
-
|
|
148
|
+
r,
|
|
149
|
+
I
|
|
192
150
|
);
|
|
193
151
|
break;
|
|
194
152
|
case "background-image":
|
|
195
153
|
case "background-image--mobile":
|
|
196
154
|
case "background-image--tablet":
|
|
197
155
|
case "background-image--laptop":
|
|
198
|
-
this.updateBackgroundImg(t,
|
|
156
|
+
this.updateBackgroundImg(t, r);
|
|
199
157
|
break;
|
|
200
158
|
case "background-position":
|
|
201
|
-
|
|
159
|
+
r !== null && r !== "" && (this.$el.style.backgroundPosition = r);
|
|
202
160
|
break;
|
|
203
161
|
case "box-shadow":
|
|
204
|
-
this.updateAttribute(t,
|
|
162
|
+
this.updateAttribute(t, e, r, R);
|
|
205
163
|
break;
|
|
206
164
|
default:
|
|
207
|
-
super.attributeChangedCallback(t,
|
|
165
|
+
super.attributeChangedCallback(t, e, r);
|
|
208
166
|
break;
|
|
209
167
|
}
|
|
210
168
|
}
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
console.error(`Bad ${t} value for`, this.$el);
|
|
214
|
-
return;
|
|
215
|
-
}
|
|
216
|
-
const i = t.includes("--"), h = i ? t.split("--")[1] : "", s = (n, l, B, M) => {
|
|
217
|
-
const C = n === "laptop" ? "desktop" : n;
|
|
218
|
-
l !== null && l !== "" && l !== "default" && B.forEach((R) => {
|
|
219
|
-
const x = `--container-padding-${R}--${n}`;
|
|
220
|
-
(M || !this.$el.style.getPropertyValue(x)) && this.$el.style.setProperty(
|
|
221
|
-
x,
|
|
222
|
-
`var(--px-padding-${l}-${C})`
|
|
223
|
-
);
|
|
224
|
-
});
|
|
225
|
-
};
|
|
226
|
-
i ? (s(h, r, a, !0), s(h, e, a, !0)) : ["mobile", "tablet", "laptop"].forEach((n) => {
|
|
227
|
-
s(n, r, a, !1), s(n, e, a, !1);
|
|
228
|
-
});
|
|
229
|
-
}
|
|
230
|
-
updateBackgroundImg(t, r) {
|
|
231
|
-
this.$el.style.setProperty(`--${t}`, `url("${r}")`);
|
|
169
|
+
updateBackgroundImg(t, e) {
|
|
170
|
+
this.$el.style.setProperty(`--${t}`, `url("${e}")`);
|
|
232
171
|
}
|
|
233
|
-
updateGradient(t,
|
|
234
|
-
if (this.checkName(
|
|
235
|
-
const
|
|
236
|
-
t =
|
|
237
|
-
const o =
|
|
172
|
+
updateGradient(t, e) {
|
|
173
|
+
if (this.checkName(F, e)) {
|
|
174
|
+
const r = this.splitAttrNameFromBreakpoint(t);
|
|
175
|
+
t = r.attrName;
|
|
176
|
+
const o = r.breakpoint;
|
|
238
177
|
this.$el.style.setProperty(
|
|
239
178
|
`--${t}${o}`,
|
|
240
|
-
`linear-gradient(var(--px-background-color-container-gradient-${
|
|
179
|
+
`linear-gradient(var(--px-background-color-container-gradient-${e}))`
|
|
241
180
|
);
|
|
242
181
|
} else
|
|
243
182
|
console.error(
|
|
244
|
-
`${
|
|
183
|
+
`${e} is not an allowed background-gradient value for ${this.$el}`
|
|
245
184
|
);
|
|
246
185
|
}
|
|
247
|
-
updateBackgroundColor(t,
|
|
248
|
-
if (this.checkName(
|
|
249
|
-
const
|
|
186
|
+
updateBackgroundColor(t, e) {
|
|
187
|
+
if (this.checkName(f, e)) {
|
|
188
|
+
const r = this.splitAttrNameFromBreakpoint(t), o = r.breakpoint;
|
|
250
189
|
this.$el.style.setProperty(
|
|
251
|
-
`--${
|
|
252
|
-
`var(--px-background-color-${
|
|
190
|
+
`--${r.attrName}${o}`,
|
|
191
|
+
`var(--px-background-color-${e}-default)`
|
|
253
192
|
), this.$el.style.setProperty(
|
|
254
|
-
`--${
|
|
255
|
-
`var(--px-background-color-${
|
|
193
|
+
`--${r.attrName}-inverted${o}`,
|
|
194
|
+
`var(--px-background-color-${e}-inverted)`
|
|
256
195
|
);
|
|
257
196
|
} else
|
|
258
197
|
console.error(
|
|
259
|
-
`${
|
|
198
|
+
`${e} is not an allowed ${t} value for ${this.$el}`
|
|
260
199
|
);
|
|
261
200
|
}
|
|
262
|
-
updateBorderColor(t,
|
|
263
|
-
this.checkName(
|
|
201
|
+
updateBorderColor(t, e) {
|
|
202
|
+
this.checkName(j, e) ? (this.$el.style.setProperty(
|
|
264
203
|
`--${t}`,
|
|
265
|
-
`var(--px-border-color-${
|
|
204
|
+
`var(--px-border-color-${e}-default)`
|
|
266
205
|
), this.$el.style.setProperty(
|
|
267
206
|
`--${t}-inverted`,
|
|
268
|
-
`var(--px-border-color-${
|
|
207
|
+
`var(--px-border-color-${e}-inverted)`
|
|
269
208
|
)) : console.error(
|
|
270
|
-
`${
|
|
209
|
+
`${e} is not an allowed ${t} value for ${this.$el}`
|
|
271
210
|
);
|
|
272
211
|
}
|
|
273
|
-
updateNoBorderRadius(t,
|
|
274
|
-
if (!this.checkName(o,
|
|
212
|
+
updateNoBorderRadius(t, e, r, o) {
|
|
213
|
+
if (!this.checkName(o, r))
|
|
275
214
|
console.error(
|
|
276
|
-
`${
|
|
215
|
+
`${r} is not an allowed ${t} value for ${this.$el}`
|
|
277
216
|
);
|
|
278
217
|
else {
|
|
279
|
-
const
|
|
280
|
-
|
|
281
|
-
`${
|
|
282
|
-
),
|
|
283
|
-
`${
|
|
218
|
+
const i = this.splitAttrNameFromBreakpoint(t), b = i.breakpoint;
|
|
219
|
+
e !== null && e !== "" && this.$el.classList.toggle(
|
|
220
|
+
`${i.attrName}-${e}${b}`
|
|
221
|
+
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
222
|
+
`${i.attrName}-${r}${b}`
|
|
284
223
|
);
|
|
285
224
|
}
|
|
286
225
|
}
|
|
287
|
-
updateAttribute(t,
|
|
288
|
-
if (!this.checkName(o,
|
|
226
|
+
updateAttribute(t, e, r, o) {
|
|
227
|
+
if (!this.checkName(o, r))
|
|
289
228
|
console.error(
|
|
290
|
-
`${
|
|
229
|
+
`${r} is not an allowed ${t} value for ${this.$el}`
|
|
291
230
|
);
|
|
292
231
|
else {
|
|
293
|
-
const
|
|
294
|
-
|
|
295
|
-
`${
|
|
296
|
-
),
|
|
297
|
-
`${
|
|
232
|
+
const i = this.splitAttrNameFromBreakpoint(t), b = i.breakpoint;
|
|
233
|
+
e !== null && e !== "" && this.$el.classList.toggle(
|
|
234
|
+
`${i.attrName}-${e}${b}`
|
|
235
|
+
), r !== null && r !== "" && this.$el.classList.toggle(
|
|
236
|
+
`${i.attrName}-${r}${b}`
|
|
298
237
|
);
|
|
299
238
|
}
|
|
300
239
|
}
|
|
301
240
|
splitAttrNameFromBreakpoint(t) {
|
|
302
|
-
let
|
|
241
|
+
let e = "";
|
|
303
242
|
if (["--mobile", "--tablet", "--laptop"].some(
|
|
304
|
-
(
|
|
243
|
+
(r) => t.includes(r)
|
|
305
244
|
)) {
|
|
306
|
-
const
|
|
307
|
-
t =
|
|
245
|
+
const r = t.split("--");
|
|
246
|
+
t = r[0], e = `--${r[1]}`;
|
|
308
247
|
}
|
|
309
|
-
return { attrName: t, breakpoint:
|
|
248
|
+
return { attrName: t, breakpoint: e };
|
|
310
249
|
}
|
|
311
|
-
checkName(t,
|
|
312
|
-
return t.includes(
|
|
250
|
+
checkName(t, e) {
|
|
251
|
+
return t.includes(e);
|
|
313
252
|
}
|
|
314
253
|
get padding() {
|
|
315
254
|
return this.getAttribute("padding");
|
|
@@ -642,15 +581,15 @@ const j = ["anchor-right", "anchor-left", "anchor-full"], G = ["", "cover", "con
|
|
|
642
581
|
this.setAttribute("inverted", t);
|
|
643
582
|
}
|
|
644
583
|
};
|
|
645
|
-
|
|
646
|
-
let
|
|
647
|
-
customElements.define("px-container",
|
|
648
|
-
const O = '.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.operational-tag){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.operational-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.operational-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.operational-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.operational-tag).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.operational-tag).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.operational-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-after-element-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default)}.btn.operational-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.operational-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}.btn.operational-tag[disabled],.btn.operational-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.operational-tag){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.operational-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.operational-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.operational-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.operational-tag).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.operational-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .btn.operational-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-hover-bordered-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn.operational-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([inverted]) .btn.operational-tag[disabled],:host([inverted]) .btn.operational-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.operational-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-after-element-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.operational-tag){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1025px){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.operational-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-after-element-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.operational-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.operational-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}', W = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-text-color-action-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', Y = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625rem;border:var(--px-border-size-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", J = ".tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:400;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([inverted]) .tag{background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", y = new CSSStyleSheet(), A = new CSSStyleSheet(), $ = new CSSStyleSheet(), S = new CSSStyleSheet();
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
const
|
|
584
|
+
h.nativeName = "div";
|
|
585
|
+
let c = h;
|
|
586
|
+
customElements.define("px-container", c);
|
|
587
|
+
const y = '.btn{width:var(--button-extended--mobile, var(--button-extended, auto));display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-after-element-2xs-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-size-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-primary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-mobile) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],.btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch,.actionable-tag).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-secondary-default);min-height:var(--px-action-size-l);padding:var(--px-padding-xs-mobile) var(--px-padding-m-mobile);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.secondary.loading{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-text-color-heading-brand-default);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid transparent;padding:var(--px-padding-2xs-mobile) 0;gap:var(--px-spacing-after-element-xs-mobile)}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-mobile) var(--px-padding-s-mobile)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;margin:0 -8px;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-default)}.btn.tertiary.loading{color:var(--px-text-color-heading-brand-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);padding:4px;border-radius:var(--px-radius-pill);background:var(--px-background-color-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}.btn.actionable-tag{background:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);gap:var(--px-spacing-after-element-xs-mobile);border-radius:var(--px-radius-pill);border:var(--px-border-size-m) solid var(--px-border-color-action-neutral-default)}.btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-default);background:var(--px-background-color-action-hover-bordered-default)}.btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-default);color:var(--px-text-color-action-active-inverted);border-color:var(--px-border-color-none)}.btn.actionable-tag[disabled],.btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default);border-color:var(--px-border-color-none)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag){color:var(--px-text-color-heading-brand-default);background:var(--px-background-color-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-neutral-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag)[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch,.actionable-tag).loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var(--px-background-color-action-neutral-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-heading-brand-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-background-color-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-background-color-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-heading-brand-inverted);background:var( --px-background-color-action-hover-bordered-default-inverted )}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .btn.actionable-tag{background:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-brand-inverted);border-color:var(--px-border-color-action-neutral-inverted)}:host([inverted]) .btn.actionable-tag:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-text-color-action-brand-inverted);background:var(--px-background-color-action-neutral-inverted);border-color:var(--px-border-color-action-hover-inverted)}:host([inverted]) .btn.actionable-tag:active:not([disabled],[aria-disabled=true],.loading){background:var(--px-background-color-action-active-inverted);color:var(--px-text-color-action-active-default);border-color:var(--px-border-color-none)}:host([inverted]) .btn.actionable-tag[disabled],:host([inverted]) .btn.actionable-tag[aria-disabled=true]{background:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted);border-color:var(--px-border-color-none)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.btn{width:var(--button-extended--tablet, var(--button-extended, auto));font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-2xs-tablet)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}.btn.actionable-tag{padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet);gap:var(--px-spacing-after-element-xs-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-tablet) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-tablet) * -1)}.btn.secondary{padding:var(--px-padding-xs-tablet) var(--px-padding-m-tablet)}.btn.tertiary{padding:var(--px-padding-2xs-tablet) 0;gap:var(--px-spacing-after-element-xs-tablet)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-tablet) var(--px-padding-s-tablet)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}}@media only screen and (min-width: 1025px){.btn{width:var(--button-extended--laptop, var(--button-extended, auto));font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-2xs-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn.actionable-tag{padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop);gap:var(--px-spacing-after-element-xs-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag){padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="after"]){margin-right:calc(var(--px-padding-xs-desktop) * -1)}.btn:not(.secondary,.tertiary,.patch,.actionable-tag) ::slotted([slot="before"]){margin-left:calc(var(--px-padding-xs-desktop) * -1)}.btn.secondary{padding:var(--px-padding-xs-desktop) var(--px-padding-m-desktop)}.btn.tertiary{padding:var(--px-padding-2xs-desktop) 0;gap:var(--px-spacing-after-element-xs-desktop)}.btn.tertiary ::slotted(px-icon){width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs-desktop) var(--px-padding-s-desktop)}.btn.tertiary.loading ::slotted(px-spinner){width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}', A = 'a,.link,::slotted(a){display:inline-flex;align-items:center;font-family:var(--px-font-family);font-size:var(--px-text-size-link-m-mobile);line-height:var(--px-line-height-m);font-weight:400;color:var(--px-text-color-heading-neutral-default)}a:hover,.link:hover{color:var(--px-text-color-action-hover-default)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-border-color-focus-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-text-color-action-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-mobile)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-text-color-action-hover-default)}a.no-style{text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-background-color-container-weak);padding:var(--px-padding-xs-mobile)}a.skip-link:focus{left:auto;z-index:999}a.icon-link{color:var(--px-icon-color-content-brand-default)}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-border-color-focus-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-text-color-action-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-background-color-container-weak-inverted)}:host([inverted]) a.icon-link{color:var(--px-icon-color-content-brand-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-tablet)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-tablet);outline-width:var(--px-focus-outline-tablet)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-tablet)}a.skip-link{padding:var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){a,.link,::slotted(a){font-size:var(--px-text-size-link-m-desktop)}a:focus,.link:focus{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-after-element-2xs-desktop)}a.skip-link{padding:var(--px-padding-xs-desktop)}}', K = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s-mobile);height:1.625em;border:var(--px-border-size-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-background-color-purpose-promo-default);color:var(--px-text-color-action-neutral-inverted)}.patch,.patch *{box-sizing:border-box}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-background-color-purpose-info-default);color:var(--px-text-color-action-neutral-default)}.black-friday{background-color:var(--px-background-color-container-neutral-rich-default);color:var(--px-text-color-action-neutral-inverted)}.eco{background-color:var(--px-background-color-purpose-success-default);color:var(--px-text-color-action-neutral-inverted)}.greyed{background-color:var(--px-background-color-action-disabled-default);color:var(--px-text-color-action-disabled-default)}:host([inverted]) .patch{background-color:var(--px-background-color-purpose-promo-inverted);color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .info{background-color:var(--px-background-color-purpose-info-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .black-friday{background-color:var(--px-background-color-container-neutral-bare-default);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .eco{background-color:var(--px-background-color-purpose-success-inverted);color:var(--px-text-color-action-neutral-default)}:host([inverted]) .greyed{background-color:var(--px-background-color-action-disabled-inverted);color:var(--px-text-color-action-disabled-inverted)}@media only screen and (min-width: 768px){.patch{padding:0 var(--px-padding-s-tablet);font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 1025px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}@media only screen and (min-width: 1441px){.patch{padding:0 var(--px-padding-s-desktop);font-size:var(--px-text-size-label-m-desktop)}}", Q = ":host{display:inline-block}.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-m);font-weight:400;gap:var(--px-spacing-after-element-xs-mobile);background-color:var(--px-background-color-action-neutral-default);color:var(--px-text-color-action-neutral-default);padding:var(--px-padding-2xs-mobile) var(--px-padding-xs-mobile);border:var(--px-border-size-s) solid transparent;border-radius:var(--px-radius-main)}.tag,.tag *{box-sizing:border-box}:host([inverted]) .tag{background-color:var(--px-background-color-action-neutral-inverted);color:var(--px-text-color-action-neutral-inverted)}@media only screen and (min-width: 768px){.tag{font-size:var(--px-text-size-label-m-tablet);gap:var(--px-spacing-after-element-xs-tablet);padding:var(--px-padding-2xs-tablet) var(--px-padding-xs-tablet)}}@media only screen and (min-width: 1025px){.tag{font-size:var(--px-text-size-label-m-desktop);gap:var(--px-spacing-after-element-xs-desktop);padding:var(--px-padding-2xs-desktop) var(--px-padding-xs-desktop)}}", z = new CSSStyleSheet(), $ = new CSSStyleSheet(), S = new CSSStyleSheet(), L = new CSSStyleSheet();
|
|
588
|
+
z.replaceSync(y);
|
|
589
|
+
$.replaceSync(A);
|
|
590
|
+
S.replaceSync(K);
|
|
591
|
+
L.replaceSync(Q);
|
|
592
|
+
const U = [
|
|
654
593
|
"",
|
|
655
594
|
"default",
|
|
656
595
|
"secondary",
|
|
@@ -660,17 +599,17 @@ const K = [
|
|
|
660
599
|
"patch-info",
|
|
661
600
|
"patch-black-friday",
|
|
662
601
|
"patch-eco",
|
|
663
|
-
"
|
|
664
|
-
],
|
|
602
|
+
"actionable-tag"
|
|
603
|
+
], X = [
|
|
665
604
|
"extended",
|
|
666
605
|
"extended--mobile",
|
|
667
606
|
"extended--tablet",
|
|
668
607
|
"extended--laptop"
|
|
669
|
-
],
|
|
608
|
+
], x = class x extends u {
|
|
670
609
|
constructor() {
|
|
671
|
-
super(
|
|
672
|
-
|
|
673
|
-
|
|
610
|
+
super(z, $, S, L), this.template = () => `<button class="btn">
|
|
611
|
+
<slot name="before"></slot><slot></slot><slot name="after"></slot>
|
|
612
|
+
</button>`, this.shadowRoot.innerHTML = this.template();
|
|
674
613
|
}
|
|
675
614
|
static get observedAttributes() {
|
|
676
615
|
return [
|
|
@@ -680,82 +619,88 @@ const K = [
|
|
|
680
619
|
"loading",
|
|
681
620
|
"shape",
|
|
682
621
|
"inverted",
|
|
683
|
-
...
|
|
622
|
+
...X
|
|
684
623
|
];
|
|
685
624
|
}
|
|
686
625
|
connectedCallback() {
|
|
687
626
|
super.connectedCallback();
|
|
688
627
|
const t = this.querySelectorAll("px-icon");
|
|
689
|
-
t && t.forEach((
|
|
690
|
-
const
|
|
691
|
-
|
|
628
|
+
t && t.forEach((e) => {
|
|
629
|
+
const r = e.getAttribute("size"), o = e.getAttribute("color");
|
|
630
|
+
e && (e.addEventListener("click", () => {
|
|
692
631
|
this.$el.focus();
|
|
693
|
-
}),
|
|
632
|
+
}), r || e.setAttribute("size", "xs"), o || e.setAttribute("color", "inherit"));
|
|
633
|
+
}), N(this, this.$el), this.$el.type === "submit" && this.addEventListener("click", (e) => {
|
|
634
|
+
var r;
|
|
635
|
+
e.preventDefault(), (r = this.closest("form")) == null || r.submit();
|
|
636
|
+
}), this.$el.type === "reset" && this.addEventListener("click", (e) => {
|
|
637
|
+
var r;
|
|
638
|
+
e.preventDefault(), (r = this.closest("form")) == null || r.reset();
|
|
694
639
|
});
|
|
695
640
|
}
|
|
696
|
-
attributeChangedCallback(t,
|
|
697
|
-
if (
|
|
641
|
+
attributeChangedCallback(t, e, r) {
|
|
642
|
+
if (e !== r)
|
|
698
643
|
switch (t) {
|
|
699
644
|
case "variant":
|
|
700
|
-
this.updateVariant(
|
|
645
|
+
this.updateVariant(e, r, U);
|
|
701
646
|
break;
|
|
702
647
|
case "state":
|
|
703
|
-
this.updateState(
|
|
648
|
+
this.updateState(e, r);
|
|
704
649
|
break;
|
|
705
650
|
case "extended":
|
|
706
651
|
case "extended--mobile":
|
|
707
652
|
case "extended--tablet":
|
|
708
653
|
case "extended--laptop":
|
|
709
|
-
this.updateExtended(t,
|
|
654
|
+
this.updateExtended(t, r);
|
|
710
655
|
break;
|
|
711
656
|
case "loading":
|
|
712
657
|
this.updateLoading();
|
|
713
658
|
break;
|
|
714
659
|
case "shape":
|
|
715
|
-
this.updateShape(
|
|
660
|
+
this.updateShape(e, r);
|
|
716
661
|
break;
|
|
717
662
|
default:
|
|
718
|
-
super.attributeChangedCallback(t,
|
|
663
|
+
super.attributeChangedCallback(t, e, r);
|
|
719
664
|
break;
|
|
720
665
|
}
|
|
721
666
|
}
|
|
722
|
-
checkName(t,
|
|
723
|
-
return !!t.includes(
|
|
667
|
+
checkName(t, e) {
|
|
668
|
+
return !!t.includes(e);
|
|
724
669
|
}
|
|
725
670
|
checkClass(t) {
|
|
726
671
|
if (t.startsWith("patch-")) {
|
|
727
|
-
const
|
|
728
|
-
for (const
|
|
729
|
-
|
|
672
|
+
const e = t.split(/-(.*)/s);
|
|
673
|
+
for (const r of e)
|
|
674
|
+
r != "" && this.$el.classList.toggle(r);
|
|
730
675
|
} else
|
|
731
676
|
this.$el.classList.toggle(t);
|
|
732
677
|
}
|
|
733
|
-
_toggleClass(t,
|
|
734
|
-
t !== null && t !== "" && t !== "default" && this.checkClass(t),
|
|
678
|
+
_toggleClass(t, e) {
|
|
679
|
+
t !== null && t !== "" && t !== "default" && this.checkClass(t), e !== null && e !== "" && e !== "default" && this.checkClass(e);
|
|
735
680
|
}
|
|
736
|
-
updateVariant(t,
|
|
737
|
-
|
|
681
|
+
updateVariant(t, e, r) {
|
|
682
|
+
e === "link" ? this.$el.classList.remove("btn") : this.$el.classList.add("btn"), this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "variant" value for ${this.$el}`);
|
|
738
683
|
}
|
|
739
|
-
updateState(t,
|
|
740
|
-
const
|
|
741
|
-
this._toggleClass(t,
|
|
684
|
+
updateState(t, e) {
|
|
685
|
+
const r = ["", "default", "success", "error"];
|
|
686
|
+
this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "sate" value for ${this.$el}`);
|
|
742
687
|
}
|
|
743
|
-
updateExtended(t,
|
|
744
|
-
|
|
688
|
+
updateExtended(t, e) {
|
|
689
|
+
e === null ? this.$el.style.setProperty(`--button-${t}`, "") : this.$el.style.setProperty(`--button-${t}`, "100%");
|
|
745
690
|
}
|
|
746
691
|
updateLoading() {
|
|
747
692
|
const t = this.querySelector("px-spinner");
|
|
748
693
|
t && (t.getAttribute("size") || t.setAttribute("size", "xs")), this.$el.classList.toggle("loading");
|
|
749
694
|
}
|
|
750
|
-
updateShape(t,
|
|
751
|
-
const
|
|
695
|
+
updateShape(t, e) {
|
|
696
|
+
const r = [
|
|
752
697
|
"",
|
|
753
698
|
"default",
|
|
754
699
|
"bottom-right",
|
|
755
700
|
"bottom-left",
|
|
756
701
|
"alternative"
|
|
757
702
|
];
|
|
758
|
-
this._toggleClass(t,
|
|
703
|
+
this._toggleClass(t, e), this.checkName(r, e) || console.error(`Bad "shape" value for ${this.$el}`);
|
|
759
704
|
}
|
|
760
705
|
get variant() {
|
|
761
706
|
return this.getAttribute("variant");
|
|
@@ -812,16 +757,16 @@ const K = [
|
|
|
812
757
|
this.setAttribute("inverted", t);
|
|
813
758
|
}
|
|
814
759
|
};
|
|
815
|
-
|
|
816
|
-
let p =
|
|
760
|
+
x.nativeName = "button";
|
|
761
|
+
let p = x;
|
|
817
762
|
customElements.get("px-button") || customElements.define("px-button", p);
|
|
818
|
-
const
|
|
819
|
-
|
|
820
|
-
class
|
|
763
|
+
const Z = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:1200px}@media only screen and (min-width: 1232px){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-mobile)}@media only screen and (min-width: 768px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-tablet) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-tablet)}}@media only screen and (min-width: 1025px){.overlapped{margin-bottom:calc(var(--px-spacing-inside-section-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-spacing-inside-section-overlapped-desktop)}}', T = new CSSStyleSheet();
|
|
764
|
+
T.replaceSync(Z);
|
|
765
|
+
class D extends HTMLElement {
|
|
821
766
|
constructor() {
|
|
822
767
|
super(), this.template = () => `
|
|
823
768
|
<px-container border-radius="none" padding-inline="none" background-color="${this.backgroundColor}">
|
|
824
|
-
<div class="content-wrapper">
|
|
769
|
+
<div class="content-wrapper ${this.$slotOverlap ? "overlapped" : ""}">
|
|
825
770
|
<px-vstack gap="heading-to-content">
|
|
826
771
|
<slot name="heading"></slot>
|
|
827
772
|
<px-vstack gap="after-element-none">
|
|
@@ -830,7 +775,10 @@ class X extends HTMLElement {
|
|
|
830
775
|
</px-vstack>
|
|
831
776
|
</div>
|
|
832
777
|
</px-container>
|
|
833
|
-
|
|
778
|
+
<div class="content-wrapper">
|
|
779
|
+
<slot name="overlap"></slot>
|
|
780
|
+
</div>
|
|
781
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [T];
|
|
834
782
|
}
|
|
835
783
|
connectedCallback() {
|
|
836
784
|
const t = this.querySelector('[slot="heading"]');
|
|
@@ -868,86 +816,89 @@ class X extends HTMLElement {
|
|
|
868
816
|
get $container() {
|
|
869
817
|
return this.shadowRoot.querySelector("px-container");
|
|
870
818
|
}
|
|
871
|
-
attributeChangedCallback(t,
|
|
872
|
-
if (
|
|
819
|
+
attributeChangedCallback(t, e, r) {
|
|
820
|
+
if (e !== r)
|
|
873
821
|
switch (t) {
|
|
874
822
|
case "background-color":
|
|
875
|
-
this.$container.backgroundColor =
|
|
823
|
+
this.$container.backgroundColor = f.indexOf(r) > 0 ? r : "none";
|
|
876
824
|
break;
|
|
877
825
|
case "background-gradient":
|
|
878
826
|
this.$container.gradient = this.gradient;
|
|
879
827
|
break;
|
|
880
828
|
case "background-image":
|
|
881
|
-
this.$container.backgroundImage =
|
|
829
|
+
this.$container.backgroundImage = r;
|
|
882
830
|
break;
|
|
883
831
|
case "background-image--mobile":
|
|
884
|
-
this.$container.backgroundImageMobile =
|
|
832
|
+
this.$container.backgroundImageMobile = r;
|
|
885
833
|
break;
|
|
886
834
|
case "background-image--tablet":
|
|
887
|
-
this.$container.backgroundImageTablet =
|
|
835
|
+
this.$container.backgroundImageTablet = r;
|
|
888
836
|
break;
|
|
889
837
|
case "background-image--laptop":
|
|
890
|
-
this.$container.backgroundImageLaptop =
|
|
838
|
+
this.$container.backgroundImageLaptop = r;
|
|
891
839
|
break;
|
|
892
840
|
case "background-size":
|
|
893
|
-
this.$container.backgroundSize =
|
|
841
|
+
this.$container.backgroundSize = r;
|
|
894
842
|
break;
|
|
895
843
|
case "background-position":
|
|
896
|
-
this.$container.backgroundPosition =
|
|
844
|
+
this.$container.backgroundPosition = r;
|
|
897
845
|
break;
|
|
898
846
|
case "padding-block":
|
|
899
|
-
this.$container.paddingBlock =
|
|
847
|
+
this.$container.paddingBlock = r;
|
|
900
848
|
break;
|
|
901
849
|
case "padding-top":
|
|
902
|
-
this.$container.paddingTop =
|
|
850
|
+
this.$container.paddingTop = r;
|
|
903
851
|
break;
|
|
904
852
|
case "padding-bottom":
|
|
905
|
-
this.$container.paddingBottom =
|
|
853
|
+
this.$container.paddingBottom = r;
|
|
906
854
|
break;
|
|
907
855
|
case "padding-block--mobile":
|
|
908
|
-
this.$container.paddingBlockMobile =
|
|
856
|
+
this.$container.paddingBlockMobile = r;
|
|
909
857
|
break;
|
|
910
858
|
case "padding-top--mobile":
|
|
911
|
-
this.$container.paddingTopMobile =
|
|
859
|
+
this.$container.paddingTopMobile = r;
|
|
912
860
|
break;
|
|
913
861
|
case "padding-bottom--mobile":
|
|
914
|
-
this.$container.paddingBottomMobile =
|
|
862
|
+
this.$container.paddingBottomMobile = r;
|
|
915
863
|
break;
|
|
916
864
|
case "padding-block--tablet":
|
|
917
|
-
this.$container.paddingBlockTablet =
|
|
865
|
+
this.$container.paddingBlockTablet = r;
|
|
918
866
|
break;
|
|
919
867
|
case "padding-top--tablet":
|
|
920
|
-
this.$container.paddingTopTablet =
|
|
868
|
+
this.$container.paddingTopTablet = r;
|
|
921
869
|
break;
|
|
922
870
|
case "padding-bottom--tablet":
|
|
923
|
-
this.$container.paddingBottomTablet =
|
|
871
|
+
this.$container.paddingBottomTablet = r;
|
|
924
872
|
break;
|
|
925
873
|
case "padding-block--laptop":
|
|
926
|
-
this.$container.paddingBlockLaptop =
|
|
874
|
+
this.$container.paddingBlockLaptop = r;
|
|
927
875
|
break;
|
|
928
876
|
case "padding-top--laptop":
|
|
929
|
-
this.$container.paddingTopLaptop =
|
|
877
|
+
this.$container.paddingTopLaptop = r;
|
|
930
878
|
break;
|
|
931
879
|
case "padding-bottom--laptop":
|
|
932
|
-
this.$container.paddingBottomLaptop =
|
|
880
|
+
this.$container.paddingBottomLaptop = r;
|
|
933
881
|
break;
|
|
934
882
|
case "border":
|
|
935
|
-
this.$container.border =
|
|
883
|
+
this.$container.border = r;
|
|
936
884
|
break;
|
|
937
885
|
case "border-side":
|
|
938
|
-
this.$container.borderSide =
|
|
886
|
+
this.$container.borderSide = r;
|
|
939
887
|
break;
|
|
940
888
|
case "border-side--mobile":
|
|
941
|
-
this.$container.borderSideMobile =
|
|
889
|
+
this.$container.borderSideMobile = r;
|
|
942
890
|
break;
|
|
943
891
|
case "border-side--tablet":
|
|
944
|
-
this.$container.borderSideTablet =
|
|
892
|
+
this.$container.borderSideTablet = r;
|
|
945
893
|
break;
|
|
946
894
|
case "border-side--laptop":
|
|
947
|
-
this.$container.borderSideLaptop =
|
|
895
|
+
this.$container.borderSideLaptop = r;
|
|
948
896
|
break;
|
|
949
897
|
}
|
|
950
898
|
}
|
|
899
|
+
get $slotOverlap() {
|
|
900
|
+
return this.querySelector('[slot="overlap"]');
|
|
901
|
+
}
|
|
951
902
|
get backgroundColor() {
|
|
952
903
|
return this.getAttribute("background-color") || "none";
|
|
953
904
|
}
|
|
@@ -1099,14 +1050,14 @@ class X extends HTMLElement {
|
|
|
1099
1050
|
this.setAttribute("border-side--laptop", t);
|
|
1100
1051
|
}
|
|
1101
1052
|
}
|
|
1102
|
-
customElements.define("px-section",
|
|
1103
|
-
const
|
|
1104
|
-
|
|
1105
|
-
class
|
|
1053
|
+
customElements.define("px-section", D);
|
|
1054
|
+
const V = ":host>*{padding:2em 0;cursor:pointer}button{margin:0;padding:0;border:0;border-bottom:2px solid rgba(0,0,0,0);outline:0;background:inherit;font-family:var(--px-font-family);font-size:var(--px-text-size-label-l-mobile)}button[aria-expanded=true],button:focus{outline:0;font-weight:700;border-bottom:2px solid var(--px-background-color-action-primary-default);color:var(--px-background-color-action-primary-default)}button:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}@media screen and (min-width: 1024px){button{font-size:var(--px-text-size-label-l-desktop)}}px-a{height:100%;display:block}px-a:hover{font-weight:700;color:var(--px-background-color-action-primary-default)}", B = new CSSStyleSheet();
|
|
1055
|
+
B.replaceSync(V);
|
|
1056
|
+
class tt extends k {
|
|
1106
1057
|
constructor() {
|
|
1107
|
-
super(), this.template = () => `${this.getAttribute("href") ? `<px-a variant="no-style" href="${this.getAttribute("href")}">
|
|
1058
|
+
super(), this.template = () => `${this.getAttribute("href") ? `<px-a font-size="body-l" variant="no-style" href="${this.getAttribute("href")}">
|
|
1108
1059
|
<slot></slot>
|
|
1109
|
-
</px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [
|
|
1060
|
+
</px-a>` : "<button><slot></slot></button>"}`, this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [B];
|
|
1110
1061
|
}
|
|
1111
1062
|
static get observedAttributes() {
|
|
1112
1063
|
return ["for", "href"];
|
|
@@ -1114,8 +1065,8 @@ class N extends m {
|
|
|
1114
1065
|
connectedCallback() {
|
|
1115
1066
|
this.setAttribute("slot", "header-entries"), this.$button && this.setupButtonA11y();
|
|
1116
1067
|
}
|
|
1117
|
-
attributeChangedCallback(t,
|
|
1118
|
-
super.attributeChangedCallback(t,
|
|
1068
|
+
attributeChangedCallback(t, e, r) {
|
|
1069
|
+
super.attributeChangedCallback(t, e, r), t === "href" && this.$button && r ? this.shadowRoot.innerHTML = this.template() : t === "for" && this.$a && r && (this.shadowRoot.innerHTML = this.template(), this.setupButtonA11y());
|
|
1119
1070
|
}
|
|
1120
1071
|
setupButtonA11y() {
|
|
1121
1072
|
this.$button.setAttribute("tabindex", "0"), this.$button.role = "menuitem", this.$button.ariaExpanded = "false", this.$button.ariaHasPopup = "menu";
|
|
@@ -1141,23 +1092,188 @@ class N extends m {
|
|
|
1141
1092
|
return this.shadowRoot.querySelector("px-a");
|
|
1142
1093
|
}
|
|
1143
1094
|
}
|
|
1144
|
-
customElements.get("px-header-item") || customElements.define("px-header-item",
|
|
1145
|
-
const
|
|
1146
|
-
|
|
1147
|
-
|
|
1095
|
+
customElements.get("px-header-item") || customElements.define("px-header-item", tt);
|
|
1096
|
+
const et = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-action-brand{color:var(--px-text-color-action-brand-default)}.color-action-neutral{color:var(--px-text-color-action-neutral-default)}.color-action-hover{color:var(--px-text-color-action-hover-default)}.color-action-active{color:var(--px-text-color-action-active-default)}.color-action-disabled{color:var(--px-text-color-action-disabled-default)}.color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-default)}.color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-default)}.color-heading-brand{color:var(--px-text-color-heading-brand-default)}.color-heading-neutral{color:var(--px-text-color-heading-neutral-default)}.color-purpose-success{color:var(--px-text-color-purpose-success-default)}.color-purpose-warning{color:var(--px-text-color-purpose-warning-default)}.color-purpose-error{color:var(--px-text-color-purpose-error-default)}.color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-default)}.color-purpose-promo{color:var(--px-text-color-purpose-promo-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-action-brand{color:var(--px-text-color-action-brand-inverted)}:host([inverted]) .color-action-neutral{color:var(--px-text-color-action-neutral-inverted)}:host([inverted]) .color-action-hover{color:var(--px-text-color-action-hover-inverted)}:host([inverted]) .color-action-active{color:var(--px-text-color-action-active-inverted)}:host([inverted]) .color-action-disabled{color:var(--px-text-color-action-disabled-inverted)}:host([inverted]) .color-body-neutral-strong{color:var(--px-text-color-body-neutral-strong-inverted)}:host([inverted]) .color-body-neutral-weak{color:var(--px-text-color-body-neutral-weak-inverted)}:host([inverted]) .color-heading-brand{color:var(--px-text-color-heading-brand-inverted)}:host([inverted]) .color-heading-neutral{color:var(--px-text-color-heading-neutral-inverted)}:host([inverted]) .color-purpose-success{color:var(--px-text-color-purpose-success-inverted)}:host([inverted]) .color-purpose-warning{color:var(--px-text-color-purpose-warning-inverted)}:host([inverted]) .color-purpose-error{color:var(--px-text-color-purpose-error-inverted)}:host([inverted]) .color-purpose-unlimited{color:var(--px-text-color-purpose-unlimited-inverted)}:host([inverted]) .color-purpose-promo{color:var(--px-text-color-purpose-promo-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-body-l{font-size:var(--px-text-size-body-l-mobile)}.font-size-body-m{font-size:var(--px-text-size-body-m-mobile)}.font-size-body-s{font-size:var(--px-text-size-body-s-mobile)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-mobile)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-mobile)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-mobile)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-mobile)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-mobile)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-mobile)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-mobile)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-mobile)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-mobile)}@media only screen and (min-width: 768px){.font-size-body-l{font-size:var(--px-text-size-body-l-tablet)}.font-size-body-m{font-size:var(--px-text-size-body-m-tablet)}.font-size-body-s{font-size:var(--px-text-size-body-s-tablet)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-tablet)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-tablet)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-tablet)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-tablet)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-tablet)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-tablet)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-tablet)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-tablet)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-tablet)}}@media only screen and (min-width: 1025px){.font-size-body-l{font-size:var(--px-text-size-body-l-desktop)}.font-size-body-m{font-size:var(--px-text-size-body-m-desktop)}.font-size-body-s{font-size:var(--px-text-size-body-s-desktop)}.font-size-body-xs{font-size:var(--px-text-size-body-xs-desktop)}.font-size-heading-5xl{font-size:var(--px-text-size-heading-5xl-desktop)}.font-size-heading-4xl{font-size:var(--px-text-size-heading-4xl-desktop)}.font-size-heading-3xl{font-size:var(--px-text-size-heading-3xl-desktop)}.font-size-heading-2xl{font-size:var(--px-text-size-heading-2xl-desktop)}.font-size-heading-xl{font-size:var(--px-text-size-heading-xl-desktop)}.font-size-heading-l{font-size:var(--px-text-size-heading-l-desktop)}.font-size-heading-m{font-size:var(--px-text-size-heading-m-desktop)}.font-size-heading-s{font-size:var(--px-text-size-heading-s-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}", C = new CSSStyleSheet(), M = new CSSStyleSheet(), w = new CSSStyleSheet();
|
|
1097
|
+
C.replaceSync(A);
|
|
1098
|
+
M.replaceSync(y);
|
|
1099
|
+
w.replaceSync(et);
|
|
1100
|
+
const rt = [
|
|
1101
|
+
"link",
|
|
1102
|
+
"no-style",
|
|
1103
|
+
"skip-link",
|
|
1104
|
+
"btn-default",
|
|
1105
|
+
"btn-secondary",
|
|
1106
|
+
"btn-tertiary",
|
|
1107
|
+
"icon-link"
|
|
1108
|
+
], ot = ["", "default", "alternative"], v = class v extends u {
|
|
1109
|
+
constructor() {
|
|
1110
|
+
super(C, M, w), this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
|
|
1111
|
+
const t = document.createElement(this.nativeName);
|
|
1112
|
+
t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
|
|
1113
|
+
}
|
|
1114
|
+
static get observedAttributes() {
|
|
1115
|
+
return [
|
|
1116
|
+
...super.observedAttributes,
|
|
1117
|
+
"disabled",
|
|
1118
|
+
"variant",
|
|
1119
|
+
"shape",
|
|
1120
|
+
"extended",
|
|
1121
|
+
"inverted",
|
|
1122
|
+
"font-size",
|
|
1123
|
+
"color",
|
|
1124
|
+
"font-weight"
|
|
1125
|
+
];
|
|
1126
|
+
}
|
|
1127
|
+
connectedCallback() {
|
|
1128
|
+
super.connectedCallback(), this.$before && this.$before.localName === "px-icon" && this.configureBeforeAfterIcon(this.$before), this.$after && this.$after.localName === "px-icon" && this.configureBeforeAfterIcon(this.$after);
|
|
1129
|
+
}
|
|
1130
|
+
attributeChangedCallback(t, e, r) {
|
|
1131
|
+
if (e !== r)
|
|
1132
|
+
switch (t) {
|
|
1133
|
+
case "disabled":
|
|
1134
|
+
this.$el.toggleAttribute("aria-disabled"), r !== null && this.$el.setAttribute("aria-disabled", "true");
|
|
1135
|
+
break;
|
|
1136
|
+
case "variant":
|
|
1137
|
+
this.updateVariant(e, r);
|
|
1138
|
+
break;
|
|
1139
|
+
case "shape":
|
|
1140
|
+
this.updateShape(e, r);
|
|
1141
|
+
break;
|
|
1142
|
+
case "extended":
|
|
1143
|
+
this.$el.classList.toggle(t);
|
|
1144
|
+
break;
|
|
1145
|
+
case "font-size":
|
|
1146
|
+
this.updateTypography(t, e, r, G);
|
|
1147
|
+
break;
|
|
1148
|
+
case "color":
|
|
1149
|
+
this.updateTypography(t, e, r, W);
|
|
1150
|
+
break;
|
|
1151
|
+
case "font-weight":
|
|
1152
|
+
this.updateTypography(t, e, r, O);
|
|
1153
|
+
break;
|
|
1154
|
+
default:
|
|
1155
|
+
super.attributeChangedCallback(t, e, r);
|
|
1156
|
+
break;
|
|
1157
|
+
}
|
|
1158
|
+
}
|
|
1159
|
+
configureBeforeAfterIcon(t) {
|
|
1160
|
+
const e = t.getAttribute("size"), r = t.getAttribute("color");
|
|
1161
|
+
t.addEventListener("click", () => {
|
|
1162
|
+
this.$el.focus();
|
|
1163
|
+
}), e || t.setAttribute("size", "2xs"), r || t.setAttribute("color", "inherit");
|
|
1164
|
+
}
|
|
1165
|
+
checkName(t, e) {
|
|
1166
|
+
return t.includes(e);
|
|
1167
|
+
}
|
|
1168
|
+
_toggleClassList(t) {
|
|
1169
|
+
if (t.startsWith("btn-")) {
|
|
1170
|
+
const e = t.split("-");
|
|
1171
|
+
for (const r of e)
|
|
1172
|
+
this.$el.classList.toggle(r);
|
|
1173
|
+
} else
|
|
1174
|
+
this.$el.classList.toggle(t);
|
|
1175
|
+
}
|
|
1176
|
+
updateVariant(t, e) {
|
|
1177
|
+
t !== null && t !== "" && t !== "link" && this._toggleClassList(t), e !== null && e !== "" && e !== "link" && this._toggleClassList(e), this.checkName(rt, e) || console.error(`Bad "variant" value for ${this.$el}`), e === "icon-link" && this.$iconNotBeforeAfter.setAttribute("color", "inherit");
|
|
1178
|
+
}
|
|
1179
|
+
updateShape(t, e) {
|
|
1180
|
+
t !== null && t !== "" && t !== "default" && this._toggleClassList(t), e !== null && e !== "" && e !== "default" && this._toggleClassList(e), this.checkName(ot, e) || console.error(`Bad "shape" value for ${this.$el}`);
|
|
1181
|
+
}
|
|
1182
|
+
updateTypography(t, e, r, o) {
|
|
1183
|
+
e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), r !== null && r !== "" && r !== "default" && this.$el.classList.toggle(`${t}-${r}`), this.checkName(o, r) || console.error(`Bad ${t} value for ${this.$el}`);
|
|
1184
|
+
}
|
|
1185
|
+
get $before() {
|
|
1186
|
+
return this.querySelector('[slot="before"]');
|
|
1187
|
+
}
|
|
1188
|
+
get $after() {
|
|
1189
|
+
return this.querySelector('[slot="after"]');
|
|
1190
|
+
}
|
|
1191
|
+
get $iconNotBeforeAfter() {
|
|
1192
|
+
return this.querySelector(
|
|
1193
|
+
'px-icon:not([slot="before"], [slot="after"])'
|
|
1194
|
+
);
|
|
1195
|
+
}
|
|
1196
|
+
get disabled() {
|
|
1197
|
+
return this.getAttribute("disabled");
|
|
1198
|
+
}
|
|
1199
|
+
set disabled(t) {
|
|
1200
|
+
this.setAttribute("disabled", t);
|
|
1201
|
+
}
|
|
1202
|
+
get variant() {
|
|
1203
|
+
return this.getAttribute("variant");
|
|
1204
|
+
}
|
|
1205
|
+
set variant(t) {
|
|
1206
|
+
this.setAttribute("variant", t);
|
|
1207
|
+
}
|
|
1208
|
+
get shape() {
|
|
1209
|
+
return this.getAttribute("shape");
|
|
1210
|
+
}
|
|
1211
|
+
set shape(t) {
|
|
1212
|
+
this.setAttribute("shape", t);
|
|
1213
|
+
}
|
|
1214
|
+
get extended() {
|
|
1215
|
+
return this.getAttribute("extended");
|
|
1216
|
+
}
|
|
1217
|
+
set extended(t) {
|
|
1218
|
+
this.setAttribute("extended", t);
|
|
1219
|
+
}
|
|
1220
|
+
get inverted() {
|
|
1221
|
+
return this.getAttribute("inverted");
|
|
1222
|
+
}
|
|
1223
|
+
set inverted(t) {
|
|
1224
|
+
this.setAttribute("inverted", t);
|
|
1225
|
+
}
|
|
1226
|
+
get fontsize() {
|
|
1227
|
+
return this.getAttribute("font-size");
|
|
1228
|
+
}
|
|
1229
|
+
set fontsize(t) {
|
|
1230
|
+
this.setAttribute("font-size", t);
|
|
1231
|
+
}
|
|
1232
|
+
get color() {
|
|
1233
|
+
return this.getAttribute("color");
|
|
1234
|
+
}
|
|
1235
|
+
set color(t) {
|
|
1236
|
+
this.setAttribute("color", t);
|
|
1237
|
+
}
|
|
1238
|
+
get fontweight() {
|
|
1239
|
+
return this.getAttribute("font-weight");
|
|
1240
|
+
}
|
|
1241
|
+
set fontweight(t) {
|
|
1242
|
+
this.setAttribute("font-weight", t);
|
|
1243
|
+
}
|
|
1244
|
+
};
|
|
1245
|
+
v.nativeName = "a";
|
|
1246
|
+
let g = v;
|
|
1247
|
+
customElements.get("px-a") || customElements.define("px-a", g);
|
|
1248
|
+
class it extends HTMLElement {
|
|
1249
|
+
constructor() {
|
|
1250
|
+
super(), this.template = `<px-a font-weight="bold" font-size="body-l" color="action-brand" variant="no-style">
|
|
1251
|
+
<slot></slot>
|
|
1252
|
+
</px-a>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template;
|
|
1253
|
+
const t = this.shadowRoot.querySelector("px-a");
|
|
1254
|
+
t && Array.from(this.attributes).forEach((e) => {
|
|
1255
|
+
t.setAttribute(e.name, e.value);
|
|
1256
|
+
});
|
|
1257
|
+
}
|
|
1258
|
+
}
|
|
1259
|
+
customElements.get("px-mdd-a") || customElements.define("px-mdd-a", it);
|
|
1260
|
+
const at = "#panel-container{position:absolute;left:0;right:0;z-index:999}@media screen and (max-width: 767px){#panel-container{top:0;border-top:none}}#backdrop-filter{position:absolute;display:none;z-index:998;left:0;width:100vw;height:100%;background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}@media screen and (max-width: 767px){slot[name=header-entries]{display:none}}@media screen and (min-width: 768px){px-button-icon{display:none}}", E = new CSSStyleSheet();
|
|
1261
|
+
E.replaceSync(at);
|
|
1262
|
+
class nt extends k {
|
|
1148
1263
|
constructor() {
|
|
1149
1264
|
var t;
|
|
1150
|
-
super(
|
|
1265
|
+
super(E), this.template = `
|
|
1151
1266
|
<div id="navigation-items-container">
|
|
1267
|
+
<slot name="skip"></slot>
|
|
1152
1268
|
<px-section padding-block--mobile="s" padding-block="none" background-color="none">
|
|
1153
|
-
<px-hstack gap
|
|
1269
|
+
<px-hstack gap="after-element-default" wrap="wrap" align-items="center">
|
|
1154
1270
|
<slot name="header-logo"></slot>
|
|
1155
1271
|
<slot name="header-entries"></slot>
|
|
1156
1272
|
<px-spacer></px-spacer>
|
|
1157
|
-
<px-hstack gap--mobile="none" gap="
|
|
1273
|
+
<px-hstack gap--mobile="none" gap="after-element-default">
|
|
1158
1274
|
<slot name="header-actions"></slot>
|
|
1159
|
-
<px-button-icon>
|
|
1160
|
-
<px-icon name="burger_menu" from="lavender"></px-icon
|
|
1275
|
+
<px-button-icon variant="naked">
|
|
1276
|
+
<px-icon name="burger_menu" from="lavender"></px-icon>
|
|
1161
1277
|
</px-button-icon>
|
|
1162
1278
|
</px-hstack>
|
|
1163
1279
|
</px-hstack>
|
|
@@ -1172,17 +1288,17 @@ class V extends m {
|
|
|
1172
1288
|
}
|
|
1173
1289
|
connectedCallback() {
|
|
1174
1290
|
this.addEventListener("click", (t) => {
|
|
1175
|
-
const
|
|
1291
|
+
const e = t.target.closest(
|
|
1176
1292
|
"px-header-item"
|
|
1177
1293
|
);
|
|
1178
|
-
|
|
1179
|
-
|
|
1294
|
+
e && e.for && (this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
|
|
1295
|
+
r.checked = !1;
|
|
1180
1296
|
}), t.target.checked = !0, this.i11yEnableActions(!1), this.togglePanel(t.target.for));
|
|
1181
1297
|
}), this.shadowRoot.addEventListener("click", (t) => {
|
|
1182
1298
|
t.target.closest("px-button-icon") && (this.$backdropFilter.style.display = "block", this.$burgerMenu.setAttribute("tabindex", "0"), this.togglePanel("__lavender_mobile_menu"));
|
|
1183
1299
|
}), this.addEventListener("section-item-click", (t) => {
|
|
1184
|
-
this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((
|
|
1185
|
-
|
|
1300
|
+
this.$backdropFilter.style.display = "block", this.$navigationItems.forEach((r) => {
|
|
1301
|
+
r.checked = !1;
|
|
1186
1302
|
}), t.detail.for !== "__lavender_mobile_menu" && (this.querySelector(
|
|
1187
1303
|
`px-header-item[for="${t.detail.for}"]`
|
|
1188
1304
|
).checked = !0), this.i11yEnableActions(!1), this.togglePanel(t.detail.for);
|
|
@@ -1193,35 +1309,35 @@ class V extends m {
|
|
|
1193
1309
|
}), this.createMobileMenuPanel();
|
|
1194
1310
|
}
|
|
1195
1311
|
createMobileMenuPanel() {
|
|
1196
|
-
var
|
|
1312
|
+
var e;
|
|
1197
1313
|
const t = `
|
|
1198
1314
|
<px-mdd name="__lavender_mobile_menu">
|
|
1199
1315
|
<span slot="title">Menu</span>
|
|
1200
1316
|
<px-mdd-section>
|
|
1201
1317
|
${[...this.$navigationItems].map(
|
|
1202
|
-
(
|
|
1318
|
+
(r) => `<px-mdd-section-item for="${r.getAttribute("for")}">${r.innerText}</px-mdd-section-item>`
|
|
1203
1319
|
).join("")}
|
|
1204
|
-
${[...this.$actionLinks].map(
|
|
1205
|
-
(
|
|
1320
|
+
${[...this.$actionLinks].filter((r) => r.hasAttribute("promoted")).map(
|
|
1321
|
+
(r) => `<px-mdd-a href="${r.getAttribute("href")}" slot="footer">${r.innerText}</px-mdd-a>`
|
|
1206
1322
|
).join("")}
|
|
1207
1323
|
</px-mdd>
|
|
1208
1324
|
`;
|
|
1209
|
-
(
|
|
1325
|
+
(e = this.$megaDropdowns.item(0)) == null || e.insertAdjacentHTML("beforebegin", t);
|
|
1210
1326
|
}
|
|
1211
1327
|
i11yEnableActions(t = !0) {
|
|
1212
1328
|
this.querySelectorAll('[slot="header-actions"]').forEach(
|
|
1213
|
-
(
|
|
1329
|
+
(e) => {
|
|
1214
1330
|
if (t) {
|
|
1215
|
-
|
|
1331
|
+
e.removeAttribute("tabindex");
|
|
1216
1332
|
return;
|
|
1217
1333
|
}
|
|
1218
|
-
|
|
1334
|
+
e.setAttribute("tabindex", "-1");
|
|
1219
1335
|
}
|
|
1220
1336
|
);
|
|
1221
1337
|
}
|
|
1222
1338
|
togglePanel(t) {
|
|
1223
|
-
this.$megaDropdowns.forEach((
|
|
1224
|
-
|
|
1339
|
+
this.$megaDropdowns.forEach((e) => {
|
|
1340
|
+
e.name === t && e.hidden && (e.hidden = !e.hidden, t !== "__lavender_mobile_menu" && (this.querySelector(`px-header-item[for="${t}"]`).checked = !e.hidden), document.body.style.overflow = e.hidden ? "auto" : "hidden"), e.name !== t && !e.hidden && (e.hidden = !0);
|
|
1225
1341
|
});
|
|
1226
1342
|
}
|
|
1227
1343
|
hidePanel() {
|
|
@@ -1247,8 +1363,8 @@ class V extends m {
|
|
|
1247
1363
|
return this.shadowRoot.querySelector("px-button-icon");
|
|
1248
1364
|
}
|
|
1249
1365
|
}
|
|
1250
|
-
customElements.get("px-header") || customElements.define("px-header",
|
|
1366
|
+
customElements.get("px-header") || customElements.define("px-header", nt);
|
|
1251
1367
|
export {
|
|
1252
|
-
|
|
1253
|
-
|
|
1368
|
+
nt as Header,
|
|
1369
|
+
tt as HeaderItem
|
|
1254
1370
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-header",
|
|
3
|
-
"version": "1.0.0-alpha.
|
|
3
|
+
"version": "1.0.0-alpha.8",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -33,10 +33,14 @@
|
|
|
33
33
|
"dist/*.js",
|
|
34
34
|
"dist/*.cjs",
|
|
35
35
|
"dist/css/**/*.css",
|
|
36
|
-
"dist/js/**/*.js"
|
|
36
|
+
"dist/js/**/*.js",
|
|
37
|
+
"dist/*.svg",
|
|
38
|
+
"dist/*.ttf",
|
|
39
|
+
"dist/glyphmap.json",
|
|
40
|
+
"dist/*.d.ts"
|
|
37
41
|
]
|
|
38
42
|
}
|
|
39
43
|
}
|
|
40
44
|
},
|
|
41
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "632aad11570412a005e2ec7417eab5be24bc207e"
|
|
42
46
|
}
|