@sapudex/web-components 0.117.1 → 0.138.0

package/src/TextField.hbs

@@ -8,49 +8,55 @@
     </label>
   {{/if}}
 
-  <input id="{{this._id}}-input" class="udex-text-field__input"
-    type="{{type}}"
-    .value="{{value}}"
-    @change="{{handleChange}}"
-    @input="{{handleInput}}"
-    @focus="{{handleFocus}}"
-    @blur="{{handleBlur}}"
-    @keydown="{{handleKeyDown}}"
-    maxlength="{{maxlength}}"
-    ?disabled="{{disabled}}"
-    ?readonly="{{isInputReadonly}}"
-    ?required="{{required}}"
-    aria-required="{{required}}"
-    aria-readonly="{{isInputReadonly}}"
-    aria-disabled="{{disabled}}"
-    aria-invalid="{{accInfo.ariaInvalid}}"
-    aria-describedby="{{accInfo.ariaDescribedBy}}"
-    aria-label="{{accInfo.ariaLabel}}"
-    aria-labelledby="{{accInfo.ariaLabelledBy}}"
-    part="textfield-input"
-    min="{{min}}"
-    max="{{max}}"
-    step="{{step}}"
-  />
+  <div class="udex-text-field__wrap">
+      <input id="{{this._id}}-input" class="udex-text-field__input"
+         type="{{type}}"
+         .value="{{value}}"
+         @change="{{handleChange}}"
+         @input="{{handleInput}}"
+         @focus="{{handleFocus}}"
+         @blur="{{handleBlur}}"
+         @click="{{handleClick}}"
+         @keydown="{{handleKeyDown}}"
+         maxlength="{{maxlength}}"
+         ?disabled="{{disabled}}"
+         ?readonly="{{isInputReadonly}}"
+         ?required="{{required}}"
+         aria-required="{{required}}"
+         aria-readonly="{{isInputReadonly}}"
+         ?aria-disabled="{{readonlyNotDisabled}}"
+         aria-invalid="{{accInfo.ariaInvalid}}"
+         aria-describedby="{{accInfo.ariaDescribedBy}}"
+         aria-haspopup="{{accInfo.ariaHasPopup}}"
+         aria-label="{{accInfo.ariaLabel}}"
+         aria-labelledby="{{accInfo.ariaLabelledBy}}"
+         part="textfield-input"
+         min="{{min}}"
+         max="{{max}}"
+         step="{{step}}"
+      />
 
-  {{#if icon}}
-    <udex-control-button
-      accessible-name="{{accessibleIconName}}"
-      ?active="{{active}}"
-      ?disabled="{{disabled}}"
-      ?readonly="{{readonly}}"
-      size="Large"
-      design="{{valueState}}"
-      class="udex-text-field_icon-container"
-      icon="{{icon}}"
-    ></udex-control-button>
-  {{/if}}
+      {{#if icon}}
+        <udex-control-button
+          accessible-name="{{accessibleIconName}}"
+          tooltip={{showButtonTooltip}}
+          ?active="{{active}}"
+          ?disabled="{{disabled}}"
+          ?readonly="{{readonly}}"
+          size="Large"
+          design="{{valueState}}"
+          class="udex-text-field_icon-container"
+          icon="{{icon}}"
+          @click="{{handleIconClick}}"
+        ></udex-control-button>
+      {{/if}}
+  </div>
 
   {{#if supportingText}}
     <udex-status-message
-    ?disabled="{{disabled}}"
-    supporting-text="{{supportingText}}"
-    value-state="{{valueState}}">
+      ?disabled="{{disabled}}"
+      supporting-text="{{supportingText}}"
+      value-state="{{valueState}}">
     </udex-status-message>
   {{/if}}
 

package/src/TextField.ts

@@ -8,6 +8,7 @@ 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 {
   VALUE_STATE_SUCCESS,
   VALUE_STATE_INFORMATION,
@@ -17,13 +18,21 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import UDExControlButton from "./ControlButton.js";
 import ValueState from "./types/common.js";
+import UDExStatusMessage from "./StatusMessage.js";
 
 // Template
 import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
-import UDExStatusMessage from "./StatusMessage.js";
+
+type AccInfo = {
+  ariaInvalid?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+  ariaLabel?: string;
+  ariaHasPopup?: string,
+}
 
 /**
  * @class
@@ -59,6 +68,12 @@ import UDExStatusMessage from "./StatusMessage.js";
    * @public
    */
 @event("change")
+/**
+ * Fired event when the user clicks the icon.
+ *
+ * @private
+ */
+@event("click-icon")
 class UDExTextField extends UI5Element {
   _labelActiveClassName = "udex-text-field__label_active";
 
@@ -170,8 +185,8 @@ class UDExTextField extends UI5Element {
    * @default "Standard"
    * @public
    */
-  @property({ type: ValueState, defaultValue: "Standard" })
-    valueState!: "Standard" | "Warning" | "Error" | "Success";
+  @property({ type: ValueState, defaultValue: ValueState.Standard })
+    valueState!: `${ValueState}`;
 
   /**
    * Defines supporting text under the input field.
@@ -200,6 +215,16 @@ class UDExTextField extends UI5Element {
   @property({ type: Boolean })
     active!: boolean;
 
+  /**
+   * Defines the inner stored show password button tooltip.
+   *
+   * @default ""
+   * @private
+   */
+
+  @property({ type: String, defaultValue: "" })
+    showButtonTooltip!: string;
+
   /**
    * Defines the inner stored class of the label.
    *
@@ -271,13 +296,28 @@ class UDExTextField extends UI5Element {
   @property()
     ariaDescribedBy?: string;
 
+  /**
+   * Defines the aria-has-popup attribute of the input.
+   * @private
+   */
+  @property({ type: String })
+    _ariaHasPopup?: string;
+
+  /**
+   * Defines is it the touch of the input field (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
+  static async onDefine(): Promise<void> {
     UDExTextField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  get valueStateTypeMappings() {
+  get valueStateTypeMappings(): Record<string, string> {
     return {
       "Success": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),
       "Standard": UDExTextField.i18nBundle.getText(VALUE_STATE_INFORMATION),
@@ -286,15 +326,15 @@ class UDExTextField extends UI5Element {
     };
   }
 
-  get hasValueState() {
+  get hasValueState(): boolean {
     return this.valueState !== ValueState.Standard;
   }
 
-  get valueStateText() {
+  get valueStateText(): string | undefined {
     return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
   }
 
-  get readOnlyStateText() {
+  get readOnlyStateText(): string {
     return UDExTextField.i18nBundle.getText(READ_ONLY);
   }
 
@@ -302,28 +342,29 @@ class UDExTextField extends UI5Element {
     return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();
   }
 
-  get supportingTextId():string {
+  get supportingTextId(): string {
     return this.supportingText ? `${this._id}-supportingTextDesc` : "";
   }
 
-  get valueStateTextId():string {
+  get valueStateTextId(): string {
     return this.hasValueState ? `${this._id}-valueStateDesc` : "";
   }
 
-  get readOnlyStateTextId():string {
+  get readOnlyStateTextId(): string {
     return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
   }
 
-  get accInfo() {
+  get accInfo(): AccInfo {
     return {
       "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
       "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
       "ariaLabelledBy": this.accessibleNameRef,
       "ariaLabel": this.accessibleName || undefined,
+      "ariaHasPopup": this._ariaHasPopup || undefined,
     };
   }
 
-  handleChange = () => {
+  handleChange = (): void => {
     this.fireEvent("change");
   };
 
@@ -332,14 +373,20 @@ class UDExTextField extends UI5Element {
     this.fireEvent("input");
   };
 
-  handleFocus = () => {
+  handleClick = (): void => {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
+  };
+
+  handleFocus = (): void => {
     if (!this.disabled && !this.readonly && !this.displayonly) {
       this.labelActiveClass = this._labelActiveClassName;
       this.active = true;
     }
   };
 
-  handleBlur = () => {
+  handleBlur = (): void => {
     this.active = false;
 
     if (this.value) {
@@ -347,14 +394,19 @@ class UDExTextField extends UI5Element {
     } else {
       this.labelActiveClass = "";
     }
+    this._isTouched = false;
   };
 
-  handleKeyDown = (keyboardEvent: KeyboardEvent) => {
+  handleKeyDown = (keyboardEvent: KeyboardEvent): void => {
     keyboardEvent.stopPropagation();
     this.fireEvent("click-trigger", keyboardEvent);
   };
 
-  onBeforeRendering() {
+  handleIconClick(): void {
+    this.fireEvent("click-icon");
+  }
+
+  onBeforeRendering(): void {
     if ((this.value || this.active) && this.labelActiveClass === "") {
       this.labelActiveClass = this._labelActiveClassName;
     } else if (!this.active && !this.value && this.labelActiveClass.length) {
@@ -377,6 +429,10 @@ class UDExTextField extends UI5Element {
       this.direction = directionStyles;
     }
   }
+
+  get readonlyNotDisabled(): boolean {
+    return this.isInputReadonly && !this.disabled;
+  }
 }
 
 UDExTextField.define();

package/src/Tooltip.hbs

@@ -1,4 +1,4 @@
-<ui5-responsive-popover
+<ui5-popover
   class="udex-tooltip__pane"
   ?hide-arrow="{{hideArrow}}"
   placement-type="{{placement}}"
@@ -12,4 +12,4 @@
     <div class="udex-tooltip-title">{{title}}</div>
   {{/if}}
   <slot></slot>
-</ui5-responsive-popover>
+</ui5-popover>

package/src/Tooltip.ts

@@ -3,7 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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 ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.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";
@@ -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 "@udex/web-components/dist/Tooltip.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -44,7 +44,7 @@ export enum PlacementType {
   renderer: litRender,
   styles: TooltipCss,
   template: TooltipTemplate,
-  dependencies: [ResponsivePopover],
+  dependencies: [Popover],
 })
 class UDExTooltip extends UI5Element {
   /**
@@ -121,8 +121,8 @@ class UDExTooltip extends UI5Element {
     accessibleRole!: `${PopupAccessibleRole}`;
 
   getPopover() {
-    return this.shadowRoot!.querySelector<ResponsivePopover>(
-      "[ui5-responsive-popover]",
+    return this.shadowRoot!.querySelector<Popover>(
+      "[ui5-popover]",
     )!;
   }