@sapudex/web-components 0.192.4 → 0.224.0

package/src/MessageStrip.ts

@@ -18,49 +18,15 @@ import {
   MESSAGE_STRIP_INFORMATION,
   MESSAGE_STRIP_SUCCESS,
   MESSAGE_STRIP_WARNING,
+  MESSAGE_STRIP_ACTION,
 } from "./generated/i18n/i18n-defaults.js";
+import { UdexMessageStripDesign, UdexMessageStripStatusType } from "./types/MessageStrip.js";
 
 import MessageStripTemplate from "./generated/templates/MessageStripTemplate.lit.js";
 
 // Styles
 import MessageStripCss from "./generated/themes/MessageStrip.css.js";
 
-export enum MessageStripDesign {
-  /**
-   * Message should be just an information
-   * @public
-   */
-  Information = "Information",
-  /**
-   * Message is a success message
-   * @public
-   */
-  Positive = "Positive",
-  /**
-   * Message is an error
-   * @public
-   */
-  Negative = "Negative",
-  /**
-   * Message is a warning
-   * @public
-   */
-  Warning = "Warning",
-  /**
-   * Message is an action
-   * @public
-   */
-  Action = "Action",
-}
-
-export enum UdexMessageStripStatusType {
-  Icon = "Icon",
-  Text = "Text",
-  None = "None",
-}
-
-type textStatusType = Record<Exclude<MessageStripDesign, "Action">, string>;
-
 /**
  * @class
  *
@@ -90,11 +56,11 @@ class UDExMessageStrip extends MessageStrip {
    * @public
    */
   @property({
-    type: MessageStripDesign,
-    defaultValue: MessageStripDesign.Action,
+    type: UdexMessageStripDesign,
+    defaultValue: UdexMessageStripDesign.Action,
   })
   /** @ts-expect-error */
-    design!: `${MessageStripDesign}`;
+    design!: `${UdexMessageStripDesign}`;
 
   /**
    * Defines the component Status Type.
@@ -134,69 +100,73 @@ class UDExMessageStrip extends MessageStrip {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExMessageStrip.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExMessageStrip.i18nBundle = await getI18nBundle("@sapudex/web-components");
+  }
+
+  onBeforeRendering() {
+    if (this.isDesignActionOrIsNotIconType) {
+      this.hideIcon = true;
+    }
   }
 
   getTranslation(text: I18nText): string {
     return UDExMessageStrip.i18nBundle.getText(text);
   }
 
-  textStatusTypeMapping(): textStatusType {
+  textStatusTypeMapping(): Record<string, string> {
     return {
-      Information: this.getTranslation(MESSAGE_STRIP_INFORMATION),
-      Positive: this.getTranslation(MESSAGE_STRIP_SUCCESS),
-      Negative: this.getTranslation(MESSAGE_STRIP_ERROR),
-      Warning: this.getTranslation(MESSAGE_STRIP_WARNING),
+      [UdexMessageStripDesign.Information]: this.getTranslation(MESSAGE_STRIP_INFORMATION),
+      [UdexMessageStripDesign.Positive]: this.getTranslation(MESSAGE_STRIP_SUCCESS),
+      [UdexMessageStripDesign.Negative]: this.getTranslation(MESSAGE_STRIP_ERROR),
+      [UdexMessageStripDesign.Warning]: this.getTranslation(MESSAGE_STRIP_WARNING),
+      [UdexMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),
     };
   }
 
-  onBeforeRendering() {
-    if (
-      this.isDesignAction()
-      || this.statusType !== UdexMessageStripStatusType.Icon
-    ) {
-      this.hideIcon = true;
-    }
+  isDesignAction(): boolean {
+    return this.design === UdexMessageStripDesign.Action;
   }
 
-  isDesignAction() {
-    return this.design === MessageStripDesign.Action;
+  _closeClick(): void {
+    this.fireEvent("close");
   }
 
-  get shouldHideIcon() {
-    if (
-      this.isDesignAction()
-      || this.statusType !== UdexMessageStripStatusType.Icon
-    ) {
+  get shouldHideIcon(): boolean {
+    if (this.isDesignActionOrIsNotIconType) {
       return this.hideIcon || this.icon.length === 0;
     }
 
     return this.hideIcon;
   }
 
-  get hideTextStatus() {
-    return (
-      this.statusType !== UdexMessageStripStatusType.Text
-      || this.isDesignAction()
-    );
+  get hideTextStatus(): boolean {
+    return this.statusType !== UdexMessageStripStatusType.Text || this.isDesignAction();
   }
 
   get textStatus(): string | undefined {
-    if (this.design !== MessageStripDesign.Action) {
+    if (this.design !== UdexMessageStripDesign.Action) {
       return this.textStatusTypeMapping()[this.design];
     }
   }
 
-  get _closeButtonText() {
+  get _closeButtonText(): string {
     return `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
   }
 
-  get iconProvided() {
+  get isNotIconStatusType(): boolean {
+    return this.statusType !== UdexMessageStripStatusType.Icon;
+  }
+
+  get hasIcon(): boolean {
     return this.icon.length > 0;
   }
 
-  _closeClick() {
-    this.fireEvent("close");
+  get isDesignActionOrIsNotIconType(): boolean {
+    return this.isDesignAction() || this.isNotIconStatusType;
+  }
+
+  get hiddenText(): string {
+    return `${this.textStatusTypeMapping()[this.design]} ${this.hideCloseButton ? "" : this._closableText}`;
   }
 }
 

package/src/Pagination.ts

@@ -279,7 +279,7 @@ class UDExPagination extends UI5Element {
   }
 
   static async onDefine() {
-    UDExPagination.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExPagination.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   setActive(element: HTMLElement): void {
@@ -304,7 +304,6 @@ class UDExPagination extends UI5Element {
 
     this.currentPageIndex = currentPage + 1;
     this._pageFocusedManually = false;
-    this._pages = this.setupPagesData();
 
     this.emitChangeEvent();
   }
@@ -317,7 +316,6 @@ class UDExPagination extends UI5Element {
     }
     this.currentPageIndex -= 1;
     this._pageFocusedManually = false;
-    this._pages = this.setupPagesData();
 
     this.emitChangeEvent();
   }
@@ -364,13 +362,12 @@ class UDExPagination extends UI5Element {
 
     this._pages = this.setupPagesData();
 
-    if (this.currentPageIndex > this._lastPageIndex || this._lastPageIndex - this.currentPageIndex <= this.pageOffset) {
-      this._visiblePages = this.shiftVisiblePages();
-    }
-
     if (this.currentPageIndex < this._firstPageIndex || this.currentPageIndex - this._firstPageIndex <= this.pageOffset) {
       this._visiblePages = this.shiftVisiblePages(true);
+      return;
     }
+
+    this._visiblePages = this.shiftVisiblePages();
   }
 
   setupPagesData(): Page[] {
@@ -425,7 +422,6 @@ class UDExPagination extends UI5Element {
     if (element.getAttribute("active") !== null) {
       return;
     }
-
     this.setActive(element);
     this.emitChangeEvent();
   }

package/src/PasswordField.hbs

@@ -1,5 +1,5 @@
 <udex-text-field
-    type={{type}}
+    type="{{type}}"
     value="{{value}}"
     label="{{passwordLabel}}"
     ?disabled="{{disabled}}"
@@ -12,6 +12,6 @@
     accessible-name-ref="{{accessibleNameRef}}"
     accessible-icon-name="{{showButtonTooltip}}"
     show-button-tooltip="{{showButtonTooltip}}"
-    @ui5-click-icon="{{handleShowPassword}}"
+    @click-icon="{{handleShowPassword}}"
     icon="{{iconButton}}"
 ></udex-text-field>

package/src/PasswordField.ts

@@ -30,7 +30,7 @@ export enum IconType {
  * For the <code>udex-password-field</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/UDExPasswordField.js";</code>
+ * <code>import "@sapudex/web-components/dist/UDExPasswordField.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -194,7 +194,7 @@ class UDExPasswordField extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExPasswordField.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExPasswordField.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   handleShowPassword(): void {

package/src/PhoneNumberField.hbs

@@ -67,7 +67,7 @@
                 <div class="udex-phone-number-field__button-content">
                     <img
                         class="udex-phone-number-field__flag"
-                        aria-label={{selectedCountryName}}
+                        aria-label="{{selectedCountryName}}"
                         style="{{selectedFlagBackgroundPosition}}">
                 </div>
             </udex-button>
@@ -95,8 +95,9 @@
             @click="{{handleClick}}"
             @focus="{{handleFocus}}"
             @blur="{{handleBlur}}"
-            @keydown={{handleKeyDown}}
-            @keyup={{handleKeyUp}}
+            @keydown="{{handleKeyDown}}"
+            @keyup="{{handleKeyUp}}"
+            tabindex="{{inputTabIndex}}"
         >
     </div>
 </div>

package/src/PhoneNumberField.ts

@@ -291,7 +291,7 @@ class UDExPhoneNumberField extends UI5Element {
   _handleResizeBound: ResizeObserverCallback;
 
   static async onDefine() {
-    UDExPhoneNumberField.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExPhoneNumberField.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get countrySelectorAriaLabel() {
@@ -345,7 +345,6 @@ class UDExPhoneNumberField extends UI5Element {
 
   handleInput(e: InputEvent) {
     this.value = (e.target as HTMLInputElement)?.value.trim();
-
     this.applyPhoneMask();
 
     if (!this.value.startsWith(this.selectedPhonePrefix)) {
@@ -379,17 +378,21 @@ class UDExPhoneNumberField extends UI5Element {
   };
 
   handleKeyUp() {
+    if (this.isInputReadonly) {
+      return;
+    }
+
     this.value = this.value.replace(/[^\d+ ()-]/g, "").trim();
     this.applyPhoneMask();
   }
 
   handleFocus() {
-    this.active = true;
+    this.active = !this.displayonly;
     if (this.countryIso.length === 0) {
       this.phoneFormat = initialPlaceholder;
     }
 
-    if (this.value.length === 0 || this.value === "+") {
+    if ((this.value.length === 0 || this.value === "+") && !this.isInputReadonly) {
       this.value = this.selectedPhonePrefix;
     }
   }
@@ -410,11 +413,13 @@ class UDExPhoneNumberField extends UI5Element {
     const isIncorrectPrefixEntered = enteredPrefix !== this.selectedPhonePrefix;
 
     const isIncorrectNumberEntered = !this.countryIso || this.value.length <= prefixLength || isIncorrectPrefixEntered;
-
     if (isIncorrectNumberEntered) {
       this.value = "";
     }
-    this.fireEvent("change");
+
+    if (!this.isInputReadonly) {
+      this.fireEvent("change");
+    }
   }
 
   handleSelect(e: CustomEvent) {
@@ -516,6 +521,10 @@ class UDExPhoneNumberField extends UI5Element {
     )!;
   }
 
+  get inputTabIndex(): number | undefined {
+    return this.displayonly || this.disabled ? -1 : undefined;
+  }
+
   get selectedPhonePrefix(): string {
     if (!this.countryIso) {
       return "";

package/src/ProgressBar.ts

@@ -16,7 +16,7 @@ import ProgressBarCss from "./generated/themes/ProgressBar.css.js";
  * For the <code>udex-progress-bar</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ProgressBar.js";</code>
+ * <code>import "@sapudex/web-components/dist/ProgressBar.js";</code>
  *
  * @constructor
  * @extends ProgressIndicator

package/src/RadioButton.ts

@@ -19,7 +19,7 @@ import RadioButtonCss from "./generated/themes/RadioButton.css.js";
  * For the <code>udex-radio-button</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/RadioButton.js";</code>
+ * <code>import "@sapudex/web-components/dist/RadioButton.js";</code>
  *
  * @constructor
  * @extends RadioButton

package/src/RangeSlider.ts

@@ -19,7 +19,7 @@ import SliderCss from "./generated/themes/Slider.css.js";
  * For the <code>udex-range-slider</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/RangeSlider.js";</code>
+ * <code>import "@sapudex/web-components/dist/RangeSlider.js";</code>
  *
  * @constructor
  * @extends RangeSlider

package/src/RatingBar.ts

@@ -22,7 +22,7 @@ import RatingBarCss from "./generated/themes/RatingBar.css.js";
  * For the <code>udex-rating-bar</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/RatingBar.js";</code>
+ * <code>import "@sapudex/web-components/dist/RatingBar.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -72,7 +72,7 @@ class UDExRatingBar extends UI5Element {
   _maxPercentage: number = 100;
 
   static async onDefine() {
-    UDExRatingBar.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExRatingBar.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onBeforeRendering(): void {

package/src/RatingIndicator.ts

@@ -23,7 +23,7 @@ export enum DisplayType {
  *
  * ### ES6 Module Import
  *
- * `import @udex/web-components/dist/RatingIndicator.js";`
+ * `import @sapudex/web-components/dist/RatingIndicator.js";`
  * @constructor
  * @extends RatingIndicator
  * @public

package/src/Review.ts

@@ -28,7 +28,7 @@ import ReviewCss from "./generated/themes/Review.css.js";
  * For the <code>udex-review</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Review.js";</code>
+ * <code>import "@sapudex/web-components/dist/Review.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -94,7 +94,7 @@ class UDExReview extends UI5Element {
   _maxRatingBars: number = 5;
 
   static async onDefine() {
-    UDExReview.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExReview.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get reviewsText(): string {

package/src/ReviewItem.ts

@@ -26,7 +26,7 @@ import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
  * For the <code>udex-review-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ReviewItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/ReviewItem.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -146,7 +146,7 @@ class UDExReviewItem extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExReviewItem.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExReviewItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {

package/src/Search.hbs

@@ -5,6 +5,7 @@
                 type="button"
                 role="combobox"
                 aria-expanded="{{_prefixDropdownExpanded}}"
+                aria-label="{{labelPrefix}}"
                 aria-haspopup="true"
                 aria-controls="udex-search-prefix"
                 class="udex-search__prefix-button"
@@ -27,6 +28,7 @@
     <form role="search" class="udex-search__container {{focusClasses}} {{isNotEmptyClass}}">
         {{#if labelAnimationDisabled}}
             <input
+                role="searchbox"
                 id="search-input"
                 type="search"
                 name="search"
@@ -34,8 +36,9 @@
                 autocomplete="off"
                 aria-autocomplete="list"
                 aria-haspopup="{{getAriaHasPopup}}"
-                aria-label="Search"
-                placeholder="{{label}}"
+                aria-label="{{accInfo.ariaLabel}}"
+                aria-describedby="search-description"
+                placeholder="{{effectivePlaceholder}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
                 @keydown="{{handleKeyDown}}"
@@ -51,6 +54,7 @@
                 </label>
             {{/if}}
             <input
+                role="searchbox"
                 id="search-input"
                 type="search"
                 name="search"
@@ -58,6 +62,7 @@
                 autocomplete="off"
                 aria-autocomplete="list"
                 aria-label="{{accInfo.ariaLabel}}"
+                aria-describedby="search-description"
                 aria-haspopup="{{getAriaHasPopup}}"
                 .value="{{value}}"
                 @input="{{handleSearchChange}}"
@@ -68,8 +73,11 @@
                 @click="{{handleInputClick}}"
             />
         {{/if}}
+        {{#if accInfo.ariaDescription}}
+            <span role="status" id="search-description" class="hidden" aria-hidden="true">{{accInfo.ariaDescription}}</span>
+        {{/if}}
         <div class="udex-search__icons">
-            {{#if isShowResetButton}}
+            {{#if isShowHomeResetButton}}
                 <ui5-button
                     id="reset-button"
                     class="udex-search__button udex-search__reset-button"
@@ -85,6 +93,19 @@
                     </ui5-icon>
                 </ui5-button>
             {{/if}}
+            {{#if isShowResetButton}}
+                <udex-control-button
+                    id="reset-button"
+                    class="udex-search__reset-button"
+                    design="Default"
+                    tooltip="{{tooltipInfo.tooltipResetButton}}"
+                    icon="decline"
+                    size="Large"
+                    accessible-name="{{accInfo.accessibleNameResetIcon}}"
+                    @click="{{onReset}}"
+                    @keydown="{{handleKeyDownReset}}">
+                </udex-control-button>
+            {{/if}}
             {{#if isVoiceButton}}
                 <ui5-button
                     id="voice-button"
@@ -95,23 +116,34 @@
                     @click="{{onVoice}}"
                 ></ui5-button>
             {{/if}}
-            {{#if showSubmitButton}}
-                {{#if nonInteractiveSubmitButton}}
-                    <ui5-icon
-                        class="udex-search__icon"
-                        accessible-name="{{accInfo.accessibleNameSearchIcon}}"
-                        name="search">
-                    </ui5-icon>
-                {{else}}
-                    <ui5-button
-                        id="submit-button"
-                        class="udex-search__button udex-search__submit-button {{searchButtonActiveClass}}"
-                        design="Default"
-                        icon="search"
-                        tooltip="{{tooltipInfo.tooltipSubmitButton}}"
-                        @click="{{onSubmit}}"
-                    ></ui5-button>
-                {{/if}}
+            {{#if showNonInteractiveButton}}
+              <ui5-icon
+                  class="udex-search__icon"
+                  aria-hidden="true"
+                  accessible-name="{{accInfo.accessibleNameSearchIcon}}"
+                  name="search">
+              </ui5-icon>
+            {{/if}}
+            {{#if showSubmitHomeButton}}
+              <ui5-button
+                  id="submit-button"
+                  class="udex-search__button udex-search__submit-button {{searchButtonActiveClass}}"
+                  design="Default"
+                  icon="search"
+                  tooltip="{{tooltipInfo.tooltipSubmitButton}}"
+                  @click="{{onSubmit}}"
+              ></ui5-button>
+            {{/if}}
+            {{#if showSubmitStandardButton}}
+              <udex-control-button
+                  id="submit-button"
+                  class="udex-search__submit-button"
+                  size="Large"
+                  design="Default"
+                  icon="search"
+                  tooltip="{{tooltipInfo.tooltipSubmitButton}}"
+                  @click="{{onSubmit}}"
+              ></udex-control-button>
             {{/if}}
         </div>
     </form>