@sapudex/web-components 0.192.2 → 0.199.3

package/src/ListItem.hbs

@@ -102,6 +102,7 @@
                         icon="{{editIcon}}"
                         accessible-name="{{editButtonAccessibleName}}"
                         toolTip="{{editButtonAccessibleName}}"
+                        ?disabled="{{disabled}}"
                         size="Small">
                     </udex-button>
                 {{/if}}
@@ -115,7 +116,8 @@
                         size="Small"
                         accessible-name="{{deleteButtonAccessibleName}}"
                         toolTip="{{deleteButtonAccessibleName}}"
-                        icon="{{deleteIcon}}">
+                        icon="{{deleteIcon}}"
+                        ?disabled="{{disabled}}">
                     </udex-button>
                 {{/if}}
             {{/if}}

package/src/ListItem.ts

@@ -25,6 +25,9 @@ import ListItemTemplate from "./generated/templates/ListItemTemplate.lit.js";
 // Styles
 import ListItemCss from "./generated/themes/ListItem.css.js";
 
+const listItemClass: string = "udex-list__item";
+const listItemRole: string = "option";
+
 /**
  * @class
  *
@@ -262,7 +265,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   onAfterRendering() {
-    if (!this.accessibleRole || this.accessibleRole === "listitem") {
+    if (!this.accessibleRole || this.accessibleRole === listItemRole) {
       this.shadowRoot?.querySelector("li")?.removeAttribute("aria-selected");
     }
   }
@@ -360,36 +363,35 @@ class UDExListItem extends UDExListItemBase {
     }
   }
 
-  get className() {
+  get className(): string {
     const isGroupChild = this?.parentElement as UDExListGroupHeaderBase;
-    const className = "udex-list__item";
-    const controlledClassName = this.controlled ? `${className}_controlled` : "";
-    const groupClassName = isGroupChild?.isGroup ? `${className}_group` : "";
-    const largeSizeClassName = this.isLargeSize ? `${className}_large` : "";
-    return `${className} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`;
+    const controlledClassName = this.controlled ? `${listItemClass}_controlled` : "";
+    const groupClassName = isGroupChild?.isGroup ? `${listItemClass}_group` : "";
+    const largeSizeClassName = this.isLargeSize ? `${listItemClass}_large` : "";
+    return `${listItemClass} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`.trim();
   }
 
-  get roleItem() {
-    return this.accessibleRole.length > 0 ? this.accessibleRole : "listitem";
+  get roleItem(): string {
+    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
   }
 
-  get _ariaDisabled() {
+  get _ariaDisabled(): boolean | undefined {
     return this.disabled ? true : undefined;
   }
 
-  get modeSingleContent() {
+  get modeSingleContent(): boolean {
     return this.mode === ListMode.SingleContent;
   }
 
-  get modeRadioGroup() {
+  get modeRadioGroup(): boolean {
     return this.mode === ListMode.RadioGroup;
   }
 
-  get modeSelected() {
+  get modeSelected(): boolean {
     return [ListMode.SingleSelect, ListMode.MultiSelect, ListMode.RadioGroup].includes(this.mode as ListMode);
   }
 
-  get isLargeSize() {
+  get isLargeSize(): boolean {
     return this.size === ListItemSize.Large;
   }
 
@@ -398,7 +400,9 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get stateAccessibleName(): string {
-    if (this.indeterminate) { return UDExListItem.i18nBundle.getText(INDETERMINATE); }
+    if (this.indeterminate) {
+      return UDExListItem.i18nBundle.getText(INDETERMINATE);
+    }
     return `${this.selected ? UDExListItem.i18nBundle.getText(SELECTED) : UDExListItem.i18nBundle.getText(UNSELECTED)} `;
   }
 

package/src/ListItemBase.ts

@@ -114,14 +114,14 @@ class UDExListItemBase extends UI5Element {
   @property({ type: String })
     _tabIndex!: string;
 
-  get _effectiveTabIndex() {
+  get _effectiveTabIndex(): string {
     if (this.disabled) {
-      return -1;
+      return "-1";
     }
     return this._tabIndex;
   }
 
-  get numberOfItem() {
+  get numberOfItem(): number {
     return [...this.parentNode!.children].indexOf(this) + 1;
   }
 
@@ -129,31 +129,31 @@ class UDExListItemBase extends UI5Element {
     return false;
   }
 
-  get modeRadioGroup() {
+  get modeRadioGroup(): boolean {
     return this.mode === ListMode.RadioGroup;
   }
 
-  get modeMultiSelect() {
+  get modeMultiSelect(): boolean {
     return this.mode === ListMode.MultiSelect;
   }
 
-  get modeSingleSelect() {
+  get modeSingleSelect(): boolean {
     return this.mode === ListMode.SingleSelect;
   }
 
-  get modeMultiSelectOrRadioGroup() {
+  get modeMultiSelectOrRadioGroup(): boolean {
     return this.modeMultiSelect || this.modeRadioGroup;
   }
 
-  get typeNumber() {
+  get typeNumber(): boolean {
     return this.type === ListStyleType.Number;
   }
 
-  get typeCircle() {
+  get typeCircle(): boolean {
     return this.type === ListStyleType.Circle;
   }
 
-  get typeIcon() {
+  get typeIcon(): boolean {
     return this.type === ListStyleType.Icon;
   }
 }

package/src/ListSelectAll.ts

@@ -13,6 +13,9 @@ import UDExListItem from "./ListItem.js";
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css";
 
+const selectAllClass: string = "udex-list__header-select-all";
+const groupListClass: string = "udex-list__group-list";
+
 /**
  * @class
  *
@@ -89,14 +92,11 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
   }
 
   get additionalClassName(): string {
-    const selectAllClassName = "udex-list__header-select-all";
-    return `${selectAllClassName} ${this._additionalClassName}`;
+    return `${selectAllClass} ${this._additionalClassName}`;
   }
 
   get groupListClassName(): string {
-    const className = "udex-list__group-list";
-    const selectAllClassName = "udex--list__header-select-all";
-    return `${className} ${this._additionalClassName} ${selectAllClassName}`;
+    return `${groupListClass} ${this._additionalClassName}`;
   }
 }
 

package/src/MastheadItem.ts

@@ -16,12 +16,11 @@ import UDExAvatar from "./Avatar.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import UDExMastheadShell from "./MastheadShell.js";
 import MastheadItemTemplate from "./generated/templates/MastheadItemTemplate.lit.js";
-
+import { Target } from "./types/common.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import MastheadItemCss from "./generated/themes/MastheadItem.css.js";
 
-const breakpointSizeM: number = 1279;
-
 export interface IMastheadItem {
   text?: string;
   selected?: boolean;
@@ -52,13 +51,6 @@ export type ItemClickEventDetail = {
   item: UDExMastheadItem,
 }
 
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
-
 /**
  * @class
  *
@@ -447,7 +439,7 @@ class UDExMastheadItem extends UI5Element implements IMastheadItem {
   }
 
   get isMobile(): boolean {
-    return window.innerWidth < breakpointSizeM || this.mastheadShell?._isMobileMode;
+    return BreakpointUtils.isBelow("M") || this.mastheadShell?._isMobileMode;
   }
 
   get isTargetBlank(): boolean {

package/src/MastheadMenuItem.hbs

@@ -12,7 +12,7 @@
         role="{{accessibleRoleText}}"
         href="{{url}}"
         part="{{partAttr}}"
-        target="{{target}}">
+        target="{{targetLink}}">
         {{#if iconStart}}
             {{>arrow-left}}
         {{/if}}

package/src/MastheadMenuItem.ts

@@ -9,6 +9,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import { OPENS_IN_A_NEW_WINDOW } from "./generated/i18n/i18n-defaults.js";
+import { Target } from "./types/common.js";
 
 import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
 
@@ -20,11 +21,6 @@ export enum ItemType {
   Button = "Button",
   Link = "Link"
 }
-
-export enum Target {
-  _blank = "_blank",
-  _self = "_self",
-}
 /**
  * @class
  *
@@ -137,6 +133,14 @@ class UDExMastheadMenuItem extends UI5Element {
   @property({ type: Boolean })
     iconEnd?: boolean;
 
+  /**
+   * Define the target of the item
+   * <b>Note:</b> Standard hyperlink behavior is supported.
+   * @public
+   */
+  @property({ type: Target, defaultValue: Target._self })
+    target!: `${Target}`;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
@@ -172,8 +176,11 @@ class UDExMastheadMenuItem extends UI5Element {
     return (this.type === ItemType.Link || !!this.url) && !this.isButtonType;
   }
 
-  get target(): string {
-    return this.externalLink ? Target._blank : Target._self;
+  get targetLink(): string {
+    if (this.externalLink) {
+      return this.externalLink ? Target._blank : Target._self;
+    }
+    return this.target;
   }
 
   get lastWordOfLabel(): string | undefined {

package/src/MastheadMobileMenu.hbs

@@ -93,6 +93,7 @@
                     @click="{{../handleMobileItemEvent}}"
                     url="{{this.href}}"
                     label="{{this.innerText}}"
+                    target="{{this.target}}"
                     has-border>
                 </udex-masthead-menu-item>
             {{/if}}

package/src/MastheadShell.ts

@@ -23,11 +23,11 @@ import UDExSearch from "./Search.js";
 import UDExMastheadMobileMenu from "./MastheadMobileMenu.js";
 import UDExMastheadProfileMenu from "./MastheadProfileMenu.js";
 import MastheadShellTemplate from "./generated/templates/MastheadShellTemplate.lit.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
-const breakpointSizeM: number = 1279;
 const canvasContentFont = "16px '72 Brand Variable'";
 type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
@@ -728,7 +728,7 @@ class UDExMastheadShell extends UI5Element {
   }
 
   get isBreakpointSizeM(): boolean {
-    return window.innerWidth <= breakpointSizeM;
+    return BreakpointUtils.isAtMost("M");
   }
 
   get isMainMenuVisible(): boolean {

package/src/MediaPlayer.ts

@@ -5,6 +5,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/play.js";
 import "@ui5/webcomponents-icons/dist/v5/play.svg";
 import Player from "video.js/dist/types/player.js";
@@ -63,7 +64,7 @@ export interface VideoJSPlayer extends Player{
   renderer: litRender,
   styles: MediaPlayerCss,
   template: MediaPlayerTemplate,
-  dependencies: [UDExMediaPlayerYoutube, UDExMediaPlayerVimeo],
+  dependencies: [Icon, UDExMediaPlayerYoutube, UDExMediaPlayerVimeo],
 })
 /**
  * Fires when video is played
@@ -247,11 +248,10 @@ class UDExMediaPlayer extends UI5Element {
   videoProgress!: number;
 
   getPlayedTime = (target: EventTarget): number => {
-    const progressControl: SeekBar = (target as any)?.player.controlBar?.ProgressControl?.childNameIndex_.seekBar;
+    const progressControl: SeekBar = (target as any)?.player.controlBar?.progressControl?.childNameIndex_.seekBar;
     if (!progressControl) {
       return 0;
     }
-
     return Math.round(progressControl.getPercent() * 100);
   };
 

package/src/MessageStrip.hbs

@@ -7,7 +7,7 @@
         <div
             class="ui5-message-strip-icon-wrapper udex-message-strip"
             aria-hidden="true">
-            {{#if iconProvided}}
+            {{#if this.hasIcon}}
                 <slot name="icon"></slot>
             {{else}}
                 <ui5-icon name="{{standardIconName}}" class="ui5-message-strip-icon"></ui5-icon>

package/src/MessageStrip.ts

@@ -18,49 +18,15 @@ import {
   MESSAGE_STRIP_INFORMATION,
   MESSAGE_STRIP_SUCCESS,
   MESSAGE_STRIP_WARNING,
+  MESSAGE_STRIP_ACTION,
 } from "./generated/i18n/i18n-defaults.js";
+import { UdexMessageStripDesign, UdexMessageStripStatusType } from "./types/MessageStrip.js";
 
 import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
 
 // Styles
 import MessageStripCss from "./generated/themes/MessageStrip.css.js";
 
-export enum MessageStripDesign {
-  /**
-   * Message should be just an information
-   * @public
-   */
-  Information = "Information",
-  /**
-   * Message is a success message
-   * @public
-   */
-  Positive = "Positive",
-  /**
-   * Message is an error
-   * @public
-   */
-  Negative = "Negative",
-  /**
-   * Message is a warning
-   * @public
-   */
-  Warning = "Warning",
-  /**
-   * Message is an action
-   * @public
-   */
-  Action = "Action",
-}
-
-export enum UdexMessageStripStatusType {
-  Icon = "Icon",
-  Text = "Text",
-  None = "None",
-}
-
-type textStatusType = Record<Exclude<MessageStripDesign, "Action">, string>;
-
 /**
  * @class
  *
@@ -90,11 +56,11 @@ class UDExMessageStrip extends MessageStrip {
    * @public
    */
   @property({
-    type: MessageStripDesign,
-    defaultValue: MessageStripDesign.Action,
+    type: UdexMessageStripDesign,
+    defaultValue: UdexMessageStripDesign.Action,
   })
   /** @ts-expect-error */
-    design!: `${MessageStripDesign}`;
+    design!: `${UdexMessageStripDesign}`;
 
   /**
    * Defines the component Status Type.
@@ -137,66 +103,70 @@ class UDExMessageStrip extends MessageStrip {
     UDExMessageStrip.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
+  onBeforeRendering() {
+    if (this.isDesignActionOrIsNotIconType) {
+      this.hideIcon = true;
+    }
+  }
+
   getTranslation(text: I18nText): string {
     return UDExMessageStrip.i18nBundle.getText(text);
   }
 
-  textStatusTypeMapping(): textStatusType {
+  textStatusTypeMapping(): Record<string, string> {
     return {
-      Information: this.getTranslation(MESSAGE_STRIP_INFORMATION),
-      Positive: this.getTranslation(MESSAGE_STRIP_SUCCESS),
-      Negative: this.getTranslation(MESSAGE_STRIP_ERROR),
-      Warning: this.getTranslation(MESSAGE_STRIP_WARNING),
+      [UdexMessageStripDesign.Information]: this.getTranslation(MESSAGE_STRIP_INFORMATION),
+      [UdexMessageStripDesign.Positive]: this.getTranslation(MESSAGE_STRIP_SUCCESS),
+      [UdexMessageStripDesign.Negative]: this.getTranslation(MESSAGE_STRIP_ERROR),
+      [UdexMessageStripDesign.Warning]: this.getTranslation(MESSAGE_STRIP_WARNING),
+      [UdexMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),
     };
   }
 
-  onBeforeRendering() {
-    if (
-      this.isDesignAction()
-      || this.statusType !== UdexMessageStripStatusType.Icon
-    ) {
-      this.hideIcon = true;
-    }
+  isDesignAction(): boolean {
+    return this.design === UdexMessageStripDesign.Action;
   }
 
-  isDesignAction() {
-    return this.design === MessageStripDesign.Action;
+  _closeClick(): void {
+    this.fireEvent("close");
   }
 
-  get shouldHideIcon() {
-    if (
-      this.isDesignAction()
-      || this.statusType !== UdexMessageStripStatusType.Icon
-    ) {
+  get shouldHideIcon(): boolean {
+    if (this.isDesignActionOrIsNotIconType) {
       return this.hideIcon || this.icon.length === 0;
     }
 
     return this.hideIcon;
   }
 
-  get hideTextStatus() {
-    return (
-      this.statusType !== UdexMessageStripStatusType.Text
-      || this.isDesignAction()
-    );
+  get hideTextStatus(): boolean {
+    return this.statusType !== UdexMessageStripStatusType.Text || this.isDesignAction();
   }
 
   get textStatus(): string | undefined {
-    if (this.design !== MessageStripDesign.Action) {
+    if (this.design !== UdexMessageStripDesign.Action) {
       return this.textStatusTypeMapping()[this.design];
     }
   }
 
-  get _closeButtonText() {
+  get _closeButtonText(): string {
     return `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
   }
 
-  get iconProvided() {
+  get isNotIconStatusType(): boolean {
+    return this.statusType !== UdexMessageStripStatusType.Icon;
+  }
+
+  get hasIcon(): boolean {
     return this.icon.length > 0;
   }
 
-  _closeClick() {
-    this.fireEvent("close");
+  get isDesignActionOrIsNotIconType(): boolean {
+    return this.isDesignAction() || this.isNotIconStatusType;
+  }
+
+  get hiddenText(): string {
+    return `${this.textStatusTypeMapping()[this.design]} ${this.hideCloseButton ? "" : this._closableText}`;
   }
 }
 

package/src/PhoneNumberField.hbs

@@ -95,8 +95,8 @@
             @click="{{handleClick}}"
             @focus="{{handleFocus}}"
             @blur="{{handleBlur}}"
-            @keydown={{handleKeyDown}}
-            @keyup={{handleKeyUp}}
+            @keydown="{{handleKeyDown}}"
+            @keyup="{{handleKeyUp}}"
         >
     </div>
 </div>

package/src/PhoneNumberField.ts

@@ -345,7 +345,6 @@ class UDExPhoneNumberField extends UI5Element {
 
   handleInput(e: InputEvent) {
     this.value = (e.target as HTMLInputElement)?.value.trim();
-
     this.applyPhoneMask();
 
     if (!this.value.startsWith(this.selectedPhonePrefix)) {
@@ -379,6 +378,10 @@ class UDExPhoneNumberField extends UI5Element {
   };
 
   handleKeyUp() {
+    if (this.isInputReadonly) {
+      return;
+    }
+
     this.value = this.value.replace(/[^\d+ ()-]/g, "").trim();
     this.applyPhoneMask();
   }
@@ -389,7 +392,7 @@ class UDExPhoneNumberField extends UI5Element {
       this.phoneFormat = initialPlaceholder;
     }
 
-    if (this.value.length === 0 || this.value === "+") {
+    if ((this.value.length === 0 || this.value === "+") && !this.isInputReadonly) {
       this.value = this.selectedPhonePrefix;
     }
   }
@@ -410,11 +413,13 @@ class UDExPhoneNumberField extends UI5Element {
     const isIncorrectPrefixEntered = enteredPrefix !== this.selectedPhonePrefix;
 
     const isIncorrectNumberEntered = !this.countryIso || this.value.length <= prefixLength || isIncorrectPrefixEntered;
-
     if (isIncorrectNumberEntered) {
       this.value = "";
     }
-    this.fireEvent("change");
+
+    if (!this.isInputReadonly) {
+      this.fireEvent("change");
+    }
   }
 
   handleSelect(e: CustomEvent) {

package/src/Search.ts

@@ -904,6 +904,7 @@ class UDExSearch extends UI5Element {
         const suggestionObserver = this._createObserver(this.Suggestion.popover);
         const popoverNode = this.Suggestion?.popover as Node;
         suggestionObserver.observe(popoverNode, { attributes: true, attributeOldValue: true });
+        this.Suggestion.initLists();
       }
 
       if (prefixPopover) {

package/src/SecondaryNavigation.ts

@@ -16,12 +16,12 @@ import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
 import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
 import { MORE } from "./generated/i18n/i18n-defaults.js";
 import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 // Styles
 import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
 
 const canvasContentFont: string = "16px / 17.6px '72 Brand Variable'";
 const rootClass = "udex-secondary-navigation__root";
-export const breakpointSizeS: number = 979;
 
 export type ItemClickDetail = {
   originalEvent: Event,
@@ -464,11 +464,11 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   get isDesktopScreen(): boolean {
-    return window.innerWidth > breakpointSizeS;
+    return BreakpointUtils.isAtLeast("M");
   }
 
   get isMobileScreen(): boolean {
-    return window.innerWidth <= breakpointSizeS;
+    return BreakpointUtils.isAtMost("S");
   }
 }
 

package/src/SecondaryNavigationItemBase.ts

@@ -5,14 +5,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { breakpointSizeS } from "./SecondaryNavigation.js";
-
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
+import { Target } from "./types/common.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 export type NavItem = {
   path?: string;
@@ -146,7 +140,7 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   }
 
   get isMobile(): boolean {
-    return window.innerWidth <= breakpointSizeS;
+    return BreakpointUtils.isAtMost("S");
   }
 }
 

package/src/SegmentedButton.ts

@@ -9,7 +9,8 @@ import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsSco
 // Styles
 import SegmentedButtonMode from "@ui5/webcomponents/dist/types/SegmentedButtonMode.js";
 import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
-import UDExSegmentedButtonItem, { SegmentedButtonItemSize } from "./SegmentedButtonItem.js";
+import UDExSegmentedButtonItem from "./SegmentedButtonItem.js";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 export enum SegmentedButtonSelectionMode {
   /**
@@ -55,8 +56,8 @@ class UDExSegmentedButton extends SegmentedButton {
    * @default "Medium"
    * @public
    */
-  @property({ type: SegmentedButtonItemSize, defaultValue: SegmentedButtonItemSize.Medium })
-    size!: `${SegmentedButtonItemSize}`;
+  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
+    size!: `${UDExButtonSize}`;
 
   onBeforeRendering() {
     const items = this.getSlottedNodes<UDExSegmentedButtonItem>("items");