@proximus/lavender 1.0.0-alpha.6 → 1.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/lavender.cjs.js +1 -1
  2. package/dist/lavender.es.js +416 -355
  3. package/dist/lavender.umd.js +1 -1
  4. package/package.json +2 -2
package/dist/lavender.es.js CHANGED
@@ -590,7 +590,6 @@ class Stack extends WithFlexAttributes {
590
590
  }
591
591
  }
592
592
  getGapCSSVariable(newValue) {
593
- console.log(newValue);
594
593
  return gapValues.includes(newValue) ? `var(--px-spacing-${newValue})` : newValue;
595
594
  }
596
595
  get direction() {
@@ -861,18 +860,34 @@ class Page extends WithFlexAttributes {
861
860
  constructor() {
862
861
  super(proximusSemanticStyleSheet, styleSheet$a);
863
862
  this.template = (stickyContainer) => `
864
- <px-container borderradius="none" padding="none" >
863
+ <px-container borderradius="none" padding="none">
865
864
  <px-vstack>
866
- <px-container id="header-container" borderradius="none">
865
+ <px-container id="header-container" borderradius="none">
867
866
  <px-hstack>
868
867
  <px-spacer></px-spacer>
869
- <px-vstack id="header-vstack-container" gap="1rem" grow="${this.grow}" basis="${this.basis}">
868
+ <px-vstack
869
+ id="header-vstack-container"
870
+ gap="1rem"
871
+ grow="${this.grow}"
872
+ basis="${this.basis}"
873
+ >
870
874
  <slot name="header-container"></slot>
871
875
  </px-vstack>
872
876
  <px-spacer></px-spacer>
873
877
  </px-hstack>
874
878
  </px-container>
875
- <px-container id="image-container" borderradius="none" padding="none" paddingtop="xl" id="image-box" bgimgsize="cover" bgimgposition="top center" paddingbottom="xl" borderradius="none" bgimg="${this.backgroundImage}">
879
+ <px-container
880
+ id="image-container"
881
+ borderradius="none"
882
+ padding="none"
883
+ paddingtop="xl"
884
+ id="image-box"
885
+ bgimgsize="cover"
886
+ bgimgposition="top center"
887
+ paddingbottom="xl"
888
+ borderradius="none"
889
+ bgimg="${this.backgroundImage}"
890
+ >
876
891
  <px-hstack>
877
892
  <px-spacer></px-spacer>
878
893
  <px-vstack grow="${this.grow}" basis="${this.basis}">
@@ -890,25 +905,52 @@ class Page extends WithFlexAttributes {
890
905
  </px-container>
891
906
  <px-spacer></px-spacer>
892
907
  </px-hstack>` : ""}
893
- <px-container id="body-container" id="main" bgcolor="${this.backgroundColor}" padding="none" paddingtop="xl" paddingbottom="xl" >
908
+ <px-container
909
+ id="body-container"
910
+ id="main"
911
+ bgcolor="${this.backgroundColor}"
912
+ padding="none"
913
+ paddingtop="xl"
914
+ paddingbottom="xl"
915
+ >
894
916
  <px-hstack>
895
917
  <px-spacer></px-spacer>
896
- <px-vstack id="body-vstack-container" gap="3rem" grow="${this.grow}" basis="${this.basis}">
918
+ <px-vstack
919
+ id="body-vstack-container"
920
+ gap="3rem"
921
+ grow="${this.grow}"
922
+ basis="${this.basis}"
923
+ >
897
924
  <slot name="body-container"></slot>
898
925
  </px-vstack>
899
926
  <px-spacer></px-spacer>
900
927
  </px-hstack>
901
928
  </px-container>
902
- <px-container id="contact-container" borderradius="none" id="main" bgcolor="strong" padding="none" paddingtop="xl" paddingbottom="xl">
929
+ <px-container
930
+ id="contact-container"
931
+ borderradius="none"
932
+ id="main"
933
+ bgcolor="strong"
934
+ padding="none"
935
+ paddingtop="xl"
936
+ paddingbottom="xl"
937
+ >
903
938
  <px-hstack>
904
939
  <px-spacer></px-spacer>
905
- <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
940
+ <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
906
941
  <slot name="contact-container"></slot>
907
942
  </px-vstack>
908
943
  <px-spacer></px-spacer>
909
944
  </px-hstack>
910
945
  </px-container>
911
- <px-container id="footer-container" bgcolor="none" borderradius="none" style="background-color: rgb(108, 66, 156)" paddingtop="xl" paddingbottom="xl">
946
+ <px-container
947
+ id="footer-container"
948
+ bgcolor="none"
949
+ borderradius="none"
950
+ style="background-color: rgb(108, 66, 156)"
951
+ paddingtop="xl"
952
+ paddingbottom="xl"
953
+ >
912
954
  <px-hstack>
913
955
  <px-spacer></px-spacer>
914
956
  <px-vstack gap="3rem" grow="${this.grow}" basis="${this.basis}">
@@ -977,9 +1019,21 @@ class Page extends WithFlexAttributes {
977
1019
  set paddingHorizontal(value) {
978
1020
  this.setAttribute("padding-horizontal", value);
979
1021
  }
1022
+ get gap() {
1023
+ return this.getAttribute("gap");
1024
+ }
980
1025
  connectedCallback() {
981
1026
  this.handlePaddingVerticalChange(this.paddingVertical);
982
1027
  this.handlePaddingHorizontalChange(this.paddingHorizontal);
1028
+ this.attributeChangedCallback("background-image", "", this.backgroundImage);
1029
+ this.attributeChangedCallback("gap", "", this.gap);
1030
+ this.attributeChangedCallback("background-color", "", this.backgroundColor);
1031
+ this.attributeChangedCallback("padding-vertical", "", this.paddingVertical);
1032
+ this.attributeChangedCallback(
1033
+ "padding-horizontal",
1034
+ "",
1035
+ this.paddingHorizontal
1036
+ );
983
1037
  }
984
1038
  attributeChangedCallback(name, oldValue, newValue) {
985
1039
  if (oldValue !== newValue) {
@@ -1024,114 +1078,42 @@ class Page extends WithFlexAttributes {
1024
1078
  if (customElements.get("px-page") === void 0) {
1025
1079
  customElements.define("px-page", Page);
1026
1080
  }
1027
- const accordionCss = `details{font-family:Proximus,Verdana,Helvetica,sans-serif;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-moderate-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-inverted-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-border-action-hover-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-hover-inverted-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`;
1028
- const accordionStyles = new CSSStyleSheet();
1029
- accordionStyles.replaceSync(accordionCss);
1030
- const variantValues$3 = ["", "none", "single"];
1031
- const _Accordion = class _Accordion extends PxElement {
1081
+ const styles$a = ':host{line-height:1;display:inline-block;vertical-align:middle}i{font-family:PxIcon;color:var(--px-color-icon-primary-default);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}.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,: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{font-size:var(--px-icon-size-2xs-mobile)}.size-xs{font-size:var(--px-icon-size-xs-mobile)}.size-s{font-size:var(--px-icon-size-s-mobile)}.size-m{font-size:var(--px-icon-size-m-mobile)}.size-l{font-size:var(--px-icon-size-l-mobile)}.size-xl{font-size:var(--px-icon-size-xl-mobile)}.size-2xl{font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{font-size:var(--px-icon-size-2xs-tablet)}.size-xs{font-size:var(--px-icon-size-xs-tablet)}.size-s{font-size:var(--px-icon-size-s-tablet)}.size-m{font-size:var(--px-icon-size-m-tablet)}.size-l{font-size:var(--px-icon-size-l-tablet)}.size-xl{font-size:var(--px-icon-size-xl-tablet)}.size-2xl{font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{font-size:var(--px-icon-size-2xs-desktop)}.size-xs{font-size:var(--px-icon-size-xs-desktop)}.size-s{font-size:var(--px-icon-size-s-desktop)}.size-m{font-size:var(--px-icon-size-m-desktop)}.size-l{font-size:var(--px-icon-size-l-desktop)}.size-xl{font-size:var(--px-icon-size-xl-desktop)}.size-2xl{font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}.icon-Accessories:before{content:""}.icon-Account:before{content:""}.icon-Activeren:before{content:""}.icon-Addition:before{content:""}.icon-Administration:before{content:""}.icon-Advantage:before{content:""}.icon-Advantage-pig:before{content:""}.icon-AI:before{content:""}.icon-Airplane:before{content:""}.icon-Alarm:before{content:""}.icon-Answers:before{content:""}.icon-Antenna:before{content:""}.icon-Anywhere:before{content:""}.icon-Applications:before{content:""}.icon-Appointment:before{content:""}.icon-Arrow:before{content:""}.icon-Arrow-circle:before{content:""}.icon-Arrow-direction:before{content:""}.icon-Arrow-direction-horizontal:before{content:""}.icon-Arrow-down:before{content:""}.icon-Arrow-left:before{content:""}.icon-Arrow-navigation:before{content:""}.icon-Arrow-outline:before{content:""}.icon-Arrow-outline-direction:before{content:""}.icon-Arrowbutton:before{content:""}.icon-Arrowbutton-left:before{content:""}.icon-Articles:before{content:""}.icon-Baby:before{content:""}.icon-Back-camera:before{content:""}.icon-Battery:before{content:""}.icon-Belgique-ok:before{content:""}.icon-Best-seller:before{content:""}.icon-Best-seller-14:before{content:""}.icon-Best-seller-2:before{content:""}.icon-Bill:before{content:""}.icon-Bill-member:before{content:""}.icon-Birthday:before{content:""}.icon-Blacklisted:before{content:""}.icon-Blindness:before{content:""}.icon-Bluetooth:before{content:""}.icon-Broken-links:before{content:""}.icon-Bullet:before{content:""}.icon-Caddy:before{content:""}.icon-Calendar:before{content:""}.icon-Calendar-14:before{content:""}.icon-Calendar-7:before{content:""}.icon-Calls:before{content:""}.icon-Callsfromabroad:before{content:""}.icon-Callsfrombelgium:before{content:""}.icon-Calltransfert:before{content:""}.icon-Camera:before{content:""}.icon-Car:before{content:""}.icon-Card:before{content:""}.icon-Care:before{content:""}.icon-Circle:before{content:""}.icon-Circle-Remove:before{content:""}.icon-Close:before{content:""}.icon-Cloud:before{content:""}.icon-Cloud-ICT:before{content:""}.icon-Cloud-IoT:before{content:""}.icon-Cloud-Networks:before{content:""}.icon-Cloud-Security:before{content:""}.icon-Collaboration:before{content:""}.icon-Collapse:before{content:""}.icon-Community:before{content:""}.icon-Community2:before{content:""}.icon-Compare:before{content:""}.icon-Congratulations-box:before{content:""}.icon-Connected-house:before{content:""}.icon-Connection-error:before{content:""}.icon-Connection-manager:before{content:""}.icon-Connectivity:before{content:""}.icon-Contact:before{content:""}.icon-Contactlist:before{content:""}.icon-Contest:before{content:""}.icon-Continuity:before{content:""}.icon-Cookie:before{content:""}.icon-Copy:before{content:""}.icon-Crash:before{content:""}.icon-Customer-Zone:before{content:""}.icon-Dance:before{content:""}.icon-Data:before{content:""}.icon-Deafpeople:before{content:""}.icon-Delivery:before{content:""}.icon-Desktop:before{content:""}.icon-Devices:before{content:""}.icon-Dial:before{content:""}.icon-Digital-media:before{content:""}.icon-Directassist:before{content:""}.icon-Download:before{content:""}.icon-Drag:before{content:""}.icon-E-carte-Facebook:before{content:""}.icon-Easy:before{content:""}.icon-Edit:before{content:""}.icon-Energy:before{content:""}.icon-Entertainment:before{content:""}.icon-Error-box:before{content:""}.icon-Eservices:before{content:""}.icon-Exhibition-screens:before{content:""}.icon-Expand:before{content:""}.icon-Eyedeficiency:before{content:""}.icon-Facebook:before{content:""}.icon-Family:before{content:""}.icon-Favourite:before{content:""}.icon-Favourite-unselected:before{content:""}.icon-Feedback:before{content:""}.icon-Fiber:before{content:""}.icon-Filter:before{content:""}.icon-Fixed-connection:before{content:""}.icon-Fixed-ringing:before{content:""}.icon-Flexibility:before{content:""}.icon-Flexible-delivery:before{content:""}.icon-Football:before{content:""}.icon-Football-11:before{content:""}.icon-Football-11plus:before{content:""}.icon-Forum:before{content:""}.icon-Forward:before{content:""}.icon-Freedelivery:before{content:""}.icon-Freeservices:before{content:""}.icon-Frequently-questions:before{content:""}.icon-Front-camera:before{content:""}.icon-G-Tablet:before{content:""}.icon-Gallery:before{content:""}.icon-Games:before{content:""}.icon-Gift:before{content:""}.icon-Government:before{content:""}.icon-Guitar:before{content:""}.icon-Handicap:before{content:""}.icon-Help:before{content:""}.icon-Home:before{content:""}.icon-Home-added-value:before{content:""}.icon-Hub:before{content:""}.icon-ICT:before{content:""}.icon-Icon-Mood-happy:before{content:""}.icon-Icon-Mood-neutral:before{content:""}.icon-Icon-Mood-unhappy:before{content:""}.icon-Ict-networking:before{content:""}.icon-Idea:before{content:""}.icon-Incomingcalls:before{content:""}.icon-Infinity:before{content:""}.icon-Information:before{content:""}.icon-Information-box:before{content:""}.icon-Infrastructure:before{content:""}.icon-Innovation:before{content:""}.icon-Inscription:before{content:""}.icon-Instagram:before{content:""}.icon-International:before{content:""}.icon-Internet:before{content:""}.icon-Internetlaptop:before{content:""}.icon-Internetmobile:before{content:""}.icon-Internettablet:before{content:""}.icon-Invoice-insight-advanced:before{content:""}.icon-Layer243:before{content:""}.icon-Linkedin:before{content:""}.icon-Links:before{content:""}.icon-Local-data:before{content:""}.icon-Location:before{content:""}.icon-Login1:before{content:""}.icon-Login2:before{content:""}.icon-LoginOpen:before{content:""}.icon-Logout:before{content:""}.icon-Low-stock:before{content:""}.icon-Magnify:before{content:""}.icon-Manual:before{content:""}.icon-Markets:before{content:""}.icon-Meeting:before{content:""}.icon-Mentaldeficiency:before{content:""}.icon-Menu:before{content:""}.icon-Menuburger:before{content:""}.icon-Messaging:before{content:""}.icon-Messenger:before{content:""}.icon-Micro:before{content:""}.icon-MicroSIM-card:before{content:""}.icon-Microsoft-Office:before{content:""}.icon-Minus-fill:before{content:""}.icon-Minutes120:before{content:""}.icon-Minutes15:before{content:""}.icon-Minutes1600:before{content:""}.icon-Minutes240:before{content:""}.icon-Minutes30:before{content:""}.icon-Minutes400:before{content:""}.icon-Minutes60:before{content:""}.icon-Minutes800:before{content:""}.icon-Mobile:before{content:""}.icon-Mobile-Coverage:before{content:""}.icon-Mobility-insurance:before{content:""}.icon-Monitoring:before{content:""}.icon-Mood-joy:before{content:""}.icon-Mood-very-bad:before{content:""}.icon-Move-Sticker:before{content:""}.icon-Move-box:before{content:""}.icon-Moving:before{content:""}.icon-Music:before{content:""}.icon-Myentertainment:before{content:""}.icon-Network:before{content:""}.icon-Newsletter:before{content:""}.icon-Next:before{content:""}.icon-No-playing:before{content:""}.icon-No-stock:before{content:""}.icon-Norton-security:before{content:""}.icon-Not-Available:before{content:""}.icon-Number-1:before{content:""}.icon-Number-10:before{content:""}.icon-Number-2:before{content:""}.icon-Number-3:before{content:""}.icon-Number-4:before{content:""}.icon-Number-5:before{content:""}.icon-Number-6:before{content:""}.icon-Number-7:before{content:""}.icon-Number-8:before{content:""}.icon-Number-9:before{content:""}.icon-OS:before{content:""}.icon-On-app:before{content:""}.icon-On-web:before{content:""}.icon-OneClick:before{content:""}.icon-Online-exclu-en:before{content:""}.icon-Online-exclu-fr:before{content:""}.icon-Online-exclu-nl:before{content:""}.icon-Online-promo-en:before{content:""}.icon-Online-promo-fr:before{content:""}.icon-Online-promo-nl:before{content:""}.icon-Options:before{content:""}.icon-Outcomingcalls:before{content:""}.icon-Overview:before{content:""}.icon-Packs:before{content:""}.icon-Paperclip:before{content:""}.icon-Pedestrian:before{content:""}.icon-Photo:before{content:""}.icon-Picture:before{content:""}.icon-Pin:before{content:""}.icon-Place-map:before{content:""}.icon-Play:before{content:""}.icon-Plus:before{content:""}.icon-Plus-fill:before{content:""}.icon-Points:before{content:""}.icon-Positioning:before{content:""}.icon-Posts:before{content:""}.icon-Presencehome:before{content:""}.icon-Previous:before{content:""}.icon-Prime:before{content:""}.icon-Print:before{content:""}.icon-Processor:before{content:""}.icon-Products:before{content:""}.icon-Promo:before{content:""}.icon-Proximus-TV-app:before{content:""}.icon-Pxs:before{content:""}.icon-Quote:before{content:""}.icon-Raccording-flat:before{content:""}.icon-Ready-to-use:before{content:""}.icon-Recycling:before{content:""}.icon-Reducer:before{content:""}.icon-Refresh:before{content:""}.icon-Relaunch:before{content:""}.icon-Reload:before{content:""}.icon-Remote:before{content:""}.icon-Remove:before{content:""}.icon-Remove-filter:before{content:""}.icon-Restart:before{content:""}.icon-Roaming:before{content:""}.icon-Roaming-Belgium:before{content:""}.icon-Search:before{content:""}.icon-Secure-payment:before{content:""}.icon-Seealso:before{content:""}.icon-Server:before{content:""}.icon-Settings:before{content:""}.icon-Shopmag:before{content:""}.icon-Smarphone-configuration:before{content:""}.icon-Smart-ringing:before{content:""}.icon-Smartphone:before{content:""}.icon-Smartphone-1:before{content:""}.icon-Smartphone-2:before{content:""}.icon-Smartphone-3:before{content:""}.icon-Smartphone-4:before{content:""}.icon-Smartphone-5:before{content:""}.icon-Smartphone-6:before{content:""}.icon-Smartphone4G:before{content:""}.icon-Smiley:before{content:""}.icon-Sms:before{content:""}.icon-Sondage:before{content:""}.icon-Sort-0-9:before{content:""}.icon-Sort-9-0:before{content:""}.icon-Sort-a-z:before{content:""}.icon-Sort-z-a:before{content:""}.icon-Sound-off:before{content:""}.icon-Sound-on:before{content:""}.icon-Speed:before{content:""}.icon-Speedtest-download:before{content:""}.icon-Speedtest-upload:before{content:""}.icon-Status-nok:before{content:""}.icon-Status-ok:before{content:""}.icon-Status-ongoing:before{content:""}.icon-Status-warning:before{content:""}.icon-Stay-informed:before{content:""}.icon-Stayinformed:before{content:""}.icon-Stock:before{content:""}.icon-Stopwatch:before{content:""}.icon-Subscription:before{content:""}.icon-Surfgsm:before{content:""}.icon-Sustainability:before{content:""}.icon-Switchon-switchoff:before{content:""}.icon-TV-replay-36:before{content:""}.icon-TVReplay:before{content:""}.icon-Tablet:before{content:""}.icon-Tailor:before{content:""}.icon-Target-Blank:before{content:""}.icon-Tarifs:before{content:""}.icon-Technical-cast:before{content:""}.icon-Telephony:before{content:""}.icon-Television:before{content:""}.icon-Temp:before{content:""}.icon-Tips1:before{content:""}.icon-Tips2:before{content:""}.icon-Tools:before{content:""}.icon-Top:before{content:""}.icon-Touchscreens:before{content:""}.icon-Tractor:before{content:""}.icon-Train:before{content:""}.icon-Transfer:before{content:""}.icon-Transfer-people:before{content:""}.icon-Trash:before{content:""}.icon-Triangle:before{content:""}.icon-TV-10:before{content:""}.icon-TV-12:before{content:""}.icon-TV-14:before{content:""}.icon-TV-16:before{content:""}.icon-TV-18:before{content:""}.icon-Twitter:before{content:""}.icon-Under-construct:before{content:""}.icon-Upgrade-account:before{content:""}.icon-Upload:before{content:""}.icon-Usage:before{content:""}.icon-Usage2:before{content:""}.icon-Validation-box:before{content:""}.icon-Video:before{content:""}.icon-Video-zap:before{content:""}.icon-Videoscope:before{content:""}.icon-View360:before{content:""}.icon-Waiting:before{content:""}.icon-Warning-box:before{content:""}.icon-Watch:before{content:""}.icon-Watch2:before{content:""}.icon-WhatsApp:before{content:""}.icon-Wireless-hub:before{content:""}.icon-Youtube:before{content:""}.icon-circular-economy:before{content:""}.icon-eco:before{content:""}.icon-happy-weeks:before{content:""}.icon-icon-VOD:before{content:""}.icon-mms:before{content:""}.icon-new-en:before{content:""}.icon-new-fr:before{content:""}.icon-new-nl:before{content:""}.icon-prepaid:before{content:""}.icon-promo:before{content:""}.icon-repair-device:before{content:""}.icon-sales-en:before{content:""}.icon-sales-fr:before{content:""}.icon-sales-nl:before{content:""}.icon-simlocked:before{content:""}.icon-temporary-device:before{content:""}.icon-Test-branding-Account-1:before{content:""}.icon-Test-branding-Car-1:before{content:""}.icon-Test-branding-Sim-1:before{content:""}';
1082
+ const styleSheet$9 = new CSSStyleSheet();
1083
+ styleSheet$9.replaceSync(styles$a);
1084
+ const colorValues$1 = ["", "default", "inherit", "primary", "body", "details", "hover", "active", "disabled", "promo", "success", "warning", "error", "unlimited"];
1085
+ const _Icon = class _Icon extends PxElement {
1032
1086
  constructor() {
1033
- super(proximusSemanticStyleSheet, accordionStyles);
1034
- this.template = () => `<details>
1035
- <summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
1036
- <slot name="content"></slot>
1037
- </details>`;
1087
+ super(proximusSemanticStyleSheet, styleSheet$9);
1088
+ this.template = () => `<i aria-hidden="true"></i>`;
1038
1089
  this.shadowRoot.innerHTML = this.template();
1039
1090
  }
1040
1091
  static get observedAttributes() {
1041
- return [...super.observedAttributes, "variant", "inverted"];
1042
- }
1043
- get variant() {
1044
- return this.getAttribute("variant");
1045
- }
1046
- set variant(value) {
1047
- this.setAttribute("variant", value);
1048
- }
1049
- get inverted() {
1050
- return this.getAttribute("inverted");
1051
- }
1052
- set inverted(value) {
1053
- this.setAttribute("inverted", value);
1054
- }
1055
- attributeChangedCallback(attrName, oldValue, newValue) {
1056
- if (oldValue !== newValue) {
1057
- switch (attrName) {
1058
- case "variant":
1059
- this.updateAttribute(attrName, oldValue, newValue, variantValues$3);
1060
- break;
1061
- default:
1062
- super.attributeChangedCallback(attrName, oldValue, newValue);
1063
- break;
1064
- }
1065
- }
1066
- }
1067
- updateAttribute(attrName, oldValue, newValue, attrValues) {
1068
- if (oldValue !== null && oldValue !== "") {
1069
- this.$el.classList.toggle(`${oldValue}`);
1070
- }
1071
- if (newValue !== null && newValue !== "") {
1072
- this.$el.classList.toggle(`${newValue}`);
1073
- }
1074
- if (!this.checkName(attrValues, newValue)) {
1075
- console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
1076
- }
1077
- }
1078
- checkName(values, value) {
1079
- return values.includes(value);
1080
- }
1081
- };
1082
- _Accordion.nativeName = "details";
1083
- let Accordion = _Accordion;
1084
- customElements.define("px-accordion", Accordion);
1085
- const buttonCss = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:700;gap:var(--px-spacing-between-icon-horizontal-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent;--slotted-icon-size: var(--px-icon-size-xs-mobile)}.btn,.btn *{box-sizing:border-box}.btn:hover:not([disabled],[aria-disabled=true],.loading),.btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default);outline:0}.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:var(--px-icon-size-xs-mobile)}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-default);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-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),.btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-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-xs)}.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-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),.btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-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-xs)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding: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);font-size:var(--px-icon-size-2xs-mobile);border-radius:50%;background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading){gap:0;padding:0 .5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(*),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(*){background:transparent}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){margin:0 -8px}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]){margin:0 0 0 -.5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]){margin:0 -.5rem 0 0}.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:50%;background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading),.btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-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),:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-inverted);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-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),:host([inverted]) .btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-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[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),:host([inverted]) .btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-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: 640px){.btn{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action)}.btn.secondary{min-height:var(--px-size-action)}.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: 640px){.btn{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-desktop)}.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)}}';
1086
- const linkCss = 'a,.link,::slotted(a){font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,a:focus,.link:hover,.link:focus{color:var(--px-color-txt-hover-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(*),.link ::slotted(*){display:inline-block}::slotted(a:hover),::slotted(a:focus){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-main-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]) a:focus,:host([inverted]) .link:hover,:host([inverted]) .link:focus{color:var(--px-color-txt-hover-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),:host([inverted]) ::slotted(a:focus){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-main-inverted)}@media only screen and (min-width: 64rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 90rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}';
1087
- const styles$a = ".patch{display:inline-block;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0;font-family:Proximus,Verdana,Helvetica,sans-serif;font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-inverted-primary-default)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 640px){.patch{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-inverted-primary-default)}.bottom-right{border-radius:var(--px-radius-l) var(--px-radius-l) 0 var(--px-radius-l)}.bottom-left{border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0}.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-inverted-default)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-inverted-inverted)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-inverted)}.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)}";
1088
- const buttonStyles$1 = new CSSStyleSheet();
1089
- const linkStyles$2 = new CSSStyleSheet();
1090
- const patchStyles = new CSSStyleSheet();
1091
- buttonStyles$1.replaceSync(buttonCss);
1092
- linkStyles$2.replaceSync(linkCss);
1093
- patchStyles.replaceSync(styles$a);
1094
- const _Button = class _Button extends PxElement {
1095
- constructor(semanticTokensStylesheet) {
1096
- super(semanticTokensStylesheet, buttonStyles$1, linkStyles$2, patchStyles);
1097
- this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
1098
- const $root = document.createElement(this.nativeName);
1099
- $root.classList.add("btn");
1100
- $root.innerHTML = this.template();
1101
- this.shadowRoot.appendChild($root);
1102
- }
1103
- static get observedAttributes() {
1104
- return [...super.observedAttributes, "variant", "state", "extended", "loading", "shape", "inverted"];
1105
- }
1106
- get variant() {
1107
- return this.getAttribute("variant");
1108
- }
1109
- set variant(value) {
1110
- this.setAttribute("variant", value);
1092
+ return [...super.observedAttributes, "name", "size", "color", "aria-label", "inverted"];
1111
1093
  }
1112
- get state() {
1113
- return this.getAttribute("state");
1094
+ get name() {
1095
+ return this.getAttribute("name");
1114
1096
  }
1115
- set state(value) {
1116
- this.setAttribute("state", value);
1097
+ set name(value) {
1098
+ this.setAttribute("name", value);
1117
1099
  }
1118
- get extended() {
1119
- return this.getAttribute("extended");
1100
+ get size() {
1101
+ return this.getAttribute("size");
1120
1102
  }
1121
- set extended(value) {
1122
- this.setAttribute("extended", value);
1103
+ set size(value) {
1104
+ this.setAttribute("size", value);
1123
1105
  }
1124
- get loading() {
1125
- return this.getAttribute("loading");
1106
+ get color() {
1107
+ return this.getAttribute("color");
1126
1108
  }
1127
- set loading(value) {
1128
- this.setAttribute("loading", value);
1109
+ set color(value) {
1110
+ this.setAttribute("color", value);
1129
1111
  }
1130
- get shape() {
1131
- return this.getAttribute("shape");
1112
+ get arialabel() {
1113
+ return this.getAttribute("aria-label");
1132
1114
  }
1133
- set shape(value) {
1134
- this.setAttribute("shape", value);
1115
+ set arialabel(value) {
1116
+ this.setAttribute("aria-label", value);
1135
1117
  }
1136
1118
  get inverted() {
1137
1119
  return this.getAttribute("inverted");
@@ -1142,94 +1124,55 @@ const _Button = class _Button extends PxElement {
1142
1124
  attributeChangedCallback(attrName, oldValue, newValue) {
1143
1125
  if (oldValue !== newValue) {
1144
1126
  switch (attrName) {
1145
- case "variant":
1146
- this.updateVariant(oldValue, newValue);
1147
- break;
1148
- case "state":
1149
- this.updateState(oldValue, newValue);
1150
- break;
1151
- case "extended":
1152
- this.updateExtended();
1127
+ case "name":
1128
+ if (oldValue !== null && oldValue !== "") {
1129
+ this.$el.classList.toggle(`icon-${oldValue}`);
1130
+ }
1131
+ if (newValue !== null && newValue !== "") {
1132
+ this.$el.classList.toggle(`icon-${newValue}`);
1133
+ }
1153
1134
  break;
1154
- case "loading":
1155
- this.updateLoading();
1135
+ case "size":
1136
+ this.updateAttribute(attrName, oldValue, newValue, iconSizeValues);
1156
1137
  break;
1157
- case "shape":
1158
- this.updateShape(oldValue, newValue);
1138
+ case "color":
1139
+ this.updateAttribute(attrName, oldValue, newValue, colorValues$1);
1159
1140
  break;
1160
- default:
1161
- super.attributeChangedCallback(attrName, oldValue, newValue);
1141
+ case "aria-label":
1142
+ if (newValue !== null && newValue !== "") {
1143
+ this.$el.setAttribute("aria-label", newValue);
1144
+ this.$el.removeAttribute("aria-hidden");
1145
+ }
1162
1146
  break;
1163
1147
  }
1164
1148
  }
1165
1149
  }
1166
- checkName(values, value) {
1167
- if (values.includes(value)) {
1168
- return true;
1169
- }
1170
- return false;
1171
- }
1172
- checkClass(value) {
1173
- if (value.startsWith("patch-")) {
1174
- const splittedValue = value.split(/-(.*)/s);
1175
- for (const classVar of splittedValue) {
1176
- if (classVar != "") {
1177
- this.$el.classList.toggle(classVar);
1178
- }
1179
- }
1180
- } else {
1181
- this.$el.classList.toggle(value);
1182
- }
1183
- }
1184
- _toggleClass(oldValue, newValue) {
1150
+ updateAttribute(attrName, oldValue, newValue, attrValues) {
1185
1151
  if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
1186
- this.checkClass(oldValue);
1187
- }
1188
- if (newValue !== null && newValue !== "" && newValue !== "default") {
1189
- this.checkClass(newValue);
1190
- }
1191
- }
1192
- updateVariant(oldValue, newValue) {
1193
- const values = ["", "default", "secondary", "tertiary", "link", "patch", "patch-info", "patch-black-friday", "patch-eco"];
1194
- if (newValue === "link") {
1195
- this.$el.classList.remove("btn");
1196
- } else {
1197
- this.$el.classList.add("btn");
1152
+ if (attrName === "size") {
1153
+ this.$el.classList.toggle(`${attrName}-${oldValue}`);
1154
+ } else {
1155
+ this.$el.classList.toggle(oldValue);
1156
+ }
1198
1157
  }
1199
- this._toggleClass(oldValue, newValue);
1200
- if (!this.checkName(values, newValue)) {
1201
- console.error(`Bad "variant" value for ${this.$el}`);
1158
+ if (newValue !== null && newValue !== "" && oldValue !== "default") {
1159
+ if (attrName === "size") {
1160
+ this.$el.classList.toggle(`${attrName}-${newValue}`);
1161
+ } else {
1162
+ this.$el.classList.toggle(newValue);
1163
+ }
1202
1164
  }
1203
- }
1204
- updateState(oldValue, newValue) {
1205
- const values = ["", "default", "success", "error"];
1206
- this._toggleClass(oldValue, newValue);
1207
- if (!this.checkName(values, newValue)) {
1208
- console.error(`Bad "sate" value for ${this.$el}`);
1165
+ if (!this.checkName(attrValues, newValue)) {
1166
+ console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
1209
1167
  }
1210
1168
  }
1211
- updateExtended() {
1212
- this.$el.classList.toggle("extended");
1213
- }
1214
- updateLoading() {
1215
- this.$el.classList.toggle("loading");
1216
- }
1217
- updateShape(oldValue, newValue) {
1218
- const values = ["", "default", "bottom-right", "bottom-left", "alternative"];
1219
- this._toggleClass(oldValue, newValue);
1220
- if (!this.checkName(values, newValue)) {
1221
- console.error(`Bad "shape" value for ${this.$el}`);
1222
- }
1169
+ checkName(values, value) {
1170
+ return values.includes(value);
1223
1171
  }
1224
1172
  };
1225
- _Button.nativeName = "button";
1226
- let Button = _Button;
1227
- class ProximusButton extends Button {
1228
- constructor() {
1229
- super(proximusSemanticStyleSheet);
1230
- }
1231
- }
1232
- customElements.define("px-button", ProximusButton);
1173
+ _Icon.nativeName = "i";
1174
+ let Icon = _Icon;
1175
+ customElements.define("px-icon", Icon);
1233
1176
  const containerCss = '.container{font-family:Proximus,Verdana,Helvetica,sans-serif;background-color:var(--px-color-bg-container-main-default);border-radius:var(--px-radius-m);padding:var(--px-padding-m);box-sizing:border-box}:host([inverted]) .container{background-color:var(--px-color-bg-container-main-inverted);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-xs{border-radius:var(--px-radius-xs)}.borderradius-s{border-radius:var(--px-radius-s)}.borderradius-m{border-radius:var(--px-radius-m)}.borderradius-l{border-radius:var(--px-radius-l)}.borderradius-2xl{border-radius:var(--px-radius-2xl)}.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-main-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{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-main-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-inverted)}: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)}';
1234
1177
  const containerStyles = new CSSStyleSheet();
1235
1178
  containerStyles.replaceSync(containerCss);
@@ -1415,54 +1358,227 @@ const _Container = class _Container extends PxElement {
1415
1358
  window.addEventListener("resize", this.onWindowResize);
1416
1359
  }
1417
1360
  }
1418
- disconnectedCallback() {
1419
- window.removeEventListener("resize", this.onWindowResize);
1361
+ disconnectedCallback() {
1362
+ window.removeEventListener("resize", this.onWindowResize);
1363
+ }
1364
+ attributeChangedCallback(attrName, oldValue, newValue) {
1365
+ if (oldValue !== newValue) {
1366
+ switch (attrName) {
1367
+ case "padding":
1368
+ case "paddingblock":
1369
+ case "paddinginline":
1370
+ case "paddingtop":
1371
+ case "paddingright":
1372
+ case "paddingbottom":
1373
+ case "paddingleft":
1374
+ this.updateAttribute(attrName, oldValue, newValue, paddingValues);
1375
+ break;
1376
+ case "border":
1377
+ this.updateAttribute(attrName, oldValue, newValue, borderValues);
1378
+ break;
1379
+ case "borderradius":
1380
+ this.updateAttribute(attrName, oldValue, newValue, borderRadiusValues);
1381
+ break;
1382
+ case "noborderradius":
1383
+ this.updateAttribute(attrName, oldValue, newValue, noBorderRadiusValues);
1384
+ break;
1385
+ case "bgcolor":
1386
+ this.updateAttribute(attrName, oldValue, newValue, bgColorValues);
1387
+ break;
1388
+ case "gradient":
1389
+ this.updateGradient(oldValue, newValue);
1390
+ break;
1391
+ case "bgimgsize":
1392
+ this.updateAttribute(attrName, oldValue, newValue, bgImgSizeValues);
1393
+ break;
1394
+ case "bgimg-mobile":
1395
+ case "bgimg-tablet":
1396
+ case "bgimg-laptop":
1397
+ if (newValue !== "") {
1398
+ this.$el.classList.toggle("bgimg");
1399
+ this.loadImg(attrName, newValue);
1400
+ }
1401
+ break;
1402
+ case "bgimgposition":
1403
+ if (newValue !== null && newValue !== "") {
1404
+ this.$el.style.backgroundPosition = newValue;
1405
+ }
1406
+ break;
1407
+ case "shadow":
1408
+ this.updateAttribute(attrName, oldValue, newValue, shadowValues);
1409
+ break;
1410
+ default:
1411
+ super.attributeChangedCallback(attrName, oldValue, newValue);
1412
+ break;
1413
+ }
1414
+ }
1415
+ }
1416
+ loadImg(attrName, newValue) {
1417
+ if (attrName === "bgimg-mobile") {
1418
+ this.$el.style.backgroundImage = `url("${newValue}")`;
1419
+ } else if (window.matchMedia("only screen and (min-width: 768px)").matches && attrName === "bgimg-tablet") {
1420
+ this.$el.style.backgroundImage = `url("${newValue}")`;
1421
+ } else if (window.matchMedia("only screen and (min-width: 1025px)").matches && attrName === "bgimg-laptop") {
1422
+ this.$el.style.backgroundImage = `url("${newValue}")`;
1423
+ }
1424
+ }
1425
+ updateGradient(oldValue, newValue) {
1426
+ if (this.checkName(gradientValues, newValue)) {
1427
+ this.$el.style.background = `linear-gradient(var(--px-color-bg-gradient-${newValue}))`;
1428
+ } else {
1429
+ console.error(`${newValue} is not an allowed gradient value for ${this.$el}`);
1430
+ }
1431
+ }
1432
+ updateAttribute(attrName, oldValue, newValue, attrValues) {
1433
+ if (oldValue !== null && oldValue !== "") {
1434
+ this.$el.classList.toggle(`${attrName}-${oldValue}`);
1435
+ }
1436
+ if (newValue !== null && newValue !== "") {
1437
+ this.$el.classList.toggle(`${attrName}-${newValue}`);
1438
+ }
1439
+ if (!this.checkName(attrValues, newValue)) {
1440
+ console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
1441
+ }
1442
+ }
1443
+ checkName(values, value) {
1444
+ return values.includes(value);
1445
+ }
1446
+ };
1447
+ _Container.nativeName = "div";
1448
+ let Container = _Container;
1449
+ customElements.define("px-container", Container);
1450
+ const accordionCss = `details{font-family:Proximus,Verdana,Helvetica,sans-serif;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-moderate-default)}summary:hover:after{background-color:var(--px-color-bg-action-hover-inverted-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-border-action-hover-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-hover-inverted-inverted);border:var(--px-border-s) solid var(--px-color-border-action-hover-inverted)}`;
1451
+ const accordionStyles = new CSSStyleSheet();
1452
+ accordionStyles.replaceSync(accordionCss);
1453
+ const variantValues$3 = ["", "none", "single"];
1454
+ const _Accordion = class _Accordion extends PxElement {
1455
+ constructor() {
1456
+ super(proximusSemanticStyleSheet, accordionStyles);
1457
+ this.template = () => `<details>
1458
+ <summary role="button"><slot name="icon"></slot><slot name="title"></slot><slot name="info"></slot></summary>
1459
+ <slot name="content"></slot>
1460
+ </details>`;
1461
+ this.shadowRoot.innerHTML = this.template();
1462
+ }
1463
+ static get observedAttributes() {
1464
+ return [...super.observedAttributes, "variant", "inverted"];
1465
+ }
1466
+ get variant() {
1467
+ return this.getAttribute("variant");
1468
+ }
1469
+ set variant(value) {
1470
+ this.setAttribute("variant", value);
1471
+ }
1472
+ get inverted() {
1473
+ return this.getAttribute("inverted");
1474
+ }
1475
+ set inverted(value) {
1476
+ this.setAttribute("inverted", value);
1477
+ }
1478
+ attributeChangedCallback(attrName, oldValue, newValue) {
1479
+ if (oldValue !== newValue) {
1480
+ switch (attrName) {
1481
+ case "variant":
1482
+ this.updateAttribute(attrName, oldValue, newValue, variantValues$3);
1483
+ break;
1484
+ default:
1485
+ super.attributeChangedCallback(attrName, oldValue, newValue);
1486
+ break;
1487
+ }
1488
+ }
1489
+ }
1490
+ updateAttribute(attrName, oldValue, newValue, attrValues) {
1491
+ if (oldValue !== null && oldValue !== "") {
1492
+ this.$el.classList.toggle(`${oldValue}`);
1493
+ }
1494
+ if (newValue !== null && newValue !== "") {
1495
+ this.$el.classList.toggle(`${newValue}`);
1496
+ }
1497
+ if (!this.checkName(attrValues, newValue)) {
1498
+ console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
1499
+ }
1500
+ }
1501
+ checkName(values, value) {
1502
+ return values.includes(value);
1503
+ }
1504
+ };
1505
+ _Accordion.nativeName = "details";
1506
+ let Accordion = _Accordion;
1507
+ customElements.define("px-accordion", Accordion);
1508
+ const buttonCss = '.btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:700;gap:var(--px-spacing-between-icon-horizontal-mobile);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent;--slotted-icon-size: var(--px-icon-size-xs-mobile)}.btn,.btn *{box-sizing:border-box}.btn:hover:not([disabled],[aria-disabled=true],.loading),.btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default);outline:0}.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:var(--px-icon-size-xs-mobile)}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-default);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-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),.btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-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-xs)}.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-xs) var(--px-radius-xs) var(--px-radius-2xl) var(--px-radius-xs)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading),.btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-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-xs)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding: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);font-size:var(--px-icon-size-2xs-mobile);border-radius:50%;background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading){gap:0;padding:0 .5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(*),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(*){background:transparent}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){margin:0 -8px}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="before"]){margin:0 0 0 -.5rem}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]),.btn.tertiary:focus:not([disabled],[aria-disabled=true],.loading) ::slotted([slot="after"]){margin:0 -.5rem 0 0}.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:50%;background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading),.btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-inverted-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),:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-inverted-primary-inverted);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading),:host([inverted]) .btn:not(.secondary,.tertiary,.patch):focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-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),:host([inverted]) .btn.secondary:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-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[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),:host([inverted]) .btn.patch:focus:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-inverted-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: 640px){.btn{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet);--slotted-icon-size: var(--px-icon-size-xs-tablet)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action)}.btn.secondary{min-height:var(--px-size-action)}.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: 640px){.btn{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop);--slotted-icon-size: var(--px-icon-size-xs-desktop)}.btn.loading ::slotted(px-spinner){line-height:var(--px-icon-size-xs-desktop)}.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)}}';
1509
+ const linkCss = 'a,.link,::slotted(a){font-family:Proximus,Verdana,Helvetica,sans-serif;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,a:focus,.link:hover,.link:focus{color:var(--px-color-txt-hover-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(*),.link ::slotted(*){display:inline-block}::slotted(a:hover),::slotted(a:focus){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-main-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]) a:focus,:host([inverted]) .link:hover,:host([inverted]) .link:focus{color:var(--px-color-txt-hover-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),:host([inverted]) ::slotted(a:focus){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-main-inverted)}@media only screen and (min-width: 64rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 90rem){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}';
1510
+ const styles$9 = ".patch{display:inline-block;padding:0 var(--px-padding-s);height:1.625rem;border:var(--px-border-m) solid transparent;border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0;font-family:Proximus,Verdana,Helvetica,sans-serif;font-weight:700;font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);text-align:center;background-color:var(--px-color-bg-promo-default);color:var(--px-color-txt-inverted-primary-default)}.patch,.patch *{box-sizing:border-box}@media only screen and (min-width: 640px){.patch{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}}@media only screen and (min-width: 1025px){.patch{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}}:host([inverted]) .patch{background-color:var(--px-color-bg-promo-inverted);color:var(--px-color-txt-inverted-primary-default)}.bottom-right{border-radius:var(--px-radius-l) var(--px-radius-l) 0 var(--px-radius-l)}.bottom-left{border-radius:var(--px-radius-l) var(--px-radius-l) var(--px-radius-l) 0}.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-inverted-default)}:host([inverted]) .black-friday{background-color:var(--px-color-bg-container-rich-inverted);color:var(--px-color-txt-inverted-inverted)}.eco{background-color:var(--px-color-bg-success-default);color:var(--px-color-txt-inverted-default)}:host([inverted]) .eco{background-color:var(--px-color-bg-success-inverted);color:var(--px-color-txt-inverted-inverted)}.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)}";
1511
+ const buttonStyles$1 = new CSSStyleSheet();
1512
+ const linkStyles$2 = new CSSStyleSheet();
1513
+ const patchStyles = new CSSStyleSheet();
1514
+ buttonStyles$1.replaceSync(buttonCss);
1515
+ linkStyles$2.replaceSync(linkCss);
1516
+ patchStyles.replaceSync(styles$9);
1517
+ const _Button = class _Button extends PxElement {
1518
+ constructor(semanticTokensStylesheet) {
1519
+ super(semanticTokensStylesheet, buttonStyles$1, linkStyles$2, patchStyles);
1520
+ this.template = () => `<slot name="before"></slot><slot></slot><slot name="after"></slot>`;
1521
+ const $root = document.createElement(this.nativeName);
1522
+ $root.classList.add("btn");
1523
+ $root.innerHTML = this.template();
1524
+ this.shadowRoot.appendChild($root);
1525
+ }
1526
+ static get observedAttributes() {
1527
+ return [...super.observedAttributes, "variant", "state", "extended", "loading", "shape", "inverted"];
1528
+ }
1529
+ get variant() {
1530
+ return this.getAttribute("variant");
1531
+ }
1532
+ set variant(value) {
1533
+ this.setAttribute("variant", value);
1534
+ }
1535
+ get state() {
1536
+ return this.getAttribute("state");
1537
+ }
1538
+ set state(value) {
1539
+ this.setAttribute("state", value);
1540
+ }
1541
+ get extended() {
1542
+ return this.getAttribute("extended");
1543
+ }
1544
+ set extended(value) {
1545
+ this.setAttribute("extended", value);
1546
+ }
1547
+ get loading() {
1548
+ return this.getAttribute("loading");
1549
+ }
1550
+ set loading(value) {
1551
+ this.setAttribute("loading", value);
1552
+ }
1553
+ get shape() {
1554
+ return this.getAttribute("shape");
1555
+ }
1556
+ set shape(value) {
1557
+ this.setAttribute("shape", value);
1558
+ }
1559
+ get inverted() {
1560
+ return this.getAttribute("inverted");
1561
+ }
1562
+ set inverted(value) {
1563
+ this.setAttribute("inverted", value);
1420
1564
  }
1421
1565
  attributeChangedCallback(attrName, oldValue, newValue) {
1422
1566
  if (oldValue !== newValue) {
1423
1567
  switch (attrName) {
1424
- case "padding":
1425
- case "paddingblock":
1426
- case "paddinginline":
1427
- case "paddingtop":
1428
- case "paddingright":
1429
- case "paddingbottom":
1430
- case "paddingleft":
1431
- this.updateAttribute(attrName, oldValue, newValue, paddingValues);
1432
- break;
1433
- case "border":
1434
- this.updateAttribute(attrName, oldValue, newValue, borderValues);
1435
- break;
1436
- case "borderradius":
1437
- this.updateAttribute(attrName, oldValue, newValue, borderRadiusValues);
1438
- break;
1439
- case "noborderradius":
1440
- this.updateAttribute(attrName, oldValue, newValue, noBorderRadiusValues);
1441
- break;
1442
- case "bgcolor":
1443
- this.updateAttribute(attrName, oldValue, newValue, bgColorValues);
1444
- break;
1445
- case "gradient":
1446
- this.updateGradient(oldValue, newValue);
1568
+ case "variant":
1569
+ this.updateVariant(oldValue, newValue);
1447
1570
  break;
1448
- case "bgimgsize":
1449
- this.updateAttribute(attrName, oldValue, newValue, bgImgSizeValues);
1571
+ case "state":
1572
+ this.updateState(oldValue, newValue);
1450
1573
  break;
1451
- case "bgimg-mobile":
1452
- case "bgimg-tablet":
1453
- case "bgimg-laptop":
1454
- if (newValue !== "") {
1455
- this.$el.classList.toggle("bgimg");
1456
- this.loadImg(attrName, newValue);
1457
- }
1574
+ case "extended":
1575
+ this.updateExtended();
1458
1576
  break;
1459
- case "bgimgposition":
1460
- if (newValue !== null && newValue !== "") {
1461
- this.$el.style.backgroundPosition = newValue;
1462
- }
1577
+ case "loading":
1578
+ this.updateLoading();
1463
1579
  break;
1464
- case "shadow":
1465
- this.updateAttribute(attrName, oldValue, newValue, shadowValues);
1580
+ case "shape":
1581
+ this.updateShape(oldValue, newValue);
1466
1582
  break;
1467
1583
  default:
1468
1584
  super.attributeChangedCallback(attrName, oldValue, newValue);
@@ -1470,40 +1586,73 @@ const _Container = class _Container extends PxElement {
1470
1586
  }
1471
1587
  }
1472
1588
  }
1473
- loadImg(attrName, newValue) {
1474
- if (attrName === "bgimg-mobile") {
1475
- this.$el.style.backgroundImage = `url("${newValue}")`;
1476
- } else if (window.matchMedia("only screen and (min-width: 768px)").matches && attrName === "bgimg-tablet") {
1477
- this.$el.style.backgroundImage = `url("${newValue}")`;
1478
- } else if (window.matchMedia("only screen and (min-width: 1025px)").matches && attrName === "bgimg-laptop") {
1479
- this.$el.style.backgroundImage = `url("${newValue}")`;
1589
+ checkName(values, value) {
1590
+ if (values.includes(value)) {
1591
+ return true;
1480
1592
  }
1593
+ return false;
1481
1594
  }
1482
- updateGradient(oldValue, newValue) {
1483
- if (this.checkName(gradientValues, newValue)) {
1484
- this.$el.style.background = `linear-gradient(var(--px-color-bg-gradient-${newValue}))`;
1595
+ checkClass(value) {
1596
+ if (value.startsWith("patch-")) {
1597
+ const splittedValue = value.split(/-(.*)/s);
1598
+ for (const classVar of splittedValue) {
1599
+ if (classVar != "") {
1600
+ this.$el.classList.toggle(classVar);
1601
+ }
1602
+ }
1485
1603
  } else {
1486
- console.error(`${newValue} is not an allowed gradient value for ${this.$el}`);
1604
+ this.$el.classList.toggle(value);
1487
1605
  }
1488
1606
  }
1489
- updateAttribute(attrName, oldValue, newValue, attrValues) {
1490
- if (oldValue !== null && oldValue !== "") {
1491
- this.$el.classList.toggle(`${attrName}-${oldValue}`);
1607
+ _toggleClass(oldValue, newValue) {
1608
+ if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
1609
+ this.checkClass(oldValue);
1492
1610
  }
1493
- if (newValue !== null && newValue !== "") {
1494
- this.$el.classList.toggle(`${attrName}-${newValue}`);
1611
+ if (newValue !== null && newValue !== "" && newValue !== "default") {
1612
+ this.checkClass(newValue);
1495
1613
  }
1496
- if (!this.checkName(attrValues, newValue)) {
1497
- console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
1614
+ }
1615
+ updateVariant(oldValue, newValue) {
1616
+ const values = ["", "default", "secondary", "tertiary", "link", "patch", "patch-info", "patch-black-friday", "patch-eco"];
1617
+ if (newValue === "link") {
1618
+ this.$el.classList.remove("btn");
1619
+ } else {
1620
+ this.$el.classList.add("btn");
1621
+ }
1622
+ this._toggleClass(oldValue, newValue);
1623
+ if (!this.checkName(values, newValue)) {
1624
+ console.error(`Bad "variant" value for ${this.$el}`);
1498
1625
  }
1499
1626
  }
1500
- checkName(values, value) {
1501
- return values.includes(value);
1627
+ updateState(oldValue, newValue) {
1628
+ const values = ["", "default", "success", "error"];
1629
+ this._toggleClass(oldValue, newValue);
1630
+ if (!this.checkName(values, newValue)) {
1631
+ console.error(`Bad "sate" value for ${this.$el}`);
1632
+ }
1633
+ }
1634
+ updateExtended() {
1635
+ this.$el.classList.toggle("extended");
1636
+ }
1637
+ updateLoading() {
1638
+ this.$el.classList.toggle("loading");
1639
+ }
1640
+ updateShape(oldValue, newValue) {
1641
+ const values = ["", "default", "bottom-right", "bottom-left", "alternative"];
1642
+ this._toggleClass(oldValue, newValue);
1643
+ if (!this.checkName(values, newValue)) {
1644
+ console.error(`Bad "shape" value for ${this.$el}`);
1645
+ }
1502
1646
  }
1503
1647
  };
1504
- _Container.nativeName = "div";
1505
- let Container = _Container;
1506
- customElements.define("px-container", Container);
1648
+ _Button.nativeName = "button";
1649
+ let Button = _Button;
1650
+ class ProximusButton extends Button {
1651
+ constructor() {
1652
+ super(proximusSemanticStyleSheet);
1653
+ }
1654
+ }
1655
+ customElements.define("px-button", ProximusButton);
1507
1656
  const headingCss = "h1,.h1,::slotted(h1),h2,.h2,::slotted(h2),h3,.h3,::slotted(h3),h4,.h4,::slotted(h4),h5,.h5,::slotted(h5),h6,.h6,::slotted(h6),.h7,.subtitle{margin:0;font-family:Proximus,Verdana,Helvetica,sans-serif;color:var(--px-color-txt-primary-default);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile);font-weight:700}:host([inverted]) h1,:host([inverted]) .h1,:host([inverted]) ::slotted(h1),:host([inverted]) h2,:host([inverted]) .h2,:host([inverted]) ::slotted(h2),:host([inverted]) h3,:host([inverted]) .h3,:host([inverted]) ::slotted(h3),:host([inverted]) h4,:host([inverted]) .h4,:host([inverted]) ::slotted(h4),:host([inverted]) h5,:host([inverted]) .h5,:host([inverted]) ::slotted(h5),:host([inverted]) h6,:host([inverted]) .h6,:host([inverted]) ::slotted(h6),:host([inverted]) .h7,:host([inverted]) .subtitle{color:var(--px-color-txt-primary-inverted)}h1,.h1,::slotted(h1){font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-4xl-mobile);font-weight:900}h2,.h2,::slotted(h2){font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-3xl-mobile);font-weight:900}h3,.h3,::slotted(h3){font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-3xl-mobile)}h4,.h4,::slotted(h4){font-size:var(--px-text-size-2xl-mobile);line-height:var(--px-line-height-2xl-mobile)}h5,.h5,::slotted(h5){font-size:var(--px-text-size-l-mobile);line-height:var(--px-line-height-l-mobile)}h6,.h6,::slotted(h6){font-size:var(--px-text-size-m-mobile);line-height:var(--px-line-height-m-mobile)}.subtitle{font-size:var(--px-text-size-xl-mobile);line-height:var(--px-line-height-xl-mobile);font-weight:300}@media only screen and (min-width: 64rem){h1,.h1,::slotted(h1){font-size:var(--px-text-size-5xl-tablet);line-height:var(--px-line-height-4xl-tablet);font-weight:900}h2,.h2,::slotted(h2){font-size:var(--px-text-size-4xl-tablet);line-height:var(--px-line-height-3xl-tablet);font-weight:900}h3,.h3,::slotted(h3){font-size:var(--px-text-size-3xl-tablet);line-height:var(--px-line-height-3xl-tablet)}h4,.h4,::slotted(h4){font-size:var(--px-text-size-2xl-tablet);line-height:var(--px-line-height-2xl-tablet)}h5,.h5,::slotted(h5){font-size:var(--px-text-size-l-tablet);line-height:var(--px-line-height-l-tablet)}h6,.h6,::slotted(h6){font-size:var(--px-text-size-m-tablet);line-height:var(--px-line-height-m-tablet)}.h7{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}.subtitle{font-size:var(--px-text-size-xl-tablet);line-height:var(--px-line-height-xl-tablet);font-weight:300}}@media only screen and (min-width: 90rem){h1,.h1,::slotted(h1){font-size:var(--px-text-size-5xl-desktop);line-height:var(--px-line-height-4xl-desktop);font-weight:900}h2,.h2,::slotted(h2){font-size:var(--px-text-size-4xl-desktop);line-height:var(--px-line-height-3xl-desktop);font-weight:900}h3,.h3,::slotted(h3){font-size:var(--px-text-size-3xl-desktop);line-height:var(--px-line-height-3xl-desktop)}h4,.h4,::slotted(h4){font-size:var(--px-text-size-2xl-desktop);line-height:var(--px-line-height-2xl-desktop)}h5,.h5,::slotted(h5){font-size:var(--px-text-size-l-desktop);line-height:var(--px-line-height-l-desktop)}h6,.h6,::slotted(h6){font-size:var(--px-text-size-m-desktop);line-height:var(--px-line-height-m-desktop)}.h7{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}.subtitle{font-size:var(--px-text-size-xl-desktop);line-height:var(--px-line-height-xl-desktop);font-weight:300}}";
1508
1657
  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-inverted-primary{color:var(--px-color-txt-inverted-primary-default)}.color-inverted{color:var(--px-color-txt-inverted-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-status-success{color:var(--px-color-txt-status-success-default)}.color-status-error{color:var(--px-color-txt-status-error-default)}.color-status-warning{color:var(--px-color-txt-status-warning-default)}.color-status-unlimited{color:var(--px-color-txt-status-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-inverted-primary{color:var(--px-color-txt-inverted-primary-inverted)}:host([inverted]) .color-inverted{color:var(--px-color-txt-inverted-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-status-success{color:var(--px-color-txt-status-success-inverted)}:host([inverted]) .color-status-error{color:var(--px-color-txt-status-error-inverted)}:host([inverted]) .color-status-warning{color:var(--px-color-txt-status-warning-inverted)}:host([inverted]) .color-status-unlimited{color:var(--px-color-txt-status-unlimited-inverted)}.fontsize-inherit{font-size:inherit;line-height:inherit}.fontsize-xs{font-size:var(--px-text-size-xs-mobile);line-height:var(--px-line-height-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile);line-height:var(--px-line-height-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile);line-height:var(--px-line-height-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile);line-height:var(--px-line-height-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile);line-height:var(--px-line-height-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile);line-height:var(--px-line-height-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-7xl-mobile)}@media only screen and (min-width: 768px){.fontsize-xs{font-size:var(--px-text-size-xs-mobile);line-height:var(--px-line-height-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile);line-height:var(--px-line-height-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile);line-height:var(--px-line-height-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile);line-height:var(--px-line-height-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile);line-height:var(--px-line-height-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile);line-height:var(--px-line-height-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-7xl-mobile)}}@media only screen and (min-width: 1025px){.fontsize-xs{font-size:var(--px-text-size-xs-tablet);line-height:var(--px-line-height-xs-tablet)}.fontsize-s{font-size:var(--px-text-size-s-tablet);line-height:var(--px-line-height-s-tablet)}.fontsize-base{font-size:var(--px-text-size-base-tablet);line-height:var(--px-line-height-base-tablet)}.fontsize-m{font-size:var(--px-text-size-m-tablet);line-height:var(--px-line-height-m-tablet)}.fontsize-l{font-size:var(--px-text-size-l-tablet);line-height:var(--px-line-height-l-tablet)}.fontsize-xl{font-size:var(--px-text-size-xl-tablet);line-height:var(--px-line-height-xl-tablet)}.fontsize-2xl{font-size:var(--px-text-size-2xl-tablet);line-height:var(--px-line-height-2xl-tablet)}.fontsize-3xl{font-size:var(--px-text-size-3xl-tablet);line-height:var(--px-line-height-3xl-tablet)}.fontsize-4xl{font-size:var(--px-text-size-4xl-tablet);line-height:var(--px-line-height-4xl-tablet)}.fontsize-5xl{font-size:var(--px-text-size-5xl-tablet);line-height:var(--px-line-height-5xl-tablet)}.fontsize-6xl{font-size:var(--px-text-size-6xl-tablet);line-height:var(--px-line-height-6xl-tablet)}.fontsize-7xl{font-size:var(--px-text-size-7xl-tablet);line-height:var(--px-line-height-7xl-tablet)}}@media only screen and (min-width: 1441px){.fontsize-xs{font-size:var(--px-text-size-xs-desktop);line-height:var(--px-line-height-xs-desktop)}.fontsize-s{font-size:var(--px-text-size-s-desktop);line-height:var(--px-line-height-s-desktop)}.fontsize-base{font-size:var(--px-text-size-base-desktop);line-height:var(--px-line-height-base-desktop)}.fontsize-m{font-size:var(--px-text-size-m-desktop);line-height:var(--px-line-height-m-desktop)}.fontsize-l{font-size:var(--px-text-size-l-desktop);line-height:var(--px-line-height-l-desktop)}.fontsize-xl{font-size:var(--px-text-size-xl-desktop);line-height:var(--px-line-height-xl-desktop)}.fontsize-2xl{font-size:var(--px-text-size-2xl-desktop);line-height:var(--px-line-height-2xl-desktop)}.fontsize-3xl{font-size:var(--px-text-size-3xl-desktop);line-height:var(--px-line-height-3xl-desktop)}.fontsize-4xl{font-size:var(--px-text-size-4xl-desktop);line-height:var(--px-line-height-4xl-desktop)}.fontsize-5xl{font-size:var(--px-text-size-5xl-desktop);line-height:var(--px-line-height-5xl-desktop)}.fontsize-6xl{font-size:var(--px-text-size-6xl-desktop);line-height:var(--px-line-height-6xl-desktop)}.fontsize-7xl{font-size:var(--px-text-size-7xl-desktop);line-height:var(--px-line-height-7xl-desktop)}}.fontweight-inherit{font-weight:inherit}.fontweight-normal{font-weight:var(--font-weight-regular)}.fontweight-bold{font-weight:var(--font-weight-bold)}.fontweight-extrabold{font-weight:var(--font-weight-extrabold)}.fontweight-light{font-weight:var(--font-weight-light)}";
1509
1658
  const headingStyles$2 = new CSSStyleSheet();
@@ -1652,101 +1801,6 @@ const _H6 = class _H6 extends AbstractHeading {
1652
1801
  _H6.nativeName = "h6";
1653
1802
  let H6 = _H6;
1654
1803
  customElements.define("px-h6", H6);
1655
- const styles$9 = ':host{line-height:1;display:inline-block;vertical-align:middle}i{font-family:PxIcon;color:var(--px-color-icon-primary-default);line-height:1;font-style:unset;font-weight:400;-webkit-user-select:none;user-select:none;font-display:swap}.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,: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{font-size:var(--px-icon-size-2xs-mobile)}.size-xs{font-size:var(--px-icon-size-xs-mobile)}.size-s{font-size:var(--px-icon-size-s-mobile)}.size-m{font-size:var(--px-icon-size-m-mobile)}.size-l{font-size:var(--px-icon-size-l-mobile)}.size-xl{font-size:var(--px-icon-size-xl-mobile)}.size-2xl{font-size:var(--px-icon-size-2xl-mobile)}@media only screen and (min-width: 64rem){.size-2xs{font-size:var(--px-icon-size-2xs-tablet)}.size-xs{font-size:var(--px-icon-size-xs-tablet)}.size-s{font-size:var(--px-icon-size-s-tablet)}.size-m{font-size:var(--px-icon-size-m-tablet)}.size-l{font-size:var(--px-icon-size-l-tablet)}.size-xl{font-size:var(--px-icon-size-xl-tablet)}.size-2xl{font-size:var(--px-icon-size-2xl-tablet)}}@media only screen and (min-width: 90rem){.size-2xs{font-size:var(--px-icon-size-2xs-desktop)}.size-xs{font-size:var(--px-icon-size-xs-desktop)}.size-s{font-size:var(--px-icon-size-s-desktop)}.size-m{font-size:var(--px-icon-size-m-desktop)}.size-l{font-size:var(--px-icon-size-l-desktop)}.size-xl{font-size:var(--px-icon-size-xl-desktop)}.size-2xl{font-size:var(--px-icon-size-2xl-desktop)}}i.icon-large:before{vertical-align:-10%;font-size:1.3333333333em}.icon-Accessories:before{content:""}.icon-Account:before{content:""}.icon-Activeren:before{content:""}.icon-Addition:before{content:""}.icon-Administration:before{content:""}.icon-Advantage:before{content:""}.icon-Advantage-pig:before{content:""}.icon-AI:before{content:""}.icon-Airplane:before{content:""}.icon-Alarm:before{content:""}.icon-Answers:before{content:""}.icon-Antenna:before{content:""}.icon-Anywhere:before{content:""}.icon-Applications:before{content:""}.icon-Appointment:before{content:""}.icon-Arrow:before{content:""}.icon-Arrow-circle:before{content:""}.icon-Arrow-direction:before{content:""}.icon-Arrow-direction-horizontal:before{content:""}.icon-Arrow-down:before{content:""}.icon-Arrow-left:before{content:""}.icon-Arrow-navigation:before{content:""}.icon-Arrow-outline:before{content:""}.icon-Arrow-outline-direction:before{content:""}.icon-Arrowbutton:before{content:""}.icon-Arrowbutton-left:before{content:""}.icon-Articles:before{content:""}.icon-Baby:before{content:""}.icon-Back-camera:before{content:""}.icon-Battery:before{content:""}.icon-Belgique-ok:before{content:""}.icon-Best-seller:before{content:""}.icon-Best-seller-14:before{content:""}.icon-Best-seller-2:before{content:""}.icon-Bill:before{content:""}.icon-Bill-member:before{content:""}.icon-Birthday:before{content:""}.icon-Blacklisted:before{content:""}.icon-Blindness:before{content:""}.icon-Bluetooth:before{content:""}.icon-Broken-links:before{content:""}.icon-Bullet:before{content:""}.icon-Caddy:before{content:""}.icon-Calendar:before{content:""}.icon-Calendar-14:before{content:""}.icon-Calendar-7:before{content:""}.icon-Calls:before{content:""}.icon-Callsfromabroad:before{content:""}.icon-Callsfrombelgium:before{content:""}.icon-Calltransfert:before{content:""}.icon-Camera:before{content:""}.icon-Car:before{content:""}.icon-Card:before{content:""}.icon-Care:before{content:""}.icon-Circle:before{content:""}.icon-Circle-Remove:before{content:""}.icon-Close:before{content:""}.icon-Cloud:before{content:""}.icon-Cloud-ICT:before{content:""}.icon-Cloud-IoT:before{content:""}.icon-Cloud-Networks:before{content:""}.icon-Cloud-Security:before{content:""}.icon-Collaboration:before{content:""}.icon-Collapse:before{content:""}.icon-Community:before{content:""}.icon-Community2:before{content:""}.icon-Compare:before{content:""}.icon-Congratulations-box:before{content:""}.icon-Connected-house:before{content:""}.icon-Connection-error:before{content:""}.icon-Connection-manager:before{content:""}.icon-Connectivity:before{content:""}.icon-Contact:before{content:""}.icon-Contactlist:before{content:""}.icon-Contest:before{content:""}.icon-Continuity:before{content:""}.icon-Cookie:before{content:""}.icon-Copy:before{content:""}.icon-Crash:before{content:""}.icon-Customer-Zone:before{content:""}.icon-Dance:before{content:""}.icon-Data:before{content:""}.icon-Deafpeople:before{content:""}.icon-Delivery:before{content:""}.icon-Desktop:before{content:""}.icon-Devices:before{content:""}.icon-Dial:before{content:""}.icon-Digital-media:before{content:""}.icon-Directassist:before{content:""}.icon-Download:before{content:""}.icon-Drag:before{content:""}.icon-E-carte-Facebook:before{content:""}.icon-Easy:before{content:""}.icon-Edit:before{content:""}.icon-Energy:before{content:""}.icon-Entertainment:before{content:""}.icon-Error-box:before{content:""}.icon-Eservices:before{content:""}.icon-Exhibition-screens:before{content:""}.icon-Expand:before{content:""}.icon-Eyedeficiency:before{content:""}.icon-Facebook:before{content:""}.icon-Family:before{content:""}.icon-Favourite:before{content:""}.icon-Favourite-unselected:before{content:""}.icon-Feedback:before{content:""}.icon-Fiber:before{content:""}.icon-Filter:before{content:""}.icon-Fixed-connection:before{content:""}.icon-Fixed-ringing:before{content:""}.icon-Flexibility:before{content:""}.icon-Flexible-delivery:before{content:""}.icon-Football:before{content:""}.icon-Football-11:before{content:""}.icon-Football-11plus:before{content:""}.icon-Forum:before{content:""}.icon-Forward:before{content:""}.icon-Freedelivery:before{content:""}.icon-Freeservices:before{content:""}.icon-Frequently-questions:before{content:""}.icon-Front-camera:before{content:""}.icon-G-Tablet:before{content:""}.icon-Gallery:before{content:""}.icon-Games:before{content:""}.icon-Gift:before{content:""}.icon-Government:before{content:""}.icon-Guitar:before{content:""}.icon-Handicap:before{content:""}.icon-Help:before{content:""}.icon-Home:before{content:""}.icon-Home-added-value:before{content:""}.icon-Hub:before{content:""}.icon-ICT:before{content:""}.icon-Icon-Mood-happy:before{content:""}.icon-Icon-Mood-neutral:before{content:""}.icon-Icon-Mood-unhappy:before{content:""}.icon-Ict-networking:before{content:""}.icon-Idea:before{content:""}.icon-Incomingcalls:before{content:""}.icon-Infinity:before{content:""}.icon-Information:before{content:""}.icon-Information-box:before{content:""}.icon-Infrastructure:before{content:""}.icon-Innovation:before{content:""}.icon-Inscription:before{content:""}.icon-Instagram:before{content:""}.icon-International:before{content:""}.icon-Internet:before{content:""}.icon-Internetlaptop:before{content:""}.icon-Internetmobile:before{content:""}.icon-Internettablet:before{content:""}.icon-Invoice-insight-advanced:before{content:""}.icon-Layer243:before{content:""}.icon-Linkedin:before{content:""}.icon-Links:before{content:""}.icon-Local-data:before{content:""}.icon-Location:before{content:""}.icon-Login1:before{content:""}.icon-Login2:before{content:""}.icon-LoginOpen:before{content:""}.icon-Logout:before{content:""}.icon-Low-stock:before{content:""}.icon-Magnify:before{content:""}.icon-Manual:before{content:""}.icon-Markets:before{content:""}.icon-Meeting:before{content:""}.icon-Mentaldeficiency:before{content:""}.icon-Menu:before{content:""}.icon-Menuburger:before{content:""}.icon-Messaging:before{content:""}.icon-Messenger:before{content:""}.icon-Micro:before{content:""}.icon-MicroSIM-card:before{content:""}.icon-Microsoft-Office:before{content:""}.icon-Minus-fill:before{content:""}.icon-Minutes120:before{content:""}.icon-Minutes15:before{content:""}.icon-Minutes1600:before{content:""}.icon-Minutes240:before{content:""}.icon-Minutes30:before{content:""}.icon-Minutes400:before{content:""}.icon-Minutes60:before{content:""}.icon-Minutes800:before{content:""}.icon-Mobile:before{content:""}.icon-Mobile-Coverage:before{content:""}.icon-Mobility-insurance:before{content:""}.icon-Monitoring:before{content:""}.icon-Mood-joy:before{content:""}.icon-Mood-very-bad:before{content:""}.icon-Move-Sticker:before{content:""}.icon-Move-box:before{content:""}.icon-Moving:before{content:""}.icon-Music:before{content:""}.icon-Myentertainment:before{content:""}.icon-Network:before{content:""}.icon-Newsletter:before{content:""}.icon-Next:before{content:""}.icon-No-playing:before{content:""}.icon-No-stock:before{content:""}.icon-Norton-security:before{content:""}.icon-Not-Available:before{content:""}.icon-Number-1:before{content:""}.icon-Number-10:before{content:""}.icon-Number-2:before{content:""}.icon-Number-3:before{content:""}.icon-Number-4:before{content:""}.icon-Number-5:before{content:""}.icon-Number-6:before{content:""}.icon-Number-7:before{content:""}.icon-Number-8:before{content:""}.icon-Number-9:before{content:""}.icon-OS:before{content:""}.icon-On-app:before{content:""}.icon-On-web:before{content:""}.icon-OneClick:before{content:""}.icon-Online-exclu-en:before{content:""}.icon-Online-exclu-fr:before{content:""}.icon-Online-exclu-nl:before{content:""}.icon-Online-promo-en:before{content:""}.icon-Online-promo-fr:before{content:""}.icon-Online-promo-nl:before{content:""}.icon-Options:before{content:""}.icon-Outcomingcalls:before{content:""}.icon-Overview:before{content:""}.icon-Packs:before{content:""}.icon-Paperclip:before{content:""}.icon-Pedestrian:before{content:""}.icon-Photo:before{content:""}.icon-Picture:before{content:""}.icon-Pin:before{content:""}.icon-Place-map:before{content:""}.icon-Play:before{content:""}.icon-Plus:before{content:""}.icon-Plus-fill:before{content:""}.icon-Points:before{content:""}.icon-Positioning:before{content:""}.icon-Posts:before{content:""}.icon-Presencehome:before{content:""}.icon-Previous:before{content:""}.icon-Prime:before{content:""}.icon-Print:before{content:""}.icon-Processor:before{content:""}.icon-Products:before{content:""}.icon-Promo:before{content:""}.icon-Proximus-TV-app:before{content:""}.icon-Pxs:before{content:""}.icon-Quote:before{content:""}.icon-Raccording-flat:before{content:""}.icon-Ready-to-use:before{content:""}.icon-Recycling:before{content:""}.icon-Reducer:before{content:""}.icon-Refresh:before{content:""}.icon-Relaunch:before{content:""}.icon-Reload:before{content:""}.icon-Remote:before{content:""}.icon-Remove:before{content:""}.icon-Remove-filter:before{content:""}.icon-Restart:before{content:""}.icon-Roaming:before{content:""}.icon-Roaming-Belgium:before{content:""}.icon-Search:before{content:""}.icon-Secure-payment:before{content:""}.icon-Seealso:before{content:""}.icon-Server:before{content:""}.icon-Settings:before{content:""}.icon-Shopmag:before{content:""}.icon-Smarphone-configuration:before{content:""}.icon-Smart-ringing:before{content:""}.icon-Smartphone:before{content:""}.icon-Smartphone-1:before{content:""}.icon-Smartphone-2:before{content:""}.icon-Smartphone-3:before{content:""}.icon-Smartphone-4:before{content:""}.icon-Smartphone-5:before{content:""}.icon-Smartphone-6:before{content:""}.icon-Smartphone4G:before{content:""}.icon-Smiley:before{content:""}.icon-Sms:before{content:""}.icon-Sondage:before{content:""}.icon-Sort-0-9:before{content:""}.icon-Sort-9-0:before{content:""}.icon-Sort-a-z:before{content:""}.icon-Sort-z-a:before{content:""}.icon-Sound-off:before{content:""}.icon-Sound-on:before{content:""}.icon-Speed:before{content:""}.icon-Speedtest-download:before{content:""}.icon-Speedtest-upload:before{content:""}.icon-Status-nok:before{content:""}.icon-Status-ok:before{content:""}.icon-Status-ongoing:before{content:""}.icon-Status-warning:before{content:""}.icon-Stay-informed:before{content:""}.icon-Stayinformed:before{content:""}.icon-Stock:before{content:""}.icon-Stopwatch:before{content:""}.icon-Subscription:before{content:""}.icon-Surfgsm:before{content:""}.icon-Sustainability:before{content:""}.icon-Switchon-switchoff:before{content:""}.icon-TV-replay-36:before{content:""}.icon-TVReplay:before{content:""}.icon-Tablet:before{content:""}.icon-Tailor:before{content:""}.icon-Target-Blank:before{content:""}.icon-Tarifs:before{content:""}.icon-Technical-cast:before{content:""}.icon-Telephony:before{content:""}.icon-Television:before{content:""}.icon-Temp:before{content:""}.icon-Tips1:before{content:""}.icon-Tips2:before{content:""}.icon-Tools:before{content:""}.icon-Top:before{content:""}.icon-Touchscreens:before{content:""}.icon-Tractor:before{content:""}.icon-Train:before{content:""}.icon-Transfer:before{content:""}.icon-Transfer-people:before{content:""}.icon-Trash:before{content:""}.icon-Triangle:before{content:""}.icon-TV-10:before{content:""}.icon-TV-12:before{content:""}.icon-TV-14:before{content:""}.icon-TV-16:before{content:""}.icon-TV-18:before{content:""}.icon-Twitter:before{content:""}.icon-Under-construct:before{content:""}.icon-Upgrade-account:before{content:""}.icon-Upload:before{content:""}.icon-Usage:before{content:""}.icon-Usage2:before{content:""}.icon-Validation-box:before{content:""}.icon-Video:before{content:""}.icon-Video-zap:before{content:""}.icon-Videoscope:before{content:""}.icon-View360:before{content:""}.icon-Waiting:before{content:""}.icon-Warning-box:before{content:""}.icon-Watch:before{content:""}.icon-Watch2:before{content:""}.icon-WhatsApp:before{content:""}.icon-Wireless-hub:before{content:""}.icon-Youtube:before{content:""}.icon-circular-economy:before{content:""}.icon-eco:before{content:""}.icon-happy-weeks:before{content:""}.icon-icon-VOD:before{content:""}.icon-mms:before{content:""}.icon-new-en:before{content:""}.icon-new-fr:before{content:""}.icon-new-nl:before{content:""}.icon-prepaid:before{content:""}.icon-promo:before{content:""}.icon-repair-device:before{content:""}.icon-sales-en:before{content:""}.icon-sales-fr:before{content:""}.icon-sales-nl:before{content:""}.icon-simlocked:before{content:""}.icon-temporary-device:before{content:""}.icon-Test-branding-Account-1:before{content:""}.icon-Test-branding-Car-1:before{content:""}.icon-Test-branding-Sim-1:before{content:""}';
1656
- const styleSheet$9 = new CSSStyleSheet();
1657
- styleSheet$9.replaceSync(styles$9);
1658
- const colorValues$1 = ["", "default", "inherit", "primary", "body", "details", "hover", "active", "disabled", "promo", "success", "warning", "error", "unlimited"];
1659
- const _Icon = class _Icon extends PxElement {
1660
- constructor() {
1661
- super(proximusSemanticStyleSheet, styleSheet$9);
1662
- this.template = () => `<i aria-hidden="true"></i>`;
1663
- this.shadowRoot.innerHTML = this.template();
1664
- }
1665
- static get observedAttributes() {
1666
- return [...super.observedAttributes, "name", "size", "color", "aria-label", "inverted"];
1667
- }
1668
- get name() {
1669
- return this.getAttribute("name");
1670
- }
1671
- set name(value) {
1672
- this.setAttribute("name", value);
1673
- }
1674
- get size() {
1675
- return this.getAttribute("size");
1676
- }
1677
- set size(value) {
1678
- this.setAttribute("size", value);
1679
- }
1680
- get color() {
1681
- return this.getAttribute("color");
1682
- }
1683
- set color(value) {
1684
- this.setAttribute("color", value);
1685
- }
1686
- get arialabel() {
1687
- return this.getAttribute("aria-label");
1688
- }
1689
- set arialabel(value) {
1690
- this.setAttribute("aria-label", value);
1691
- }
1692
- get inverted() {
1693
- return this.getAttribute("inverted");
1694
- }
1695
- set inverted(value) {
1696
- this.setAttribute("inverted", value);
1697
- }
1698
- attributeChangedCallback(attrName, oldValue, newValue) {
1699
- if (oldValue !== newValue) {
1700
- switch (attrName) {
1701
- case "name":
1702
- if (oldValue !== null && oldValue !== "") {
1703
- this.$el.classList.toggle(`icon-${oldValue}`);
1704
- }
1705
- if (newValue !== null && newValue !== "") {
1706
- this.$el.classList.toggle(`icon-${newValue}`);
1707
- }
1708
- break;
1709
- case "size":
1710
- this.updateAttribute(attrName, oldValue, newValue, iconSizeValues);
1711
- break;
1712
- case "color":
1713
- this.updateAttribute(attrName, oldValue, newValue, colorValues$1);
1714
- break;
1715
- case "aria-label":
1716
- if (newValue !== null && newValue !== "") {
1717
- this.$el.setAttribute("aria-label", newValue);
1718
- this.$el.removeAttribute("aria-hidden");
1719
- }
1720
- break;
1721
- }
1722
- }
1723
- }
1724
- updateAttribute(attrName, oldValue, newValue, attrValues) {
1725
- if (oldValue !== null && oldValue !== "" && oldValue !== "default") {
1726
- if (attrName === "size") {
1727
- this.$el.classList.toggle(`${attrName}-${oldValue}`);
1728
- } else {
1729
- this.$el.classList.toggle(oldValue);
1730
- }
1731
- }
1732
- if (newValue !== null && newValue !== "" && oldValue !== "default") {
1733
- if (attrName === "size") {
1734
- this.$el.classList.toggle(`${attrName}-${newValue}`);
1735
- } else {
1736
- this.$el.classList.toggle(newValue);
1737
- }
1738
- }
1739
- if (!this.checkName(attrValues, newValue)) {
1740
- console.error(`${newValue} is not an allowed ${attrName} value for ${this.$el}`);
1741
- }
1742
- }
1743
- checkName(values, value) {
1744
- return values.includes(value);
1745
- }
1746
- };
1747
- _Icon.nativeName = "i";
1748
- let Icon = _Icon;
1749
- customElements.define("px-icon", Icon);
1750
1804
  const imgCss = "img{display:inline-block;vertical-align:middle;max-width:100%;height:auto;border-style:none}@media only screen and (max-width: 40em){.mo,.m,.l{display:none}}@media only screen and (min-width: 40.0625em) and (max-width: 64em){.l{display:none}}@media only screen and (min-width: 40.0625em){.so{display:none}}@media only screen and (min-width: 64.0625em){.so,.mo{display:none}}";
1751
1805
  const styleSheet$8 = new CSSStyleSheet();
1752
1806
  styleSheet$8.replaceSync(imgCss);
@@ -1941,7 +1995,7 @@ _Picture.nativeName = "picture";
1941
1995
  let Picture = _Picture;
1942
1996
  customElements.define("px-picture", Picture);
1943
1997
  const styleSheet$7 = new CSSStyleSheet();
1944
- styleSheet$7.replaceSync(styles$a);
1998
+ styleSheet$7.replaceSync(styles$9);
1945
1999
  class Patch extends HTMLElement {
1946
2000
  constructor(semanticTokensStylesheet) {
1947
2001
  super();
@@ -2400,14 +2454,19 @@ class Tabs extends HTMLElement {
2400
2454
  class Tab extends HTMLElement {
2401
2455
  constructor(semanticStyleSheet) {
2402
2456
  super();
2403
- this.template = (title, selected) => `
2404
- <button role="tab" aria-selected="${selected}" type="button" tabindex="-1">
2405
- <span><slot>${title}</slot></span>
2457
+ this.template = () => `
2458
+ <button role="tab" aria-selected="false" type="button" tabindex="-1">
2459
+ <span><slot></slot></span>
2406
2460
  </button>
2407
2461
  `;
2408
2462
  this.attachShadow({ mode: "open" });
2409
- this.shadowRoot.innerHTML = this.template(this.getAttribute("title"), this.getAttribute("selected"));
2463
+ this.shadowRoot.innerHTML = this.template();
2410
2464
  this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
2465
+ }
2466
+ static get observedAttributes() {
2467
+ return ["selected", "for", "name"];
2468
+ }
2469
+ connectedCallback() {
2411
2470
  if (!this.name) {
2412
2471
  console.error("Tab needs a name attribute");
2413
2472
  }
@@ -2415,11 +2474,6 @@ class Tab extends HTMLElement {
2415
2474
  console.error("Tab needs a for attribute");
2416
2475
  }
2417
2476
  this.slot = "tabs";
2418
- }
2419
- static get observedAttributes() {
2420
- return ["selected", "for", "name"];
2421
- }
2422
- connectedCallback() {
2423
2477
  if (this.parentElement.inverted) {
2424
2478
  this.setAttribute("inverted", "");
2425
2479
  this.$button.setAttribute("inverted", "");
@@ -2480,10 +2534,6 @@ class TabPanel extends HTMLElement {
2480
2534
  this.attachShadow({ mode: "open" });
2481
2535
  this.shadowRoot.innerHTML = this.template();
2482
2536
  this.shadowRoot.adoptedStyleSheets = [semanticStyleSheet, styleSheet$4];
2483
- if (!this.name) {
2484
- console.error("TabPanel needs a name attribute");
2485
- }
2486
- this.slot = "tabpanels";
2487
2537
  }
2488
2538
  static get observedAttributes() {
2489
2539
  return ["name"];
@@ -2494,13 +2544,24 @@ class TabPanel extends HTMLElement {
2494
2544
  }
2495
2545
  }
2496
2546
  connectedCallback() {
2497
- const labelledBy = this.parentElement.querySelector(`[for="${this.getAttribute("name")}"]`);
2547
+ if (!this.name) {
2548
+ console.error("TabPanel needs a name attribute");
2549
+ }
2550
+ this.slot = "tabpanels";
2551
+ const labelledBy = this.parentElement.querySelector(
2552
+ `[for="${this.getAttribute("name")}"]`
2553
+ );
2498
2554
  if (labelledBy) {
2499
- this.$panel.setAttribute("aria-labelledby", labelledBy.getAttribute("name"));
2555
+ this.$panel.setAttribute(
2556
+ "aria-labelledby",
2557
+ labelledBy.getAttribute("name")
2558
+ );
2500
2559
  } else {
2501
2560
  console.error("No tab found for this panel");
2502
2561
  }
2503
- const selectedTab = this.parentElement.querySelector(`[for="${this.name}"]`);
2562
+ const selectedTab = this.parentElement.querySelector(
2563
+ `[for="${this.name}"]`
2564
+ );
2504
2565
  if (!isFalsy(selectedTab.selected)) {
2505
2566
  this.selected = true;
2506
2567
  } else {