@sapudex/web-components 2.24.0 → 2.25.1

package/src/TableGroupRowTemplate.tsx

@@ -0,0 +1,36 @@
+import type UDExTableGroupRow from "./TableGroupRow.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+
+export default function TableCellTemplate(this: UDExTableGroupRow) {
+  return (
+    <>
+      {
+        this.collapsible ? (
+          <button
+            id="udex-table-group-opener"
+            class="udex-table-grow-btn"
+            aria-expanded={this.expanded}
+            onClick={this.toggleExpanded}
+          >
+            <span class="udex-table-grow">
+              <UI5Icon
+                class="udex-table-grow__icon"
+                name={slimArrowRight}
+              ></UI5Icon>
+              {this.groupTitle}
+            </span>
+          </button>
+        ) : (
+          <div class="udex-table-grow-btn">
+            <span class="udex-table-grow">{this.groupTitle}</span>
+          </div>
+        )
+      }
+
+      <div class="udex-table-grow-rows" onKeyDown={this.handleEscapeKey}>
+        <slot></slot>
+      </div>
+    </>
+  );
+}

package/src/TableHeaderCell.ts

@@ -1,7 +1,7 @@
 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 TableHeaderCellTemplate from "./generated/templates/TableHeaderCellTemplate.lit.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
+import TableHeaderCellTemplate from "./TableHeaderCellTemplate.js";
 import UDExTableCellBase from "./TableCellBase.js";
 
 // Styles
@@ -26,10 +26,9 @@ import TableHeaderCellCss from "./generated/themes/TableHeaderCell.css.js";
  */
 @customElement({
   tag: "udex-table-header-cell",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UDExTableCellBase.styles, TableHeaderCellCss],
   template: TableHeaderCellTemplate,
-  dependencies: [...UDExTableCellBase.dependencies],
 })
 
 class UDExTableHeaderCell extends UDExTableCellBase {

package/src/TableHeaderCellTemplate.tsx

@@ -0,0 +1,36 @@
+import type UDExTableHeaderCell from "./TableHeaderCell.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function TableCellTemplate(this: UDExTableHeaderCell) {
+  return (
+    <>
+      {
+        this._hasIcons ? (
+          <div class="udex-table-header-cell-wrap">
+            {
+              this.iconStart ? (
+                <UI5Icon
+                  class="udex-table-header-cell-wrap__icon"
+                  name={this.iconStart}
+                ></UI5Icon>
+              ) : ""
+            }
+
+            <slot></slot>
+
+            {
+              this.iconEnd ? (
+                <UI5Icon
+                  class="udex-table-header-cell-wrap__icon"
+                  name={this.iconEnd}
+                ></UI5Icon>
+              ) : ""
+            }
+          </div>
+        ) : (
+          <slot></slot>
+        )
+      }
+    </>
+  );
+}

package/src/TableHeaderRow.ts

@@ -1,8 +1,7 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import UDExTableHeaderCell from "./TableHeaderCell.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import UDExTableRowBase from "./TableRowBase.js";
-import TableHeaderRowTemplate from "./generated/templates/TableHeaderRowTemplate.lit.js";
+import TableHeaderRowTemplate from "./TableHeaderRowTemplate.js";
 
 /**
  * @class
@@ -22,10 +21,9 @@ import TableHeaderRowTemplate from "./generated/templates/TableHeaderRowTemplate
  */
 @customElement({
   tag: "udex-table-header-row",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UDExTableRowBase.styles],
   template: TableHeaderRowTemplate,
-  dependencies: [UDExTableHeaderCell],
 })
 
 class UDExTableHeaderRow extends UDExTableRowBase {

package/src/TableHeaderRowTemplate.tsx

@@ -0,0 +1,13 @@
+import type UDExTableHeaderRow from "./TableHeaderRow.js";
+
+export default function TableHeaderRowTemplate(this: UDExTableHeaderRow) {
+  return (
+    <>
+      {
+        this.cells.map(cell => (
+          <slot name={cell._individualSlot}></slot>
+        ))
+      }
+    </>
+  );
+}

package/src/TableRow.ts

@@ -1,9 +1,9 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UDExTableRowBase from "./TableRowBase.js";
 import type UDExTableCell from "./TableCell.js";
-import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
+import TableRowTemplate from "./TableRowTemplate.js";
 
 /**
  * @class
@@ -24,10 +24,9 @@ import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
  */
 @customElement({
   tag: "udex-table-row",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [UDExTableRowBase.styles],
   template: TableRowTemplate,
-  dependencies: [...UDExTableRowBase.dependencies],
 })
 
 class UDExTableRow extends UDExTableRowBase {

package/src/TableRowBase.ts

@@ -3,7 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import UDExTableCell from "./TableCell.js";
+import type UDExTableCell from "./TableCell.js";
 import type UDExTableHeaderCell from "./TableHeaderCell.js";
 
 // Styles
@@ -20,7 +20,6 @@ import TableRowBase from "./generated/themes/TableRowBase.css.js";
 @customElement({
   renderer: litRender,
   styles: TableRowBase,
-  dependencies: [UDExTableCell],
 })
 
 abstract class UDExTableRowBase extends UI5Element {

package/src/TableRowTemplate.tsx

@@ -0,0 +1,13 @@
+import type UDExTableRow from "./TableRow.js";
+
+export default function TableCellTemplate(this: UDExTableRow) {
+  return (
+    <>
+      {
+        this.cells.map(cell => (
+          <slot name={cell._individualSlot}></slot>
+        ))
+      }
+    </>
+  );
+}

package/src/TableTemplate.tsx

@@ -0,0 +1,94 @@
+import type UDExTable from "./Table.js";
+import UDExTableRow from "./TableRow.js";
+import UDExTableCell from "./TableCell.js";
+import UDExBusyIndicator from "./BusyIndicator.js";
+
+export default function TableTemplate(this: UDExTable) {
+  return (
+    <>
+      {
+        this._hasToolbar ? (
+          renderTableToolbar.call(this)
+        ) : ""
+      }
+
+      <div
+        id="table"
+        class="udex-table"
+        role="table"
+        aria-label={this.accessibleName}
+        onScroll={this._onScroll}
+        onKeyDown={this._handleKeyDown}
+        style={this._styles.table}
+      >
+        <div class="udex-table__header-holder">
+          <slot name="headerRow"></slot>
+        </div>
+
+        <slot></slot>
+
+        {
+          !this.rows.length ? (
+            renderTableNoData.call(this)
+          ) : ""
+        }
+
+        {
+          this.loading ? (
+            renderTableLoading.call(this)
+          ) : ""
+        }
+      </div>
+
+      {
+        this.footnotes.length ? (
+          renderTableFootnotes.call(this)
+        ) : ""
+      }
+    </>
+  );
+}
+
+function renderTableToolbar(this: UDExTable) {
+  return (
+    <div class="udex-table-toolbar">
+      <span class="udex-table-toolbar__title">{this.heading}</span>
+      <div class="udex-table-toolbar__actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+  );
+}
+
+function renderTableFootnotes(this: UDExTable) {
+  return (
+    <div class="udex-table-footnotes">
+      <slot name="footnotes"></slot>
+    </div>
+  );
+}
+
+function renderTableNoData(this: UDExTable) {
+  return (
+    <UDExTableRow>
+      <UDExTableCell class="udex-table__no-data">
+        {
+          this.noData.length ? (
+            <slot name="noData"></slot>
+          ) : this._effectiveNoDataText
+        }
+      </UDExTableCell>
+    </UDExTableRow>
+  );
+}
+
+function renderTableLoading(this: UDExTable) {
+  return (
+    <UDExBusyIndicator
+      class="udex-table__loading"
+      delay={this.loadingDelay}
+      data-sap-focus-ref
+      active
+    ></UDExBusyIndicator>
+  );
+}

package/src/Tag.ts

@@ -91,7 +91,7 @@ class UDExTag extends UI5Element {
   * @public
   */
   @property()
-    text!: string;
+    text: string = "";
   /**
    * Defines the href for behavior of the tag as a link
    *

package/src/TextArea.ts

@@ -11,10 +11,10 @@ import {
   TEXTAREA_CHARACTERS_LEFT,
   TEXT_FIELD,
   VALUE_STATE_TYPE_ERROR,
-  VALUE_STATE_TYPE_STANDARD,
   VALUE_STATE_TYPE_SUCCESS,
   VALUE_STATE_TYPE_WARNING,
 } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
@@ -330,10 +330,10 @@ class UDExTextArea extends UI5Element {
 
   get valueStateTypeMappings(): Record<UDExValueState, string> {
     return {
-      [UDExValueState.Success]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
-      [UDExValueState.Standard]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_STANDARD),
-      [UDExValueState.Error]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
-      [UDExValueState.Warning]: UDExTextArea.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+      [UDExValueState.Success]: translate(UDExTextArea, VALUE_STATE_TYPE_SUCCESS),
+      [UDExValueState.Standard]: "",
+      [UDExValueState.Error]: translate(UDExTextArea, VALUE_STATE_TYPE_ERROR),
+      [UDExValueState.Warning]: translate(UDExTextArea, VALUE_STATE_TYPE_WARNING),
     };
   }
 
@@ -350,7 +350,7 @@ class UDExTextArea extends UI5Element {
   }
 
   get readOnlyText(): string {
-    return UDExTextArea.i18nBundle.getText(READ_ONLY);
+    return translate(UDExTextArea, READ_ONLY);
   }
 
   get ariaDescribedBy(): string | undefined {
@@ -374,13 +374,13 @@ class UDExTextArea extends UI5Element {
       const leftCharactersCount = maxLength - this.value.length;
 
       if (leftCharactersCount >= 0) {
-        return UDExTextArea.i18nBundle.getText(TEXTAREA_CHARACTERS_LEFT, leftCharactersCount);
+        return translate(UDExTextArea, TEXTAREA_CHARACTERS_LEFT, leftCharactersCount);
       }
     }
   }
 
   get textHiddenLabel(): string {
-    return UDExTextArea.i18nBundle.getText(TEXT_FIELD);
+    return translate(UDExTextArea, TEXT_FIELD);
   }
 }
 

package/src/TextField.ts

@@ -9,13 +9,14 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import {
-  VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_WARNING, VALUE_STATE_ERROR, READ_ONLY,
+  VALUE_STATE_SUCCESS, VALUE_STATE_WARNING, VALUE_STATE_ERROR, READ_ONLY,
 } from "./generated/i18n/i18n-defaults.js";
 import UDExControlButton from "./ControlButton.js";
 import UDExValueState, { valueStateToControlButtonDesign } from "./types/common.js";
 import type UDExControlButtonDesign from "./types/ControlButtonDesign.js";
 import UDExStatusMessage from "./StatusMessage.js";
 import TextFieldTemplate from "./TextFieldTemplate.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
@@ -453,10 +454,10 @@ class UDExTextField extends UI5Element {
 
   get valueStateTypeMappings(): Record<string, string> {
     return {
-      "Success": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      "Standard": UDExTextField.i18nBundle.getText(VALUE_STATE_INFORMATION),
-      "Error": UDExTextField.i18nBundle.getText(VALUE_STATE_ERROR),
-      "Warning": UDExTextField.i18nBundle.getText(VALUE_STATE_WARNING),
+      "Success": translate(UDExTextField, VALUE_STATE_SUCCESS),
+      "Standard": "",
+      "Error": translate(UDExTextField, VALUE_STATE_ERROR),
+      "Warning": translate(UDExTextField, VALUE_STATE_WARNING),
     };
   }
 
@@ -469,7 +470,7 @@ class UDExTextField extends UI5Element {
   }
 
   get readOnlyStateText(): string {
-    return UDExTextField.i18nBundle.getText(READ_ONLY);
+    return translate(UDExTextField, READ_ONLY);
   }
 
   get ariaDescribedById(): string {

package/src/Toast.ts

@@ -1,16 +1,18 @@
 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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import i18n from "@ui5/webcomponents-base/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/i18nBundle.js";
 import Toast from "@ui5/webcomponents/dist/Toast.js";
-import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
-import UDExButton from "./Button.js";
 import IconDesign from "@ui5/webcomponents/dist/types/IconDesign.js";
-import ToastTemplate from "./generated/templates/ToastTemplate.lit.js";
+import ToastTemplate from "./ToastTemplate.js";
+import { TOAST_CLOSE_ACCESSIBLE_NAME } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import ToastCss from "./generated/themes/Toast.css.js";
@@ -27,7 +29,6 @@ export enum UDExToastValueState {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- *
  * <h3>Usage</h3>
  *
  * For the <code>udex-toast</code>
@@ -39,13 +40,14 @@ export enum UDExToastValueState {
  * @extends Toast
  * @public
  */
+
 @customElement({
   tag: "udex-toast",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [Toast.styles, ToastCss],
   template: ToastTemplate,
-  dependencies: [Icon, UDExButton],
 })
+
 class UDExToast extends Toast {
   /**
   * Defines design state of component
@@ -74,6 +76,9 @@ class UDExToast extends Toast {
   @property({ type: Boolean })
     open = false;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   onEnterDOM(): void {
     super.onEnterDOM();
     if (isDesktop()) {
@@ -111,10 +116,14 @@ class UDExToast extends Toast {
     }
   }
 
-  closeToast() {
+  closeToast(): void {
     this.open = false;
     this.fireDecoratorEvent("close");
   }
+
+  get closeAccessibleName(): string {
+    return translate(UDExToast, TOAST_CLOSE_ACCESSIBLE_NAME);
+  }
 }
 
 UDExToast.define();

package/src/ToastTemplate.tsx

@@ -0,0 +1,42 @@
+import type Toast from "./Toast.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function ToastTemplate(this: Toast) {
+  const rootClass = "udex-toast";
+
+  return (
+    <>
+      {this.open && (
+        <div
+          className={`${rootClass} ui5-toast-root`}
+          role="alert"
+          tabIndex={0}>
+          {this.withIcon && (
+            <UI5Icon
+              class={`${rootClass}__icon`}
+              name={this.iconName}
+              design={this.iconDesign}>
+            </UI5Icon>
+          )}
+          <bdi>
+            <slot></slot>
+          </bdi>
+          {this.showCloseIcon && (
+            <UDExButton
+              class={`${rootClass}__button`}
+              size={UDExButtonSize.Small}
+              icon={decline}
+              design={UDExButtonDesign.Tertiary}
+              accessibleName={this.closeAccessibleName}
+              onClick={this.closeToast}>
+            </UDExButton>
+          )}
+        </div>
+      )}
+    </>
+  );
+}

package/src/TruncatedText.ts

@@ -7,6 +7,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
 import UDExButton from "./Button.js";
 import TruncatedTextTemplate from "./TruncatedTextTemplate.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import TruncatedTextCss from "./generated/themes/TruncatedText.css.js";
@@ -85,8 +86,8 @@ class UDExTruncatedText extends UI5Element {
 
   get buttonLabel(): string {
     return this.initiallyExpanded
-      ? UDExTruncatedText.i18nBundle.getText(READ_LESS)
-      : UDExTruncatedText.i18nBundle.getText(READ_MORE);
+      ? translate(UDExTruncatedText, READ_LESS)
+      : translate(UDExTruncatedText, READ_MORE);
   }
 
   get validatedCharLimit(): number {

package/src/Upload.ts

@@ -18,6 +18,7 @@ import UDExList from "./List.js";
 import UDExUploadItem from "./UploadItem.js";
 import UploadTemplate from "./generated/templates/UploadTemplate.lit.js";
 import type FileData from "./types/FileData.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import UploadCss from "./generated/themes/Upload.css.js";
@@ -352,7 +353,7 @@ class UDExUpload extends UI5Element {
   }
 
   get uploadButtonAriaLabel(): string {
-    return UDExUpload.i18nBundle.getText(UPLOAD_BUTTON_LABEL);
+    return translate(UDExUpload, UPLOAD_BUTTON_LABEL);
   }
 
   get listBusy(): boolean {

package/src/UploadItem.hbs

@@ -2,7 +2,7 @@
     <div class="udex-upload-item__info {{uploadItemClasses}}">
         <div>
             {{#if fileInteractive}}
-                <udex-link href="{{fileLink}}">{{fileName}}</udex-link>
+                <udex-link href="{{fileLink}}" target="{{fileTarget}}">{{fileName}}</udex-link>
             {{else}}
                 <p class="udex-upload-item__name">{{fileName}}</p>
             {{/if}}

package/src/UploadItem.ts

@@ -9,6 +9,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.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 { UDExTarget } from "./types/common.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";
@@ -16,6 +17,7 @@ import UDExLink from "./Link.js";
 import UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UploadItemTemplate from "./generated/templates/UploadItemTemplate.lit.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import UploadItemCss from "./generated/themes/UploadItem.css.js";
@@ -78,6 +80,14 @@ class UDExUploadItem extends UDExListItem {
   @property({ type: String })
     fileLink?: string;
 
+  /**
+   * Defines the file target.
+   *
+   * @public
+   */
+  @property({ type: String })
+    fileTarget: `${UDExTarget}` = UDExTarget._self;
+
   /**
    * Defines the percentage of the upload.
    *
@@ -183,7 +193,7 @@ class UDExUploadItem extends UDExListItem {
   }
 
   get removeButtonAccessibleName(): string {
-    return UDExUploadItem.i18nBundle.getText(REMOVE_FILE_TEXT);
+    return translate(UDExUploadItem, REMOVE_FILE_TEXT);
   }
 
   get showUploadProgress(): boolean {
@@ -200,10 +210,10 @@ class UDExUploadItem extends UDExListItem {
 
   get uploadStatus(): string {
     if (this.uploadState === UDExFileUploadState.Uploading) {
-      return `${UDExUploadItem.i18nBundle.getText(UPLOADING_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
+      return `${translate(UDExUploadItem, UPLOADING_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
     }
 
-    return `${UDExUploadItem.i18nBundle.getText(TERMINATED_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
+    return `${translate(UDExUploadItem, TERMINATED_FILE_STATUS_TEXT)} ${this.uploadPercentage}%`;
   }
 
   get fileInteractive(): boolean {