@sapudex/web-components 0.114.2 → 0.127.6

package/src/TextField.hbs

@@ -8,43 +8,47 @@
     </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}}"
+         @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-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

package/src/TextField.ts

@@ -59,6 +59,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";
 
@@ -200,6 +206,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.
    *
@@ -354,6 +370,10 @@ class UDExTextField extends UI5Element {
     this.fireEvent("click-trigger", keyboardEvent);
   };
 
+  handleIconClick(): void {
+    this.fireEvent("click-icon");
+  }
+
   onBeforeRendering() {
     if ((this.value || this.active) && this.labelActiveClass === "") {
       this.labelActiveClass = this._labelActiveClassName;
@@ -377,6 +397,10 @@ class UDExTextField extends UI5Element {
       this.direction = directionStyles;
     }
   }
+
+  get readonlyNotDisabled() {
+    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";
@@ -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]",
     )!;
   }