@sapudex/web-components 0.127.6 → 0.138.0

package/src/FilterMenu.ts

@@ -7,16 +7,18 @@ 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 {
+  isTabPrevious, isTabNext, isEscape, isSpace, isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
-import UDExDropdown from "./Dropdown.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
 import UDExFilterMenuItem from "./FilterMenuItem.js";
 import UDExFilterMenuGroupHeader from "./FilterMenuGroupHeader.js";
 import UDExSearch from "./Search.js";
-import UDEButton from "./Button.js";
+import UDExButton from "./Button.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import { PlacementType, HorizontalAlign } from "./types/Dropdown.js";
 import { ListMode } from "./types/List.js";
@@ -57,17 +59,17 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
   styles: [FilterMenuCss, SearchableListCss],
   template: FilterMenuTemplate,
   dependencies: [
+    ResponsivePopover,
     UDExFilterMenuItem,
     UDExFilterMenuGroupHeader,
     UDExFilterMenuSelectAll,
-    UDExDropdown,
     UDExList,
     UDExListSelectAll,
     UDExListItem,
     UDExListGroupHeader,
     UDExBadge,
     UDExSearch,
-    UDEButton,
+    UDExButton,
   ],
 })
 
@@ -233,8 +235,14 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: Boolean })
     disabled!: boolean;
 
+  /**
+   * Defines whether the dropdown is open or not.
+   *
+   * @default false
+   * @private
+   */
   @property({ type: Boolean })
-    _open?: boolean = false;
+    _open!: boolean;
 
   /**
    * Hides the result button in the footer.
@@ -283,13 +291,15 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: String, defaultValue: "combobox" })
     triggerAccessibleRole!: string;
 
-  _dropdown!: UDExDropdown;
+  _trigger!: UDExButton;
   _search!: UDExSearch;
   _hasFooterButtons!: boolean;
+  _popover!: ResponsivePopover;
 
   onAfterRendering() {
-    this._dropdown = this.getDropdown();
     this._search = this.getSearch();
+    this._popover = this.getPopover();
+    this._trigger = this.getTriggerButton();
     this._hasFooterButtons = this.hasFooterButtons;
   }
 
@@ -303,12 +313,12 @@ class UDExFilterMenu extends UDExSearchableListBase {
     super.onBeforeRendering();
   }
 
-  handleSelectAll(e:CustomEvent) {
+  handleSelectAll(e:CustomEvent): void {
     this.onFilterSelectAllHeaderPress(e);
     this.fireEvent("select-all");
   }
 
-  handleItemPress(e:CustomEvent) {
+  handleItemPress(e:CustomEvent): void {
     this.onItemPress(e);
 
     if (this.modeSingleSelect) {
@@ -316,101 +326,133 @@ class UDExFilterMenu extends UDExSearchableListBase {
     }
   }
 
-  handleHeaderPress(e:CustomEvent) {
+  handleHeaderPress(e:CustomEvent): void {
     this.onHeaderPress(e);
   }
 
-  handleValueSearch(e:CustomEvent) {
+  handleValueSearch(e:CustomEvent): void {
     this.onSearch(e);
   }
 
-  handleSubmitSearch() {
+  handleSubmitSearch(): void {
     this.onDropdownClose();
     this.onSubmitSearch();
   }
 
-  handleResetSearch() {
+  handleResetSearch(): void {
     this.onResetSearch();
   }
 
-  handleReset() {
+  handleReset(): void {
     this.fireEvent("reset-click", {
       restoredItems: this.selectedItems,
     });
     this.onReset();
   }
 
-  handleResult() {
+  handleResult(): void {
     if (!this.disabledResultBtn) {
-      this._dropdown.onClose();
+      this._popover.close();
       this.fireEvent("result-click", {
         selectedItems: this.selectedItems,
       });
     }
   }
 
-  handleKeyDownList(e: KeyboardEvent) {
+  handleKeyDownList(e: KeyboardEvent): void {
     const isTabNextPress = isTabNext(e) && !this._hasFooterButtons;
     const isTabPrevPress = isTabPrevious(e) && !this._search;
-
-    if (isTabNextPress || isTabPrevPress) {
-      this.onDropdownClose();
+    const target = e.target as HTMLElement;
+    const isSearchResetTrigger = target === this._search;
+    if ((isTabNextPress && (!isSearchResetTrigger || this.isListEmpty)) || isTabPrevPress) {
+      this.onDropdownClose(e);
     }
   }
 
-  handleKeyDownSearch(e: CustomEvent) {
+  handleKeyDownSearch(e: CustomEvent): void {
     const keyEvent = e.detail as KeyboardEvent;
     if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
-      this.onDropdownClose();
+      this.onDropdownClose(keyEvent);
     }
   }
 
-  handleKeyDownResultBtn(e: KeyboardEvent) {
+  handleKeyDownResultBtn(e: KeyboardEvent): void {
     e.stopPropagation();
     if (isTabNext(e) && !this.hasResetBtn) {
       this.onDropdownClose();
     }
   }
 
-  handleKeyDownResetBtn(e: KeyboardEvent) {
+  handleKeyDownResetBtn(e: KeyboardEvent): void {
     e.stopPropagation();
     if (isTabNext(e)) {
       this.onDropdownClose();
     }
   }
 
-  onDropdownClose() {
-    if (this._dropdown.open) {
-      this._dropdown.onClose();
+  handleTriggerClick(): void {
+    this.toggleDropdown();
+  }
+
+  handleTriggerKeydown(e: KeyboardEvent): void {
+    if (isSpace(e) || isEnter(e)) {
+      e.preventDefault();
+      this.toggleDropdown();
+    }
+  }
+
+  toggleDropdown(): void {
+    this._open = !this._open;
+
+    if (this._open) {
+      this._trigger.classList.add("udex-filter-menu__trigger-active");
+      this._popover.showAt(this._trigger);
+    } else {
+      this.onDropdownClose();
     }
   }
 
-  getDropdown(): UDExDropdown {
-    return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
+  onDropdownClose(e?: KeyboardEvent): void {
+    if (this._popover.open) {
+      if (e && (isTabPrevious(e) || isEscape(e))) {
+        e.preventDefault();
+        this._popover.close(true);
+      } else {
+        this._popover.close();
+      }
+    }
   }
 
   getSearch(): UDExSearch {
     return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
   }
 
-  _dropdownBeforeOpen() {
-    this._open = true;
+  _dropdownBeforeOpen(): void {
+    if (this.height) {
+      const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
+      content.style.maxHeight = this.height;
+    }
     this.fireEvent("before-open");
   }
 
-  _dropdownAfterOpen() {
+  _dropdownAfterOpen(): void {
     this.fireEvent("after-open");
   }
 
-  _dropdownBeforeClose() {
+  _dropdownBeforeClose(): void {
     this.fireEvent("before-close");
   }
 
-  _dropdownAfterClose() {
+  _dropdownAfterClose(): void {
     this._open = false;
+    this._trigger.classList.remove("udex-filter-menu__trigger-active");
     this.fireEvent("after-close");
   }
 
+  get disableAllowTargetOverlap(): boolean {
+    return !this.disableTargetOverlap;
+  }
+
   get hasFilterNamePrefix(): boolean {
     return !!this.filterNamePrefix?.length;
   }
@@ -425,14 +467,18 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return hasLabel ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
   }
 
-  get disabledResultBtn() {
+  get disabledResultBtn(): boolean {
     return !this.selectedItems.length && !this.selectAll;
   }
 
-  get _iconAccessibleNameText() {
+  get _iconAccessibleNameText(): string {
     return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
   }
 
+  get triggerButtonAccessibleName(): string {
+    return this.accessibleName || UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
+  }
+
   get searchableList() {
     return executeTemplate(UDExFilterMenu.searchableListBaseTemplate, this);
   }
@@ -453,6 +499,14 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return !this.hideResetBtn;
   }
 
+  getTriggerButton(): UDExButton {
+    return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
+  }
+
+  getPopover(): ResponsivePopover {
+    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  }
+
   getItems(): Array<UDExListItemBase> {
     return this.getSlottedNodes<UDExListItemBase>("items");
   }

package/src/Footer.hbs

@@ -84,6 +84,7 @@
         <div class="udex-footer__social-container">
           {{#each socialLinksArray}}
               <a
+                target="{{target}}"
                 href="{{this.url}}"
                 class="udex-footer__social-icon"
                 data-name="{{this.name}}"
@@ -121,6 +122,7 @@
               {{#each ../quickLinksArray}}
                 <li>
                   <a
+                    target="{{target}}"
                     aria-describedby="udex-footer__quick-links"
                     href="{{this.url}}"
                     data-id="{{this.id}}"
@@ -139,6 +141,7 @@
               {{#each trendingLinksArray}}
                 <li>
                   <a
+                    target="{{target}}"
                     aria-describedby="udex-footer__footer__trending"
                     href="{{this.url}}"
                     @click="{{../_onTrendingClick}}"
@@ -157,6 +160,7 @@
               {{#each aboutLinksArray}}
                 <li>
                   <a
+                    target="{{target}}"
                     aria-describedby="udex-footer__about"
                     href="{{this.url}}"
                     data-id="{{this.id}}"
@@ -175,6 +179,7 @@
               {{#each siteInformationLinksArray}}
                 <li>
                   <a
+                    target="{{target}}"
                     aria-describedby="udex-footer__site-information"
                     href="{{this.url}}"
                     data-id="{{this.id}}"
@@ -198,6 +203,7 @@
                   {{#each quickLinksArray}}
                     <li>
                       <a
+                        target="{{target}}"
                         aria-describedby="udex-footer__quick-links"
                         data-id="{{this.id}}"
                         href="{{this.url}}"
@@ -215,6 +221,7 @@
                   {{#each trendingLinksArray}}
                     <li>
                       <a
+                        target="{{target}}"
                         aria-describedby="udex-footer__footer__trending"
                         data-id="{{this.id}}"
                         href="{{this.url}}"
@@ -232,6 +239,7 @@
                   {{#each aboutLinksArray}}
                     <li>
                       <a
+                        target="{{target}}"
                         aria-describedby="udex-footer__about"
                         data-id="{{this.id}}"
                         href="{{this.url}}"
@@ -249,6 +257,7 @@
                   {{#each siteInformationLinksArray}}
                     <li>
                       <a
+                        target="{{target}}"
                         aria-describedby="udex-footer__site-information"
                         data-id="{{this.id}}"
                         href="{{this.url}}"

package/src/Footer.ts

@@ -36,14 +36,23 @@ import {
 
 const BreakpointSizeS: number = 979;
 
+export enum Target {
+  _blank = "_blank",
+  _parent = "_parent",
+  _self = "_self",
+  _top = "_top",
+}
+
 export type FooterLink = {
   title: string;
   url: string;
+  target: Target;
 };
 
 export type FooterSocialLink = {
   url: string;
   iconUrl: string;
+  target: Target;
 };
 
 export type FooterContactNumber = {
@@ -88,7 +97,7 @@ export const FooterDetailedEvent = {
  * For the <code>udex-footer</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Footer.js";</code>
+ * <code>import "@udex/web-components/dist/Footer.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/HeroBanner.hbs

@@ -10,7 +10,10 @@
             <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
           </picture>
         {{/if}}
-        {{> hero-content}}
+        <div class="udex-hero-banner__content-container">
+            <slot id="udex-hero-banner__content" name="content" part="content"></slot>
+            <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
+        </div>
         <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click={{_toggleMediaButton}}>
             <ui5-icon name={{mediaButtonIconName}}></ui5-icon>
         </button>

package/src/Link.ts

@@ -25,7 +25,7 @@ export enum IconPlacement {
  * For the <code>udex-link</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Link.js";</code>
+ * <code>import "@udex/web-components/dist/Link.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/List.ts

@@ -40,7 +40,7 @@ export type UDExListItemBase = UDExListItem & UDExListGroupHeader;
  * For the <code>udex-list</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/List.js";</code>
+ * <code>import "@udex/web-components/dist/List.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -150,16 +150,16 @@ class UDExList extends UI5Element {
     UDExList.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  onBeforeRendering() {
+  onBeforeRendering(): void {
     this.prepareListItemsMode();
   }
 
-  handleItemPress(e: CustomEvent) {
+  handleItemPress(e: CustomEvent): void {
     const clickedItem: UDExListItemBase = e.detail.item;
     this.onItemPress(clickedItem);
   }
 
-  handleKeyDown(e: KeyboardEvent) {
+  handleKeyDown(e: KeyboardEvent): void {
     this.handleUpArrow(e);
     this.handleDownArrow(e);
     this.handleHomeKey(e);
@@ -167,7 +167,7 @@ class UDExList extends UI5Element {
     this.handleEnterOrSpace(e);
   }
 
-  handleEnterOrSpace(e: KeyboardEvent) {
+  handleEnterOrSpace(e: KeyboardEvent): void {
     if (isEnter(e) || isSpace(e)) {
       e.preventDefault();
       const clickedItem = e.target as UDExListItemBase;
@@ -175,7 +175,7 @@ class UDExList extends UI5Element {
     }
   }
 
-  handleUpArrow(e: KeyboardEvent) {
+  handleUpArrow(e: KeyboardEvent): void {
     if (isUp(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
@@ -206,13 +206,18 @@ class UDExList extends UI5Element {
         return;
       }
 
+      if (this.modeRadioGroup) {
+        items[currentSelectedIndex].selected = false;
+        items[previousSelectIndex].selected = true;
+      }
+
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, previousSelectIndex);
       items[previousSelectIndex].focus();
     }
   }
 
-  handleDownArrow(e: KeyboardEvent) {
+  handleDownArrow(e: KeyboardEvent): void {
     if (isDown(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
@@ -235,13 +240,18 @@ class UDExList extends UI5Element {
         return;
       }
 
+      if (this.modeRadioGroup) {
+        items[currentSelectedIndex].selected = false;
+        items[nextSelectIndex].selected = true;
+      }
+
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, nextSelectIndex);
       items[nextSelectIndex].focus();
     }
   }
 
-  handleHomeKey(e: KeyboardEvent) {
+  handleHomeKey(e: KeyboardEvent): void {
     if (isHome(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
@@ -264,25 +274,35 @@ class UDExList extends UI5Element {
         return;
       }
 
+      if (this.modeRadioGroup) {
+        items[currentSelectedIndex].selected = false;
+        items[0].selected = true;
+      }
+
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, 0);
       items[0].focus();
     }
   }
 
-  handleEndKey(e: KeyboardEvent) {
+  handleEndKey(e: KeyboardEvent): void {
     if (isEnd(e)) {
       e.preventDefault();
       const items = this.getKeyboardNavigationItems();
       const currentSelectedIndex = this.getCurrentIndex(items, e.target as UDExListItemBase);
 
+      if (this.modeRadioGroup) {
+        items[currentSelectedIndex].selected = false;
+        items[items.length - 1].selected = true;
+      }
+
       this.unsetTabIndexByIndex(items, currentSelectedIndex);
       this.setTabIndexByIndex(items, items.length - 1);
       items[items.length - 1].focus();
     }
   }
 
-  onItemPress(clickedItem :UDExListItemBase) {
+  onItemPress(clickedItem :UDExListItemBase): void {
     if (this.modeSingleSelect && !this.controlled) {
       this.revertSelectedItems(this.getSelectedItems());
       clickedItem.selected = true;
@@ -305,7 +325,7 @@ class UDExList extends UI5Element {
     });
   }
 
-  revertSelectedItems(items: Array<UDExListItemBase>) {
+  revertSelectedItems(items: Array<UDExListItemBase>): void {
     items.forEach((item: UDExListItemBase) => {
       if (!item.disabled) {
         item.selected = false;
@@ -313,16 +333,16 @@ class UDExList extends UI5Element {
     });
   }
 
-  focusHeader(item: UDExListItemBase) {
+  focusHeader(item: UDExListItemBase): void {
     const header = item.shadowRoot?.querySelector(".udex-list__group-header") as HTMLElement;
     header.focus();
   }
 
-  unsetTabIndexByIndex(items: UDExListItemBase[], index: number) {
+  unsetTabIndexByIndex(items: UDExListItemBase[], index: number): void {
     items[index]._tabIndex = "-1";
   }
 
-  setTabIndexByIndex(items: UDExListItemBase[], index: number) {
+  setTabIndexByIndex(items: UDExListItemBase[], index: number): void {
     items[index]._tabIndex = "0";
   }
 
@@ -359,7 +379,7 @@ class UDExList extends UI5Element {
     return items;
   }
 
-  prepareListItemsMode() {
+  prepareListItemsMode(): void {
     this.getItemsFromList().forEach((item, index) => {
       item.mode = this.mode;
       item.controlled = this.controlled;
@@ -381,7 +401,7 @@ class UDExList extends UI5Element {
     return "-1";
   }
 
-  resetTabIndexes() {
+  resetTabIndexes(): void {
     this.getItemsFromList().forEach(item => {
       item._tabIndex = "-1";
     });
@@ -398,31 +418,31 @@ class UDExList extends UI5Element {
     return UDExList.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
   }
 
-  get ariaLabelledBy() {
+  get ariaLabelledBy(): string {
     return `${this._id}-mode-label`;
   }
 
-  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 modeSingleContent() {
+  get modeSingleContent(): boolean {
     return this.mode === ListMode.SingleContent;
   }
 
-  get modeSelected() {
+  get modeSelected(): boolean {
     return [ListMode.SingleSelect, ListMode.MultiSelect, ListMode.RadioGroup].includes(this.mode as ListMode);
   }
 
-  get holderHeight() {
+  get holderHeight(): string {
     return this.height ? this.height : "auto";
   }
 }

package/src/ListGroupHeader.ts

@@ -17,10 +17,10 @@ import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
  *
  * <h3>Usage</h3>
  *
- * For the <code>udex--list-group-header</code>
+ * For the <code>udex-list-group-header</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/ListGroupHeader.js";</code>
+ * <code>import "@udex/web-components/dist/ListGroupHeader.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/ListItem.hbs

@@ -4,7 +4,6 @@
         role="{{roleItem}}"
         tabindex="{{_effectiveTabIndex}}"
         aria-disabled="{{_ariaDisabled}}"
-        aria-labelledby="{{_accessibleNameRef}}"
         class="{{className}}"
         @click="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
@@ -52,7 +51,7 @@
     </li>
 {{/if}}
 {{#*inline "contentList"}}
-    <div id="{{_id}}-content" class="udex-list__content-wrap">
+    <div class="udex-list__content-wrap" _id="{{this._id}}" aria-labelledby="{{this._id}}-invisibleText">
         {{#if flag}}
             <div class="udex-list__flag-wrap">
                  <span class="udex-list__flag" style="background-position: {{flagPosition}}"></span>
@@ -102,6 +101,7 @@
                         design="Tertiary"
                         icon="{{editIcon}}"
                         accessible-name="{{editButtonAccessibleName}}"
+                        toolTip="{{editButtonAccessibleName}}"
                         size="Small">
                     </udex-button>
                 {{/if}}
@@ -114,10 +114,12 @@
                         design="Tertiary"
                         size="Small"
                         accessible-name="{{deleteButtonAccessibleName}}"
+                        toolTip="{{deleteButtonAccessibleName}}"
                         icon="{{deleteIcon}}">
                     </udex-button>
                 {{/if}}
             {{/if}}
         </div>
+      <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleName}}</div>
     </div>
 {{/inline}}