@sapudex/web-components 0.114.2 → 0.127.6

package/src/themes/MastheadShell.css

@@ -13,14 +13,11 @@
   --udex-grid-margin-xl: 5.25rem;
   --udex-column-width-l: calc((100% - 2 * var(--udex-grid-margin-l) - 11 * var(--udex-grid-gutter)) / 12);
   --udex-column-width-xl: calc((100% - 2 * var(--udex-grid-margin-xl) - 11 * var(--udex-grid-gutter)) / 12);
-  --udex-masthead-shell-search-container-width-l: calc(8 * var(--udex-column-width-l) + 7 * var(--udex-grid-gutter));
   --udex-masthead-shell-search-container-width-xl: calc(8 * var(--udex-column-width-xl) + 7 * var(--udex-grid-gutter));
-  --udex-masthead-shell-search-column-width-l: calc((100% - 7 * var(--udex-grid-gutter)) / 8);
-  --udex-masthead-shell-search-column-width-xl: calc((100% - 7 * var(--udex-grid-gutter)) / 8);
-  --udex-masthead-shell-search-width-l: calc(5 * var(--udex-masthead-shell-search-column-width-l) + 4 * var(--udex-grid-gutter));
-  --udex-masthead-shell-search-width-xl: calc(5 * var(--udex-masthead-shell-search-column-width-xl) + 4 * var(--udex-grid-gutter));
   --udex-masthead-shell-close-button-divider-color: var(--udexCoreDividerLight, #D5DADD);
-  --udex-masthead-shell-z-ndex: 10;
+  --udex-masthead-shell-z-index: 10;
+  --udex-masthead-shell-container-xl-max-width: 1432px;
+  --udex-masthead-shell-container-l-max-width: 1456px;
 }
 
 :host {
@@ -29,7 +26,7 @@
   width: 100%;
   container-type: inline-size;
   background: var(--udex-masthead-shell-background);
-  z-index: var(--udex-masthead-shell-z-ndex);
+  z-index: var(--udex-masthead-shell-z-index);
 }
 
 :host([sticky-position]) {
@@ -37,22 +34,28 @@
   top: 0;
 }
 
+:host([_is-search-visible]) .udex-masthead-shell__main-content {
+  width: 30%;
+}
+
+:host([_is-search-visible])  .udex-masthead-shell__search-container {
+  width: 40%;
+}
+
 .udex-masthead-shell__search-container {
-  position: absolute;
-  top: 0;
-  right: var(--udexSpacer84);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: var(--udex-masthead-shell-search-container-width-xl);
-  height: 100%;
   background: var(--udex-masthead-shell-background);
-  z-index: 1;
 }
 
-.udex-masthead-shell__search-container:dir(rtl) {
-  left: var(--udexSpacer84);
-  right: auto;
+.udex-masthead-shell__btn-holder {
+  display: flex;
+  justify-content: flex-end;
+  width: 30%;
+}
+
+.udex-masthead-shell__close-search-btn {
+  --udex-control-button-small-height: 32px;
+  --udex-control-button-small-width: 32px;
+  --udex-control-button-small-icon-size: 18px;
 }
 
 .udex-masthead-shell {
@@ -61,15 +64,11 @@
   align-items: center;
   position: relative;
   padding: 0 var(--udexSpacer84);
-  max-width: 1428px;
+  max-width: var(--udex-masthead-shell-container-xl-max-width);
   margin: 0 auto;
   height: 60px;
 }
 
-:host ::slotted(udex-search) {
-  width: var(--udex-masthead-shell-search-width-xl);
-}
-
 .udex-masthead-shell__logo {
   margin-inline-end: var(--udexSpacer16);
   width: 64px;
@@ -112,6 +111,7 @@
   grid: 'logo siteLabel mainMenu ' / auto auto 1fr;
   align-items: center;
   padding-inline-end: var(--udexSpacer20);
+  box-sizing: border-box;
 }
 
 .udex-masthead-shell__main-menu {
@@ -187,21 +187,17 @@
   .udex-masthead-shell {
     padding-left: var(--udexSpacer72);
     padding-right: var(--udexSpacer72);
+    max-width: var(--udex-masthead-shell-container-l-max-width);
   }
 
   .udex-masthead-shell__search-container {
     right: var(--udexSpacer72);
-    width: var(--udex-masthead-shell-search-container-width-l);
   }
 
   .udex-masthead-shell__search-container:dir(rtl) {
     left: var(--udexSpacer72);
     right: auto;
   }
-
-  :host ::slotted(udex-search) {
-    width: var(--udex-masthead-shell-search-width-l);
-  }
 }
 
 @media (max-width: 1279px) {

package/src/themes/MediaPlayer.css

@@ -5,6 +5,7 @@
   --udex-media-player-mobile-width: 100%;
   --udex-media-player-controls-bar-height: 48px;
   --udex-media-player-controls-bar-small-height: 34px;
+  --udex-media-player-poster-object-fit: cover;
   --udex-media-player-base-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M423.5 49h-335c-13 0-24 12-24 27v329c0 15 11 27 24 27h335c13 0 24-12 24-27V76c0-15-11-27-24-27zm0 431h-335c-40 0-72-33-72-75V76c0-41 32-75 72-75h335c40 0 72 34 72 75v329c0 42-32 75-72 75z"></path></svg>');
   --udex-media-player-pause-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M358 480h-33q-11 0-18.5-7.5T299 454V58q0-11 7.5-18.5T325 32h33q11 0 18.5 7.5T384 58v396q0 11-7.5 18.5T358 480zm-171 0h-33q-11 0-18.5-7.5T128 454V58q0-11 7.5-18.5T154 32h33q11 0 18.5 7.5T213 58v396q0 11-7.5 18.5T187 480z"></path></svg>');
   --udex-media-player-play-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M122 480q-11 0-18.5-7.5T96 454V58q0-11 7.5-18.5T122 32q7 0 15 5l269 198q10 8 10 21t-10 21L137 475q-8 5-15 5zm25-372v296l200-148z"></path></svg>');
@@ -1311,8 +1312,8 @@ body.vjs-full-window.vjs-fullscreen .vjs-fullscreen-control > .vjs-icon-placehol
 .vjs-poster img {
   width: 100%;
   height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
+  -o-object-fit: var(--udex-media-player-poster-object-fit);
+  object-fit: var(--udex-media-player-poster-object-fit);
 }
 
 .video-js .vjs-live-control {

package/src/themes/Modal.css

@@ -38,3 +38,9 @@
   height: auto;
 }
 
+@media (max-width: 979px) {
+  :host(:not([type="basic"])) {
+    max-width: 100%;
+    max-height: 100%;
+  }
+}

package/src/themes/Pagination.css

@@ -46,6 +46,13 @@
   display: flex;
 }
 
+:host([desktop]) .udex-pagination__item a:focus,
+.udex-pagination__item a:focus-visible {
+  outline: solid var(--udexSpacer2, 2px) var(--udexColorBlue10, #002A86);
+  outline-offset: var(--udexSpacer2, 2px);
+  border-radius: var(--udexRadiusXXS, 2px);
+}
+
 .udex-pagination__page {
   display: block;
   padding: 0 var(--udex-pagination-item-paddings) var(--udex-pagination-item-active-border-width) var(--udex-pagination-item-paddings);

package/src/themes/PhoneNumberField.css

@@ -113,6 +113,7 @@
 
   margin-block: var(--udex-phone-number-field-button-margins-vertical);
   margin-inline: var(--udex-phone-number-field-button-margins-horizontal);
+  padding: var(--udexSpacer4, 4px);
 }
 
 .udex-phone-number-field__open-button {
@@ -345,3 +346,7 @@
   border-left: 1px solid var(--udex-phone-number-field-button-color-tertiary-standard-hover-border);
   border-right: 1px solid transparent;
 }
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: 100%;
+}

package/src/themes/RatingBar.css

@@ -0,0 +1,52 @@
+:host {
+  --udex-rating-bar-progress-color: var(--udexColorMango6);
+  --udex-rating-bar-progress-track-color: var(--udexColorGrey1);
+  --udex-rating-bar-text-color: var(--udexColorGrey7);
+  --udex-rating-bar-container-height: 1.5rem;
+  --udex-rating-bar-progress: 100%;
+  --udex-rating-bar-track-height: 0.75rem;
+  --udex-rating-bar-progress-radius: var(---udexRadiusM, 0.5rem);
+}
+
+.udex-rating-bar__container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap:var(--udexSpacer4);
+  height: var(--udex-rating-bar-container-height);
+  font-family: var(--sapFontFamily, sans-serif);
+}
+
+.udex-rating-bar__percentage, .udex-rating-bar__rating {
+  color: var(--udex-rating-bar-text-color);
+  font-size: var(--udexTypographyBodySFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+.udex-rating-bar__track {
+  width: 100%;
+  height: var(--udex-rating-bar-track-height);
+  background-color: var(--udex-rating-bar-progress-track-color);
+  border: none;
+  overflow: hidden;
+  border-radius: var(--udex-rating-bar-progress-radius);
+}
+
+.udex-rating-bar__progress {
+  width: var(--udex-rating-bar-progress);
+  height: 100%;
+  background-color: var(--udex-rating-bar-progress-color);
+  border: none;
+  border-radius: var(--udex-rating-bar-progress-radius);
+}
+
+.udex-rating__icon {
+  height: 0.875rem;
+  width: 0.875rem;
+  color: var(--udexColorMango6);
+}
+
+.hidden-text {
+  display: none;
+}

package/src/themes/Review.css

@@ -0,0 +1,196 @@
+:host {
+  --udex-review-container-vertical-padding: var(--udexSpacer32);
+  --udex-review-container-vertical-padding-xs: var(--udexSpacer24);
+  --udex-review-xs-gutter: var(--udexSpacer40);
+}
+
+.udex-review__container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: var(--udex-review-container-vertical-padding) var(--udexGridXLMargins);
+  font-family: var(--sapFontFamily, sans-serif);
+  box-sizing: border-box;
+}
+
+.udex-review__container-without-breakdown {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--udex-review-container-vertical-padding) var(--udexGridXLMargins);
+  font-family: var(--sapFontFamily, sans-serif);
+  box-sizing: border-box;
+}
+
+.udex-review__empty-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--udexSpacer12);
+  padding: var(--udex-review-container-vertical-padding) 0;
+  font-family: var(--sapFontFamily, sans-serif);
+  box-sizing: border-box;
+}
+
+.udex-review__rating {
+  font-size: var(--udexTypographyDisplayBoldMFontSize);
+  font-weight: var(--udexTypographyFontWeightBold);
+}
+
+.udex-review__content {
+  font-size: var(--udexTypographyDisplayBoldMFontSize);
+  font-weight: var(--udexTypographyFontWeightBold);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-inline-end: var(--udexGridXLGutters);
+  width: calc((100vw / var(--udexGridColumns) * 2) + var(--udexGridXLGutters));
+}
+
+.udex-review__content-without-breakdown {
+  font-size: var(--udexTypographyDisplayBoldMFontSize);
+  font-weight: var(--udexTypographyFontWeightBold);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.udex-review__additional-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udexSpacer8);
+  width: 100%;
+}
+
+.udex-review__additional-content-without-breakdown {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--udexSpacer12);
+  margin-bottom: 0;
+}
+
+
+.udex-review__rating-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--udexSpacer8);
+}
+
+.udex-review__rating-info-without-breakdown {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding-inline-start: var(--udexSpacer16);
+
+  .udex-review__reviews-text {
+    margin-bottom: 0;
+  }
+}
+
+.udex-review__default-text {
+  font-size: var(--udexTypographyBodySFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+  margin-bottom: var(--udexSpacer12);
+  text-align: center;
+}
+
+.udex-review__reviews-text {
+  font-size: var(--udexTypographyBodyXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+  color: var(--udexColorGrey7);
+  margin-top: var(--udexSpacer8);
+  margin-bottom: var(--udexSpacer12);
+}
+
+@media (max-width: 1599px) {
+  .udex-review__container {
+    padding: var(--udex-review-container-vertical-padding) var(--udexGridLMargins);
+  }
+}
+
+@media (max-width: 1279px) {
+  .udex-review__container {
+    padding: var(--udex-review-container-vertical-padding) var(--udexGridMMargins);
+  }
+
+  .udex-review__content {
+    width: calc((100vw / var(--udexGridColumns) * 3) + 2 * var(--udexGridMGutters));
+  }
+}
+
+@media (max-width: 979px) {
+
+  .udex-review__container-without-breakdown {
+    flex-direction: column;
+    align-items: center;
+    padding: var(--udex-review-container-vertical-padding) var(--udexGridSMargins);
+  }
+  
+  .udex-review__container {
+    padding: var(--udex-review-container-vertical-padding) var(--udexGridSMargins);
+  }
+
+  .udex-review__content {
+    margin-inline-end: var(--udexGridSGutters);
+    width: calc((100vw / var(--udexGridColumns) * 4) + 3 * var(--udexGridSGutters));
+  }
+  .udex-review__default-text {
+    font-size: var(--udexTypographyBodyXSFontSize);
+  }
+
+  .udex-review__content-without-breakdown {
+    margin-bottom: var(--udexSpacer16);
+  }
+  .udex-review__additional-content-without-breakdown {
+    justify-content: space-between;
+    gap: var(--udexSpacer16);
+  }
+  
+}
+
+@media (max-width: 639px) {
+  .udex-review__container {
+    padding: var(--udex-review-container-vertical-padding-xs) var(--udexGridXSMargins);
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .udex-review__container-without-breakdown {
+    padding: var(--udex-review-container-vertical-padding-xs) var(--udexGridXSMargins);
+  }
+
+  .udex-review__empty-container {
+    padding: var(--udex-review-container-vertical-padding-xs) 0;
+  }
+
+  .udex-review__content {
+    margin-bottom: var(--udex-review-xs-gutter);
+    margin-inline-end: 0;
+  }
+}
+
+.udex-review__icon {
+  height: 1.5rem;
+  width: 1.5rem;
+  color: var(--udexColorMango6);
+}
+
+udex-rating-indicator {
+  --udex-rating_indicator_read-only-unrated_color: var(--udexColorMango6)
+}
+
+.hidden-text {
+  display: none;
+}

package/src/themes/Search.css

@@ -20,13 +20,16 @@
   --udex-input-padding-horizontal: var(--udexSpacer12, 12px);
   --udex-input-padding-vertical: var(--udexSpacer8, 8px);
 
-  --udex-button-icon-size: var(--sapFontHeader2Size, 28px);
+  --udex-button-size: var(--sapFontHeader2Size, 28px);
+  --udex-button-color: var(--sapAccentColor10, var(--udexColorGrey7));
+  --udex-button-non-interactive-icon-color: var(--sapContent_NonInteractiveIconColor, var(--udexColorGrey7));
+  --udex-button-non-interactive-icon-size: var(--sapFontHeader5Size, 18px);
 
   --udex-dropdown-border-width: auto;
 
-  --udex-search-container-padding-inline-end: 12px;
-  --udex-search-label-inset-inline-start: 12px;
-  --udex-search-icons-margin-inline-end: 12px;
+  --udex-search-container-padding-inline-end: var(--udexSpacer12, 12px);
+  --udex-search-label-inset-inline-start: var(--udexSpacer12, 12px);
+  --udex-search-icons-column-gap: var(--udexSpacer12, 12px);
 
   --udex-search-label-width: calc(
     100% -
@@ -186,41 +189,42 @@ input[type="search"]::-webkit-search-results-decoration {
 
 .udex-search__label-with-search-icon,
 .udex-search__label-with-voice-icon {
-  max-width: calc(var(--udex-search-label-width) - var(--udex-button-icon-size));
+  max-width: calc(var(--udex-search-label-width) - var(--udex-button-size));
 }
 
 .udex-search__label-with-search-icon.udex-search__label-with-voice-icon {
   max-width: calc(
     var(--udex-search-label-width) -
-    var(--udex-button-icon-size) * 2 -
-    var(--udex-search-icons-margin-inline-end)
+    var(--udex-button-size) * 2 -
+    var(--udex-search-icons-column-gap)
   );
 }
 
 .udex-search__icons {
   display: flex;
   align-items: center;
+  column-gap: var(--udex-search-icons-column-gap);
 }
 
-.udex-search__icons-start {
-  padding-inline-start: 12px;
-}
-
-.udex-search__icons>* {
-  margin-inline-end: var(--udex-search-icons-margin-inline-end);
-}
-
-.udex-search__icons>*:last-child {
-  margin-inline-end: 0;
+.udex-search__icon {
+  margin-inline: 5px;
+  background-color: transparent;
+  border: none;
+  color: var(--udex-button-non-interactive-icon-color);
+  min-width: var(--udex-button-non-interactive-icon-size);
+  height: var(--udex-button-non-interactive-icon-size);
+  border-radius: 50%;
+  position: relative;
+  z-index: 1;
+  overflow: visible;
 }
 
-.udex-search__icon,
 .udex-search__button {
   background-color: transparent;
   border: none;
-  color: #475E75;
-  min-width: var(--udex-button-icon-size);
-  height: var(--udex-button-icon-size);
+  color: var(--udex-button-color);
+  min-width: var(--udex-button-size);
+  height: var(--udex-button-size);
   border-radius: 50%;
   position: relative;
   z-index: 1;
@@ -245,8 +249,16 @@ input[type="search"]::-webkit-search-results-decoration {
 }
 
 [ui5-button].udex-search__button::part(button) {
+  padding: 0;
   width: 28px;
   height: 28px;
+  line-height: 0;
+}
+
+[ui5-icon].udex-search__button-icon {
+  color: inherit;
+  width: 18px;
+  height: 18px;
 }
 
 [ui5-button].udex-search__button::part(icon) {
@@ -370,3 +382,7 @@ input[type="search"]::-webkit-search-results-decoration {
 .udex-search__prefix-popover::part(content) {
   padding: 0;
 }
+
+udex-dropdown {
+  --udex-dropdown-pane-max-width: 100%;
+}