@proximus/lavender-content-header 2.0.0-alpha.3 → 2.0.0-alpha.30
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/ContentHeader.d.ts +9 -4
- package/dist/index.es.js +1912 -34
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -1,9 +1,1880 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
n.replaceSync(l);
|
|
4
|
-
|
|
1
|
+
import { cssTokenBreakpoints as d, paddingValues as l, VerticallyExtendedElement as R, boxShadowValues as P, backgroundSizeValues as A, noBorderRadiusValues as D, borderRadiusValues as H, borderSideValues as E, borderValues as O, gradientValues as $, log as s, backgroundColorValues as u, borderColorValues as q, checkName as j, WithExtraAttributes as w, AttributeBreakpointHandlerDelegate as G, gapValues as C, PxElement as S } from "@proximus/lavender-common";
|
|
2
|
+
import "@proximus/lavender-heading";
|
|
3
|
+
const X = ":host{--min-height--mobile: 15.625em;--min-height--tablet: 17.5em;--min-height--laptop: 17.5em;--min-height--desktop: 17.5em}:host,:host>*{display:block;box-sizing:border-box}.content-header{position:relative;z-index:0}[min-height] .content-header-content{min-height:calc(var(--min-height--mobile) - (var(--px-spacing-l-mobile) * 2))}.content-header-content{display:flex;flex-direction:column;gap:var(--px-spacing-l-mobile);z-index:2;position:relative;box-sizing:border-box}.contrast-helper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:none}[contrast-helper-gradient] .contrast-helper{display:block;background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%)}[inverted] :is([contrast-helper-gradient] .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}[contrast-helper-overlay] .contrast-helper{display:block;background-color:#ffffffb3}[inverted] :is([contrast-helper-overlay] .contrast-helper){background-color:#0006}@media only screen and (min-width: 48em){.content-header-content{gap:var(--px-spacing-l-desktop)}[min-height] .content-header-content{min-height:calc(var(--min-height--tablet) - (var(--px-spacing-l-tablet) * 2))}}@media only screen and (min-width: 64.0625em){.content-header-content{gap:var(--px-spacing-l-laptop)}[min-height] .content-header-content{min-height:calc(var(--min-height--laptop) - (var(--px-spacing-l-laptop) * 2))}}", F = ':host{display:block}:host,:host *{box-sizing:border-box}.content-wrapper{margin-inline:var(--px-padding-s-mobile);max-width:var(--px-content-wrapper-max-width-desktop)}@media only screen and (min-width: 77em){.content-wrapper{margin-inline:auto}}.overlapped{margin-bottom:calc(var(--px-overlapped-mobile) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-mobile)}@media only screen and (min-width: 48em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}@media only screen and (min-width: 64.0625em){.overlapped{margin-bottom:calc(var(--px-overlapped-desktop) * -1)}::slotted([slot="overlap"]){margin-top:var(--px-overlapped-desktop)}}', _ = ':host{display:block}.container{font-family:var(--px-font-family);background-color:var(--background-color);border-radius:var(--px-radius-main);box-sizing:border-box;height:100%}:host([background-image]) .container{background-image:var(--background-image)}:host([background-gradient]) .container{background-image:var(--background-gradient)}:host([inverted]) .container{background-color:var(--background-color-inverted);color:var(--px-color-text-neutral-inverted)}.border-none{border:none}.border-s{border:var(--px-size-border-s) solid var(--border-color)}.border-m{border:var(--px-size-border-m) solid var(--border-color)}.border-l{border:var(--px-size-border-l) solid var(--border-color)}.border-side-top{border-bottom-style:none;border-right-style:none;border-left-style:none}.border-side-right{border-top-style:none;border-bottom-style:none;border-left-style:none}.border-side-bottom{border-top-style:none;border-right-style:none;border-left-style:none}.border-side-left{border-top-style:none;border-right-style:none;border-bottom-style:none}.border-side-block{border-inline-style:none}.border-side-inline{border-block-style:none}:host([inverted]) .border-s,:host([inverted]) .border-m,:host([inverted]) .border-l{border-color:var(--border-color-inverted)}.border-radius-main{border-radius:var(--px-radius-main)}.border-radius-pill{border-radius:var(--px-radius-pill)}.no-border-radius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.border-radius-none{border-radius:var(--px-radius-none)}.bgimg{background-repeat:no-repeat}.background-size-cover{background-size:cover;background-position:center center}.background-size-contain{background-size:contain}.box-shadow-none{box-shadow:none}.box-shadow-s{box-shadow:0 1px 2px #2525251f}.box-shadow-m{box-shadow:0 4px 6px -1px #25252514}.box-shadow-l{box-shadow:0 10px 15px -3px #25252514}.box-shadow-xl{box-shadow:0 20px 25px -5px #25252514}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:3}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--mobile, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--mobile, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:2}::slotted(px-vstack:only-of-type),::slotted(px-hstack:only-of-type),::slotted(px-stack:only-of-type),::slotted(px-grid:only-of-type){height:100%}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-s) * -1);left:calc(var(--px-size-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-m) * -1);left:calc(var(--px-size-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-size-border-l) * -1);left:calc(var(--px-size-border-l) * -1)}@media only screen and (max-width: 47.938em){.container{background-color:var(--background-color--mobile, var(--background-color))}:host([background-image--mobile]) .container{background-image:var(--background-image--mobile, var(--background-image))}:host([background-gradient--mobile]) .container{background-image:var( --background-gradient--mobile, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--mobile, var(--background-color-inverted) )}.border-side-top--mobile{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--mobile{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--mobile{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--mobile{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--mobile{border-inline-style:none;border-block-style:solid}.border-side-inline--mobile{border-block-style:none;border-inline-style:solid}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 48em) and (max-width: 64em){.container{background-color:var(--background-color--tablet, var(--background-color))}:host([background-image--tablet]) .container{background-image:var(--background-image--tablet, var(--background-image))}:host([background-gradient--tablet]) .container{background-image:var( --background-gradient--tablet, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--tablet, var(--background-color-inverted) )}.no-border-radius-top--tablet{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--tablet{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--tablet{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--tablet{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--tablet{border-radius:var(--px-radius-none)}.border-side-top--tablet{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--tablet{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--tablet{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--tablet{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--tablet{border-inline-style:none;border-block-style:solid}.border-side-inline--tablet{border-block-style:none;border-inline-style:solid}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--tablet, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--tablet, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}}@media only screen and (min-width: 64.0625em){.container{background-color:var(--background-color--laptop, var(--background-color))}:host([background-image--laptop]) .container{background-image:var(--background-image--laptop, var(--background-image))}:host([background-gradient--laptop]) .container{background-image:var( --background-gradient--laptop, var(--background-gradient) )}:host([inverted]) .container{background-color:var( --background-color-inverted--laptop, var(--background-color-inverted) )}.no-border-radius-top--laptop{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--laptop{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--laptop{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--laptop{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--laptop{border-radius:var(--px-radius-none)}::slotted([slot="anchor-right"]){right:var( --container-anchor-offset--laptop, var( --container-padding-right, var(--container-padding-inline, var(--container-padding)) ) )}::slotted([slot="anchor-left"]){left:var( --container-anchor-offset--laptop, var( --container-padding-left, var(--container-padding-inline, var(--container-padding)) ) )}.border-side-top--laptop{border-top-style:solid;border-right-style:none;border-bottom-style:none;border-left-style:none}.border-side-right--laptop{border-top-style:none;border-right-style:solid;border-bottom-style:none;border-left-style:none}.border-side-bottom--laptop{border-top-style:none;border-right-style:none;border-bottom-style:solid;border-left-style:none}.border-side-left--laptop{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:solid}.border-side-block--laptop{border-inline-style:none;border-block-style:solid}.border-side-inline--laptop{border-block-style:none;border-inline-style:solid}}', L = new CSSStyleSheet();
|
|
4
|
+
L.replaceSync(_);
|
|
5
|
+
const b = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .container`, g = "px-padding", N = [
|
|
6
|
+
d(
|
|
7
|
+
"padding",
|
|
8
|
+
b,
|
|
9
|
+
l,
|
|
10
|
+
g,
|
|
11
|
+
"--container-padding"
|
|
12
|
+
),
|
|
13
|
+
d(
|
|
14
|
+
"padding-inline",
|
|
15
|
+
b,
|
|
16
|
+
l,
|
|
17
|
+
g
|
|
18
|
+
),
|
|
19
|
+
d(
|
|
20
|
+
"padding-block",
|
|
21
|
+
b,
|
|
22
|
+
l,
|
|
23
|
+
g
|
|
24
|
+
),
|
|
25
|
+
d(
|
|
26
|
+
"padding-top",
|
|
27
|
+
b,
|
|
28
|
+
l,
|
|
29
|
+
g
|
|
30
|
+
),
|
|
31
|
+
d(
|
|
32
|
+
"padding-right",
|
|
33
|
+
b,
|
|
34
|
+
l,
|
|
35
|
+
g,
|
|
36
|
+
"--container-padding-right"
|
|
37
|
+
),
|
|
38
|
+
d(
|
|
39
|
+
"padding-bottom",
|
|
40
|
+
b,
|
|
41
|
+
l,
|
|
42
|
+
g
|
|
43
|
+
),
|
|
44
|
+
d(
|
|
45
|
+
"padding-left",
|
|
46
|
+
b,
|
|
47
|
+
l,
|
|
48
|
+
g,
|
|
49
|
+
"--container-padding-left"
|
|
50
|
+
)
|
|
51
|
+
], v = class v extends R {
|
|
5
52
|
constructor() {
|
|
6
|
-
super(
|
|
53
|
+
super(L, ...N), this.template = () => `<div class="container">
|
|
54
|
+
<slot></slot>
|
|
55
|
+
<slot name="anchor-left"></slot>
|
|
56
|
+
<slot name="anchor-right"></slot>
|
|
57
|
+
<slot name="anchor-full"></slot>
|
|
58
|
+
</div>`, this._bgObserver = null, this._isInViewport = !1, this.shadowRoot.innerHTML = this.template();
|
|
59
|
+
}
|
|
60
|
+
static get observedAttributes() {
|
|
61
|
+
return [
|
|
62
|
+
...super.observedAttributes,
|
|
63
|
+
"border",
|
|
64
|
+
"border-color",
|
|
65
|
+
"border-side",
|
|
66
|
+
"border-side--mobile",
|
|
67
|
+
"border-side--tablet",
|
|
68
|
+
"border-side--laptop",
|
|
69
|
+
"border-radius",
|
|
70
|
+
"no-border-radius",
|
|
71
|
+
"no-border-radius--mobile",
|
|
72
|
+
"no-border-radius--tablet",
|
|
73
|
+
"no-border-radius--laptop",
|
|
74
|
+
"background-color",
|
|
75
|
+
"background-color--mobile",
|
|
76
|
+
"background-color--tablet",
|
|
77
|
+
"background-color--laptop",
|
|
78
|
+
"background-gradient",
|
|
79
|
+
"background-gradient--mobile",
|
|
80
|
+
"background-gradient--tablet",
|
|
81
|
+
"background-gradient--laptop",
|
|
82
|
+
"background-image",
|
|
83
|
+
"background-image--mobile",
|
|
84
|
+
"background-image--tablet",
|
|
85
|
+
"background-image--laptop",
|
|
86
|
+
"background-size",
|
|
87
|
+
"background-position",
|
|
88
|
+
"box-shadow",
|
|
89
|
+
"anchor-offset",
|
|
90
|
+
"inverted"
|
|
91
|
+
];
|
|
92
|
+
}
|
|
93
|
+
connectedCallback() {
|
|
94
|
+
super.connectedCallback(), this.padding || (this.padding = "m"), this.backgroundColor || (this.backgroundColor = "surface-light"), this.borderColor || (this.borderColor = "main"), this.$slotAnchor && this.addAnchorClass(), this.contentObserver = new MutationObserver(() => {
|
|
95
|
+
this.$slotAnchor && this.addAnchorClass();
|
|
96
|
+
}), this.contentObserver.observe(this, {
|
|
97
|
+
childList: !0,
|
|
98
|
+
subtree: !0,
|
|
99
|
+
characterData: !0
|
|
100
|
+
}), this._bgObserver = new IntersectionObserver((t) => {
|
|
101
|
+
t.forEach((i) => {
|
|
102
|
+
var e;
|
|
103
|
+
i.isIntersecting && (this._isInViewport = !0, this._loadBackgroundImages(), (e = this._bgObserver) == null || e.disconnect());
|
|
104
|
+
});
|
|
105
|
+
}), this._bgObserver.observe(this.$el);
|
|
106
|
+
}
|
|
107
|
+
disconnectedCallback() {
|
|
108
|
+
var t;
|
|
109
|
+
(t = this._bgObserver) == null || t.disconnect(), this.contentObserver.disconnect();
|
|
110
|
+
}
|
|
111
|
+
attributeChangedCallback(t, i, e) {
|
|
112
|
+
if (i !== e)
|
|
113
|
+
switch (t) {
|
|
114
|
+
case "border":
|
|
115
|
+
this.updateAttribute(t, i, e, O);
|
|
116
|
+
break;
|
|
117
|
+
case "border-color":
|
|
118
|
+
this.updateBorderColor(t, e);
|
|
119
|
+
break;
|
|
120
|
+
case "border-side":
|
|
121
|
+
case "border-side--mobile":
|
|
122
|
+
case "border-side--tablet":
|
|
123
|
+
case "border-side--laptop":
|
|
124
|
+
this.updateAttribute(t, i, e, E);
|
|
125
|
+
break;
|
|
126
|
+
case "border-radius":
|
|
127
|
+
this.updateAttribute(
|
|
128
|
+
t,
|
|
129
|
+
i,
|
|
130
|
+
e,
|
|
131
|
+
H
|
|
132
|
+
);
|
|
133
|
+
break;
|
|
134
|
+
case "no-border-radius":
|
|
135
|
+
case "no-border-radius--mobile":
|
|
136
|
+
case "no-border-radius--tablet":
|
|
137
|
+
case "no-border-radius--laptop":
|
|
138
|
+
this.updateNoBorderRadius(
|
|
139
|
+
t,
|
|
140
|
+
i,
|
|
141
|
+
e,
|
|
142
|
+
D
|
|
143
|
+
);
|
|
144
|
+
break;
|
|
145
|
+
case "background-color":
|
|
146
|
+
case "background-color--mobile":
|
|
147
|
+
case "background-color--tablet":
|
|
148
|
+
case "background-color--laptop":
|
|
149
|
+
this.updateBackgroundColor(t, e);
|
|
150
|
+
break;
|
|
151
|
+
case "background-gradient":
|
|
152
|
+
case "background-gradient--mobile":
|
|
153
|
+
case "background-gradient--tablet":
|
|
154
|
+
case "background-gradient--laptop":
|
|
155
|
+
this.updateGradient(t, e);
|
|
156
|
+
break;
|
|
157
|
+
case "background-size":
|
|
158
|
+
this.updateAttribute(
|
|
159
|
+
t,
|
|
160
|
+
i,
|
|
161
|
+
e,
|
|
162
|
+
A
|
|
163
|
+
);
|
|
164
|
+
break;
|
|
165
|
+
case "background-image":
|
|
166
|
+
case "background-image--mobile":
|
|
167
|
+
case "background-image--tablet":
|
|
168
|
+
case "background-image--laptop":
|
|
169
|
+
this._isInViewport && this.updateBackgroundImg(t, e);
|
|
170
|
+
break;
|
|
171
|
+
case "background-position":
|
|
172
|
+
e !== null && e !== "" && (this.$el.style.backgroundPosition = e);
|
|
173
|
+
break;
|
|
174
|
+
case "box-shadow":
|
|
175
|
+
this.updateAttribute(t, i, e, P);
|
|
176
|
+
break;
|
|
177
|
+
case "anchor-offset":
|
|
178
|
+
this.updateAnchorOffset(i, e, l);
|
|
179
|
+
break;
|
|
180
|
+
default:
|
|
181
|
+
super.attributeChangedCallback(t, i, e);
|
|
182
|
+
break;
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
_loadBackgroundImages() {
|
|
186
|
+
[
|
|
187
|
+
"background-image",
|
|
188
|
+
"background-image--mobile",
|
|
189
|
+
"background-image--tablet",
|
|
190
|
+
"background-image--laptop"
|
|
191
|
+
].forEach((i) => {
|
|
192
|
+
const e = this.getAttribute(i);
|
|
193
|
+
e && this.updateBackgroundImg(i, e);
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
updateBackgroundImg(t, i) {
|
|
197
|
+
this.$el.style.setProperty(`--${t}`, `url("${i}")`);
|
|
198
|
+
}
|
|
199
|
+
updateGradient(t, i) {
|
|
200
|
+
if (this.checkName($, i)) {
|
|
201
|
+
const e = this.splitAttrNameFromBreakpoint(t);
|
|
202
|
+
t = e.attrName;
|
|
203
|
+
const o = e.breakpoint;
|
|
204
|
+
this.$el.style.setProperty(
|
|
205
|
+
`--${t}${o}`,
|
|
206
|
+
`linear-gradient(var(--px-color-background-gradient-${i}))`
|
|
207
|
+
);
|
|
208
|
+
} else
|
|
209
|
+
s(
|
|
210
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
updateBackgroundColor(t, i) {
|
|
214
|
+
const e = i.startsWith("surface-");
|
|
215
|
+
if (this.checkName(u, i)) {
|
|
216
|
+
const o = this.splitAttrNameFromBreakpoint(t), r = o.breakpoint;
|
|
217
|
+
this.$el.style.setProperty(
|
|
218
|
+
`--${o.attrName}${r}`,
|
|
219
|
+
`var(--px-color-background-${i}${e ? "" : "-default"})`
|
|
220
|
+
), this.$el.style.setProperty(
|
|
221
|
+
`--${o.attrName}-inverted${r}`,
|
|
222
|
+
`var(--px-color-background-${i}${e ? "" : "-inverted"})`
|
|
223
|
+
);
|
|
224
|
+
} else
|
|
225
|
+
s(
|
|
226
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
227
|
+
);
|
|
228
|
+
}
|
|
229
|
+
updateBorderColor(t, i) {
|
|
230
|
+
this.checkName(q, i) ? (this.$el.style.setProperty(
|
|
231
|
+
`--${t}`,
|
|
232
|
+
`var(--px-color-border-${i}-default)`
|
|
233
|
+
), this.$el.style.setProperty(
|
|
234
|
+
`--${t}-inverted`,
|
|
235
|
+
`var(--px-color-border-${i}-inverted)`
|
|
236
|
+
)) : s(
|
|
237
|
+
`${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
238
|
+
);
|
|
239
|
+
}
|
|
240
|
+
updateNoBorderRadius(t, i, e, o) {
|
|
241
|
+
if (!this.checkName(o, e))
|
|
242
|
+
s(
|
|
243
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
244
|
+
);
|
|
245
|
+
else {
|
|
246
|
+
const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
|
|
247
|
+
i !== null && i !== "" && this.$el.classList.toggle(
|
|
248
|
+
`${r.attrName}-${i}${a}`
|
|
249
|
+
), e !== null && e !== "" && this.$el.classList.toggle(
|
|
250
|
+
`${r.attrName}-${e}${a}`
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
updateAttribute(t, i, e, o) {
|
|
255
|
+
if (!this.checkName(o, e))
|
|
256
|
+
s(
|
|
257
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
258
|
+
);
|
|
259
|
+
else {
|
|
260
|
+
const r = this.splitAttrNameFromBreakpoint(t), a = r.breakpoint;
|
|
261
|
+
i !== null && i !== "" && this.$el.classList.toggle(
|
|
262
|
+
`${r.attrName}-${i}${a}`
|
|
263
|
+
), e !== null && e !== "" && this.$el.classList.toggle(
|
|
264
|
+
`${r.attrName}-${e}${a}`
|
|
265
|
+
);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
splitAttrNameFromBreakpoint(t) {
|
|
269
|
+
let i = "";
|
|
270
|
+
if (["--mobile", "--tablet", "--laptop"].some(
|
|
271
|
+
(e) => t.includes(e)
|
|
272
|
+
)) {
|
|
273
|
+
const e = t.split("--");
|
|
274
|
+
t = e[0], i = `--${e[1]}`;
|
|
275
|
+
}
|
|
276
|
+
return { attrName: t, breakpoint: i };
|
|
277
|
+
}
|
|
278
|
+
updateAnchorOffset(t, i, e) {
|
|
279
|
+
if (!j(e, i)) {
|
|
280
|
+
s(
|
|
281
|
+
`${i} is not a valid anchor-offset value for ${this.tagName.toLowerCase()}`
|
|
282
|
+
);
|
|
283
|
+
return;
|
|
284
|
+
}
|
|
285
|
+
const o = (r) => {
|
|
286
|
+
r !== null && r !== "" && r !== "default" && (this.$el.style.setProperty(
|
|
287
|
+
"--container-anchor-offset--mobile",
|
|
288
|
+
`var(--px-padding-${r}-mobile)`
|
|
289
|
+
), this.$el.style.setProperty(
|
|
290
|
+
"--container-anchor-offset--tablet",
|
|
291
|
+
`var(--px-padding-${r}-tablet)`
|
|
292
|
+
), this.$el.style.setProperty(
|
|
293
|
+
"--container-anchor-offset--laptop",
|
|
294
|
+
`var(--px-padding-${r}-laptop)`
|
|
295
|
+
));
|
|
296
|
+
};
|
|
297
|
+
o(t), o(i);
|
|
298
|
+
}
|
|
299
|
+
addAnchorClass() {
|
|
300
|
+
this.$el.classList.contains("anchored") || this.$el.classList.add("anchored");
|
|
301
|
+
}
|
|
302
|
+
get $slotAnchor() {
|
|
303
|
+
return this.querySelector('[slot^="anchor"]');
|
|
304
|
+
}
|
|
305
|
+
get padding() {
|
|
306
|
+
return this.getAttribute("padding");
|
|
307
|
+
}
|
|
308
|
+
set padding(t) {
|
|
309
|
+
this.setAttribute("padding", t);
|
|
310
|
+
}
|
|
311
|
+
get paddingBlock() {
|
|
312
|
+
return this.getAttribute("padding-block");
|
|
313
|
+
}
|
|
314
|
+
set paddingBlock(t) {
|
|
315
|
+
this.setAttribute("padding-block", t);
|
|
316
|
+
}
|
|
317
|
+
get paddingInline() {
|
|
318
|
+
return this.getAttribute("padding-inline");
|
|
319
|
+
}
|
|
320
|
+
set paddingInline(t) {
|
|
321
|
+
this.setAttribute("padding-inline", t);
|
|
322
|
+
}
|
|
323
|
+
get paddingTop() {
|
|
324
|
+
return this.getAttribute("padding-top");
|
|
325
|
+
}
|
|
326
|
+
set paddingTop(t) {
|
|
327
|
+
this.setAttribute("padding-top", t);
|
|
328
|
+
}
|
|
329
|
+
get paddingRight() {
|
|
330
|
+
return this.getAttribute("padding-right");
|
|
331
|
+
}
|
|
332
|
+
set paddingRight(t) {
|
|
333
|
+
this.setAttribute("padding-right", t);
|
|
334
|
+
}
|
|
335
|
+
get paddingBottom() {
|
|
336
|
+
return this.getAttribute("padding-bottom");
|
|
337
|
+
}
|
|
338
|
+
set paddingBottom(t) {
|
|
339
|
+
this.setAttribute("padding-bottom", t);
|
|
340
|
+
}
|
|
341
|
+
get paddingLeft() {
|
|
342
|
+
return this.getAttribute("padding-left");
|
|
343
|
+
}
|
|
344
|
+
set paddingLeft(t) {
|
|
345
|
+
this.setAttribute("padding-left", t);
|
|
346
|
+
}
|
|
347
|
+
get paddingMobile() {
|
|
348
|
+
return this.getAttribute("padding--mobile");
|
|
349
|
+
}
|
|
350
|
+
set paddingMobile(t) {
|
|
351
|
+
this.setAttribute("padding--mobile", t);
|
|
352
|
+
}
|
|
353
|
+
get paddingBlockMobile() {
|
|
354
|
+
return this.getAttribute("padding-block--mobile");
|
|
355
|
+
}
|
|
356
|
+
set paddingBlockMobile(t) {
|
|
357
|
+
this.setAttribute("padding-block--mobile", t);
|
|
358
|
+
}
|
|
359
|
+
get paddingInlineMobile() {
|
|
360
|
+
return this.getAttribute("padding-inline--mobile");
|
|
361
|
+
}
|
|
362
|
+
set paddingInlineMobile(t) {
|
|
363
|
+
this.setAttribute("padding-inline--mobile", t);
|
|
364
|
+
}
|
|
365
|
+
get paddingTopMobile() {
|
|
366
|
+
return this.getAttribute("padding-top--mobile");
|
|
367
|
+
}
|
|
368
|
+
set paddingTopMobile(t) {
|
|
369
|
+
this.setAttribute("padding-top--mobile", t);
|
|
370
|
+
}
|
|
371
|
+
get paddingRightMobile() {
|
|
372
|
+
return this.getAttribute("padding-right--mobile");
|
|
373
|
+
}
|
|
374
|
+
set paddingRightMobile(t) {
|
|
375
|
+
this.setAttribute("padding-right--mobile", t);
|
|
376
|
+
}
|
|
377
|
+
get paddingBottomMobile() {
|
|
378
|
+
return this.getAttribute("padding-bottom--mobile");
|
|
379
|
+
}
|
|
380
|
+
set paddingBottomMobile(t) {
|
|
381
|
+
this.setAttribute("padding-bottom--mobile", t);
|
|
382
|
+
}
|
|
383
|
+
get paddingLeftMobile() {
|
|
384
|
+
return this.getAttribute("padding-left--mobile");
|
|
385
|
+
}
|
|
386
|
+
set paddingLeftMobile(t) {
|
|
387
|
+
this.setAttribute("padding-left--mobile", t);
|
|
388
|
+
}
|
|
389
|
+
get paddingTablet() {
|
|
390
|
+
return this.getAttribute("padding--tablet");
|
|
391
|
+
}
|
|
392
|
+
set paddingTablet(t) {
|
|
393
|
+
this.setAttribute("padding--tablet", t);
|
|
394
|
+
}
|
|
395
|
+
get paddingBlockTablet() {
|
|
396
|
+
return this.getAttribute("padding-block--tablet");
|
|
397
|
+
}
|
|
398
|
+
set paddingBlockTablet(t) {
|
|
399
|
+
this.setAttribute("padding-block--tablet", t);
|
|
400
|
+
}
|
|
401
|
+
get paddingInlineTablet() {
|
|
402
|
+
return this.getAttribute("padding-inline--tablet");
|
|
403
|
+
}
|
|
404
|
+
set paddingInlineTablet(t) {
|
|
405
|
+
this.setAttribute("padding-inline--tablet", t);
|
|
406
|
+
}
|
|
407
|
+
get paddingTopTablet() {
|
|
408
|
+
return this.getAttribute("padding-top--tablet");
|
|
409
|
+
}
|
|
410
|
+
set paddingTopTablet(t) {
|
|
411
|
+
this.setAttribute("padding-top--tablet", t);
|
|
412
|
+
}
|
|
413
|
+
get paddingRightTablet() {
|
|
414
|
+
return this.getAttribute("padding-right--tablet");
|
|
415
|
+
}
|
|
416
|
+
set paddingRightTablet(t) {
|
|
417
|
+
this.setAttribute("padding-right--tablet", t);
|
|
418
|
+
}
|
|
419
|
+
get paddingBottomTablet() {
|
|
420
|
+
return this.getAttribute("padding-bottom--tablet");
|
|
421
|
+
}
|
|
422
|
+
set paddingBottomTablet(t) {
|
|
423
|
+
this.setAttribute("padding-bottom--tablet", t);
|
|
424
|
+
}
|
|
425
|
+
get paddingLeftTablet() {
|
|
426
|
+
return this.getAttribute("padding-left--tablet");
|
|
427
|
+
}
|
|
428
|
+
set paddingLeftTablet(t) {
|
|
429
|
+
this.setAttribute("padding-left--tablet", t);
|
|
430
|
+
}
|
|
431
|
+
get paddingLaptop() {
|
|
432
|
+
return this.getAttribute("padding--laptop");
|
|
433
|
+
}
|
|
434
|
+
set paddingLaptop(t) {
|
|
435
|
+
this.setAttribute("padding--laptop", t);
|
|
436
|
+
}
|
|
437
|
+
get paddingBlockLaptop() {
|
|
438
|
+
return this.getAttribute("padding-block--laptop");
|
|
439
|
+
}
|
|
440
|
+
set paddingBlockLaptop(t) {
|
|
441
|
+
this.setAttribute("padding-block--laptop", t);
|
|
442
|
+
}
|
|
443
|
+
get paddingInlineLaptop() {
|
|
444
|
+
return this.getAttribute("padding-inline--laptop");
|
|
445
|
+
}
|
|
446
|
+
set paddingInlineLaptop(t) {
|
|
447
|
+
this.setAttribute("padding-inline--laptop", t);
|
|
448
|
+
}
|
|
449
|
+
get paddingTopLaptop() {
|
|
450
|
+
return this.getAttribute("padding-top--laptop");
|
|
451
|
+
}
|
|
452
|
+
set paddingTopLaptop(t) {
|
|
453
|
+
this.setAttribute("padding-top--laptop", t);
|
|
454
|
+
}
|
|
455
|
+
get paddingRightLaptop() {
|
|
456
|
+
return this.getAttribute("padding-right--laptop");
|
|
457
|
+
}
|
|
458
|
+
set paddingRightLaptop(t) {
|
|
459
|
+
this.setAttribute("padding-right--laptop", t);
|
|
460
|
+
}
|
|
461
|
+
get paddingBottomLaptop() {
|
|
462
|
+
return this.getAttribute("padding-bottom--laptop");
|
|
463
|
+
}
|
|
464
|
+
set paddingBottomLaptop(t) {
|
|
465
|
+
this.setAttribute("padding-bottom--laptop", t);
|
|
466
|
+
}
|
|
467
|
+
get paddingLeftLaptop() {
|
|
468
|
+
return this.getAttribute("padding-left--laptop");
|
|
469
|
+
}
|
|
470
|
+
set paddingLeftLaptop(t) {
|
|
471
|
+
this.setAttribute("padding-left--laptop", t);
|
|
472
|
+
}
|
|
473
|
+
get border() {
|
|
474
|
+
return this.getAttribute("border");
|
|
475
|
+
}
|
|
476
|
+
set border(t) {
|
|
477
|
+
this.setAttribute("border", t);
|
|
478
|
+
}
|
|
479
|
+
get borderColor() {
|
|
480
|
+
return this.getAttribute("border-color");
|
|
481
|
+
}
|
|
482
|
+
set borderColor(t) {
|
|
483
|
+
this.setAttribute("border-color", t);
|
|
484
|
+
}
|
|
485
|
+
get borderSide() {
|
|
486
|
+
return this.getAttribute("border-side");
|
|
487
|
+
}
|
|
488
|
+
set borderSide(t) {
|
|
489
|
+
this.setAttribute("border-side", t);
|
|
490
|
+
}
|
|
491
|
+
get borderSideMobile() {
|
|
492
|
+
return this.getAttribute("border-side--mobile");
|
|
493
|
+
}
|
|
494
|
+
set borderSideMobile(t) {
|
|
495
|
+
this.setAttribute("border-side--mobile", t);
|
|
496
|
+
}
|
|
497
|
+
get borderSideTablet() {
|
|
498
|
+
return this.getAttribute("border-side--tablet");
|
|
499
|
+
}
|
|
500
|
+
set borderSideTablet(t) {
|
|
501
|
+
this.setAttribute("border-side--tablet", t);
|
|
502
|
+
}
|
|
503
|
+
get borderSideLaptop() {
|
|
504
|
+
return this.getAttribute("border-side--laptop");
|
|
505
|
+
}
|
|
506
|
+
set borderSideLaptop(t) {
|
|
507
|
+
this.setAttribute("border-side--laptop", t);
|
|
508
|
+
}
|
|
509
|
+
get borderRadius() {
|
|
510
|
+
return this.getAttribute("border-radius");
|
|
511
|
+
}
|
|
512
|
+
set borderRadius(t) {
|
|
513
|
+
this.setAttribute("border-radius", t);
|
|
514
|
+
}
|
|
515
|
+
get noBorderRadius() {
|
|
516
|
+
return this.getAttribute("no-border-radius");
|
|
517
|
+
}
|
|
518
|
+
set noBorderRadius(t) {
|
|
519
|
+
this.setAttribute("no-border-radius", t);
|
|
520
|
+
}
|
|
521
|
+
get noBorderRadiusMobile() {
|
|
522
|
+
return this.getAttribute("no-border-radius--mobile");
|
|
523
|
+
}
|
|
524
|
+
set noBorderRadiusMobile(t) {
|
|
525
|
+
this.setAttribute("no-border-radius--mobile", t);
|
|
526
|
+
}
|
|
527
|
+
get noBorderRadiusTablet() {
|
|
528
|
+
return this.getAttribute("no-border-radius--tablet");
|
|
529
|
+
}
|
|
530
|
+
set noBorderRadiusTablet(t) {
|
|
531
|
+
this.setAttribute("no-border-radius--tablet", t);
|
|
532
|
+
}
|
|
533
|
+
get noBorderRadiusLaptop() {
|
|
534
|
+
return this.getAttribute("no-border-radius--laptop");
|
|
535
|
+
}
|
|
536
|
+
set noBorderRadiusLaptop(t) {
|
|
537
|
+
this.setAttribute("no-border-radius--laptop", t);
|
|
538
|
+
}
|
|
539
|
+
get backgroundColor() {
|
|
540
|
+
return this.getAttribute("background-color");
|
|
541
|
+
}
|
|
542
|
+
set backgroundColor(t) {
|
|
543
|
+
this.setAttribute("background-color", t);
|
|
544
|
+
}
|
|
545
|
+
get backgroundColorMobile() {
|
|
546
|
+
return this.getAttribute("background-color--mobile");
|
|
547
|
+
}
|
|
548
|
+
set backgroundColorMobile(t) {
|
|
549
|
+
this.setAttribute("background-color--mobile", t);
|
|
550
|
+
}
|
|
551
|
+
get backgroundColorTablet() {
|
|
552
|
+
return this.getAttribute("background-color--tablet");
|
|
553
|
+
}
|
|
554
|
+
set backgroundColorTablet(t) {
|
|
555
|
+
this.setAttribute("background-color--tablet", t);
|
|
556
|
+
}
|
|
557
|
+
get backgroundColorLaptop() {
|
|
558
|
+
return this.getAttribute("background-color--laptop");
|
|
559
|
+
}
|
|
560
|
+
set backgroundColorLaptop(t) {
|
|
561
|
+
this.setAttribute("background-color--laptop", t);
|
|
562
|
+
}
|
|
563
|
+
get gradient() {
|
|
564
|
+
return this.getAttribute("background-gradient");
|
|
565
|
+
}
|
|
566
|
+
set gradient(t) {
|
|
567
|
+
this.setAttribute("background-gradient", t);
|
|
568
|
+
}
|
|
569
|
+
get gradientMobile() {
|
|
570
|
+
return this.getAttribute("background-gradient--mobile");
|
|
571
|
+
}
|
|
572
|
+
set gradientMobile(t) {
|
|
573
|
+
this.setAttribute("background-gradient--mobile", t);
|
|
574
|
+
}
|
|
575
|
+
get gradientTablet() {
|
|
576
|
+
return this.getAttribute("background-gradient--tablet");
|
|
577
|
+
}
|
|
578
|
+
set gradientTablet(t) {
|
|
579
|
+
this.setAttribute("background-gradient--tablet", t);
|
|
580
|
+
}
|
|
581
|
+
get gradientLaptop() {
|
|
582
|
+
return this.getAttribute("background-gradient--laptop");
|
|
583
|
+
}
|
|
584
|
+
set gradientLaptop(t) {
|
|
585
|
+
this.setAttribute("background-gradient--laptop", t);
|
|
586
|
+
}
|
|
587
|
+
get backgroundImage() {
|
|
588
|
+
return this.getAttribute("background-image");
|
|
589
|
+
}
|
|
590
|
+
set backgroundImage(t) {
|
|
591
|
+
this.setAttribute("background-image", t);
|
|
592
|
+
}
|
|
593
|
+
get backgroundImageMobile() {
|
|
594
|
+
return this.getAttribute("background-image--mobile");
|
|
595
|
+
}
|
|
596
|
+
set backgroundImageMobile(t) {
|
|
597
|
+
this.setAttribute("background-image--mobile", t);
|
|
598
|
+
}
|
|
599
|
+
get backgroundImageTablet() {
|
|
600
|
+
return this.getAttribute("background-image--tablet");
|
|
601
|
+
}
|
|
602
|
+
set backgroundImageTablet(t) {
|
|
603
|
+
this.setAttribute("background-image--tablet", t);
|
|
604
|
+
}
|
|
605
|
+
get backgroundImageLaptop() {
|
|
606
|
+
return this.getAttribute("background-image--laptop");
|
|
607
|
+
}
|
|
608
|
+
set backgroundImageLaptop(t) {
|
|
609
|
+
this.setAttribute("background-image--laptop", t);
|
|
610
|
+
}
|
|
611
|
+
get backgroundSize() {
|
|
612
|
+
return this.getAttribute("background-size");
|
|
613
|
+
}
|
|
614
|
+
set backgroundSize(t) {
|
|
615
|
+
this.setAttribute("background-size", t);
|
|
616
|
+
}
|
|
617
|
+
get backgroundPosition() {
|
|
618
|
+
return this.getAttribute("background-position");
|
|
619
|
+
}
|
|
620
|
+
set backgroundPosition(t) {
|
|
621
|
+
this.setAttribute("background-position", t);
|
|
622
|
+
}
|
|
623
|
+
get boxShadow() {
|
|
624
|
+
return this.getAttribute("box-shadow");
|
|
625
|
+
}
|
|
626
|
+
set boxShadow(t) {
|
|
627
|
+
this.setAttribute("box-shadow", t);
|
|
628
|
+
}
|
|
629
|
+
get anchorOffset() {
|
|
630
|
+
return this.getAttribute("anchor-offset");
|
|
631
|
+
}
|
|
632
|
+
set anchorOffset(t) {
|
|
633
|
+
this.setAttribute("anchor-offset", t);
|
|
634
|
+
}
|
|
635
|
+
get inverted() {
|
|
636
|
+
return this.getAttribute("inverted");
|
|
637
|
+
}
|
|
638
|
+
set inverted(t) {
|
|
639
|
+
this.setAttribute("inverted", t);
|
|
640
|
+
}
|
|
641
|
+
};
|
|
642
|
+
v.nativeName = "div";
|
|
643
|
+
let h = v;
|
|
644
|
+
customElements.get("px-container") || customElements.define("px-container", h);
|
|
645
|
+
const Z = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', T = new CSSStyleSheet();
|
|
646
|
+
T.replaceSync(Z);
|
|
647
|
+
const W = [
|
|
648
|
+
"",
|
|
649
|
+
"default",
|
|
650
|
+
"row",
|
|
651
|
+
"row-reverse",
|
|
652
|
+
"column",
|
|
653
|
+
"column-reverse"
|
|
654
|
+
], Y = [
|
|
655
|
+
"",
|
|
656
|
+
"default",
|
|
657
|
+
"stretch",
|
|
658
|
+
"flex-start",
|
|
659
|
+
"flex-end",
|
|
660
|
+
"center",
|
|
661
|
+
"baseline"
|
|
662
|
+
], J = [
|
|
663
|
+
"",
|
|
664
|
+
"default",
|
|
665
|
+
"flex-start",
|
|
666
|
+
"flex-end",
|
|
667
|
+
"center",
|
|
668
|
+
"space-between",
|
|
669
|
+
"space-around",
|
|
670
|
+
"space-evenly"
|
|
671
|
+
], K = ["", "default", "nowrap", "wrap", "wrap-reverse"], Q = ["", "visible", "hidden", "scroll", "auto"];
|
|
672
|
+
class k extends w {
|
|
673
|
+
constructor() {
|
|
674
|
+
super(T), this.overflowXAttributeDelegate = new G(
|
|
675
|
+
this,
|
|
676
|
+
"overflow-x",
|
|
677
|
+
(t) => t,
|
|
678
|
+
"--overflow-x"
|
|
679
|
+
), this.template = `<div class="flex-container">
|
|
680
|
+
<slot></slot>
|
|
681
|
+
</div>`, this.shadowRoot.innerHTML = this.template;
|
|
682
|
+
}
|
|
683
|
+
connectedCallback() {
|
|
684
|
+
this.hasAttribute("direction") || (this.direction = "row"), this.hasAttribute("gap") || (this.gap = "none"), this.hasAttribute("align-items") || (this.alignItems = "stretch"), this.hasAttribute("justify-content") || (this.justifyContent = "flex-start"), this.hasAttribute("wrap") || (this.wrap = "nowrap"), this.hasAttribute("overflow-x") || this.overflowXAttributeDelegate.init("visible");
|
|
685
|
+
}
|
|
686
|
+
static get observedAttributes() {
|
|
687
|
+
return [
|
|
688
|
+
...super.observedAttributes,
|
|
689
|
+
"direction",
|
|
690
|
+
"direction--mobile",
|
|
691
|
+
"direction--tablet",
|
|
692
|
+
"direction--laptop",
|
|
693
|
+
"direction--desktop",
|
|
694
|
+
"gap",
|
|
695
|
+
"gap--mobile",
|
|
696
|
+
"gap--tablet",
|
|
697
|
+
"gap--laptop",
|
|
698
|
+
"gap--desktop",
|
|
699
|
+
"justify-content",
|
|
700
|
+
"justify-content--mobile",
|
|
701
|
+
"justify-content--tablet",
|
|
702
|
+
"justify-content--laptop",
|
|
703
|
+
"justify-content--desktop",
|
|
704
|
+
"align-items",
|
|
705
|
+
"align-items--mobile",
|
|
706
|
+
"align-items--tablet",
|
|
707
|
+
"align-items--laptop",
|
|
708
|
+
"align-items--desktop",
|
|
709
|
+
"wrap",
|
|
710
|
+
"wrap--mobile",
|
|
711
|
+
"wrap--tablet",
|
|
712
|
+
"wrap--laptop",
|
|
713
|
+
"wrap--desktop",
|
|
714
|
+
"overflow-x",
|
|
715
|
+
"overflow-x--mobile",
|
|
716
|
+
"overflow-x--tablet",
|
|
717
|
+
"overflow-x--laptop",
|
|
718
|
+
"overflow-x--desktop"
|
|
719
|
+
];
|
|
720
|
+
}
|
|
721
|
+
attributeChangedCallback(t, i, e) {
|
|
722
|
+
switch (t) {
|
|
723
|
+
case "gap":
|
|
724
|
+
case "gap--mobile":
|
|
725
|
+
case "gap--tablet":
|
|
726
|
+
case "gap--laptop":
|
|
727
|
+
case "gap--desktop":
|
|
728
|
+
this.updateFlexProperties(t, i, e, C);
|
|
729
|
+
break;
|
|
730
|
+
case "justify-content":
|
|
731
|
+
case "justify-content--mobile":
|
|
732
|
+
case "justify-content--tablet":
|
|
733
|
+
case "justify-content--laptop":
|
|
734
|
+
case "justify-content--desktop":
|
|
735
|
+
this.updateFlexProperties(
|
|
736
|
+
t,
|
|
737
|
+
i,
|
|
738
|
+
e,
|
|
739
|
+
J
|
|
740
|
+
);
|
|
741
|
+
break;
|
|
742
|
+
case "align-items":
|
|
743
|
+
case "align-items--mobile":
|
|
744
|
+
case "align-items--tablet":
|
|
745
|
+
case "align-items--laptop":
|
|
746
|
+
case "align-items--desktop":
|
|
747
|
+
this.updateFlexProperties(t, i, e, Y);
|
|
748
|
+
break;
|
|
749
|
+
case "wrap":
|
|
750
|
+
case "wrap--mobile":
|
|
751
|
+
case "wrap--tablet":
|
|
752
|
+
case "wrap--laptop":
|
|
753
|
+
case "wrap--desktop":
|
|
754
|
+
this.updateFlexProperties(t, i, e, K);
|
|
755
|
+
break;
|
|
756
|
+
case "direction":
|
|
757
|
+
case "direction--mobile":
|
|
758
|
+
case "direction--tablet":
|
|
759
|
+
case "direction--laptop":
|
|
760
|
+
case "direction--desktop":
|
|
761
|
+
this.updateFlexProperties(t, i, e, W);
|
|
762
|
+
break;
|
|
763
|
+
case "overflow-x":
|
|
764
|
+
case "overflow-x--mobile":
|
|
765
|
+
case "overflow-x--tablet":
|
|
766
|
+
case "overflow-x--laptop":
|
|
767
|
+
case "overflow-x--desktop":
|
|
768
|
+
this.updateOverflowX(t, i, e, Q);
|
|
769
|
+
break;
|
|
770
|
+
default:
|
|
771
|
+
super.attributeChangedCallback(t, i, e);
|
|
772
|
+
break;
|
|
773
|
+
}
|
|
774
|
+
}
|
|
775
|
+
updateOverflowX(t, i, e, o) {
|
|
776
|
+
if (!j(o, e)) {
|
|
777
|
+
s(
|
|
778
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
779
|
+
);
|
|
780
|
+
return;
|
|
781
|
+
}
|
|
782
|
+
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
783
|
+
t,
|
|
784
|
+
i,
|
|
785
|
+
e
|
|
786
|
+
);
|
|
787
|
+
}
|
|
788
|
+
updateFlexProperties(t, i, e, o) {
|
|
789
|
+
this.checkName(o, e) || s(
|
|
790
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
791
|
+
);
|
|
792
|
+
const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, c = [];
|
|
793
|
+
if (!r)
|
|
794
|
+
this.getAttribute(a + "--mobile") || c.push("mobile"), this.getAttribute(a + "--tablet") || c.push("tablet"), this.getAttribute(a + "--laptop") || c.push("laptop"), this.getAttribute(a + "--desktop") || c.push("desktop"), c.forEach((p) => {
|
|
795
|
+
this.updateStyle(a, p, i, o), this.updateStyle(a, p, e, o);
|
|
796
|
+
});
|
|
797
|
+
else {
|
|
798
|
+
const p = t.split("--")[1];
|
|
799
|
+
this.updateStyle(a, p, i, o), this.updateStyle(a, p, e, o);
|
|
800
|
+
}
|
|
801
|
+
}
|
|
802
|
+
updateStyle(t, i, e, o) {
|
|
803
|
+
e && (t === "gap" && o && o.includes(e) ? (this.$el.style.setProperty(
|
|
804
|
+
`--flex-${t}--${i}-value`,
|
|
805
|
+
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
806
|
+
), this.style.setProperty(
|
|
807
|
+
`--host-gap--${i}`,
|
|
808
|
+
`var(--px-spacing-${e}-${i === "laptop" ? "desktop" : i})`
|
|
809
|
+
)) : this.$el.style.setProperty(
|
|
810
|
+
`--flex-${t}--${i}-value`,
|
|
811
|
+
e
|
|
812
|
+
));
|
|
813
|
+
}
|
|
814
|
+
get direction() {
|
|
815
|
+
return this.getAttribute("direction");
|
|
816
|
+
}
|
|
817
|
+
set direction(t) {
|
|
818
|
+
this.setAttribute("direction", t);
|
|
819
|
+
}
|
|
820
|
+
get directionMobile() {
|
|
821
|
+
return this.getAttribute("direction--mobile");
|
|
822
|
+
}
|
|
823
|
+
set directionMobile(t) {
|
|
824
|
+
this.setAttribute("direction--mobile", t);
|
|
825
|
+
}
|
|
826
|
+
get directionTablet() {
|
|
827
|
+
return this.getAttribute("direction--tablet");
|
|
828
|
+
}
|
|
829
|
+
set directionTablet(t) {
|
|
830
|
+
this.setAttribute("direction--tablet", t);
|
|
831
|
+
}
|
|
832
|
+
get directionLaptop() {
|
|
833
|
+
return this.getAttribute("direction--laptop");
|
|
834
|
+
}
|
|
835
|
+
set directionLaptop(t) {
|
|
836
|
+
this.setAttribute("direction--laptop", t);
|
|
837
|
+
}
|
|
838
|
+
get directionDesktop() {
|
|
839
|
+
return this.getAttribute("direction--desktop");
|
|
840
|
+
}
|
|
841
|
+
set directionDesktop(t) {
|
|
842
|
+
this.setAttribute("direction--desktop", t);
|
|
843
|
+
}
|
|
844
|
+
get gap() {
|
|
845
|
+
return this.getAttribute("gap");
|
|
846
|
+
}
|
|
847
|
+
set gap(t) {
|
|
848
|
+
this.setAttribute("gap", t);
|
|
849
|
+
}
|
|
850
|
+
get gapMobile() {
|
|
851
|
+
return this.getAttribute("gap--mobile");
|
|
852
|
+
}
|
|
853
|
+
set gapMobile(t) {
|
|
854
|
+
this.setAttribute("gap--mobile", t);
|
|
855
|
+
}
|
|
856
|
+
get gapTablet() {
|
|
857
|
+
return this.getAttribute("gap--tablet");
|
|
858
|
+
}
|
|
859
|
+
set gapTablet(t) {
|
|
860
|
+
this.setAttribute("gap--tablet", t);
|
|
861
|
+
}
|
|
862
|
+
get gapLaptop() {
|
|
863
|
+
return this.getAttribute("gap--laptop");
|
|
864
|
+
}
|
|
865
|
+
set gapLaptop(t) {
|
|
866
|
+
this.setAttribute("gap--laptop", t);
|
|
867
|
+
}
|
|
868
|
+
get gapDesktop() {
|
|
869
|
+
return this.getAttribute("gap--desktop");
|
|
870
|
+
}
|
|
871
|
+
set gapDesktop(t) {
|
|
872
|
+
this.setAttribute("gap--desktop", t);
|
|
873
|
+
}
|
|
874
|
+
get justifyContent() {
|
|
875
|
+
return this.getAttribute("justify-content");
|
|
876
|
+
}
|
|
877
|
+
set justifyContent(t) {
|
|
878
|
+
this.setAttribute("justify-content", t);
|
|
879
|
+
}
|
|
880
|
+
get justifyContentMobile() {
|
|
881
|
+
return this.getAttribute("justify-content--mobile");
|
|
882
|
+
}
|
|
883
|
+
set justifyContentMobile(t) {
|
|
884
|
+
this.setAttribute("justify-content--mobile", t);
|
|
885
|
+
}
|
|
886
|
+
get justifyContentTablet() {
|
|
887
|
+
return this.getAttribute("justify-content--tablet");
|
|
888
|
+
}
|
|
889
|
+
set justifyContentTablet(t) {
|
|
890
|
+
this.setAttribute("justify-content--tablet", t);
|
|
891
|
+
}
|
|
892
|
+
get justifyContentLaptop() {
|
|
893
|
+
return this.getAttribute("justify-content--laptop");
|
|
894
|
+
}
|
|
895
|
+
set justifyContentLaptop(t) {
|
|
896
|
+
this.setAttribute("justify-content--laptop", t);
|
|
897
|
+
}
|
|
898
|
+
get justifyContentDesktop() {
|
|
899
|
+
return this.getAttribute("justify-content--desktop");
|
|
900
|
+
}
|
|
901
|
+
set justifyContentDesktop(t) {
|
|
902
|
+
this.setAttribute("justify-content--desktop", t);
|
|
903
|
+
}
|
|
904
|
+
get alignItems() {
|
|
905
|
+
return this.getAttribute("align-items");
|
|
906
|
+
}
|
|
907
|
+
set alignItems(t) {
|
|
908
|
+
this.setAttribute("align-items", t);
|
|
909
|
+
}
|
|
910
|
+
get alignItemsMobile() {
|
|
911
|
+
return this.getAttribute("align-items--mobile");
|
|
912
|
+
}
|
|
913
|
+
set alignItemsMobile(t) {
|
|
914
|
+
this.setAttribute("align-items--mobile", t);
|
|
915
|
+
}
|
|
916
|
+
get alignItemsTablet() {
|
|
917
|
+
return this.getAttribute("align-items--tablet");
|
|
918
|
+
}
|
|
919
|
+
set alignItemsTablet(t) {
|
|
920
|
+
this.setAttribute("align-items--tablet", t);
|
|
921
|
+
}
|
|
922
|
+
get alignItemsLaptop() {
|
|
923
|
+
return this.getAttribute("align-items--laptop");
|
|
924
|
+
}
|
|
925
|
+
set alignItemsLaptop(t) {
|
|
926
|
+
this.setAttribute("align-items--laptop", t);
|
|
927
|
+
}
|
|
928
|
+
get alignItemsDesktop() {
|
|
929
|
+
return this.getAttribute("align-items--desktop");
|
|
930
|
+
}
|
|
931
|
+
set alignItemsDesktop(t) {
|
|
932
|
+
this.setAttribute("align-items--desktop", t);
|
|
933
|
+
}
|
|
934
|
+
get wrap() {
|
|
935
|
+
return this.getAttribute("wrap");
|
|
936
|
+
}
|
|
937
|
+
set wrap(t) {
|
|
938
|
+
this.setAttribute("wrap", t);
|
|
939
|
+
}
|
|
940
|
+
get wrapMobile() {
|
|
941
|
+
return this.getAttribute("wrap--mobile");
|
|
942
|
+
}
|
|
943
|
+
set wrapMobile(t) {
|
|
944
|
+
this.setAttribute("wrap--mobile", t);
|
|
945
|
+
}
|
|
946
|
+
get wrapTablet() {
|
|
947
|
+
return this.getAttribute("wrap--tablet");
|
|
948
|
+
}
|
|
949
|
+
set wrapTablet(t) {
|
|
950
|
+
this.setAttribute("wrap--tablet", t);
|
|
951
|
+
}
|
|
952
|
+
get wrapLaptop() {
|
|
953
|
+
return this.getAttribute("wrap--laptop");
|
|
954
|
+
}
|
|
955
|
+
set wrapLaptop(t) {
|
|
956
|
+
this.setAttribute("wrap--laptop", t);
|
|
957
|
+
}
|
|
958
|
+
get wrapDesktop() {
|
|
959
|
+
return this.getAttribute("wrap--desktop");
|
|
960
|
+
}
|
|
961
|
+
set wrapDesktop(t) {
|
|
962
|
+
this.setAttribute("wrap--desktop", t);
|
|
963
|
+
}
|
|
964
|
+
get overflowX() {
|
|
965
|
+
return this.getAttribute("overflow-x");
|
|
966
|
+
}
|
|
967
|
+
set overflowX(t) {
|
|
968
|
+
this.setAttribute("overflow-x", t);
|
|
969
|
+
}
|
|
970
|
+
get overflowXMobile() {
|
|
971
|
+
return this.getAttribute("overflow-x--mobile");
|
|
972
|
+
}
|
|
973
|
+
set overflowXMobile(t) {
|
|
974
|
+
this.setAttribute("overflow-x--mobile", t);
|
|
975
|
+
}
|
|
976
|
+
get overflowXTablet() {
|
|
977
|
+
return this.getAttribute("overflow-x--tablet");
|
|
978
|
+
}
|
|
979
|
+
set overflowXTablet(t) {
|
|
980
|
+
this.setAttribute("overflow-x--tablet", t);
|
|
981
|
+
}
|
|
982
|
+
get overflowXLaptop() {
|
|
983
|
+
return this.getAttribute("overflow-x--laptop");
|
|
984
|
+
}
|
|
985
|
+
set overflowXLaptop(t) {
|
|
986
|
+
this.setAttribute("overflow-x--laptop", t);
|
|
987
|
+
}
|
|
988
|
+
get overflowXDesktop() {
|
|
989
|
+
return this.getAttribute("overflow-x--desktop");
|
|
990
|
+
}
|
|
991
|
+
set overflowXDesktop(t) {
|
|
992
|
+
this.setAttribute("overflow-x--desktop", t);
|
|
993
|
+
}
|
|
994
|
+
get $el() {
|
|
995
|
+
return this.shadowRoot.querySelector(".flex-container");
|
|
996
|
+
}
|
|
997
|
+
}
|
|
998
|
+
customElements.get("px-stack") || customElements.define("px-stack", k);
|
|
999
|
+
class U extends k {
|
|
1000
|
+
constructor() {
|
|
1001
|
+
super();
|
|
1002
|
+
}
|
|
1003
|
+
connectedCallback() {
|
|
1004
|
+
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
1005
|
+
}
|
|
1006
|
+
}
|
|
1007
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", U);
|
|
1008
|
+
class V extends k {
|
|
1009
|
+
constructor() {
|
|
1010
|
+
super();
|
|
1011
|
+
}
|
|
1012
|
+
connectedCallback() {
|
|
1013
|
+
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
1014
|
+
}
|
|
1015
|
+
}
|
|
1016
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", V);
|
|
1017
|
+
class tt extends HTMLElement {
|
|
1018
|
+
constructor() {
|
|
1019
|
+
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
1020
|
+
}
|
|
1021
|
+
static get observedAttributes() {
|
|
1022
|
+
return ["grow", "nogap"];
|
|
1023
|
+
}
|
|
1024
|
+
attributeChangedCallback(t, i, e) {
|
|
1025
|
+
t === "grow" && (this.growValue = e || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
1026
|
+
}
|
|
1027
|
+
connectedCallback() {
|
|
1028
|
+
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
|
|
1029
|
+
this.handleSizeChange();
|
|
1030
|
+
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
|
|
1031
|
+
}
|
|
1032
|
+
disconnectedCallback() {
|
|
1033
|
+
var t;
|
|
1034
|
+
(t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
|
|
1035
|
+
}
|
|
1036
|
+
get grow() {
|
|
1037
|
+
return this.getAttribute("grow");
|
|
1038
|
+
}
|
|
1039
|
+
set grow(t) {
|
|
1040
|
+
this.setAttribute("grow", t);
|
|
1041
|
+
}
|
|
1042
|
+
scheduleRecheck() {
|
|
1043
|
+
this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
|
|
1044
|
+
this.recheckHandle = void 0, this.recalculateVisibility();
|
|
1045
|
+
});
|
|
1046
|
+
}
|
|
1047
|
+
recalculateVisibility() {
|
|
1048
|
+
this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
|
|
1049
|
+
}
|
|
1050
|
+
handleSizeChange() {
|
|
1051
|
+
const t = this.getBoundingClientRect(), i = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
|
|
1052
|
+
this.isZeroSized !== i && (this.isZeroSized = i, this.updateParticipation());
|
|
1053
|
+
}
|
|
1054
|
+
updateParticipation() {
|
|
1055
|
+
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
1056
|
+
}
|
|
1057
|
+
get nogap() {
|
|
1058
|
+
return this.hasAttribute("nogap");
|
|
1059
|
+
}
|
|
1060
|
+
set nogap(t) {
|
|
1061
|
+
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", tt);
|
|
1065
|
+
const et = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", I = new CSSStyleSheet();
|
|
1066
|
+
I.replaceSync(et);
|
|
1067
|
+
class it extends w {
|
|
1068
|
+
constructor() {
|
|
1069
|
+
super(I), this.template = (t) => `
|
|
1070
|
+
<px-container border-radius="none" padding="none">
|
|
1071
|
+
<px-vstack>
|
|
1072
|
+
<px-container id="header-container" border-radius="none">
|
|
1073
|
+
<px-hstack>
|
|
1074
|
+
<px-spacer></px-spacer>
|
|
1075
|
+
<px-vstack
|
|
1076
|
+
id="header-vstack-container"
|
|
1077
|
+
gap="s"
|
|
1078
|
+
grow="${this.grow}"
|
|
1079
|
+
basis="${this.basis}"
|
|
1080
|
+
>
|
|
1081
|
+
<slot name="header-container"></slot>
|
|
1082
|
+
</px-vstack>
|
|
1083
|
+
<px-spacer></px-spacer>
|
|
1084
|
+
</px-hstack>
|
|
1085
|
+
</px-container>
|
|
1086
|
+
<px-container
|
|
1087
|
+
id="image-container"
|
|
1088
|
+
border-radius="none"
|
|
1089
|
+
padding="none"
|
|
1090
|
+
padding-top="xl"
|
|
1091
|
+
id="image-box"
|
|
1092
|
+
background-size="cover"
|
|
1093
|
+
background-position="top center"
|
|
1094
|
+
padding-bottom="xl"
|
|
1095
|
+
border-radius="none"
|
|
1096
|
+
bgimg="${this.backgroundImage}"
|
|
1097
|
+
>
|
|
1098
|
+
<px-hstack>
|
|
1099
|
+
<px-spacer></px-spacer>
|
|
1100
|
+
<px-vstack grow="${this.grow}" basis="${this.basis}">
|
|
1101
|
+
<slot name="image-container"></slot>
|
|
1102
|
+
</px-vstack>
|
|
1103
|
+
<px-spacer></px-spacer>
|
|
1104
|
+
</px-hstack>
|
|
1105
|
+
</px-container>
|
|
1106
|
+
${t ? ` <px-hstack>
|
|
1107
|
+
<px-spacer></px-spacer>
|
|
1108
|
+
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
1109
|
+
<px-vstack gap="s">
|
|
1110
|
+
<slot name="image-sticky-container"></slot>
|
|
1111
|
+
</px-vstack>
|
|
1112
|
+
</px-container>
|
|
1113
|
+
<px-spacer></px-spacer>
|
|
1114
|
+
</px-hstack>` : ""}
|
|
1115
|
+
<px-container
|
|
1116
|
+
id="body-container"
|
|
1117
|
+
id="main"
|
|
1118
|
+
background-color="${this.backgroundColor}"
|
|
1119
|
+
padding="none"
|
|
1120
|
+
padding-top="xl"
|
|
1121
|
+
padding-bottom="xl"
|
|
1122
|
+
>
|
|
1123
|
+
<px-hstack>
|
|
1124
|
+
<px-spacer></px-spacer>
|
|
1125
|
+
<px-vstack
|
|
1126
|
+
id="body-vstack-container"
|
|
1127
|
+
gap="l"
|
|
1128
|
+
grow="${this.grow}"
|
|
1129
|
+
basis="${this.basis}"
|
|
1130
|
+
>
|
|
1131
|
+
<slot name="body-container"></slot>
|
|
1132
|
+
</px-vstack>
|
|
1133
|
+
<px-spacer></px-spacer>
|
|
1134
|
+
</px-hstack>
|
|
1135
|
+
</px-container>
|
|
1136
|
+
<px-container
|
|
1137
|
+
id="contact-container"
|
|
1138
|
+
border-radius="none"
|
|
1139
|
+
id="main"
|
|
1140
|
+
background-color="surface-default"
|
|
1141
|
+
padding="none"
|
|
1142
|
+
padding-top="xl"
|
|
1143
|
+
padding-bottom="xl"
|
|
1144
|
+
>
|
|
1145
|
+
<px-hstack>
|
|
1146
|
+
<px-spacer></px-spacer>
|
|
1147
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
1148
|
+
<slot name="contact-container"></slot>
|
|
1149
|
+
</px-vstack>
|
|
1150
|
+
<px-spacer></px-spacer>
|
|
1151
|
+
</px-hstack>
|
|
1152
|
+
</px-container>
|
|
1153
|
+
<px-container
|
|
1154
|
+
id="footer-container"
|
|
1155
|
+
background-color="none"
|
|
1156
|
+
border-radius="none"
|
|
1157
|
+
style="background-color: rgb(108, 66, 156)"
|
|
1158
|
+
padding-top="xl"
|
|
1159
|
+
padding-bottom="xl"
|
|
1160
|
+
>
|
|
1161
|
+
<px-hstack>
|
|
1162
|
+
<px-spacer></px-spacer>
|
|
1163
|
+
<px-vstack gap="l" grow="${this.grow}" basis="${this.basis}">
|
|
1164
|
+
<slot name="footer-container"></slot>
|
|
1165
|
+
</px-vstack>
|
|
1166
|
+
<px-spacer></px-spacer>
|
|
1167
|
+
</px-hstack>
|
|
1168
|
+
</px-container>
|
|
1169
|
+
</px-vstack>
|
|
1170
|
+
</px-container>
|
|
1171
|
+
`, this.shadowRoot.innerHTML = this.template(!!this.$imageStickySlot);
|
|
1172
|
+
}
|
|
1173
|
+
static get observedAttributes() {
|
|
1174
|
+
return [
|
|
1175
|
+
...super.observedAttributes,
|
|
1176
|
+
"background-image",
|
|
1177
|
+
"gap",
|
|
1178
|
+
"background-color",
|
|
1179
|
+
"padding-vertical",
|
|
1180
|
+
"padding-horizontal"
|
|
1181
|
+
];
|
|
1182
|
+
}
|
|
1183
|
+
get $wideImage() {
|
|
1184
|
+
return this.shadowRoot.querySelector("#image-box");
|
|
1185
|
+
}
|
|
1186
|
+
get $bodyVStackContainer() {
|
|
1187
|
+
return this.shadowRoot.querySelector("#header-vstack-container");
|
|
1188
|
+
}
|
|
1189
|
+
get $bodyContainer() {
|
|
1190
|
+
return this.shadowRoot.querySelector("#body-container");
|
|
1191
|
+
}
|
|
1192
|
+
get $contactContainer() {
|
|
1193
|
+
return this.shadowRoot.querySelector("#contact-container");
|
|
1194
|
+
}
|
|
1195
|
+
get $footerContainer() {
|
|
1196
|
+
return this.shadowRoot.querySelector("#footer-container");
|
|
1197
|
+
}
|
|
1198
|
+
get $headerContainer() {
|
|
1199
|
+
return this.shadowRoot.querySelector("#header-container");
|
|
1200
|
+
}
|
|
1201
|
+
get $imageContainer() {
|
|
1202
|
+
return this.shadowRoot.querySelector("#image-container");
|
|
1203
|
+
}
|
|
1204
|
+
get backgroundImage() {
|
|
1205
|
+
return this.getAttribute("background-image");
|
|
1206
|
+
}
|
|
1207
|
+
get $imageStickySlot() {
|
|
1208
|
+
return this.querySelector('*[slot="image-sticky-container"]');
|
|
1209
|
+
}
|
|
1210
|
+
get $main() {
|
|
1211
|
+
return this.shadowRoot.querySelector("#main");
|
|
1212
|
+
}
|
|
1213
|
+
get backgroundColor() {
|
|
1214
|
+
return this.getAttribute("background-color") || "none";
|
|
1215
|
+
}
|
|
1216
|
+
get paddingVertical() {
|
|
1217
|
+
return this.getAttribute("padding-vertical");
|
|
1218
|
+
}
|
|
1219
|
+
get paddingHorizontal() {
|
|
1220
|
+
return this.getAttribute("padding-horizontal");
|
|
1221
|
+
}
|
|
1222
|
+
set paddingVertical(t) {
|
|
1223
|
+
this.setAttribute("padding-vertical", t);
|
|
1224
|
+
}
|
|
1225
|
+
set paddingHorizontal(t) {
|
|
1226
|
+
this.setAttribute("padding-horizontal", t);
|
|
1227
|
+
}
|
|
1228
|
+
get gap() {
|
|
1229
|
+
return this.getAttribute("gap");
|
|
1230
|
+
}
|
|
1231
|
+
connectedCallback() {
|
|
1232
|
+
this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
|
|
1233
|
+
}
|
|
1234
|
+
attributeChangedCallback(t, i, e) {
|
|
1235
|
+
if (i !== e)
|
|
1236
|
+
switch (t) {
|
|
1237
|
+
case "background-image":
|
|
1238
|
+
this.$imageContainer.setAttribute("background-image", e);
|
|
1239
|
+
break;
|
|
1240
|
+
case "gap":
|
|
1241
|
+
this.$bodyVStackContainer.setAttribute("gap", e);
|
|
1242
|
+
break;
|
|
1243
|
+
case "background-color":
|
|
1244
|
+
this.$bodyContainer.setAttribute(
|
|
1245
|
+
"background-color",
|
|
1246
|
+
u.indexOf(e) > 0 ? e : "none"
|
|
1247
|
+
);
|
|
1248
|
+
break;
|
|
1249
|
+
case "padding-vertical":
|
|
1250
|
+
this.handlePaddingVerticalChange(e);
|
|
1251
|
+
break;
|
|
1252
|
+
case "padding-horizontal":
|
|
1253
|
+
this.handlePaddingHorizontalChange(e);
|
|
1254
|
+
break;
|
|
1255
|
+
default:
|
|
1256
|
+
super.attributeChangedCallback(t, i, e);
|
|
1257
|
+
}
|
|
1258
|
+
}
|
|
1259
|
+
handlePaddingVerticalChange(t) {
|
|
1260
|
+
this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
|
|
1261
|
+
}
|
|
1262
|
+
handlePaddingHorizontalChange(t) {
|
|
1263
|
+
this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
|
|
1264
|
+
}
|
|
1265
|
+
}
|
|
1266
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", it);
|
|
1267
|
+
const M = new CSSStyleSheet();
|
|
1268
|
+
M.replaceSync(F);
|
|
1269
|
+
class ot extends HTMLElement {
|
|
1270
|
+
constructor() {
|
|
1271
|
+
super(), this.template = () => `
|
|
1272
|
+
<px-container border-radius="none" padding-inline="none">
|
|
1273
|
+
<div class="content-wrapper">
|
|
1274
|
+
<px-vstack gap="heading-to-content">
|
|
1275
|
+
<slot name="heading"></slot>
|
|
1276
|
+
<px-vstack gap="none">
|
|
1277
|
+
<slot></slot>
|
|
1278
|
+
</px-vstack>
|
|
1279
|
+
</px-vstack>
|
|
1280
|
+
</div>
|
|
1281
|
+
</px-container>
|
|
1282
|
+
<div class="content-wrapper">
|
|
1283
|
+
<slot name="overlap"></slot>
|
|
1284
|
+
</div>
|
|
1285
|
+
`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template(), this.shadowRoot.adoptedStyleSheets = [M];
|
|
1286
|
+
}
|
|
1287
|
+
connectedCallback() {
|
|
1288
|
+
this.$container.setAttribute("background-color", this.backgroundColor), this.$slotOverlap && this.shadowRoot.firstElementChild.querySelector(".content-wrapper").classList.add("overlapped");
|
|
1289
|
+
const t = this.querySelector('[slot="heading"]');
|
|
1290
|
+
!this.paddingBlock && !this.paddingTop && !this.paddingBottom && !this.paddingBlockMobile && !this.paddingTopMobile && !this.paddingBottomMobile && !this.paddingBlockTablet && !this.paddingTopTablet && !this.paddingBottomTablet && !this.paddingBlockLaptop && !this.paddingTopLaptop && !this.paddingBottomLaptop && (this.$container.paddingBlock = "none"), t || this.shadowRoot.querySelector("px-vstack").setAttribute("gap", "none");
|
|
1291
|
+
}
|
|
1292
|
+
static get observedAttributes() {
|
|
1293
|
+
return [
|
|
1294
|
+
"background-color",
|
|
1295
|
+
"background-gradient",
|
|
1296
|
+
"background-image",
|
|
1297
|
+
"background-image--mobile",
|
|
1298
|
+
"background-image--tablet",
|
|
1299
|
+
"background-image--laptop",
|
|
1300
|
+
"background-size",
|
|
1301
|
+
"background-position",
|
|
1302
|
+
"padding-block",
|
|
1303
|
+
"padding-top",
|
|
1304
|
+
"padding-bottom",
|
|
1305
|
+
"padding-block--mobile",
|
|
1306
|
+
"padding-top--mobile",
|
|
1307
|
+
"padding-bottom--mobile",
|
|
1308
|
+
"padding-block--tablet",
|
|
1309
|
+
"padding-top--tablet",
|
|
1310
|
+
"padding-bottom--tablet",
|
|
1311
|
+
"padding-block--laptop",
|
|
1312
|
+
"padding-top--laptop",
|
|
1313
|
+
"padding-bottom--laptop",
|
|
1314
|
+
"border",
|
|
1315
|
+
"border-side",
|
|
1316
|
+
"border-side--mobile",
|
|
1317
|
+
"border-side--tablet",
|
|
1318
|
+
"border-side--laptop"
|
|
1319
|
+
];
|
|
1320
|
+
}
|
|
1321
|
+
get $container() {
|
|
1322
|
+
return this.shadowRoot.querySelector("px-container");
|
|
1323
|
+
}
|
|
1324
|
+
attributeChangedCallback(t, i, e) {
|
|
1325
|
+
if (i !== e)
|
|
1326
|
+
switch (t) {
|
|
1327
|
+
case "background-color":
|
|
1328
|
+
this.$container.backgroundColor = u.indexOf(e) > 0 ? e : "none";
|
|
1329
|
+
break;
|
|
1330
|
+
case "background-gradient":
|
|
1331
|
+
this.$container.gradient = this.gradient;
|
|
1332
|
+
break;
|
|
1333
|
+
case "background-image":
|
|
1334
|
+
this.$container.backgroundImage = e;
|
|
1335
|
+
break;
|
|
1336
|
+
case "background-image--mobile":
|
|
1337
|
+
this.$container.backgroundImageMobile = e;
|
|
1338
|
+
break;
|
|
1339
|
+
case "background-image--tablet":
|
|
1340
|
+
this.$container.backgroundImageTablet = e;
|
|
1341
|
+
break;
|
|
1342
|
+
case "background-image--laptop":
|
|
1343
|
+
this.$container.backgroundImageLaptop = e;
|
|
1344
|
+
break;
|
|
1345
|
+
case "background-size":
|
|
1346
|
+
this.$container.backgroundSize = e;
|
|
1347
|
+
break;
|
|
1348
|
+
case "background-position":
|
|
1349
|
+
this.$container.backgroundPosition = e;
|
|
1350
|
+
break;
|
|
1351
|
+
case "padding-block":
|
|
1352
|
+
this.$container.paddingBlock = e;
|
|
1353
|
+
break;
|
|
1354
|
+
case "padding-top":
|
|
1355
|
+
this.$container.paddingTop = e;
|
|
1356
|
+
break;
|
|
1357
|
+
case "padding-bottom":
|
|
1358
|
+
this.$container.paddingBottom = e;
|
|
1359
|
+
break;
|
|
1360
|
+
case "padding-block--mobile":
|
|
1361
|
+
this.$container.paddingBlockMobile = e;
|
|
1362
|
+
break;
|
|
1363
|
+
case "padding-top--mobile":
|
|
1364
|
+
this.$container.paddingTopMobile = e;
|
|
1365
|
+
break;
|
|
1366
|
+
case "padding-bottom--mobile":
|
|
1367
|
+
this.$container.paddingBottomMobile = e;
|
|
1368
|
+
break;
|
|
1369
|
+
case "padding-block--tablet":
|
|
1370
|
+
this.$container.paddingBlockTablet = e;
|
|
1371
|
+
break;
|
|
1372
|
+
case "padding-top--tablet":
|
|
1373
|
+
this.$container.paddingTopTablet = e;
|
|
1374
|
+
break;
|
|
1375
|
+
case "padding-bottom--tablet":
|
|
1376
|
+
this.$container.paddingBottomTablet = e;
|
|
1377
|
+
break;
|
|
1378
|
+
case "padding-block--laptop":
|
|
1379
|
+
this.$container.paddingBlockLaptop = e;
|
|
1380
|
+
break;
|
|
1381
|
+
case "padding-top--laptop":
|
|
1382
|
+
this.$container.paddingTopLaptop = e;
|
|
1383
|
+
break;
|
|
1384
|
+
case "padding-bottom--laptop":
|
|
1385
|
+
this.$container.paddingBottomLaptop = e;
|
|
1386
|
+
break;
|
|
1387
|
+
case "border":
|
|
1388
|
+
this.$container.border = e;
|
|
1389
|
+
break;
|
|
1390
|
+
case "border-side":
|
|
1391
|
+
this.$container.borderSide = e;
|
|
1392
|
+
break;
|
|
1393
|
+
case "border-side--mobile":
|
|
1394
|
+
this.$container.borderSideMobile = e;
|
|
1395
|
+
break;
|
|
1396
|
+
case "border-side--tablet":
|
|
1397
|
+
this.$container.borderSideTablet = e;
|
|
1398
|
+
break;
|
|
1399
|
+
case "border-side--laptop":
|
|
1400
|
+
this.$container.borderSideLaptop = e;
|
|
1401
|
+
break;
|
|
1402
|
+
}
|
|
1403
|
+
}
|
|
1404
|
+
get $slotOverlap() {
|
|
1405
|
+
return this.querySelector('[slot="overlap"]');
|
|
1406
|
+
}
|
|
1407
|
+
get backgroundColor() {
|
|
1408
|
+
return this.getAttribute("background-color") || "none";
|
|
1409
|
+
}
|
|
1410
|
+
set backgroundColor(t) {
|
|
1411
|
+
this.setAttribute("background-color", t);
|
|
1412
|
+
}
|
|
1413
|
+
get gradient() {
|
|
1414
|
+
return this.getAttribute("background-gradient");
|
|
1415
|
+
}
|
|
1416
|
+
set gradient(t) {
|
|
1417
|
+
this.setAttribute("background-gradient", t);
|
|
1418
|
+
}
|
|
1419
|
+
get backgroundImage() {
|
|
1420
|
+
return this.getAttribute("background-image");
|
|
1421
|
+
}
|
|
1422
|
+
set backgroundImage(t) {
|
|
1423
|
+
this.setAttribute("background-image", t);
|
|
1424
|
+
}
|
|
1425
|
+
get backgroundImageMobile() {
|
|
1426
|
+
return this.getAttribute("background-image--mobile");
|
|
1427
|
+
}
|
|
1428
|
+
set backgroundImageMobile(t) {
|
|
1429
|
+
this.setAttribute("background-image--mobile", t);
|
|
1430
|
+
}
|
|
1431
|
+
get backgroundImageTablet() {
|
|
1432
|
+
return this.getAttribute("background-image--tablet");
|
|
1433
|
+
}
|
|
1434
|
+
set backgroundImageTablet(t) {
|
|
1435
|
+
this.setAttribute("background-image--tablet", t);
|
|
1436
|
+
}
|
|
1437
|
+
get backgroundImageLaptop() {
|
|
1438
|
+
return this.getAttribute("background-image--laptop");
|
|
1439
|
+
}
|
|
1440
|
+
set backgroundImageLaptop(t) {
|
|
1441
|
+
this.setAttribute("background-image--laptop", t);
|
|
1442
|
+
}
|
|
1443
|
+
get backgroundSize() {
|
|
1444
|
+
return this.getAttribute("background-size");
|
|
1445
|
+
}
|
|
1446
|
+
set backgroundSize(t) {
|
|
1447
|
+
this.setAttribute("background-size", t);
|
|
1448
|
+
}
|
|
1449
|
+
get backgroundPosition() {
|
|
1450
|
+
return this.getAttribute("background-position");
|
|
1451
|
+
}
|
|
1452
|
+
set backgroundPosition(t) {
|
|
1453
|
+
this.setAttribute("background-position", t);
|
|
1454
|
+
}
|
|
1455
|
+
get paddingBlock() {
|
|
1456
|
+
return this.getAttribute("padding-block");
|
|
1457
|
+
}
|
|
1458
|
+
set paddingBlock(t) {
|
|
1459
|
+
this.setAttribute("padding-block", t);
|
|
1460
|
+
}
|
|
1461
|
+
get paddingTop() {
|
|
1462
|
+
return this.getAttribute("padding-top");
|
|
1463
|
+
}
|
|
1464
|
+
set paddingTop(t) {
|
|
1465
|
+
this.setAttribute("padding-top", t);
|
|
1466
|
+
}
|
|
1467
|
+
get paddingBottom() {
|
|
1468
|
+
return this.getAttribute("padding-bottom");
|
|
1469
|
+
}
|
|
1470
|
+
set paddingBottom(t) {
|
|
1471
|
+
this.setAttribute("padding-bottom", t);
|
|
1472
|
+
}
|
|
1473
|
+
get paddingBlockMobile() {
|
|
1474
|
+
return this.getAttribute("padding-block--mobile");
|
|
1475
|
+
}
|
|
1476
|
+
set paddingBlockMobile(t) {
|
|
1477
|
+
this.setAttribute("padding-block--mobile", t);
|
|
1478
|
+
}
|
|
1479
|
+
get paddingTopMobile() {
|
|
1480
|
+
return this.getAttribute("padding-top--mobile");
|
|
1481
|
+
}
|
|
1482
|
+
set paddingTopMobile(t) {
|
|
1483
|
+
this.setAttribute("padding-top--mobile", t);
|
|
1484
|
+
}
|
|
1485
|
+
get paddingBottomMobile() {
|
|
1486
|
+
return this.getAttribute("padding-bottom--mobile");
|
|
1487
|
+
}
|
|
1488
|
+
set paddingBottomMobile(t) {
|
|
1489
|
+
this.setAttribute("padding-bottom--mobile", t);
|
|
1490
|
+
}
|
|
1491
|
+
get paddingBlockTablet() {
|
|
1492
|
+
return this.getAttribute("padding-block--tablet");
|
|
1493
|
+
}
|
|
1494
|
+
set paddingBlockTablet(t) {
|
|
1495
|
+
this.setAttribute("padding-block--tablet", t);
|
|
1496
|
+
}
|
|
1497
|
+
get paddingTopTablet() {
|
|
1498
|
+
return this.getAttribute("padding-top--tablet");
|
|
1499
|
+
}
|
|
1500
|
+
set paddingTopTablet(t) {
|
|
1501
|
+
this.setAttribute("padding-top--tablet", t);
|
|
1502
|
+
}
|
|
1503
|
+
get paddingBottomTablet() {
|
|
1504
|
+
return this.getAttribute("padding-bottom--tablet");
|
|
1505
|
+
}
|
|
1506
|
+
set paddingBottomTablet(t) {
|
|
1507
|
+
this.setAttribute("padding-bottom--tablet", t);
|
|
1508
|
+
}
|
|
1509
|
+
get paddingBlockLaptop() {
|
|
1510
|
+
return this.getAttribute("padding-block--laptop");
|
|
1511
|
+
}
|
|
1512
|
+
set paddingBlockLaptop(t) {
|
|
1513
|
+
this.setAttribute("padding-block--laptop", t);
|
|
1514
|
+
}
|
|
1515
|
+
get paddingTopLaptop() {
|
|
1516
|
+
return this.getAttribute("padding-top--laptop");
|
|
1517
|
+
}
|
|
1518
|
+
set paddingTopLaptop(t) {
|
|
1519
|
+
this.setAttribute("padding-top--laptop", t);
|
|
1520
|
+
}
|
|
1521
|
+
get paddingBottomLaptop() {
|
|
1522
|
+
return this.getAttribute("padding-bottom--laptop");
|
|
1523
|
+
}
|
|
1524
|
+
set paddingBottomLaptop(t) {
|
|
1525
|
+
this.setAttribute("padding-bottom--laptop", t);
|
|
1526
|
+
}
|
|
1527
|
+
get border() {
|
|
1528
|
+
return this.getAttribute("border");
|
|
1529
|
+
}
|
|
1530
|
+
set border(t) {
|
|
1531
|
+
this.setAttribute("border", t);
|
|
1532
|
+
}
|
|
1533
|
+
get borderSide() {
|
|
1534
|
+
return this.getAttribute("border-side");
|
|
1535
|
+
}
|
|
1536
|
+
set borderSide(t) {
|
|
1537
|
+
this.setAttribute("border-side", t);
|
|
1538
|
+
}
|
|
1539
|
+
get borderSideMobile() {
|
|
1540
|
+
return this.getAttribute("border-side--mobile");
|
|
1541
|
+
}
|
|
1542
|
+
set borderSideMobile(t) {
|
|
1543
|
+
this.setAttribute("border-side--mobile", t);
|
|
1544
|
+
}
|
|
1545
|
+
get borderSideTablet() {
|
|
1546
|
+
return this.getAttribute("border-side--tablet");
|
|
1547
|
+
}
|
|
1548
|
+
set borderSideTablet(t) {
|
|
1549
|
+
this.setAttribute("border-side--tablet", t);
|
|
1550
|
+
}
|
|
1551
|
+
get borderSideLaptop() {
|
|
1552
|
+
return this.getAttribute("border-side--laptop");
|
|
1553
|
+
}
|
|
1554
|
+
set borderSideLaptop(t) {
|
|
1555
|
+
this.setAttribute("border-side--laptop", t);
|
|
1556
|
+
}
|
|
1557
|
+
}
|
|
1558
|
+
customElements.get("px-section") || customElements.define("px-section", ot);
|
|
1559
|
+
const rt = ":host{display:block;--grid-cols: initial;--grid-cols--mobile: initial;--grid-cols--tablet: initial;--grid-cols--laptop: initial;--grid-cols--desktop: initial;--justify-content: initial;--justify-items: initial;--align-content: initial;--align-items: initial}.grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));justify-content:var(--justify-content);justify-items:var(--justify-items);align-content:var(--align-content);align-items:var(--align-items)}.justify-content-normal{justify-content:normal}.justify-content-start{justify-content:start}.justify-content-end{justify-content:end}.justify-content-center{justify-content:center}.justify-content-space-between{justify-content:space-between}.justify-content-space-around{justify-content:space-around}.justify-content-space-evenly{justify-content:space-evenly}.justify-content-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.align-content-normal{align-content:normal}.align-content-start{align-content:start}.align-content-end{align-content:end}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-content-space-evenly{align-content:space-evenly}.align-content-stretch{align-content:stretch}.align-items-start{align-items:start}.align-items-end{align-items:end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}@media only screen and (max-width: 767px){.grid{grid-template-columns:repeat(var(--grid-cols--mobile, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-mobile{justify-content:normal}.justify-content-start-mobile{justify-content:start}.justify-content-end-mobile{justify-content:end}.justify-content-center-mobile{justify-content:center}.justify-content-space-between-mobile{justify-content:space-between}.justify-content-space-around-mobile{justify-content:space-around}.justify-content-space-evenly-mobile{justify-content:space-evenly}.justify-content-stretch-mobile{justify-content:stretch}.justify-items-start-mobile{justify-items:start}.justify-items-end-mobile{justify-items:end}.justify-items-center-mobile{justify-items:center}.justify-items-stretch-mobile{justify-items:stretch}.align-content-normal-mobile{align-content:normal}.align-content-start-mobile{align-content:start}.align-content-end-mobile{align-content:end}.align-content-center-mobile{align-content:center}.align-content-space-between-mobile{align-content:space-between}.align-content-space-around-mobile{align-content:space-around}.align-content-space-evenly-mobile{align-content:space-evenly}.align-content-stretch-mobile{align-content:stretch}.align-items-start-mobile{align-items:start}.align-items-end-mobile{align-items:end}.align-items-center-mobile{align-items:center}.align-items-stretch-mobile{align-items:stretch}}@media only screen and (min-width: 48em) and (max-width: 64em){.grid{grid-template-columns:repeat(var(--grid-cols--tablet, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-tablet{justify-content:normal}.justify-content-start-tablet{justify-content:start}.justify-content-end-tablet{justify-content:end}.justify-content-center-tablet{justify-content:center}.justify-content-space-between-tablet{justify-content:space-between}.justify-content-space-around-tablet{justify-content:space-around}.justify-content-space-evenly-tablet{justify-content:space-evenly}.justify-content-stretch-tablet{justify-content:stretch}.justify-items-start-tablet{justify-items:start}.justify-items-end-tablet{justify-items:end}.justify-items-center-tablet{justify-items:center}.justify-items-stretch-tablet{justify-items:stretch}.align-content-normal-tablet{align-content:normal}.align-content-start-tablet{align-content:start}.align-content-end-tablet{align-content:end}.align-content-center-tablet{align-content:center}.align-content-space-between-tablet{align-content:space-between}.align-content-space-around-tablet{align-content:space-around}.align-content-space-evenly-tablet{align-content:space-evenly}.align-content-stretch-tablet{align-content:stretch}.align-items-start-tablet{align-items:start}.align-items-end-tablet{align-items:end}.align-items-center-tablet{align-items:center}.align-items-stretch-tablet{align-items:stretch}}@media only screen and (min-width: 64.0625em){.grid{grid-template-columns:repeat(var(--grid-cols--laptop, var(--grid-cols)),minmax(0,1fr))}.justify-content-normal-laptop{justify-content:normal}.justify-content-start-laptop{justify-content:start}.justify-content-end-laptop{justify-content:end}.justify-content-center-laptop{justify-content:center}.justify-content-space-between-laptop{justify-content:space-between}.justify-content-space-around-laptop{justify-content:space-around}.justify-content-space-evenly-laptop{justify-content:space-evenly}.justify-content-stretch-laptop{justify-content:stretch}.justify-items-start-laptop{justify-items:start}.justify-items-end-laptop{justify-items:end}.justify-items-center-laptop{justify-items:center}.justify-items-stretch-laptop{justify-items:stretch}.align-content-normal-laptop{align-content:normal}.align-content-start-laptop{align-content:start}.align-content-end-laptop{align-content:end}.align-content-center-laptop{align-content:center}.align-content-space-between-laptop{align-content:space-between}.align-content-space-around-laptop{align-content:space-around}.align-content-space-evenly-laptop{align-content:space-evenly}.align-content-stretch-laptop{align-content:stretch}.align-items-start-laptop{align-items:start}.align-items-end-laptop{align-items:end}.align-items-center-laptop{align-items:center}.align-items-stretch-laptop{align-items:stretch}}", B = new CSSStyleSheet();
|
|
1560
|
+
B.replaceSync(rt);
|
|
1561
|
+
const at = [
|
|
1562
|
+
"1",
|
|
1563
|
+
"2",
|
|
1564
|
+
"3",
|
|
1565
|
+
"4",
|
|
1566
|
+
"5",
|
|
1567
|
+
"6",
|
|
1568
|
+
"7",
|
|
1569
|
+
"8",
|
|
1570
|
+
"9",
|
|
1571
|
+
"10",
|
|
1572
|
+
"11",
|
|
1573
|
+
"12"
|
|
1574
|
+
], st = [
|
|
1575
|
+
"",
|
|
1576
|
+
"start",
|
|
1577
|
+
"end",
|
|
1578
|
+
"center",
|
|
1579
|
+
"space-between",
|
|
1580
|
+
"space-around",
|
|
1581
|
+
"space-evenly",
|
|
1582
|
+
"stretch"
|
|
1583
|
+
], nt = ["", "start", "end", "center", "stretch"], dt = (n, t, i) => `:host([${n}${i ? `--${i}` : ""}='${t}']) .grid`, lt = "px-spacing", bt = d(
|
|
1584
|
+
"gap",
|
|
1585
|
+
dt,
|
|
1586
|
+
C,
|
|
1587
|
+
lt,
|
|
1588
|
+
"--grid-gap"
|
|
1589
|
+
), y = class y extends S {
|
|
1590
|
+
constructor() {
|
|
1591
|
+
super(B, bt), this.template = () => `<div class="grid">
|
|
1592
|
+
<slot></slot>
|
|
1593
|
+
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
1594
|
+
}
|
|
1595
|
+
static get observedAttributes() {
|
|
1596
|
+
return [
|
|
1597
|
+
...super.observedAttributes,
|
|
1598
|
+
"grid-cols",
|
|
1599
|
+
"grid-cols--mobile",
|
|
1600
|
+
"grid-cols--tablet",
|
|
1601
|
+
"grid-cols--laptop",
|
|
1602
|
+
"justify-content",
|
|
1603
|
+
"justify-items",
|
|
1604
|
+
"align-content",
|
|
1605
|
+
"align-items",
|
|
1606
|
+
"justify-content--mobile",
|
|
1607
|
+
"justify-items--mobile",
|
|
1608
|
+
"align-content--mobile",
|
|
1609
|
+
"align-items--mobile",
|
|
1610
|
+
"justify-content--tablet",
|
|
1611
|
+
"justify-items--tablet",
|
|
1612
|
+
"align-content--tablet",
|
|
1613
|
+
"align-items--tablet",
|
|
1614
|
+
"justify-content--laptop",
|
|
1615
|
+
"justify-items--laptop",
|
|
1616
|
+
"align-content--laptop",
|
|
1617
|
+
"align-items--laptop",
|
|
1618
|
+
"justify-content--desktop",
|
|
1619
|
+
"justify-items--desktop",
|
|
1620
|
+
"align-content--desktop",
|
|
1621
|
+
"align-items--desktop"
|
|
1622
|
+
];
|
|
1623
|
+
}
|
|
1624
|
+
connectedCallback() {
|
|
1625
|
+
this.gap || (this.gap = "default"), this.alignItems || (this.alignItems = "stretch");
|
|
1626
|
+
}
|
|
1627
|
+
attributeChangedCallback(t, i, e) {
|
|
1628
|
+
if (i !== e)
|
|
1629
|
+
switch (t) {
|
|
1630
|
+
case "grid-cols":
|
|
1631
|
+
case "grid-cols--mobile":
|
|
1632
|
+
case "grid-cols--tablet":
|
|
1633
|
+
case "grid-cols--laptop":
|
|
1634
|
+
this.updateAttribute(t, i, e, at);
|
|
1635
|
+
break;
|
|
1636
|
+
case "justify-content":
|
|
1637
|
+
case "align-content":
|
|
1638
|
+
case "justify-content--mobile":
|
|
1639
|
+
case "align-content--mobile":
|
|
1640
|
+
case "justify-content--tablet":
|
|
1641
|
+
case "align-content--tablet":
|
|
1642
|
+
case "justify-content--laptop":
|
|
1643
|
+
case "align-content--laptop":
|
|
1644
|
+
case "justify-content--desktop":
|
|
1645
|
+
case "align-content--desktop":
|
|
1646
|
+
this.updateAttribute(
|
|
1647
|
+
t,
|
|
1648
|
+
i,
|
|
1649
|
+
e,
|
|
1650
|
+
st
|
|
1651
|
+
);
|
|
1652
|
+
break;
|
|
1653
|
+
case "justify-items":
|
|
1654
|
+
case "align-items":
|
|
1655
|
+
case "justify-items--mobile":
|
|
1656
|
+
case "align-items--mobile":
|
|
1657
|
+
case "justify-items--tablet":
|
|
1658
|
+
case "align-items--tablet":
|
|
1659
|
+
case "justify-items--laptop":
|
|
1660
|
+
case "align-items--laptop":
|
|
1661
|
+
case "justify-items--desktop":
|
|
1662
|
+
case "align-items--desktop":
|
|
1663
|
+
this.updateAttribute(
|
|
1664
|
+
t,
|
|
1665
|
+
i,
|
|
1666
|
+
e,
|
|
1667
|
+
nt
|
|
1668
|
+
);
|
|
1669
|
+
break;
|
|
1670
|
+
default:
|
|
1671
|
+
super.attributeChangedCallback(t, i, e);
|
|
1672
|
+
break;
|
|
1673
|
+
}
|
|
1674
|
+
}
|
|
1675
|
+
updateGap(t, i, e) {
|
|
1676
|
+
if (!this.checkName(e, i)) {
|
|
1677
|
+
s(
|
|
1678
|
+
`${i} is not an allowed gap value for ${this.tagName.toLowerCase()}`
|
|
1679
|
+
);
|
|
1680
|
+
return;
|
|
1681
|
+
}
|
|
1682
|
+
const o = (r) => {
|
|
1683
|
+
r !== null && r !== "" && r !== "default" && (this.$el.style.setProperty(
|
|
1684
|
+
"--grid-gap--mobile",
|
|
1685
|
+
`var(--px-spacing-${r}-mobile)`
|
|
1686
|
+
), this.$el.style.setProperty(
|
|
1687
|
+
"--grid-gap--tablet",
|
|
1688
|
+
`var(--px-spacing-${r}-tablet)`
|
|
1689
|
+
), this.$el.style.setProperty(
|
|
1690
|
+
"--grid-gap--laptop",
|
|
1691
|
+
`var(--px-spacing-${r}-laptop)`
|
|
1692
|
+
));
|
|
1693
|
+
};
|
|
1694
|
+
o(t), o(i);
|
|
1695
|
+
}
|
|
1696
|
+
updateAttribute(t, i, e, o) {
|
|
1697
|
+
this.checkName(o, e) ? t === "grid-cols" || t === "grid-cols--mobile" || t === "grid-cols--tablet" || t === "grid-cols--laptop" || t === "grid-cols--desktop" ? this.$el.style.setProperty(`--${t}`, e) : (i !== null && i !== "" && i !== "default" && this.$el.classList.toggle(`${t}-${i}`), e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`)) : s(
|
|
1698
|
+
`${e} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
|
|
1699
|
+
);
|
|
1700
|
+
}
|
|
1701
|
+
get gap() {
|
|
1702
|
+
return this.getAttribute("gap");
|
|
1703
|
+
}
|
|
1704
|
+
set gap(t) {
|
|
1705
|
+
this.setAttribute("gap", t);
|
|
1706
|
+
}
|
|
1707
|
+
get gapMobile() {
|
|
1708
|
+
return this.getAttribute("gap--mobile");
|
|
1709
|
+
}
|
|
1710
|
+
set gapMobile(t) {
|
|
1711
|
+
this.setAttribute("gap--mobile", t);
|
|
1712
|
+
}
|
|
1713
|
+
get gapTablet() {
|
|
1714
|
+
return this.getAttribute("gap--tablet");
|
|
1715
|
+
}
|
|
1716
|
+
set gapTablet(t) {
|
|
1717
|
+
this.setAttribute("gap--tablet", t);
|
|
1718
|
+
}
|
|
1719
|
+
get gapLaptop() {
|
|
1720
|
+
return this.getAttribute("gap--laptop");
|
|
1721
|
+
}
|
|
1722
|
+
set gapLaptop(t) {
|
|
1723
|
+
this.setAttribute("gap--laptop", t);
|
|
1724
|
+
}
|
|
1725
|
+
get gridCols() {
|
|
1726
|
+
return this.getAttribute("grid-cols");
|
|
1727
|
+
}
|
|
1728
|
+
set gridCols(t) {
|
|
1729
|
+
this.setAttribute("grid-cols", t);
|
|
1730
|
+
}
|
|
1731
|
+
get gridColsMobile() {
|
|
1732
|
+
return this.getAttribute("grid-cols--mobile");
|
|
1733
|
+
}
|
|
1734
|
+
set gridColsMobile(t) {
|
|
1735
|
+
this.setAttribute("grid-cols--mobile", t);
|
|
1736
|
+
}
|
|
1737
|
+
get gridColsTablet() {
|
|
1738
|
+
return this.getAttribute("grid-cols--tablet");
|
|
1739
|
+
}
|
|
1740
|
+
set gridColsTablet(t) {
|
|
1741
|
+
this.setAttribute("grid-cols--tablet", t);
|
|
1742
|
+
}
|
|
1743
|
+
get gridColsLaptop() {
|
|
1744
|
+
return this.getAttribute("grid-cols--laptop");
|
|
1745
|
+
}
|
|
1746
|
+
set gridColsLaptop(t) {
|
|
1747
|
+
this.setAttribute("grid-cols--laptop", t);
|
|
1748
|
+
}
|
|
1749
|
+
get justifyContent() {
|
|
1750
|
+
return this.getAttribute("justify-content");
|
|
1751
|
+
}
|
|
1752
|
+
set justifyContent(t) {
|
|
1753
|
+
this.setAttribute("justify-content", t);
|
|
1754
|
+
}
|
|
1755
|
+
get justifyItems() {
|
|
1756
|
+
return this.getAttribute("justify-items");
|
|
1757
|
+
}
|
|
1758
|
+
set justifyItems(t) {
|
|
1759
|
+
this.setAttribute("justify-items", t);
|
|
1760
|
+
}
|
|
1761
|
+
get alignContent() {
|
|
1762
|
+
return this.getAttribute("align-content");
|
|
1763
|
+
}
|
|
1764
|
+
set alignContent(t) {
|
|
1765
|
+
this.setAttribute("align-content", t);
|
|
1766
|
+
}
|
|
1767
|
+
get alignItems() {
|
|
1768
|
+
return this.getAttribute("align-items");
|
|
1769
|
+
}
|
|
1770
|
+
set alignItems(t) {
|
|
1771
|
+
this.setAttribute("align-items", t);
|
|
1772
|
+
}
|
|
1773
|
+
get justifyContentMobile() {
|
|
1774
|
+
return this.getAttribute("justify-content--mobile");
|
|
1775
|
+
}
|
|
1776
|
+
set justifyContentMobile(t) {
|
|
1777
|
+
this.setAttribute("justify-content--mobile", t);
|
|
1778
|
+
}
|
|
1779
|
+
get justifyItemsMobile() {
|
|
1780
|
+
return this.getAttribute("justify-items--mobile");
|
|
1781
|
+
}
|
|
1782
|
+
set justifyItemsMobile(t) {
|
|
1783
|
+
this.setAttribute("justify-items--mobile", t);
|
|
1784
|
+
}
|
|
1785
|
+
get alignContentMobile() {
|
|
1786
|
+
return this.getAttribute("align-content--mobile");
|
|
1787
|
+
}
|
|
1788
|
+
set alignContentMobile(t) {
|
|
1789
|
+
this.setAttribute("align-content--mobile", t);
|
|
1790
|
+
}
|
|
1791
|
+
get alignItemsMobile() {
|
|
1792
|
+
return this.getAttribute("align-items--mobile");
|
|
1793
|
+
}
|
|
1794
|
+
set alignItemsMobile(t) {
|
|
1795
|
+
this.setAttribute("align-items--mobile", t);
|
|
1796
|
+
}
|
|
1797
|
+
get justifyContentTablet() {
|
|
1798
|
+
return this.getAttribute("justify-content--tablet");
|
|
1799
|
+
}
|
|
1800
|
+
set justifyContentTablet(t) {
|
|
1801
|
+
this.setAttribute("justify-content--tablet", t);
|
|
1802
|
+
}
|
|
1803
|
+
get justifyItemsTablet() {
|
|
1804
|
+
return this.getAttribute("justify-items--tablet");
|
|
1805
|
+
}
|
|
1806
|
+
set justifyItemsTablet(t) {
|
|
1807
|
+
this.setAttribute("justify-items--tablet", t);
|
|
1808
|
+
}
|
|
1809
|
+
get alignContentTablet() {
|
|
1810
|
+
return this.getAttribute("align-content--tablet");
|
|
1811
|
+
}
|
|
1812
|
+
set alignContentTablet(t) {
|
|
1813
|
+
this.setAttribute("align-content--tablet", t);
|
|
1814
|
+
}
|
|
1815
|
+
get alignItemsTablet() {
|
|
1816
|
+
return this.getAttribute("align-items--tablet");
|
|
1817
|
+
}
|
|
1818
|
+
set alignItemsTablet(t) {
|
|
1819
|
+
this.setAttribute("align-items--tablet", t);
|
|
1820
|
+
}
|
|
1821
|
+
get justifyContentLaptop() {
|
|
1822
|
+
return this.getAttribute("justify-content--laptop");
|
|
1823
|
+
}
|
|
1824
|
+
set justifyContentLaptop(t) {
|
|
1825
|
+
this.setAttribute("justify-content--laptop", t);
|
|
1826
|
+
}
|
|
1827
|
+
get justifyItemsLaptop() {
|
|
1828
|
+
return this.getAttribute("justify-items--laptop");
|
|
1829
|
+
}
|
|
1830
|
+
set justifyItemsLaptop(t) {
|
|
1831
|
+
this.setAttribute("justify-items--laptop", t);
|
|
1832
|
+
}
|
|
1833
|
+
get alignContentLaptop() {
|
|
1834
|
+
return this.getAttribute("align-content--laptop");
|
|
1835
|
+
}
|
|
1836
|
+
set alignContentLaptop(t) {
|
|
1837
|
+
this.setAttribute("align-content--laptop", t);
|
|
1838
|
+
}
|
|
1839
|
+
get alignItemsLaptop() {
|
|
1840
|
+
return this.getAttribute("align-items--laptop");
|
|
1841
|
+
}
|
|
1842
|
+
set alignItemsLaptop(t) {
|
|
1843
|
+
this.setAttribute("align-items--laptop", t);
|
|
1844
|
+
}
|
|
1845
|
+
get justifyContentDesktop() {
|
|
1846
|
+
return this.getAttribute("justify-content--desktop");
|
|
1847
|
+
}
|
|
1848
|
+
set justifyContentDesktop(t) {
|
|
1849
|
+
this.setAttribute("justify-content--desktop", t);
|
|
1850
|
+
}
|
|
1851
|
+
get justifyItemsDesktop() {
|
|
1852
|
+
return this.getAttribute("justify-items--desktop");
|
|
1853
|
+
}
|
|
1854
|
+
set justifyItemsDesktop(t) {
|
|
1855
|
+
this.setAttribute("justify-items--desktop", t);
|
|
1856
|
+
}
|
|
1857
|
+
get alignContentDesktop() {
|
|
1858
|
+
return this.getAttribute("align-content--desktop");
|
|
1859
|
+
}
|
|
1860
|
+
set alignContentDesktop(t) {
|
|
1861
|
+
this.setAttribute("align-content--desktop", t);
|
|
1862
|
+
}
|
|
1863
|
+
get alignItemsDesktop() {
|
|
1864
|
+
return this.getAttribute("align-items--desktop");
|
|
1865
|
+
}
|
|
1866
|
+
set alignItemsDesktop(t) {
|
|
1867
|
+
this.setAttribute("align-items--desktop", t);
|
|
1868
|
+
}
|
|
1869
|
+
};
|
|
1870
|
+
y.nativeName = "div";
|
|
1871
|
+
let m = y;
|
|
1872
|
+
customElements.get("px-grid") || customElements.define("px-grid", m);
|
|
1873
|
+
const z = new CSSStyleSheet();
|
|
1874
|
+
z.replaceSync(X);
|
|
1875
|
+
const x = class x extends S {
|
|
1876
|
+
constructor() {
|
|
1877
|
+
super(z), this.template = () => `<div class="content-header">
|
|
7
1878
|
<div class="contrast-helper"></div>
|
|
8
1879
|
<px-section padding-block="l">
|
|
9
1880
|
<px-grid gap="none">
|
|
@@ -13,14 +1884,9 @@ const o = class o extends g {
|
|
|
13
1884
|
<px-h1 variant="title-3xl"><slot></slot></px-h1>
|
|
14
1885
|
<slot name="subtitle"></slot>
|
|
15
1886
|
</px-vstack>
|
|
16
|
-
${this.$patchDescriptionSlot ? `<px-stack gap="s" direction="row" direction--mobile="column">
|
|
17
|
-
<slot name="patch" shrink></slot>
|
|
18
|
-
<slot name="patch-description"></slot>
|
|
19
|
-
</px-stack>` : ""}
|
|
20
1887
|
</div>
|
|
21
1888
|
</px-container>
|
|
22
1889
|
</px-grid>
|
|
23
|
-
${this.$overlapSlot ? '<slot name="overlap" slot="overlap"></slot>' : ""}
|
|
24
1890
|
</px-section>
|
|
25
1891
|
</div>`, this.shadowRoot.innerHTML = this.template();
|
|
26
1892
|
}
|
|
@@ -45,17 +1911,27 @@ const o = class o extends g {
|
|
|
45
1911
|
];
|
|
46
1912
|
}
|
|
47
1913
|
connectedCallback() {
|
|
48
|
-
|
|
49
|
-
|
|
1914
|
+
this.$patchDescriptionSlot && this.shadowRoot.querySelector(
|
|
1915
|
+
".content-header-content"
|
|
1916
|
+
).insertAdjacentHTML(
|
|
1917
|
+
"beforeend",
|
|
1918
|
+
`<px-stack gap="s" direction="row" direction--mobile="column">
|
|
1919
|
+
<slot name="patch" shrink></slot>
|
|
1920
|
+
<slot name="patch-description"></slot>
|
|
1921
|
+
</px-stack>`
|
|
1922
|
+
), this.$overlapSlot && this.shadowRoot.querySelector("px-section").insertAdjacentHTML(
|
|
1923
|
+
"beforeend",
|
|
1924
|
+
'<slot name="overlap" slot="overlap"></slot>'
|
|
1925
|
+
), this.$subtitleSlot && this.$subtitleSlot.setAttribute("variant", "subtitle"), this.$patchDescriptionSlot && (this.$patchDescriptionSlot.localName === "px-p" && this.$patchDescriptionSlot.setAttribute("variant", "default"), (this.$patchDescriptionSlot.localName === "px-p" || this.$patchDescriptionSlot.localName === "px-span") && (this.$patchDescriptionSlot.setAttribute("font-size", "body-l"), this.$patchDescriptionSlot.removeAttribute("font-weight"), this.$patchDescriptionSlot.removeAttribute("color")), this.$patchDescriptionSlot.localName === "px-price" && this.$patchDescriptionSlot.setAttribute("size", "m")), this.createGridding();
|
|
50
1926
|
}
|
|
51
|
-
attributeChangedCallback(t,
|
|
52
|
-
if (
|
|
1927
|
+
attributeChangedCallback(t, i, e) {
|
|
1928
|
+
if (i !== e)
|
|
53
1929
|
switch (t) {
|
|
54
1930
|
case "background-color":
|
|
55
|
-
this.$section.backgroundColor =
|
|
1931
|
+
this.$section.backgroundColor = u.indexOf(e) > 0 ? e : "none";
|
|
56
1932
|
break;
|
|
57
1933
|
case "background-gradient":
|
|
58
|
-
this.$section.gradient =
|
|
1934
|
+
this.$section.gradient = $.indexOf(e) > 0 ? e : "none";
|
|
59
1935
|
break;
|
|
60
1936
|
case "background-image":
|
|
61
1937
|
this.$section.backgroundImage = e;
|
|
@@ -70,7 +1946,7 @@ const o = class o extends g {
|
|
|
70
1946
|
this.$section.backgroundImageLaptop = e;
|
|
71
1947
|
break;
|
|
72
1948
|
case "background-size":
|
|
73
|
-
this.$section.backgroundSize =
|
|
1949
|
+
this.$section.backgroundSize = A.indexOf(e) > 0 ? e : "";
|
|
74
1950
|
break;
|
|
75
1951
|
case "background-position":
|
|
76
1952
|
this.$section.backgroundPosition = e;
|
|
@@ -79,41 +1955,43 @@ const o = class o extends g {
|
|
|
79
1955
|
case "has-gridding--mobile":
|
|
80
1956
|
case "has-gridding--tablet":
|
|
81
1957
|
case "has-gridding--laptop":
|
|
82
|
-
this.createGridding();
|
|
1958
|
+
this.createGridding(e);
|
|
83
1959
|
break;
|
|
84
1960
|
case "inverted":
|
|
85
|
-
for (let
|
|
86
|
-
this.$children[
|
|
1961
|
+
for (let o = 0; o < this.$children.length; o++)
|
|
1962
|
+
this.$children[o].hasAttribute("inverted") || this.$children[o].toggleAttribute("inverted");
|
|
87
1963
|
this.$h1.toggleAttribute("inverted", e !== null), this.$el.toggleAttribute("inverted", e !== null);
|
|
88
1964
|
break;
|
|
89
1965
|
default:
|
|
90
|
-
super.attributeChangedCallback(t,
|
|
1966
|
+
super.attributeChangedCallback(t, i, e);
|
|
91
1967
|
break;
|
|
92
1968
|
}
|
|
93
1969
|
}
|
|
94
|
-
createGridding() {
|
|
95
|
-
const
|
|
96
|
-
{ prop: "hasGridding",
|
|
1970
|
+
createGridding(t) {
|
|
1971
|
+
const i = [
|
|
1972
|
+
{ prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
|
|
97
1973
|
{
|
|
98
1974
|
prop: "hasGriddingMobile",
|
|
99
|
-
|
|
1975
|
+
gridAttr: "grid-cols--mobile",
|
|
100
1976
|
attr: "col-span--mobile"
|
|
101
1977
|
},
|
|
102
1978
|
{
|
|
103
1979
|
prop: "hasGriddingTablet",
|
|
104
|
-
|
|
1980
|
+
gridAttr: "grid-cols--tablet",
|
|
105
1981
|
attr: "col-span--tablet"
|
|
106
1982
|
},
|
|
107
1983
|
{
|
|
108
1984
|
prop: "hasGriddingLaptop",
|
|
109
|
-
|
|
1985
|
+
gridAttr: "grid-cols--laptop",
|
|
110
1986
|
attr: "col-span--laptop"
|
|
111
1987
|
}
|
|
112
|
-
],
|
|
1988
|
+
], e = this.shadowRoot.querySelector(
|
|
113
1989
|
"px-grid > px-container"
|
|
114
1990
|
);
|
|
115
|
-
t.forEach(({ prop:
|
|
116
|
-
this[
|
|
1991
|
+
t !== null ? i.forEach(({ prop: o, gridAttr: r, attr: a }) => {
|
|
1992
|
+
this[o] && (this.$grid.setAttribute(r, "3"), e == null || e.setAttribute(a, "2"));
|
|
1993
|
+
}) : i.forEach(({ gridAttr: o, attr: r }) => {
|
|
1994
|
+
this.$grid.setAttribute(o, "1"), e == null || e.setAttribute(r, "1");
|
|
117
1995
|
});
|
|
118
1996
|
}
|
|
119
1997
|
get $grid() {
|
|
@@ -234,9 +2112,9 @@ const o = class o extends g {
|
|
|
234
2112
|
t ? this.setAttribute("min-height", "") : this.removeAttribute("min-height");
|
|
235
2113
|
}
|
|
236
2114
|
};
|
|
237
|
-
|
|
238
|
-
let
|
|
239
|
-
customElements.get("px-content-header") || customElements.define("px-content-header",
|
|
2115
|
+
x.nativeName = "div";
|
|
2116
|
+
let f = x;
|
|
2117
|
+
customElements.get("px-content-header") || customElements.define("px-content-header", f);
|
|
240
2118
|
export {
|
|
241
|
-
|
|
2119
|
+
f as ContentHeader
|
|
242
2120
|
};
|