@sapudex/web-components 0.225.0 → 2.0.0

package/src/SecondaryNavigationSubItem.ts

@@ -1,19 +1,24 @@
 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";
 
+type UDExSecondaryNavigationSubItemClickEventDetail = {
+  item: UDExSecondaryNavigationSubItem,
+}
+
 /**
  * @class
  *
@@ -46,11 +51,7 @@ import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigatio
  * @allowPreventDefault
  * @public
  */
-@event("sub-item-click", {
-  detail: {
-    item: { type: HTMLElement },
-  },
-})
+@event("sub-item-click", { bubbles: true })
 
 /**
  * Fires when back item is clicked
@@ -58,9 +59,13 @@ import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigatio
  * @allowPreventDefault
  * @public
  */
-@event("back-item-click")
+@event("back-item-click", { bubbles: true })
 
 class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
+  eventDetails!: {
+    "sub-item-click": UDExSecondaryNavigationSubItemClickEventDetail,
+    "back-item-click": void,
+  };
   /**
    * Defines back item.
    *
@@ -76,30 +81,27 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
    * @default "[]"
    * @public
    */
-  @property({ type: Object, multiple: true })
-    nestedItems!: Array<NavItem>;
+  @property({ type: Object })
+    nestedItems: Array<NavItem> = [];
 
-  @property({ type: String, defaultValue: "-1" })
-    _tabIndex!: string;
+  @property({ type: String })
+    _tabIndex: string = "-1";
 
-  static i18nBundle: any;
-
-  static async onDefine(): Promise<void> {
-    UDExSecondaryNavigationSubItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
 
   onItemClick(): void {
-    this.fireEvent("sub-item-click", {
+    this.fireDecoratorEvent("sub-item-click", {
       item: this,
     });
   }
 
   onBackItemClick(): void {
-    this.fireEvent("back-item-click");
+    this.fireDecoratorEvent("back-item-click");
   }
 
   get hasItems(): boolean {
-    return !!this.nestedItems.length;
+    return !!this.nestedItems?.length;
   }
 
   get isButton(): boolean {
@@ -111,7 +113,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>