@sapudex/web-components 0.127.6 → 0.138.0

package/src/Switch.ts

@@ -22,6 +22,26 @@ export enum SwitchColor {
   Semantic = "Semantic",
 }
 
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-switch</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Switch.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-switch
+ * @public
+ */
+
 @customElement({
   tag: "udex-switch",
   renderer: litRender,
@@ -29,6 +49,7 @@ export enum SwitchColor {
   template: SwitchTemplate,
   dependencies: [Icon],
 })
+
 /**
  * Fired when the component checked state changes.
  *

package/src/Tab.ts

@@ -67,7 +67,7 @@ interface ITab extends UI5Element {
  * For the <code>udex-tab</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/Tab.js";</code>
+ * <code>import "@udex/web-components/dist/Tab.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/TabHeader.hbs

@@ -33,7 +33,9 @@
 
 {{#*inline "tab-content"}}
     {{#if hasIcon}}
-        <span class="udex-tab-navigation__button-icon-outer">
+        <span class="udex-tab-navigation__button-icon-outer"
+            role="presentation"
+            aria-hidden="true">
             <ui5-icon
                 class="udex-tab-navigation__button-icon"
                 name="{{icon}}"

package/src/TabInOverflow.hbs

@@ -3,9 +3,12 @@
         id="{{this._id}}"
         class="udex-tab-overflow__button"
         role="tab"
+        aria-selected="{{this.effectiveSelected}}"
         tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
-            <span class="udex-tab-overflow__button-icon">
+            <span class="udex-tab-overflow__button-icon"
+                role="presentation"
+                aria-hidden="true">
                 <ui5-icon
                     name="{{icon}}"
                 ></ui5-icon>
@@ -16,7 +19,10 @@
         {{/if}}
         {{text}}
         {{#if hasNotIcon}}
-            <span class="udex-tab-overflow__button-badge"></span>
+            <span class="udex-tab-overflow__button-badge"
+                role="presentation"
+                aria-hidden="true">
+            </span>
         {{/if}}
     </button>
 {{else}}
@@ -26,9 +32,12 @@
         target="{{this.target}}"
         class="udex-tab-overflow__button"
         role="tab"
+        aria-selected="{{this.effectiveSelected}}"
         tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
-            <span class="udex-tab-overflow__button-icon">
+            <span class="udex-tab-overflow__button-icon"
+                role="presentation"
+                aria-hidden="true">
                 <ui5-icon
                     name="{{icon}}"
                 ></ui5-icon>
@@ -39,7 +48,10 @@
         {{/if}}
         {{text}}
         {{#if hasNotIcon}}
-            <span class="udex-tab-overflow__button-badge"></span>
+            <span class="udex-tab-overflow__button-badge"
+                role="presentation"
+                aria-hidden="true">
+            </span>
         {{/if}}
     </a>
 {{/if}}

package/src/TabNavigation.hbs

@@ -37,13 +37,21 @@
         id="udex-{{__id}}-content"
         part="tab-navigation-content">
         {{#each items}}
-            <div
-                class="udex-tab-navigation__content-item"
-                id="{{_contentId}}"
-                aria-labelledby="{{_id}}"
-                tabindex="{{_contentTabIndex}}">
-                <slot name="{{this._slotName}}"></slot>
-            </div>
+            {{#if this.selected}}
+                <div
+                    class="udex-tab-navigation__content-item"
+                    id="{{_contentId}}"
+                    aria-labelledby="{{_id}}"
+                    tabindex="{{_contentTabIndex}}">
+                    <slot name="{{this._slotName}}"></slot>
+                </div>
+            {{else}}
+                <div
+                    class="udex-tab-navigation__content-item"
+                    id="{{_contentId}}">
+                    <slot name="{{this._slotName}}"></slot>
+                </div>
+            {{/if}}
         {{/each}}
     </div>
 </div>

package/src/TabNavigation.ts

@@ -59,7 +59,7 @@ export enum Mode {
  * For the <code>udex-tab-navigation</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @udex/web-components/dist/TabNavigation.js";</code>
+ * <code>import "@udex/web-components/dist/TabNavigation.js";</code>
  *
  * @constructor
  * @author SAP SE

package/src/Tag.hbs

@@ -2,30 +2,46 @@
     <div class="{{tagClasses}}">
         <span class="udex-tag__text">{{{text}}}</span>
     </div>
+{{else if href}}
+    <a role="{{accessibleRole}}" class="{{tagClasses}}" @click="{{tagLinkClickHandler}}" href="{{href}}">
+        {{#if startIcon}}
+            <ui5-icon
+                    class="udex-tag__icon udex-tag__icon--start"
+                    name="{{icon}}">
+            </ui5-icon>
+        {{/if}}
+        <span class="udex-tag__text">{{{text}}}</span>
+        {{#if endIcon}}
+            <ui5-icon
+                    class="udex-tag__icon udex-tag__icon--end"
+                    name="{{icon}}">
+            </ui5-icon>
+        {{/if}}
+    </a>
 {{else if nonSelectable}}
     <div class="{{tagClasses}}">
         {{#if startIcon}}
             <button
-                class="udex-tag__btn-icon"
-                @click="{{iconClickHandler}}"
-                role="{{accessibleRole}}"
-                aria-label="{{iconAccessibleName}}">
+                    class="udex-tag__btn-icon"
+                    @click="{{iconClickHandler}}"
+                    role="{{accessibleRole}}"
+                    aria-label="{{iconAccessibleName}}">
                 <ui5-icon
-                    class="udex-tag__icon udex-tag__icon--start"
-                    name="{{icon}}">
+                        class="udex-tag__icon udex-tag__icon--start"
+                        name="{{icon}}">
                 </ui5-icon>
             </button>
         {{/if}}
         <span class="udex-tag__text">{{{text}}}</span>
         {{#if endIcon}}
             <button
-                class="udex-tag__btn-icon"
-                @click="{{iconClickHandler}}"
-                role="{{accessibleRole}}"
-                aria-label="{{iconAccessibleName}}">
+                    class="udex-tag__btn-icon"
+                    @click="{{iconClickHandler}}"
+                    role="{{accessibleRole}}"
+                    aria-label="{{iconAccessibleName}}">
                 <ui5-icon
-                    class="udex-tag__icon udex-tag__icon--end"
-                    name="{{icon}}">
+                        class="udex-tag__icon udex-tag__icon--end"
+                        name="{{icon}}">
                 </ui5-icon>
             </button>
         {{/if}}

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,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() {
@@ -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() {