@proximus/lavender 1.0.0-alpha.15 → 1.0.0-alpha.17
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/lavender.cjs.js +1 -1
- package/dist/lavender.es.js +1332 -493
- package/dist/lavender.umd.js +1 -1
- package/package.json +2 -2
package/dist/lavender.es.js
CHANGED
|
@@ -233,6 +233,7 @@ class PxElement extends WithFlexAttributes {
|
|
|
233
233
|
return this.shadowRoot.querySelector(this.nativeName);
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
|
+
const gridGapValues = ["default", "none", "expanded"];
|
|
236
237
|
const fontsizeValues = [
|
|
237
238
|
"",
|
|
238
239
|
"default",
|
|
@@ -286,30 +287,26 @@ const iconSizeValues$1 = [
|
|
|
286
287
|
"xl",
|
|
287
288
|
"2xl"
|
|
288
289
|
];
|
|
290
|
+
const textalignValues = ["", "default", "left", "center", "right"];
|
|
289
291
|
const paddingValues = ["", "none", "2xs", "xs", "s", "m", "l", "xl"];
|
|
290
292
|
const borderValues = ["", "none", "s", "m", "l"];
|
|
291
293
|
const borderRadiusValues = ["", "none", "main", "pill"];
|
|
292
294
|
const bgColorValues = [
|
|
293
295
|
"",
|
|
294
|
-
"none",
|
|
295
|
-
"weak",
|
|
296
|
-
"moderate",
|
|
297
|
-
"strong",
|
|
298
|
-
"rich",
|
|
299
|
-
"main",
|
|
300
|
-
"canvas-weak",
|
|
301
|
-
"canvas-light",
|
|
302
|
-
"canvas-soft",
|
|
303
|
-
"canvas-moderate",
|
|
304
|
-
"canvas-strong",
|
|
305
|
-
"canvas-deep",
|
|
306
|
-
"canvas-rich",
|
|
296
|
+
"container-none",
|
|
297
|
+
"container-weak",
|
|
298
|
+
"container-moderate",
|
|
299
|
+
"container-strong",
|
|
300
|
+
"container-rich",
|
|
301
|
+
"container-main",
|
|
307
302
|
"action-primary",
|
|
308
303
|
"action-secondary",
|
|
309
304
|
"action-hover-bordered",
|
|
310
305
|
"action-hover",
|
|
311
306
|
"action-disabled",
|
|
312
307
|
"action-active",
|
|
308
|
+
"action-neutral",
|
|
309
|
+
"action-neutral-hover",
|
|
313
310
|
"notification",
|
|
314
311
|
"promo",
|
|
315
312
|
"success",
|
|
@@ -318,6 +315,18 @@ const bgColorValues = [
|
|
|
318
315
|
"unlimited"
|
|
319
316
|
];
|
|
320
317
|
const shadowValues = ["", "none", "s", "m", "l", "xl"];
|
|
318
|
+
const headingValues = [
|
|
319
|
+
"",
|
|
320
|
+
"default",
|
|
321
|
+
"title-4xl",
|
|
322
|
+
"title-3xl",
|
|
323
|
+
"title-2xl",
|
|
324
|
+
"title-xl",
|
|
325
|
+
"title-l",
|
|
326
|
+
"title-m",
|
|
327
|
+
"title-s",
|
|
328
|
+
"subtitle"
|
|
329
|
+
];
|
|
321
330
|
const gradientValues = [
|
|
322
331
|
"",
|
|
323
332
|
"purple-bottom-red",
|
|
@@ -369,6 +378,14 @@ const gradientValues = [
|
|
|
369
378
|
"color-bottom-right-turquoise",
|
|
370
379
|
"color-bottom-right-green"
|
|
371
380
|
];
|
|
381
|
+
const noBorderRadiusValues = [
|
|
382
|
+
"",
|
|
383
|
+
"all",
|
|
384
|
+
"top",
|
|
385
|
+
"right",
|
|
386
|
+
"bottom",
|
|
387
|
+
"left"
|
|
388
|
+
];
|
|
372
389
|
function addGlobalStylesheet(inlineStyles) {
|
|
373
390
|
const style = document.createElement("style");
|
|
374
391
|
style.innerHTML = inlineStyles;
|
|
@@ -824,52 +841,16 @@ class Spacer extends HTMLElement {
|
|
|
824
841
|
}
|
|
825
842
|
}
|
|
826
843
|
customElements.define("px-spacer", Spacer);
|
|
827
|
-
const styles$c = "slot[name=
|
|
844
|
+
const styles$c = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}";
|
|
828
845
|
const styleSheet$c = new CSSStyleSheet();
|
|
829
846
|
styleSheet$c.replaceSync(styles$c);
|
|
830
|
-
let Section$1 = class Section extends WithFlexAttributes {
|
|
831
|
-
constructor() {
|
|
832
|
-
super(styleSheet$c);
|
|
833
|
-
this.template = `
|
|
834
|
-
<section>
|
|
835
|
-
<slot name="heading"></slot>
|
|
836
|
-
<px-stack direction="column" gap="1rem">
|
|
837
|
-
<slot></slot>
|
|
838
|
-
</px-stack>
|
|
839
|
-
</section>`;
|
|
840
|
-
this.shadowRoot.innerHTML = this.template;
|
|
841
|
-
}
|
|
842
|
-
static get observedAttributes() {
|
|
843
|
-
return [...super.observedAttributes, "gap"];
|
|
844
|
-
}
|
|
845
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
846
|
-
if (name === "gap" && oldValue !== newValue) {
|
|
847
|
-
this.$el.gap = newValue;
|
|
848
|
-
return;
|
|
849
|
-
}
|
|
850
|
-
super.attributeChangedCallback(name, oldValue, newValue);
|
|
851
|
-
}
|
|
852
|
-
get gap() {
|
|
853
|
-
return this.getAttribute("gap");
|
|
854
|
-
}
|
|
855
|
-
set gap(value) {
|
|
856
|
-
this.setAttribute("gap", value);
|
|
857
|
-
}
|
|
858
|
-
get $el() {
|
|
859
|
-
return this.shadowRoot.querySelector('px-stack[direction="column"]');
|
|
860
|
-
}
|
|
861
|
-
};
|
|
862
|
-
customElements.define("px-section-damien", Section$1);
|
|
863
|
-
const styles$b = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}";
|
|
864
|
-
const styleSheet$b = new CSSStyleSheet();
|
|
865
|
-
styleSheet$b.replaceSync(styles$b);
|
|
866
847
|
class Page extends WithFlexAttributes {
|
|
867
848
|
constructor() {
|
|
868
|
-
super(styleSheet$
|
|
849
|
+
super(styleSheet$c);
|
|
869
850
|
this.template = (stickyContainer) => `
|
|
870
|
-
<px-container
|
|
851
|
+
<px-container border-radius="none" padding="none">
|
|
871
852
|
<px-vstack>
|
|
872
|
-
<px-container id="header-container"
|
|
853
|
+
<px-container id="header-container" border-radius="none">
|
|
873
854
|
<px-hstack>
|
|
874
855
|
<px-spacer></px-spacer>
|
|
875
856
|
<px-vstack
|
|
@@ -885,14 +866,14 @@ class Page extends WithFlexAttributes {
|
|
|
885
866
|
</px-container>
|
|
886
867
|
<px-container
|
|
887
868
|
id="image-container"
|
|
888
|
-
|
|
869
|
+
border-radius="none"
|
|
889
870
|
padding="none"
|
|
890
|
-
|
|
871
|
+
padding-top="xl"
|
|
891
872
|
id="image-box"
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
873
|
+
background-size="cover"
|
|
874
|
+
background-position="top center"
|
|
875
|
+
padding-bottom="xl"
|
|
876
|
+
border-radius="none"
|
|
896
877
|
bgimg="${this.backgroundImage}"
|
|
897
878
|
>
|
|
898
879
|
<px-hstack>
|
|
@@ -905,7 +886,7 @@ class Page extends WithFlexAttributes {
|
|
|
905
886
|
</px-container>
|
|
906
887
|
${stickyContainer ? ` <px-hstack>
|
|
907
888
|
<px-spacer></px-spacer>
|
|
908
|
-
<px-container
|
|
889
|
+
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
909
890
|
<px-vstack gap="1rem">
|
|
910
891
|
<slot name="image-sticky-container"></slot>
|
|
911
892
|
</px-vstack>
|
|
@@ -915,10 +896,10 @@ class Page extends WithFlexAttributes {
|
|
|
915
896
|
<px-container
|
|
916
897
|
id="body-container"
|
|
917
898
|
id="main"
|
|
918
|
-
|
|
899
|
+
background-color="${this.backgroundColor}"
|
|
919
900
|
padding="none"
|
|
920
|
-
|
|
921
|
-
|
|
901
|
+
padding-top="xl"
|
|
902
|
+
padding-bottom="xl"
|
|
922
903
|
>
|
|
923
904
|
<px-hstack>
|
|
924
905
|
<px-spacer></px-spacer>
|
|
@@ -935,12 +916,12 @@ class Page extends WithFlexAttributes {
|
|
|
935
916
|
</px-container>
|
|
936
917
|
<px-container
|
|
937
918
|
id="contact-container"
|
|
938
|
-
|
|
919
|
+
border-radius="none"
|
|
939
920
|
id="main"
|
|
940
|
-
|
|
921
|
+
background-color="container-weak"
|
|
941
922
|
padding="none"
|
|
942
|
-
|
|
943
|
-
|
|
923
|
+
padding-top="xl"
|
|
924
|
+
padding-bottom="xl"
|
|
944
925
|
>
|
|
945
926
|
<px-hstack>
|
|
946
927
|
<px-spacer></px-spacer>
|
|
@@ -952,11 +933,11 @@ class Page extends WithFlexAttributes {
|
|
|
952
933
|
</px-container>
|
|
953
934
|
<px-container
|
|
954
935
|
id="footer-container"
|
|
955
|
-
|
|
956
|
-
|
|
936
|
+
background-color="container-none"
|
|
937
|
+
border-radius="none"
|
|
957
938
|
style="background-color: rgb(108, 66, 156)"
|
|
958
|
-
|
|
959
|
-
|
|
939
|
+
padding-top="xl"
|
|
940
|
+
padding-bottom="xl"
|
|
960
941
|
>
|
|
961
942
|
<px-hstack>
|
|
962
943
|
<px-spacer></px-spacer>
|
|
@@ -1037,14 +1018,14 @@ class Page extends WithFlexAttributes {
|
|
|
1037
1018
|
if (oldValue !== newValue) {
|
|
1038
1019
|
switch (name) {
|
|
1039
1020
|
case "background-image":
|
|
1040
|
-
this.$imageContainer.setAttribute("
|
|
1021
|
+
this.$imageContainer.setAttribute("background-image", newValue);
|
|
1041
1022
|
break;
|
|
1042
1023
|
case "gap":
|
|
1043
1024
|
this.$bodyVStackContainer.setAttribute("gap", newValue);
|
|
1044
1025
|
break;
|
|
1045
1026
|
case "background-color":
|
|
1046
1027
|
this.$bodyContainer.setAttribute(
|
|
1047
|
-
"
|
|
1028
|
+
"background-color",
|
|
1048
1029
|
bgColorValues.indexOf(newValue) > 0 ? newValue : "none"
|
|
1049
1030
|
);
|
|
1050
1031
|
break;
|
|
@@ -1060,8 +1041,8 @@ class Page extends WithFlexAttributes {
|
|
|
1060
1041
|
}
|
|
1061
1042
|
}
|
|
1062
1043
|
handlePaddingVerticalChange(newValue) {
|
|
1063
|
-
this.$headerContainer.setAttribute("
|
|
1064
|
-
this.$footerContainer.setAttribute("
|
|
1044
|
+
this.$headerContainer.setAttribute("padding-top", newValue);
|
|
1045
|
+
this.$footerContainer.setAttribute("padding-bottom", newValue);
|
|
1065
1046
|
}
|
|
1066
1047
|
handlePaddingHorizontalChange(newValue) {
|
|
1067
1048
|
this.$headerContainer.paddingLeft = newValue;
|
|
@@ -1229,12 +1210,12 @@ class Icon extends WithFlexAttributes {
|
|
|
1229
1210
|
this.setAttribute("from", value);
|
|
1230
1211
|
}
|
|
1231
1212
|
}
|
|
1232
|
-
const styles$
|
|
1233
|
-
const styleSheet$
|
|
1234
|
-
styleSheet$
|
|
1213
|
+
const styles$b = ":host{line-height:1;display:inline-flex;flex-direction:column;justify-content:center}i{font-family:lavender;color:var(--px-color-icon-primary-default);font-size:var(--px-icon-size-m-mobile);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}svg{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);color:var(--px-color-icon-primary-default)}.inherit{color:inherit}.primary{color:var(--px-color-icon-primary-default)}.body{color:var(--px-color-icon-body-default)}.details{color:var(--px-color-icon-details-default)}.hover:hover{color:var(--px-color-icon-hover-default)}.hover:active{color:var(--px-color-icon-active-default)}.disabled{color:var(--px-color-icon-disabled-default)}.success{color:var(--px-color-icon-success-default)}.warning{color:var(--px-color-icon-warning-default)}.error{color:var(--px-color-icon-error-default)}.unlimited{color:var(--px-color-icon-unlimited-default)}.promo{color:var(--px-color-icon-promo-default)}:host([inverted]) i{color:var(--px-color-icon-primary-inverted)}:host([inverted]) svg{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .primary{color:var(--px-color-icon-primary-inverted)}:host([inverted]) .body{color:var(--px-color-icon-body-inverted)}:host([inverted]) .details{color:var(--px-color-icon-details-inverted)}:host([inverted]) .hover:hover{color:var(--px-color-icon-hover-inverted)}:host([inverted]) .hover:active{color:var(--px-color-icon-active-inverted)}:host([inverted]) .disabled{color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .success{color:var(--px-color-icon-success-inverted)}:host([inverted]) .warning{color:var(--px-color-icon-warning-inverted)}:host([inverted]) .error{color:var(--px-color-icon-error-inverted)}:host([inverted]) .unlimited{color:var(--px-color-icon-unlimited-inverted)}:host([inverted]) .promo{color:var(--px-color-icon-promo-inverted)}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile);font-size:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);font-size:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile);font-size:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);font-size:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile);font-size:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile);font-size:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile);font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet);font-size:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet);font-size:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet);font-size:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet);font-size:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet);font-size:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet);font-size:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet);font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop);font-size:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop);font-size:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop);font-size:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop);font-size:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop);font-size:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop);font-size:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop);font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}";
|
|
1214
|
+
const styleSheet$b = new CSSStyleSheet();
|
|
1215
|
+
styleSheet$b.replaceSync(styles$b);
|
|
1235
1216
|
class SVGIcon extends Icon {
|
|
1236
1217
|
constructor() {
|
|
1237
|
-
super(styleSheet$
|
|
1218
|
+
super(styleSheet$b);
|
|
1238
1219
|
this.template = () => `<svg>
|
|
1239
1220
|
<use xlink:href="#icon-${this.name}"></use>
|
|
1240
1221
|
</svg>`;
|
|
@@ -1276,12 +1257,12 @@ if (!customElements.get("px-icon")) {
|
|
|
1276
1257
|
}
|
|
1277
1258
|
const iconFontStyles = '.lavender-3g_tablet:before{content:""}.lavender-accessories:before{content:""}.lavender-account:before{content:""}.lavender-activate:before{content:""}.lavender-ai:before{content:""}.lavender-air_plane:before{content:""}.lavender-alarm:before{content:""}.lavender-answers:before{content:""}.lavender-antenna:before{content:""}.lavender-applications:before{content:""}.lavender-arrow_down:before{content:""}.lavender-arrow_left:before{content:""}.lavender-arrow_right:before{content:""}.lavender-arrow_up:before{content:""}.lavender-back_camera:before{content:""}.lavender-bbox_off:before{content:""}.lavender-batterie:before{content:""}.lavender-best_seller:before{content:""}.lavender-bell_circle:before{content:""}.lavender-best_seller_2:before{content:""}.lavender-best_seller_14:before{content:""}.lavender-bbox_on:before{content:""}.lavender-beta_02:before{content:""}.lavender-beta:before{content:""}.lavender-belgique_ok:before{content:""}.lavender-bicycle:before{content:""}.lavender-bill:before{content:""}.lavender-bill_member:before{content:""}.lavender-birthday_cake:before{content:""}.lavender-blindness:before{content:""}.lavender-bookmark:before{content:""}.lavender-broken_links:before{content:""}.lavender-burger_menu:before{content:""}.lavender-bus:before{content:""}.lavender-bug:before{content:""}.lavender-budget_manager:before{content:""}.lavender-cable:before{content:""}.lavender-caddy:before{content:""}.lavender-cadenas_cloud:before{content:""}.lavender-calendar:before{content:""}.lavender-call_from_abroad:before{content:""}.lavender-call_transfert:before{content:""}.lavender-calls:before{content:""}.lavender-camera:before{content:""}.lavender-calls_1:before{content:""}.lavender-calls_from_belgium:before{content:""}.lavender-car:before{content:""}.lavender-car_crash:before{content:""}.lavender-card:before{content:""}.lavender-care:before{content:""}.lavender-cash_back:before{content:""}.lavender-checkmark:before{content:""}.lavender-checkmark_branding:before{content:""}.lavender-chevron_down:before{content:""}.lavender-chevron_up:before{content:""}.lavender-circular_economy:before{content:""}.lavender-clock:before{content:""}.lavender-cloud:before{content:""}.lavender-cloud_ict:before{content:""}.lavender-cloud_iot_1:before{content:""}.lavender-cloud_iot_2:before{content:""}.lavender-chevron_right:before{content:""}.lavender-cloud_security:before{content:""}.lavender-cloud_network:before{content:""}.lavender-chevron_left:before{content:""}.lavender-collaboration:before{content:""}.lavender-congratulation_box:before{content:""}.lavender-connection_error:before{content:""}.lavender-community:before{content:""}.lavender-connected_devices:before{content:""}.lavender-contact:before{content:""}.lavender-crash:before{content:""}.lavender-copy_paste:before{content:""}.lavender-cookie:before{content:""}.lavender-contest:before{content:""}.lavender-cross:before{content:""}.lavender-cross_circle:before{content:""}.lavender-connectivity:before{content:""}.lavender-current_location:before{content:""}.lavender-connection_manager:before{content:""}.lavender-daily_comute:before{content:""}.lavender-daily_rooming:before{content:""}.lavender-data:before{content:""}.lavender-dance:before{content:""}.lavender-dashboard:before{content:""}.lavender-desktop:before{content:""}.lavender-delivery:before{content:""}.lavender-data_center:before{content:""}.lavender-easy:before{content:""}.lavender-download:before{content:""}.lavender-easy_1:before{content:""}.lavender-daily_rooming_02:before{content:""}.lavender-direct_assist:before{content:""}.lavender-edit:before{content:""}.lavender-electricity:before{content:""}.lavender-energy:before{content:""}.lavender-entertainmant_full:before{content:""}.lavender-entertainment:before{content:""}.lavender-exclamation_mark:before{content:""}.lavender-eco:before{content:""}.lavender-exclamation_filled:before{content:""}.lavender-exhibition_screen:before{content:""}.lavender-export:before{content:""}.lavender-eye:before{content:""}.lavender-eye_close:before{content:""}.lavender-family:before{content:""}.lavender-faq:before{content:""}.lavender-favorite:before{content:""}.lavender-favorite_unselected:before{content:""}.lavender-feedback:before{content:""}.lavender-filter:before{content:""}.lavender-fixed_connection:before{content:""}.lavender-fiber:before{content:""}.lavender-fire_wood:before{content:""}.lavender-flexibility04:before{content:""}.lavender-flexibility05:before{content:""}.lavender-flexibility03:before{content:""}.lavender-flexibility02:before{content:""}.lavender-flexible_delivery:before{content:""}.lavender-flexibility01:before{content:""}.lavender-fixed_phone:before{content:""}.lavender-football:before{content:""}.lavender-forum:before{content:""}.lavender-free_delivery:before{content:""}.lavender-free_service:before{content:""}.lavender-frequently_questions:before{content:""}.lavender-fuel:before{content:""}.lavender-front_camera:before{content:""}.lavender-galerry_02:before{content:""}.lavender-galerry:before{content:""}.lavender-games:before{content:""}.lavender-gaz:before{content:""}.lavender-gift:before{content:""}.lavender-government:before{content:""}.lavender-gps:before{content:""}.lavender-handicap:before{content:""}.lavender-handle:before{content:""}.lavender-heat_pump:before{content:""}.lavender-guitar:before{content:""}.lavender-home:before{content:""}.lavender-home_added_value:before{content:""}.lavender-hub:before{content:""}.lavender-home_wifi:before{content:""}.lavender-icon_advantage_pig:before{content:""}.lavender-ict:before{content:""}.lavender-ict_networking:before{content:""}.lavender-incoming_calls:before{content:""}.lavender-infinity:before{content:""}.lavender-information_box:before{content:""}.lavender-internet_mobile:before{content:""}.lavender-information:before{content:""}.lavender-internet_laptop:before{content:""}.lavender-internet_tablet:before{content:""}.lavender-invoice_insight_adv:before{content:""}.lavender-international:before{content:""}.lavender-layers:before{content:""}.lavender-internet:before{content:""}.lavender-licence_plate_managment:before{content:""}.lavender-inscription:before{content:""}.lavender-licence_plate_managment02:before{content:""}.lavender-innovation:before{content:""}.lavender-light_bulb:before{content:""}.lavender-links:before{content:""}.lavender-location:before{content:""}.lavender-login:before{content:""}.lavender-login_open:before{content:""}.lavender-logout:before{content:""}.lavender-magnify:before{content:""}.lavender-map:before{content:""}.lavender-markets:before{content:""}.lavender-metro:before{content:""}.lavender-microphone:before{content:""}.lavender-micro:before{content:""}.lavender-mental_deficiency:before{content:""}.lavender-minus_circle:before{content:""}.lavender-minus:before{content:""}.lavender-minutes_1600_01:before{content:""}.lavender-micro_sim_card:before{content:""}.lavender-messaging:before{content:""}.lavender-mobile:before{content:""}.lavender-minutes_1600_02:before{content:""}.lavender-mobile_coverage:before{content:""}.lavender-mobile_1:before{content:""}.lavender-mobile_touches:before{content:""}.lavender-mobility_insurance:before{content:""}.lavender-monitoring:before{content:""}.lavender-mood_happy:before{content:""}.lavender-mood_joy:before{content:""}.lavender-mood_neutral:before{content:""}.lavender-mood_unhappy:before{content:""}.lavender-move_sticker:before{content:""}.lavender-no_wifi:before{content:""}.lavender-no_playing:before{content:""}.lavender-number2:before{content:""}.lavender-number3:before{content:""}.lavender-number1:before{content:""}.lavender-norton_security_1:before{content:""}.lavender-mood_very_bad:before{content:""}.lavender-music:before{content:""}.lavender-norton_security:before{content:""}.lavender-natural_gas:before{content:""}.lavender-number4:before{content:""}.lavender-number5:before{content:""}.lavender-number6:before{content:""}.lavender-number7:before{content:""}.lavender-number8:before{content:""}.lavender-number9:before{content:""}.lavender-number10:before{content:""}.lavender-on_app:before{content:""}.lavender-on_off_switch:before{content:""}.lavender-on_web:before{content:""}.lavender-one_click:before{content:""}.lavender-outcoming_call:before{content:""}.lavender-options:before{content:""}.lavender-overview:before{content:""}.lavender-pack:before{content:""}.lavender-pack_off:before{content:""}.lavender-paperclip:before{content:""}.lavender-parking:before{content:""}.lavender-picture:before{content:""}.lavender-pin:before{content:""}.lavender-places:before{content:""}.lavender-play:before{content:""}.lavender-plus:before{content:""}.lavender-plus_circle:before{content:""}.lavender-positioning:before{content:""}.lavender-power:before{content:""}.lavender-presence_home:before{content:""}.lavender-prime:before{content:""}.lavender-print:before{content:""}.lavender-processor:before{content:""}.lavender-products:before{content:""}.lavender-qr_code:before{content:""}.lavender-qr:before{content:""}.lavender-reducer:before{content:""}.lavender-refresh:before{content:""}.lavender-reload:before{content:""}.lavender-relaunch:before{content:""}.lavender-recycling:before{content:""}.lavender-remote:before{content:""}.lavender-repair_device:before{content:""}.lavender-raccording_flat:before{content:""}.lavender-ready_to_use:before{content:""}.lavender-question_mark:before{content:""}.lavender-replay36:before{content:""}.lavender-requests_appointments_and_order:before{content:""}.lavender-reset:before{content:""}.lavender-roaming_belgium:before{content:""}.lavender-roadwork:before{content:""}.lavender-roaming:before{content:""}.lavender-settings:before{content:""}.lavender-serveur:before{content:""}.lavender-settings_full:before{content:""}.lavender-restaurant:before{content:""}.lavender-shopmag:before{content:""}.lavender-secure_paiement:before{content:""}.lavender-sim_card:before{content:""}.lavender-share:before{content:""}.lavender-search:before{content:""}.lavender-smartphone1:before{content:""}.lavender-smartphone2:before{content:""}.lavender-smartphone3:before{content:""}.lavender-smartphone4:before{content:""}.lavender-smartphone4g:before{content:""}.lavender-smartphone5:before{content:""}.lavender-smartphone6:before{content:""}.lavender-solar_panel:before{content:""}.lavender-solar_pump:before{content:""}.lavender-sondage:before{content:""}.lavender-sound_alert:before{content:""}.lavender-sound_on:before{content:""}.lavender-sound_off:before{content:""}.lavender-stop_watch:before{content:""}.lavender-speedtest_dl:before{content:""}.lavender-speed:before{content:""}.lavender-surf_gsm:before{content:""}.lavender-sustainability:before{content:""}.lavender-speedtest_ul:before{content:""}.lavender-switch:before{content:""}.lavender-succes:before{content:""}.lavender-subscription_1:before{content:""}.lavender-tablet:before{content:""}.lavender-tailor:before{content:""}.lavender-subscription:before{content:""}.lavender-target_blank:before{content:""}.lavender-threedots_horizontal02:before{content:""}.lavender-terms_and_conditions:before{content:""}.lavender-tractor:before{content:""}.lavender-toucscreens:before{content:""}.lavender-threedots_vertical02:before{content:""}.lavender-train:before{content:""}.lavender-traffic_jam:before{content:""}.lavender-tram:before{content:""}.lavender-trash:before{content:""}.lavender-tv:before{content:""}.lavender-under_construction:before{content:""}.lavender-upload:before{content:""}.lavender-usage:before{content:""}.lavender-view360_02:before{content:""}.lavender-view360:before{content:""}.lavender-view360_01:before{content:""}.lavender-videoscope:before{content:""}.lavender-wifi_warning:before{content:""}.lavender-wireless_hub:before{content:""}.lavender-wrench:before{content:""}.lavender-wifi_ok:before{content:""}.lavender-water:before{content:""}.lavender-walking:before{content:""}.lavender-watch:before{content:""}.lavender-voucher:before{content:""}';
|
|
1278
1259
|
const iconFontStyleSheet = new CSSStyleSheet();
|
|
1279
|
-
const styleSheet$
|
|
1260
|
+
const styleSheet$a = new CSSStyleSheet();
|
|
1280
1261
|
iconFontStyleSheet.replaceSync(iconFontStyles);
|
|
1281
|
-
styleSheet$
|
|
1262
|
+
styleSheet$a.replaceSync(styles$b);
|
|
1282
1263
|
class FontIcon extends Icon {
|
|
1283
1264
|
constructor() {
|
|
1284
|
-
super(iconFontStyleSheet, styleSheet$
|
|
1265
|
+
super(iconFontStyleSheet, styleSheet$a);
|
|
1285
1266
|
this.template = () => `<i></i>`;
|
|
1286
1267
|
this.shadowRoot.innerHTML = this.template();
|
|
1287
1268
|
}
|
|
@@ -1296,11 +1277,10 @@ class FontIcon extends Icon {
|
|
|
1296
1277
|
}
|
|
1297
1278
|
}
|
|
1298
1279
|
customElements.define("px-icon-f", FontIcon);
|
|
1299
|
-
const containerCss = '.container{font-family:var(--px-font-family);background-color:var(--px-color-bg-container-rich-inverted);border-radius:var(--px-radius-main);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.paddingblock-2xs{padding-block:var(--px-padding-2xs)}.paddingblock-xs{padding-block:var(--px-padding-xs)}.paddingblock-s{padding-block:var(--px-padding-s)}.paddingblock-m{padding-block:var(--px-padding-m)}.paddingblock-l{padding-block:var(--px-padding-l)}.paddingblock-xl{padding-block:var(--px-padding-xl)}.paddingblock-none{padding-block:var(--px-padding-none)}.paddinginline-2xs{padding-inline:var(--px-padding-2xs)}.paddinginline-xs{padding-inline:var(--px-padding-xs)}.paddinginline-s{padding-inline:var(--px-padding-s)}.paddinginline-m{padding-inline:var(--px-padding-m)}.paddinginline-l{padding-inline:var(--px-padding-l)}.paddinginline-xl{padding-inline:var(--px-padding-xl)}.paddinginline-none{padding-inline:var(--px-padding-none)}.paddingtop-2xs{padding-top:var(--px-padding-2xs)}.paddingtop-xs{padding-top:var(--px-padding-xs)}.paddingtop-s{padding-top:var(--px-padding-s)}.paddingtop-m{padding-top:var(--px-padding-m)}.paddingtop-l{padding-top:var(--px-padding-l)}.paddingtop-xl{padding-top:var(--px-padding-xl)}.paddingtop-none{padding-top:var(--px-padding-none)}.paddingright-2xs{padding-right:var(--px-padding-2xs)}.paddingright-xs{padding-right:var(--px-padding-xs)}.paddingright-s{padding-right:var(--px-padding-s)}.paddingright-m{padding-right:var(--px-padding-m)}.paddingright-l{padding-right:var(--px-padding-l)}.paddingright-xl{padding-right:var(--px-padding-xl)}.paddingright-none{padding-right:var(--px-padding-none)}.paddingbottom-2xs{padding-bottom:var(--px-padding-2xs)}.paddingbottom-xs{padding-bottom:var(--px-padding-xs)}.paddingbottom-s{padding-bottom:var(--px-padding-s)}.paddingbottom-m{padding-bottom:var(--px-padding-m)}.paddingbottom-l{padding-bottom:var(--px-padding-l)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl)}.paddingbottom-none{padding-bottom:var(--px-padding-none)}.paddingleft-2xs{padding-left:var(--px-padding-2xs)}.paddingleft-xs{padding-left:var(--px-padding-xs)}.paddingleft-s{padding-left:var(--px-padding-s)}.paddingleft-m{padding-left:var(--px-padding-m)}.paddingleft-l{padding-left:var(--px-padding-l)}.paddingleft-xl{padding-left:var(--px-padding-xl)}.paddingleft-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-inverted)}.borderradius-main{border-radius:var(--px-radius-main)}.borderradius-pill{border-radius:var(--px-radius-pill)}.noborderradius-top{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.noborderradius-right{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-bottom{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.noborderradius-left{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.noborderradius-all,.borderradius-none{border-radius:var(--px-radius-none)}.bgcolor-none{background-color:var(--px-color-bg-container-none-default)}.bgcolor-weak{background-color:var(--px-color-bg-container-weak-default)}.bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-default)}.bgcolor-strong{background-color:var(--px-color-bg-container-strong-default)}.bgcolor-rich{background-color:var(--px-color-bg-container-rich-default)}.bgcolor-main{background-color:var(--px-color-bg-container-weak-default)}.bgcolor-canvas-weak{background-color:var(--px-color-canvas-weak)}.bgcolor-canvas-light{background-color:var(--px-color-canvas-light)}.bgcolor-canvas-soft{background-color:var(--px-color-canvas-soft)}.bgcolor-canvas-moderate{background-color:var(--px-color-canvas-moderate)}.bgcolor-canvas-strong{background-color:var(--px-color-canvas-strong)}.bgcolor-canvas-deep{background-color:var(--px-color-canvas-deep)}.bgcolor-canvas-rich{background-color:var(--px-color-canvas-rich)}.bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-default)}.bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-default)}.bgcolor-action-hover-bordered{background-color:var(--px-color-bg-action-hover-bordered-default)}.bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-default)}.bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-default)}.bgcolor-action-active{background-color:var(--px-color-bg-action-active-default)}.bgcolor-notification{background-color:var(--px-color-bg-notification-default)}.bgcolor-promo{background-color:var(--px-color-bg-promo-default)}.bgcolor-success{background-color:var(--px-color-bg-success-default)}.bgcolor-error{background-color:var(--px-color-bg-error-default)}.bgcolor-warning{background-color:var(--px-color-bg-warning-default)}.bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-default)}:host([inverted]) .bgcolor-none{background-color:var(--px-color-bg-container-none-inverted)}:host([inverted]) .bgcolor-weak{background-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .bgcolor-moderate{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) .bgcolor-strong{background-color:var(--px-color-bg-container-strong-inverted)}:host([inverted]) .bgcolor-rich{background-color:var(--px-color-bg-container-rich-inverted)}:host([inverted]) .bgcolor-main{background-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .bgcolor-action-primary{background-color:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .bgcolor-action-secondary{background-color:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .bgcolor-action-hover{background-color:var(--px-color-bg-action-hover-bordered-default)}:host([inverted]) .bgcolor-action-disabled{background-color:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .bgcolor-action-active{background-color:var(--px-color-bg-action-active-inverted)}:host([inverted]) .bgcolor-notification{background-color:var(--px-color-bg-notification-inverted)}:host([inverted]) .bgcolor-promo{background-color:var(--px-color-bg-promo-inverted)}:host([inverted]) .bgcolor-success{background-color:var(--px-color-bg-success-inverted)}:host([inverted]) .bgcolor-error{background-color:var(--px-color-bg-error-inverted)}:host([inverted]) .bgcolor-warning{background-color:var(--px-color-bg-warning-inverted)}:host([inverted]) .bgcolor-unlimited{background-color:var(--px-color-bg-unlimited-inverted)}.bgimg{background-repeat:no-repeat}.bgimgsize-cover{background-size:cover;background-position:center center}.bgimgsize-contain{background-size:contain}.shadow-none{box-shadow:var(--px-shadow-none)}.shadow-s{box-shadow:var(--px-shadow-s)}.shadow-m{box-shadow:var(--px-shadow-m)}.shadow-l{box-shadow:var(--px-shadow-l)}.shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.paddingtop-l{padding-top:var(--px-padding-l-mobile)}.paddingtop-xl{padding-top:var(--px-padding-xl-mobile)}.paddingright-l{padding-right:var(--px-padding-l-mobile)}.paddingright-xl{padding-right:var(--px-padding-xl-mobile)}.paddingbottom-l{padding-bottom:var(--px-padding-l-mobile)}.paddingbottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.paddingleft-l{padding-left:var(--px-padding-l-mobile)}.paddingleft-xl{padding-left:var(--px-padding-xl-mobile)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}';
|
|
1280
|
+
const containerCss = '.container{font-family:var(--px-font-family);background-color:var(--background-color);background:var(--background-gradient);border-radius:var(--px-radius-main);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var( --background-color, var(--px-color-bg-container-rich-default) )}.padding-2xs{padding:var(--px-padding-2xs)}.padding-xs{padding:var(--px-padding-xs)}.padding-s{padding:var(--px-padding-s)}.padding-m{padding:var(--px-padding-m)}.padding-l{padding:var(--px-padding-l)}.padding-xl{padding:var(--px-padding-xl)}.padding-none{padding:var(--px-padding-none)}.padding-block-2xs{padding-block:var(--px-padding-2xs)}.padding-block-xs{padding-block:var(--px-padding-xs)}.padding-block-s{padding-block:var(--px-padding-s)}.padding-block-m{padding-block:var(--px-padding-m)}.padding-block-l{padding-block:var(--px-padding-l)}.padding-block-xl{padding-block:var(--px-padding-xl)}.padding-block-none{padding-block:var(--px-padding-none)}.padding-inline-2xs{padding-inline:var(--px-padding-2xs)}.padding-inline-xs{padding-inline:var(--px-padding-xs)}.padding-inline-s{padding-inline:var(--px-padding-s)}.padding-inline-m{padding-inline:var(--px-padding-m)}.padding-inline-l{padding-inline:var(--px-padding-l)}.padding-inline-xl{padding-inline:var(--px-padding-xl)}.padding-inline-none{padding-inline:var(--px-padding-none)}.padding-top-2xs{padding-top:var(--px-padding-2xs)}.padding-top-xs{padding-top:var(--px-padding-xs)}.padding-top-s{padding-top:var(--px-padding-s)}.padding-top-m{padding-top:var(--px-padding-m)}.padding-top-l{padding-top:var(--px-padding-l)}.padding-top-xl{padding-top:var(--px-padding-xl)}.padding-top-none{padding-top:var(--px-padding-none)}.padding-right-2xs{padding-right:var(--px-padding-2xs)}.padding-right-xs{padding-right:var(--px-padding-xs)}.padding-right-s{padding-right:var(--px-padding-s)}.padding-right-m{padding-right:var(--px-padding-m)}.padding-right-l{padding-right:var(--px-padding-l)}.padding-right-xl{padding-right:var(--px-padding-xl)}.padding-right-none{padding-right:var(--px-padding-none)}.padding-bottom-2xs{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs{padding-bottom:var(--px-padding-xs)}.padding-bottom-s{padding-bottom:var(--px-padding-s)}.padding-bottom-m{padding-bottom:var(--px-padding-m)}.padding-bottom-l{padding-bottom:var(--px-padding-l)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl)}.padding-bottom-none{padding-bottom:var(--px-padding-none)}.padding-left-2xs{padding-left:var(--px-padding-2xs)}.padding-left-xs{padding-left:var(--px-padding-xs)}.padding-left-s{padding-left:var(--px-padding-s)}.padding-left-m{padding-left:var(--px-padding-m)}.padding-left-l{padding-left:var(--px-padding-l)}.padding-left-xl{padding-left:var(--px-padding-xl)}.padding-left-none{padding-left:var(--px-padding-none)}.border-none{border:none}.border-s{border:var(--px-border-s) solid var(--px-color-border-main-default)}.border-m{border:var(--px-border-m) solid var(--px-color-border-main-default)}.border-l{border:var(--px-border-l) solid var(--px-color-border-main-default)}:host([inverted]) .border{border:var(--px-border-m) solid var(--px-color-border-main-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:var(--px-shadow-none)}.box-shadow-s{box-shadow:var(--px-shadow-s)}.box-shadow-m{box-shadow:var(--px-shadow-m)}.box-shadow-l{box-shadow:var(--px-shadow-l)}.box-shadow-xl{box-shadow:var(--px-shadow-xl)}.anchored{position:relative}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]),::slotted([slot="anchor-full"]){position:absolute;top:0}::slotted([slot="anchor-right"]),::slotted([slot="anchor-left"]){transform:translateY(-50%);z-index:2}::slotted([slot="anchor-right"]){right:var(--px-padding-m)}::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-none ::slotted([slot="anchor-right"]){right:var(--px-padding-none)}.padding-none ::slotted([slot="anchor-left"]){left:var(--px-padding-none)}.padding-2xs ::slotted([slot="anchor-right"]){right:var(--px-padding-2xs)}.padding-2xs ::slotted([slot="anchor-left"]){left:var(--px-padding-2xs)}.padding-xs ::slotted([slot="anchor-right"]){right:var(--px-padding-xs)}.padding-xs ::slotted([slot="anchor-left"]){left:var(--px-padding-xs)}.padding-s ::slotted([slot="anchor-right"]){right:var(--px-padding-s)}.padding-s ::slotted([slot="anchor-left"]){left:var(--px-padding-s)}.padding-m ::slotted([slot="anchor-right"]){right:var(--px-padding-m)}.padding-m ::slotted([slot="anchor-left"]){left:var(--px-padding-m)}.padding-l ::slotted([slot="anchor-right"]){right:var(--px-padding-l)}.padding-l ::slotted([slot="anchor-left"]){left:var(--px-padding-l)}.padding-xl ::slotted([slot="anchor-right"]){right:var(--px-padding-xl)}.padding-xl ::slotted([slot="anchor-left"]){left:var(--px-padding-xl)}::slotted([slot="anchor-full"]){transform:translateY(-100%);right:0;left:0;text-align:center;z-index:1}@media only screen and (max-width: 640px){.container{background-color:var(--background-color--mobile, var(--background-color));background-image:var( --background-gradient--mobile, var(--background-gradient) )}.padding-l{padding:var(--px-padding-l-mobile)}.padding-xl{padding:var(--px-padding-xl-mobile)}.padding-top-l{padding-top:var(--px-padding-l-mobile)}.padding-top-xl{padding-top:var(--px-padding-xl-mobile)}.padding-right-l{padding-right:var(--px-padding-l-mobile)}.padding-right-xl{padding-right:var(--px-padding-xl-mobile)}.padding-bottom-l{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl{padding-bottom:var(--px-padding-xl-mobile)}.padding-left-l{padding-left:var(--px-padding-l-mobile)}.padding-left-xl{padding-left:var(--px-padding-xl-mobile)}.padding-2xs--mobile{padding:var(--px-padding-2xs)}.padding-xs--mobile{padding:var(--px-padding-xs)}.padding-s--mobile{padding:var(--px-padding-s)}.padding-m--mobile{padding:var(--px-padding-m)}.padding-l--mobile{padding:var(--px-padding-l-mobile)}.padding-xl--mobile{padding:var(--px-padding-xl-mobile)}.padding-none--mobile{padding:var(--px-padding-none)}.padding-block-2xs--mobile{padding-block:var(--px-padding-2xs)}.padding-block-xs--mobile{padding-block:var(--px-padding-xs)}.padding-block-s--mobile{padding-block:var(--px-padding-s)}.padding-block-m--mobile{padding-block:var(--px-padding-m)}.padding-block-l--mobile{padding-block:var(--px-padding-l-mobile)}.padding-block-xl--mobile{padding-block:var(--px-padding-xl-mobile)}.padding-block-none--mobile{padding-block:var(--px-padding-none)}.padding-inline-2xs--mobile{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--mobile{padding-inline:var(--px-padding-xs)}.padding-inline-s--mobile{padding-inline:var(--px-padding-s)}.padding-inline-m--mobile{padding-inline:var(--px-padding-m)}.padding-inline-l--mobile{padding-inline:var(--px-padding-l-mobile)}.padding-inline-xl--mobile{padding-inline:var(--px-padding-xl-mobile)}.padding-inline-none--mobile{padding-inline:var(--px-padding-none)}.padding-top-2xs--mobile{padding-top:var(--px-padding-2xs)}.padding-top-xs--mobile{padding-top:var(--px-padding-xs)}.padding-top-s--mobile{padding-top:var(--px-padding-s)}.padding-top-m--mobile{padding-top:var(--px-padding-m)}.padding-top-l--mobile{padding-top:var(--px-padding-l-mobile)}.padding-top-xl--mobile{padding-top:var(--px-padding-xl-mobile)}.padding-top-none--mobile{padding-top:var(--px-padding-none)}.padding-right-2xs--mobile{padding-right:var(--px-padding-2xs)}.padding-right-xs--mobile{padding-right:var(--px-padding-xs)}.padding-right-s--mobile{padding-right:var(--px-padding-s)}.padding-right-m--mobile{padding-right:var(--px-padding-m)}.padding-right-l--mobile{padding-right:var(--px-padding-l-mobile)}.padding-right-xl--mobile{padding-right:var(--px-padding-xl-mobile)}.padding-right-none--mobile{padding-right:var(--px-padding-none)}.padding-bottom-2xs--mobile{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--mobile{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--mobile{padding-bottom:var(--px-padding-s)}.padding-bottom-m--mobile{padding-bottom:var(--px-padding-m)}.padding-bottom-l--mobile{padding-bottom:var(--px-padding-l-mobile)}.padding-bottom-xl--mobile{padding-bottom:var(--px-padding-xl-mobile)}.padding-bottom-none--mobile{padding-bottom:var(--px-padding-none)}.padding-left-2xs--mobile{padding-left:var(--px-padding-2xs)}.padding-left-xs--mobile{padding-left:var(--px-padding-xs)}.padding-left-s--mobile{padding-left:var(--px-padding-s)}.padding-left-m--mobile{padding-left:var(--px-padding-m)}.padding-left-l--mobile{padding-left:var(--px-padding-l-mobile)}.padding-left-xl--mobile{padding-left:var(--px-padding-xl-mobile)}.padding-left-none--mobile{padding-left:var(--px-padding-none)}.no-border-radius-top--mobile{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right--mobile{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom--mobile{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left--mobile{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all--mobile{border-radius:var(--px-radius-none)}}.border-s ::slotted([slot="anchor-full"]){right:calc(var(--px-border-s) * -1);left:calc(var(--px-border-s) * -1)}.border-m ::slotted([slot="anchor-full"]){right:calc(var(--px-border-m) * -1);left:calc(var(--px-border-m) * -1)}.border-l ::slotted([slot="anchor-full"]){right:calc(var(--px-border-l) * -1);left:calc(var(--px-border-l) * -1)}@media only screen and (min-width: 768px) and (max-width: 1024px){.container{background-color:var(--background-color--tablet, var(--background-color));background-image:var( --background-gradient--tablet, var(--background-gradient) )}.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)}.padding-2xs--tablet{padding:var(--px-padding-2xs)}.padding-xs--tablet{padding:var(--px-padding-xs)}.padding-s--tablet{padding:var(--px-padding-s)}.padding-m--tablet{padding:var(--px-padding-m)}.padding-l--tablet{padding:var(--px-padding-l)}.padding-xl--tablet{padding:var(--px-padding-xl)}.padding-none--tablet{padding:var(--px-padding-none)}.padding-block-2xs--tablet{padding-block:var(--px-padding-2xs)}.padding-block-xs--tablet{padding-block:var(--px-padding-xs)}.padding-block-s--tablet{padding-block:var(--px-padding-s)}.padding-block-m--tablet{padding-block:var(--px-padding-m)}.padding-block-l--tablet{padding-block:var(--px-padding-l)}.padding-block-xl--tablet{padding-block:var(--px-padding-xl)}.padding-block-none--tablet{padding-block:var(--px-padding-none)}.padding-inline-2xs--tablet{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--tablet{padding-inline:var(--px-padding-xs)}.padding-inline-s--tablet{padding-inline:var(--px-padding-s)}.padding-inline-m--tablet{padding-inline:var(--px-padding-m)}.padding-inline-l--tablet{padding-inline:var(--px-padding-l)}.padding-inline-xl--tablet{padding-inline:var(--px-padding-xl)}.padding-inline-none--tablet{padding-inline:var(--px-padding-none)}.padding-top-2xs--tablet{padding-top:var(--px-padding-2xs)}.padding-top-xs--tablet{padding-top:var(--px-padding-xs)}.padding-top-s--tablet{padding-top:var(--px-padding-s)}.padding-top-m--tablet{padding-top:var(--px-padding-m)}.padding-top-l--tablet{padding-top:var(--px-padding-l)}.padding-top-xl--tablet{padding-top:var(--px-padding-xl)}.padding-top-none--tablet{padding-top:var(--px-padding-none)}.padding-right-2xs--tablet{padding-right:var(--px-padding-2xs)}.padding-right-xs--tablet{padding-right:var(--px-padding-xs)}.padding-right-s--tablet{padding-right:var(--px-padding-s)}.padding-right-m--tablet{padding-right:var(--px-padding-m)}.padding-right-l--tablet{padding-right:var(--px-padding-l)}.padding-right-xl--tablet{padding-right:var(--px-padding-xl)}.padding-right-none--tablet{padding-right:var(--px-padding-none)}.padding-bottom-2xs--tablet{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--tablet{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--tablet{padding-bottom:var(--px-padding-s)}.padding-bottom-m--tablet{padding-bottom:var(--px-padding-m)}.padding-bottom-l--tablet{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--tablet{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--tablet{padding-bottom:var(--px-padding-none)}.padding-left-2xs--tablet{padding-left:var(--px-padding-2xs)}.padding-left-xs--tablet{padding-left:var(--px-padding-xs)}.padding-left-s--tablet{padding-left:var(--px-padding-s)}.padding-left-m--tablet{padding-left:var(--px-padding-m)}.padding-left-l--tablet{padding-left:var(--px-padding-l)}.padding-left-xl--tablet{padding-left:var(--px-padding-xl)}.padding-left-none--tablet{padding-left:var(--px-padding-none)}}@media only screen and (min-width: 1025px){.container{background-color:var(--background-color--laptop, var(--background-color));background-image:var( --background-gradient--laptop, var(--background-gradient) )}.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)}.padding-2xs--laptop{padding:var(--px-padding-2xs)}.padding-xs--laptop{padding:var(--px-padding-xs)}.padding-s--laptop{padding:var(--px-padding-s)}.padding-m--laptop{padding:var(--px-padding-m)}.padding-l--laptop{padding:var(--px-padding-l)}.padding-xl--laptop{padding:var(--px-padding-xl)}.padding-none--laptop{padding:var(--px-padding-none)}.padding-block-2xs--laptop{padding-block:var(--px-padding-2xs)}.padding-block-xs--laptop{padding-block:var(--px-padding-xs)}.padding-block-s--laptop{padding-block:var(--px-padding-s)}.padding-block-m--laptop{padding-block:var(--px-padding-m)}.padding-block-l--laptop{padding-block:var(--px-padding-l)}.padding-block-xl--laptop{padding-block:var(--px-padding-xl)}.padding-block-none--laptop{padding-block:var(--px-padding-none)}.padding-inline-2xs--laptop{padding-inline:var(--px-padding-2xs)}.padding-inline-xs--laptop{padding-inline:var(--px-padding-xs)}.padding-inline-s--laptop{padding-inline:var(--px-padding-s)}.padding-inline-m--laptop{padding-inline:var(--px-padding-m)}.padding-inline-l--laptop{padding-inline:var(--px-padding-l)}.padding-inline-xl--laptop{padding-inline:var(--px-padding-xl)}.padding-inline-none--laptop{padding-inline:var(--px-padding-none)}.padding-top-2xs--laptop{padding-top:var(--px-padding-2xs)}.padding-top-xs--laptop{padding-top:var(--px-padding-xs)}.padding-top-s--laptop{padding-top:var(--px-padding-s)}.padding-top-m--laptop{padding-top:var(--px-padding-m)}.padding-top-l--laptop{padding-top:var(--px-padding-l)}.padding-top-xl--laptop{padding-top:var(--px-padding-xl)}.padding-top-none--laptop{padding-top:var(--px-padding-none)}.padding-right-2xs--laptop{padding-right:var(--px-padding-2xs)}.padding-right-xs--laptop{padding-right:var(--px-padding-xs)}.padding-right-s--laptop{padding-right:var(--px-padding-s)}.padding-right-m--laptop{padding-right:var(--px-padding-m)}.padding-right-l--laptop{padding-right:var(--px-padding-l)}.padding-right-xl--laptop{padding-right:var(--px-padding-xl)}.padding-right-none--laptop{padding-right:var(--px-padding-none)}.padding-bottom-2xs--laptop{padding-bottom:var(--px-padding-2xs)}.padding-bottom-xs--laptop{padding-bottom:var(--px-padding-xs)}.padding-bottom-s--laptop{padding-bottom:var(--px-padding-s)}.padding-bottom-m--laptop{padding-bottom:var(--px-padding-m)}.padding-bottom-l--laptop{padding-bottom:var(--px-padding-l)}.padding-bottom-xl--laptop{padding-bottom:var(--px-padding-xl)}.padding-bottom-none--laptop{padding-bottom:var(--px-padding-none)}.padding-left-2xs--laptop{padding-left:var(--px-padding-2xs)}.padding-left-xs--laptop{padding-left:var(--px-padding-xs)}.padding-left-s--laptop{padding-left:var(--px-padding-s)}.padding-left-m--laptop{padding-left:var(--px-padding-m)}.padding-left-l--laptop{padding-left:var(--px-padding-l)}.padding-left-xl--laptop{padding-left:var(--px-padding-xl)}.padding-left-none--laptop{padding-left:var(--px-padding-none)}}';
|
|
1300
1281
|
const containerStyles = new CSSStyleSheet();
|
|
1301
1282
|
containerStyles.replaceSync(containerCss);
|
|
1302
1283
|
const anchorValues = ["anchor-right", "anchor-left", "anchor-full"];
|
|
1303
|
-
const noBorderRadiusValues = ["", "all", "top", "right", "bottom", "left"];
|
|
1304
1284
|
const bgImgSizeValues = ["", "cover", "contain", "default"];
|
|
1305
1285
|
const _Container = class _Container extends PxElement {
|
|
1306
1286
|
constructor() {
|
|
@@ -1312,14 +1292,26 @@ const _Container = class _Container extends PxElement {
|
|
|
1312
1292
|
<slot></slot>
|
|
1313
1293
|
</div>`;
|
|
1314
1294
|
this.onWindowResize = () => {
|
|
1315
|
-
if (this.hasAttribute("
|
|
1316
|
-
this.loadImg("
|
|
1295
|
+
if (this.hasAttribute("background-image")) {
|
|
1296
|
+
this.loadImg("background-image", this.getAttribute("background-image"));
|
|
1317
1297
|
}
|
|
1318
|
-
if (this.hasAttribute("
|
|
1319
|
-
this.loadImg(
|
|
1298
|
+
if (this.hasAttribute("background-image--mobile")) {
|
|
1299
|
+
this.loadImg(
|
|
1300
|
+
"background-image--mobile",
|
|
1301
|
+
this.getAttribute("background-image--mobile")
|
|
1302
|
+
);
|
|
1303
|
+
}
|
|
1304
|
+
if (this.hasAttribute("background-image--tablet")) {
|
|
1305
|
+
this.loadImg(
|
|
1306
|
+
"background-image--tablet",
|
|
1307
|
+
this.getAttribute("background-image--tablet")
|
|
1308
|
+
);
|
|
1320
1309
|
}
|
|
1321
|
-
if (this.hasAttribute("
|
|
1322
|
-
this.loadImg(
|
|
1310
|
+
if (this.hasAttribute("background-image--laptop")) {
|
|
1311
|
+
this.loadImg(
|
|
1312
|
+
"background-image--laptop",
|
|
1313
|
+
this.getAttribute("background-image--laptop")
|
|
1314
|
+
);
|
|
1323
1315
|
}
|
|
1324
1316
|
};
|
|
1325
1317
|
this.shadowRoot.innerHTML = this.template();
|
|
@@ -1328,23 +1320,54 @@ const _Container = class _Container extends PxElement {
|
|
|
1328
1320
|
return [
|
|
1329
1321
|
...super.observedAttributes,
|
|
1330
1322
|
"padding",
|
|
1331
|
-
"
|
|
1332
|
-
"
|
|
1333
|
-
"
|
|
1334
|
-
"
|
|
1335
|
-
"
|
|
1336
|
-
"
|
|
1323
|
+
"padding-inline",
|
|
1324
|
+
"padding-block",
|
|
1325
|
+
"padding-top",
|
|
1326
|
+
"padding-right",
|
|
1327
|
+
"padding-bottom",
|
|
1328
|
+
"padding-left",
|
|
1329
|
+
"padding--mobile",
|
|
1330
|
+
"padding-inline--mobile",
|
|
1331
|
+
"padding-block--mobile",
|
|
1332
|
+
"padding-top--mobile",
|
|
1333
|
+
"padding-right--mobile",
|
|
1334
|
+
"padding-bottom--mobile",
|
|
1335
|
+
"padding-left--mobile",
|
|
1336
|
+
"padding--tablet",
|
|
1337
|
+
"padding-inline--tablet",
|
|
1338
|
+
"padding-block--tablet",
|
|
1339
|
+
"padding-top--tablet",
|
|
1340
|
+
"padding-right--tablet",
|
|
1341
|
+
"padding-bottom--tablet",
|
|
1342
|
+
"padding-left--tablet",
|
|
1343
|
+
"padding--laptop",
|
|
1344
|
+
"padding-inline--laptop",
|
|
1345
|
+
"padding-block--laptop",
|
|
1346
|
+
"padding-top--laptop",
|
|
1347
|
+
"padding-right--laptop",
|
|
1348
|
+
"padding-bottom--laptop",
|
|
1349
|
+
"padding-left--laptop",
|
|
1337
1350
|
"border",
|
|
1338
|
-
"
|
|
1339
|
-
"
|
|
1340
|
-
"
|
|
1341
|
-
"
|
|
1342
|
-
"
|
|
1343
|
-
"
|
|
1344
|
-
"
|
|
1345
|
-
"
|
|
1346
|
-
"
|
|
1347
|
-
"
|
|
1351
|
+
"border-radius",
|
|
1352
|
+
"no-border-radius",
|
|
1353
|
+
"no-border-radius--mobile",
|
|
1354
|
+
"no-border-radius--tablet",
|
|
1355
|
+
"no-border-radius--laptop",
|
|
1356
|
+
"background-color",
|
|
1357
|
+
"background-color--mobile",
|
|
1358
|
+
"background-color--tablet",
|
|
1359
|
+
"background-color--laptop",
|
|
1360
|
+
"background-gradient",
|
|
1361
|
+
"background-gradient--mobile",
|
|
1362
|
+
"background-gradient--tablet",
|
|
1363
|
+
"background-gradient--laptop",
|
|
1364
|
+
"background-image",
|
|
1365
|
+
"background-image--mobile",
|
|
1366
|
+
"background-image--tablet",
|
|
1367
|
+
"background-image--laptop",
|
|
1368
|
+
"background-size",
|
|
1369
|
+
"background-position",
|
|
1370
|
+
"box-shadow",
|
|
1348
1371
|
"inverted"
|
|
1349
1372
|
];
|
|
1350
1373
|
}
|
|
@@ -1355,40 +1378,166 @@ const _Container = class _Container extends PxElement {
|
|
|
1355
1378
|
this.setAttribute("padding", value);
|
|
1356
1379
|
}
|
|
1357
1380
|
get paddingBlock() {
|
|
1358
|
-
return this.getAttribute("
|
|
1381
|
+
return this.getAttribute("padding-block");
|
|
1359
1382
|
}
|
|
1360
1383
|
set paddingBlock(value) {
|
|
1361
|
-
this.setAttribute("
|
|
1384
|
+
this.setAttribute("padding-block", value);
|
|
1362
1385
|
}
|
|
1363
1386
|
get paddingInline() {
|
|
1364
|
-
return this.getAttribute("
|
|
1387
|
+
return this.getAttribute("padding-inline");
|
|
1365
1388
|
}
|
|
1366
1389
|
set paddingInline(value) {
|
|
1367
|
-
this.setAttribute("
|
|
1390
|
+
this.setAttribute("padding-inline", value);
|
|
1368
1391
|
}
|
|
1369
1392
|
get paddingTop() {
|
|
1370
|
-
return this.getAttribute("
|
|
1393
|
+
return this.getAttribute("padding-top");
|
|
1371
1394
|
}
|
|
1372
1395
|
set paddingTop(value) {
|
|
1373
|
-
this.setAttribute("
|
|
1396
|
+
this.setAttribute("padding-top", value);
|
|
1374
1397
|
}
|
|
1375
1398
|
get paddingRight() {
|
|
1376
|
-
return this.getAttribute("
|
|
1399
|
+
return this.getAttribute("padding-right");
|
|
1377
1400
|
}
|
|
1378
1401
|
set paddingRight(value) {
|
|
1379
|
-
this.setAttribute("
|
|
1402
|
+
this.setAttribute("padding-right", value);
|
|
1380
1403
|
}
|
|
1381
1404
|
get paddingBottom() {
|
|
1382
|
-
return this.getAttribute("
|
|
1405
|
+
return this.getAttribute("padding-bottom");
|
|
1383
1406
|
}
|
|
1384
1407
|
set paddingBottom(value) {
|
|
1385
|
-
this.setAttribute("
|
|
1408
|
+
this.setAttribute("padding-bottom", value);
|
|
1386
1409
|
}
|
|
1387
1410
|
get paddingLeft() {
|
|
1388
|
-
return this.getAttribute("
|
|
1411
|
+
return this.getAttribute("padding-left");
|
|
1389
1412
|
}
|
|
1390
1413
|
set paddingLeft(value) {
|
|
1391
|
-
this.setAttribute("
|
|
1414
|
+
this.setAttribute("padding-left", value);
|
|
1415
|
+
}
|
|
1416
|
+
get paddingMobile() {
|
|
1417
|
+
return this.getAttribute("padding--mobile");
|
|
1418
|
+
}
|
|
1419
|
+
set paddingMobile(value) {
|
|
1420
|
+
this.setAttribute("padding--mobile", value);
|
|
1421
|
+
}
|
|
1422
|
+
get paddingBlockMobile() {
|
|
1423
|
+
return this.getAttribute("padding-block--mobile");
|
|
1424
|
+
}
|
|
1425
|
+
set paddingBlockMobile(value) {
|
|
1426
|
+
this.setAttribute("padding-block--mobile", value);
|
|
1427
|
+
}
|
|
1428
|
+
get paddingInlineMobile() {
|
|
1429
|
+
return this.getAttribute("padding-inline--mobile");
|
|
1430
|
+
}
|
|
1431
|
+
set paddingInlineMobile(value) {
|
|
1432
|
+
this.setAttribute("padding-inline--mobile", value);
|
|
1433
|
+
}
|
|
1434
|
+
get paddingTopMobile() {
|
|
1435
|
+
return this.getAttribute("padding-top--mobile");
|
|
1436
|
+
}
|
|
1437
|
+
set paddingTopMobile(value) {
|
|
1438
|
+
this.setAttribute("padding-top--mobile", value);
|
|
1439
|
+
}
|
|
1440
|
+
get paddingRightMobile() {
|
|
1441
|
+
return this.getAttribute("padding-right--mobile");
|
|
1442
|
+
}
|
|
1443
|
+
set paddingRightMobile(value) {
|
|
1444
|
+
this.setAttribute("padding-right--mobile", value);
|
|
1445
|
+
}
|
|
1446
|
+
get paddingBottomMobile() {
|
|
1447
|
+
return this.getAttribute("padding-bottom--mobile");
|
|
1448
|
+
}
|
|
1449
|
+
set paddingBottomMobile(value) {
|
|
1450
|
+
this.setAttribute("padding-bottom--mobile", value);
|
|
1451
|
+
}
|
|
1452
|
+
get paddingLeftMobile() {
|
|
1453
|
+
return this.getAttribute("padding-left--mobile");
|
|
1454
|
+
}
|
|
1455
|
+
set paddingLeftMobile(value) {
|
|
1456
|
+
this.setAttribute("padding-left--mobile", value);
|
|
1457
|
+
}
|
|
1458
|
+
get paddingTablet() {
|
|
1459
|
+
return this.getAttribute("padding--tablet");
|
|
1460
|
+
}
|
|
1461
|
+
set paddingTablet(value) {
|
|
1462
|
+
this.setAttribute("padding--tablet", value);
|
|
1463
|
+
}
|
|
1464
|
+
get paddingBlockTablet() {
|
|
1465
|
+
return this.getAttribute("padding-block--tablet");
|
|
1466
|
+
}
|
|
1467
|
+
set paddingBlockTablet(value) {
|
|
1468
|
+
this.setAttribute("padding-block--tablet", value);
|
|
1469
|
+
}
|
|
1470
|
+
get paddingInlineTablet() {
|
|
1471
|
+
return this.getAttribute("padding-inline--tablet");
|
|
1472
|
+
}
|
|
1473
|
+
set paddingInlineTablet(value) {
|
|
1474
|
+
this.setAttribute("padding-inline--tablet", value);
|
|
1475
|
+
}
|
|
1476
|
+
get paddingTopTablet() {
|
|
1477
|
+
return this.getAttribute("padding-top--tablet");
|
|
1478
|
+
}
|
|
1479
|
+
set paddingTopTablet(value) {
|
|
1480
|
+
this.setAttribute("padding-top--tablet", value);
|
|
1481
|
+
}
|
|
1482
|
+
get paddingRightTablet() {
|
|
1483
|
+
return this.getAttribute("padding-right--tablet");
|
|
1484
|
+
}
|
|
1485
|
+
set paddingRightTablet(value) {
|
|
1486
|
+
this.setAttribute("padding-right--tablet", value);
|
|
1487
|
+
}
|
|
1488
|
+
get paddingBottomTablet() {
|
|
1489
|
+
return this.getAttribute("padding-bottom--tablet");
|
|
1490
|
+
}
|
|
1491
|
+
set paddingBottomTablet(value) {
|
|
1492
|
+
this.setAttribute("padding-bottom--tablet", value);
|
|
1493
|
+
}
|
|
1494
|
+
get paddingLeftTablet() {
|
|
1495
|
+
return this.getAttribute("padding-left--tablet");
|
|
1496
|
+
}
|
|
1497
|
+
set paddingLeftTablet(value) {
|
|
1498
|
+
this.setAttribute("padding-left--tablet", value);
|
|
1499
|
+
}
|
|
1500
|
+
get paddingLaptop() {
|
|
1501
|
+
return this.getAttribute("padding--laptop");
|
|
1502
|
+
}
|
|
1503
|
+
set paddingLaptop(value) {
|
|
1504
|
+
this.setAttribute("padding--laptop", value);
|
|
1505
|
+
}
|
|
1506
|
+
get paddingBlockLaptop() {
|
|
1507
|
+
return this.getAttribute("padding-block--laptop");
|
|
1508
|
+
}
|
|
1509
|
+
set paddingBlockLaptop(value) {
|
|
1510
|
+
this.setAttribute("padding-block--laptop", value);
|
|
1511
|
+
}
|
|
1512
|
+
get paddingInlineLaptop() {
|
|
1513
|
+
return this.getAttribute("padding-inline--laptop");
|
|
1514
|
+
}
|
|
1515
|
+
set paddingInlineLaptop(value) {
|
|
1516
|
+
this.setAttribute("padding-inline--laptop", value);
|
|
1517
|
+
}
|
|
1518
|
+
get paddingTopLaptop() {
|
|
1519
|
+
return this.getAttribute("padding-top--laptop");
|
|
1520
|
+
}
|
|
1521
|
+
set paddingTopLaptop(value) {
|
|
1522
|
+
this.setAttribute("padding-top--laptop", value);
|
|
1523
|
+
}
|
|
1524
|
+
get paddingRightLaptop() {
|
|
1525
|
+
return this.getAttribute("padding-right--laptop");
|
|
1526
|
+
}
|
|
1527
|
+
set paddingRightLaptop(value) {
|
|
1528
|
+
this.setAttribute("padding-right--laptop", value);
|
|
1529
|
+
}
|
|
1530
|
+
get paddingBottomLaptop() {
|
|
1531
|
+
return this.getAttribute("padding-bottom--laptop");
|
|
1532
|
+
}
|
|
1533
|
+
set paddingBottomLaptop(value) {
|
|
1534
|
+
this.setAttribute("padding-bottom--laptop", value);
|
|
1535
|
+
}
|
|
1536
|
+
get paddingLeftLaptop() {
|
|
1537
|
+
return this.getAttribute("padding-left--laptop");
|
|
1538
|
+
}
|
|
1539
|
+
set paddingLeftLaptop(value) {
|
|
1540
|
+
this.setAttribute("padding-left--laptop", value);
|
|
1392
1541
|
}
|
|
1393
1542
|
get border() {
|
|
1394
1543
|
return this.getAttribute("border");
|
|
@@ -1397,64 +1546,124 @@ const _Container = class _Container extends PxElement {
|
|
|
1397
1546
|
this.setAttribute("border", value);
|
|
1398
1547
|
}
|
|
1399
1548
|
get borderRadius() {
|
|
1400
|
-
return this.getAttribute("
|
|
1549
|
+
return this.getAttribute("border-radius");
|
|
1401
1550
|
}
|
|
1402
1551
|
set borderRadius(value) {
|
|
1403
|
-
this.setAttribute("
|
|
1552
|
+
this.setAttribute("border-radius", value);
|
|
1404
1553
|
}
|
|
1405
1554
|
get noBorderRadius() {
|
|
1406
|
-
return this.getAttribute("
|
|
1555
|
+
return this.getAttribute("no-border-radius");
|
|
1407
1556
|
}
|
|
1408
1557
|
set noBorderRadius(value) {
|
|
1409
|
-
this.setAttribute("
|
|
1558
|
+
this.setAttribute("no-border-radius", value);
|
|
1559
|
+
}
|
|
1560
|
+
get noBorderRadiusMobile() {
|
|
1561
|
+
return this.getAttribute("no-border-radius--mobile");
|
|
1562
|
+
}
|
|
1563
|
+
set noBorderRadiusMobile(value) {
|
|
1564
|
+
this.setAttribute("no-border-radius--mobile", value);
|
|
1565
|
+
}
|
|
1566
|
+
get noBorderRadiusTablet() {
|
|
1567
|
+
return this.getAttribute("no-border-radius--tablet");
|
|
1568
|
+
}
|
|
1569
|
+
set noBorderRadiusTablet(value) {
|
|
1570
|
+
this.setAttribute("no-border-radius--tablet", value);
|
|
1571
|
+
}
|
|
1572
|
+
get noBorderRadiusLaptop() {
|
|
1573
|
+
return this.getAttribute("no-border-radius--laptop");
|
|
1574
|
+
}
|
|
1575
|
+
set noBorderRadiusLaptop(value) {
|
|
1576
|
+
this.setAttribute("no-border-radius--laptop", value);
|
|
1410
1577
|
}
|
|
1411
1578
|
get bgColor() {
|
|
1412
|
-
return this.getAttribute("
|
|
1579
|
+
return this.getAttribute("background-color");
|
|
1413
1580
|
}
|
|
1414
1581
|
set bgColor(value) {
|
|
1415
|
-
this.setAttribute("
|
|
1582
|
+
this.setAttribute("background-color", value);
|
|
1583
|
+
}
|
|
1584
|
+
get bgColorMobile() {
|
|
1585
|
+
return this.getAttribute("background-color--mobile");
|
|
1586
|
+
}
|
|
1587
|
+
set bgColorMobile(value) {
|
|
1588
|
+
this.setAttribute("background-color--mobile", value);
|
|
1589
|
+
}
|
|
1590
|
+
get bgColorTablet() {
|
|
1591
|
+
return this.getAttribute("background-color--tablet");
|
|
1592
|
+
}
|
|
1593
|
+
set bgColorTablet(value) {
|
|
1594
|
+
this.setAttribute("background-color--tablet", value);
|
|
1595
|
+
}
|
|
1596
|
+
get bgColorLaptop() {
|
|
1597
|
+
return this.getAttribute("background-color--laptop");
|
|
1598
|
+
}
|
|
1599
|
+
set bgColorLaptop(value) {
|
|
1600
|
+
this.setAttribute("background-color--laptop", value);
|
|
1416
1601
|
}
|
|
1417
1602
|
get gradient() {
|
|
1418
|
-
return this.getAttribute("gradient");
|
|
1603
|
+
return this.getAttribute("background-gradient");
|
|
1419
1604
|
}
|
|
1420
1605
|
set gradient(value) {
|
|
1421
|
-
this.setAttribute("gradient", value);
|
|
1606
|
+
this.setAttribute("background-gradient", value);
|
|
1607
|
+
}
|
|
1608
|
+
get gradientMobile() {
|
|
1609
|
+
return this.getAttribute("background-gradient--mobile");
|
|
1610
|
+
}
|
|
1611
|
+
set gradientMobile(value) {
|
|
1612
|
+
this.setAttribute("background-gradient--mobile", value);
|
|
1613
|
+
}
|
|
1614
|
+
get gradientTablet() {
|
|
1615
|
+
return this.getAttribute("background-gradient--tablet");
|
|
1616
|
+
}
|
|
1617
|
+
set gradientTablet(value) {
|
|
1618
|
+
this.setAttribute("background-gradient--tablet", value);
|
|
1619
|
+
}
|
|
1620
|
+
get gradientLaptop() {
|
|
1621
|
+
return this.getAttribute("background-gradient--laptop");
|
|
1622
|
+
}
|
|
1623
|
+
set gradientLaptop(value) {
|
|
1624
|
+
this.setAttribute("background-gradient--laptop", value);
|
|
1625
|
+
}
|
|
1626
|
+
get bgImg() {
|
|
1627
|
+
return this.getAttribute("background-image");
|
|
1628
|
+
}
|
|
1629
|
+
set bgImg(value) {
|
|
1630
|
+
this.setAttribute("background-image", value);
|
|
1422
1631
|
}
|
|
1423
1632
|
get bgImgMobile() {
|
|
1424
|
-
return this.getAttribute("
|
|
1633
|
+
return this.getAttribute("background-image--mobile");
|
|
1425
1634
|
}
|
|
1426
1635
|
set bgImgMobile(value) {
|
|
1427
|
-
this.setAttribute("
|
|
1636
|
+
this.setAttribute("background-image--mobile", value);
|
|
1428
1637
|
}
|
|
1429
1638
|
get bgImgTablet() {
|
|
1430
|
-
return this.getAttribute("
|
|
1639
|
+
return this.getAttribute("background-image--tablet");
|
|
1431
1640
|
}
|
|
1432
1641
|
set bgImgTablet(value) {
|
|
1433
|
-
this.setAttribute("
|
|
1642
|
+
this.setAttribute("background-image--tablet", value);
|
|
1434
1643
|
}
|
|
1435
1644
|
get bgImgLaptop() {
|
|
1436
|
-
return this.getAttribute("
|
|
1645
|
+
return this.getAttribute("background-image--laptop");
|
|
1437
1646
|
}
|
|
1438
1647
|
set bgImgLaptop(value) {
|
|
1439
|
-
this.setAttribute("
|
|
1648
|
+
this.setAttribute("background-image--laptop", value);
|
|
1440
1649
|
}
|
|
1441
1650
|
get bgImgSize() {
|
|
1442
|
-
return this.getAttribute("
|
|
1651
|
+
return this.getAttribute("background-size");
|
|
1443
1652
|
}
|
|
1444
1653
|
set bgImgSize(value) {
|
|
1445
|
-
this.setAttribute("
|
|
1654
|
+
this.setAttribute("background-size", value);
|
|
1446
1655
|
}
|
|
1447
1656
|
get bgImgPosition() {
|
|
1448
|
-
return this.getAttribute("
|
|
1657
|
+
return this.getAttribute("background-position");
|
|
1449
1658
|
}
|
|
1450
1659
|
set bgImgPosition(value) {
|
|
1451
|
-
this.setAttribute("
|
|
1660
|
+
this.setAttribute("background-position", value);
|
|
1452
1661
|
}
|
|
1453
1662
|
get shadow() {
|
|
1454
|
-
return this.getAttribute("shadow");
|
|
1663
|
+
return this.getAttribute("box-shadow");
|
|
1455
1664
|
}
|
|
1456
1665
|
set shadow(value) {
|
|
1457
|
-
this.setAttribute("shadow", value);
|
|
1666
|
+
this.setAttribute("box-shadow", value);
|
|
1458
1667
|
}
|
|
1459
1668
|
get inverted() {
|
|
1460
1669
|
return this.getAttribute("inverted");
|
|
@@ -1463,8 +1672,12 @@ const _Container = class _Container extends PxElement {
|
|
|
1463
1672
|
this.setAttribute("inverted", value);
|
|
1464
1673
|
}
|
|
1465
1674
|
connectedCallback() {
|
|
1466
|
-
var _a, _b, _c;
|
|
1675
|
+
var _a, _b, _c, _d;
|
|
1467
1676
|
super.connectedCallback();
|
|
1677
|
+
this.style.setProperty(
|
|
1678
|
+
"--background-color",
|
|
1679
|
+
"var(--px-color-bg-container-rich-inverted)"
|
|
1680
|
+
);
|
|
1468
1681
|
const anchorSlot = this.querySelector("[slot]");
|
|
1469
1682
|
if (anchorSlot) {
|
|
1470
1683
|
if (anchorValues.includes(anchorSlot.getAttribute("slot"))) {
|
|
@@ -1478,10 +1691,10 @@ const _Container = class _Container extends PxElement {
|
|
|
1478
1691
|
this.$el.style.height = "100%";
|
|
1479
1692
|
}
|
|
1480
1693
|
}
|
|
1481
|
-
if (((_c = this.parentElement) == null ? void 0 : _c.localName) === "px-grid-item") {
|
|
1694
|
+
if (((_c = this.parentElement) == null ? void 0 : _c.localName) === "px-grid-item" || ((_d = this.parentElement) == null ? void 0 : _d.localName) === "px-a") {
|
|
1482
1695
|
this.$el.style.height = "100%";
|
|
1483
1696
|
}
|
|
1484
|
-
if (this.hasAttribute("
|
|
1697
|
+
if (this.hasAttribute("background-image") || this.hasAttribute("background-image--mobile") || this.hasAttribute("background-image--tablet") || this.hasAttribute("background-image--laptop")) {
|
|
1485
1698
|
window.addEventListener("resize", this.onWindowResize);
|
|
1486
1699
|
}
|
|
1487
1700
|
}
|
|
@@ -1492,18 +1705,39 @@ const _Container = class _Container extends PxElement {
|
|
|
1492
1705
|
if (oldValue !== newValue) {
|
|
1493
1706
|
switch (attrName) {
|
|
1494
1707
|
case "padding":
|
|
1495
|
-
case "
|
|
1496
|
-
case "
|
|
1497
|
-
case "
|
|
1498
|
-
case "
|
|
1499
|
-
case "
|
|
1500
|
-
case "
|
|
1708
|
+
case "padding-block":
|
|
1709
|
+
case "padding-inline":
|
|
1710
|
+
case "padding-top":
|
|
1711
|
+
case "padding-right":
|
|
1712
|
+
case "padding-bottom":
|
|
1713
|
+
case "padding-left":
|
|
1714
|
+
case "padding--mobile":
|
|
1715
|
+
case "padding-block--mobile":
|
|
1716
|
+
case "padding-inline--mobile":
|
|
1717
|
+
case "padding-top--mobile":
|
|
1718
|
+
case "padding-right--mobile":
|
|
1719
|
+
case "padding-bottom--mobile":
|
|
1720
|
+
case "padding-left--mobile":
|
|
1721
|
+
case "padding--tablet":
|
|
1722
|
+
case "padding-block--tablet":
|
|
1723
|
+
case "padding-inline--tablet":
|
|
1724
|
+
case "padding-top--tablet":
|
|
1725
|
+
case "padding-right--tablet":
|
|
1726
|
+
case "padding-bottom--tablet":
|
|
1727
|
+
case "padding-left--tablet":
|
|
1728
|
+
case "padding--laptop":
|
|
1729
|
+
case "padding-block--laptop":
|
|
1730
|
+
case "padding-inline--laptop":
|
|
1731
|
+
case "padding-top--laptop":
|
|
1732
|
+
case "padding-right--laptop":
|
|
1733
|
+
case "padding-bottom--laptop":
|
|
1734
|
+
case "padding-left--laptop":
|
|
1501
1735
|
this.updateAttribute(attrName, oldValue, newValue, paddingValues);
|
|
1502
1736
|
break;
|
|
1503
1737
|
case "border":
|
|
1504
1738
|
this.updateAttribute(attrName, oldValue, newValue, borderValues);
|
|
1505
1739
|
break;
|
|
1506
|
-
case "
|
|
1740
|
+
case "border-radius":
|
|
1507
1741
|
this.updateAttribute(
|
|
1508
1742
|
attrName,
|
|
1509
1743
|
oldValue,
|
|
@@ -1511,37 +1745,47 @@ const _Container = class _Container extends PxElement {
|
|
|
1511
1745
|
borderRadiusValues
|
|
1512
1746
|
);
|
|
1513
1747
|
break;
|
|
1514
|
-
case "
|
|
1515
|
-
|
|
1748
|
+
case "no-border-radius":
|
|
1749
|
+
case "no-border-radius--mobile":
|
|
1750
|
+
case "no-border-radius--tablet":
|
|
1751
|
+
case "no-border-radius--laptop":
|
|
1752
|
+
this.updateNoBorderRadius(
|
|
1516
1753
|
attrName,
|
|
1517
1754
|
oldValue,
|
|
1518
1755
|
newValue,
|
|
1519
1756
|
noBorderRadiusValues
|
|
1520
1757
|
);
|
|
1521
1758
|
break;
|
|
1522
|
-
case "
|
|
1523
|
-
|
|
1759
|
+
case "background-color":
|
|
1760
|
+
case "background-color--mobile":
|
|
1761
|
+
case "background-color--tablet":
|
|
1762
|
+
case "background-color--laptop":
|
|
1763
|
+
this.updateBgColor(attrName, newValue);
|
|
1524
1764
|
break;
|
|
1525
|
-
case "gradient":
|
|
1526
|
-
|
|
1765
|
+
case "background-gradient":
|
|
1766
|
+
case "background-gradient--mobile":
|
|
1767
|
+
case "background-gradient--tablet":
|
|
1768
|
+
case "background-gradient--laptop":
|
|
1769
|
+
this.updateGradient(attrName, newValue);
|
|
1527
1770
|
break;
|
|
1528
|
-
case "
|
|
1771
|
+
case "background-size":
|
|
1529
1772
|
this.updateAttribute(attrName, oldValue, newValue, bgImgSizeValues);
|
|
1530
1773
|
break;
|
|
1531
|
-
case "
|
|
1532
|
-
case "
|
|
1533
|
-
case "
|
|
1774
|
+
case "background-image":
|
|
1775
|
+
case "background-image--mobile":
|
|
1776
|
+
case "background-image--tablet":
|
|
1777
|
+
case "background-image--laptop":
|
|
1534
1778
|
if (newValue !== "") {
|
|
1535
1779
|
this.$el.classList.toggle("bgimg");
|
|
1536
1780
|
this.loadImg(attrName, newValue);
|
|
1537
1781
|
}
|
|
1538
1782
|
break;
|
|
1539
|
-
case "
|
|
1783
|
+
case "background-position":
|
|
1540
1784
|
if (newValue !== null && newValue !== "") {
|
|
1541
1785
|
this.$el.style.backgroundPosition = newValue;
|
|
1542
1786
|
}
|
|
1543
1787
|
break;
|
|
1544
|
-
case "shadow":
|
|
1788
|
+
case "box-shadow":
|
|
1545
1789
|
this.updateAttribute(attrName, oldValue, newValue, shadowValues);
|
|
1546
1790
|
break;
|
|
1547
1791
|
default:
|
|
@@ -1551,36 +1795,94 @@ const _Container = class _Container extends PxElement {
|
|
|
1551
1795
|
}
|
|
1552
1796
|
}
|
|
1553
1797
|
loadImg(attrName, newValue) {
|
|
1554
|
-
if (attrName === "
|
|
1798
|
+
if (attrName === "background-image") {
|
|
1799
|
+
this.$el.style.backgroundImage = `url("${newValue}")`;
|
|
1800
|
+
} else if (window.matchMedia("only screen and (max-width: 767px)").matches && attrName === "background-image--mobile") {
|
|
1555
1801
|
this.$el.style.backgroundImage = `url("${newValue}")`;
|
|
1556
|
-
} else if (window.matchMedia(
|
|
1802
|
+
} else if (window.matchMedia(
|
|
1803
|
+
"only screen and (min-width: 768px) and (max-width: 1024px)"
|
|
1804
|
+
).matches && attrName === "background-image--tablet") {
|
|
1557
1805
|
this.$el.style.backgroundImage = `url("${newValue}")`;
|
|
1558
|
-
} else if (window.matchMedia("only screen and (min-width: 1025px)").matches && attrName === "
|
|
1806
|
+
} else if (window.matchMedia("only screen and (min-width: 1025px)").matches && attrName === "background-image--laptop") {
|
|
1559
1807
|
this.$el.style.backgroundImage = `url("${newValue}")`;
|
|
1560
1808
|
}
|
|
1561
1809
|
}
|
|
1562
|
-
updateGradient(
|
|
1810
|
+
updateGradient(attrName, newValue) {
|
|
1563
1811
|
if (this.checkName(gradientValues, newValue)) {
|
|
1564
|
-
|
|
1812
|
+
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
1813
|
+
attrName = splitResult.attrName;
|
|
1814
|
+
const breakpoint = splitResult.breakpoint;
|
|
1815
|
+
this.$el.style.setProperty(
|
|
1816
|
+
`--${attrName}${breakpoint}`,
|
|
1817
|
+
`linear-gradient(var(--px-color-bg-gradient-${newValue}))`
|
|
1818
|
+
);
|
|
1565
1819
|
} else {
|
|
1566
1820
|
console.error(
|
|
1567
|
-
`${newValue} is not an allowed gradient value for ${this.$el}`
|
|
1821
|
+
`${newValue} is not an allowed background-gradient value for ${this.$el}`
|
|
1568
1822
|
);
|
|
1569
1823
|
}
|
|
1570
1824
|
}
|
|
1571
|
-
|
|
1572
|
-
if (
|
|
1573
|
-
this
|
|
1825
|
+
updateBgColor(attrName, newValue) {
|
|
1826
|
+
if (this.checkName(bgColorValues, newValue)) {
|
|
1827
|
+
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
1828
|
+
attrName = splitResult.attrName;
|
|
1829
|
+
const breakpoint = splitResult.breakpoint;
|
|
1830
|
+
const mode = this.getAttribute("inverted") !== null ? "inverted" : "default";
|
|
1831
|
+
this.$el.style.setProperty(
|
|
1832
|
+
`--${attrName}${breakpoint}`,
|
|
1833
|
+
`var(--px-color-bg-${newValue}-${mode})`
|
|
1834
|
+
);
|
|
1835
|
+
} else {
|
|
1836
|
+
console.error(
|
|
1837
|
+
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
1838
|
+
);
|
|
1574
1839
|
}
|
|
1575
|
-
|
|
1576
|
-
|
|
1840
|
+
}
|
|
1841
|
+
updateNoBorderRadius(attrName, oldValue, newValue, attrValues) {
|
|
1842
|
+
if (!this.checkName(attrValues, newValue)) {
|
|
1843
|
+
console.error(
|
|
1844
|
+
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
1845
|
+
);
|
|
1846
|
+
} else {
|
|
1847
|
+
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
1848
|
+
attrName = splitResult.attrName;
|
|
1849
|
+
const breakpoint = splitResult.breakpoint;
|
|
1850
|
+
if (oldValue !== null && oldValue !== "") {
|
|
1851
|
+
this.$el.classList.toggle(`${attrName}-${oldValue}${breakpoint}`);
|
|
1852
|
+
}
|
|
1853
|
+
if (newValue !== null && newValue !== "") {
|
|
1854
|
+
this.$el.classList.toggle(`${attrName}-${newValue}${breakpoint}`);
|
|
1855
|
+
}
|
|
1577
1856
|
}
|
|
1857
|
+
}
|
|
1858
|
+
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
1578
1859
|
if (!this.checkName(attrValues, newValue)) {
|
|
1579
1860
|
console.error(
|
|
1580
1861
|
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
1581
1862
|
);
|
|
1863
|
+
} else {
|
|
1864
|
+
const splitResult = this.splitAttrNameFromBreakpoint(attrName);
|
|
1865
|
+
attrName = splitResult.attrName;
|
|
1866
|
+
const breakpoint = splitResult.breakpoint;
|
|
1867
|
+
if (oldValue !== null && oldValue !== "") {
|
|
1868
|
+
this.$el.classList.toggle(`${attrName}-${oldValue}${breakpoint}`);
|
|
1869
|
+
}
|
|
1870
|
+
if (newValue !== null && newValue !== "") {
|
|
1871
|
+
this.$el.classList.toggle(`${attrName}-${newValue}${breakpoint}`);
|
|
1872
|
+
}
|
|
1582
1873
|
}
|
|
1583
1874
|
}
|
|
1875
|
+
splitAttrNameFromBreakpoint(attrName) {
|
|
1876
|
+
let breakpoint = "";
|
|
1877
|
+
if (["--mobile", "--tablet", "--laptop"].some(
|
|
1878
|
+
(suffix) => attrName.includes(suffix)
|
|
1879
|
+
)) {
|
|
1880
|
+
const attrNameSplit = attrName.split("--");
|
|
1881
|
+
attrName = attrNameSplit[0];
|
|
1882
|
+
breakpoint = `--${attrNameSplit[1]}`;
|
|
1883
|
+
}
|
|
1884
|
+
return { attrName, breakpoint };
|
|
1885
|
+
}
|
|
1584
1886
|
checkName(values, value) {
|
|
1585
1887
|
return values.includes(value);
|
|
1586
1888
|
}
|
|
@@ -1588,64 +1890,51 @@ const _Container = class _Container extends PxElement {
|
|
|
1588
1890
|
_Container.nativeName = "div";
|
|
1589
1891
|
let Container = _Container;
|
|
1590
1892
|
customElements.define("px-container", Container);
|
|
1591
|
-
const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-txt-primary-default));font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-txt-primary-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-mobile)}.style-subtitle{font-size:var(--px-text-size-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-base-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-tablet)}.style-title-s{font-size:var(--px-text-size-base-tablet)}.style-subtitle{font-size:var(--px-text-size-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-desktop)}.style-title-s{font-size:var(--px-text-size-base-desktop)}.style-subtitle{font-size:var(--px-text-size-xl-desktop)}}";
|
|
1592
|
-
const typographyCss$1 = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.
|
|
1893
|
+
const headingCss = "h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{margin:0;font-family:var(--px-font-family);color:var(--heading-color-default, var(--px-color-txt-primary-default));text-align:var(--heading-text-align--mobile, left);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700}:host([inverted]) h1,:host([inverted]) .style-title-4xl,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .style-title-3xl,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .style-title-2xl,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .style-title-xl,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .style-title-l,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .style-title-m,:host([inverted]) ::slotted(h6),:host([inverted]) .style-title-s,:host([inverted]) .style-subtitle{color:var(--heading-color-inverted, var(--px-color-txt-primary-inverted))}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s);font-weight:900}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-mobile)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-mobile)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-mobile)}.style-subtitle{font-size:var(--px-text-size-xl-mobile);font-weight:300}.style-title-s{font-size:var(--px-text-size-base-mobile)}@media only screen and (min-width: 768px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--tablet, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-tablet)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-tablet)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-tablet)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-tablet)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-tablet)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-tablet)}.style-title-s{font-size:var(--px-text-size-base-tablet)}.style-subtitle{font-size:var(--px-text-size-xl-tablet)}}@media only screen and (min-width: 1025px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--laptop, left)}h1,.style-title-4xl,::slotted(h1){font-size:var(--px-text-size-5xl-desktop)}h2,.style-title-3xl,::slotted(h2){font-size:var(--px-text-size-4xl-desktop)}h3,.style-title-2xl,::slotted(h3){font-size:var(--px-text-size-3xl-desktop)}h4,.style-title-xl,::slotted(h4){font-size:var(--px-text-size-2xl-desktop)}h5,.style-title-l,::slotted(h5){font-size:var(--px-text-size-l-desktop)}h6,.style-title-m,::slotted(h6){font-size:var(--px-text-size-m-desktop)}.style-title-s{font-size:var(--px-text-size-base-desktop)}.style-subtitle{font-size:var(--px-text-size-xl-desktop)}}@media screen and (min-width: 1441px){h1,.style-title-4xl,::slotted(h1),h2,.style-title-3xl,::slotted(h2),h3,.style-title-2xl,::slotted(h3),h4,.style-title-xl,::slotted(h4),h5,.style-title-l,::slotted(h5),h6,.style-title-m,::slotted(h6),.style-title-s,.style-subtitle{text-align:var(--heading-text-align--desktop, left)}}";
|
|
1894
|
+
const typographyCss$1 = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.font-size-inherit{font-size:inherit;line-height:inherit}.font-size-xs{font-size:var(--px-text-size-xs-mobile)}.font-size-s{font-size:var(--px-text-size-s-mobile)}.font-size-base{font-size:var(--px-text-size-base-mobile)}.font-size-m{font-size:var(--px-text-size-m-mobile)}.font-size-l{font-size:var(--px-text-size-l-mobile)}.font-size-xl{font-size:var(--px-text-size-xl-mobile)}.font-size-2xl{font-size:var(--px-text-size-2xl-mobile)}.font-size-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.font-size-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.font-size-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.font-size-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.font-size-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.font-size-xs{font-size:var(--px-text-size-xs-mobile)}.font-size-s{font-size:var(--px-text-size-s-mobile)}.font-size-base{font-size:var(--px-text-size-base-mobile)}.font-size-m{font-size:var(--px-text-size-m-mobile)}.font-size-l{font-size:var(--px-text-size-l-mobile)}.font-size-xl{font-size:var(--px-text-size-xl-mobile)}.font-size-2xl{font-size:var(--px-text-size-2xl-mobile)}.font-size-3xl{font-size:var(--px-text-size-3xl-mobile)}.font-size-4xl{font-size:var(--px-text-size-4xl-mobile)}.font-size-5xl{font-size:var(--px-text-size-5xl-mobile)}.font-size-6xl{font-size:var(--px-text-size-6xl-mobile)}.font-size-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.font-size-xs{font-size:var(--px-text-size-xs-tablet)}.font-size-s{font-size:var(--px-text-size-s-tablet)}.font-size-base{font-size:var(--px-text-size-base-tablet)}.font-size-m{font-size:var(--px-text-size-m-tablet)}.font-size-l{font-size:var(--px-text-size-l-tablet)}.font-size-xl{font-size:var(--px-text-size-xl-tablet)}.font-size-2xl{font-size:var(--px-text-size-2xl-tablet)}.font-size-3xl{font-size:var(--px-text-size-3xl-tablet)}.font-size-4xl{font-size:var(--px-text-size-4xl-tablet)}.font-size-5xl{font-size:var(--px-text-size-5xl-tablet)}.font-size-6xl{font-size:var(--px-text-size-6xl-tablet)}.font-size-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.font-size-xs{font-size:var(--px-text-size-xs-desktop)}.font-size-s{font-size:var(--px-text-size-s-desktop)}.font-size-base{font-size:var(--px-text-size-base-desktop)}.font-size-m{font-size:var(--px-text-size-m-desktop)}.font-size-l{font-size:var(--px-text-size-l-desktop)}.font-size-xl{font-size:var(--px-text-size-xl-desktop)}.font-size-2xl{font-size:var(--px-text-size-2xl-desktop)}.font-size-3xl{font-size:var(--px-text-size-3xl-desktop)}.font-size-4xl{font-size:var(--px-text-size-4xl-desktop)}.font-size-5xl{font-size:var(--px-text-size-5xl-desktop)}.font-size-6xl{font-size:var(--px-text-size-6xl-desktop)}.font-size-7xl{font-size:var(--px-text-size-7xl-desktop)}}.font-weight-inherit{font-weight:inherit}.font-weight-normal{font-weight:var(--font-weight-regular)}.font-weight-bold{font-weight:var(--font-weight-bold)}.font-weight-extrabold{font-weight:var(--font-weight-extrabold)}.font-weight-light{font-weight:var(--font-weight-light)}";
|
|
1593
1895
|
const headingStyles$2 = new CSSStyleSheet();
|
|
1594
1896
|
headingStyles$2.replaceSync(headingCss);
|
|
1595
|
-
const typographyStyles$
|
|
1596
|
-
typographyStyles$
|
|
1597
|
-
const variantValues$6 = [
|
|
1598
|
-
"",
|
|
1599
|
-
"default",
|
|
1600
|
-
"title-4xl",
|
|
1601
|
-
"title-3xl",
|
|
1602
|
-
"title-2xl",
|
|
1603
|
-
"title-xl",
|
|
1604
|
-
"title-l",
|
|
1605
|
-
"title-m",
|
|
1606
|
-
"title-s",
|
|
1607
|
-
"subtitle"
|
|
1608
|
-
];
|
|
1897
|
+
const typographyStyles$5 = new CSSStyleSheet();
|
|
1898
|
+
typographyStyles$5.replaceSync(typographyCss$1);
|
|
1609
1899
|
class AbstractHeading extends PxElement {
|
|
1610
1900
|
template() {
|
|
1611
1901
|
return `<slot></slot>`;
|
|
1612
1902
|
}
|
|
1613
1903
|
constructor(tagName) {
|
|
1614
|
-
super(headingStyles$2, typographyStyles$
|
|
1904
|
+
super(headingStyles$2, typographyStyles$5);
|
|
1615
1905
|
const $root = document.createElement(tagName);
|
|
1616
1906
|
$root.innerHTML = this.template();
|
|
1617
1907
|
this.shadowRoot.appendChild($root);
|
|
1618
1908
|
}
|
|
1619
1909
|
static get observedAttributes() {
|
|
1620
|
-
return [
|
|
1621
|
-
|
|
1622
|
-
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
set color(value) {
|
|
1632
|
-
this.setAttribute("color", value);
|
|
1633
|
-
}
|
|
1634
|
-
get inverted() {
|
|
1635
|
-
return this.getAttribute("inverted");
|
|
1636
|
-
}
|
|
1637
|
-
set inverted(value) {
|
|
1638
|
-
this.setAttribute("inverted", value);
|
|
1910
|
+
return [
|
|
1911
|
+
...super.observedAttributes,
|
|
1912
|
+
"variant",
|
|
1913
|
+
"color",
|
|
1914
|
+
"text-align",
|
|
1915
|
+
"text-align--mobile",
|
|
1916
|
+
"text-align--tablet",
|
|
1917
|
+
"text-align--laptop",
|
|
1918
|
+
"text-align--desktop",
|
|
1919
|
+
"inverted"
|
|
1920
|
+
];
|
|
1639
1921
|
}
|
|
1640
1922
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
1641
1923
|
if (oldValue !== newValue) {
|
|
1642
1924
|
switch (attrName) {
|
|
1643
1925
|
case "variant":
|
|
1644
|
-
this.updateAttribute(attrName, oldValue, newValue,
|
|
1926
|
+
this.updateAttribute(attrName, oldValue, newValue, headingValues);
|
|
1645
1927
|
break;
|
|
1646
1928
|
case "color":
|
|
1647
1929
|
this.updateColor(oldValue, newValue, colorValues$1);
|
|
1648
1930
|
break;
|
|
1931
|
+
case "text-align":
|
|
1932
|
+
case "text-align--mobile":
|
|
1933
|
+
case "text-align--tablet":
|
|
1934
|
+
case "text-align--laptop":
|
|
1935
|
+
case "text-align--desktop":
|
|
1936
|
+
this.updateTextAlign(attrName, oldValue, newValue, textalignValues);
|
|
1937
|
+
break;
|
|
1649
1938
|
default:
|
|
1650
1939
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
1651
1940
|
break;
|
|
@@ -1671,23 +1960,94 @@ class AbstractHeading extends PxElement {
|
|
|
1671
1960
|
}
|
|
1672
1961
|
}
|
|
1673
1962
|
updateColor(oldValue, newValue, attrValue) {
|
|
1674
|
-
const invertedStatus = this.inverted === null ? "default" : "inverted";
|
|
1675
|
-
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
1676
|
-
this.$el.style.setProperty(
|
|
1677
|
-
`--heading-color-${invertedStatus}`,
|
|
1678
|
-
`var(--px-color-txt-${oldValue}-${invertedStatus})`
|
|
1679
|
-
);
|
|
1680
|
-
}
|
|
1681
|
-
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
1682
|
-
this.$el.style.setProperty(
|
|
1683
|
-
`--heading-color-${invertedStatus}`,
|
|
1684
|
-
`var(--px-color-txt-${newValue}-${invertedStatus})`
|
|
1685
|
-
);
|
|
1686
|
-
}
|
|
1687
1963
|
if (!this.checkName(attrValue, newValue)) {
|
|
1688
1964
|
console.error(`Bad color value for`, this.$el);
|
|
1965
|
+
return;
|
|
1966
|
+
}
|
|
1967
|
+
const invertedStatus = this.inverted === null ? "default" : "inverted";
|
|
1968
|
+
const updateColorStyle = (value) => {
|
|
1969
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
1970
|
+
this.$el.style.setProperty(
|
|
1971
|
+
`--heading-color-${invertedStatus}`,
|
|
1972
|
+
`var(--px-color-txt-${value}-${invertedStatus})`
|
|
1973
|
+
);
|
|
1974
|
+
}
|
|
1975
|
+
};
|
|
1976
|
+
updateColorStyle(oldValue);
|
|
1977
|
+
updateColorStyle(newValue);
|
|
1978
|
+
}
|
|
1979
|
+
updateTextAlign(attrName, oldValue, newValue, attrValue) {
|
|
1980
|
+
if (!this.checkName(attrValue, newValue)) {
|
|
1981
|
+
console.error(`Bad ${attrName} value for`, this.$el);
|
|
1982
|
+
return;
|
|
1983
|
+
}
|
|
1984
|
+
const updateStyle = (breakpoint, value) => {
|
|
1985
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
1986
|
+
this.$el.style.setProperty(
|
|
1987
|
+
`--heading-text-align--${breakpoint}`,
|
|
1988
|
+
value
|
|
1989
|
+
);
|
|
1990
|
+
}
|
|
1991
|
+
};
|
|
1992
|
+
if (attrName === "text-align") {
|
|
1993
|
+
["mobile", "tablet", "laptop", "desktop"].forEach((breakpoint) => {
|
|
1994
|
+
updateStyle(breakpoint, oldValue);
|
|
1995
|
+
updateStyle(breakpoint, newValue);
|
|
1996
|
+
});
|
|
1997
|
+
} else {
|
|
1998
|
+
const breakpoint = attrName.split("--")[1];
|
|
1999
|
+
updateStyle(breakpoint, oldValue);
|
|
2000
|
+
updateStyle(breakpoint, newValue);
|
|
1689
2001
|
}
|
|
1690
2002
|
}
|
|
2003
|
+
get variant() {
|
|
2004
|
+
return this.getAttribute("variant");
|
|
2005
|
+
}
|
|
2006
|
+
set variant(value) {
|
|
2007
|
+
this.setAttribute("variant", value);
|
|
2008
|
+
}
|
|
2009
|
+
get color() {
|
|
2010
|
+
return this.getAttribute("color");
|
|
2011
|
+
}
|
|
2012
|
+
set color(value) {
|
|
2013
|
+
this.setAttribute("color", value);
|
|
2014
|
+
}
|
|
2015
|
+
get textAlign() {
|
|
2016
|
+
return this.getAttribute("text-align");
|
|
2017
|
+
}
|
|
2018
|
+
set textAlign(value) {
|
|
2019
|
+
this.setAttribute("text-align", value);
|
|
2020
|
+
}
|
|
2021
|
+
get textAlignMobile() {
|
|
2022
|
+
return this.getAttribute("text-align--mobile");
|
|
2023
|
+
}
|
|
2024
|
+
set textAlignMobile(value) {
|
|
2025
|
+
this.setAttribute("text-align--mobile", value);
|
|
2026
|
+
}
|
|
2027
|
+
get textAlignTablet() {
|
|
2028
|
+
return this.getAttribute("text-align--tablet");
|
|
2029
|
+
}
|
|
2030
|
+
set textAlignTablet(value) {
|
|
2031
|
+
this.setAttribute("text-align--tablet", value);
|
|
2032
|
+
}
|
|
2033
|
+
get textAlignLaptop() {
|
|
2034
|
+
return this.getAttribute("text-align--laptop");
|
|
2035
|
+
}
|
|
2036
|
+
set textAlignLaptop(value) {
|
|
2037
|
+
this.setAttribute("text-align--laptop", value);
|
|
2038
|
+
}
|
|
2039
|
+
get textAlignDesktop() {
|
|
2040
|
+
return this.getAttribute("text-align--desktop");
|
|
2041
|
+
}
|
|
2042
|
+
set textAlignDesktop(value) {
|
|
2043
|
+
this.setAttribute("text-align--desktop", value);
|
|
2044
|
+
}
|
|
2045
|
+
get inverted() {
|
|
2046
|
+
return this.getAttribute("inverted");
|
|
2047
|
+
}
|
|
2048
|
+
set inverted(value) {
|
|
2049
|
+
this.setAttribute("inverted", value);
|
|
2050
|
+
}
|
|
1691
2051
|
}
|
|
1692
2052
|
const _H1 = class _H1 extends AbstractHeading {
|
|
1693
2053
|
constructor() {
|
|
@@ -1737,14 +2097,14 @@ const _H6 = class _H6 extends AbstractHeading {
|
|
|
1737
2097
|
_H6.nativeName = "h6";
|
|
1738
2098
|
let H6 = _H6;
|
|
1739
2099
|
customElements.define("px-h6", H6);
|
|
1740
|
-
const styles$
|
|
1741
|
-
const styleSheet$
|
|
1742
|
-
styleSheet$
|
|
1743
|
-
class
|
|
2100
|
+
const styles$a = ":host,:host *{box-sizing:border-box}:host .content-wrapper{margin-inline:1rem;max-width:1200px}@media only screen and (min-width: 1232px){:host .content-wrapper{margin-inline:auto}}";
|
|
2101
|
+
const styleSheet$9 = new CSSStyleSheet();
|
|
2102
|
+
styleSheet$9.replaceSync(styles$a);
|
|
2103
|
+
class Section extends HTMLElement {
|
|
1744
2104
|
constructor() {
|
|
1745
2105
|
super();
|
|
1746
2106
|
this.template = () => `
|
|
1747
|
-
<px-container
|
|
2107
|
+
<px-container border-radius="none" padding="none" background-color="${this.bgColor}">
|
|
1748
2108
|
<div class="content-wrapper">
|
|
1749
2109
|
<px-vstack gap="under-display-vertical">
|
|
1750
2110
|
<slot name="heading"></slot>
|
|
@@ -1757,7 +2117,7 @@ class Section2 extends HTMLElement {
|
|
|
1757
2117
|
`;
|
|
1758
2118
|
this.attachShadow({ mode: "open" });
|
|
1759
2119
|
this.shadowRoot.innerHTML = this.template();
|
|
1760
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
2120
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$9];
|
|
1761
2121
|
}
|
|
1762
2122
|
connectedCallback() {
|
|
1763
2123
|
const headingSlot = this.querySelector('[slot="heading"]');
|
|
@@ -1767,16 +2127,17 @@ class Section2 extends HTMLElement {
|
|
|
1767
2127
|
}
|
|
1768
2128
|
static get observedAttributes() {
|
|
1769
2129
|
return [
|
|
1770
|
-
"
|
|
1771
|
-
"gradient",
|
|
1772
|
-
"
|
|
1773
|
-
"
|
|
1774
|
-
"
|
|
1775
|
-
"
|
|
1776
|
-
"
|
|
1777
|
-
"
|
|
1778
|
-
"
|
|
1779
|
-
"
|
|
2130
|
+
"background-color",
|
|
2131
|
+
"background-gradient",
|
|
2132
|
+
"background-image",
|
|
2133
|
+
"background-image--mobile",
|
|
2134
|
+
"background-image--tablet",
|
|
2135
|
+
"background-image--laptop",
|
|
2136
|
+
"background-size",
|
|
2137
|
+
"background-position",
|
|
2138
|
+
"padding-block",
|
|
2139
|
+
"padding-top",
|
|
2140
|
+
"padding-bottom"
|
|
1780
2141
|
];
|
|
1781
2142
|
}
|
|
1782
2143
|
get $container() {
|
|
@@ -1785,105 +2146,114 @@ class Section2 extends HTMLElement {
|
|
|
1785
2146
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
1786
2147
|
if (oldValue !== newValue) {
|
|
1787
2148
|
switch (name) {
|
|
1788
|
-
case "
|
|
1789
|
-
this.$container.bgColor = bgColorValues.indexOf(newValue) > 0 ? newValue : "none";
|
|
2149
|
+
case "background-color":
|
|
2150
|
+
this.$container.bgColor = bgColorValues.indexOf(newValue) > 0 ? newValue : "container-none";
|
|
1790
2151
|
break;
|
|
1791
|
-
case "gradient":
|
|
2152
|
+
case "background-gradient":
|
|
1792
2153
|
this.$container.gradient = this.gradient;
|
|
1793
2154
|
break;
|
|
1794
|
-
case "
|
|
2155
|
+
case "background-image":
|
|
2156
|
+
this.$container.bgImg = newValue;
|
|
2157
|
+
break;
|
|
2158
|
+
case "background-image--mobile":
|
|
1795
2159
|
this.$container.bgImgMobile = newValue;
|
|
1796
2160
|
break;
|
|
1797
|
-
case "
|
|
2161
|
+
case "background-image--tablet":
|
|
1798
2162
|
this.$container.bgImgTablet = newValue;
|
|
1799
2163
|
break;
|
|
1800
|
-
case "
|
|
2164
|
+
case "background-image--laptop":
|
|
1801
2165
|
this.$container.bgImgLaptop = newValue;
|
|
1802
2166
|
break;
|
|
1803
|
-
case "
|
|
2167
|
+
case "background-size":
|
|
1804
2168
|
this.$container.bgImgSize = newValue;
|
|
1805
2169
|
break;
|
|
1806
|
-
case "
|
|
2170
|
+
case "background-position":
|
|
1807
2171
|
this.$container.bgImgPosition = newValue;
|
|
1808
2172
|
break;
|
|
1809
|
-
case "
|
|
2173
|
+
case "padding-block":
|
|
1810
2174
|
this.$container.paddingBlock = newValue;
|
|
1811
2175
|
break;
|
|
1812
|
-
case "
|
|
2176
|
+
case "padding-top":
|
|
1813
2177
|
this.$container.paddingTop = newValue;
|
|
1814
2178
|
break;
|
|
1815
|
-
case "
|
|
2179
|
+
case "padding-bottom":
|
|
1816
2180
|
this.$container.paddingBottom = newValue;
|
|
1817
2181
|
break;
|
|
1818
2182
|
}
|
|
1819
2183
|
}
|
|
1820
2184
|
}
|
|
1821
2185
|
get bgColor() {
|
|
1822
|
-
return this.getAttribute("
|
|
2186
|
+
return this.getAttribute("background-color") || "container-none";
|
|
1823
2187
|
}
|
|
1824
2188
|
set bgColor(value) {
|
|
1825
|
-
this.setAttribute("
|
|
2189
|
+
this.setAttribute("background-color", value);
|
|
1826
2190
|
}
|
|
1827
2191
|
get gradient() {
|
|
1828
|
-
return this.getAttribute("gradient");
|
|
2192
|
+
return this.getAttribute("background-gradient");
|
|
1829
2193
|
}
|
|
1830
2194
|
set gradient(value) {
|
|
1831
|
-
this.setAttribute("gradient", value);
|
|
2195
|
+
this.setAttribute("background-gradient", value);
|
|
2196
|
+
}
|
|
2197
|
+
get bgImg() {
|
|
2198
|
+
return this.getAttribute("background-image");
|
|
2199
|
+
}
|
|
2200
|
+
set bgImg(value) {
|
|
2201
|
+
this.setAttribute("background-image", value);
|
|
1832
2202
|
}
|
|
1833
2203
|
get bgImgMobile() {
|
|
1834
|
-
return this.getAttribute("
|
|
2204
|
+
return this.getAttribute("background-image--mobile");
|
|
1835
2205
|
}
|
|
1836
2206
|
set bgImgMobile(value) {
|
|
1837
|
-
this.setAttribute("
|
|
2207
|
+
this.setAttribute("background-image--mobile", value);
|
|
1838
2208
|
}
|
|
1839
2209
|
get bgImgTablet() {
|
|
1840
|
-
return this.getAttribute("
|
|
2210
|
+
return this.getAttribute("background-image--tablet");
|
|
1841
2211
|
}
|
|
1842
2212
|
set bgImgTablet(value) {
|
|
1843
|
-
this.setAttribute("
|
|
2213
|
+
this.setAttribute("background-image--tablet", value);
|
|
1844
2214
|
}
|
|
1845
2215
|
get bgImgLaptop() {
|
|
1846
|
-
return this.getAttribute("
|
|
2216
|
+
return this.getAttribute("background-image--laptop");
|
|
1847
2217
|
}
|
|
1848
2218
|
set bgImgLaptop(value) {
|
|
1849
|
-
this.setAttribute("
|
|
2219
|
+
this.setAttribute("background-image--laptop", value);
|
|
1850
2220
|
}
|
|
1851
2221
|
get bgImgSize() {
|
|
1852
|
-
return this.getAttribute("
|
|
2222
|
+
return this.getAttribute("background-size");
|
|
1853
2223
|
}
|
|
1854
2224
|
set bgImgSize(value) {
|
|
1855
|
-
this.setAttribute("
|
|
2225
|
+
this.setAttribute("background-size", value);
|
|
1856
2226
|
}
|
|
1857
2227
|
get bgImgPosition() {
|
|
1858
|
-
return this.getAttribute("
|
|
2228
|
+
return this.getAttribute("background-position");
|
|
1859
2229
|
}
|
|
1860
2230
|
set bgImgPosition(value) {
|
|
1861
|
-
this.setAttribute("
|
|
2231
|
+
this.setAttribute("background-position", value);
|
|
1862
2232
|
}
|
|
1863
2233
|
get paddingBlock() {
|
|
1864
|
-
return this.getAttribute("
|
|
2234
|
+
return this.getAttribute("padding-block");
|
|
1865
2235
|
}
|
|
1866
2236
|
set paddingBlock(value) {
|
|
1867
|
-
this.setAttribute("
|
|
2237
|
+
this.setAttribute("padding-block", value);
|
|
1868
2238
|
}
|
|
1869
2239
|
get paddingTop() {
|
|
1870
|
-
return this.getAttribute("
|
|
2240
|
+
return this.getAttribute("padding-top");
|
|
1871
2241
|
}
|
|
1872
2242
|
set paddingTop(value) {
|
|
1873
|
-
this.setAttribute("
|
|
2243
|
+
this.setAttribute("padding-top", value);
|
|
1874
2244
|
}
|
|
1875
2245
|
get paddingBottom() {
|
|
1876
|
-
return this.getAttribute("
|
|
2246
|
+
return this.getAttribute("padding-bottom");
|
|
1877
2247
|
}
|
|
1878
2248
|
set paddingBottom(value) {
|
|
1879
|
-
this.setAttribute("
|
|
2249
|
+
this.setAttribute("padding-bottom", value);
|
|
1880
2250
|
}
|
|
1881
2251
|
}
|
|
1882
|
-
customElements.define("px-section",
|
|
2252
|
+
customElements.define("px-section", Section);
|
|
1883
2253
|
const accordionCss = `details{font-family:var(--px-font-family);display:flex;flex-direction:column;align-items:flex-start}details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-default)}details:not(.single) ::slotted([slot="title"]){flex-grow:1}details:not(.single) slot[name=content]{display:block;padding-block:var(--px-spacing-component-default-vertical)}summary{align-items:center;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}details:not(.single) summary{display:flex;padding:var(--px-padding-s);gap:var(--px-spacing-text-to-icon-horizontal);align-self:stretch}summary:after{content:"";width:24px;height:24px;flex-shrink:0;background-color:var(--px-color-bg-action-secondary-default);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg id='CHEVRON DOWN'%3E%3Cpath id='Vector' fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.7889 5.93489 11.5286 6.19524L8 9.72384L4.4714 6.19524C4.21105 5.93489 3.78894 5.93489 3.52859 6.19524C3.26824 6.45559 3.26824 6.8777 3.52859 7.13805L7.52859 11.1381C7.78894 11.3984 8.21105 11.3984 8.4714 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='%235C2D91'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center center;border-radius:var(--px-radius-pill);border:var(--px-border-s) solid transparent;transition:all .2s ease-out 0s,backdrop-filter 0s,-webkit-backdrop-filter 0s}summary:hover{cursor:pointer}details:not(.single) summary:hover{background-color:var(--px-color-bg-container-weak-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-bordered-default);border:var(--px-border-s) solid var(--px-color-border-action-hover-default);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}details.single summary{display:inline-flex;gap:var(--px-spacing-between-icon-horizontal-mobile);justify-content:center;color:var(--px-color-txt-primary-default);font-weight:700;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-pill)}details.single summary:hover{gap:0;padding:0 var(--px-padding-xs);border-color:var(--px-color-border-action-hover-default)}details.single summary:hover:after{border-color:transparent;margin-right:calc(var(--px-padding-xs) * -1)}details.single slot[name=content]{display:block;padding-top:var(--px-spacing-component-default-vertical)}details[open] summary slot[name=title]{color:var(--px-color-txt-primary-default);font-weight:700}details[open] summary:after{transform:rotate(180deg)}summary::-webkit-details-marker{display:none}:host([inverted]) details{color:var(--px-color-txt-body-inverted)}:host([inverted]) details:not(.single){border-bottom:var(--px-border-m) solid var(--px-color-border-main-inverted)}:host([inverted]) details[open] summary slot[name=title]{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) details.single summary:hover{border-color:var(--px-color-bg-container-weak-inverted)}:host([inverted]) details.single summary:hover:after{border-color:transparent}:host([inverted]) summary:after{background-color:var(--px-color-bg-action-secondary-inverted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4714 6.19524C12.2111 5.93489 11.789 5.93489 11.5286 6.19524L8.00002 9.72384L4.47142 6.19524C4.21107 5.93489 3.78897 5.93489 3.52862 6.19524C3.26827 6.45559 3.26827 6.8777 3.52862 7.13805L7.52862 11.1381C7.78897 11.3984 8.21108 11.3984 8.47142 11.1381L12.4714 7.13805C12.7318 6.8777 12.7318 6.45559 12.4714 6.19524Z' fill='white'/%3E%3C/svg%3E")}:host([inverted]) summary:hover{background-color:var(--px-color-bg-container-moderate-inverted)}:host([inverted]) summary:hover:after{background-color:var(--px-color-bg-action-bordered-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`;
|
|
1884
2254
|
const accordionStyles = new CSSStyleSheet();
|
|
1885
2255
|
accordionStyles.replaceSync(accordionCss);
|
|
1886
|
-
const variantValues$
|
|
2256
|
+
const variantValues$1 = ["", "none", "single"];
|
|
1887
2257
|
const _Accordion = class _Accordion extends PxElement {
|
|
1888
2258
|
constructor() {
|
|
1889
2259
|
super(accordionStyles);
|
|
@@ -1912,7 +2282,7 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
1912
2282
|
if (oldValue !== newValue) {
|
|
1913
2283
|
switch (attrName) {
|
|
1914
2284
|
case "variant":
|
|
1915
|
-
this.updateAttribute(attrName, oldValue, newValue, variantValues$
|
|
2285
|
+
this.updateAttribute(attrName, oldValue, newValue, variantValues$1);
|
|
1916
2286
|
break;
|
|
1917
2287
|
default:
|
|
1918
2288
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -1940,27 +2310,93 @@ const _Accordion = class _Accordion extends PxElement {
|
|
|
1940
2310
|
_Accordion.nativeName = "details";
|
|
1941
2311
|
let Accordion = _Accordion;
|
|
1942
2312
|
customElements.define("px-accordion", Accordion);
|
|
1943
|
-
const imgCss =
|
|
1944
|
-
const styleSheet$
|
|
1945
|
-
styleSheet$
|
|
2313
|
+
const imgCss = 'img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;border-style:none}.border-radius-main,.border-radius-main img{border-radius:var(--px-radius-main)}.border-radius-pill,.border-radius-pill img{border-radius:var(--px-radius-pill)}.no-border-radius-top,.no-border-radius-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-right,.no-border-radius-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-bottom,.no-border-radius-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-left,.no-border-radius-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-all,.no-border-radius-all img{border-radius:var(--px-radius-none)}@media only screen and (max-width: 767px){:host([hide-for="mobile"]),:host([show-for="tablet"]),:host([show-for="laptop"]),.hide-for-mobile,.show-for-tablet,.show-for-laptop{display:none}.no-border-radius-mobile-top,.no-border-radius-mobile-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-mobile-right,.no-border-radius-mobile-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-mobile-bottom,.no-border-radius-mobile-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-mobile-left,.no-border-radius-mobile-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-mobile-all,.no-border-radius-mobile-all img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 768px) and (max-width: 1024px){:host([hide-for="tablet"]),:host([show-for="mobile"]),:host([show-for="laptop"]),.hide-for-tablet,.show-for-mobile,.show-for-laptop{display:none}.no-border-radius-tablet-top,.no-border-radius-tablet-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-tablet-right,.no-border-radius-tablet-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-tablet-bottom,.no-border-radius-tablet-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-tablet-left,.no-border-radius-tablet-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-tablet-all,.no-border-radius-tablet-all img{border-radius:var(--px-radius-none)}}@media only screen and (min-width: 1025px){:host([hide-for="laptop"]),:host([show-for="mobile"]),:host([show-for="tablet"]),.hide-for-laptop,.show-for-mobile,.show-for-tablet{display:none}.no-border-radius-laptop-top,.no-border-radius-laptop-top img{border-top-left-radius:var(--px-radius-none);border-top-right-radius:var(--px-radius-none)}.no-border-radius-laptop-right,.no-border-radius-laptop-right img{border-top-right-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-laptop-bottom,.no-border-radius-laptop-bottom img{border-bottom-left-radius:var(--px-radius-none);border-bottom-right-radius:var(--px-radius-none)}.no-border-radius-laptop-left,.no-border-radius-laptop-left img{border-top-left-radius:var(--px-radius-none);border-bottom-left-radius:var(--px-radius-none)}.no-border-radius-laptop-all,.no-border-radius-laptop-all img{border-radius:var(--px-radius-none)}}';
|
|
2314
|
+
const styleSheet$8 = new CSSStyleSheet();
|
|
2315
|
+
styleSheet$8.replaceSync(imgCss);
|
|
2316
|
+
const breakpointsValues = ["", "mobile", "tablet", "laptop", "desktop"];
|
|
1946
2317
|
class AbstractImage extends PxElement {
|
|
1947
2318
|
constructor() {
|
|
1948
|
-
super(styleSheet$
|
|
2319
|
+
super(styleSheet$8);
|
|
1949
2320
|
}
|
|
1950
2321
|
static get observedAttributes() {
|
|
1951
|
-
return [
|
|
1952
|
-
|
|
2322
|
+
return [
|
|
2323
|
+
...super.observedAttributes,
|
|
2324
|
+
"hide-for",
|
|
2325
|
+
"show-for",
|
|
2326
|
+
"border-radius",
|
|
2327
|
+
"no-border-radius",
|
|
2328
|
+
"no-border-radius-mobile",
|
|
2329
|
+
"no-border-radius-tablet",
|
|
2330
|
+
"no-border-radius-laptop"
|
|
2331
|
+
];
|
|
2332
|
+
}
|
|
2333
|
+
get hidefor() {
|
|
2334
|
+
return this.getAttribute("hide-for");
|
|
2335
|
+
}
|
|
2336
|
+
set hidefor(value) {
|
|
2337
|
+
this.setAttribute("hide-for", value);
|
|
2338
|
+
}
|
|
1953
2339
|
get showfor() {
|
|
1954
|
-
return this.getAttribute("
|
|
2340
|
+
return this.getAttribute("show-for");
|
|
1955
2341
|
}
|
|
1956
2342
|
set showfor(value) {
|
|
1957
|
-
this.setAttribute("
|
|
2343
|
+
this.setAttribute("show-for", value);
|
|
2344
|
+
}
|
|
2345
|
+
get borderRadius() {
|
|
2346
|
+
return this.getAttribute("border-radius");
|
|
2347
|
+
}
|
|
2348
|
+
set borderRadius(value) {
|
|
2349
|
+
this.setAttribute("border-radius", value);
|
|
2350
|
+
}
|
|
2351
|
+
get noBorderRadius() {
|
|
2352
|
+
return this.getAttribute("no-border-radius");
|
|
2353
|
+
}
|
|
2354
|
+
set noBorderRadius(value) {
|
|
2355
|
+
this.setAttribute("no-border-radius", value);
|
|
2356
|
+
}
|
|
2357
|
+
get noBorderRadiusMobile() {
|
|
2358
|
+
return this.getAttribute("no-border-radius-mobile");
|
|
2359
|
+
}
|
|
2360
|
+
set noBorderRadiusMobile(value) {
|
|
2361
|
+
this.setAttribute("no-border-radius-mobile", value);
|
|
2362
|
+
}
|
|
2363
|
+
get noBorderRadiusTablet() {
|
|
2364
|
+
return this.getAttribute("no-border-radius-tablet");
|
|
2365
|
+
}
|
|
2366
|
+
set noBorderRadiusTablet(value) {
|
|
2367
|
+
this.setAttribute("no-border-radius-tablet", value);
|
|
2368
|
+
}
|
|
2369
|
+
get noBorderRadiusLaptop() {
|
|
2370
|
+
return this.getAttribute("no-border-radius-laptop");
|
|
2371
|
+
}
|
|
2372
|
+
set noBorderRadiusLaptop(value) {
|
|
2373
|
+
this.setAttribute("no-border-radius-laptop", value);
|
|
1958
2374
|
}
|
|
1959
2375
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
1960
2376
|
if (oldValue !== newValue) {
|
|
1961
2377
|
switch (attrName) {
|
|
1962
|
-
case "
|
|
1963
|
-
|
|
2378
|
+
case "hide-for":
|
|
2379
|
+
case "show-for":
|
|
2380
|
+
this.updateAttribute(attrName, oldValue, newValue, breakpointsValues);
|
|
2381
|
+
break;
|
|
2382
|
+
case "border-radius":
|
|
2383
|
+
this.updateAttribute(
|
|
2384
|
+
attrName,
|
|
2385
|
+
oldValue,
|
|
2386
|
+
newValue,
|
|
2387
|
+
borderRadiusValues
|
|
2388
|
+
);
|
|
2389
|
+
break;
|
|
2390
|
+
case "no-border-radius":
|
|
2391
|
+
case "no-border-radius-mobile":
|
|
2392
|
+
case "no-border-radius-tablet":
|
|
2393
|
+
case "no-border-radius-laptop":
|
|
2394
|
+
this.updateAttribute(
|
|
2395
|
+
attrName,
|
|
2396
|
+
oldValue,
|
|
2397
|
+
newValue,
|
|
2398
|
+
noBorderRadiusValues
|
|
2399
|
+
);
|
|
1964
2400
|
break;
|
|
1965
2401
|
default:
|
|
1966
2402
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -1968,24 +2404,23 @@ class AbstractImage extends PxElement {
|
|
|
1968
2404
|
}
|
|
1969
2405
|
}
|
|
1970
2406
|
}
|
|
1971
|
-
|
|
1972
|
-
if (
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
this.$el.classList.toggle(newValue);
|
|
1977
|
-
}
|
|
1978
|
-
}
|
|
1979
|
-
checkName(value) {
|
|
1980
|
-
return ["", "s", "so", "mo", "m", "l"].includes(value);
|
|
1981
|
-
}
|
|
1982
|
-
updateShowFor(oldValue, newValue) {
|
|
1983
|
-
if (this.checkName(newValue)) {
|
|
1984
|
-
this.toggleClass(oldValue, newValue);
|
|
2407
|
+
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
2408
|
+
if (!this.checkName(attrValues, newValue)) {
|
|
2409
|
+
console.error(
|
|
2410
|
+
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
2411
|
+
);
|
|
1985
2412
|
} else {
|
|
1986
|
-
|
|
2413
|
+
if (oldValue !== null && oldValue !== "") {
|
|
2414
|
+
this.$el.classList.toggle(`${attrName}-${oldValue}`);
|
|
2415
|
+
}
|
|
2416
|
+
if (newValue !== null && newValue !== "") {
|
|
2417
|
+
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
2418
|
+
}
|
|
1987
2419
|
}
|
|
1988
2420
|
}
|
|
2421
|
+
checkName(values, value) {
|
|
2422
|
+
return values.includes(value);
|
|
2423
|
+
}
|
|
1989
2424
|
}
|
|
1990
2425
|
const _Image = class _Image extends AbstractImage {
|
|
1991
2426
|
constructor() {
|
|
@@ -1996,11 +2431,28 @@ const _Image = class _Image extends AbstractImage {
|
|
|
1996
2431
|
};
|
|
1997
2432
|
_Image.nativeName = "img";
|
|
1998
2433
|
let Image = _Image;
|
|
1999
|
-
customElements.define("px-
|
|
2434
|
+
customElements.define("px-img", Image);
|
|
2000
2435
|
const _Picture = class _Picture extends AbstractImage {
|
|
2001
2436
|
constructor() {
|
|
2002
2437
|
super();
|
|
2003
|
-
this.possibleImgExtension = [
|
|
2438
|
+
this.possibleImgExtension = [
|
|
2439
|
+
"webp",
|
|
2440
|
+
"svg",
|
|
2441
|
+
"apng",
|
|
2442
|
+
"png",
|
|
2443
|
+
"jpg",
|
|
2444
|
+
"jpeg",
|
|
2445
|
+
"jfif",
|
|
2446
|
+
"pjpeg",
|
|
2447
|
+
"pjp",
|
|
2448
|
+
"avif",
|
|
2449
|
+
"gif",
|
|
2450
|
+
"bmp",
|
|
2451
|
+
"ico",
|
|
2452
|
+
"cur",
|
|
2453
|
+
"tif",
|
|
2454
|
+
"tiff"
|
|
2455
|
+
];
|
|
2004
2456
|
const $root = document.createElement(this.nativeName);
|
|
2005
2457
|
this.shadowRoot.appendChild($root);
|
|
2006
2458
|
}
|
|
@@ -2050,7 +2502,9 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
2050
2502
|
this.$el.innerHTML = "";
|
|
2051
2503
|
}
|
|
2052
2504
|
async imgExists(imgUrl) {
|
|
2053
|
-
const response = await fetch(imgUrl, { method: "HEAD" }).catch(
|
|
2505
|
+
const response = await fetch(imgUrl, { method: "HEAD" }).catch(
|
|
2506
|
+
(err) => console.log("Error:", err)
|
|
2507
|
+
);
|
|
2054
2508
|
return typeof response === "object" && response.ok && response.status != 404 && response.status != 403 && response.headers.get("Content-Type") != "text/html";
|
|
2055
2509
|
}
|
|
2056
2510
|
async transformImgPath(imgName, imgExtension, breakpoint) {
|
|
@@ -2133,10 +2587,10 @@ const _Picture = class _Picture extends AbstractImage {
|
|
|
2133
2587
|
_Picture.nativeName = "picture";
|
|
2134
2588
|
let Picture = _Picture;
|
|
2135
2589
|
customElements.define("px-picture", Picture);
|
|
2136
|
-
const styles$
|
|
2137
|
-
const styleSheet$
|
|
2138
|
-
styleSheet$
|
|
2139
|
-
const
|
|
2590
|
+
const styles$9 = ".patch{display:inline-flex;align-items:center;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small);font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-primary-inverted)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 768px){.patch{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-primary-inverted)}.bottom-right{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small) var(--px-radius-patch-big)}.bottom-left{border-radius:var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-big) var(--px-radius-patch-small)}.info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}:host([inverted]) .info{background-color:var(--px-color-illu-blue-core);color:var(--px-color-txt-body-default)}.black-friday{background-color:var(--px-color-bg-container-rich-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-body-default)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-body-inverted)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-default)}.greyed{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default)}:host([inverted]) .greyed{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}";
|
|
2591
|
+
const styleSheet$7 = new CSSStyleSheet();
|
|
2592
|
+
styleSheet$7.replaceSync(styles$9);
|
|
2593
|
+
const patchVariantValues = [
|
|
2140
2594
|
"",
|
|
2141
2595
|
"default",
|
|
2142
2596
|
"info",
|
|
@@ -2144,7 +2598,7 @@ const variantValues$4 = [
|
|
|
2144
2598
|
"eco",
|
|
2145
2599
|
"greyed"
|
|
2146
2600
|
];
|
|
2147
|
-
const
|
|
2601
|
+
const patchShapeValues = ["", "default", "bottom-right", "bottom-left"];
|
|
2148
2602
|
class Patch extends HTMLElement {
|
|
2149
2603
|
template() {
|
|
2150
2604
|
return `
|
|
@@ -2157,7 +2611,7 @@ class Patch extends HTMLElement {
|
|
|
2157
2611
|
super();
|
|
2158
2612
|
this.attachShadow({ mode: "open" });
|
|
2159
2613
|
this.shadowRoot.innerHTML = this.template();
|
|
2160
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
2614
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$7];
|
|
2161
2615
|
}
|
|
2162
2616
|
static get observedAttributes() {
|
|
2163
2617
|
return ["variant", "shape", "inverted"];
|
|
@@ -2187,13 +2641,13 @@ class Patch extends HTMLElement {
|
|
|
2187
2641
|
}
|
|
2188
2642
|
updateVariant(oldValue, newValue) {
|
|
2189
2643
|
this._toggleClass(oldValue, newValue);
|
|
2190
|
-
if (!this.checkName(
|
|
2644
|
+
if (!this.checkName(patchVariantValues, newValue)) {
|
|
2191
2645
|
console.error(`Bad "variant" value for patch`);
|
|
2192
2646
|
}
|
|
2193
2647
|
}
|
|
2194
2648
|
updateShape(oldValue, newValue) {
|
|
2195
2649
|
this._toggleClass(oldValue, newValue);
|
|
2196
|
-
if (!this.checkName(
|
|
2650
|
+
if (!this.checkName(patchShapeValues, newValue)) {
|
|
2197
2651
|
console.error(`Bad "shape" value for patch`);
|
|
2198
2652
|
}
|
|
2199
2653
|
}
|
|
@@ -2223,9 +2677,9 @@ if (!customElements.get("px-patch")) {
|
|
|
2223
2677
|
customElements.define("px-patch", Patch);
|
|
2224
2678
|
}
|
|
2225
2679
|
const css$1 = '.price{--price-s: var(--px-text-size-l-mobile);--price-m: var(--px-text-size-xl-mobile);--price-l: var(--px-text-size-3xl-mobile);font-family:var(--px-font-family);white-space:nowrap;font-weight:700;color:var(--px-color-txt-primary-default);font-size:var(--price-s)}@media only screen and (min-width: 641px){.price{--price-s: var(--px-text-size-l-tablet);--price-m: var(--px-text-size-xl-tablet);--price-l: var(--px-text-size-3xl-tablet)}}@media only screen and (min-width: 1025px){.price{--price-s: var(--px-text-size-l-desktop);--price-m: var(--px-text-size-xl-desktop);--price-l: var(--px-text-size-3xl-desktop)}}.promo,.free{color:var(--px-color-txt-promo-default)}.neutral{color:var(--px-color-txt-body-default)}.exceeding{color:var(--px-color-txt-error-default)}.disabled{color:var(--px-color-txt-disabled-default)}::slotted([slot="oldprice"]){text-decoration:line-through;color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);font-weight:400}@media only screen and (min-width: 641px){{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){{font-size:var(--px-text-size-base-desktop)}}::slotted([slot="newpromoprice"]){position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}:host([inverted]) .price{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .promo,:host([inverted]) .free{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .neutral{color:var(--px-color-txt-body-inverted)}:host([inverted]) .exceeding{color:var(--px-color-txt-error-inverted)}:host([inverted]) .disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(s){color:var(--px-color-txt-body-inverted)}.price:not(.promo):not(.free) ::slotted(s){display:none}::slotted(.euro){font-size:calc(var(--price-s) * .75)}::slotted(.decimals){font-size:calc(var(--price-s) * .5)}.m{font-size:var(--price-m)}:host([size="m"]) ::slotted(.decimals){font-size:calc(var(--price-m) * .5)}:host([size="m"]) ::slotted(.euro){font-size:calc(var(--price-m) * .75)}.l{font-size:var(--price-l)}:host([size="l"]) ::slotted(.decimals){font-size:calc(var(--price-l) * .5)}:host([size="l"]) ::slotted(.euro){font-size:calc(var(--price-l) * .75)}';
|
|
2226
|
-
const styles$
|
|
2227
|
-
styles$
|
|
2228
|
-
const
|
|
2680
|
+
const styles$8 = new CSSStyleSheet();
|
|
2681
|
+
styles$8.replaceSync(css$1);
|
|
2682
|
+
const priceVariantValues = [
|
|
2229
2683
|
"default",
|
|
2230
2684
|
"promo",
|
|
2231
2685
|
"free",
|
|
@@ -2233,10 +2687,10 @@ const variantValues$3 = [
|
|
|
2233
2687
|
"exceeding",
|
|
2234
2688
|
"disabled"
|
|
2235
2689
|
];
|
|
2236
|
-
const
|
|
2690
|
+
const priceSizeValues = ["", "s", "m", "l"];
|
|
2237
2691
|
const _Price = class _Price extends PxElement {
|
|
2238
2692
|
constructor() {
|
|
2239
|
-
super(styles$
|
|
2693
|
+
super(styles$8);
|
|
2240
2694
|
this.template = () => `<span class="price"><slot name="oldprice"></slot><slot name="newpromoprice"></slot><slot></slot></span>`;
|
|
2241
2695
|
this.shadowRoot.innerHTML = this.template();
|
|
2242
2696
|
}
|
|
@@ -2268,10 +2722,15 @@ const _Price = class _Price extends PxElement {
|
|
|
2268
2722
|
if (oldValue !== newValue) {
|
|
2269
2723
|
switch (attrName) {
|
|
2270
2724
|
case "variant":
|
|
2271
|
-
this.updateAttribute(
|
|
2725
|
+
this.updateAttribute(
|
|
2726
|
+
attrName,
|
|
2727
|
+
oldValue,
|
|
2728
|
+
newValue,
|
|
2729
|
+
priceVariantValues
|
|
2730
|
+
);
|
|
2272
2731
|
break;
|
|
2273
2732
|
case "size":
|
|
2274
|
-
this.updateAttribute(attrName, oldValue, newValue,
|
|
2733
|
+
this.updateAttribute(attrName, oldValue, newValue, priceSizeValues);
|
|
2275
2734
|
break;
|
|
2276
2735
|
default:
|
|
2277
2736
|
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
@@ -2337,11 +2796,11 @@ _Price.nativeName = "span";
|
|
|
2337
2796
|
let Price = _Price;
|
|
2338
2797
|
customElements.define("px-price", Price);
|
|
2339
2798
|
const css = ":host{box-sizing:border-box}.ribbon{font-family:var(--px-font-family);font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);white-space:nowrap;text-align:left;color:var(--px-color-txt-body-inverted);background-color:var(--px-color-bg-container-rich-default);padding:var(--px-padding-xs) var(--px-padding-s);border-radius:var(--px-radius-main) var(--px-radius-main) 0 0}.ribbon,.ribbon *{box-sizing:border-box}@media only screen and (min-width: 768px){.ribbon{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){.ribbon{font-size:var(--px-text-size-base-desktop)}}";
|
|
2340
|
-
const styles$
|
|
2341
|
-
styles$
|
|
2799
|
+
const styles$7 = new CSSStyleSheet();
|
|
2800
|
+
styles$7.replaceSync(css);
|
|
2342
2801
|
const _Ribbon = class _Ribbon extends PxElement {
|
|
2343
2802
|
constructor() {
|
|
2344
|
-
super(styles$
|
|
2803
|
+
super(styles$7);
|
|
2345
2804
|
this.template = () => `<div class="ribbon"><slot></slot></div>`;
|
|
2346
2805
|
this.shadowRoot.innerHTML = this.template();
|
|
2347
2806
|
}
|
|
@@ -2349,11 +2808,11 @@ const _Ribbon = class _Ribbon extends PxElement {
|
|
|
2349
2808
|
_Ribbon.nativeName = "div";
|
|
2350
2809
|
let Ribbon = _Ribbon;
|
|
2351
2810
|
customElements.define("px-ribbon", Ribbon);
|
|
2352
|
-
const styles$
|
|
2353
|
-
const styleSheet$
|
|
2354
|
-
styleSheet$
|
|
2811
|
+
const styles$6 = ".separator{--separator-size: var(--px-border-m);--px-separator-color: var(--px-color-border-main-default);--separator-direction-mobile-border-width: var(--separator-size) 0 0;--separator-direction-mobile-width: initial;--separator-direction-mobile-height: initial;clear:both;margin:0;border-style:solid;border-color:var(--px-separator-color);border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_horizontal{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}@media only screen and (min-width: 0px) and (max-width: 767px){.separator_direction_horizontal--mobile{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--mobile{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 768px) and (max-width: 1024px){.separator_direction_horizontal--tablet{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--tablet{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1025px) and (max-width: 1440px){.separator_direction_horizontal--laptop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--laptop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}@media only screen and (min-width: 1441px){.separator_direction_horizontal--desktop{border-width:var(--separator-size) 0 0;width:initial;height:initial}.separator_direction_vertical--desktop{width:var(--separator-size);height:100%;border-width:0 var(--separator-size) 0 0}}:host([inverted]) .separator{--px-separator-color: var(--px-color-border-main-inverted)}";
|
|
2812
|
+
const styleSheet$6 = new CSSStyleSheet();
|
|
2813
|
+
styleSheet$6.replaceSync(styles$6);
|
|
2355
2814
|
const directionValues = ["", "default", "horizontal", "vertical"];
|
|
2356
|
-
const sizeValues = ["", "none", "s", "m", "l"];
|
|
2815
|
+
const sizeValues$1 = ["", "none", "s", "m", "l"];
|
|
2357
2816
|
const colorValues = [
|
|
2358
2817
|
"",
|
|
2359
2818
|
"contrasted",
|
|
@@ -2367,7 +2826,7 @@ const colorValues = [
|
|
|
2367
2826
|
];
|
|
2368
2827
|
const _Separator = class _Separator extends PxElement {
|
|
2369
2828
|
constructor() {
|
|
2370
|
-
super(styleSheet$
|
|
2829
|
+
super(styleSheet$6);
|
|
2371
2830
|
const $root = document.createElement(this.nativeName);
|
|
2372
2831
|
$root.classList.add("separator");
|
|
2373
2832
|
this.shadowRoot.appendChild($root);
|
|
@@ -2444,7 +2903,7 @@ const _Separator = class _Separator extends PxElement {
|
|
|
2444
2903
|
this.updateDirection(attrName, newValue);
|
|
2445
2904
|
break;
|
|
2446
2905
|
case "size":
|
|
2447
|
-
this.updateSize(newValue, sizeValues);
|
|
2906
|
+
this.updateSize(newValue, sizeValues$1);
|
|
2448
2907
|
break;
|
|
2449
2908
|
case "color":
|
|
2450
2909
|
this.updateColor(newValue, colorValues);
|
|
@@ -2511,11 +2970,11 @@ const _Separator = class _Separator extends PxElement {
|
|
|
2511
2970
|
_Separator.nativeName = "hr";
|
|
2512
2971
|
let Separator = _Separator;
|
|
2513
2972
|
customElements.define("px-separator", Separator);
|
|
2514
|
-
const styles$
|
|
2515
|
-
const styleSheet$
|
|
2516
|
-
styleSheet$
|
|
2517
|
-
const
|
|
2518
|
-
const
|
|
2973
|
+
const styles$5 = '.tag{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-s-mobile);line-height:var(--px-line-height-m);font-weight:400;gap:var(--px-spacing-text-to-icon-compact-horizontal);background-color:var(--px-color-bg-action-secondary-default);color:var(--px-color-txt-primary-default);padding:var(--px-padding-2xs) var(--px-padding-xs);border:var(--px-border-s) solid transparent;border-radius:var(--px-radius-main);--slotted-icon-size: var(--px-icon-size-xs-mobile)}.tag,.tag *{box-sizing:border-box}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-mobile)}.light{background-color:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-body-default)}.outline{background-color:transparent;color:var(--px-color-txt-primary-default);border-color:var(--px-color-border-action-hover-default)}.pill{border-radius:var(--px-radius-pill)}:host([inverted]) .tag{background-color:var(--px-color-bg-action-secondary-inverted);color:var(--px-color-txt-primary-inverted)}:host([inverted]) .light{background-color:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-body-inverted)}:host([inverted]) .outline{background-color:transparent;color:var(--px-color-txt-primary-inverted);border-color:var(--px-color-border-action-hover-inverted)}@media only screen and (min-width: 64rem){.tag{font-size:var(--px-text-size-s-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-tablet)}}@media only screen and (min-width: 90rem){.tag{font-size:var(--px-text-size-s-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.tag ::slotted([slot="before"]){font-size:var(--px-icon-size-xs-desktop)}}';
|
|
2974
|
+
const styleSheet$5 = new CSSStyleSheet();
|
|
2975
|
+
styleSheet$5.replaceSync(styles$5);
|
|
2976
|
+
const tagVariantValues = ["", "default", "light", "outline"];
|
|
2977
|
+
const tagShapeValues = ["", "default", "pill"];
|
|
2519
2978
|
class Tag extends HTMLElement {
|
|
2520
2979
|
template() {
|
|
2521
2980
|
return `
|
|
@@ -2529,7 +2988,7 @@ class Tag extends HTMLElement {
|
|
|
2529
2988
|
super();
|
|
2530
2989
|
this.attachShadow({ mode: "open" });
|
|
2531
2990
|
this.shadowRoot.innerHTML = this.template();
|
|
2532
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
2991
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$5];
|
|
2533
2992
|
}
|
|
2534
2993
|
static get observedAttributes() {
|
|
2535
2994
|
return ["variant", "shape", "inverted"];
|
|
@@ -2580,13 +3039,13 @@ class Tag extends HTMLElement {
|
|
|
2580
3039
|
}
|
|
2581
3040
|
updateVariant(oldValue, newValue) {
|
|
2582
3041
|
this._toggleClass(oldValue, newValue);
|
|
2583
|
-
if (!this.checkName(
|
|
3042
|
+
if (!this.checkName(tagVariantValues, newValue)) {
|
|
2584
3043
|
console.error(`Bad "variant" value for tag`);
|
|
2585
3044
|
}
|
|
2586
3045
|
}
|
|
2587
3046
|
updateShape(oldValue, newValue) {
|
|
2588
3047
|
this._toggleClass(oldValue, newValue);
|
|
2589
|
-
if (!this.checkName(
|
|
3048
|
+
if (!this.checkName(tagShapeValues, newValue)) {
|
|
2590
3049
|
console.error(`Bad "shape" value for tag`);
|
|
2591
3050
|
}
|
|
2592
3051
|
}
|
|
@@ -2594,9 +3053,9 @@ class Tag extends HTMLElement {
|
|
|
2594
3053
|
if (!customElements.get("px-tag")) {
|
|
2595
3054
|
customElements.define("px-tag", Tag);
|
|
2596
3055
|
}
|
|
2597
|
-
const styles$
|
|
2598
|
-
const styleSheet$
|
|
2599
|
-
styleSheet$
|
|
3056
|
+
const styles$4 = '*{font-family:var(--px-font-family)}#container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--px-spacing-component-default-vertical)}#panels{width:100%}div[role=tablist]{display:flex;align-items:center;scrollbar-width:none;overflow:scroll;width:80%;box-sizing:border-box}div[role=tablist] ::slotted(px-tab){background-color:var(--px-color-bg-container-weak-default)}div[role=tablist] ::slotted(px-tab[inverted=""]){background-color:var(--px-color-bg-container-weak-inverted)}div[role=tablist] ::slotted(px-tab[selected=""]){background-color:var(--px-color-bg-action-active-default);padding-block:var(--px-padding-m);border-radius:var(--px-radius-main)!important}div[role=tablist] ::slotted(px-tab[selected=""][inverted=""]){background-color:var(--px-color-bg-action-active-inverted)}div[role=tablist] ::slotted(px-tab:first-child){border-radius:var(--px-radius-main) var(--px-radius-none) var(--px-radius-none) var(--px-radius-main)}div[role=tablist] ::slotted(px-tab:last-of-type){border-radius:var(--px-radius-none) var(--px-radius-main) var(--px-radius-main) var(--px-radius-none)}div[role=tablist]::-webkit-scrollbar{display:none}button[role=tab]{background:none;border:none;padding:0;margin:0;cursor:pointer;height:inherit;width:inherit;padding:var(--px-padding-s);font-size:var(--px-text-size-base-mobile);font-weight:700;text-wrap:nowrap;color:var(--px-color-txt-body-default);outline:none}button[role=tab][inverted=""]{color:var(--px-color-txt-body-inverted)}@media screen and (min-width: 768px){button[role=tab]{font-size:var(--px-text-size-base-tablet)}}@media screen and (min-width: 1025px){button[role=tab]{font-size:var(--px-text-size-base-laptop)}}@media screen and (min-width: 1441px){button[role=tab]{font-size:var(--px-text-size-base-desktop)}}button[aria-selected=""]{padding-block:0;cursor:auto;color:var(--px-color-txt-primary-inverted)}button[aria-selected=""][inverted=""]{color:var(--px-color-txt-primary-default)}';
|
|
3057
|
+
const styleSheet$4 = new CSSStyleSheet();
|
|
3058
|
+
styleSheet$4.replaceSync(styles$4);
|
|
2600
3059
|
class Tabs extends HTMLElement {
|
|
2601
3060
|
constructor() {
|
|
2602
3061
|
super();
|
|
@@ -2616,7 +3075,7 @@ class Tabs extends HTMLElement {
|
|
|
2616
3075
|
this._label = this.getAttribute("label");
|
|
2617
3076
|
}
|
|
2618
3077
|
this.shadowRoot.innerHTML = this.template();
|
|
2619
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3078
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
|
|
2620
3079
|
}
|
|
2621
3080
|
static get observedAttributes() {
|
|
2622
3081
|
return ["label", "inverted"];
|
|
@@ -2703,7 +3162,7 @@ class Tab extends HTMLElement {
|
|
|
2703
3162
|
`;
|
|
2704
3163
|
this.attachShadow({ mode: "open" });
|
|
2705
3164
|
this.shadowRoot.innerHTML = this.template();
|
|
2706
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3165
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
|
|
2707
3166
|
}
|
|
2708
3167
|
static get observedAttributes() {
|
|
2709
3168
|
return ["selected", "for", "name"];
|
|
@@ -2775,7 +3234,7 @@ class TabPanel extends HTMLElement {
|
|
|
2775
3234
|
`;
|
|
2776
3235
|
this.attachShadow({ mode: "open" });
|
|
2777
3236
|
this.shadowRoot.innerHTML = this.template();
|
|
2778
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3237
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$4];
|
|
2779
3238
|
}
|
|
2780
3239
|
static get observedAttributes() {
|
|
2781
3240
|
return ["name"];
|
|
@@ -2854,9 +3313,9 @@ class PxTabPanel extends TabPanel {
|
|
|
2854
3313
|
if (!customElements.get("px-tab-panel")) {
|
|
2855
3314
|
customElements.define("px-tab-panel", PxTabPanel);
|
|
2856
3315
|
}
|
|
2857
|
-
const styles$
|
|
2858
|
-
const styleSheet$
|
|
2859
|
-
styleSheet$
|
|
3316
|
+
const styles$3 = ".timeline{list-style:none;margin:0;padding:0}";
|
|
3317
|
+
const styleSheet$3 = new CSSStyleSheet();
|
|
3318
|
+
styleSheet$3.replaceSync(styles$3);
|
|
2860
3319
|
class Timeline extends HTMLElement {
|
|
2861
3320
|
template() {
|
|
2862
3321
|
return `
|
|
@@ -2869,7 +3328,7 @@ class Timeline extends HTMLElement {
|
|
|
2869
3328
|
super();
|
|
2870
3329
|
this.attachShadow({ mode: "open" });
|
|
2871
3330
|
this.shadowRoot.innerHTML = this.template();
|
|
2872
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3331
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$3];
|
|
2873
3332
|
}
|
|
2874
3333
|
static get observedAttributes() {
|
|
2875
3334
|
return ["inverted"];
|
|
@@ -2890,7 +3349,9 @@ class Timeline extends HTMLElement {
|
|
|
2890
3349
|
}
|
|
2891
3350
|
configureChildren() {
|
|
2892
3351
|
const lastChild = this.$children[this.$children.length - 1];
|
|
2893
|
-
lastChild
|
|
3352
|
+
if (lastChild && !lastChild.hasAttribute("lastchild")) {
|
|
3353
|
+
lastChild.setAttribute("lastchild", "");
|
|
3354
|
+
}
|
|
2894
3355
|
for (let i = 0; i < this.$children.length; i++) {
|
|
2895
3356
|
this.$children[i].setAttribute("item", `${i + 1}`);
|
|
2896
3357
|
}
|
|
@@ -2911,9 +3372,9 @@ class Timeline extends HTMLElement {
|
|
|
2911
3372
|
if (!customElements.get("px-timeline")) {
|
|
2912
3373
|
customElements.define("px-timeline", Timeline);
|
|
2913
3374
|
}
|
|
2914
|
-
const styles$
|
|
2915
|
-
const styleSheet$
|
|
2916
|
-
styleSheet$
|
|
3375
|
+
const styles$2 = '.timeline-item{display:flex;gap:var(--px-spacing-text-to-icon-horizontal);font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m)}.indicator-area{position:relative}.indicator-area:before{display:block;content:"";position:absolute;top:26px;left:12px;width:var(--px-border-m);height:calc(100% - 26px);background:var(--px-color-border-main-default)}.indicator-area .indicator{display:flex;align-items:center;justify-content:center;text-align:center;width:26px;height:26px;font-weight:700;font-size:var(--px-text-size-s-mobile);color:var(--px-color-icon-body-default);border-radius:var(--px-radius-pill);background:var(--px-color-bg-container-weak-default)}.content-area{margin-bottom:var(--px-spacing-component-default-vertical)}.content-area ::slotted([slot="title"]){font-weight:700;color:var(--px-color-txt-body-default)}.content-area ::slotted([slot="content"]){font-weight:400;color:var(--px-color-txt-details-default);margin-top:var(--px-spacing-under-text-vertical)}:host([lastchild]) .indicator-area:before{display:none}:host([lastchild]) .content-area{margin-bottom:0}:host([inverted]) .indicator-area:before{background:var(--px-color-border-main-inverted)}:host([inverted]) .indicator-area .indicator{color:var(--px-color-icon-body-inverted);background:var(--px-color-bg-container-weak-inverted)}:host([inverted]) .content-area ::slotted([slot="title"]){color:var(--px-color-txt-body-inverted)}:host([inverted]) .content-area ::slotted([slot="content"]){color:var(--px-color-txt-details-inverted)}@media only screen and (min-width: 64rem){.timeline-item{font-size:var(--px-text-size-base-tablet)}.indicator-area .indicator{font-size:var(--px-text-size-s-tablet)}}@media only screen and (min-width: 90rem){.timeline-item{font-size:var(--px-text-size-base-desktop)}.indicator-area .indicator{font-size:var(--px-text-size-s-desktop)}}';
|
|
3376
|
+
const styleSheet$2 = new CSSStyleSheet();
|
|
3377
|
+
styleSheet$2.replaceSync(styles$2);
|
|
2917
3378
|
let item = "1";
|
|
2918
3379
|
class TimelineItem extends HTMLElement {
|
|
2919
3380
|
template() {
|
|
@@ -2933,7 +3394,7 @@ class TimelineItem extends HTMLElement {
|
|
|
2933
3394
|
super();
|
|
2934
3395
|
this.attachShadow({ mode: "open" });
|
|
2935
3396
|
this.shadowRoot.innerHTML = this.template();
|
|
2936
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet$
|
|
3397
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$2];
|
|
2937
3398
|
}
|
|
2938
3399
|
static get observedAttributes() {
|
|
2939
3400
|
return ["inverted", "lastchild", "item"];
|
|
@@ -2985,10 +3446,10 @@ class TimelineItem extends HTMLElement {
|
|
|
2985
3446
|
if (!customElements.get("px-timeline-item")) {
|
|
2986
3447
|
customElements.define("px-timeline-item", TimelineItem);
|
|
2987
3448
|
}
|
|
2988
|
-
const styles = "px-container{width:1000px;display:block;border:0;border-radius:var(--px-radius-main)}@media screen and (max-width: 1025px){px-container{width:700px}}@media screen and (max-width: 640px){px-container{width:295px}}";
|
|
2989
|
-
const lightStyles$1 = ".lavender-blurred-modal-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#
|
|
2990
|
-
const styleSheet = new CSSStyleSheet();
|
|
2991
|
-
styleSheet.replaceSync(styles);
|
|
3449
|
+
const styles$1 = "px-container{width:1000px;display:block;border:0;border-radius:var(--px-radius-main)}@media screen and (max-width: 1025px){px-container{width:700px}}@media screen and (max-width: 640px){px-container{width:295px}}";
|
|
3450
|
+
const lightStyles$1 = ".lavender-blurred-modal-background{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0000004d;z-index:999;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}";
|
|
3451
|
+
const styleSheet$1 = new CSSStyleSheet();
|
|
3452
|
+
styleSheet$1.replaceSync(styles$1);
|
|
2992
3453
|
addGlobalStylesheet(lightStyles$1);
|
|
2993
3454
|
class Modal extends HTMLElement {
|
|
2994
3455
|
constructor() {
|
|
@@ -3009,7 +3470,7 @@ class Modal extends HTMLElement {
|
|
|
3009
3470
|
</px-container>`;
|
|
3010
3471
|
this.attachShadow({ mode: "open" });
|
|
3011
3472
|
this.shadowRoot.innerHTML = this.template;
|
|
3012
|
-
this.shadowRoot.adoptedStyleSheets = [styleSheet];
|
|
3473
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet$1];
|
|
3013
3474
|
}
|
|
3014
3475
|
connectedCallback() {
|
|
3015
3476
|
var _a;
|
|
@@ -3025,11 +3486,13 @@ class Modal extends HTMLElement {
|
|
|
3025
3486
|
event.stopPropagation();
|
|
3026
3487
|
};
|
|
3027
3488
|
});
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3489
|
+
this.addEventListener("click", (event) => {
|
|
3490
|
+
const targetElement = event.target.closest(
|
|
3491
|
+
'px-button[slot="footer"]'
|
|
3492
|
+
);
|
|
3493
|
+
if (targetElement) {
|
|
3031
3494
|
this._hidePopover();
|
|
3032
|
-
}
|
|
3495
|
+
}
|
|
3033
3496
|
});
|
|
3034
3497
|
if (this.autoShow != null) {
|
|
3035
3498
|
(_a = this.showPopover) == null ? void 0 : _a.call(this);
|
|
@@ -3065,12 +3528,12 @@ if (!customElements.get("px-modal")) {
|
|
|
3065
3528
|
}
|
|
3066
3529
|
const spanCss = "span,::slotted(span){font-family:var(--px-font-family);color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m)}:host([inverted]) span,:host([inverted]) ::slotted(span){color:var(--px-color-txt-body-inverted)}span.link{text-decoration:underline}@media only screen and (min-width: 64rem){span,::slotted(span){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 90rem){span,::slotted(span){font-size:var(--px-text-size-base-desktop)}}";
|
|
3067
3530
|
const spanStyles$1 = new CSSStyleSheet();
|
|
3068
|
-
const typographyStyles$
|
|
3531
|
+
const typographyStyles$4 = new CSSStyleSheet();
|
|
3069
3532
|
spanStyles$1.replaceSync(spanCss);
|
|
3070
|
-
typographyStyles$
|
|
3533
|
+
typographyStyles$4.replaceSync(typographyCss$1);
|
|
3071
3534
|
const _Span = class _Span extends PxElement {
|
|
3072
3535
|
constructor() {
|
|
3073
|
-
super(spanStyles$1, typographyStyles$
|
|
3536
|
+
super(spanStyles$1, typographyStyles$4);
|
|
3074
3537
|
this.template = () => `<span>
|
|
3075
3538
|
<slot name="before"></slot>
|
|
3076
3539
|
<slot></slot>
|
|
@@ -3082,8 +3545,8 @@ const _Span = class _Span extends PxElement {
|
|
|
3082
3545
|
return [
|
|
3083
3546
|
...super.observedAttributes,
|
|
3084
3547
|
"color",
|
|
3085
|
-
"
|
|
3086
|
-
"
|
|
3548
|
+
"font-size",
|
|
3549
|
+
"font-weight",
|
|
3087
3550
|
"inverted"
|
|
3088
3551
|
];
|
|
3089
3552
|
}
|
|
@@ -3094,16 +3557,16 @@ const _Span = class _Span extends PxElement {
|
|
|
3094
3557
|
this.setAttribute("color", value);
|
|
3095
3558
|
}
|
|
3096
3559
|
get fontsize() {
|
|
3097
|
-
return this.getAttribute("
|
|
3560
|
+
return this.getAttribute("font-size");
|
|
3098
3561
|
}
|
|
3099
3562
|
set fontsize(value) {
|
|
3100
|
-
this.setAttribute("
|
|
3563
|
+
this.setAttribute("font-size", value);
|
|
3101
3564
|
}
|
|
3102
3565
|
get fontweight() {
|
|
3103
|
-
return this.getAttribute("
|
|
3566
|
+
return this.getAttribute("font-weight");
|
|
3104
3567
|
}
|
|
3105
3568
|
set fontweight(value) {
|
|
3106
|
-
this.setAttribute("
|
|
3569
|
+
this.setAttribute("font-weight", value);
|
|
3107
3570
|
}
|
|
3108
3571
|
get inverted() {
|
|
3109
3572
|
return this.getAttribute("inverted");
|
|
@@ -3121,10 +3584,10 @@ const _Span = class _Span extends PxElement {
|
|
|
3121
3584
|
case "color":
|
|
3122
3585
|
this.updateTypography(attrName, oldValue, newValue, colorValues$1);
|
|
3123
3586
|
break;
|
|
3124
|
-
case "
|
|
3587
|
+
case "font-size":
|
|
3125
3588
|
this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
|
|
3126
3589
|
break;
|
|
3127
|
-
case "
|
|
3590
|
+
case "font-weight":
|
|
3128
3591
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
3129
3592
|
break;
|
|
3130
3593
|
default:
|
|
@@ -3151,15 +3614,15 @@ const _Span = class _Span extends PxElement {
|
|
|
3151
3614
|
_Span.nativeName = "span";
|
|
3152
3615
|
let Span = _Span;
|
|
3153
3616
|
customElements.define("px-span", Span);
|
|
3154
|
-
const linkCss = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover
|
|
3155
|
-
const buttonCss =
|
|
3617
|
+
const linkCss = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(span[slot="after"]),a ::slotted(span[slot="before"]),.link ::slotted(span[slot="after"]),.link ::slotted(span[slot="before"]){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}';
|
|
3618
|
+
const buttonCss = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}";
|
|
3156
3619
|
const linkStyles$1 = new CSSStyleSheet();
|
|
3157
3620
|
const buttonStyles = new CSSStyleSheet();
|
|
3158
|
-
const typographyStyles$
|
|
3621
|
+
const typographyStyles$3 = new CSSStyleSheet();
|
|
3159
3622
|
linkStyles$1.replaceSync(linkCss);
|
|
3160
3623
|
buttonStyles.replaceSync(buttonCss);
|
|
3161
|
-
typographyStyles$
|
|
3162
|
-
const
|
|
3624
|
+
typographyStyles$3.replaceSync(typographyCss$1);
|
|
3625
|
+
const linkVariantValues = [
|
|
3163
3626
|
"link",
|
|
3164
3627
|
"no-style",
|
|
3165
3628
|
"skip-link",
|
|
@@ -3169,7 +3632,7 @@ const variantValues$1 = [
|
|
|
3169
3632
|
];
|
|
3170
3633
|
const _Link = class _Link extends PxElement {
|
|
3171
3634
|
constructor() {
|
|
3172
|
-
super(linkStyles$1, buttonStyles, typographyStyles$
|
|
3635
|
+
super(linkStyles$1, buttonStyles, typographyStyles$3);
|
|
3173
3636
|
this.shapeValues = ["", "default", "alternative"];
|
|
3174
3637
|
this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
|
|
3175
3638
|
const $root = document.createElement(this.nativeName);
|
|
@@ -3184,58 +3647,31 @@ const _Link = class _Link extends PxElement {
|
|
|
3184
3647
|
"shape",
|
|
3185
3648
|
"extended",
|
|
3186
3649
|
"inverted",
|
|
3187
|
-
"
|
|
3650
|
+
"font-size",
|
|
3188
3651
|
"color",
|
|
3189
|
-
"
|
|
3652
|
+
"font-weight"
|
|
3190
3653
|
];
|
|
3191
3654
|
}
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
|
|
3198
|
-
|
|
3199
|
-
|
|
3200
|
-
|
|
3201
|
-
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
|
|
3206
|
-
|
|
3207
|
-
|
|
3208
|
-
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
|
|
3212
|
-
}
|
|
3213
|
-
set extended(value) {
|
|
3214
|
-
this.setAttribute("extended", value);
|
|
3215
|
-
}
|
|
3216
|
-
get inverted() {
|
|
3217
|
-
return this.getAttribute("inverted");
|
|
3218
|
-
}
|
|
3219
|
-
set inverted(value) {
|
|
3220
|
-
this.setAttribute("inverted", value);
|
|
3221
|
-
}
|
|
3222
|
-
get fontsize() {
|
|
3223
|
-
return this.getAttribute("fontsize");
|
|
3224
|
-
}
|
|
3225
|
-
set fontsize(value) {
|
|
3226
|
-
this.setAttribute("fontsize", value);
|
|
3227
|
-
}
|
|
3228
|
-
get color() {
|
|
3229
|
-
return this.getAttribute("color");
|
|
3230
|
-
}
|
|
3231
|
-
set color(value) {
|
|
3232
|
-
this.setAttribute("color", value);
|
|
3233
|
-
}
|
|
3234
|
-
get fontweight() {
|
|
3235
|
-
return this.getAttribute("fontweight");
|
|
3236
|
-
}
|
|
3237
|
-
set fontweight(value) {
|
|
3238
|
-
this.setAttribute("fontweight", value);
|
|
3655
|
+
connectedCallback() {
|
|
3656
|
+
super.connectedCallback();
|
|
3657
|
+
const icons = this.querySelectorAll("px-icon");
|
|
3658
|
+
if (icons) {
|
|
3659
|
+
icons.forEach((icon) => {
|
|
3660
|
+
const iconSize = icon.getAttribute("size");
|
|
3661
|
+
const iconColor = icon.getAttribute("color");
|
|
3662
|
+
if (icon) {
|
|
3663
|
+
icon.addEventListener("click", () => {
|
|
3664
|
+
this.$el.focus();
|
|
3665
|
+
});
|
|
3666
|
+
if (!iconSize) {
|
|
3667
|
+
icon.setAttribute("size", "xs");
|
|
3668
|
+
}
|
|
3669
|
+
if (!iconColor) {
|
|
3670
|
+
icon.setAttribute("color", "inherit");
|
|
3671
|
+
}
|
|
3672
|
+
}
|
|
3673
|
+
});
|
|
3674
|
+
}
|
|
3239
3675
|
}
|
|
3240
3676
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
3241
3677
|
if (oldValue !== newValue) {
|
|
@@ -3255,13 +3691,13 @@ const _Link = class _Link extends PxElement {
|
|
|
3255
3691
|
case "extended":
|
|
3256
3692
|
this.$el.classList.toggle(attrName);
|
|
3257
3693
|
break;
|
|
3258
|
-
case "
|
|
3694
|
+
case "font-size":
|
|
3259
3695
|
this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
|
|
3260
3696
|
break;
|
|
3261
3697
|
case "color":
|
|
3262
3698
|
this.updateTypography(attrName, oldValue, newValue, colorValues$1);
|
|
3263
3699
|
break;
|
|
3264
|
-
case "
|
|
3700
|
+
case "font-weight":
|
|
3265
3701
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
3266
3702
|
break;
|
|
3267
3703
|
default:
|
|
@@ -3290,7 +3726,7 @@ const _Link = class _Link extends PxElement {
|
|
|
3290
3726
|
if (newValue !== null && newValue !== "" && newValue !== "link") {
|
|
3291
3727
|
this._toggleClassList(newValue);
|
|
3292
3728
|
}
|
|
3293
|
-
if (!this.checkName(
|
|
3729
|
+
if (!this.checkName(linkVariantValues, newValue)) {
|
|
3294
3730
|
console.error(`Bad "variant" value for ${this.$el}`);
|
|
3295
3731
|
}
|
|
3296
3732
|
}
|
|
@@ -3316,34 +3752,70 @@ const _Link = class _Link extends PxElement {
|
|
|
3316
3752
|
console.error(`Bad ${attrName} value for ${this.$el}`);
|
|
3317
3753
|
}
|
|
3318
3754
|
}
|
|
3755
|
+
get disabled() {
|
|
3756
|
+
return this.getAttribute("disabled");
|
|
3757
|
+
}
|
|
3758
|
+
set disabled(value) {
|
|
3759
|
+
this.setAttribute("disabled", value);
|
|
3760
|
+
}
|
|
3761
|
+
get variant() {
|
|
3762
|
+
return this.getAttribute("variant");
|
|
3763
|
+
}
|
|
3764
|
+
set variant(value) {
|
|
3765
|
+
this.setAttribute("variant", value);
|
|
3766
|
+
}
|
|
3767
|
+
get shape() {
|
|
3768
|
+
return this.getAttribute("shape");
|
|
3769
|
+
}
|
|
3770
|
+
set shape(value) {
|
|
3771
|
+
this.setAttribute("shape", value);
|
|
3772
|
+
}
|
|
3773
|
+
get extended() {
|
|
3774
|
+
return this.getAttribute("extended");
|
|
3775
|
+
}
|
|
3776
|
+
set extended(value) {
|
|
3777
|
+
this.setAttribute("extended", value);
|
|
3778
|
+
}
|
|
3779
|
+
get inverted() {
|
|
3780
|
+
return this.getAttribute("inverted");
|
|
3781
|
+
}
|
|
3782
|
+
set inverted(value) {
|
|
3783
|
+
this.setAttribute("inverted", value);
|
|
3784
|
+
}
|
|
3785
|
+
get fontsize() {
|
|
3786
|
+
return this.getAttribute("font-size");
|
|
3787
|
+
}
|
|
3788
|
+
set fontsize(value) {
|
|
3789
|
+
this.setAttribute("font-size", value);
|
|
3790
|
+
}
|
|
3791
|
+
get color() {
|
|
3792
|
+
return this.getAttribute("color");
|
|
3793
|
+
}
|
|
3794
|
+
set color(value) {
|
|
3795
|
+
this.setAttribute("color", value);
|
|
3796
|
+
}
|
|
3797
|
+
get fontweight() {
|
|
3798
|
+
return this.getAttribute("font-weight");
|
|
3799
|
+
}
|
|
3800
|
+
set fontweight(value) {
|
|
3801
|
+
this.setAttribute("font-weight", value);
|
|
3802
|
+
}
|
|
3319
3803
|
};
|
|
3320
3804
|
_Link.nativeName = "a";
|
|
3321
3805
|
let Link = _Link;
|
|
3322
3806
|
if (!customElements.get("px-a")) {
|
|
3323
3807
|
customElements.define("px-a", Link);
|
|
3324
3808
|
}
|
|
3325
|
-
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);margin:0}.
|
|
3809
|
+
const paragraphCss = "p,::slotted(p){font-family:var(--px-font-family);color:var(--px-color-txt-body-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);margin:0}.text-align-left{text-align:left}.text-align-center{text-align:center}.text-align-right{text-align:right}:host([inverted]) p,:host([inverted]) ::slotted(p){color:var(--px-color-txt-body-inverted)}@media only screen and (min-width: 64rem){p,::slotted(p){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 90rem){p,::slotted(p){font-size:var(--px-text-size-base-desktop)}}";
|
|
3326
3810
|
const paragraphStyles$1 = new CSSStyleSheet();
|
|
3327
|
-
const typographyStyles$
|
|
3811
|
+
const typographyStyles$2 = new CSSStyleSheet();
|
|
3328
3812
|
const headingStyles$1 = new CSSStyleSheet();
|
|
3329
3813
|
paragraphStyles$1.replaceSync(paragraphCss);
|
|
3330
|
-
typographyStyles$
|
|
3814
|
+
typographyStyles$2.replaceSync(typographyCss$1);
|
|
3331
3815
|
headingStyles$1.replaceSync(headingCss);
|
|
3332
|
-
const variantValues = [
|
|
3333
|
-
"",
|
|
3334
|
-
"default",
|
|
3335
|
-
"h1",
|
|
3336
|
-
"h2",
|
|
3337
|
-
"h3",
|
|
3338
|
-
"h4",
|
|
3339
|
-
"h5",
|
|
3340
|
-
"h6",
|
|
3341
|
-
"subtitle"
|
|
3342
|
-
];
|
|
3343
|
-
const textalignValues = ["", "default", "left", "center", "right"];
|
|
3344
3816
|
const _Paragraph = class _Paragraph extends PxElement {
|
|
3345
3817
|
constructor() {
|
|
3346
|
-
super(paragraphStyles$1, typographyStyles$
|
|
3818
|
+
super(paragraphStyles$1, typographyStyles$2, headingStyles$1);
|
|
3347
3819
|
this.template = () => `<p><slot></slot></p>`;
|
|
3348
3820
|
this.shadowRoot.innerHTML = this.template();
|
|
3349
3821
|
}
|
|
@@ -3352,64 +3824,28 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
3352
3824
|
...super.observedAttributes,
|
|
3353
3825
|
"variant",
|
|
3354
3826
|
"color",
|
|
3355
|
-
"
|
|
3356
|
-
"
|
|
3357
|
-
"
|
|
3827
|
+
"font-size",
|
|
3828
|
+
"font-weight",
|
|
3829
|
+
"text-align",
|
|
3358
3830
|
"inverted"
|
|
3359
3831
|
];
|
|
3360
3832
|
}
|
|
3361
|
-
get variant() {
|
|
3362
|
-
return this.getAttribute("variant");
|
|
3363
|
-
}
|
|
3364
|
-
set variant(value) {
|
|
3365
|
-
this.setAttribute("variant", value);
|
|
3366
|
-
}
|
|
3367
|
-
get color() {
|
|
3368
|
-
return this.getAttribute("color");
|
|
3369
|
-
}
|
|
3370
|
-
set color(value) {
|
|
3371
|
-
this.setAttribute("color", value);
|
|
3372
|
-
}
|
|
3373
|
-
get fontsize() {
|
|
3374
|
-
return this.getAttribute("fontsize");
|
|
3375
|
-
}
|
|
3376
|
-
set fontsize(value) {
|
|
3377
|
-
this.setAttribute("fontsize", value);
|
|
3378
|
-
}
|
|
3379
|
-
get fontweight() {
|
|
3380
|
-
return this.getAttribute("fontweight");
|
|
3381
|
-
}
|
|
3382
|
-
set fontweight(value) {
|
|
3383
|
-
this.setAttribute("fontweight", value);
|
|
3384
|
-
}
|
|
3385
|
-
get textalign() {
|
|
3386
|
-
return this.getAttribute("textalign");
|
|
3387
|
-
}
|
|
3388
|
-
set textalign(value) {
|
|
3389
|
-
this.setAttribute("textalign", value);
|
|
3390
|
-
}
|
|
3391
|
-
get inverted() {
|
|
3392
|
-
return this.getAttribute("inverted");
|
|
3393
|
-
}
|
|
3394
|
-
set inverted(value) {
|
|
3395
|
-
this.setAttribute("inverted", value);
|
|
3396
|
-
}
|
|
3397
3833
|
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
3398
3834
|
if (oldValue !== newValue) {
|
|
3399
3835
|
switch (attrName) {
|
|
3400
3836
|
case "variant":
|
|
3401
|
-
this.
|
|
3837
|
+
this.updateVariant(attrName, oldValue, newValue, headingValues);
|
|
3402
3838
|
break;
|
|
3403
3839
|
case "color":
|
|
3404
3840
|
this.updateTypography(attrName, oldValue, newValue, colorValues$1);
|
|
3405
3841
|
break;
|
|
3406
|
-
case "
|
|
3842
|
+
case "font-size":
|
|
3407
3843
|
this.updateTypography(attrName, oldValue, newValue, fontsizeValues);
|
|
3408
3844
|
break;
|
|
3409
|
-
case "
|
|
3845
|
+
case "font-weight":
|
|
3410
3846
|
this.updateTypography(attrName, oldValue, newValue, fontweightValues);
|
|
3411
3847
|
break;
|
|
3412
|
-
case "
|
|
3848
|
+
case "text-align":
|
|
3413
3849
|
this.updateTypography(attrName, oldValue, newValue, textalignValues);
|
|
3414
3850
|
break;
|
|
3415
3851
|
default:
|
|
@@ -3420,20 +3856,21 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
3420
3856
|
}
|
|
3421
3857
|
toggleClass(oldValue, newValue) {
|
|
3422
3858
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
3423
|
-
this.$el.classList.toggle(oldValue);
|
|
3859
|
+
this.$el.classList.toggle(`style-${oldValue}`);
|
|
3424
3860
|
}
|
|
3425
3861
|
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
3426
|
-
this.$el.classList.toggle(newValue);
|
|
3862
|
+
this.$el.classList.toggle(`style-${newValue}`);
|
|
3427
3863
|
}
|
|
3428
3864
|
}
|
|
3429
3865
|
checkName(values, value) {
|
|
3430
3866
|
return values.includes(value);
|
|
3431
3867
|
}
|
|
3432
|
-
|
|
3433
|
-
this.toggleClass(oldValue, newValue);
|
|
3868
|
+
updateVariant(attrName, oldValue, newValue, attrValue) {
|
|
3434
3869
|
if (!this.checkName(attrValue, newValue)) {
|
|
3435
3870
|
console.error(`Bad ${attrName} value for ${this.$el}`);
|
|
3436
|
-
}
|
|
3871
|
+
} else {
|
|
3872
|
+
this.toggleClass(oldValue, newValue);
|
|
3873
|
+
}
|
|
3437
3874
|
}
|
|
3438
3875
|
updateTypography(attrName, oldValue, newValue, attrValue) {
|
|
3439
3876
|
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
@@ -3446,18 +3883,54 @@ const _Paragraph = class _Paragraph extends PxElement {
|
|
|
3446
3883
|
console.error(`Bad ${attrName} value for ${this.$el}`);
|
|
3447
3884
|
}
|
|
3448
3885
|
}
|
|
3886
|
+
get variant() {
|
|
3887
|
+
return this.getAttribute("variant");
|
|
3888
|
+
}
|
|
3889
|
+
set variant(value) {
|
|
3890
|
+
this.setAttribute("variant", value);
|
|
3891
|
+
}
|
|
3892
|
+
get color() {
|
|
3893
|
+
return this.getAttribute("color");
|
|
3894
|
+
}
|
|
3895
|
+
set color(value) {
|
|
3896
|
+
this.setAttribute("color", value);
|
|
3897
|
+
}
|
|
3898
|
+
get fontsize() {
|
|
3899
|
+
return this.getAttribute("font-size");
|
|
3900
|
+
}
|
|
3901
|
+
set fontsize(value) {
|
|
3902
|
+
this.setAttribute("font-size", value);
|
|
3903
|
+
}
|
|
3904
|
+
get fontweight() {
|
|
3905
|
+
return this.getAttribute("font-weight");
|
|
3906
|
+
}
|
|
3907
|
+
set fontweight(value) {
|
|
3908
|
+
this.setAttribute("font-weight", value);
|
|
3909
|
+
}
|
|
3910
|
+
get textalign() {
|
|
3911
|
+
return this.getAttribute("text-align");
|
|
3912
|
+
}
|
|
3913
|
+
set textalign(value) {
|
|
3914
|
+
this.setAttribute("text-align", value);
|
|
3915
|
+
}
|
|
3916
|
+
get inverted() {
|
|
3917
|
+
return this.getAttribute("inverted");
|
|
3918
|
+
}
|
|
3919
|
+
set inverted(value) {
|
|
3920
|
+
this.setAttribute("inverted", value);
|
|
3921
|
+
}
|
|
3449
3922
|
};
|
|
3450
3923
|
_Paragraph.nativeName = "p";
|
|
3451
3924
|
let Paragraph = _Paragraph;
|
|
3452
3925
|
customElements.define("px-p", Paragraph);
|
|
3453
3926
|
const typographyCss = "*{font-family:var(--px-font-family)}::slotted(ul),::slotted(ol){margin:0 0 0 var(--px-spacing-component-default-horizontal);padding:0}::slotted(b),::slotted(strong){font-weight:700}:host([inverted]) slot{color:var(--px-color-txt-body-inverted)}";
|
|
3454
3927
|
const lightStyles = ".li{padding-bottom:var(--px-padding-xs)}";
|
|
3455
|
-
const typographyStyles = new CSSStyleSheet();
|
|
3928
|
+
const typographyStyles$1 = new CSSStyleSheet();
|
|
3456
3929
|
const headingStyles = new CSSStyleSheet();
|
|
3457
3930
|
const linkStyles = new CSSStyleSheet();
|
|
3458
3931
|
const paragraphStyles = new CSSStyleSheet();
|
|
3459
3932
|
const spanStyles = new CSSStyleSheet();
|
|
3460
|
-
typographyStyles.replaceSync(typographyCss);
|
|
3933
|
+
typographyStyles$1.replaceSync(typographyCss);
|
|
3461
3934
|
headingStyles.replaceSync(headingCss);
|
|
3462
3935
|
linkStyles.replaceSync(linkCss);
|
|
3463
3936
|
paragraphStyles.replaceSync(paragraphCss);
|
|
@@ -3470,7 +3943,7 @@ class Typography extends HTMLElement {
|
|
|
3470
3943
|
this.attachShadow({ mode: "open" });
|
|
3471
3944
|
this.shadowRoot.innerHTML = this.template();
|
|
3472
3945
|
this.shadowRoot.adoptedStyleSheets = [
|
|
3473
|
-
typographyStyles,
|
|
3946
|
+
typographyStyles$1,
|
|
3474
3947
|
headingStyles,
|
|
3475
3948
|
linkStyles,
|
|
3476
3949
|
paragraphStyles,
|
|
@@ -3493,9 +3966,359 @@ class Typography extends HTMLElement {
|
|
|
3493
3966
|
}
|
|
3494
3967
|
}
|
|
3495
3968
|
customElements.define("px-typography", Typography);
|
|
3969
|
+
const buttonIconCss = ".btn-icon{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;cursor:pointer;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-bg-action-primary-default);color:var(--px-color-icon-primary-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs);border:var(--px-border-m) solid transparent}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-bg-action-hover-bordered-default);color:var(--px-color-icon-primary-default);border-color:var(--px-color-border-action-hover-default)}.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-icon-primary-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs)}.btn-icon--variant-secondary{background-color:var(--px-color-bg-action-secondary-default);color:var(--px-color-icon-primary-default)}:host([inverted]) .btn-icon{background:var(--px-color-bg-action-primary-inverted);color:var(--px-color-icon-primary-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-bg-action-hover-bordered-default);color:var(--px-color-icon-primary-inverted);border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn-icon:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-icon-primary-inverted);border-color:transparent}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-bg-action-secondary-inverted);color:var(--px-color-icon-primary-inverted)}@media screen and (min-width: 1441px){.btn-icon:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}}";
|
|
3970
|
+
const buttonIconStyles = new CSSStyleSheet();
|
|
3971
|
+
buttonIconStyles.replaceSync(buttonIconCss);
|
|
3972
|
+
const sizeValues = ["", "default", "small"];
|
|
3973
|
+
const variantValues = ["", "default", "secondary"];
|
|
3974
|
+
const _ButtonIcon = class _ButtonIcon extends PxElement {
|
|
3975
|
+
constructor() {
|
|
3976
|
+
super(buttonIconStyles);
|
|
3977
|
+
this.template = () => `<slot></slot>`;
|
|
3978
|
+
const $root = document.createElement(this.nativeName);
|
|
3979
|
+
$root.classList.add("btn-icon");
|
|
3980
|
+
$root.innerHTML = this.template();
|
|
3981
|
+
this.shadowRoot.appendChild($root);
|
|
3982
|
+
}
|
|
3983
|
+
static get observedAttributes() {
|
|
3984
|
+
return [
|
|
3985
|
+
...super.observedAttributes,
|
|
3986
|
+
"inverted",
|
|
3987
|
+
"loading",
|
|
3988
|
+
"size",
|
|
3989
|
+
"variant"
|
|
3990
|
+
];
|
|
3991
|
+
}
|
|
3992
|
+
connectedCallback() {
|
|
3993
|
+
super.connectedCallback();
|
|
3994
|
+
const icon = this.querySelector("px-icon");
|
|
3995
|
+
if (icon) {
|
|
3996
|
+
const iconSize = icon.getAttribute("size");
|
|
3997
|
+
const iconColor = icon.getAttribute("color");
|
|
3998
|
+
icon.addEventListener("click", () => {
|
|
3999
|
+
this.$el.focus();
|
|
4000
|
+
});
|
|
4001
|
+
if (!iconSize) {
|
|
4002
|
+
icon.setAttribute("size", "xs");
|
|
4003
|
+
}
|
|
4004
|
+
if (!iconColor) {
|
|
4005
|
+
icon.setAttribute("color", "inherit");
|
|
4006
|
+
}
|
|
4007
|
+
}
|
|
4008
|
+
}
|
|
4009
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
4010
|
+
if (oldValue !== newValue) {
|
|
4011
|
+
switch (attrName) {
|
|
4012
|
+
case "loading":
|
|
4013
|
+
this.updateLoading();
|
|
4014
|
+
break;
|
|
4015
|
+
case "size":
|
|
4016
|
+
this.updateSize(oldValue, newValue, sizeValues);
|
|
4017
|
+
break;
|
|
4018
|
+
case "variant":
|
|
4019
|
+
this.updateVariant(oldValue, newValue, variantValues);
|
|
4020
|
+
break;
|
|
4021
|
+
default:
|
|
4022
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4023
|
+
break;
|
|
4024
|
+
}
|
|
4025
|
+
}
|
|
4026
|
+
}
|
|
4027
|
+
checkName(values, value) {
|
|
4028
|
+
return values.includes(value);
|
|
4029
|
+
}
|
|
4030
|
+
_toggleClass(oldValue, newValue) {
|
|
4031
|
+
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
4032
|
+
this.$el.classList.toggle(oldValue);
|
|
4033
|
+
}
|
|
4034
|
+
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
4035
|
+
this.$el.classList.toggle(newValue);
|
|
4036
|
+
}
|
|
4037
|
+
}
|
|
4038
|
+
updateLoading() {
|
|
4039
|
+
this.$el.classList.toggle(`btn-icon--state-loading`);
|
|
4040
|
+
}
|
|
4041
|
+
updateSize(oldValue, newValue, attrValue) {
|
|
4042
|
+
if (!this.checkName(attrValue, newValue)) {
|
|
4043
|
+
console.error(`Bad size value for`, this.$el);
|
|
4044
|
+
} else {
|
|
4045
|
+
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
4046
|
+
this.$el.classList.toggle(`btn-icon--size-${oldValue}`);
|
|
4047
|
+
}
|
|
4048
|
+
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
4049
|
+
this.$el.classList.toggle(`btn-icon--size-${newValue}`);
|
|
4050
|
+
}
|
|
4051
|
+
}
|
|
4052
|
+
}
|
|
4053
|
+
updateVariant(oldValue, newValue, attrValue) {
|
|
4054
|
+
if (!this.checkName(attrValue, newValue)) {
|
|
4055
|
+
console.error(`Bad "variant" value for ${this.$el}`);
|
|
4056
|
+
} else {
|
|
4057
|
+
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
4058
|
+
this.$el.classList.toggle(`btn-icon--variant-${oldValue}`);
|
|
4059
|
+
}
|
|
4060
|
+
if (newValue !== null && newValue !== "" && newValue !== "default") {
|
|
4061
|
+
this.$el.classList.toggle(`btn-icon--variant-${newValue}`);
|
|
4062
|
+
}
|
|
4063
|
+
}
|
|
4064
|
+
}
|
|
4065
|
+
get inverted() {
|
|
4066
|
+
return this.getAttribute("inverted");
|
|
4067
|
+
}
|
|
4068
|
+
set inverted(value) {
|
|
4069
|
+
this.setAttribute("inverted", value);
|
|
4070
|
+
}
|
|
4071
|
+
get loading() {
|
|
4072
|
+
return this.getAttribute("loading");
|
|
4073
|
+
}
|
|
4074
|
+
set loading(value) {
|
|
4075
|
+
this.setAttribute("loading", value);
|
|
4076
|
+
}
|
|
4077
|
+
get size() {
|
|
4078
|
+
return this.getAttribute("size");
|
|
4079
|
+
}
|
|
4080
|
+
set size(value) {
|
|
4081
|
+
this.setAttribute("size", value);
|
|
4082
|
+
}
|
|
4083
|
+
get variant() {
|
|
4084
|
+
return this.getAttribute("variant");
|
|
4085
|
+
}
|
|
4086
|
+
set variant(value) {
|
|
4087
|
+
this.setAttribute("variant", value);
|
|
4088
|
+
}
|
|
4089
|
+
};
|
|
4090
|
+
_ButtonIcon.nativeName = "button";
|
|
4091
|
+
let ButtonIcon = _ButtonIcon;
|
|
4092
|
+
if (!customElements.get("px-button-icon")) {
|
|
4093
|
+
customElements.define("px-button-icon", ButtonIcon);
|
|
4094
|
+
}
|
|
4095
|
+
const entrypointCss = "a{display:block;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-main);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}a,a *{box-sizing:border-box}a px-icon,a ::slotted(px-icon){line-height:0;color:var(--px-color-txt-primary-default)}a slot[name=description]{font-weight:400;color:var(--px-color-txt-details-default)}a:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default);color:var(--px-color-txt-primary-default)}a:hover:not([disabled],[aria-disabled=true],.loading) slot[name=description]{color:var(--px-color-txt-primary-default)}a:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a:active{transform:scale(.95)}a[disabled],a[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a[disabled] px-icon,a[disabled] ::slotted(px-icon),a[disabled] slot[name=description],a[aria-disabled=true] px-icon,a[aria-disabled=true] ::slotted(px-icon),a[aria-disabled=true] slot[name=description]{color:var(--px-color-txt-disabled-default)}:host([inverted]) a{color:var(--px-color-txt-primary-inverted)}:host([inverted]) a px-icon,:host([inverted]) a ::slotted(px-icon){color:var(--px-color-txt-primary-inverted)}:host([inverted]) a slot[name=description]{color:var(--px-color-txt-details-inverted)}:host([inverted]) a:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) a:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[disabled],:host([inverted]) a[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) a[disabled] px-icon,:host([inverted]) a[disabled] ::slotted(px-icon),:host([inverted]) a[disabled] slot[name=description],:host([inverted]) a[aria-disabled=true] px-icon,:host([inverted]) a[aria-disabled=true] ::slotted(px-icon),:host([inverted]) a[aria-disabled=true] slot[name=description]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){a{font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1025px){a{font-size:var(--px-text-size-base-desktop)}}";
|
|
4096
|
+
const entrypointStyles = new CSSStyleSheet();
|
|
4097
|
+
entrypointStyles.replaceSync(entrypointCss);
|
|
4098
|
+
const backgroundValues = ["", "default", "action-neutral"];
|
|
4099
|
+
const _Entrypoint = class _Entrypoint extends PxElement {
|
|
4100
|
+
constructor() {
|
|
4101
|
+
super(entrypointStyles);
|
|
4102
|
+
this.template = () => `
|
|
4103
|
+
<px-container padding="s">
|
|
4104
|
+
<px-hstack gap="component-compact-horizontal" align-items="center">
|
|
4105
|
+
<px-hstack grow="2" gap="component-compact-horizontal" align-items="center">
|
|
4106
|
+
<slot name="icon"></slot>
|
|
4107
|
+
<px-vstack gap="none" align-items="start">
|
|
4108
|
+
<slot></slot>
|
|
4109
|
+
<slot name="description"></slot>
|
|
4110
|
+
</px-vstack>
|
|
4111
|
+
</px-hstack>
|
|
4112
|
+
<px-icon name="${this.hasAttribute("target") && this.getAttribute("target") === "_blank" ? "target_blank" : "chevron_right"}" size="m" from="lavender" color="inherit" shrink="1"></px-icon>
|
|
4113
|
+
</px-hstack>
|
|
4114
|
+
</px-container>
|
|
4115
|
+
`;
|
|
4116
|
+
const $root = document.createElement(this.nativeName);
|
|
4117
|
+
$root.innerHTML = this.template();
|
|
4118
|
+
this.shadowRoot.appendChild($root);
|
|
4119
|
+
}
|
|
4120
|
+
static get observedAttributes() {
|
|
4121
|
+
return [
|
|
4122
|
+
...super.observedAttributes,
|
|
4123
|
+
"disabled",
|
|
4124
|
+
"inverted",
|
|
4125
|
+
"background-color"
|
|
4126
|
+
];
|
|
4127
|
+
}
|
|
4128
|
+
get $container() {
|
|
4129
|
+
return this.shadowRoot.querySelector("px-container");
|
|
4130
|
+
}
|
|
4131
|
+
connectedCallback() {
|
|
4132
|
+
super.connectedCallback();
|
|
4133
|
+
const icons = this.querySelectorAll("px-icon");
|
|
4134
|
+
if (icons) {
|
|
4135
|
+
icons.forEach((icon) => {
|
|
4136
|
+
const iconSize = icon.getAttribute("size");
|
|
4137
|
+
const iconColor = icon.getAttribute("color");
|
|
4138
|
+
if (icon) {
|
|
4139
|
+
icon.addEventListener("click", () => {
|
|
4140
|
+
this.$el.focus();
|
|
4141
|
+
});
|
|
4142
|
+
if (!iconSize) {
|
|
4143
|
+
icon.setAttribute("size", "m");
|
|
4144
|
+
}
|
|
4145
|
+
if (!iconColor) {
|
|
4146
|
+
icon.setAttribute("color", "inherit");
|
|
4147
|
+
}
|
|
4148
|
+
}
|
|
4149
|
+
});
|
|
4150
|
+
}
|
|
4151
|
+
}
|
|
4152
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
4153
|
+
if (oldValue !== newValue) {
|
|
4154
|
+
switch (attrName) {
|
|
4155
|
+
case "disabled":
|
|
4156
|
+
this.$el.toggleAttribute("aria-disabled");
|
|
4157
|
+
if (newValue !== null) {
|
|
4158
|
+
this.$el.setAttribute("aria-disabled", "true");
|
|
4159
|
+
this.$container.bgColor = "action-disabled";
|
|
4160
|
+
break;
|
|
4161
|
+
}
|
|
4162
|
+
break;
|
|
4163
|
+
case "inverted":
|
|
4164
|
+
this.$container.bgColor = "action-neutral";
|
|
4165
|
+
this.$container.inverted = this.inverted;
|
|
4166
|
+
break;
|
|
4167
|
+
case "target":
|
|
4168
|
+
this.updateIconName();
|
|
4169
|
+
break;
|
|
4170
|
+
case "background-color":
|
|
4171
|
+
this.updateBackgroundColor(
|
|
4172
|
+
attrName,
|
|
4173
|
+
oldValue,
|
|
4174
|
+
newValue,
|
|
4175
|
+
backgroundValues
|
|
4176
|
+
);
|
|
4177
|
+
break;
|
|
4178
|
+
default:
|
|
4179
|
+
super.attributeChangedCallback(attrName, oldValue, newValue);
|
|
4180
|
+
break;
|
|
4181
|
+
}
|
|
4182
|
+
}
|
|
4183
|
+
}
|
|
4184
|
+
checkName(values, value) {
|
|
4185
|
+
return values.includes(value);
|
|
4186
|
+
}
|
|
4187
|
+
updateIconName() {
|
|
4188
|
+
const icon = this.shadowRoot.querySelector("px-icon");
|
|
4189
|
+
if (icon) {
|
|
4190
|
+
icon.setAttribute(
|
|
4191
|
+
"name",
|
|
4192
|
+
this.hasAttribute("target") && this.getAttribute("target") === "_blank" ? "target_blank" : "chevron_right"
|
|
4193
|
+
);
|
|
4194
|
+
}
|
|
4195
|
+
}
|
|
4196
|
+
updateBackgroundColor(attrName, oldValue, newValue, attrValue) {
|
|
4197
|
+
if (!this.checkName(attrValue, newValue)) {
|
|
4198
|
+
console.error(`Bad "${attrName}" value for`, this.$el);
|
|
4199
|
+
}
|
|
4200
|
+
const updateColorStyle = (value) => {
|
|
4201
|
+
if (value !== null && value !== "" && value !== "default") {
|
|
4202
|
+
this.$container.bgColor = value;
|
|
4203
|
+
}
|
|
4204
|
+
};
|
|
4205
|
+
updateColorStyle(oldValue);
|
|
4206
|
+
updateColorStyle(newValue);
|
|
4207
|
+
}
|
|
4208
|
+
get disabled() {
|
|
4209
|
+
return this.getAttribute("disabled");
|
|
4210
|
+
}
|
|
4211
|
+
set disabled(value) {
|
|
4212
|
+
this.setAttribute("disabled", value);
|
|
4213
|
+
}
|
|
4214
|
+
get bgColor() {
|
|
4215
|
+
return this.getAttribute("background-color");
|
|
4216
|
+
}
|
|
4217
|
+
set bgColor(value) {
|
|
4218
|
+
this.setAttribute("background-color", value);
|
|
4219
|
+
}
|
|
4220
|
+
get inverted() {
|
|
4221
|
+
return this.getAttribute("inverted");
|
|
4222
|
+
}
|
|
4223
|
+
set inverted(value) {
|
|
4224
|
+
this.setAttribute("inverted", value);
|
|
4225
|
+
}
|
|
4226
|
+
};
|
|
4227
|
+
_Entrypoint.nativeName = "a";
|
|
4228
|
+
let Entrypoint = _Entrypoint;
|
|
4229
|
+
if (!customElements.get("px-entrypoint")) {
|
|
4230
|
+
customElements.define("px-entrypoint", Entrypoint);
|
|
4231
|
+
}
|
|
4232
|
+
const styles = ".spinner{display:inline-block;width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile);border-top:3px solid var(--px-color-txt-primary-default);border-right:3px solid transparent;border-radius:50%;animation:anim-spinner .7s linear infinite}.spinner,.spinner *{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:host([timeout]) .spinner{animation-iteration-count:7}}:host([inverted]) .spinner{border-top-color:var(--px-color-txt-primary-inverted)}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.size-2xs{width:var(--px-icon-size-2xs-mobile);height:var(--px-icon-size-2xs-mobile)}.size-xs{width:var(--px-icon-size-xs-mobile);height:var(--px-icon-size-xs-mobile)}.size-s{width:var(--px-icon-size-s-mobile);height:var(--px-icon-size-s-mobile)}.size-m{width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile)}.size-l{width:var(--px-icon-size-l-mobile);height:var(--px-icon-size-l-mobile)}.size-xl{width:var(--px-icon-size-xl-mobile);height:var(--px-icon-size-xl-mobile)}.size-2xl{width:var(--px-icon-size-2xl-mobile);height:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{width:var(--px-icon-size-2xs-tablet);height:var(--px-icon-size-2xs-tablet)}.size-xs{width:var(--px-icon-size-xs-tablet);height:var(--px-icon-size-xs-tablet)}.size-s{width:var(--px-icon-size-s-tablet);height:var(--px-icon-size-s-tablet)}.size-m{width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}.size-l{width:var(--px-icon-size-l-tablet);height:var(--px-icon-size-l-tablet)}.size-xl{width:var(--px-icon-size-xl-tablet);height:var(--px-icon-size-xl-tablet)}.size-2xl{width:var(--px-icon-size-2xl-tablet);height:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{width:var(--px-icon-size-2xs-desktop);height:var(--px-icon-size-2xs-desktop)}.size-xs{width:var(--px-icon-size-xs-desktop);height:var(--px-icon-size-xs-desktop)}.size-s{width:var(--px-icon-size-s-desktop);height:var(--px-icon-size-s-desktop)}.size-m{width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}.size-l{width:var(--px-icon-size-l-desktop);height:var(--px-icon-size-l-desktop)}.size-xl{width:var(--px-icon-size-xl-desktop);height:var(--px-icon-size-xl-desktop)}.size-2xl{width:var(--px-icon-size-2xl-desktop);height:var(--px-icon-size-2xl-desktop)}}";
|
|
4233
|
+
const styleSheet = new CSSStyleSheet();
|
|
4234
|
+
const typographyStyles = new CSSStyleSheet();
|
|
4235
|
+
styleSheet.replaceSync(styles);
|
|
4236
|
+
typographyStyles.replaceSync(typographyCss$1);
|
|
4237
|
+
class Spinner extends HTMLElement {
|
|
4238
|
+
template() {
|
|
4239
|
+
return `
|
|
4240
|
+
<div class="spinner">
|
|
4241
|
+
<slot></slot>
|
|
4242
|
+
</div>
|
|
4243
|
+
`;
|
|
4244
|
+
}
|
|
4245
|
+
constructor() {
|
|
4246
|
+
var _a;
|
|
4247
|
+
super();
|
|
4248
|
+
this.attachShadow({ mode: "open" });
|
|
4249
|
+
this.shadowRoot.innerHTML = this.template();
|
|
4250
|
+
this.internals = (_a = this.attachInternals) == null ? void 0 : _a.call(this);
|
|
4251
|
+
this.shadowRoot.adoptedStyleSheets = [styleSheet, typographyStyles];
|
|
4252
|
+
}
|
|
4253
|
+
static get observedAttributes() {
|
|
4254
|
+
return ["size", "inverted", "timeout", "aria-label"];
|
|
4255
|
+
}
|
|
4256
|
+
connectedCallback() {
|
|
4257
|
+
if (!this.ariaLabel && this.internals) {
|
|
4258
|
+
this.internals.ariaHidden = "true";
|
|
4259
|
+
}
|
|
4260
|
+
}
|
|
4261
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
|
4262
|
+
if (oldValue !== newValue) {
|
|
4263
|
+
switch (attrName) {
|
|
4264
|
+
case "size":
|
|
4265
|
+
this.updateAttribute(attrName, oldValue, newValue, iconSizeValues$1);
|
|
4266
|
+
break;
|
|
4267
|
+
case "aria-label":
|
|
4268
|
+
if (newValue !== "") {
|
|
4269
|
+
this.internals.ariaHidden = "false";
|
|
4270
|
+
}
|
|
4271
|
+
break;
|
|
4272
|
+
}
|
|
4273
|
+
}
|
|
4274
|
+
}
|
|
4275
|
+
configureAccessibility(value) {
|
|
4276
|
+
this.internals.ariaHidden = value;
|
|
4277
|
+
}
|
|
4278
|
+
updateAttribute(attrName, oldValue, newValue, attrValues) {
|
|
4279
|
+
if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
|
|
4280
|
+
this.$el.classList.toggle(`${attrName}-${oldValue}`);
|
|
4281
|
+
}
|
|
4282
|
+
if (newValue !== null && newValue !== "" && oldValue !== "default") {
|
|
4283
|
+
this.$el.classList.toggle(`${attrName}-${newValue}`);
|
|
4284
|
+
}
|
|
4285
|
+
if (!this.checkName(attrValues, newValue)) {
|
|
4286
|
+
console.error(
|
|
4287
|
+
`${newValue} is not an allowed ${attrName} value for ${this.$el}`
|
|
4288
|
+
);
|
|
4289
|
+
}
|
|
4290
|
+
}
|
|
4291
|
+
checkName(values, value) {
|
|
4292
|
+
return values.includes(value);
|
|
4293
|
+
}
|
|
4294
|
+
get $el() {
|
|
4295
|
+
return this.shadowRoot.querySelector(".spinner");
|
|
4296
|
+
}
|
|
4297
|
+
get size() {
|
|
4298
|
+
return this.getAttribute("size");
|
|
4299
|
+
}
|
|
4300
|
+
set size(value) {
|
|
4301
|
+
this.setAttribute("size", value);
|
|
4302
|
+
}
|
|
4303
|
+
get inverted() {
|
|
4304
|
+
return this.getAttribute("inverted");
|
|
4305
|
+
}
|
|
4306
|
+
set inverted(value) {
|
|
4307
|
+
this.setAttribute("inverted", value);
|
|
4308
|
+
}
|
|
4309
|
+
get timeout() {
|
|
4310
|
+
return this.getAttribute("timeout");
|
|
4311
|
+
}
|
|
4312
|
+
set timeout(value) {
|
|
4313
|
+
this.setAttribute("timeout", value);
|
|
4314
|
+
}
|
|
4315
|
+
}
|
|
4316
|
+
customElements.define("px-spinner", Spinner);
|
|
3496
4317
|
export {
|
|
3497
4318
|
Accordion,
|
|
4319
|
+
ButtonIcon,
|
|
3498
4320
|
Container,
|
|
4321
|
+
Entrypoint,
|
|
3499
4322
|
FontIcon,
|
|
3500
4323
|
H1,
|
|
3501
4324
|
H2,
|
|
@@ -3519,9 +4342,11 @@ export {
|
|
|
3519
4342
|
PxTabs,
|
|
3520
4343
|
Ribbon,
|
|
3521
4344
|
SVGIcon,
|
|
4345
|
+
Section,
|
|
3522
4346
|
Separator,
|
|
3523
4347
|
Spacer,
|
|
3524
4348
|
Span,
|
|
4349
|
+
Spinner,
|
|
3525
4350
|
Stack,
|
|
3526
4351
|
Tag,
|
|
3527
4352
|
Timeline,
|
|
@@ -3530,19 +4355,33 @@ export {
|
|
|
3530
4355
|
VStack,
|
|
3531
4356
|
WithFlexAttributes,
|
|
3532
4357
|
addGlobalStylesheet,
|
|
4358
|
+
backgroundValues,
|
|
3533
4359
|
bgColorValues,
|
|
4360
|
+
bgImgSizeValues,
|
|
3534
4361
|
borderRadiusValues,
|
|
3535
4362
|
borderValues,
|
|
3536
4363
|
colorValues$1 as colorValues,
|
|
3537
4364
|
fontsizeValues,
|
|
3538
4365
|
fontweightValues,
|
|
4366
|
+
gapValues,
|
|
3539
4367
|
getSupportedAttributeNames,
|
|
3540
4368
|
getViewportFormat,
|
|
3541
4369
|
gradientValues,
|
|
4370
|
+
gridGapValues,
|
|
4371
|
+
headingValues,
|
|
3542
4372
|
iconSizeValues$1 as iconSizeValues,
|
|
3543
4373
|
isFalsy,
|
|
4374
|
+
linkVariantValues,
|
|
4375
|
+
noBorderRadiusValues,
|
|
3544
4376
|
paddingValues,
|
|
4377
|
+
patchShapeValues,
|
|
4378
|
+
patchVariantValues,
|
|
4379
|
+
priceSizeValues,
|
|
4380
|
+
priceVariantValues,
|
|
3545
4381
|
shadowValues,
|
|
3546
|
-
sizeValues
|
|
3547
|
-
|
|
4382
|
+
sizeValues,
|
|
4383
|
+
tagShapeValues,
|
|
4384
|
+
tagVariantValues,
|
|
4385
|
+
textalignValues,
|
|
4386
|
+
variantValues
|
|
3548
4387
|
};
|