@sapudex/web-components 0.111.0

package/src/SecondaryNavigation.ts

@@ -0,0 +1,447 @@
+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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import {
+  isLeft,
+  isRight,
+  isUp,
+  isDown,
+  isEscape,
+} from "@ui5/webcomponents-base/dist/Keys.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { MORE } from "./generated/i18n/i18n-defaults.js";
+
+import SecondaryNavigationTemplate from "./generated/templates/SecondaryNavigationTemplate.lit.js";
+
+// Styles
+import SecondaryNavigationCss from "./generated/themes/SecondaryNavigation.css.js";
+
+const mobileMenuActiveClass = "udex-secondary-navigation__root_open";
+const rootClass = "udex-secondary-navigation__root";
+const breakpointSizeS: number = 979;
+
+export enum Target {
+  _blank = "_blank",
+  _parent = "_parent",
+  _self = "_self",
+  _top = "_top",
+}
+
+export type NavItem = {
+  path: string;
+  mobileLinkTitle: string;
+  target: Target;
+  title: string;
+  active?: boolean;
+}
+
+export type SecondaryNavigationItemClickDetail = {
+  originalEvent: Event,
+  clickedItem: HTMLElement;
+  clickedIndex: number;
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-secondary-navigation</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SecondaryNavigation.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-secondary-navigation",
+  renderer: litRender,
+  styles: SecondaryNavigationCss,
+  template: SecondaryNavigationTemplate,
+  dependencies: [UI5Icon],
+})
+
+/**
+ * Fires when item is clicked
+ *
+ * @allowPreventDefault
+ * @public
+ */
+@event<SecondaryNavigationItemClickDetail>("item-click", {
+  detail: {
+    originalEvent: {
+      type: Event,
+    },
+    clickedItem: {
+      type: HTMLElement,
+    },
+    clickedIndex: {
+      type: Integer,
+    },
+  },
+})
+
+class UDExSecondaryNavigation extends UI5Element {
+  /**
+   * Defines an aria label for the mobile menu opener
+   *
+   * @public
+   */
+  @property({ type: String })
+    mobileMenuOpenerAriaLabel!: string;
+
+  /**
+   * List of the nav items
+   *
+   * @default "[]"
+   * @public
+   */
+  @property({ type: String, defaultValue: "[]" })
+    navItems!: string;
+
+  /**
+   * Slot for breadcrumbs.
+   *
+   * @slot breadcrumbs
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    breadcrumbs!: Array<HTMLElement>;
+
+  /**
+   * Slot for action buttons.
+   *
+   * @slot buttons
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    buttons!: Array<HTMLElement>;
+
+  /**
+   * Defines the title of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    title!: string;
+
+  @property({ type: Boolean, noAttribute: true })
+    _dropdownMoreIsOpen!: boolean;
+
+  @property({ type: HTMLElement, defaultValue: [], noAttribute: true })
+    _overflowItems!: Array<NavItem>;
+
+  @property({ type: HTMLElement, defaultValue: [], noAttribute: true })
+    _navItems!: Array<NavItem>;
+
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
+  @property({ type: Boolean, noAttribute: true })
+    _mobileBtnExpanded = false;
+
+  _navigationList: Array<NavItem> | undefined;
+  _dropdown!: HTMLElement | null | undefined;
+  _rootHolder!: HTMLElement | null | undefined;
+  _boundReflowItems: () => void;
+
+  static i18nBundle: any;
+
+  static async onDefine(): Promise<void> {
+    UDExSecondaryNavigation.i18nBundle = await getI18nBundle("udex-secondary-navigation");
+  }
+
+  constructor() {
+    super();
+    this._boundReflowItems = this.reflowItems.bind(this);
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+
+    if (this.isDesktopScreen) {
+      this.reflowItems();
+    }
+
+    ResizeHandler.register(this.rootHolder, this._boundReflowItems);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this.rootHolder, this._boundReflowItems);
+  }
+
+  onAfterRendering(): void {
+    this._rootHolder = this.rootHolder;
+    this._dropdown = this.getDropdown();
+
+    this.handleOutsideClick();
+  }
+
+  refreshRendering(): void {
+    this._requestRender = !this._requestRender;
+  }
+
+  reflowItems(): void {
+    const availableWidth = this.rootHolder.offsetWidth - this.heading.offsetWidth - (this.optionalButtons?.offsetWidth || 0);
+    const moreButtonWidth = this.getMoreButtonWidth();
+    const itemsGap = 20;
+
+    const widths = this.navigationList.map(item => this.getItemWidth(item));
+
+    const steps: Array<number> = [];
+    widths.forEach((itemWidth, index) => {
+      steps.push((steps.at(-1) || 0) + itemWidth + (index && itemsGap));
+    });
+
+    if ((steps.at(-1) || 0) <= availableWidth) {
+      this._navItems.splice(0, Infinity, ...this.navigationList);
+      this.refreshRendering();
+      return;
+    }
+
+    // @ts-ignore
+    const lastVisibleIndex: number = steps.findLastIndex((size: number) => size < (availableWidth - moreButtonWidth - 20));
+    this._navItems.splice(0, Infinity, ...this.navigationList.slice(0, lastVisibleIndex + 1));
+    this._overflowItems.splice(0, Infinity, ...this.navigationList.slice(lastVisibleIndex + 1));
+    this.refreshRendering();
+  }
+
+  handleKeyDown(e: KeyboardEvent) {
+    e.stopPropagation();
+    this.handleLeftArrow(e);
+    this.handleRightArrow(e);
+    this.handleEscapeKey(e);
+  }
+
+  handleEscapeKey(e: KeyboardEvent) {
+    if (isEscape(e)) {
+      if (!this.isDesktopScreen) {
+        this._rootHolder?.classList.remove(mobileMenuActiveClass);
+        this.getMobileButtonMenu().focus();
+      } else {
+        this.onCloseDropdown();
+        this.getMoreButton().focus();
+      }
+    }
+  }
+
+  handleKeyDownDropdown(e: KeyboardEvent) {
+    e.stopPropagation();
+    this.handleUpArrow(e);
+    this.handleDownArrow(e);
+    this.handleEscapeKey(e);
+  }
+
+  handleLeftArrow(e: KeyboardEvent): void {
+    if (isLeft(e)) {
+      this.focusPrevNavItem(e);
+    }
+  }
+
+  handleRightArrow(e: KeyboardEvent): void {
+    if (isRight(e)) {
+      this.focusNextNavItem(e);
+    }
+  }
+
+  handleUpArrow(e: KeyboardEvent): void {
+    if (isUp(e)) {
+      this.focusPrevNavItem(e);
+    }
+  }
+
+  handleDownArrow(e: KeyboardEvent): void {
+    if (isDown(e)) {
+      this.focusNextNavItem(e);
+    }
+  }
+
+  handleOutsideClick(): void {
+    document.addEventListener("click", () => {
+      if (this._dropdown) {
+        this.onCloseDropdown();
+      }
+    });
+  }
+
+  handleMobileOpen(): void {
+    this._rootHolder?.classList.toggle(mobileMenuActiveClass);
+    this._mobileBtnExpanded = !this._mobileBtnExpanded;
+  }
+
+  handleToggleDropdown(): void {
+    this._dropdownMoreIsOpen = !this._dropdownMoreIsOpen;
+  }
+
+  focusPrevNavItem(e: KeyboardEvent): void {
+    const el = e.target as HTMLElement;
+    const currentItem = el.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();
+  }
+
+  focusNextNavItem(e: KeyboardEvent): void {
+    const el = e.target as HTMLElement;
+    const currentItem = el.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();
+  }
+
+  onCloseDropdown(): void {
+    this._dropdownMoreIsOpen = false;
+  }
+
+  getItemWidth(item: NavItem): number {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d")!;
+    context.font = "16px / 17.6px '72 Brand Variable'";
+
+    return Math.ceil(context.measureText(item.title).width);
+  }
+
+  getCurrentIndex(item: HTMLElement): number {
+    return this.navigationItems.indexOf(item);
+  }
+
+  getListItemByIndex(index: number): HTMLElement | null {
+    return this.navigationItems[index].querySelector(".udex-secondary-navigation__link-btn");
+  }
+
+  getDropdown(): HTMLElement {
+    return this.shadowRoot!.querySelector(".udex-secondary-navigation__dropdown")!;
+  }
+
+  getMobileButtonMenu(): HTMLElement {
+    return this.shadowRoot?.querySelector(".udex-secondary-navigation__mobile-opener") as HTMLElement;
+  }
+
+  getMoreButton(): HTMLElement {
+    return this.shadowRoot!.querySelector(".udex-secondary-navigation__list-item_more > button")!;
+  }
+
+  getMoreButtonWidth(): number {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d")!;
+    context.font = "16px / 17.6px '72 Brand Variable'";
+
+    return Math.ceil(context.measureText("More").width) + 4 + 16;
+  }
+
+  parseArrayFromString<T>(string: string): T[] {
+    return string ? JSON.parse(string) as T[] : [];
+  }
+
+  handleNavigationClick(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    const clickedIndex = this.domNavItems.indexOf(target);
+    const prevented = !this.fireEvent("item-click", {
+      originalEvent: e,
+      clickedItem: target,
+      clickedIndex,
+    }, true);
+
+    if (prevented) {
+      e.preventDefault();
+      return;
+    }
+
+    if (this.domNavItems.length > 0) {
+      this.navigationList.forEach(item => delete item.active);
+      this.navigationList[clickedIndex].active = true;
+      this.refreshRendering();
+    }
+  }
+
+  get navigationItems(): Array<HTMLElement> {
+    return Array.from(this.shadowRoot!.querySelectorAll(".udex-secondary-navigation__link-btn-wrap"));
+  }
+
+  get domNavItems(): Array<HTMLElement> {
+    const navigationItemsSelector = ".udex-secondary-navigation__item:not(.udex-secondary-navigation__link-btn-more), .udex-secondary-navigation__dropdown-item";
+    const domNavItems = this.shadowRoot?.querySelectorAll<HTMLElement>(navigationItemsSelector);
+    return domNavItems ? Array.from(domNavItems) : [];
+  }
+
+  get rootHolder(): HTMLElement {
+    return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(".udex-secondary-navigation__root") : undefined)!;
+  }
+
+  get heading(): HTMLElement {
+    return (this.shadowRoot ? this.shadowRoot.querySelector<HTMLElement>(".udex-secondary-navigation__heading") : undefined)!;
+  }
+
+  get optionalButtons() {
+    return this.shadowRoot?.querySelector<HTMLElement>(".udex-secondary-navigation__buttons");
+  }
+
+  get linksList() {
+    return this.shadowRoot?.querySelector<HTMLElement>(".udex-secondary-navigation__list");
+  }
+
+  get moreButtonText(): string {
+    return UDExSecondaryNavigation.i18nBundle.getText(MORE) as string;
+  }
+
+  get activeItemText(): string {
+    const activeItem = this.navigationList.find(item => item.active);
+    return activeItem ? activeItem?.title : "";
+  }
+
+  get moreClass(): string {
+    const rootClasses = "udex-secondary-navigation__list-item udex-secondary-navigation__list-item_more";
+    return this._dropdownMoreIsOpen ? `${rootClasses} udex-secondary-navigation__list-item_open` : `${rootClasses}`;
+  }
+
+  get navigationList(): Array<NavItem> {
+    if (!this._navigationList) {
+      this._navigationList = this.parseArrayFromString<NavItem>(this.navItems);
+    }
+    return this._navigationList;
+  }
+
+  get items(): Array<NavItem> {
+    return this.isDesktopScreen ? this._navItems : this.navigationList;
+  }
+
+  get moreIsActive(): boolean {
+    return this._overflowItems.some(item => item.active);
+  }
+
+  get rootClass(): string {
+    const centeredClass = this.hasBreadcrumbsSlot ? "" : `${rootClass}_centered`;
+    return `${rootClass} ${centeredClass}`;
+  }
+
+  get hasBreadcrumbsSlot(): boolean {
+    return !!this.getSlottedNodes("breadcrumbs").length;
+  }
+
+  get isDesktopScreen(): boolean {
+    return window.innerWidth > breakpointSizeS;
+  }
+}
+
+UDExSecondaryNavigation.define();
+
+export default UDExSecondaryNavigation;

package/src/SegmentedButton.ts

@@ -0,0 +1,119 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+
+import SegmentedButton, { SegmentedButtonSelectionChangeEventDetail } from "@ui5/webcomponents/dist/SegmentedButton.js";
+import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+
+// Styles
+import SegmentedButtonMode from "@ui5/webcomponents/dist/types/SegmentedButtonMode.js";
+import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
+import UDExSegmentedButtonItem, { SegmentedButtonItemSize } from "./SegmentedButtonItem.js";
+
+export enum SegmentedButtonSelectionMode {
+  /**
+   * There is always one selected. Selecting one deselects the previous one.
+   * @public
+   */
+  Single = "Single",
+
+  /**
+   * Multiple items can be selected at a time. All items can be deselected.
+   * @public
+   */
+  Multiple = "Multiple",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-segmented-button</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SegmentedButton.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-segmented-button",
+  renderer: litRender,
+  styles: [SegmentedButton.styles, SegmentedButtonCss],
+  dependencies: [UDExSegmentedButtonItem],
+})
+class UDExSegmentedButton extends SegmentedButton {
+  /**
+   * Defines the size of the button.
+   *
+   * @default "Medium"
+   * @public
+   */
+  @property({ type: SegmentedButtonItemSize, defaultValue: SegmentedButtonItemSize.Medium })
+    size!: `${SegmentedButtonItemSize}`;
+
+  onBeforeRendering() {
+    const items = this.getSlottedNodes<UDExSegmentedButtonItem>("items");
+
+    items.forEach((item, index, arr) => {
+      item.size = this.size;
+      item.posInSet = index + 1;
+      item.sizeOfSet = arr.length;
+    });
+
+    this.normalizeSelection();
+
+    this.style.setProperty(getScopedVarName("--udex-segmented-button-items-count"), `${items.length}`);
+  }
+
+  _onmousedown(e: MouseEvent) {
+    const eventTarget = e.target as SegmentedButtonItem;
+    const isTargetSegmentedButtonItem = eventTarget.hasAttribute("udex-segmented-button-item");
+
+    if (isTargetSegmentedButtonItem) {
+      eventTarget.focus();
+      this._itemNavigation.setCurrentItem(eventTarget);
+      this.hasPreviouslyFocusedItem = true;
+    }
+  }
+
+  _selectItem(e: MouseEvent | KeyboardEvent) {
+    // Method to be update with @ui5/webcomponents v.2.0 , due to ToggleButton dependency change (pressed -> selected)
+    const target = e.target as SegmentedButtonItem;
+    const isTargetSegmentedButtonItem = target.hasAttribute("udex-segmented-button-item");
+
+    if (target.disabled || target === this.getDomRef() || !isTargetSegmentedButtonItem) {
+      return;
+    }
+
+    switch (this.mode) {
+    case SegmentedButtonMode.MultiSelect:
+      if (e instanceof KeyboardEvent) {
+        target.pressed = !target.pressed;
+      }
+      break;
+    default:
+      this._applySingleSelection(target);
+    }
+
+    this.fireEvent<SegmentedButtonSelectionChangeEventDetail>("selection-change", {
+      selectedItem: target,
+      selectedItems: this.selectedItems,
+    });
+
+    this._itemNavigation.setCurrentItem(target);
+    target.focus();
+
+    return this;
+  }
+}
+
+UDExSegmentedButton.define();
+
+export default UDExSegmentedButton;

package/src/SegmentedButtonItem.ts

@@ -0,0 +1,50 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import SegmentedButtonItem from "@ui5/webcomponents/dist/SegmentedButtonItem.js";
+
+// Styles
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import SegmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js";
+
+export enum SegmentedButtonItemSize {
+  Small = "Small",
+  Medium = "Medium",
+  Large = "Large",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-segmented-button-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SegmentedButtonItem.js";</code>
+ *
+ * @constructor
+ * @extends SegmentedButtonItem
+ * @public
+ */
+@customElement({
+  tag: "udex-segmented-button-item",
+  renderer: litRender,
+  styles: [SegmentedButtonItem.styles, SegmentedButtonItemCss],
+})
+class UDExSegmentedButtonItem extends SegmentedButtonItem {
+  /**
+   * Defines the size of the button.
+   *
+   * @default "Medium"
+   * @public
+   */
+  @property({ type: SegmentedButtonItemSize, defaultValue: SegmentedButtonItemSize.Medium })
+    size!: `${SegmentedButtonItemSize}`;
+}
+
+UDExSegmentedButtonItem.define();
+
+export default UDExSegmentedButtonItem;