@sapudex/web-components 0.192.4 → 0.224.0

package/src/themes/SegmentedButtonItem.css

@@ -155,7 +155,11 @@
   color: var(--udex-segmented-button-item-selected-color);
 }
 
-:host([active]), :host([active][focused]), :host([active][pressed]), :host([design="Default"][active]), :host([design="Default"][pressed][active]):not([non-interactive]):not([_is-touch]), :host([design="Default"][active][focused]) {
+:host([active]),
+:host([active][pressed]),
+:host([design="Default"][active]),
+:host([design="Default"][pressed][active]):not([non-interactive]):not([_is-touch]),
+:host([design="Default"][active]) {
   color: var(--udex-segmented-button-item-active-color);
   border-color: var(--udex-segmented-button-item-active-border-color);
   background-color: var(--udex-segmented-button-item-active-background-color);
@@ -215,7 +219,11 @@
   color: var(--udex-segmented-button-item-warning-active-color);
 }
 
-:host([disabled]), :host([disabled][focused]), :host([disabled][pressed]), :host([design="Default"][disabled]), :host([design="Transparent"][disabled]), :host([design="Emphasized"][disabled]) {
+:host([disabled]),
+:host([disabled][pressed]),
+:host([design="Default"][disabled]),
+:host([design="Transparent"][disabled]),
+:host([design="Emphasized"][disabled]) {
   color: var(--udex-segmented-button-item-color);
   border-color: transparent;
   background-color: var(--udex-segmented-button-item-background-color);

package/src/themes/SelectBox.css

@@ -22,6 +22,7 @@
 .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 {
@@ -98,19 +99,38 @@
 }
 
 .udex-text-field__trigger {
-  --udex-control-button-large-height: 42px;
-  --udex-control-button-large-width: 42px;
-
-  width: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 42px;
+  width: 42px;
   background: none;
-  border-top-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
+  border-style: solid;
+  box-sizing: border-box;
+  border-width: var(--sapButton_BorderWidth);
+  border-color: transparent;
   border-radius: var(--udexRadiusXS);
   margin-inline-start: auto;
-  padding: var(--udexSpacer4, 4px);
+  padding: 4px;
   z-index: 1;
   color: var(--udexColorGrey7, #475E75);
+  outline: none;
+}
+
+.udex-text-field__trigger:focus-visible ui5-icon {
+  outline: 2px solid var(--udexColorBlue10, #002A86);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.udex-text-field__trigger:hover {
+  cursor: pointer;
+}
+
+.udex-text-field__trigger ui5-icon {
+  height: 18px;
+  width: 18px;
+  color: inherit;
 }
 
 .udex-text-field__text-holder {

package/src/themes/StatusBadge.css

@@ -1,22 +1,22 @@
 :host {
   --udex-status-badge-icon-color-error: var(--udexColorRed8);
-  --udex-status-badge-background-color-error: var(--udexColorRed2);
-  --udex-status-badge-border-color-error: var(--udexColorRed7);
+  --udex-status-badge-background-color-error: var(--udexColorRed1);
+  --udex-status-badge-border-color-error: var(--udexColorRed6);
 
   --udex-status-badge-icon-color-success: var(--udexColorGreen8);
-  --udex-status-badge-background-color-success: var(--udexColorGreen2);
-  --udex-status-badge-border-color-success: var(--udexColorGreen7);
+  --udex-status-badge-background-color-success: var(--udexColorGreen1);
+  --udex-status-badge-border-color-success: var(--udexColorGreen6);
 
   --udex-status-badge-icon-color-warning: var(--udexColorMango8);
-  --udex-status-badge-background-color-warning: var(--udexColorMango2);
-  --udex-status-badge-border-color-warning: var(--udexColorMango7);
+  --udex-status-badge-background-color-warning: var(--udexColorMango1);
+  --udex-status-badge-border-color-warning: var(--udexColorMango6);
 
   --udex-status-badge-icon-color-information: var(--udexColorBlue8);
-  --udex-status-badge-background-color-information: var(--udexColorBlue2);
-  --udex-status-badge-border-color-information: var(--udexColorBlue7);
+  --udex-status-badge-background-color-information: var(--udexColorBlue1);
+  --udex-status-badge-border-color-information: var(--udexColorBlue6);
 
   --udex-status-badge-icon-color-edit: white;
-  --udex-status-badge-background-color-edit: var(--udexColorBlue7);
+  --udex-status-badge-background-color-edit: var(--udexColorBlue8);
 
   --udex-status-badge-size-background-xs-and-s-and-m: 18px;
   --udex-status-badge-size-background-l: 20px;

package/src/themes/Tag.css

@@ -68,6 +68,7 @@
 }
 
 .udex-tag {
+  box-sizing: border-box;
   font-family: var(--sapFontFamily, sans-serif);
   font-size: var(--udex-tags-font-size);
   line-height: var(--udex-tags-line-height);
@@ -87,11 +88,11 @@
   cursor: pointer;
   border: none;
   display: flex;
-  padding: 3px 0;
+  padding: 0;
   align-items: center;
   justify-content: center;
   border-radius: var(--udex-tags-radius-size);
-  outline-offset: -2px;
+  outline-offset: calc(var(--udexSpacer2) * -1);;
   background: transparent;
   color: inherit;
 }
@@ -110,6 +111,7 @@
   height: var(--udex-tags-icon-size);
   width: var(--udex-tags-icon-size);
   color: inherit;
+  flex-shrink: 0;
 }
 
 .udex-tag--medium .udex-tag__icon {

package/src/themes/TagGroup.css

@@ -39,10 +39,6 @@
   pointer-events: none;
 }
 
-:host([displayonly]) .udex-tag-group__tag[data-overflows] {
-  margin-inline-end: -10px;
-}
-
 :host([displayonly]) .udex-tag-group__tag {
   margin-inline-end: 0;
   position: relative;

package/src/themes/TextField.css

@@ -220,7 +220,8 @@
   padding: 0;
 }
 
-.udex-text-field__label.udex-text-field__label_active {
+.udex-text-field__label.udex-text-field__label_active,
+:host:has(.udex-text-field__input:-webkit-autofill) .udex-text-field__label {
   line-height: 18px;
   transform: translateY(-110%);
   padding: 6px 4px 0;

package/src/themes/Tile.css

@@ -62,3 +62,7 @@
 :host([hide-shadow]) .udex-tile {
   box-shadow: none;
 }
+
+.hidden {
+  display: none;
+}

package/src/themes/Upload.css

@@ -0,0 +1,65 @@
+:host {
+  font-family: var(--sapFontFamily, sans-serif);
+}
+
+.udex-upload__title {
+  line-height: var(--udexTypographyHeadingLineHeight);
+  font-size: var(--udexTypographyHeadingRegularXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightMedium);
+  margin: 0;
+  padding: 0;
+}
+
+.udex-upload__additional-text {
+  padding: 0;
+  margin: 0;
+  margin-top: var(--udexSpacer8);
+  margin-bottom: var(--udexSpacer24);
+  color: var(--udexColorGrey7);
+  font-size: var(--udexTypographyBodyXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+.udex-upload__files-wrapper {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--udexSpacer24, 24px);
+}
+
+.udex-upload__upload-button-container {
+  display: flex;
+  gap: var(--udexSpacer16);
+  align-items: center;
+}
+
+.udex-upload__upload-button input {
+  display: none;
+}
+
+.udex-upload__error {
+  padding: 0;
+  margin: 0;
+  color: var(--udexCoreSemanticError7, var(--udexColorRed7));
+  font-size: var(--udexTypographyBodyXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+:host([required]) .udex-upload__title::after {
+  content: "*";
+  color: var(--udexColorGrey7);
+  line-height: var(--udexTypographyHeadingLineHeight);
+  font-size: var(--udexTypographyHeadingRegularXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightMedium);
+}
+
+
+@media (max-width: 979px) {
+  .udex-upload__title, 
+  :host([required]) .udex-upload__title::after {
+    line-height: var(--udexTypographyHeadingLineHeight);
+    font-size: var(--udexTypographyHeadingRegularXXXSFontSize);
+    font-weight: var(--udexTypographyFontWeightMedium);
+  }
+}

package/src/themes/UploadItem.css

@@ -0,0 +1,131 @@
+:host {
+  --udex-upload-item-progress-bar-width: 124px;
+  --udex-upload-item-progress-bar-min-width: 124px;
+  --udex-upload-item-progress-bar-max-width: 200px;
+  --udex-upload-item-progress-bar-width-m: 100%;
+  --udex-upload-item-progress-bar-min-width-m: 100%;
+  --udex-upload-item-progress-bar-max-width-m: 100%;
+  --udex-upload-item-progress-bar-padding: 5px 0;
+  font-family: var(--sapFontFamily, sans-serif);
+}
+
+.udex-upload-item__wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: var(--udexSpacer8, 8px);
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--udexColorGrey3); 
+}
+
+.udex-upload-item__info {
+  display: flex;
+  flex-direction: column;
+}
+
+[udex-link] {
+  --udex-link-text-decoration: none;
+}
+
+.udex-upload-item__name {
+  padding: 0;
+  margin: 0;
+  color: var(--sapTitleColor, var(--udexColorNeutralBlack));
+  font-size: var(--sapFontSize);
+}
+
+.udex-upload-item__info {
+  padding: 0;
+  margin: 0;
+  color: var(--udexColorGrey7);
+  font-size: var(--udexTypographyBodyXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+.udex-upload-item__error {
+  color: var(--udexColorRed7);
+}
+
+.udex-upload-item__progress-info-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-inline-start: var(--udexSpacer32, 32px);
+}
+
+.udex-upload-item__progress-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.udex-upload-item__progress-status {
+  padding: 0;
+  margin: 0;
+  color: var(--udexColorGrey7);
+  font-size: var(--udexTypographyBodyXXSFontSize);
+  font-weight: var(--udexTypographyFontWeightRegular);
+  line-height: var(--udexTypographyBodyLineHeight);
+}
+
+[udex-progress-bar] {
+  max-width: var(--udex-upload-item-progress-bar-max-width);
+  min-width: var(--udex-upload-item-progress-bar-min-width);
+  width: var(--udex-upload-item-progress-bar-width);
+  overflow: hidden;
+  padding: var(--udex-upload-item-progress-bar-padding);
+}
+
+[udex-link] {
+  margin-bottom: var(--udexSpacer4, 4px);
+}
+
+[udex-button] {
+  margin-inline-start: var(--udexSpacer24, 24px);
+}
+
+@media (max-width: 1279px) {
+  .udex-upload-item__wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .udex-upload-item__info {
+    margin-bottom: var(--udexSpacer4, 4px);
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .udex-upload-item__progress-info-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    margin: 0;
+  }
+
+  .udex-upload-item__progress-info {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .udex-upload-item__name {
+    margin-bottom: var(--udexSpacer4, 4px);
+  }
+
+  [udex-progress-bar] {
+    max-width: var(--udex-upload-item-progress-bar-max-width-m);
+    min-width: var(--udex-upload-item-progress-bar-min-width-m);
+    width: var(--udex-upload-item-progress-bar-width-m);
+  }
+}
+
+.udex-upload-item__info-uploaded {
+  margin-bottom: 0;
+}

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

@@ -116,6 +116,9 @@
   --_ui5_slider_tooltip_height: var(--udexSpacer32, 2rem);
   --_ui5_slider_tooltip_min_width: 2.75rem;
   --_ui5_slider_handle_focus_border: 2px solid var(--sapSlider_Active_HandleBorderColor);
+
+  /* Search */
+  --_ui5_button_pressed_focused_border_color: transparent;
 }
 
 /* Phone Number Field Button */
@@ -123,14 +126,6 @@ udex-phone-number-field {
   --_ui5_button_border_radius: var(--udexRadiusXS);
 }
 
-udex-search,
-udex-password-field,
-udex-select-box,
-udex-filter-menu,
-udex-country-selector {
---_ui5_button_pressed_focused_border_color: transparent;
-}
-
 udex-password-field {
   --_ui5_icon_transform_scale: none;
 }

package/src/types/BadgeDesign.ts

@@ -14,4 +14,4 @@ export enum NumberBadgeDesign{
 }
 
 export const textBadgeOptions = [TextBadgeDesign.Error, TextBadgeDesign.Info, TextBadgeDesign.Neutral, TextBadgeDesign.Success, TextBadgeDesign.Warning];
-export const numberBadgeOptions = [NumberBadgeDesign.Blue, NumberBadgeDesign.Red, NumberBadgeDesign.White, NumberBadgeDesign.Neutral];
+export const numberBadgeOptions = [NumberBadgeDesign.Blue, NumberBadgeDesign.Red, NumberBadgeDesign.Neutral];

package/src/types/ButtonSize.ts

@@ -0,0 +1,7 @@
+enum UDExButtonSize {
+  Large = "Large",
+  Medium = "Medium",
+  Small = "Small"
+}
+
+export default UDExButtonSize;

package/src/types/FileData.ts

@@ -0,0 +1,6 @@
+type FileData = {
+  fileName: string,
+  fileSize: number,
+}
+
+export default FileData;

package/src/types/FileUploadState.ts

@@ -0,0 +1,7 @@
+enum FileUploadState {
+  Uploading = "Uploading",
+  Uploaded = "Uploaded",
+  Error = "Error"
+}
+
+export default FileUploadState;

package/src/types/List.ts

@@ -24,12 +24,3 @@ export enum AdditionalTextState {
   Error = "Error",
   Information = "Information",
 }
-
-export interface LetterPressedHandlerObj {
-  getPressedKey: () => string,
-  setPressedKey: (arg: string) => void,
-  getPressedCount: () => number,
-  setPressedCount: (arg: number) => void,
-  getLastFoundPosition: () => number,
-  setLastFoundPosition: (arg: number) => void,
-}

package/src/types/MessageStrip.ts

@@ -0,0 +1,13 @@
+export enum UdexMessageStripDesign {
+  Information = "Information",
+  Positive = "Positive",
+  Negative = "Negative",
+  Warning = "Warning",
+  Action = "Action",
+}
+
+export enum UdexMessageStripStatusType {
+  Icon = "Icon",
+  Text = "Text",
+  None = "None",
+}

package/src/types/common.ts

@@ -1,3 +1,10 @@
+export enum Target {
+  _blank = "_blank",
+  _parent = "_parent",
+  _self = "_self",
+  _top = "_top",
+}
+
 enum ValueState {
   Standard = "Standard",
   Warning = "Warning",

package/src/utils/Breakpoints.ts

@@ -0,0 +1,41 @@
+type BreakpointKey = keyof typeof Breakpoints;
+
+export const Breakpoints = {
+  XS: { min: 360, max: 639 },
+  S: { min: 640, max: 979 },
+  M: { min: 980, max: 1279 },
+  L: { min: 1280, max: 1599 },
+  XL: { min: 1600, max: Infinity },
+} as const;
+
+export class BreakpointUtils {
+  private static get width(): number {
+    return typeof window !== "undefined" ? window.innerWidth : 0;
+  }
+
+  static getCurrentBreakpoint(): BreakpointKey | undefined {
+    return (Object.keys(Breakpoints) as BreakpointKey[])
+      .find(bp => this.isInRange(bp));
+  }
+
+  static isInRange(bp: BreakpointKey): boolean {
+    const { min, max } = Breakpoints[bp];
+    return this.width >= min && this.width <= max;
+  }
+
+  static isAtLeast(bp: BreakpointKey): boolean {
+    return this.width >= Breakpoints[bp].min;
+  }
+
+  static isAbove(bp: BreakpointKey): boolean {
+    return this.width > Breakpoints[bp].min;
+  }
+
+  static isAtMost(bp: BreakpointKey): boolean {
+    return this.width <= Breakpoints[bp].max;
+  }
+
+  static isBelow(bp: BreakpointKey): boolean {
+    return this.width < Breakpoints[bp].max;
+  }
+}

package/src/utils/ListWithFirstLetterFocus.ts

@@ -0,0 +1,66 @@
+import { findFirstItemLabelStartsWithLetterKey, findNextItemLabelStartsWithKey, getSearchedKeyItemsCount } from "./listItemLabelUtils.js";
+
+export interface UDExListWithFirstLetterFocus {
+  _focusableListItems: Array<Element>,
+  _pressedKey: string,
+  _pressedCount: number,
+  _lastFoundPosition: number,
+  focusMatchingListItem: (letterKey: string) => void,
+  getFocusItemIndex: (letterKey: string, items: Element[], searchedKeyItemsCount: number) => number,
+  setPressedKey: (letterKey: string) => void,
+  resetMatchingItems: () => void
+}
+
+export default class UDExFirstLetterFocusHandler {
+  _focusableListItems!: Element[];
+  _pressedKey!: string;
+  _pressedCount!: number;
+  _lastFoundPosition!: number;
+
+  resetMatchingItems(): void {
+    this._pressedKey = "";
+    this._pressedCount = 0;
+    this._lastFoundPosition = 0;
+  }
+
+  setPressedKey(letterKey: string): void {
+    if (letterKey === this._pressedKey) {
+      this._pressedCount++;
+    } else {
+      this._pressedKey = letterKey;
+      this._pressedCount = 1;
+      this._lastFoundPosition = 0;
+    }
+  }
+
+  getFocusItemIndex(letterKey: string, items: Element[], searchedKeyItemsCount: number): number {
+    let focusIndex: number;
+
+    if (this._pressedCount <= searchedKeyItemsCount) {
+      const startPosition = (this._pressedCount === 1 ? 0 : this._lastFoundPosition + 1);
+      focusIndex = findItemLabelWithLetterIndex(letterKey, items, startPosition) + this._lastFoundPosition;
+      if (this._pressedCount !== 1) {
+        focusIndex++;
+      }
+    } else {
+      focusIndex = findItemLabelWithLetterIndex(letterKey, items);
+      this._pressedCount = 1;
+    }
+    return focusIndex;
+  }
+
+  focusMatchingListItem(letterKey: string): void {
+    const searchedKeyItemsCount = getSearchedKeyItemsCount(letterKey, this._focusableListItems);
+
+    if (searchedKeyItemsCount > 0) {
+      this.setPressedKey(letterKey);
+      const matchingItemIndex = this.getFocusItemIndex(letterKey, this._focusableListItems, searchedKeyItemsCount);
+      this._lastFoundPosition = matchingItemIndex;
+      (this._focusableListItems[matchingItemIndex] as HTMLElement).focus();
+    }
+  }
+}
+
+export const findItemLabelWithLetterIndex = (letterKey: string, items: Element[], startPosition: number = 0): number => {
+  return startPosition === 0 ? findFirstItemLabelStartsWithLetterKey(letterKey, items) : findNextItemLabelStartsWithKey(letterKey, items, startPosition);
+};

package/src/utils/convertBytesToMegabytes.ts

@@ -0,0 +1,3 @@
+const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
+
+export default convertBytesToMegabytes;

package/src/utils/parseRelativeUnits.ts

@@ -0,0 +1,32 @@
+type Units = "px" | "vh" | "vw" | "rem" | "em" | "%";
+
+export type RelativeValue = `${number}${Units}`;
+
+function parseRelativeUnits(value: RelativeValue, element: HTMLElement): number {
+  const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  const parentHeight = element.parentElement?.offsetHeight ?? window.innerHeight;
+  const elementFontSize = parseFloat(getComputedStyle(element).fontSize);
+
+  const num = parseFloat(value);
+  const unit = value.replace(`${num}`, "").trim();
+
+  switch (unit) {
+  case "vh":
+    return (num / 100) * window.innerHeight;
+  case "vw":
+    return (num / 100) * window.innerWidth;
+  case "rem":
+    return num * rootFontSize;
+  case "em":
+    return num * elementFontSize;
+  case "%":
+    return (num / 100) * parentHeight;
+  case "px":
+  case "":
+    return num;
+  default:
+    return num;
+  }
+}
+
+export default parseRelativeUnits;