@sapudex/web-components 0.114.2 → 0.127.6

package/src/SelectBox.hbs

@@ -1,85 +1,85 @@
 <div class="udex-select-box__root">
     <div class="udex-text-field__container">
-        <div
-            @click="{{getHandleSingleSelectOpen}}"
-            class="udex-text-field__input"
-            @ui5-iconClick="{{handleRemoveTag}}"
-            @keydown="{{handleKeyDownTrigger}}"
-            ?open="{{_open}}"
-            tabindex="{{effectiveTabIndex}}"
-            @focusin="{{handleFocusIn}}"
-            @focusout="{{handleFocusOut}}"
-            ?disabled="{{disabled}}"
-            ?displayonly="{{displayonly}}"
-            ?readonly="{{readonly}}"
-            role="combobox"
-            aria-label="{{accInfo.ariaLabel}}"
-            aria-labelledby="{{accInfo.ariaLabelledBy}}"
-            aria-readonly="{{isReadOrDisplayOnly}}"
-            aria-disabled="{{disabled}}"
-            aria-haspopup="listbox"
-            aria-controls="udex-select-box__dropdown"
-            aria-expanded="{{tokenizerExpanded}}"
-            aria-activedescendant>
-            {{#if label}}
-                <span class="{{labelClass}}">
+        <div class="udex-text-field__wrap">
+            <div
+                @click="{{getHandleSingleSelectOpen}}"
+                class="udex-text-field__input"
+                @ui5-iconClick="{{handleRemoveTag}}"
+                @keydown="{{handleKeyDownTrigger}}"
+                ?open="{{_open}}"
+                tabindex="{{effectiveTabIndex}}"
+                @focusin="{{handleFocusIn}}"
+                @focusout="{{handleFocusOut}}"
+                ?disabled="{{disabled}}"
+                ?displayonly="{{displayonly}}"
+                ?readonly="{{readonly}}"
+                role="combobox"
+                aria-label="{{accInfo.ariaLabel}}"
+                aria-labelledby="{{accInfo.ariaLabelledBy}}"
+                aria-readonly="{{isReadOrDisplayOnly}}"
+                aria-disabled="{{disabled}}"
+                aria-haspopup="listbox"
+                aria-controls="udex-select-box__dropdown"
+                aria-expanded="{{tokenizerExpanded}}"
+                aria-activedescendant>
+                {{#if label}}
+                    <span class="{{labelClass}}">
                     {{label}}
-                    {{#if required}}
-                        *
-                    {{/if}}
+                        {{#if required}}
+                            *
+                        {{/if}}
                 </span>
-            {{/if}}
-            {{#if showSingleSelectedOption}}
-                <div class="udex-text-field__text-holder">
+                {{/if}}
+                {{#if showSingleSelectedOption}}
+                    <div class="udex-text-field__text-holder">
                     <span class="udex-text-field__single-label">
                         {{{_singleSelectedOption}}}
                     </span>
-                </div>
-            {{/if}}
-            {{#if showMultiSelectedOptions}}
-                <ui5-tokenizer
-                    part="tokenizer"
-                    show-more
-                    @ui5-selectionChange="{{handleTagPress}}"
-                    @keydown="{{handleKeydownTokenizer}}"
-                    prevent-popover-open
-                    class="{{tokenizerClass}}"
-                    ?disabled="{{disabled}}"
-                    @ui5-show-more-items-press="{{getHandlerShowMoreItems}}"
-                    ?expanded="{{tokenizerExpanded}}">
-                    {{#each selectedItems}}
-                        {{#unless this.isGroup}}
-                            <udex-tag
-                                accessible-role="option"
-                                class="udex-text-field__token"
-                                @keydown="{{../handleKeyDownTag}}"
-                                ?read-only="{{../isReadOrDisplayOnly}}"
-                                data-id="{{this._id}}"
-                                part="token-{{@index}}"
-                                text="{{this.label}}"
-                                icon="decline">
-                            </udex-tag>
-                        {{/unless}}
-                    {{/each}}
-                </ui5-tokenizer>
-            {{/if}}
-            {{#if showTrigger}}
-                <div
-                    class="udex-text-field__trigger"
-                    role="combobox"
-                    aria-label="{{iconAccessibleNameText}}"
-                    aria-haspopup="listbox"
-                    aria-expanded="{{_open}}"
-                    aria-controls="{{accInfo.ariaControls}}"
-                    @click="{{getHandleMultiSelectOpen}}"
-                    aria-activedescendant>
-                    <ui5-icon
-                        class="udex-text-field__icon"
-                        name="navigation-down-arrow"
-                        accessible-name="{{iconAccessibleNameText}}">
-                    </ui5-icon>
-                </div>
-            {{/if}}
+                    </div>
+                {{/if}}
+                {{#if showMultiSelectedOptions}}
+                    <ui5-tokenizer
+                            part="tokenizer"
+                            show-more
+                            @ui5-selectionChange="{{handleTagPress}}"
+                            @keydown="{{handleKeydownTokenizer}}"
+                            prevent-popover-open
+                            class="{{tokenizerClass}}"
+                            ?disabled="{{disabled}}"
+                            @ui5-show-more-items-press="{{getHandlerShowMoreItems}}"
+                            ?expanded="{{tokenizerExpanded}}">
+                        {{#each selectedItems}}
+                            {{#unless this.isGroup}}
+                                <udex-tag
+                                        accessible-role="option"
+                                        class="udex-text-field__token"
+                                        @keydown="{{../handleKeyDownTag}}"
+                                        ?read-only="{{../isReadOrDisplayOnly}}"
+                                        data-id="{{this._id}}"
+                                        part="token-{{@index}}"
+                                        text="{{this.label}}"
+                                        icon="decline">
+                                </udex-tag>
+                            {{/unless}}
+                        {{/each}}
+                    </ui5-tokenizer>
+                {{/if}}
+                {{#if showTrigger}}
+                    <udex-control-button
+                        class="udex-text-field__trigger"
+                        role="combobox"
+                        size="Large"
+                        icon="navigation-down-arrow"
+                        accessible-name="{{iconAccessibleNameText}}"
+                        aria-label="{{iconAccessibleNameText}}"
+                        aria-haspopup="listbox"
+                        aria-expanded="{{_open}}"
+                        aria-controls="{{accInfo.ariaControls}}"
+                        @click="{{getHandleMultiSelectOpen}}"
+                        aria-activedescendant>
+                    </udex-control-button>
+                {{/if}}
+            </div>
         </div>
         {{#if supportingText}}
             <udex-status-message
@@ -102,8 +102,8 @@
         @ui5-handle-value-reset="{{handleResetSearch}}"
         @before-open="{{handleDropdownBeforeOpen}}"
         @after-close="{{handleDropdownAfterClose}}"
+        @search-keydown="{{handleKeyDownSearch}}"
         height="{{height}}"
-        accessible-role="Dialog"
         horizontal-align="Left">
         {{#if _showTagsDropdownContent}}
             <div class="udex-truncatable-tag-content">

package/src/SelectBox.ts

@@ -44,6 +44,7 @@ import SelectBoxCss from "./generated/themes/SelectBox.css.js";
 import TextFieldCss from "./generated/themes/TextField.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import UDExStatusMessage from "./StatusMessage.js";
+import UDExControlButton from "./ControlButton.js";
 
 /**
  * @class
@@ -84,6 +85,7 @@ import UDExStatusMessage from "./StatusMessage.js";
     Token,
     Icon,
     UDExStatusMessage,
+    UDExControlButton,
   ],
 })
 
@@ -444,9 +446,22 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleKeyDownDropdown(e: KeyboardEvent) {
+    const isTabPrevPress = isTabPrevious(e) && !this._search;
+
     if (isEscape(e)) {
       this.trigger.focus();
     }
+
+    if (isTabNext(e) || isTabPrevPress) {
+      this.closeDropdown();
+    }
+  }
+
+  handleKeyDownSearch(e: CustomEvent) {
+    const keyEvent = e.detail as KeyboardEvent;
+    if (isTabPrevious(keyEvent) || isEscape(keyEvent)) {
+      this.closeDropdown();
+    }
   }
 
   handleOutsideClick(): void {
@@ -462,7 +477,9 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   closeDropdown() {
-    this._dropdown.onClose();
+    if (this._dropdown.open) {
+      this._dropdown.onClose();
+    }
   }
 
   scrollToTag(index: number) {

package/src/StatusBadge.hbs

@@ -0,0 +1,9 @@
+<div 
+    class="udex-status-badge"
+    title="{{ariaTitle}}">
+    <ui5-icon 
+        name="{{iconFieldName}}" 
+        class="udex-status-badge__icon" 
+        accessible-name="{{badgeAccessibleName}}">
+    </ui5-icon>
+</div>

package/src/StatusBadge.ts

@@ -0,0 +1,129 @@
+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 Icon from "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/edit.js";
+import "@ui5/webcomponents-icons/dist/information.js";
+import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import {
+  STATUS_BADGE_TEXT,
+  STATUS_BADGE_EDIT_TITLE,
+  STATUS_BADGE_INFORMATION_TITLE,
+  STATUS_BADGE_ERROR_TITLE,
+  STATUS_BADGE_SUCCESS_TITLE,
+  STATUS_BADGE_WARNING_TITLE,
+} from "./generated/i18n/i18n-defaults.js";
+
+import StatusBadgeTemplate from "./generated/templates/StatusBadgeTemplate.lit.js";
+
+// Styles
+import StatusBadgeCss from "./generated/themes/StatusBadge.css.js";
+
+export enum IconMapping {
+  Success = "sys-enter-2",
+  Error = "error",
+  Warning = "alert",
+  Edit = "edit",
+  Information = "information",
+}
+
+export enum BadgeSize {
+  XS = "XS",
+  S = "S",
+  M = "M",
+  L = "L",
+  XL = "XL",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-status-badge</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/StatusBadge.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-status-badge",
+  renderer: litRender,
+  styles: StatusBadgeCss,
+  template: StatusBadgeTemplate,
+  dependencies: [Icon],
+})
+class UDExStatusBadge extends UI5Element {
+  /**
+   * Defines the value state of the component.
+   *
+   * @default "Information"
+   * @public
+   */
+  @property({ type: IconMapping, defaultValue: IconMapping.Information })
+    valueState!: "Information" | "Warning" | "Error" | "Success" | "Edit";
+
+  /**
+   * Defines predefined size of the component.
+   *
+   * @default "S"
+   * @public
+   */
+  @property({ type: BadgeSize, defaultValue: BadgeSize.S })
+    size!: `${BadgeSize}`;
+
+  /**
+   * Defines the text alternative of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    accessibleName!: string;
+
+  static i18nBundle: I18nBundle;
+
+  static async onDefine(): Promise<void> {
+    UDExStatusBadge.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
+  get iconFieldName(): string {
+    if (!IconMapping[this.valueState]) {
+      return IconMapping.Information;
+    }
+    return IconMapping[this.valueState];
+  }
+
+  get badgeAccessibleName(): string {
+    return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;
+  }
+
+  get ariaTitle() {
+    switch (IconMapping[this.valueState]) {
+    case IconMapping.Edit:
+      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);
+    case IconMapping.Information:
+      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_INFORMATION_TITLE);
+    case IconMapping.Success:
+      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_SUCCESS_TITLE);
+    case IconMapping.Error:
+      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_ERROR_TITLE);
+    case IconMapping.Warning:
+      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_WARNING_TITLE);
+    }
+  }
+}
+
+UDExStatusBadge.define();
+
+export default UDExStatusBadge;

package/src/Switch.hbs

@@ -1,12 +1,12 @@
 <div class="udex-switch">
     {{#if label}}
-        <label for="udex-switch__input" class="udex-switch__label">{{label}}</label>
+        <label id="{{this._id}}-switch__label" for="{{this._id}}-switch__input" class="udex-switch__label" part="label">{{label}}</label>
     {{/if}}
     <div
         class="udex-switch__container"
         role="switch"
         aria-label="{{accessibleName}}"
-        aria-labelledby="{{accessibleNameRef}}"
+        aria-labelledby="{{ariaLabeledBy}}"
         aria-checked="{{checked}}"
         aria-disabled="{{disabled}}"
         tabindex="{{switchTabIndex}}"
@@ -32,6 +32,6 @@
             </div>
         </div>
 
-        <input id="udex-switch__input" type="checkbox" ?checked="{{checked}}" class="udex-switch__input" />
+        <input id="{{this._id}}-switch__input" type="checkbox" ?checked="{{checked}}" class="udex-switch__input" />
     </div>
 </div>

package/src/Switch.ts

@@ -131,6 +131,10 @@ class UDExSwitch extends UI5Element {
   get isSemanticColor(): boolean {
     return this.color === SwitchColor.Semantic;
   }
+
+  get ariaLabeledBy(): string {
+    return this.accessibleNameRef || this.label ? `${this._id}-switch__label` : "";
+  }
 }
 
 UDExSwitch.define();

package/src/Tab.ts

@@ -46,6 +46,7 @@ interface ITab extends UI5Element {
   _slotName: string;
   _selected?: boolean;
   _tabIndex: string;
+  _contentTabIndex: string;
   _iconWithoutBackground: boolean;
   _posinset?: number;
   _setsize?: number;
@@ -173,6 +174,15 @@ class UDExTab extends UI5Element implements ITab {
   @property({ type: String })
     _tabIndex!: string;
 
+  /**
+   * Defines the tabindex of the tab content.
+   *
+   * @private
+   * @default -1
+   */
+  @property({ type: String })
+    _contentTabIndex!: string;
+
   /**
    * Defines the background color of the component.
    *
@@ -279,7 +289,7 @@ class UDExTab extends UI5Element implements ITab {
   }
 
   get accessibleNameText() {
-    return this.accessibleName || (this.showAttentionBadge ? `, Attention badge ${UDExTab.i18nBundle.getText(ATTENTION_BADGE)}` : "");
+    return this.accessibleName || (this.showAttentionBadge ? `, ${UDExTab.i18nBundle.getText(ATTENTION_BADGE)}` : "");
   }
 
   static get headerTemplate() {

package/src/TabInOverflow.hbs

@@ -3,7 +3,7 @@
         id="{{this._id}}"
         class="udex-tab-overflow__button"
         role="tab"
-    >
+        tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
             <span class="udex-tab-overflow__button-icon">
                 <ui5-icon
@@ -21,11 +21,12 @@
     </button>
 {{else}}
     <a
+        id="{{this._id}}"
         href="{{href}}"
         target="{{this.target}}"
         class="udex-tab-overflow__button"
         role="tab"
-    >
+        tabindex="{{_tabIndex}}">
         {{#if hasIcon}}
             <span class="udex-tab-overflow__button-icon">
                 <ui5-icon

package/src/TabNavigation.hbs

@@ -3,15 +3,14 @@
         id="{{_id}}-header"
         class="udex-tab-navigation__header"
         part="tab-navigation-header"
-        @keydown="{{handleKeyDown}}"
-    >
+        @keydown="{{handleKeyDown}}">
         <div
             id="{{_id}}-header-tabs"
             class="udex-tab-navigation__header-tabs"
             role="tablist"
+            aria-labelledby="tablist-{{_id}}"
             part="tab-navigation-header-tabs"
-            @click="{{onTabClick}}"
-        >
+            @click="{{onTabClick}}">
             {{#each items}}
                 {{this.tabNavigation}}
             {{/each}}
@@ -20,26 +19,29 @@
             class="udex-tab-navigation__button-more"
             @click="{{handleMoreButton}}"
             @keydown="{{handleFocusMoreButton}}"
-            tabindex="-1"
+            tabindex="0"
             aria-haspopup="menu"
             aria-expanded="{{_isExpanded}}"
             tooltip="{{moreButtonText}}"
-            hidden
-        >
+            hidden>
             {{moreButtonText}}
             <ui5-icon
                 class="udex-tab-navigation__button-more-icon"
                 name="navigation-down-arrow"
             ></ui5-icon>
         </button>
+        {{tabNavigationPopover}}
     </div>
     <div
         class="udex-tab-navigation__content"
         id="udex-{{__id}}-content"
-        part="tab-navigation-content"
-    >
+        part="tab-navigation-content">
         {{#each items}}
-            <div class="udex-tab-navigation__content-item">
+            <div
+                class="udex-tab-navigation__content-item"
+                id="{{_contentId}}"
+                aria-labelledby="{{_id}}"
+                tabindex="{{_contentTabIndex}}">
                 <slot name="{{this._slotName}}"></slot>
             </div>
         {{/each}}