@sapudex/web-components 0.192.2 → 0.199.3

package/src/SegmentedButtonItem.ts

@@ -5,12 +5,7 @@ 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";
-
-export enum SegmentedButtonItemSize {
-  Small = "Small",
-  Medium = "Medium",
-  Large = "Large",
-}
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class
@@ -41,8 +36,8 @@ class UDExSegmentedButtonItem extends SegmentedButtonItem {
    * @default "Medium"
    * @public
    */
-  @property({ type: SegmentedButtonItemSize, defaultValue: SegmentedButtonItemSize.Medium })
-    size!: `${SegmentedButtonItemSize}`;
+  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
+    size!: `${UDExButtonSize}`;
 }
 
 UDExSegmentedButtonItem.define();

package/src/SelectBox.hbs

@@ -13,13 +13,12 @@
                 ?disabled="{{disabled}}"
                 ?displayonly="{{displayonly}}"
                 ?readonly="{{readonly}}"
-                role="combobox"
                 aria-label="{{accInfo.ariaLabel}}"
                 aria-labelledby="{{accInfo.ariaLabelledBy}}"
                 aria-readonly="{{isReadOrDisplayOnly}}"
                 aria-disabled="{{disabled}}"
-                aria-haspopup="listbox"
-                aria-controls="udex-select-box__dropdown"
+                aria-haspopup="{{listboxRole}}"
+                aria-controls="{{popoverId}}"
                 aria-expanded="{{tokenizerExpanded}}"
                 aria-activedescendant>
                 {{#if label}}
@@ -39,21 +38,21 @@
                 {{/if}}
                 {{#if showMultiSelectedOptions}}
                     <udex-tag-group
-                            class="udex-tag-group"
-                            ?displayonly="{{displayonly}}"
-                            ?readonly="{{readonly}}"
-                            ?disabled="{{disabled}}"
-                            tooltip-placement="{{tooltipPlacement}}"
-                            @ui5-tag-click="{{handleTagPress}}"
-                            @ui5-show-more-tags="{{getHandlerShowMoreItems}}"
-                            @ui5-tag-keydown="{{handleKeyDownTag}}"
-                            ?expanded="{{tokenizerExpanded}}">
+                        class="udex-tag-group"
+                        ?displayonly="{{displayonly}}"
+                        ?readonly="{{readonly}}"
+                        ?disabled="{{disabled}}"
+                        tooltip-placement="{{tooltipPlacement}}"
+                        @ui5-tag-click="{{handleTagPress}}"
+                        @ui5-show-more-tags="{{getHandlerShowMoreItems}}"
+                        @ui5-tag-keydown="{{handleKeyDownTag}}"
+                        ?expanded="{{tokenizerExpanded}}">
                         {{#each selectedItems}}
                             {{#unless this.isGroup}}
                                 <udex-tag
-                                        text="{{this.label}}"
-                                        id="{{this._id}}"
-                                        icon="decline">
+                                    text="{{this.label}}"
+                                    id="{{this._id}}"
+                                    icon="decline">
                                 </udex-tag>
                             {{/unless}}
                         {{/each}}
@@ -61,18 +60,15 @@
                 {{/if}}
                 {{#if showTrigger}}
                     <udex-control-button
-                        tabindex="{{triggerTabIndex}}"
+                        .accessibilityAttributes="{{accessibilityAttributes}}"
                         class="udex-text-field__trigger"
-                        role="combobox"
                         size="Large"
                         icon="navigation-down-arrow"
+                        tabindex="{{triggerTabIndex}}"
                         accessible-name="{{iconAccessibleNameText}}"
-                        aria-label="{{iconAccessibleNameText}}"
-                        aria-haspopup="listbox"
-                        aria-expanded="{{_open}}"
-                        aria-controls="{{accInfo.ariaControls}}"
+                        @keydown="{{handleKeyDownTrigger}}"
                         @click="{{getHandleMultiSelectOpen}}"
-                        aria-activedescendant>
+                        _is-combobox-role>
                     </udex-control-button>
                 {{/if}}
             </div>
@@ -87,7 +83,7 @@
     </div>
     <ui5-popover
         hide-arrow
-        id="udex-select-box__dropdown"
+        id="{{popoverId}}"
         class="udex-select-box__dropdown"
         ?allow-target-overlap="{{allowTargetOverlap}}"
         @keydown="{{handleKeyDownDropdown}}"

package/src/SelectBox.ts

@@ -48,6 +48,12 @@ import UDExStatusMessage from "./StatusMessage.js";
 import UDExControlButton from "./ControlButton.js";
 import UDExTagGroup from "./TagGroup.js";
 
+export type SelectBoxAccessibilityAttributes = {
+  controls?: string,
+  expanded?: "true" | "false" | boolean,
+  hasPopup?: string,
+  ariaLabel?: string,
+}
 /**
  * @class
  *
@@ -704,10 +710,26 @@ class UDExSelectBox extends UDExSearchableListBase {
     return {
       "ariaLabel": this.accessibleName || this.label || undefined,
       "ariaLabelledBy": this.accessibleNameRef || undefined,
-      "ariaControls": this.shadowRoot?.querySelector("[udex-list]")?.getAttribute("id"),
     };
   }
 
+  get accessibilityAttributes(): SelectBoxAccessibilityAttributes {
+    return {
+      expanded: this._open,
+      controls: this.popoverId,
+      hasPopup: this.listboxRole,
+      ariaLabel: this.iconAccessibleNameText,
+    };
+  }
+
+  get popoverId(): string {
+    return `${this._id}_udex-select-box__dropdown`;
+  }
+
+  get listboxRole(): string {
+    return "listbox";
+  }
+
   static get searchableListBaseTemplate() {
     return SearchableListBaseTemplate;
   }

package/src/Tab.ts

@@ -7,7 +7,7 @@ import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTempla
 import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import TabNavigation from "./TabNavigation.js";
 import UDExBadge from "./Badge.js";
-
+import { Target } from "./types/common.js";
 import TabTemplate from "./generated/templates/TabTemplate.lit.js";
 import TabHeaderTemplate from "./generated/templates/TabHeaderTemplate.lit.js";
 import TabInOverflowTemplate from "./generated/templates/TabInOverflowTemplate.lit.js";
@@ -16,13 +16,6 @@ import { ATTENTION_BADGE } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
 
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
-
 interface ITab extends UI5Element {
   getTabInHeaderDomRef: () => ITab | null;
   disabled?: boolean;

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/Tile.hbs

@@ -1,17 +1,18 @@
 {{#if interactive}}
     <a
         class="udex-tile"
+        part="tile"
         href="{{href}}"
         target="{{target}}"
         aria-label="{{accessibleName}}"
         @keydown={{_onkeydown}}
-        @click={{_onclick}}
-    >
+        @click={{_onclick}}>
         <slot></slot>
     </a>
 {{else}}
     <div
         class="udex-tile"
+        part="tile"
         @click={{_onclick}}>
         <slot></slot>
     </div>

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,273 @@
+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 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";
+
+const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
+const BreakpointSizeS: number = 979;
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-upload</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/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 },
+    },
+})
+
+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;
+  _handleResizeBound: ResizeObserverCallback;
+
+  static async onDefine() {
+    UDExUpload.i18nBundle = await getI18nBundle("@udex/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: Event) {
+    const newFiles = (e.target as HTMLInputElement).files;
+
+    if (!newFiles?.length || this.fileNumberExceeded) {
+      e.stopPropagation();
+    }
+
+    const exceededFilesData = this.maxFileSize ? this._getExceededFiles(newFiles!) : [];
+    if (exceededFilesData.length) {
+      e.stopPropagation();
+      this.fireEvent("file-size-exceed", {
+        files: exceededFilesData,
+      });
+    }
+  }
+
+  handleSelectionChange(e: CustomEvent) {
+    this.fireEvent("file-change", { files: e.detail.listItems as UDExUploadItem[] });
+  }
+
+  _handleResize() {
+    this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;
+  }
+
+  handleRemoveFile(e: CustomEvent) {
+    this.fireEvent("file-delete", { file: e.target as UDExUploadItem });
+  }
+
+  _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;
+  }
+
+  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}}