@sapudex/web-components 2.43.0 → 2.45.0

package/src/themes/MastheadCountrySelector.css

@@ -1,29 +1,11 @@
 :host {
   --udex-masthead-country-selector-background: var(--udexColorNeutralWhite, #fff);
-  --udex-masthead-country-selector-padding-xl: var(--udexSpacer32) 52px 52px;
-  --udex-masthead-country-selector-padding-l: var(--udexSpacer24);
-  --udex-masthead-country-selector-padding-m: var(--udexSpacer24) var(--udexSpacer48);
-  --udex-masthead-country-selector-padding-xs: var(--udexSpacer24);
   --udex-masthead-country-selector-desktop-max-height: 375px;
   --udex-masthead-country-selector-title-border-color: var(--udexColorGrey2, #EAECEE);
-}
-
-:host([_is-mobile-mode]) .udex-masthead-country-selector__item_countries {
-  --udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);
-  --udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12);
-  border-bottom: 1px solid var(--udex-masthead-menu-item-border-color);
-  max-height: initial;
-  overflow: initial;
-}
-
-:host([_is-mobile-mode]) .udex-masthead-country-selector {
-  padding: var(--udex-masthead-country-selector-padding-l);
-  min-height: 100%;
-  box-sizing: border-box;
+  --udex-masthead-country-selector-title-color: var(--udexColorNeutralBlack, #000000);
 }
 
 .udex-masthead-country-selector {
-  padding: var(--udex-masthead-country-selector-padding-xl);
   background: var(--udex-masthead-country-selector-background);
 }
 
@@ -54,7 +36,7 @@
 
 .udex-masthead-country-selector__region-back-item::part(menu-item-button) {
   font-weight: var(--udexTypographyFontWeightMedium, 500);
-  color: var(--udexColorNeutralBlack);
+  color: var(--udex-masthead-country-selector-title-color);
   justify-content: space-between;
 }
 
@@ -107,6 +89,11 @@
   padding: 0;
 }
 
+:host([_is-mobile-mode]) .udex-masthead-country-selector__item::part(menu-item-link) {
+  --udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);
+  --udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12);
+}
+
 :host([_is-mobile-mode]) .udex-masthead-country-selector__list-container {
   height: 100%;
   overflow: auto;
@@ -119,12 +106,24 @@
 }
 
 :host([_is-mobile-mode]) .udex-masthead-country-selector {
-  padding: var(--udex-masthead-country-selector-padding-l);
   height: 100%;
-  overflow: auto;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  padding-bottom: var(--udexSpacer24);
+}
+
+:host([_is-mobile-mode]) .udex-masthead-country-selector__item_countries {
+  --udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);
+  --udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12);
+  border-bottom: 1px solid var(--udex-masthead-menu-item-border-color);
+  max-height: initial;
+  overflow: initial;
+}
+
+:host([_is-mobile-mode]) .udex-masthead-country-selector {
+  min-height: 100%;
+  box-sizing: border-box;
 }
 
 .udex-masthead-country-selector__list-container {
@@ -164,14 +163,16 @@
   }
 
   .udex-masthead-country-selector {
-    padding: var(--udex-masthead-country-selector-padding-l);
     height: 100%;
-    overflow: auto;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
   }
 
+  .udex-masthead-country-selector__list {
+    padding-bottom: var(--udexSpacer24);
+  }
+
   .udex-masthead-country-selector__item_countries {
     --udex-masthead-menu-item-padding-block-desktop: var(--udexSpacer16);
     --udex-masthead-menu-item-padding-inline-desktop: var(--udexSpacer8) var(--udexSpacer12);
@@ -181,17 +182,12 @@
   .udex-masthead-country-selector__list-container {
     height: 100%;
     overflow: auto;
+    padding-bottom: var(--udexSpacer24);
   }
 }
 
-@media (max-width: 979px) {
-  .udex-masthead-country-selector {
-    padding: var(--udex-masthead-country-selector-padding-m);
-  }
-}
-
-@media (max-width: 639px) {
-  .udex-masthead-country-selector {
-    padding: var(--udex-masthead-country-selector-padding-xs);
+@media (max-height: 550px) {
+  .udex-masthead-country-selector__list-container {
+    min-height: 100px;
   }
 }

package/src/themes/MastheadItem.css

@@ -30,6 +30,11 @@
   --udex-masthead-item-button-icon-size: 32px;
   --udex-masthead-item-arrow-icon-size: 16px;
   --udex-masthead-item-arrow-margin-inline-start: var(--udexSpacer4);
+  --udex-masthead-item-profile-padding-l: var(--udexSpacer64) var(--udexSpacer48) 80px var(--udexSpacer48);
+  --udex-masthead-item-padding-l: var(--udexSpacer32) 52px 52px;
+  --udex-masthead-item-padding-m: var(--udexSpacer24) var(--udexSpacer24) 0;
+  --udex-masthead-item-padding-s: var(--udexSpacer24) var(--udexSpacer48) 0 var(--udexSpacer48);
+  --udex-masthead-item-padding-xs: var(--udexSpacer24) var(--udexSpacer24) 0;
 
   display: var(--udex-masthead-item-display);
   align-items: var(--udex-masthead-item-align-content);
@@ -88,6 +93,10 @@
   background: var(--sapShell_Navigation_Background, #FFF);
 }
 
+.udex-masthead-item__button--explore + .udex-masthead-item__dropdown-holder {
+  padding: 0;
+}
+
 :host([_has-four-columns-menu]),
 :host([slot="exploreSAP"]) {
   position: inherit;
@@ -99,12 +108,8 @@
   inline-size: 100%;
 }
 
-:host([_has-four-columns-menu]) ::slotted([slot="dropdown"]) {
-  --udex-masthead-menu-padding-desktop: 32px var(--udexSpacer84);
-}
-
-:host([slot="exploreSAP"]) ::slotted([slot="dropdown"]) {
-  --udex-masthead-menu-padding-desktop: 32px 0;
+:host([_has-four-columns-menu]) .udex-masthead-item__dropdown-holder {
+  padding: var(--udexSpacer32) var(--udexSpacer84);
 }
 
 :host([_has-four-columns-menu]) ::slotted([slot="dropdown"]),
@@ -114,14 +119,11 @@
 }
 
 :host([slot="exploreSAP"]) .udex-masthead-item__dropdown-holder {
+  padding: var(--udexSpacer32) 0;
   max-width: var(--udex-masthead-shell-container-xl-max-width, 1432px);
   margin: 0 auto;
 }
 
-.udex-masthead-item__dropdown-holder {
-  position: relative;
-}
-
 .udex-masthead-item {
   font-size: inherit;
   line-height: inherit;
@@ -364,6 +366,10 @@
   box-shadow: none;
 }
 
+:host([_is-mobile-mode]) .udex-masthead-item__dropdown-holder {
+  overflow: auto;
+}
+
 :host([_is-mobile-mode]) .udex-masthead-item__dropdown:after,
 :host([part="menu-open-btn"]) .udex-masthead-item__dropdown:after {
   box-shadow: var(--udex-masthead-shell-dropdown-shadow);
@@ -381,18 +387,37 @@
   position: initial;
 }
 
+:host([_is-menu-open-btn]) .udex-masthead-item__dropdown-holder {
+  padding: 0;
+}
+
 .udex-masthead-hidden-text {
   display: none;
 }
 
+.udex-masthead-item__dropdown-holder {
+  padding: var(--udex-masthead-item-padding-l);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.udex-masthead-item__button--profile+.udex-masthead-item__dropdown-holder {
+  padding: var(--udex-masthead-item-profile-padding-l);
+}
+
+:host([_is-mobile-mode]) .udex-masthead-item__dropdown-holder {
+  padding: var(--udex-masthead-item-padding-m);
+}
+
 @media (max-width: 1599px) {
   :host([slot="exploreSAP"]) .udex-masthead-item__dropdown-holder {
     max-width: var(--udex-masthead-shell-container-l-max-width, 1456px);
-    padding: 0 var(--udexSpacer72);
+    padding: var(--udexSpacer32) var(--udexSpacer72);
+    box-sizing: content-box;
   }
 
-  :host([_has-four-columns-menu]) ::slotted([slot="dropdown"]) {
-    --udex-masthead-menu-padding-desktop: 32px var(--udexSpacer72);
+  :host([_has-four-columns-menu]) .udex-masthead-item__dropdown-holder {
+    padding: var(--udexSpacer32) var(--udexSpacer72);
   }
 }
 
@@ -406,6 +431,10 @@
     display: initial;
   }
 
+  :host .udex-masthead-item__dropdown-holder {
+    padding: var(--udex-masthead-item-padding-m);
+  }
+
   .udex-masthead-item__button--country-selector+.udex-masthead-item__dropdown {
     min-width: var(--udex-masthead-item-dropdown-mobile-min-width);
   }
@@ -445,6 +474,7 @@
 
   .udex-masthead-item__dropdown-holder {
     height: 100%;
+    overflow: auto;
   }
 
   .udex-masthead-item__dropdown:after {
@@ -470,5 +500,15 @@
   .udex-masthead-item__button--profile + .udex-masthead-item__dropdown {
     min-width: auto;
   }
+
+  :host .udex-masthead-item__dropdown-holder {
+    padding: var(--udex-masthead-item-padding-s);
+  }
+}
+
+@media (max-width: 639px) {
+  :host .udex-masthead-item__dropdown-holder {
+    padding: var(--udex-masthead-item-padding-xs);
+  }
 }
 

package/src/themes/MastheadMenu.css

@@ -1,6 +1,4 @@
 :host {
-  --udex-masthead-menu-padding-desktop: 32px 52px 52px;
-  --udex-masthead-menu-padding-mobile: 24px;
   --udex-masthead-menu-background: var(--sapShell_Navigation_Background, #FFF);
   --udex-masthead-menu-column_gap: 52px;
   --udex-masthead-menu-column-width: calc(1rem * 15);
@@ -14,6 +12,7 @@
   --udex-masthead-menu-grid-template-columns: auto;
   --udex-masthead-menu-justify-content: flex-start;
   --udex-masthead-menu-sub-category-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-masthead-menu-sub-category-font-size: var(--udexTypographyBodyXSFontSize, 14px);
   --udex-masthead-menu-sub-category-color: var(--udexColorGrey9, #223548);
   --udex-masthead-menu-sub-category-text-transform: none;
   --udex-masthead-menu-sub-category-font-weight: var(--udexTypographyFontWeightRegular, 400);
@@ -25,7 +24,6 @@
 }
 
 .udex-masthead-menu {
-  padding: var(--udex-masthead-menu-padding-desktop);
   background: var(--udex-masthead-menu-background);
   display: inline-block;
   position: relative;
@@ -178,10 +176,6 @@
   font-size: var(--udex-masthead-menu-title-font-size-mobile);
 }
 
-:host([_is-mobile-mode]) .udex-masthead-menu {
-  padding: var(--udex-masthead-menu-padding-mobile);
-}
-
 :host([_is-mobile-mode]) .udex-masthead-menu__row {
   gap: var(--udex-masthead-menu-mobile-column-gap, 56px);
   display: flex;
@@ -266,10 +260,6 @@
     font-size: var(--udex-masthead-menu-title-font-size-mobile);
   }
 
-  .udex-masthead-menu {
-    padding: var(--udex-masthead-menu-padding-mobile);
-  }
-
   .udex-masthead-menu__row {
     gap: var(--udex-masthead-menu-mobile-column-gap, 56px);
     display: flex;

package/src/themes/MastheadMobileMenu.css

@@ -114,15 +114,3 @@ span.udex-masthead-mobile-menu__sub-category {
 .udex-masthead-mobile-menu__sub-list li {
   margin-bottom: var(--udex-masthead-menu-sub-list-item-spacing);
 }
-
-@media (max-width: 979px) {
-  .udex-masthead-mobile-menu__nav-holder {
-    padding: var(--udex-masthead-mobile-menu-padding-s);
-  }
-}
-
-@media (max-width: 639px) {
-  .udex-masthead-mobile-menu__nav-holder {
-    padding: var(--udex-masthead-mobile-menu-padding-xs);
-  }
-}

package/src/themes/MastheadProfileMenu.css

@@ -1,8 +1,5 @@
 :host {
   --udex-masthead-profile-menu-color: var(--udexColorNeutralBlack, #000);
-  --udex-masthead-profile-menu-paddings-desktop: 64px 48px 80px 48px;
-  --udex-masthead-profile-menu-paddings-mobile: var(--udexSpacer24, 24px);
-  --udex-masthead-profile-menu-paddings-mobile-s: var(--udexSpacer24, 24px) var(--udexSpacer48, 48px);
   --udex-masthead-profile-menu-background-color: var(--udexColorNeutralWhite, #FFF);
   --udex-masthead-profile-menu-login-border-color: var(--udexColorGrey2, #EAECEE);
   --udex-masthead-profile-menu-username-color: inherit;
@@ -30,7 +27,6 @@
   flex-direction: column;
   align-items: stretch;
   background-color: var(--udex-masthead-profile-menu-background-color);
-  padding: var(--udex-masthead-profile-menu-paddings-desktop);
   box-sizing: border-box;
 }
 
@@ -73,13 +69,12 @@
 }
 
 :host([_is-mobile-mode]) .udex-masthead-profile-menu {
-  padding: var(--udex-masthead-profile-menu-paddings-mobile);
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  overflow: auto;
 }
 
+:host([_is-mobile-mode]) .udex-masthead-profile-menu__identities-list-wrap,
 :host([_is-mobile-mode]) .udex-masthead-profile-menu__message,
 :host([_is-mobile-mode]) .udex-masthead-profile-menu__header {
   margin-bottom: var(--udexSpacer24);
@@ -158,6 +153,17 @@
   overflow: auto;
 }
 
+:host([_is-mobile-mode]) .udex-masthead-profile-menu__add-remove-btn,
+:host([_is-mobile-mode]) .udex-masthead-profile-menu__btn,
+:host([_is-mobile-mode]) .udex-masthead-profile-menu__content {
+  margin-bottom: var(--udexSpacer24);
+  padding-top: 0;
+}
+
+:host([_is-mobile-mode]) .udex-masthead-profile-menu__add-remove-btn {
+  margin-top: 0;
+}
+
 .udex-masthead-profile-menu__links {
   height: 100%;
   overflow: auto;
@@ -244,12 +250,15 @@
   }
 
   .udex-masthead-profile-menu {
-    padding: var(--udex-masthead-profile-menu-paddings-mobile);
     box-sizing: border-box;
     width: 100%;
     min-height: 100%;
   }
 
+  .udex-masthead-profile-menu__identities-list-wrap,
+  .udex-masthead-profile-menu__add-remove-btn,
+  .udex-masthead-profile-menu__btn,
+  .udex-masthead-profile-menu__content,
   :host([_is-mobile-mode]) .udex-masthead-profile-menu__message,
   :host([_is-mobile-mode]) .udex-masthead-profile-menu__header {
     margin-bottom: var(--udexSpacer32);
@@ -263,19 +272,16 @@
   udex-masthead-menu-item::part(menu-item) {
     justify-content: center;
   }
-}
 
-@media (max-width: 979px) {
-  :host([_is-mobile-mode]) .udex-masthead-profile-menu,
-  .udex-masthead-profile-menu {
-    padding: var(--udex-masthead-profile-menu-paddings-mobile-s);
+  .udex-masthead-profile-menu__btn {
+    padding-top: 0;
   }
 }
 
-@media (max-width: 639px) {
-  :host([_is-mobile-mode]) .udex-masthead-profile-menu,
-  .udex-masthead-profile-menu {
-    padding: var(--udex-masthead-profile-menu-paddings-mobile);
+@media (max-height: 550px) {
+  .udex-masthead-profile-menu__identities-list-wrap,
+  .udex-masthead-profile-menu__content {
+    min-height: 100px;
   }
 }
 

package/src/themes/RadioButton.css

@@ -1,5 +1,5 @@
 :host {
-  --udex-radio-button-group-color-display-only-background: var(--udexColorNeutralWhite0, #ffffff00);
+  --udex-radio-button-group-color-display-only-background: var(--udexColorNeutralWhite0, #FFFFFF00);
   --udex-radio-button-group-color-display-only-border: var(--sapField_TextColor, #223548);
   --udex-radio-button-group-color-display-only-selection: var(--sapField_TextColor, #223548);
   --udex-radio-button-checked-fill: var(--sapContent_Selected_ForegroundColor, #0070f2);
@@ -8,21 +8,22 @@
   --udex-radio-button-color: var(--udexColorGrey6 ,#5B738B);
   --udex-radio-button-border-radius: var(--udexRadiusXS);
   --udex-radio-button-inner-size: var(--udexSpacer24, 24px);
-  --udex-radio-button-outer-ring-padding-with-label: 0px;
-  --udex-radio-button-outer-ring-padding: 9px;
+  --udex-radio-button-outer-ring-padding-with-label: 0;
   --udex-radio-button-label-offset: var(--udexSpacer12, 12px);
   --udex-radio-button-label-color: var(--udexColorGrey9, #223548);
   --udex-radio-button-svg-size: var(--udexSpacer24, 24px);
   --udex-radio-button-outer-ring-color: var(--sapField_BorderColor, #5b738b);
-  --udex-radio-button-outer-ring-bg: var(--sapField_Background, #ffffff);
+  --udex-radio-button-outer-ring-bg: var(--sapField_Background, #FFF);
   --udex-radio-button-outer-ring-width: 0.063rem;
   --udex-radio-button-inner-ring-radius: 25%;
   --udex-radio-button-inner-ring-color: var(--udexColorBlue8, #0057D2);
   --udex-radio-button-outer-ring-checked-hover-color: var(--sapContent_Selected_ForegroundColor, #0070f2);
   --udex-radio-button-outer-ring-hover-color: var(--sapContent_Selected_ForegroundColor, #0070f2);
   --udex-radio-button-hover-fill: var(--udexColorBlue1 , #EBF8FF);
-  --udex-radio-button-hover-fill-information: var(--sapField_Background, #ffffff);
+  --udex-radio-button-hover-fill-information: var(--sapField_Background, #FFF);
   --udex-radio-button-read-only-inner-ring-color: var(--udexColorGrey8, #354A5F);
+  --udex-radio-button-label-side-padding:var(--udexSpacer8, 8px);
+  --udex-radio-button-outer-ring-padding: var(--udexSpacer8, 8px);
 }
 
 :host(:not([hidden])) {
@@ -30,7 +31,7 @@
 }
 
 :host([text]) .ui5-radio-root {
-  padding-inline-end: 0px;
+  padding-inline-end: 0;
 }
 
 .ui5-radio-root:hover .ui5-radio-inner--hoverable .ui5-radio-svg-outer,
@@ -99,6 +100,8 @@
 :host .ui5-radio-root {
   align-items: center;
   min-height: var(--udex-radio-button-min-height);
+  padding-block: var(--udex-radio-button-label-side-padding);
+  padding-inline-start: var(--udex-radio-button-outer-ring-padding);
 }
 
 :host([display-only]) .ui5-radio-root,

package/src/themes/TagGroup.css

@@ -38,8 +38,7 @@
   display: none;
 }
 
-:host([disabled]) .udex-tag-group__tokenizer,
-:host([readonly]) .udex-tag-group__tokenizer {
+:host([disabled]) .udex-tag-group__tokenizer {
   pointer-events: none;
 }
 

package/src/themes/TextField.css

@@ -210,7 +210,8 @@
 }
 
 .udex-text-field__container:dir(rtl) .udex-text-field__label {
-  right: var(--udexSpacer8)
+  right: var(--udexSpacer8);
+  left: auto;
 }
 
 .udex-text-field__label.udex-text-field__label_active,

package/dist/assets/messagebundle_pt-DPeE7NbC.js

@@ -1 +0,0 @@
-const s="© {0} SAP SE ou empresa afiliada SAP. Todos os direitos reservados.",o="Síntese",a="Sair",e="Principais links",t="Voltar ao início",O={COPYRIGHT:s,OVERVIEW:o,LOGOUT:a,MAIN_LINKS:e,BACK_TO_TOP:t};export{t as BACK_TO_TOP,s as COPYRIGHT,a as LOGOUT,e as MAIN_LINKS,o as OVERVIEW,O as default};

package/dist/assets/messagebundle_ro-CN4kAAYE.js

@@ -1 +0,0 @@
-const e="© {0} SAP SE sau o companie afiliată a SAP. Toate drepturile rezervate.",a="Imagine generală",n="Ieșire",o="Linkuri principale",s="Înapoi sus",t={COPYRIGHT:e,OVERVIEW:a,LOGOUT:n,MAIN_LINKS:o,BACK_TO_TOP:s};export{s as BACK_TO_TOP,e as COPYRIGHT,n as LOGOUT,o as MAIN_LINKS,a as OVERVIEW,t as default};

package/dist/assets/messagebundle_ru-BT7zyn7i.js

@@ -1 +0,0 @@
-const O="© SAP SE или аффилированная компания SAP. Все права защищены.",s="Обзор",t="Выход",I="Основные ссылки",T="Наверх",n={COPYRIGHT:O,OVERVIEW:s,LOGOUT:t,MAIN_LINKS:I,BACK_TO_TOP:T};export{T as BACK_TO_TOP,O as COPYRIGHT,t as LOGOUT,I as MAIN_LINKS,s as OVERVIEW,n as default};

package/dist/assets/messagebundle_sk-gmWb_4Wo.js

@@ -1 +0,0 @@
-const s="© {0} SAP SE alebo sesterská spoločnosť spoločnosti SAP. Všetky práva vyhradené.",o="Prehľad",O="Odhlásiť",a="Hlavné odkazy",t="Na začiatok",e={COPYRIGHT:s,OVERVIEW:o,LOGOUT:O,MAIN_LINKS:a,BACK_TO_TOP:t};export{t as BACK_TO_TOP,s as COPYRIGHT,O as LOGOUT,a as MAIN_LINKS,o as OVERVIEW,e as default};

package/dist/assets/messagebundle_sl-B4p3OqyZ.js

@@ -1 +0,0 @@
-const e="© {0} SAP SE ali SAP-jevo povezano podjetje. Vse pravice pridržane.",a="Izpiši me",o="Glavne povezave",n="Nazaj na vrh",s={COPYRIGHT:e,OVERVIEW:a,MAIN_LINKS:o,BACK_TO_TOP:n};export{n as BACK_TO_TOP,e as COPYRIGHT,o as MAIN_LINKS,a as OVERVIEW,s as default};