@sapudex/web-components 2.59.0 → 2.61.0

package/src/themes/SideNavigationItem.css

@@ -1,13 +1,12 @@
 :host {
   --udex-side-navigation-item-height: 2.5rem;
   --udex-side-navigation-icon-color: var(--udexColorGrey9, #223548);
-  --udex-side-navigation-item-color-selected-text: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-icon-font-size: 1.25rem;
-  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
+  --udex-side-navigation-icon-font-size: 1rem;
+  --udex-side-navigation-item-padding-left: var(--udexSpacer12);
   --udex-side-navigation-selection-indicator-display: none;
   --udex-side-navigation-text-weight: var(--udexTypographyFontWeightMedium);
   --udex-side-navigation-selection-background-color: none;
-  --udex-side-navigation-hover-selection-background-color: var(--udexColorGrey1, #F5F6F7);
+  --udex-side-navigation-hover-selection-background-color: var(--sapButton_Selected_Hover_Background, #D1EFFF);
 
   font-size: var(--udexTypographyNavigationMediumMFontSize);
 }
@@ -20,18 +19,19 @@
   overflow: auto;
 }
 
-.ui5-sn-item, :host(:not([in-popover])) .ui5-sn-item {
-  height: var(--udex-side-navigation-item-height);
-  padding-inline-end: var(--udexSpacer16);
-  margin-block-end: 0;
+.ui5-sn-item-external-link-icon {
+  display: none;
 }
 
-:host(:not([expanded])) .ui5-sn-item {
-  margin-block-end: var(--udexSpacer8, 8px);
+.ui5-sn-item, :host(:not([in-popover])) .ui5-sn-item {
+  height: auto;
+  min-height: 36px;
+  padding-inline-end: var(--udexSpacer12, 12px);
+  margin-block-end: var(--udexSpacer4, 4px);
 }
 
-:host([expanded]) .ui5-sn-list-li {
-  margin-block-end: var(--udexSpacer8, 8px);
+:host([variant="Content"]) .ui5-sn-item {
+  padding: var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);
 }
 
 .ui5-sn-item .ui5-sn-item-text {
@@ -43,12 +43,11 @@
   width: var(--udex-side-navigation-icon-font-size);
   min-width: var(--udex-side-navigation-icon-font-size);
   color: var(--udex-side-navigation-icon-color);
-  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+  padding-inline-end: var(--udexSpacer12);
   padding-inline-start: 0;
 }
 
 .ui5-sn-item-toggle-icon,
-.ui5-sn-item-external-link-icon,
 :host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
   height: 1rem;
   width: 1rem;
@@ -76,16 +75,22 @@
   padding-inline-start: var(--udex-side-navigation-item-padding-left);
 }
 
+:host([variant="Content"]) .ui5-sn-item-level1 {
+  padding-inline-start: var(--udexSpacer12, 12px);
+}
+
+:host([variant="Content"]) .ui5-sn-item .ui5-sn-item-text {
+  margin: 0;
+}
+
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected,
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-toggle-icon,
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-external-link-icon,
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-icon {
-  color: var(--udex-side-navigation-item-color-selected-text);
   background: var(--udex-side-navigation-selection-background-color);
 }
 
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
-  background: var(--udex-side-navigation-hover-selection-background-color);
+:host([selected]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
+  background-color: var(--udex-side-navigation-hover-selection-background-color);
 }
 
 .ui5-sn-item-selected .ui5-sn-item-selection-icon {
@@ -96,3 +101,26 @@
 .ui5-sn-item:focus-visible:after {
   inset: 0;
 }
+
+:host([selected]) .ui5-sn-item {
+  position: relative;
+  overflow: hidden;
+}
+
+:host([selected]) .ui5-sn-item::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  height: 100%;
+  width: 3px;
+  background-color: var(--udexColorBlue8, #0057D2);
+  z-index: 1;
+}
+
+:host([selected]) .ui5-sn-item,
+:host([selected]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected,
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected {
+  background-color: var(--udexColorBlue1, #EBF8FF);
+  border-radius: var(--udexSpacer8, 8px);
+}

package/src/themes/SideNavigationMobile.css

@@ -5,9 +5,7 @@
   --udex-side-navigation-item-padding-left: var(--udexSpacer16);
   --udex-side-navigation-mobile-trigger-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);
   --udex-side-navigation-mobile-trigger-padding-horizontal: var(--udexSpacer16);
-  --udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-mobile-active-arrow-color: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-padding-vertical: var(--udexSpacer16);
+  --udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue8, #0057D2);
   --udex-side-navigation-selected-item-text-weight: var(--udexTypographyFontWeightMedium);
 
   width: 100%;
@@ -29,6 +27,11 @@
   position: relative;
 }
 
+.udex-side-navigation-mobile__trigger:focus-visible {
+  outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusXXS);
+}
+
 .udex-side-navigation-mobile__selected-item {
   display: flex;
   align-items: center;
@@ -54,7 +57,3 @@
   box-shadow: var(--udex-side-navigation-mobile-trigger-shadow);
   border-bottom: 1px solid var(--udex-side-navigation-mobile-active-trigger-border-color);
 }
-
-.udex-side-navigation-mobile__trigger[active] .udex-side-navigation-mobile__trigger-toggle-icon {
-  color: var(--udex-side-navigation-mobile-active-arrow-color);
-}

package/src/themes/SideNavigationMobileDropdown.css

@@ -6,8 +6,6 @@
   --udex-side-navigation-mobile-trigger-shadow: var(--sapContent_Shadow1, 0 2px 8px 0 #2236494D);
   --udex-side-navigation-mobile-trigger-padding-horizontal: var(--udexSpacer16);
   --udex-side-navigation-mobile-active-trigger-border-color: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-mobile-active-arrow-color: var(--udexColorBlue7, #0070F2);
-  --udex-side-navigation-padding-vertical: var(--udexSpacer16);
 
   width: 100%;
   font-size: var(--udexTypographyNavigationMediumMFontSize);
@@ -23,7 +21,16 @@
   margin-top: 1px;
 }
 
+.udex-side-navigation-mobile__popover:before {
+  content: '';
+  width: 100%;
+  height: 40px;
+  bottom: 100%;
+  position: absolute;
+  box-shadow: var(--udex-side-navigation-mobile-trigger-shadow);
+}
+
 [udex-side-navigation] {
   --udex-side-navigation-max-width: 100%;
-  --udex-side-navigation-padding: var(--udex-side-navigation-padding-vertical) 0;
+  padding-block: var(--udexSpacer16);
 }

package/src/themes/SideNavigationSubItem.css

@@ -1,13 +1,11 @@
 :host {
   --udex-side-navigation-icon-color: var(--udexColorGrey9, #223548);
-  --udex-side-navigation-item-bottom-margin: 0;
+  --udex-side-navigation-item-bottom-margin: var(--udexSpacer4, 4px);
   --udex-side-navigation-item-height: 2.5rem;
-  --udex-side-navigation-icon-font-size: 1.25rem;
-  --udex-side-navigation-item_color-selected-text: var(--udexColorBlue7, #0070F2);
+  --udex-side-navigation-icon-font-size: 1rem;
   --udex-side-navigation-selection-indicator-display: none;
-  --udex-side-navigation-item-padding-left: var(--udexSpacer16);
   --udex-side-navigation-selection-background-color: none;
-  --udex-side-navigation-hover-selection-background-color: var(--udexColorGrey1, #F5F6F7);
+  --udex-side-navigation-hover-selection-background-color: var(--sapButton_Selected_Hover_Background, #D1EFFF);
 
   color: var(--udex-side-navigation-icon-color);
   font-size: var(--udexTypographyNavigationMediumMFontSize);
@@ -17,11 +15,25 @@
   font-family: var(--sapFontFamily);
 }
 
+.ui5-sn-item-external-link-icon {
+  display: none;
+}
+
 :host(:not([in-popover])) .ui5-sn-item,
 .ui5-sn-item {
   margin-block-end: var(--udex-side-navigation-item-bottom-margin);
-  height: var(--udex-side-navigation-item-height);
-  padding-inline-end: var(--udexSpacer16);
+  height: auto;
+  min-height: 36px;
+  padding-inline-end: var(--udexSpacer12, 12px);
+}
+
+:host([variant="Content"]) .ui5-sn-item {
+  padding-block: var(--udexSpacer8, 8px);
+  padding-inline: var(--udexSpacer40, 40px) var(--udexSpacer12, 12px);
+}
+
+:host([variant="Content"][nested]) .ui5-sn-item {
+  padding-inline-start: var(--udexSpacer56, 56px);
 }
 
 .ui5-sn-item-icon {
@@ -29,19 +41,22 @@
   width: var(--udex-side-navigation-icon-font-size);
   min-width: var(--udex-side-navigation-icon-font-size);
   color: var(--udex-side-navigation-icon-color);
-  padding-inline-end: calc(var(--udexSpacer48) - var(--udex-side-navigation-icon-font-size) - var(--udex-side-navigation-item-padding-left));
+  padding-inline: 0 var(--udexSpacer12, 12px);
+}
+
+:host([variant="Content"]) .ui5-sn-item .ui5-sn-item-text {
+  margin: 0;
+  text-align: start;
 }
 
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected,
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-toggle-icon,
-.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-external-link-icon,
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected .ui5-sn-item-icon {
-  color: var(--udex-side-navigation-item_color-selected-text);
   background: var(--udex-side-navigation-selection-background-color);
 }
 
 .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
-  background: var(--udex-side-navigation-hover-selection-background-color);
+  background-color: var(--udex-side-navigation-hover-selection-background-color);
 }
 
 .ui5-sn-item-selected .ui5-sn-item-selection-icon {
@@ -50,21 +65,62 @@
 
 :host([with-icon]) .ui5-sn-item-level2,
 .ui5-sn-item-level2 {
-  margin-block-end: 0;
+  margin-block-end: var(--udexSpacer4, 4px);
 }
 
 .ui5-sn-item-level2:not(.ui5-sn-item-has-icon),
 .ui5-sn-item-level2 {
-  --udex-side-navigation-group-icon-width: 1.75rem;
-  padding-inline-start: var(--udex-side-navigation-group-icon-width);
+  padding-inline-start: var(--udexSpacer40, 40px);
 }
 
-:host([with-icon]) .ui5-sn-item-level2 {
-  --udex-side-navigation-group-icon-width: var(--udexSpacer48);
-  padding-inline-start: var(--udex-side-navigation-group-icon-width);
+:host([nested]) .ui5-sn-item-level2 {
+  padding-inline-start: var(--udexSpacer56, 56px);
+}
+
+.ui5-sn-item-toggle-icon,
+:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  margin: 0;
+  padding: 0;
+  color: var(--udex-side-navigation-icon-color);
+  padding-inline-start: var(--udexSpacer12, 12px);
+}
+
+:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon::part(root) {
+  border: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
 }
 
 :host([desktop]) .ui5-sn-item:focus:after,
 .ui5-sn-item:focus-visible:after {
   inset: 0;
 }
+
+:host([selected]) .ui5-sn-item {
+  position: relative;
+  overflow: hidden;
+}
+
+:host([selected]) .ui5-sn-item::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 0;
+  height: 100%;
+  width: 3px;
+  background-color: var(--udexColorBlue8, #0057D2);
+  z-index: 1;
+}
+
+.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected {
+  background-color: var(--udexColorBlue1, #EBF8FF);
+  border-radius: var(--udexRadiusM, 8px);
+}
+
+:host([nested]) .ui5-sn-item-level2 {
+  padding-inline-start: var(--udexSpacer56, 56px);
+}

package/src/themes/TabNavigation.css

@@ -340,7 +340,7 @@
   display: none;
 }
 
-@media screen and (max-width: 979px) {
+@media screen and (width < 980px) {
   .udex-tab-navigation__content {
     padding-block-start: var(--udex-tab-navigation-content-padding-vertical-mobile);
   }
@@ -397,7 +397,7 @@
   border-inline-start: 1px solid var(--udexColorGrey3, #D5DADD);
 }
 
-@media screen and (max-width: 979px) {
+@media screen and (width < 980px) {
   :host([orientation="Vertical"]) .udex-tab-navigation__header-tabs {
     gap: var(--udexSpacer16, 16px);
   }

package/src/themes/Table.css

@@ -99,7 +99,7 @@
   line-height: var(--udex-table-header-footnotes-line-height);
 }
 
-@media (max-width: 639px) {
+@media (width < 640px) {
   .udex-table-toolbar {
     flex-direction: column;
     align-items: flex-start;

package/src/themes/TableCellBase.css

@@ -12,6 +12,14 @@
   word-break: break-word;
 }
 
+:host([vertical-align="Top"]) {
+  align-items: flex-start;
+}
+
+:host([vertical-align="Bottom"]) {
+  align-items: flex-end;
+}
+
 :host([_sticky]) {
   position: sticky;
   left: 0;

package/src/themes/Upload.css

@@ -75,7 +75,7 @@
 }
 
 
-@media (max-width: 979px) {
+@media (width < 980px) {
   .udex-upload__title, 
   :host([required]) .udex-upload__title::after {
     line-height: var(--udexTypographyHeadingLineHeight);

package/src/themes/UploadItem.css

@@ -86,7 +86,7 @@
   margin-inline-start: var(--udexSpacer24, 24px);
 }
 
-@media (max-width: 1279px) {
+@media (width < 1280px) {
   .udex-upload-item__wrapper {
     flex-direction: column;
     align-items: flex-start;

package/src/types/Table.ts

@@ -1,4 +1,4 @@
-enum UDExTableCellHorizontalAlign {
+export enum UDExTableCellHorizontalAlign {
   Left = "Left",
   Start = "Start",
   Right = "Right",
@@ -6,4 +6,8 @@ enum UDExTableCellHorizontalAlign {
   Center = "Center",
 }
 
-export default UDExTableCellHorizontalAlign;
+export enum UDExTableCellVerticalAlign {
+  Center = "Center",
+  Top = "Top",
+  Bottom = "Bottom",
+}