@sapudex/web-components 0.127.6 → 0.143.0

package/src/themes/CountrySelector.css

@@ -1,10 +1,11 @@
 :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-min-width: 320px;
   --udex-country-selector-max-width: 100%;
-  --udex-country-selector-min-width-xs-and-s: 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__text {
@@ -21,18 +22,11 @@
   right: var(--udexSpacer32);
 }
 
-@media (width < 640px) {
-  .udex-country-selector__trigger{
-    min-width: var(--udex-country-selector-min-width-xs-and-s);
-  }
-}
-
 .udex-country-selector__trigger {
   display: flex;
   align-items: center;
   position: relative;
   max-width: var(--udex-country-selector-max-width);
-  min-width: var(--udex-country-selector-min-width);
   width: 100%;
 }
 
@@ -48,24 +42,6 @@
   padding: 0;
 }
 
-.udex-country-selector__icon {
-  position: absolute;
-  right: 12px;
-}
-
-.udex-country-selector__icon:dir(rtl) {
-  right: auto;
-  left: 12px;
-}
-
-.udex-country-selector__icon {
-  pointer-events: none;
-}
-
-udex-dropdown[open] .udex-country-selector__icon {
-  transform: rotate(180deg)
-}
-
 .udex-country-selector__trigger::after {
   content: attr(value);
   position: absolute;
@@ -90,19 +66,40 @@ udex-dropdown[open] .udex-country-selector__icon {
   inset-inline-start: var(--udexSpacer12);
 }
 
-udex-text-field::part(label) {
-  transform: translateY(-110%);
-  padding: 0 var(--udexSpacer4, 4px);
-  font-size: var(--udexTypographyBodyXXSFontSize, 12px);
+:host(:not([hide-flag-images])) udex-text-field[aria-expanded="false"]:not([active])[value=""]::part(label) {
+  transform: translateX(36px);
+}
+
+:host(:not([hide-flag-images])) udex-text-field[aria-expanded="false"]:not([active])[value=""]::part(label):dir(rtl) {
+  transform: translateX(-36px);
+}
+
+udex-text-field[aria-expanded="true"]::part(label) {
   line-height: 18px;
+  transform: translateY(-110%);
+  padding: 0 4px;
+  font-size: 12px;
+  background: linear-gradient(transparent 55%, var(--sapField_Background) 45%);
+}
+
+udex-text-field::part(label) {
   background: linear-gradient(transparent 55%, var(--sapField_Background) 45%);
+  padding: 0 var(--udexSpacer4, 4px);
+  max-width: calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)
+}
+
+udex-text-field[active]::part(label) {
+  padding: 6px var(--udexSpacer4, 4px) 0;
 }
 
 .udex-country-selector-item__image, .udex-country-selector__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;
+  background-position: 1000px 0;
   position: absolute;
-  top: 50%;
-  transform: translate(0, -50%);
+  top: 0;
+  transform: translate(0, 50%);
   z-index: 1;
   width: var(--udex-country-selector-flag-width);
   height: var(--udex-country-selector-flag-height);
@@ -118,9 +115,37 @@ udex-list-item::part(item) {
 }
 
 udex-text-field[readonly]::part(label) {
-  background: linear-gradient(var(--sapField_Background) 65%, var(--sapField_ReadOnly_Background) 35%);
+  background: var(--sapField_ReadOnly_Background);
 }
 
 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) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+udex-dropdown {
+  --udex-dropdown-pane-min-width: var(--udex-country-selector-popover-min-width);
+}
+
+@media (width < 640px) {
+  udex-dropdown {
+    --udex-dropdown-pane-min-width-xs: var(--udex-country-selector-popover-min-width);
+  }
+}
+
+.hidden-text {
+  display: none;
+}

package/src/themes/Dropdown.css

@@ -7,7 +7,10 @@
   --udex-dropdown-horizontal-distance: 0;
   --udex-dropdown-vertical-distance: 0;
   --udex-dropdown-pane-min-width: 320px;
+  --udex-dropdown-left-offset: 0px;
+  --udex-dropdown-pane-min-width-xs: calc(100% - var(--udex-dropdown-left-offset));
   --udex-dropdown-pane-max-width: 640px;
+  --udex-dropdown-pane-max-width-xs: 100%;
   --udex-dropdown-pane-width: fit-content;
   --udex-dropdown-pane-max-height: none;
   --udex-dropdown-pane-overflow: visible;
@@ -55,3 +58,10 @@
   color: var(--sapContent_TitleColor, #000000);
   padding: 0 var(--udexSpacer16, 16px) var(--udexSpacer16, 16px);
 }
+
+@media (width < 640px) {
+  .udex-dropdown__pane {
+    min-width: var(--udex-dropdown-pane-min-width-xs);
+    max-width: var(--udex-dropdown-pane-max-width-xs);
+  }
+}

package/src/themes/FilterMenu.css

@@ -17,8 +17,18 @@
   --udex-filter-menu-trigger-selection-bar-background: var(--sapHoverColor, #0070f2);
   --udex-filter-menu-trigger-outline-border-color:  var(--udexColorBlue10, #002A86);
 
-  --udex-filter-menu-dropdown-width: fit-content;
-  --udex-filter-menu-dropdown-max-width: 640px;
+  --udex-filter-menu-popover-left-offset: 0px;
+  --udex-filter-menu-popover-min-width-xs: calc(100% - var(--udex-filter-menu-popover-left-offset));
+  --udex-filter-menu-popover-max-width-xs: 100%;
+
+  --udex-filter-menu-popover-width: fit-content;
+  --udex-filter-menu-popover-min-width: 320px;
+  --udex-filter-menu-popover-max-width: 640px;
+
+  --udex-filter-menu-popover-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
+  --udex-filter-menu-popover-border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  --udex-filter-menu-popover-border-width: var(--sapElement_BorderWidth, 1px);
+  --udex-filter-menu-popover-border-radius: var(--udexRadiusM, 8px);
 
   display: inline-block;
 }
@@ -74,14 +84,10 @@
   color: var(--udex-filter-menu-trigger-prefix-color-default);
 }
 
-.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-prefix{
+.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-prefix {
   color: var(--udex-filter-menu-trigger-prefix-color-hover);
 }
 
-.udex-filter-menu[open] .udex-filter-menu__trigger-prefix {
-  color: var(--udex-filter-menu-trigger-prefix-color-active);
-}
-
 .udex-filter-menu__trigger-name {
   color: var(--udex-filter-menu-trigger-color-default);
 }
@@ -98,10 +104,14 @@
   opacity: 0;
 }
 
-.udex-filter-menu[open] .udex-filter-menu__trigger:before {
-  opacity: 1;
+.udex-filter-menu__trigger-active .udex-filter-menu__trigger-prefix {
+  color: var(--udex-filter-menu-trigger-prefix-color-active);
 }
 
+.udex-filter-menu__trigger-active:before {
+  opacity: 1;
+}  
+
 .udex-filter-menu__trigger-icon {
   width: 16px;
   height: 16px;
@@ -109,7 +119,7 @@
   color: var(--udex-filter-menu-trigger-icon-default);
 }
 
-.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-name{
+.udex-filter-menu__trigger-wrap:hover .udex-filter-menu__trigger-name {
   color: var(--udex-filter-menu-trigger-color-hover);
 }
 
@@ -117,12 +127,12 @@
   color: var(--udex-filter-menu-trigger-icon-hover);
 }
 
-.udex-filter-menu[open] .udex-filter-menu__trigger-icon {
+.udex-filter-menu__trigger-active .udex-filter-menu__trigger-icon {
   transform: rotate(180deg);
   color: var(--udex-filter-menu-trigger-icon-active);
 }
 
-.udex-filter-menu[open] .udex-filter-menu__trigger-name {
+.udex-filter-menu__trigger-active .udex-filter-menu__trigger-name {
   color: var(--udex-filter-menu-trigger-color-active);
 }
 
@@ -140,7 +150,47 @@
   margin-inline-start: var(--udexSpacer4, 4px);
 }
 
-udex-dropdown {
-  --udex-dropdown-pane-max-width: var(--udex-filter-menu-dropdown-max-width);
-  --udex-dropdown-pane-width: var(--udex-filter-menu-dropdown-width);
+ui5-popover {
+  border: var(--udex-filter-menu-popover-border-width) solid var(--udex-filter-menu-popover-border-color);
+  border-radius: var(--udex-filter-menu-popover-border-radius);
+  box-shadow: var(--udex-filter-menu-popover-shadow);
+  min-width: var(--udex-filter-menu-popover-min-width);
+  max-width: var(--udex-filter-menu-popover-max-width);
+  width: var(--udex-filter-menu-popover-width);
+}
+
+ui5-popover::part(content) {
+  padding: 0;
+  overflow: auto;
+}
+
+ui5-popover::part(header),
+ui5-popover::part(footer) {
+  padding: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px);
+}
+
+ui5-popover::part(footer) {
+  justify-content: flex-start;
+  border-color: var(--sapField_BorderColor, var(--udexCoreBorderDefault));
+  box-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px rgba(34,54,73,0.3));
+}
+
+::slotted([slot="header"]) {
+  width: 100%;
+}
+
+.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: 0 var(--udexSpacer16, 16px) var(--udexSpacer16, 16px);
+}
+
+@media (width < 640px) {
+  ui5-popover {
+    min-width: var(--udex-filter-menu-popover-min-width-xs);
+    max-width: var(--udex-filter-menu-popover-max-width-xs);
+  }
 }

package/src/themes/ListItem.css

@@ -291,3 +291,7 @@
   top: 50%;
   transform: translate(0, -50%);
 }
+
+.hidden {
+  display: none;
+}

package/src/themes/MastheadItem.css

@@ -14,19 +14,19 @@
   --udex-masthead-item-display: inline-flex;
   --udex-masthead-item-icon-size: 1.125rem;
   --udex-masthead-item-icon-container-size: 2rem;
-  --udex-masthead-item-outline-border-color:  var(--udexColorBlue10, #002A86);
-  --udex-masthead-item-dropdown-box-shadow:  var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
+  --udex-masthead-item-outline-border-color: var(--udexColorBlue10, #002A86);
+  --udex-masthead-item-dropdown-box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
   --udex-masthead-item-dropdown-position-left: -55px;
   --udex-masthead-item-dropdown-position-right: -55px;
   --udex-masthead-item-dropdown-mobile-width: 360px;
-  --udex-masthead-item-dropdown-position: fixed;
+  --udex-masthead-item-dropdown-position: absolute;
   --udex-masthead-item-dropdown-height:  calc(100vh - 60px);
   --udex-masthead-item-dropdown-zindex: 100;
 
-  position: relative;
   display: var(--udex-masthead-item-display);
   align-items: var(--udex-masthead-item-align-content);
   justify-content: var(--udex-masthead-item-justify-content);
+  position: relative;
 }
 
 .udex-masthead-item__dropdown {
@@ -204,7 +204,21 @@
   --udex-masthead-menu-grid-template-columns: repeat(4, calc(25% - var(--udex-masthead-menu-column_gap)*3/4));
 }
 
+:host([slot="profile"]) ::slotted([slot="dropdown"]) {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 @media (max-width: 1279px) {
+  :host {
+    position: initial;
+  }
+
+  :host([slot="profile"]) ::slotted([slot="dropdown"]) {
+    display: initial;
+  }
+
   .udex-masthead-item__button--profile+.udex-masthead-item__dropdown,
   .udex-masthead-item__dropdown {
     top: 60px;

package/src/themes/MastheadMobileMenu.css

@@ -50,6 +50,10 @@ udex-masthead-menu-item::part(menu-item-link) {
   justify-content: space-between;
 }
 
+.udex-masthead-mobile-menu__heading::part(menu-item) {
+  justify-content: center;
+}
+
 .udex-masthead-mobile-menu__back-item::part(menu-item-button):after {
   content: "";
 }

package/src/themes/MastheadShell.css

@@ -18,6 +18,7 @@
   --udex-masthead-shell-z-index: 10;
   --udex-masthead-shell-container-xl-max-width: 1432px;
   --udex-masthead-shell-container-l-max-width: 1456px;
+  --udex-masthead-mobile-menu-buttons-width: 360px;
 }
 
 :host {
@@ -34,11 +35,14 @@
   top: 0;
 }
 
-:host([_is-search-visible]) .udex-masthead-shell__main-content {
+:host([show-search-by-default]) .udex-masthead-shell__right-menu,
+:host([show-search-by-default]) .udex-masthead-shell__main-content,
+:host([_is-search-opened]) .udex-masthead-shell__main-content {
   width: 30%;
 }
 
-:host([_is-search-visible])  .udex-masthead-shell__search-container {
+:host([show-search-by-default]) .udex-masthead-shell__search-container,
+:host([_is-search-opened]) .udex-masthead-shell__search-container {
   width: 40%;
 }
 
@@ -124,7 +128,10 @@
 .udex-masthead-shell__right-menu {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   gap: var(--udexSpacer8);
+  padding-inline-start: var(--udexSpacer20);
+  box-sizing: border-box;
 }
 
 .udex-masthead-shell__explore {
@@ -178,6 +185,7 @@
   color: var(--udex-masthead-shell-site-label-color-hover);
 }
 
+:host([show-search-by-default]) .udex-masthead-shell__search-icon,
 .udex-masthead-shell__close-btn,
 .udex-masthead-shell__menu-btn {
   display: none;
@@ -201,39 +209,110 @@
 }
 
 @media (max-width: 1279px) {
+  :host([show-search-by-default]) .udex-masthead-shell__search-container,
+  :host([show-search-by-default]) .udex-masthead-shell__main-content,
+  :host([show-search-by-default]) .udex-masthead-shell__right-menu {
+    width: auto;
+  }
+
+  :host([show-search-by-default]) .udex-masthead-shell__search-container {
+    flex: auto;
+  }
+
+  :host([show-search-by-default]) .udex-masthead-shell__site-label {
+    margin: 0;
+  }
+
+  :host([show-search-by-default]) .udex-masthead-shell__main-content {
+    padding-inline-end: var(--udexSpacer32);
+  }
+
   .udex-masthead-shell__cart,
   .udex-masthead-shell__profile,
   .udex-masthead-shell__search-icon,
   .udex-masthead-shell__explore,
-  .udex-masthead-shell__main-menu,
-  .udex-masthead-shell__site-label {
+  .udex-masthead-shell__main-menu {
     display: none;
   }
 
   .udex-masthead-shell__menu-btn,
-  .udex-masthead-shell_mobile-menu-open .udex-masthead-shell__cart,
-  .udex-masthead-shell_mobile-menu-open .udex-masthead-shell__profile,
-  .udex-masthead-shell_mobile-menu-open .udex-masthead-shell__close-btn {
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__cart,
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__profile,
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__close-btn {
     display: flex;
   }
 
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu {
+    width: var(--udex-masthead-mobile-menu-buttons-width);
+    background: var(--udex-masthead-shell-background);
+    padding-inline-end: var(--udexSpacer72);
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+  }
+
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl) {
+    right: auto;
+    left: 0;
+  }
+
   .udex-masthead-shell__right-menu {
+    padding-inline-start: var(--udexSpacer32);
     gap: var(--udexSpacer12);
   }
 }
 
 @media (max-width: 979px) {
+  :host([_is-search-opened][show-search-by-default]) .udex-masthead-shell__search-container,
+  :host([show-search-by-default]) .udex-masthead-shell__search-icon {
+    display: block;
+  }
+
+  :host([_is-search-opened]) .udex-masthead-shell__right-menu,
+  :host([show-search-by-default]) .udex-masthead-shell__search-container,
+  :host([_is-mobile-menu-open][show-search-by-default]) .udex-masthead-shell__search-icon,
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__site-label,
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__logo {
+    display: none;
+  }
+
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu {
+    padding-inline-end: var(--udexSpacer48);
+    width: auto;
+    left: 0;
+  }
+
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu:dir(rtl) {
+    right: 0;
+  }
+
   .udex-masthead-shell {
     padding: 0 var(--udexSpacer48);
   }
-  .udex-masthead-shell_mobile-menu-open .udex-masthead-shell__logo {
-    display: none;
+
+  .udex-masthead-shell__btn-holder {
+    padding-inline-start: var(--udexSpacer32);
+    width: auto;
   }
 }
 
 @media (max-width: 639px) {
+  :host([_is-search-opened]) .udex-masthead-shell__main-content {
+    display: none;
+  }
+
+  :host([_is-mobile-menu-open]) .udex-masthead-shell__right-menu {
+    padding-inline-end: var(--udexSpacer24);
+  }
+
   .udex-masthead-shell {
     padding: 0 var(--udexSpacer24);
   }
+
+  .udex-masthead-shell__btn-holder {
+    padding-inline-start: var(--udexSpacer8);
+  }
 }
 

package/src/themes/PhoneNumberField.css

@@ -47,8 +47,6 @@
   --udex-phone-number-field-flag-height: 20px;
   --udex-phone-number-field-button-border: var(--udexColorGrey4, #A9B4BE);
   --udex-phone-number-field-button-color-tertiary-standard-hover-border: var(--udexColorGrey4, #A9B4BE);
-  --udex-phone-number-field-min-width: 320px;
-  --udex-phone-number-field-min-width-xs-and-s :100%;
   --udex-phone-number-field-max-width: 100%;
   display: block;
   font-family: var(--sapFontFamily, sans-serif);
@@ -57,12 +55,6 @@
 
 }
 
-@media (width < 640px) {
-  .udex-phone-number-field{
-    min-width: var(--udex-phone-number-field-min-width-xs-and-s);
-  }
-}
-
 .udex-phone-number-field {
   position: relative;
   padding: var(--udex-phone-number-field-paddings);
@@ -71,11 +63,19 @@
   background: var(--udex-phone-number-field-color-standard-default-background);
   border-radius: var(--udex-phone-number-field-radius);
   border: 1px solid var(--udex-phone-number-field-color-standard-default-border);
-  min-width: var(--udex-phone-number-field-min-width);
   max-width: var(--udex-phone-number-field-max-width);
   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;
@@ -111,13 +111,24 @@
   --udex-button-color-tertiary-standard-active-border: transparent;
   --udex-button-color-tertiary-standard-active-background: transparent;
 
+  min-width: fit-content;
   margin-block: var(--udex-phone-number-field-button-margins-vertical);
   margin-inline: var(--udex-phone-number-field-button-margins-horizontal);
-  padding: var(--udexSpacer4, 4px);
+  border-radius: var(--udex-phone-number-field-radius);
+  border-right: 1px solid transparent;
+  margin-inline-start: -13px;
+  padding: var(--udexSpacer2, 2px) 0;
+  z-index: 3;
 }
 
-.udex-phone-number-field__open-button {
-  z-index: 3;
+.udex-phone-number-field__open-button[focused]:not([active])::part(button):after,
+.udex-phone-number-field__open-button[focused][active]::part(button):before {
+  inset: 3px;
+  border-radius: 4px;
+}
+
+.udex-phone-number-field__open-button::part(button) {
+  padding: 11px;
 }
 
 :host([field-state="Success"]) .udex-phone-number-field__open-button {
@@ -195,7 +206,7 @@
 
 .udex-phone-number-field__input {
   font-weight: var(--udexTypographyFontWeightRegular, 400);
-  flex-grow: 1;
+  width: 100%;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
@@ -331,12 +342,6 @@
 }
 
 /* to do: maybe we will need to create separate component for control button */
-.udex-phone-number-field__open-button {
-  border-radius: var(--udex-phone-number-field-radius);
-  border-right: 1px solid transparent;
-}
-
-
 .udex-phone-number-field__open-button:hover {
   --udex-button-color-tertiary-standard-hover-border: transparent;
   border-right: 1px solid var(--udex-phone-number-field-button-color-tertiary-standard-hover-border);
@@ -347,6 +352,16 @@
   border-right: 1px solid transparent;
 }
 
+.hidden-text {
+  display: none;
+}
+
 udex-dropdown {
-  --udex-dropdown-pane-max-width: 100%;
-}
+  --udex-dropdown-pane-min-width: var(--udex-phone-number-field-popover-min-width);
+}
+
+@media (width < 640px) {
+  udex-dropdown {
+    --udex-dropdown-pane-min-width-xs: var(--udex-phone-number-field-popover-min-width);
+  }
+}