@sapudex/web-components 0.192.4 → 0.199.3

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}}

package/src/UploadItem.ts

@@ -0,0 +1,218 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.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 {
+  REMOVE_FILE_TEXT,
+  TERMINATED_FILE_STATUS_TEXT, UPLOADING_FILE_STATUS_TEXT,
+} from "./generated/i18n/i18n-defaults.js";
+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 UploadItemTemplate from "./generated/templates/UploadItemTemplate.lit.js";
+
+// Styles
+import UploadItemCss from "./generated/themes/UploadItem.css.js";
+import FileUploadState from "./types/FileUploadState.js";
+
+const BreakpointSizeS: number = 979;
+const BreakpointSizeM: number = 1279;
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-upload-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/UploadItem.js";</code>
+ *
+ * @constructor
+ * @extends UDExListItemBase
+ * @public
+ */
+@customElement({
+  tag: "udex-upload-item",
+  renderer: litRender,
+  styles: UploadItemCss,
+  template: UploadItemTemplate,
+  dependencies: [UDExLink, UDExListItem, UDExProgressBar, UDExButton],
+})
+
+class UDExUploadItem extends UDExListItem {
+  /**
+   * Defines the name of the uploaded file.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    fileName!: string;
+
+  /**
+   * Defines the link of the uploaded file.
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    fileLink?: string;
+
+  /**
+   * Defines the percentage of the upload.
+   *
+   * @default 0
+   * @public
+   */
+  @property({ type: Number, validator: Integer })
+    uploadPercentage!: number;
+
+  /**
+   * Defines the percentage of the upload.
+   *
+   * @default 0
+   * @public
+   */
+  @property({ type: FileUploadState, defaultValue: FileUploadState.Uploaded })
+    uploadState!: `${FileUploadState}`;
+
+  /**
+   * Slot for information about the uploaded file.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true }) uploadInfo!: Array<HTMLElement>;
+
+  /**
+   * Defines the percentage of the upload.
+   *
+   * @default "Large"
+   * @private
+   */
+  @property({ type: UDExButtonSize })
+    _buttonSize!: `${UDExButtonSize}`;
+
+  /**
+   * Defines if the screen is at the M breakpoint.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _breakpointM!: boolean;
+
+  /**
+   * Defines if the screen is at the L breakpoint.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _breakpointL!: boolean;
+
+  static i18nBundle: I18nBundle;
+  _handleResizeBound: ResizeObserverCallback;
+
+  static async onDefine() {
+    UDExUploadItem.i18nBundle = await getI18nBundle("@udex/web-components");
+  }
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._handleResize.bind(this);
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._handleResizeBound);
+    this.fireEvent("item-press", {
+      selected: false,
+      item: this,
+    });
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering(): void {
+    const fileLink = this.fileLinkComponent;
+    if (fileLink) {
+      fileLink._setCustomAttributes([{ attribute: "download", value: "true" }]);
+    }
+  }
+
+  handleButtonClick(e: Event) {
+    e.stopImmediatePropagation();
+    this.fireEvent("request-delete");
+  }
+
+  handleButtonKeydown(e: KeyboardEvent) {
+    if (isEnter(e) || isSpace(e)) {
+      e.stopImmediatePropagation();
+      this.fireEvent("request-delete");
+    }
+  }
+
+  _handleResize() {
+    this._buttonSize = window.innerWidth <= BreakpointSizeS ? UDExButtonSize.Medium : UDExButtonSize.Large;
+    this._breakpointL = window.innerWidth > BreakpointSizeM;
+    this._breakpointM = !this._breakpointL ? true : !this._breakpointL && this.uploadState === FileUploadState.Uploaded;
+  }
+
+  get fileLinkComponent(): UDExLink {
+    return this.shadowRoot!.querySelector<UDExLink>("[udex-link]")!;
+  }
+
+  get removeButtonAccessibleName(): string {
+    return UDExUploadItem.i18nBundle.getText(REMOVE_FILE_TEXT);
+  }
+
+  get showUploadProgress(): boolean {
+    return this.uploadState === FileUploadState.Error || this.uploadState === FileUploadState.Uploading;
+  }
+
+  get uploadProgressState(): ValueState {
+    if (this.uploadState === FileUploadState.Uploading) {
+      return ValueState.Information;
+    }
+
+    return ValueState.Error;
+  }
+
+  get uploadStatus(): string {
+    if (this.uploadState === FileUploadState.Uploading) {
+      return `${UDExUploadItem.i18nBundle.getText(UPLOADING_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
+    }
+
+    return `${UDExUploadItem.i18nBundle.getText(TERMINATED_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
+  }
+
+  get fileInteractive(): boolean {
+    return this.uploadState === FileUploadState.Uploaded;
+  }
+
+  get additionalInfoClasses(): string {
+    return `udex-upload-item__info ${this.uploadState === FileUploadState.Error ? "udex-upload-item__error" : ""}`;
+  }
+
+  get uploadItemClasses(): string {
+    return this.uploadState === "Uploaded" ? "udex-upload-item__info-uploaded" : "";
+  }
+}
+
+UDExUploadItem.define();
+
+export default UDExUploadItem;

package/src/features/SearchSuggestionsPopover.ts

@@ -161,7 +161,7 @@ class Suggestion {
       }
       if (this.focusabledList && this.selectedItemIndex >= 0) {
         const focusabledItems = this.getFocusableItems();
-        const button = focusabledItems[this.selectedItemIndex].querySelector("[ui5-button]") as UI5Element;
+        const button = focusabledItems[this.selectedItemIndex] as UI5Element;
 
         button.focus();
         return true;