@sapudex/web-components 0.117.1 → 0.138.0

package/src/PhoneNumberField.ts

@@ -7,7 +7,10 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import {
+  COUNTRY_SELECT, READ_ONLY, VALUE_STATE_ERROR, VALUE_STATE_INFORMATION, VALUE_STATE_SUCCESS, VALUE_STATE_WARNING,
+} from "./generated/i18n/i18n-defaults.js";
 import { Country, CountryListDB } from "./data/CountryListISO3166.js";
 import UDExDropdown from "./Dropdown.js";
 import UDExList from "./List.js";
@@ -199,6 +202,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
    *
@@ -258,6 +269,22 @@ class UDExPhoneNumberField extends UI5Element {
   @property({ type: String, multiple: false, noAttribute: true })
     previousKey!: string;
 
+  /**
+   * Defines the active (focus)
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    active!: boolean;
+
+  /**
+   * Defines is it the touch of the input field (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   static i18nBundle: I18nBundle;
   _dropdown!: UDExDropdown;
   _handleResizeBound: ResizeObserverCallback;
@@ -267,7 +294,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   get countrySelectorAriaLabel() {
-    return this.accessibleName || UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT);
+    return this.accessibleName || `${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)} ${this.label}`.trim();
   }
 
   get countryIso() {
@@ -352,6 +379,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   handleFocus() {
+    this.active = true;
     if (this.countryIso.length === 0) {
       this.phoneFormat = initialPlaceholder;
     }
@@ -361,7 +389,15 @@ class UDExPhoneNumberField extends UI5Element {
     }
   }
 
+  handleClick(): void {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
+  }
+
   handleBlur() {
+    this.active = false;
+    this._isTouched = false;
     this.applyPlaceholder();
 
     const prefixLength = this.selectedPhonePrefix.length;
@@ -391,9 +427,11 @@ class UDExPhoneNumberField extends UI5Element {
 
   handleDropdownOpen() {
     this.buttonIcon = OpenButtonIcon.iconUp;
+    this._dropdownExpanded = true;
   }
   handleDropdownClose() {
     this.buttonIcon = OpenButtonIcon.iconDown;
+    this._dropdownExpanded = false;
   }
 
   autoSelectCountry(value: string) {
@@ -537,6 +575,43 @@ class UDExPhoneNumberField extends UI5Element {
     });
   }
 
+  get valueStateTypeMappings() {
+    return {
+      "Success": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      "Standard": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_INFORMATION),
+      "Error": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_ERROR),
+      "Warning": UDExPhoneNumberField.i18nBundle.getText(VALUE_STATE_WARNING),
+    };
+  }
+
+  get hasValueState() {
+    return this.fieldState !== FieldState.Standard;
+  }
+
+  get valueStateText() {
+    return this.fieldState !== FieldState.Standard ? this.valueStateTypeMappings[this.fieldState] : undefined;
+  }
+
+  get readOnlyStateText() {
+    return UDExPhoneNumberField.i18nBundle.getText(READ_ONLY);
+  }
+
+  get ariaDescribedById(): string {
+    return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();
+  }
+
+  get supportingTextId():string {
+    return this.supportingText ? `${this._id}-supportingTextDesc` : "";
+  }
+
+  get valueStateTextId():string {
+    return this.hasValueState ? `${this._id}-valueStateDesc` : "";
+  }
+
+  get readOnlyStateTextId():string {
+    return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
+  }
+
   onBeforeRendering() {
     this.applyPlaceholder();
 

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/ReviewItem.hbs

@@ -0,0 +1,20 @@
+<div class="{{reviewItemClasses}}">
+    <div class="udex-review-item__rating-container">
+        <udex-rating-indicator  value="{{validatedRating}}" max="{{_maxRating}}" readonly></udex-rating-indicator>
+        {{#if date}}
+            <slot slot="date" name="date" class="udex-review-item__date"></slot>
+        {{/if}}
+    </div>
+    <div class="udex-review-item__text-container">
+        <div class="udex-review-item__title">{{reviewTitle}}</div>
+        <div class="udex-review-item__text-wrapper">
+            <p class="udex-review-item__text" id="udex-review-item__text">{{_completeText}}</p>
+            {{#if _showTextExpander}}
+                <udex-button id="reviewExpander" class="udex-review-item__text-expander" design="Invisible" size="Small" @click="{{_toggleText}}">{{buttonText}}</udex-button>
+            {{/if}}
+        </div>
+        {{#if author}}
+            <slot slot="author" name="author" class="udex-review-item__author"></slot>
+        {{/if}}
+    </div>
+</div>

package/src/ReviewItem.ts

@@ -0,0 +1,227 @@
+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 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 UDExRatingIndicator from "./RatingIndicator.js";
+import UDExButton from "./Button.js";
+import ReviewItemTemplate from "./generated/templates/ReviewItemTemplate.lit.js";
+
+// Styles
+import ReviewItemCss from "./generated/themes/ReviewItem.css.js";
+import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-review-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/ReviewItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-review-item",
+  renderer: litRender,
+  styles: ReviewItemCss,
+  template: ReviewItemTemplate,
+  dependencies: [UDExRatingIndicator, UDExButton],
+})
+
+class UDExReviewItem extends UI5Element {
+  /**
+   * Defines the position of the rating in review.
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    showRatingTop!: boolean;
+
+  /**
+   * Defines the rating in the review.
+   *
+   * @default 0
+   * @public
+   */
+  @property({ type: Number, defaultValue: 0, validator: Integer })
+    rating!: number;
+
+  /**
+   * Defines the title of the review.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    reviewTitle!: string;
+
+  /**
+   * Defines the text of the review.
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    text!: string;
+
+  /**
+   * Defines whether button for showing truncated text is shown.
+   * @default 2
+   * @private
+   */
+  @property({ type: Number, defaultValue: 2, validator: Integer })
+    _textLineLimit!: number;
+
+  /**
+   * Defines whether the text is expanded.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _textExpanded!: boolean;
+
+  /**
+   * Defines whether button for showing truncated text is shown.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _showTextExpander!: boolean;
+
+  /**
+   * Defines the text, consisting of visible and invisible parts of the original text.
+   * @default ""
+   * @private
+   */
+  @property({ type: String })
+    _completeText!: string;
+
+  /**
+   * Defines the author's name and company.
+   *
+   * @default ""
+   * @slot
+   */
+  @slot()
+    author!: Array<HTMLElement>;
+
+  /**
+   * Defines the date of the review.
+   *
+   * @default ""
+   * @slot
+   */
+  @slot()
+    date!: Array<HTMLElement>;
+
+  _toggleText() {
+    this._textExpanded = !this._textExpanded;
+    if (this._textExpanded) {
+      this._completeText = this.text;
+      this._textElement.classList.add("udex-review-item__text-expanded");
+    } else {
+      this._textElement.classList.remove("udex-review-item__text-expanded");
+      this._completeText = this._visibleText;
+    }
+  }
+
+  _handleResizeBound: ResizeObserverCallback;
+  _textElement!: HTMLElement;
+  _visibleText!: string;
+  _maxHeight: number = 48;
+  _maxRating: number = 5;
+  _minRating: number = 0;
+
+  static i18nBundle: I18nBundle;
+
+  static async onDefine() {
+    UDExReviewItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+  }
+
+  constructor() {
+    super();
+    this._handleResizeBound = this._checkTextOverflow.bind(this);
+  }
+
+  onEnterDOM(): void {
+    this._maxHeight = 48;
+    this._completeText = this.text;
+    ResizeHandler.register(this, this._handleResizeBound);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._handleResizeBound);
+  }
+
+  onAfterRendering(): void {
+    this._textElement = this.getTextElement();
+    this._checkTextOverflow();
+  }
+
+  _checkTextOverflow() {
+    const words = this.text.split(" ");
+
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d")!;
+    context.font = `16px sans-serif`;
+
+    let currentLineWidth = 0;
+    let visibleText = "";
+
+    words.forEach(word => {
+      const wordWidth = context.measureText(`${word} `).width;
+      if (currentLineWidth + wordWidth <= 2 * this._textElement.offsetWidth) {
+        visibleText += `${word} `;
+        currentLineWidth += wordWidth;
+      }
+    });
+
+    this._visibleText = visibleText;
+    if (!this._textExpanded) {
+      this._completeText = visibleText;
+    }
+
+    this._showTextExpander = (!this._textExpanded && this._completeText.length < this.text.length) || (this._textExpanded && visibleText.length < this.text.length);
+  }
+
+  get buttonText(): string {
+    return this._textExpanded ? UDExReviewItem.i18nBundle.getText(READ_LESS) : UDExReviewItem.i18nBundle.getText(READ_MORE);
+  }
+
+  get reviewItemClasses(): string {
+    const ratingTop = this.showRatingTop ? " udex-review-item__rating-top" : "";
+    return `udex-review-item${ratingTop}`;
+  }
+
+  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;
+  }
+
+  getTextElement(): HTMLElement {
+    const textElement = this.shadowRoot?.getElementById("udex-review-item__text");
+    return textElement!;
+  }
+}
+
+UDExReviewItem.define();
+
+export default UDExReviewItem;