@sapudex/web-components 0.117.1 → 0.138.0

package/src/i18n/messagebundle_en.properties

@@ -4,8 +4,8 @@ PAGINATION_PAGE=Pagination page
 SELECTED=Selected
 UNSELECTED=Unselected
 INDETERMINATE=Indeterminate
-EDIT_BUTTON=Edit button
-DELETE_BUTTON=Delete button
+EDIT_BUTTON=Edit
+DELETE_BUTTON=Delete
 BUTTON_ARIA_TYPE_PRIMARY=Primary
 BUTTON_ARIA_TYPE_SECONDARY=Secondary
 BUTTON_ARIA_TYPE_TERTIARY=Tertiary
@@ -16,6 +16,7 @@ BUTTON_ARIA_EMPHASIZED=Emphasized
 BUTTON_ARIA_DEFAULT=Default
 BUTTON_ARIA_TRANSPARENT=Transparent
 BUTTON_ARIA_ATTENTION=Attention
+DATEPICKER_DATE_DESCRIPTION=Date Input
 TOGGLED=Toggled
 FIRST_PAGE=First page
 LAST_PAGE=Last page
@@ -23,6 +24,11 @@ PREVIOUS_PAGE=Previous page
 NEXT_PAGE=Next page
 ACTIVATE_PAGE=Activate page number
 SUGGESTED_TEXT=Suggested searches
+ACCESSIBLE_NAME_RESET_ICON=Clear
+ACCESSIBLE_NAME_SEARCH_ICON=Search
+TOOLTIP_RESET_BUTTON=Clear
+TOOLTIP_VOICE_BUTTON=Voice
+TOOLTIP_SUBMIT_BUTTON=Submit
 AVAILABLE_VALUES=Available Values
 RECOMMENDED_TEXT=Recommended pages
 EXPAND_ALL=Expand All
@@ -40,11 +46,13 @@ ARIA_LABEL_LIST_SELECTABLE=Contains Selectable Items
 SHOW_RESULTS=Show Results
 SHOW_HIDE_PASSWORD=Show/Hide Password Button
 RESET=Reset
-MESSAGE_STRIP_CLOSE_BUTTON=Information Bar Close
+MESSAGE_STRIP_CLOSE_BUTTON=Message Strip Close Button
 MESSAGE_STRIP_INFORMATION=Information
-MESSAGE_STRIP_SUCCESS=Success
+MESSAGE_STRIP_SUCCESS=Positive
 MESSAGE_STRIP_WARNING=Warning
-MESSAGE_STRIP_ERROR=Error
+MESSAGE_STRIP_ERROR=Negative
+REVIEWS=reviews
+STARS=stars
 SELECT_OPTIONS=Select Options
 SELECT_ALL=Select All
 TEXTAREA_CHARACTERS_LEFT={0} characters remaining
@@ -66,7 +74,7 @@ VALUE_STATE_INFORMATION=Informative entry
 VALUE_STATE_SUCCESS=Entry successfully validated
 READ_ONLY=Read only
 LOGOUT=Logout
-COUNTRY_SELECT=Country Select
+COUNTRY_SELECT=Select country
 OVERVIEW=Overview
 SOCIAL_LINK_ICON=Link Graphic
 PHONE_NUMBER=Phone number
@@ -80,7 +88,7 @@ SITE_INFORMATION=Site Information
 SEE_COMPLETE_LIST=Or see our complete list of
 LOCAL_COUNTRY_NAMES=local country numbers
 AVATAR_TEXT=Avatar
-CALENDAR_ICON=Employee start date
+CALENDAR_ICON=Open Calendar icon
 LIST_ITEM_EDIT_ICON=Edit list item entry
 LIST_ITEM_DELETE_ICON=Delete list item entry
 BACK_BUTTON_LABEL=back button label
@@ -90,3 +98,5 @@ STATUS_BADGE_INFORMATION_TITLE=Click to open profile information
 STATUS_BADGE_WARNING_TITLE=Warning, potential risk with the profile
 STATUS_BADGE_ERROR_TITLE=There is an error with the profile
 STATUS_BADGE_SUCCESS_TITLE=Successfully verified profile
+PROFILE=Profile
+TRIGGER=Dropdown trigger

package/src/themes/AccordionItem.css

@@ -4,9 +4,11 @@
   --udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));
   --udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);
   --udex-accordion-item-border-color: var(--sapList_BorderColor, var(--udexColorGrey4));
-  --udex-accordion-item-border-width: .5px;
-  --udex-accordion-item-header-padding: 12px 12px 12px 8px;
+  --udex-accordion-item-border-width: 1px;
+  --udex-accordion-item-header-padding: var(--udexSpacer12, 12px) var(--udexSpacer12, 12px) var(--udexSpacer12, 12px) var(--udexSpacer8, 8px);
   --udex-accordion-item-content-margin: var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
+  --udex-accordion-item-icon-width: 42px;
+  --udex-accordion-item-icon-height: 42px;
   font-family: var(--sapFontFamily, sans-serif);
   font-size: var(--sapProgress_FontSize, 16px);
 }
@@ -41,8 +43,8 @@
 }
 
 .udex-accordion-item__icon-wrapper {
-  width: 42px;
-  height: 42px;
+  min-width: var(--udex-accordion-item-icon-width);
+  height: var(--udex-accordion-item-icon-height);
   display: inline-flex;
   align-items: center;
   justify-content: center;

package/src/themes/Avatar.css

@@ -122,12 +122,16 @@
   display: inline-block;
 }
 
+:host([hidden]) {
+  display: none;
+}
+
 :host([interactive]) .udex-avatar:hover {
   box-shadow: none;
 }
 
 ::slotted(*) {
-	pointer-events: all;
+	pointer-events: none;
 }
 
 /* Styles for avatar with image inside */
@@ -137,11 +141,6 @@
   border-color: var(--udex-avatar-image-default-border-color);
 }
 
-:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover {
-  border-color: var(--udex-avatar-image-hover-border-color);
-  background-color: hsla(0, 0%, 0%, 0);
-}
-
 /* Badge styles */
 
 .udex-avatar ::slotted([slot="badge"]) {
@@ -150,6 +149,7 @@
   align-items: center;
   bottom: 0;
   right: 0;
+  pointer-events: all;
 }
 
 :host([size="XS"]) .udex-avatar ::slotted([slot="badge"]) {
@@ -303,6 +303,7 @@
   border-color: var(--udex-avatar-blue-default-border-color);
 }
 
+:host([hover][color-scheme="Blue"]) .udex-avatar,
 :host([color-scheme="Blue"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-blue-default-background-color);
   border-color: var(--udex-avatar-blue-hover-border-color);
@@ -317,6 +318,7 @@
   border-color: var(--udex-avatar-mango-default-border-color);
 }
 
+:host([hover][color-scheme="Mango"]) .udex-avatar,
 :host([color-scheme="Mango"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-mango-default-background-color);
   border-color: var(--udex-avatar-mango-hover-border-color);
@@ -337,6 +339,7 @@
   border-color: var(--udex-avatar-red-default-border-color);
 }
 
+:host([hover][color-scheme="Red"]) .udex-avatar,
 :host([color-scheme="Red"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-red-default-background-color);
   border-color: var(--udex-avatar-red-hover-border-color);
@@ -351,6 +354,7 @@
   border-color: var(--udex-avatar-raspberry-default-border-color);
 }
 
+:host([hover][color-scheme="Raspberry"]) .udex-avatar,
 :host([color-scheme="Raspberry"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-raspberry-default-background-color);
   border-color: var(--udex-avatar-raspberry-hover-border-color);
@@ -365,6 +369,7 @@
   border-color: var(--udex-avatar-pink-default-border-color);
 }
 
+:host([hover][color-scheme="Pink"]) .udex-avatar,
 :host([color-scheme="Pink"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-pink-default-background-color);
   border-color: var(--udex-avatar-pink-hover-border-color);
@@ -379,6 +384,7 @@
   border-color: var(--udex-avatar-indigo-default-border-color);
 }
 
+:host([hover][color-scheme="Indigo"]) .udex-avatar,
 :host([color-scheme="Indigo"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-indigo-default-background-color);
   border-color: var(--udex-avatar-indigo-hover-border-color);
@@ -393,6 +399,7 @@
   border-color: var(--udex-avatar-teal-default-border-color);
 }
 
+:host([hover][color-scheme="Teal"]) .udex-avatar,
 :host([color-scheme="Teal"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-teal-default-background-color);
   border-color: var(--udex-avatar-teal-hover-border-color);
@@ -407,6 +414,7 @@
   border-color: var(--udex-avatar-green-default-border-color);
 }
 
+:host([hover][color-scheme="Green"]) .udex-avatar,
 :host([color-scheme="Green"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-green-default-background-color);
   border-color: var(--udex-avatar-green-hover-border-color);
@@ -421,6 +429,7 @@
   border-color: var(--udex-avatar-grey-default-border-color);
 }
 
+:host([hover][color-scheme="Grey"]) .udex-avatar,
 :host([color-scheme="Grey"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-grey-default-background-color);
   border-color: var(--udex-avatar-grey-hover-border-color);
@@ -435,6 +444,7 @@
   border-color: var(--udex-avatar-transparent-default-border-color);
 }
 
+:host([hover][color-scheme="Transparent"]) .udex-avatar,
 :host([color-scheme="Transparent"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-transparent-default-background-color);
   border-color: var(--udex-avatar-transparent-hover-border-color);
@@ -449,14 +459,21 @@
   border-color: var(--udex-avatar-neutral-default-border-color);
 }
 
+:host([hover][color-scheme="Neutral"]) .udex-avatar,
 :host([color-scheme="Neutral"][interactive]) .udex-avatar:hover {
   background-color: var(--udex-avatar-neutral-default-background-color);
   border-color: var(--udex-avatar-neutral-hover-border-color);
   color: var(--udex-avatar-neutral-default-icon-color);
 }
 
+:host([hover]) .udex-avatar.udex-avatar--with-image,
+:host([color-scheme][interactive]) .udex-avatar.udex-avatar--with-image:hover {
+  border-color: var(--udex-avatar-image-hover-border-color);
+  background-color: hsla(0, 0%, 0%, 0);
+}
+
 :host([interactive]:not([hidden])) .udex-avatar:active, :host([interactive]:not([hidden])) .udex-avatar.udex-avatar--with-image:active {
   border-color: var(--udex-avatar-neutral-active-border-color);
   background-color: var(--udex-avatar-neutral-active-background-color);
   color: var(--udex-avatar-neutral-active-icon-color);
-}
+}

package/src/themes/Badge.css

@@ -138,7 +138,7 @@
 .udex-badge--number.udex-badge--large {
   padding: 0 var(--udexSpacer4);
   height: 1rem;
-  line-height: 0.938rem;
+  line-height: 1rem;
   font-size: 0.875rem;
 }
 

package/src/themes/CountrySelector.css

@@ -5,6 +5,8 @@
   --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 {
@@ -48,24 +50,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 +74,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]):not([value])::part(label) {
+  transform: translateX(36px);
+}
+
+:host(:not([hide-flag-images])) udex-text-field[aria-expanded="false"]:not([active]):not([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 +123,27 @@ 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;
+}
+
+.hidden-text {
+  display: none;
+}

package/src/themes/Divider.css

@@ -1,8 +1,12 @@
+:host {
+  --udex-divider-color: var(--udexCoreDividerLight, #D5DADD);
+}
+
 .udex-divider {
-  border-top: 1px solid var(--udexCoreDividerLight, #D5DADD);
+  border-top: 1px solid var(--udex-divider-color);
   display: block;
 }
 
 .udex-divider-wrapper {
-  padding: 2px 0px 2px 0px;
+  padding: var(--udexSpacer2) 0;
 }

package/src/themes/FilterMenu.css

@@ -17,8 +17,13 @@
   --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-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 +79,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 +99,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 +114,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 +122,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 +145,39 @@
   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 {
+  min-width: var(--udex-filter-menu-popover-min-width);
+  max-width: var(--udex-filter-menu-popover-max-width);
+  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);
+}
+
+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);
 }