@sapudex/web-components 0.111.0 → 0.117.1

package/src/SecondaryNavigationItem.ts

@@ -0,0 +1,358 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import {
+  isLeft,
+  isRight,
+  isUp,
+  isDown,
+  isEscape,
+  isSpace,
+  isEnter,
+  isHome,
+  isEnd,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
+import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavigationItemTemplate.lit.js";
+
+// Styles
+import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationItem.css.js";
+
+export const menuItemRole: string = "menuitem";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-secondary-navigation-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SecondaryNavigationItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExSecondaryNavigationItemBase
+ * @tagname udex-secondary-navigation-item
+ * @private
+ */
+@customElement({
+  tag: "udex-secondary-navigation-item",
+  renderer: litRender,
+  styles: SecondaryNavigationItemCss,
+  template: SecondaryNavigationItemTemplate,
+  dependencies: [UI5Icon, UDExSecondaryNavigationSubItem],
+})
+
+/**
+ * Fires when item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("nav-item-click", {
+  detail: {
+    item: { type: HTMLElement },
+  },
+})
+
+/**
+ * Fires when dropdown item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("sub-item-click", {
+  detail: {
+    item: { type: Array },
+  },
+})
+
+class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
+  /**
+   * Defines an aria label for item
+   *
+   * @public
+   */
+  @property({ type: String })
+    ariaLabel!: string;
+
+  /**
+   * Defines a role for item
+   *
+   * @public
+   */
+  @property({ type: String })
+    role!: string;
+
+  /**
+   * Defines the content of the item.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    buttons!: Array<HTMLElement>;
+
+  /**
+   * List of the sub items
+   *
+   * @default "[]"
+   * @public
+   */
+  @property({ type: Object, multiple: true })
+    subItems!: Array<NavItem>;
+
+  /**
+   * Defines if dropdown is opened.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    isOpen!: boolean;
+
+  /**
+   * Defines processed items.
+   *
+   * @private
+   * @default []
+   */
+  @property({ type: Object })
+    _processedItems: Array<NavItem> = [];
+
+  _dropdownHistory: Array<Array<NavItem>> = [];
+  _shouldFocusFirstSubItem!: boolean;
+  _subTitle!: string | undefined;
+
+  onAfterRendering(): void {
+    if (this._shouldFocusFirstSubItem && this.isOpen) {
+      this.onFirstSubItemFocus();
+      this._shouldFocusFirstSubItem = false;
+    }
+  }
+
+  onBeforeRendering() : void {
+    this._subTitle = this.subActiveItemTitle || this._subTitle;
+  }
+
+  onItemClick(): void {
+    if (this.hasNestedItems) {
+      this.setDropdownItems();
+      this.toggleDropdown();
+    }
+
+    this.fireEvent("nav-item-click", { item: this });
+  }
+
+  onSubItemClick(e: Event): void {
+    const { index } = e.target as UDExSecondaryNavigationSubItem;
+    const clickedItem = this._processedItems[index];
+
+    if (clickedItem.items) {
+      this.setDropdownHistory();
+      this.setNestedItems(clickedItem);
+    }
+
+    this.fireEvent("sub-item-click", {
+      item: clickedItem,
+    });
+  }
+
+  onBackClick(): void {
+    this.setPrevNestedItems();
+  }
+
+  toggleDropdown(): void {
+    this.isOpen = !this.isOpen;
+  }
+
+  closeDropdown(): void {
+    this.isOpen = false;
+  }
+
+  handleItemLinkKeyDown(e: KeyboardEvent): void {
+    if (isEnter(e) || isSpace(e)) {
+      e.preventDefault();
+      this.onItemClick();
+    }
+  }
+
+  handleItemButtonKeyDown(e: KeyboardEvent): void {
+    if (isEnter(e) || isSpace(e)) {
+      this.onShouldFocusFirstSubItem();
+    }
+  }
+
+  handleSubItemKeyDown(e: KeyboardEvent): void {
+    e.stopPropagation();
+    if (isEscape(e)) {
+      this.handleEscapeKey();
+    }
+    if (isLeft(e)) {
+      this.handleLeftArrow(e);
+    }
+    if (isRight(e)) {
+      this.handleRightArrow(e);
+    }
+    if (isUp(e)) {
+      e.preventDefault();
+      this.handleUpArrow(e);
+    }
+    if (isDown(e)) {
+      e.preventDefault();
+      this.handleDownArrow(e);
+    }
+    if (isHome(e)) {
+      e.preventDefault();
+      this.onFirstSubItemFocus();
+    }
+    if (isEnd(e)) {
+      e.preventDefault();
+      this.onLastSubItemFocus();
+    }
+    if (isEnter(e) || isSpace(e)) {
+      e.preventDefault();
+      this.handleEnterAndSpace(e);
+    }
+  }
+
+  handleUpArrow(e: KeyboardEvent): void {
+    const { index } = e.target as UDExSecondaryNavigationSubItem;
+    const lastIndex = this.domNavItems.length - 1;
+    const previousIndex = index - 1 < 0 ? lastIndex : index - 1;
+    if (!(lastIndex === previousIndex)) {
+      this.domNavItems[previousIndex].focus();
+    }
+  }
+
+  handleDownArrow(e: KeyboardEvent): void {
+    const { index } = e.target as UDExSecondaryNavigationSubItem;
+    const nextIndex = index + 1 > this.domNavItems.length - 1 ? 0 : index + 1;
+    if (!(nextIndex === 0)) {
+      this.domNavItems[nextIndex].focus();
+    }
+  }
+
+  handleLeftArrow(e: KeyboardEvent): void {
+    const { isBack } = e.target as UDExSecondaryNavigationSubItem;
+    if (isBack) {
+      this.setPrevNestedItems();
+      this.onShouldFocusFirstSubItem();
+    }
+  }
+
+  handleRightArrow(e: KeyboardEvent): void {
+    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;
+    if (hasItems && !isBack) {
+      this.onSubItemClick(e);
+      this.onShouldFocusFirstSubItem();
+    }
+  }
+
+  handleEnterAndSpace(e: KeyboardEvent): void {
+    const { hasItems, isBack } = e.target as UDExSecondaryNavigationSubItem;
+    if (isBack) {
+      this.onBackClick();
+      this.onShouldFocusFirstSubItem();
+      return;
+    }
+
+    this.onSubItemClick(e);
+
+    if (hasItems) {
+      this.onShouldFocusFirstSubItem();
+    } else {
+      this.closeDropdown();
+      this.focus();
+    }
+  }
+
+  handleEscapeKey(): void {
+    this.closeDropdown();
+    this.focus();
+  }
+
+  setDropdownHistory(): void {
+    this._dropdownHistory.push(this._processedItems);
+  }
+
+  setPrevNestedItems(): void {
+    this._processedItems = this._dropdownHistory.pop()!;
+  }
+
+  setNestedItems({ title, items } : NavItem): void {
+    if (items) {
+      this._processedItems = [{ title, isBack: true }, ...items];
+    }
+  }
+
+  setDropdownItems(): void {
+    this._processedItems = this.subItems;
+  }
+
+  onFirstSubItemFocus(): void {
+    this.domNavItems[0].focus();
+  }
+
+  onLastSubItemFocus(): void {
+    this.domNavItems[this.domNavItems.length - 1].focus();
+  }
+
+  onShouldFocusFirstSubItem(): void {
+    this._shouldFocusFirstSubItem = true;
+  }
+
+  get domNavItems(): Array<UDExSecondaryNavigationSubItem> {
+    const domNavItems = this.shadowRoot?.querySelectorAll<UDExSecondaryNavigationSubItem>("udex-secondary-navigation-sub-item");
+    return domNavItems ? Array.from(domNavItems) : [];
+  }
+
+  get hasNestedItems(): boolean {
+    return this.subItems.length > 0;
+  }
+
+  get isSubItemActive(): boolean {
+    return !!this.subActiveItem?.active;
+  }
+
+  get isActive(): boolean {
+    return this.isSubItemActive || this.active;
+  }
+
+  get subActiveItemTitle(): string | undefined {
+    return this.subActiveItem?.title;
+  }
+
+  get subActiveItem(): NavItem | undefined {
+    return this.getActiveSubItem(this.subItems);
+  }
+
+  get isLink(): boolean {
+    return !this.hasNestedItems && !!this.path;
+  }
+
+  get itemRole(): string {
+    return this.role ? this.role : this.menuItemRole;
+  }
+
+  get menuItemRole(): string {
+    return menuItemRole;
+  }
+
+  get title(): string {
+    return this.label;
+  }
+}
+
+UDExSecondaryNavigationItem.define();
+
+export default UDExSecondaryNavigationItem;

package/src/SecondaryNavigationItemBase.ts

@@ -0,0 +1,115 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+
+export enum Target {
+  _blank = "_blank",
+  _parent = "_parent",
+  _self = "_self",
+  _top = "_top",
+}
+
+export type NavItem = {
+  path?: string;
+  mobileLinkTitle?: string;
+  target?: Target;
+  title: string;
+  active?: boolean;
+  isBack?: boolean;
+  items?: Array<NavItem>;
+}
+
+/**
+ * @class
+ *
+ * A class to serve as a foundation
+ * for the <code>UDExSecondaryNavigationItem</code> and <code>UDExSecondaryNavigationSubItem</code> classes.
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @public
+ */
+
+@customElement({
+  renderer: litRender,
+})
+
+class UDExSecondaryNavigationItemBase extends UI5Element {
+  /**
+   * Defines active state for the item
+   *
+   * @public
+   */
+  @property({ type: Boolean })
+    active!: boolean;
+
+  /**
+   * Defines path for the item
+   *
+   * @public
+   */
+  @property({ type: String })
+    path!: string;
+
+  /**
+   * Defines target for the item
+   *
+   * @public
+   */
+  @property({ type: String })
+    target!: string;
+
+  /**
+   * Defines subTitle for the item
+   *
+   * @public
+   */
+  @property({ type: String })
+    subTitle!: string;
+
+  /**
+   * Defines label for the item
+   *
+   * @public
+   */
+  @property({ type: String })
+    label!: string;
+
+  /**
+   * Defines the index for the item.
+   *
+   * @public
+   */
+  @property({ validator: Integer })
+    index!: number;
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
+  getActiveSubItem(data: Array<NavItem>): NavItem | undefined {
+    let activeItem;
+    const findActiveItem = (array: Array<NavItem>) => {
+      array.forEach(item => {
+        if (item.active === true) {
+          activeItem = item;
+          return;
+        }
+        if (item.items) {
+          findActiveItem(item.items);
+        }
+      });
+    };
+
+    findActiveItem(data);
+    return activeItem;
+  }
+}
+
+export default UDExSecondaryNavigationItemBase;

package/src/SecondaryNavigationSubItem.hbs

@@ -0,0 +1,41 @@
+{{#if isBack}}
+    <button
+        @click="{{onBackItemClick}}"
+        role="menuitem"
+        aria-label="{{backButtonLabel}}"
+        aria-haspopup="true"
+        is-back
+        class="udex-secondary-navigation__dropdown-item">
+        <ui5-icon
+            class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back"
+            name="slim-arrow-left">
+        </ui5-icon>
+        {{label}}
+    </button>
+{{else}}
+    {{#if hasItems}}
+        <button
+            @click="{{onItemClick}}"
+            role="menuitem"
+            aria-haspopup="true"
+            ?sub-active="{{isSubItemActive}}"
+            aria-label="{{label}}"
+            class="udex-secondary-navigation__dropdown-item">
+            {{label}}
+            <ui5-icon
+                class="udex-secondary-navigation__dropdown-icon"
+                name="slim-arrow-right">
+            </ui5-icon>
+        </button>
+    {{else}}
+        <a
+            @click="{{onItemClick}}"
+            role="menuitem"
+            href="{{path}}"
+            target="{{target}}"
+            ?active="{{isActive}}"
+            class="udex-secondary-navigation__dropdown-item">
+            {{label}}
+        </a>
+    {{/if}}
+{{/if}}

package/src/SecondaryNavigationSubItem.ts

@@ -0,0 +1,123 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+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 UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
+import { BACK_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
+
+import SecondaryNavigationSubItemTemplate from "./generated/templates/SecondaryNavigationSubItemTemplate.lit.js";
+
+// Styles
+import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigationSubItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-secondary-navigation-sub-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SecondaryNavigationSubItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExSecondaryNavigationItemBase
+ * @tagname udex-secondary-navigation-sub-item
+ * @public
+ */
+@customElement({
+  tag: "udex-secondary-navigation-sub-item",
+  renderer: litRender,
+  styles: SecondaryNavigationSubItemCss,
+  template: SecondaryNavigationSubItemTemplate,
+  dependencies: [UI5Icon],
+})
+
+/**
+ * Fires when item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("sub-item-click", {
+  detail: {
+    item: { type: HTMLElement },
+  },
+})
+
+/**
+ * Fires when back item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event("back-item-click")
+
+class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
+  /**
+   * Defines active item.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    isActive!: boolean;
+
+  /**
+   * Defines back item.
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    isBack!: boolean;
+
+  /**
+   * List of the nested items
+   *
+   * @default "[]"
+   * @public
+   */
+  @property({ type: Object, multiple: true })
+    nestedItems!: Array<NavItem>;
+
+  static i18nBundle: any;
+
+  static async onDefine(): Promise<void> {
+    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("udex-secondary-navigation-sub-item");
+  }
+
+  onItemClick(): void {
+    this.fireEvent("sub-item-click", {
+      item: this,
+    });
+  }
+
+  onBackItemClick(): void {
+    this.fireEvent("back-item-click");
+  }
+
+  get hasItems(): boolean {
+    return !!this.nestedItems.length;
+  }
+
+  get isSubItemActive(): boolean {
+    return !!this.getActiveSubItem(this.nestedItems)?.active;
+  }
+
+  get backButtonLabel(): string {
+    const label = UDExSecondaryNavigationSubItem.i18nBundle.getText(BACK_BUTTON_LABEL) as string;
+    return `${label} ${this.label}`;
+  }
+}
+
+UDExSecondaryNavigationSubItem.define();
+
+export default UDExSecondaryNavigationSubItem;

package/src/SelectBox.hbs

@@ -102,6 +102,7 @@
         @ui5-handle-value-reset="{{handleResetSearch}}"
         @before-open="{{handleDropdownBeforeOpen}}"
         @after-close="{{handleDropdownAfterClose}}"
+        @search-keydown="{{handleKeyDownSearch}}"
         height="{{height}}"
         accessible-role="Dialog"
         horizontal-align="Left">

package/src/SelectBox.ts

@@ -20,6 +20,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -234,6 +235,23 @@ class UDExSelectBox extends UDExSearchableListBase {
   _singleSelectedOption!: string;
   _truncatableTag!: UDExTag;
 
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._shouldFilterItems = false;
+    this._handleResizeBound = this._handleResize.bind(this);
+    this._filteredItems = [];
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
   onAfterRendering() {
     this._tokenizer = this.tokenizer;
     this._dropdown = this.dropdown;
@@ -253,6 +271,10 @@ class UDExSelectBox extends UDExSearchableListBase {
     }
   }
 
+  _handleResize() {
+    this._dropdown.style.setProperty("--udex-dropdown-pane-width", `${this.offsetWidth}px`);
+  }
+
   handleItemPress(e:CustomEvent) {
     this.onItemPress(e);
 
@@ -422,9 +444,22 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleKeyDownDropdown(e: KeyboardEvent) {
+    const isTabPrevPress = isTabPrevious(e) && !this._search;
+
     if (isEscape(e)) {
       this.trigger.focus();
     }
+
+    if (isTabNext(e) || isTabPrevPress) {
+      this.closeDropdown();
+    }
+  }
+
+  handleKeyDownSearch(e: CustomEvent) {
+    const keyEvent = e.detail as KeyboardEvent;
+    if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
+      this.closeDropdown();
+    }
   }
 
   handleOutsideClick(): void {
@@ -440,7 +475,9 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   closeDropdown() {
-    this._dropdown.onClose();
+    if (this._dropdown.open) {
+      this._dropdown.onClose();
+    }
   }
 
   scrollToTag(index: number) {