@sapudex/web-components 0.114.2 → 0.127.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapudex/web-components",
-  "version": "0.114.2",
+  "version": "0.127.6",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -30,17 +30,17 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.0",
-    "@ui5/webcomponents": "1.24.12",
-    "@ui5/webcomponents-base": "1.24.12",
-    "@ui5/webcomponents-fiori": "1.24.12",
-    "@ui5/webcomponents-icons": "1.24.12",
-    "@ui5/webcomponents-theming": "1.24.12",
+    "@ui5/webcomponents": "1.24.15",
+    "@ui5/webcomponents-base": "1.24.15",
+    "@ui5/webcomponents-fiori": "1.24.15",
+    "@ui5/webcomponents-icons": "1.24.15",
+    "@ui5/webcomponents-theming": "1.24.15",
     "@vimeo/player": "^2.24.0",
     "video.js": "8.19.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "1.24.12",
-    "chromedriver": "^131.0.1",
+    "@ui5/webcomponents-tools": "1.24.15",
+    "chromedriver": "132.0.2",
     "cross-env": "^7.0.3",
     "typescript": "^4.9.4",
     "wdio-chromedriver-service": "^8.1.1",

package/src/AccordionItem.hbs

@@ -2,15 +2,12 @@
     aria-expanded="{{expanded}}"
     role="listitem"
     @keydown={{keydownHandler}}>
-    <div class="udex-accordion-item__header-wrapper"
-         aria-level="2"
-         role="heading">
+    <div class="udex-accordion-item__header-wrapper">
       <div role="button"
            class="udex-accordion-item__header"
            tabindex="0"
            aria-expanded="false"
            aria-controls="udex-accordion-item__{{_id}}-content"
-           aria-labelledby="{{ariaLabelledby}}"
            @focus={{focusHandler}}
            @click={{itemClickHandler}}>
           <div class="udex-accordion-item__icon-wrapper">

package/src/AccordionItem.ts

@@ -62,6 +62,8 @@ class UDExAccordionItem extends UI5Element {
 
   /**
    * Defines the title of the accordion item component.
+   * TODO: With transition to UI5 2.x, change "title" attribute name.
+   * Title property is also valid HTML attribute that results in showing hover tooltip and is read by screen readers.
    *
    * @default ""
    * @public
@@ -167,10 +169,6 @@ class UDExAccordionItem extends UI5Element {
     return classes;
   }
 
-  get ariaLabelledby() {
-    return `${this._id}-header-title`;
-  }
-
   onAfterRendering() {
     this._el = this.shadowRoot?.querySelector(".udex-accordion-item") || null;
     const accordion = this.shadowRoot?.querySelector<HTMLElement>(
@@ -193,6 +191,9 @@ class UDExAccordionItem extends UI5Element {
     }
 
     this?.parentElement?.addEventListener("ui5-toggle-items", this.toggleAllHandler.bind(this));
+    // TODO: this should be removed with transition to UI5 2.x, wne changed "title" attribute name.
+    // Fix was provided to avoid reading "title" property by screen readers, which results reading title twice.
+    this.setAttribute("aria-hidden", "true");
   }
 }
 

package/src/Avatar.ts

@@ -5,7 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import Avatar from "@ui5/webcomponents/dist/Avatar.js";
 import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
+import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
 
 // Template
 import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
@@ -152,7 +152,7 @@ class UDExAvatar extends UI5Element {
     shape!: `${AvatarShape}`;
 
   /**
-   * Controls id of the element that label the component
+   * Defines predefined size of the component.
    *
    * @default "S"
    * @public
@@ -160,6 +160,15 @@ class UDExAvatar extends UI5Element {
   @property({ type: AvatarSize, defaultValue: AvatarSize.S })
     size!: `${AvatarSize}`;
 
+  /**
+   * Defines the displaying attention badge.
+   *
+   * @public
+   * @default false
+   */
+    @property({ type: Boolean })
+      showAttentionBadge!: boolean;
+
   /**
    * Receives the desired <img> tag
    *
@@ -191,6 +200,26 @@ class UDExAvatar extends UI5Element {
     }
   }
 
+  /**
+   * Returns the effective avatar size.
+   * @default "S"
+   * @private
+   */
+  get effectiveSize(): AvatarSize {
+    // we read the attribute, because the "size" property will always have a default value
+    return this.getAttribute("size") as AvatarSize || this.size;
+  }
+
+  /**
+   * Returns the effective background color.
+   * @default "Blue"
+   * @private
+   */
+  get еffectiveBackgroundColor(): AvatarColorScheme {
+    // we read the attribute, because the "background-color" property will always have a default value
+    return this.getAttribute("color-scheme") as AvatarColorScheme || this.colorScheme;
+  }
+
   get getUI5AvatarColorScheme(): string {
     return udexToUi5ColorSchemeMap[this.colorScheme];
   }
@@ -214,7 +243,10 @@ class UDExAvatar extends UI5Element {
   }
 
   get avatarAccessibleName(): string {
-    return `${this.accessibleName ? this.accessibleName : UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : ""}`;
+    let accName = `${this.accessibleName ? this.accessibleName : `${UDExAvatar.i18nBundle.getText(AVATAR_TEXT)} ${this.initials}`}`;
+    accName += ` ${this.disabled ? UDExAvatar.i18nBundle.getText(DISABLED) : ""}`;
+    accName += ` ${this.showAttentionBadge ? UDExAvatar.i18nBundle.getText(ATTENTION_BADGE) : ""}`;
+    return accName;
   }
 }
 

package/src/AvatarGroup.ts

@@ -0,0 +1,135 @@
+import AvatarGroup, { IAvatarGroupItem } from "@ui5/webcomponents/dist/AvatarGroup.js";
+import AvatarGroupType from "@ui5/webcomponents/dist/types/AvatarGroupType.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+// Styles
+import UI5AvatarGroupCss from "@ui5/webcomponents/dist/generated/themes/AvatarGroup.css.js";
+
+import UDExAvatar, { AvatarColorScheme, AvatarSize } from "./Avatar.js";
+
+const avatarOffsets = {
+  [AvatarSize.XS]: {
+    [AvatarGroupType.Individual]: "0.0625rem",
+    [AvatarGroupType.Group]: "-0.75rem",
+  },
+  [AvatarSize.S]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-1.25rem",
+  },
+  [AvatarSize.M]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-1.625rem",
+  },
+  [AvatarSize.L]: {
+    [AvatarGroupType.Individual]: "0.125rem",
+    [AvatarGroupType.Group]: "-2rem",
+  },
+  [AvatarSize.XL]: {
+    [AvatarGroupType.Individual]: "0.25rem",
+    [AvatarGroupType.Group]: "-2.75rem",
+  },
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-avatar-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/AvatarGroup.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends AvatarGroup
+ * @public
+ */
+@customElement({
+  tag: "udex-avatar-group",
+  renderer: litRender,
+  styles: [UI5AvatarGroupCss],
+  dependencies: [UDExAvatar],
+})
+
+class UDExAvatarGroup extends AvatarGroup {
+  constructor() {
+    super();
+
+    this._itemNavigation = new ItemNavigation(this, {
+      getItemsCallback: () => {
+        return this._isGroup
+          ? []
+          : this.items.slice(0, this._hiddenStartIndex).map(
+            item => item.shadowRoot?.firstElementChild as IAvatarGroupItem,
+          );
+      },
+    });
+  }
+  onEnterDOM(): void {
+    super.onEnterDOM();
+    const container: HTMLElement = this.shadowRoot?.querySelector(".ui5-avatar-group-items") as HTMLElement;
+    container?.addEventListener("mouseenter", this._onHover.bind(this, true));
+    container?.addEventListener("mouseleave", this._onHover.bind(this, false));
+  }
+
+  onExitDOM(): void {
+    super.onExitDOM();
+    const container: HTMLElement = this.shadowRoot?.querySelector(".ui5-avatar-group-items") as HTMLElement;
+    container?.removeEventListener("mouseenter", this._onHover.bind(this, true));
+    container?.removeEventListener("mouseleave", this._onHover.bind(this, false));
+  }
+
+  _onHover(hover: boolean) {
+    if (this._isGroup) {
+      this.items.every(avatar => {
+        avatar.toggleAttribute("hover", hover);
+        return !avatar.hidden;
+      });
+    }
+  }
+
+  _onfocusin(e: FocusEvent) {
+    const targetItem = this._isGroup
+      ? e.currentTarget
+      : (e.target as HTMLElement).shadowRoot?.firstElementChild;
+    this._itemNavigation.setCurrentItem(targetItem as IAvatarGroupItem);
+  }
+
+  _prepareAvatars() {
+    this._colorIndex = 0;
+    const visibleColors = Object.values(AvatarColorScheme);
+    let avatarInitials = "";
+
+    this.items.forEach((avatar, index) => {
+      if (++this._colorIndex > visibleColors.length - 3) {
+        this._colorIndex = 1;
+      }
+      avatar.interactive = !this._isGroup;
+      avatar.toggleAttribute("ui5-avatar", true);
+      avatarInitials += this._isGroup && avatar.hasAttribute("initials") && !avatar.shadowRoot?.firstElementChild?.hasAttribute("_has-image")
+        ? `${avatar.getAttribute("initials")} ` : "";
+
+      if (!avatar.getAttribute("color-scheme")) {
+        avatar.setAttribute("color-scheme", visibleColors[this._colorIndex]);
+      }
+
+      if (index !== this._itemsCount - 1 || this._customOverflowButton) {
+        avatar.style.marginInlineEnd = avatarOffsets[avatar.effectiveSize][this.type];
+      }
+    });
+
+    if (avatarInitials) {
+      this.shadowRoot?.querySelector(".ui5-avatar-group-items")?.setAttribute("aria-label", `${avatarInitials}${this._ariaLabelText}`);
+    }
+  }
+}
+
+UDExAvatarGroup.define();
+
+export default UDExAvatarGroup;

package/src/CountrySelector.hbs

@@ -11,7 +11,8 @@
         @click-trigger="{{handleTriggerClick}}"
         @ui5-submit-search-value="{{handleSubmitSearch}}"
         @ui5-handle-value-search="{{handleValueSearch}}"
-        @ui5-handle-value-reset="{{handleResetSearch}}">
+        @ui5-handle-value-reset="{{handleResetSearch}}"
+        @ui5-handle-close-search="{{handleCloseSearch}}">
         {{> trigger}}
         {{searchableList}}
     </udex-dropdown>

package/src/CountrySelector.ts

@@ -378,6 +378,10 @@ class CountrySelector extends UDExSearchableListBase {
     return localName ? `${countryName} (${localName})` : countryName;
   }
 
+  handleCloseSearch() {
+    this._dropdown.onClose();
+  }
+
   handleItemPress(e: CustomEvent) {
     this.onItemPress(e);
     const target = e.target as HTMLElement;
@@ -393,7 +397,6 @@ class CountrySelector extends UDExSearchableListBase {
 
     const keyEvent = e.detail as KeyboardEvent;
     const key = keyEvent.key;
-
     if (isEnter(keyEvent) || isSpace(keyEvent)) {
       if (this._dropdown.open) {
         this._dropdown.onClose();

package/src/DatePicker.hbs

@@ -16,7 +16,6 @@
         ?readonly="{{readonly}}"
         value="{{value}}"
         icon="appointment-2"
-        tabindex="0"
         value-state="{{valueState}}"
     >
     </udex-text-field>

package/src/Dropdown.hbs

@@ -2,15 +2,17 @@
     {{#if hasTriggerSlot}}
         <div
             class="udex-dropdown__opener"
-            aria-haspopup="true"
+            role="{{triggerAccessibleRole}}"
+            aria-label="{{triggerAccessibleName}}"
             aria-expanded="{{open}}"
-            aria-controls="udex-dropdown"
+            aria-haspopup="true"
+            aria-controls="{{this._id}}_udex-dropdown"
             @click="{{onTriggerClick}}">
             <slot slot="trigger" name="trigger"></slot>
         </div>
     {{/if}}
     <ui5-popover
-        id="udex-dropdown"
+        id="{{this._id}}_udex-dropdown"
         class="udex-dropdown__pane"
         ?allow-target-overlap="{{disableAllowTargetOverlap}}"
         hide-arrow

package/src/Dropdown.ts

@@ -7,8 +7,11 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import DropdownTemplate from "./generated/templates/DropdownTemplate.lit.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
+import { TRIGGER } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import DropdownCss from "./generated/themes/Dropdown.css";
@@ -120,12 +123,20 @@ class UDExDropdown extends UI5Element {
 
   /**
    * Allows setting a custom role.
-   * @default "Dialog"
+   * @default "None"
    * @public
    */
-  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.None })
     accessibleRole!: `${PopupAccessibleRole}`;
 
+  /**
+   * Allows setting a custom role for dropdown trigger.
+   * @default "combobox"
+   * @public
+   */
+  @property({ type: String, defaultValue: "combobox" })
+    triggerAccessibleRole!: string;
+
   /**
    * Defines the content of the Dropdown.
    *
@@ -188,6 +199,12 @@ class UDExDropdown extends UI5Element {
   @property({ type: String })
     _direction?: string;
 
+  static i18nBundle: I18nBundle;
+
+  static async onDefine(): Promise<void> {
+    UDExDropdown.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
   onAfterRendering() {
     this.handleDirection();
   }
@@ -283,9 +300,13 @@ class UDExDropdown extends UI5Element {
     return !!this.footer.length;
   }
 
-  get disableAllowTargetOverlap() {
+  get disableAllowTargetOverlap(): boolean {
     return this.disableTargetOverlap?.toString() !== "true";
   }
+
+  get triggerAccessibleName(): string {
+    return UDExDropdown.i18nBundle.getText(TRIGGER);
+  }
 }
 
 UDExDropdown.define();

package/src/FilterMenu.hbs

@@ -1,4 +1,5 @@
 <udex-dropdown
+    id="{{this._id}}_dropdown-menu"
     class="udex-filter-menu"
     ?disable-target-overlap="{{disableTargetOverlap}}"
     placement-type="{{placementType}}"
@@ -12,7 +13,9 @@
     @ui5-after-open="{{_dropdownAfterOpen}}"
     @ui5-before-close="{{_dropdownBeforeClose}}"
     @ui5-after-close="{{_dropdownAfterClose}}"
-    @click-trigger="{{handleTriggerClick}}"
+    @click-trigger="{{onDropdownClose}}"
+    @search-keydown="{{handleKeyDownSearch}}"
+    @keydown="{{handleKeyDownList}}"
     @ui5-submit-search-value="{{handleSubmitSearch}}"
     @ui5-handle-value-search="{{handleValueSearch}}"
     @ui5-handle-value-reset="{{handleResetSearch}}">
@@ -28,6 +31,8 @@
         aria-label="{{accessibleName}}"
         aria-expanded="{{_open}}"
         aria-haspopup="true"
+        role="{{triggerAccessibleRole}}"
+        aria-controls="{{this._id}}_dropdown-menu"
         ?disabled="{{disabled}}"
         class="udex-filter-menu__trigger"
         slot="trigger"
@@ -64,6 +69,7 @@
                     size="Medium"
                     design="Primary"
                     ?disabled="{{disabledResultBtn}}"
+                    @keydown="{{handleKeyDownResultBtn}}"
                     @click="{{handleResult}}">
                     {{getResultLabelText}}
                 </udex-button>
@@ -73,6 +79,7 @@
                     class="udex-filter-menu__reset-btn"
                     size="Medium"
                     design="Tertiary"
+                    @keydown="{{handleKeyDownResetBtn}}"
                     @click="{{handleReset}}">
                     {{getResetLabelText}}
                 </udex-button>

package/src/FilterMenu.ts

@@ -7,6 +7,7 @@ import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { isTabPrevious, isTabNext, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
@@ -14,14 +15,15 @@ import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExFilterMenuItem from "./FilterMenuItem.js";
 import UDExFilterMenuGroupHeader from "./FilterMenuGroupHeader.js";
-import Search from "./Search.js";
-import Button from "./Button.js";
+import UDExSearch from "./Search.js";
+import UDEButton from "./Button.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
 import { ListMode } from "./types/List.js";
 import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
 import UDExListSelectAll from "./ListSelectAll.js";
 import UDExBadge from "./Badge.js";
+import UDExListItemBase from "./ListItemBase.js";
 
 import { RESET, SHOW_RESULTS, SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
 import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
@@ -64,8 +66,8 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
     UDExListItem,
     UDExListGroupHeader,
     UDExBadge,
-    Search,
-    Button,
+    UDExSearch,
+    UDEButton,
   ],
 })
 
@@ -267,18 +269,28 @@ class UDExFilterMenu extends UDExSearchableListBase {
 
   /**
    * Allows setting a custom role.
-   * @default "Dialog"
+   * @default "None"
    * @public
    */
-  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
+  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.None })
     accessibleRole!: `${PopupAccessibleRole}`;
 
+  /**
+   * Allows setting a custom role for dropdown trigger.
+   * @default "combobox"
+   * @public
+   */
+  @property({ type: String, defaultValue: "combobox" })
+    triggerAccessibleRole!: string;
+
   _dropdown!: UDExDropdown;
-  _search!: Search;
+  _search!: UDExSearch;
+  _hasFooterButtons!: boolean;
 
   onAfterRendering() {
     this._dropdown = this.getDropdown();
     this._search = this.getSearch();
+    this._hasFooterButtons = this.hasFooterButtons;
   }
 
   onEnterDOM(): void {
@@ -300,7 +312,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this.onItemPress(e);
 
     if (this.modeSingleSelect) {
-      this._dropdown.onClose();
+      this.onDropdownClose();
     }
   }
 
@@ -313,7 +325,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleSubmitSearch() {
-    this._dropdown.onClose();
+    this.onDropdownClose();
     this.onSubmitSearch();
   }
 
@@ -337,7 +349,37 @@ class UDExFilterMenu extends UDExSearchableListBase {
     }
   }
 
-  handleTriggerClick() {
+  handleKeyDownList(e: KeyboardEvent) {
+    const isTabNextPress = isTabNext(e) && !this._hasFooterButtons;
+    const isTabPrevPress = isTabPrevious(e) && !this._search;
+
+    if (isTabNextPress || isTabPrevPress) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownSearch(e: CustomEvent) {
+    const keyEvent = e.detail as KeyboardEvent;
+    if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownResultBtn(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (isTabNext(e) && !this.hasResetBtn) {
+      this.onDropdownClose();
+    }
+  }
+
+  handleKeyDownResetBtn(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (isTabNext(e)) {
+      this.onDropdownClose();
+    }
+  }
+
+  onDropdownClose() {
     if (this._dropdown.open) {
       this._dropdown.onClose();
     }
@@ -347,8 +389,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
   }
 
-  getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("udex-search")!;
+  getSearch(): UDExSearch {
+    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
   }
 
   _dropdownBeforeOpen() {
@@ -399,6 +441,22 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.hideResultBtn && this.hideResetBtn;
   }
 
+  get hasFooterButtons(): boolean {
+    return (this.hasResultBtn || this.hasResetBtn) && this.modeMultiSelect;
+  }
+
+  get hasResultBtn(): boolean {
+    return !this.hideResultBtn && !this.disabledResultBtn;
+  }
+
+  get hasResetBtn(): boolean {
+    return !this.hideResetBtn;
+  }
+
+  getItems(): Array<UDExListItemBase> {
+    return this.getSlottedNodes<UDExListItemBase>("items");
+  }
+
   static get searchableListBaseTemplate() {
     return SearchableListBaseTemplate;
   }