@sapudex/web-components 0.192.4 → 0.224.0

package/src/TagGroup.hbs

@@ -25,24 +25,24 @@
 
 {{#*inline "TAG"}}
     <udex-tag
-            role="{{../tagRole}}"
-            accessible-role="option"
-            class="udex-tag-group__tag"
-            data-id="{{this.id}}"
-            part="token-{{@index}}"
-            ?read-only="{{../isReadOrDisplayOnly}}"
-            tabindex="{{../tagTabIndex}}"
-            id="{{_id}}-tag-group-tag"
-            text="{{this.text}}"
-            icon="{{this.icon}}"
-            href="{{this.href}}"
-            design="{{this.design}}"
-            size="{{this.size}}"
-            icon-placement="{{this.iconPlacement}}"
-            accessible-name="{{this.accessibleName}}"
-            ?non-selectable="{{this.nonSelectable}}"
-            ?data-overflows="{{this.overflows}}"
-            @keydown="{{../handleTagKeyDown}}"
-            @ui5-iconClick="{{../tagIconClickHandler}}">
-        ></udex-tag>
+        role="{{../tagRole}}"
+        accessible-role="option"
+        class="udex-tag-group__tag"
+        data-id="{{this.id}}"
+        part="token-{{@index}}"
+        ?read-only="{{../isReadOrDisplayOnly}}"
+        tabindex="{{../tagTabIndex}}"
+        id="{{_id}}-tag-group-tag"
+        text="{{this.text}}"
+        icon="{{this.icon}}"
+        href="{{this.href}}"
+        design="{{this.design}}"
+        size="{{this.size}}"
+        icon-placement="{{this.iconPlacement}}"
+        accessible-name="{{this.accessibleName}}"
+        ?non-selectable="{{this.nonSelectable}}"
+        ?data-overflows="{{this.overflows}}"
+        @keydown="{{../handleTagKeyDown}}"
+        @ui5-iconClick="{{../tagIconClickHandler}}">
+    </udex-tag>
 {{/inline}}

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,7 +17,7 @@
          @focus="{{handleFocus}}"
          @blur="{{handleBlur}}"
          @click="{{handleClick}}"
-         @keydown="{{handleKeyDown}}"
+         @keydown="{{handleKeydown}}"
          maxlength="{{maxlength}}"
          ?disabled="{{disabled}}"
          ?readonly="{{isInputReadonly}}"
@@ -39,7 +39,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.
    *
@@ -314,7 +308,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 +352,17 @@ 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,
     };
   }
 
+  handleKeydown(e: KeyboardEvent): void {
+    e.stopPropagation();
+    this.fireEvent<KeyboardEvent>("keydown", e);
+  }
+
   handleChange = (): void => {
     this.fireEvent("change");
   };
@@ -396,11 +395,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,18 +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"
-        @click={{_onclick}}>
+        part="tile"
+        @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.hbs

@@ -0,0 +1,21 @@
+<div @ui5-request-delete="{{handleRemoveFile}}" class="udex-upload__wrapper">
+    {{#if uploadTitle}}
+        <h1 class="udex-upload__title">{{uploadTitle}}</h1>
+    {{/if}}
+    {{#if additionalText}}
+        <p class="udex-upload__additional-text">{{additionalText}}</p>
+    {{/if}}
+    <div class="udex-upload__upload-button-container">
+        <ui5-file-uploader id="fileUploader" hide-input accept="{{accept}}" ?multiple="{{multiple}}" @change="{{handleUploadFile}}" @click="{{handleUploadClick}}">
+            <udex-button design="Secondary" aria-label="{{uploadButtonAriaLabel}}" size="{{_buttonSize}}">{{uploadButtonText}}</udex-button>
+        </ui5-file-uploader>
+        {{#if _filesFull}}
+            <p class="udex-upload__error">{{errorText}}</p>
+        {{/if}}
+    </div>
+    <div class="udex-upload__files-wrapper">
+        <udex-list aria-busy="{{listBusy}}" mode="MultiSelect" @ui5-selection-change="{{handleSelectionChange}}">
+            <slot></slot>
+        </udex-list>
+    </div>
+</div>

package/src/Upload.ts

@@ -0,0 +1,354 @@
+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 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 { UPLOAD_BUTTON_LABEL } from "./generated/i18n/i18n-defaults.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.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";
+
+// Styles
+import UploadCss from "./generated/themes/Upload.css.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+
+const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-upload</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Upload.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-upload",
+  renderer: litRender,
+  styles: UploadCss,
+  template: UploadTemplate,
+  dependencies: [FileUploader, UDExList, UDExButton, UDExUploadItem],
+})
+
+/**
+ * Triggered when the uploaded file exceeds the maximum allowed size.
+ *
+ * @public
+ */
+@event("file-size-exceed", {
+  detail:
+    {
+      files:
+        { type: Array },
+    },
+})
+
+/**
+ * Triggered when the user deletes the uploaded item.
+ *
+ * @public
+ */
+@event("file-delete", {
+  detail:
+    {
+      file:
+        { type: UDExUploadItem },
+    },
+})
+
+/**
+ * Triggered when the user uploads the item.
+ *
+ * @public
+ */
+@event("file-change", {
+  detail:
+    {
+      files:
+        { type: Array },
+    },
+})
+
+/**
+ * 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.
+   *
+   * @public
+   */
+  @property({ type: String })
+    uploadTitle!: string;
+
+  /**
+   * Defines the error message shown when more than one file is uploaded with multiple set to false.
+   *
+   * @public
+   */
+  @property({ type: String })
+    errorText!: string;
+
+  /**
+   * Defines if uploader is required.
+   *
+   * @public
+   */
+  @property({ type: Boolean })
+    required!: boolean;
+
+  /**
+   * Defines if uploading multiple files is allowed.
+   *
+   * @public
+   */
+  @property({ type: Boolean })
+    multiple!: boolean;
+
+  /**
+   * Defines the acceptable file formats for uploading.
+   *
+   * @public
+   */
+  @property({ type: String })
+    accept!: string;
+
+  /**
+   * Defines the maximum allowed size of the file for uploading.
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: Number, validator: Integer })
+    maxFileSize!: number;
+
+  /**
+   * Defines the additional text below the title of the upload.
+   *
+   * @public
+   */
+  @property({ type: String })
+    additionalText!: string;
+
+  /**
+   * Defines the text in the upload button.
+   *
+   * @public
+   */
+  @property({ type: String })
+    uploadButtonText!: string;
+
+  /**
+   * Defines if a file is already uploaded when multiple is false.
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _filesFull: boolean = false;
+
+  /**
+   * Defines the uploaded files.
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExUploadItem>;
+
+  /**
+   * Defines the percentage of the upload.
+   *
+   * @default "Large"
+   * @private
+   */
+  @property({ type: String, defaultValue: UDExButtonSize.Large })
+    _buttonSize!: `${UDExButtonSize}`;
+
+  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);
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering(): void {
+    if (this._filesFull) {
+      this._filesFull = this.fileNumberExceeded;
+    }
+  }
+
+  handleUploadClick(e: Event) {
+    this._filesFull = this.fileNumberExceeded;
+    if (this.fileNumberExceeded) {
+      e.preventDefault();
+    }
+  }
+
+  handleUploadFile(e: CustomEvent<FileUploaderChangeEventDetail>) {
+    const { files } = e.target as HTMLInputElement;
+    if (!files?.length || this.fileNumberExceeded) {
+      e.stopPropagation();
+    }
+
+    const duplicateFiles = this._getDuplicateFiles(files!);
+    if (duplicateFiles.length) {
+      e.stopPropagation();
+      this.fireEvent("file-duplicate", {
+        files: duplicateFiles,
+      });
+      this.fileUploader.value = "";
+      return;
+    }
+
+    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) {
+    const uploadedFiles = e.detail.listItems as UDExUploadItem[];
+    this.fireEvent("file-change", { files: uploadedFiles });
+    this.fileUploader.value = "";
+  }
+
+  _handleResize() {
+    this._buttonSize = BreakpointUtils.isAtMost("S") ? UDExButtonSize.Medium : UDExButtonSize.Large;
+  }
+
+  handleRemoveFile(e: CustomEvent) {
+    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> {
+    const filesArray = Array.from(files);
+    const exceededFiles: Array<FileData> = [];
+
+    for (let i = 0; i < filesArray.length; i++) {
+      const fileSize = convertBytesToMegabytes(filesArray[i].size);
+      if (fileSize > this.maxFileSize) {
+        exceededFiles.push({
+          fileName: filesArray[i].name,
+          fileSize,
+        });
+      }
+    }
+    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);
+  }
+
+  get listBusy(): boolean {
+    return !this.items.length;
+  }
+
+  get fileNumberExceeded(): boolean {
+    return !this.multiple && this.items.length >= 1;
+  }
+}
+
+UDExUpload.define();
+
+export default UDExUpload;

package/src/UploadItem.hbs

@@ -0,0 +1,32 @@
+<div class="udex-upload-item__wrapper">
+    <div class="udex-upload-item__info {{uploadItemClasses}}">
+        <div>
+            {{#if fileInteractive}}
+                <udex-link href="{{fileLink}}">{{fileName}}</udex-link>
+            {{else}}
+                <p class="udex-upload-item__name">{{fileName}}</p>
+            {{/if}}
+            <div class="{{additionalInfoClasses}}">
+                <slot></slot>
+            </div>
+        </div>
+        {{#if _breakpointM}}
+            {{> deleteButton}}
+        {{/if}}
+    </div>
+    <div class="udex-upload-item__progress-info-wrapper">
+        {{#if showUploadProgress}}
+            <div class="udex-upload-item__progress-info">
+                <udex-progress-bar role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{uploadPercentage}}" value="{{uploadPercentage}}" value-state="{{uploadProgressState}}" hide-value></udex-progress-bar>
+                <p class="udex-upload-item__progress-status">{{uploadStatus}}</p>
+            </div>
+        {{/if}}
+        {{#if _breakpointL}}
+            {{> deleteButton}}
+        {{/if}}
+    </div>
+</div>
+
+{{#*inline deleteButton}}
+    <udex-button accessible-name="{{removeButtonAccessibleName}}" @keydown="{{handleButtonKeydown}}" @click="{{handleButtonClick}}" size="{{_buttonSize}}" icon="decline" design="Tertiary"></udex-button>
+{{/inline}}