@sapudex/web-components 0.127.6 → 0.143.0

package/src/ReviewItem.hbs

@@ -0,0 +1,20 @@
+<div class="{{reviewItemClasses}}">
+    <div class="udex-review-item__rating-container">
+        <udex-rating-indicator  value="{{validatedRating}}" max="{{_maxRating}}" readonly></udex-rating-indicator>
+        {{#if date}}
+            <slot slot="date" name="date" class="udex-review-item__date"></slot>
+        {{/if}}
+    </div>
+    <div class="udex-review-item__text-container">
+        <div class="udex-review-item__title">{{reviewTitle}}</div>
+        <div class="udex-review-item__text-wrapper">
+            <p class="udex-review-item__text" id="udex-review-item__text">{{_completeText}}</p>
+            {{#if _showTextExpander}}
+                <udex-button id="reviewExpander" class="udex-review-item__text-expander" design="Invisible" size="Small" @click="{{_toggleText}}">{{buttonText}}</udex-button>
+            {{/if}}
+        </div>
+        {{#if author}}
+            <slot slot="author" name="author" class="udex-review-item__author"></slot>
+        {{/if}}
+    </div>
+</div>

package/src/ReviewItem.ts

@@ -0,0 +1,227 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import ReviewItemTemplate from "./generated/templates/ReviewItemTemplate.lit.js";
+
+// Styles
+import ReviewItemCss from "./generated/themes/ReviewItem.css.js";
+import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-review-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/ReviewItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-review-item",
+  renderer: litRender,
+  styles: ReviewItemCss,
+  template: ReviewItemTemplate,
+  dependencies: [UDExRatingIndicator, UDExButton],
+})
+
+class UDExReviewItem extends UI5Element {
+  /**
+   * Defines the position of the rating in review.
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    showRatingTop!: boolean;
+
+  /**
+   * Defines the rating in the review.
+   *
+   * @default 0
+   * @public
+   */
+  @property({ type: Number, defaultValue: 0, validator: Integer })
+    rating!: number;
+
+  /**
+   * Defines the title of the review.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    reviewTitle!: string;
+
+  /**
+   * Defines the text of the review.
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    text!: string;
+
+  /**
+   * Defines whether button for showing truncated text is shown.
+   * @default 2
+   * @private
+   */
+  @property({ type: Number, defaultValue: 2, validator: Integer })
+    _textLineLimit!: number;
+
+  /**
+   * Defines whether the text is expanded.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _textExpanded!: boolean;
+
+  /**
+   * Defines whether button for showing truncated text is shown.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _showTextExpander!: boolean;
+
+  /**
+   * Defines the text, consisting of visible and invisible parts of the original text.
+   * @default ""
+   * @private
+   */
+  @property({ type: String })
+    _completeText!: string;
+
+  /**
+   * Defines the author's name and company.
+   *
+   * @default ""
+   * @slot
+   */
+  @slot()
+    author!: Array<HTMLElement>;
+
+  /**
+   * Defines the date of the review.
+   *
+   * @default ""
+   * @slot
+   */
+  @slot()
+    date!: Array<HTMLElement>;
+
+  _toggleText() {
+    this._textExpanded = !this._textExpanded;
+    if (this._textExpanded) {
+      this._completeText = this.text;
+      this._textElement.classList.add("udex-review-item__text-expanded");
+    } else {
+      this._textElement.classList.remove("udex-review-item__text-expanded");
+      this._completeText = this._visibleText;
+    }
+  }
+
+  _handleResizeBound: ResizeObserverCallback;
+  _textElement!: HTMLElement;
+  _visibleText!: string;
+  _maxHeight: number = 48;
+  _maxRating: number = 5;
+  _minRating: number = 0;
+
+  static i18nBundle: I18nBundle;
+
+  static async onDefine() {
+    UDExReviewItem.i18nBundle = await getI18nBundle("@udex/web-components");
+  }
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._checkTextOverflow.bind(this);
+  }
+
+  onEnterDOM(): void {
+    this._maxHeight = 48;
+    this._completeText = this.text;
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering(): void {
+    this._textElement = this.getTextElement();
+    this._checkTextOverflow();
+  }
+
+  _checkTextOverflow() {
+    const words = this.text.split(" ");
+
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d")!;
+    context.font = `16px sans-serif`;
+
+    let currentLineWidth = 0;
+    let visibleText = "";
+
+    words.forEach(word => {
+      const wordWidth = context.measureText(`${word} `).width;
+      if (currentLineWidth + wordWidth <= 2 * this._textElement.offsetWidth) {
+        visibleText += `${word} `;
+        currentLineWidth += wordWidth;
+      }
+    });
+
+    this._visibleText = visibleText;
+    if (!this._textExpanded) {
+      this._completeText = visibleText;
+    }
+
+    this._showTextExpander = (!this._textExpanded && this._completeText.length < this.text.length) || (this._textExpanded && visibleText.length < this.text.length);
+  }
+
+  get buttonText(): string {
+    return this._textExpanded ? UDExReviewItem.i18nBundle.getText(READ_LESS) : UDExReviewItem.i18nBundle.getText(READ_MORE);
+  }
+
+  get reviewItemClasses(): string {
+    const ratingTop = this.showRatingTop ? " udex-review-item__rating-top" : "";
+    return `udex-review-item${ratingTop}`;
+  }
+
+  get validatedRating(): number {
+    if (this.rating > this._maxRating) {
+      console.warn("UDEx Review: The rating shouldn't be more than 5.");
+      return this._maxRating;
+    }
+    if (this.rating < this._minRating) {
+      console.warn("UDEx Review: The rating shouldn't be less than 0.");
+      return this._minRating;
+    }
+    return this.rating;
+  }
+
+  getTextElement(): HTMLElement {
+    const textElement = this.shadowRoot?.getElementById("udex-review-item__text");
+    return textElement!;
+  }
+}
+
+UDExReviewItem.define();
+
+export default UDExReviewItem;

package/src/Search.ts

@@ -16,7 +16,9 @@ import {
   isUp,
   isDown,
   isEscape,
+  isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import List from "./List.js";
 import ListItemBase from "./ListItemBase.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -97,7 +99,7 @@ export enum Mode {
  * For the <code>udex-search</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Search.js";</code>
+ * <code>import "@udex/web-components/dist/Search.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -481,13 +483,28 @@ class UDExSearch extends UI5Element {
   @property({ type: Boolean, noAttribute: true })
     _prefixDropdownExpanded!: boolean;
 
+  /**
+   * Defines the active (focus)
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    active!: boolean;
+  /**
+   * Defines is it the touch of the input field (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearch.i18nBundle = await getI18nBundle("udex-search");
+    UDExSearch.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onEnterDOM(): void {
@@ -742,6 +759,9 @@ class UDExSearch extends UI5Element {
   }
 
   handleInputClick(): void {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
     if (this.showPopoverWhenClickedIntoInput) {
       this.onOpenPopover();
     }
@@ -759,7 +779,7 @@ class UDExSearch extends UI5Element {
 
   handleAriaExpanded() {
     const value = this.open.toString();
-    this.shadowRoot?.querySelector("[udex-id='search-input']")?.setAttribute("aria-expanded", value);
+    this.getSearchInput()?.setAttribute("aria-expanded", value);
   }
 
   onOpenPopover(): void {
@@ -882,6 +902,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleBlur(): void {
+    this._isTouched = false;
     if (this.value) {
       this.labelActiveClass = this._labelActiveClassName;
     } else {
@@ -977,6 +998,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleFocus(): void {
+    this.active = true;
     this.isFocusedOnTextfield = true;
     this.focusClasses = this._focusActiveClassName;
     this.labelActiveClass = (this.value || !this.labelAnimationDisabled) ? this._labelActiveClassName : "";
@@ -984,24 +1006,39 @@ class UDExSearch extends UI5Element {
   }
 
   handleFocusout(): void {
+    this.active = false;
     this.isFocusedOnTextfield = false;
     this.focusClasses = "";
   }
 
   onReset(e: MouseEvent): void {
     e.stopPropagation();
+    this.handleReset();
+  }
+
+  handleReset(): void {
     this.value = "";
     this.showResetButton = false;
     this.onClosePopover();
-    this.handleBlur();
     this.fireEvent("handle-value-reset");
     this.Suggestion?.resetFocusState();
+    this.focus();
   }
 
   handleKeyDownReset(e: KeyboardEvent) {
     if (isTabPrevious(e) && this.open) {
       this.Suggestion?.handlePrevTabReset(e);
     }
+    if (isEnter(e) || isSpace(e)) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.handleReset();
+      this.getSearchInput()?.focus();
+    }
+  }
+
+  private getSearchInput(): HTMLInputElement {
+    return this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement;
   }
 
   onVoice(e: MouseEvent): void {
@@ -1025,7 +1062,7 @@ class UDExSearch extends UI5Element {
   onSpeechStart(): void {
     this.speechRecognition.onstart = () => {
       this.voiceActiveClass = this._voiceActiveClassName;
-      (this.shadowRoot?.querySelector("[id='search-input']") as HTMLInputElement)?.focus();
+      this.getSearchInput()?.focus();
     };
   }
 

package/src/SearchableListBase.ts

@@ -241,9 +241,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   onResetSearch() {
-    const search = this.getSearch();
-    search.value = "";
-    this._filteredItems = this.filterItems(this.getProcessedItems(), "");
+    this.resetSearch();
     this.fireEvent("reset-search");
   }
 
@@ -253,6 +251,16 @@ class UDExSearchableListBase extends UI5Element {
     });
   }
 
+  /**
+   * Reset the search value.
+   * @public
+   */
+  resetSearch() {
+    const search = this.getSearch();
+    search.value = "";
+    this._filteredItems = this.filterItems(this.getProcessedItems(), "");
+  }
+
   filterItems(items: Array<ProcessedItem>, str: string): Array<ProcessedItem> {
     return items.filter(preparedItem => {
       const { isGroup, item } = preparedItem;
@@ -285,7 +293,7 @@ class UDExSearchableListBase extends UI5Element {
     return text.replace(new RegExp(`(${str})`, "i"), "<b>$&</b>");
   }
 
-  isIncludes(string: string, value: string):boolean {
+  isIncludes(string: string, value: string): boolean {
     return string.toLowerCase().includes(value.toLowerCase());
   }
 
@@ -407,11 +415,11 @@ class UDExSearchableListBase extends UI5Element {
     return this.mode === ListMode.MultiSelect && isGrouping;
   }
 
-  get additionalClassName() {
+  get additionalClassName(): string {
     return `udex-searchable-list__header`;
   }
 
-  get groupClassName() {
+  get groupClassName(): string {
     const classHeader = `udex-searchable-list__header`;
     return this.showSearch ? `${classHeader} udex-searchable-list__header_no-margin` : classHeader;
   }
@@ -422,7 +430,7 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   static async onDefine(): Promise<void> {
-    UDExSearchableListBase.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExSearchableListBase.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 }
 

package/src/SecondaryNavigation.hbs

@@ -5,13 +5,15 @@
         </div>
     {{/if}}
     <div class="udex-secondary-navigation__holder">
-        <div class="udex-secondary-navigation__heading">
-            {{#if titleHref.length}}
-                <a class="udex-secondary-navigation__title" href="{{titleHref}}">{{title}}</a>
-            {{else}}
-                <span class="udex-secondary-navigation__title">{{title}}</span>
-            {{/if}}
-        </div>
+        {{#if title.length}}
+            <div class="udex-secondary-navigation__heading">
+                {{#if titleHref.length}}
+                    <a class="udex-secondary-navigation__title" href="{{titleHref}}">{{title}}</a>
+                {{else}}
+                    <span class="udex-secondary-navigation__title">{{title}}</span>
+                {{/if}}
+            </div>
+        {{/if}}
         <div class="udex-secondary-navigation__wrap">
             <ul
                 role="menubar"
@@ -29,6 +31,7 @@
                             mobile-link-title="{{this.mobileLinkTitle}}"
                             target="{{this.target}}"
                             .subItems="{{this.items}}"
+                            _nav-items-length="{{../visibleItems.length}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-nav-item-click="{{../handleItemClick}}">
                         </udex-secondary-navigation-item>
@@ -39,6 +42,7 @@
                         role="none"
                         class="udex-secondary-navigation__list-item">
                         <udex-secondary-navigation-item
+                            _nav-items-length="{{visibleItems.length}}"
                             index="{{visibleItems.length}}"
                             @ui5-sub-item-click="{{../handleSubItemClick}}"
                             @ui5-nav-item-click="{{../handleItemClick}}"

package/src/SecondaryNavigation.ts

@@ -156,13 +156,13 @@ class UDExSecondaryNavigation extends UI5Element {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("udex-secondary-navigation");
+    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   constructor() {
     super();
     this._showMoreButton = true;
-    this._boundReflowItems = this.reflowItems.bind(this);
+    this._boundReflowItems = this._handleResize.bind(this);
   }
 
   onEnterDOM(): void {
@@ -177,6 +177,13 @@ class UDExSecondaryNavigation extends UI5Element {
     ResizeHandler.deregister(this, this._boundReflowItems);
   }
 
+  _handleResize() {
+    this.reflowItems();
+    if (this._clickedNavItem && this.isDesktopScreen) {
+      this._clickedNavItem.closeDropdown();
+    }
+  }
+
   onInvalidation(changeInfo: ChangeInfo): void {
     if (changeInfo.name === "navItems") {
       this.reflowItems();
@@ -193,7 +200,7 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   reflowItems(): void {
-    const availableWidth = this.rootHolder.offsetWidth - this.heading?.offsetWidth - (this.optionalButtons?.offsetWidth || 0);
+    const availableWidth = this.rootHolder.offsetWidth - (this.heading?.offsetWidth || 0) - (this.optionalButtons?.offsetWidth || 0);
     const moreButtonWidth = this.getMoreButtonWidth();
     const itemsGap = 20;
     const widths = this.parsedItems.map(item => this.getItemWidth(item));
@@ -359,18 +366,20 @@ class UDExSecondaryNavigation extends UI5Element {
   }
 
   handleOutsideClick(): void {
-    document.addEventListener("click", (e: MouseEvent) => {
-      if (this.isMobileScreen && e.target !== this) {
-        this.closeMobileDropdown();
-        return;
-      }
-
-      if (this.isDesktopScreen) {
-        this.handleDesktopDropdown(e);
-      }
-    });
+    document.addEventListener("mousedown", this.outsideClickListener);
   }
 
+  outsideClickListener = (e: MouseEvent): void => {
+    if (this.isMobileScreen && e.target !== this) {
+      this.closeMobileDropdown();
+      return;
+    }
+
+    if (this.isDesktopScreen) {
+      this.handleDesktopDropdown(e);
+    }
+  };
+
   closeMobileDropdown(): void {
     this.mobileNav?.closeDropdown();
   }

package/src/SecondaryNavigationItem.ts

@@ -123,6 +123,14 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   @property({ type: Boolean })
     isOpen!: boolean;
 
+  /**
+   * Defines the length of items in the secondary navigation.
+   *
+   * @private
+   */
+  @property({ validator: Integer })
+    _navItemsLength!: number;
+
   /**
    * Defines processed items.
    *
@@ -137,6 +145,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   _subTitle!: string | undefined;
 
   onAfterRendering(): void {
+    if (this.isLastItem && this.isOpen && !this._isMobileView) {
+      this.setDropdownHorizontalAlign();
+    }
+
     if (this._shouldFocusFirstSubItem && this.isOpen) {
       this.onFirstSubItemFocus();
       this._shouldFocusFirstSubItem = false;
@@ -306,6 +318,19 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._processedItems = this.subItems;
   }
 
+  setDropdownHorizontalAlign(): void {
+    const dropdown = this.shadowRoot!.querySelector<HTMLElement>(".udex-secondary-navigation__dropdown");
+    const { right, left } = dropdown!.getBoundingClientRect();
+
+    if (right > window.innerWidth) {
+      dropdown?.setAttribute("data-horizontal-align", "right");
+    }
+
+    if (left < 0) {
+      dropdown?.setAttribute("data-horizontal-align", "left");
+    }
+  }
+
   onFirstSubItemFocus(): void {
     this.domNavItems[0].focus();
   }
@@ -318,6 +343,10 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._shouldFocusFirstSubItem = true;
   }
 
+  get isLastItem(): boolean {
+    return this._navItemsLength === this.index;
+  }
+
   get domNavItems(): Array<UDExSecondaryNavigationSubItem> {
     const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>("udex-secondary-navigation-sub-item");
     return domNavItems ? Array.from(domNavItems) : [];
@@ -338,7 +367,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   get subActiveItemTitle(): string | undefined {
     if (this.subActiveItem) {
       const { title, mobileLinkTitle } = this.subActiveItem;
-      return this._isMobileView ? mobileLinkTitle : title;
+      return this._isMobileView ? (mobileLinkTitle || title) : title;
     }
   }
 

package/src/SecondaryNavigationItemBase.ts

@@ -142,7 +142,7 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
   }
 
   get itemLabel(): string {
-    return this._isMobileView ? this.mobileLinkTitle : this.label;
+    return this._isMobileView ? (this.mobileLinkTitle || this.label) : this.label;
   }
 
   get isMobile(): boolean {

package/src/SecondaryNavigationSubItem.ts

@@ -91,7 +91,7 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   static i18nBundle: any;
 
   static async onDefine(): Promise<void> {
-    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("udex-secondary-navigation-sub-item");
+    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   onItemClick(): void {

package/src/SelectBox.hbs

@@ -66,6 +66,7 @@
                 {{/if}}
                 {{#if showTrigger}}
                     <udex-control-button
+                        tabindex="{{triggerTabIndex}}"
                         class="udex-text-field__trigger"
                         role="combobox"
                         size="Large"
@@ -89,10 +90,11 @@
             </udex-status-message>
         {{/if}}
     </div>
-    <udex-dropdown
+    <ui5-popover
+        hide-arrow
         id="udex-select-box__dropdown"
         class="udex-select-box__dropdown"
-        ?disable-target-overlap="{{disableTargetOverlap}}"
+        ?allow-target-overlap="{{allowTargetOverlap}}"
         @keydown="{{handleKeyDownDropdown}}"
         @ui5-select-all="{{handleSelectAll}}"
         @ui5-item-press="{{handleItemPress}}"
@@ -100,11 +102,11 @@
         @ui5-submit-search-value="{{handleSubmitSearch}}"
         @ui5-handle-value-search="{{handleValueSearch}}"
         @ui5-handle-value-reset="{{handleResetSearch}}"
-        @before-open="{{handleDropdownBeforeOpen}}"
-        @after-close="{{handleDropdownAfterClose}}"
+        @ui5-before-open="{{handleDropdownBeforeOpen}}"
+        @ui5-after-close="{{handleDropdownAfterClose}}"
         @search-keydown="{{handleKeyDownSearch}}"
-        height="{{height}}"
-        horizontal-align="Left">
+        horizontal-align="Left"
+        placement-type="Bottom">
         {{#if _showTagsDropdownContent}}
             <div class="udex-truncatable-tag-content">
                 <span class="udex-truncatable-tag-content__label">{{truncatableTagLabel}}</span>
@@ -117,7 +119,7 @@
         {{else}}
             {{searchableList}}
         {{/if}}
-    </udex-dropdown>
+    </ui5-popover>
     {{#if displayonly}}
         <udex-tooltip
             placement="{{tooltipPlacement}}">