@sapudex/web-components 0.224.0 → 2.0.0

package/src/RadioButton.ts

@@ -1,11 +1,15 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+  VALUE_STATE_ERROR, VALUE_STATE_SUCCESS, VALUE_STATE_INFORMATION, VALUE_STATE_WARNING,
+} from "./generated/i18n/i18n-defaults.js";
 import RadioButton from "@ui5/webcomponents/dist/RadioButton.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import RadioButtonValueState from "./types/RadioButton.js";
 
 // Styles
-import radioButtonCss from "@ui5/webcomponents/dist/generated/themes/RadioButton.css.js";
 import RadioButtonCss from "./generated/themes/RadioButton.css.js";
 
 /**
@@ -27,9 +31,10 @@ import RadioButtonCss from "./generated/themes/RadioButton.css.js";
  */
 @customElement({
   tag: "udex-radio-button",
-  renderer: litRender,
-  styles: [radioButtonCss, RadioButtonCss],
+  renderer: jsxRenderer,
+  styles: [RadioButton.styles, RadioButtonCss],
 })
+
 class UDExRadioButton extends RadioButton {
   /**
    * Define if arrow icons for last and first page are visible.
@@ -40,8 +45,36 @@ class UDExRadioButton extends RadioButton {
   @property({ type: Boolean })
     displayOnly!: boolean;
 
-  onAfterRendering() {
+  /**
+   * Defines the value state of the component.
+   * @default "None"
+   * @public
+   */
+  @property()
+  /** @ts-expect-error */
+    valueState!: `${RadioButtonValueState}` = RadioButtonValueState.None;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  onAfterRendering(): void {
     this.readonly = this.readonly || this.displayOnly;
+    this.syncGroup();
+  }
+
+  get valueStateText(): string {
+    switch (this.valueState) {
+    case RadioButtonValueState.Error:
+      return RadioButton.i18nBundle.getText(VALUE_STATE_ERROR);
+    case RadioButtonValueState.Success:
+      return RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS);
+    case RadioButtonValueState.Information:
+      return RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION);
+    case RadioButtonValueState.Warning:
+      return RadioButton.i18nBundle.getText(VALUE_STATE_WARNING);
+    default:
+      return "";
+    }
   }
 }
 

package/src/RangeSlider.ts

@@ -1,5 +1,5 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import RangeSlider from "@ui5/webcomponents/dist/RangeSlider.js";
 import SliderBase from "@ui5/webcomponents/dist/SliderBase.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -27,7 +27,7 @@ import SliderCss from "./generated/themes/Slider.css.js";
  */
 @customElement({
   tag: "udex-range-slider",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [SliderBase.styles, rangeSliderCss, SliderCss],
 })
 class UDExRangeSlider extends RangeSlider {

package/src/RatingBar.ts

@@ -2,10 +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 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 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 "@ui5/webcomponents-icons/dist/favorite.js";
 import RatingBarTemplate from "./generated/templates/RatingBarTemplate.lit.js";
 
 // Styles
@@ -43,8 +44,8 @@ class UDExRatingBar extends UI5Element {
     * @default 0
     * @public
     */
-  @property({ type: Number, defaultValue: 0, validator: Integer })
-    rating!: number;
+  @property({ type: Number })
+    rating: number = 0;
 
   /**
     * Defines the percentage.
@@ -52,8 +53,8 @@ class UDExRatingBar extends UI5Element {
     * @default 0
     * @public
     */
-  @property({ type: Number, defaultValue: 0, validator: Integer })
-    percentage!: number;
+  @property({ type: Number })
+    percentage: number = 0;
 
   /**
     * Defines wether the percentage is shown or not.
@@ -64,6 +65,7 @@ class UDExRatingBar extends UI5Element {
   @property({ type: Boolean })
     showPercentage!: boolean;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
   _minRating: number = 0;
@@ -71,10 +73,6 @@ class UDExRatingBar extends UI5Element {
   _minPercentage: number = 0;
   _maxPercentage: number = 100;
 
-  static async onDefine() {
-    UDExRatingBar.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   onBeforeRendering(): void {
     this.style.setProperty("--udex-rating-bar-progress", `${this.percentage}%`);
   }

package/src/RatingIndicator.ts

@@ -4,14 +4,18 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import RatingIndicator from "@ui5/webcomponents/dist/RatingIndicator.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { TOTAL } from "./generated/i18n/i18n-defaults.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import "@ui5/webcomponents-icons/dist/unfavorite.js";
 
-export enum DisplayType {
+export enum UDExDisplayType {
   Desktop = "Desktop",
   Mobile = "Mobile"
 }
@@ -44,8 +48,8 @@ class UDExRatingIndicator extends RatingIndicator {
    * @default "Desktop"
    * @public
    */
-  @property({ defaultValue: DisplayType.Desktop })
-    display!: `${DisplayType}`;
+  @property()
+    display: `${UDExDisplayType}` = UDExDisplayType.Desktop;
 
   /**
     * The number of total votes.
@@ -55,12 +59,15 @@ class UDExRatingIndicator extends RatingIndicator {
   @property()
     totalCount!: number;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   get classNames(): string {
     return `udex-rating-indicator--${this.display.toLowerCase()}`;
   }
 
-  get _ariaLabel() {
-    const ariaLabelText = getEffectiveAriaLabelText(this);
+  get _ariaLabel(): string {
+    const ariaLabelText: string = getEffectiveAriaLabelText(this) || "";
     if (this.totalCount) {
       return `${ariaLabelText ? `${ariaLabelText}, ` : ""}${RatingIndicator.i18nBundle.getText(TOTAL)} ${this.totalCount}`;
     }

package/src/Review.ts

@@ -4,14 +4,13 @@ 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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { REVIEWS, STARS } from "./generated/i18n/i18n-defaults.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
 import UDExRatingBar from "./RatingBar.js";
 import UDExRatingIndicator from "./RatingIndicator.js";
-import UDExButton from "./Button.js";
-import "@ui5/webcomponents-icons/dist/favorite.js";
+import type UDExButton from "./Button.js";
 import ReviewTemplate from "./generated/templates/ReviewTemplate.lit.js";
 
 // Styles
@@ -49,8 +48,8 @@ class UDExReview extends UI5Element {
    * @default 0
    * @public
    */
-  @property({ type: Number, defaultValue: 0, validator: Float })
-    rating!: number;
+  @property({ type: Number })
+    rating: number = 0;
 
   /**
    * Defines the total number of reviews.
@@ -58,8 +57,8 @@ class UDExReview extends UI5Element {
    * @default 0
    * @public
    */
-  @property({ type: Number, defaultValue: 0, validator: Integer })
-    reviews!: number;
+  @property({ type: Number })
+    reviews: number = 0;
 
   /**
    * Slot for a button for writing a review.
@@ -88,15 +87,13 @@ class UDExReview extends UI5Element {
   @slot({ type: HTMLElement, "default": true, individualSlots: true })
     bars!: Array<UDExRatingBar>;
 
+  @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
+
   _minRating: number = 0;
   _maxRating: number = 5;
   _maxRatingBars: number = 5;
 
-  static async onDefine() {
-    UDExReview.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   get reviewsText(): string {
     return `${this.reviews} ${UDExReview.i18nBundle.getText(REVIEWS)}`;
   }

package/src/ReviewItem.ts

@@ -4,9 +4,10 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import UDExRatingIndicator from "./RatingIndicator.js";
 import UDExButton from "./Button.js";
 import ReviewItemTemplate from "./generated/templates/ReviewItemTemplate.lit.js";
@@ -55,8 +56,8 @@ class UDExReviewItem extends UI5Element {
    * @default 0
    * @public
    */
-  @property({ type: Number, defaultValue: 0, validator: Integer })
-    rating!: number;
+  @property({ type: Number })
+    rating: number = 0;
 
   /**
    * Defines the title of the review.
@@ -80,8 +81,8 @@ class UDExReviewItem extends UI5Element {
    * @default 2
    * @private
    */
-  @property({ type: Number, defaultValue: 2, validator: Integer })
-    _textLineLimit!: number;
+  @property({ type: Number })
+    _textLineLimit: number = 2;
 
   /**
    * Defines whether the text is expanded.
@@ -125,6 +126,9 @@ class UDExReviewItem extends UI5Element {
   @slot()
     date!: Array<HTMLElement>;
 
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
   _toggleText() {
     this._textExpanded = !this._textExpanded;
     if (this._textExpanded) {
@@ -143,12 +147,6 @@ class UDExReviewItem extends UI5Element {
   _maxRating: number = 5;
   _minRating: number = 0;
 
-  static i18nBundle: I18nBundle;
-
-  static async onDefine() {
-    UDExReviewItem.i18nBundle = await getI18nBundle("@sapudex/web-components");
-  }
-
   constructor() {
     super();
     this._handleResizeBound = this._checkTextOverflow.bind(this);

package/src/Search.hbs

@@ -11,14 +11,14 @@
                 class="udex-search__prefix-button"
                 @click="{{handleDropdownClick}}">
                 <span class="udex-search__prefix-label">{{labelPrefix}}</span>
-                <ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down"></ui5-icon>
+                <ui5-icon class="udex-search__prefix-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>
             </button>
             <ui5-popover
                 id="udex-search-prefix"
                 class="{{prefixPopoverClasses}}"
                 hide-arrow
-                placement-type="Bottom"
-                horizontal-align="Left"
+                placement="Bottom"
+	            horizontal-align="Start"
                 style="{{prefixPopoverStyles}}"
                 @after-close="{{handleAfterClosePrefixPopover}}">
                 <slot></slot>
@@ -78,9 +78,10 @@
         {{/if}}
         <div class="udex-search__icons">
             {{#if isShowHomeResetButton}}
-                <ui5-button
+                <udex-button
                     id="reset-button"
                     class="udex-search__button udex-search__reset-button"
+                    size="Small"
                     design="Default"
                     tooltip="{{tooltipInfo.tooltipResetButton}}"
                     @click="{{onReset}}"
@@ -91,7 +92,7 @@
                         accessible-role="presentation"
                         name="decline">
                     </ui5-icon>
-                </ui5-button>
+                </udex-button>
             {{/if}}
             {{#if isShowResetButton}}
                 <udex-control-button
@@ -107,14 +108,15 @@
                 </udex-control-button>
             {{/if}}
             {{#if isVoiceButton}}
-                <ui5-button
+                <udex-button
                     id="voice-button"
                     class="udex-search__button udex-search__voice-button {{voiceActiveClass}}"
                     design="Default"
+                    size="Small"
                     icon="microphone"
                     tooltip="{{tooltipInfo.tooltipVoiceButton}}"
                     @click="{{onVoice}}"
-                ></ui5-button>
+                ></udex-button>
             {{/if}}
             {{#if showNonInteractiveButton}}
               <ui5-icon
@@ -125,14 +127,15 @@
               </ui5-icon>
             {{/if}}
             {{#if showSubmitHomeButton}}
-              <ui5-button
+              <udex-button
                   id="submit-button"
                   class="udex-search__button udex-search__submit-button {{searchButtonActiveClass}}"
                   design="Default"
                   icon="search"
+                  size="Small"
                   tooltip="{{tooltipInfo.tooltipSubmitButton}}"
                   @click="{{onSubmit}}"
-              ></ui5-button>
+              ></udex-button>
             {{/if}}
             {{#if showSubmitStandardButton}}
               <udex-control-button
@@ -148,3 +151,5 @@
         </div>
     </form>
 </div>
+
+{{>include "./SearchSuggestions.hbs"}}