@sapudex/web-components 0.117.1 → 0.138.0

package/src/Tag.ts

@@ -10,7 +10,7 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import TagTemplate from "./generated/templates/TagTemplate.lit.js";
 
 // Styles
-import TagCss from "./generated/themes/Tag.css.js";
+import TagCss from "./generated/themes/Tag.css";
 
 export enum TagType {
     Text = "Text",
@@ -24,6 +24,11 @@ export enum IconPlacement {
     End = "End"
 }
 
+export enum TagSize {
+  Small = "Small",
+  Medium = "Medium"
+}
+
 /**
  * @class
  *
@@ -35,7 +40,7 @@ export enum IconPlacement {
  * For the <code>udex-tag</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Tag.js";</code>
+ * <code>import "@udex/web-components/dist/Tag.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -58,6 +63,7 @@ export enum IconPlacement {
  * @public
  */
 @event("selectionChange")
+
 /**
  * Emitted when icon in tag was clicked
  *
@@ -65,6 +71,12 @@ export enum IconPlacement {
  * @public
  */
 @event("iconClick")
+/**
+ * Emitted when tag link was clicked
+ *
+ * @public
+ */
+@event("tagLinkClick")
 class UDExTag extends UI5Element {
   /**
    * Defines the text of the tag
@@ -74,7 +86,14 @@ class UDExTag extends UI5Element {
   */
   @property()
     text!: string;
-
+  /**
+   * Defines the href for behavior of the tag as a link
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    href!: string;
   /**
    * Defines the design type of tag
   *
@@ -83,14 +102,16 @@ class UDExTag extends UI5Element {
   */
   @property({ type: TagType, defaultValue: TagType.Grey })
     design?: `${TagType}`;
+
   /**
    * Defines the size of the component.
    *
    * @default "Small"
    * @public
    */
-  @property({ type: String, defaultValue: "Small" })
-    size!: "Small" | "Medium";
+  @property({ type: TagSize, defaultValue: TagSize.Small })
+    size!: `${TagSize}`;
+
   /**
    * Defines icon name
   *
@@ -183,7 +204,7 @@ class UDExTag extends UI5Element {
   @property({ type: Boolean })
     nonSelectable!: boolean;
 
-  onBeforeRendering() {
+  onBeforeRendering(): void {
     this.toBeDeleted = false;
   }
 
@@ -191,73 +212,93 @@ class UDExTag extends UI5Element {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
+    if (this.accessibleRole !== "button") {
+      this.shadowRoot?.firstElementChild?.removeAttribute("aria-pressed");
+    }
   }
 
-  get tagClasses() {
-    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} udex-tag-${this.design?.toLowerCase()}
-    ${this.readOnly ? "udex-tag--readonly" : ""}
-    ${this.nonSelectable ? "udex-tag--nonselectable" : ""}
-    ${this.selected ? "udex-tag--selected" : ""}`;
-  }
-
-  get startIcon() {
-    return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.Start;
-  }
-
-  get endIcon() {
-    return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.End;
-  }
-
-  setSelected() {
+  setSelected(): void {
     this.selected = !this.selected;
   }
 
-  iconClickHandler(e: Event) {
+  iconClickHandler(e: Event): void {
     e.stopPropagation();
-    if (!this.readOnly) {
-      this.fireEvent("iconClick");
-    }
+    this.fireEvent("iconClick");
   }
 
-  tagClickHandler() {
-    if (!this.readOnly && !this.toBeDeleted && !this.nonSelectable) {
+  tagClickHandler(): void {
+    if (this.isInteractiveTag) {
       this.setSelected();
       this.fireEvent("selectionChange");
     }
   }
 
-  tagKeyDown(e: KeyboardEvent) {
+  tagKeyDown(e: KeyboardEvent): void {
     if (isEnter(e)) {
       this.tagClickHandler();
     }
   }
 
-  _focusin() {
+  _focusin(): void {
     this.focused = true;
   }
 
-  _focusout() {
+  _focusout(): void {
     this.focused = !this.focused;
   }
 
-  get _tabIndex() {
-    if (this.readOnly || this.overflows || this.nonSelectable) {
+  get tagClasses(): string {
+    const hasIconClass = this.hasIcon ? "udex-tag--has-icon" : "";
+    const readOnlyClass = this.readOnly ? "udex-tag--readonly" : "";
+    const nonSelectableClass = this.nonSelectable && !this.href ? "udex-tag--nonselectable" : "";
+    const linkTagClass = this.href ? "udex-tag--link" : "";
+    const selectableClass = this.selected ? "udex-tag--selected" : "";
+    const designClass = `udex-tag-${this.design?.toLowerCase()}`;
+    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${linkTagClass} ${selectableClass}`.trim();
+  }
+
+  get startIcon(): boolean {
+    return this.hasIcon && this.iconPlacement === IconPlacement.Start;
+  }
+
+  get endIcon(): boolean {
+    return this.hasIcon && this.iconPlacement === IconPlacement.End;
+  }
+
+  get _tabIndex(): number {
+    if (this.overflows || this.nonSelectable) {
       return -1;
     }
     return 0;
   }
 
-  get textDom() {
-    return this.getDomRef()?.querySelector(".udex-tag__text");
+  get textDom(): HTMLElement {
+    return this.getDomRef()!.querySelector(".udex-tag__text")!;
   }
 
-  get isTruncatable() {
+  get isTruncatable(): boolean {
     if (!this.textDom) {
       return false;
     }
 
     return Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);
   }
+
+  get isInteractiveTag(): boolean {
+    return !this.readOnly && !this.toBeDeleted && !this.nonSelectable;
+  }
+
+  get hasIcon(): boolean {
+    return !!this.icon && !this.readOnly;
+  }
+
+  get iconAccessibleName(): string {
+    return this.accessibleName || this.text;
+  }
+
+  tagLinkClickHandler(e: Event): void {
+    this.fireEvent("tagLinkClick", { originalEvent: e }, true);
+  }
 }
 
 UDExTag.define();

package/src/TagGroup.hbs

@@ -0,0 +1,48 @@
+<div id="{{_id}}-tag-group" @ui5-selectionChange="{{tagClickHandler}}" role="group">
+    <ui5-tokenizer
+            part="tokenizer"
+            show-more
+            prevent-popover-open
+            ?disabled="{{disabled}}"
+            id="{{_id}}-tag-group-tokenizer"
+            class="udex-tag-group__tokenizer"
+            @ui5-show-more-items-press="{{showMoreItems}}"
+            ?expanded="{{tokenizerExpanded}}">
+        {{#each items}}
+            {{>TAG}}
+        {{/each}}
+    </ui5-tokenizer>
+    {{#if _isHiddenTags}}
+        <udex-tooltip @keydown="{{handleShowMoreButtonKeydown}}" id="{{_id}}-tag-group-tooltip" placement="{{tooltipPlacement}}">
+            <div role="group" class="udex-tag-group-tooltip__content">
+                {{#each hiddenTags}}
+                    {{>TAG}}
+                {{/each}}
+            </div>
+        </udex-tooltip>
+    {{/if}}
+</div>
+
+{{#*inline "TAG"}}
+    <udex-tag
+            role="{{../tagRole}}"
+            accessible-role="option"
+            class="udex-tag-group__tag"
+            data-id="{{this.id}}"
+            part="token-{{@index}}"
+            ?read-only="{{../isReadOrDisplayOnly}}"
+            tabindex="{{../tagTabIndex}}"
+            id="{{_id}}-tag-group-tag"
+            text="{{this.text}}"
+            icon="{{this.icon}}"
+            href="{{this.href}}"
+            design="{{this.design}}"
+            size="{{this.size}}"
+            icon-placement="{{this.iconPlacement}}"
+            accessible-name="{{this.accessibleName}}"
+            ?non-selectable="{{this.nonSelectable}}"
+            ?data-overflows="{{this.overflows}}"
+            @keydown="{{../handleTagKeyDown}}"
+            @iconClick="{{../tagIconClickHandler}}">
+        ></udex-tag>
+{{/inline}}

package/src/TagGroup.ts

@@ -0,0 +1,222 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import { isEnter, isSpace, isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Token from "@ui5/webcomponents/dist/Token.js";
+import UDExTag from "./Tag.js";
+import UDExTooltip from "./Tooltip.js";
+
+import TagGroupTemplate from "./generated/templates/TagGroupTemplate.lit.js";
+
+// Styles
+import TagGroupCss from "./generated/themes/TagGroup.css";
+
+export enum PlacementType {
+  Left = "Left",
+  Right = "Right",
+  Top = "Top",
+  Bottom = "Bottom",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tag-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/TagGroup.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-tag-group",
+  renderer: litRender,
+  styles: TagGroupCss,
+  template: TagGroupTemplate,
+  dependencies: [UDExTag, UDExTooltip, Tokenizer, Token],
+})
+/**
+ * Emitted when tag was clicked
+ *
+ * @public
+ */
+@event("tag-click")
+/**
+ * Emitted when icon in tag was clicked
+ *
+ * @public
+ */
+@event("tag-icon-click")
+/**
+ * Emitted when the tooltip was opened, can be canceled
+ *
+ * @public
+ */
+@event("show-more-tags")
+/**
+ * Emitted  when a keydown event occurs on a tag, can be canceled
+ * Emitted custom event with keycode and tag details
+ *
+ * @public
+ */
+@event("tag-keydown")
+class UDExTagGroup extends UI5Element {
+  /**
+   * Defines whether the UI5Tokenizer is expanded.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    tokenizerExpanded!: boolean;
+  /**
+   * Defines whether the component is in disabled state.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    disabled!: boolean;
+
+  /**
+   * Defines whether the component is readonly.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    readonly!: boolean;
+
+  /**
+   * Defines whether the component is displayonly.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    displayonly!: boolean;
+
+  /**
+   * Defines the tags.
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExTag>;
+
+  /**
+   * Determines on which side of the component the Tooltip is displayed.
+   *
+   * @default "Bottom"
+   * @public
+   */
+  @property({ type: PlacementType, defaultValue: PlacementType.Bottom })
+    tooltipPlacement!: `${PlacementType}`;
+
+  /**
+   * @private
+   */
+  @property({ type: Boolean })
+    _isHiddenTags!: boolean;
+
+  _tokenizer!: Tokenizer;
+  _nMoreBtn!: HTMLElement | null;
+  _resizeHandler: () => void;
+
+  constructor() {
+    super();
+    this._resizeHandler = this._onResize.bind(this);
+  }
+
+  get hiddenTags(): Token[] {
+    return this._tokenizer?.overflownTokens || [];
+  }
+
+  get isReadOrDisplayOnly(): boolean {
+    return this.readonly || this.displayonly;
+  }
+
+  get tagTabIndex(): string {
+    return this.disabled ? "-1" : "";
+  }
+
+  get tokenizer(): Tokenizer {
+    return this.shadowRoot!.querySelector<Tokenizer>(`#${this._id}-tag-group-tokenizer`)!;
+  }
+
+  get tagRole(): string {
+    return this.displayonly || this.readonly ? "option" : "";
+  }
+
+  onAfterRendering(): void {
+    this._tokenizer = this.tokenizer;
+    this._nMoreBtn = this._tokenizer.shadowRoot?.querySelector(`.ui5-tokenizer-more-text`) || null;
+    if (!this.readonly && !this.disabled && this._nMoreBtn && !this._nMoreBtn.hasAttribute("tabindex")) {
+      this._nMoreBtn.setAttribute("tabindex", "0");
+      this._nMoreBtn.addEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
+    }
+  }
+
+  _nMoreKeyDownHandler(e: Event) {
+    if (isSpace(e as KeyboardEvent) || isEnter(e as KeyboardEvent)) {
+      this.showMoreItems();
+    }
+  }
+
+  onEnterDOM(): void {
+    ResizeHandler.register(this, this._resizeHandler);
+  }
+
+  onExitDOM(): void {
+    ResizeHandler.deregister(this, this._resizeHandler);
+    this._nMoreBtn?.removeEventListener("keydown", this._nMoreKeyDownHandler.bind(this));
+  }
+
+  _onResize(): void {
+    this._isHiddenTags = false;
+    this._isHiddenTags = this._tokenizer?._nMoreCount > 0;
+  }
+
+  tagClickHandler(e: CustomEvent): void {
+    this.fireEvent("tag-click", { tag: e.target as HTMLElement });
+  }
+
+  tagIconClickHandler(e: CustomEvent): void {
+    this.fireEvent("tag-icon-click", { tag: e.target as HTMLElement });
+  }
+
+  handleShowMoreButtonKeydown(e: KeyboardEvent): void {
+    if (isEscape(e)) {
+      this._nMoreBtn?.focus();
+    }
+  }
+
+  handleTagKeyDown(e: KeyboardEvent): void {
+    this.fireEvent("tag-keydown", { originalEvent: e }, true);
+  }
+
+  showMoreItems(): void {
+    if (this.fireEvent("show-more-tags", {}, true)) {
+      const tooltip = this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
+      if (this._nMoreBtn) {
+        tooltip?.onOpen(this._nMoreBtn);
+      }
+    }
+  }
+}
+
+UDExTagGroup.define();
+
+export default UDExTagGroup;

package/src/TextArea.hbs

@@ -1,39 +1,41 @@
 <div class="udex-textarea">
-  {{#if label}}
-    <label
-      class="{{labelClasses}}"
-      for="textarea"
-      part="label"
-    >
-      {{label}}
-      {{#if required}}
-        *
+  <div class="udex-textarea__wrapper">
+      {{#if label}}
+        <label
+          class="{{labelClasses}}"
+          for="textarea"
+          part="label"
+        >
+          {{label}}
+          {{#if required}}
+            *
+          {{/if}}
+        </label>
       {{/if}}
-    </label>
-  {{/if}}
-  <textarea
-    id="textarea"
-    class="udex-textarea__field"
-    part="textarea"
-    .value="{{value}}"
-    maxlength="{{maxlength}}"
-    rows="{{rows}}"
-    ?disabled="{{disabled}}"
-    ?readonly="{{isInputReadonly}}"
-    ?required="{{required}}"
-    aria-label="{{accessibleName}}"
-    aria-describedby="{{ariaDescribedBy}}"
-    aria-labelledby="{{accessibleNameRef}}"
-    aria-required="{{required}}"
-    aria-readonly="{{isInputReadonly}}"
-    aria-disabled="{{disabled}}"
-    aria-invalid="{{ariaInvalid}}"
-    @input="{{handleInput}}"
-    @focus="{{handleFocus}}"
-    @blur="{{handleBlur}}"
-    @change="{{handleChange}}"
-  >
-  </textarea>
+      <textarea
+        id="textarea"
+        class="udex-textarea__field"
+        part="textarea"
+        .value="{{value}}"
+        maxlength="{{maxlength}}"
+        rows="{{rows}}"
+        ?disabled="{{disabled}}"
+        ?readonly="{{isInputReadonly}}"
+        ?required="{{required}}"
+        ?aria-label="{{accessibleName}}"
+        ?aria-describedby="{{ariaDescribedBy}}"
+        ?aria-labelledby="{{accessibleNameRef}}"
+        aria-required="{{required}}"
+        aria-readonly="{{isInputReadonly}}"
+        aria-invalid="{{ariaInvalid}}"
+        @input="{{handleInput}}"
+        @focus="{{handleFocus}}"
+        @click="{{handleClick}}"
+        @blur="{{handleBlur}}"
+        @change="{{handleChange}}"
+      >
+     </textarea>
+  </div>
   {{#if _supportingText}}
     <udex-status-message 
     supporting-text-alignment="Right"

package/src/TextArea.ts

@@ -6,6 +6,7 @@ import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEff
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   READ_ONLY, TEXTAREA_CHARACTERS_LEFT, VALUE_STATE_TYPE_ERROR, VALUE_STATE_TYPE_STANDARD, VALUE_STATE_TYPE_SUCCESS, VALUE_STATE_TYPE_WARNING,
 } from "./generated/i18n/i18n-defaults.js";
@@ -214,6 +215,21 @@ class UDExTextArea extends UI5Element {
   @property({ defaultValue: "" })
     accessibleNameRef!: string;
 
+  /**
+   * Defines the active (focus)
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    active!: boolean;
+  /**
+   * Defines is it the touch of the textarea (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
@@ -257,6 +273,9 @@ class UDExTextArea extends UI5Element {
     const valueStateTextDescId = this.hasValueState ? `${this._id}-valueStateDesc` : "";
     const readonlyTextDescId = this.readonly ? `${this._id}-readonlyDesc` : "";
     const supportingTextDescId = this._supportingText ? `${this._id}-supportingTextDesc` : "";
+    if (!valueStateTextDescId && !supportingTextDescId && !readonlyTextDescId) {
+      return;
+    }
     return `${valueStateTextDescId} ${supportingTextDescId} ${readonlyTextDescId}`;
   }
 
@@ -314,16 +333,25 @@ class UDExTextArea extends UI5Element {
 
   handleFocus = () => {
     if (!this.disabled && !this.readonly && !this.displayonly) {
+      this.active = true;
       this.labelActiveClass = this._labelActiveClassName;
     }
   };
 
+  handleClick(): void {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
+  }
+
   handleBlur = () => {
+    this._isTouched = false;
     if (this.value) {
       this.labelActiveClass = this._labelActiveClassName;
     } else {
       this.labelActiveClass = "";
     }
+    this.active = false;
   };
 
   get ariaInvalid() {