@sapudex/web-components 0.224.0 → 2.0.0

package/src/Upload.ts

@@ -2,20 +2,22 @@ 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, slot } from "@ui5/webcomponents-base/dist/decorators.js";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { slot } from "@ui5/webcomponents-base/dist/decorators.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import FileUploader, { FileUploaderChangeEventDetail } from "@ui5/webcomponents/dist/FileUploader.js";
-import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import FileUploader from "@ui5/webcomponents/dist/FileUploader.js";
+import type { FileUploaderChangeEventDetail } from "@ui5/webcomponents/dist/FileUploader.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { UPLOAD_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
 import UDExButton from "./Button.js";
-import UDExButtonSize from "./types/ButtonSize.js";
+import { UDExButtonSize } from "./types/Button.js";
 import UDExList from "./List.js";
 import UDExUploadItem from "./UploadItem.js";
 import UploadTemplate from "./generated/templates/UploadTemplate.lit.js";
-import FileData from "./types/FileData.js";
+import type FileData from "./types/FileData.js";
 
 // Styles
 import UploadCss from "./generated/themes/Upload.css.js";
@@ -23,6 +25,18 @@ import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
 
+type UDExUploadBaseEventDetail = {
+  files: Array<FileData>
+}
+
+type UDExUploadFileDeleteEventDetail = {
+  file: UDExUploadItem,
+}
+
+type UDExUploadFileChangeEventDetail = {
+  files: Array<UDExUploadItem>
+}
+
 /**
  * @class
  *
@@ -53,67 +67,44 @@ const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
  *
  * @public
  */
-@event("file-size-exceed", {
-  detail:
-    {
-      files:
-        { type: Array },
-    },
-})
+@event("file-size-exceed", { bubbles: true })
 
 /**
  * Triggered when the user deletes the uploaded item.
  *
  * @public
  */
-@event("file-delete", {
-  detail:
-    {
-      file:
-        { type: UDExUploadItem },
-    },
-})
+@event("file-delete", { bubbles: true })
 
 /**
  * Triggered when the user uploads the item.
  *
  * @public
  */
-@event("file-change", {
-  detail:
-    {
-      files:
-        { type: Array },
-    },
-})
+@event("file-change", { bubbles: true })
 
 /**
  * Triggered when the user attempts to upload a duplicate file.
  *
  * @public
  */
-@event("file-duplicate", {
-  detail:
-    {
-      files:
-        { type: Array },
-    },
-})
+@event("file-duplicate", { bubbles: true })
 
 /**
  * Triggered when the user attempts to upload a file.
  *
  * @public
  */
-@event("change", {
-  detail:
-    {
-      files:
-        { type: FileList },
-    },
-})
+@event("change", { bubbles: true })
 
 class UDExUpload extends UI5Element {
+  eventDetails!: {
+    "file-size-exceed": UDExUploadBaseEventDetail,
+    "file-delete": UDExUploadFileDeleteEventDetail,
+    "file-change": UDExUploadFileChangeEventDetail,
+    "file-duplicate": UDExUploadBaseEventDetail,
+    "change": FileUploaderChangeEventDetail
+  };
   /**
    * Defines the title of the upload.
    *
@@ -160,7 +151,7 @@ class UDExUpload extends UI5Element {
    * @default undefined
    * @public
    */
-  @property({ type: Number, validator: Integer })
+  @property({ type: Number })
     maxFileSize!: number;
 
   /**
@@ -201,17 +192,15 @@ class UDExUpload extends UI5Element {
    * @default "Large"
    * @private
    */
-  @property({ type: String, defaultValue: UDExButtonSize.Large })
-    _buttonSize!: `${UDExButtonSize}`;
+  @property({ type: String })
+    _buttonSize: `${UDExButtonSize}` = UDExButtonSize.Large;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
+
   _uploadedFiles: FileData[] = [];
   _handleResizeBound: ResizeObserverCallback;
 
-  static async onDefine() {
-    UDExUpload.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   constructor() {
     super();
     this._handleResizeBound = this._handleResize.bind(this);
@@ -247,7 +236,7 @@ class UDExUpload extends UI5Element {
     const duplicateFiles = this._getDuplicateFiles(files!);
     if (duplicateFiles.length) {
       e.stopPropagation();
-      this.fireEvent("file-duplicate", {
+      this.fireDecoratorEvent("file-duplicate", {
         files: duplicateFiles,
       });
       this.fileUploader.value = "";
@@ -264,7 +253,7 @@ class UDExUpload extends UI5Element {
     const exceededFilesData = this.maxFileSize ? this._getExceededFiles(files!) : [];
     if (exceededFilesData.length) {
       e.stopPropagation();
-      this.fireEvent("file-size-exceed", {
+      this.fireDecoratorEvent("file-size-exceed", {
         files: exceededFilesData,
       });
       return;
@@ -275,7 +264,7 @@ class UDExUpload extends UI5Element {
 
   handleSelectionChange(e: CustomEvent) {
     const uploadedFiles = e.detail.listItems as UDExUploadItem[];
-    this.fireEvent("file-change", { files: uploadedFiles });
+    this.fireDecoratorEvent("file-change", { files: uploadedFiles });
     this.fileUploader.value = "";
   }
 
@@ -285,7 +274,7 @@ class UDExUpload extends UI5Element {
 
   handleRemoveFile(e: CustomEvent) {
     const removedFile = e.target as UDExUploadItem;
-    this.fireEvent("file-delete", { file: removedFile });
+    this.fireDecoratorEvent("file-delete", { file: removedFile });
     this._uploadedFiles = this._uploadedFiles.filter(file => file.fileName !== removedFile.fileName);
     this.fileUploader.value = "";
   }

package/src/UploadItem.ts

@@ -1,13 +1,14 @@
 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.js";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   REMOVE_FILE_TEXT,
   TERMINATED_FILE_STATUS_TEXT, UPLOADING_FILE_STATUS_TEXT,
@@ -16,7 +17,7 @@ import UDExListItem from "./ListItem.js";
 import UDExProgressBar from "./ProgressBar.js";
 import UDExLink from "./Link.js";
 import UDExButton from "./Button.js";
-import UDExButtonSize from "./types/ButtonSize.js";
+import { UDExButtonSize } from "./types/Button.js";
 import UploadItemTemplate from "./generated/templates/UploadItemTemplate.lit.js";
 
 // Styles
@@ -51,7 +52,17 @@ const BreakpointSizeM: number = 1279;
   dependencies: [UDExLink, UDExListItem, UDExProgressBar, UDExButton],
 })
 
+/**
+ * Triggered when the upload item is deleted.
+ *
+ * @public
+ */
+@event("request-delete", { bubbles: true })
+
 class UDExUploadItem extends UDExListItem {
+  eventDetails!: {
+    "request-delete": void
+  } & UDExListItem["eventDetails"];
   /**
    * Defines the name of the uploaded file.
    *
@@ -76,17 +87,17 @@ class UDExUploadItem extends UDExListItem {
    * @default 0
    * @public
    */
-  @property({ type: Number, validator: Integer })
+  @property({ type: Number })
     uploadPercentage!: number;
 
   /**
    * Defines the percentage of the upload.
    *
-   * @default 0
+   * @default "Uploaded"
    * @public
    */
-  @property({ type: FileUploadState, defaultValue: FileUploadState.Uploaded })
-    uploadState!: `${FileUploadState}`;
+  @property()
+    uploadState: `${FileUploadState}` = FileUploadState.Uploaded;
 
   /**
    * Slot for information about the uploaded file.
@@ -102,7 +113,7 @@ class UDExUploadItem extends UDExListItem {
    * @default "Large"
    * @private
    */
-  @property({ type: UDExButtonSize })
+  @property()
     _buttonSize!: `${UDExButtonSize}`;
 
   /**
@@ -123,12 +134,10 @@ class UDExUploadItem extends UDExListItem {
   @property({ type: Boolean })
     _breakpointL!: boolean;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
-  _handleResizeBound: ResizeObserverCallback;
 
-  static async onDefine() {
-    UDExUploadItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
+  _handleResizeBound: ResizeObserverCallback;
 
   constructor() {
     super();
@@ -137,7 +146,7 @@ class UDExUploadItem extends UDExListItem {
 
   onEnterDOM(): void {
     ResizeHandler.register(this, this._handleResizeBound);
-    this.fireEvent("item-press", {
+    this.fireDecoratorEvent("item-press", {
       selected: false,
       item: this,
     });
@@ -156,13 +165,13 @@ class UDExUploadItem extends UDExListItem {
 
   handleButtonClick(e: Event) {
     e.stopImmediatePropagation();
-    this.fireEvent("request-delete");
+    this.fireDecoratorEvent("request-delete");
   }
 
   handleButtonKeydown(e: KeyboardEvent) {
     if (isEnter(e) || isSpace(e)) {
       e.stopImmediatePropagation();
-      this.fireEvent("request-delete");
+      this.fireDecoratorEvent("request-delete");
     }
   }
 
@@ -189,7 +198,7 @@ class UDExUploadItem extends UDExListItem {
       return ValueState.Information;
     }
 
-    return ValueState.Error;
+    return ValueState.Negative;
   }
 
   get uploadStatus(): string {

package/src/Wizard.ts

@@ -1,29 +1,45 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Wizard from "@ui5/webcomponents-fiori/dist/Wizard.js";
+import UI5Wizard from "@ui5/webcomponents-fiori/dist/Wizard.js";
 import WizardContentLayout from "@ui5/webcomponents-fiori/dist/types/WizardContentLayout.js";
-import wizardCss from "@ui5/webcomponents-fiori/dist/generated/themes/Wizard.css.js";
-import UDExWizardTab from "./WizardTab.js";
-import UDExWizardStep from "./WizardStep.js";
-
-import WizardTemplate from "./generated/templates/WizardTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import WizardTemplate from "./WizardTemplate.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type UDExWizardTab from "./WizardTab.js";
+import type UDExWizardStep from "./WizardStep.js";
 
 // Styles
 import WizardCss from "./generated/themes/Wizard.css.js";
+import { RESPONSIVE_BREAKPOINTS, UDExWindowSize } from "./types/common.js";
+
+const EXPANDED_STEP = "data-ui5-wizard-expanded-tab";
 
-type ResponsiveBreakpoints = {
-  [key: string]: string
+type AccessibilityInformation = {
+  ariaSetsize: number,
+  ariaPosinset: number,
+  ariaLabel: string,
 }
 
-const EXPANDED_STEP = "data-ui5-wizard-expanded-tab";
-const RESPONSIVE_BREAKPOINTS: ResponsiveBreakpoints = {
-  "360": "S",
-  "640": "M",
-  "980": "L",
-  "1300": "XL",
-};
+type StepInfo = {
+  icon?: string,
+  titleText?: string,
+  subtitleText?: string,
+  number: number,
+  selected: boolean,
+  disabled: boolean,
+  completed: boolean,
+  hideSeparator: boolean,
+  activeSeparator: boolean,
+  branchingSeparator: boolean,
+  pos: number,
+  accInfo: AccessibilityInformation,
+  refStepId: string,
+  styles: {
+    zIndex: number
+  },
+}
 
 /**
  * @class
@@ -40,19 +56,18 @@ const RESPONSIVE_BREAKPOINTS: ResponsiveBreakpoints = {
  *
  * @constructor
  * @author SAP SE
- * @extends Wizard
+ * @extends UI5Wizard
  * @tagname udex-wizard
  * @public
  */
 @customElement({
   tag: "udex-wizard",
-  renderer: litRender,
+  renderer: jsxRenderer,
   template: WizardTemplate,
-  styles: [wizardCss, WizardCss],
-  dependencies: [...Wizard.dependencies, UDExWizardTab, UDExWizardStep],
+  styles: [UI5Wizard.styles, WizardCss],
 })
 
-class UDExWizard extends Wizard {
+class UDExWizard extends UI5Wizard {
   @slot({
     "default": true,
     type: HTMLElement,
@@ -70,106 +85,128 @@ class UDExWizard extends Wizard {
   @property({ type: Boolean })
     indeterminate!: boolean;
 
+  /**
+   * Defines the current breakpoint.
+   *
+   * @default "XL"
+   * @private
+   */
+  @property()
+    _breakpoint: `${UDExWindowSize}` = UDExWindowSize.XL;
+
+  _handleResizeBound: ResizeObserverCallback;
   constructor() {
     super();
+    this._handleResizeBound = this._handleResize.bind(this);
   }
 
+  _calcCurrentBreakpoint = () => {
+    const breakpointDimensions = Object.keys(RESPONSIVE_BREAKPOINTS).reverse();
+    const breakpoint = breakpointDimensions.find(size => Number(size) < this.offsetWidth);
+    this._breakpoint = breakpoint ? RESPONSIVE_BREAKPOINTS[breakpoint] : RESPONSIVE_BREAKPOINTS["360"];
+  };
+
   onEnterDOM() {
     this.contentLayout = WizardContentLayout.SingleStep;
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
 
-    this._calcCurrentBreakpoint = () => {
-      const breakpointDimensions = Object.keys(RESPONSIVE_BREAKPOINTS).reverse();
-      const breakpoint = breakpointDimensions.find(size => Number(size) < this.width!);
-      this._breakpoint = breakpoint ? RESPONSIVE_BREAKPOINTS[breakpoint] : RESPONSIVE_BREAKPOINTS["360"];
-    };
-
-    // overriding ui5-wizard behavior for small screens - tabs are not clickable, unless expanded
-    this._adjustHeaderOverflow = () => {
-      const tabs = this.stepsInHeaderDOM;
-      tabs.forEach(step => {
-        step.setAttribute(EXPANDED_STEP, "true");
-      });
-    };
-
-    this.switchSelectionFromOldToNewStep = (
-      selectedStep: UDExWizardStep,
-      stepToSelect: UDExWizardStep,
-      stepToSelectIndex,
-      changeWithClick,
-    ) => {
-      if (selectedStep && stepToSelect) {
-        // keep the selection if next step is disabled
-        if (!stepToSelect.disabled) {
-          selectedStep.selected = false;
-          selectedStep.completed = true;
-          stepToSelect.selected = true;
-        }
-        this.fireEvent("step-change", {
-          step: stepToSelect,
-          previousStep: selectedStep,
-          changeWithClick,
-        });
-        this.selectedStepIndex = stepToSelectIndex;
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering(): void {
+    this._calcCurrentBreakpoint();
+  }
+
+  _adjustHeaderOverflow = () => {
+    const tabs = this.stepsInHeaderDOM;
+    tabs.forEach(step => {
+      step.setAttribute(EXPANDED_STEP, "true");
+    });
+  };
+
+  switchSelectionFromOldToNewStep = (
+    selectedStep: UDExWizardStep,
+    stepToSelect: UDExWizardStep,
+    stepToSelectIndex: number,
+  ) => {
+    if (selectedStep && stepToSelect) {
+      if (!stepToSelect.disabled) {
+        selectedStep.selected = false;
+        selectedStep.completed = true;
+        stepToSelect.selected = true;
       }
-    };
-
-    this.getLastEnabledStepIndex = () => {
-      let lastEnabledStepIndex = 0;
-      this.slottedSteps.forEach((step, idx) => {
-        if (step.selected || step.completed) {
-          lastEnabledStepIndex = idx;
-        }
-      });
-      return lastEnabledStepIndex;
-    };
-
-    this.getStepsInfo = () => {
-      const lastEnabledStepIndex = this.getLastEnabledStepIndex();
-      const stepsCount = this.stepsCount;
-      const selectedStepIndex = this.getSelectedStepIndex();
-      let initialZIndex = this.steps.length + 10;
-      let accInfo;
-      this._adjustHeaderOverflow();
-      return this.steps.map((step, idx) => {
-        const pos = idx + 1;
-        const hideSeparator = idx === stepsCount - 1 && !this.indeterminate;
-        const stepStateText = step.disabled
-          ? this.inactiveStepText
-          : this.activeStepText;
-        const ariaLabel = (
-          step.titleText
-            ? `${pos} ${step.titleText} ${stepStateText}`
-            : `${this.navStepDefaultHeading} ${pos} ${stepStateText}`
-        ).trim();
-        const isAfterCurrent = idx > selectedStepIndex;
-        accInfo = {
-          ariaSetsize: stepsCount,
-          ariaPosinset: pos,
-          ariaLabel: this.getStepAriaLabelText(step, ariaLabel),
-        };
-        const stepInfo = {
-          icon: step.icon,
-          titleText: step.titleText,
-          subtitleText: step.subtitleText,
-          number: pos,
-          selected: step.selected,
-          disabled: !step.selected && !step.completed,
-          completed: step.completed,
-          hideSeparator,
-          activeSeparator: idx < lastEnabledStepIndex,
-          branchingSeparator: step.branching,
-          pos,
-          accInfo,
-          refStepId: step._id,
-          tabIndex: this.selectedStepIndex === idx ? "0" : "-1",
-          breakpoint: this._breakpoint,
-          styles: {
-            zIndex: isAfterCurrent ? --initialZIndex : 1,
-          },
-        };
-        return stepInfo;
+
+      this.fireDecoratorEvent("step-change", {
+        step: stepToSelect,
+        previousStep: selectedStep,
+        withScroll: false,
       });
-    };
+      this.selectedStepIndex = stepToSelectIndex;
+    }
+  };
+
+  getLastEnabledStepIndex = () => {
+    let lastEnabledStepIndex = 0;
+    this.slottedSteps.forEach((step, idx) => {
+      if (step.selected || step.completed) {
+        lastEnabledStepIndex = idx;
+      }
+    });
+    return lastEnabledStepIndex;
+  };
+
+  get stepsInfo(): StepInfo[] {
+    const lastEnabledStepIndex = this.getLastEnabledStepIndex();
+    const stepsCount = this.stepsCount;
+    const selectedStepIndex = this.getSelectedStepIndex();
+    let initialZIndex = this.steps.length + 10;
+    let accInfo;
+
+    this._adjustHeaderOverflow();
+    return this.steps.map((step, idx) => {
+      const pos = idx + 1;
+      const hideSeparator = idx === stepsCount - 1 && !this.indeterminate;
+      const stepStateText = step.disabled
+        ? this.inactiveStepText
+        : this.activeStepText;
+      const ariaLabel = (
+        step.titleText
+          ? `${pos} ${step.titleText} ${stepStateText}`
+          : `${this.navStepDefaultHeading} ${pos} ${stepStateText}`
+      ).trim();
+      const isAfterCurrent = idx > selectedStepIndex;
+      accInfo = {
+        "ariaSetsize": stepsCount,
+        "ariaPosinset": pos,
+        "ariaLabel": this.getStepAriaLabelText(step, ariaLabel),
+      };
+
+      const stepInfo: StepInfo = {
+        icon: step.icon,
+        titleText: step.titleText,
+        subtitleText: step.subtitleText,
+        number: pos,
+        selected: step.selected,
+        disabled: !step.selected && !step.completed,
+        completed: step.completed,
+        hideSeparator,
+        activeSeparator: idx < lastEnabledStepIndex,
+        branchingSeparator: step.branching,
+        pos,
+        accInfo,
+        refStepId: step._id,
+        styles: {
+          zIndex: isAfterCurrent ? --initialZIndex : 1,
+        },
+      };
+      return stepInfo;
+    });
+  }
+
+  private _handleResize() {
+    this._calcCurrentBreakpoint();
   }
 
   get slottedSteps(): UDExWizardStep[] {
@@ -177,7 +214,7 @@ class UDExWizard extends Wizard {
   }
 
   get stepsInHeaderDOM(): UDExWizardTab[] {
-    return Array.from(this.shadowRoot!.querySelectorAll("[udex-wizard-tab]"));
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExWizardTab>("[udex-wizard-tab]"));
   }
 
   get _steps(): UDExWizardStep[] {

package/src/WizardStep.ts

@@ -1,6 +1,6 @@
 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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import WizardStep from "@ui5/webcomponents-fiori/dist/WizardStep.js";
 
 // Styles
@@ -25,7 +25,7 @@ import wizardStepCss from "@ui5/webcomponents-fiori/dist/generated/themes/Wizard
  */
 @customElement({
   tag: "udex-wizard-step",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: wizardStepCss,
 })
 class UDExWizardStep extends WizardStep {