@sapudex/web-components 0.127.6 → 0.138.0

package/dist/ReviewItem.d.ts

@@ -0,0 +1,105 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.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
+ */
+declare class UDExReviewItem extends UI5Element {
+    /**
+     * Defines the position of the rating in review.
+     * @default false
+     * @public
+     */
+    showRatingTop: boolean;
+    /**
+     * Defines the rating in the review.
+     *
+     * @default 0
+     * @public
+     */
+    rating: number;
+    /**
+     * Defines the title of the review.
+     *
+     * @default ""
+     * @public
+     */
+    reviewTitle: string;
+    /**
+     * Defines the text of the review.
+     * @default ""
+     * @public
+     */
+    text: string;
+    /**
+     * Defines whether button for showing truncated text is shown.
+     * @default 2
+     * @private
+     */
+    _textLineLimit: number;
+    /**
+     * Defines whether the text is expanded.
+     * @default false
+     * @private
+     */
+    _textExpanded: boolean;
+    /**
+     * Defines whether button for showing truncated text is shown.
+     * @default false
+     * @private
+     */
+    _showTextExpander: boolean;
+    /**
+     * Defines the text, consisting of visible and invisible parts of the original text.
+     * @default ""
+     * @private
+     */
+    _completeText: string;
+    /**
+     * Defines the author's name and company.
+     *
+     * @default ""
+     * @slot
+     */
+    author: Array<HTMLElement>;
+    /**
+     * Defines the date of the review.
+     *
+     * @default ""
+     * @slot
+     */
+    date: Array<HTMLElement>;
+    _toggleText(): void;
+    _handleResizeBound: ResizeObserverCallback;
+    _textElement: HTMLElement;
+    _visibleText: string;
+    _maxHeight: number;
+    _maxRating: number;
+    _minRating: number;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onAfterRendering(): void;
+    _checkTextOverflow(): void;
+    get buttonText(): string;
+    get reviewItemClasses(): string;
+    get validatedRating(): number;
+    getTextElement(): HTMLElement;
+}
+export default UDExReviewItem;

package/dist/ReviewItem.js

@@ -0,0 +1,157 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var UDExReviewItem_1;
+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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler 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
+ */
+let UDExReviewItem = UDExReviewItem_1 = class UDExReviewItem extends UI5Element {
+    _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;
+        }
+    }
+    static async onDefine() {
+        UDExReviewItem_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    constructor() {
+        super();
+        this._maxHeight = 48;
+        this._maxRating = 5;
+        this._minRating = 0;
+        this._handleResizeBound = this._checkTextOverflow.bind(this);
+    }
+    onEnterDOM() {
+        this._maxHeight = 48;
+        this._completeText = this.text;
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    onAfterRendering() {
+        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() {
+        return this._textExpanded ? UDExReviewItem_1.i18nBundle.getText(READ_LESS) : UDExReviewItem_1.i18nBundle.getText(READ_MORE);
+    }
+    get reviewItemClasses() {
+        const ratingTop = this.showRatingTop ? " udex-review-item__rating-top" : "";
+        return `udex-review-item${ratingTop}`;
+    }
+    get validatedRating() {
+        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() {
+        const textElement = this.shadowRoot?.getElementById("udex-review-item__text");
+        return textElement;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UDExReviewItem.prototype, "showRatingTop", void 0);
+__decorate([
+    property({ type: Number, defaultValue: 0, validator: Integer })
+], UDExReviewItem.prototype, "rating", void 0);
+__decorate([
+    property({ type: String })
+], UDExReviewItem.prototype, "reviewTitle", void 0);
+__decorate([
+    property({ type: String })
+], UDExReviewItem.prototype, "text", void 0);
+__decorate([
+    property({ type: Number, defaultValue: 2, validator: Integer })
+], UDExReviewItem.prototype, "_textLineLimit", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExReviewItem.prototype, "_textExpanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExReviewItem.prototype, "_showTextExpander", void 0);
+__decorate([
+    property({ type: String })
+], UDExReviewItem.prototype, "_completeText", void 0);
+__decorate([
+    slot()
+], UDExReviewItem.prototype, "author", void 0);
+__decorate([
+    slot()
+], UDExReviewItem.prototype, "date", void 0);
+UDExReviewItem = UDExReviewItem_1 = __decorate([
+    customElement({
+        tag: "udex-review-item",
+        renderer: litRender,
+        styles: ReviewItemCss,
+        template: ReviewItemTemplate,
+        dependencies: [UDExRatingIndicator, UDExButton],
+    })
+], UDExReviewItem);
+UDExReviewItem.define();
+export default UDExReviewItem;
+//# sourceMappingURL=ReviewItem.js.map

package/dist/ReviewItem.js.map

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

package/dist/Search.d.ts

@@ -44,7 +44,7 @@ export declare enum Mode {
  * For the <code>udex-search</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Search.js";</code>
+ * <code>import "@udex/web-components/dist/Search.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -304,6 +304,18 @@ declare class UDExSearch extends UI5Element {
      * @private
      */
     _prefixDropdownExpanded: boolean;
+    /**
+     * Defines the active (focus)
+     * @default false
+     * @private
+     */
+    active: boolean;
+    /**
+     * Defines is it the touch of the input field (only for mobile devices).
+     * @default false
+     * @private
+     */
+    _isTouched: boolean;
     constructor();
     static onDefine(): Promise<void>;
     onEnterDOM(): void;
@@ -367,7 +379,9 @@ declare class UDExSearch extends UI5Element {
     handleFocus(): void;
     handleFocusout(): void;
     onReset(e: MouseEvent): void;
+    handleReset(): void;
     handleKeyDownReset(e: KeyboardEvent): void;
+    private getSearchInput;
     onVoice(e: MouseEvent): void;
     onSpeechLaunch(): void;
     onSpeechStart(): void;

package/dist/Search.js

@@ -16,7 +16,8 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
-import { isEnter, isTabNext, isTabPrevious, isUp, isDown, isEscape, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEnter, isTabNext, isTabPrevious, isUp, isDown, isEscape, isSpace, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import List from "./List.js";
 import ListItemBase from "./ListItemBase.js";
 import "@ui5/webcomponents/dist/Icon.js";
@@ -50,7 +51,7 @@ export var Mode;
  * For the <code>udex-search</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Search.js";</code>
+ * <code>import "@udex/web-components/dist/Search.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -316,6 +317,9 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         this.dropdownPrefix[0].removeEventListener("item-press", () => { });
     }
     handleInputClick() {
+        if (!isDesktop()) {
+            this._isTouched = true;
+        }
         if (this.showPopoverWhenClickedIntoInput) {
             this.onOpenPopover();
         }
@@ -330,7 +334,7 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
     }
     handleAriaExpanded() {
         const value = this.open.toString();
-        this.shadowRoot?.querySelector("[udex-id='search-input']")?.setAttribute("aria-expanded", value);
+        this.getSearchInput()?.setAttribute("aria-expanded", value);
     }
     onOpenPopover() {
         if (this.showSuggestedPopover) {
@@ -431,6 +435,7 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         });
     }
     handleBlur() {
+        this._isTouched = false;
         if (this.value) {
             this.labelActiveClass = this._labelActiveClassName;
         }
@@ -500,28 +505,42 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
         }
     }
     handleFocus() {
+        this.active = true;
         this.isFocusedOnTextfield = true;
         this.focusClasses = this._focusActiveClassName;
         this.labelActiveClass = (this.value || !this.labelAnimationDisabled) ? this._labelActiveClassName : "";
         this.labelAnimationClass = !this.labelAnimationDisabled ? this._labelAnimationClassName : "";
     }
     handleFocusout() {
+        this.active = false;
         this.isFocusedOnTextfield = false;
         this.focusClasses = "";
     }
     onReset(e) {
         e.stopPropagation();
+        this.handleReset();
+    }
+    handleReset() {
         this.value = "";
         this.showResetButton = false;
         this.onClosePopover();
-        this.handleBlur();
         this.fireEvent("handle-value-reset");
         this.Suggestion?.resetFocusState();
+        this.focus();
     }
     handleKeyDownReset(e) {
         if (isTabPrevious(e) && this.open) {
             this.Suggestion?.handlePrevTabReset(e);
         }
+        if (isEnter(e) || isSpace(e)) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.handleReset();
+            this.getSearchInput()?.focus();
+        }
+    }
+    getSearchInput() {
+        return this.shadowRoot?.querySelector("[id='search-input']");
     }
     onVoice(e) {
         e.stopPropagation();
@@ -543,7 +562,7 @@ let UDExSearch = UDExSearch_1 = class UDExSearch extends UI5Element {
     onSpeechStart() {
         this.speechRecognition.onstart = () => {
             this.voiceActiveClass = this._voiceActiveClassName;
-            this.shadowRoot?.querySelector("[id='search-input']")?.focus();
+            this.getSearchInput()?.focus();
         };
     }
     onSpeechResult() {
@@ -767,6 +786,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExSearch.prototype, "_prefixDropdownExpanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExSearch.prototype, "_isTouched", void 0);
 UDExSearch = UDExSearch_1 = __decorate([
     customElement({
         tag: "udex-search",