@sapudex/web-components 0.114.2 → 0.127.6

package/src/PasswordField.ts

@@ -6,15 +6,19 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExTextField from "./TextField.js";
-import UDExControlButton from "./ControlButton.js";
 import ValueState from "./types/common.js";
 
 import PasswordFieldTemplate from "./generated/templates/PasswordFieldTemplate.lit.js";
 
-// Styles
-
-import PasswordFieldCss from "./generated/themes/PasswordField.css.js";
+export enum InputType {
+  Password = "password",
+  Text = "text",
+}
 
+export enum IconType {
+  Hide = "hide",
+  Show = "show",
+}
 /**
  * @class
  *
@@ -36,19 +40,19 @@ import PasswordFieldCss from "./generated/themes/PasswordField.css.js";
 @customElement({
   tag: "udex-password-field",
   renderer: litRender,
-  styles: PasswordFieldCss,
   template: PasswordFieldTemplate,
-  dependencies: [UDExTextField, UDExControlButton],
+  dependencies: [UDExTextField],
 })
+
 class UDExPasswordField extends UI5Element {
   /**
    * Defines supporting text under the input field.
    *
    * @default ""
-   * @public
+   * @private
    */
-  @property({ type: String, noAttribute: true, defaultValue: "password" })
-    type!: string;
+  @property({ type: String, noAttribute: true, defaultValue: InputType.Password })
+    type!: InputType;
 
   /**
    * Defines whether the component is in disabled state.
@@ -109,8 +113,8 @@ class UDExPasswordField extends UI5Element {
    * @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.
@@ -139,8 +143,8 @@ class UDExPasswordField extends UI5Element {
    * @private
    */
 
-  @property({ type: String, noAttribute: true, defaultValue: "show" })
-    icon!: string;
+  @property({ type: String, noAttribute: true, defaultValue: IconType.Show })
+    icon!: IconType;
 
   /**
    * Defines the inner stored show password button tooltip.
@@ -149,7 +153,7 @@ class UDExPasswordField extends UI5Element {
    * @public
    */
 
-  @property({ type: String, defaultValue: "" })
+  @property({ type: String })
     showButtonTooltip!: string;
 
   /**
@@ -176,7 +180,7 @@ class UDExPasswordField extends UI5Element {
    * @default ""
    * @public
    */
-  @property()
+  @property({ type: String })
     accessibleName!: string;
 
   /**
@@ -184,7 +188,7 @@ class UDExPasswordField extends UI5Element {
    * @default ""
    * @public
    */
-  @property({ defaultValue: "" })
+  @property({ type: String })
     accessibleNameRef!: string;
 
   static i18nBundle: I18nBundle;
@@ -193,20 +197,24 @@ class UDExPasswordField extends UI5Element {
     UDExPasswordField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
-  handleShowPassword() {
-    const isPassword = this.type === "password";
+  handleShowPassword(): void {
+    const isPassword = this.type === InputType.Password;
 
-    this.icon = isPassword ? "hide" : "show";
-    this.type = isPassword ? "text" : "password";
+    this.icon = isPassword ? IconType.Hide : IconType.Show;
+    this.type = isPassword ? InputType.Text : InputType.Password;
   }
 
-  get passwordLabel() {
-    return `${this.label} ${this.showAsterisk && this.showAsterisk ? "*" : ""}`;
+  get passwordLabel(): string {
+    return `${this.label} ${this.showAsterisk ? "*" : ""}`;
   }
 
-  get renderShowButton() {
+  get renderShowButton(): boolean {
     return !this.disabled && !this.readonly && !this.displayonly && this.showButtonEnabled;
   }
+
+  get iconButton(): IconType | null {
+    return this.renderShowButton ? this.icon : null;
+  }
 }
 
 UDExPasswordField.define();

package/src/PhoneNumberField.hbs

@@ -6,8 +6,9 @@
 >
     {{#if label}}
         <label
+            id="udex-phone-number-field__label"
             class="udex-phone-number-field__label"
-            for="phone"
+            for="{{this._id}}-phone"
         >
             {{label}}
             {{#if required}}
@@ -17,7 +18,7 @@
     {{/if}}
     <udex-dropdown
         class="udex-phone-number-field__dropdown"
-        id="dropdown-menu"
+        id="{{this._id}}_dropdown-menu"
         horizontal-align="Left"
         height="{{height}}"
     >
@@ -54,7 +55,11 @@
                 ?disabled="{{isButtonDisabled}}"
                 aria-disabled="{{isButtonDisabled}}"
                 aria-haspopup="true"
+                aria-label="{{countrySelectorAriaLabel}}"
                 accessible-name="{{countrySelectorAriaLabel}}"
+                aria-expanded="{{_dropdownExpanded}}"
+                aria-controls="{{this._id}}_dropdown-menu"
+                role="combobox"
                 @click="{{onClick}}"
             >
                 <div class="udex-phone-number-field__open-button-text">
@@ -70,7 +75,7 @@
         {{/unless}}
         <input
             class="udex-phone-number-field__input"
-            id="phone"
+            id="{{this._id}}-phone"
             type="tel"
             .value="{{value}}"
             placeholder="{{phoneFormat}}"

package/src/PhoneNumberField.ts

@@ -199,6 +199,14 @@ class UDExPhoneNumberField extends UI5Element {
   @property({ type: String, noAttribute: true, defaultValue: OpenButtonIcon.iconDown })
     buttonIcon!: string;
 
+  /**
+   * Defines the open button icon
+   *
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _dropdownExpanded!: boolean;
+
   /**
    * Defines the phone format of the input
    *
@@ -260,14 +268,14 @@ class UDExPhoneNumberField extends UI5Element {
 
   static i18nBundle: I18nBundle;
   _dropdown!: UDExDropdown;
-  _handleResizeBound: ResizeObserverCallback
+  _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
     UDExPhoneNumberField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
   }
 
   get countrySelectorAriaLabel() {
-    return this.accessibleName || UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT);
+    return this.accessibleName || `${this.label} ${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)}`;
   }
 
   get countryIso() {
@@ -391,9 +399,11 @@ class UDExPhoneNumberField extends UI5Element {
 
   handleDropdownOpen() {
     this.buttonIcon = OpenButtonIcon.iconUp;
+    this._dropdownExpanded = true;
   }
   handleDropdownClose() {
     this.buttonIcon = OpenButtonIcon.iconDown;
+    this._dropdownExpanded = false;
   }
 
   autoSelectCountry(value: string) {

package/src/RatingBar.hbs

@@ -0,0 +1,11 @@
+<div class="udex-rating-bar__container">
+    <div aria-hidden="true" class="udex-rating-bar__rating">{{validatedRating}}</div>
+	<ui5-icon role="img" aria-labelledby="ratingDescription" name="favorite" class="udex-rating__icon"></ui5-icon>
+    <div class="udex-rating-bar__track">
+        <div class="udex-rating-bar__progress"></div>
+    </div>
+    {{#if showPercentage}}
+        <div role="note" class="udex-rating-bar__percentage">{{validatedPercentage}}</div>
+    {{/if}}
+    <span id="ratingDescription" class="hidden-text">{{_ratingDescription}}</span>
+</div>

package/src/RatingBar.ts

@@ -0,0 +1,113 @@
+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 I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import { STARS } from "./generated/i18n/i18n-defaults.js";
+import RatingBarTemplate from "./generated/templates/RatingBarTemplate.lit.js";
+
+// Styles
+import RatingBarCss from "./generated/themes/RatingBar.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-rating-bar</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/RatingBar.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-rating-bar",
+  renderer: litRender,
+  styles: RatingBarCss,
+  template: RatingBarTemplate,
+  dependencies: [Icon],
+})
+
+class UDExRatingBar extends UI5Element {
+  /**
+    * Defines the associated rating.
+    *
+    * @default 0
+    * @public
+    */
+  @property({ type: Number, defaultValue: 0, validator: Integer })
+    rating!: number;
+
+  /**
+    * Defines the percentage.
+    *
+    * @default 0
+    * @public
+    */
+  @property({ type: Number, defaultValue: 0, validator: Integer })
+    percentage!: number;
+
+  /**
+    * Defines wether the percentage is shown or not.
+    *
+    * @default false
+    * @public
+    */
+  @property({ type: Boolean })
+    showPercentage!: boolean;
+
+  static i18nBundle: I18nBundle;
+
+  _minRating: number = 0;
+  _maxRating: number = 5;
+  _minPercentage: number = 0;
+  _maxPercentage: number = 100;
+
+  static async onDefine() {
+    UDExRatingBar.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+  }
+
+  onBeforeRendering(): void {
+    this.style.setProperty("--udex-rating-bar-progress", `${this.percentage}%`);
+  }
+
+  get validatedRating(): number {
+    if (this.rating > this._maxRating) {
+      console.warn("UDEx RatingBar: The rating shouldn't be more than 5.");
+      return this._maxRating;
+    }
+    if (this.rating < this._minRating) {
+      console.warn("UDEx RatingBar: The rating shouldn't be less than 0.");
+      return this._minRating;
+    }
+    return this.rating;
+  }
+
+  get validatedPercentage(): string {
+    if (this.percentage > this._maxPercentage) {
+      console.warn("UDEx RatingBar: The percentage shouldn't be more than 100.");
+      return `${this._maxPercentage}%`;
+    }
+    if (this.percentage < this._minPercentage) {
+      console.warn("UDEx RatingBar: The percentage shouldn't be less than 0.");
+      return `${this._minPercentage}%`;
+    }
+    return `${this.percentage}%`;
+  }
+
+  get _ratingDescription(): string {
+    return `${this.validatedRating} ${UDExRatingBar.i18nBundle.getText(STARS)}`;
+  }
+}
+
+UDExRatingBar.define();
+
+export default UDExRatingBar;

package/src/Review.hbs

@@ -0,0 +1,44 @@
+{{#if isEmpty}}
+    <div class="udex-review__empty-container">
+        <slot class="udex-review__default-text" name="defaultText"></slot>
+        <slot name="reviewButton"></slot>
+    </div>
+{{else}}
+    {{#if withoutBreakdown}}
+        <div class="udex-review__container-without-breakdown">
+            {{> noBreakdown}}
+        </div>
+    {{else}}
+        <div class="udex-review__container">
+            <div class="udex-review__content">
+                <div class="udex-review__rating-info">
+                    <div aria-level="2" role="heading" aria-hidden="true" class="udex-review__rating">{{validatedRating}}</div>
+                    <ui5-icon aria-labelledby="ratingDescription" role="img" name="favorite" class="udex-review__icon"></ui5-icon>
+                </div>
+                <div class="udex-review__reviews-text">{{reviewsText}}</div>
+                <slot name="reviewButton"></slot>
+            </div>
+            <div class="udex-review__additional-content">
+                {{#each validatedRatingBars}}
+                    <slot name="{{this._individualSlot}}"></slot>
+                {{/each}}
+            </div>
+        </div>
+        <span id="ratingDescription" class="hidden-text">{{_ratingDescription}}</span>
+    {{/if}}
+{{/if}}
+
+
+{{#*inline "noBreakdown"}}
+    <div class="udex-review__content-without-breakdown">
+        <div aria-level="2" role="heading" aria-hidden="true" class="udex-review__rating">{{validatedRating}}</div>
+        <div class="udex-review__rating-info-without-breakdown">
+            <udex-rating-indicator readonly value="{{validatedRating}}" max="{{_maxRating}}"></udex-rating-indicator>
+            <div class="udex-review__reviews-text">{{reviewsText}}</div>
+        </div>
+    </div>
+    <div class="udex-review__additional-content-without-breakdown">
+        <slot class="udex-review__default-text" name="defaultText"></slot>
+        <slot name="reviewButton"></slot>
+    </div>
+{{/inline}}

package/src/Review.ts

@@ -0,0 +1,140 @@
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import Float from "@ui5/webcomponents-base/dist/types/Float.js";
+import { REVIEWS, STARS } from "./generated/i18n/i18n-defaults.js";
+import UDExRatingBar from "./RatingBar.js";
+import UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import ReviewTemplate from "./generated/templates/ReviewTemplate.lit.js";
+
+// Styles
+import ReviewCss from "./generated/themes/Review.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-review</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Review.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-review",
+  renderer: litRender,
+  styles: ReviewCss,
+  template: ReviewTemplate,
+  dependencies: [UDExRatingBar, UDExRatingIndicator, Icon],
+})
+
+class UDExReview extends UI5Element {
+  /**
+   * Defines the rating.
+   *
+   * @default 0
+   * @public
+   */
+  @property({ type: Number, defaultValue: 0, validator: Float })
+    rating!: number;
+
+  /**
+   * Defines the total number of reviews.
+   *
+   * @default 0
+   * @public
+   */
+  @property({ type: Number, defaultValue: 0, validator: Integer })
+    reviews!: number;
+
+  /**
+   * Slot for a button for writing a review.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    reviewButton!: UDExButton;
+
+  /**
+   * Slot for the default text when there are no reviews or rating.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    defaultText!: HTMLElement;
+
+  /**
+   * Slot for rating bars.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    bars!: Array<UDExRatingBar>;
+
+  static i18nBundle: I18nBundle;
+  _minRating: number = 0;
+  _maxRating: number = 5;
+  _maxRatingBars: number = 5;
+
+  static async onDefine() {
+    UDExReview.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+  }
+
+  get reviewsText(): string {
+    return `${this.reviews} ${UDExReview.i18nBundle.getText(REVIEWS)}`;
+  }
+
+  get withoutBreakdown(): boolean {
+    return this.bars.length === 0;
+  }
+
+  get isEmpty(): boolean {
+    return this.reviews === 0 && this.rating === 0;
+  }
+
+  get validatedRating(): number {
+    if (this.rating > this._maxRating) {
+      console.warn("UDEx Review: The rating shouldn't be more than 5.");
+      return this._maxRating;
+    }
+    if (this.rating < this._minRating) {
+      console.warn("UDEx Review: The rating shouldn't be less than 0.");
+      return this._minRating;
+    }
+    return this.rating;
+  }
+
+  get validatedRatingBars(): Array<UDExRatingBar> {
+    if (this.bars.length > this._maxRatingBars) {
+      console.warn("UDEx Review: There shouldn't be more than 5 RatingBars.");
+      return this.bars.slice(-this._maxRatingBars);
+    }
+
+    return this.bars;
+  }
+
+  get _ratingDescription(): string {
+    return `${this.validatedRating} ${UDExRatingBar.i18nBundle.getText(STARS)}`;
+  }
+}
+
+UDExReview.define();
+
+export default UDExReview;

package/src/Search.hbs

@@ -2,6 +2,8 @@
     {{#if isShowSearchHomePrefix}}
         <div class="udex-search__prefix">
             <button type="button"
+                    role="combobox"
+                    aria-expanded="{{_prefixDropdownExpanded}}"
                     aria-haspopup="true"
                     aria-controls="udex-search-prefix"
                     class="udex-search__prefix-button"
@@ -14,7 +16,7 @@
                 class="udex-search__prefix-popover"
                 hide-arrow
                 placement-type="Bottom"
-	            horizontal-align="Left"
+	              horizontal-align="Left"
                 style="{{prefixPopoverStyles}}"
                 @after-close="{{handleAfterClosePrefixPopover}}">
                 <slot></slot>
@@ -29,10 +31,9 @@
                 name="search"
                 class="udex-search__field"
                 autocomplete="off"
-                role="combobox"
-                aria-controls="suggestions-popover"
-                aria-expanded="false"
-                aria-haspopup="{{showSuggestedPopover}}"
+                aria-autocomplete="list"
+                aria-haspopup="{{getAriaHasPopup}}"
+                aria-label="Search"
                 placeholder="{{label}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
@@ -54,11 +55,9 @@
                 name="search"
                 class="udex-search__field"
                 autocomplete="off"
-                role="combobox"
+                aria-autocomplete="list"
                 aria-label="{{accInfo.ariaLabel}}"
-                aria-controls="suggestions-popover"
-                aria-expanded="false"
-                aria-haspopup="{{showSuggestedPopover}}"
+                aria-haspopup="{{getAriaHasPopup}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
                 @keydown="{{handleKeyDown}}"
@@ -74,11 +73,17 @@
                     id="reset-button"
                     class="udex-search__button udex-search__reset-button"
                     design="Default"
-                    icon="decline"
-                    tooltip="Reset Button"
+                    tooltip="{{tooltipInfo.tooltipResetButton}}"
                     @click="{{onReset}}"
                     @keydown="{{handleKeyDownReset}}"
-                ></ui5-button>
+                >
+                    <ui5-icon
+                        class="udex-search__button-icon"
+                        accessible-name="{{accInfo.accessibleNameResetIcon}}"
+                        accessible-role="presentation"
+                        name="decline">
+                    </ui5-icon>
+                </ui5-button>
             {{/if}}
             {{#if isVoiceButton}}
                 <ui5-button
@@ -86,7 +91,7 @@
                     class="udex-search__button udex-search__voice-button {{voiceActiveClass}}"
                     design="Default"
                     icon="microphone"
-                    tooltip="Voice Button"
+                    tooltip="{{tooltipInfo.tooltipVoiceButton}}"
                     @click="{{onVoice}}"
                 ></ui5-button>
             {{/if}}
@@ -94,6 +99,7 @@
                 {{#if nonInteractiveSubmitButton}}
                     <ui5-icon
                         class="udex-search__icon"
+                        accessible-name="{{accInfo.accessibleNameSearchIcon}}"
                         name="search">
                     </ui5-icon>
                 {{else}}
@@ -102,7 +108,7 @@
                         class="udex-search__button udex-search__submit-button {{searchButtonActiveClass}}"
                         design="Default"
                         icon="search"
-                        tooltip="Submit Button"
+                        tooltip="{{tooltipInfo.tooltipSubmitButton}}"
                         @click="{{onSubmit}}"
                     ></ui5-button>
                 {{/if}}