@sapudex/web-components 0.226.0 → 2.1.0

package/src/SecondaryNavigationItem.ts

@@ -1,10 +1,9 @@
 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import {
   isLeft,
   isRight,
@@ -17,9 +16,11 @@ import {
   isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
-import parseRelativeUnits, { RelativeValue } from "./utils/parseRelativeUnits.js";
+import type { RelativeValue } from "./utils/parseRelativeUnits.js";
+import parseRelativeUnits from "./utils/parseRelativeUnits.js";
 import UDExSecondaryNavigationSubItem from "./SecondaryNavigationSubItem.js";
-import UDExSecondaryNavigationItemBase, { NavItem } from "./SecondaryNavigationItemBase.js";
+import type { NavItem } from "./SecondaryNavigationItemBase.js";
+import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
 import SecondaryNavigationItemTemplate from "./generated/templates/SecondaryNavigationItemTemplate.lit.js";
@@ -29,6 +30,18 @@ import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationIt
 
 export const menuItemRole: string = "menuitem";
 
+export type UDExSecondaryNavigationItemClickEventDetail = {
+  item: HTMLElement,
+  index: number,
+  originalEvent: PointerEvent | KeyboardEvent
+};
+
+export type UDExSecondaryNavigationItemSubItemClickEventDetail = {
+  item: NavItem,
+  index: number,
+  originalEvent: PointerEvent
+}
+
 /**
  * @class
  *
@@ -61,12 +74,7 @@ export const menuItemRole: string = "menuitem";
  * @allowPreventDefault
  * @public
  */
-@event("nav-item-click", {
-  detail: {
-    item: { type: HTMLElement },
-    index: { type: Integer },
-  },
-})
+@event("nav-item-click", { bubbles: true, cancelable: true })
 
 /**
  * Fires when dropdown item is clicked
@@ -74,14 +82,13 @@ export const menuItemRole: string = "menuitem";
  * @allowPreventDefault
  * @public
  */
-@event("sub-item-click", {
-  detail: {
-    item: { type: Object },
-    index: { type: Integer },
-  },
-})
+@event("sub-item-click", { bubbles: true, cancelable: true })
 
 class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
+  eventDetails!: {
+    "nav-item-click": UDExSecondaryNavigationItemClickEventDetail,
+    "sub-item-click": UDExSecondaryNavigationItemSubItemClickEventDetail,
+  };
   /**
    * Defines an aria label for item
    *
@@ -113,8 +120,8 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
    * @default "[]"
    * @public
    */
-  @property({ type: Object, multiple: true })
-    subItems!: Array<NavItem>;
+  @property({ type: Object })
+    subItems: Array<NavItem> = [];
 
   /**
    * Defines if dropdown is opened.
@@ -130,7 +137,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
    *
    * @private
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     _navItemsLength!: number;
 
   /**
@@ -173,7 +180,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
     this._subTitle = this.subActiveItemTitle || this._subTitle;
   }
 
-  onSubItemClick(e: CustomEvent | KeyboardEvent): void {
+  handleSubItemClick(e: CustomEvent | KeyboardEvent): void {
     const { originalEvent } = e.detail;
     const { index } = e.target as UDExSecondaryNavigationSubItem;
     const clickedItem = this._processedItems[index];
@@ -206,7 +213,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   handleItemLinkKeyDown(e: KeyboardEvent): void {
-    if (isEnter(e) || isSpace(e)) {
+    if (isSpace(e)) {
       this.fireNavItemClickEvent(e);
     }
   }
@@ -296,7 +303,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   handleRightArrow(e: KeyboardEvent): void {
     const { hasItems, isBack, index } = e.target as UDExSecondaryNavigationSubItem;
     if (hasItems && !isBack) {
-      this.onSubItemClick(e);
+      this.handleSubItemClick(e);
       this.unsetTabIndex(this.domNavItems[index]);
     }
   }
@@ -309,7 +316,7 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
       return;
     }
 
-    this.onSubItemClick(e);
+    this.handleSubItemClick(e);
 
     if (hasItems) {
       this.onShouldFocusFirstSubItem();
@@ -325,19 +332,19 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
   }
 
   fireNavItemClickEvent(e: PointerEvent | KeyboardEvent): void {
-    this.fireEvent("nav-item-click", {
+    this.fireDecoratorEvent("nav-item-click", {
       item: this,
       index: this.index,
       originalEvent: e,
-    }, true);
+    });
   }
 
   fireSubItemClickEvent(e: PointerEvent, clickedItem: NavItem, index: number): void {
-    this.fireEvent("sub-item-click", {
+    this.fireDecoratorEvent("sub-item-click", {
       item: clickedItem,
       index,
       originalEvent: e,
-    }, true);
+    });
   }
 
   setDropdownHistory(): void {

package/src/SecondaryNavigationItemBase.ts

@@ -3,15 +3,15 @@ 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";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { Target } from "./types/common.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { UDExTarget } from "./types/common.js";
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 export type NavItem = {
   path?: string;
   mobileLinkTitle: string;
-  target?: Target;
+  target?: UDExTarget;
   title: string;
   active?: boolean;
   isBack?: boolean;
@@ -64,8 +64,8 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
    *
    * @public
    */
-  @property({ type: Target, defaultValue: Target._self })
-    target!: Target;
+  @property()
+    target: UDExTarget = UDExTarget._self;
 
   /**
    * Defines subTitle for the item
@@ -88,7 +88,7 @@ class UDExSecondaryNavigationItemBase extends UI5Element {
    *
    * @public
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     index!: number;
 
   @property({ type: Boolean })

package/src/SecondaryNavigationSubItem.hbs

@@ -9,7 +9,8 @@
         class="udex-secondary-navigation__dropdown-item">
         <ui5-icon
             class="udex-secondary-navigation__dropdown-icon udex-secondary-navigation__dropdown-icon_back"
-            name="slim-arrow-left">
+            name="slim-arrow-left"
+            mode="Decorative">
         </ui5-icon>
         {{itemLabel}}
     </button>
@@ -29,7 +30,8 @@
             {{#if hasItems}}
                 <ui5-icon
                     class="udex-secondary-navigation__dropdown-icon"
-                    name="slim-arrow-right">
+                    name="slim-arrow-right"
+                    mode="Decorative">
                 </ui5-icon>
             {{/if}}
         </button>

package/src/SecondaryNavigationSubItem.ts

@@ -1,19 +1,29 @@
 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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.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 type { NavItem } from "./SecondaryNavigationItemBase.js";
+import UDExSecondaryNavigationItemBase from "./SecondaryNavigationItemBase.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { BACK_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
-
+import "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import SecondaryNavigationSubItemTemplate from "./generated/templates/SecondaryNavigationSubItemTemplate.lit.js";
 
 // Styles
 import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigationSubItem.css.js";
 
+export type UDExSecondaryNavigationSubItemClickEventDetail = {
+  item: UDExSecondaryNavigationSubItem,
+  originalEvent: PointerEvent
+}
+
+export type UDExSecondaryNavigationSubItemBackClickEventDetail = {
+  originalEvent: PointerEvent
+}
+
 /**
  * @class
  *
@@ -46,11 +56,7 @@ import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigatio
  * @allowPreventDefault
  * @public
  */
-@event("sub-item-click", {
-  detail: {
-    item: { type: HTMLElement },
-  },
-})
+@event("sub-item-click", { bubbles: true, cancelable: true })
 
 /**
  * Fires when back item is clicked
@@ -58,9 +64,13 @@ import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigatio
  * @allowPreventDefault
  * @public
  */
-@event("back-item-click")
+@event("back-item-click", { bubbles: true, cancelable: true })
 
 class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
+  eventDetails!: {
+    "sub-item-click": UDExSecondaryNavigationSubItemClickEventDetail,
+    "back-item-click": UDExSecondaryNavigationSubItemBackClickEventDetail,
+  };
   /**
    * Defines back item.
    *
@@ -76,31 +86,28 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
    * @default "[]"
    * @public
    */
-  @property({ type: Object, multiple: true })
-    nestedItems!: Array<NavItem>;
-
-  @property({ type: String, defaultValue: "-1" })
-    _tabIndex!: string;
+  @property({ type: Object })
+    nestedItems: Array<NavItem> = [];
 
-  static i18nBundle: any;
+  @property({ type: String })
+    _tabIndex: string = "-1";
 
-  static async onDefine(): Promise<void> {
-    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
 
   onItemClick(e: PointerEvent): void {
-    this.fireEvent("sub-item-click", {
+    this.fireDecoratorEvent("sub-item-click", {
       item: this,
       originalEvent: e,
-    }, true);
+    });
   }
 
   onBackItemClick(e: PointerEvent): void {
-    this.fireEvent("back-item-click", { originalEvent: e }, true);
+    this.fireDecoratorEvent("back-item-click", { originalEvent: e });
   }
 
   get hasItems(): boolean {
-    return !!this.nestedItems.length;
+    return !!this.nestedItems?.length;
   }
 
   get isButton(): boolean {
@@ -112,7 +119,7 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
   }
 
   get backButtonAriaLabel(): string {
-    const label = UDExSecondaryNavigationSubItem.i18nBundle.getText(BACK_BUTTON_LABEL) as string;
+    const label = UDExSecondaryNavigationSubItem.i18nBundle.getText(BACK_BUTTON_LABEL);
     return `${label} ${this.itemLabel}`;
   }
 }

package/src/SegmentedButton.ts

@@ -1,30 +1,15 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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 SegmentedButton from "@ui5/webcomponents/dist/SegmentedButton.js";
+import type 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 SegmentedButtonSelectionMode from "@ui5/webcomponents/dist/types/SegmentedButtonSelectionMode.js";
 import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
 import UDExSegmentedButtonItem from "./SegmentedButtonItem.js";
-import UDExButtonSize from "./types/ButtonSize.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",
-}
+import { UDExButtonSize } from "./types/Button.js";
 
 /**
  * @class
@@ -45,7 +30,7 @@ export enum SegmentedButtonSelectionMode {
  */
 @customElement({
   tag: "udex-segmented-button",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SegmentedButton.styles, SegmentedButtonCss],
   dependencies: [UDExSegmentedButtonItem],
 })
@@ -56,8 +41,8 @@ class UDExSegmentedButton extends SegmentedButton {
    * @default "Medium"
    * @public
    */
-  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
-    size!: `${UDExButtonSize}`;
+  @property()
+    size: `${UDExButtonSize}` = UDExButtonSize.Medium;
 
   onBeforeRendering() {
     const items = this.getSlottedNodes<UDExSegmentedButtonItem>("items");
@@ -73,19 +58,7 @@ class UDExSegmentedButton extends SegmentedButton {
     this.style.setProperty(getScopedVarName("--udex-segmented-button-items-count"), `${items.length}`);
   }
 
-  _onmousedown(e: Event) {
-    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: Event | KeyboardEvent) {
-    // Method to be update with @ui5/webcomponents v.2.0 , due to ToggleButton dependency change (pressed -> selected)
+  _selectItem(e: MouseEvent | KeyboardEvent) {
     const target = e.target as SegmentedButtonItem;
     const isTargetSegmentedButtonItem = target.hasAttribute("udex-segmented-button-item");
 
@@ -93,18 +66,17 @@ class UDExSegmentedButton extends SegmentedButton {
       return;
     }
 
-    switch (this.mode) {
-    case SegmentedButtonMode.MultiSelect:
+    switch (this.selectionMode) {
+    case SegmentedButtonSelectionMode.Multiple:
       if (e instanceof KeyboardEvent) {
-        target.pressed = !target.pressed;
+        target.selected = !target.selected;
       }
       break;
     default:
       this._applySingleSelection(target);
     }
 
-    this.fireEvent<SegmentedButtonSelectionChangeEventDetail>("selection-change", {
-      selectedItem: target,
+    this.fireDecoratorEvent("selection-change", {
       selectedItems: this.selectedItems,
     });
 

package/src/SegmentedButtonItem.ts

@@ -1,11 +1,11 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.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";
-import UDExButtonSize from "./types/ButtonSize.js";
+import { UDExButtonSize } from "./types/Button.js";
 
 /**
  * @class
@@ -26,7 +26,7 @@ import UDExButtonSize from "./types/ButtonSize.js";
  */
 @customElement({
   tag: "udex-segmented-button-item",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SegmentedButtonItem.styles, SegmentedButtonItemCss],
 })
 class UDExSegmentedButtonItem extends SegmentedButtonItem {
@@ -36,8 +36,26 @@ class UDExSegmentedButtonItem extends SegmentedButtonItem {
    * @default "Medium"
    * @public
    */
-  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
-    size!: `${UDExButtonSize}`;
+  @property()
+    size: `${UDExButtonSize}` = UDExButtonSize.Medium;
+
+  /**
+   * Defines if the segmented button has an icon.
+   *
+   * @private
+   */
+  @property()
+    hasIcon: boolean = false;
+
+  constructor() {
+    super();
+  }
+
+  onBeforeRendering(): void {
+    this.forcedTabIndex = "0";
+    this.iconOnly = !!this.icon && !this.text.length;
+    this.hasIcon = !!this.icon;
+  }
 }
 
 UDExSegmentedButtonItem.define();

package/src/SelectBox.hbs

@@ -43,7 +43,7 @@
                         ?readonly="{{readonly}}"
                         ?disabled="{{disabled}}"
                         tooltip-placement="{{tooltipPlacement}}"
-                        @ui5-tag-click="{{handleTagPress}}"
+                        @ui5-tag-click="{{handleTagClick}}"
                         @ui5-show-more-tags="{{getHandlerShowMoreItems}}"
                         @ui5-tag-keydown="{{handleKeyDownTag}}"
                         ?expanded="{{tokenizerExpanded}}">
@@ -101,14 +101,15 @@
         @ui5-before-open="{{handleDropdownBeforeOpen}}"
         @ui5-after-close="{{handleDropdownAfterClose}}"
         @search-keydown="{{handleKeyDownSearch}}"
-        horizontal-align="Left"
-        placement-type="Bottom">
+        horizontal-align="Start"
+        placement="Bottom">
         {{#if _showTagsDropdownContent}}
             <div class="udex-truncatable-tag-content">
                 <span class="udex-truncatable-tag-content__label">{{truncatableTagLabel}}</span>
                 <ui5-icon
                     @click="{{handleRemoveTruncatableTag}}"
                     class="udex-truncatable-tag-content__icon"
+                    mode="Decorative"
                     name="decline">
                 </ui5-icon>
             </div>