@sapudex/web-components 0.127.6 → 0.143.0

package/src/Tag.ts

@@ -40,7 +40,7 @@ export enum TagSize {
  * 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
@@ -71,6 +71,12 @@ export enum TagSize {
  * @public
  */
 @event("iconClick")
+/**
+ * Emitted when tag link was clicked
+ *
+ * @public
+ */
+@event("tagLinkClick")
 class UDExTag extends UI5Element {
   /**
    * Defines the text of the tag
@@ -80,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
   *
@@ -199,6 +212,9 @@ class UDExTag extends UI5Element {
     if (isDesktop()) {
       this.setAttribute("desktop", "");
     }
+    if (this.accessibleRole !== "button") {
+      this.shadowRoot?.firstElementChild?.removeAttribute("aria-pressed");
+    }
   }
 
   setSelected(): void {
@@ -234,10 +250,11 @@ class UDExTag extends UI5Element {
   get tagClasses(): string {
     const hasIconClass = this.hasIcon ? "udex-tag--has-icon" : "";
     const readOnlyClass = this.readOnly ? "udex-tag--readonly" : "";
-    const nonSelectableClass = this.nonSelectable ? "udex-tag--nonselectable" : "";
+    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} ${selectableClass}`.trim();
+    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} ${designClass} ${hasIconClass} ${readOnlyClass} ${nonSelectableClass} ${linkTagClass} ${selectableClass}`.trim();
   }
 
   get startIcon(): boolean {
@@ -278,6 +295,10 @@ class UDExTag extends UI5Element {
   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,38 +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-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,10 +215,25 @@ 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() {
-    UDExTextArea.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+    UDExTextArea.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
   getInputDomRef() {
@@ -317,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() {

package/src/TextField.hbs

@@ -16,6 +16,7 @@
          @input="{{handleInput}}"
          @focus="{{handleFocus}}"
          @blur="{{handleBlur}}"
+         @click="{{handleClick}}"
          @keydown="{{handleKeyDown}}"
          maxlength="{{maxlength}}"
          ?disabled="{{disabled}}"
@@ -25,9 +26,10 @@
          aria-readonly="{{isInputReadonly}}"
          ?aria-disabled="{{readonlyNotDisabled}}"
          aria-invalid="{{accInfo.ariaInvalid}}"
-         ?aria-describedby="{{accInfo.ariaDescribedBy}}"
-         ?aria-label="{{accInfo.ariaLabel}}"
-         ?aria-labelledby="{{accInfo.ariaLabelledBy}}"
+         aria-describedby="{{accInfo.ariaDescribedBy}}"
+         aria-haspopup="{{accInfo.ariaHasPopup}}"
+         aria-label="{{accInfo.ariaLabel}}"
+         aria-labelledby="{{accInfo.ariaLabelledBy}}"
          part="textfield-input"
          min="{{min}}"
          max="{{max}}"
@@ -52,9 +54,9 @@
 
   {{#if supportingText}}
     <udex-status-message
-    ?disabled="{{disabled}}"
-    supporting-text="{{supportingText}}"
-    value-state="{{valueState}}">
+      ?disabled="{{disabled}}"
+      supporting-text="{{supportingText}}"
+      value-state="{{valueState}}">
     </udex-status-message>
   {{/if}}
 

package/src/TextField.ts

@@ -8,6 +8,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
   VALUE_STATE_SUCCESS,
   VALUE_STATE_INFORMATION,
@@ -17,13 +18,21 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import UDExControlButton from "./ControlButton.js";
 import ValueState from "./types/common.js";
+import UDExStatusMessage from "./StatusMessage.js";
 
 // Template
 import TextFieldTemplate from "./generated/templates/TextFieldTemplate.lit";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
-import UDExStatusMessage from "./StatusMessage.js";
+
+type AccInfo = {
+  ariaInvalid?: string;
+  ariaDescribedBy?: string;
+  ariaLabelledBy?: string;
+  ariaLabel?: string;
+  ariaHasPopup?: string,
+}
 
 /**
  * @class
@@ -176,8 +185,8 @@ class UDExTextField extends UI5Element {
    * @default "Standard"
    * @public
    */
-  @property({ type: ValueState, defaultValue: "Standard" })
-    valueState!: "Standard" | "Warning" | "Error" | "Success";
+  @property({ type: ValueState, defaultValue: ValueState.Standard })
+    valueState!: `${ValueState}`;
 
   /**
    * Defines supporting text under the input field.
@@ -287,13 +296,28 @@ class UDExTextField extends UI5Element {
   @property()
     ariaDescribedBy?: string;
 
+  /**
+   * Defines the aria-has-popup attribute of the input.
+   * @private
+   */
+  @property({ type: String })
+    _ariaHasPopup?: string;
+
+  /**
+   * Defines is it the touch of the input field (only for mobile devices).
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isTouched!: boolean;
+
   static i18nBundle: I18nBundle;
 
-  static async onDefine() {
-    UDExTextField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  static async onDefine(): Promise<void> {
+    UDExTextField.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
-  get valueStateTypeMappings() {
+  get valueStateTypeMappings(): Record<string, string> {
     return {
       "Success": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),
       "Standard": UDExTextField.i18nBundle.getText(VALUE_STATE_INFORMATION),
@@ -302,15 +326,15 @@ class UDExTextField extends UI5Element {
     };
   }
 
-  get hasValueState() {
+  get hasValueState(): boolean {
     return this.valueState !== ValueState.Standard;
   }
 
-  get valueStateText() {
+  get valueStateText(): string | undefined {
     return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
   }
 
-  get readOnlyStateText() {
+  get readOnlyStateText(): string {
     return UDExTextField.i18nBundle.getText(READ_ONLY);
   }
 
@@ -318,44 +342,50 @@ class UDExTextField extends UI5Element {
     return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();
   }
 
-  get supportingTextId():string {
+  get supportingTextId(): string {
     return this.supportingText ? `${this._id}-supportingTextDesc` : "";
   }
 
-  get valueStateTextId():string {
+  get valueStateTextId(): string {
     return this.hasValueState ? `${this._id}-valueStateDesc` : "";
   }
 
-  get readOnlyStateTextId():string {
+  get readOnlyStateTextId(): string {
     return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
   }
 
-  get accInfo() {
+  get accInfo(): AccInfo {
     return {
       "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
       "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
       "ariaLabelledBy": this.accessibleNameRef,
       "ariaLabel": this.accessibleName || undefined,
+      "ariaHasPopup": this._ariaHasPopup || undefined,
     };
   }
 
-  handleChange = () => {
+  handleChange = (): void => {
     this.fireEvent("change");
   };
 
   handleInput = (inputEvent: InputEvent) => {
     this.value = (inputEvent.target as HTMLInputElement)?.value;
-    this.fireEvent("input");
   };
 
-  handleFocus = () => {
+  handleClick = (): void => {
+    if (!isDesktop()) {
+      this._isTouched = true;
+    }
+  };
+
+  handleFocus = (): void => {
     if (!this.disabled && !this.readonly && !this.displayonly) {
       this.labelActiveClass = this._labelActiveClassName;
       this.active = true;
     }
   };
 
-  handleBlur = () => {
+  handleBlur = (): void => {
     this.active = false;
 
     if (this.value) {
@@ -363,9 +393,10 @@ class UDExTextField extends UI5Element {
     } else {
       this.labelActiveClass = "";
     }
+    this._isTouched = false;
   };
 
-  handleKeyDown = (keyboardEvent: KeyboardEvent) => {
+  handleKeyDown = (keyboardEvent: KeyboardEvent): void => {
     keyboardEvent.stopPropagation();
     this.fireEvent("click-trigger", keyboardEvent);
   };
@@ -374,7 +405,7 @@ class UDExTextField extends UI5Element {
     this.fireEvent("click-icon");
   }
 
-  onBeforeRendering() {
+  onBeforeRendering(): void {
     if ((this.value || this.active) && this.labelActiveClass === "") {
       this.labelActiveClass = this._labelActiveClassName;
     } else if (!this.active && !this.value && this.labelActiveClass.length) {
@@ -398,7 +429,7 @@ class UDExTextField extends UI5Element {
     }
   }
 
-  get readonlyNotDisabled() {
+  get readonlyNotDisabled(): boolean {
     return this.isInputReadonly && !this.disabled;
   }
 }