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