@sapudex/web-components 0.117.1 → 0.138.0

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/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

@@ -76,6 +76,15 @@
   width: 100%;
 }
 
+:host(:not([_is-touched])[active]) .udex-phone-number-field:before {
+  content:"";
+  position:absolute;
+  z-index: -1;
+  inset: -5px;
+  border: 2px solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusS, 6px);
+}
+
 .udex-phone-number-field__label {
   position: absolute;
   margin-inline-start:-3px;
@@ -113,6 +122,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 {
@@ -346,6 +356,10 @@
   border-right: 1px solid transparent;
 }
 
+.hidden-text {
+  display: none;
+}
+
 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/ReviewItem.css

@@ -0,0 +1,121 @@
+:host {
+  --udex-review-item-column-space-xl: var(--udexSpacer84, 84px);
+  --udex-review-item-column-space-l-m: var(--udexSpacer72, 72px);
+  --udex-review-item-column-space-s-xs: var(--udexSpacer24, 24px);
+  --udex-review-item-underline-color: var(--udexColorGrey1);
+  --udex-review-item-text-and-title-color: var(--udexColorGrey9);
+  --udex-review-item-date-and-author-color: var(--udexColorGrey6);
+  --udex-review-item-max-text-height: 48px;
+}
+
+.udex-review-item {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  text-align: left;
+  gap: calc((100vw - (11 * var(--udex-review-item-column-space-xl))) / 12);
+  padding: var(--udexSpacer24) 0;
+  border-bottom: 1px solid var(--udex-review-item-underline-color);
+  font-family: var(--sapFontFamily, sans-serif);
+}
+
+.udex-review-item:dir(rtl) {
+  text-align: right;
+}
+
+.udex-review-item__rating-top {
+  display: flex;
+  gap: var(--udexSpacer24);
+  flex-direction: column;
+}
+
+.udex-review-item__rating-top .udex-review-item__rating-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.udex-review-item__rating-container, .udex-review-item__text-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--udexSpacer16);
+}
+
+.udex-review-item__title {
+  font-size: var(--udexTypographyHeadingMediumXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightMedium);
+  line-height: var(--udexTypographyHeadingLineHeight);
+  color: var(--udex-review-item-text-and-title-color);
+  padding: 0;
+  margin: 0;
+}
+
+.udex-review-item__date {
+  font-size: var(--udexTypographyBodyXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+  color: var(--udex-review-item-date-and-author-color);
+}
+
+.udex-review-item__text-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--udexSpacer8);
+}
+
+.udex-review-item__text-expander {
+  --udex-button-padding-small: 0 3px;
+  font-size: var(--udexTypographyBodySFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  padding: var(--udexSpacer8, 8px) 0;
+}
+
+.udex-review-item__text {
+  font-size: var(--udexTypographyBodySFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+  color: var(--udex-review-item-text-and-title-color);
+  white-space: pre-wrap;
+  padding: 0;
+  margin: 0;
+  max-height: var(--udex-review-item-max-text-height);
+  overflow: hidden;
+}
+
+.udex-review-item__text-expanded {
+  max-height: none;
+}
+
+.udex-review-item__author {
+  font-size: var(--udexTypographyNavigationRegularMFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyNavigationLineHeight);
+  color: var(--udex-review-item-date-and-author-color);
+  padding: 0;
+  margin: 0;
+}
+
+@media (max-width: 1599px) {
+  .udex-review-item {
+    gap: calc((100vw - (11 * var(--udex-review-item-column-space-l-m))) / 12);
+  }
+}
+
+@media (max-width: 979px) {
+  .udex-review-item {
+    display: flex;
+    gap: var(--udex-review-item-column-space-s-xs);
+    flex-direction: column;
+  }
+
+  .udex-review-item__rating-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+udex-rating-indicator {
+  --udex-rating_indicator_read-only-unrated_color: var(--udexColorMango6)
+}

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(--sapFontHeader5Size, 18px);
+  --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% -
@@ -37,6 +40,7 @@
 
   display: block;
   width: 100%;
+  position: relative;
 }
 
 :host([mode="Standard"]) .udex-search__label.udex-search__label--active {
@@ -129,6 +133,14 @@
   border-color: var(--udex-input-color-active-border);
 }
 
+:host(:not([_is-touched])[active]) .udex-search__root:before {
+  content:"";
+  position:absolute;
+  inset: -5px;
+  border: 2px solid var(--udexColorBlue10);
+  border-radius: var(--udex-input-radius);
+}
+
 .udex-search__field {
   display: block;
   width: 100%;
@@ -186,41 +198,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;
@@ -237,14 +250,22 @@ input[type="search"]::-webkit-search-results-decoration {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
-  width: 18px;
-  height: 18px;
+  width: 28px;
+  height: 28px;
   border: 2px solid #0040B0;
   border-radius: 50%;
   box-sizing: border-box;
 }
 
 [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;
 }
@@ -280,8 +301,8 @@ input[type="search"]::-webkit-search-results-decoration {
   z-index: -1;
   top: 0;
   left: 0;
-  width: 18px;
-  height: 18px;
+  width: 28px;
+  height: 28px;
   background-color: #0070F2;
   border-radius: 50%;
 }