@sapudex/web-components 0.199.3 → 0.225.0

package/src/Table.ts

@@ -40,7 +40,7 @@ type KeyBoardItem = {
  * For the <code>udex-table</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Table.js";</code>
+ * <code>import "@sapudex/web-components/dist/Table.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -163,6 +163,13 @@ class UDExTable extends UI5Element {
   @slot()
     footnotes!: Array<HTMLElement>;
 
+  /**
+   * Defines the rows of the table.
+   * @public
+   */
+  @property({ type: String })
+    customColumns!: string;
+
   /**
    * Defines the table has vertical scrolling.
    *
@@ -175,7 +182,7 @@ class UDExTable extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExTable.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExTable.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onAfterRendering() {
@@ -382,7 +389,7 @@ class UDExTable extends UI5Element {
 
     return {
       table: {
-        "grid-template-columns": this._gridTemplateColumns,
+        "grid-template-columns": this.customColumns || this._gridTemplateColumns,
         "max-height": this._tableMaxHeight,
         ...headerStyleMap,
       },

package/src/TableCell.ts

@@ -18,7 +18,7 @@ import TableCellCss from "./generated/themes/TableCell.css.js";
  * For the <code>udex-table-cell</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableCell.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableCell.js";</code>
  *
  * @constructor
  * @extends UDExTableCellBase

package/src/TableGroupRow.ts

@@ -24,7 +24,7 @@ import TableGroupRowCss from "./generated/themes/TableGroupRow.css.js";
  * For the <code>udex-table-group-row</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableGroupRow.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableGroupRow.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/TableHeaderCell.ts

@@ -18,7 +18,7 @@ import TableHeaderCellCss from "./generated/themes/TableHeaderCell.css.js";
  * For the <code>udex-table-header-cell</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableHeaderCell.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableHeaderCell.js";</code>
  *
  * @constructor
  * @extends UDExTableCellBase

package/src/TableHeaderRow.ts

@@ -14,7 +14,7 @@ import TableHeaderRowTemplate from "./generated/templates/TableHeaderRowTemplate
  * For the <code>udex-table-header-row</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableHeaderRow.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableHeaderRow.js";</code>
  *
  * @constructor
  * @extends UDExTableRowBase

package/src/TableRow.ts

@@ -15,7 +15,7 @@ import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
  * For the <code>udex-table-row</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TableRow.js";</code>
+ * <code>import "@sapudex/web-components/dist/TableRow.js";</code>
  *
  * @constructor
  * @extends UDExTableRowBase

package/src/Tag.ts

@@ -4,6 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
+import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 
@@ -36,7 +37,7 @@ export enum TagSize {
  * For the <code>udex-tag</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Tag.js";</code>
+ * <code>import "@sapudex/web-components/dist/Tag.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -200,6 +201,13 @@ class UDExTag extends UI5Element {
   @property({ type: Boolean })
     nonSelectable!: boolean;
 
+  _handleResizeBound: ResizeObserverCallback;
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
   onBeforeRendering(): void {
     this.toBeDeleted = false;
   }
@@ -211,6 +219,11 @@ class UDExTag extends UI5Element {
     if (this.accessibleRole !== "button") {
       this.shadowRoot?.firstElementChild?.removeAttribute("aria-pressed");
     }
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
   }
 
   setSelected(): void {
@@ -235,6 +248,14 @@ class UDExTag extends UI5Element {
     }
   }
 
+  _handleResize() {
+    if (this.isTruncatable) {
+      this.title = this.text;
+    } else {
+      this.removeAttribute("title");
+    }
+  }
+
   _focusin(): void {
     this.focused = true;
   }

package/src/TagGroup.ts

@@ -34,7 +34,7 @@ export enum PlacementType {
  * For the <code>udex-tag-group</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/TagGroup.js";</code>
+ * <code>import "@sapudex/web-components/dist/TagGroup.js";</code>
  *
  * @constructor
  * @extends UI5Element

package/src/TextArea.ts

@@ -233,7 +233,7 @@ class UDExTextArea extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExTextArea.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExTextArea.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onBeforeRendering() {

package/src/TextField.hbs

@@ -17,8 +17,9 @@
          @focus="{{handleFocus}}"
          @blur="{{handleBlur}}"
          @click="{{handleClick}}"
-         @keydown="{{handleKeyDown}}"
+         @keydown="{{handleKeydown}}"
          maxlength="{{maxlength}}"
+         autocomplete="{{autocomplete}}"
          ?disabled="{{disabled}}"
          ?readonly="{{isInputReadonly}}"
          ?required="{{required}}"
@@ -30,6 +31,7 @@
          aria-haspopup="{{accInfo.ariaHasPopup}}"
          aria-label="{{accInfo.ariaLabel}}"
          aria-labelledby="{{accInfo.ariaLabelledBy}}"
+         role="{{inputRole}}"
          part="textfield-input"
          min="{{min}}"
          max="{{max}}"
@@ -39,7 +41,7 @@
       {{#if icon}}
         <udex-control-button
           accessible-name="{{accessibleIconName}}"
-          tooltip={{showButtonTooltip}}
+          tooltip="{{showButtonTooltip}}"
           ?active="{{active}}"
           ?disabled="{{disabled}}"
           ?readonly="{{readonly}}"

package/src/TextField.ts

@@ -50,12 +50,6 @@ type AccInfo = {
   dependencies: [UDExControlButton, Icon, UDExStatusMessage],
 })
 
-/**
-   * Fired event when the user clicks the trigger.
-   *
-   * @public
-   */
-@event("click-trigger")
 /**
    * Fired when the value of the component changes at each keystroke.
    *
@@ -234,6 +228,14 @@ class UDExTextField extends UI5Element {
   @property({ type: String, noAttribute: true, defaultValue: "" })
     labelActiveClass!: string;
 
+  /**
+   * Defines the behaviour of autocomplete.
+   * @default "off"
+   * @public
+   */
+  @property({ type: String, defaultValue: "off" })
+    autocomplete!: string;
+
   /**
    * Defines the inner stored value of the readonly attribute of the input.
    *
@@ -314,7 +316,7 @@ class UDExTextField extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExTextField.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExTextField.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get valueStateTypeMappings(): Record<string, string> {
@@ -358,12 +360,25 @@ class UDExTextField extends UI5Element {
     return {
       "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
       "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
-      "ariaLabelledBy": this.accessibleNameRef,
+      "ariaLabelledBy": this.accessibleNameRef || undefined,
       "ariaLabel": this.accessibleName || undefined,
       "ariaHasPopup": this._ariaHasPopup || undefined,
     };
   }
 
+  get inputRole(): string | undefined {
+    return this.isAutoCompleteDisabled ? "presentation" : undefined;
+  }
+
+  get isAutoCompleteDisabled(): boolean {
+    return this.autocomplete === "off" || this.autocomplete === "new-password";
+  }
+
+  handleKeydown(e: KeyboardEvent): void {
+    e.stopPropagation();
+    this.fireEvent<KeyboardEvent>("keydown", e);
+  }
+
   handleChange = (): void => {
     this.fireEvent("change");
   };
@@ -396,11 +411,6 @@ class UDExTextField extends UI5Element {
     this._isTouched = false;
   };
 
-  handleKeyDown = (keyboardEvent: KeyboardEvent): void => {
-    keyboardEvent.stopPropagation();
-    this.fireEvent("click-trigger", keyboardEvent);
-  };
-
   handleIconClick(): void {
     this.fireEvent("click-icon");
   }

package/src/Tile.hbs

@@ -1,19 +1,21 @@
 {{#if interactive}}
+    <span class="hidden" id="tileDescription">{{accessibleName}}</span>
     <a
         class="udex-tile"
         part="tile"
         href="{{href}}"
         target="{{target}}"
-        aria-label="{{accessibleName}}"
-        @keydown={{_onkeydown}}
-        @click={{_onclick}}>
+        role="link"
+        aria-describedby="tileDescription"
+        @keydown="{{_onkeydown}}"
+        @click="{{_onclick}}">
         <slot></slot>
     </a>
 {{else}}
     <div
         class="udex-tile"
         part="tile"
-        @click={{_onclick}}>
+        @click="{{_onclick}}">
         <slot></slot>
     </div>
-{{/if}}
+{{/if}}

package/src/Toast.hbs

@@ -13,7 +13,7 @@
         icon="decline"
         design="Tertiary"
         accessible-name="close"
-        @click={{closeToast}}
+        @click="{{closeToast}}"
       ></udex-button>
     {{/if}}
 	</div>

package/src/Toast.ts

@@ -33,7 +33,7 @@ export enum ToastValueState {
  * For the <code>udex-toast</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Toast.js";</code>
+ * <code>import "@sapudex/web-components/dist/Toast.js";</code>
  *
  * @constructor
  * @extends Toast

package/src/Tooltip.hbs

@@ -4,9 +4,9 @@
   placement-type="{{placement}}"
   horizontal-align="{{horizontalAlign}}"
   vertical-align="{{verticalAlign}}"
-  accessible-name={{accessibleName}}
-  accessible-name-ref={{accessibleNameRef}}
-  accessible-role={{accessibleRole}}
+  accessible-name="{{accessibleName}}"
+  accessible-name-ref="{{accessibleNameRef}}"
+  accessible-role="{{accessibleRole}}"
   prevent-focus-restore>
   {{#if title}}
     <div class="udex-tooltip-title">{{title}}</div>

package/src/Tooltip.ts

@@ -31,7 +31,7 @@ export enum PlacementType {
  * For the <code>udex-tooltip</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Tooltip.js";</code>
+ * <code>import "@sapudex/web-components/dist/Tooltip.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/TruncatedText.ts

@@ -81,7 +81,7 @@ class UDExTruncatedText extends UI5Element {
   }
 
   static async onDefine() {
-    UDExTruncatedText.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExTruncatedText.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get visibleText() {

package/src/Upload.ts

@@ -7,7 +7,7 @@ import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/d
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import FileUploader from "@ui5/webcomponents/dist/FileUploader.js";
+import FileUploader, { FileUploaderChangeEventDetail } from "@ui5/webcomponents/dist/FileUploader.js";
 import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { UPLOAD_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
 import UDExButton from "./Button.js";
@@ -19,9 +19,9 @@ import FileData from "./types/FileData.js";
 
 // Styles
 import UploadCss from "./generated/themes/Upload.css.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
-const BreakpointSizeS: number = 979;
 
 /**
  * @class
@@ -34,7 +34,7 @@ const BreakpointSizeS: number = 979;
  * For the <code>udex-upload</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Upload.js";</code>
+ * <code>import "@sapudex/web-components/dist/Upload.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -87,6 +87,32 @@ const BreakpointSizeS: number = 979;
     },
 })
 
+/**
+ * Triggered when the user attempts to upload a duplicate file.
+ *
+ * @public
+ */
+@event("file-duplicate", {
+  detail:
+    {
+      files:
+        { type: Array },
+    },
+})
+
+/**
+ * Triggered when the user attempts to upload a file.
+ *
+ * @public
+ */
+@event("change", {
+  detail:
+    {
+      files:
+        { type: FileList },
+    },
+})
+
 class UDExUpload extends UI5Element {
   /**
    * Defines the title of the upload.
@@ -179,10 +205,11 @@ class UDExUpload extends UI5Element {
     _buttonSize!: `${UDExButtonSize}`;
 
   static i18nBundle: I18nBundle;
+  _uploadedFiles: FileData[] = [];
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
-    UDExUpload.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExUpload.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {
@@ -211,32 +238,60 @@ class UDExUpload extends UI5Element {
     }
   }
 
-  handleUploadFile(e: Event) {
-    const newFiles = (e.target as HTMLInputElement).files;
+  handleUploadFile(e: CustomEvent<FileUploaderChangeEventDetail>) {
+    const { files } = e.target as HTMLInputElement;
+    if (!files?.length || this.fileNumberExceeded) {
+      e.stopPropagation();
+    }
 
-    if (!newFiles?.length || this.fileNumberExceeded) {
+    const duplicateFiles = this._getDuplicateFiles(files!);
+    if (duplicateFiles.length) {
       e.stopPropagation();
+      this.fireEvent("file-duplicate", {
+        files: duplicateFiles,
+      });
+      this.fileUploader.value = "";
+      return;
     }
 
-    const exceededFilesData = this.maxFileSize ? this._getExceededFiles(newFiles!) : [];
+    const newFiles = Array.from(files!).map(file => ({
+      fileName: file.name,
+      fileSize: file.size,
+    }));
+
+    this._uploadedFiles = [...this._uploadedFiles, ...newFiles];
+
+    const exceededFilesData = this.maxFileSize ? this._getExceededFiles(files!) : [];
     if (exceededFilesData.length) {
       e.stopPropagation();
       this.fireEvent("file-size-exceed", {
         files: exceededFilesData,
       });
+      return;
     }
+
+    this.fireEvent("change", { files });
   }
 
   handleSelectionChange(e: CustomEvent) {
-    this.fireEvent("file-change", { files: e.detail.listItems as UDExUploadItem[] });
+    const uploadedFiles = e.detail.listItems as UDExUploadItem[];
+    this.fireEvent("file-change", { files: uploadedFiles });
+    this.fileUploader.value = "";
   }
 
   _handleResize() {
-    this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;
+    this._buttonSize = BreakpointUtils.isAtMost("S") ? UDExButtonSize.Medium : UDExButtonSize.Large;
   }
 
   handleRemoveFile(e: CustomEvent) {
-    this.fireEvent("file-delete", { file: e.target as UDExUploadItem });
+    const removedFile = e.target as UDExUploadItem;
+    this.fireEvent("file-delete", { file: removedFile });
+    this._uploadedFiles = this._uploadedFiles.filter(file => file.fileName !== removedFile.fileName);
+    this.fileUploader.value = "";
+  }
+
+  _isDuplicateFile(file: string): boolean {
+    return this._uploadedFiles.some(uploadedFile => uploadedFile.fileName === file);
   }
 
   _getExceededFiles(files: FileList): Array<FileData> {
@@ -255,6 +310,32 @@ class UDExUpload extends UI5Element {
     return exceededFiles;
   }
 
+  _getDuplicateFiles(files: FileList): Array<FileData> {
+    const filesArray = Array.from(files);
+    const duplicateFiles: Array<FileData> = [];
+
+    for (let i = 0; i < filesArray.length; i++) {
+      const fileSize = convertBytesToMegabytes(filesArray[i].size);
+      const { name } = filesArray[i];
+
+      const potentialDuplicate: FileData = {
+        fileSize,
+        fileName: name,
+      };
+
+      if (this._isDuplicateFile(potentialDuplicate.fileName)) {
+        duplicateFiles.push(potentialDuplicate);
+      }
+    }
+
+    return duplicateFiles;
+  }
+
+  get fileUploader(): HTMLInputElement {
+    const uploader = this.shadowRoot!.querySelector<FileUploader>("[ui5-file-uploader]")!;
+    return uploader.shadowRoot!.querySelector("input")!;
+  }
+
   get uploadButtonAriaLabel(): string {
     return UDExUpload.i18nBundle.getText(UPLOAD_BUTTON_LABEL);
   }

package/src/UploadItem.ts

@@ -37,7 +37,7 @@ const BreakpointSizeM: number = 1279;
  * For the <code>udex-upload-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/UploadItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/UploadItem.js";</code>
  *
  * @constructor
  * @extends UDExListItemBase
@@ -127,7 +127,7 @@ class UDExUploadItem extends UDExListItem {
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
-    UDExUploadItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExUploadItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {

package/src/Wizard.hbs

@@ -27,7 +27,7 @@
 					@ui5-selection-change-requested="{{../onSelectionChangeRequested}}"
 					@ui5-focused="{{../onStepInHeaderFocused}}"
 					@click="{{../_onGroupedTabClick}}"
-					style={{styles}}
+					style="{{styles}}"
 				></udex-wizard-tab>
 			{{/each}}
 		</div>

package/src/Wizard.ts

@@ -36,7 +36,7 @@ const RESPONSIVE_BREAKPOINTS: ResponsiveBreakpoints = {
  * For the <code>udex-wizard</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Wizard.js";</code>
+ * <code>import "@sapudex/web-components/dist/Wizard.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/WizardStep.ts

@@ -17,7 +17,7 @@ import wizardStepCss from "@ui5/webcomponents-fiori/dist/generated/themes/Wizard
  * For the <code>udex-wizard-step</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/WizardStep.js";</code>
+ * <code>import "@sapudex/web-components/dist/WizardStep.js";</code>
  *
  * @constructor
  * @extends WizardStep

package/src/WizardTab.ts

@@ -25,7 +25,7 @@ export enum WindowSize {
  * For the <code>udex-wizard</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Wizard.js";</code>
+ * <code>import "@sapudex/web-components/dist/Wizard.js";</code>
  *
  * @constructor
  * @author SAP SE