@sapudex/web-components 0.127.6 → 0.138.0

package/src/MediaPlayer.ts

@@ -50,7 +50,7 @@ export interface VideoJSPlayer extends Player{
  * For the <code>udex-media-player</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/MediaPlayer.js";</code>
+ * <code>import "@udex/web-components/dist/MediaPlayer.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -357,41 +357,135 @@ class UDExMediaPlayer extends UI5Element {
     return this.shadowRoot?.querySelector(".video-js video") as HTMLVideoElement || this.shadowRoot?.querySelector(".video-js audio") || null;
   }
 
-  get optionsValue() {
+  setupHotkeys(e: KeyboardEvent, player: VideoJSPlayer) {
+    // Back to start
+    if (e.key === "0") {
+      e.preventDefault();
+      e.stopPropagation();
+      player.currentTime(0);
+      player.play();
+      return;
+    }
+
+    // Full screen toggle
+    if (e.key.toLowerCase() === "f") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!player.isFullscreen()) {
+        player.requestFullscreen();
+      } else {
+        player.exitFullscreen();
+      }
+      return;
+    }
+
+    // Mute / Unmute
+    if (e.key.toLowerCase() === "m") {
+      e.preventDefault();
+      e.stopPropagation();
+      player.muted(!player.muted());
+      return;
+    }
+
+    // Play / Pause
+    if (e.key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      if (player.paused()) {
+        player.play();
+      } else {
+        player.pause();
+      }
+      return;
+    }
+
+    // Speed up the video - set higher playback rate
+    if (e.key === "ArrowRight" && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const playbackRatesOptions: Array<number> = player.options_.playbackRates;
+      const currentRateIndex = playbackRatesOptions.indexOf(player.playbackRate() ?? 1);
+      if (currentRateIndex < playbackRatesOptions.length - 1) {
+        const newPlaybackRate = currentRateIndex + 1;
+        player.playbackRate(playbackRatesOptions[newPlaybackRate]);
+      }
+      return;
+    }
+
+    // Slow down the video - set lower playback rate
+    if (e.key === "ArrowLeft" && e.shiftKey) {
+      e.preventDefault();
+      e.stopPropagation();
+      const playbackRatesOptions: Array<number> = player.options_.playbackRates;
+      const currentRateIndex = playbackRatesOptions.indexOf(player.playbackRate() ?? 1);
+      if (currentRateIndex > 0) {
+        const newPlaybackRate = currentRateIndex - 1;
+        player.playbackRate(playbackRatesOptions[newPlaybackRate]);
+      }
+      return;
+    }
+
+    // Skip forward / Skip backward
+    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+      e.preventDefault();
+      e.stopPropagation();
+      const stepSeconds = player.controlBar.progressControl.seekBar.options_.stepSeconds;
+      const duration: number = player.duration() ?? 0;
+      const currentTime: number = player.currentTime() ?? 0;
+      const delta: number = (e.key === "ArrowRight" ? stepSeconds : -stepSeconds);
+      const newTime = Math.min(Math.max(currentTime + delta, 0), duration);
+      player.currentTime(newTime);
+      return;
+    }
+
+    // Volume change
+    if (((e.key === "ArrowUp" || e.key === "ArrowDown") && e.ctrlKey)
+      || ((e.key === "ArrowUp" || e.key === "ArrowDown") && e.metaKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      const volumeStep: number = 0.1;
+      const volume: number = player.volume() ?? 0;
+      let newVolume = volume + (e.key === "ArrowUp" ? volumeStep : -volumeStep);
+      newVolume = Math.min(Math.max(newVolume, 0), 1);
+      player.volume(newVolume);
+    }
+  }
+
+  getOptionsValue() {
     const baseOptions = {
       playbackRates: [1, 1.5, 2],
       controls: true,
-      audioOnly: this.audioOnly,
       poster: this.poster,
+      audioOnly: this.audioOnly,
       controlBar: {
-        children: [
-          "PlayToggle",
-          "VolumePanel",
-          "ProgressControl",
-          "RemainingTimeDisplay",
-          "SubsCapsButton",
-          "PlaybackRateMenuButton",
-          "FullscreenToggle",
-          "MediaLoader",
-        ],
+        playToggle: true,
+        volumePanel: true,
+        progressControl: {
+          seekBar: {
+            stepSeconds: 10,
+          },
+        },
+        remainingTimeDisplay: true,
+        subsCapsButton: true,
+        playbackRateMenuButton: true,
+        fullscreenToggle: true,
+        pictureInPictureToggle: false,
       },
       userActions: {
-        hotkeys: true,
+        hotkeys: (e: KeyboardEvent) => {
+          this.setupHotkeys(e, this.player);
+        },
       },
     };
 
-    if (typeof this.options === "string") {
-      return this.options ? {
-        ...baseOptions,
-        ...JSON.parse(this.options),
-      } : baseOptions;
+    if (!this.options) {
+      return baseOptions;
     }
 
-    return this.options;
-  }
-
-  get dataSetup() {
-    return JSON.stringify(this.optionsValue);
+    return {
+      ...baseOptions,
+      ...JSON.parse(this.options),
+    };
   }
 
   async setupLanguage(language: string) {
@@ -411,12 +505,14 @@ class UDExMediaPlayer extends UI5Element {
       if (this.enableGlobalDependency) {
         window.videojs = videojs;
       }
-      const language: string = this.optionsValue?.language;
+
+      const options = this.getOptionsValue();
+      const language: string = options?.language;
       if (language) {
         videojs.addLanguage(language, await this.setupLanguage(language));
       }
 
-      this.player = videojs(this.shadowRoot?.querySelector(".video-js") || "");
+      this.player = videojs(this.shadowRoot?.querySelector(".video-js") || "", options);
       this.attachListeners(this.player);
 
       if (this.audioOnly) { return; }

package/src/PhoneNumberField.hbs

@@ -53,10 +53,9 @@
                 design="Tertiary"
                 icon-end
                 ?disabled="{{isButtonDisabled}}"
-                aria-disabled="{{isButtonDisabled}}"
                 aria-haspopup="true"
+                accessible-name-ref="{{_id}}-countrySelectorAriaLabel {{ariaDescribedById}}"
                 aria-label="{{countrySelectorAriaLabel}}"
-                accessible-name="{{countrySelectorAriaLabel}}"
                 aria-expanded="{{_dropdownExpanded}}"
                 aria-controls="{{this._id}}_dropdown-menu"
                 role="combobox"
@@ -85,13 +84,15 @@
             ?required="{{required}}"
             autocomplete="tel"
             aria-label="{{accessibleName}}"
-            aria-labelledby="{{accessibleNameRef}}"
+            aria-labelledby="{{accessibleName}}"
             aria-required="{{required}}"
             aria-readonly="{{isInputReadonly}}"
             aria-disabled="{{disabled}}"
             aria-invalid="{{ariaInvalid}}"
+            aria-describedby="{{ariaDescribedById}}"
             @input="{{handleInput}}"
             @change="{{handleChange}}"
+            @click="{{handleClick}}"
             @focus="{{handleFocus}}"
             @blur="{{handleBlur}}"
             @keydown={{handleKeyDown}}
@@ -106,3 +107,17 @@
   value-state="{{fieldState}}">
   </udex-status-message>
 {{/if}}
+
+{{#if supportingText}}
+  <span id="{{_id}}-supportingTextDesc" class="hidden-text">{{supportingText}}</span>
+{{/if}}
+
+{{#if hasValueState}}
+  <span id="{{_id}}-valueStateDesc" class="hidden-text">{{valueStateText}}</span>
+{{/if}}
+
+{{#if readonly}}
+  <span id="{{_id}}-stateReadOnlyDesc" class="hidden-text">{{readOnlyStateText}}</span>
+{{/if}}
+
+<span id="{{_id}}-countrySelectorAriaLabel" class="hidden-text">{{countrySelectorAriaLabel}}</span>

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";
@@ -266,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;
@@ -275,7 +294,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   get countrySelectorAriaLabel() {
-    return this.accessibleName || `${this.label} ${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)}`;
+    return this.accessibleName || `${UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT)} ${this.label}`.trim();
   }
 
   get countryIso() {
@@ -360,6 +379,7 @@ class UDExPhoneNumberField extends UI5Element {
   }
 
   handleFocus() {
+    this.active = true;
     if (this.countryIso.length === 0) {
       this.phoneFormat = initialPlaceholder;
     }
@@ -369,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;
@@ -547,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/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;