@sapudex/web-components 0.138.0 → 0.147.0

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,7 +63,6 @@
   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%;
 }
@@ -120,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 {
@@ -204,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;
@@ -340,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);
@@ -361,5 +357,11 @@
 }
 
 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);
+  }
 }

package/src/themes/Search.css

@@ -141,6 +141,10 @@
   border-radius: var(--udex-input-radius);
 }
 
+:host([mode="Home Search"]:not([_is-touched])[active]) .udex-search__root:before {
+  z-index: -1;
+}
+
 .udex-search__field {
   display: block;
   width: 100%;

package/src/themes/SecondaryNavigationItem.css

@@ -82,17 +82,24 @@
   height: 14px;
 }
 
-.udex-secondary-navigation__dropdown {
+.udex-secondary-navigation__dropdown,
+.udex-secondary-navigation__dropdown[data-horizontal-align="left"]:dir(rtl) {
   position: absolute;
   top: 100%;
   margin-top: 1px;
   left: calc(var(--udexSpacer16) * -1);
+  right: auto;
   box-shadow: var(--udex-secondary-navigation-item-dropdown-shadow);
   min-width: var(--udex-secondary-navigation-item-dropdown-min-width);
   max-width: var(--udex-secondary-navigation-item-dropdown-max-width);
   background: var(--udex-secondary-navigation-item-dropdown-background);
 }
 
+.udex-secondary-navigation__dropdown[data-horizontal-align="right"] {
+  left: auto;
+  right: calc(var(--udexSpacer16) * -1);
+}
+
 .udex-secondary-navigation__dropdown:dir(rtl) {
   right: calc(var(--udexSpacer16) * -1);
   left: auto;

package/src/themes/SelectBox.css

@@ -1,4 +1,5 @@
 :host {
+ --udex-select-box-popover-min-width: 0px;
   --udex-select-box-popover-shadow: var(--sapContent_Shadow1, 0px 2px 8px 0px 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);
@@ -10,37 +11,10 @@
   cursor: inherit;
 }
 
-:host([displayonly]) .udex-text-field__token {
-  margin-inline-end: 0;
-  position: relative;
-}
-
-:host([displayonly]:dir(rtl)) .udex-text-field__token:not(:first-child):before {
-  left: auto;
-  right: -2px;
-}
-
-:host([displayonly]) .udex-text-field__token:not(:first-child):before {
-  content: '';
-  position: absolute;
-  top: 9px;
-  left: -2px;
-  display: block;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  z-index: 1;
-  background: var(--udexColorGrey7, #475E75);
-}
-
 :host([displayonly]) .udex-text-field__input {
   overflow: hidden;
 }
 
-:host([displayonly]) udex-tag {
-  --udex-tags-grey-read-only-caption-color: var(--udexColorGrey9, #223548);
-}
-
 .udex-text-field__input:not([readonly]):not([disabled]) .udex-text-field__trigger:hover {
   border-left: 1px solid var(--udexColorGrey4, #A9B4BE);
 }
@@ -126,7 +100,7 @@
 .udex-text-field__trigger {
   --udex-control-button-large-height: 42px;
   --udex-control-button-large-width: 42px;
-  
+
   width: 38px;
   background: none;
   border-top-color: transparent;
@@ -159,33 +133,14 @@
   font-weight: normal;
 }
 
-.udex-text-field__tokenizer {
+.udex-tag-group {
   border: none;
   width: auto;
   min-width: 100px;
   max-width: calc(100% - 42px - var(--udexSpacer8));
 }
 
-.udex-text-field__token {
-  margin-inline-end: var(--udexSpacer8);
-  max-width: 100%;
-  display: flex;
-}
-
-.udex-text-field__token:last-child {
-  margin-inline-end: 0;
-}
-
-[overflows].udex-text-field__token {
-  display: none;
-}
-
-[readonly] .udex-text-field__tokenizer,
-[disabled] .udex-text-field__tokenizer {
-  pointer-events: none;
-}
-
-:host([displayonly]) .udex-text-field__tokenizer {
+:host([displayonly]) .udex-tag-group {
   margin-inline-start: -20px;
 }
 
@@ -193,33 +148,6 @@
   color: var(--udexColorBlue9, #0040B0);
 }
 
-:host([displayonly]:dir(rtl))::part(n-more-text):before {
-  left: auto;
-  right: -10px;
-}
-
-:host([displayonly])::part(n-more-text):before {
-  content: '';
-  position: absolute;
-  top: 10px;
-  left: -10px;
-  display: block;
-  width: 4px;
-  height: 4px;
-  border-radius: 50%;
-  z-index: 1;
-  background: var(--udexColorGrey7, #475E75);
-}
-
-:host([readonly])::part(n-more-text) {
-  color: var(--udexColorGrey6 ,#5B738B);
-}
-
-:host([displayonly])::part(n-more-text) {
-  position: relative;
-  margin-inline-start: 9px;
-}
-
 :host([displayonly]) .udex-text-field__label {
   left: 0;
 }
@@ -247,24 +175,20 @@
   cursor: pointer;
 }
 
-.udex-select-box__overflow-tags {
-  font-size: var(--udexTypographyBodyXXSFontSize);
-  font-family: var(--sapFontFamily);
-  font-weight: var(--udexTypographyFontWeightRegular);
-  line-height: var(--udexTypographyBodyLineHeight);
-  color: var(--udexCoreTextDark, #223548);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
 .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);
 }
 
+@media (width < 640px) {
+  .udex-select-box__dropdown {
+    --udex-dropdown-pane-min-width-xs: var(--udex-select-box-popover-min-width);
+  }
+}
+
 .udex-no-result {
   font-family: var(--sapFontFamily);
   font-weight: var(--udexTypographyFontWeightRegular, 400);
@@ -283,4 +207,4 @@
 .udex-select-box__dropdown::part(content) {
   padding: 0;
   overflow: auto;
-}
+}

package/src/themes/Tag.css

@@ -54,13 +54,18 @@
   --udex-tags-white-selected-caption-color: var(--udexColorBlue7, #0070F2);
 }
 
-:host([desktop]) .udex-tag:focus,
-:host([desktop]) .udex-tag__btn-icon:focus,
-.udex-tag:focus-visible {
+:host([desktop]:not([read-only])) .udex-tag:focus,
+:host([desktop]:not([read-only])) .udex-tag__btn-icon:focus,
+:host(:not([read-only])) .udex-tag:focus-visible {
   outline: solid var(--udexSpacer2, 2px) var(--udexColorBlue9, #0040B0);
   outline-offset: -2px;
 }
 
+:host([read-only]) .udex-tag:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .udex-tag {
   font-family: var(--sapFontFamily, sans-serif);
   font-size: var(--udex-tags-font-size);

package/src/themes/TagGroup.css

@@ -18,6 +18,10 @@
   max-width: 100%;
 }
 
+.udex-tag-group__tokenizer .udex-tag-group__tag {
+  display: flex;
+}
+
 :host(:not([displayonly])) .udex-tag-group-tooltip__content {
   line-height: 1.75;
 }
@@ -77,6 +81,10 @@
   margin-inline-start: 9px;
 }
 
+::part(n-more-text) {
+  margin-inline-end: 4px;
+}
+
 :host([displayonly]:dir(rtl))::part(n-more-text):before {
   left: auto;
   right: -10px;

package/src/themes/overrides/@ui5/webcomponents/sap_glow/parameters-bundle.css

@@ -118,11 +118,6 @@
   --_ui5_slider_handle_focus_border: 2px solid var(--sapSlider_Active_HandleBorderColor);
 }
 
-/* Select Box more button */
-udex-select-box {
-  --sapFontSize: 12px;
-}
-
 /* Phone Number Field Button */
 udex-phone-number-field {
   --_ui5_button_border_radius: var(--udexRadiusXS);