@sapudex/web-components 0.111.0

package/src/MastheadMenuItem.hbs

@@ -0,0 +1,88 @@
+{{#if isActive}}
+    <a
+        class="udex-masthead-menu-item {{rootClass}}"
+        role="{{accessibleRole}}"
+        href="{{url}}"
+        part="menu-item-link"
+        target="{{target}}">
+        {{#if iconStart}}
+            {{>arrow-left}}
+        {{/if}}
+        <span class={{labelClass}}>
+           {{>label}}
+        </span>
+        {{#if iconEnd}}
+            {{>arrow-right}}
+        {{/if}}
+    </a>
+    {{#if badge}}
+        <udex-badge
+            class="udex-masthead-menu-item-badge"
+            type="Number"
+            number-design="Blue"
+            size="Small">
+            {{badge}}
+        </udex-badge>
+    {{/if}}
+{{else}}
+    {{#if isButtonType}}
+        <button
+            @click="{{handleClick}}"
+            _id="{{id}}"
+            class="udex-masthead-menu-item {{rootClass}}"
+            part="menu-item-button"
+            role="{{accessibleRole}}">
+            {{#if iconStart}}
+                {{>arrow-left}}
+            {{/if}}
+            {{label}}
+            {{#if iconEnd}}
+                {{>arrow-right}}
+            {{/if}}
+        </button>
+    {{else}}
+        <span
+            class="udex-masthead-menu-item {{rootClass}}"
+            part="menu-item">
+            {{#if iconStart}}
+                {{>arrow-left}}
+            {{/if}}
+            {{label}}
+            {{#if iconEnd}}
+                {{>arrow-right}}
+            {{/if}}
+        </span>
+    {{/if}}
+{{/if}}
+
+{{#*inline "label"}}
+    {{#if externalLink}}
+        {{leadingWordsOfLabel}}
+        <span class="udex-masthead-menu-item__text-with-icon">
+            {{lastWordOfLabel}}
+            <ui5-icon
+                class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action"
+                name="action">
+            </ui5-icon>
+        </span>
+    {{else}}
+        <span>{{label}}</span>
+    {{/if}}
+{{/inline}}
+
+{{#*inline "arrow-left"}}
+    <ui5-icon
+        class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left"
+        name="slim-arrow-left"
+        part="left">
+    </ui5-icon>
+{{/inline}}
+
+{{#*inline "arrow-right"}}
+    <ui5-icon
+        class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right"
+        name="slim-arrow-right"
+        part="right">
+    </ui5-icon>
+{{/inline}}
+

package/src/MastheadMenuItem.ts

@@ -0,0 +1,190 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+
+import MastheadMenuItemTemplate from "./generated/templates/MastheadMenuItemTemplate.lit.js";
+
+// Styles
+import MastheadMenuItemCss from "./generated/themes/MastheadMenuItem.css.js";
+
+export enum ItemType {
+  Heading = "Heading",
+  Button = "Button",
+  Link = "Link"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>masthead-menu-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadMenuItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-masthead-menu-item",
+  renderer: litRender,
+  styles: MastheadMenuItemCss,
+  template: MastheadMenuItemTemplate,
+  dependencies: [Icon],
+})
+
+/**
+ * Fires when item button is clicked
+ *
+ * @public
+ */
+@event("click", {
+  detail: {
+    item: { type: HTMLElement },
+  },
+})
+class UDExMastheadMenuItem extends UI5Element {
+  /**
+   * Defines the type of the item.
+   *
+   * @default "Link"
+   * @public
+   */
+  @property({ type: ItemType, defaultValue: ItemType.Link })
+    type!: `${ItemType}`;
+
+  /**
+   * Controls the ARIA role of the item
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    accessibleRole!: string;
+
+  /**
+   * Defines the label of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    label!: string;
+
+  /**
+   * Defines the url of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    url?: string;
+
+  /**
+   * Defines the badge of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    badge?: string;
+
+  /**
+   * Defines the externalLink of the component.
+   *
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    externalLink?: boolean;
+
+  /**
+   * Defines the border for component.
+   *
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    hasBorder?: boolean;
+
+  /**
+   * Defines the start position of icon arrow.
+   *
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    iconStart?: boolean;
+
+  /**
+   * Defines the end position of icon arrow.
+   *
+   *
+   * @public
+   * @default false
+   */
+  @property({ type: Boolean })
+    iconEnd?: boolean;
+
+  onEnterDOM() {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+  handleClick() {
+    this.fireEvent("click", { item: this });
+  }
+
+  get rootClass(): string {
+    const badgeClass = this.badge ? "udex-masthead-menu-item_badge" : "";
+    const rootClass = this.isHeadingType ? "udex-masthead-menu-item_is-header" : "udex-masthead-menu-item_is-list";
+    return `${rootClass} ${badgeClass}`;
+  }
+
+  get labelClass(): string {
+    const root = "udex-masthead-menu-item__label";
+    return this.externalLink ? `${root} udex-masthead-menu-item__label_with-icon` : `${root}`;
+  }
+
+  get isHeadingType(): boolean {
+    return this.type === ItemType.Heading;
+  }
+
+  get isButtonType(): boolean {
+    return this.type === ItemType.Button;
+  }
+
+  get isActive(): boolean {
+    return (this.type === ItemType.Link || !!this.url) && !this.isButtonType;
+  }
+
+  get target(): string {
+    return this.externalLink ? "_blank" : "_self";
+  }
+
+  get lastWordOfLabel(): string | undefined {
+    return this.label.split(" ").pop();
+  }
+
+  get leadingWordsOfLabel(): string {
+    const leadingWords = this.label.split(" ").slice(0, -1).join(" ");
+    return `${leadingWords} `;
+  }
+}
+
+UDExMastheadMenuItem.define();
+
+export default UDExMastheadMenuItem;

package/src/MastheadMobileMenu.hbs

@@ -0,0 +1,115 @@
+<nav class="udex-masthead-mobile-menu" @keydown="{{handleKeyDown}}">
+    <div class="udex-masthead-mobile-menu__nav-holder">
+        <div class="udex-masthead-mobile-menu__list-search">
+            <slot name="search"></slot>
+        </div>
+        <ul class="udex-masthead-mobile-menu__list" role="menu">
+            {{#if showNavigation}}
+                {{>nav-items}}
+            {{/if}}
+            {{#if _showCategories}}
+                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                    <udex-masthead-menu-item
+                        class="udex-masthead-mobile-menu__back-item"
+                        @click="{{handleBackToMenuItems}}"
+                        label="{{_clickedItem.innerText}}"
+                        type="Button"
+                        has-border
+                        icon-start
+                        back-to-nav>
+                    </udex-masthead-menu-item>
+                </li>
+                {{>categories}}
+            {{/if}}
+            {{#if _showCategoryItems}}
+                <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                    <udex-masthead-menu-item
+                        class="udex-masthead-mobile-menu__back-item"
+                        @click="{{handleBackToCategories}}"
+                        label="{{_category.category}}"
+                        type="Button"
+                        has-border
+                        icon-start
+                        back-to-categories>
+                    </udex-masthead-menu-item>
+                </li>
+                {{#if _category.url}}
+                    <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+                        <udex-masthead-menu-item
+                            url="{{this._category.url}}"
+                            label="{{categoryLinkText}}"
+                            has-border>
+                        </udex-masthead-menu-item>
+                    </li>
+                {{/if}}
+                {{>category-items}}
+            {{/if}}
+        </ul>
+    </div>
+    {{#if showExploreBtn}}
+        <udex-masthead-menu-item
+            class="udex-masthead-mobile-menu__explore-btn"
+            id="{{exploreItem._id}}"
+            @click="{{handleExploreSapClick}}"
+            accessible-role="button"
+            type="Button"
+            first-level
+            icon-end
+            is-explore
+            label={{exploreItem.innerText}}>
+        </udex-masthead-menu-item>
+    {{/if}}
+</nav>
+
+{{#*inline "nav-items"}}
+    {{#each items}}
+        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            {{#if this.href}}
+                <udex-masthead-menu-item
+                    url="{{this.href}}"
+                    label="{{this.innerText}}"
+                    has-border>
+                </udex-masthead-menu-item>
+            {{else}}
+                <udex-masthead-menu-item
+                    @click="{{../handleMenuItemClick}}"
+                    label="{{this.innerText}}"
+                    id="{{this._id}}"
+                    type="Button"
+                    has-border
+                    icon-end
+                    first-level>
+                </udex-masthead-menu-item>
+            {{/if}}
+        </li>
+    {{/each}}
+{{/inline}}
+
+{{#*inline "categories"}}
+    {{#each _categories}}
+        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            <udex-masthead-menu-item
+                @click="{{../handleMenuCategoryClick}}"
+                url="{{this.url}}"
+                id="{{@index}}"
+                label="{{this.category}}"
+                type="Button"
+                second-level
+                has-border
+                icon-end>
+            </udex-masthead-menu-item>
+        </li>
+    {{/each}}
+{{/inline}}
+
+{{#*inline "category-items"}}
+    {{#each _category.items}}
+        <li class="udex-masthead-mobile-menu__list-item" role="menuitem">
+            <udex-masthead-menu-item
+                label="{{this.title}}"
+                url="{{this.url}}"
+                has-border>
+            </udex-masthead-menu-item>
+        </li>
+    {{/each}}
+{{/inline}}

package/src/MastheadMobileMenu.ts

@@ -0,0 +1,313 @@
+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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+  isUp, isDown, isRight, isLeft, isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExMastheadItem, { MenuItem, SubMenuLinkItem } from "./MastheadItem.js";
+import UDExMastheadMenuItem from "./MastheadMenuItem.js";
+import { OVERVIEW } from "./generated/i18n/i18n-defaults.js";
+
+import MastheadMobileMenuTemplate from "./generated/templates/MastheadMobileMenuTemplate.lit.js";
+// Styles
+import MastheadMobileMenuCss from "./generated/themes/MastheadMobileMenu.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-masthead-mobile-menu</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/MastheadMobileMenu.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-masthead-mobile-menu",
+  renderer: litRender,
+  styles: MastheadMobileMenuCss,
+  template: MastheadMobileMenuTemplate,
+  dependencies: [UDExMastheadMenuItem],
+})
+
+class UDExMastheadMobileMenu extends UI5Element {
+  /**
+   * Slot for search
+   *
+   * @public
+   */
+  @slot({ type: Node })
+    search!: Array<Node>;
+
+  /**
+   * List of the menu items
+   *
+   * @default "[]"
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExMastheadItem>;
+
+  /**
+   * Slot for explore Sap mobile button
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    exploreSapMobileButton?: UDExMastheadItem;
+
+  @property({ type: Boolean })
+    _showCategories!: boolean;
+
+  @property({ type: Boolean })
+    _hideExploreSapBtn!: boolean;
+
+  @property({ type: Boolean })
+    _showCategoryItems!: boolean;
+
+  @property({ type: String })
+    _direction?: string;
+
+  _clickedItem!: UDExMastheadItem;
+  _categories!: Array<SubMenuLinkItem>;
+  _category!: SubMenuLinkItem;
+
+  static i18nBundle: I18nBundle;
+
+  static async onDefine(): Promise<void> {
+    UDExMastheadMobileMenu.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
+  onAfterRendering() {
+    if (this.hasAttribute("slot")) {
+      this.focusFirstItem();
+    }
+  }
+
+  handleMenuItemClick(e: Event) {
+    e.preventDefault();
+    this.openCategories(e);
+  }
+
+  handleMenuCategoryClick(e: Event) {
+    e.preventDefault();
+    this.openCategoryItems(e);
+  }
+
+  handleExploreSapClick(e: Event) {
+    e.preventDefault();
+    this._hideExploreSapBtn = true;
+    this._showCategoryItems = false;
+    this.openCategories(e);
+  }
+
+  handleBackToMenuItems() {
+    this.showFirstLevelMenu();
+  }
+
+  handleBackToCategories() {
+    this.showCategories();
+  }
+
+  handleKeyDown(e: KeyboardEvent) {
+    this.handleUpArrow(e);
+    this.handleDownArrow(e);
+    this.handleRightArrow(e);
+    this.handleLeftArrow(e);
+  }
+
+  handleRightArrow(e: KeyboardEvent) {
+    this.handleDirection();
+    if (isRight(e) || isEnter(e)) {
+      if (this.isRtlDirection) {
+        this.moveToBackWithKeyboard(e);
+      } else {
+        this.moveToNextLevelWithKeyboard(e);
+      }
+    }
+  }
+
+  handleLeftArrow(e: KeyboardEvent) {
+    this.handleDirection();
+    if (isLeft(e) || isEnter(e)) {
+      if (this.isRtlDirection) {
+        this.moveToNextLevelWithKeyboard(e);
+      } else {
+        this.moveToBackWithKeyboard(e);
+      }
+    }
+  }
+
+  handleUpArrow(e: KeyboardEvent) {
+    if (isUp(e)) {
+      e.preventDefault();
+      this.focusPreviousItem(e);
+    }
+  }
+
+  handleDownArrow(e: KeyboardEvent) {
+    if (isDown(e)) {
+      e.preventDefault();
+      this.focusNextItem(e);
+    }
+  }
+
+  handleDirection() {
+    const directionStyles: string = window
+      .getComputedStyle(this)
+      .getPropertyValue("direction");
+    if (!directionStyles) {
+      this._direction = "ltr";
+    } else {
+      this._direction = directionStyles;
+    }
+  }
+
+  moveToBackWithKeyboard(e: KeyboardEvent) {
+    const target = e.target as UDExMastheadItem;
+    if (target.hasAttribute("back-to-nav")) {
+      this.showFirstLevelMenu();
+    }
+
+    if (target.hasAttribute("back-to-categories")) {
+      this.showCategories();
+    }
+  }
+
+  moveToNextLevelWithKeyboard(e: KeyboardEvent) {
+    const target = e.target as UDExMastheadItem;
+
+    if (target.hasAttribute("is-explore")) {
+      this._hideExploreSapBtn = true;
+      this._showCategoryItems = false;
+    }
+
+    if (target.hasAttribute("first-level")) {
+      this.openCategories(e);
+    }
+
+    if (target.hasAttribute("second-level")) {
+      this.openCategoryItems(e);
+    }
+  }
+
+  focusFirstItem(): void {
+    this.getListItemByIndex(0)?.focus();
+  }
+
+  focusPreviousItem(e: KeyboardEvent): void {
+    const target = e.target as HTMLElement;
+    const currentItem = target.parentElement as HTMLElement;
+    const currentSelectedIndex = this.getCurrentIndex(currentItem);
+    const lastItemIndex = this.navigationItems.length - 1;
+    const previousSelectIndex = currentSelectedIndex - 1 < 0 ? lastItemIndex : currentSelectedIndex - 1;
+    const listItem = this.getListItemByIndex(previousSelectIndex);
+    listItem?.focus();
+  }
+
+  focusNextItem(e: KeyboardEvent): void {
+    const target = e.target as HTMLElement;
+    const currentItem = target.parentElement as HTMLElement;
+    const currentSelectedIndex = this.getCurrentIndex(currentItem);
+    const nextSelectIndex = currentSelectedIndex + 1 > this.navigationItems.length - 1 ? 0 : currentSelectedIndex + 1;
+    const listItem = this.getListItemByIndex(nextSelectIndex);
+    listItem?.focus();
+  }
+
+  openCategories(e: Event) {
+    const item = this.getItemByList(e.target as UDExMastheadItem);
+    this._clickedItem = item;
+    this._categories = this.getCategories(item.getSubItems());
+    this._showCategories = true;
+  }
+
+  openCategoryItems(e: Event) {
+    const item = e.target as UDExMastheadMenuItem;
+    const index = Number(item.getAttribute("id"));
+    this._category = this._categories[index];
+    this._showCategories = false;
+    this._showCategoryItems = true;
+  }
+
+  showFirstLevelMenu() {
+    this._showCategories = false;
+    this._showCategoryItems = false;
+    this._hideExploreSapBtn = false;
+  }
+
+  showCategories() {
+    this._showCategories = true;
+    this._showCategoryItems = false;
+  }
+
+  getItemByList(el: UDExMastheadItem): UDExMastheadItem {
+    const items = [
+      ...this.items,
+      ...[this.hasExploreBtnSlot ? this.exploreItem : []],
+    ] as Array<UDExMastheadItem>;
+    return items.find(item => item._id === el.getAttribute("id"))!;
+  }
+
+  getCategories(items: Array<MenuItem>): Array<SubMenuLinkItem> {
+    const categories: Array<SubMenuLinkItem> = [];
+    items?.forEach(item => {
+      item.subMenuLinkItems.forEach(category => {
+        categories.push(category);
+      });
+    });
+
+    return categories;
+  }
+
+  getCurrentIndex(item: HTMLElement): number {
+    return this.navigationItems.indexOf(item);
+  }
+
+  getListItemByIndex(index: number): HTMLElement | null {
+    return this.navigationItems[index]?.querySelector("udex-masthead-menu-item");
+  }
+
+  get isRtlDirection(): boolean {
+    return this._direction === "rtl";
+  }
+
+  get navigationItems(): Array<HTMLElement> {
+    return Array.from(this.shadowRoot!.querySelectorAll(".udex-masthead-mobile-menu__list-item"));
+  }
+
+  get showNavigation(): boolean {
+    return !this._showCategories && !this._showCategoryItems;
+  }
+
+  get categoryLinkText(): string {
+    return UDExMastheadMobileMenu.i18nBundle.getText(OVERVIEW);
+  }
+
+  get exploreItem(): UDExMastheadItem {
+    return this.getSlottedNodes<UDExMastheadItem>("exploreSapMobileButton")[0];
+  }
+
+  get showExploreBtn(): boolean {
+    return this.hasExploreBtnSlot && !this._hideExploreSapBtn;
+  }
+
+  get hasExploreBtnSlot(): boolean {
+    return !!this.getSlottedNodes("exploreSapMobileButton").length;
+  }
+}
+
+UDExMastheadMobileMenu.define();
+
+export default UDExMastheadMobileMenu;