@sapudex/web-components 0.226.0 → 2.1.0

package/src/TextField.ts

@@ -2,13 +2,11 @@ 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import Float from "@ui5/webcomponents-base/dist/types/Float.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   VALUE_STATE_SUCCESS,
   VALUE_STATE_INFORMATION,
@@ -21,7 +19,7 @@ import ValueState from "./types/common.js";
 import UDExStatusMessage from "./StatusMessage.js";
 
 // Template
-import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit";
+import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit.js";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
@@ -34,6 +32,10 @@ type AccInfo = {
   ariaHasPopup?: string,
 }
 
+export type UDExTextFieldKeydownEventDetail = {
+  keyboardEvent: KeyboardEvent;
+}
+
 /**
  * @class
  *
@@ -55,20 +57,33 @@ type AccInfo = {
    *
    * @public
    */
-@event("input")
+@event("input", { bubbles: true })
 /**
    * Fired when the input operation has finished by pressing Enter or on focusout.
    *
    * @public
    */
-@event("change")
+@event("change", { bubbles: true })
 /**
  * Fired event when the user clicks the icon.
  *
  * @private
  */
-@event("click-icon")
+@event("click-icon", { bubbles: true })
+
+/**
+ * Fired event when the key is pressed in the input.
+ *
+ * @private
+ */
+@event("keydown", { bubbles: true })
 class UDExTextField extends UI5Element {
+  eventDetails!: {
+    "keydown": UDExTextFieldKeydownEventDetail,
+    "input": void,
+    "change": void,
+    "click-icon": void,
+  };
   _labelActiveClassName = "udex-text-field__label_active";
 
   /**
@@ -93,7 +108,7 @@ class UDExTextField extends UI5Element {
    * @public
    */
   @property({ type: String })
-    value!: string;
+    value: string = "";
 
   /**
    * Sets the maximum number of characters available in the input field.
@@ -102,7 +117,7 @@ class UDExTextField extends UI5Element {
    *
    * @public
    */
-  @property({ validator: Integer })
+  @property({ type: Number })
     maxlength?: number;
 
   /**
@@ -128,8 +143,8 @@ class UDExTextField extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ defaultValue: "" })
-    accessibleNameRef!: string;
+  @property()
+    accessibleNameRef: string = "";
 
   /**
    * Defines the accessible ARIA name of the component.
@@ -138,7 +153,7 @@ class UDExTextField extends UI5Element {
    * @public
    */
   @property()
-    accessibleIconName!: string;
+    accessibleIconName: string = "";
 
   /**
    * Defines whether the component is read-only.
@@ -179,8 +194,8 @@ class UDExTextField extends UI5Element {
    * @default "Standard"
    * @public
    */
-  @property({ type: ValueState, defaultValue: ValueState.Standard })
-    valueState!: `${ValueState}`;
+  @property()
+    valueState: `${ValueState}` = ValueState.Standard;
 
   /**
    * Defines supporting text under the input field.
@@ -216,8 +231,8 @@ class UDExTextField extends UI5Element {
    * @private
    */
 
-  @property({ type: String, defaultValue: "" })
-    showButtonTooltip!: string;
+  @property({ type: String })
+    showButtonTooltip: string = "";
 
   /**
    * Defines the inner stored class of the label.
@@ -225,16 +240,8 @@ class UDExTextField extends UI5Element {
    * @default ""
    * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "" })
-    labelActiveClass!: string;
-
-  /**
-   * Defines the behaviour of autocomplete.
-   * @default "off"
-   * @public
-   */
-  @property({ type: String, defaultValue: "off" })
-    autocomplete!: string;
+  @property({ type: String, noAttribute: true })
+    labelActiveClass: string = "";
 
   /**
    * Defines the inner stored value of the readonly attribute of the input.
@@ -251,8 +258,8 @@ class UDExTextField extends UI5Element {
    * @default ""
    * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "" })
-    labelClasses!: string;
+  @property({ type: String, noAttribute: true })
+    labelClasses: string = "";
 
   /**
    * Defines the inner stored value of the classes of the label.
@@ -260,8 +267,8 @@ class UDExTextField extends UI5Element {
    * @default "text"
    * @private
    */
-  @property({ type: String, defaultValue: "text" })
-    type!: string;
+  @property({ type: String })
+    type: "Text" | "Email" | "Number" | "Password" | "Tel" | "URL" | "Search" = "Text";
 
   /**
    * Defines direction of the input.
@@ -274,19 +281,20 @@ class UDExTextField extends UI5Element {
   /**
    * Defines the max value for the "number" type of the input.
    */
-  @property({ validator: Float })
+  @property({ type: Number })
     max?: number;
 
   /**
    * Defines the min value for the "number" type of the input.
    */
-  @property({ validator: Float })
+  @property({ type: Number })
     min?: number;
 
   /**
    * Defines the step for the "number" type of the input.
+   * @default undefined
    */
-  @property({ validator: Float })
+  @property({ type: Number })
     step?: number;
 
   /**
@@ -313,12 +321,9 @@ class UDExTextField extends UI5Element {
   @property({ type: Boolean })
     _isTouched!: boolean;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  static async onDefine(): Promise<void> {
-    UDExTextField.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   get valueStateTypeMappings(): Record<string, string> {
     return {
       "Success": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),
@@ -366,21 +371,13 @@ class UDExTextField extends UI5Element {
     };
   }
 
-  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);
+    this.fireDecoratorEvent("keydown", { keyboardEvent: e });
   }
 
   handleChange = (): void => {
-    this.fireEvent("change");
+    this.fireDecoratorEvent("change");
   };
 
   handleInput = (inputEvent: InputEvent) => {
@@ -412,7 +409,7 @@ class UDExTextField extends UI5Element {
   };
 
   handleIconClick(): void {
-    this.fireEvent("click-icon");
+    this.fireDecoratorEvent("click-icon");
   }
 
   onBeforeRendering(): void {

package/src/Tile.ts

@@ -4,7 +4,7 @@ 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 { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 
 import TileTemplate from "./generated/templates/TileTemplate.lit.js";
@@ -14,6 +14,9 @@ import TileCss from "./generated/themes/Tile.css.js";
 
 type AnchorNode = HTMLAnchorElement | undefined | null;
 
+type UDExTileClickEventDetail = {
+  originalEvent: PointerEvent,
+}
 /**
  * @class
  *
@@ -33,12 +36,11 @@ type AnchorNode = HTMLAnchorElement | undefined | null;
  * Fires when the user clicks inside the component in interactive mode.
  * @public
  */
-@event("click", {
-  detail: {
-    originalEvent: { type: Event },
-  },
-})
+@event("click", { bubbles: true })
 class UDExTile extends UI5Element {
+  eventDetails!: {
+    "click": UDExTileClickEventDetail
+  };
   /**
    * Defines display the shadow for the Tile.
    *
@@ -126,11 +128,11 @@ class UDExTile extends UI5Element {
     }
   }
 
-  _onclick(e: Event) {
+  _onclick(e: PointerEvent) {
     e.stopImmediatePropagation();
 
     if (this.interactive) {
-      this.fireEvent("click", { originalEvent: e }, true);
+      this.fireDecoratorEvent("click", { originalEvent: e });
     }
   }
 }

package/src/Toast.ts

@@ -1,6 +1,5 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 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 { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Toast from "@ui5/webcomponents/dist/Toast.js";
@@ -8,14 +7,15 @@ 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";
 
 // Styles
 import ToastCss from "./generated/themes/Toast.css.js";
 
-export enum ToastValueState {
+export enum UDExToastValueState {
   Action = "Action",
   Success = "Success",
   Warning = "Warning",
@@ -46,13 +46,6 @@ export enum ToastValueState {
   template: ToastTemplate,
   dependencies: [Icon, UDExButton],
 })
-
-/**
- * Emit when close icon was clicked
- *
- * @public
- */
-@event("close")
 class UDExToast extends Toast {
   /**
   * Defines design state of component
@@ -60,8 +53,8 @@ class UDExToast extends Toast {
   * @public
   * @default "Action"
   */
-  @property({ type: ToastValueState, defaultValue: ToastValueState.Action })
-    valueState!: `${ToastValueState}`;
+  @property()
+    valueState: `${UDExToastValueState}` = UDExToastValueState.Action;
 
   /**
   * Defines if close icon should be visible
@@ -82,44 +75,45 @@ class UDExToast extends Toast {
     open = false;
 
   onEnterDOM(): void {
+    super.onEnterDOM();
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
   }
 
   get withIcon(): boolean {
-    return this.valueState !== ToastValueState.Action;
+    return this.valueState !== UDExToastValueState.Action;
   }
 
   get iconName(): string {
     switch (this.valueState) {
-    case ToastValueState.Success:
+    case UDExToastValueState.Success:
       return "sys-enter-2";
-    case ToastValueState.Error:
+    case UDExToastValueState.Error:
       return "error";
-    case ToastValueState.Warning:
+    case UDExToastValueState.Warning:
       return "alert";
     default:
       return "";
     }
   }
 
-  get iconDesign(): string {
+  get iconDesign(): IconDesign {
     switch (this.valueState) {
-    case ToastValueState.Success:
-      return "Positive";
-    case ToastValueState.Error:
-      return "Negative";
-    case ToastValueState.Warning:
-      return "Critical";
+    case UDExToastValueState.Success:
+      return IconDesign.Positive;
+    case UDExToastValueState.Error:
+      return IconDesign.Negative;
+    case UDExToastValueState.Warning:
+      return IconDesign.Critical;
     default:
-      return "Default";
+      return IconDesign.Default;
     }
   }
 
   closeToast() {
     this.open = false;
-    this.fireEvent("close");
+    this.fireDecoratorEvent("close");
   }
 }
 

package/src/Tooltip.hbs

@@ -1,13 +1,16 @@
 <ui5-popover
+  .opener="{{opener}}"
+  ?open="{{open}}"
   class="udex-tooltip__pane"
   ?hide-arrow="{{hideArrow}}"
-  placement-type="{{placement}}"
+  placement="{{placement}}"
   horizontal-align="{{horizontalAlign}}"
   vertical-align="{{verticalAlign}}"
   accessible-name="{{accessibleName}}"
   accessible-name-ref="{{accessibleNameRef}}"
   accessible-role="{{accessibleRole}}"
-  prevent-focus-restore>
+  ?prevent-initial-focus="{{preventInitialFocus}}"
+  ?prevent-focus-restore="{{preventFocusRestore}}">
   {{#if title}}
     <div class="udex-tooltip-title">{{title}}</div>
   {{/if}}

package/src/Tooltip.ts

@@ -4,22 +4,14 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
-import PopoverVerticalAlign from "@ui5/webcomponents/dist/types/PopoverVerticalAlign.js";
-import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import { HorizontalAlign, Placement, VerticalAlign } from "./types/Dropdown.js";
 
 // Template
 import TooltipTemplate from "./generated/templates/TooltipTemplate.lit.js";
 
 // Styles
-import TooltipCss from "./generated/themes/Tooltip.css";
-
-export enum PlacementType {
-  Left = "Left",
-  Right = "Right",
-  Top = "Top",
-  Bottom = "Bottom",
-}
+import TooltipCss from "./generated/themes/Tooltip.css.js";
 
 /**
  * @class
@@ -61,7 +53,8 @@ class UDExTooltip extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ type: String, defaultValue: "" }) title!: string;
+  @property({ type: String })
+    title: string = "";
 
   /**
    * Defines if Tooltip has an arrow or not.
@@ -75,33 +68,36 @@ class UDExTooltip extends UI5Element {
   /**
    * Determines on which side of the component the Tooltip is displayed.
    *
-   * @default "Right"
+   * @default "End"
    * @public
    */
-  @property({ type: PlacementType, defaultValue: PlacementType.Right })
-    placement!: `${PlacementType}`;
+  @property()
+    placement: `${Placement}` = Placement.End;
   /**
    * Determines the horizontal alignment of the component.
    * @default "Center"
    * @public
    */
-  @property({ type: PopoverHorizontalAlign, defaultValue: PopoverHorizontalAlign.Center })
-    horizontalAlign!: `${PopoverHorizontalAlign}`;
+  @property()
+    horizontalAlign: `${HorizontalAlign}` = HorizontalAlign.Center;
 
   /**
    * Determines the vertical alignment of the component.
    * @default "Center"
    * @public
    */
-  @property({ type: PopoverVerticalAlign, defaultValue: PopoverVerticalAlign.Center })
-    verticalAlign!: `${PopoverVerticalAlign}`;
+  @property()
+    verticalAlign: `${VerticalAlign}` = VerticalAlign.Center;
+
+  @property()
+    opener!: HTMLElement | string;
 
   /**
    * Defines the accessible name of the component.
    * @default undefined
    * @public
    */
-  @property({ defaultValue: undefined })
+  @property()
     accessibleName?: string;
 
   /**
@@ -109,49 +105,37 @@ class UDExTooltip extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ defaultValue: "" })
-    accessibleNameRef!: string;
+  @property()
+    accessibleNameRef: string = "";
 
   /**
    * Allows setting a custom role.
    * @default "Dialog"
    * @public
    */
-  @property({ type: PopupAccessibleRole, defaultValue: PopupAccessibleRole.Dialog })
-    accessibleRole!: `${PopupAccessibleRole}`;
-
-  getPopover() {
-    return this.shadowRoot!.querySelector<Popover>(
-      "[ui5-popover]",
-    )!;
-  }
+  @property()
+    accessibleRole: `${PopupAccessibleRole}` = PopupAccessibleRole.Dialog;
 
-  /** Returns whether the tooltip is currently open.
+  /**
+   * Defines if the tooltip is open.
    * @public
    */
-  isOpen(): boolean {
-    const popover = this.getPopover();
-    return popover.isOpen();
-  }
+  @property({ type: Boolean })
+    open!: boolean;
 
   /**
-   * Used to open tooltip
-   * @param opener element at which the popover is shown
+   * Defines if the initial focus should be prevented.
    * @public
    */
-  onOpen(opener: HTMLElement): void {
-    const popover = this.getPopover();
-    popover.showAt(opener);
-  }
+   @property({ type: Boolean })
+     preventInitialFocus!: boolean;
 
   /**
-   * Used to close tooltip
+   * Defines if the focus should be returned to the previously focused element.
    * @public
    */
-  onClose(): void {
-    const popover = this.getPopover();
-    popover.close(true);
-  }
+  @property({ type: Boolean })
+    preventFocusRestore!: boolean;
 }
 
 UDExTooltip.define();

package/src/TruncatedText.ts

@@ -2,8 +2,8 @@ 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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -71,19 +71,16 @@ class UDExTruncatedText extends UI5Element {
   * @public
   * @default 150
   */
-  @property({ defaultValue: 150, type: Integer })
-    charLimit!: Integer;
+  @property({ type: Number })
+    charLimit: number = 150;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   constructor() {
     super();
   }
 
-  static async onDefine() {
-    UDExTruncatedText.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   get visibleText() {
     return this.initiallyExpanded ? `${this.text} ` : this.truncatedText;
   }

package/src/Upload.hbs

@@ -6,11 +6,11 @@
         <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 ?disabled="{{disabled}}" id="fileUploader" hide-input accept="{{accept}}" ?multiple="{{multiple}}" @change="{{handleUploadFile}}" @click="{{handleUploadClick}}">
+            <udex-button ?disabled="{{disabled}}" aria-disabled="{{disabled}}" design="Secondary" aria-label="{{uploadButtonAriaLabel}}" size="{{_buttonSize}}">{{uploadButtonText}}</udex-button>
         </ui5-file-uploader>
-        {{#if _filesFull}}
-            <p class="udex-upload__error">{{errorText}}</p>
+        {{#if showSupportingText}}
+            <p class="{{supportingTextClasses}}">{{supportingText}}</p>
         {{/if}}
     </div>
     <div class="udex-upload__files-wrapper">