@sapudex/web-components 2.22.0 → 2.23.0

package/src/themes/CountrySelector.css

@@ -1,104 +1,64 @@
 :host {
   --udex-country-selector-flag-width: 30px;
   --udex-country-selector-flag-height: 20px;
-  --udex-country-selector-popover-min-width: 0px;
-  --udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, 0.4);
-  --udex-country-selector-max-width: 100%;
-  --udex-country-selector-text-offset-left: 50px; /* flag icon width(30px) + default input padding(12px) + specified in design spacing(8px) */
-  --udex-country-selector-text-offset-right: 36px; /* trigger icon width(16px) + default input padding(12px) + specified in design spacing(8px) */
+  --udex-country-selector-padding-start: 50px;
+  --udex-country-selector-padding-end: 12px;
+  --udex-country-selector-text-offset: 36px;
+  --udex-country-selector-search-inset-end: 42px;
+  --udex-country-selector-search-inset-start: 36px;
+  --udex-country-selector-active-text-offset-y: -21px;
+  --udex-country-selector-label-offset-y: 96px;
 }
-
-:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger {
-  cursor: pointer;
-}
-
-:host([displayonly])::part(textfield-input),
-:host([readonly])::part(textfield-input),
-:host([disabled])::part(textfield-input) {
-  cursor: default;
-}
-
-:host(:not([hide-flag-images])) [udex-text-field]:not([active])[value=""]::part(label) {
-  transform: translateX(var(--udex-country-selector-text-offset-right));
-}
-
-:host(:not([hide-flag-images])) [udex-text-field]:not([active])[value=""]::part(label):dir(rtl) {
-  transform: translateX(calc(var(--udex-country-selector-text-offset-right)* -1));
-}
-
-:host([displayonly])::part(textfield-control-btn),
-.hidden-text {
-  display: none;
-}
-
-.udex-country-selector__text {
-  width: 100%;
-}
-
-:host([hide-flag-images])::part(textfield-input),
-.udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item) {
-  padding-left: var(--udexSpacer12);
-  padding-right: var(--udexSpacer12);
+:host([_country-selector]) .udex-text-field__label {
+  max-width: calc(100% - var(--udex-country-selector-label-offset-y));
 }
 
-:host([hide-flag-images]) [udex-text-field]::part(textfield-input) {
-  padding-inline-start: var(--udexSpacer12);
+:host([_country-selector]) .udex-text-field__label {
+  transform: translate(var(--udex-country-selector-text-offset));
 }
 
-.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger::after {
-  left: var(--udexSpacer12);
-  right: var(--udexSpacer32);
+:host([_country-selector]) .udex-text-field__label.udex-text-field__label_active {
+  transform: translateY(var(--udex-country-selector-active-text-offset-y));
 }
 
-.udex-country-selector__trigger {
-  display: flex;
-  align-items: center;
-  position: relative;
-  max-width: var(--udex-country-selector-max-width);
-  width: 100%;
+:host([_country-selector]) .udex-text-field__text-holder {
+  inset: 0 1px;
 }
 
-.udex-country-selector__trigger--disabled {
-  opacity: var(--udex-country-selector-input-disabled-opacity);
+:host([_country-selector]) [udex-list-item]::part(item) {
+  padding: var(--udexSpacer8) var(--udexSpacer12) var(--udexSpacer8) var(--udex-country-selector-padding-start);
 }
 
-.udex-list::part(content) {
-  padding: 0;
+:host([_country-selector]) .udex-text-field__search {
+  inset: 0;
+  padding: var(--udexSpacer8) 0;
 }
 
-.udex-country-selector__trigger::after {
-  content: attr(value);
-  position: absolute;
-  left: calc(24px + var(--udex-country-selector-flag-width));
-  right: 40px;
-  font-family: var(--sapFontFamily, sans-serif);
-  font-weight: var(--udexTypographyFontWeightRegular, 400);
-  font-size: var(--udexTypographyBodySFontSize, 16px);
-  line-height: var(--udexTypographyBodyLineHeight, 24px);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  pointer-events: none;
+:host([_country-selector][hide-flag-images]) .udex-text-field__search {
+  --udex-country-selector-search-inset-start: 0;
+  padding: var(--udexSpacer8) var(--udexSpacer12);
+  inset: 0 42px 0 0;
 }
 
-:dir(rtl) .udex-country-selector__trigger::after {
-  right: calc(24px + var(--udex-country-selector-flag-width));
-  left: 40px;
+:host([_country-selector][hide-flag-images]) .udex-text-field__text-holder {
+  inset: 0 13px;
 }
 
-.udex-text-field__input {
-  inset-inline-start: var(--udexSpacer12);
+:host([_country-selector][hide-flag-images]) .udex-text-field__label {
+  --udex-country-selector-text-offset: 0;
 }
 
-[udex-text-field]::part(label) {
-  max-width: calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)
+:host([_country-selector][hide-flag-images]) [udex-list-item]::part(item),
+:host([_country-selector][hide-flag-images]) .udex-text-field__text-holder {
+  --udex-country-selector-padding-start: var(--udexSpacer12);
+  --udex-country-selector-padding-end: var(--udexSpacer12);
 }
 
-[udex-text-field][active]::part(label) {
-  padding: 6px var(--udexSpacer4, 4px) 0;
+:host([_country-selector][hide-flag-images]) .udex-text-field__label {
+  --udex-country-selector-label-offset-y: 56px;
 }
 
-.udex-country-selector-item__image, .udex-country-selector__image {
+.udex-text-field__image {
   background-color: var(--udexColorGrey4, #A9B4BE);
   background-image: url("https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp");
   background-repeat: no-repeat;
@@ -107,6 +67,7 @@
   top: 0;
   transform: translate(0, 50%);
   z-index: 1;
+  min-width: var(--udex-country-selector-flag-width);
   width: var(--udex-country-selector-flag-width);
   height: var(--udex-country-selector-flag-height);
   inset-inline-start: var(--udexSpacer12);
@@ -114,45 +75,11 @@
   pointer-events: none;
 }
 
-[udex-list-item]::part(item) {
+.udex-text-field__input > .udex-text-field__image {
   position: relative;
-  padding-inline-start: calc(24px + var(--udex-country-selector-flag-width));
-  padding-inline-end: var(--udexSpacer12, 12px);
-}
-
-[udex-dropdown] {
-  --udex-dropdown-pane-max-width: 100%;
-}
-
-[udex-text-field] {
-  --udex-input-padding: 0 var(--udex-country-selector-text-offset-right) 0 var(--udex-country-selector-text-offset-left);
-}
-
-[udex-text-field]:dir(rtl) {
-  --udex-input-padding: 0 var(--udex-country-selector-text-offset-left)  0 var(--udex-country-selector-text-offset-right);
-}
-
-[udex-text-field]::part(textfield-input) {
-  cursor: pointer;
-}
-
-[udex-dropdown] {
-  --udex-dropdown-pane-min-width: var(--udex-country-selector-popover-min-width);
-}
-
-.hidden {
-  position: absolute;
-  width: 0px;
-  height: 0px;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  border: 0;
-  padding: 0;
-}
-
-@media (width < 640px) {
-  [udex-dropdown] {
-    --udex-dropdown-pane-min-width-xs: var(--udex-country-selector-popover-min-width);
-  }
+  transform: translate(0);
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  margin-inline-start: var(--udexSpacer12);
+  margin-inline-end: var(--udexSpacer8);
 }

package/src/themes/EventRibbon.css

@@ -243,8 +243,8 @@
 
   --udex-event-ribbon-background-blend-mode: multiply;
   --udex-event-ribbon-background-position: center;
-  --udex-event-ribbon-background-size: 100%;
-  --udex-event-ribbon-hover-background-size: 112%;
+  --udex-event-ribbon-background-size: cover;
+  --udex-event-ribbon-hover-background-size: 1.12;
 
   --udex-event-ribbon-margin-xl: 84px;
   --udex-event-ribbon-margin-m-l: 72px;
@@ -278,15 +278,6 @@
   gap: var(--udexSpacer32, 32px);
 }
 
-.udex-event-ribbon__container-with-background-image {
-  background-image: var(--udex-event-ribbon-background-image);
-  background-blend-mode: var(--udex-event-ribbon-background-blend-mode);
-  background-position: var(--udex-event-ribbon-background-position);
-  background-size: var(--udex-event-ribbon-background-size);
-  background-repeat: no-repeat;
-  transition: background ease-out 300ms;
-}
-
 .udex-event-ribbon__container:focus,
 .udex-event-ribbon__container:focus-visible {
   outline: solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);
@@ -297,8 +288,25 @@
   background-color: var(--udex-event-ribbon-hover-background-color);
 }
 
-.udex-event-ribbon__container-with-background-image:hover {
-  background-size: var(--udex-event-ribbon-hover-background-size);
+.udex-event-ribbon__container-with-background-image::before {
+  content: '';
+  display: block;
+  position: absolute;
+  inset: 0;
+  background-image: var(--udex-event-ribbon-background-image);
+  background-color: var(--udex-event-ribbon-background-color);
+  background-blend-mode: var(--udex-event-ribbon-background-blend-mode);
+  background-size: var(--udex-event-ribbon-background-size);
+  background-position: var(--udex-event-ribbon-background-position);
+  background-repeat: no-repeat;
+  transition: ease-out 300ms;
+  z-index: 0;
+  will-change: transform;
+}
+
+.udex-event-ribbon__container-with-background-image:hover::before {
+  background-color: var(--udex-event-ribbon-hover-background-color);
+  transform: scale(var(--udex-event-ribbon-hover-background-size));
 }
 
 :host([mode="dark"]) .udex-event-ribbon__container {

package/src/themes/ListItem.css

@@ -51,11 +51,17 @@
   background: var(--udex-list-item-background-active);
 }
 
+:host([_aria-selected]:not([mode="SingleContent"])),
 :host(:not([disabled]):not([selected]):not([mode="SingleContent"]):hover) {
   background: var(--udex-list-item-background-hover);
   color: var(--udex-list-item-color-hover);
 }
 
+:host([_aria-selected][selected]:not([mode="SingleContent"])) {
+  background: var(--udex-list-item-background-selected-hover);
+  border-color: var(--udex-list-item-border-color-selected-hover);
+}
+
 :host(:not([mode="SingleContent"]):not([disabled])[desktop]) .udex-list__item:focus:before,
 :host(:not([mode="SingleContent"]):not([disabled])) .udex-list__item:focus-visible:before {
   content: '';

package/src/themes/MastheadItem.css

@@ -272,7 +272,6 @@
 :host([part="menu-open-btn"]) .udex-masthead-item__dropdown-holder {
   height: 100%;
   box-shadow: none;
-  overflow: auto;
 }
 
 :host([_is-mobile-mode]) .udex-masthead-item__dropdown:after,
@@ -332,7 +331,6 @@
 
   .udex-masthead-item__dropdown-holder {
     height: 100%;
-    overflow: auto;
   }
 
   .udex-masthead-item__dropdown:after {

package/src/themes/MastheadMobileMenu.css

@@ -22,6 +22,8 @@
 
 .udex-masthead-mobile-menu__nav-holder {
   padding: var(--udex-masthead-mobile-menu-padding-m);
+  height: 100%;
+  overflow: auto;
 }
 
 .udex-masthead-mobile-menu__explore-btn {

package/src/themes/Search.css

@@ -59,7 +59,6 @@
 :host(:not([mode="Home Search"])) .udex-search-prefix .udex-search__label.udex-search__label--active.udex-search__label--animation-enabled {
   display: block;
   top: var(--udexSpacer8);
-  line-height: 18px;
   transform: translateY(-110%);
   padding: 0  var(--udexSpacer4);
   font-family: var(--udex-input-font-family-label-active);

package/src/themes/SelectBase.css

@@ -0,0 +1,239 @@
+:host {
+  --udex-select-box-popover-min-width: 0px;
+  --udex-select-box-popover-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 rgba(34,54,73,0.3));
+  --udex-select-box-popover-border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  --udex-select-box-popover-border-width: var(--sapElement_BorderWidth, 1px);
+  --udex-select-box-popover-border-radius: var(--udexRadiusM, 8px);
+  --udex-select-box-input-color-typed-text: var(--sapField_TextColor, var(--udexCoreTextDark));
+  --udex-select-box-input-background: var(--sapField_Background, var(--udexColorNeutralWhite));
+  --udex-select-box-input-autocomplete-background: transparent;
+}
+
+:host([displayonly]) .udex-text-field__search,
+:host([readonly]) .udex-text-field__search,
+:host([disabled]) .udex-text-field__search,
+:host([disabled]) .udex-text-field__trigger,
+:host([readonly]) .udex-text-field__trigger {
+  cursor: inherit;
+}
+
+:host([mode="SingleSelect"]) .udex-text-field__input {
+  position: relative;
+}
+
+:host([_focused]) .udex-text-field__wrap:before {
+  content: "";
+  position: absolute;
+  inset: -5px;
+  border: 2px solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusXS);
+  pointer-events: none;
+}
+
+:host([readonly]) .udex-text-field__search {
+  background: inherit;
+  border: inherit;
+}
+
+.udex-text-field__input:not([readonly]):not([disabled]) .udex-text-field__trigger:hover {
+  border-left: 1px solid var(--udexColorGrey4, #A9B4BE);
+}
+
+.udex-text-field__input[open]:not([readonly]):not([disabled]) .udex-text-field__trigger:hover,
+.udex-text-field__input[open]:not([readonly]) .udex-text-field__trigger {
+  border-left: 1px solid var(--udexColorBlue4, #89D1FF);
+  cursor: pointer;
+}
+
+:host(:dir(rtl)) .udex-text-field__input:not([readonly]) .udex-text-field__trigger:hover {
+  border-right: 1px solid var(--udexColorGrey4, #A9B4BE);
+  border-left: none;
+}
+
+:host(:dir(rtl)) .udex-text-field__input[open]:not([readonly]) .udex-text-field__trigger {
+  border-right: 1px solid var(--udexColorBlue4, #89D1FF);
+  border-left: none;
+}
+
+:host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
+:host([value-state="Error"]) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-left: 1px solid var(--udexCoreSemanticError4, #FF8CB2);
+  color:  var(--udexCoreSemanticError9, #840606);
+}
+
+:host([value-state="Error"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-right: 1px solid var(--udexCoreSemanticError4, #FF8CB2);
+  color:  var(--udexCoreSemanticError9, #840606);
+  border-left: none;
+}
+
+:host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
+:host([value-state="Success"]) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-left: 1px solid var(--udexCoreSemanticSuccess6, #36a41d);
+  color: var(--udexCoreSemanticSuccess9, #1E592F);
+}
+
+:host([value-state="Success"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-right: 1px solid var(--udexCoreSemanticSuccess6, #36a41d);
+  color: var(--udexCoreSemanticSuccess9, #1E592F);
+  border-left: none;
+}
+
+:host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__trigger:hover,
+:host([value-state="Warning"]) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-left: 1px solid var(--udexCoreSemanticWarning6, #E76500);
+  color: var(--udexCoreSemanticWarning9, #8D2A00);
+}
+
+:host([value-state="Warning"]:dir(rtl)) .udex-text-field__input[open] .udex-text-field__trigger {
+  border-right: 1px solid var(--udexCoreSemanticWarning6, #E76500);
+  color: var(--udexCoreSemanticWarning9, #8D2A00);
+  border-left: none;
+}
+
+.udex-text-field__trigger:hover,
+:host([mode="SingleSelect"]:not([readonly]):not([displayonly]):not([disabled])) .udex-text-field__container:hover {
+  cursor: pointer;
+}
+
+:host([mode="SingleSelect"]) .udex-text-field__search {
+  position: absolute;
+  inset: 0 42px 0 0;
+}
+
+.udex-text-field__holder {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.udex-text-field__label {
+  pointer-events: none;
+  max-width: calc(100% - 56px);
+}
+
+.udex-text-field__label_active {
+  position: absolute;
+  top: 9px;
+  left: 12px;
+}
+
+.udex-text-field__input {
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.udex-text-field__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border-style: solid;
+  box-sizing: border-box;
+  border-width: var(--sapButton_BorderWidth);
+  border-color: transparent;
+  border-radius: var(--udexRadiusXS);
+  padding: var(--udexSpacer4);
+  z-index: 1;
+  height: 42px;
+  width: 42px;
+  min-width: 42px;
+  color: var(--udexColorGrey7, #475E75);
+  outline: none;
+}
+
+:host([mode="SingleSelect"]) .udex-text-field__trigger {
+  margin-inline-start: auto;
+}
+
+:host([_open]) .udex-text-field__trigger [ui5-icon]{
+  transform: rotate(180deg);
+}
+
+.udex-text-field__trigger [ui5-icon] {
+  height: 18px;
+  width: 18px;
+  color: inherit;
+}
+
+.udex-text-field__text-holder {
+  background: var(--udex-select-box-input-background);
+  position: absolute;
+  inset: 0 13px;
+  overflow: hidden;
+  padding: var(--udexSpacer8) 0;
+  pointer-events: none;
+  z-index: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([readonly]) .udex-text-field__text-holder {
+  background: inherit;
+}
+
+.udex-text-field__single-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  background-color: var(--udex-select-box-input-autocomplete-background);
+}
+
+.udex-text-field__single-label b {
+  font-weight: normal;
+}
+
+:host .udex-text-field__input[open] .udex-text-field__trigger {
+  color: var(--udexColorBlue9, #0040B0);
+}
+
+.udex-select-box__dropdown {
+  --udex-dropdown-pane-min-width: var(--udex-select-box-popover-min-width);
+  width: var(--udex-dropdown-pane-width);
+  border: var(--udex-select-box-popover-border-width) solid var(--udex-select-box-popover-border-color);
+  border-radius: var(--udex-select-box-popover-border-radius);
+  box-shadow: var(--udex-select-box-popover-shadow);
+}
+
+.udex-no-result {
+  font-family: var(--sapFontFamily);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  color: var(--sapContent_TitleColor, #000000);
+  padding: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px);
+}
+
+.udex-select-box__dropdown::part(content) {
+  padding: 0;
+  overflow: auto;
+}
+
+.udex-text-field__search {
+  font-family: var(--sapFontFamily);
+  font-size: 16px;
+  line-height: 24px;
+  display: block;
+  color: var(--udex-select-box-input-color-typed-text);
+  padding: var(--udexSpacer8) var(--udexSpacer12);
+  box-sizing: border-box;
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  background: var(--udex-select-box-input-background);
+  border-radius: var(--udexRadiusXS);
+  cursor: pointer;
+  border: 0;
+  width: 100%;
+}
+
+.udex-text-field__trigger:focus,
+.udex-text-field__search:focus {
+  outline: none;
+}
+
+@media (max-width: 639px) {
+  .udex-select-box__dropdown {
+    --udex-dropdown-pane-min-width-xs: var(--udex-select-box-popover-min-width);
+  }
+}